:root{
  --bg-dark: #0d0d0d;
  --bg: #111111;
  --text: #cccdd1;
  --text-muted: #787878;
  --action-primary: #c7372f;
  --action-secondary: #2468F2;
  --alert-danger: #C91F2D;
  --alert-warning: #F2A93B;
  --alert-success: #2F9E44;
  --alert-info: #2C7BE5;
}

body{ 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
    margin:0; 
    color: var(--text); 
    background:var(--bg-dark); 
    line-height: 1.5; 
}

a {
    text-decoration: none;
    color: var(--text);
}

.container{ 
    max-width:1100px; 
    margin:0 auto; 
    padding:28px; 
}

.text-muted {
    color: var(--text-muted);
}

.no-dots {
    list-style-type: none;
    padding-left: 0;
}

ul > li {
     color: var(--text-muted);
}

ul > li > strong {
     color: var(--text);
}

.hero h1 {
    font-size: 42px; 
    margin:0 0 12px;
}

.features { 
    display:grid; 
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); 
    gap:18px; 
    margin:28px 0; 
}

.feature-card { 
    background: var(--bg); 
    padding: 12px; 
    border-radius: 20px; 
    box-shadow:0 6px 18px rgba(10,10,10,0.03); 
}

.feature-card img {
    width: 100%;
    border-radius: 8px;
}

.feature-card > p {
    color: var(--text-muted);
}

.email-capture { 
    text-align:center; 
}
.email-capture input[type="email"] { 
    padding:12px 14px; 
    width:320px;
    max-width:80%; 
    border-radius:8px; 
    border:1px solid #ddd; 
    font-size:16px; 
}

.email-capture button { 
    padding:12px 18px; 
    margin-left:8px; 
    border-radius:8px; 
    background: var(--action-primary);
    color:white; 
    border:none; 
    font-weight:600; 
    cursor:pointer; 
}

.posts-list article{ 
    background: var(--bg); 
    padding:18px; 
    border-radius:8px; 
    margin-bottom:16px; 
    box-shadow:0 4px 12px rgba(0,0,0,0.04); 
}

.site-footer { 
    text-align:center; 
    color:#666; 
    background: var(--bg-dark);
}

footer > .container {
    padding: 12px;
}

section {
    margin: 64px 0px;
}

.hero { 
    padding: 48px 20px;
    text-align:center; 
    background:var(--bg); 
    border-radius:10px; 
    margin-top: 0px;
}

.hero .button {
    padding:12px 18px; 
    margin-left:8px; 
    border-radius:8px; 
    background: var(--action-primary);
    color:white; 
    border:none; 
    font-weight:600; 
    cursor:pointer; 
    text-decoration: none;
    margin-top: 24px;
}

.hero > p {
    color: var(--text-muted);
}

/* Responsive tweaks */
@media (max-width:720px){ 
    .features{ grid-template-columns:1fr } 
    .hero h1 { font-size:28px } 
    .email-capture button {
        margin-top: 18px;
    }
}