/* ===== hero variants: flat night, moons as the only art ===== */
.hz{position:relative;height:900px;overflow:hidden;background:var(--deep)}
.hz-nv{position:absolute;left:40px;right:40px;top:24px;display:flex;justify-content:space-between;align-items:center;z-index:20}
.hz-nv>div{display:flex;align-items:center;gap:28px}
.hz-nv a{font:500 15px/1 Satoshi;color:var(--c2);cursor:pointer;transition:color .2s}.hz-nv a:hover{color:var(--c1)}
.hz-nv a.btn{color:#0B0D10;padding:12px 18px;border-radius:11px}
.hz .mx{display:block;overflow:visible}
.hz-h1{font:500 60px/1.02 Satoshi;letter-spacing:-.045em;text-align:center}
.hz-h1>span{display:block;overflow:hidden;padding-bottom:.07em}
.hz-h1 i{display:block;font-style:normal;animation:hzr 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--hd,.5s)}
.hz-h1>span:nth-child(2) i{animation-delay:calc(var(--hd,.5s) + .14s)}
.hz-h1.left{text-align:left}
.hz-sub{font:400 18px/1.5 Satoshi;color:var(--c3);margin-top:18px;animation:hzf 1s both;animation-delay:calc(var(--hd,.5s) + .5s)}
.hz .cp{animation:hzf 1s both;animation-delay:calc(var(--hd,.5s) + .7s)}
.hz-lg{display:flex;align-items:center;gap:13px;margin-top:16px;animation:hzf 1s both;animation-delay:calc(var(--hd,.5s) + .85s)}
.hz-lg img{width:17px;height:17px;filter:invert(1);opacity:.5}
.hz-lg span{font:400 13px/1 Satoshi;color:var(--c4);margin-left:4px}
@keyframes hzr{from{transform:translateY(106%)}to{transform:none}}
@keyframes hzf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hzi{from{opacity:0}to{opacity:1}}

/* 1 toss */
.t1{--hd:1.05s}
.t1-sky{position:absolute;left:0;right:0;top:70px;height:640px}
.t1-m{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;animation:t1in 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d)}
@keyframes t1in{from{opacity:0;translate:-120px 70px;rotate:-25deg}to{opacity:1;translate:0 0;rotate:0deg}}
.t1-m .fl{animation:t1f 6s ease-in-out infinite alternate}
@keyframes t1f{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.t1-m b{margin-top:14px;font:500 21px/1 Satoshi;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.t1-m span{margin-top:6px;font:400 13px/1 Satoshi;color:var(--c4);white-space:nowrap}
.t1-c{position:absolute;left:50%;top:388px;width:640px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.t1-c .cp{width:100%;margin-top:30px;text-align:left}
.hz-key{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;align-items:center;gap:9px;font:400 13px/1 Satoshi;color:var(--c4);animation:hzi 1s 2.2s both}

/* 2 almanac */
.t2{--hd:.25s}
.t2-l{position:absolute;left:80px;top:250px;width:560px}
.t2-l .hz-h1{font-size:64px}
.t2-l .cp{margin-top:34px}
.t2-cal{position:absolute;left:740px;top:118px;width:620px;animation:hzf 1.2s .1s both}
.t2-cal header{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 18px}
.t2-cal header b{font:500 22px/1 Satoshi;letter-spacing:-.02em}
.t2-cal header span{font:400 13px/1 Satoshi;color:var(--c4)}
.t2-cal .wd{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--h2);padding:10px 0}
.t2-cal .wd span{font:500 10.5px/1 JBM;letter-spacing:.08em;text-transform:uppercase;color:var(--c4);padding-left:10px}
.t2-cal .gr{position:relative;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,104px);border-top:1px solid var(--h1);border-left:1px solid var(--h1)}
.cc{position:relative;border-right:1px solid var(--h1);border-bottom:1px solid var(--h1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.cc small{position:absolute;left:9px;top:8px;font:400 11px/1 JBM;color:var(--c4)}
.cc em{font:500 12px/1 JBM;font-style:normal;color:var(--c2)}
.cc .mx{margin-top:6px}
.t2-cal .sel{position:absolute;width:calc(100% / 7);height:20%;box-shadow:inset 0 0 0 1.5px var(--pink);border-radius:2px;transition:left .7s cubic-bezier(.65,0,.25,1),top .7s cubic-bezier(.65,0,.25,1);pointer-events:none}
.t2-card{position:absolute;right:-30px;bottom:-34px;width:300px;padding:18px 18px 8px;border-radius:14px;background:#111418;box-shadow:inset 0 0 0 1px var(--h2),0 40px 80px -20px #000;animation:hzf .6s cubic-bezier(.16,1,.3,1) both}
.t2-card small{font:500 10.5px/1 JBM;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.t2-card p{font:500 16px/1.35 Satoshi;letter-spacing:-.01em;margin:10px 0 12px}
.t2-card .r{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--h1);font:400 13.5px/1 Satoshi;color:var(--c3)}
.t2-card .r b{font:500 14px/1 JBM;color:var(--c1)}
.t2-card .r.hl b{color:var(--pink)}

/* 3 two moons */
.t3{--hd:.2s}
.t3-top{position:absolute;left:0;right:0;top:112px;text-align:center}
.t3-top .hz-h1{font-size:56px}
.t3-stage{position:absolute;left:50%;top:330px;transform:translateX(-50%);width:1080px;display:flex;flex-direction:column;align-items:center}
.t3-q{animation:hzf 1s .9s both;font-size:16px}
.t3-row{display:grid;grid-template-columns:250px 1fr 250px;gap:40px;align-items:start;width:100%;margin-top:30px}
.t3 figure{margin:0;display:flex;flex-direction:column;align-items:center;animation:hzf 1.2s .6s both}
.t3 figcaption{margin-top:16px;text-align:center}
.t3 figcaption span{display:block;font:400 13px/1 Satoshi;color:var(--c4)}
.t3 figcaption b{display:block;margin-top:8px;font:500 30px/1 Satoshi;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.t3 figure.you figcaption b{color:var(--pink)}
.t3-mid{padding-top:86px;text-align:center;animation:hzi 1s 1.1s both}
.t3-mid .gap{height:2px;margin:0 auto 26px;width:100%;background:var(--h1);position:relative;display:flex;justify-content:center}
.t3-mid .gap i{display:block;height:100%;background:var(--pink);transition:width .15s}
.t3-mid b{display:block;font:500 24px/1.2 Satoshi;letter-spacing:-.025em}
.t3-mid p{font:400 15px/1.5 Satoshi;color:var(--c3);margin-top:10px}
.t3 input[type=range]{-webkit-appearance:none;appearance:none;width:220px;height:4px;margin-top:18px;border-radius:4px;background:linear-gradient(90deg,var(--pink) var(--v),var(--h2) var(--v));cursor:pointer}
.t3 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--cream);box-shadow:0 2px 10px #000}
.t3-bot{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:620px;display:flex;flex-direction:column;align-items:center}
.t3-bot .cp{width:100%}

/* 4 tape */
.t4{--hd:.2s}
.t4-hd{position:absolute;left:80px;right:80px;top:150px;display:flex;justify-content:space-between;align-items:flex-end;gap:60px}
.hz-h1.big{font-size:104px;line-height:.95;letter-spacing:-.055em}
.hz-h1.big>span:nth-child(2) i{color:var(--c4)}
.t4-side{width:520px;flex:none;padding-bottom:10px}
.t4-side .hz-sub{margin:0 0 22px}
.t4-tape{position:absolute;left:0;right:0;bottom:44px}
.t4-tape .lbl{display:flex;justify-content:space-between;margin:0 80px;padding-bottom:16px;border-bottom:1px solid var(--h1);font:400 13px/1 Satoshi;color:var(--c4)}
.t4-tape .lbl i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);margin-right:9px;vertical-align:1px;animation:t4p 2s infinite}
@keyframes t4p{50%{opacity:.25}}
.t4-tape .vp{overflow:hidden;padding-top:34px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.t4-tape .run{display:flex;gap:56px;width:max-content;animation:t4r 70s linear infinite;animation-play-state:var(--ps,running)}
.t4-tape .run:hover{animation-play-state:paused}
@keyframes t4r{to{transform:translateX(-50%)}}
.ti{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:16px;align-items:center}
.ti .mx{grid-row:1/3}
.ti>div{display:flex;align-items:baseline;gap:9px;align-self:end}
.ti b{font:500 26px/1 Satoshi;letter-spacing:-.03em}
.ti em{font:500 11.5px/1 JBM;font-style:normal;color:var(--pink)}.ti em.dn{color:#E5533D}
.ti span{align-self:start;margin-top:6px;font:400 14px/1.2 Satoshi;color:var(--c3);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hz *{animation:none!important;transition:none!important}}
/* fixes */
.t1-c{top:420px}
.t1-m:nth-child(3),.t1-m:nth-child(5){margin-top:6px}
.t3-q{align-self:center}
.hz-h1.big{font-size:84px;white-space:nowrap}
.t4-side{width:440px}
.t2-cal .gr{grid-template-rows:repeat(5,108px)}

/* 5 wall */
.t5{--hd:.3s}
.w5{position:absolute;left:-40px;top:0;bottom:0;width:820px;display:flex;gap:16px;justify-content:center;perspective:1400px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent),linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent);animation:hzi 1.4s both}
.w5col{overflow:visible;transform-style:preserve-3d}
.w5col.k0{width:210px;transform:rotateY(26deg) translateZ(-90px)}
.w5col.k1{width:260px;transform:rotateY(14deg) translateZ(-20px)}
.w5col.k2{width:220px;transform:rotateY(4deg) translateZ(30px)}
.w5col .run{display:flex;flex-direction:column;gap:16px;animation:w5r linear infinite}
@keyframes w5r{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 8px))}}
.w5c{border-radius:16px;padding:16px;background:#101317;box-shadow:inset 0 0 0 1px var(--h2),0 30px 60px -30px #000}
.w5c .tp{display:flex;justify-content:space-between;font:500 10px/1 JBM;letter-spacing:.06em;text-transform:uppercase;color:var(--c4)}
.w5c .md{display:flex;align-items:center;justify-content:space-between;margin:16px 0 14px}
.w5c .md b{font:500 34px/1 Satoshi;letter-spacing:-.04em}.w5c .md b small{font-size:.5em;color:var(--c4);margin-left:2px}
.w5c.big .md b{font-size:44px}
.w5c p{font:500 14.5px/1.35 Satoshi;letter-spacing:-.01em;color:var(--c1);min-height:40px}
.w5c.big p{font-size:16px}
.w5c .bt{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.w5c .bt a{font:500 12.5px/1 Satoshi;text-align:center;padding:10px 0;border-radius:9px;background:var(--h1);color:var(--c2)}
.w5c .bt a:first-child{background:rgb(169 212 245/.12);color:var(--pink)}
.t5-r{position:absolute;left:830px;top:230px;width:540px}
.t5-r .hz-h1{font-size:60px}
.t5-tg{display:inline-flex;margin-top:34px;padding:4px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--h2);animation:hzf 1s 1s both}
.t5-tg a{font:500 14px/1 Satoshi;color:var(--c3);padding:11px 16px;border-radius:9px;cursor:pointer;transition:.25s}
.t5-tg a.on{background:var(--cream);color:#0B0D10}
.t5-hint{font:400 13.5px/1 Satoshi;color:var(--c4);margin:20px 0 10px;animation:hzf 1s 1.1s both}
.t5-r.sw .cp{animation:hzf .35s cubic-bezier(.16,1,.3,1) .06s both}
.w5{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 80%,transparent)}
.w5col.k0{opacity:.55}.w5col.k1{opacity:.8}
.t1-c{top:452px}
.t4-hd{top:215px}
.ti .mx{width:132px;height:132px}
.w5{-webkit-mask-image:none;mask-image:none}
.t5::before,.t5::after{content:"";position:absolute;left:0;width:860px;z-index:5;pointer-events:none}
.t5::before{top:0;height:230px;background:linear-gradient(180deg,var(--deep) 30%,rgb(7 8 10/0))}
.t5::after{bottom:0;height:200px;background:linear-gradient(0deg,var(--deep) 10%,rgb(7 8 10/0))}
.t4-hd{align-items:flex-end}

/* ================= consumer wall cards (LHS) ================= */
.w5c{border-radius:22px;padding:18px 18px 16px;background:#14171C;box-shadow:inset 0 0 0 1px rgb(255 255 255/.06),0 30px 60px -30px #000}
.w5c .tp{font:500 12.5px/1 Satoshi;letter-spacing:0;text-transform:none;color:var(--c4);align-items:center}
.w5c .tp .ct{color:var(--c2);padding:6px 10px;border-radius:99px;background:rgb(255 255 255/.06)}
.w5c p{margin:14px 0 4px;font:500 16px/1.32 Satoshi;min-height:42px}
.w5c.big p{font-size:17.5px}
.w5c .md{margin:12px 0 14px;justify-content:flex-start;gap:14px}
.w5c .md b{font-size:30px}.w5c.big .md b{font-size:36px}
.w5c .md b small{font:400 13px/1 Satoshi;letter-spacing:0;color:var(--c3);margin-left:6px}
.w5c .bt{gap:8px;margin-top:0}
.w5c .bt a{display:flex;justify-content:center;gap:6px;font:500 14px/1 Satoshi;padding:12px 0;border-radius:99px;background:rgb(255 255 255/.06);color:var(--c1)}
.w5c .bt a i{font-style:normal;opacity:.6}
.w5c .bt a:first-child{background:var(--pink);color:#0B0D10}
.w5c .bt a:first-child i{opacity:.65}

/* hero 5 mobile */
@media (max-width:640px){
  .hz.t5{height:auto;padding:96px 0 40px;display:flex;flex-direction:column}
  .hz-nv{left:18px;right:18px;top:16px}
  .hz-nv>div{gap:14px}.hz-nv>div a:not(.btn){display:none}
  .t5::before,.t5::after{display:none}
  .t5-r{position:relative;left:auto;top:auto;width:auto;padding:0 20px;order:1}
  .t5-r .hz-h1{font-size:42px}
  .t5-r .hz-sub{font-size:16px}.t5-r .hz-sub br{display:none}
  .t5-r .cp p{font-size:11.5px}
  .t5 .hz-lg span{display:none}
  .w5{position:relative;order:2;left:auto;top:auto;bottom:auto;width:auto;height:auto;margin-top:36px;display:block;perspective:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .w5col.k0,.w5col.k2{display:none}
  .w5col.k1{width:auto;transform:none;opacity:1}
  .w5col .run{flex-direction:row;width:max-content;animation-name:w5x!important;animation-duration:40s!important;animation-direction:normal!important}
  .w5col .run .w5c{width:250px}
}
@keyframes w5x{to{transform:translateX(calc(-50% - 8px))}}
/* ===== batch 1: nav, live wall, colored logos ===== */
.hz-nv>div{gap:10px}
.hz-nv a.btn{height:44px;padding:0 20px;border-radius:12px;font:500 15px/1 Satoshi}
.hz-nv a.btn.line{color:var(--c1);background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px var(--h3)}
.hz-nv a.btn.line:hover{background:rgb(255 255 255/.08)}
@media (min-width:641px){.w5col .run.js{animation:none!important;will-change:transform}}
.w5c{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s;cursor:pointer;position:relative}
.w5c:hover{transform:scale(1.06);z-index:3;box-shadow:inset 0 0 0 1px rgb(169 212 245/.35),0 40px 80px -30px #000}
.w5col:hover{opacity:1!important}
.hz-lg.c{gap:16px}
.hz-lg.c img{filter:none;opacity:1;width:20px;height:20px}
.t5-r .hz-sub{max-width:500px}
@media (max-width:640px){.hz-nv a.btn{height:38px;padding:0 14px;font-size:14px}.hz-nv>div a.btn{display:inline-flex!important}}
/* ===== lp polish 2026-10-31 ===== */
/* the reveal mask clipped descenders (the g in "trading"): give the line room below, take it back with margin */
.hz-h1>span{padding-bottom:.22em;margin-bottom:-.15em}
/* the two hero captions read too dim on night: one step up, still under the headline and sub */
.t5-hint,.hz-lg span{color:rgb(236 237 231/.56)}