:root{
  --bg:#090807; --charcoal:#181716; --slate:#3a3836; --ink:#f2eee6; --mute:#8f8a82; --line:rgba(242,238,230,.12); --line2:rgba(242,238,230,.28);
  --brass:#b5986a; --warm:#d9c8a0; --amber:#d2b789; --sans:'Manrope',system-ui,sans-serif; --up:#7fe3a3; --down:#ff7a6b; --panel:rgba(20,18,16,.62);
  --wide:'Archivo',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --pad:clamp(16px,3.2vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth}
body{font:400 16px/1.6 var(--sans);font-stretch:100%;background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
i,em{font-style:italic}
::selection{background:var(--amber);color:#111}

/* device frame */
.frame{position:fixed;inset:10px;border:1px solid var(--line);border-radius:22px;pointer-events:none;z-index:50;box-shadow:0 0 0 30px var(--bg)}
.frame::after{content:"";position:absolute;inset:-6px;border:1px solid rgba(243,239,232,.05);border-radius:27px}

/* nav */
.nav{position:fixed;top:10px;left:10px;right:10px;z-index:40;display:flex;align-items:center;gap:28px;padding:18px calc(var(--pad) + 6px) 14px;border-bottom:1px solid var(--line);background:linear-gradient(rgba(10,9,8,.55),rgba(10,9,8,0));border-radius:22px 22px 0 0}
.logo{display:flex;align-items:baseline;gap:1px;text-decoration:none;font-size:22px;letter-spacing:-.02em}
.logo span{font-weight:300;font-stretch:125%;text-transform:uppercase;font-size:15px;letter-spacing:.12em}
.logo i{font-weight:500;font-stretch:80%;font-size:23px;margin-left:2px}
.tagline{font-size:11px;line-height:1.35;color:var(--mute);max-width:220px}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav nav a{text-decoration:none;opacity:.78}.nav nav a:hover{opacity:1}
.connect{border:1px solid var(--line2);border-radius:99px;padding:8px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.connect:hover,.connect.on{border-color:var(--amber);color:var(--amber)}
.ca{font-family:var(--mono);font-size:11px;letter-spacing:.02em;border:1px dashed var(--line2);border-radius:99px;padding:7px 12px;text-transform:none}
.ca.soon{opacity:.7}
.x{font-size:14px!important;letter-spacing:0!important}

/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;touch-action:pan-y}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#0a0908}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(10,9,8,.55) 85%),linear-gradient(transparent 70%,rgba(10,9,8,.6))}
.title{position:absolute;left:calc(var(--pad) + 4vw);top:21vh;z-index:3;text-transform:uppercase;line-height:.95;pointer-events:none}
.title span{display:block}
.t-before .l1{font-weight:300;font-stretch:125%;font-size:clamp(30px,5vw,72px);letter-spacing:-.01em}
.t-before .l2{font-weight:300;font-stretch:125%;font-size:clamp(30px,5vw,72px);padding-left:.9em}
.t-before .l2 em{text-transform:none;font-style:normal;font-weight:300}
.t-before .l2 i{font-weight:300}
.t-after .l1{font-weight:300;font-stretch:125%;font-size:clamp(26px,3.6vw,52px)}
.t-after .big{font-weight:600;font-stretch:125%;font-size:clamp(46px,8.2vw,124px);letter-spacing:-.02em;padding-left:.35em;margin-top:-.05em}
.t-after{opacity:0;transform:translateY(24px)}
.ghost{position:absolute;right:calc(var(--pad) + 3vw);top:33vh;z-index:2;font-weight:200;font-stretch:125%;font-size:clamp(70px,13vw,210px);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(243,239,232,.28);opacity:0;pointer-events:none;mix-blend-mode:screen}
.arc{position:absolute;z-index:3;pointer-events:none;overflow:visible}
.arc .track{fill:none;stroke:rgba(243,239,232,.22);stroke-width:1.2;vector-effect:non-scaling-stroke}
.arc .fill{fill:none;stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke}
.knob{position:absolute;z-index:4;display:flex;align-items:center;gap:14px;transform:translate(-9px,-9px);touch-action:none;cursor:grab;padding:0}
.knob:active{cursor:grabbing}
.knob .dot{width:18px;height:18px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px rgba(243,239,232,.12),0 0 24px rgba(243,239,232,.6);flex:none}
.knob .label{font-size:12px;font-style:italic;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 8px #000}
.knob.done .label{opacity:0}
.lede{position:absolute;z-index:3;font-size:13px;line-height:1.6;max-width:300px;color:rgba(243,239,232,.82)}
.l-before{right:calc(var(--pad) + 3vw);bottom:13vh}
.l-after{right:calc(var(--pad) + 3vw);bottom:12vh;opacity:0;transform:translateY(20px);pointer-events:none;max-width:340px}
.l-after .kicker{font-stretch:125%;font-weight:400;font-size:clamp(20px,2.4vw,34px);line-height:1.02;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.l-after .more{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:3px}
.hero.revealed .l-after{pointer-events:auto}
.foot{position:absolute;left:calc(var(--pad) + 6px);bottom:28px;z-index:3;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.mouse{width:14px;height:22px;border:1px solid var(--line2);border-radius:8px;position:relative}
.mouse::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:5px;margin-left:-1px;background:var(--ink);border-radius:2px;animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
.loading::before{content:attr(data-pct);position:absolute;right:calc(var(--pad) + 6px);bottom:28px;z-index:5;font:10px var(--mono);color:var(--mute);letter-spacing:.1em}

/* sections */
.sec{position:relative;padding:clamp(80px,14vh,150px) calc(var(--pad) + 4vw);border-top:1px solid var(--line)}
.eyebrow{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:26px}
.sec h2,.end h2{font-weight:300;font-stretch:125%;text-transform:uppercase;font-size:clamp(30px,4.6vw,66px);line-height:1;letter-spacing:-.01em}
.sec h2 i,.end h2 i{font-weight:300}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,34px);margin-top:56px}
.steps li{border-top:1px solid var(--line2);padding-top:20px}
.steps .n{font:500 11px var(--mono);color:var(--mute)}
.steps h3{font-weight:400;font-stretch:125%;text-transform:uppercase;font-size:18px;margin:10px 0 12px;letter-spacing:.02em}
.steps p{color:rgba(243,239,232,.72);font-size:14px}
.cmd{font:13px var(--mono);background:#000;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:0 0 10px;cursor:copy;overflow-x:auto;white-space:pre}
.cmd:hover{border-color:var(--amber)}
.btn{margin-top:16px}
.keybox{margin-top:12px;font:12px var(--mono);word-break:break-all;color:var(--amber)}
.up{color:var(--up)}.down{color:var(--down)}

.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.mult{padding:clamp(24px,3vw,44px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.mult:last-child{border-right:0}
.mult b{font-weight:200;font-stretch:125%;font-size:clamp(54px,7vw,104px);line-height:1}
.mult:nth-child(1) b{color:var(--up)}.mult:nth-child(2) b{color:var(--down)}
.mult span{font-stretch:125%;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.mult small{color:var(--mute);font-size:13px}
.fine{margin-top:26px;max-width:720px;color:var(--mute);font-size:13px}

.desk-grid{display:grid;grid-template-columns:1.25fr 1fr 1.3fr;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.lab{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.panel.price b{font-weight:300;font-stretch:110%;font-size:clamp(34px,3.6vw,52px);font-variant-numeric:tabular-nums}
.move{font:13px var(--mono)}
#spark{width:100%;height:80px;margin-top:auto}
.panel.round b{font-weight:300;font-stretch:125%;font-size:30px}
.ring{position:relative;width:118px;height:118px;margin:6px auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--line);stroke-width:3}
.ring #dRing{stroke:var(--amber);stroke-dasharray:276.5;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font:600 22px var(--mono)}
.crowd{font:12px var(--mono);color:var(--mute);text-align:center}
.crowd i{font-style:normal;margin:0 6px}.crowd em{font-style:normal}
.panel.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel.stats b{display:block;font-weight:400;font-size:19px;font-variant-numeric:tabular-nums}
.tape-row{margin:18px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tape-track{display:flex;gap:28px;padding:12px 18px;font:12px var(--mono);white-space:nowrap;min-height:42px;align-items:center}
.tape-track span{opacity:.9}.tape-track .flat{color:var(--mute)}
.board{margin-top:34px}
.board h3{font-weight:400;font-stretch:125%;text-transform:uppercase;font-size:16px;margin-bottom:12px;letter-spacing:.04em}
table{width:100%;border-collapse:collapse;font:13px var(--mono)}
th{text-align:left;font-weight:500;color:var(--mute);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:10px 8px;border-bottom:1px solid var(--line2)}
td{padding:11px 8px;border-bottom:1px solid var(--line)}
.muted{color:var(--mute)}

.sessions{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:50px;border-top:1px solid var(--line2)}
.sessions div{padding:22px 18px 22px 0;border-right:1px solid var(--line);padding-left:18px;display:flex;flex-direction:column;gap:4px}
.sessions div:first-child{padding-left:0}.sessions div:last-child{border-right:0}
.sessions span{font:11px var(--mono);color:var(--mute)}
.sessions b{font-weight:400;font-stretch:125%;text-transform:uppercase;font-size:17px}
.sessions em{font-style:italic;color:var(--amber);font-size:14px}

.end{position:relative;padding:clamp(110px,18vh,190px) calc(var(--pad) + 4vw) 90px;border-top:1px solid var(--line);overflow:hidden}
.ghost.small{opacity:1;top:auto;bottom:40px;font-size:clamp(90px,18vw,280px)}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.links a,.links button{border:1px solid var(--line2);border-radius:99px;padding:9px 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.links .ca{text-transform:none;letter-spacing:.02em}

.toast{position:fixed;left:50%;bottom:34px;z-index:60;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#111;border-radius:99px;padding:10px 18px;font-size:13px;transition:.25s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* reveal state */
.hero.revealed .t-before{opacity:0;transform:translateY(-16px)}
.t-before,.l-before{transition:opacity .5s,transform .5s}
.t-after,.l-after,.ghost{transition:opacity .8s .15s,transform .8s .15s}
.hero.revealed .t-after,.hero.revealed .l-after{opacity:1;transform:none}
.hero.revealed .ghost{opacity:1}
.hero.revealed .l-before{opacity:0}

@media (max-width:900px){
  .tagline,.nav nav a:not(.x){display:none}
  .nav{gap:14px;padding:14px 18px 12px}
  .nav nav{gap:10px}
  .ca{display:none}
  .steps,.rule-grid,.desk-grid,.sessions{grid-template-columns:1fr}
  .mult{border-right:0;border-bottom:1px solid var(--line)}
  .sessions div{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .title{top:15vh;left:28px}
  .l-before{left:28px;right:28px;bottom:13vh;max-width:none}
  .knob{flex-direction:row-reverse;transform:translate(calc(-100% + 9px),-9px)}
  .knob .label{font-size:11px}
  .hero .vignette{background:radial-gradient(ellipse at 50% 55%,transparent 40%,rgba(10,9,8,.55) 85%),linear-gradient(transparent 55%,rgba(10,9,8,.85))}
  .l-after{left:28px;right:28px;bottom:10vh;max-width:none}
  .ghost{top:auto;bottom:30vh;right:20px}
  .sec,.end{padding-left:28px;padding-right:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* sound toggle */
.snd{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.snd:hover{opacity:1}
.snd .bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.snd .bars i{display:block;width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .3s}
.snd.on .bars i{animation:eq 1.1s ease-in-out infinite}
.snd.on .bars i:nth-child(2){animation-delay:-.4s}.snd.on .bars i:nth-child(3){animation-delay:-.7s}.snd.on .bars i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
@media (max-width:760px){.snd .lbl{display:none}}
@media (prefers-reduced-motion:reduce){.snd.on .bars i{animation:none;height:8px}}

/* live end state: parallax still + dust over the film's last frame */
.live,.live-dust{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .7s ease}
.live{z-index:0}
.live-dust{z-index:0;mix-blend-mode:screen}
.hero.live-on .live,.hero.live-on .live-dust{opacity:1}
.hero.live-fast .live,.hero.live-fast .live-dust{transition-duration:.3s}

/* app links + demo */
.launch{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#111;border-radius:99px;padding:8px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-decoration:none;opacity:1!important}
.launch:hover{background:#fff}
.launch.big{padding:13px 22px;font-size:12px}
.hero-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.hero-ctas .more{margin-top:0}
.btn.launch{margin-top:14px;padding:11px 18px}
.demo-frame{margin:34px 0 26px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#000;max-width:1100px}
.demo-frame video{display:block;width:100%;aspect-ratio:16/9;background:#000}
@media (max-width:760px){.nav .launch{padding:7px 11px;font-size:10px}}

/* cover-again: the reverse film sits on top while it plays */
.seq-rev{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#0a0908;opacity:0;pointer-events:none}
.hero.reversing .seq-rev{opacity:1}
.cover-btn{position:absolute;right:calc(var(--pad) + 6px);bottom:30px;z-index:6;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line2);border-radius:99px;padding:9px 15px;background:rgba(10,9,8,.45);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .5s .4s,transform .5s .4s,border-color .2s}
.hero.revealed .cover-btn{opacity:1;pointer-events:auto;transform:none}
.hero.reversing .cover-btn{opacity:0;pointer-events:none}
.cover-btn:hover{border-color:var(--amber);color:var(--amber)}
.hero.reversing .t-after,.hero.reversing .l-after,.hero.reversing .ghost{opacity:0;transition-duration:.4s}

/* ================= board design layer (Visual / UI kit / layout) ================= */
.title,.ghost,.logo,.sec h2,.end h2,.steps h3,.mult b,.mult span,.sessions b,.panel b,.l-after .kicker,.t-after,.t-before{font-family:var(--wide)}
.eyebrow{font:600 11px var(--sans);letter-spacing:.24em;color:var(--warm);margin-bottom:22px}
.sec{padding:clamp(90px,15vh,170px) calc(var(--pad) + 4vw);border-top:1px solid var(--line)}
.sec h2,.end h2{font-weight:500;font-size:clamp(40px,5.4vw,84px);line-height:.98;letter-spacing:-.015em}
.sec h2 i,.end h2 i{font-weight:300;color:var(--warm)}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:#e7e1d6;margin:26px 0 14px;max-width:560px}
.copy p:not(.eyebrow):not(.lead){color:rgba(242,238,230,.68);max-width:540px}
.head{margin-bottom:clamp(36px,6vh,64px)}

/* buttons + links: 200-300 ms hovers */
.btn-p,.btn-s,.launch{display:inline-flex;align-items:center;gap:10px;border-radius:99px;font:600 13px var(--sans);letter-spacing:.04em;text-decoration:none;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn-p,.launch{background:var(--ink);color:#0d0c0b;padding:15px 24px;text-transform:none}
.btn-p:hover,.launch:hover{background:#fff;transform:translateY(-1px)}
.btn-s{border:1px solid var(--line2);color:var(--ink);padding:14px 22px}
.btn-s:hover{border-color:var(--warm);color:var(--warm)}
.arw{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn-p:hover .arw,.tlink:hover .arw{transform:translateX(3px)}
.tlink{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 13px var(--sans);letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:5px;transition:border-color .25s,color .25s}
.tlink:hover{border-color:var(--warm);color:var(--warm)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.nav .launch{padding:9px 15px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.launch.big{padding:14px 22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* B · story */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,110px);align-items:center}
.pic{margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--charcoal);position:relative}
.pic.tall{aspect-ratio:4/4.6}
.pic img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(9,8,7,.55));pointer-events:none}
.feats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,9vh,96px);border-top:1px solid var(--line)}
.feats li{padding:34px 28px 6px;border-right:1px solid var(--line);display:grid;gap:10px;justify-items:start}
.feats li:first-child{padding-left:0}.feats li:last-child{border-right:0}
.feats svg{width:32px;height:32px;fill:none;stroke:var(--warm);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.feats b{font:600 18px var(--sans);margin-top:6px}
.feats span{color:rgba(242,238,230,.62);font-size:15px;max-width:300px}

/* C · feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(24,23,22,.9),rgba(14,13,12,.9));padding:14px 14px 26px;transition:border-color .25s,transform .25s}
.card:hover{border-color:rgba(217,200,160,.45);transform:translateY(-3px)}
.card figure{margin:0 0 22px;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.05)}
.card .n{font:500 11px var(--mono);color:var(--brass);padding:0 10px}
.card h3{font:600 22px var(--sans);margin:8px 10px 8px}
.card p{color:rgba(242,238,230,.64);font-size:15px;padding:0 10px}

/* D · process */
.process{list-style:none;margin-top:44px;display:grid;position:relative}
.process::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:1px;background:linear-gradient(var(--line2),var(--line))}
.process li{display:grid;grid-template-columns:44px 1fr;gap:22px;padding:16px 0;align-items:start}
.process .dot{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font:500 12px var(--mono);background:var(--bg);position:relative;transition:border-color .25s,color .25s}
.process li:hover .dot{border-color:var(--warm);color:var(--warm)}
.process b{display:block;font:600 20px var(--sans);margin:9px 0 4px}
.process div span{color:rgba(242,238,230,.64);font-size:15px}
.term{margin-top:30px;border-top:1px solid var(--line);padding-top:18px;max-width:520px}
.term summary{cursor:pointer;font:600 13px var(--sans);color:var(--mute);letter-spacing:.04em;list-style:none}
.term summary::before{content:"+ ";color:var(--warm)}
.term[open] summary::before{content:"− "}
.term .cmd{margin-top:14px}
.term .btn-s{margin:4px 0 10px;padding:10px 16px;font-size:12px}

/* demo + rule */
.demo-frame{margin:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#000;max-width:1200px;box-shadow:0 40px 120px rgba(0,0,0,.5)}
.rule-grid{border-radius:24px;background:rgba(24,23,22,.5)}
.mult b{font-weight:300}
.mult span{font-family:var(--sans);font-weight:700;letter-spacing:.08em;font-size:13px}

/* E · live ticker */
.live-top{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,6vw,100px);align-items:center;margin-bottom:clamp(40px,7vh,72px)}
.live-top .head{margin:0}
.tickers{list-style:none;display:grid;gap:12px}
.tickers li{display:grid;grid-template-columns:70px 1fr 90px 130px;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(24,23,22,.6);transition:border-color .25s}
.tickers li:hover{border-color:rgba(217,200,160,.4)}
.tickers b{font:700 17px var(--sans);letter-spacing:.04em}
.tickers em{font:500 16px var(--mono);font-style:normal;color:#e7e1d6}
.tickers .chg{font:600 14px var(--mono);color:var(--mute)}
.tickers li.up .chg{color:var(--up)}.tickers li.down .chg{color:var(--down)}
.tickers svg{width:130px;height:32px;overflow:visible}
.tickers path{fill:none;stroke:var(--mute);stroke-width:1.5;vector-effect:non-scaling-stroke}
.tickers li.up path{stroke:var(--up)}.tickers li.down path{stroke:var(--down)}
.panel{background:rgba(24,23,22,.6);border-radius:20px}
.panel.price b{font-family:var(--mono);font-weight:500}

/* F · CTA */
.end{min-height:86vh;display:flex;align-items:center;padding:clamp(110px,18vh,190px) calc(var(--pad) + 4vw)}
.end-bg{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;opacity:.32;will-change:transform}
.end::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg) 0%,rgba(9,8,7,.82) 42%,rgba(9,8,7,.35) 100%)}
.end-in{position:relative;z-index:2;max-width:760px}
.end .ghost.small{z-index:1}
.end .links{margin-top:40px}
.links a,.links button{font-family:var(--sans);font-weight:600;transition:border-color .25s,color .25s}
.links a:hover,.links button:hover{border-color:var(--warm);color:var(--warm)}

/* section reveal 600-900 ms */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none;transition:none}}

@media (max-width:900px){
  .split,.live-top{grid-template-columns:1fr}
  .feats,.cards{grid-template-columns:1fr}
  .feats li{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .tickers li{grid-template-columns:54px 1fr 74px;padding:14px 16px}
  .tickers svg{display:none}
  .pic.tall{aspect-ratio:4/3.4}
}

/* ===== blended renders: transparent cut-outs bleed off the page edge, no boxes ===== */
.story,.how{overflow:hidden}
.story .split,.how .split{grid-template-columns:1fr;min-height:min(92vh,980px);align-items:center}
.story .copy,.how .copy{position:relative;z-index:2;max-width:min(560px,46vw)}
.cut{position:absolute;z-index:1;right:-3vw;top:50%;height:min(118%,1080px);aspect-ratio:1400/1500;margin:0;pointer-events:none;transform:translateY(-50%)}
.cut[data-rv]{transform:translateY(calc(-50% + 28px))}
.cut[data-rv].in{transform:translateY(-50%)}
.cut::before{content:"";position:absolute;inset:8% 4% 10% 10%;background:radial-gradient(closest-side,rgba(217,200,160,.16),rgba(181,152,106,.06) 55%,transparent 75%);filter:blur(30px)}
.cut img{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 50px 90px rgba(0,0,0,.65));
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 96%),linear-gradient(90deg,transparent 0%,#000 14%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 62%,transparent 96%),linear-gradient(90deg,transparent 0%,#000 14%);mask-composite:intersect}
.story .cut{right:-6vw}
.story .feats{position:relative;z-index:2;background:linear-gradient(180deg,transparent,var(--bg) 30%)}

/* feature cards without boxes: the image melts into the page */
.card{border:0;background:none;padding:0}
.card:hover{transform:none}
.card figure{border-radius:0;aspect-ratio:4/3.2;margin-bottom:10px;
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 72% 68% at 50% 45%,#000 55%,transparent 100%)}
.card .n,.card h3,.card p{padding:0}

@media (max-width:900px){
  .story .split,.how .split{min-height:0}
  .story .copy,.how .copy{max-width:none}
  .cut,.story .cut{position:relative;right:auto;top:auto;transform:none;width:115%;height:auto;margin:-10px -7% -40px}
  .cut[data-rv],.cut[data-rv].in{transform:none}
}
/* blend tuning */
.story .copy,.how .copy{max-width:min(520px,40vw)}
.story .cut{right:-12vw;height:min(104%,980px)}
.how .cut{right:-6vw;height:min(108%,1000px)}
.story .split{min-height:min(96vh,1000px)}
.story .feats{margin-top:0}
.card figure{background:none;-webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 48%,#000 38%,transparent 100%);mask-image:radial-gradient(ellipse 58% 58% at 50% 48%,#000 38%,transparent 100%)}
.card img{transform:scale(1.08)}.card:hover img{transform:scale(1.13)}

/* C · the machine as floating 3D objects: no cards, no frames */
.objs{gap:clamp(18px,3vw,48px);align-items:end}
.objs .card{text-align:left}
.objs .card figure{position:relative;aspect-ratio:1/0.92;margin:0 0 6px;overflow:visible;-webkit-mask-image:none;mask-image:none}
.objs .card figure::before{content:"";position:absolute;inset:14% 8% 6%;background:radial-gradient(closest-side,rgba(217,200,160,.18),rgba(181,152,106,.06) 60%,transparent 78%);filter:blur(24px);transition:opacity .4s}
.objs .card img{position:relative;width:100%;height:100%;object-fit:contain;transform:none;filter:drop-shadow(0 34px 60px rgba(0,0,0,.7));
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 99%);mask-image:linear-gradient(180deg,#000 70%,transparent 99%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.objs .card:hover img{transform:translateY(-8px) scale(1.03)}
.objs .card:hover figure::before{opacity:1.4}
.objs .card .n{display:block;margin-top:4px}

/* D · the machine bigger, melting into the page */
.how .cut{right:-11vw;height:min(122%,1120px)}
.how .cut img{-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 94%),linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(180deg,#000 58%,transparent 94%),linear-gradient(90deg,transparent 0%,#000 26%)}
.how .cut::before{inset:4% 0 14% 0;background:radial-gradient(closest-side,rgba(217,200,160,.2),rgba(181,152,106,.07) 55%,transparent 78%)}
.objs .card:nth-child(2) img{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 48% 42%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 48% 42%,#000 40%,transparent 100%)}
.objs .card img{-webkit-mask-image:radial-gradient(ellipse 58% 60% at 50% 44%,#000 46%,transparent 100%);mask-image:radial-gradient(ellipse 58% 60% at 50% 44%,#000 46%,transparent 100%)}
.objs .card:nth-child(2) img{-webkit-mask-image:radial-gradient(ellipse 46% 46% at 48% 40%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 46% 46% at 48% 40%,#000 25%,transparent 100%)}
.objs .card:nth-child(2) img{-webkit-mask-image:radial-gradient(ellipse 46% 44% at 48% 52%,#000 28%,transparent 100%);mask-image:radial-gradient(ellipse 46% 44% at 48% 52%,#000 28%,transparent 100%)}

/* performance: off-screen sections are not rendered; moving images get their own layer */
.sec,.end{content-visibility:auto;contain-intrinsic-size:auto 1000px}
.cut img,.end-bg{will-change:transform;backface-visibility:hidden}
.live-dust{mix-blend-mode:normal}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* logo: bell-jar mark + wordmark */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;line-height:1}
.logo .mark{width:30px;height:30px;display:block;flex:none;filter:drop-shadow(0 0 10px rgba(217,200,160,.18))}
.logo .wm{display:inline-flex;align-items:baseline;gap:5px}
.logo .wm b{font:700 15px/1 var(--wide);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.logo .wm i{font:italic 700 21px/1 var(--wide);font-stretch:88%;letter-spacing:-.01em;color:var(--warm);margin:0;text-transform:none}
.logo:hover .mark{filter:drop-shadow(0 0 14px rgba(217,200,160,.35))}
.logo .mark{width:34px;height:34px}
.logo .wm b{font-size:16px}
.logo .wm i{font-size:22px}

/* lightweight: fades/glow are baked into the images, so no masks, filters or blend modes at scroll time */
.cut img,.how .cut img,.objs .card img,.objs .card:nth-child(2) img{-webkit-mask-image:none!important;mask-image:none!important;filter:none!important}
.cut::before,.how .cut::before,.objs .card figure::before{display:none}
.ghost{mix-blend-mode:normal}
.logo .mark,.logo:hover .mark{filter:none}
.objs .card img{transition:transform .5s ease}

/* logo D: C▲LLT▽PE — the two A's are the call */
.logo .wm2{display:inline-flex;align-items:center;font:700 17px/1 var(--wide);font-stretch:125%;letter-spacing:.15em;color:var(--ink);white-space:nowrap}
.logo .tri{width:.8em;height:.72em;margin:0 .1em 0 .04em;flex:none;display:block}
.logo:hover .tri:first-of-type path{fill:#e3c992}