/* ==================================================================
   Zeyko — Veyro's layout system, StonkTrader's palette.

   Structure, section rhythm and furniture are carried over from Veyro
   unchanged. The colour identity is taken from stonktrader.finance:
   near-black #050609 ground, #0d0f15 cards, hairline #ffffff16 borders,
   and the electric lime #ccff00 as the single accent.

   On a dark ground the accent is legible as text, so --accent-ink is
   the lime itself; --accent-fg is the near-black that sits on top of a
   lime fill. P&L keeps its own up/down pair so a number's colour always
   means the same thing.
   ================================================================== */

:root{
  --bg:#050609;
  --bg-raised:#0a0c12;
  --bg-sunken:#12151d;
  --card:#0d0f15;
  --card-2:#101319;
  --ink:#f4f7fa;
  --ink-2:rgba(244,247,250,.74);
  --ink-3:#858b98;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.17);
  --accent:#ccff00;
  --accent-ink:#ccff00;    /* accent as text — legible on the dark ground */
  --accent-fg:#0b0e09;     /* text on top of an accent fill */
  --accent-deep:#b4e300;
  --accent-hi:#ddff5c;
  --accent-soft:rgba(204,255,0,.09);
  --accent-line:rgba(204,255,0,.30);
  --up:#37f5a3;
  --up-soft:rgba(55,245,163,.11);
  --down:#ff5d72;
  --down-soft:rgba(255,93,114,.11);
  --warn:#f99c00;
  --warn-soft:rgba(249,156,0,.13);
  --danger:#ff5d72;
  --danger-soft:rgba(255,93,114,.11);
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh:0 1px 2px rgba(0,0,0,.4),0 14px 38px rgba(0,0,0,.45);
  --sh-lg:0 2px 4px rgba(0,0,0,.4),0 30px 70px rgba(0,0,0,.60);
  --display:"Chakra Petch","Space Grotesk",sans-serif;
  --body:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-card:16px; --r-lg:18px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--bg);
  /* clip, not hidden: `hidden` turns this into a scroll container and
     breaks every position:sticky inside it — which is the entire hero
     effect. `clip` contains the over-scaled window without that cost. */
  overflow-x:clip;
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3,h4,h5,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto}
.tnum{font-variant-numeric:tabular-nums}
.up{color:var(--up)}
.down{color:var(--down)}
.mono{font-family:var(--mono)}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:12px 28px;background:rgba(5,6,9,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.site-header.stuck{border-bottom-color:var(--line);background:rgba(5,6,9,.94)}
.header-logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:30px;height:30px;flex:none}
.logo-wordmark{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.04em;color:var(--ink)}
.header-nav{
  display:flex;align-items:center;gap:2px;padding:5px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-pill);
}
.nav-link{
  display:block;padding:9px 18px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav-link:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.cta-button{
  display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-fg);font-size:14px;font-weight:700;letter-spacing:.01em;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.cta-button:hover{background:var(--accent-hi);transform:translateY(-1px)}
.menu-toggle{display:none;width:40px;height:40px;place-items:center;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04)}

/* ============ HERO ============ */
/* The hero is a tall stage. While you scroll through it the window is fixed
   over the viewport and transformed DOWN into the slot on the right, so it
   reads as a small browser sitting in the hero. Scrolling releases that
   transform: the window grows to fill the screen and you end up inside it,
   with the rest of the page as its content. */
.hero{position:relative;height:150vh}
.hero-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;padding:0 28px;
}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:60px;align-items:center;width:100%;max-width:var(--maxw);margin:0 auto}
/* an empty placeholder: it only exists so the window's small position can be
   measured from real layout instead of guessed */
.pw-slot{height:470px}
.hero-copy{will-change:opacity,transform}

/* ---- the window that becomes the page ---- */
.page-window{
  position:fixed;left:0;top:0;z-index:20;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  overflow:hidden;
}
/* Hidden while the window is still card-sized, so the hero reads as the
   single clean signal card it always did. It fades in as the window opens
   out, which is the point at which there is room for it. */
.pw-sections{opacity:0}
.page-window.is-open .pw-sections{opacity:1 !important}
/* once you are inside it, it stops being a window and is simply the page */
.page-window.is-open{
  position:static;z-index:auto;
  left:auto;top:auto;width:auto !important;height:auto !important;
  border:0;border-radius:0 !important;box-shadow:none;overflow:visible;
  background:transparent;
}
/* The chrome and the signal card are the top of the page inside the window.
   They keep the same max width at every scale, so nothing shifts at the
   moment the window stops being a window. */
.page-window .preview-body{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.page-window .preview-header{border-radius:0}
/* While the window is fixed it is out of flow and adds no page height, so
   the scroll could never reach the end of the stage. The runway reserves
   the last screenful; once you are inside the window, the window's own
   content is the height and the runway is no longer needed. */
.pw-runway{height:100vh}
.page-window.is-open ~ .pw-runway{display:none}
.hero-title{margin-top:22px;font-family:var(--display);font-weight:700;font-size:clamp(38px,4.7vw,60px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.hero-title .soft{color:var(--ink-3)}
.hero-title .lime{color:var(--accent)}
.hero-subtitle{margin-top:20px;max-width:38ch;font-size:18px;line-height:1.6;color:var(--ink-2)}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn-solid{
  display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-fg);font-size:15px;font-weight:700;
  transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.btn-solid:hover{background:var(--accent-hi);transform:translateY(-2px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);color:var(--ink);font-size:15px;font-weight:600;
  transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.btn-ghost:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);transform:translateY(-2px)}
.btn-ghost.sm,.btn-solid.sm{padding:9px 18px;font-size:13.5px}

/* live ticker strip */
.hero-trust{margin-top:46px}
.trust-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--ink-3)}
.ticker-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px;min-height:52px}
.tick{
  display:flex;flex-direction:column;gap:2px;padding:9px 15px;border-radius:11px;
  background:var(--card);border:1px solid var(--line);min-width:0;overflow:hidden;
}
.tick b{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2)}
.tick .px{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.tick .ch{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.tick.skeleton{background:var(--bg-raised);border-style:dashed;min-height:52px}

/* ---- preview window ---- */
.preview-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card-2);border-bottom:1px solid var(--line)}
.preview-dots{display:flex;gap:6px;flex:none}
.dot{width:10px;height:10px;border-radius:50%}
.dot.red{background:#ff5d72}.dot.yellow{background:#f99c00}.dot.green{background:#37f5a3}
.preview-title{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.preview-body{padding:18px 20px;min-height:352px}
.preview-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.preview-sym{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.preview-name{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.preview-px{font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums;text-align:right}
.preview-ch{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;margin-top:2px}
.verdict{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 14px;border-radius:var(--r-pill);
  font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.08em;
}
.verdict.enter{background:var(--accent);color:var(--accent-fg)}
.verdict.hold{background:var(--warn-soft);color:var(--warn)}
.verdict.stand_down{background:rgba(255,255,255,.06);color:var(--ink-3)}

.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.level{padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--bg-raised)}
.level-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.level-v{margin-top:4px;font-family:var(--mono);font-size:14.5px;font-variant-numeric:tabular-nums}
.level.stop .level-v{color:var(--down)}
.level.target .level-v{color:var(--up)}

.conviction-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--ink-3)}
.score{font-family:var(--display);font-size:15px;font-weight:700;color:var(--accent);letter-spacing:0}
.components{display:flex;gap:5px;margin-top:9px;height:8px}
.components i{flex:1;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.components i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--accent);border-radius:99px}
.reasons{display:flex;flex-direction:column;gap:7px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.reasons li{display:flex;gap:9px;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.reasons li::before{content:"";flex:none;width:4px;height:4px;margin-top:7px;border-radius:50%;background:var(--accent)}
.preview-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.preview-empty{padding:40px 4px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);text-align:center}

/* ============ ASSET MARKS ============ */
.mark{
  display:inline-grid;place-items:center;flex:none;
  width:var(--s,22px);height:var(--s,22px);border-radius:50%;overflow:hidden;
  vertical-align:middle;
}
.mark svg{width:100%;height:100%;display:block}
.mark.fallback{
  background:rgba(255,255,255,.08);color:var(--ink-2);
  font-family:var(--display);font-size:calc(var(--s,22px) * .42);font-weight:700;letter-spacing:0;
}
.sym{display:inline-flex;align-items:center;gap:9px}
.tick b{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.preview-sym{display:flex;align-items:center;gap:10px}
.suggest b{display:inline-flex;align-items:center;gap:8px}

/* ============ EVIDENCE BAND ============ */
.token-section{position:relative;padding:84px 28px;overflow:hidden}
.token-inner{position:relative;text-align:center;max-width:820px;margin:0 auto}
.label-bracket{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--accent-ink)}
.token-heading{margin-top:16px;font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.token-desc{margin:16px auto 0;max-width:60ch;color:var(--ink-2);line-height:1.65}
.evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:32px auto 0;max-width:840px}
.ev{padding:18px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.ev-v{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ev-k{margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);line-height:1.5}
.token-note{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3);line-height:1.7}
.token-cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:14px;font-weight:600;color:var(--accent-ink);border-bottom:1px solid var(--accent-line);padding-bottom:3px}
.token-cta:hover{border-bottom-color:var(--accent)}

/* ============ SECTION FURNITURE ============ */
.section{padding:104px 28px}
.section-number{font-family:var(--display);font-size:64px;font-weight:700;line-height:1;color:rgba(255,255,255,.09)}
.section-label{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.section-title{margin-top:14px;font-family:var(--display);font-weight:700;font-size:clamp(29px,3.5vw,44px);line-height:1.12;letter-spacing:-.028em;text-wrap:balance}
.section-title .soft{color:var(--ink-3)}
.section-description{margin-top:20px;max-width:56ch;color:var(--ink-2);line-height:1.7;font-size:16.5px}
.section-description code{font-family:var(--mono);font-size:14px;color:var(--accent-ink)}
.header-inline{display:flex;align-items:baseline;gap:14px}
.number-small{font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink-3)}

/* ============ 01 PROBLEMS ============ */
.problems-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.problem-card{
  padding:36px 32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.problem-card:hover{transform:translateY(-5px);border-color:var(--accent-line);background:var(--card-2)}
.problem-card-number{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--accent-ink)}
.problem-card-title{margin-top:16px;font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.02em}
.problem-card-list{display:flex;flex-direction:column;gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.problem-card-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.problem-card-list li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;background:var(--accent);opacity:.7}

/* ============ 02 ARCHITECTURE ============ */
.architecture-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
/* A spec sheet, not a bullet list. Hairline rows read as instrument
   documentation; a column of lime tick-circles reads as a template. */
.spec-list{margin-top:32px;border-top:1px solid var(--line)}
.spec{
  display:grid;grid-template-columns:minmax(108px,auto) 1fr;gap:20px;align-items:baseline;
  padding:14px 2px;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease),border-color .3s var(--ease);
}
.spec:hover{padding-left:10px;border-bottom-color:var(--accent-line)}
.spec-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);
  transition:color .3s var(--ease);
}
.spec:hover .spec-k{color:var(--accent-ink)}
.spec-v{font-size:15px;color:var(--ink-2);line-height:1.45}
.experience-btn{
  display:inline-flex;align-items:center;gap:9px;margin-top:36px;padding:14px 28px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-fg);font-size:14.5px;font-weight:700;
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.experience-btn:hover{background:var(--accent-hi);transform:translateY(-2px)}
.flowchart{display:flex;flex-direction:column;align-items:center;gap:16px}
.flow-node{width:100%;display:flex;align-items:center;gap:15px;padding:20px 22px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.flow-node.center{background:var(--card-2);border-color:var(--accent-line)}
.node-icon-wrap{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.06);color:var(--ink-2)}
.flow-node.center .node-icon-wrap{background:var(--accent);color:var(--accent-fg)}
.node-label{display:block;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.015em}
.node-desc{display:block;margin-top:2px;font-size:13px;color:var(--ink-3)}
.flow-connection{position:relative;height:34px;width:2px;background:linear-gradient(180deg,var(--accent-line),rgba(204,255,0,.06));overflow:visible}
.flow-connection::after{content:"";position:absolute;bottom:-1px;left:-2.5px;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.7}

/* ============ 03/04 SPLIT SECTIONS ============ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.step-cards{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.step-card{
  display:flex;align-items:flex-start;gap:16px;padding:20px 22px;background:var(--card);
  border:1px solid var(--line);border-radius:13px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.step-card:hover{transform:translateX(5px);border-color:var(--accent-line);background:var(--card-2)}
.card-number{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--accent-ink);padding-top:3px;flex:none}
.step-card h4{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.step-card p{margin-top:4px;font-size:14px;color:var(--ink-3);line-height:1.5}
.stats-row{display:flex;flex-wrap:wrap;gap:44px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.stat-value{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.03em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.stat-label{margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3)}

/* dashboard panels on the landing page */
.dash{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-lg);overflow:hidden}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--card-2)}
.dash-head h4{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em}
.dash-body{padding:18px 20px 22px}

/* ============ CHARTS ============ */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:rgba(255,255,255,.06);stroke-width:1}
.chart .axis{font-family:var(--mono);font-size:9px;fill:rgba(244,247,250,.42)}
.chart .bench-axis{fill:rgba(244,247,250,.28)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.chart .line.bench{stroke:rgba(244,247,250,.30);stroke-width:1.4;stroke-dasharray:4 4}
.chart .area{stroke:none}
.chart .level-line{stroke-width:1.2;stroke-dasharray:5 4;fill:none}
.chart .level-line.stop{stroke:var(--down)}
.chart .level-line.target{stroke:var(--up)}
.chart .marker{stroke-width:1.5;fill:var(--bg)}
.chart .marker.buy{stroke:var(--up)}
.chart .marker.sell{stroke:var(--down)}

/* candles */
.chart .wick{stroke-width:1;shape-rendering:crispEdges}
.chart .body{shape-rendering:crispEdges}
.chart .up-c{fill:var(--up);stroke:var(--up)}
.chart .down-c{fill:var(--down);stroke:var(--down)}
.chart .vol-up{fill:var(--up);opacity:.30}
.chart .vol-down{fill:var(--down);opacity:.30}
.chart .ma{fill:none;stroke-width:1.3;stroke-linejoin:round}
.chart .ma-fast{stroke:var(--accent);opacity:.95}
.chart .ma-slow{stroke:rgba(244,247,250,.42)}
.chart .last-band{fill:var(--accent);}
.chart .last-band-text{font-family:var(--mono);font-size:9.5px;fill:var(--accent-fg);font-weight:700}
.chart .pane-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;fill:rgba(244,247,250,.36)}
.chart .crosshair{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:3 3}

.chart-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3)}
.chart-legend i{display:inline-block;width:14px;height:2px;margin-right:7px;vertical-align:middle;background:var(--accent)}
.chart-legend .bench i{background:rgba(244,247,250,.32)}
.chart-legend .up-k i{background:var(--up)}
.chart-legend .down-k i{background:var(--down)}
.chart-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ============ 05 BUILD — live terminal ============ */
.build-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.terminal-card{background:#07080c;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden}
.terminal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;background:var(--card-2);border-bottom:1px solid var(--line)}
.terminal-head .preview-title{color:var(--ink-3)}
.term-btn{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:5px 10px;border-radius:7px;transition:background .2s var(--ease),color .2s var(--ease)}
.term-btn:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.terminal-body{
  padding:20px;font-family:var(--mono);font-size:13px;line-height:1.85;
  color:var(--ink-2);height:330px;overflow-y:auto;overflow-x:auto;cursor:text;
}
.term-line{white-space:pre-wrap;word-break:break-word}
.term-line .prompt{color:var(--accent)}
.term-line .cmd{color:var(--ink)}
.term-line.dim{color:var(--ink-3)}
.term-line.ok{color:var(--accent-hi)}
.term-line.err{color:var(--down)}
.term-line .up{color:var(--up)}
.term-line .down{color:var(--down)}
.term-input-row{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.term-input-row .prompt{color:var(--accent);flex:none}
#termInput{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-family:var(--mono);font-size:13px;color:var(--ink);caret-color:var(--accent);padding:0;
}
.term-hint{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);line-height:1.8}
.term-hint b{color:var(--accent-ink);font-weight:500}

/* ============ FOOTER ============ */
.site-footer{background:#040507;color:var(--ink);padding:82px 28px 34px;position:relative;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr));gap:56px}
.footer-wordmark{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.04em}
.footer-wordmark span{color:var(--accent)}
.footer-tagline{margin-top:18px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:34ch}
.footer-code{display:inline-block;margin-top:24px;padding:11px 15px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.footer-code b{color:var(--accent);font-weight:400}
.footer-col h5{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--ink-3)}
.footer-col ul{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.footer-col a,.footer-col li{font-size:14.5px;color:var(--ink-2);transition:color .2s var(--ease)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:56px;padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.footer-chip{padding:6px 14px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;border:1px solid var(--accent-line)}
.risk-note{margin-top:26px;padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:13px;line-height:1.7;color:var(--ink-2);max-width:62ch}
.risk-note b{color:var(--ink)}

/* ============ THE APP ============ */
.app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.app-header{
  position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  padding:12px 28px;background:rgba(5,6,9,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.app-nav{display:flex;align-items:center;gap:2px;justify-self:center;padding:5px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-pill)}
.app-tab{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;color:var(--ink-2);transition:all .2s var(--ease)}
.app-tab:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.app-tab.is-active{background:var(--accent);color:var(--accent-fg);font-weight:700}
.app-header-right{display:flex;align-items:center;gap:10px}
.credit-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);
  font-family:var(--mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;
}
.app-main{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:32px 28px 80px}
.view-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.view-title{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.03em}
.view-sub{margin-top:6px;font-size:14.5px;color:var(--ink-3)}
.view-sub b{color:var(--accent-ink);font-weight:600}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.panel + .panel{margin-top:20px}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.panel-head h3{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.panel-head .sub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin-top:3px}
.panel-body{padding:20px 22px}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.tile{padding:20px 22px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.tile:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.tile-label{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3)}
.tile-value{margin-top:10px;font-family:var(--display);font-weight:700;font-size:29px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile-foot{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.tile-foot.good{color:var(--up)}
.tile-foot.bad{color:var(--down)}
.tile-foot.warn{color:var(--warn)}

.grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.grid-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.row{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.rows{display:flex;flex-direction:column;gap:9px}
.row-main{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:600}
.row-sub{margin-top:2px;font-size:12.5px;color:var(--ink-3)}
.row-end{margin-left:auto;text-align:right;flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600}
.pill.on{background:var(--up-soft);color:var(--up)}
.pill.off{background:rgba(255,255,255,.06);color:var(--ink-3)}
.pill.warnp{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--down-soft);color:var(--down)}
.pill.lime{background:var(--accent);color:var(--accent-fg)}

.meter{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s var(--ease)}

.btn-mini{padding:7px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);color:var(--ink-2);transition:all .2s var(--ease)}
.btn-mini:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink)}
.btn-mini.danger:hover{border-color:rgba(255,93,114,.45);background:var(--danger-soft);color:var(--danger)}
.btn-mini.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:700}
.btn-mini.primary:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--accent-fg)}
.btn-mini[disabled]{opacity:.4;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);position:relative}
.search:focus-within{border-color:var(--accent-line)}
.search input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:14px;color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search svg{flex:none;color:var(--ink-3)}
.suggest{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  background:var(--card-2);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--sh-lg);
  overflow:hidden;max-height:320px;overflow-y:auto;
}
.suggest button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;text-align:left;transition:background .15s var(--ease)}
.suggest button:hover{background:var(--accent-soft)}
.suggest b{font-family:var(--display);font-size:13.5px;min-width:74px;color:var(--accent-ink)}
.suggest span{font-size:12.5px;color:var(--ink-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest em{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-style:normal}

.seg{display:inline-flex;padding:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-pill);gap:2px}
.seg button{padding:6px 13px;border-radius:var(--r-pill);font-family:var(--mono);font-size:11.5px;color:var(--ink-3);transition:all .2s var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button.is-active{background:var(--accent);color:var(--accent-fg);font-weight:700}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;padding:9px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap;font-weight:500;
}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink-2)}
.tbl td b{color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.tbl th.num{text-align:right}
.tbl tbody tr:hover{background:rgba(255,255,255,.03)}
.tbl-scroll{overflow-x:auto;margin:0 -22px;padding:0 22px}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;color:var(--ink-3)}
.field input,.field select{
  padding:11px 14px;border:1px solid var(--line-strong);border-radius:11px;background:var(--bg-raised);
  font-size:14px;font-variant-numeric:tabular-nums;outline:none;color:var(--ink);
  transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus{border-color:var(--accent)}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.hint{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.6}
.hint b{color:var(--accent-ink);font-weight:500}

/* agent cards */
.agent-card{padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.agent-card.is-halted{border-color:rgba(249,156,0,.4)}
.agent-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.agent-name{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.agent-limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin-top:16px}
.limit{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-raised)}
.limit-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-3)}
.limit-v{margin-top:3px;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.journal{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);max-height:190px;overflow-y:auto}
.jline{display:flex;gap:10px;padding:5px 0;font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--ink-2)}
.jline time{color:var(--ink-3);flex:none}
.jline b{flex:none;min-width:74px;font-weight:500;color:var(--ink-3)}
.jline.ENTER b{color:var(--up)}.jline.EXIT b{color:var(--down)}
.jline.HALTED b,.jline.BLOCKED b,.jline.PENDING b{color:var(--warn)}
.jline.ERROR b{color:var(--danger)}

.empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:14px;line-height:1.7}
.empty b{display:block;font-family:var(--display);font-size:16px;color:var(--ink);margin-bottom:6px}
.note{
  display:flex;gap:11px;padding:14px 16px;border-radius:12px;
  background:var(--warn-soft);border:1px solid rgba(249,156,0,.28);
  font-size:13px;line-height:1.6;color:#f6c67a;
}
.note.plain{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--ink-2)}
.note.good{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-hi)}
.note svg{flex:none;margin-top:2px}
.note b{color:var(--ink)}

/* broker banner — states what is actually executing orders */
.broker-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:13px 18px;border-radius:12px;margin-bottom:20px;
  border:1px solid var(--line);background:var(--card);
  font-size:13px;color:var(--ink-2);
}
.broker-bar.is-real{border-color:var(--accent-line);background:linear-gradient(90deg,var(--accent-soft),transparent 60%)}
.broker-bar.is-live{border-color:rgba(255,93,114,.4);background:linear-gradient(90deg,var(--down-soft),transparent 60%)}
.broker-bar .tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);color:var(--ink-3);flex:none;
}
.broker-bar.is-real .tag{background:var(--accent);color:var(--accent-fg);font-weight:700}
.broker-bar.is-live .tag{background:var(--down);color:#fff;font-weight:700}
.broker-bar .grow{flex:1;min-width:220px}

.btn-connect{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn-connect:hover{background:rgba(204,255,0,.16);transform:translateY(-1px)}
.btn-connect.is-on{border-color:var(--line-strong);background:rgba(255,255,255,.05);color:var(--ink-2)}
.btn-connect.is-on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--up);flex:none}
.btn-connect[disabled]{opacity:.5;cursor:progress}

/* The venue label, deliberately quiet.
   It has to be present — a book of simulated fills that looks identical to a
   funded one is the one thing a trading UI must never show — but it is a
   footnote, not a feature. No accent colour, no dot, no animation: the lime
   is reserved for things you should actually look at.
   The exception is live money, which SHOULD be impossible to miss. */
.venue-chip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  color:rgba(244,247,250,.30);cursor:default;padding:0 2px;white-space:nowrap;
  transition:color .2s var(--ease);
}
.venue-chip:hover{color:var(--ink-3)}
.venue-chip.is-live{
  color:var(--down);font-weight:700;font-size:10.5px;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--down);background:var(--down-soft);
}

/* ============ MODAL / TOAST ============ */
.modal-root{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade .2s var(--ease)}
@keyframes fade{from{opacity:0}}
.modal{
  position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--card-2);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  animation:pop .22s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.modal-close{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--ink-3)}
.modal-close:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.modal-body{padding:22px;display:flex;flex-direction:column;gap:16px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg-raised)}

.toast{
  position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,14px);
  padding:13px 22px;border-radius:var(--r-pill);background:var(--card-2);border:1px solid var(--line-strong);
  color:var(--ink);font-size:14px;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);max-width:calc(100vw - 40px);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--danger);border-color:var(--danger);color:#fff}
.toast.good{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}

/* ============ MOTION ============ */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.rise{opacity:0;transform:translateY(18px);animation:rise .85s var(--ease) forwards}
.rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.14s}.rise.d3{animation-delay:.23s}.rise.d4{animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}

.flow-connection::before{
  content:"";position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  animation:flowDown 2.6s cubic-bezier(.55,0,.45,1) infinite;
}
.flowchart .flow-connection:nth-of-type(4)::before{animation-delay:.9s}
.flowchart .flow-connection:nth-of-type(6)::before{animation-delay:1.8s}
@keyframes flowDown{
  0%{top:-4px;opacity:0;transform:scale(.5)}
  15%{opacity:1;transform:scale(1)}
  85%{opacity:1;transform:scale(1)}
  100%{top:calc(100% - 4px);opacity:0;transform:scale(.5)}
}
/* The mark is a ring of dots, so it assembles the way it reads: each dot
   pops in around the circle, then the whole ring turns slowly on hover. */
.logo-mark ellipse{transform-box:fill-box;transform-origin:center;animation:dotIn .42s cubic-bezier(.2,1.5,.4,1) backwards}
.logo-mark ellipse:nth-of-type(1){animation-delay:.02s}
.logo-mark ellipse:nth-of-type(2){animation-delay:.07s}
.logo-mark ellipse:nth-of-type(3){animation-delay:.12s}
.logo-mark ellipse:nth-of-type(4){animation-delay:.17s}
.logo-mark ellipse:nth-of-type(5){animation-delay:.22s}
.logo-mark ellipse:nth-of-type(6){animation-delay:.27s}
.logo-mark ellipse:nth-of-type(7){animation-delay:.32s}
.logo-mark ellipse:nth-of-type(8){animation-delay:.37s}
@keyframes dotIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

.logo-mark{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.header-logo:hover .logo-mark{transform:rotate(120deg)}
.meter i{animation:meterFill .8s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes meterFill{from{width:0 !important}}
.chart .line:not(.bench){stroke-dasharray:var(--len,0);stroke-dashoffset:var(--len,0);animation:draw 1.1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .body,.chart .wick{animation:candleIn .5s var(--ease) backwards}
@keyframes candleIn{from{opacity:0}}


/* --- price ticks flash the direction they moved, the way a real book does --- */
@keyframes flashUp{0%{background:rgba(55,245,163,.22);border-color:var(--up)}100%{background:var(--card);border-color:var(--line)}}
@keyframes flashDown{0%{background:rgba(255,93,114,.22);border-color:var(--down)}100%{background:var(--card);border-color:var(--line)}}
.tick.up-flash{animation:flashUp 1.1s var(--ease)}
.tick.down-flash{animation:flashDown 1.1s var(--ease)}
.tick{transition:transform .25s var(--ease)}
.tick:hover{transform:translateY(-3px)}

/* --- staggered entrances: children arrive in sequence, not all at once --- */
.js .reveal .stagger > *{opacity:0;transform:translateY(14px)}
.js .reveal.in .stagger > *{animation:stagIn .6s var(--ease) forwards;animation-delay:calc(var(--d,0) * 70ms)}
@keyframes stagIn{to{opacity:1;transform:none}}

/* --- the skeleton breathes while the first quotes are in flight --- */
.tick.skeleton{position:relative;overflow:hidden}
.tick.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:sweep 1.4s linear infinite;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* --- section numbers drift up as they come into view --- */
.js .reveal .section-number{transform:translateY(12px);opacity:0;transition:all .8s var(--ease)}
.js .reveal.in .section-number{transform:none;opacity:1}

/* --- the terminal gets a slow scan, like a screen that is actually on --- */
.terminal-card{position:relative}
.terminal-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.028),transparent);
  animation:scan 7s linear infinite;
}
@keyframes scan{0%{transform:translateY(-120px)}100%{transform:translateY(520px)}}

/* --- figures count into place rather than snapping --- */
.ev-v,.stat-value,.tile-value{transition:color .3s var(--ease)}
.counting{color:var(--accent)}

/* --- verdict pill lands with a beat --- */
.verdict{animation:verdictIn .45s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes verdictIn{from{opacity:0;transform:scale(.86)}}

/* --- conviction bars fill left to right --- */
.components i::after{animation:fillBar .8s var(--ease) backwards}
@keyframes fillBar{from{width:0}}

/* --- rows lift on hover across the app --- */
.tbl tbody tr{transition:background .18s var(--ease)}
.agent-card,.ev,.problem-card{transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.ev:hover{transform:translateY(-4px);border-color:var(--accent-line)}

/* ============ SECTION SEAMS ============ */
.section.raised,.token-section{
  border-block:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.022) 110px,rgba(255,255,255,.022) calc(100% - 110px),rgba(255,255,255,0) 100%);
}
.site-header.stuck,.app-header{border-bottom-color:var(--line)}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px), (max-height:640px){
  /* No pinning where there is not room for it to read as an effect. The
     script watches for exactly this and leaves the window open, so the page
     is simply a page. */
  .hero{height:auto}
  .hero-sticky{position:static;height:auto;padding:64px 20px 56px}
  .pw-slot{display:none}
  .pw-runway{display:none}
  .page-window{
    position:static !important;transform:none !important;
    height:auto !important;border:0;border-radius:0 !important;
    overflow:visible;background:transparent;
  }
  .hero-copy{opacity:1 !important;transform:none !important}
}
@media (max-width:1080px){
  .header-nav{display:none}
  .header-nav.open{
    display:flex;position:absolute;top:72px;left:16px;right:16px;flex-direction:column;align-items:stretch;
    background:var(--card-2);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--sh-lg);padding:10px;
  }
  .menu-toggle{display:grid}
  .hero-inner,.architecture-layout,.split,.build-layout,.grid-2,.grid-even{grid-template-columns:1fr;gap:52px}
  .grid-2,.grid-even{gap:20px}
  .hero-subtitle{max-width:52ch}
  .problems-cards{grid-template-columns:1fr 1fr}
  .tiles,.evidence-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .footer-brand{grid-column:1/-1}
  .split .split-visual,.build-layout .terminal-card{order:2}
  .flowchart{max-width:440px;margin:0 auto}
  .app-header{grid-template-columns:auto auto;row-gap:12px}
  .app-nav{grid-column:1/-1;justify-self:stretch;overflow-x:auto}
  .app-tab{white-space:nowrap}
}
@media (max-width:700px){
  .problems-cards,.tiles,.evidence-grid,.levels{grid-template-columns:1fr}
  .ticker-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{padding:64px 20px 56px}
  .section{padding:76px 20px}
  .token-section{padding:66px 20px}
  .site-header,.app-header{padding:10px 16px}
  .app-main{padding:24px 16px 60px}
  .site-footer{padding:64px 20px 30px}
  .problem-card{padding:28px 24px}
  .stats-row{gap:28px}
  .footer-top{grid-template-columns:1fr}
  .view-title{font-size:25px}
  .tbl-scroll{margin:0 -16px;padding:0 16px}
}
@media (max-width:520px){
  .site-header{padding:10px 14px}
  .logo-wordmark{font-size:16px}
  .cta-button{padding:9px 15px;font-size:12.5px;gap:6px}
  .menu-toggle{width:36px;height:36px}
  .header-right{gap:4px}
  .hero-title{font-size:34px}
  .ticker-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
  .rise{opacity:1;transform:none}
  .chart .line:not(.bench){stroke-dashoffset:0}
  .hero{height:auto}
  .hero-sticky{position:static;height:auto}
  .pw-slot,.pw-runway{display:none}
  .page-window{
    position:static !important;transform:none !important;
    height:auto !important;border:0;border-radius:0 !important;
    overflow:visible;background:transparent;
  }
  .hero-copy{opacity:1 !important;transform:none !important}
}