/* ═══════════════════════════════════════════════════════════════════
   PIPETRUMP — case-file / comic-noir stylesheet
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #08070a;
  --soot:     #12100f;
  --coal:     #1b1713;
  --tweed:    #8a6b3f;
  --tan:      #c9a468;
  --gold:     #edc158;
  --gold-hi:  #fff0b8;
  --paper:    #ddcfae;
  --paper-hi: #f2e8cf;
  --blood:    #b3121d;
  --smoke:    #ded6c7;
  --neon-c:   #35d6ff;
  --neon-m:   #ff3ea5;
  --stroke:   3px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--smoke);
  font-family:'Chakra Petch',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── typography ────────────────────────────────────────────────────── */
.f-comic { font-family:'Bangers',cursive; letter-spacing:.045em; }
.f-type  { font-family:'Special Elite',monospace; }
.f-serif { font-family:'Rye',serif; }

h1,h2,h3{ margin:0; }

.gold-foil{
  background:linear-gradient(178deg,#fff6d0 2%,var(--gold) 26%,#8d6a24 52%,var(--gold) 74%,#fff6d0 98%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(237,193,88,.28));
}

/* comic hard outline text */
.ink-out{
  color:var(--paper-hi);
  text-shadow:
    var(--stroke) 0 0 #000, calc(var(--stroke) * -1) 0 0 #000,
    0 var(--stroke) 0 #000, 0 calc(var(--stroke) * -1) 0 #000,
    3px 3px 0 #000, 6px 6px 0 rgba(0,0,0,.55);
}

/* ── fixed background stack ────────────────────────────────────────── */
.bg-layer{ position:fixed; inset:0; z-index:-3; pointer-events:none; }
.bg-photo{
  position:fixed; inset:-4%; z-index:-4; pointer-events:none;
  background:url('6.png') center/cover no-repeat;
  filter:saturate(.55) contrast(1.12) brightness(.34);
  transform:scale(1.06);
  will-change:transform;
}
.bg-tint{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(237,193,88,.14) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 92%, rgba(179,18,29,.13) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,7,10,.72) 0%, rgba(8,7,10,.88) 45%, rgba(8,7,10,.95) 100%);
}
/* halftone comic dots */
.bg-tone{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.1px);
  background-size:6px 6px;
  mix-blend-mode:overlay;
}
/* film grain + vignette */
.bg-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(100% 78% at 50% 46%, transparent 42%, rgba(0,0,0,.72) 100%);
}
.bg-grain::after{
  content:''; position:absolute; inset:-200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.22; animation:grain 1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,1%)}
}

/* drifting pipe smoke */
.smoke-wisp{
  position:fixed; bottom:-30vh; z-index:-1; pointer-events:none;
  width:46vh; height:46vh; border-radius:50%;
  background:radial-gradient(circle, rgba(222,214,199,.11) 0%, transparent 68%);
  filter:blur(28px);
  animation:drift 26s linear infinite;
}
.smoke-wisp:nth-child(2){ left:14%; animation-duration:34s; animation-delay:-8s; }
.smoke-wisp:nth-child(3){ left:52%; animation-duration:29s; animation-delay:-17s; }
.smoke-wisp:nth-child(4){ left:80%; animation-duration:39s; animation-delay:-24s; }
@keyframes drift{
  0%{ transform:translate3d(0,0,0) scale(.6); opacity:0 }
  18%{ opacity:.9 }
  100%{ transform:translate3d(6vw,-155vh,0) scale(1.9); opacity:0 }
}

/* ── shared 3D stage ───────────────────────────────────────────────── */
.stage{ perspective:1600px; perspective-origin:50% 42%; }
.stage-near{ perspective:1050px; }
.pz{ transform-style:preserve-3d; }

/* ── comic panel / hard-outline card ───────────────────────────────── */
.panel{
  position:relative;
  border:var(--stroke) solid #000;
  background:var(--coal);
  box-shadow:9px 9px 0 #000, 0 0 0 1px rgba(237,193,88,.22) inset;
}
.panel-paper{
  background:
    linear-gradient(158deg, var(--paper-hi) 0%, var(--paper) 42%, #c3b28f 100%);
  color:#181310;
}
.panel-paper::before{  /* paper fibre + coffee stain */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(38% 30% at 88% 12%, rgba(120,80,30,.28), transparent 70%),
    radial-gradient(30% 26% at 8% 88%, rgba(120,80,30,.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 4px);
}
.panel-paper > *{ position:relative; z-index:1; }

/* torn bottom edge */
.torn{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h100v5.2l-4 .9-5-1.4-6 1.6-5-1-6 1.3-5-1.5-6 1.2-5-1-6 1.5-5-1.3-6 1-5-1.4-6 1.5-5-1.2-6 1.1-5-1.5-6 1.4-3-.6z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h100v5.2l-4 .9-5-1.4-6 1.6-5-1-6 1.3-5-1.5-6 1.2-5-1-6 1.5-5-1.3-6 1-5-1.4-6 1.5-5-1.2-6 1.1-5-1.5-6 1.4-3-.6z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

/* masking tape */
.tape{
  position:absolute; width:132px; height:34px;
  background:linear-gradient(180deg, rgba(226,213,178,.92), rgba(198,182,142,.88));
  box-shadow:0 3px 10px rgba(0,0,0,.6);
  opacity:.94;
}
.tape::after{
  content:''; position:absolute; inset:0; opacity:.35;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 2px, transparent 2px 6px);
}
.tape-tl{ top:-16px; left:-22px; transform:rotate(-24deg); }
.tape-tr{ top:-16px; right:-22px; transform:rotate(19deg); }

/* pushpin */
.pin{
  position:absolute; top:-13px; left:50%; width:26px; height:26px; margin-left:-13px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ff6a72, var(--blood) 52%, #5d060d 100%);
  border:2px solid #000;
  box-shadow:0 7px 12px rgba(0,0,0,.7);
  z-index:4;
}
.pin::after{
  content:''; position:absolute; top:16px; left:11px; width:3px; height:14px;
  background:linear-gradient(#8f8f8f,#3a3a3a); transform:rotate(6deg);
}

/* rubber stamp */
.stamp{
  display:inline-block; padding:.42rem 1rem;
  border:3px double var(--blood); color:var(--blood);
  font-family:'Rye',serif; font-size:.86rem; letter-spacing:.18em;
  text-transform:uppercase; opacity:.82;
  transform:rotate(-9deg);
  mix-blend-mode:multiply;
}
.stamp-gold{ border-color:var(--gold); color:var(--gold); mix-blend-mode:normal; opacity:.9; }

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{
  --bg:var(--gold); --fg:#1a1206;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.92rem 1.7rem;
  font-family:'Bangers',cursive; font-size:1.32rem; letter-spacing:.07em;
  color:var(--fg); background:var(--bg);
  border:var(--stroke) solid #000;
  box-shadow:6px 6px 0 #000;
  text-decoration:none; cursor:pointer;
  transition:transform .13s cubic-bezier(.2,.9,.3,1.4), box-shadow .13s, filter .2s;
}
.btn:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 #000; filter:brightness(1.07); }
.btn:active{ transform:translate(4px,4px); box-shadow:2px 2px 0 #000; }
.btn-ghost{ --bg:#181513; --fg:var(--gold); }
.btn-blood{ --bg:var(--blood); --fg:#ffe9c9; }
.btn-neon { --bg:#0d1a20; --fg:var(--neon-c); border-color:#000; box-shadow:6px 6px 0 #000, 0 0 26px rgba(53,214,255,.35); }
.btn[aria-disabled="true"]{ filter:grayscale(.85) brightness(.65); pointer-events:none; }

/* ── nav ───────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  border-bottom:var(--stroke) solid #000;
  background:linear-gradient(180deg, rgba(12,10,9,.94), rgba(12,10,9,.78));
  backdrop-filter:blur(9px);
  box-shadow:0 5px 0 rgba(0,0,0,.55), 0 12px 34px rgba(0,0,0,.6);
}
.nav-link{
  position:relative; font-family:'Bangers',cursive; font-size:1.12rem;
  letter-spacing:.08em; color:var(--smoke); text-decoration:none; padding:.25rem 0;
  transition:color .18s;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.2,.9,.3,1.2);
}
.nav-link:hover{ color:var(--gold-hi); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-logo{ filter:drop-shadow(0 0 12px rgba(237,193,88,.4)); }

/* ── ticker ────────────────────────────────────────────────────────── */
.ticker{
  border-top:var(--stroke) solid #000; border-bottom:var(--stroke) solid #000;
  background:var(--blood); color:#ffeccb; overflow:hidden;
  transform:rotate(-1.15deg) scale(1.045);
  box-shadow:0 8px 0 rgba(0,0,0,.5);
}
.ticker-track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.ticker-track > span{
  font-family:'Bangers',cursive; font-size:1.28rem; letter-spacing:.1em;
  padding:.55rem 1.35rem; white-space:nowrap;
}
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ── section chrome ────────────────────────────────────────────────── */
.section{ position:relative; padding:clamp(5rem,11vw,9.5rem) 0; }
.sec-tab{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.4rem 1.3rem .45rem;
  background:var(--tan); color:#1a1207;
  border:var(--stroke) solid #000;
  box-shadow:5px 5px 0 #000;
  font-family:'Special Elite',monospace; font-size:.82rem; letter-spacing:.24em;
  text-transform:uppercase;
  transform:rotate(-2deg);
}
.sec-title{ font-size:clamp(2.6rem,7.2vw,5.6rem); line-height:.92; }
.rule{
  height:5px; border:0; margin:0;
  background:repeating-linear-gradient(90deg,var(--gold) 0 26px, transparent 26px 40px);
  opacity:.6;
}

/* burst starburst behind headings */
.burst{
  position:absolute; width:340px; height:340px; pointer-events:none; opacity:.16;
  background:conic-gradient(from 0deg, var(--gold) 0 6deg, transparent 6deg 18deg);
  border-radius:50%;
  animation:spin 46s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ═══ HERO ═════════════════════════════════════════════════════════ */
.hero{ min-height:100svh; padding-top:132px; }
.hero-deck{
  transform:rotateX(9deg) rotateY(-8deg) rotateZ(-1deg);
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.hero-figure{
  position:relative;
  transform:translateZ(90px) rotateY(7deg);
  filter:drop-shadow(-26px 34px 34px rgba(0,0,0,.85)) drop-shadow(0 0 60px rgba(237,193,88,.24));
  animation:bob 7s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -16px } }
.hero-copy{ transform:translateZ(36px); }
.hero-cta { transform:translateZ(62px); }

.spot{
  position:absolute; left:50%; top:0; width:min(760px,96vw); height:100%;
  translate:-50% 0; pointer-events:none; z-index:-1;
  background:radial-gradient(50% 45% at 50% 42%, rgba(237,193,88,.24), transparent 70%);
  filter:blur(12px);
}

/* magnifier lens that follows the cursor over the hero title */
.lens{
  position:absolute; width:150px; height:150px; border-radius:50%;
  border:5px solid #000; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.24), rgba(120,170,190,.1) 46%, transparent 68%);
  box-shadow:0 0 0 8px rgba(198,160,86,.85), 0 0 0 11px #000, 0 18px 40px rgba(0,0,0,.7),
             inset 0 0 34px rgba(255,255,255,.16);
  backdrop-filter:saturate(1.7) brightness(1.35) contrast(1.15);
  transition:opacity .3s;
  z-index:5;
}
.hero:hover .lens{ opacity:1; }

/* evidence chips floating in 3D beside the hero */
.chip{
  position:absolute; padding:.5rem .95rem;
  background:var(--paper-hi); color:#171208;
  border:var(--stroke) solid #000; box-shadow:5px 5px 0 #000;
  font-family:'Special Elite',monospace; font-size:.76rem; letter-spacing:.1em;
  white-space:nowrap;
}

/* ═══ ABOUT — fanned comic panels ══════════════════════════════════ */
.fan{ position:relative; }
.fan-card{
  transition:transform .55s cubic-bezier(.2,.85,.3,1.2), filter .45s;
  will-change:transform;
}
.fan-a{ transform:rotateY(21deg) rotateZ(-4.5deg) translateZ(-70px) translateX(4%); }
.fan-b{ transform:rotateY(0deg)   rotateZ(1.6deg) translateZ(70px); z-index:3; }
.fan-c{ transform:rotateY(-21deg) rotateZ(4.5deg) translateZ(-70px) translateX(-4%); }
.fan:hover .fan-card{ filter:brightness(.6) saturate(.7); }
.fan-card:hover{
  transform:rotateY(0deg) rotateZ(0deg) translateZ(140px) scale(1.03) !important;
  filter:brightness(1.06) saturate(1.05) !important;
  z-index:9;
}
.fan-card img{ display:block; width:100%; height:100%; object-fit:cover; }

/* speech bubble */
.bubble{
  position:relative; background:var(--paper-hi); color:#151009;
  border:var(--stroke) solid #000; border-radius:22px;
  padding:1.05rem 1.3rem; box-shadow:7px 7px 0 #000;
  font-family:'Special Elite',monospace; font-size:.95rem; line-height:1.55;
}
.bubble::after{
  content:''; position:absolute; left:34px; bottom:-19px;
  border:11px solid transparent; border-top-color:#000;
}
.bubble::before{
  content:''; position:absolute; left:37px; bottom:-12px; z-index:1;
  border:8px solid transparent; border-top-color:var(--paper-hi);
}

/* dossier stat rows */
.stat-row{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.62rem .2rem;
  border-bottom:2px dashed rgba(24,18,10,.34);
  font-family:'Special Elite',monospace;
}
.stat-row span:first-child{ opacity:.68; letter-spacing:.12em; font-size:.78rem; text-transform:uppercase; }
.stat-row span:last-child{ font-weight:700; letter-spacing:.05em; }

/* ═══ HOW TO BUY — perspective corridor ════════════════════════════ */
.corridor{ perspective:1250px; perspective-origin:50% 50%; }
.step{
  position:relative;
  transition:transform .5s cubic-bezier(.2,.85,.3,1.2), box-shadow .4s;
  will-change:transform;
}
.step:nth-child(odd) { transform:rotateY(11deg)  translateZ(-42px); }
.step:nth-child(even){ transform:rotateY(-11deg) translateZ(-42px); }
.step:hover{ transform:rotateY(0) translateZ(56px) !important; box-shadow:16px 16px 0 #000; }
.step-no{
  position:absolute; top:-30px; left:-22px;
  width:70px; height:70px; display:grid; place-items:center;
  background:var(--blood); color:#ffe8c6;
  border:var(--stroke) solid #000; border-radius:50%;
  box-shadow:5px 5px 0 #000;
  font-family:'Bangers',cursive; font-size:2.1rem;
  transform:rotate(-8deg); z-index:5;
}
/* red evidence string between steps */
.string{
  position:absolute; left:50%; width:2px; height:52px; top:100%;
  background:linear-gradient(var(--blood), rgba(179,18,29,.15));
  box-shadow:0 0 8px rgba(179,18,29,.6);
}

/* CA copy box */
.ca-box{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  padding:.9rem 1.1rem;
  background:#0d0b09; border:var(--stroke) solid #000;
  box-shadow:7px 7px 0 #000, 0 0 0 1px rgba(237,193,88,.28) inset;
}
.ca-text{
  flex:1 1 260px; min-width:0;
  font-family:'Special Elite',monospace; font-size:clamp(.72rem,1.9vw,.95rem);
  color:var(--gold-hi); word-break:break-all; letter-spacing:.02em;
}
.copy-btn{
  flex:0 0 auto; padding:.55rem 1rem;
  background:var(--gold); color:#1a1206; border:2px solid #000;
  box-shadow:4px 4px 0 #000; cursor:pointer;
  font-family:'Bangers',cursive; font-size:1.05rem; letter-spacing:.06em;
  transition:transform .12s, box-shadow .12s;
}
.copy-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000; }
.copy-btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 #000; }
.copy-btn.ok{ background:#4bd07a; }

/* ═══ CHART — 3D case room ═════════════════════════════════════════ */
.chart-room{ perspective:1500px; perspective-origin:50% 34%; }
.chart-floor{
  position:absolute; left:50%; bottom:-6%; width:190%; height:60%;
  translate:-50% 0; transform:rotateX(74deg); transform-origin:50% 100%;
  pointer-events:none; opacity:.42;
  background-image:
    linear-gradient(rgba(53,214,255,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,62,165,.24) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(transparent, #000 42%);
  mask-image:linear-gradient(transparent, #000 42%);
}
.monitor{
  position:relative;
  transform:rotateX(6.5deg);
  border:5px solid #000;
  background:#07090c;
  box-shadow:
    0 0 0 3px rgba(53,214,255,.3),
    16px 20px 0 #000,
    0 44px 90px rgba(0,0,0,.85),
    0 0 90px rgba(53,214,255,.16);
  transition:transform .6s cubic-bezier(.2,.85,.3,1.1);
}
.monitor:hover{ transform:rotateX(0deg); }
.monitor iframe{ display:block; width:100%; height:100%; border:0; }
.scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.2;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.09) 0 1px, transparent 1px 4px);
}
.chart-fallback{
  position:absolute; inset:0; display:grid; place-content:center; gap:1rem;
  text-align:center; padding:2rem;
  background:#07090c;
}

/* ═══ JOIN US ══════════════════════════════════════════════════════ */
.banner-frame{
  position:relative;
  border:5px solid #000;
  box-shadow:14px 16px 0 #000, 0 34px 80px rgba(0,0,0,.8), 0 0 0 3px rgba(237,193,88,.35);
  transform:rotateX(11deg) rotateZ(-1.3deg);
  transition:transform .65s cubic-bezier(.2,.85,.3,1.1);
  overflow:hidden;
}
.banner-frame:hover{ transform:rotateX(0deg) rotateZ(0deg); }
.banner-frame img{ display:block; width:100%; height:auto; }
.banner-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(8,7,10,.6) 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(0,0,0,.5) 100%);
}
.social{
  display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.5rem;
  border:var(--stroke) solid #000; box-shadow:7px 7px 0 #000;
  background:var(--coal); color:var(--paper-hi); text-decoration:none;
  font-family:'Bangers',cursive; font-size:1.24rem; letter-spacing:.06em;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.4), box-shadow .16s, background .25s;
}
.social i{ font-size:1.5rem; line-height:1; }
.social:hover{ transform:translate(-3px,-3px) rotate(-1deg); box-shadow:11px 11px 0 #000; }
.social-x   { background:#0a0a0a; }
.social-x:hover   { background:#000; color:#fff; }
.social-pump{ background:#0f1a12; color:#8ff0b0; }
.social-pump:hover{ background:#12271a; }
.social-dex { background:#0c1620; color:var(--neon-c); }
.social-dex:hover { background:#0f2030; }
.social-tg  { background:#0b1723; color:#63c3ff; }

/* polaroid */
.polaroid{
  background:var(--paper-hi); padding:12px 12px 44px;
  border:2px solid #000; box-shadow:8px 10px 0 rgba(0,0,0,.75), 0 22px 42px rgba(0,0,0,.6);
  transition:transform .4s cubic-bezier(.2,.85,.3,1.3);
}
.polaroid img{ display:block; width:100%; height:100%; object-fit:cover; filter:sepia(.16) contrast(1.05); }
.polaroid figcaption{
  font-family:'Special Elite',monospace; color:#2a2118;
  font-size:.72rem; letter-spacing:.08em; text-align:center; padding-top:.6rem;
}
.polaroid:hover{ transform:rotate(0deg) scale(1.06) translateZ(60px) !important; z-index:8; }

/* ── reveal on scroll ──────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(46px) scale(.985); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.85,.3,1.05); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.1s } .rv-d2{ transition-delay:.2s }
.rv-d3{ transition-delay:.3s } .rv-d4{ transition-delay:.4s }

/* footer */
.footer{ border-top:var(--stroke) solid #000; background:rgba(8,7,10,.85); }

/* scrollbar */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#0b0a09; }
::-webkit-scrollbar-thumb{ background:var(--tweed); border:2px solid #000; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }
::selection{ background:var(--gold); color:#12100c; }

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .hero-deck{ transform:none; }
  .hero-figure{ transform:none; }
  .fan-a,.fan-b,.fan-c{ transform:none; }
  .step:nth-child(odd),.step:nth-child(even){ transform:none; }
  .monitor{ transform:none; }
  .banner-frame{ transform:none; }
  .lens{ display:none; }
}
@media (max-width:640px){
  :root{ --stroke:2.5px; }
  .panel{ box-shadow:6px 6px 0 #000; }
  .chip{ display:none; }
  .ticker{ transform:rotate(-1deg) scale(1.06); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}