:root{
  --navy:#0b1b34; --deep:#071426; --panel:#0f2444; --panel2:#122a4f;
  --blue:#2d7aff; --cyan:#5cc8ff; --green:#28c76f; --amber:#ffb020; --red:#ff5c5c;
  --ink:#eaf1fb; --muted:#9fb2ce; --line:rgba(120,160,220,.16);
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--deep); color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(45,122,255,.22), transparent 60%),
    radial-gradient(900px 560px at 8% 4%, rgba(92,200,255,.12), transparent 55%),
    linear-gradient(180deg,#0a1a31 0%, #071426 60%, #050f1e 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(120,160,220,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,220,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
h1,h2,h3{line-height:1.12;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(38px,6.4vw,68px)}
h2{font-size:clamp(28px,4vw,44px)}
h3{font-size:20px;font-weight:700}
p{color:var(--muted)}
.grad{background:linear-gradient(100deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border-radius:12px;padding:13px 22px;cursor:pointer;border:1px solid transparent;transition:.2s transform,.2s box-shadow,.2s background}
.btn-primary{background:linear-gradient(100deg,var(--blue),#1e63e6);color:#fff;box-shadow:0 10px 30px rgba(45,122,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(45,122,255,.5)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(7,20,38,.72);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.01em}
.brand img{height:30px;width:30px}
.brand b{font-size:17px}
.brand span{color:var(--cyan)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14px;color:var(--muted);font-weight:600}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
@media(max-width:860px){.nav-links{display:none}}

/* hero */
.hero{padding:72px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:30px}}
.hero h1{margin:16px 0 18px}
.hero .lead{font-size:clamp(17px,2vw,20px);max-width:560px;color:#c4d2ea}
.capture{margin-top:26px;max-width:520px}
.capture form{display:flex;gap:10px}
.capture input[type=email]{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);font-size:15px;font-family:inherit}
.capture input[type=email]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,122,255,.22)}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none;overflow:hidden}
.capture .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.stickybar[hidden],.exit-modal[hidden]{display:none!important}
.micro{margin-top:10px;font-size:13px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.micro b{color:var(--cyan);font-weight:700}
.formmsg{margin-top:12px;font-size:14px;font-weight:600;min-height:20px}
@media(max-width:520px){.capture form{flex-direction:column}}

/* gauge card */
.gauge-card{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative;overflow:hidden}
.gauge-card .tag{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.gauge-title{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.gauge-wrap{display:flex;flex-direction:column;align-items:center}
.needle{transform-origin:150px 150px;transform:rotate(-90deg);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.gauge-read{margin-top:-30px;text-align:center}
.gauge-read .num{font-size:52px;font-weight:800;letter-spacing:-.02em}
.gauge-read .lab{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.gauge-claim{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:#c4d2ea}
.gauge-claim b{color:#fff}

/* generic section */
section.blk{padding:64px 0;position:relative}
.center{text-align:center;max-width:720px;margin:0 auto}
.center p{margin-top:14px;font-size:17px}
.kicker{color:var(--muted);font-size:15px}

/* problem */
.prob{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
@media(max-width:820px){.prob{grid-template-columns:1fr}}
.prob .c{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:22px}
.prob .c .n{font-size:13px;font-weight:800;color:var(--blue);letter-spacing:.1em}
.prob .c h3{margin:8px 0 6px;font-size:18px}
.prob .c p{font-size:14.5px}

/* anatomy */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{display:flex;gap:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:16px;padding:20px;transition:.2s transform,.2s border-color}
.step:hover{transform:translateY(-3px);border-color:rgba(92,200,255,.4)}
.step .ix{flex:0 0 42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;background:rgba(45,122,255,.16);color:var(--cyan);border:1px solid rgba(92,200,255,.3)}
.step h3{font-size:17px;margin-bottom:3px}
.step p{font-size:14px}

/* sample */
.sample{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin-top:34px}
@media(max-width:860px){.sample{grid-template-columns:1fr}}
.sample img{width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.verdict{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:18px;padding:26px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.chip.hype{background:rgba(255,92,92,.14);color:#ff8a8a;border:1px solid rgba(255,92,92,.35)}
.chip.real{background:rgba(40,199,111,.14);color:#5fe0a0;border:1px solid rgba(40,199,111,.35)}
.verdict h3{margin:14px 0 8px;font-size:22px}
.verdict p{font-size:15px}
.verdict .src{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.stat .big{font-size:40px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(100deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lab{font-size:13.5px;color:var(--muted);margin-top:6px}
.stat .src{font-size:11px;color:#6f83a3;margin-top:8px}

/* audience */
.aud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.aud span{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;color:#cdd9ee}

/* podcast */
.pod{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;background:linear-gradient(120deg,rgba(45,122,255,.12),rgba(92,200,255,.05));border:1px solid var(--line);border-radius:22px;padding:34px;margin-top:20px}
@media(max-width:820px){.pod{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:center;margin-top:20px}
@media(max-width:820px){.about{grid-template-columns:1fr}}
.about .card{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center}
.about .card img{width:96px;height:96px;border-radius:16px;margin:0 auto 12px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.creds span{font-size:12.5px;color:#cdd9ee;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:5px 10px}

/* faq */
.faq{max-width:820px;margin:34px auto 0}
.qa{border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px;background:rgba(255,255,255,.025)}
.qa summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';color:var(--cyan);font-size:22px;font-weight:700}
.qa[open] summary::after{content:'\2013'}
.qa p{font-size:15px;padding:0 0 18px}

/* final cta */
.final{text-align:center;background:linear-gradient(160deg,rgba(45,122,255,.16),rgba(7,20,38,.2));border:1px solid var(--line);border-radius:26px;padding:56px 26px;margin:40px 0}
.final h2{margin-bottom:10px}
.final .capture{margin:24px auto 0}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 40px;margin-top:20px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot .brand b{font-size:16px}
.foot p{font-size:13px;margin-top:12px;max-width:340px}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot-col a{display:block;font-size:14px;color:#cdd9ee;margin-bottom:9px}
.foot-col a:hover{color:#fff}
.legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:#6f83a3;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.needle{transition:none}}

/* article body (about/privacy) */
.doc{max-width:760px;margin:0 auto}
.doc h2{font-size:26px;margin:30px 0 12px}
.doc h3{margin:22px 0 8px}
.doc p{margin-bottom:14px;font-size:16px;color:#c4d2ea}
.doc ul{margin:0 0 16px 20px;color:#c4d2ea}
.doc li{margin-bottom:8px}

/* newsletter badge + trust bar */
.nl-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);background:rgba(45,122,255,.12);border:1px solid rgba(92,200,255,.3);border-radius:999px;padding:6px 13px;margin-bottom:16px}
.nl-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(40,199,111,.2)}
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.trust-in{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:center;align-items:center;padding:22px 0}
.trust .t{display:flex;flex-direction:column;align-items:center;min-width:120px}
.trust .t b{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em}
.trust .t span{font-size:12.5px;color:var(--muted);margin-top:2px}
.trust .sep{width:1px;height:34px;background:var(--line)}
@media(max-width:700px){.trust .sep{display:none}}

/* archive */
.arc-head{text-align:center;max-width:760px;margin:0 auto 8px}
.arc-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 10px}
.arc-filter button{font:inherit;font-size:13px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.15s}
.arc-filter button.on,.arc-filter button:hover{color:#fff;border-color:rgba(92,200,255,.5);background:rgba(45,122,255,.14)}
.arc-list{max-width:820px;margin:20px auto 0;border-top:1px solid var(--line)}
.arc-item{display:flex;gap:18px;align-items:baseline;padding:16px 6px;border-bottom:1px solid var(--line);transition:.15s background}
.arc-item:hover{background:rgba(255,255,255,.025)}
.arc-item time{flex:0 0 92px;font-size:12.5px;color:#6f83a3;font-variant-numeric:tabular-nums;padding-top:2px}
.arc-item .m{flex:1;min-width:0}
.arc-item a.t{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
.arc-item a.t:hover{color:var(--cyan)}
.arc-item .s{font-size:13.5px;color:var(--muted);margin-top:3px}
.arc-item .tag{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;align-self:center;white-space:nowrap}
.tag-cyb{color:#9fd0ff;background:rgba(45,122,255,.12);border:1px solid rgba(45,122,255,.28)}
.tag-air{color:#f5c877;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.28)}
.arc-yr{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);padding:26px 6px 6px}
.arc-more{display:block;margin:26px auto 0;text-align:center}

/* full sample article */
.art{max-width:720px;margin:0 auto}
.art .kick{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8ea6c8}
.art .meta{font-size:13px;color:#6f83a3;margin:10px 0 0}
.art h1{font-size:clamp(30px,4.6vw,46px);margin:8px 0 10px;color:#fff}
.art .sub{font-size:19px;color:#c4d2ea;margin-bottom:8px}
.art figure{margin:26px 0}
.art figure img{width:100%;border-radius:14px;border:1px solid var(--line)}
.art .ekick{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8ea6c8;margin:34px 0 2px}
.art h2{font-size:26px;color:#eaf1fb;margin:8px 0 10px}
.art p{font-size:16.5px;color:#cdd9ee;margin-bottom:14px;line-height:1.7}
.art hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.art strong{color:#fff}
.art .src{font-size:13px;color:#6f83a3}
.art .vcard{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:16px;padding:22px;margin:8px 0}
.bio{display:flex;gap:24px;align-items:flex-start;margin:14px 0 4px;flex-wrap:wrap}
.bio-photo{border-radius:16px;object-fit:cover;object-position:center top;border:1px solid var(--line);flex:0 0 auto;width:200px;height:200px}
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0 4px}
.books figure{margin:0;text-align:center}
.books img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .2s}
.books img:hover{transform:translateY(-4px)}
.books figcaption{margin-top:10px;font-size:13px;color:#a7b6d0;font-weight:600}
@media(max-width:640px){.books{grid-template-columns:1fr 1fr}.bio-photo{width:140px;height:140px}}
.crumbs{font-size:13px;color:#8296b5;margin-bottom:14px}.crumbs a{color:#9fc0ff}.crumbs span{margin:0 6px;opacity:.5}
.lp-cta{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:24px 0}
.lp-related{margin-top:34px;border-top:1px solid var(--line);padding-top:20px}
.lp-related h3{font-size:16px;margin-bottom:10px}.lp-related ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.lp-related a{color:#9fc0ff;font-size:14px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:860px){.hub-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.hub-grid{grid-template-columns:1fr}}
.hub-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;transition:transform .18s,border-color .18s}
.hub-card:hover{transform:translateY(-3px);border-color:rgba(92,200,255,.4)}
.hub-card h3{font-size:17px;color:#fff;margin:10px 0 6px}.hub-card p{font-size:13px;color:#a7b6d0;line-height:1.5}
.btn-ghost{background:transparent;border:1px solid var(--line);color:#cdd9ee}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(9,20,38,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 20px;display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;box-shadow:0 -8px 30px rgba(0,0,0,.4)}
.stickybar .sb-copy{font-weight:600;color:#eaf1fb;font-size:15px}
.stickybar .cap-form{margin:0}
.stickybar .formmsg{flex-basis:100%;text-align:center}
.sb-x{background:none;border:none;color:#8296b5;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.sb-x:hover{color:#fff}
.exit-modal{position:fixed;inset:0;z-index:80;background:rgba(4,9,18,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.em-card{position:relative;max-width:460px;width:100%;background:linear-gradient(180deg,var(--panel),#0b1c38);border:1px solid var(--line);border-radius:18px;padding:30px}
.em-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#c4d2ea;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.em-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.em-dismiss{display:block;width:100%;margin-top:16px;background:none;border:none;color:#8296b5;font-size:14px;cursor:pointer;padding:6px}
.em-dismiss:hover{color:#cdd9ee;text-decoration:underline}
.em-already{margin-top:8px;font-size:12px;color:#6b7c99;text-align:center}
.em-already button{background:none;border:none;color:#9fc0ff;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
@media(max-width:560px){.stickybar .sb-copy{font-size:13px;flex-basis:100%;text-align:center}}
/* ============================================================
   THE HYPE INDEX additions. Everything above is the Hype Check
   Now design system, kept intact so the two properties look
   like one brand. Below is only what the scored record needs.
   ============================================================ */
.rec{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:30px}
.rec th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  font-weight:800;padding:0 14px 12px 0;border-bottom:1px solid var(--line)}
.rec td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.rec tr:hover td{background:rgba(255,255,255,.02)}
.rec a{text-decoration:none;color:#fff;font-weight:600}
.rec a:hover{color:var(--cyan)}
.rec .when{color:var(--muted);font-size:12.5px;margin-top:4px}
.rec .sc{font-weight:800;font-variant-numeric:tabular-nums;font-size:16px}
.rec .mono{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cbars{display:grid;gap:18px;margin:22px 0 10px}
.cb{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.cbhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cbhead b{font-size:15px}
.cbhead span{font-variant-numeric:tabular-nums;font-weight:800;font-size:17px;color:var(--cyan)}
.cbhead i{font-style:normal;color:var(--muted);font-size:12px;font-weight:700}
.cbtrack{height:7px;background:rgba(255,255,255,.06);border-radius:4px;margin:10px 0 8px;overflow:hidden}
.cbtrack>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.cbnote{color:var(--muted);font-size:13.5px;line-height:1.55}
.priorbar{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:14px;padding:13px 18px;margin:18px 0 0;font-size:14px;color:var(--muted)}
.priorbar .k{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.cold{font-size:19px;line-height:1.6;color:#c4d2ea;border-left:3px solid var(--blue);padding-left:20px;margin:26px 0 0}
.wim{font-weight:700;color:#fff;font-size:17px;margin:0 0 12px}
.bignum{border-left:3px solid var(--cyan);padding:6px 0 6px 22px;margin:30px 0}
.bignum .n{font-size:58px;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(100deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.bignum .l{color:var(--muted);font-size:15px;margin-top:10px;max-width:560px}
.callout{background:linear-gradient(180deg,var(--panel),#0c1f3c);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:16px;padding:22px 24px;margin:30px 0}
.claimq{font-size:23px;line-height:1.45;font-weight:700;letter-spacing:-.01em;color:#fff}
.acts{margin:14px 0 0 20px}
.acts li{margin-bottom:14px;color:#c4d2ea}
.meta{color:var(--muted);font-size:13.5px}
.gauge-read .lab.v{letter-spacing:.14em}
@media(max-width:860px){.rec th:nth-child(5),.rec td:nth-child(5){display:none}}

/* ---- mobile navigation. Portfolio standard: every property gets a
   hamburger, never a hidden menu with no way back to it. ---- */
.burger{display:none;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;
  transition:transform .2s,background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .2s,top .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mobnav{display:none;border-top:1px solid var(--line);background:rgba(7,20,38,.98);backdrop-filter:blur(14px)}
.mobnav.open{display:block}
.mobnav a{display:block;padding:15px 22px;font-size:16px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line)}
.mobnav a:last-child{border-bottom:0}
.mobnav a:active{background:rgba(255,255,255,.05)}
@media(max-width:860px){
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .nav-in{gap:12px}
  .hero-grid{grid-template-columns:1fr!important;gap:28px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .prob{grid-template-columns:1fr}
  .capture form{flex-direction:column}
  .capture button{width:100%;justify-content:center}
  .stickybar .wrap{flex-direction:column;gap:10px}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr}
  .rec th:nth-child(1),.rec td:nth-child(1){display:none}
  .bignum .n{font-size:44px}
}

/* ============================================================
   F1 / TELEMETRY LAYER
   Motion carries the idea: the reader arrives fast, the score
   settles slow. Everything here respects prefers-reduced-motion.
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-top:64px}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url('/assets/track-surface.jpg');background-size:cover;background-position:center 38%;
  opacity:.16;filter:grayscale(.35) contrast(1.15);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 45%,transparent 92%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 45%,transparent 92%)}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,20,38,.92) 0%,rgba(7,20,38,.55) 48%,rgba(7,20,38,.9) 100%)}

/* speed streaks. Thin light trails crossing the hero, staggered. */
.streaks{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.streaks i{position:absolute;height:1px;left:-30%;width:30%;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(92,200,255,.75),transparent);
  animation:streak 5.5s linear infinite;opacity:0}
.streaks i:nth-child(1){top:16%;animation-delay:.2s;animation-duration:4.4s}
.streaks i:nth-child(2){top:34%;animation-delay:1.5s;animation-duration:6.2s;
  background:linear-gradient(90deg,transparent,rgba(255,176,32,.55),transparent)}
.streaks i:nth-child(3){top:58%;animation-delay:.9s;animation-duration:5.1s}
.streaks i:nth-child(4){top:76%;animation-delay:2.6s;animation-duration:7s;
  background:linear-gradient(90deg,transparent,rgba(255,92,92,.4),transparent)}
.streaks i:nth-child(5){top:47%;animation-delay:3.4s;animation-duration:4.8s}
@keyframes streak{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateX(440%);opacity:0}
}

/* the slogan. Sits above the headline like a pit board. */
.pitboard{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
  border:1px solid rgba(255,92,92,.4);background:rgba(255,92,92,.08);
  border-radius:8px;padding:9px 16px 9px 12px}
.pitboard .lights{display:flex;gap:5px}
.pitboard .lights b{width:9px;height:9px;border-radius:50%;background:rgba(255,92,92,.25);
  box-shadow:inset 0 0 0 1px rgba(255,92,92,.45);animation:lightup 4.2s infinite}
.pitboard .lights b:nth-child(1){animation-delay:0s}
.pitboard .lights b:nth-child(2){animation-delay:.16s}
.pitboard .lights b:nth-child(3){animation-delay:.32s}
.pitboard .lights b:nth-child(4){animation-delay:.48s}
.pitboard .lights b:nth-child(5){animation-delay:.64s}
@keyframes lightup{
  0%,10%{background:rgba(255,92,92,.25);box-shadow:inset 0 0 0 1px rgba(255,92,92,.45)}
  14%,52%{background:#ff5c5c;box-shadow:0 0 12px rgba(255,92,92,.8)}
  58%,100%{background:rgba(255,92,92,.25);box-shadow:inset 0 0 0 1px rgba(255,92,92,.45)}
}
.pitboard span{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ff8a8a}

/* headline entrance, slight forward drift like a car settling */
.hero h1,.hero .lead,.hero .capture,.hero .micro{animation:driftin .7s cubic-bezier(.16,1,.3,1) both}
.hero h1{animation-delay:.05s}
.hero .lead{animation-delay:.16s}
.hero .capture{animation-delay:.26s}
.hero .micro{animation-delay:.34s}
@keyframes driftin{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

/* gauge card arrives from the right, like it came past you */
.gauge-card{animation:swoop .8s cubic-bezier(.16,1,.3,1) both;animation-delay:.12s}
@keyframes swoop{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}

/* needle sweeps from zero on load, tachometer style */
.needle{transform-origin:150px 150px;animation:sweep 1.5s cubic-bezier(.22,1.2,.32,1) .55s both}

/* sector bars, F1 timing-screen fill */
.cbtrack>i{transform-origin:left center;animation:sector .85s cubic-bezier(.16,1,.3,1) both}
.cb:nth-child(1) .cbtrack>i{animation-delay:.05s}
.cb:nth-child(2) .cbtrack>i{animation-delay:.14s}
.cb:nth-child(3) .cbtrack>i{animation-delay:.23s}
.cb:nth-child(4) .cbtrack>i{animation-delay:.32s}
.cb:nth-child(5) .cbtrack>i{animation-delay:.41s}
@keyframes sector{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the record table reads like a timing screen */
.rec tr{transition:background .14s}
.rec tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}

@media(prefers-reduced-motion:reduce){
  .streaks{display:none}
  .pitboard .lights b{animation:none;background:#ff5c5c}
  .hero h1,.hero .lead,.hero .capture,.hero .micro,.gauge-card,.needle,.cbtrack>i{animation:none!important}
}

/* ============================================================
   VERTICAL RHYTHM. Sections were colliding and the sticky bar
   was clipping the last card. Air is part of the design.
   ============================================================ */
section{padding:64px 0}
.hero{padding:64px 0 52px}
section.trust{padding:0}
section.final{padding:72px 0 84px}
h1,h2,h3{scroll-margin-top:96px}
body{padding-bottom:104px}          /* clears the sticky subscribe bar */
.center .eyebrow{display:block;margin-bottom:14px}
.stats{margin-top:52px}
.steps{margin-top:44px;gap:20px}
.prob{margin-top:44px}
.rec{margin-top:36px}
.hero .micro{margin-top:14px}
.hero-grid{gap:56px}
.gauge-card{padding:30px 28px}
.gauge-read{margin-top:-22px}       /* was -30, the number crowded the arc labels */
.gauge-read .num{font-size:56px;line-height:1.05}
.gauge-claim{margin-top:18px;padding-top:16px;line-height:1.6}
.verdict{padding:32px 34px}
.step{padding:22px 24px}
@media(max-width:860px){
  section{padding:48px 0}
  .hero{padding:40px 0 36px}
  section.final{padding:52px 0 64px}
  .hero-grid{gap:32px}
  body{padding-bottom:120px}
}

/* ============================================================
   THE CIRCUIT. A track rushing at the reader in perspective,
   with kerbs, a centre line, brake glow, and a live telemetry
   trace. Built in CSS/SVG rather than video: no 8MB download,
   no stock-footage look, and it can never fail to load.
   ============================================================ */
.hero{min-height:min(94vh,860px);display:flex;align-items:center;padding:96px 0 72px}
.circuit{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  perspective:300px;perspective-origin:50% 30%}
.circuit .road{position:absolute;left:-60%;right:-60%;top:30%;bottom:-42%;
  transform:rotateX(74deg);transform-origin:50% 0;
  background:
    /* centre dashes */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.62) 0 44px, transparent 44px 116px) 50% 0/12px 116px no-repeat,
    /* lane hints */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.14) 0 26px, transparent 26px 150px) 26% 0/4px 150px,
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.14) 0 26px, transparent 26px 150px) 74% 0/4px 150px,
    linear-gradient(180deg,#0d1a2c 0%,#0a1422 60%,#071426 100%);
  animation:rush 1.5s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 26%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 26%,#000 62%,transparent 100%)}
@keyframes rush{to{background-position-y:116px,150px,150px,0}}

/* red and white kerbs down both edges. The most F1 object there is. */
.circuit .kerb{position:absolute;top:30%;bottom:-42%;width:70px;
  transform:rotateX(74deg);transform-origin:50% 0;
  background:repeating-linear-gradient(180deg,#e33 0 34px,#f4f4f4 34px 68px);
  opacity:.5;animation:rush2 1.5s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 28%,#000 64%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 28%,#000 64%,transparent 100%)}
.circuit .kerb.l{left:6%}
.circuit .kerb.r{right:6%}
@keyframes rush2{to{background-position-y:68px}}

/* haze at the vanishing point so the road dissolves into the page */
.circuit .haze{position:absolute;left:0;right:0;top:0;height:62%;
  background:radial-gradient(120% 90% at 50% 100%, rgba(45,122,255,.22), transparent 62%),
             linear-gradient(180deg,#071426 30%,rgba(7,20,38,.2) 100%)}
.circuit .vignette{position:absolute;inset:0;
  background:radial-gradient(130% 88% at 50% 42%, transparent 30%, rgba(7,20,38,.72) 78%, #071426 100%)}

/* brake glow behind the headline. Pulses like a rotor under load. */
.brakeglow{position:absolute;left:-8%;top:34%;width:520px;height:320px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,60,60,.30), rgba(255,60,60,.09) 55%, transparent 72%);
  filter:blur(12px);animation:brake 5.6s ease-in-out infinite}
@keyframes brake{
  0%,58%{opacity:.28;transform:scale(.94)}
  70%{opacity:.85;transform:scale(1.06)}
  86%,100%{opacity:.28;transform:scale(.94)}
}

/* telemetry strip. A live trace under the hero, broadcast style. */
.telemetry{position:relative;margin-top:44px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.028);padding:14px 18px;overflow:hidden}
.telemetry .tlabel{display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.telemetry .tlabel em{font-style:normal;color:#ff8a8a}
.telemetry svg{display:block;width:100%;height:46px;margin-top:8px}
.telemetry .trace{stroke:var(--cyan);stroke-width:2;fill:none;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.4s ease-out .5s forwards}
.telemetry .trace2{stroke:#ff5c5c;stroke-width:2;fill:none;opacity:.85;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.4s ease-out .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* headline gets weight and a tighter track */
.hero h1{font-size:clamp(42px,7vw,78px);letter-spacing:-.028em;line-height:1.02}
.hero h1 .grad{background:linear-gradient(100deg,#ff8a8a,#ff5c5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(17px,1.6vw,20px);margin-top:20px}

@media(max-width:860px){
  .hero{min-height:auto;padding:44px 0 40px}
  .circuit{perspective:200px}
  .brakeglow{display:none}
  .telemetry{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){
  .circuit .road,.circuit .kerb{animation:none}
  .brakeglow{animation:none;opacity:.3}
  .telemetry .trace,.telemetry .trace2{animation:none;stroke-dashoffset:0}
}

/* ---- hero corrections after visual review ---- */
/* 1. The headline was breaking into four ragged lines. Two clean lines only. */
.hero h1{font-size:clamp(38px,5.2vw,62px);max-width:12ch;text-wrap:balance;line-height:1.04}

@media(min-width:1100px){.hero h1{max-width:13ch}}

/* 2. The asphalt photo was fighting the animated road. Photo recedes, road wins. */
.hero-bg{opacity:.07}
.circuit .road{display:none}
.circuit .kerb{display:none}
.circuit .vignette{background:radial-gradient(140% 92% at 50% 46%, transparent 26%, rgba(7,20,38,.62) 74%, #071426 100%)}
.circuit .haze{height:56%;
  background:radial-gradient(130% 96% at 50% 100%, rgba(45,122,255,.30), transparent 66%),
             linear-gradient(180deg,#071426 24%,rgba(7,20,38,.15) 100%)}

/* 3. Give the copy column room so it never collides with the gauge card */
.hero-grid{grid-template-columns:1.02fr .98fr;gap:64px}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero h1{max-width:none}}

/* ---- SVG circuit. Reliable, visible, and fully controllable. ---- */
.circuit svg.trackart{position:absolute;left:50%;top:0;width:min(1700px,150%);height:100%;
  transform:translateX(-50%);display:block}
.trackart .lane{stroke:rgba(255,255,255,.16);stroke-width:2;fill:none}
.trackart .edge{stroke:rgba(255,255,255,.30);stroke-width:3;fill:none}
.trackart .kerbL,.trackart .kerbR{stroke-width:9;fill:none;stroke-dasharray:26 26;
  animation:kerbrun 1.05s linear infinite}
.trackart .kerbL{stroke:#e33}
.trackart .kerbR{stroke:#e33}
.trackart .kerbLw,.trackart .kerbRw{stroke:#f4f4f4;stroke-width:9;fill:none;
  stroke-dasharray:26 26;stroke-dashoffset:26;animation:kerbrun 1.05s linear infinite}
@keyframes kerbrun{to{stroke-dashoffset:-52}}
.trackart .dash{stroke:#fff;stroke-width:7;fill:none;stroke-dasharray:34 46;opacity:.8;
  animation:dashrun .85s linear infinite}
@keyframes dashrun{to{stroke-dashoffset:-80}}
.trackart .surface{fill:url(#tarmac)}
@media(prefers-reduced-motion:reduce){
  .trackart .kerbL,.trackart .kerbR,.trackart .kerbLw,.trackart .kerbRw,.trackart .dash{animation:none}
}

/* ---- track: atmosphere, not clutter. Text must always sit on solid ground. ---- */
.circuit svg.trackart{opacity:.42;width:min(2100px,190%)}
.trackart .kerbL,.trackart .kerbR,.trackart .kerbLw,.trackart .kerbRw{stroke-width:7}
.trackart .dash{opacity:.55}
.trackart .lane{stroke:rgba(255,255,255,.10)}
.trackart .edge{stroke:rgba(255,255,255,.18)}

/* scrim behind the copy column so nothing ever runs through the words */
.hero .wrap::before{content:'';position:absolute;left:0;top:0;bottom:0;width:62%;z-index:-1;
  background:linear-gradient(90deg,#071426 0%,rgba(7,20,38,.94) 46%,rgba(7,20,38,.72) 74%,transparent 100%);
  pointer-events:none}
.hero .wrap{position:relative}
@media(max-width:1000px){
  .hero .wrap::before{width:100%;
    background:linear-gradient(180deg,rgba(7,20,38,.9) 0%,rgba(7,20,38,.82) 70%,rgba(7,20,38,.6) 100%)}
  .circuit svg.trackart{opacity:.3}
}