/* FillScope one-page home, v3 "de-slop" (08.11.2026). Rules: frontend-design + impeccable craft-floor.
   Loaded AFTER aeo.css, so it owns h1-h3/a/body here. Palette = the app's own:
   violet only for things you can press (and the Edge gauge), green/red only for P&L. */
@font-face { font-family:"Geist"; src:url(/fonts/geist-latin.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
:root {
  --h-bg:#0a0b10; --h-bg2:#0d0e14; --h-card:#13141c; --h-card2:#1a1c26; --h-ink:#e9eaf2; --h-mut:#9a9eb5; --h-faint:#7c8096;
  --h-line:rgba(255,255,255,.09); --h-line2:rgba(255,255,255,.15);
  --h-vi:#8b7cff; --h-vi2:#b3a7ff; --h-pos:#2fd49b; --h-neg:#ff6b7f; --h-amber:#f5a524;
  --h-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --h-mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace; /* only inside the app replica, where the real app uses it */
  --h-ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark; accent-color:var(--h-vi); scrollbar-color:#2a2c3a var(--h-bg);
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; scroll-padding-top:72px; overflow-x:clip; }
body { background:var(--h-bg); color:var(--h-ink); font-family:var(--h-sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; caret-color:var(--h-vi2); }
::selection { background:rgba(139,124,255,.38); color:#fff; }
:focus-visible { outline:2px solid var(--h-vi2); outline-offset:3px; border-radius:6px; }
::-webkit-scrollbar { width:11px; } ::-webkit-scrollbar-track { background:var(--h-bg); } ::-webkit-scrollbar-thumb { background:#2a2c3a; border-radius:8px; border:3px solid var(--h-bg); }
a { color:inherit; text-decoration:none; }
.ul,a.ul { text-decoration:underline; text-decoration-color:rgba(179,167,255,.55); text-underline-offset:.22em; text-decoration-thickness:1px; }
.ul:hover { text-decoration-color:var(--h-vi2); }
h1,h2,h3 { margin:0; max-width:none; letter-spacing:-.03em; line-height:1.08; text-wrap:balance; font-weight:650; }
.wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
.pos { color:var(--h-pos); } .neg { color:var(--h-neg); } .amber { color:var(--h-amber); }
.skip { position:absolute; left:16px; top:-60px; z-index:99; background:var(--h-ink); color:var(--h-bg); padding:8px 14px; border-radius:8px; }
.skip:focus { top:12px; }

.btn { display:inline-flex; align-items:center; justify-content:center; font:600 .97rem/1 var(--h-sans); padding:14px 22px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:background .15s, border-color .15s, transform .08s; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--h-vi); color:#0a0b10; }
.btn-primary:hover { background:var(--h-vi2); }
.btn-line { border-color:var(--h-line2); color:var(--h-ink); }
.btn-line:hover { border-color:var(--h-vi2); }

/* nav */
header.nav { position:fixed; top:0; left:0; right:0; z-index:60; background:var(--h-bg); border-bottom:1px solid transparent; transition:border-color .2s; }
header.nav.scrolled { border-bottom-color:var(--h-line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:650; font-size:1.06rem; letter-spacing:-.02em; }
.brand .mark { width:20px; height:24px; color:var(--h-ink); }
.nav-r { display:flex; align-items:center; gap:2px; }
.nav-r .lnk { padding:8px 12px; font-size:.92rem; color:var(--h-mut); border-radius:8px; transition:color .15s; }
.nav-r .lnk:hover,.nav-r .lnk.on { color:var(--h-ink); }
.nav-r .btn { margin-left:10px; padding:10px 16px; }
.prog { position:absolute; left:0; right:0; bottom:-1px; height:1px; }
.prog i { display:block; height:100%; transform-origin:0 50%; transform:scaleX(var(--p,0)); background:var(--h-vi); }

/* hero: the one authored moment is the live chart */
.hero { position:relative; min-height:max(700px,100svh); padding-top:64px; display:flex; flex-direction:column; overflow:hidden; }
.chart { position:absolute; left:0; right:0; top:64px; bottom:62px; }
.chart canvas { position:absolute; inset:0; display:block; }
.hero-in { position:relative; z-index:2; flex:1; width:100%; display:flex; align-items:center; padding-top:24px; padding-bottom:48px; }
.hero-copy { max-width:560px; }
.hero h1 { font-size:clamp(3rem,7vw,5.6rem); font-weight:680; letter-spacing:-.04em; line-height:.98; }
.hl { display:block; overflow:hidden; padding-bottom:.08em; }
.hl > span { display:block; animation:rise 1s var(--h-ease) both; }
.hl + .hl > span { animation-delay:.1s; }
@keyframes rise { from { transform:translateY(104%); } to { transform:none; } }
.lead { color:var(--h-mut); font-size:1.18rem; margin-top:26px; max-width:40ch; line-height:1.5; }
.cta { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.note { margin-top:18px; font-size:.9rem; color:var(--h-mut); }
.tape { position:relative; z-index:2; border-top:1px solid var(--h-line); }
.tape-in { display:flex; align-items:center; gap:26px; height:62px; overflow:hidden; white-space:nowrap; font-size:.9rem; font-variant-numeric:tabular-nums; color:var(--h-mut);
  -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
.tape-l { color:var(--h-faint); }
.tk b { font-weight:600; margin-left:4px; }

/* how it works */
.how { position:relative; border-top:1px solid var(--h-line); }
.how-pin { padding:120px 0; }
.how-in { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center; }
.how h2 { font-size:clamp(2rem,3.8vw,2.9rem); max-width:14ch; }
.how-steps { list-style:none; padding:0; margin-top:40px; display:grid; gap:4px; }
.how-steps li { display:grid; grid-template-columns:44px 1fr; gap:6px; padding:16px 0; border-top:1px solid var(--h-line); color:var(--h-faint); transition:color .35s; }
.how-steps li.on { color:var(--h-ink); }
.how-steps .num { font-size:1.6rem; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.how-steps li.on .num { color:var(--h-vi2); }
.how-steps h3 { font-size:1.15rem; font-weight:620; letter-spacing:-.01em; }
.how-steps p { font-size:.98rem; margin-top:4px; color:inherit; opacity:.85; }
.how-steps li.on p { color:var(--h-mut); opacity:1; }
.how-stage { position:relative; display:grid; gap:20px; }
.scene { position:relative; display:flex; align-items:center; justify-content:center; }
html.mo .how-stage { display:block; height:420px; }
html.mo .scene { position:absolute; inset:0; opacity:0; transform:translateY(20px); transition:opacity .55s var(--h-ease), transform .55s var(--h-ease); pointer-events:none; }
html.mo .scene.on { opacity:1; transform:none; }
.win-body { padding:24px; display:grid; gap:8px; }
.type { display:inline-block; overflow:hidden; white-space:nowrap; }
html.mo .type { width:0; }
.t1 { --w:20ch; } .t2 { --w:7ch; }
@keyframes typing { to { width:var(--w,100%); } }
@keyframes blink { 50% { opacity:0; } }
@keyframes press { 50% { transform:scale(.95); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes slidein { to { opacity:1; transform:none; } }
html.mo .ok { opacity:0; }
html.mo .s1 .row:not(.hd) { opacity:0; transform:translateX(-12px); }
.connect { display:flex; align-items:center; gap:14px; margin-top:14px; }
.sm-btn { padding:10px 16px; font-size:.88rem; }
.row { display:grid; grid-template-columns:1fr .8fr .6fr 1.3fr .9fr; gap:8px; padding:11px 20px; border-bottom:1px solid var(--h-line); }
.row:last-child { border-bottom:0; }
.row span:last-child { text-align:right; }
.row .buy { color:#7dd3fc; } .row .sell { color:var(--h-amber); } .row .mut { color:var(--h-faint); }
.s2 { flex-direction:column; gap:22px; }
.win { width:100%; max-width:520px; background:var(--h-card); border:1px solid var(--h-line2); border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(0,0,0,.75); }
.win-bar { height:40px; display:flex; align-items:center; padding:0 18px; border-bottom:1px solid var(--h-line); background:var(--h-card2); }
.win-bar span { font-size:.84rem; color:var(--h-mut); }
.win-body label { font-size:.82rem; color:var(--h-mut); margin-top:6px; }
.field { height:44px; border:1px solid var(--h-line2); border-radius:10px; background:var(--h-bg2); display:flex; align-items:center; padding:0 14px; font-family:var(--h-mono); color:var(--h-vi2); letter-spacing:.12em; }
.s0.on .t1 { animation:typing 1.3s steps(20) .3s forwards; } .s0.on .t2 { animation:typing .8s steps(7) 1.7s forwards; }
.t1 { --w:20ch; } .t2 { --w:7ch; }
.caret { width:2px; height:18px; background:var(--h-vi2); margin-left:2px; animation:blink 1s steps(1) infinite; }
.s0.on .sm-btn { animation:press .3s 2.7s both; }
.s0.on .ok { animation:fade .6s 3s both; }
.s1.on .row:not(.hd) { animation:slidein .5s var(--h-ease) forwards; }
.s1.on .row:nth-child(3){animation-delay:.25s} .s1.on .row:nth-child(4){animation-delay:.5s} .s1.on .row:nth-child(5){animation-delay:.75s} .s1.on .row:nth-child(6){animation-delay:1s} .s1.on .row:nth-child(7){animation-delay:1.25s}

/* gauge (shared) */
.gauge-wrap { position:relative; width:230px; height:230px; }
.gauge-wrap.sm { width:180px; height:180px; }
.gauge { width:100%; height:100%; overflow:visible; }
.g-track,.g-val { fill:none; stroke-width:13; stroke-linecap:round; }
.g-track { stroke:rgba(255,255,255,.07); }
.g-val { stroke:url(#gg); stroke-dasharray:57 100; transition:stroke-dasharray 1.8s var(--h-ease) .2s; }
html.mo .g-val { stroke-dasharray:0 100; }
html.mo .lit .g-val { stroke-dasharray:57 100; }
.g-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:6px; }
.g-num b { font-size:3.4rem; font-weight:640; line-height:1; letter-spacing:-.03em; }
.sm .g-num b { font-size:2.6rem; }
.g-num .amber { font-family:var(--h-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; margin-top:8px; font-weight:700; }
.g-num small { font-family:var(--h-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--h-mut); margin-top:2px; }
.mini { display:grid; grid-template-columns:repeat(3,auto); gap:28px; font-variant-numeric:tabular-nums; }
.mini span { display:block; font-size:.8rem; color:var(--h-mut); }
.mini b { font-size:1.2rem; font-weight:600; }

/* SECTIONS */
section { padding:110px 0; }
section.pt0 { padding-top:0; }
.sec-hd { max-width:660px; margin-bottom:44px; }
.sec-hd h2 { font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:700; margin-top:14px; }
.sec-hd p { color:var(--h-mut); margin-top:16px; font-size:1.08rem; }
.sec-hd-c { text-align:center; margin-left:auto; margin-right:auto; }

/* 3 · DESK replica */
.app { background:var(--h-bg2); border:1px solid var(--h-line2); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.7); }
.app-top { display:flex; align-items:center; gap:28px; padding:14px 22px; border-bottom:1px solid var(--h-line); overflow:hidden; }
.app-brand { display:flex; align-items:center; gap:10px; flex:none; }
.app-brand svg { width:18px; height:22px; color:var(--h-ink); }
.app-brand span { font-weight:640; font-size:.92rem; line-height:1.1; }
.app-brand small { display:block; font-family:var(--h-mono); font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--h-mut); font-weight:400; }
.app-tabs { display:flex; gap:22px; font-size:.86rem; color:var(--h-mut); white-space:nowrap; }
.app-tabs b { color:var(--h-ink); font-weight:600; position:relative; }
.app-tabs b::after { content:""; position:absolute; left:0; right:0; bottom:-17px; height:2px; background:var(--h-vi); }
.app-grid { display:grid; grid-template-columns:1.05fr 1fr 1fr; grid-template-areas:"score eq eq" "kpi eq eq" "cal sym wd"; gap:1px; background:var(--h-line); }
.card { background:var(--h-bg2); padding:20px 22px; min-width:0; }
.c-score { grid-area:score; display:flex; flex-direction:column; align-items:center; gap:10px; }
.c-kpi { grid-area:kpi; display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.c-eq { grid-area:eq; display:flex; flex-direction:column; }
.c-cal { grid-area:cal; } .c-sym { grid-area:sym; } .c-wd { grid-area:wd; }
.k { font-family:var(--h-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--h-mut); display:flex; align-items:center; gap:8px; }
.sub { font-family:var(--h-mono); font-size:.66rem; color:var(--h-faint); }
.sub i { font-style:normal; }
.pnl { text-align:center; display:grid; gap:2px; }
.pnl b { font-family:var(--h-mono); font-size:1.9rem; font-weight:600; letter-spacing:-.02em; }
.c-kpi b { display:block; font-family:var(--h-mono); font-size:1.25rem; font-weight:600; margin:4px 0 1px; }
.c-hd { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.sw { width:14px; height:2px; background:var(--h-vi); }
#eq { width:100%; flex:1; min-height:240px; overflow:visible; }
#eq .ln { fill:none; stroke:var(--h-pos); stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; }
#eq .ar { fill:url(#eqg); opacity:0; transition:opacity 1.2s .9s; }
#eq .hwm { stroke:rgba(47,212,155,.5); stroke-dasharray:4 5; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .6s 2s; }
#eq .gl { stroke:var(--h-line); vector-effect:non-scaling-stroke; }
#eq text { font-family:var(--h-mono); font-size:11px; fill:var(--h-faint); }
.lit #eq .ln { transition:stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1) .3s; stroke-dashoffset:0; }
.lit #eq .ar,.lit #eq .hwm { opacity:1; }
.cal { display:grid; grid-template-columns:repeat(11,1fr); gap:4px; }
.cal i { aspect-ratio:1; border-radius:3px; background:var(--h-card2); transform:scale(0); transition:transform .4s var(--h-ease); transition-delay:calc(var(--d) * 14ms + .3s); }
.lit .cal i { transform:none; }
.bars { display:grid; gap:7px; }
.bar { display:grid; grid-template-columns:44px 1fr 56px; gap:8px; align-items:center; font-family:var(--h-mono); font-size:.7rem; }
.bar .t { position:relative; height:10px; }
.bar .t s { position:absolute; top:0; bottom:0; border-radius:3px; transform:scaleX(0); transition:transform 1s var(--h-ease); transition-delay:calc(var(--d) * 80ms + .4s); }
.bar .t::before { content:""; position:absolute; top:-3px; bottom:-3px; left:var(--z); width:1px; background:var(--h-line2); }
.lit .bar .t s { transform:none; }
.bar em { font-style:normal; text-align:right; }
.vbars { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; height:150px; align-items:stretch; }
.vb { position:relative; display:flex; flex-direction:column; font-family:var(--h-mono); font-size:.64rem; color:var(--h-faint); text-align:center; }
.vb .t { position:relative; flex:1; }
.vb .t::before { content:""; position:absolute; left:-5px; right:-5px; top:var(--z); height:1px; background:var(--h-line2); }
.vb s { position:absolute; left:15%; right:15%; border-radius:3px; transform:scaleY(0); transition:transform 1s var(--h-ease); transition-delay:calc(var(--d) * 90ms + .5s); }
.lit .vb s { transform:none; }
.vb em { font-style:normal; margin-top:6px; }
.cap { margin-top:18px; color:var(--h-mut); font-size:.92rem; max-width:70ch; }
.cap a { color:var(--h-vi2); text-decoration:underline; }


/* sections */
section { padding:140px 0 0; }
.sec-hd { max-width:640px; margin-bottom:48px; }
.sec-hd h2 { font-size:clamp(2rem,3.8vw,2.9rem); }
.sec-hd p { color:var(--h-mut); margin-top:18px; font-size:1.1rem; max-width:56ch; }

/* what it answers: question → answer rows, not icon cards */
.qs { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; border-bottom:1px solid var(--h-line); }
.q { padding:26px 0 28px; border-top:1px solid var(--h-line); }
.q h3 { font-size:1.28rem; font-weight:620; letter-spacing:-.02em; }
.q p { color:var(--h-mut); margin-top:10px; max-width:52ch; }
.q p b { color:var(--h-ink); font-weight:600; }

/* TradingView band: a real screenshot, then one sentence */
.tv { display:grid; grid-template-columns:1.45fr 1fr; gap:48px; align-items:center; }
.tv img { display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--h-line2); }
.tv-tx { display:grid; gap:14px; }
.tv-tx h2 { font-size:clamp(1.6rem,2.8vw,2.2rem); }
.tv-tx > span { color:var(--h-mut); }
.tv .go { color:var(--h-vi2); font-weight:600; text-decoration:underline; text-decoration-color:rgba(179,167,255,.5); text-underline-offset:.22em; }
.tv:hover .go { text-decoration-color:var(--h-vi2); }
.wb { margin-top:44px; padding-top:24px; border-top:1px solid var(--h-line); color:var(--h-mut); max-width:70ch; }
.wb a { color:var(--h-ink); }

/* pricing */
.plans { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:880px; }
.plan { background:var(--h-card); border:1px solid var(--h-line2); border-radius:14px; padding:32px; display:flex; flex-direction:column; }
.plan.pro { border-color:rgba(139,124,255,.6); }
.ph { display:flex; justify-content:space-between; align-items:center; }
.pn { font-weight:620; font-size:1.05rem; } .pro .pn { color:var(--h-vi2); }
.flag { font-size:.8rem; color:var(--h-vi2); }
.price { display:flex; align-items:baseline; gap:8px; margin:18px 0 2px; font-variant-numeric:tabular-nums; }
.price b { font-size:2.8rem; font-weight:650; letter-spacing:-.03em; }
.price span { color:var(--h-mut); }
.psub { color:var(--h-mut); font-size:.92rem; min-height:22px; }
.plan ul { list-style:none; margin:24px 0 28px; padding:0; display:grid; gap:12px; }
.plan li { position:relative; padding-left:26px; font-size:.97rem; }
.plan li::before { content:""; position:absolute; left:2px; top:6px; width:11px; height:6px; border-left:2px solid var(--h-pos); border-bottom:2px solid var(--h-pos); transform:rotate(-45deg); }
.plan .btn { margin-top:auto; }
.fine { color:var(--h-mut); font-size:.9rem; margin-top:28px; max-width:75ch; }

footer { margin-top:140px; border-top:1px solid var(--h-line); padding-bottom:30px; }
.foot-in { display:flex; justify-content:space-between; align-items:center; padding:30px 32px; gap:14px; flex-wrap:wrap; color:var(--h-mut); font-size:.9rem; }
.foot-in .brand { color:var(--h-ink); }

#desk { overflow-x:clip; }
@media (min-width:960px) {
  html.mo .how { height:300vh; }
  html.mo .how-pin { position:sticky; top:0; height:100vh; display:flex; align-items:center; padding:64px 0 0; }
}
@media (max-width:959px) {
  .how-in { grid-template-columns:1fr; gap:36px; }
  html.mo .how-stage { height:auto; display:grid; gap:20px; }
  html.mo .scene { position:relative; inset:auto; }
  .how-steps li { color:var(--h-ink); } .how-steps li p { color:var(--h-mut); opacity:1; }
  .tv { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:900px) {
  .chart canvas { opacity:.5; }
  .app-grid { grid-template-columns:1fr 1fr; grid-template-areas:"score kpi" "eq eq" "cal cal" "sym wd"; }
  .qs { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .hide-sm { display:none; }
  .wrap { padding:0 20px; } .foot-in { padding:28px 20px; }
  .hero-in { align-items:flex-start; padding-top:56px; }
  .app-grid { grid-template-columns:1fr; grid-template-areas:"score" "kpi" "eq" "cal" "sym" "wd"; }
  .app-tabs { gap:16px; }
  .plans { grid-template-columns:1fr; }
  .row { grid-template-columns:.9fr .7fr .5fr 1.2fr .9fr; padding:10px 12px; font-size:.76rem; }
  .mini { gap:16px; }
  section { padding-top:110px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  html.mo .scene,html.mo .s1 .row:not(.hd) { opacity:1; transform:none; } html.mo .type { width:auto; } html.mo .ok { opacity:1; }
}
.eq-ax { position:relative; height:16px; margin-top:8px; }
.eq-ax span { position:absolute; transform:translateX(-50%); }