@font-face{font-family:Geist;src:url(/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#0a0c10;--bg-2:#11141a;--bg-3:#171b23;--line:#222833;--line-2:#2d3442;
  --text:#eef1f5;--muted:#9aa3b2;--faint:#7f8898;
  --accent:#2ee6a6;--accent-ink:#04140e;
  --k1:#2ee6a6;--k2:#7aa7ff;--k3:#f2c14e;--k4:#e8e9ec;
  --bid:#2ee6a6;--ask:#ff6b6b;
  --r:14px;--r-sm:10px;--max:1200px;
  --ring:0 0 0 1px var(--line);--ring-2:0 0 0 1px var(--line-2);
  --lift:0 1px 2px rgb(0 0 0 / .12),0 12px 32px -12px rgb(0 0 0 / .35);
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:dark}
.scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;opacity:0;transition-property:opacity;transition-duration:1.2s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
.is-3d .scene{opacity:1}
html:not(.is-3d) body{background:radial-gradient(60% 50% at 75% 40%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
/* glass over the scene */
.step,.route-card,.book-demo,.cell,.opanel{background:color-mix(in srgb,var(--bg-2) 62%,transparent)!important;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:transparent;color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.nw{white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);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:10px;font-weight:650;font-size:17px;letter-spacing:-.01em}
.brand svg{width:28px;height:28px}
.brand-bg{fill:var(--bg-3)}
.brand-v{stroke:var(--accent);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav ul{display:flex;gap:30px;list-style:none;font-size:14px;color:var(--muted)}
.nav ul a{transition:color .15s}
.nav ul a:hover{color:var(--text)}

/* buttons: all pill */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:44px;padding:0 22px;border-radius:999px;font-weight:560;font-size:15px;transition-property:transform,background-color,border-color,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--bg-3)}

/* hero */
.hero{position:relative;min-height:calc(100dvh - 66px);display:grid;align-items:center;padding:64px 0 96px}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent) 0%,transparent 55%)}

.hero-grid{position:relative;width:100%}
h1{font-size:clamp(52px,9.2vw,136px);line-height:.95;letter-spacing:-.05em;font-weight:700;max-width:none;text-shadow:0 2px 40px rgb(0 0 0 / .45)}
.accent{color:var(--accent)}
.lead{margin-top:22px;font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:44ch}
.cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-viz{position:relative;aspect-ratio:8/7;box-shadow:var(--ring),var(--lift);border-radius:var(--r);background:linear-gradient(180deg,var(--bg-2),var(--bg));overflow:hidden}
.hero-viz canvas{width:100%;height:100%;display:block}
.viz-legend{position:absolute;left:16px;bottom:14px;right:16px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.viz-legend span{display:inline-flex;align-items:center;gap:6px}
.k{display:inline-block;width:8px;height:8px;border-radius:2px}
.k1{background:var(--k1)}.k2{background:var(--k2)}.k3{background:var(--k3)}.k4{background:var(--k4)}

/* 3D hero: WebGL canvas fades in over the 2D one */
.hero-viz canvas.gl{position:absolute;inset:0;opacity:0;transition-property:opacity;transition-duration:.8s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.hero-viz.is-3d canvas.gl{opacity:1}
.hero-viz.is-3d #flow{opacity:0;transition:opacity .6s}

/* kinetic headline: per-letter variable weight follows the pointer */
.kinetic .line{display:block}
.kinetic .ch{display:inline-block;will-change:transform;font-variation-settings:"wght" var(--w,680);transform:translateY(var(--y,0px));transition-property:font-variation-settings,transform;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1)}

/* tilt + shine on product cells (idea from 3D Animation Studio, vanilla) */
.bento{perspective:1200px}
.cell{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.cell:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--shine,0);background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--text) 9%,transparent),transparent 60%);transition-property:opacity;transition-duration:.2s}
.cell h3,.cell p{transform:translateZ(24px)}

/* hero load-in */
.hero-copy>:not(h1){animation:rise .9s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.1s}.hero-copy>:nth-child(3){animation-delay:.2s}
.hero-viz{animation:fade 1.2s var(--ease) .1s both}
@keyframes rise{from{transform:translateY(16px);filter:blur(6px)}}
.kinetic .line{animation:blurin 1.1s cubic-bezier(.16,1,.3,1) both}
.kinetic .line+.line{animation-delay:.12s}
@keyframes blurin{from{filter:blur(18px);transform:translateY(.25em) scale(1.06);letter-spacing:.02em}}
@keyframes fade{from{opacity:0;transform:scale(.985)}}

/* targets */
.targets{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0 18px}
.targets-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.t b{display:block;font-size:clamp(28px,3.2vw,40px);font-weight:620;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.t span{color:var(--muted);font-size:14px}
.fine{margin-top:22px;color:var(--faint);font-size:12px}

/* section base */
section{scroll-margin-top:80px}
.route,.book,.products,.road{padding:120px 0}
h2{font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:650;max-width:20ch}
.sub{margin-top:14px;color:var(--muted);font-size:17px;max-width:52ch}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}

/* route: sticky card + scroll-driven steps */
.route-steps{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px;align-items:start}
.steps{list-style:none;display:grid;gap:18px}
.step{display:grid;grid-template-columns:14px 1fr;gap:18px;padding:26px 26px 26px 22px;border-radius:var(--r);background:var(--bg-2);box-shadow:var(--ring)}
.step-k{width:10px;height:10px;border-radius:3px;margin-top:9px;background:var(--k1)}
.step-k.k2{background:var(--k2)}.step-k.k3{background:var(--k3)}.step-k.k4{background:var(--k4)}
.step h3{font-size:19px;letter-spacing:-.01em;font-weight:600}
.step p{color:var(--muted);font-size:15px;margin-top:6px}
.route-card{position:sticky;top:110px;border-radius:24px;background:var(--bg-2);padding:16px;box-shadow:var(--ring),var(--lift);}
.rc-head,.rc-foot{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:4px 6px}
.rc-rows{display:grid;gap:10px;margin:18px 0;min-height:212px}
.rc-row{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:8px;background:var(--bg-3);font-size:14px;transition:background .4s,transform .4s var(--ease)}
.rc-row .bar{grid-column:1/-1;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.rc-row .bar i{display:block;height:100%;width:0;background:currentColor;transition:width .9s var(--ease)}
.rc-row.win{background:color-mix(in srgb,var(--accent) 12%,var(--bg-3))}
.rc-foot b{color:var(--accent);font-size:14px}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .step{animation:stepin linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .cell{animation:stepin linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
    .timeline li{animation:stepin linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
}
@keyframes stepin{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}

/* enterprise */
.ent{padding:120px 0;border-top:1px solid var(--line)}
.ent-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.ent-lead{position:sticky;top:110px}
.ent-list{display:grid;grid-template-columns:1fr 1fr;gap:36px 40px}
.ent-list dt{font-size:18px;font-weight:600;letter-spacing:-.01em;padding-top:18px;border-top:2px solid var(--accent);width:fit-content;min-width:60%}
.ent-list dd{text-shadow:0 1px 12px var(--bg);color:var(--muted);font-size:15px;margin-top:8px}
@media (max-width:960px){.ent-grid,.ent-list{grid-template-columns:1fr}.ent-lead{position:static}.ent{padding:84px 0}}

/* order book */
.book{border-top:1px solid var(--line)}
.book-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.book-demo{border-radius:18px;background:var(--bg-2);padding:12px;font-size:13px;box-shadow:var(--ring),var(--lift)}
.bd-head,.bd-cols{padding-inline:10px}.bd-head{padding-top:8px}
.bd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.bd-tag{font-size:11px;color:var(--faint);border:1px solid var(--line-2);border-radius:999px;padding:2px 9px}
.bd-cols{display:flex;justify-content:space-between;color:var(--faint);font-size:11px;padding:0 10px 6px}
.bd-side{display:grid;gap:2px}
.lvl{position:relative;display:flex;justify-content:space-between;padding:5px 10px;border-radius:6px;font-family:var(--mono);font-variant-numeric:tabular-nums;overflow:hidden}
.lvl i{position:absolute;inset:0 0 0 auto;opacity:.14;transition:width .6s var(--ease)}
.asks .lvl{color:var(--ask)}.asks .lvl i{background:var(--ask)}
.bids .lvl{color:var(--bid)}.bids .lvl i{background:var(--bid)}
.lvl span{position:relative}
.lvl .sz{color:var(--text)}
.lvl.flash{animation:flash .7s var(--ease)}
.lvl.ice:after{content:"iceberg";position:absolute;right:86px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--k3);font-family:var(--mono)}
@keyframes flash{from{background:color-mix(in srgb,currentColor 22%,transparent)}}
.bd-mid{padding:10px;text-align:center;font-size:18px;font-weight:600;border-block:1px solid var(--line);margin:8px 0}
.otabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.otabs button{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;color:var(--muted);transition-property:color,background-color,border-color,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.otabs button:active{transform:scale(.96)}
.otabs button:hover{color:var(--text)}
.otabs button[aria-selected=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.opanel{margin-top:22px;padding:22px 24px;border-left:2px solid var(--accent);background:var(--bg-2);border-radius:0 var(--r) var(--r) 0;min-height:118px;view-transition-name:opanel}
.opanel h3{font-size:18px;font-weight:600}
.opanel p{color:var(--muted);margin-top:6px;font-size:15px}
::view-transition-old(opanel){animation:vt-out .18s ease-in both}
::view-transition-new(opanel){animation:vt-in .25s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* bento: 5 cells */
.products{border-top:1px solid var(--line)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(220px,auto);gap:14px;margin-top:56px}
.cell{position:relative;overflow:hidden;border-radius:var(--r);padding:28px;background:var(--bg-2);box-shadow:var(--ring);transition-property:box-shadow,transform;transition-duration:.15s,.2s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.cell:hover{box-shadow:var(--ring-2),var(--lift)}
.cell h3{position:relative;font-size:21px;font-weight:620;letter-spacing:-.015em}
.cell p{position:relative;color:var(--muted);font-size:15px;margin-top:8px;max-width:38ch}
.c-route{grid-column:span 4;grid-row:span 2;background:radial-gradient(70% 80% at 85% 90%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--bg-2)}
.c-proof{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,color-mix(in srgb,var(--k2) 16%,var(--bg-2)),var(--bg-2) 60%)}
.c-vault{grid-column:span 2;background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--text) 4%,transparent) 0 1px,transparent 1px 12px);background-color:var(--bg-2)}
.c-market{grid-column:span 2;background:linear-gradient(200deg,color-mix(in srgb,var(--k3) 14%,var(--bg-2)),var(--bg-2) 65%)}
.c-pay{grid-column:span 2}
.art-rings{position:absolute;right:-60px;bottom:-60px;width:360px;height:360px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 0 0 40px color-mix(in srgb,var(--accent) 5%,transparent),0 0 0 80px color-mix(in srgb,var(--accent) 3%,transparent)}
.art-hash{position:absolute;left:28px;right:28px;bottom:28px;font-size:13px;color:var(--k2);word-break:break-all;opacity:.85}

/* roadmap */
.road{border-top:1px solid var(--line)}
.timeline{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;position:relative}
.timeline:before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line-2)}
.timeline li{position:relative;padding:34px 24px 0 0}
.timeline li:before{content:"";position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2)}
.timeline li.now:before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)}
.timeline b{font-size:18px;font-weight:600}
.timeline p{color:var(--muted);font-size:14px;margin-top:6px;max-width:26ch}

/* access */
.access{padding:120px 0;border-top:1px solid var(--line);background:radial-gradient(50% 70% at 50% 100%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.access-in{display:grid;justify-items:center;text-align:center;gap:6px}
.access h2{margin:0 auto}
.access .sub{margin:12px auto 26px}

.foot{border-top:1px solid var(--line);padding:30px 0;color:var(--faint);font-size:13px}
.foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot p{max-width:70ch}

@media (max-width:960px){
  .nav ul{display:none}
  .hero{min-height:auto;padding:48px 0}
  .hero-grid,.route-steps,.book-grid{grid-template-columns:1fr;gap:40px}
  .route-card{position:relative;top:0}
  .targets-row{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr}
  .bento .cell{grid-column:auto;grid-row:auto;min-height:200px}
  .timeline{grid-template-columns:1fr 1fr;gap:28px 0}
  .timeline:before{display:none}
  .route,.book,.products,.road,.access{padding:84px 0}
}
@media (max-width:560px){.wrap{padding:0 18px}.nav .btn{display:none}.timeline{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}