:root{
  --bg:#ffffff;
  --ink:#0f172a;      /* deep slate */
  --muted:#475569;    /* slate-500 */
  --brand:#1d4ed8;    /* blue-700: assertive but friendly */
  --brand-ink:#ffffff;
  --card:#f1f5f9;     /* slate-100/200 */
  --ring: #93c5fd;    /* blue-300 */
  --radius:14px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

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

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e2e8f0}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{font-weight:800;font-size:1.125rem;color:var(--ink);text-decoration:none}
.nav{display:flex;gap:20px}
.nav-link{font-weight:600;color:var(--muted)}
.nav-link:hover{color:var(--ink)}

/* Hero */
.hero{padding:72px 0 40px;background:linear-gradient(180deg,#fff, #f8fafc)}
.hero-inner{max-width:800px;text-align:center}
.hero-title{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:0 0 12px;font-weight:800}
.hero-sub{color:var(--muted);font-size:1.125rem;margin:0 0 22px}
.optin{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.optin input{
  width:min(380px,100%);padding:14px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;
}
.optin input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.btn-primary{
  padding:14px 18px;border-radius:12px;border:none;background:var(--brand);color:var(--brand-ink);
  font-weight:700;cursor:pointer;box-shadow:var(--shadow);
}
.btn-primary:hover{filter:brightness(1.05)}
.trust{margin:14px 0 0;color:var(--muted);font-size:.95rem}
.badge{background:#e0e7ff;color:#1e3a8a;padding:4px 10px;border-radius:999px;font-weight:700}

/* Benefits grid */
.benefits{padding:40px 0}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{
  grid-column:span 3; /* 2 per row on desktop */
  background:var(--card);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);
}
.card h3{margin:0 0 6px;font-size:1.125rem}
.card p{margin:0;color:var(--muted)}
@media (min-width:900px){ .card{grid-column:span 2} } /* 3 per row on wide */

/* Sample section */
.sample{padding:24px 0 8px}
.sample h2{font-size:1.6rem;margin:0 0 10px}
.sample-list{margin:0 0 16px;padding-left:18px;color:var(--muted)}
.btn-ghost{
  display:inline-block;border:2px solid #e2e8f0;padding:12px 16px;border-radius:12px;font-weight:700;
}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* Second CTA */
.cta{padding:40px 0 60px;text-align:center;background:linear-gradient(180deg,#f8fafc,#fff)}
.cta h2{font-size:1.8rem;margin:0 0 12px}
.optin-inline{justify-content:center}
.privacy{color:var(--muted);margin-top:10px}

/* Footer */
.site-footer{border-top:1px solid #e2e8f0;background:#fff;padding:32px 0}
.footer-grid{display:grid;gap:18px;grid-template-columns:1fr}
.footer-grid h5{margin:.2rem 0 .4rem}
.legal{border-top:1px solid #e2e8f0;margin-top:14px;padding-top:14px;color:var(--muted);font-size:.95rem}
@media (min-width:900px){
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
}

/* Accessibility */
.sr-only{position:absolute;left:-9999px}