/* ═══════════════════════════════════════════════════════════════
   TRADEOFF — landing
   0. tokens   1. base   2. type   3. chrome   4. hero
   5. statement 6. loop  7. dashboard 8. vs  9. milestones
   10. poster  11. footer 12. motion 13. responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. TOKENS ─────────────────────────────────────────────── */
:root{
  --bg:      #0C0B0A;
  --bg-2:    #111010;
  --bg-3:    #171614;
  --bg-4:    #1D1B18;
  --line:    #262320;
  --line-2:  #34302B;
  --ink:     #EDE8DF;
  --ink-2:   #A29B91;
  --ink-3:   #6A645C;
  --ink-4:   #45403A;
  --accent:  #FF4A1C;
  --accent-d:#C4380F;
  --pos:     #93B96B;
  --neg:     #C2553A;
  --bone:    #E8E2D6;

  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --pad: clamp(18px, 3.6vw, 64px);
  --max: 1560px;
  --ease: cubic-bezier(.16,.84,.32,1);

  /* --vw is set from clientWidth so gutters ignore the scrollbar */
  --vw: 100vw;
  --gut: max(var(--pad), calc((var(--vw) - var(--max)) / 2 + var(--pad)));
}

/* ── 1. BASE ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* film grain — keeps flat dark surfaces from looking synthetic */
body::before{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
::selection{ background:var(--accent); color:#0C0B0A; }
:focus-visible{ outline:1.5px solid var(--accent); outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

section{ position:relative; }
.mono{ font-family:var(--mono); font-weight:400; font-variant-numeric:tabular-nums; }
.dim{ color:var(--ink-3); }
.dim2{ color:var(--ink-2); }
.pos{ color:var(--pos); }
.neg{ color:var(--neg); }
.mid{ color:var(--ink-4); }

.dot{ width:5px; height:5px; border-radius:50%; background:var(--ink-3); display:inline-block; margin-right:.5em; vertical-align:.1em; flex:none; }
.dot--live{ background:var(--accent); box-shadow:0 0 0 0 rgba(255,74,28,.45); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,74,28,.5)} 70%{box-shadow:0 0 0 6px rgba(255,74,28,0)} 100%{box-shadow:0 0 0 0 rgba(255,74,28,0)} }

/* ── 2. TYPE ───────────────────────────────────────────────── */
.label{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ink-3);
  text-transform:uppercase; margin:0 0 clamp(24px,3vw,44px);
}
.label__sep{ color:var(--ink-4); padding:0 .3em; }

.display{
  font-size:clamp(2.9rem, 6vw, 6.8rem);
  line-height:.88; letter-spacing:-.045em; font-weight:800;
  font-variation-settings:'wdth' 95; margin:0;
}
.display .line{ display:block; }
.display em{ font-style:normal; color:var(--accent); }

.h2{
  font-size:clamp(2.1rem, 5vw, 4.4rem);
  line-height:.94; letter-spacing:-.035em; font-weight:800;
  font-variation-settings:'wdth' 95; margin:0;
}
.h2 em{ font-style:normal; color:var(--ink-3); }

/* ── 3. CHROME: tape + nav ─────────────────────────────────── */
.tape{
  position:relative; z-index:60; overflow:hidden;
  border-bottom:1px solid var(--line); background:var(--bg-2);
  height:30px; display:flex; align-items:center;
}
.tape__track{ display:flex; width:max-content; animation:tape 46s linear infinite; }
.tape:hover .tape__track{ animation-play-state:paused; }
.tape__set{ display:flex; align-items:center; flex:none; }
.tape__item{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--ink-3);
  padding:0 22px; white-space:nowrap; border-right:1px solid var(--line); line-height:1;
  display:flex; align-items:center;
}
.tape__item.pos{ color:var(--pos); } .tape__item.neg{ color:var(--neg); }
@keyframes tape{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

.nav{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px var(--pad); border-bottom:1px solid transparent;
  background:rgba(12,11,10,0); transition:background .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-stuck{ background:rgba(12,11,10,.88); backdrop-filter:blur(10px); border-bottom-color:var(--line); }

.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{ width:19px; height:19px; color:var(--ink); transition:color .3s var(--ease), transform .5s var(--ease); }
.brand:hover .brand__mark{ color:var(--accent); transform:rotate(-90deg); }
.brand__mark--sm{ width:13px; height:13px; }
.brand__word{ font-weight:800; letter-spacing:-.02em; font-size:15px; font-variation-settings:'wdth' 92; }

.nav__links{ display:flex; gap:6px; margin-left:auto; }
.nav__links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3);
  padding:6px 8px; transition:color .22s var(--ease); white-space:nowrap;
}
.nav__links a span{ transition:letter-spacing .3s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover span{ letter-spacing:.2em; }
.nav__cta{ color:var(--accent) !important; }
.nav__cta:hover{ color:var(--ink) !important; }

.nav__clock{
  font-size:11px; letter-spacing:.1em; color:var(--ink-3); display:flex; align-items:center;
  padding-left:24px; border-left:1px solid var(--line); min-width:118px;
}
.nav__clock em{ font-style:normal; color:var(--ink-4); margin-left:.5em; }

/* ── 4. HERO ───────────────────────────────────────────────── */
.hero{
  padding:clamp(48px,5.4vw,88px) var(--pad) 0;
  overflow:hidden; min-height:calc(100vh - 78px);
  display:flex; flex-direction:column;
}
.hero::before{ /* column guides */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(90deg, rgba(237,232,223,.028) 0 1px, transparent 1px 12.5%);
}
.hero__grid{
  position:relative; z-index:1; flex:1;
  max-width:var(--max); margin:0 auto; width:100%;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);
  align-items:center;
}
.hero__copy{ max-width:700px; }
.hero__h1{ margin-bottom:clamp(22px,2.6vw,34px); }
.hero__h1 em{ position:relative; }
.hero__h1 em::after{
  content:''; position:absolute; left:0; right:.08em; bottom:.1em; height:3px; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; animation:swipe 1.1s .75s var(--ease) forwards;
}
@keyframes swipe{ to{ transform:scaleX(1); } }

.hero__sub{
  font-size:clamp(1rem,1.28vw,1.24rem); line-height:1.45; color:var(--ink-2);
  max-width:34ch; margin:0 0 clamp(30px,3.4vw,44px); letter-spacing:-.01em;
}
.hero__fine{ font-size:10.5px; letter-spacing:.2em; color:var(--ink-4); margin:16px 0 0; }

/* waitlist form (shared) */
.wl{ margin:0; max-width:520px; }
.wl__row{ display:flex; align-items:stretch; border-bottom:1px solid var(--line-2); transition:border-color .3s var(--ease); }
.wl__row:focus-within{ border-bottom-color:var(--accent); }
.wl__input{
  flex:1; min-width:0; background:none; border:0; padding:14px 4px 14px 0;
  font-size:13px; letter-spacing:.08em; color:var(--ink);
}
.wl__input::placeholder{ color:var(--ink-4); letter-spacing:.1em; }
.wl__input:focus{ outline:none; }
.wl__btn{
  border:0; background:none; cursor:pointer; white-space:nowrap;
  font-size:11.5px; letter-spacing:.18em; color:var(--ink);
  padding:14px 0 14px 20px; display:flex; align-items:center; gap:10px;
  transition:color .22s var(--ease);
}
.wl__btn:hover{ color:var(--accent); }
.wl__arrow{ display:inline-block; transition:transform .32s var(--ease); }
.wl__btn:hover .wl__arrow{ transform:translateX(5px); }
.wl__err{ font-size:10.5px; letter-spacing:.14em; color:var(--neg); margin:10px 0 0; }

/* success (inline / hero) */
.wl-ok{ border-left:2px solid var(--accent); padding:12px 0 12px 16px; max-width:520px; }
.wl-ok__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--accent); margin:0 0 6px; }
.wl-ok__t{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; margin:0 0 4px; }
.wl-ok__s{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); margin:0; }

/* -- hero rig (workstation composition) -- */
/* the composition runs to the viewport edge, not the container edge */
.rig{
  position:relative; min-height:640px; justify-self:end; width:100%;
  margin-right:calc(-1 * (var(--gut) - var(--pad)));
}

.frag{
  position:absolute; margin:0; background:var(--bg-2); border:1px solid var(--line);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
  opacity:0; transform:translateY(14px);
  animation:fragIn .9s var(--ease) forwards;
}
.frag--curve{ top:26px;  right:250px; width:392px; z-index:3; animation-delay:.45s; }
.frag--wr   { top:0;     right:20px;  width:238px; z-index:5; animation-delay:.62s; }
.frag--list { top:296px; right:286px; width:322px; z-index:5; animation-delay:.78s; }
.frag--cal  { top:230px; right:-96px; width:222px; z-index:2; animation-delay:.9s; }
.frag--dist { top:436px; right:78px;  width:262px; z-index:6; animation-delay:1.02s; }
@keyframes fragIn{ to{ opacity:1; transform:translateY(0); } }

.frag__bar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--ink-2);
  padding:8px 12px; border-bottom:1px solid var(--line); background:var(--bg-3);
}
.frag__body{ padding:0; }
.frag__body--pad{ padding:14px 14px 16px; }
.frag__foot{
  display:flex; justify-content:space-between; font-size:9px; letter-spacing:.14em;
  color:var(--ink-4); padding:7px 12px; border-top:1px solid var(--line);
}
.spark--lg{ width:100%; height:112px; }
.spark__line{ fill:none; stroke:var(--accent); stroke-width:1.6px; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.grid line{ stroke:var(--line); stroke-width:1px; vector-effect:non-scaling-stroke; }

.bignum{ font-size:2.4rem; letter-spacing:-.04em; margin:0 0 10px; line-height:1; font-weight:400; }
.wrbar{ height:3px; background:var(--bg-4); margin-bottom:14px; overflow:hidden; }
.wrbar i{ display:block; height:100%; width:var(--w); background:var(--accent); transform-origin:0 50%; animation:barIn 1.2s .9s var(--ease) both; }
@keyframes barIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.kv{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.14em; margin:0 0 7px; }

.tlog{ width:100%; border-collapse:collapse; font-size:10px; letter-spacing:.08em; }
.tlog td{ padding:6.5px 12px; border-bottom:1px solid rgba(38,35,32,.7); color:var(--ink-2); }
.tlog tr:last-child td{ border-bottom:0; }
.tlog td:first-child{ color:var(--ink-4); }
.tlog td:last-child{ text-align:right; }
.tlog .side{ color:var(--ink-3); }
.tlog .run{ color:var(--accent); }
.tlog .is-open td{ background:rgba(255,74,28,.05); }

.cal--mini{ padding:12px; }
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal i{ display:block; aspect-ratio:1; background:var(--bg-4); }
.cal i.p1{ background:rgba(147,185,107,.14); } .cal i.p2{ background:rgba(147,185,107,.28); } .cal i.p3{ background:rgba(147,185,107,.5); }
.cal i.n1{ background:rgba(194,85,58,.2); }    .cal i.n2{ background:rgba(194,85,58,.4); }    .cal i.n3{ background:rgba(194,85,58,.64); }
.cal i.off{ background:transparent; border:1px solid var(--line); }

.dist{ display:flex; align-items:flex-end; gap:3px; height:86px; padding:12px; }
.dist i{ flex:1; height:var(--h); background:var(--ink-4); transform-origin:50% 100%; animation:barUp .9s var(--ease) both; }
.dist i.is-neg{ background:var(--neg); opacity:.7; }
@keyframes barUp{ from{ transform:scaleY(.04); } to{ transform:scaleY(1); } }
.dist i:nth-child(1){animation-delay:1.0s}.dist i:nth-child(2){animation-delay:1.04s}.dist i:nth-child(3){animation-delay:1.08s}
.dist i:nth-child(4){animation-delay:1.12s}.dist i:nth-child(5){animation-delay:1.16s}.dist i:nth-child(6){animation-delay:1.2s}
.dist i:nth-child(7){animation-delay:1.24s}.dist i:nth-child(8){animation-delay:1.28s}.dist i:nth-child(9){animation-delay:1.32s}
.dist i:nth-child(10){animation-delay:1.36s}.dist i:nth-child(11){animation-delay:1.4s}

.pin{
  position:absolute; font-size:9px; letter-spacing:.2em; color:var(--ink-4); z-index:7;
  padding-left:16px; opacity:0; animation:fragIn .8s 1.2s var(--ease) forwards;
}
.pin::before{ content:''; position:absolute; left:0; top:.55em; width:10px; height:1px; background:var(--line-2); }
.pin b{ font-weight:400; }
.pin--1{ top:6px;   right:290px; }
.pin--2{ top:222px; right:250px; }
.pin--3{ top:592px; right:190px; }

.hero__rule{
  position:relative; z-index:1; max-width:var(--max); margin:0 auto; width:100%;
  display:flex; align-items:center; gap:18px; padding:22px 0 20px;
  border-top:1px solid var(--line); font-size:9.5px; letter-spacing:.2em; color:var(--ink-4);
  margin-top:clamp(24px,4vw,60px);
}
.hero__rule-line{ flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }

/* ── 5. STATEMENT ──────────────────────────────────────────── */
.stmt{
  padding:clamp(96px,13vw,200px) var(--pad);
  max-width:var(--max); margin:0 auto; border-top:1px solid var(--line);
}
.stmt__h{
  font-size:clamp(2.3rem,6.2vw,6.1rem); line-height:.92; letter-spacing:-.04em;
  font-weight:800; font-variation-settings:'wdth' 92; margin:0 0 clamp(48px,7vw,110px);
  max-width:19ch;
}
.stmt__a{ display:block; color:var(--ink); }
.stmt__a s{ text-decoration:none; position:relative; color:var(--ink-3); }
.stmt__a s::after{
  content:''; position:absolute; left:-.02em; right:-.02em; top:.54em; height:4px; background:var(--ink-3);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .7s .25s var(--ease);
}
.stmt__a.is-in s::after{ transform:scaleX(1); }
.stmt__b{ display:block; margin-top:.14em; padding-left:clamp(0px,7vw,120px); color:var(--ink-3); }
.stmt__b em{ font-style:normal; color:var(--ink); }

.stmt__foot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:clamp(24px,5vw,80px); align-items:start; }
.stmt__p{
  font-size:clamp(1.02rem,1.5vw,1.42rem); line-height:1.5; letter-spacing:-.015em;
  color:var(--ink-2); max-width:46ch; margin:0; padding-left:clamp(0px,7vw,120px);
}
.stmt__meta{ list-style:none; margin:0; padding:0; font-size:10.5px; letter-spacing:.18em; color:var(--ink-3); }
.stmt__meta li{ padding:9px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; }
.stmt__meta li:first-child{ border-top:1px solid var(--line); }

/* ── 6. LOOP ───────────────────────────────────────────────── */
.proc{ padding:clamp(80px,9vw,140px) var(--pad); max-width:var(--max); margin:0 auto; border-top:1px solid var(--line); }
.proc__head{ margin-bottom:clamp(44px,6vw,84px); }
.proc__rail{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  border-top:1px solid var(--line-2);
}
.stage{
  position:relative; padding:26px clamp(16px,2vw,32px) 30px 0; border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.stage:last-child{ border-right:0; }
.stage::before{ /* tick on the rail */
  content:''; position:absolute; top:-1px; left:0; width:44px; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease);
}
.stage.is-in::before{ transform:scaleX(1); }
.stage__top{ display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.2em; margin-bottom:clamp(28px,4vw,52px); }
.stage__no{ color:var(--ink-4); }
.stage__nm{ color:var(--ink); }
.stage__h{ font-size:clamp(1.25rem,1.9vw,1.72rem); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:0 0 12px; }
.stage__p{ font-size:.9rem; line-height:1.5; color:var(--ink-3); margin:0 0 26px; max-width:26ch; }
.stage__ui{
  border:1px solid var(--line); background:var(--bg-2); padding:12px;
  margin:auto clamp(0px,1.5vw,20px) 0 0;
}
.stage:hover .stage__ui{ border-color:var(--line-2); background:var(--bg-3); }
.stage__ui{ transition:border-color .3s var(--ease), background .3s var(--ease); }
.ui-row{ display:flex; justify-content:space-between; gap:10px; font-size:10px; letter-spacing:.12em; padding:5px 0; color:var(--ink-2); }
.ui-bar{ height:3px; background:var(--bg-4); margin:6px 0 8px; }
.ui-bar i{ display:block; height:100%; width:var(--w); background:var(--accent); }
.tag{ color:var(--pos); }
.tag--warn{ color:var(--accent); }
.ui-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.ui-chips span{ font-size:8.5px; letter-spacing:.14em; border:1px solid var(--line-2); color:var(--ink-3); padding:3px 6px; }
.ui-note{ font-size:9.5px; line-height:1.5; color:var(--ink-4); letter-spacing:.04em; margin-top:8px; }

/* ── 7. DASHBOARD ──────────────────────────────────────────── */
.dash{ padding:clamp(80px,9vw,140px) 0 clamp(80px,9vw,150px); border-top:1px solid var(--line); overflow:hidden; }
.dash__head{ padding:0 var(--pad); max-width:var(--max); margin:0 auto clamp(44px,5.5vw,80px); }
/* left edge aligns with the page container; right edge runs off the viewport */
.dash__stage{
  --appbleed:46px;
  position:relative; padding-left:var(--gut);
  display:grid; grid-template-columns:186px minmax(0,1fr);
}
.app{
  grid-column:2; margin-right:calc(var(--appbleed) * -1);
  background:var(--bg-2); border:1px solid var(--line-2);
  box-shadow:0 50px 120px -60px rgba(0,0,0,1);
}
/* keep the data inside the viewport while the panel surface bleeds past it */
.panel--setups,.panel--cal{ padding-right:calc(var(--appbleed) - 6px); }
.app__chrome{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,40px);
  padding:0 calc(14px + var(--appbleed, 0px)) 0 14px; height:38px; border-bottom:1px solid var(--line);
  background:var(--bg-3); font-size:10px; letter-spacing:.14em;
}
.app__id{ display:flex; align-items:center; gap:8px; font-weight:500; color:var(--ink); letter-spacing:.1em; }
.app__tabs{ display:flex; gap:2px; overflow:hidden; }
.app__tabs span{ padding:5px 10px; color:var(--ink-4); cursor:default; white-space:nowrap; transition:color .2s var(--ease); }
.app__tabs span:hover{ color:var(--ink-2); }
.app__tabs .is-on{ color:var(--ink); background:var(--bg-4); }
.app__meta{ margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--ink-2); white-space:nowrap; }
.app__meta .live{ color:var(--accent); display:flex; align-items:center; }
.pipe{ width:1px; height:12px; background:var(--line-2); }

.kpis{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-bottom:1px solid var(--line); }
.kpi{ padding:16px 18px; border-right:1px solid var(--line); }
.kpi:last-child{ border-right:0; }
.kpi__k{ font-size:9px; letter-spacing:.2em; color:var(--ink-4); margin:0 0 8px; }
.kpi__v{ font-size:clamp(1.15rem,1.5vw,1.6rem); letter-spacing:-.03em; margin:0; line-height:1; }

.app__body{
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
  grid-template-areas:"chart setups" "trades cal";
}
.panel{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0; }
.panel--chart{ grid-area:chart; } .panel--setups{ grid-area:setups; border-right:0; }
.panel--trades{ grid-area:trades; border-bottom:0; } .panel--cal{ grid-area:cal; border-right:0; border-bottom:0; }
.panel__bar{
  display:flex; justify-content:space-between; align-items:center; gap:12px; height:30px;
  padding:0 14px; border-bottom:1px solid var(--line);
  font-size:9.5px; letter-spacing:.18em; color:var(--ink-2);
}
.panel__bar--sub{ border-top:1px solid var(--line); }
.seg{ display:flex; gap:1px; }
.seg b{ font-weight:400; padding:2px 7px; color:var(--ink-4); background:var(--bg-3); }
.seg .is-on{ color:var(--bg); background:var(--ink-2); }

.chart{ position:relative; padding:16px 14px 6px 44px; }
.chart__yax{
  position:absolute; left:10px; top:16px; bottom:6px; display:flex; flex-direction:column;
  justify-content:space-between; font-size:8.5px; letter-spacing:.08em; color:var(--ink-4);
}
.chart__svg{ width:100%; height:clamp(190px,20vw,268px); }
.chart__xax{ display:flex; justify-content:space-between; padding:0 14px 12px 44px; font-size:8.5px; letter-spacing:.14em; color:var(--ink-4); }
.dd{ display:flex; align-items:flex-end; gap:14px; padding:10px 14px 14px 44px; border-top:1px solid var(--line); }
.dd__k{ font-size:8.5px; letter-spacing:.18em; color:var(--ink-4); margin:0; padding-bottom:2px; white-space:nowrap; }
.dd__bars{ flex:1; display:flex; align-items:flex-end; gap:2px; height:34px; }
.dd__bars i{ flex:1; height:var(--h); background:var(--neg); opacity:.55; min-height:1px; }

.setups{ list-style:none; margin:0; padding:8px 14px 12px; }
.setups li{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 44px 22px; align-items:center; gap:10px; padding:6px 0; }
.setups__nm{ font-size:9.5px; letter-spacing:.12em; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.setups__bar{ height:3px; background:var(--bg-4); }
.setups__bar i{ display:block; height:100%; width:var(--w); background:var(--ink-2); transform-origin:0 50%; }
.setups li.is-neg .setups__bar i, .setups--exec .setups__bar i{ background:var(--neg); opacity:.75; }
.setups__v{ font-size:10px; text-align:right; }
.setups__n{ font-size:9px; text-align:right; }

.sess{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.sess div{ padding:12px 14px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:7px; }
.sess div:last-child{ border-right:0; }
.sess span{ font-size:8.5px; letter-spacing:.18em; }
.sess b{ font-weight:400; font-size:12px; letter-spacing:-.02em; }

.panel--cal{ display:flex; flex-direction:column; }
.panel--cal .cal{ padding:14px; gap:3px; flex:1; grid-auto-rows:1fr; }
.panel--cal .cal i{ aspect-ratio:auto; }
.cal__key{ display:flex; align-items:center; gap:4px; padding:0 14px 14px; font-size:8px; letter-spacing:.14em; }
.k{ width:12px; height:12px; display:block; }
.k--n3{background:rgba(194,85,58,.72)} .k--n1{background:rgba(194,85,58,.3)} .k--z{background:var(--bg-4)}
.k--p1{background:rgba(147,185,107,.3)} .k--p3{background:rgba(147,185,107,.6)}
.cal__key span:first-child{ margin-right:4px; } .cal__key span:last-child{ margin-left:4px; }

.trades{ width:100%; border-collapse:collapse; font-size:10px; letter-spacing:.1em; }
.trades th{
  text-align:left; font-weight:400; font-size:8.5px; letter-spacing:.2em; color:var(--ink-4);
  padding:9px 14px; border-bottom:1px solid var(--line);
}
.trades td{ padding:8px 14px; border-bottom:1px solid rgba(38,35,32,.6); color:var(--ink-2); }
.trades tbody tr:last-child td{ border-bottom:0; }
.trades tbody tr{ transition:background .2s var(--ease); }
.trades tbody tr:hover{ background:var(--bg-3); }
.trades td:first-child{ color:var(--ink-4); }
.trades .ta-r{ text-align:right; }
.trades b{ font-weight:400; font-size:9px; letter-spacing:.14em; }
.trades .l{ color:var(--ink-2); } .trades .s{ color:var(--ink-3); }
.trades .run{ color:var(--accent); }
.trades .is-open td{ background:rgba(255,74,28,.05); }

.anno{
  position:absolute; left:var(--gut); font-size:8.5px; letter-spacing:.18em; color:var(--ink-4);
  text-align:right; width:150px; padding-right:2px;
  opacity:0; transform:translateX(-6px); transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.dash__stage.is-in .anno{ opacity:1; transform:none; }
.anno::after{ content:''; position:absolute; right:-24px; top:.5em; width:22px; height:1px; background:var(--line-2); }
.anno--1{ top:112px; } .anno--2{ top:158px; } .anno--3{ top:204px; }
.anno--4{ top:280px; } .anno--5{ top:352px; } .anno--6{ top:420px; }
.anno--1{ transition-delay:.1s } .anno--2{ transition-delay:.18s } .anno--3{ transition-delay:.26s }
.anno--4{ transition-delay:.34s } .anno--5{ transition-delay:.42s } .anno--6{ transition-delay:.5s }

/* ── 8. BACKTEST VS LIVE ───────────────────────────────────── */
.vs{ padding:clamp(80px,9vw,140px) var(--pad); max-width:var(--max); margin:0 auto; border-top:1px solid var(--line); }
.vs__head{ margin-bottom:clamp(48px,6vw,90px); }
.vs__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr);
  align-items:stretch; border-top:1px solid var(--line-2);
}
.vs__col{ padding:26px 0 30px; }
.vs__col--bt{ padding-right:clamp(20px,3vw,48px); }
.vs__col--live{ padding-left:clamp(20px,3vw,48px); border-left:1px solid var(--line); }
.vs__col--bt .vs__hero{ color:var(--ink-3); }
.vs__col--bt .spark__line{ stroke:var(--ink-4); stroke-dasharray:3 3; }
.vs__col--live .vs__hero{ color:var(--ink); }
.vs__tag{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.2em; color:var(--ink-2); margin-bottom:clamp(18px,2.4vw,30px); }
.vs__tag span:first-child{ display:flex; align-items:center; }
.vs__col--live .vs__tag span:first-child{ color:var(--accent); }
.vs__hero{ font-size:clamp(3rem,7.4vw,7rem); line-height:.85; letter-spacing:-.05em; margin:0 0 clamp(18px,2.4vw,30px); font-weight:300; }
.vs__spark{ width:100%; height:clamp(56px,7vw,88px); margin-bottom:clamp(20px,2.6vw,34px); }
.vs__col--live .spark__line{ stroke:var(--accent); }
.vs__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; border-top:1px solid var(--line); }
.vs__stats div{ padding:14px 0 0; }
.vs__stats dt{ font-size:9px; letter-spacing:.2em; color:var(--ink-4); margin-bottom:8px; }
.vs__stats dd{ margin:0; font-size:clamp(1.05rem,1.5vw,1.45rem); letter-spacing:-.03em; }
.vs__col--bt .vs__stats dd{ color:var(--ink-3); }

.vs__delta{
  display:flex; flex-direction:column; align-items:center; gap:0; padding-top:26px;
  font-size:10px; letter-spacing:.14em; text-align:center;
}
.vs__delta-k{ font-size:15px; color:var(--ink-4); margin-bottom:clamp(28px,4.4vw,64px); }
.vs__delta-v{ padding:9px 0; width:100%; }
.vs__delta-v:first-of-type{ font-size:13px; letter-spacing:-.01em; padding-bottom:16px; }

.vs__say{
  font-size:clamp(1.3rem,3.1vw,2.6rem); line-height:1.16; letter-spacing:-.035em; font-weight:600;
  max-width:26ch; margin:clamp(56px,7vw,110px) 0 0; margin-left:auto;
}

/* ── 9. MILESTONES ─────────────────────────────────────────── */
.ach{ padding:clamp(80px,9vw,140px) var(--pad); max-width:var(--max); margin:0 auto; border-top:1px solid var(--line); }
.ach__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(40px,5vw,72px); }
.ach__head .label{ grid-column:1/-1; }
.ach__p{ font-size:.95rem; line-height:1.5; color:var(--ink-3); max-width:34ch; margin:0; }
.ach__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-2); border-left:1px solid var(--line);
}
.ach__item{
  position:relative; padding:22px 22px 26px; min-height:186px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:background .3s var(--ease);
}
.ach__item:hover{ background:var(--bg-2); }
.ach__no{ font-size:9px; letter-spacing:.2em; color:var(--ink-4); margin-bottom:clamp(28px,3.4vw,46px); }
.ach__nm{ font-size:clamp(.92rem,1.16vw,1.06rem); font-weight:400; letter-spacing:.02em; margin:0 0 auto; color:var(--ink); line-height:1.35; }
.ach__st{ font-size:9px; letter-spacing:.22em; margin:20px 0 5px; color:var(--ink-4); }
.ach__meta{ font-size:9px; letter-spacing:.14em; color:var(--ink-4); margin:0; }
.ach__bar{ height:2px; background:var(--bg-4); margin-top:12px; }
.ach__bar i{ display:block; height:100%; width:var(--w); background:var(--ink-4); transform-origin:0 50%; }
.ach__item:not(.is-done) .ach__nm{ color:var(--ink-3); }
.ach__item:not(.is-done)::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-45deg, transparent 0 7px, rgba(237,232,223,.014) 7px 8px);
}
.ach__item.is-done .ach__st{ color:var(--accent); }
.ach__item.is-done::before{
  content:''; position:absolute; top:22px; right:22px; width:7px; height:7px; background:var(--accent);
}

/* ── 10. POSTER / WAITLIST ─────────────────────────────────── */
.poster{
  background:var(--bone); color:#0C0B0A;
  padding:clamp(28px,3.4vw,52px) var(--pad);
}
.poster__frame{
  position:relative; max-width:var(--max); margin:0 auto;
  border:1px solid rgba(12,11,10,.22); padding:clamp(24px,3vw,40px);
  min-height:clamp(520px,72vh,760px); display:flex; flex-direction:column;
}
.crop{ position:absolute; width:12px; height:12px; }
.crop::before,.crop::after{ content:''; position:absolute; background:#0C0B0A; }
.crop::before{ width:12px; height:1px; top:0; } .crop::after{ width:1px; height:12px; left:0; }
.crop--tl{ top:-1px; left:-1px; }
.crop--tr{ top:-1px; right:-1px; } .crop--tr::before{ right:0; } .crop--tr::after{ left:auto; right:0; }
.crop--bl{ bottom:-1px; left:-1px; } .crop--bl::before{ top:auto; bottom:0; } .crop--bl::after{ top:auto; bottom:0; }
.crop--br{ bottom:-1px; right:-1px; } .crop--br::before{ top:auto; bottom:0; right:0; } .crop--br::after{ top:auto; bottom:0; left:auto; right:0; }

.poster__top{
  display:flex; justify-content:space-between; gap:16px;
  font-size:10px; letter-spacing:.2em; color:rgba(12,11,10,.55);
  padding-bottom:clamp(40px,7vw,110px); border-bottom:1px solid rgba(12,11,10,.14);
}
.poster__top .dim{ color:rgba(12,11,10,.35); }
.poster__body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,80px) 0; }
.poster__h{
  font-size:clamp(2.9rem,10.4vw,10rem); line-height:.82; letter-spacing:-.05em; font-weight:900;
  font-variation-settings:'wdth' 88; margin:0 0 clamp(20px,2.6vw,36px);
}
.poster__sub{
  font-size:clamp(1.05rem,2.1vw,1.9rem); letter-spacing:-.03em; font-weight:500;
  color:rgba(12,11,10,.62); margin:0 0 clamp(34px,4.4vw,60px); max-width:22ch;
}
.wl--poster{ max-width:640px; }
.wl--poster .wl__row{ border-bottom:0; align-items:flex-end; }
.wl--poster .wl__input{
  color:#0C0B0A; font-size:14px; padding:16px 4px 14px 0;
  border-bottom:1.5px solid #0C0B0A; transition:border-color .3s var(--ease);
}
.wl--poster .wl__input:focus{ border-bottom-color:var(--accent); }
.wl--poster .wl__input::placeholder{ color:rgba(12,11,10,.38); }
.wl--poster .wl__btn{
  background:#0C0B0A; color:var(--bone); padding:16px 22px; margin:0 0 6px 18px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.wl--poster .wl__btn:hover{ background:var(--accent); color:#0C0B0A; }
.wl--poster .wl__err{ color:var(--accent-d); }
.poster__note{ font-size:10.5px; letter-spacing:.2em; color:rgba(12,11,10,.45); margin:22px 0 0; }
.poster__foot{
  display:flex; gap:clamp(18px,4vw,60px); flex-wrap:wrap;
  font-size:10px; letter-spacing:.2em; color:rgba(12,11,10,.55);
  padding-top:clamp(22px,3vw,34px); border-top:1px solid rgba(12,11,10,.14); margin-top:auto;
}
/* poster success */
.poster-ok__k{ font-size:10.5px; letter-spacing:.24em; color:var(--accent-d); margin:0 0 4px; }
.poster-ok__s{ font-size:10.5px; letter-spacing:.24em; color:rgba(12,11,10,.5); margin:0 0 clamp(28px,4vw,52px); }
.poster-ok__h{
  font-size:clamp(2.6rem,9vw,8.4rem); line-height:.84; letter-spacing:-.05em; font-weight:900;
  font-variation-settings:'wdth' 88; margin:0 0 clamp(20px,2.4vw,32px);
}
.poster-ok__p{ font-size:11px; letter-spacing:.16em; color:rgba(12,11,10,.6); margin:0; }
.poster-ok__mail{
  align-self:flex-start; margin-top:20px; font-size:11px; letter-spacing:.14em;
  color:rgba(12,11,10,.45); border-bottom:1px solid rgba(12,11,10,.2); padding-bottom:3px;
}

/* ── 11. FOOTER ────────────────────────────────────────────── */
.foot{ background:var(--bg); padding:clamp(56px,7vw,96px) var(--pad) 0; }
.foot__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; gap:32px; align-items:end;
  padding-bottom:clamp(48px,6vw,80px);
}
.foot__word{ font-size:clamp(2.2rem,5.4vw,4.6rem); font-weight:800; letter-spacing:-.05em; font-variation-settings:'wdth' 92; margin:0 0 14px; line-height:.9; }
.foot__word sup{ font-size:.2em; letter-spacing:0; vertical-align:super; color:var(--ink-3); }
.foot__tag{ font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); margin:0; max-width:44ch; line-height:1.6; }
.foot__links{ display:flex; gap:22px; font-size:10.5px; letter-spacing:.18em; }
.foot__links a{ color:var(--ink-3); transition:color .22s var(--ease); }
.foot__links a:hover{ color:var(--accent); }
.foot__c{ font-size:10px; letter-spacing:.18em; color:var(--ink-4); margin:0; }
.foot__strip{
  display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line);
  max-width:var(--max); margin:0 auto;
}
.foot__strip span{
  font-size:9px; letter-spacing:.2em; color:var(--ink-4); padding:12px 18px;
  border-right:1px solid var(--line); flex:1; text-align:center; white-space:nowrap;
}
.foot__strip span:last-child{ border-right:0; }

/* ── 12. MOTION ────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s } .reveal[data-d="2"]{ transition-delay:.18s }
.reveal[data-d="3"]{ transition-delay:.27s } .reveal[data-d="4"]{ transition-delay:.36s }

.draw{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.draw.is-in{ transition:stroke-dashoffset 1.9s var(--ease); stroke-dashoffset:0; }

/* crosshair readout */
.xhair{ position:fixed; inset:0; pointer-events:none; z-index:50; opacity:0; transition:opacity .25s var(--ease); }
.xhair.is-on{ opacity:1; }
.xhair__v,.xhair__h{ position:absolute; background:rgba(255,74,28,.28); }
.xhair__v{ top:0; bottom:0; width:1px; transform:translateX(var(--x,0)); }
.xhair__h{ left:0; right:0; height:1px; transform:translateY(var(--y,0)); }
.xhair__r{
  position:absolute; font-size:9px; letter-spacing:.14em; color:var(--accent);
  background:var(--bg); border:1px solid var(--line-2); padding:3px 6px;
  transform:translate(calc(var(--x,0) + 14px), calc(var(--y,0) + 14px)); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .frag,.pin{ opacity:1; transform:none; }
  .draw{ stroke-dasharray:none; stroke-dashoffset:0; }
  .xhair{ display:none; }
}

/* ── 13. RESPONSIVE ────────────────────────────────────────── */
@media (min-width:1700px){
  .rig{ transform:scale(1.1); transform-origin:100% 50%; }
}

@media (max-width:1440px){
  .frag--curve{ right:230px; width:376px; }
  .frag--list { right:264px; width:312px; }
  .frag--cal  { right:-80px; }
  .pin--1{ right:262px } .pin--2{ right:224px } .pin--3{ right:170px }
}

@media (max-width:1200px){
  .dash__stage{ --appbleed:0px; grid-template-columns:1fr; padding:0 var(--pad); }
  .app{ grid-column:1; }
  .panel--setups,.panel--cal{ padding-right:0; }
  .anno{ display:none; }
  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kpi:nth-child(3){ border-right:0; }
  .kpi:nth-child(1),.kpi:nth-child(2),.kpi:nth-child(3){ border-bottom:1px solid var(--line); }
  .app__tabs{ display:none; }
}

@media (max-width:1080px){
  .hero{ min-height:0; }
  .hero__grid{ grid-template-columns:1fr; gap:clamp(48px,7vw,80px); }
  .hero__copy{ max-width:none; }
  .rig{ min-height:0; margin-right:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .frag{ position:static; opacity:1; transform:none; animation:none; }
  .frag--curve{ grid-column:1/-1; width:auto; }
  .frag--wr,.frag--list{ width:auto; }
  .frag--cal,.frag--dist{ display:none; }
  .pin{ display:none; }
  .proc__rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stage:nth-child(2){ border-right:0; }
  .stage:nth-child(1),.stage:nth-child(2){ border-bottom:1px solid var(--line); }
  .stage{ padding-left:0; }
  .stage:nth-child(2),.stage:nth-child(4){ padding-left:clamp(16px,2vw,32px); }
  .ach__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stmt__foot{ grid-template-columns:1fr; }
  .ach__head{ grid-template-columns:1fr; align-items:start; }
}

@media (max-width:820px){
  .nav__clock{ display:none; }
  .vs__grid{ grid-template-columns:1fr; }
  .vs__col--live{ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .vs__col--bt{ padding-right:0; }
  .vs__delta{
    flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap;
    padding:14px 0; border-top:1px solid var(--line-2); gap:12px;
  }
  .vs__delta-k{ margin:0; }
  .vs__delta-v{ width:auto; padding:0; }
  .vs__delta-v:first-of-type{ padding:0; }
  .vs__say{ margin-left:0; max-width:none; }
  .foot__grid{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .foot__strip span{ flex:0 0 auto; }
  .app__body{ grid-template-columns:1fr; grid-template-areas:"chart" "setups" "trades" "cal"; }
  .panel{ border-right:0; }
  .panel--setups,.panel--trades{ border-bottom:1px solid var(--line); }
}

@media (max-width:640px){
  .tape__item{ padding:0 14px; }
  .nav{ padding:12px var(--pad); gap:10px; }
  .nav__links{ gap:0; }
  .nav__links a{ padding:6px 3px; font-size:9px; letter-spacing:.06em; }
  .brand{ gap:8px; }
  .brand__mark{ width:16px; height:16px; }
  .brand__word{ font-size:12px; }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi{ padding:12px 14px; }
  .kpi:nth-child(2n){ border-right:0; }
  .kpi:nth-child(5),.kpi:nth-child(6){ border-bottom:0; }
  .kpi:nth-child(3){ border-right:1px solid var(--line); }
  .kpi:nth-child(4){ border-right:0; }
  .app__meta span:not(.live):not(.pipe){ display:none; }
  .app__meta .pipe{ display:none; }
  .chart{ padding-left:36px; } .chart__xax{ padding-left:36px; } .dd{ padding-left:14px; }
  .chart__xax span:nth-child(2),.chart__xax span:nth-child(4){ display:none; }
  .dd__k{ display:none; }
  .rig{ grid-template-columns:1fr; }
  .frag--wr,.frag--list{ grid-column:1/-1; }
  .proc__rail{ grid-template-columns:1fr; }
  .stage{ border-right:0; border-bottom:1px solid var(--line); padding-left:0 !important; padding-right:0; }
  .stage:last-child{ border-bottom:0; }
  .stage__ui{ margin-right:0; }
  .stage__top{ margin-bottom:20px; }
  .ach__grid{ grid-template-columns:1fr; }
  .ach__item{ min-height:0; }
  .ach__no{ margin-bottom:26px; }
  .stmt__b{ padding-left:0; } .stmt__p{ padding-left:0; }
  .trades th:nth-child(4),.trades td:nth-child(4),
  .trades th:nth-child(5),.trades td:nth-child(5){ display:none; }
  .wl__row{ flex-wrap:wrap; }
  .wl__btn{ padding-left:0; }
  .wl--poster .wl__btn{ margin-left:0; width:100%; justify-content:space-between; margin-top:14px; }
  .poster__frame{ padding:20px 16px; }
  .poster__top{ font-size:9px; letter-spacing:.14em; }
  .poster__foot{ font-size:9px; letter-spacing:.14em; gap:14px; }
  .foot__strip span:nth-child(n+7){ display:none; }
}