/* ==========================================================================
   CYBERCOIN — "THE WALL" comic / 3D-perspective theme
   ========================================================================== */

:root{
  --ink:#04060b;
  --ink-2:#080c15;
  --panel:#0b111d;
  --panel-2:#0e1626;

  --gold:#f5b921;
  --gold-hi:#ffe08a;
  --gold-dk:#8a6205;

  --blue:#1b5bff;
  --blue-hi:#4d8bff;
  --cyan:#22e1ff;
  --green:#4ce22f;
  --red:#e4262f;

  --line:#1b2740;
  --txt:#e9eef8;
  --dim:#8a99b5;

  --outline:4px;
  --shadow-hard: 10px 10px 0 #000;

  --f-disp:'Anton', 'Arial Black', Impact, sans-serif;
  --f-comic:'Bungee', 'Anton', Impact, sans-serif;
  --f-mono:'Share Tech Mono', ui-monospace, Consolas, monospace;
  --f-body:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  padding-bottom:44px;              /* room for the un-closable warning bar */
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ==========================================================================
   1. BACKGROUND STACK (image + grid floor + halftone + scanlines + shine)
   ========================================================================== */

.bgfx{ position:fixed; inset:0; z-index:-10; overflow:hidden; pointer-events:none; }

/* the artwork, pushed way back */
.bgfx__art{
  position:absolute; inset:-6%;
  background:url("../07-this-coin-has-another-side.webp") center/cover no-repeat;
  filter:saturate(.7) contrast(1.05) brightness(.42) blur(2px);
  opacity:.5;
  transform:scale(1.06);
  animation:bgDrift 44s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  from{ transform:scale(1.06) translate3d(-1.2%,-.8%,0); }
  to  { transform:scale(1.12) translate3d(1.2%,.8%,0); }
}

/* dark wash so text always wins */
.bgfx__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(27,91,255,.16), transparent 60%),
    radial-gradient(90% 70% at 85% 90%, rgba(245,185,33,.12), transparent 62%),
    linear-gradient(180deg, rgba(4,6,11,.72) 0%, rgba(4,6,11,.90) 45%, rgba(4,6,11,.96) 100%);
}

/* the receding perspective floor — the spine of the whole design */
.bgfx__floor{
  position:absolute; left:-50%; right:-50%; bottom:-6vh; height:62vh;
  perspective:220px; perspective-origin:50% 0%;
  opacity:.6;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.45) 45%,transparent 88%);
          mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.45) 45%,transparent 88%);
}
.bgfx__floor i{
  position:absolute; inset:-100% 0 -30% 0;
  transform:rotateX(72deg);
  transform-origin:50% 100%;
  background:
    linear-gradient(to right, rgba(34,225,255,.32) 1px, transparent 1px) 0 0/70px 70px,
    linear-gradient(to bottom, rgba(245,185,33,.22) 1px, transparent 1px) 0 0/70px 70px;
  animation:floorRun 5.5s linear infinite;
}
@keyframes floorRun{ from{ background-position:0 0,0 0; } to{ background-position:0 0,0 70px; } }

/* halftone dots — the comic texture */
.bgfx__dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
  background-size:5px 5px;
  opacity:.16;
  mix-blend-mode:overlay;
}

/* CRT scanlines */
.bgfx__scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  opacity:.5;
}

/* THE SHINE — a wide specular bar that sweeps the whole page */
.bgfx__shine{
  position:absolute; top:-60%; left:-70%;
  width:55%; height:240%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.045) 30%,
    rgba(255,224,138,.20) 48%,
    rgba(34,225,255,.14) 58%,
    rgba(255,255,255,.045) 72%,
    transparent 100%);
  filter:blur(14px);
  transform:rotate(18deg);
  mix-blend-mode:screen;
  animation:shineSweep 9s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes shineSweep{
  0%   { left:-70%; opacity:0; }
  12%  { opacity:1; }
  70%  { opacity:1; }
  100% { left:150%; opacity:0; }
}

.bgfx__vig{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.78) 100%);
}

/* ==========================================================================
   2. TYPE + SHARED COMIC PARTS
   ========================================================================== */

.disp{
  font-family:var(--f-disp);
  font-weight:400;
  letter-spacing:.01em;
  line-height:.9;
  text-transform:uppercase;
}

/* extruded comic headline (white face, black block extrude) */
.extrude{
  color:#fff;
  -webkit-text-fill-color:currentColor;
  text-shadow:
    2px 2px 0 #000, 4px 4px 0 #000, 6px 6px 0 #000,
    8px 8px 0 #000, 10px 10px 0 rgba(0,0,0,.75),
    0 0 34px rgba(34,225,255,.28);
}
.extrude--gold{
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 46%,#a8730a 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(3px 3px 0 #000) drop-shadow(6px 6px 0 #000) drop-shadow(0 0 26px rgba(245,185,33,.4));
}
.extrude--red{
  color:var(--red);
  -webkit-text-fill-color:currentColor;
  text-shadow:2px 2px 0 #000,4px 4px 0 #000,6px 6px 0 #000,0 0 30px rgba(228,38,47,.45);
}

/* comic tag / kicker chip */
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.28em;
  text-transform:uppercase; color:#04060b;
  background:var(--gold);
  border:3px solid #000;
  box-shadow:5px 5px 0 #000;
  padding:.34rem .8rem .28rem;
  transform:skewX(-10deg);
}
.kicker span{ transform:skewX(10deg); display:block; }
.kicker--cyan{ background:var(--cyan); }
.kicker--blue{ background:var(--blue); color:#fff; }
.kicker--red { background:var(--red);  color:#fff; }

/* the base comic panel: thick outline + hard offset shadow + halftone */
.pnl{
  position:relative;
  background:linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 55%, #060a12 100%);
  border:var(--outline) solid #000;
  box-shadow:var(--shadow-hard), inset 0 0 0 1px rgba(34,225,255,.14);
  overflow:hidden;
}
.pnl::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.1px);
  background-size:4px 4px; opacity:.09;
}
.pnl::after{
  content:''; position:absolute; top:-120%; left:-60%;
  width:45%; height:340%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform:rotate(18deg); pointer-events:none;
  transition:left .75s cubic-bezier(.3,0,.2,1);
}
.pnl:hover::after{ left:130%; }

/* corner brackets used on data panels */
.brk{ position:absolute; width:16px; height:16px; border:3px solid var(--cyan); opacity:.8; }
.brk.tl{ top:8px;   left:8px;  border-right:0; border-bottom:0; }
.brk.tr{ top:8px;   right:8px; border-left:0;  border-bottom:0; }
.brk.bl{ bottom:8px;left:8px;  border-right:0; border-top:0; }
.brk.br{ bottom:8px;right:8px; border-left:0;  border-top:0; }

/* redaction bar motif */
.redact{
  display:inline-block; height:.9em; vertical-align:-.08em;
  background:repeating-linear-gradient(90deg,#12161f 0 8px,#0a0d13 8px 16px);
  border:2px solid var(--red);
  box-shadow:inset 0 0 12px rgba(228,38,47,.35);
}

/* buttons */
.btn{
  --bg:var(--gold); --fg:#04060b;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-comic); font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase;
  padding:.85rem 1.35rem;
  color:var(--fg); background:var(--bg);
  border:3px solid #000;
  box-shadow:7px 7px 0 #000;
  transform:skewX(-8deg);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  cursor:pointer; overflow:hidden;
}
.btn > *{ transform:skewX(8deg); }
.btn i{ font-size:1.15em; line-height:1; }
.btn:hover{ transform:skewX(-8deg) translate(-3px,-3px); box-shadow:11px 11px 0 #000; filter:brightness(1.08); }
.btn:active{ transform:skewX(-8deg) translate(4px,4px); box-shadow:2px 2px 0 #000; }
.btn::after{
  content:''; position:absolute; top:-120%; left:-70%; width:40%; height:340%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:rotate(18deg); transition:left .6s ease;
}
.btn:hover::after{ left:140%; }
.btn--blue { --bg:var(--blue);  --fg:#fff; }
.btn--cyan { --bg:var(--cyan);  --fg:#04060b; }
.btn--ghost{ --bg:transparent;  --fg:#fff; border-color:var(--cyan); box-shadow:7px 7px 0 rgba(34,225,255,.28); }
.btn--ghost:hover{ box-shadow:11px 11px 0 rgba(34,225,255,.28); }

/* ==========================================================================
   3. NAV
   ========================================================================== */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem clamp(.9rem,3vw,2.2rem);
  background:linear-gradient(180deg, rgba(4,6,11,.94), rgba(4,6,11,.62));
  border-bottom:3px solid #000;
  box-shadow:0 4px 0 rgba(245,185,33,.35), 0 14px 34px rgba(0,0,0,.7);
  backdrop-filter:blur(10px);
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.nav__brand img{
  width:46px; height:46px; object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(34,225,255,.55));
  transition:transform .3s ease;
}
.nav__brand:hover img{ transform:rotate(-8deg) scale(1.08); }
.nav__name{ font-family:var(--f-disp); font-size:1.35rem; letter-spacing:.02em; line-height:1; }
.nav__name b{ color:var(--gold); font-weight:400; }
.nav__tick{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.3em; color:var(--dim); }

.nav__links{ display:flex; align-items:center; gap:.25rem; }
.nav__links > a{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); padding:.5rem .7rem; border:2px solid transparent;
  transition:.18s ease;
}
.nav__links > a:hover{ color:#04060b; background:var(--cyan); border-color:#000; box-shadow:3px 3px 0 #000; }

.nav__burger{
  display:none; background:var(--gold); border:3px solid #000; box-shadow:4px 4px 0 #000;
  color:#04060b; font-size:1.25rem; line-height:1; padding:.45rem .6rem; cursor:pointer;
}

/* ==========================================================================
   4. SECTION SHELL — the tilted stage
   ========================================================================== */

.stage{
  position:relative;
  perspective:1500px;
  perspective-origin:50% 42%;
  padding:clamp(4.5rem,10vw,8rem) clamp(1rem,4vw,3rem);
}
.wrap{ width:min(1240px,100%); margin-inline:auto; }

/* section content sits on a plane that straightens as it enters view */
.plane{
  transform-style:preserve-3d;
  transform:rotateX(9deg) rotateY(var(--yaw,-7deg)) translateZ(-70px);
  opacity:0;
  transition:transform 1s cubic-bezier(.16,.84,.24,1), opacity .8s ease;
  will-change:transform;
}
.plane.in{ transform:rotateX(0) rotateY(0) translateZ(0); opacity:1; }
.plane--r{ --yaw:7deg; }

/* big section header with a ghost index number floating behind in 3D */
.shead{ position:relative; margin-bottom:clamp(2rem,4vw,3.4rem); }
.shead__no{
  position:absolute; top:-.42em; left:-.06em; z-index:0;
  font-family:var(--f-disp); font-size:clamp(6rem,17vw,15rem); line-height:.8;
  color:transparent; -webkit-text-stroke:2px rgba(34,225,255,.20);
  transform:translateZ(-120px) rotateY(-14deg);
  pointer-events:none; user-select:none;
}
.shead__in{ position:relative; z-index:1; display:flex; flex-direction:column; gap:.85rem; align-items:flex-start; }
.shead h2{ margin:0; font-size:clamp(2.4rem,7vw,5rem); transform:translateZ(40px); }
.shead p{
  margin:0; max-width:62ch; color:var(--dim); font-size:1.03rem;
  border-left:4px solid var(--gold); padding-left:1rem;
}

/* thin vertical rail label on the left edge of a section */
.rail{
  position:absolute; left:clamp(.2rem,1.4vw,1rem); top:22%;
  writing-mode:vertical-rl;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(34,225,255,.42);
  border-left:2px solid rgba(34,225,255,.3); padding-left:.5rem;
  pointer-events:none;
}
@media (max-width:1100px){ .rail{ display:none; } }

/* diagonal caution divider between sections */
.slash{
  height:22px;
  background:repeating-linear-gradient(-45deg,var(--gold) 0 16px,#04060b 16px 32px);
  border-top:3px solid #000; border-bottom:3px solid #000;
  opacity:.85;
}
.slash--blue{ background:repeating-linear-gradient(-45deg,var(--blue) 0 16px,#04060b 16px 32px); }
.slash--red { background:repeating-linear-gradient(-45deg,var(--red)  0 16px,#04060b 16px 32px); }

/* ==========================================================================
   5. HERO
   ========================================================================== */

#hero{ padding-top:clamp(7rem,13vw,10rem); min-height:100vh; display:flex; align-items:center; }
.hero{
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.5rem,4vw,3.4rem); align-items:center;
  transform-style:preserve-3d;
}
.hero__copy{ transform:translateZ(60px); }
.hero h1{ margin:.9rem 0 .2rem; font-size:clamp(3.1rem,10vw,7.6rem); }
.hero h1 .l1{ display:block; }
.hero h1 .l2{ display:block; font-size:.44em; margin-top:.35em; }
.hero__lede{
  margin:1.5rem 0 0; max-width:52ch; color:#c3cee2; font-size:1.06rem;
  border-left:4px solid var(--cyan); padding-left:1.05rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:1.1rem; margin-top:2rem; }

/* CA bar */
.ca{
  margin-top:1.9rem; padding:.85rem 1rem;
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  background:#080c14; border:3px solid #000; box-shadow:7px 7px 0 rgba(34,225,255,.22);
}
.ca__k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.28em; color:var(--gold); }
.ca__v{
  font-family:var(--f-mono); font-size:.86rem; color:var(--txt);
  flex:1; min-width:180px; word-break:break-all; line-height:1.4;
}
.ca__btn{
  background:var(--cyan); color:#04060b; border:3px solid #000; box-shadow:4px 4px 0 #000;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.42rem .7rem; cursor:pointer; transition:.15s ease; white-space:nowrap;
}
.ca__btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000; }
.ca__btn.ok{ background:var(--green); }

/* floating character in a 3D lightbox */
.hero__art{
  position:relative; transform-style:preserve-3d;
  transform:rotateY(-12deg) rotateX(4deg);
  transition:transform .35s ease;
}
.hero__art:hover{ transform:rotateY(-6deg) rotateX(2deg) scale(1.02); }
.hero__box{
  position:relative; padding:clamp(1.2rem,3vw,2.4rem);
  border:var(--outline) solid #000;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(27,91,255,.32), transparent 70%),
    linear-gradient(170deg,#0d1626,#05080f);
  box-shadow:18px 18px 0 #000, 0 0 70px rgba(34,225,255,.22);
  clip-path:polygon(0 4%,4% 0,100% 0,100% 96%,96% 100%,0 100%);
}
.hero__box::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(34,225,255,.4) 1px,transparent 1.2px);
  background-size:7px 7px; opacity:.13;
}
.hero__coin{
  position:relative; z-index:2;
  width:100%; max-width:440px; margin-inline:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.85)) drop-shadow(0 0 34px rgba(34,225,255,.32));
  animation:hoverY 6s ease-in-out infinite;
  transform:translateZ(80px);
}
@keyframes hoverY{
  0%,100%{ transform:translateZ(80px) translateY(0); }
  50%    { transform:translateZ(80px) translateY(-16px); }
}

/* rotating rings behind the character */
.hero__ring{
  position:absolute; top:50%; left:50%; width:min(86%,420px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:2px dashed rgba(245,185,33,.35); border-radius:50%;
  animation:spin 26s linear infinite;
}
.hero__ring.two{ width:min(66%,320px); border-color:rgba(34,225,255,.32); animation-direction:reverse; animation-duration:18s; }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* floating HUD chips over the art */
.chip{
  position:absolute; z-index:4;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.34rem .6rem; background:#04060b; color:var(--cyan);
  border:3px solid #000; box-shadow:5px 5px 0 rgba(34,225,255,.3);
  animation:chipFloat 7s ease-in-out infinite;
}
@keyframes chipFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.chip--a{ top:6%;   left:-6%;  color:var(--red);   box-shadow:5px 5px 0 rgba(228,38,47,.35); animation-delay:-1.4s; }
.chip--b{ top:38%;  right:-7%; color:var(--gold);  box-shadow:5px 5px 0 rgba(245,185,33,.35); animation-delay:-3s; }
.chip--c{ bottom:9%;left:-4%;  color:var(--green); box-shadow:5px 5px 0 rgba(76,226,47,.32);  animation-delay:-4.6s; }

.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:clamp(2.4rem,5vw,3.6rem);
  border:3px solid #000; box-shadow:9px 9px 0 #000; background:#070b12;
}
.hero__stats div{ padding:1rem .8rem; border-right:2px solid var(--line); text-align:center; }
.hero__stats div:last-child{ border-right:0; }
.hero__stats b{ display:block; font-family:var(--f-disp); font-size:clamp(1.2rem,3vw,1.9rem); color:var(--gold); line-height:1; }
.hero__stats span{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.24em; color:var(--dim); }

/* ==========================================================================
   6. ABOUT — the evidence wall
   ========================================================================== */

.wall{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2.2vw,1.9rem); transform-style:preserve-3d; }

.card{ position:relative; transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.8,.3,1); }
.card:hover{ transform:translateZ(45px) rotateY(-4deg); }
.card__img{ position:relative; border:var(--outline) solid #000; overflow:hidden; box-shadow:var(--shadow-hard); height:100%; min-height:260px; }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.3,1); }
.card:hover .card__img img{ transform:scale(1.06); }
.card__img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(4,6,11,.94));
}
.card__tag{
  position:absolute; z-index:2; left:0; bottom:0; width:100%;
  padding:1.1rem 1.2rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.card__tag h3{ margin:0; font-family:var(--f-disp); font-size:clamp(1.3rem,2.6vw,2rem); text-transform:uppercase; line-height:.96; }
.card__tag p{ margin:0; font-size:.9rem; color:#b6c3da; max-width:48ch; }
.card__no{
  position:absolute; z-index:2; top:.7rem; right:.7rem;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em;
  background:var(--red); color:#fff; border:3px solid #000; padding:.2rem .5rem;
}

.c-a{ grid-column:span 7; }
.c-b{ grid-column:span 5; }
.c-c{ grid-column:span 5; }
.c-d{ grid-column:span 7; }

/* text panel that mimics a ledger record */
.rec{ padding:clamp(1.2rem,2.4vw,2rem); height:100%; }
.rec h3{ margin:.2rem 0 .7rem; font-family:var(--f-disp); font-size:1.6rem; text-transform:uppercase; }
.rec p{ margin:0 0 .8rem; color:#b6c3da; font-size:.96rem; }
.rec ul{ margin:.4rem 0 0; padding:0; list-style:none; font-family:var(--f-mono); font-size:.86rem; }
.rec li{ display:flex; gap:.6rem; align-items:center; padding:.42rem 0; border-bottom:1px dashed var(--line); color:#9fb0cc; }
.rec li i{ color:var(--red); }
.rec li:last-child{ border-bottom:0; }
.rec li:last-child i{ color:var(--green); }

/* the shout — big comic callout */
.shout{
  grid-column:span 12; position:relative;
  margin-top:.4rem; padding:clamp(1.6rem,4vw,3rem) clamp(1.4rem,4vw,3rem);
  background:linear-gradient(120deg,#12070a,#1a0d05 55%,#07101c);
  border:var(--outline) solid #000;
  box-shadow:14px 14px 0 #000, inset 0 0 90px rgba(228,38,47,.14);
  clip-path:polygon(0 0,100% 0,100% 88%,94% 100%,0 100%,0 12%);
  text-align:center; overflow:hidden;
}
.shout h3{ margin:0 0 .5rem; font-family:var(--f-disp); font-size:clamp(2rem,6.4vw,4.4rem); text-transform:uppercase; line-height:.92; }
.shout p{ margin:0 auto; max-width:70ch; color:#c8d3e6; }
.shout::before{
  content:'!'; position:absolute; top:-.28em; right:.18em;
  font-family:var(--f-disp); font-size:clamp(7rem,18vw,15rem); line-height:1;
  color:rgba(228,38,47,.10); pointer-events:none;
}

/* ==========================================================================
   7. HOW TO BUY — perspective step ladder
   ========================================================================== */

.how__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(1.2rem,3vw,2.2rem); align-items:stretch; }

.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:clamp(1rem,2.2vw,1.7rem); transform-style:preserve-3d; }
.step{
  position:relative; padding:1.6rem 1.3rem 1.5rem;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.step:nth-child(odd) { transform:rotateY(6deg); }
.step:nth-child(even){ transform:rotateY(-6deg) translateY(18px); }
.step:hover{ transform:rotateY(0) translateY(0) translateZ(46px); box-shadow:16px 16px 0 #000, inset 0 0 0 1px var(--cyan); }
.step__no{
  font-family:var(--f-disp); font-size:3.4rem; line-height:.8; color:transparent;
  -webkit-text-stroke:2px var(--gold);
  display:block; margin-bottom:.5rem;
}
.step > i.bi{ font-size:1.7rem; color:var(--cyan); display:block; margin-bottom:.5rem; }
.step h3{ margin:0 0 .45rem; font-family:var(--f-disp); font-size:1.22rem; text-transform:uppercase; letter-spacing:.02em; }
.step p{ margin:0; font-size:.9rem; color:#a9b8d2; }
.step p a{ color:var(--gold); border-bottom:1px solid rgba(245,185,33,.5); }
.step p a:hover{ color:var(--gold-hi); }

.how__side{ position:relative; border:var(--outline) solid #000; box-shadow:var(--shadow-hard); overflow:hidden; min-height:340px; }
.how__side img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.how__side::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg,rgba(4,6,11,.15),rgba(4,6,11,.92)); }
.how__side > div{ position:absolute; z-index:2; left:0; bottom:0; padding:1.3rem; }
.how__side h4{ margin:.6rem 0 .3rem; font-family:var(--f-disp); font-size:1.5rem; text-transform:uppercase; line-height:1; }
.how__side p{ margin:0; font-size:.86rem; color:#b6c3da; }
.how__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(1.6rem,3vw,2.4rem); }

/* ==========================================================================
   8. CHART
   ========================================================================== */

.chart{
  position:relative; padding:14px;
  border:var(--outline) solid #000;
  background:linear-gradient(150deg,#0d1626,#05080f);
  box-shadow:16px 16px 0 #000, 0 0 70px rgba(27,91,255,.2);
}
.chart__bar{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.55rem .3rem .8rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.chart__dot{ width:9px; height:9px; background:var(--green); border-radius:50%; box-shadow:0 0 12px var(--green); animation:blip 1.5s ease-in-out infinite; }
@keyframes blip{ 50%{ opacity:.25; } }
.chart__frame{ position:relative; width:100%; aspect-ratio:16/9.6; min-height:440px; border:3px solid #000; background:#04060b; overflow:hidden; }
.chart__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.chart__note{ margin:.9rem .2rem 0; font-family:var(--f-mono); font-size:.72rem; color:var(--dim); letter-spacing:.1em; }
.chart__links{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.6rem; }

/* ==========================================================================
   9. JOIN US  (the only place banner.webp appears)
   ========================================================================== */

.join{ transform-style:preserve-3d; }
.join__banner{
  position:relative;
  border:var(--outline) solid #000;
  box-shadow:18px 18px 0 #000, 0 0 80px rgba(245,185,33,.2);
  overflow:hidden;
  transform:rotateX(6deg);
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.join__banner:hover{ transform:rotateX(0deg) translateZ(30px); }
.join__banner img{ width:100%; display:block; }
.join__banner::after{
  content:''; position:absolute; top:-120%; left:-60%; width:38%; height:340%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:rotate(18deg); pointer-events:none;
  animation:shineSweep 6.5s cubic-bezier(.45,0,.2,1) infinite;
}
.join__banner .brk{ z-index:3; }

.socials{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(.9rem,2vw,1.4rem); margin-top:clamp(1.8rem,4vw,2.8rem);
  transform-style:preserve-3d;
}
.soc{
  display:flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.1rem;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.soc:hover{ transform:translateZ(38px) translateY(-4px); box-shadow:14px 14px 0 #000; }
.soc__ic{
  flex:0 0 46px; width:46px; height:46px;
  display:grid; place-items:center;
  border:3px solid #000; background:var(--gold); color:#04060b;
  box-shadow:4px 4px 0 #000;
}
.soc__ic i{ font-size:1.35rem; line-height:1; }
.soc__ic svg{ width:24px; height:24px; display:block; }
.soc__ic--x   { background:#fff; }
.soc__ic--ps  { background:var(--green); }
.soc__ic--dex { background:var(--blue); color:#fff; }
.soc__ic--pf  { background:var(--gold); }
.soc__ic--sol { background:var(--cyan); }
.soc__txt b{ display:block; font-family:var(--f-disp); font-size:1.02rem; text-transform:uppercase; letter-spacing:.03em; line-height:1.1; color:var(--txt); }
.soc__txt span{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; color:var(--dim); text-transform:uppercase; }

.join__final{
  margin-top:clamp(2rem,4vw,3rem); text-align:center; padding:clamp(1.6rem,4vw,2.6rem);
  border:var(--outline) solid #000; background:linear-gradient(120deg,#050a14,#0a1220);
  box-shadow:12px 12px 0 #000;
  clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);
}
.join__final h3{ margin:0 0 .4rem; font-family:var(--f-disp); font-size:clamp(1.9rem,6vw,4rem); text-transform:uppercase; }
.join__final p{ margin:0; color:var(--dim); font-family:var(--f-mono); font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; }

/* ==========================================================================
   10. FOOTER + un-closable warning bar
   ========================================================================== */

.foot{
  border-top:3px solid #000; background:rgba(4,6,11,.9);
  padding:2.4rem clamp(1rem,4vw,3rem) 2.6rem;
}
.foot__in{ width:min(1240px,100%); margin-inline:auto; display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between; }
.foot__brand{ display:flex; align-items:center; gap:.8rem; }
.foot__brand img{ width:44px; filter:drop-shadow(0 0 10px rgba(34,225,255,.4)); }
.foot p{ margin:0; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; color:var(--dim); max-width:60ch; }
.foot__links{ display:flex; gap:.9rem; flex-wrap:wrap; }
.foot__links a{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.foot__links a:hover{ color:var(--gold); }

.warnbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:44px; display:flex; align-items:center; overflow:hidden;
  background:var(--red);
  border-top:3px solid #000;
  box-shadow:0 -6px 26px rgba(228,38,47,.4);
}
.warnbar__track{ display:flex; white-space:nowrap; animation:marq 26s linear infinite; }
.warnbar b{
  font-family:var(--f-comic); font-size:.86rem; letter-spacing:.1em; color:#fff;
  padding:0 1.6rem; text-transform:uppercase;
}
.warnbar b::after{ content:'\25C6'; margin-left:1.6rem; color:#04060b; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width:1000px){
  .hero{ grid-template-columns:1fr; }
  .hero__art{ order:-1; transform:none; max-width:420px; margin-inline:auto; width:100%; }
  .hero__copy{ transform:none; }
  .how__grid{ grid-template-columns:1fr; }
  .c-a,.c-b,.c-c,.c-d{ grid-column:span 12; }
}
@media (max-width:820px){
  .nav__links{
    position:fixed; top:74px; right:.6rem; left:.6rem;
    flex-direction:column; align-items:stretch; gap:.3rem; padding:.7rem;
    background:#05080f; border:3px solid #000; box-shadow:8px 8px 0 #000;
    display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__burger{ display:block; }
  .nav > .btn{ display:none; }
  .nav__links .btn{ display:inline-flex; justify-content:center; margin-top:.4rem; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); }
  .hero__stats div:nth-child(2){ border-right:0; }
  .hero__stats div:nth-child(1),.hero__stats div:nth-child(2){ border-bottom:2px solid var(--line); }
  .step:nth-child(odd),.step:nth-child(even){ transform:none; }
  .chart__frame{ aspect-ratio:auto; height:70vh; min-height:400px; }
}
@media (max-width:520px){
  :root{ --outline:3px; --shadow-hard:7px 7px 0 #000; }
  .chip{ display:none; }
  .shead__no{ font-size:6rem; }
  .hero__box{ padding:1rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .plane{ opacity:1; transform:none; }
}