:root{--surface-100:#0a0a0b;--surface-200:#121214;--surface-300:#1a1a1d;--line:#2a2a2e;--ink:#f5f5f6;--ink-muted:#a1a1a8;--brand:#e11d2e;--brand-strong:#ff3b4a;--brand-text:#ff5560;--on-brand:#fff;--profit:#34d399;--loss:#ff5560;
--sans:"Space Grotesk",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--r:4px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-100);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}
.label{font:500 12px/16px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--ink-muted)}
.label.red{color:var(--brand-text)}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:#0a0a0bee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;letter-spacing:-.3px}
.brand-link img{width:36px;height:36px;border-radius:var(--r)}
.nav nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav nav a{text-decoration:none;color:var(--ink-muted);padding:8px 12px;font-size:14px;border-radius:var(--r)}
.nav nav a:hover,.nav nav a[aria-current=page]{color:var(--ink)}
.nav nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--brand)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);padding:8px 12px;border-radius:var(--r);font:inherit;cursor:pointer}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--r);font:600 15px var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--brand);color:var(--on-brand)}.btn-primary:hover{background:var(--brand-strong);color:#0a0a0b}
.btn-ghost{border-color:var(--ink-muted);color:var(--ink)}.btn-ghost:hover{background:var(--surface-300)}
/* hero */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url(../assets/banner.png) 30% center/cover;opacity:.5}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface-100) 68%,#0a0a0b55 100%)}
.hero .wrap{position:relative;z-index:1;padding-top:104px;padding-bottom:104px}
.hero h1{font-size:clamp(44px,8vw,88px);line-height:.95;letter-spacing:-2px;margin:16px 0 24px;max-width:720px}
.hero h1 em{font-style:normal;color:var(--brand-text)}
.hero p{max-width:520px;color:var(--ink-muted);font-size:18px;margin:0 0 32px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.page-head{border-bottom:1px solid var(--line);padding:72px 0 48px;background:radial-gradient(circle,#2a2a2e 1px,transparent 1.5px) 0 0/16px 16px}
.page-head h1{font-size:clamp(36px,6vw,64px);line-height:1;letter-spacing:-1.5px;margin:12px 0 12px}
.page-head p{color:var(--ink-muted);max-width:600px;margin:0;font-size:17px}
/* sections */
section.block{padding:72px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.8px;margin:8px 0 0}
.grid{display:grid;gap:16px}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card h3{margin:12px 0 8px;font-size:20px}.card p{margin:0;color:var(--ink-muted);font-size:15px}
.num{font:600 28px/1 var(--mono);color:var(--brand-text)}
.redbar{height:4px;width:48px;background:var(--brand);margin-bottom:16px}
/* trades */
.trade{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.trade .shot{aspect-ratio:16/9;background:var(--surface-300);display:block;width:100%;object-fit:cover;border-bottom:1px solid var(--line)}
.trade .noshot{aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(circle,#2a2a2e 1px,transparent 1.5px) 0 0/16px 16px;color:var(--ink-muted);font:12px var(--mono);border-bottom:1px solid var(--line)}
.trade .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.trade .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pair{font:600 18px var(--mono)}
.tag{font:500 11px var(--mono);letter-spacing:1px;padding:3px 8px;border-radius:2px;border:1px solid currentColor}
.tag.long{color:var(--profit)}.tag.short{color:var(--loss)}
.res{font:600 22px var(--mono)}.res.pos{color:var(--profit)}.res.neg{color:var(--loss)}.res.be{color:var(--ink-muted)}
.trade .note{color:var(--ink-muted);font-size:14px;margin:0}
.trade .meta{font:12px var(--mono);color:var(--ink-muted);margin-top:auto;padding-top:8px;display:flex;justify-content:space-between}
.notice{border:1px dashed var(--ink-muted);border-radius:var(--r);padding:20px;color:var(--ink-muted);font-size:14px}
.notice code{font-family:var(--mono);color:var(--ink)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{background:none;border:1px solid var(--line);color:var(--ink-muted);padding:6px 14px;border-radius:var(--r);font:500 13px var(--mono);cursor:pointer}
.chip[aria-pressed=true]{border-color:var(--brand);color:var(--ink);background:var(--surface-300)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:24px}
.stats div{background:var(--surface-200);padding:16px 20px}.stats b{display:block;font:600 26px var(--mono)}
/* sessions */
table{width:100%;border-collapse:collapse;background:var(--surface-200);border:1px solid var(--line)}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px}
th{font:500 12px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--ink-muted);background:var(--surface-300)}
td.m{font-family:var(--mono)}
.live{color:var(--on-brand);background:var(--brand);font:600 11px var(--mono);padding:3px 8px;border-radius:2px;margin-left:8px}
/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}summary{cursor:pointer;font-weight:600;font-size:18px}
details p{color:var(--ink-muted);margin:12px 0 0}
ol.rules{counter-reset:r;list-style:none;padding:0;margin:0;display:grid;gap:12px}
ol.rules li{counter-increment:r;background:var(--surface-200);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px 16px 64px;position:relative}
ol.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:20px;top:16px;font:600 18px var(--mono);color:var(--brand-text)}
.cta{background:var(--brand);color:var(--on-brand);padding:64px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(28px,4vw,44px);margin:0;letter-spacing:-1px;line-height:1.05}
.cta .btn{background:#0a0a0b;color:#fff}.cta .btn:hover{background:#fff;color:#0a0a0b}
footer{padding:40px 0;color:var(--ink-muted);font-size:13px}
footer .wrap{display:grid;gap:12px}
footer .links{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.menu-btn{display:block}.nav nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--surface-100);border-bottom:1px solid var(--line);padding:8px 20px}.nav nav.open{display:flex}.hero .wrap{padding-top:64px;padding-bottom:64px}}

/* ===== motion ===== */
body{animation:pagein .5s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
#progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0);z-index:50}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.grid>.reveal:nth-child(3n+2){transition-delay:.09s}.grid>.reveal:nth-child(3n+3){transition-delay:.18s}
.card,.pillar{position:relative;transition:border-color .25s,transform .25s}
.card:hover,.pillar:hover{border-color:#e11d2e99}
.card::after,.pillar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#e11d2e26,transparent 65%)}
.card:hover::after,.pillar:hover::after{opacity:1}
.hero::before{z-index:0}.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}.hero::after{z-index:2}.hero .wrap{z-index:3}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.6em);animation:word .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*.09s + .15s)}
@keyframes word{to{opacity:1;transform:none}}
.hero .label,.hero p,.hero .actions{opacity:0;animation:word .8s .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero p{animation-delay:.85s}.hero .actions{animation-delay:1s}
.btn{transition:background .2s,color .2s,transform .2s}.btn:hover{transform:translateY(-2px)}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .7s}
.marquee{border-bottom:1px solid var(--line);overflow:hidden;background:var(--surface-200);padding:14px 0}
.marquee .track{display:flex;width:max-content;animation:scroll 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font:500 13px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--ink-muted);padding:0 28px;white-space:nowrap}
.marquee span::after{content:"/";color:var(--brand-text);margin-left:56px}
@keyframes scroll{to{transform:translateX(-50%)}}
/* pillars */
.pillar{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;gap:20px;align-items:flex-start;transform:perspective(800px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));overflow:hidden}
.pillar::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s .2s}
.pillar.in::before{transform:scaleX(1)}
.pillar .pic{width:72px;height:72px;flex:none;border-radius:var(--r);background:var(--surface-300);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;font:600 24px var(--mono)}
.pillar .pic img{width:100%;height:100%;object-fit:cover}
.pillar h3{margin:6px 0 6px;font-size:22px;letter-spacing:-.3px}.pillar p{margin:0;color:var(--ink-muted);font-size:14px}
/* learn */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.chips a{border:1px solid var(--line);padding:6px 14px;border-radius:var(--r);font:500 13px var(--mono);text-decoration:none;color:var(--ink-muted);background:var(--surface-100)}
.chips a:hover{border-color:var(--brand);color:var(--ink)}
.concept .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.concept.flip .txt{order:2}
.concept h2{font-size:clamp(28px,4vw,42px);letter-spacing:-1px;line-height:1.05;margin:10px 0 16px}
.concept p{color:var(--ink-muted);margin:0 0 16px}
.concept ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.concept li{padding-left:24px;position:relative;font-size:15px}
.concept li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--brand)}
.concept li b{font-weight:600}
.fig{margin:0}.fig figcaption{font:12px var(--mono);color:var(--ink-muted);margin-top:8px}
.dia{display:block;width:100%;height:auto;background:var(--surface-200);border:1px solid var(--line);border-radius:var(--r)}
.dia .dots{fill:var(--line)}.dia text{font:500 11px var(--mono);fill:var(--ink-muted)}.dia text.hl{fill:var(--brand-text)}
.dia .bull{fill:var(--ink);stroke:var(--ink)}.dia .bear{fill:var(--brand);stroke:var(--brand)}.dia .wick{stroke-width:2}
.dia .zone{fill:#e11d2e2e;stroke:var(--brand);stroke-dasharray:4 4}.dia .zone2{fill:#f5f5f61f;stroke:var(--ink-muted);stroke-dasharray:4 4}
.dia .lv{stroke:var(--brand-text);stroke-dasharray:5 5;stroke-width:1.5}
.dia .p{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.dia .pt{fill:var(--surface-200);stroke:var(--brand-text);stroke-width:2.5}
.dia .fa,.dia .fb,.dia .fc,.dia .fd{opacity:0}
.dia.in .p{animation:draw 9s cubic-bezier(.4,0,.2,1) infinite}.dia.in .p2{animation-name:draw2}
.dia.in .fa{animation:fadeA 9s infinite}.dia.in .fb{animation:fadeB 9s infinite}.dia.in .fc{animation:fadeC 9s infinite}.dia.in .fd{animation:fadeD 9s infinite}
@keyframes draw{0%{stroke-dashoffset:1;opacity:1}55%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes draw2{0%,24%{stroke-dashoffset:1;opacity:1}68%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fadeA{0%{opacity:0}6%,92%{opacity:1}100%{opacity:0}}
@keyframes fadeB{0%,22%{opacity:0}28%,92%{opacity:1}100%{opacity:0}}
@keyframes fadeC{0%,44%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@keyframes fadeD{0%,66%{opacity:0}72%,92%{opacity:1}100%{opacity:0}}
/* order flow ladder */
.dom{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--r);font:13px var(--mono);overflow:hidden}
.dom .hd,.dom .row{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center}
.dom .hd{background:var(--surface-300);color:var(--ink-muted);font-size:11px;letter-spacing:1px;padding:8px 0;text-align:center}
.dom .row{height:30px;border-top:1px solid var(--line)}
.dom .b,.dom .a{height:100%;display:flex;align-items:center;padding:0 12px;transition:background .4s}
.dom .b{justify-content:flex-end;background:linear-gradient(to left,#34d39955 var(--w,0%),transparent var(--w,0%))}
.dom .a{background:linear-gradient(to right,#ff556055 var(--w,0%),transparent var(--w,0%))}
.dom .pr{text-align:center;color:var(--ink-muted);border-inline:1px solid var(--line);height:100%;display:grid;place-items:center}
.dom .row.last .pr{background:var(--brand);color:#fff;font-weight:600}
.dom .row .imb{font-size:10px;color:var(--brand-text);margin-left:8px;letter-spacing:1px}
.dom .ft{display:flex;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-300)}
.dom .ft b{font-weight:600}.pos{color:var(--profit)}.neg{color:var(--loss)}
.steps{counter-reset:s}
@media(max-width:860px){.concept .wrap{grid-template-columns:1fr;gap:28px}.concept.flip .txt{order:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal,.hero h1 .w,.hero .label,.hero p,.hero .actions{opacity:1;transform:none}.dia .p{stroke-dashoffset:0}.dia .fa,.dia .fb,.dia .fc,.dia .fd{opacity:1}.pillar::before{transform:scaleX(1)}}

.dom .b .imb{margin:0 8px 0 0}