/* home.css — area-scoped styles for index.html (the public front door).
   Palette: action blue #2563eb + teal accents on a dark shell (#0d0e12/#11131a).
   No neon. All hover motion is compositor-only (transform/opacity) and gated
   behind prefers-reduced-motion: no-preference. Contrast pinned in home_test.js. */

/* Self-hosted faces — CSP font-src 'self', font-display:swap (no FOIT). */
@font-face{font-family:'Space Grotesk';font-weight:500 800;font-display:swap;src:url('./fonts/space-grotesk-latin.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400 700;font-display:swap;src:url('./fonts/jetbrains-mono-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:400 700;font-display:swap;src:url('./fonts/inter-400.woff2') format('woff2');}

:root{
  --serif:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --sans:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --t-cap:0.75rem; --t-sm:0.875rem; --t-base:1rem; --t-lg:1.25rem; --t-xl:1.75rem; --t-hero:clamp(2.4rem,8.5vw,4rem);
  --s-05:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px;
  --r:14px; --r-sm:10px; --ring:2px; --dur:160ms;
  /* dark shell */
  --bg:#0d0e12; --surface:#11131a; --surface-2:#0a0b0e;
  --text:#eef2f8; --muted:#9aa6b8;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.16);
  /* action blue + teal (verified WCAG AA in home_test.js) */
  --action:#2563eb; --action-hover:#1d4ed8; --on-action:#ffffff;
  --action-ink:#60a5fa; --teal-ink:#2dd4bf;
  --shadow-blue:rgba(37,99,235,0.35);
}
[data-theme="light"]{
  --bg:#f4f6fa; --surface:#ffffff; --surface-2:#eef1f6;
  --text:#0e1116; --muted:#4a5568;
  --line:rgba(8,12,20,0.10); --line-strong:rgba(8,12,20,0.18);
  --action:#2563eb; --action-hover:#1d4ed8; --on-action:#ffffff;
  --action-ink:#1e40af; --teal-ink:#0f766e;
  --shadow-blue:rgba(37,99,235,0.22);
}

*{box-sizing:border-box;}
html{color-scheme:dark;} [data-theme="light"]{color-scheme:light;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased;}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important;} }
:focus-visible{outline:var(--ring) solid var(--action-ink); outline-offset:3px; border-radius:2px;}

.shell{max-width:1120px; margin:0 auto; padding:var(--s-4) var(--s-3) var(--s-8);}

/* --- top bar --- */
.topbar{display:flex; align-items:center; justify-content:space-between; margin:0 0 var(--s-6); padding-bottom:var(--s-2); border-bottom:1px solid var(--line);}
.wordmark{font-family:var(--mono); font-weight:700; letter-spacing:0.2em; font-size:var(--t-sm); text-transform:uppercase; color:var(--text);}
.wordmark b{color:var(--action-ink); font-weight:700;}
.theme-toggle{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.08em; background:transparent; color:var(--muted); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--s-1) var(--s-2); min-height:44px; cursor:pointer; transition:color var(--dur),border-color var(--dur);}
.theme-toggle:hover{color:var(--text); border-color:var(--action-ink);}

/* --- hero (glance layer) --- */
.hero{max-width:44ch; margin:0 0 var(--s-6);}
.eyebrow{font-family:var(--mono); font-size:var(--t-cap); letter-spacing:0.18em; text-transform:uppercase; color:var(--action-ink); margin:0 0 var(--s-2); display:flex; align-items:center; gap:var(--s-1);}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--teal-ink); display:inline-block;}
.hero h1{font-family:var(--serif); font-weight:800; font-size:var(--t-hero); line-height:0.98; letter-spacing:-0.02em; margin:0 0 var(--s-2); color:var(--text);}
.hero-sub{color:var(--muted); font-size:var(--t-lg); margin:0 0 var(--s-3);}

/* --- free promise banner --- */
.free-banner{display:inline-flex; align-items:center; gap:var(--s-2); background:linear-gradient(90deg, rgba(37,99,235,0.14), rgba(45,212,191,0.10)); border:1px solid var(--line-strong); border-left:3px solid var(--action); border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); margin:0 0 var(--s-4); font-family:var(--mono); font-size:var(--t-sm); color:var(--text);}
.free-banner strong{color:var(--action-ink); font-weight:700;}

/* --- CTA row (one-tap entry) --- */
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; margin:0 0 var(--s-4);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1); min-height:52px; padding:0 var(--s-4); font-family:var(--serif); font-weight:700; font-size:var(--t-base); text-decoration:none; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:transform var(--dur),background var(--dur),border-color var(--dur),color var(--dur);}
.btn-primary{background:var(--action); color:var(--on-action); box-shadow:0 6px 20px var(--shadow-blue);}
.btn-primary:hover{background:var(--action-hover);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--action-ink); color:var(--action-ink);}
/* --- proof strip (honest, no dark patterns) --- */
.proof{display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-3); list-style:none; margin:0 0 var(--s-8); padding:0; font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);}
.proof li{display:flex; align-items:center; gap:6px;}
.proof li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--teal-ink);}

/* --- section heading --- */
.sec-head{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); margin:0 0 var(--s-3); padding-top:var(--s-4); border-top:1px solid var(--line);}

/* --- surfaces grid (glance + progressive disclosure) --- */
.surfaces{display:grid; grid-template-columns:1fr; gap:var(--s-2); margin:0 0 var(--s-6);}
@media (min-width:760px){ .surfaces{grid-template-columns:repeat(3,1fr); gap:var(--s-3);} }
.surface{position:relative; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:var(--s-4); display:flex; flex-direction:column;}
.surface::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:var(--r) 0 0 var(--r); background:linear-gradient(180deg,var(--action),var(--teal-ink)); opacity:0.9;}
.surface .k{font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.1em; color:var(--action-ink); margin:0 0 var(--s-1);}
.surface h2{font-family:var(--serif); font-weight:800; font-size:var(--t-xl); margin:0 0 var(--s-1); letter-spacing:-0.02em; color:var(--text);}
.surface .glance{color:var(--muted); font-size:var(--t-sm); margin:0 0 var(--s-3);}
.open-link{margin-top:auto; align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; gap:6px; color:var(--action-ink); text-decoration:none; font-family:var(--mono); font-size:var(--t-sm); font-weight:700;}
.open-link .arrow{transition:transform var(--dur);}

/* --- progressive disclosure (details/summary) --- */
.disclose{margin-top:var(--s-2); border-top:1px solid var(--line); padding-top:var(--s-1);}
.disclose > summary{cursor:pointer; list-style:none; min-height:44px; display:flex; align-items:center; gap:var(--s-1); font-family:var(--mono); font-size:var(--t-cap); text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);}
.disclose > summary::-webkit-details-marker{display:none;}
.disclose > summary::after{content:"+"; margin-left:auto; font-size:var(--t-base); color:var(--action-ink); line-height:1;}
.disclose[open] > summary::after{content:"\2212";}
.disclose > summary:hover{color:var(--text);}
.disclose .body{color:var(--muted); font-size:var(--t-sm); line-height:1.6; padding:var(--s-1) 0 var(--s-1);}

/* --- free section --- */
.free-card{background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:var(--s-4); margin:0 0 var(--s-6);}
.free-card h2{font-family:var(--serif); font-weight:800; font-size:var(--t-xl); margin:0 0 var(--s-1); letter-spacing:-0.02em;}
.free-card .glance{color:var(--muted); font-size:var(--t-base); margin:0 0 var(--s-3);}

/* --- footer disclaimer --- */
.foot{color:var(--muted); font-size:var(--t-cap); line-height:1.7; margin:var(--s-6) 0 0; padding-top:var(--s-3); border-top:1px solid var(--line); max-width:80ch;}
.foot-link{color:var(--action-ink); text-decoration:underline; text-underline-offset:2px;}
.foot-link:hover{color:var(--text);}
.foot-link:focus-visible{outline:2px solid var(--action-ink); outline-offset:2px;}

/* --- motion, gated (compositor-only transform) --- */
@media (prefers-reduced-motion: no-preference){
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0);}
  .surface{transition:transform var(--dur),border-color var(--dur);}
  .surface:hover{transform:translateY(-3px); border-color:var(--action-ink);}
  .open-link:hover .arrow{transform:translateX(3px);}
}