:root { --ink:#eef4ff; --muted:#9aa8bb; --dim:#64738a; --bg:#07111f; --panel:#0d1b2e; --panel-2:#10243b; --line:rgba(184,207,236,.16); --accent:#5ce1e6; --accent-2:#8d7aff; --warm:#ffb86b; --radius:18px; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:-999px; top:12px; padding:10px 14px; background:var(--accent); color:#061015; z-index:10; }
.skip-link:focus { left:12px; }
.site-header, .section, .site-footer { width:min(calc(100% - 40px), var(--max)); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:26px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--accent); color:var(--accent); border-radius:9px; font-size:17px; }
nav { display:flex; align-items:center; gap:26px; color:var(--muted); font-size:14px; } nav a:hover, .text-link:hover { color:var(--ink); }
.nav-cta { color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:9px 14px; }
.section { padding:92px 0; }
.hero { min-height:650px; display:grid; grid-template-columns:1fr .9fr; gap:80px; align-items:center; padding-top:68px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; margin:0 0 18px; }
.pulse, .tiny-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(92,225,230,.12); margin-right:8px; vertical-align:1px; }
h1, h2, h3, p { margin-top:0; } h1 { font-size:clamp(48px, 6vw, 82px); line-height:.99; letter-spacing:-.065em; max-width:700px; margin-bottom:28px; } h2 { font-size:clamp(34px, 4vw, 56px); line-height:1.03; letter-spacing:-.05em; margin-bottom:20px; } h3 { font-size:20px; letter-spacing:-.025em; margin-bottom:8px; }
.hero-text { color:var(--muted); font-size:18px; max-width:560px; margin-bottom:30px; }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:999px; padding:14px 19px; font:inherit; font-weight:750; cursor:pointer; }.button-primary { color:#061015; background:var(--accent); box-shadow:0 10px 30px rgba(92,225,230,.16); }.button-primary:hover { background:#9bf2f4; transform:translateY(-1px); }.text-link { color:var(--accent); font-weight:700; font-size:14px; }.microcopy { color:var(--dim); font-size:12px; margin-top:24px; }
.signal-board { background:linear-gradient(145deg, rgba(17,39,63,.98), rgba(8,19,33,.98)); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 28px 100px rgba(0,0,0,.25); transform:rotate(1.2deg); }.board-topline, .board-footer { display:flex; justify-content:space-between; color:var(--dim); font-size:10px; letter-spacing:.12em; }.board-status { color:var(--accent); }.signal-flow { display:grid; grid-template-columns:1fr 28px 1fr 28px 1fr; align-items:center; margin:86px 0; }.flow-line { height:1px; background:linear-gradient(90deg, var(--accent-2), var(--accent)); position:relative; }.flow-line::after { content:""; position:absolute; right:-1px; top:-3px; width:6px; height:6px; border-radius:50%; background:var(--accent); }.signal-card { min-height:150px; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); display:flex; flex-direction:column; justify-content:space-between; }.signal-card strong { font-size:38px; letter-spacing:-.06em; }.signal-card small { color:var(--muted); font-size:11px; line-height:1.35; }.card-label { font-size:9px; letter-spacing:.12em; color:var(--dim); }.active-card { border-color:rgba(92,225,230,.58); box-shadow:inset 0 0 35px rgba(92,225,230,.06); }.active-card strong { color:var(--accent); }.result-card { border-color:rgba(255,184,107,.4); }.result-card strong { color:var(--warm); }
.problem { border-top:1px solid var(--line); }.section-intro { max-width:650px; }.section-intro > p:last-child, .section-note, .audience-card > p, .step p, .problem-grid p { color:var(--muted); }.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }.problem-grid article, .step { border-top:1px solid var(--line); padding-top:18px; }.number, .step-index { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.12em; }
.section-heading-row { display:flex; justify-content:space-between; align-items:end; gap:40px; }.section-note { max-width:300px; font-size:14px; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:45px; }.step { min-height:190px; }.step-index { display:block; margin-bottom:42px; }
.audience { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }.audience-card, .audience-aside, .cta-panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:40px; }.audience-card > p { max-width:560px; }.audience-aside { display:flex; flex-direction:column; justify-content:center; background:linear-gradient(145deg, var(--panel-2), var(--panel)); }.quote-mark { color:var(--accent); font-size:60px; line-height:.6; margin-bottom:25px; }.quote { font-size:25px; line-height:1.15; letter-spacing:-.035em; }.quote-source { color:var(--dim); font-size:12px; }
.early-access { padding-top:20px; }.cta-panel { display:grid; grid-template-columns:1fr 1fr; gap:50px; background:linear-gradient(120deg, rgba(92,225,230,.11), rgba(141,122,255,.1)); }.cta-panel h2 { max-width:500px; }.cta-panel p { color:var(--muted); }.interest-form { align-self:center; }.interest-form label { display:block; color:var(--muted); font-size:13px; margin-bottom:8px; }.form-row { display:flex; gap:10px; }.form-row input { min-width:0; flex:1; border:1px solid var(--line); border-radius:999px; padding:14px 16px; background:rgba(0,0,0,.18); color:var(--ink); font:inherit; }.form-row input:focus { outline:2px solid var(--accent); outline-offset:2px; }.form-status { min-height:24px; font-size:13px; margin:12px 0 0; }.consent-row { display:flex !important; gap:8px; align-items:flex-start; margin-top:12px; color:var(--muted); font-size:13px !important; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-footer { display:flex; justify-content:space-between; color:var(--dim); font-size:12px; border-top:1px solid var(--line); padding:24px 0 35px; }
@media (max-width:850px) { nav a:not(.nav-cta) { display:none; }.hero, .audience, .cta-panel { grid-template-columns:1fr; gap:40px; }.hero { padding-top:45px; min-height:auto; }.signal-board { transform:none; }.problem-grid, .steps { grid-template-columns:1fr; gap:34px; }.step { min-height:auto; }.step-index { margin-bottom:20px; } }
@media (max-width:560px) { .site-header, .section, .site-footer { width:min(calc(100% - 28px), var(--max)); }.section { padding:65px 0; } h1 { font-size:49px; }.signal-flow { grid-template-columns:1fr; gap:12px; margin:40px 0; }.flow-line { width:1px; height:22px; margin:auto; }.flow-line::after { top:auto; bottom:-1px; right:-3px; }.signal-card { min-height:115px; }.signal-card strong { font-size:32px; }.cta-panel, .audience-card, .audience-aside { padding:25px; }.form-row { flex-direction:column; }.form-row .button { width:100%; }.site-footer { gap:20px; flex-direction:column; } }