/* ══════════════════════════════════════════════════════════════════
   FLYING CAT — comic ink system
   ══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#14110f;
  --paper:#f7ecd4;
  --pop:#ff7a18;
  --gold:#ffc23c;
  --zap:#2ec8ff;
  --grape:#7b4bff;
  --blood:#e8332a;

  --bw:4px;                       /* border weight */
  --sh: 8px 8px 0 var(--ink);     /* hard comic shadow */
  --sh-sm: 5px 5px 0 var(--ink);
  --sh-lg: 14px 14px 0 var(--ink);

  --halftone: radial-gradient(circle at center, rgba(0,0,0,.55) 1.1px, transparent 1.4px);
}

*{ -webkit-tap-highlight-color: transparent; }
body{ background:var(--ink); }
::selection{ background:var(--pop); color:var(--ink); }

/* scrollbar */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#0c0a09; }
::-webkit-scrollbar-thumb{ background:var(--pop); border:3px solid #0c0a09; border-radius:99px; }

/* ── global grain / halftone veil ────────────────────────────────── */
.fx-grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background-image:var(--halftone);
  background-size:4px 4px;
  opacity:.13;
  mix-blend-mode:multiply;
}

/* ══════════════════════════ SECTION SHELL ═══════════════════════ */
.sec{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
/* torn / jagged top edge on every section after the hero */
.sec + .sec::before,
.sec-about::before{
  content:"";
  position:absolute; inset-inline:0; top:-2px; height:22px; z-index:6;
  background:
    linear-gradient(-45deg, transparent 50%, var(--ink) 50%) 0 0/26px 26px repeat-x,
    linear-gradient( 45deg, transparent 50%, var(--ink) 50%) 0 0/26px 26px repeat-x;
  transform:scaleY(-1);
  pointer-events:none;
}

.bg-layer{
  position:absolute; inset:-14% 0 -14% 0; z-index:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  will-change:transform;
}
.bg-layer--soft{ filter:saturate(.75) blur(2px); }

.bg-wash{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.bg-wash--warm{
  background:
    radial-gradient(120% 90% at 22% 45%, rgba(255,178,60,.28), transparent 62%),
    linear-gradient(100deg, rgba(20,17,15,.94) 0%, rgba(20,17,15,.80) 38%, rgba(20,17,15,.32) 66%, rgba(20,17,15,.62) 100%);
}
.bg-wash--paper{
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(247,236,212,.93) 22%, rgba(247,236,212,.90) 78%, var(--paper) 100%);
}
.bg-wash--dark{
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(46,200,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(12,10,9,.93) 0%, rgba(12,10,9,.80) 45%, rgba(12,10,9,.95) 100%);
}
.bg-wash--storm{
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(232,51,42,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,12,16,.94) 0%, rgba(10,12,16,.86) 50%, rgba(10,12,16,.96) 100%);
}
.bg-wash--sun{
  background:
    radial-gradient(90% 70% at 70% 40%, rgba(255,194,60,.35), transparent 62%),
    linear-gradient(180deg, var(--paper) 0%, rgba(247,236,212,.88) 20%, rgba(247,236,212,.86) 80%, var(--paper) 100%);
}
.bg-wash--space{
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(123,75,255,.30), transparent 65%),
    linear-gradient(180deg, rgba(8,9,20,.90) 0%, rgba(8,9,20,.72) 45%, rgba(8,9,20,.94) 100%);
}

/* radiating speed lines */
.speedlines{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.30;
  background:repeating-conic-gradient(from 0deg at 50% 45%,
    rgba(255,255,255,.55) 0deg .35deg, transparent .35deg 3.1deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 34%, #000 88%);
          mask-image:radial-gradient(closest-side, transparent 34%, #000 88%);
}
.speedlines--tight{
  opacity:.16;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(46,200,255,.7) 0deg .3deg, transparent .3deg 2.2deg);
}

/* starfield for join us */
.starfield{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78% 14%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 42% 76%, #cfe6ff, transparent),
    radial-gradient(1.2px 1.2px at 88% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 28% 54%, #ffe6b8, transparent),
    radial-gradient(1.3px 1.3px at 64% 34%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 6% 78%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 94% 86%, #d8c9ff, transparent);
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.35} to{opacity:.75} }

/* 3D stage */
.stage{ perspective:1500px; perspective-origin:50% 42%; }

/* ══════════════════════════ NAV ═══════════════════════════ */
.nav-bar{
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:16px;
  box-shadow:var(--sh-sm);
  transition:box-shadow .3s, transform .3s;
}
#nav.is-stuck .nav-bar{ box-shadow:4px 4px 0 var(--ink); }

.nav-logo{
  display:block; width:44px; height:44px; flex:none;
  border:3px solid var(--ink); border-radius:12px; overflow:hidden;
  background:var(--gold);
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-4deg);
  transition:transform .25s;
}
.group:hover .nav-logo{ transform:rotate(4deg) scale(1.06); }
.nav-logo--lg{ width:60px; height:60px; }

.nav-link{
  display:inline-block; padding:.5rem .85rem; border-radius:10px;
  font-weight:800; font-size:.9rem; letter-spacing:.02em;
  border:3px solid transparent;
  transition:.18s;
}
.nav-link:hover{ background:var(--gold); border-color:var(--ink); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }

/* ══════════════════════════ BUTTONS ═══════════════════════ */
.btn-pop,.btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'Luckiest Guy',cursive; letter-spacing:.04em;
  padding:.62rem 1.15rem; border-radius:12px;
  border:var(--bw) solid var(--ink);
  box-shadow:var(--sh-sm);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s, background .2s;
  white-space:nowrap;
}
.btn-pop{ background:var(--pop); color:var(--ink); }
.btn-pop:hover{ background:var(--gold); transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.btn-pop:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }

.btn-ghost{ background:var(--paper); color:var(--ink); }
.btn-ghost:hover{ background:var(--zap); transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.btn-ghost:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-ghost--light{ background:var(--paper); }

.btn-sm{ font-size:.8rem; padding:.5rem .9rem; }
.btn-lg{ font-size:1.02rem; padding:.85rem 1.5rem; border-radius:14px; }

.btn-ico{
  display:inline-grid; place-items:center; width:42px; height:42px; flex:none;
  border:3px solid var(--ink); border-radius:12px;
  background:var(--paper); color:var(--ink); font-size:1.05rem;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .16s, box-shadow .16s, background .2s;
}
.btn-ico:hover{ background:var(--gold); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.btn-ico--dark{ background:#201c18; color:var(--paper); border-color:var(--paper); box-shadow:3px 3px 0 rgba(247,236,212,.35); }
.btn-ico--dark:hover{ background:var(--pop); color:var(--ink); }

/* ══════════════════════════ HERO ═══════════════════════════ */
.sec-hero{ min-height:100svh; display:flex; align-items:center; }

.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--blood); color:var(--paper);
  font-family:'Luckiest Guy',cursive; font-size:.72rem; letter-spacing:.2em;
  padding:.42rem .9rem; border:3px solid var(--ink); border-radius:99px;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-1.5deg);
}

.title-xl{
  font-size:clamp(3.6rem,11vw,8.6rem);
  color:var(--paper);
  letter-spacing:.02em;
  -webkit-text-stroke:8px var(--ink);
  paint-order:stroke fill;
  text-shadow:10px 10px 0 rgba(0,0,0,.45);
  filter:drop-shadow(0 0 24px rgba(255,122,24,.25));
}
.title-xl--pop{ color:var(--pop); margin-left:.06em; }

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:800; font-size:.82rem; letter-spacing:.06em;
  padding:.4rem .85rem; border:3px solid var(--ink); border-radius:99px;
  box-shadow:3px 3px 0 var(--ink);
  color:var(--ink);
}
.chip--gold{ background:var(--gold); }
.chip--zap{ background:var(--zap); }
.chip b{ font-family:'Luckiest Guy',cursive; letter-spacing:.05em; }

/* speech bubble */
.bubble{
  position:relative;
  background:var(--paper); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:22px;
  padding:1.1rem 1.35rem;
  box-shadow:var(--sh);
}
.bubble::after{
  content:""; position:absolute; left:38px; bottom:-19px;
  width:0; height:0;
  border-left:20px solid transparent;
  border-right:8px solid transparent;
  border-top:20px solid var(--ink);
}
.bubble::before{
  content:""; position:absolute; left:43px; bottom:-11px; z-index:1;
  width:0; height:0;
  border-left:14px solid transparent;
  border-right:6px solid transparent;
  border-top:14px solid var(--paper);
}
.bubble--center::after{ left:50%; margin-left:-14px; }
.bubble--center::before{ left:50%; margin-left:-10px; }

/* contract bar */
.ca-bar{
  display:flex; align-items:center; gap:.6rem;
  background:#1c1815; color:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:14px;
  padding:.45rem .5rem .45rem .55rem;
  box-shadow:var(--sh-sm);
}
.ca-bar--flat{ background:#1c1815; }
.ca-tag{
  font-family:'Luckiest Guy',cursive; font-size:.75rem; letter-spacing:.1em;
  background:var(--pop); color:var(--ink);
  padding:.3rem .6rem; border-radius:8px; border:2px solid var(--ink); flex:none;
}
.ca-text{
  flex:1 1 auto; min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem; letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#e9dcc2;
}
.ca-copy{
  display:inline-flex; align-items:center; gap:.4rem; flex:none;
  font-family:'Luckiest Guy',cursive; font-size:.75rem; letter-spacing:.06em;
  background:var(--gold); color:var(--ink);
  padding:.42rem .75rem; border:3px solid var(--ink); border-radius:10px;
  transition:.16s;
}
.ca-copy:hover{ background:var(--zap); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.ca-copy.is-done{ background:#59d97a; }

/* ── hero 3D deck ── */
.hero-deck{
  position:relative;
  min-height:clamp(320px,46vw,520px);
  transform-style:preserve-3d;
}
.deck-card{
  position:absolute;
  border:var(--bw) solid var(--ink);
  border-radius:18px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--sh-lg);
  transform-style:preserve-3d;
}
.deck-card img{ display:block; width:100%; height:100%; object-fit:cover; }

.deck-card--front{
  left:12%; top:6%; width:66%; aspect-ratio:1/1; z-index:3;
  transform:rotateY(-13deg) rotateX(5deg) rotate(-3deg) translateZ(70px);
}
.deck-card--back-a{
  left:-4%; top:34%; width:44%; aspect-ratio:1/1; z-index:2;
  transform:rotateY(-20deg) rotate(-8deg) translateZ(-40px);
  opacity:.96;
}
.deck-card--back-b{
  right:-6%; top:2%; width:46%; aspect-ratio:1/1; z-index:1;
  transform:rotateY(16deg) rotate(7deg) translateZ(-70px);
  opacity:.94;
}
@media (max-width:1023px){
  .deck-card--front{ left:14%; top:8%; width:62%; }
  .deck-card--back-a{ left:0; top:40%; width:40%; }
  .deck-card--back-b{ right:0; top:4%; width:42%; }
}

.panel-cap{
  position:absolute; left:0; top:0;
  background:var(--gold); color:var(--ink);
  font-family:'Luckiest Guy',cursive; font-size:.66rem; letter-spacing:.1em;
  padding:.32rem .6rem;
  border-right:3px solid var(--ink); border-bottom:3px solid var(--ink);
  border-bottom-right-radius:10px;
}

/* sound-effect words */
.sfx{
  position:absolute; z-index:6;
  font-family:'Bangers',cursive;
  color:var(--gold);
  -webkit-text-stroke:5px var(--ink);
  paint-order:stroke fill;
  text-shadow:5px 5px 0 rgba(0,0,0,.5);
  pointer-events:none;
}
.sfx--a{
  right:-2%; top:-4%;
  font-size:clamp(1.7rem,4.4vw,3.2rem);
  transform:rotate(11deg);
  animation:sfxPop 3.4s ease-in-out infinite;
}
.sfx--b{
  left:-6%; bottom:2%;
  color:var(--zap);
  font-size:clamp(1.5rem,3.8vw,2.7rem);
  transform:rotate(-9deg);
  animation:sfxPop 3.4s ease-in-out .9s infinite;
}
@keyframes sfxPop{
  0%,100%{ transform:rotate(var(--r,10deg)) scale(1); }
  50%{ transform:rotate(var(--r,10deg)) scale(1.09); }
}
.sfx--a{ --r:11deg; }
.sfx--b{ --r:-9deg; }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; z-index:10;
  translate:-50% 0;
  display:grid; place-items:center; width:46px; height:46px;
  border:3px solid var(--paper); border-radius:99px;
  color:var(--paper); font-size:1.1rem;
  animation:bobble 1.9s ease-in-out infinite;
}
@keyframes bobble{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(9px) } }

/* ══════════════════════════ MARQUEE ═══════════════════════ */
.marquee{
  position:relative; z-index:20;
  background:var(--pop);
  border-block:var(--bw) solid var(--ink);
  overflow:hidden;
  padding:.6rem 0;
  transform:rotate(-1.1deg) scaleX(1.06);
  margin-block:-14px;
}
.marquee__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:slide 26s linear infinite;
}
.marquee__track span{
  font-family:'Bangers',cursive; font-size:1.35rem; letter-spacing:.08em;
  color:var(--ink); white-space:nowrap;
}
.marquee__track i{ color:var(--ink); font-size:.7rem; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ══════════════════════════ SECTION HEADS ═════════════════ */
.sec-head{ max-width:56rem; }
.issue-tag{
  display:inline-block;
  background:var(--blood); color:var(--paper);
  font-family:'Luckiest Guy',cursive; font-size:.7rem; letter-spacing:.22em;
  padding:.4rem .9rem; border:3px solid var(--ink); border-radius:8px;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-2deg);
}
.issue-tag--zap{ background:var(--zap); color:var(--ink); }
.issue-tag--blood{ background:var(--blood); }
.issue-tag--grape{ background:var(--grape); color:var(--paper); }
.issue-tag--pop{ background:var(--pop); color:var(--ink); }

.head-xl{
  margin-top:1.1rem;
  font-family:'Bangers',cursive;
  font-size:clamp(2.6rem,7.4vw,5.4rem);
  line-height:.9; letter-spacing:.015em;
  color:var(--paper);
  -webkit-text-stroke:6px var(--ink);
  paint-order:stroke fill;
  text-shadow:7px 7px 0 rgba(0,0,0,.35);
}
.head-xl--light{ color:var(--gold); }
.head-xl--ink{ color:var(--blood); }
.head-sub{
  margin-top:1rem; font-size:1.05rem; font-weight:600; max-width:44rem;
  color:#3a322c;
}
.head-sub--light{ color:rgba(247,236,212,.78); }
.sec-about .head-xl{ color:var(--pop); }

/* narration caption box */
.narration{
  position:relative;
  background:var(--gold);
  border:var(--bw) solid var(--ink);
  border-radius:6px;
  padding:1.6rem 1.7rem;
  box-shadow:var(--sh);
  transform:rotate(-.5deg);
}
.narration p{ font-size:1.06rem; font-weight:600; line-height:1.62; color:var(--ink); }
.drop-cap{
  float:left; font-family:'Bangers',cursive; font-size:3.4rem; line-height:.78;
  padding-right:.5rem; color:var(--blood);
  -webkit-text-stroke:2.5px var(--ink); paint-order:stroke fill;
}

/* ══════════════════════════ COMIC GRID ═══════════════════ */
.comic-grid{
  display:grid;
  gap:1.6rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){
  .comic-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:minmax(0,auto);
  }
  .cpanel--tall{ grid-column:span 2; grid-row:span 2; }
  .cpanel--wide{ grid-column:span 2; }
}
@media (max-width:640px){
  .comic-grid{ grid-template-columns:1fr; }
}

.cpanel{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--sh);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s;
}
.cpanel img{
  display:block; width:100%; height:100%; flex:1 1 auto;
  min-height:190px; object-fit:cover;
  filter:contrast(1.06) saturate(1.06);
  transition:transform .5s ease;
}
.cpanel--tall img{ min-height:340px; }
.cpanel:hover{ box-shadow:16px 16px 0 var(--ink); }
.cpanel:hover img{ transform:scale(1.05); }

.panel-foot{
  border-top:var(--bw) solid var(--ink);
  background:var(--paper);
  padding:1rem 1.1rem 1.15rem;
}
.panel-foot h3{
  font-family:'Bangers',cursive; font-size:1.5rem; letter-spacing:.03em; color:var(--ink);
}
.panel-foot p{ margin-top:.25rem; font-size:.92rem; font-weight:600; color:#4a4038; line-height:1.5; }

/* trait cards */
.trait{
  display:flex; flex-direction:column; gap:.35rem;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:14px;
  padding:1.2rem 1.15rem;
  box-shadow:var(--sh-sm);
  transition:transform .2s, box-shadow .2s, background .25s;
}
.trait:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink); background:var(--gold); }
.trait i{ font-size:1.7rem; color:var(--blood); }
.trait b{ font-family:'Luckiest Guy',cursive; letter-spacing:.06em; font-size:1.05rem; }
.trait span{ font-size:.88rem; font-weight:600; color:#4a4038; }

/* ══════════════════════════ HOW TO BUY ═══════════════════ */
.step-rail{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  transform-style:preserve-3d;
}
.step{
  position:relative;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:16px;
  padding:2.2rem 1.3rem 1.4rem;
  box-shadow:var(--sh);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s;
}
.step:hover{ box-shadow:16px 16px 0 var(--ink); }
.step--fin{ background:var(--gold); }

.step-num{
  position:absolute; top:-26px; left:-14px;
  display:grid; place-items:center;
  width:64px; height:64px;
  font-family:'Luckiest Guy',cursive; font-size:1.55rem; color:var(--paper);
  background:var(--blood);
  border:var(--bw) solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  clip-path:polygon(50% 0,62% 14%,79% 8%,82% 26%,98% 32%,88% 47%,100% 62%,83% 68%,84% 86%,66% 82%,54% 98%,42% 83%,25% 90%,22% 72%,5% 66%,15% 50%,2% 36%,19% 29%,17% 11%,36% 15%);
  border-radius:4px;
  transform:rotate(-8deg);
}
.step-ico{ font-size:2rem; color:var(--pop); display:block; margin-top:.4rem; }
.step--fin .step-ico{ color:var(--blood); }
.step h3{ margin-top:.55rem; font-family:'Bangers',cursive; font-size:1.7rem; letter-spacing:.03em; }
.step p{ margin-top:.4rem; font-size:.94rem; font-weight:600; line-height:1.55; color:#4a4038; }
.step-link{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.9rem;
  font-family:'Luckiest Guy',cursive; font-size:.76rem; letter-spacing:.08em;
  color:var(--ink); background:var(--zap);
  padding:.35rem .7rem; border:3px solid var(--ink); border-radius:8px;
  transition:.16s;
}
.step-link:hover{ background:var(--pop); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.step-link--mute{ background:transparent; border-style:dashed; opacity:.7; }

.buy-cta{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.5rem;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:18px;
  padding:1.5rem;
  box-shadow:var(--sh);
}

/* ══════════════════════════ CHART ═══════════════════════ */
.chart-frame{
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--sh-lg);
  transform-style:preserve-3d;
}
.chart-bar{
  display:flex; align-items:center; gap:.9rem;
  background:var(--ink);
  padding:.7rem 1rem;
  border-bottom:var(--bw) solid var(--ink);
}
.chart-dots{ display:flex; gap:.4rem; flex:none; }
.chart-dots i{ width:12px; height:12px; border-radius:99px; background:var(--blood); border:2px solid rgba(0,0,0,.4); }
.chart-dots i:nth-child(2){ background:var(--gold); }
.chart-dots i:nth-child(3){ background:#59d97a; }
.chart-title{
  font-family:'Luckiest Guy',cursive; font-size:.82rem; letter-spacing:.08em;
  color:var(--paper); display:inline-flex; align-items:center; gap:.45rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chart-open{
  margin-left:auto; flex:none;
  font-family:'Luckiest Guy',cursive; font-size:.72rem; letter-spacing:.08em;
  background:var(--pop); color:var(--ink);
  padding:.32rem .7rem; border:2px solid var(--paper); border-radius:8px;
  transition:.16s;
}
.chart-open:hover{ background:var(--gold); }

.chart-screen{
  position:relative;
  background:#0b0d12;
  height:clamp(420px,64vh,720px);
}
.chart-screen iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.chart-fallback{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; text-align:center; padding:2rem;
  background:#0b0d12; color:rgba(247,236,212,.8);
}
.chart-fallback i{ font-size:2.4rem; color:var(--pop); }
.chart-fallback p{ font-weight:600; max-width:26rem; }

/* ══════════════════ CAUGHT ON CAMERA (TIKTOK) ════════════ */
.sec-viral .head-sub{ color:#3a322c; }

.tok-panel{
  position:relative;
  max-width:420px; width:100%; margin-inline:auto;
  background:var(--ink);
  border:var(--bw) solid var(--ink);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--sh-lg);
  transform:rotate(-2deg);
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1), box-shadow .45s;
}
.tok-panel:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:18px 18px 0 var(--ink); }

.tok-notch{
  display:flex; align-items:center; gap:.45rem;
  background:var(--blood); color:var(--paper);
  font-family:'Luckiest Guy',cursive; font-size:.7rem; letter-spacing:.16em;
  padding:.55rem 1rem;
}
.tok-notch i{ animation:blink 1.4s steps(2,start) infinite; }
@keyframes blink{ 50%{ opacity:.25 } }

.tok-screen{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:520px;
  background:#0d0d0f;
  padding:.5rem;
}
.tok-embed{ width:100%; }
.tok-embed blockquote.tiktok-embed{ margin:0 auto !important; min-width:0 !important; max-width:100% !important; }
.tok-embed iframe{ max-width:100% !important; border-radius:10px; }

.tok-loading{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:rgba(247,236,212,.7); font-weight:700; font-size:.9rem;
  padding:3rem 1rem; text-align:center;
}
.tok-loading i{ font-size:2rem; color:var(--pop); animation:spin 1.4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

.tok-foot{
  display:flex; align-items:center; gap:.55rem;
  background:var(--gold); color:var(--ink);
  padding:.7rem 1rem;
  border-top:var(--bw) solid var(--ink);
  font-family:'Luckiest Guy',cursive; font-size:.8rem; letter-spacing:.06em;
}
.tok-foot > i{ font-size:1.1rem; }
.tok-open{
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--ink); color:var(--gold);
  font-size:.7rem; letter-spacing:.1em;
  padding:.3rem .6rem; border-radius:8px;
  transition:.16s;
}
.tok-open:hover{ background:var(--blood); color:var(--paper); }

/* thought bubble variant */
.bubble--think{ border-radius:30px; }
.bubble--think::after,
.bubble--think::before{ display:none; }

.fact{
  display:flex; align-items:flex-start; gap:.75rem;
  background:var(--paper);
  border:3px solid var(--ink); border-radius:12px;
  padding:.75rem .95rem;
  box-shadow:var(--sh-sm);
  font-size:.95rem; font-weight:600; color:#4a4038;
  transition:transform .18s, box-shadow .18s, background .22s;
}
.fact:hover{ transform:translateX(6px); background:var(--zap); box-shadow:8px 8px 0 var(--ink); }
.fact i{ font-size:1.15rem; color:var(--blood); margin-top:.1rem; }
.fact b{ color:var(--ink); }

.sfx--static{
  position:static; display:inline-block; margin-bottom:.6rem;
  color:var(--blood);
  font-size:clamp(1.6rem,4vw,2.6rem);
  transform:rotate(-4deg);
  animation:none;
}

/* ══════════════════════════ JOIN US ═══════════════════════ */
.banner-panel{
  position:relative;
  display:inline-block; max-width:100%;
  border:var(--bw) solid var(--ink);
  border-radius:18px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--sh-lg);
  transform:rotate(-1.4deg);
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.34,1.4,.64,1);
}
.banner-panel:hover{ transform:rotate(0deg) scale(1.015); }
.banner-panel img{ display:block; width:100%; height:auto; }
.banner-panel figcaption{
  background:var(--ink); color:var(--gold);
  font-family:'Luckiest Guy',cursive; font-size:.75rem; letter-spacing:.2em;
  padding:.55rem 1rem;
  border-top:var(--bw) solid var(--ink);
}

.social-btn{
  display:inline-flex; align-items:center; gap:.85rem; text-align:left;
  background:var(--paper); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:16px;
  padding:.85rem 1.3rem;
  box-shadow:var(--sh-sm);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, background .22s;
}
.social-btn i{ font-size:1.45rem; }
.social-btn b{ display:block; font-family:'Luckiest Guy',cursive; font-size:.92rem; letter-spacing:.05em; line-height:1.15; }
.social-btn small{ display:block; font-size:.74rem; font-weight:700; opacity:.65; }
.social-btn:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink); }
.social-btn--x:hover{ background:var(--ink); color:var(--paper); }
.social-btn--pump:hover{ background:var(--pop); }
.social-btn--dex:hover{ background:var(--zap); }
.social-btn--tg:hover{ background:#29a9eb; color:var(--paper); }

/* ══════════════════════════ FOOTER ═══════════════════════ */
.footer{
  position:relative; z-index:10;
  background:var(--ink);
  border-top:var(--bw) solid var(--pop);
}

/* ══════════════════════════ TOAST ═══════════════════════ */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:99;
  translate:-50% 120px;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold); color:var(--ink);
  font-family:'Luckiest Guy',cursive; font-size:.85rem; letter-spacing:.08em;
  padding:.7rem 1.2rem;
  border:var(--bw) solid var(--ink); border-radius:12px;
  box-shadow:var(--sh-sm);
  opacity:0; pointer-events:none;
  transition:translate .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
.toast.is-on{ translate:-50% 0; opacity:1; }

/* ══════════════════════════ REVEAL / 3D SCROLL ═══════════ */
.tilt-in{
  opacity:0;
  transform:perspective(1200px) rotateX(16deg) translateY(46px) scale(.965);
  transform-origin:50% 100%;
  transition:opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
}
.tilt-in.is-in{
  opacity:1;
  transform:perspective(1200px) rotateX(0) translateY(0) scale(1);
}

/* scroll-driven panel tilt (desktop only, set by JS via --sr) */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .cpanel.is-in,
  .step.is-in{
    transform:rotateY(calc(var(--tilt,0deg) * var(--sr,0))) rotateX(calc(var(--sr,0) * 3deg));
  }
  .cpanel.is-in:hover,
  .step.is-in:hover{
    transform:rotateY(0deg) rotateX(0deg) translateY(-6px) scale(1.02);
  }
}

@media (prefers-reduced-motion:reduce){
  .tilt-in{ opacity:1; transform:none; transition:none; }
  .marquee__track,.sfx,.scroll-cue,.starfield{ animation:none; }
  .bg-layer{ transform:none !important; }
}

/* small screens: calm the 3D down */
@media (max-width:768px){
  :root{ --sh:6px 6px 0 var(--ink); --sh-lg:8px 8px 0 var(--ink); }
  .title-xl{ -webkit-text-stroke:5px var(--ink); }
  .head-xl{ -webkit-text-stroke:4px var(--ink); }
  .deck-card--front,.deck-card--back-a,.deck-card--back-b{ transform:rotate(-3deg); }
  .deck-card--back-a{ transform:rotate(-8deg); }
  .deck-card--back-b{ transform:rotate(7deg); }
  .marquee{ transform:rotate(-1.4deg) scaleX(1.1); }
}