/* ===== Design tokens ===== */
:root{
  --bg:#0e1217;         /* site background */
  --panel:#151b23;      /* card/nav background */
  --ink:#e9eff6;        /* main text */
  --muted:#a0b2c6;      /* secondary text */
  --brand:#70a6ff;      /* primary brand color */
  --accent:#ff9b6b;     /* secondary accent */
  --ring:rgba(112,166,255,.35);
  --radius:14px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#0c1015,var(--bg));
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1120px; margin-inline:auto; padding:0 20px}

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:40; background:rgba(14,18,23,.72);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid #1e2732}
.site-header .container{display:flex; align-items:center; gap:16px; padding:12px 20px}
.brand{font-weight:700; letter-spacing:.3px}
.nav{margin-left:auto; display:flex; gap:16px}
.nav a{padding:8px 10px; border-radius:10px}
.nav a:hover{background:#1b2531}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; color:var(--ink); cursor:pointer}

/* Mobile nav */
@media (max-width: 820px){
  .nav{display:none}
  .nav[data-open="true"]{
    display:flex; position:absolute; top:56px; right:20px; flex-direction:column;
    background:var(--panel); padding:10px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35)
  }
  .nav-toggle{display:inline-block}
}

/* ===== Hero ===== */
.hero{padding:76px 0 36px}
.eyebrow{text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-size:.75rem}
h1{font-size:clamp(32px,5vw,56px); line-height:1.1; margin:.2em 0 .4em}
.lead{color:var(--muted); max-width:60ch}
.actions{display:flex; gap:12px; margin:18px 0 24px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:.2s
}
.btn.primary{background:var(--brand); color:#0b0f13; font-weight:600}
.btn.ghost{border-color:#2a3644}
.btn:hover{transform:translateY(-1px)}

.stats{display:flex; gap:12px; list-style:none; padding:0; margin:8px 0 0}
.stats li{background:var(--panel); border:1px solid #1e2732; padding:12px 14px; border-radius:12px}
.stats strong{display:block}

/* ===== Sections & cards ===== */
.section{padding:72px 0}
.section.alt{background:radial-gradient(1200px 500px at 100% 0, rgba(112,166,255,.09), transparent)}
.section-title{font-size:clamp(26px,3.6vw,36px); margin:0 0 18px}
.grid-2{display:grid; grid-template-columns:1.2fr 1fr; gap:28px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cards .card{
  background:var(--panel); border:1px solid #1e2732; padding:18px;
  border-radius:var(--radius); box-shadow:0 6px 24px rgba(0,0,0,.24)
}
.card h3{margin:0 0 8px}
.checklist{margin:10px 0 0; padding-left:20px}
.bullets{margin:10px 0 0; padding-left:18px}
.tight{margin:0; padding-left:18px}

/* Responsive grids */
@media (max-width: 980px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width: 720px){ .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} }

/* ===== Forms ===== */
.form{display:grid; gap:14px; margin-top:8px}
.form .grid-2{grid-template-columns:1fr 1fr}
.form input, .form textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid #223243; background:#0f151c; color:var(--ink);
  outline-color:var(--ring);
}
.form input:focus, .form textarea:focus{box-shadow:0 0 0 4px var(--ring)}

/* ===== Footer ===== */
.site-footer{padding:40px 0 20px; border-top:1px solid #1e2732; background:#0c1116}
.footer-grid{display:grid; gap:10px; align-items:start}
.footer-nav{display:flex; gap:16px; flex-wrap:wrap}
.muted{color:var(--muted)}
.copyright{margin-top:12px; color:var(--muted); font-size:.9rem}