/* ============================================================
   HEADINGS — Otterco Display
   Drop licensed files at ./fonts/ and headings switch automatically.
   Space Grotesk stands in until then.
   ============================================================ */
@font-face{font-family:'Otterco Display';src:url('../fonts/404') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Otterco Display';src:url('../fonts/404-2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --void:#06111F; --panel:#081827; --panel-2:#0B1F33;
  --hair:rgba(240,240,242,.08); --hair-hi:rgba(240,240,242,.14);
  --ink:#F2F2F3; --dim:#9A9AA2; --faint:#626268;
  --blue:#38BDF8; --blue-hi:#8BDFFF;
  --up:#38BDF8; --down:#FF5C79;
  --display:'Otterco Display','Space Grotesk',system-ui,sans-serif;
  --e:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(24px,5vw,72px);
}
.bgfix{position:fixed;inset:-25vh -25vw;background:#06111F;z-index:0;pointer-events:none}
.site{position:relative;z-index:1}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#06111F !important;color-scheme:dark;min-height:100%;overscroll-behavior-y:none}
body{background:#06111F !important;min-height:100vh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(56,189,248,.4)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter);width:100%}
.lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

.screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:128px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:none;border-radius:2px;white-space:nowrap;transition:background 150ms var(--e),box-shadow 150ms var(--e),transform 120ms var(--e)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.btn-p{background:var(--blue);color:#06111F}
@media (hover:hover){.btn-p:hover{background:#8bdfff}}
.btn-g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-hi)}
@media (hover:hover){.btn-g:hover{background:rgba(233,238,248,.05)}}

/* nav */
nav{position:sticky;top:0;z-index:60;background:rgba(7,8,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;height:64px;gap:8px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand svg{width:22px;height:22px;flex-shrink:0}
.nav-mid{display:flex;gap:14px;margin-left:auto;margin-right:28px}
.nav-mid a{color:var(--dim);font-size:13.5px;font-weight:500;padding:10px 12px;border-radius:2px;transition:color 140ms var(--e)}
.nav-mid a.code{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--faint)}
@media (hover:hover){.nav-mid a:hover{color:var(--ink)}}
.nav-r{display:flex;align-items:center;gap:14px}
.status{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--dim)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--up)}
@keyframes blink{0%,75%,100%{opacity:1}82%{opacity:.4}}
.dot.live{animation:blink 3.4s var(--e) infinite}

/* ---- HERO (GMX pattern: full-width headline, bottom row) ---- */
.hero{height:calc(100vh - 64px);min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 72px;position:relative;overflow:hidden}
.hero-glow{position:absolute;top:-22%;right:-12%;width:64vw;height:64vw;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(56,189,248,.14),rgba(56,189,248,.05) 45%,transparent 68%);filter:blur(30px);pointer-events:none}
.hero h1{font-size:clamp(52px,7.4vw,112px);letter-spacing:-.03em;line-height:1.02;position:relative;z-index:1;color:#fff;font-weight:600}
.globe{position:absolute;top:44%;left:45vw;transform:translateY(-56%);width:60vw;aspect-ratio:1;z-index:0}
.globe canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.globe canvas:active{cursor:grabbing}
.gl-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;white-space:nowrap;padding:5px 9px;background:rgba(10,10,11,.78);border:1px solid rgba(240,240,242,.16);border-radius:2px;pointer-events:none;opacity:0;transform:translate(-50%,-130%);transition:opacity .45s var(--e);will-change:opacity}
.gl-label.on{opacity:1}
.gl-label .tk{color:var(--ink);font-weight:500}
.gl-label .px{color:var(--dim)}
.gl-label .ch{color:var(--blue)}
.gl-label .ch.dn{color:var(--down)}
.gl-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}
@media (max-width:1000px){.globe{display:block;left:auto;right:-16vw;top:3%;transform:none;width:74vw}}
.hero-row{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.9);margin-top:clamp(40px,6vh,64px);padding-top:clamp(32px,4vh,48px);display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(32px,4vw,56px);flex-wrap:wrap}
.hero .lead{font-size:15.5px;color:var(--dim);line-height:1.6;margin:0;max-width:560px}
.hero .lead code{font-family:'JetBrains Mono',monospace;font-size:.92em;color:var(--blue-hi)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:1000px){.hero-row{flex-direction:column;align-items:flex-start;gap:28px}}
/* stats bar (GMX pattern; 4th metric = positioning) */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);margin-top:44px}
.sb{padding:26px 30px 0;border-left:1px solid var(--hair)}
.sb:first-child{border-left:none;padding-left:0}
.sb .k{font-family:Inter,sans-serif;font-size:13.5px;font-weight:400;color:var(--dim);margin-bottom:6px;display:flex;align-items:center;gap:7px}
.sb .v{font-family:Inter,sans-serif;font-weight:600;font-size:clamp(22px,2.4vw,30px);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sb.pos .v{color:var(--ink)}
.sb.pos .k{color:var(--blue-hi)}
.sb.peer .k{color:var(--dim)}

.rise{opacity:0;transform:translateY(14px);animation:rise .6s var(--e) forwards}
.d1{animation-delay:.07s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---- FEATURE TRIAD (editorial, not badges) ---- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,72px)}
.feat{border-top:1px solid var(--hair-hi);padding-top:26px}
.feat .n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--blue-hi);margin-bottom:20px}
.feat h3{font-size:clamp(20px,2vw,25px);letter-spacing:-.015em;line-height:1.2;margin-bottom:14px;max-width:16ch}
.feat p{color:var(--dim);font-size:15.5px;line-height:1.6}
.feat p code{font-family:'JetBrains Mono',monospace;font-size:.9em;color:var(--ink)}

/* section head */
.head{margin-bottom:clamp(44px,6vh,72px);max-width:820px}
.head .lbl{display:block;margin-bottom:22px}
.head h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;line-height:1.12}
.head p{color:var(--dim);font-size:clamp(16px,1.7vw,18.5px);margin-top:24px;max-width:620px;line-height:1.6}
.head p code{font-family:'JetBrains Mono',monospace;font-size:.9em;color:var(--ink)}
.head .cta-row{margin-top:36px}

/* ---- TERMINAL ---- */
.terminal{border:1px solid var(--hair-hi);border-radius:2px;overflow:hidden;background:var(--panel)}
.t-bar{display:flex;align-items:center;gap:clamp(16px,3vw,34px);padding:18px 24px;border-bottom:1px solid var(--hair);background:var(--panel-2);flex-wrap:wrap}
.t-pair{display:flex;align-items:center;gap:12px;font-weight:600;font-size:16px}
.t-pair .tkn{width:30px;height:30px;border-radius:2px;background:#161618;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;color:var(--blue-hi);border:1px solid var(--hair-hi)}
.t-pair .badge{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--faint);border:1px solid var(--hair);border-radius:2px;padding:3px 7px}
.t-stat{display:flex;flex-direction:column;gap:3px}
.t-stat .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
.t-stat .v{font-family:'JetBrains Mono',monospace;font-size:15px;font-variant-numeric:tabular-nums}
.t-stat .v.u{color:var(--up)}
.t-body{display:grid;grid-template-columns:1fr 340px}
.t-chart{border-right:1px solid var(--hair);position:relative}
.t-chart svg{display:block;width:100%;height:clamp(340px,42vh,440px)}
.t-yl{position:absolute;right:10px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 0;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--faint);text-align:right}
.t-order{padding:22px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--panel-2);border:1px solid var(--hair);border-radius:2px;padding:3px;margin-bottom:18px}
.seg button{padding:11px 0;font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:var(--dim);background:none;border:none;border-radius:2px;cursor:pointer}
.seg .on-l{background:rgba(52,217,164,.14);color:var(--up)}
.f{border:1px solid var(--hair);background:var(--panel-2);border-radius:2px;padding:13px 15px;margin-bottom:10px}
.f .fk{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.f .fv{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:17px;font-variant-numeric:tabular-nums}
.f .fv em{font-style:normal;color:var(--dim);font-size:13px}
.levs{display:flex;gap:6px;margin:8px 0 18px}
.levs span{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;padding:9px 0;border:1px solid var(--hair);border-radius:2px;color:var(--dim);cursor:pointer}
.levs .on{border-color:var(--blue);color:var(--ink);background:rgba(56,189,248,.12)}
.krow{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:13px;padding:7px 0;color:var(--faint)}
.krow b{color:var(--dim);font-weight:500}
.krow.hl b{color:var(--down)}

/* ---- LIQUIDITY / VAULT ---- */
.vault{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.vault-copy h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;line-height:1.12;margin:20px 0 22px}
.vault-copy > p{color:var(--dim);font-size:17.5px;line-height:1.6;margin-bottom:34px;max-width:480px}
.mech{list-style:none;margin-bottom:34px}
.mech li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--hair)}
.mech li .n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--blue-hi);padding-top:2px}
.mech li p{color:var(--dim);font-size:14.5px;line-height:1.5}
.mech li p b{color:var(--ink);font-weight:500}
.vault-viz{border:1px solid var(--hair-hi);border-radius:2px;background:var(--panel);overflow:hidden}
.vv-top{padding:28px 30px 24px;border-bottom:1px solid var(--hair)}
.vv-top .lbl{margin-bottom:12px;display:block}
.vv-top .apy{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.6vw,46px);letter-spacing:-.03em;color:var(--up);line-height:1}
.vv-dry{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--faint);margin-top:14px;line-height:1.5;max-width:34ch}
.vv-rows{padding:10px 30px}
.vv-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair);font-family:'JetBrains Mono',monospace;font-size:13px}
.vv-row:last-child{border-bottom:none}
.vv-row .t{color:var(--dim)}.vv-row .amt{color:var(--up)}
.vv-tvl{border-top:1px solid var(--hair);padding:18px 30px;display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace}
.vv-tvl .t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.vv-tvl .v{font-size:20px;font-variant-numeric:tabular-nums}

/* ---- AGENTS ---- */
.ag-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.ag-card{border:1px solid var(--hair);border-radius:2px;padding:26px;background:var(--panel)}
.ag-card .v{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-hi);margin-bottom:16px}
.ag-card h3{font-family:Inter,sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;margin-bottom:0}
.ag-card p{color:var(--dim);font-size:14.5px;line-height:1.55;margin-top:10px}
.ag-card p code{font-family:'JetBrains Mono',monospace;font-size:.9em;color:var(--ink)}
.onboard{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.ob{display:flex;gap:14px;align-items:flex-start}
.ob .n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--blue-hi);border:1px solid rgba(56,189,248,.4);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;flex-shrink:0}
.ob p{color:var(--dim);font-size:14.5px;line-height:1.55;padding-top:2px}
.ob p code{font-family:'JetBrains Mono',monospace;font-size:.9em;color:var(--ink)}
@media (max-width:820px){.onboard{grid-template-columns:1fr}}
.boundary{margin-top:36px;padding:22px 26px;border:1px solid var(--hair);border-left:2px solid var(--down);border-radius:2px;background:rgba(255,92,121,.03);color:var(--dim);font-size:14.5px;line-height:1.6;max-width:760px}
.boundary b{color:var(--ink);font-weight:500}

/* ---- FOOTER CTA ---- */
.cta{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:128px 0 0}
.cta-main{flex:1;display:flex;flex-direction:column;justify-content:center}
.cta h2{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.02em;line-height:1.12;max-width:18ch}
.cta .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
footer{padding:56px 0 44px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;padding-bottom:48px;border-bottom:1px solid var(--hair)}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{color:var(--faint);font-size:13px;max-width:240px;line-height:1.5}
.fcol h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;font-weight:400}
.fcol a{display:block;color:var(--dim);font-size:14px;padding:6px 0;transition:color 140ms var(--e)}
.fcol a.code{font-family:'JetBrains Mono',monospace;font-size:13px}
@media (hover:hover){.fcol a:hover{color:var(--ink)}}
.foot-bot{display:flex;align-items:center;gap:22px;padding-top:28px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--faint);flex-wrap:wrap}
.foot-bot .status{margin-left:auto}

/* responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .globe-wrap{max-width:380px;margin:8px auto 0;justify-self:center}
  .triad{grid-template-columns:1fr;gap:36px}
  .vault{grid-template-columns:1fr;gap:44px}
  .ag-cards{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .statbar{grid-template-columns:1fr 1fr;row-gap:26px}
  .sb:nth-child(3){border-left:none;padding-left:0}
  .t-body{grid-template-columns:1fr}
  .t-chart{border-right:none;border-bottom:1px solid var(--hair)}
}
@media (max-width:560px){
  .nav-mid{display:none}
  .screen,.cta{padding:92px 0}
  .foot-top{grid-template-columns:1fr}
}

.promptbox{display:flex;align-items:center;gap:12px;border:1px solid var(--hair-hi);background:var(--panel);border-radius:2px;padding:13px 8px 13px 16px;min-height:50px}
.promptbox code{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);line-height:1.5;flex:1;min-width:0}
.promptbox code b{color:var(--ink);font-weight:500}
.copy{flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--blue-hi);background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.4);border-radius:2px;padding:8px 14px;cursor:pointer;transition:background 140ms var(--e),color 140ms var(--e)}
@media (hover:hover){.copy:hover{background:rgba(56,189,248,.18)}}
.copy.ok{color:var(--up);border-color:rgba(52,217,164,.4);background:rgba(52,217,164,.08)}
.btn-p2{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--blue-hi)}
@media (hover:hover){.btn-p2:hover{background:#0E2940;box-shadow:inset 0 0 0 1px var(--blue)}}
.cta-pair{display:flex;flex-direction:column;gap:9px}
.cta-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sb.peer .k{color:var(--ink)}
/* two-operator terminal */
.t-compare{display:grid;grid-template-columns:1fr 1fr}
.op{padding:20px 22px;min-width:0}
.op + .op{border-left:1px solid var(--hair)}
.op-head{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.op-head .tag{color:var(--blue-hi)}
.op-head .ln{flex:1;height:1px;background:var(--hair)}
.code{font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.75;white-space:pre;overflow-x:auto;color:var(--dim)}
.code .c{color:var(--faint)}
.code .k{color:var(--blue-hi)}
.code .s{color:var(--up)}
.code .n{color:var(--ink)}
.code .key{color:var(--ink)}
.t-conv{display:flex;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid var(--hair);background:var(--panel-2);font-family:'JetBrains Mono',monospace;font-size:12.5px;flex-wrap:wrap}
.t-conv .arw{color:var(--blue-hi)}
.t-conv .who{color:var(--faint)}
.t-conv b{color:var(--ink);font-weight:500}
.t-conv .pnl{color:var(--up)}
@media (max-width:820px){
  .t-compare{grid-template-columns:1fr}
  .op + .op{border-left:none;border-top:1px solid var(--hair)}
}

/* ---- FEES ---- */
.fee-table{border:1px solid var(--hair-hi);border-radius:2px;background:var(--panel);overflow:hidden}
.fee-row{display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:baseline;padding:20px 28px;border-top:1px solid var(--hair)}
.fee-row:first-child{border-top:none}
.fee-row .fk{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fee-row .fd{color:var(--dim);font-size:14.5px;line-height:1.55}
.fee-row .fd b{color:var(--ink);font-weight:500}
.fee-row .fv{font-family:'JetBrains Mono',monospace;font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.fee-row .fv.u{color:var(--up)}
@media (max-width:820px){.fee-row{grid-template-columns:1fr;gap:8px}}
/* ---- FAQ ---- */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;cursor:pointer;list-style:none;font-family:Inter,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;transition:color 140ms var(--e)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--faint);flex-shrink:0;transition:transform 200ms var(--e)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--blue-hi)}
@media (hover:hover){.faq summary:hover{color:var(--blue-hi)}}
.faq .a{padding:0 4px 26px;color:var(--dim);font-size:15px;line-height:1.65;max-width:640px}
.faq .a code{font-family:'JetBrains Mono',monospace;font-size:.9em;color:var(--ink)}
/* card hover polish */
.ag-card{transition:border-color 160ms var(--e),transform 160ms var(--e)}
@media (hover:hover){.ag-card:hover{border-color:var(--hair-hi);transform:translateY(-2px)}}

@media (prefers-reduced-motion:reduce){
  .rise{animation:rise .2s ease forwards;transform:none}
  .globe-wrap svg,.dot.live{animation:none}
}