:root{
  --bg:#04060a;
  --bg2:#070b12;
  --surface:#0a0f17;
  --line:rgba(255,255,255,.08);
  --text:#e9eef6;
  --muted:#8d99ab;
  --cyan:#5ee6ff;
  --blue:#4da3ff;
  --red:#ff4d5e;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
html.lenis-on{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(94,230,255,.25);color:#fff}
html.has-cursor, html.has-cursor a, html.has-cursor button{cursor:none}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  animation:prehide .6s ease 3.2s forwards;
}
.pre-inner{text-align:center}
.pre-brand{
  font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.5em;color:#fff;
}
.pre-brand span{color:var(--cyan)}
.pre-line{
  font-family:var(--mono);font-size:9px;letter-spacing:.34em;color:var(--muted);margin-top:14px;
}
.pre-count{
  position:absolute;bottom:28px;right:36px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--cyan);
}
@keyframes prehide{to{opacity:0;visibility:hidden}}

/* ---------- ambient layers ---------- */
#gl{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
.guides{position:fixed;inset:0;z-index:1;pointer-events:none}
.guides i{
  position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.028);
}
.guides i:nth-child(1){left:25%}
.guides i:nth-child(2){left:50%}
.guides i:nth-child(3){left:75%}
@media(max-width:720px){.guides i:nth-child(1),.guides i:nth-child(3){display:none}.guides i:nth-child(2){left:50%}}

.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:95;pointer-events:none;border-radius:50%;
  opacity:0;transform:translate(-50%,-50%);
}
.cursor-dot{width:6px;height:6px;background:var(--cyan)}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(94,230,255,.4);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s}
.cursor-ring.hot{width:56px;height:56px;border-color:rgba(94,230,255,.85)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;
  transition:background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease),transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(4,6,10,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:16px 32px;
}
.nav.hidden{transform:translateY(-110%)}
.brand{
  font-family:var(--mono);font-size:14px;font-weight:500;
  letter-spacing:.34em;color:var(--text);text-decoration:none;
}
.brand::after{content:'.';color:var(--cyan)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--muted);text-decoration:none;transition:color .3s;
  display:inline-block;
}
.nav-links a:hover{color:#fff}
.nav-links .nav-cta{
  color:var(--cyan);
  border:1px solid rgba(94,230,255,.35);
  border-radius:999px;
  padding:9px 18px;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.nav-links .nav-cta:hover{background:rgba(94,230,255,.08);border-color:rgba(94,230,255,.7);box-shadow:0 0 24px rgba(94,230,255,.18)}
@media(max-width:720px){
  .nav{padding:18px 20px}
  .nav.scrolled{padding:14px 20px}
  .nav-links{gap:16px}
  .nav-links a{font-size:10px;letter-spacing:.14em}
  .nav-links a:not(.nav-cta){display:none}
}

/* ---------- shared ---------- */
main{position:relative;z-index:2}
.section{padding:150px 24px;position:relative}
.wrap{max-width:1120px;margin:0 auto;position:relative}
.label{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.3em;color:var(--cyan);margin-bottom:26px;
}
h2{
  font-size:clamp(2rem,4.6vw,3.4rem);
  font-weight:500;line-height:1.12;letter-spacing:-.02em;
  margin-bottom:34px;
}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:940px}
.cols p,.narrow{color:var(--muted);font-size:1.05rem}
.narrow{max-width:640px;margin-top:44px}
.quote{
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  font-weight:400;line-height:1.45;color:var(--text);
  border-left:2px solid var(--cyan);
  padding-left:26px;margin:40px 0;max-width:760px;
}
.btn{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-decoration:none;padding:15px 26px;border-radius:999px;
  display:inline-block;position:relative;
  transition:box-shadow .35s var(--ease),background .35s,color .35s,border-color .35s;
  will-change:transform;
}
.btn.primary{background:#fff;color:#04060a}
.btn.primary:hover{box-shadow:0 8px 40px rgba(94,230,255,.3)}
.btn.ghost{color:var(--text);border:1px solid rgba(255,255,255,.18)}
.btn.ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.btn.big{padding:19px 36px;font-size:12px}
@media(max-width:720px){
  .section{padding:104px 20px}
  .cols{grid-template-columns:1fr;gap:26px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.hero-inner{position:relative;z-index:2;padding:0 24px;max-width:1080px}
h1{
  font-size:clamp(2.5rem,6vw,4.9rem);
  font-weight:500;line-height:1.05;letter-spacing:-.025em;
  margin-bottom:28px;
}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
h1 .wi{
  display:inline-block;
  background:linear-gradient(180deg,#fff 30%,#a9bcdf 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.sub{font-size:clamp(1.02rem,2vw,1.3rem);color:var(--muted);max-width:560px;margin:0 auto 40px}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.scroll-hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  width:1px;height:56px;background:rgba(255,255,255,.12);overflow:hidden;
}
.scroll-hint span{
  position:absolute;top:-40%;left:0;width:100%;height:40%;
  background:linear-gradient(180deg,transparent,var(--cyan));
  animation:drip 2.2s var(--ease) infinite;
}
@keyframes drip{0%{top:-40%}100%{top:110%}}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;overflow:hidden;position:relative;z-index:2;background:rgba(4,6,10,.4);
}
.marquee-track{display:flex;width:max-content;animation:marq 36s linear infinite}
.marquee.flip .marquee-track{animation-direction:reverse}
.marquee-track span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:rgba(141,153,171,.6);
  white-space:nowrap;
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- pinned problem ---------- */
.pin-stage{
  min-height:100svh;display:flex;align-items:center;
  padding:110px 24px 80px;position:relative;
}
.pin-stage .wrap{width:100%}
.swap-box{position:relative}
.swap h2,.swap-box h2.swap{margin-bottom:0}
.swap-paras{max-width:880px}
.swap-paras p{color:var(--muted);font-size:clamp(1rem,1.6vw,1.15rem);margin-bottom:22px;max-width:640px}
@media(min-width:900px){
  .swap-box{min-height:300px}
}

/* ---------- benchmark ---------- */
.bench-h2{margin-bottom:26px}
.chart-card{
  margin-top:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line);
  border-radius:18px;
  padding:34px 32px 26px;
  max-width:920px;
  backdrop-filter:blur(4px);
}
#horizon-chart{width:100%;height:auto;display:block}
.axis{stroke:rgba(255,255,255,.16);stroke-width:1}
.ax-label,.half-label,.horizon-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;fill:var(--muted)}
.half-label{fill:rgba(94,230,255,.8)}
.half-line{stroke:rgba(94,230,255,.45);stroke-width:1;stroke-dasharray:3 7}
.horizon-tick{stroke:rgba(94,230,255,.25);stroke-width:1;stroke-dasharray:2 5}
.horizon-dot{fill:var(--cyan)}
.horizon-halo{fill:none;stroke:rgba(94,230,255,.5);stroke-width:1}
.horizon-label{fill:var(--cyan);font-size:11px}
.curve{fill:none;stroke:url(#curveGrad);stroke-width:2.5;stroke-linecap:round}
.marks circle{transform-box:fill-box;transform-origin:center}
.marks.blue circle{fill:var(--blue)}
.marks.red circle{fill:var(--red)}
.legend{
  display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);
}
.legend span{display:flex;align-items:center;gap:9px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.blue{background:var(--blue)}
.dot.red{background:var(--red)}
.dash{width:18px;height:0;border-top:1px dashed rgba(94,230,255,.6);display:inline-block}
.caption{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:rgba(141,153,171,.75)}
.format-line{
  margin-top:44px;
  font-size:clamp(1.3rem,2.8vw,2rem);
  font-weight:400;line-height:1.4;letter-spacing:-.01em;
}
.format-line em{font-style:normal;color:var(--cyan);font-family:var(--mono);font-size:.85em}
.bench-after{padding:0 24px 40px;position:relative;z-index:2}
.bench-after .wrap{max-width:1120px;margin:0 auto}
@media(max-width:720px){
  .chart-card{padding:20px 14px 16px}
  .legend{gap:14px}
  .pin-stage{padding:96px 20px 60px;min-height:0}
}

/* ---------- failure classes ---------- */
.fail-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:50px 0 10px}
.fail-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;padding:34px 30px;
  position:relative;overflow:hidden;
  transform-style:preserve-3d;
  transition:border-color .5s var(--ease);
  will-change:transform;
}
.fail-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.fail-card::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px 220px at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.06),transparent 70%);
  pointer-events:none;
}
.fail-card:hover::after{opacity:1}
.fail-card.blue::before{background:linear-gradient(90deg,var(--blue),transparent)}
.fail-card.red::before{background:linear-gradient(90deg,var(--red),transparent)}
.fail-card.blue:hover{border-color:rgba(77,163,255,.35)}
.fail-card.red:hover{border-color:rgba(255,77,94,.35)}
.fail-tag{font-family:var(--mono);font-size:10px;letter-spacing:.3em;margin-bottom:16px}
.fail-card.blue .fail-tag{color:var(--blue)}
.fail-card.red .fail-tag{color:var(--red)}
.fail-card h3{font-size:1.35rem;font-weight:500;margin-bottom:10px}
.fail-card p:not(.fail-tag){color:var(--muted);font-size:.98rem}
@media(max-width:720px){.fail-grid{grid-template-columns:1fr}}

.trace-card{
  margin-top:44px;background:#05070c;border:1px solid var(--line);
  border-radius:14px;padding:28px 28px 20px;font-family:var(--mono);
}
.trace-head{
  font-size:10px;letter-spacing:.26em;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px;
}
.trace-card pre{
  font-size:12.5px;line-height:2.1;letter-spacing:.02em;
  white-space:pre-wrap;word-break:break-word;min-height:104px;
}
.trace-card .ok{color:#7fd98f}
.trace-card .warn{color:#e3c566}
.trace-card .bad{color:var(--red)}
#trace-pre.typing::after{
  content:'\258D';color:var(--cyan);animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ---------- horizontal method ---------- */
.hscroll{position:relative;z-index:2}
.hscroll-stage{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:110px 0 80px;overflow:hidden;
}
.hscroll-head{padding:0 24px}
.hscroll-viewport{margin-top:56px;overflow:visible}
.hscroll-track{
  display:flex;gap:22px;padding:0 24px;width:max-content;
  will-change:transform;
}
.step{
  width:400px;flex-shrink:0;
  border:1px solid var(--line);border-radius:16px;
  padding:34px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  backdrop-filter:blur(4px);
  transition:border-color .5s var(--ease);
}
.step:hover{border-color:rgba(94,230,255,.3)}
.step-num{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--cyan);margin-bottom:52px}
.step h3{font-size:1.25rem;font-weight:500;margin-bottom:12px;line-height:1.3}
.step p:not(.step-num){color:var(--muted);font-size:.95rem;line-height:1.65}
.step-end{
  width:480px;display:flex;align-items:center;
  background:linear-gradient(120deg,rgba(94,230,255,.06),transparent 60%);
  border-color:rgba(94,230,255,.2);
}
.step-end p{font-size:1.05rem;color:var(--text)}
@media(max-width:899px){
  .hscroll-stage{min-height:0;padding:104px 20px}
  .hscroll-head{padding:0}
  .hscroll-viewport{margin-top:44px}
  .hscroll-track{flex-direction:column;width:auto;padding:0}
  .step,.step-end{width:auto}
  .step-num{margin-bottom:24px}
}

/* ---------- flywheel ---------- */
#data{background:linear-gradient(180deg,transparent 0%,rgba(7,11,18,.85) 50%,transparent 100%)}
.big-line{
  margin-top:84px;
  font-size:clamp(1.8rem,4.6vw,3.2rem);
  font-weight:500;line-height:1.3;letter-spacing:-.02em;
  max-width:920px;
}
.big-line .bw{
  display:inline-block;
  background:linear-gradient(180deg,#fff 20%,#8fa8cc 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- closing ---------- */
.closing{text-align:center;padding-bottom:170px}
.closing .label{margin-bottom:22px}
.closing h2{margin-bottom:44px}

/* ---------- footer ---------- */
.footer{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
  padding:34px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);
  background:rgba(4,6,10,.6);
}
.foot-brand{color:var(--text);letter-spacing:.3em}
@media(max-width:720px){.footer{justify-content:center;text-align:center}}

@media(prefers-reduced-motion:reduce){
  .scroll-hint span,.marquee-track{animation:none}
  html{scroll-behavior:auto}
}
@media(min-width:900px){
  #benchmark .pin-stage{padding:90px 24px 60px}
  #benchmark .chart-card{margin-left:auto;margin-right:auto;text-align:center}
  #benchmark .chart-card .legend{justify-content:center}
  #horizon-chart{max-height:44vh;width:auto;max-width:100%;margin:0 auto}
  #benchmark .format-line{margin-top:30px}
}
@media(min-width:900px) and (max-height:840px){
  #benchmark .pin-stage{padding-top:84px}
  #benchmark .bench-h2{font-size:2.1rem;margin-bottom:12px}
  #benchmark .label{margin-bottom:14px}
  #horizon-chart{max-height:36vh}
  #benchmark .chart-card{padding:22px 26px 16px}
  #benchmark .format-line{margin-top:20px;font-size:1.35rem}
}