@font-face{font-family:Anton;src:url(fonts/anton.woff2) format('woff2');font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--bg:#181a1f;--bg2:#1f2228;--ink:#f3f1ec;--mute:#a4a7ae;--line:#2e323a;--acc:#ff4d2e;--acc2:#ffb199}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{text-wrap:balance}p,li{text-wrap:pretty}
.wrap{width:min(1240px,92vw);margin:0 auto}
.disp{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92}
.kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--acc);font-weight:600}
.mute{color:var(--mute)}
.acc{color:var(--acc)}
nav.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 4vw;background:linear-gradient(#181a1fe6,#181a1f00);backdrop-filter:blur(6px)}
.logo{font-family:Anton;font-size:22px;letter-spacing:.04em;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo i{width:12px;height:12px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px #ff4d2e33,0 0 22px var(--acc)}
nav.top .links{display:flex;gap:26px;font-size:14px}
nav.top .links a{text-decoration:none;color:var(--mute)}nav.top .links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .25s,background .25s}
.btn.p{background:var(--acc);color:#120604}.btn.p:hover{transform:translateY(-2px);background:#ff6a4f}
.btn.g{border:1px solid #555a64;color:var(--ink)}.btn.g:hover{border-color:var(--ink)}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 0 8vh;overflow:hidden}
#map{position:absolute;inset:0;width:100%;height:100%}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%,transparent 30%,#181a1f 85%),linear-gradient(transparent 55%,#181a1f);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(44px,5.6vw,84px)}
.hero{padding-top:120px}
.hero h1 span{display:block}
.hero p.sub{max-width:620px;font-size:clamp(18px,2vw,22px);color:#cfcdc7;margin:22px 0 28px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.live{position:absolute;right:4vw;top:96px;z-index:3;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:right;line-height:1.9}
.live b{color:var(--ink);font-weight:600}
.live .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:8px;animation:bl 1.4s infinite}
@keyframes bl{50%{opacity:.2}}
section{padding:16vh 0;position:relative}
.big{font-size:clamp(34px,4.4vw,68px);margin:12px 0 24px}
.step h3{margin-bottom:12px}
.mid{font-size:clamp(28px,3.2vw,48px)}
.lead{font-size:clamp(19px,1.8vw,23px);color:#cfcdc7;max-width:720px}
/* problem */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);margin-top:8vh}
.split>div{background:var(--bg);padding:6vh 3.4vw}
.split h3{font-size:clamp(24px,2.3vw,34px);margin:14px 0 18px}
.fact{border-top:1px solid var(--line);padding:22px 0}
.fact .n{font-family:Anton;font-size:clamp(40px,4vw,60px);line-height:1;color:var(--ink)}
.fact .n em{font-style:normal;color:var(--acc)}
.fact p{color:var(--mute);font-size:15px;margin-top:6px}
.src{font-size:12px;color:#9296a0}.src a{color:#b4b7be}
/* how */
.steps{counter-reset:s;margin-top:8vh}
.step{display:grid;grid-template-columns:120px 1fr 1.2fr;gap:4vw;align-items:center;padding:6vh 0;border-top:1px solid var(--line)}
.step .no{font-family:Anton;font-size:72px;color:transparent;-webkit-text-stroke:1px #6a6e78;line-height:1}
.step.in .no{-webkit-text-stroke:1px var(--acc)}
.step h3{font-size:clamp(28px,2.8vw,44px)}
.step p{color:#cfcdc7}
.vis{border-radius:14px;overflow:hidden;position:relative;background:var(--bg2);border:1px solid var(--line);aspect-ratio:16/10}
.vis img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.in .vis img,.vis.in img{transform:scale(1)}
.tag{position:absolute;left:12px;bottom:12px;background:#111317d9;border:1px solid #ffffff22;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:99px;backdrop-filter:blur(6px)}
.ui{padding:22px;font-size:14px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.ui .row{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#15171b}
.ui .row b{font-weight:600}.ui .sc{font-family:Anton,Inter,sans-serif;color:var(--acc);font-size:22px}
.bar{height:6px;background:#2a2e35;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--acc);width:0;transition:width 1.4s .2s}
.in .bar i{width:var(--w)}
/* gallery marquee */
.marq{overflow:hidden;padding:4vh 0;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq .track{display:flex;gap:18px;width:max-content;animation:mq 60s linear infinite}
.marq figure{width:min(520px,78vw);aspect-ratio:16/10;flex:none;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.marq figure img{width:100%;height:100%;object-fit:cover}
@keyframes mq{to{transform:translateX(-50%)}}
/* sides */
.sides{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8vh}
.side{border:1px solid var(--line);border-radius:20px;padding:5vh 3vw;background:linear-gradient(160deg,#23262d,#1a1c21);position:relative;overflow:hidden}
.side.mo{background:linear-gradient(160deg,#2e1d18,#1a1c21)}
.side h3{font-size:clamp(30px,3.2vw,48px);margin:10px 0 18px}
.side ul{list-style:none;margin:24px 0 32px}
.side li{padding:12px 0;border-top:1px solid #ffffff14;display:flex;gap:12px}
.side li:before{content:"→";color:var(--acc)}
/* channels */
.chan{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:8vh}
.chan div{background:var(--bg);padding:30px 24px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.chan .disp{font-size:26px}
.st{font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid #4a4e57;color:var(--mute);align-self:flex-start}
.st.now{background:var(--acc);border-color:var(--acc);color:#120604;font-weight:700}
.st.next{border-color:var(--acc2);color:var(--acc2)}
/* trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8vh}
.trust div{border-top:2px solid var(--acc);padding-top:20px}
.trust h3,.trust h4{font-size:20px;margin-bottom:8px}
.trust p{color:var(--mute);font-size:15px}
/* cta */
.cta{text-align:center;padding:22vh 0;background:radial-gradient(circle at 50% 60%,#ff4d2e2a,transparent 60%)}
.cta h2{font-size:clamp(44px,6.4vw,104px)}
.cta .ctas{justify-content:center;display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
footer{border-top:1px solid var(--line);padding:40px 0;font-size:14px;color:var(--mute)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.1,1),transform 1s cubic-bezier(.2,.7,.1,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.8,.1,1)}
.loaded .word>span{transform:none}
@media (max-width:900px){
 nav.top .links{display:none}
 .split,.sides{grid-template-columns:1fr}
 .step{grid-template-columns:1fr;gap:18px}
 .step .no{font-size:56px}
 .chan{grid-template-columns:1fr 1fr}
 .trust{grid-template-columns:1fr 1fr}
 .live{display:none}
 section{padding:11vh 0}
 .vis.ui{aspect-ratio:auto;padding-bottom:50px}
 .ui .row{flex-wrap:wrap}
}
@media (max-width:520px){.chan,.trust{grid-template-columns:1fr}.hero h1{font-size:clamp(40px,11.6vw,60px)}.big{font-size:clamp(32px,9vw,44px)}.split h3{font-size:26px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.word>span{transform:none}.vis img{transform:none}}
.hero .kicker{margin-bottom:12px}