/* =========================================================
   WEBS BY SPIDER — the five statement sections (v3)
   §1 dark  · monument type + giant banker w/ money gun
   §2 bright· pixel blob that calmly chases the cursor
   §3 dark  · split-flap airport departure board
   §4 bright· museum floaters — dark real objects, zero-G
   §5 dark  · DNA + morphing glass tetromino + read-flow
   stats    · dark · count-ups + rising jellyfish
   ========================================================= */

/* soften the global vignette so bright sections stay clean */
.fx-vignette{box-shadow:inset 0 0 200px 20px rgba(0,0,0,.36)}

/* ---------- nav flips to light over bright sections ---------- */
.nav.light .brand-mark,.nav.light .brand-word{color:#101010}
.nav.light .nav-links a{color:#3c3c3c}
.nav.light .nav-links a:hover{color:#000}
.nav.light .nav-cta{color:#101010;border-color:rgba(0,0,0,.3)}
.nav.light .nav-cta:hover{color:#000;border-color:#000;box-shadow:0 0 0 1px #000,0 10px 40px -16px rgba(0,0,0,.4)}
.nav.light .nav-burger span{background:#101010}
.nav.light.scrolled{background:rgba(246,245,243,.78);border-bottom-color:rgba(0,0,0,.08)}

/* =========================================================
   §1 — SITES THAT MOVE MAKE MONEY MOVE.
   ========================================================= */
.s1-move{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:110px clamp(16px,4vw,48px) 0;
  background:linear-gradient(180deg,#131313 0%,#1c1c1c 34%,#3a3a3a 62%,#8e8c88 100%);
}
.s1-coins{position:absolute;inset:0;z-index:6;pointer-events:none}

/* ============ §1 — HERO · WebGL fluid + knockout type ============ */
.hf-hero{
  position:relative;min-height:100svh;overflow:hidden;background:#08080a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hf-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* static fallback (no WebGL2 / reduced motion): quiet gold glow behind the letters */
.hf-hero.hf-static .hf-canvas{display:none}
.hf-hero.hf-static::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(42% 34% at 50% 44%, rgba(226,182,92,.5), transparent 70%),
    radial-gradient(30% 26% at 36% 60%, rgba(233,207,141,.32), transparent 70%),
    radial-gradient(26% 22% at 66% 36%, rgba(160,116,42,.42), transparent 70%);
}
.hf-knockout{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hf-ui{
  position:relative;z-index:2;pointer-events:none;width:100%;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hf-eyebrow{
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:clamp(.8rem,1.3vw,1.05rem);letter-spacing:.46em;margin-bottom:38vh;
  background:linear-gradient(90deg,#f6e3a8 0%,#e9cf8d 45%,#cda657 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(205,166,87,.3));
}
.hf-money{
  font-family:"Anton",Impact,sans-serif;font-size:clamp(2rem,6.2vw,5rem);
  letter-spacing:.02em;line-height:1;margin-top:29vh;
  background:linear-gradient(180deg,#f6e3a8 0%,#cda657 55%,#95742a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 26px rgba(205,166,87,.3));
}
.hf-ctas{display:flex;gap:14px;margin-top:4.5vh;pointer-events:auto}
.hf-btn{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.2em;
  padding:1em 1.9em;border-radius:100px;text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.hf-btn-solid{background:#f2e7c8;color:#141005}
.hf-btn-solid:hover{transform:translateY(-2px);box-shadow:0 14px 44px -10px rgba(242,231,200,.45)}
.hf-btn-ghost{color:#e8e4da;border:1px solid rgba(232,228,218,.35)}
.hf-btn-ghost:hover{border-color:rgba(232,228,218,.8);transform:translateY(-2px)}
.hf-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.34em;color:rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hf-cue span{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:scrolldot 2.2s var(--ease) infinite}
@media (max-width:640px){
  .hf-eyebrow{font-size:.52rem;letter-spacing:.26em;text-align:center;padding:0 1rem}
  .hf-ctas{flex-direction:column;align-items:center;gap:10px}
}
.s1-stack{position:relative;z-index:3;text-align:center;width:100%}
.s1-title{display:flex;flex-direction:column;align-items:center;line-height:.84;margin:0}
.s1-line{
  font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.01em;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.s1-l1{
  font-size:clamp(4rem,17.5vw,15rem);
  background-image:linear-gradient(180deg,#c9c7c2 0%,#8f8d89 55%,#5c5b58 100%);
}
.s1-l2{
  font-size:clamp(4.4rem,19vw,16.5rem);
  transform:skewX(-9deg);
  margin-top:-.06em;
  background-image:linear-gradient(180deg,#7b7975 0%,#4a4947 60%,#2c2b2a 100%);
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.35));
}
.s1-l3{
  display:inline-flex;align-items:center;gap:.18em;
  font-size:clamp(2.1rem,7.4vw,5.6rem);
  margin-top:.16em;
  background-image:linear-gradient(180deg,#f2f0eb 0%,#c9c7c2 55%,#8f8d89 100%);
  filter:drop-shadow(0 5px 16px rgba(0,0,0,.62)) drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.s1-l3 em{
  font-style:normal;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(180deg,#f3dea1 0%,#cda657 55%,#9a7a2e 100%);
  filter:drop-shadow(0 6px 18px rgba(205,166,87,.35));
}

/* ---------- THE BANKER ---------- */
.s1-banker{
  position:absolute;left:16%;bottom:-1.5%;z-index:1;
  height:min(66vh,600px);aspect-ratio:540/560;
  transform:translateX(-50%);
  transition:transform .5s var(--ease);
  pointer-events:none;
}
.s1-banker.flipped{transform:translateX(-50%) scaleX(-1)}
@media (max-width:760px){.s1-banker{left:50%}}
.s1-banker svg{width:100%;height:100%;overflow:visible}
#bankerRoot{animation:bankerBob 4.6s ease-in-out infinite;transform-origin:210px 320px}
@keyframes bankerBob{
  0%,100%{transform:translateY(0) rotate(-.5deg)}
  50%{transform:translateY(-13px) rotate(.7deg)}
}
#stache{transform-origin:210px 158px;animation:stacheWiggle 5.2s ease-in-out infinite}
@keyframes stacheWiggle{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.6deg)}}
#muzzleFlash{opacity:0;transform-origin:494px 228px}
.s1-banker.bang #muzzleFlash{animation:bankFlash .28s ease-out}
@keyframes bankFlash{0%{opacity:1;transform:scale(.5) rotate(-8deg)}70%{opacity:.95;transform:scale(1.3) rotate(6deg)}100%{opacity:0;transform:scale(1.55)}}
.s1-banker.bang #bankerRoot{animation:bankerRecoil .32s cubic-bezier(.36,.07,.19,.97)}
@keyframes bankerRecoil{
  0%{transform:translate(0,0)}
  35%{transform:translate(-9px,3px) rotate(-1.3deg) scale(1.012,.985)}
  100%{transform:translate(0,0)}
}
/* the gull's wings */
#s1Bird .bw{transform-box:fill-box;animation:birdFlap .24s ease-in-out infinite alternate}
#s1Bird .bwL{transform-origin:100% 80%}
#s1Bird .bwR{transform-origin:0% 80%}
@keyframes birdFlap{from{transform:rotate(16deg)}to{transform:rotate(-24deg)}}
/* jet-wash gust: coat tails flap, mustache goes wild */
.tail{transform-box:fill-box;transform-origin:50% 8%}
.s1-banker.gust .tail{animation:tailFlap .26s ease-in-out 7 alternate}
@keyframes tailFlap{from{transform:rotate(-2deg) skewX(0deg)}to{transform:rotate(10deg) skewX(13deg)}}
.s1-banker.gust #stache{animation:stacheWiggle .45s ease-in-out infinite}
/* comic wind swooshes sweeping across during the gust */
#windLines .wl{opacity:0;fill:none;stroke:rgba(255,255,255,.55);stroke-width:5;stroke-linecap:round}
.s1-banker.gust #windLines .wl{animation:windSweep .85s ease-in 3}
.s1-banker.gust #windLines .w2{animation-delay:.16s;stroke-width:4}
.s1-banker.gust #windLines .w3{animation-delay:.34s;stroke-width:3.4}
@keyframes windSweep{
  0%{opacity:0;transform:translateX(70px)}
  22%{opacity:.9}
  100%{opacity:0;transform:translateX(-440px)}
}

/* money machine — click it, or just get close */
.s1-machine{
  position:absolute;z-index:5;right:clamp(14px,6vw,110px);bottom:-8px;
  width:clamp(140px,14vw,200px);pointer-events:auto;cursor:pointer;
}
.s1-machine svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
.s1-machine .jl{transition:fill .3s}
.s1-machine.active .jl{fill:#ffd95e;filter:drop-shadow(0 0 5px #ffd95e);animation:jlChase .5s steps(2) infinite}
.s1-machine.active .j2{animation-delay:.1s}
.s1-machine.active .j3{animation-delay:.2s}
.s1-machine.active .j4{animation-delay:.3s}
.s1-machine.active .j5{animation-delay:.4s}
@keyframes jlChase{50%{fill:#3a3a3a;filter:none}}
.s1-machine .lever{transform-box:fill-box;transform-origin:60% 94%}
.s1-machine.active .lever{animation:leverPull .8s ease}
@keyframes leverPull{0%{transform:rotate(0)}35%{transform:rotate(36deg)}70%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
.s1-machine.active svg{animation:machineShake .18s linear infinite}
@keyframes machineShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-.8px,.5px)}75%{transform:translate(.8px,-.5px)}}
.s1-machine .m-click{animation:tagBlink 2.4s steps(2) infinite}
.s1-machine.active .m-click{animation:none;opacity:1}
@keyframes tagBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* micro copy */
.s1-micro{
  position:absolute;z-index:5;font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.14em;line-height:1.9;color:rgba(255,255,255,.66);
  text-transform:uppercase;
}
.s1-micro-left{left:clamp(16px,5vw,64px);bottom:22%}
.s1-blurb-wrap{position:absolute;z-index:5;right:clamp(16px,5vw,64px);bottom:clamp(300px,36vh,470px);max-width:300px}
.s1-blurb{
  font-size:.98rem;line-height:1.55;color:#f2f0ec;
  text-shadow:0 2px 12px rgba(0,0,0,.45);margin-bottom:.9rem;
}
.s1-cta{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.22em;
  color:#101010;background:#f2f0ec;padding:.8em 1.4em;border-radius:3px;display:inline-block;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.s1-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
@media (max-width:760px){
  .s1-micro-left{display:none}
  .s1-blurb-wrap{position:relative;right:auto;bottom:auto;margin:26px auto 0;text-align:center;max-width:34ch;z-index:3}
  .s1-banker{height:52vh}
  .s1-machine{right:8px;width:110px}
  .s1-move{padding-top:96px}
}

/* =========================================================
   §2 — BRIGHT · pixel blob, calm chase (Frota)
   ========================================================= */
.s2-pixel{
  position:relative;min-height:100svh;overflow:hidden;
  background:#f4f2ee;color:#141414;
  display:flex;align-items:center;
  padding:100px clamp(20px,5vw,64px);
}
.s2-canvas{position:absolute;inset:0;z-index:1}
.s2-copy{position:relative;z-index:2;max-width:720px;pointer-events:none}
.s2-copy a{pointer-events:auto}
.s2-title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:.96;
  font-size:clamp(2.8rem,7.6vw,6.2rem);margin:0 0 1.4rem;
}
.s2-t1{color:#b9b5ad}
.s2-t2{color:#111}
.s2-blurb{
  font-family:"IBM Plex Mono",monospace;font-size:clamp(.86rem,1.35vw,1.05rem);letter-spacing:.1em;
  line-height:1.9;color:#3c3a36;margin-bottom:2rem;
}
.s2-claim{
  font-family:var(--font-body);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.2vw,1.7rem);color:#111;margin:-0.8rem 0 2rem;
}
.s2-claim em{font-family:var(--font-serif);font-style:italic;font-weight:500}
.s2-btn{
  display:inline-block;background:#111;color:#f4f2ee;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.18em;
  padding:.95em 1.7em;border-radius:4px;transition:transform .3s var(--ease),box-shadow .3s;
}
.s2-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.s2-foot{
  position:absolute;bottom:26px;z-index:2;max-width:230px;
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.1em;
  line-height:1.8;color:#8b8880;pointer-events:none;
}
.s2-foot-l{left:clamp(20px,5vw,64px)}
.s2-foot-r{right:clamp(20px,5vw,64px);text-align:right}
@media (max-width:760px){.s2-foot-r{display:none}}

/* =========================================================
   §3 — DARK · B/W flap-scramble type wall
   ========================================================= */
.s3-flap{
  position:relative;min-height:100svh;overflow:hidden;background:#050505;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:110px clamp(12px,4vw,48px) 80px;text-align:center;gap:clamp(10px,2.2vh,26px);
}
.s3-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.34em;color:rgba(255,255,255,.5);margin-bottom:1rem;
}
.flap-line{display:flex;justify-content:center;white-space:nowrap}
.flap-line .fl{
  display:inline-block;width:.7em;text-align:center;
  font-family:"Anton",Impact,sans-serif;color:#fff;line-height:1.04;
  backface-visibility:hidden;
}
.flap-word .fl{font-size:clamp(3.4rem,10.5vw,8.8rem)}
.flap-phrase .fl{font-size:clamp(1.5rem,4.4vw,3.4rem);color:rgba(255,255,255,.62)}
.flap-line .fl.flip{animation:flFlip .3s ease}
@keyframes flFlip{0%{transform:rotateX(0)}50%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
.s3-sub{margin-top:1.6rem;color:rgba(255,255,255,.55);font-size:.95rem;letter-spacing:.04em}
.s3-cta{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.4rem;
  background:#fff;color:#050505;font-weight:600;font-size:.92rem;
  padding:.85em 1.7em;border-radius:100px;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.s3-cta:hover{box-shadow:0 14px 44px -10px rgba(255,255,255,.4)}
.s3-cta .arr{transition:transform .35s var(--ease)}
.s3-cta:hover .arr{transform:translateX(3px)}

/* =========================================================
   §4 — BRIGHT · the gallery of getting noticed
   ========================================================= */
.s4-museum{
  position:relative;min-height:100svh;overflow:hidden;
  background:radial-gradient(120% 100% at 18% 0%,#ffffff 0%,#f2f1ef 48%,#e7e6e3 100%);
  color:#000;
}
.s4-center-label{
  position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.22em;color:#3c3a36;
}
.s4-obj{position:absolute;z-index:3;will-change:transform}
/* entrance: float up from below when the section goes live */
.s4-rise{opacity:0;transform:translateY(52vh);transition:transform 2.4s cubic-bezier(.16,.84,.3,1),opacity 1.3s ease}
.s4-museum.live .s4-rise{opacity:1;transform:translateY(0)}
.s4-museum.live .s4-o2 .s4-rise{transition-delay:.3s}
.s4-museum.live .s4-o3 .s4-rise{transition-delay:.6s}
.s4-museum.live .s4-o4 .s4-rise{transition-delay:.9s}
/* idle drift driven by JS (smooth Lissajous float) — the label travels WITH its object */
.s4-drift{display:flex;flex-direction:column;align-items:center;gap:18px;will-change:transform}
.s4-obj img{
  display:block;
  filter:contrast(1.04) saturate(.92) drop-shadow(0 30px 34px rgba(0,0,0,.15));
  opacity:.97;
}
.s4-o1 img{width:clamp(190px,21vw,310px)}
.s4-o2 img{width:clamp(150px,16vw,240px)}
.s4-o3 img{width:clamp(160px,17vw,255px)}
.s4-o4 img{width:clamp(86px,8.5vw,132px)}
.s4-tag{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.2em;color:#4c4a45;
  background:rgba(255,255,255,.6);padding:.5em 1em;border:1px solid rgba(0,0,0,.12);border-radius:100px;
  white-space:nowrap;
}
.s4-o1{top:12%;left:8%}
.s4-o2{top:10%;right:10%}
.s4-o3{bottom:42%;left:22%}
.s4-o4{top:46%;right:24%}
.s4-phrase{
  position:absolute;left:clamp(20px,6vw,80px);bottom:clamp(84px,14vh,150px);z-index:4;
  font-family:var(--font-body);font-weight:200;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(1.9rem,4.4vw,3.6rem);color:#000;margin:0;
}
.s4-phrase em{font-family:var(--font-serif);font-style:italic;font-weight:400}
.s4-cta{
  position:absolute;left:clamp(20px,6vw,80px);bottom:clamp(28px,5vh,52px);z-index:4;
  display:inline-flex;align-items:center;gap:.5em;
  background:#101010;color:#f4f2ee;font-weight:600;font-size:.92rem;
  padding:.85em 1.7em;border-radius:100px;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.s4-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(0,0,0,.4)}
.s4-cta .arr{transition:transform .35s var(--ease)}
.s4-cta:hover .arr{transform:translateX(3px)}
@media (max-width:760px){
  .s4-o1{top:9%;left:5%}.s4-o2{top:8%;right:5%}.s4-o3{bottom:44%;left:10%}.s4-o4{top:42%;right:9%}
  .s4-o1 img{width:130px}.s4-o2 img{width:110px}.s4-o3 img{width:110px}.s4-o4 img{width:70px}
  .s4-tag{font-size:.5rem}
  .s4-center-label{display:none}
  .s4-phrase{bottom:110px}
}

/* =========================================================
   §5 — DARK · DNA + morphing glass tetromino + read-flow
   ========================================================= */
.s5-dna{
  position:relative;min-height:100svh;overflow:hidden;
  background:
    radial-gradient(60% 50% at 12% 8%,rgba(63,116,96,.14),transparent 60%),
    radial-gradient(75% 70% at 82% 88%,rgba(52,55,85,.26),transparent 62%),
    #0d0d0f;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px clamp(20px,7vw,110px);
}
.s5-dna::after{
  content:"";position:absolute;inset:-18%;pointer-events:none;
  background:radial-gradient(46% 46% at 62% 50%,transparent 58%,rgba(255,255,255,.025) 60%,transparent 63%);
}
.s5-label{
  position:relative;z-index:3;font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.34em;color:rgba(255,253,249,.45);margin-bottom:1.6rem;
}
.s5-title{
  position:relative;z-index:3;
  font-family:var(--font-body);font-weight:400;letter-spacing:-.02em;line-height:1.01;
  font-size:clamp(3rem,8.4vw,7.4rem);color:#fffdf9;margin:0;
}
.s5-blurb{
  position:relative;z-index:3;align-self:flex-end;
  max-width:430px;margin-top:2.6rem;
  font-size:1.12rem;line-height:1.6;color:rgba(255,253,249,.82);
}
/* read-flow highlight — site-wide; each section sets its own --rf-c */
.rf{transition:color .28s ease}
.rf.on{color:var(--rf-c,#e9cf8d)}
.s5-cta{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.4rem;
  background:#fffdf9;color:#0d0d0f;font-weight:600;font-size:.9rem;
  padding:.8em 1.6em;border-radius:100px;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.s5-cta:hover{box-shadow:0 12px 44px -10px rgba(255,253,249,.4)}
@media (max-width:760px){.s5-blurb{align-self:flex-start;margin-top:2rem}}

/* --- the morphing glass cube cluster --- */
.s5-cluster{
  position:absolute;z-index:2;right:17%;top:44%;
  width:0;height:0;
  perspective:1200px;pointer-events:none;
}
.s5-halo{
  position:absolute;left:-230px;top:-230px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(120,140,255,.10) 0%,rgba(255,80,80,.05) 40%,transparent 68%);
  filter:blur(6px);
}
.s5-spin{
  position:absolute;left:0;top:0;transform-style:preserve-3d;
  transform:rotateX(-12deg) rotateY(22deg);
  animation:s5sway 16s ease-in-out infinite;
}
@keyframes s5sway{
  0%,100%{transform:rotateX(-12deg) rotateY(16deg)}
  50%{transform:rotateX(-8deg) rotateY(34deg)}
}
.s5-cube{
  --s:88px;
  position:absolute;left:calc(var(--s) * -.5);top:calc(var(--s) * -.5);
  width:var(--s);height:var(--s);transform-style:preserve-3d;
  transform:translate3d(var(--ox),var(--oy),var(--oz)) rotateX(var(--orx)) rotateY(var(--ory));
  opacity:0;
  transition:transform 1.9s cubic-bezier(.16,.84,.3,1),opacity 1.1s ease;
}
/* assembled: JS drives --gx/--gy/--gz per morph */
.s5-dna.live .s5-cube{
  transform:translate3d(calc(var(--gx) * var(--s)),calc(var(--gy) * var(--s)),var(--gz));
  opacity:1;
}
.s5-dna.live .c2{transition-delay:.14s}
.s5-dna.live .c3{transition-delay:.28s}
.s5-dna.live .c4{transition-delay:.42s}
.s5-dna.live .c5{transition-delay:.56s}
/* scatter origins + first shape (S) */
.c1{--gx:0; --gy:-1; --gz:  0px; --ox:-340px;--oy:-260px;--oz:140px;--orx:-70deg;--ory:120deg}
.c2{--gx:1; --gy:-1; --gz: 12px; --ox:300px; --oy:-320px;--oz:-120px;--orx:80deg;--ory:-100deg}
.c3{--gx:1; --gy:0;  --gz:  0px; --ox:420px; --oy:60px;  --oz:180px;--orx:-120deg;--ory:60deg}
.c4{--gx:1; --gy:1;  --gz:-14px; --ox:180px; --oy:380px; --oz:-160px;--orx:60deg;--ory:200deg}
.c5{--gx:0; --gy:0;  --gz: 10px; --ox:-380px;--oy:220px; --oz:120px;--orx:100deg;--ory:-140deg}
.s5-cube i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(135deg,rgba(255,70,70,.10),rgba(255,255,255,.045) 42%,rgba(70,150,255,.10));
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    inset 0 0 26px rgba(255,255,255,.06),
    -5px 0 16px -6px rgba(255,42,42,.35),
     5px 0 16px -6px rgba(42,127,255,.35);
  backface-visibility:visible;
}
.s5-cube .ff{transform:translateZ(calc(var(--s) * .5))}
.s5-cube .fb{transform:rotateY(180deg) translateZ(calc(var(--s) * .5))}
.s5-cube .fl{transform:rotateY(-90deg) translateZ(calc(var(--s) * .5))}
.s5-cube .fr{transform:rotateY(90deg) translateZ(calc(var(--s) * .5))}
.s5-cube .ft{transform:rotateX(90deg) translateZ(calc(var(--s) * .5))}
.s5-cube .fd{transform:rotateX(-90deg) translateZ(calc(var(--s) * .5))}
@media (max-width:900px){
  .s5-cluster{right:24%;top:56%}
  .s5-cube{--s:56px}
  .s5-halo{left:-150px;top:-150px;width:300px;height:300px}
}

/* =========================================================
   STATS BAND — count-ups + rising jellyfish
   ========================================================= */
.stats-band{
  position:relative;overflow:hidden;
  background:
    radial-gradient(130% 70% at 74% -12%,rgba(228,249,255,.6),transparent 58%),
    linear-gradient(180deg,#58b4dd 0%,#3a95c5 28%,#2074a4 60%,#155a88 100%);
}
/* caustic light shafts falling from the surface */
.stats-band::before{
  content:"";position:absolute;inset:-12% -6%;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(112deg,rgba(255,255,255,.15) 0 16px,transparent 16px 104px),
    repeating-linear-gradient(99deg,rgba(255,255,255,.08) 0 30px,transparent 30px 150px);
  filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 74%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 74%);
  animation:s6rays 12s ease-in-out infinite alternate;
}
@keyframes s6rays{from{transform:translateX(-2.2%)}to{transform:translateX(2.2%)}}
/* dancing caustic patches near the surface */
.stats-band::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(30% 20% at 18% 6%,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(24% 16% at 64% 3%,rgba(255,255,255,.14),transparent 70%),
    radial-gradient(32% 22% at 88% 9%,rgba(255,255,255,.12),transparent 70%);
  animation:s6caustics 9s ease-in-out infinite alternate;
}
@keyframes s6caustics{from{transform:translateX(-1.6%) scaleY(1)}to{transform:translateX(1.6%) scaleY(1.07)}}
.stats-band .section-title{text-shadow:0 2px 26px rgba(7,42,66,.6)}
.stats-band .eyebrow{text-shadow:0 1px 12px rgba(7,42,66,.5)}
.stats-jelly{position:absolute;inset:0;z-index:0}
.stats-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:clamp(80px,11vw,140px) clamp(20px,5vw,56px)}
.stats-lead{color:rgba(223,242,253,.92);font-size:1.1rem;max-width:52ch;margin-top:1.2rem}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);
  margin-top:3rem;
}
.stat-cell{
  border:1px solid rgba(165,218,246,.24);border-radius:16px;padding:1.8rem 1.5rem;
  background:linear-gradient(180deg,rgba(6,32,58,.56),rgba(4,22,42,.62));
  backdrop-filter:blur(3px);
}
.stat-cell b{
  display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1;
  background:linear-gradient(180deg,#eefcff 0%,#9adcff 70%,#67bdf2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.6rem;font-variant-numeric:tabular-nums;
}
.stat-cell small{color:rgba(214,236,250,.88);font-size:.9rem;line-height:1.5;display:block}
.stats-src{margin-top:1.2rem;font-size:.72rem;letter-spacing:.06em;color:rgba(188,224,247,.6)}
.stats-cta{
  margin-top:3rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border:1px solid rgba(165,218,246,.26);border-radius:18px;padding:1.6rem 2rem;
  background:radial-gradient(120% 200% at 0% 0%,rgba(150,225,255,.14),transparent 55%),rgba(5,28,52,.35);
}
.stats-cta p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,2vw,1.5rem);margin:0}
@media (max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stats-grid{grid-template-columns:1fr}}

/* =========================================================
   WORK — case card slideshow
   ========================================================= */
.case-slides{position:relative}
.case-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;animation:caseFade 12s infinite}
.case-slides img:nth-child(1){animation-delay:0s;position:relative}
.case-slides img:nth-child(2){animation-delay:3s}
.case-slides img:nth-child(3){animation-delay:6s}
.case-slides img:nth-child(4){animation-delay:9s}
@keyframes caseFade{
  0%{opacity:0}4%{opacity:1}25%{opacity:1}33%{opacity:0}100%{opacity:0}
}

/* =========================================================
   WORK — POV desk scene (you, watching your sites work)
   ========================================================= */
.desk-scene{margin-top:clamp(56px,8vw,110px)}
.ds-caption{
  text-align:center;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.3em;color:var(--slate,#8a8f98);margin-bottom:26px;
}
.ds-stage{position:relative;max-width:1060px;margin:0 auto;padding:26px 18px 0}
.ds-glow{
  position:absolute;left:50%;top:4%;transform:translateX(-50%);
  width:84%;height:66%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(96,170,255,.14),transparent 70%);
  filter:blur(10px);pointer-events:none;
}
.ds-monitors{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,1.6vw,24px);perspective:1400px;will-change:transform;
}
.ds-mon{position:relative;display:flex;flex-direction:column;align-items:center}
.ds-m1{width:31%;transform:rotateY(15deg)}
.ds-m2{width:33%;z-index:2}
.ds-m3{width:27%;transform:rotateY(-15deg)}
.ds-screen{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  border:5px solid #17181d;border-radius:10px;background:#000;
  box-shadow:0 34px 70px -22px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.05),0 0 44px -8px rgba(96,170,255,.16);
}
.ds-dash svg{position:absolute;inset:0;width:100%;height:100%}
.ds-scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .55s ease}
.ds-scr.on{opacity:1}
.ds-cursor{
  position:absolute;z-index:4;width:15px;left:50%;top:55%;
  transition:left 1.1s cubic-bezier(.45,.05,.2,1),top 1.1s cubic-bezier(.45,.05,.2,1);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.ds-cursor svg{display:block;transition:transform .12s}
.ds-cursor.clicking svg{transform:scale(.78)}
.ds-click{
  position:absolute;z-index:3;width:26px;height:26px;border:2px solid #fff;border-radius:50%;
  transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;
}
.ds-click.go{animation:dsRipple .55s ease-out}
@keyframes dsRipple{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.ds-neck{width:9%;height:24px;background:linear-gradient(180deg,#25262c,#101115)}
.ds-foot{width:34%;height:8px;border-radius:4px 4px 8px 8px;background:#1a1b20}
/* the numbers screen */
.ds-live{animation:dsLive 1.6s steps(2) infinite}
@keyframes dsLive{0%,100%{opacity:1}50%{opacity:.25}}
#dashLine{stroke-dasharray:470;stroke-dashoffset:470;animation:dsDraw 6s ease-in-out infinite}
@keyframes dsDraw{0%{stroke-dashoffset:470;opacity:1}55%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}94%{opacity:0}100%{stroke-dashoffset:470;opacity:0}}
.ds-tipdot{animation:dsTip 6s ease-in-out infinite}
@keyframes dsTip{0%,52%{opacity:0}58%,88%{opacity:1}94%,100%{opacity:0}}
.ds-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:dsBar 6s ease-out infinite}
.ds-bars .ds-bar:nth-child(2){animation-delay:.25s}
.ds-bars .ds-bar:nth-child(3){animation-delay:.5s}
.ds-bars .ds-bar:nth-child(4){animation-delay:.75s}
@keyframes dsBar{0%{transform:scaleY(0)}16%,86%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
/* desk + props */
.ds-desk{
  position:relative;height:clamp(64px,9vw,104px);margin-top:-4px;z-index:1;
  background:linear-gradient(180deg,#26272d 0%,#191a1f 60%,#131418 100%);
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  border-top:1px solid rgba(255,255,255,.09);
}
.ds-keyboard{
  position:absolute;left:50%;top:32%;transform:translateX(-50%);
  width:24%;height:28%;border-radius:6px;background:#0d0e12;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.4);
}
.ds-mouse{position:absolute;left:68%;top:38%;width:3.4%;height:20%;border-radius:50%/60%;background:#0d0e12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ds-mug{position:absolute;left:27%;top:16%;width:4.2%;height:46%;border-radius:4px 4px 9px 9px;background:#3b2f28;box-shadow:inset 0 4px 0 rgba(0,0,0,.5)}
/* you, from behind */
.ds-person{
  position:absolute;left:50%;bottom:-6px;z-index:6;
  width:clamp(180px,30%,320px);transform:translateX(-50%);
  filter:drop-shadow(0 -10px 34px rgba(0,0,0,.55));
  animation:dsBreathe 5.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes dsBreathe{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.ds-person svg{display:block;width:100%}
@media (max-width:760px){
  .ds-monitors{gap:6px}
  .ds-screen{border-width:3px;border-radius:6px}
  .ds-neck{height:12px}
  .ds-person{width:140px}
}

/* =========================================================
   FREE AI TEARDOWN — lead magnet
   ========================================================= */
.td-band{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 90% at 82% 0%,rgba(233,207,141,.09),transparent 60%),
    radial-gradient(50% 80% at 8% 100%,rgba(92,200,255,.05),transparent 60%),
    #0b0b0e;
  border-block:1px solid var(--line);
  padding:clamp(80px,11vw,140px) clamp(20px,5vw,56px);
}
.td-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;
}
.td-lead{color:var(--bone-dim);font-size:1.08rem;line-height:1.65;margin:1.2rem 0 1.4rem;max-width:52ch}
.td-lead strong{color:var(--bone)}
.td-points{list-style:none;margin:0 0 1.4rem;padding:0}
.td-points li{
  position:relative;padding-left:1.8rem;color:var(--bone-dim);margin-bottom:.65rem;line-height:1.5;
}
.td-points li::before{
  content:"\2713";position:absolute;left:0;top:0;color:#e9cf8d;font-weight:700;
}
.td-fine{font-size:.78rem;letter-spacing:.04em;color:var(--slate)}
/* form panel */
.td-panel{
  border:1px solid rgba(233,207,141,.25);border-radius:20px;
  background:linear-gradient(180deg,rgba(24,24,30,.9),rgba(15,15,19,.94));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
  padding:clamp(22px,3vw,34px);
}
.td-label{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);margin:0 0 .45rem;
}
.td-opt{color:var(--slate-2,#5a5f6a);text-transform:none;letter-spacing:.05em}
.td-input{
  width:100%;margin-bottom:1.1rem;
  background:rgba(10,10,13,.8);border:1px solid var(--line-2);border-radius:10px;
  color:var(--bone);font-size:.95rem;padding:.85em 1em;
  transition:border-color .25s,box-shadow .25s;
}
.td-input:focus{outline:none;border-color:rgba(233,207,141,.55);box-shadow:0 0 0 3px rgba(233,207,141,.12)}
.td-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.td-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.td-submit{width:100%;justify-content:center;margin-top:.2rem}
.td-error{margin-top:.9rem;color:#ff8f6b;font-size:.88rem}
/* loading state */
.td-loading{text-align:center;padding:2.4rem 0 1.6rem}
.td-spinner{
  display:inline-block;width:42px;height:42px;border-radius:50%;
  border:3px solid rgba(233,207,141,.2);border-top-color:#e9cf8d;
  animation:tdSpin .9s linear infinite;margin-bottom:1.1rem;
}
@keyframes tdSpin{to{transform:rotate(360deg)}}
.td-loading-msg{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--bone);min-height:1.5em}
.td-loading-sub{font-size:.8rem;color:var(--slate);margin-top:.4rem}
/* the report */
.td-report-wrap{max-width:860px;margin:clamp(40px,6vw,64px) auto 0}
.td-report{
  border:1px solid rgba(233,207,141,.3);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(22,22,28,.95),rgba(13,13,17,.97));
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9);
}
.td-demo-note{
  background:rgba(92,200,255,.1);border-bottom:1px solid rgba(92,200,255,.25);
  color:#9adcff;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;
  padding:.8em 1.4em;text-align:center;
}
.td-head{
  display:flex;align-items:center;gap:clamp(16px,3vw,28px);
  padding:clamp(22px,3.5vw,36px) clamp(22px,3.5vw,36px) 0;
}
.td-grade{
  flex-shrink:0;width:clamp(72px,9vw,96px);height:clamp(72px,9vw,96px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.6rem);
  background:linear-gradient(180deg,#f3dea1,#cda657);color:#241c08;
  box-shadow:0 0 40px -6px rgba(233,207,141,.5);
}
.td-head-txt h3{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.6vw,1.8rem);margin-bottom:.35rem;
}
.td-head-txt p{color:var(--bone-dim);font-size:.95rem;line-height:1.55;max-width:56ch}
.td-url{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;color:#e9cf8d}
.td-findings{padding:clamp(18px,3vw,30px) clamp(22px,3.5vw,36px)}
.td-finding{border-top:1px solid var(--line);padding:1.3rem 0}
.td-finding:first-child{border-top:none}
.td-f-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem}
.td-sev{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.td-sev.critical{background:#ff5c5c;box-shadow:0 0 10px rgba(255,92,92,.7)}
.td-sev.major{background:#ffb84d;box-shadow:0 0 10px rgba(255,184,77,.6)}
.td-sev.minor{background:#5cc8ff;box-shadow:0 0 10px rgba(92,200,255,.5)}
.td-finding h4{font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.td-finding p{color:var(--bone-dim);font-size:.93rem;line-height:1.6;margin:.3rem 0 0}
.td-fix{
  margin-top:.7rem;padding:.85em 1.1em;border-radius:10px;
  background:rgba(233,207,141,.07);border:1px solid rgba(233,207,141,.2);
}
.td-fix b{color:#e9cf8d;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.2em;display:block;margin-bottom:.35rem}
.td-fix span{color:var(--bone);font-size:.93rem;line-height:1.6}
.td-wins{padding:0 clamp(22px,3.5vw,36px) 1.4rem;display:flex;flex-wrap:wrap;gap:9px}
.td-win{
  font-size:.82rem;color:var(--bone-dim);border:1px dashed rgba(233,207,141,.35);
  border-radius:100px;padding:.5em 1.05em;
}
.td-win::before{content:"\26A1 ";color:#e9cf8d}
.td-close{
  border-top:1px solid var(--line);padding:clamp(20px,3vw,30px) clamp(22px,3.5vw,36px);
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  background:radial-gradient(120% 200% at 0% 0%,rgba(233,207,141,.07),transparent 55%);
}
.td-close p{color:var(--bone);font-size:1rem;line-height:1.6;max-width:56ch}
.td-sent{
  text-align:center;padding:.9em;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.14em;color:#7bffce;background:rgba(123,255,206,.06);
  border-top:1px solid rgba(123,255,206,.18);
}
@media (max-width:900px){
  .td-inner{grid-template-columns:1fr}
  .td-row{grid-template-columns:1fr}
}

/* reduced motion — freeze the theatrics */
@media (prefers-reduced-motion:reduce){
  #bankerRoot,#stache,.s5-spin,.case-slides img,.s1-machine.active svg,#dashLine,.ds-bar,.ds-tipdot,.ds-live,.ds-person,.stats-band::before,.stats-band::after,#s1Bird .bw,.s1-machine.active .jl,.s1-machine.active .lever,.s1-banker.gust .tail,.s1-banker.gust #windLines .wl,.marquee-track i{animation:none}
  .case-slides img:nth-child(1){opacity:1}
  .s4-rise{opacity:1;transform:none;transition:none}
  .s5-cube{transform:translate3d(calc(var(--gx) * var(--s)),calc(var(--gy) * var(--s)),var(--gz));opacity:1;transition:none}
}