:root{--bg:#060708;--surface:#0C0E11;--surface-2:#12151A;--border:#23272F;--border-subtle:#16191E;--text:#F3F5F7;--text-2:#A3ABB6;--text-3:#6B737E;--accent:#C6F432;--on-accent:#0A0C04;--trend:#FFB547;--published:#5CD6FF;--untested:#8A929C;--mono:'Geist Mono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
svg{display:block}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding:0 64px}

/* shared type */
.label{display:flex;align-items:center;gap:12px;font:400 12px/1 var(--mono);letter-spacing:2.4px;color:var(--text-3)}
.label b{font-weight:400;color:var(--accent);letter-spacing:2px}
.label i{display:block;width:32px;height:1px;background:var(--border)}
h2{font-weight:500;font-size:56px;letter-spacing:-2.2px;line-height:1.04}
.k{font:400 11px var(--mono);letter-spacing:2px;color:var(--text-3)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.head .l{display:flex;flex-direction:column;gap:24px;max-width:800px}
.note{max-width:360px;font-size:16px;line-height:1.625;color:var(--text-2)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;font:400 11px var(--mono);letter-spacing:1.2px;box-shadow:inset 0 0 0 1px currentColor;white-space:nowrap}
.pill{--c:var(--untested);color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 33%,transparent)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.pill.trend{--c:var(--trend)}
.pill.pub{--c:var(--published)}
.pill.acc{--c:var(--accent)}
.pill.un i{background:none;box-shadow:inset 0 0 0 1.25px var(--c)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 26px;font-size:16px;font-weight:500;line-height:1.2;transition:background .2s,box-shadow .2s,color .2s}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.btn:hover svg:last-child{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--on-accent);font-weight:600}
.btn-primary:hover{background:#D6FF5C}
.btn-ghost{background:#06070899;box-shadow:inset 0 0 0 1px #FFFFFF33}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px #FFFFFF73}
.ctas{display:flex;flex-wrap:wrap;gap:14px}

/* hero */
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;max-width:1440px;margin:0 auto}
.hero-art{position:absolute;top:40px;right:0;width:760px;height:800px;background:var(--bg) url(assets/hero.jpg) center/cover no-repeat;background-blend-mode:lighten;will-change:transform}
.art-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.js .hero-art{background-image:none}
.hero.art-static .hero-art{background-image:url(assets/hero.jpg)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#060708E6 0%,#06070800 14%),linear-gradient(0deg,#060708 0%,#060708CC 14%,#06070800 32%),linear-gradient(90deg,#060708 0%,#060708F2 42%,#06070800 60%)}
@media (min-width:1441px){.hero-shade{background:linear-gradient(180deg,#060708E6 0%,#06070800 14%),linear-gradient(0deg,#060708 0%,#060708CC 14%,#06070800 32%),linear-gradient(90deg,#060708 0%,#060708F2 42%,#06070800 60%),linear-gradient(270deg,#060708 0%,#06070800 8%)}}
.hero-body{position:relative;display:flex;flex-direction:column;gap:26px;min-height:920px}
.nav{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
.brand{display:inline-flex;align-items:center;gap:12px;font:500 14px var(--mono);letter-spacing:4px}
.brand i{width:10px;height:10px;background:var(--accent)}
.links{display:flex;gap:36px;font-size:14px;color:var(--text-2)}
.links a{transition:color .2s}
.links a:hover{color:var(--text)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font:400 12px var(--mono);letter-spacing:1.5px;box-shadow:inset 0 0 0 1px var(--border);transition:box-shadow .2s}
.nav-cta:hover{box-shadow:inset 0 0 0 1px var(--text-3)}
.nav-cta svg{width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-copy{display:flex;flex-direction:column;gap:32px;max-width:760px}
.eyebrow{display:flex;align-items:center;gap:12px;font:400 12px var(--mono);letter-spacing:2.4px;color:var(--text-2)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 #C6F43266;animation:live 2.4s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 #C6F43266}70%,100%{box-shadow:0 0 0 8px #C6F43200}}
h1{font-weight:500;font-size:104px;line-height:1;letter-spacing:-4.5px}
h1 span{display:block}
h1 .l3{display:flex;align-items:center;gap:22px}
h1 em{font-style:normal;color:var(--accent);padding:0 20px 8px 16px;box-shadow:inset 0 0 0 1.5px var(--accent)}
.sub{max-width:540px;font-size:19px;line-height:29px;color:var(--text-2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:auto;padding:28px 0 40px;border-top:1px solid var(--border)}
.stats div{display:flex;flex-direction:column;gap:10px;padding:2px 32px;border-left:1px solid var(--border)}
.stats div:first-child{padding-left:0;border-left:0}
.stats dt{font-size:40px;font-weight:300;letter-spacing:-1.5px}
.stats dd{font:400 12px/19px var(--mono);color:var(--text-3)}

/* 01 problem */
.problem{padding:160px 0 140px}
.problem .wrap{display:grid;grid-template-columns:540px minmax(0,680px);justify-content:space-between;gap:72px}
.problem-copy{display:flex;flex-direction:column;gap:28px}
.problem-copy h2{line-height:58px}
.problem-copy p{font-size:17px;line-height:28px;color:var(--text-2)}
.problem-copy p.hi{color:var(--text)}
.problem-copy blockquote{padding:4px 0 4px 20px;border-left:1.5px solid var(--accent);font-size:15px;line-height:24px;color:var(--text-2)}
.dia svg{width:100%;height:auto;overflow:visible}
.dia text.m{font-family:var(--mono)}
.dia text.s{font-family:Geist,system-ui,sans-serif}
.part{position:relative}
.part-a{border-bottom:1px solid var(--border-subtle)}
.part-b{margin-top:18px}
.part figcaption{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:8px}
.part figcaption b{font:400 12px var(--mono);letter-spacing:2px;color:var(--text-2)}
.part-b figcaption b{color:var(--accent)}
.part figcaption span{font-size:15px;color:var(--text)}
.problem-dia .token{fill:#E4FF8A}
.problem-dia .token.back{fill:#8A929C}

/* 02 claims */
.claims{background:var(--surface);padding:140px 0}
.claims .head h2{max-width:720px}
.claim{display:grid;grid-template-columns:180px minmax(0,1fr) 340px 220px;gap:56px;margin-top:64px;padding:40px 0 8px;border-top:1px solid var(--border)}
.claim .head+.claim{margin-top:64px}
.claim .mark{display:flex;flex-direction:column;gap:20px}
.claim .mark .k{font-size:12px}
.claim.top .mark .k{color:var(--accent)}
.claim .mark svg{width:160px;height:112px;overflow:visible}
.claim .txt{display:flex;flex-direction:column;gap:14px}
.claim h3{font-size:30px;font-weight:500;letter-spacing:-.9px;line-height:35px}
.claim .txt p{font-size:16px;line-height:26px;color:var(--text-2)}
.claim .ev,.claim .st{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.claim .ev p{font-size:15px;line-height:24px;color:var(--text-2)}
.claim .ev a{color:var(--text);text-decoration:underline;text-decoration-color:var(--text-3);text-underline-offset:3px;transition:color .2s}
.claim .ev a:hover{color:var(--accent)}
.claim.top .ev p{color:var(--text)}
.footnote{margin-top:64px;padding:28px 0 0 236px;border-top:1px solid var(--border);font-size:18px;font-style:italic;color:var(--text-2)}

/* 03 evidence */
.evidence{background:var(--surface);padding:140px 0 150px;border-top:1px solid var(--border-subtle)}
.evidence .head .l{max-width:760px}
.papers>div{gap:14px}
.papers .fig{margin-top:12px;font-size:56px;font-weight:500;letter-spacing:-2.4px;line-height:1;color:var(--text)}
.papers .fig span{font-size:22px;letter-spacing:-.3px;color:var(--text-3)}
.papers .fig-k{max-width:300px;font:400 12px/19px var(--mono);color:var(--text-3)}
.papers h3{margin-top:14px}
.src{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;min-height:102px;margin-top:auto;padding-top:20px;border-top:1px solid var(--border)}
.src b{display:block;font-size:16px;font-weight:500;transition:color .2s}
.src small{display:block;margin-top:8px;font:400 10px/1.6 var(--mono);letter-spacing:1.2px;color:var(--text-3);text-transform:uppercase}
.src svg{width:16px;height:16px;flex:none;margin-top:3px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.src:hover b{color:var(--accent)}
.src:hover svg{transform:translate(2px,-2px)}
.papers .also{font-size:13px;line-height:20px;color:var(--text-3);margin-bottom:20px}
.also a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;transition:color .2s}
.also a:hover{color:var(--text)}
.labs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;margin-top:88px;padding-top:28px;border-top:1px solid var(--border)}
.labs>.k{padding-top:4px}
.labs ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.labs a{display:flex;flex-direction:column;gap:8px}
.labs small{font:400 11px var(--mono);letter-spacing:2px;color:var(--text-3)}
.labs b{font-size:22px;font-weight:500;letter-spacing:-.5px;transition:color .2s}
.labs span{font-size:14px;line-height:1.5;color:var(--text-2)}
.labs a:hover b{color:var(--accent)}

/* 04 bet */
.bet{padding:150px 0 140px}
.stage{display:grid;grid-template-columns:448px 1fr;gap:48px;margin-top:48px}
.copy{padding-top:20px;display:flex;flex-direction:column;gap:40px}
.copy p{font-size:19px;line-height:1.55;color:var(--text-2)}
.spec{border-top:1px solid var(--border)}
.spec div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.spec dt{font:400 11px var(--mono);letter-spacing:2px;color:var(--text-3)}
.spec dd{font-size:15px;text-align:right}
.visual{display:flex;flex-direction:column;gap:24px;min-width:0}
.scene{display:block;width:100%;height:auto;overflow:visible}
.scene path{stroke-linejoin:round;stroke-linecap:round}
.tk{font:500 11px var(--mono);letter-spacing:2px}
.tv{font:400 11px var(--mono);letter-spacing:1.6px;fill:var(--text-3)}
.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.outcomes div{padding-top:18px;border-top:1.5px solid var(--border);display:flex;flex-direction:column;gap:10px}
.outcomes .win{border-color:var(--accent)}
.win .k{color:var(--accent)}
.outcomes p{font-size:20px;font-weight:500;letter-spacing:-.4px;line-height:1.35;color:var(--text-2)}
.outcomes .win p{color:var(--text)}

/* 05 sockets */
.sockets{background:var(--surface);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:140px 0 150px}
.sockets .head .l{max-width:800px}
.sockets-scroll{margin-top:56px}
.cap .mini{display:none;width:100%;max-width:340px;height:auto;margin:0 auto 6px}
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px}
.cap{padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:14px}
.cap.me{border-top:1.5px solid var(--accent)}
.cap .k{letter-spacing:1.8px}
.cap.me .k,.cap.me h3{color:var(--accent)}
.cap h3{font-size:24px;font-weight:500;letter-spacing:-.6px}
.cap p{font-size:15px;line-height:1.55;color:var(--text-2)}
.stop{display:flex;gap:10px;padding-top:4px;font-size:15px;line-height:1.45}
.stop svg{width:15px;height:15px;flex:none;margin-top:2px;color:#6B737E;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cap.me .stop svg{color:var(--accent)}
.cap small{font:400 10px/1.6 var(--mono);letter-spacing:1.2px;color:var(--text-3);text-transform:uppercase}

/* 06 roadmap */
.roadmap{padding:150px 0}
.roadmap .head .l{max-width:760px}
.zig{position:relative;margin-top:72px;aspect-ratio:1312/540}
.zig>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zig text.m{font-family:var(--mono)}
.steps li{position:absolute;left:63.11%;top:calc(var(--y) / 540 * 100%);width:36.89%;display:flex;flex-direction:column;gap:6px}
.steps .cap5 .k{color:var(--accent)}
.steps h3{font-size:22px;font-weight:500;letter-spacing:-.5px}
.steps p{font-size:14px;line-height:1.55;color:var(--text-2)}

/* 07 who it's for */
.users{background:var(--surface);padding:140px 0 150px;border-top:1px solid var(--border-subtle)}
.users .head .l{max-width:760px}
.cols.two{grid-template-columns:1fr 1fr}
.ask{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:56px;padding:32px 36px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--border)}
.ask div{display:flex;flex-direction:column;gap:10px;max-width:640px}
.ask .k{color:var(--accent)}
.ask p{font-size:17px;line-height:27px;color:var(--text-2)}
.ask .btn{flex:none}

/* 08 method */
.method{padding:150px 0}
.method .head .l{max-width:760px}
.fields{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;margin-top:64px}
.fields div{display:flex;flex-direction:column;gap:10px;padding:28px 0 36px;border-top:1px solid var(--border)}
.fields .k{color:var(--accent)}
.fields dt{font-size:22px;font-weight:500;letter-spacing:-.5px}
.fields dd{font-size:15px;line-height:24px;color:var(--text-2);max-width:340px}

/* columns */
.cols{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:1px solid var(--border)}
.cols>div{display:flex;flex-direction:column;gap:16px;padding:36px 40px 0;border-right:1px solid var(--border)}
.cols>div:first-child{padding-left:0}
.cols>div:last-child{padding-right:0;border-right:0}
.cols .k{color:var(--accent)}
.cols h3{font-size:24px;font-weight:500;letter-spacing:-.6px;line-height:30px}
.cols p{font-size:15px;line-height:25px;color:var(--text-2)}

/* 09 closing */
.closing{position:relative;overflow:hidden;border-top:1px solid var(--border-subtle)}
.closing-in{position:relative;max-width:1440px;margin:0 auto}
.closing-art{position:absolute;top:40px;left:700px;width:780px;height:820px;opacity:.9;background:var(--bg) url(assets/closing.jpg) center/cover no-repeat;background-blend-mode:lighten;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 26%);mask-image:linear-gradient(0deg,transparent 0%,#000 26%)}
.closing-shade{position:absolute;top:0;left:0;width:100%;height:900px;background:linear-gradient(0deg,#060708 0%,#06070800 30%),linear-gradient(90deg,#060708 0%,#060708F2 50%,#06070800 72%)}
.closing-body{position:relative;display:flex;flex-direction:column;gap:40px;padding-top:160px;padding-bottom:160px}
.closing h2{font-size:88px;line-height:1;letter-spacing:-3.8px}
.closing .about{max-width:600px;font-size:18px;line-height:29px;color:var(--text-2)}
.needs{max-width:600px;border-top:1px solid var(--border)}
.needs li{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);font-size:18px}
.needs svg{width:18px;height:22px;flex:none;margin-top:4px}
.needs span{flex:1}
.needs em{font:400 11px var(--mono);letter-spacing:2px;color:var(--text-2)}
.needs em.later{color:var(--text-3)}
.closing .ctas{padding-top:16px}

/* footer */
.footer{border-top:1px solid var(--border);padding:40px 0 48px}
.footer .wrap{display:flex;flex-direction:column;gap:32px}
.ft,.fb{display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand-row{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--text-3)}
.flinks{display:flex;gap:32px;font-size:14px;color:var(--text-2)}
.flinks a:hover{color:var(--text)}
.fb{font:400 11px var(--mono);letter-spacing:2px;color:var(--text-3)}

/* motion */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .eyebrow i{animation:none}
  .problem-dia .token{display:none}
}

/* responsive */
@media (max-width:1280px){
  .hero-art{width:min(760px,56vw)}
  .problem .wrap{grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:56px}
  .claim{grid-template-columns:160px minmax(0,1fr) 260px 200px;gap:36px}
  .footnote{padding-left:196px}
  .zig{aspect-ratio:auto}
  .zig>svg{position:static;height:auto;max-width:780px}
  .zig [class^="leader"]{display:none}
  .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px;margin-top:40px}
  .steps li{position:static;width:auto;padding-top:18px;border-top:1px solid var(--border)}
  .steps .cap5{border-top-color:var(--accent)}
}
@media (max-width:1100px){
  .links{gap:24px}
  .stage{grid-template-columns:1fr}
  .head{flex-direction:column;align-items:flex-start;gap:24px}
  .problem .wrap{grid-template-columns:1fr}
  .problem-dia{max-width:680px}
  .claim{grid-template-columns:160px minmax(0,1fr);gap:28px 40px}
  .claim .ev{grid-column:2}
  .claim .st{grid-column:2}
  .footnote{padding-left:200px}
  .caps{grid-template-columns:1fr 1fr;row-gap:48px}
  .labs{grid-template-columns:1fr;gap:28px;margin-top:64px}
  .labs ul{grid-template-columns:1fr 1fr;row-gap:32px}
  .fields{grid-template-columns:1fr 1fr}
  .closing-art{left:auto;right:-160px}
}
@media (max-width:900px){
  .links{display:none}
  .hero-art{top:60px;right:-120px;width:640px;height:680px;opacity:.55}
  .hero-shade{background:linear-gradient(180deg,#060708E6 0%,#06070800 14%),linear-gradient(0deg,#060708 0%,#060708 30%,#06070800 62%),linear-gradient(90deg,#060708CC 0%,#06070866 60%,#06070800 100%)}
  .hero-body{min-height:0}
  .hero-copy{padding-top:56px}
  h1{font-size:clamp(46px,11vw,96px);letter-spacing:-.045em}
  h1 .l3{gap:.2em}
  h1 em{padding:0 .18em .07em .14em}
  .stats{grid-template-columns:1fr 1fr;row-gap:28px;margin-top:40px}
  .stats div:nth-child(3){padding-left:0;border-left:0}
  .cols,.cols.two{grid-template-columns:1fr;border-top:0}
  .cols>div,.cols>div:first-child,.cols>div:last-child{padding:28px 0 32px;border-right:0;border-top:1px solid var(--border)}
  .closing-art{opacity:.35}
  .closing-shade{height:100%;background:linear-gradient(0deg,#060708 0%,#06070800 40%),linear-gradient(90deg,#060708 0%,#060708D9 60%,#06070866 100%)}
  .closing h2{font-size:clamp(44px,10vw,88px);letter-spacing:-.043em}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  h2{font-size:38px;letter-spacing:-1.4px;line-height:1.08}
  .problem-copy h2{line-height:1.08}
  .problem,.claims,.evidence,.bet,.sockets,.roadmap,.users,.method{padding:96px 0}
  .closing-body{padding-top:96px;padding-bottom:96px}
  .nav-cta{padding:9px 12px;font-size:11px;letter-spacing:1.2px}
  .sub{font-size:17px;line-height:27px}
  .btn{padding:16px 20px;font-size:15px}
  .stats dt{font-size:32px}
  .stats div{padding:2px 16px}
  .part figcaption{position:static;margin-bottom:12px}
  .part-b{margin-top:28px}
  .dia text{font-size:18px;letter-spacing:1px}
  .claim{grid-template-columns:1fr;gap:20px;margin-top:40px;padding-top:32px}
  .claim .ev,.claim .st{grid-column:1}
  .claim .mark{flex-direction:row;align-items:center;justify-content:space-between}
  .claim .mark svg{width:120px;height:84px}
  .claim h3{font-size:25px;line-height:31px}
  .footnote{padding-left:0;margin-top:40px}
  .outcomes,.caps{grid-template-columns:1fr}
  /* The wide four-chip strip keeps animating off-screen; each card shows its own chip cropped from it. */
  .sockets-scroll{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
  .cap .mini{display:block}
  .caps{margin-top:48px;row-gap:56px}
  #scale .tk,#scale .tv{font-size:28px;letter-spacing:1.4px}
  .steps{grid-template-columns:1fr}
  .zig text{font-size:16px}
  .ask{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 20px}
  .fields{grid-template-columns:1fr}
  .needs li{font-size:16px}
  .ft,.fb{flex-direction:column;align-items:flex-start}
  .brand-row{flex-direction:column;align-items:flex-start;gap:10px}
  .flinks{flex-wrap:wrap;gap:12px 24px}
  .fb{gap:10px;font-size:10px;line-height:1.6}
}
@media (max-width:420px){
  .label{gap:10px;letter-spacing:1.6px}
  .label i{width:20px}
  .stats{grid-template-columns:1fr}
  .stats div,.stats div:nth-child(3){padding:0 0 0 0;border-left:0}
  .ctas .btn{width:100%;justify-content:center}
}