/* ───────────────────────────────────────────────────────────
   Prior Moves — landing styles. Tokens mirror app.py _CSS.
   ─────────────────────────────────────────────────────────── */
:root{
  --bg:#0a0f1c; --panel:#111a2e; --panel-2:#16223b; --border:#243149;
  --text:#e9eef8; --muted:#93a4be; --faint:#64748b;
  --accent:#3b82f6; --accent-2:#22d3ee; --gold:#f4b740;
  --green:#34d399; --red:#f87171;
  --maxw:1080px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(34,211,238,.06), transparent 60%),
    radial-gradient(900px 480px at 10% -6%, rgba(59,130,246,.08), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3{ letter-spacing:-.02em; line-height:1.1; margin:0 0 .5em; }
h1{ font-weight:800; font-size:clamp(2.1rem,5.2vw,3.5rem); letter-spacing:-.03em; }
h2{ font-weight:700; font-size:clamp(1.6rem,3.4vw,2.3rem); }
h3{ font-weight:700; font-size:1.12rem; }
p{ margin:0 0 1rem; }

.grad{
  background:linear-gradient(92deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent);
  color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0; z-index:100;
}
.skip-link:focus{ left:0; }

/* ── buttons ── */
.btn{
  display:inline-block; font-weight:600; font-size:.98rem; cursor:pointer;
  padding:.72rem 1.3rem; border-radius:10px; border:1px solid var(--border);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{
  background:linear-gradient(180deg,var(--accent),#2f6fe0);
  border-color:#2f6fe0; color:#fff;
  box-shadow:0 6px 20px rgba(59,130,246,.28);
}
.btn-primary:hover{ box-shadow:0 10px 30px rgba(59,130,246,.42); }
.btn-ghost{ background:var(--panel-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); }
.btn-sm{ padding:.5rem .95rem; font-size:.9rem; }
.btn-lg{ padding:.95rem 1.9rem; font-size:1.08rem; }

/* ── header ── */
.site-head{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem clamp(1rem,4vw,2rem);
  background:rgba(10,15,28,.78); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{ display:inline-flex; align-items:center; gap:.55rem; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand-mark{ border-radius:8px; }
.brand-name{ font-weight:800; font-size:1.2rem; letter-spacing:-.02em; }
.head-nav{ display:flex; align-items:center; gap:1.4rem; }
.head-nav a{ color:var(--muted); font-weight:600; font-size:.92rem; }
.head-nav a:hover{ color:var(--text); text-decoration:none; }
.head-nav a.btn{ color:#fff; }

/* ── layout bands ── */
.band{ max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2rem); }
.band-alt{ position:relative; max-width:none; }
.band-alt::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(17,26,46,.55),rgba(17,26,46,0));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.band-alt > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.band-alt{ padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2rem); }
.section-lede{ color:var(--muted); max-width:64ch; font-size:1.05rem; margin-bottom:2rem; }

/* ── hero ── */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(2.6rem,6vw,4.5rem) clamp(1rem,4vw,2rem) clamp(2rem,4vw,3rem);
  display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
}
.eyebrow{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2); margin:0 0 1rem;
  padding:.3rem .65rem; border:1px solid #1c6577; border-radius:999px;
  background:rgba(34,211,238,.08);
}
.hero h1{ margin-bottom:1rem; }
.lede{ color:var(--muted); font-size:1.13rem; max-width:54ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.6rem 0 .9rem; }
.hero-note{ color:var(--faint); font-size:.86rem; margin:0; }

.hero-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:16px;
  padding:1.4rem; box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.card-head{
  display:flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.82rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem;
}
.dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(52,211,153,.18); }
.stat-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.stat-list li{
  background:rgba(10,15,28,.45); border:1px solid var(--border);
  border-radius:12px; padding:.8rem .85rem;
}
.stat-num{ display:block; font-weight:800; font-size:1.7rem; letter-spacing:-.03em; color:var(--text); line-height:1; }
.stat-num small{ font-size:.7rem; color:var(--faint); font-weight:600; margin-left:.15rem; }
.stat-lab{ display:block; color:var(--muted); font-size:.78rem; margin-top:.35rem; line-height:1.35; }
.card-foot{ color:var(--faint); font-size:.74rem; margin:1rem 0 0; line-height:1.45; }

/* ── feature grid ── */
.grid{ display:grid; gap:1.1rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.feature{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:14px; padding:1.3rem 1.35rem;
}
.feature h3{ margin-bottom:.5rem; }
.feature p{ color:var(--muted); font-size:.96rem; margin:0; }

/* ── steps ── */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.steps li{
  display:flex; gap:1.1rem; align-items:flex-start;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:14px; padding:1.25rem 1.4rem;
}
.step-n{
  flex:none; width:2.6rem; height:2.6rem; border-radius:12px;
  display:grid; place-items:center; font-weight:800; font-size:1.25rem;
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.steps h3{ margin-bottom:.3rem; }
.steps p{ color:var(--muted); margin:0; font-size:.97rem; }
.cta-row{ margin-top:2rem; }

/* ── stat cards (track record) ── */
.stat-cards{ margin-bottom:1.6rem; }
.stat-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:14px; padding:1.3rem 1.1rem;
  display:flex; flex-direction:column; gap:.15rem;
}
.stat-card .big{ font-weight:800; font-size:2rem; letter-spacing:-.03em; color:var(--green); line-height:1; }
.stat-card .unit{ color:var(--faint); font-size:.78rem; font-weight:600; }
.stat-card .lab{ color:var(--muted); font-size:.85rem; margin-top:.55rem; line-height:1.4; }
.fine{ color:var(--muted); font-size:.95rem; max-width:72ch; }
.caveat{
  margin-top:1.4rem; padding:1.1rem 1.25rem; border-radius:12px;
  background:rgba(244,183,64,.07); border:1px solid #7a5c1e;
  color:#f6cf83; font-size:.92rem; max-width:72ch;
}
.caveat strong{ color:var(--gold); }

/* ── methodology ── */
.method{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:14px; padding:1.3rem 1.4rem;
}
.method h3{ margin-bottom:.5rem; color:var(--text); }
.method p{ color:var(--muted); font-size:.95rem; margin:0; }
.method strong{ color:var(--text); }

/* ── FAQ ── */
.faq{ display:grid; gap:.7rem; max-width:78ch; }
.faq details{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:12px; padding:0 1.25rem;
  transition:border-color .15s ease;
}
.faq details[open]{ border-color:#33507e; }
.faq summary{
  cursor:pointer; list-style:none; font-weight:600; font-size:1.02rem;
  padding:1.05rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; color:var(--accent); font-weight:700; font-size:1.4rem; line-height:1;
  transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--muted); margin:0; padding:0 0 1.1rem; font-size:.96rem; }

/* ── final CTA ── */
.final-cta{
  max-width:var(--maxw); margin:0 auto clamp(2rem,5vw,4rem);
  text-align:center; padding:clamp(2.4rem,6vw,4rem) clamp(1.4rem,4vw,2rem);
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(59,130,246,.16), transparent 70%),
    linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:20px;
}
.final-cta h2{ margin-bottom:.4rem; }
.final-cta p{ color:var(--muted); max-width:46ch; margin:0 auto 1.6rem; }

/* ── footer ── */
.site-foot{
  border-top:1px solid var(--border);
  padding:clamp(2.4rem,5vw,3.4rem) clamp(1rem,4vw,2rem) 2.6rem;
  background:rgba(10,15,28,.55);
}
.foot-cols{
  max-width:var(--maxw); margin:0 auto 1.8rem;
  display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:space-between; align-items:flex-start;
}
.foot-brand{ max-width:34ch; }
.foot-brand p{ color:var(--faint); font-size:.9rem; margin:.7rem 0 0; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:1.1rem; }
.foot-nav a{ color:var(--muted); font-weight:600; font-size:.92rem; }
.foot-nav a:hover{ color:var(--text); }
.disclaimer{
  max-width:var(--maxw); margin:0 auto 1rem; color:var(--faint);
  font-size:.82rem; line-height:1.6;
}
.disclaimer strong{ color:var(--muted); }
.copyright{ max-width:var(--maxw); margin:0 auto; color:var(--faint); font-size:.8rem; }

/* ── responsive ── */
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; }
  .hero-card{ order:2; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .head-nav a:not(.btn){ display:none; }
  .stat-list{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}