/* ══ THE HERO (v2) — Buildercult's home sliver. Drawn on a fixed canvas (1600×500 wide, 720×820 on a
   phone) that hero.js scales to the sliver's width, so every beat is laid out once and stays crisp.
   Everything that moves is moved by transform/opacity from the master timeline in hero.js. ══ */
.hero{max-width:var(--max);margin:0 auto;padding:22px 28px 6px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hs{
  --hs-bg:#0b0b0e; --hs-ink:#f3efe6; --hs-mut:rgba(243,239,230,.56); --hs-card:#17171c; --hs-card2:#1f1f26;
  --hs-line:rgba(243,239,230,.14); --hs-glow:rgba(255,215,49,.22); --hs-fill:var(--sun,#ffd731);
  --rl-ink:var(--hs-ink); --rl-mut:var(--hs-mut); --rl-fill:var(--hs-fill); --rl-track:rgba(243,239,230,.16); --spark:#ffd731;
  --rl-bg:rgba(20,20,26,.72); --rl-seg:rgba(255,215,49,.16); --rl-on:#0b0b0e;
  --mk:'Permanent Marker','Marker Felt',cursive;
  position:relative;width:100%;aspect-ratio:1600/500;border-radius:30px;overflow:hidden;isolation:isolate;
  background:var(--hs-bg);color:var(--hs-ink);
  box-shadow:0 0 0 1px var(--hs-line),0 30px 80px -40px var(--hs-glow),0 0 140px -60px rgba(92,74,222,.55);
  -webkit-user-select:none;user-select:none;contain:layout paint}
[data-theme="light"] .hs{
  --hs-bg:#f6f2ea; --hs-ink:#0b0b0e; --hs-mut:rgba(11,11,14,.55); --hs-card:#ffffff; --hs-card2:#f1ece2;
  --hs-line:rgba(11,11,14,.12); --hs-glow:rgba(92,74,222,.28); --hs-fill:#5c4ade; --rl-track:rgba(11,11,14,.14); --spark:#5c4ade;
  --rl-bg:rgba(255,255,255,.78); --rl-seg:rgba(92,74,222,.14); --rl-on:#fff;
  box-shadow:0 0 0 1px rgba(11,11,14,.1),0 30px 70px -38px rgba(92,74,222,.45),0 10px 30px -18px rgba(11,11,14,.25)}
.hs[data-field="night"]{--rl-ink:#f3efe6;--rl-mut:rgba(243,239,230,.5);--rl-fill:#ffd731;--rl-track:rgba(243,239,230,.16);--spark:#ffd731;--rl-bg:rgba(20,20,30,.78);--rl-seg:rgba(255,215,49,.16);--rl-on:#0b0b0e}
.hs[data-field="sun"]{--rl-ink:#0b0b0e;--rl-mut:rgba(11,11,14,.55);--rl-fill:#0b0b0e;--rl-track:rgba(11,11,14,.2);--spark:#0b0b0e;--rl-bg:rgba(255,255,255,.4);--rl-seg:rgba(11,11,14,.12);--rl-on:#ffd731}
.hs[data-field="violet"]{--rl-ink:#fff;--rl-mut:rgba(255,255,255,.62);--rl-fill:#ffd731;--rl-track:rgba(255,255,255,.24);--spark:#ffd731;--rl-bg:rgba(30,20,90,.6);--rl-seg:rgba(255,215,49,.2);--rl-on:#0b0b0e}
@media (max-width:740px){.hero{padding:14px 16px 4px}.hs{aspect-ratio:720/820;border-radius:24px}}

.hs-cv{position:absolute;left:0;top:0;width:1600px;height:500px;transform-origin:0 0}
.hs:not(.is-ready) .hs-cv{visibility:hidden}
.hs-art{position:absolute;inset:0;perspective:1300px;perspective-origin:50% 40%;pointer-events:none}
/* film grain + a soft vignette over every beat: static, painted once */
.hs::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.5;mix-blend-mode:overlay;
  background:radial-gradient(120% 140% at 50% 45%,transparent 55%,rgba(0,0,0,.35)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hs .ab{position:absolute;translate:-50% -50%}
.hs img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.mk{font-family:var(--mk);font-weight:400}

/* fields: the colour beats */
.field{pointer-events:none}
.f-sq{width:220px;height:220px;border-radius:32%}
.f-sq.night{background:#5c4ade}
.f-sq.night+.f-sq.night{background:#26215e}
.f-sq.night+.f-sq.night+.f-sq.night{background:#0d0e16}
.f-ci{width:200px;height:200px;border-radius:50%}
.f-ci.hsun{background:#ffd731}
.f-ci.hviolet{background:#5c4ade}
.f-ci.bg{background:var(--hs-bg)}
.ngrid{position:absolute;inset:0;background-image:radial-gradient(rgba(243,239,230,.09) 1.2px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 90% at 50% 50%,#000 40%,transparent);mask-image:radial-gradient(70% 90% at 50% 50%,#000 40%,transparent)}

/* ACT 1 · research */
.rhead{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px 0 16px;border-radius:999px;background:var(--hs-card);border:1px solid var(--hs-line);
  font:600 17px/1 'Inter',ui-sans-serif,sans-serif;color:var(--hs-mut);white-space:nowrap;box-shadow:0 12px 30px -16px rgba(0,0,0,.5)}
.rhead b{color:var(--hs-ink);font-variant-numeric:tabular-nums}
.rhead .lens{width:15px;height:15px;border:2.5px solid currentColor;border-radius:50%;position:relative;flex:none;margin-right:2px}
.rhead .lens::after{content:'';position:absolute;width:2.5px;height:7px;background:currentColor;right:-4px;bottom:-6px;rotate:-45deg}
.rch{padding:6px 11px;border-radius:999px;background:var(--hs-card2);color:var(--hs-ink);font-size:14px;font-weight:700}
.rch:first-of-type{background:#ffd731;color:#0b0b0e}
.arows{position:absolute;inset:0}
.arow{position:absolute;left:0;width:100%;height:54px}
.atw{position:absolute;top:0;width:236px;height:54px}
.atile{display:flex;align-items:center;gap:10px;width:100%;height:100%;padding:0 10px 0 8px;border-radius:15px;background:var(--hs-card);border:1px solid var(--hs-line);font-family:'Inter',sans-serif;overflow:hidden}
.atile .aic{flex:none;width:38px;height:38px;border-radius:10px;background-image:url(/hero/apps-sprite.webp?v=2);background-size:800% 800%;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.atile div{min-width:0}
.atile b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atile span{display:block;font:500 12px/1.3 'JetBrains Mono',ui-monospace,monospace;color:var(--hs-mut);white-space:nowrap}
.atile em{font-style:normal;color:#2fbf7a;font-weight:600}
.atile .st{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px;background:#ffb020;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.hs[data-m="m"] .atw,.hs[data-m="m"] .atile{width:228px}
.rh2{color:var(--hs-ink);font-weight:700}
.rh2:empty{display:none}
.atw.issel{z-index:3}
.sring{position:absolute;inset:-4px;border-radius:18px;border:2.5px solid #ffd731;box-shadow:0 0 0 4px rgba(255,215,49,.18),0 0 34px -2px rgba(255,215,49,.55);pointer-events:none}
.schk{position:absolute;right:-8px;top:-9px;width:22px;height:22px;border-radius:50%;background:#ffd731;color:#0b0b0e;font:800 12px/22px 'Inter',sans-serif;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.35)}
[data-theme="light"] .sring{border-color:#5c4ade;box-shadow:0 0 0 4px rgba(92,74,222,.14),0 0 30px -4px rgba(92,74,222,.45)}
[data-theme="light"] .schk{background:#5c4ade;color:#fff}
.flow-e{position:absolute;inset:0}
.fedge{position:absolute;height:2px;margin-top:-1px;border-radius:2px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,215,49,.35),#ffd731)}
[data-theme="light"] .fedge{background:linear-gradient(90deg,rgba(92,74,222,.3),#5c4ade)}
.epulse{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px #ffd731}
.elab{padding:4px 9px;border-radius:8px;background:#0b0b0e;color:#ffd731;border:1px solid rgba(255,215,49,.45);font:700 12.5px/1 'JetBrains Mono',ui-monospace,monospace;white-space:nowrap;z-index:4}
[data-theme="light"] .elab{background:#fff;color:#5c4ade;border-color:rgba(92,74,222,.4);box-shadow:0 4px 10px -4px rgba(0,0,0,.2)}
.hs[data-m="m"] .elab{font-size:13px;padding:4px 7px}
.fnode{width:224px;padding:11px 14px;border-radius:16px;background:var(--hs-card);border:1px solid var(--hs-line);box-shadow:0 16px 30px -18px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,215,49,.12);font-family:'Inter',sans-serif;z-index:3}
.fnode b{display:block;font:800 15.5px/1.15 'Inter Tight','Inter',sans-serif;letter-spacing:-.01em}
.fnode span{display:block;margin-top:4px;font:600 12.5px/1.25 'JetBrains Mono',ui-monospace,monospace;color:#2fbf7a}
.hs[data-m="m"] .fnode{width:208px;padding:12px 12px}
.hs[data-m="m"] .fnode b{font-size:17px}
.hs[data-m="m"] .fnode span{font-size:13.5px}
.gsel{width:254px;height:70px;transform-origin:0 50%}
.gsel::before{content:'';position:absolute;inset:0;border:3px solid #4da2ff;border-radius:10px;background:rgba(77,162,255,.18)}
.gfill{position:absolute;inset:0;border-radius:10px;background:#ffd731;transform-origin:0 50%;box-shadow:0 0 60px 8px rgba(255,215,49,.45)}
.gsel .mk{position:absolute;left:0;right:0;top:50%;translate:0 -50%;text-align:center;font-size:52px;line-height:1;color:#0b0b0e}
.hd{position:absolute;width:15px;height:15px;border-radius:50%;background:#4da2ff;border:3px solid #fff;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.hd.ha{left:-9px;top:-8px}.hd.b{right:-9px;bottom:-8px}
.hd::after{content:'';position:absolute;left:50%;width:3px;height:26px;background:#4da2ff;translate:-50% 0}
.hd.ha::after{top:100%}.hd.b::after{bottom:100%}
.gnote{padding:9px 16px;border-radius:999px;background:var(--hs-card);border:1px solid var(--hs-line);font:600 16px/1.2 'Inter',sans-serif;color:var(--hs-ink);white-space:nowrap;min-width:20px;min-height:36px;box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.hs[data-m="m"] .gnote{white-space:normal;width:600px;text-align:center;font-size:20px;border-radius:22px}
.sug{width:690px;padding:22px 26px 24px;border-radius:30px;background:var(--hs-card);border:1px solid var(--hs-line);font-family:'Inter',sans-serif;
  box-shadow:0 0 0 1px rgba(255,215,49,.3),0 40px 80px -30px rgba(0,0,0,.6),0 0 90px -24px rgba(255,215,49,.4)}
.sg-l{font:700 13px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#d9a800}
[data-theme="light"] .sg-l{color:#5c4ade}
.sg-h{display:flex;gap:16px;align-items:center;margin-top:14px}
.sg-h img{width:76px;height:76px;border-radius:22px;flex:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.sg-h b{display:block;font:800 40px/1 'Inter Tight','Inter',sans-serif;letter-spacing:-.04em}
.sg-h span{display:block;margin-top:6px;font-size:16px;line-height:1.35;color:var(--hs-mut)}
.sg-s{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.sg-s div{padding:12px 12px 11px;border-radius:16px;background:var(--hs-card2)}
.sg-s b{display:block;font:800 30px/1 'Inter Tight','Inter',sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sg-s div:nth-child(3) b{color:#2fbf7a}
.sg-s span{display:block;margin-top:5px;font-size:12.5px;line-height:1.25;color:var(--hs-mut)}
.sg-b{position:absolute;right:24px;top:22px;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:#ffd731;color:#0b0b0e;font:800 18px/1 'Inter Tight','Inter',sans-serif;box-shadow:0 12px 26px -10px rgba(255,215,49,.8)}
.sg-b .ar{width:20px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hs[data-m="m"] .sug{width:660px;padding:26px 26px 92px}
.hs[data-m="d"] .sug{width:444px;padding:20px 22px 22px}
.hs[data-m="d"] .sg-h b{font-size:34px}
.hs[data-m="d"] .sg-h span{font-size:14.5px}
.hs[data-m="d"] .sg-h img{width:64px;height:64px;border-radius:18px}
.hs[data-m="d"] .sg-s{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.hs[data-m="d"] .sg-s b{font-size:26px}
.hs[data-m="d"] .sg-b{top:auto;bottom:22px;right:22px}
.hs[data-m="d"] .sg-s{margin-right:0}
.hs[data-m="d"] .sug{padding-bottom:78px}
.hs[data-m="m"] .sg-s{grid-template-columns:1fr 1fr}
.hs[data-m="m"] .sg-b{top:auto;bottom:22px;right:50%;translate:50% 0;font-size:24px;padding:16px 30px}
.obj3{width:120px;height:120px}
.obj3 img{object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28))}
.obj3.hsm{width:96px;height:96px}
.cursor{width:78px;height:78px;translate:-14% -10%}
.cursor img{object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}

/* ACT 2 · build — the crew, the code, the phone */
.cw{width:0;height:0;color:#f3efe6}
.cw .orb{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#141418;border:1px solid color-mix(in srgb,var(--c) 35%,#2a2a31);color:color-mix(in srgb,var(--c) 75%,#8d8a82)}
.cw .orb svg{width:21px;height:21px;position:relative;z-index:2}
.cw .ofill{position:absolute;inset:0;border-radius:50%;background:var(--c);box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 18%,transparent),0 0 40px 8px color-mix(in srgb,var(--c) 55%,transparent);z-index:1}
.cw.is-on .orb{color:#111}
.cw .halo{position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 50%,transparent),transparent)}
.cw .ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid transparent;border-top-color:var(--c);border-right-color:color-mix(in srgb,var(--c) 40%,transparent)}
.cw .tick{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:var(--c);color:#111;font:800 11px/18px 'Inter',sans-serif;text-align:center;z-index:3}
.cw .cnm{position:absolute;left:0;top:32px;translate:-50% 0;font:600 13px/1 'Inter',sans-serif;color:#a8a49b;white-space:nowrap}
.cw.is-on .cnm{color:var(--c)}
.wire{position:absolute;height:2px;margin-top:-1px;border-radius:2px;transform-origin:0 50%;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent))}
.wdot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--c),0 0 18px 5px color-mix(in srgb,var(--c) 50%,transparent);opacity:0}
.code{width:420px;height:342px;border-radius:20px;background:#0a0a0e;border:1px solid #23232b;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,215,49,.06);overflow:hidden;font:500 13.5px/19.5px 'JetBrains Mono',ui-monospace,monospace;color:#cfcac0}
.c-top{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid #1d1d24;color:#7c786f;font-size:12.5px}
.c-top i{width:10px;height:10px;border-radius:50%;background:#2a2a31}
.c-top span{margin-left:8px;flex:1;white-space:nowrap}
.c-top em{font-style:normal;color:#ffd731}
.c-body{position:relative;height:calc(100% - 38px);overflow:hidden;padding:8px 0}
.cl{position:relative;display:flex;white-space:pre;height:19.5px}
.cl .lnum{width:38px;flex:none;text-align:right;padding-right:14px;color:#3d3b37}
.cl .ctx{white-space:pre}
.cl .cov{position:absolute;left:38px;right:0;top:0;bottom:0;background:#0a0a0e;transform-origin:100% 50%}
.k-k{font-style:normal;color:#c792ea}.k-s{font-style:normal;color:#9ce17d}.k-t{font-style:normal;color:#ff7ac6}.k-n{font-style:normal;color:#ffb86b}
.hs[data-m="m"] .code{width:660px;height:150px;font-size:15px}
.bstat{display:flex;align-items:center;justify-content:center;width:330px;height:62px;border-radius:999px;overflow:hidden;background:#1a1a22;border:1px solid #2c2c36;color:#f3efe6;font:800 24px/1 'Inter Tight','Inter',sans-serif;letter-spacing:-.02em}
.bstat .bfill{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(90deg,#c6ff3d,#ffd731 60%,#7df0c0)}
.bstat .roll3{position:relative;z-index:1;color:#0b0b0e}
.bstat b{font-variant-numeric:tabular-nums}
.okdot{width:14px;height:14px;border-radius:50%;background:#14a35a;box-shadow:0 0 0 5px rgba(20,163,90,.25)}
.hs[data-m="m"] .bstat{width:400px;height:58px}
.blog{display:grid;gap:7px;width:380px;font:500 14px/1.25 'Inter',sans-serif;color:#a8a49b}
.hs .ab.blog{translate:0 0}
.blog div{display:flex;align-items:center;gap:8px;white-space:nowrap}
.blog i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.blog b{color:#f3efe6;font-weight:700}
.blog div.is-on b{color:var(--c)}
.roll3{position:relative;display:inline-grid;overflow:hidden;vertical-align:middle}
.roll3>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.phw{width:196px;height:404px;scale:var(--ps,1)}
.phone{position:absolute;inset:0;border-radius:44px;background:#0b0b0e;padding:8px;box-shadow:0 0 0 2px #2a2a31 inset,0 40px 60px -30px rgba(0,0,0,.55),0 10px 24px -10px rgba(0,0,0,.4),0 0 60px -10px rgba(255,215,49,.25)}
.scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#141633}
.canvas{position:absolute;inset:0;background:#f4f1ea;background-image:radial-gradient(rgba(11,11,14,.12) 1px,transparent 1.4px);background-size:12px 12px}
.wf{position:absolute;border-radius:6px;background:#d9d4ff;transform-origin:0 50%}
.slice{position:absolute;left:0;right:0;height:25.2%;background-image:url(/hero/m-onboard.webp?v=2);background-size:100% 400%;background-repeat:no-repeat}
.sc{position:absolute;inset:0}
.isl{position:absolute;left:50%;top:9px;width:64px;height:19px;border-radius:12px;background:#000;translate:-50% 0;z-index:5}
.scan{position:absolute;left:0;right:0;top:0;height:70px;z-index:4}
.scan.teal{background:linear-gradient(180deg,transparent,rgba(79,209,197,.15) 70%,rgba(79,209,197,.85) 98%,transparent)}
.scan.vio{background:linear-gradient(180deg,transparent,rgba(177,140,255,.15) 70%,rgba(177,140,255,.85) 98%,transparent)}
.glowr{position:absolute;inset:0;border-radius:36px;box-shadow:inset 0 0 0 3px #3fd68a,inset 0 0 40px rgba(63,214,138,.5);z-index:6}
.tap{position:absolute;left:50%;top:87%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,215,49,.6);z-index:6}
.toast{position:absolute;left:10px;right:10px;top:34px;z-index:7;padding:9px 10px;border-radius:14px;background:#fff;color:#0b0b0e;font:600 11px/1.2 'Inter',sans-serif;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.mchip{padding:7px 12px;border-radius:999px;background:#1b1b22;border:1px solid #33333e;color:#f3efe6;font:600 14px/1 'JetBrains Mono',ui-monospace,monospace;white-space:nowrap;box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.mchip::before{content:'◆ ';color:#6be3a4}
.luna{width:250px;height:250px}
.luna img{object-fit:contain;filter:drop-shadow(0 0 30px rgba(255,226,140,.45))}

/* ACT 3 · ship, on the sun field */
.note{display:flex;align-items:center;gap:12px;width:420px;padding:12px 16px 12px 12px;border-radius:20px;background:rgba(255,255,255,.96);color:#0b0b0e;font-family:'Inter',sans-serif;box-shadow:0 20px 40px -20px rgba(0,0,0,.45)}
.note .nic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(160deg,#4da2ff,#5c4ade);color:#fff}
.note .nic svg{width:22px;height:22px}
.note div{flex:1;min-width:0}
.note b{display:block;font-size:16px}
.note span{font-size:14px;color:#55555e}
.note em{font-style:normal;font-size:12px;color:#8a8a92;align-self:flex-start}
.hs[data-m="m"] .note{width:640px}
.astore{width:420px;padding:14px 16px 16px;border-radius:24px;background:#fff;color:#0b0b0e;font-family:'Inter',sans-serif;box-shadow:0 26px 50px -24px rgba(0,0,0,.45)}
.as-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#55555e;margin-bottom:12px}
.as-top b{font-size:15px;color:#0b0b0e}
.as-ok{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#e7f8ee;color:#12804a;font-weight:700}
.as-ok i{width:7px;height:7px;border-radius:50%;background:#14a35a}
.as-row{display:flex;align-items:center;gap:14px}
.as-row img{width:64px;height:64px;border-radius:16px;flex:none}
.as-row div{flex:1}
.as-row b{display:block;font-size:22px;letter-spacing:-.02em}
.as-row span{font-size:13.5px;color:#66666e}
.as-row .get{flex:none;padding:9px 20px;border-radius:999px;background:#0b0b0e;color:#fff;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.hs[data-m="m"] .astore{width:640px}
.sub{padding:9px 14px;border-radius:999px;background:#0b0b0e;color:#fff;font:600 14px/1 'Inter',sans-serif;white-space:nowrap;box-shadow:0 14px 26px -12px rgba(0,0,0,.5)}
.sub b{color:#c6ff3d}
.itslive{font-size:84px;line-height:1;color:#0b0b0e;white-space:nowrap}
.hs .ab.itslive{translate:0 -50%}
.hs[data-m="m"] .ab.itslive{translate:-50% -50%;font-size:72px}
.rev{font-family:'Inter',sans-serif;color:#0b0b0e;text-align:left}
.hs .ab.rev{translate:0 0}
.rev .rl1{font:700 15px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.rev .rl1 span{padding:4px 8px;border-radius:6px;border:1px solid rgba(11,11,14,.35);font-size:11px;letter-spacing:.06em;color:rgba(11,11,14,.6)}
.rev .rn{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.rev .rn b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:150px;line-height:.95;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rev .rn span{font:800 36px/1 'Inter Tight','Inter',sans-serif;letter-spacing:-.03em}
.hs[data-m="m"] .ab.rev{translate:-50% 0;text-align:center}
.hs[data-m="m"] .rev .rl1,.hs[data-m="m"] .rev .rn{justify-content:center}
.hs[data-m="m"] .rev .rn b{font-size:108px}
.bars{display:flex;align-items:flex-end;gap:9px;height:62px}
.hs .ab.bars{translate:0 -100%}
.bars i{width:24px;border-radius:7px 7px 3px 3px;background:#0b0b0e;transform-origin:50% 100%}
.bars i:nth-last-child(-n+3){background:#14a35a}

/* ACT 4 · distribute */
.gtitle{font:800 46px/1 'Inter Tight','Inter',sans-serif;letter-spacing:-.04em;color:#fff}
.hs .ab.gtitle{translate:0 -50%}
.genbtn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;background:#ffd731;color:#0b0b0e;font:800 21px/1 'Inter Tight','Inter',sans-serif;white-space:nowrap;box-shadow:0 16px 30px -12px rgba(0,0,0,.45)}
.genbtn i{font-style:normal}
.genbtn .roll3>span{justify-content:flex-start}
.gt{width:164px;height:290px;border-radius:20px;overflow:hidden;background:#2b2470;box-shadow:0 26px 44px -22px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
.hs[data-m="m"] .gt{width:206px;height:290px}
.shim{position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.gm{position:absolute;inset:0;background:#000}
.gm .gpost,.gm video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.gm .gpost.fit,.gm video.fit{object-fit:contain}
.gm video{opacity:0;transition:opacity .25s}
.gm video.ok{opacity:1}
.hcar{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;background:#141418}
.car-in{display:flex;width:100%}
.car-in img{flex:none;width:100%;height:auto;aspect-ratio:4/5}
.cdots{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:flex;gap:5px}
.cdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6)}
.glab{position:absolute;left:10px;top:10px;padding:6px 10px;border-radius:999px;background:rgba(11,11,14,.72);color:#fff;font:700 13px/1 'Inter',sans-serif;white-space:nowrap;z-index:2}
.gpr{position:absolute;left:12px;right:12px;bottom:14px;height:6px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden;z-index:2}
.gpr i{position:absolute;inset:0;background:#ffd731;transform-origin:0 50%}
.gpc{position:absolute;left:0;right:0;top:50%;translate:0 -50%;text-align:center;color:#fff;font:800 34px/1 'Inter Tight','Inter',sans-serif;font-variant-numeric:tabular-nums;z-index:2}
.gok{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;background:#55db9c;color:#06210f;font:800 14px/26px 'Inter',sans-serif;text-align:center;z-index:2}
.gp{width:1400px;height:1300px}
.gpi{display:flex;gap:18px;justify-content:center}
.hcol{display:flex;flex-direction:column;gap:18px;width:156px}
.cd{position:relative;width:156px;border-radius:16px;overflow:hidden;background:#2a2550;box-shadow:0 24px 40px -22px rgba(0,0,0,.6)}
.cd.v9{height:277px}
.cd.c45{height:195px}
.stat{display:flex;align-items:center;gap:10px;padding:12px 20px 12px 12px;border-radius:999px;background:#fff;color:#0b0b0e;font-family:'Inter',sans-serif;white-space:nowrap;box-shadow:0 18px 36px -16px rgba(0,0,0,.45)}
.stat i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fb4903;color:#fff;font-style:normal;font-size:18px}
.stat b{font-family:'Inter Tight','Inter',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-size:16px;font-weight:600;color:#55555e}
.dim2{position:absolute;inset:0;background:rgba(20,14,70,.55)}
.scrim{position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(to top,rgba(36,26,120,.96) 20%,rgba(36,26,120,0))}
.hs[data-m="m"] .scrim{height:190px}
.cal{border-radius:26px;background:#fff;color:#0b0b0e;font-family:'Inter',sans-serif;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);overflow:hidden}
.cal-h{display:flex;align-items:center;gap:14px;height:62px;padding:0 22px;border-bottom:1px solid #eee}
.cal-h>b{font:800 24px/1 'Inter Tight','Inter',sans-serif;letter-spacing:-.03em;margin-right:auto}
.cal-n{font-size:15px;color:#55555e}
.cal-n b{color:#0b0b0e;font-size:18px;font-variant-numeric:tabular-nums}
.pf{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#3a3a42}
.pf i,.cr-h i,.pt i{width:9px;height:9px;border-radius:50%;background:var(--pc)}
.pf-instagram{--pc:#e1306c}.pf-tiktok{--pc:#11c5c0}.pf-youtube{--pc:#ff2b2b}
.cal-g{display:grid;padding:6px 10px 10px 0}
.cd-h{display:grid;place-items:center;font:700 12px/1 'JetBrains Mono',ui-monospace,monospace;color:#8a8a92;text-transform:uppercase;letter-spacing:.06em}
.cr-h{display:flex;align-items:center;gap:7px;padding-left:16px;font-size:13px;font-weight:700;color:#3a3a42}
.cslot{margin:4px;border-radius:12px;background:#f3f1ec;border:1px dashed #dedad2}
.hs[data-m="m"] .cal-h{gap:10px;padding:0 16px}
.hs[data-m="m"] .cal-h>b{font-size:22px}
.hs[data-m="m"] .cal-h .pf{display:none}
.hs[data-m="m"] .cr-h{flex-direction:column;justify-content:center;padding-left:0;font-size:0;gap:0}
.hs[data-m="m"] .cr-h i{width:14px;height:14px}
.post{display:flex;align-items:center;gap:8px;width:124px;height:66px;padding:5px;border-radius:12px;background:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.35),0 0 0 1px #ece9e2}
.post img{flex:none;width:36px;height:56px;border-radius:7px}
.pt{display:flex;align-items:center;gap:5px;font:700 12px/1 'JetBrains Mono',ui-monospace,monospace;color:#3a3a42}
.hs[data-m="m"] .post{flex-direction:column;width:74px;height:206px;padding:6px;gap:8px}
.hs[data-m="m"] .post img{width:62px;height:150px}

/* ACT 5 · BUILDERCULT, in the logo's marker */
.wm{display:flex;flex-direction:column;align-items:center;font-family:var(--mk);font-weight:400;line-height:1.02;color:var(--hs-ink);white-space:nowrap;text-transform:uppercase;letter-spacing:.01em}
.wm .wmrow{display:flex;align-items:flex-end}
.wm .ch{display:inline-block;transform-origin:50% 100%}
.wm .cult{position:relative;display:inline-flex;margin-left:.08em;padding:0 .06em}
.wm .cbox{position:absolute;inset:.1em -.02em .04em;background:#ffd731;border-radius:.08em;transform-origin:0 50%;rotate:-1.5deg;box-shadow:0 0 80px 0 rgba(255,215,49,.35)}
.wm .cu{position:relative}
.wm.is-on .cu{color:#0b0b0e}
.wm .hd{width:22px;height:22px;border-width:4px}
.wm .hd::after{width:4px;height:.32em}
.htag{white-space:nowrap;font:400 46px/1 var(--mk);color:var(--hs-ink)}
.htag span{display:inline-block}
.htag .ar{width:.9em;height:.6em;vertical-align:.04em;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.hs[data-m="m"] .htag{font-size:44px}
.fan{width:150px;border-radius:18px;overflow:hidden;box-shadow:0 26px 50px -24px rgba(0,0,0,.6),0 0 0 1px var(--hs-line)}
.fan.v9{height:266px}.fan.c45{height:188px}
.hs[data-m="m"] .fan{width:132px}.hs[data-m="m"] .fan.v9{height:234px}.hs[data-m="m"] .fan.c45{height:165px}

/* sparks + the beam each chapter throws into the scene */
.spk{width:10px;height:10px;border-radius:50%;background:var(--spark);box-shadow:0 0 12px 2px var(--spark)}
.beam{width:3px;height:220px;transform-origin:50% 100%;background:linear-gradient(to top,var(--spark),transparent);border-radius:3px}
.hs .ab.beam{translate:-50% -100%}
.hs .ab.cursor{translate:-14% -10%}

/* the chapter rail — one full-width bar split into four labelled segments, joined edge to edge; the active
   segment fills like a progress bar. Real buttons, on the canvas so it scales with the sliver. */
.hs-rail{position:absolute;inset:0;pointer-events:none}
.rbar{display:flex;height:46px;border-radius:12px;overflow:hidden;background:var(--rl-bg);border:1px solid var(--rl-track);box-shadow:0 10px 30px -18px rgba(0,0,0,.5);transform-origin:50% 50%}
.rl{pointer-events:auto;position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;padding:0 10px;border:0;border-right:1px solid var(--rl-track);border-radius:0;color:var(--rl-mut);cursor:pointer;background:transparent;
  font:800 17px/1 'Inter Tight','Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:color .25s}
.rl:last-child{border-right:0}
.rl .rlab{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}
.rl .rf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--rl-fill);color:var(--rl-on);clip-path:inset(0 100% 0 0)}
.rl .rf .rn{opacity:1}
.rl .rn{font:600 13px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;opacity:.75}
.rl.is-on,.rl:hover,.rl.pick{color:var(--rl-ink)}
.rl.is-on{background:var(--rl-seg)}
.rl.is-on .rn{opacity:1}
.rl.is-done{color:var(--rl-ink)}
.rl:focus-visible,.pp:focus-visible{outline:3px solid var(--rl-fill);outline-offset:-3px}
.hs[data-m="m"] .rbar{height:56px;border-radius:14px}
.hs[data-m="m"] .rl{font-size:17px;letter-spacing:.06em;padding:0 4px}
.hs[data-m="m"] .rl .rn{display:none}
.hs[data-m="m"] .rl .rlab{gap:0}
.pp{pointer-events:auto;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--rl-bg)!important;color:var(--rl-mut);border:1px solid var(--rl-track);background:transparent;cursor:pointer}
.pp:hover{color:var(--rl-ink)}
.pp svg{width:16px;height:16px;fill:currentColor}
.pp .hpl,.pp.paused .ps{display:none}.pp.paused .hpl{display:inline}
.hs[data-m="m"] .pp{width:52px;height:52px;border-radius:14px}.hs[data-m="m"] .pp svg{width:20px;height:20px}

/* reduced motion: the final frame, still, and the rail shows all four chapters */
.hs.still .rbar,.hs.still .rl{opacity:1!important;visibility:visible!important;transform:none!important}
.hs.still .rl .rf{clip-path:none!important}
.hs.still .pp{display:none}

/* the way in — outside the animation, big and clear */
.hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:22px 0 8px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;min-width:168px;height:58px;padding:0 30px;border-radius:999px;font:800 17px/1 'Inter',ui-sans-serif,sans-serif;letter-spacing:-.01em;
  border:1.5px solid var(--hair2);color:var(--ink);background:transparent;transition:transform .15s,background .15s,border-color .15s}
.hbtn:hover{border-color:var(--ink);transform:translateY(-1px)}
.hbtn.hfill{background:var(--sun,#ffd731);color:#000;border-color:transparent;box-shadow:0 14px 30px -14px rgba(255,215,49,.7)}
.hbtn.hfill:hover{background:#ffe066}
@media (max-width:740px){.hero-cta{padding:16px 0 4px}.hbtn{flex:1 1 140px;height:54px;min-width:0}}