/* ==========================================================================
   TRENCH APE — COMIC WAR-BOOK STYLESHEET
   Halftone ink + stencil field-command + hard 3D perspective panels
   ========================================================================== */

:root {
  --ink:        #0A0A07;
  --trench:     #11110D;
  --olive:      #444632;
  --olive-2:    #2A2C1F;
  --tan:        #B29A72;
  --canvas:     #D0BE99;
  --green:      #65D46E;
  --green-deep: #2E8F3A;
  --red:        #B8423D;
  --paper:      #E8DCC2;

  --f-pop:  "Bangers", "Impact", cursive;
  --f-head: "Black Ops One", "Arial Black", sans-serif;
  --f-body: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-mono: "Share Tech Mono", ui-monospace, monospace;

  --panel-shadow: 0 0 0 3px var(--tan), 14px 14px 0 rgba(0, 0, 0, .8);
  --panel-shadow-sm: 0 0 0 2px var(--tan), 8px 8px 0 rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--trench);
  color: var(--canvas);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--green); color: var(--ink); }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* An inline <svg><use> with no width/height falls back to 300x150 and blows
   the layout apart. Anything without an explicit width gets sized here. */
svg:not([width]) { width: 1.15em; height: 1.15em; }
.btn svg, .nav-ico svg, .social-ico svg { flex: 0 0 auto; display: block; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/* ==========================================================================
   1. GLOBAL BACKGROUND — image layer + ink + halftone + shine sweep
   ========================================================================== */

.bg-stack {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

/* the actual photo, pinned behind everything */
.bg-photo {
  position: absolute;
  inset: -4%;
  background: url("../img/trenchape-out-of-the-trenches.jpg?v=2") center 34% / cover no-repeat;
  /* lighter desaturation than before — the new art is a warm sunrise scene
     and heavy grayscale/sepia turned it to mud */
  filter: grayscale(.22) contrast(1.12) brightness(.44) sepia(.14);
  transform: scale(1.06);
  will-change: transform;
}

/* second photo bleeding in from the bottom of the page */
.bg-photo-2 {
  position: absolute;
  inset: 0;
  background: url("../img/trenchape-field-map.jpg?v=2") center center / cover no-repeat;
  filter: grayscale(.34) contrast(1.08) brightness(.42) sepia(.18);
  opacity: 0;
  transition: opacity .8s linear;
}

body.deep .bg-photo-2 { opacity: .55; }

/* colour wash so the photo never fights the copy */
.bg-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(101, 212, 110, .10), transparent 60%),
    radial-gradient(100% 70% at 80% 100%, rgba(184, 66, 61, .12), transparent 65%),
    linear-gradient(180deg, rgba(17, 17, 13, .82) 0%, rgba(17, 17, 13, .90) 45%, rgba(10, 10, 7, .96) 100%);
}

/* comic ben-day dots over the whole page */
.bg-halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .55) 1.1px, transparent 1.3px);
  background-size: 6px 6px;
  opacity: .55;
  mix-blend-mode: multiply;
}

/* engineering grid */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(178, 154, 114, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 154, 114, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 85%);
}

/* SHINE — slow diagonal light sweep across the whole background */
.bg-shine {
  position: absolute;
  top: -60%;
  left: 0;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(208, 190, 153, .05) 30%,
    rgba(232, 220, 194, .16) 48%,
    rgba(101, 212, 110, .10) 56%,
    transparent 100%);
  filter: blur(14px);
  transform: translateX(-150%) rotate(14deg);
  animation: sweep 11s cubic-bezier(.4, 0, .2, 1) infinite;
}

.bg-shine.b {
  width: 22%;
  animation-duration: 11s;
  animation-delay: 1.1s;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
  filter: blur(6px);
}

@keyframes sweep {
  0%   { transform: translateX(-160%) rotate(14deg); }
  60%  { transform: translateX(320%)  rotate(14deg); }
  100% { transform: translateX(320%)  rotate(14deg); }
}

/* film grain / trench dust */
.bg-noise {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}

/* scanlines */
.bg-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 4px);
  opacity: .45;
  animation: scanmove 8s linear infinite;
}

@keyframes scanmove {
  from { background-position: 0 0; }
  to   { background-position: 0 128px; }
}

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

.wrap { width: min(1240px, 92vw); margin-inline: auto; }

h1, h2, h3 { margin: 0; line-height: .96; letter-spacing: .01em; }

.pop {
  font-family: var(--f-pop);
  letter-spacing: .03em;
  font-weight: 400;
}

.stencil { font-family: var(--f-head); }

/* comic 3D ink headline */
.ink-3d {
  color: var(--paper);
  text-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 var(--olive),
    9px 9px 0 rgba(0, 0, 0, .55);
}

.ink-3d-green {
  color: var(--green);
  text-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 var(--green-deep),
    9px 9px 0 rgba(0, 0, 0, .55);
}

.ink-3d-red {
  color: var(--red);
  text-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 #6E2523,
    9px 9px 0 rgba(0, 0, 0, .55);
}

.outline-ink { -webkit-text-stroke: 2px var(--ink); }

/* field label — the uppercase mono eyebrow on a torn strip */
.field-label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--tan);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .7);
  padding: .4rem .9rem .3rem;
  transform: rotate(-1.2deg);
}

.field-label::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 50%;
  animation: blip 1.6s steps(2) infinite;
}

@keyframes blip { 50% { background: var(--green); } }

/* COMIC PANEL — the core building block */
.panel {
  position: relative;
  background-color: #1B1C14;
  background-image:
    radial-gradient(circle, rgba(178, 154, 114, .13) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(42, 44, 31, .96), rgba(17, 17, 13, .97));
  background-size: 7px 7px, cover;
  background-repeat: repeat, no-repeat;
  border: 4px solid var(--ink);
  box-shadow: var(--panel-shadow);
  padding: 1.6rem;
  overflow: hidden;
}

/* panel shine sweep on hover */
.panel::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -70%;
  width: 45%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(232, 220, 194, .22), transparent);
  transform: rotate(18deg) translateX(0);
  transition: transform .75s ease;
  pointer-events: none;
}

.panel:hover::after { transform: rotate(18deg) translateX(420%); }

/* corner rivets — painted as background layers so they never fight
   the panel's halftone or its ::after shine sweep */
.rivets {
  background-image:
    radial-gradient(circle at 13px 13px, var(--tan) 4.4px, var(--ink) 4.5px, var(--ink) 6.2px, transparent 6.4px),
    radial-gradient(circle at calc(100% - 13px) 13px, var(--tan) 4.4px, var(--ink) 4.5px, var(--ink) 6.2px, transparent 6.4px),
    radial-gradient(circle at 13px calc(100% - 13px), var(--tan) 4.4px, var(--ink) 4.5px, var(--ink) 6.2px, transparent 6.4px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), var(--tan) 4.4px, var(--ink) 4.5px, var(--ink) 6.2px, transparent 6.4px),
    radial-gradient(circle, rgba(178, 154, 114, .13) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(42, 44, 31, .96), rgba(17, 17, 13, .97));
  background-size: auto, auto, auto, auto, 7px 7px, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

.panel-paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle, rgba(10, 10, 7, .14) 1px, transparent 1.2px),
    linear-gradient(180deg, var(--paper), var(--canvas));
  background-size: 7px 7px, cover;
  background-repeat: repeat, no-repeat;
  color: var(--ink);
}

/* BUTTONS — equipment labels */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-head);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .95rem 1.5rem;
  border: 3px solid var(--ink);
  background: var(--canvas);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}

.btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ink); }

.btn::after {
  content: "";
  position: absolute;
  top: -50%; left: -80%;
  width: 40%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(18deg);
  animation: btnshine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnshine {
  0%, 65% { transform: rotate(18deg) translateX(0); }
  95%, 100% { transform: rotate(18deg) translateX(520%); }
}

.btn-green { background: var(--green); color: var(--ink); }
.btn-green:hover { background: #7ce485; }
.btn-red   { background: var(--red); color: var(--paper); }
.btn-dark  { background: var(--olive-2); color: var(--canvas); box-shadow: 7px 7px 0 rgba(0,0,0,.8); border-color: var(--tan); }
.btn-dark:hover { background: var(--olive); }

.btn i, .btn svg { font-size: 1.1em; }

/* burst star behind small callouts */
.burst {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: var(--f-pop);
  color: var(--ink);
  background: var(--green);
  border: 3px solid var(--ink);
  clip-path: polygon(50% 0%, 61% 20%, 84% 13%, 80% 36%, 100% 50%, 80% 64%, 84% 87%, 61% 80%, 50% 100%, 39% 80%, 16% 87%, 20% 64%, 0% 50%, 20% 36%, 16% 13%, 39% 20%);
  text-align: center;
  line-height: 1;
  z-index: 6;
}

/* speech bubble */
.bubble {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: .85rem 1.1rem;
  font-family: var(--f-pop);
  font-size: 1.15rem;
  letter-spacing: .04em;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .7);
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -17px; left: 30px;
  border: 9px solid transparent;
  border-top-color: var(--ink);
}

/* photo inside a comic panel — inked & printed. Eased off the crush so the
   new art's softer faces and warm light survive the treatment. */
.inked {
  filter: contrast(1.1) saturate(.92) brightness(1.0);
}

.photo-frame {
  position: relative;
  border: 4px solid var(--ink);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  background: var(--ink);
}

.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10, 10, 7, .5) 1.1px, transparent 1.3px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
  opacity: .38;
  pointer-events: none;
}

/* caption box (comic narration) */
.caption {
  font-family: var(--f-pop);
  font-size: 1rem;
  letter-spacing: .06em;
  background: var(--canvas);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: .45rem .8rem .3rem;
  display: inline-block;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .75);
}

/* section heading block */
.sec-head { margin-bottom: 2.6rem; }

.sec-title {
  font-family: var(--f-head);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  text-transform: uppercase;
  margin-top: 1rem;
}

.lead { color: rgba(208, 190, 153, .86); max-width: 62ch; font-size: 1.12rem; }

/* divider — dashed field seam */
.seam {
  height: 0;
  border-top: 3px dashed rgba(178, 154, 114, .45);
  margin: 0;
}

/* ==========================================================================
   3. PERSPECTIVE / 3D
   ========================================================================== */

.stage      { perspective: 1500px; perspective-origin: 50% 45%; }
.stage-near { perspective: 900px; }

/* CSS perspective only reaches DIRECT children, so it is re-declared on the
   immediate parent of every element that is actually rotated in 3D. */
.hero-art,
.about-art,
.rules,
.steps,
.sec-chart .wrap,
.sec-join .wrap {
  perspective: 1500px;
  perspective-origin: 50% 45%;
}

.tilt-l { transform: rotateY(9deg)  rotateX(3deg)  rotateZ(-1.2deg); transform-style: preserve-3d; }
.tilt-r { transform: rotateY(-9deg) rotateX(3deg)  rotateZ(1.2deg);  transform-style: preserve-3d; }
.tilt-f { transform: rotateX(9deg); transform-style: preserve-3d; }

.hover-pop { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.hover-pop:hover { transform: translateZ(60px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.015); }

/* pointer-driven tilt target */
.tilt-live { transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }

/* scroll reveal */
.rise { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .09s; }
.rise.d2 { transition-delay: .18s; }
.rise.d3 { transition-delay: .27s; }
.rise.d4 { transition-delay: .36s; }

/* ==========================================================================
   4. NAV — field command bar
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: rgba(10, 10, 7, .55);
  border-bottom: 3px solid transparent;
  backdrop-filter: blur(2px);
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
}

.nav.stuck {
  background: rgba(10, 10, 7, .94);
  border-bottom-color: var(--tan);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .55);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .85rem 0;
  transition: padding .3s ease;
}

.nav.stuck .nav-in { padding: .5rem 0; }

.brand { display: flex; align-items: center; gap: .8rem; margin-right: auto; }

.brand-badge {
  width: 52px; height: 52px;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--tan), 5px 5px 0 rgba(0, 0, 0, .8);
  overflow: hidden;
  flex: 0 0 auto;
  transition: width .3s ease, height .3s ease;
}

.nav.stuck .brand-badge { width: 42px; height: 42px; }

/* The logo art is a full-body shot, so at badge size the head would be a
   speck — zoom into the helmet/face instead of showing the whole figure. */
.brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2.05);
  transform-origin: 50% 40%;
}

.brand-txt { line-height: 1; }
.brand-name { font-family: var(--f-head); font-size: 1.22rem; letter-spacing: .04em; color: var(--paper); }
.brand-sub  { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .28em; color: var(--tan); }

.nav-links { display: flex; gap: .3rem; }

.nav-links a {
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .5rem .7rem;
  color: var(--canvas);
  border: 2px solid transparent;
  transition: .18s ease;
}

.nav-links a:hover { color: var(--ink); background: var(--green); border-color: var(--ink); }

.nav-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 3px solid var(--ink);
  background: var(--canvas);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 1.1rem;
  transition: .15s ease;
}

.nav-ico:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); background: var(--green); }

.nav-buy { display: inline-flex; }

.burger { display: none; }

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

/* Column flex: the copy block sits in the middle, the ticker pins to the
   bottom. (A row flex here would put the ticker BESIDE the content and
   crush the copy column to nothing.) */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7.5rem 0 0;
  overflow: hidden;
}

.hero > .wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-block: 2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 3rem;
  align-items: center;
  width: 100%;
}

.hero-grid > * { min-width: 0; }

.hero-title {
  font-family: var(--f-head);
  font-size: clamp(2.3rem, 6.2vw, 5.3rem);
  text-transform: uppercase;
  margin: 1.2rem 0 1.2rem;
}

.hero-title span { display: block; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.9rem; }

/* the ape portrait panel, floating in 3D */
.hero-art { position: relative; }

/* NOTE: no keyframe animation on the frame itself — a running animation would
   outrank the inline transform written by the pointer-tilt script. */
.hero-art .photo-frame { aspect-ratio: 1 / 1; }

.hero-art .burst {
  width: 132px; height: 132px;
  font-size: 1.35rem;
  right: -34px; top: -34px;
  animation: pulse 2.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: rotate(9deg) scale(1) translateY(0); }
  50%      { transform: rotate(6deg) scale(1.07) translateY(-8px); }
}

.hero-art .caption { position: absolute; left: -18px; bottom: -20px; z-index: 5; transform: rotate(-2deg); }

/* stat chips under the hero copy */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }

.chip {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 2px solid var(--tan);
  color: var(--tan);
  padding: .3rem .6rem;
  background: rgba(10, 10, 7, .55);
}

.chip b { color: var(--green); font-weight: 400; }

/* CONTRACT BAR */
.ca-bar {
  margin-top: 2rem;
  display: flex;
  align-items: stretch;
  border: 3px solid var(--ink);
  box-shadow: var(--panel-shadow-sm);
  background: var(--olive-2);
  max-width: 640px;
  overflow: hidden;
}

.ca-tag {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  background: var(--tan);
  color: var(--ink);
  padding: .8rem .7rem;
  display: grid;
  place-items: center;
  border-right: 3px solid var(--ink);
  flex: 0 0 auto;
}

.ca-val {
  font-family: var(--f-mono);
  font-size: .84rem;
  color: var(--canvas);
  padding: .8rem .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  align-self: center;
}

.ca-copy {
  font-family: var(--f-head);
  font-size: .8rem;
  letter-spacing: .08em;
  background: var(--green);
  color: var(--ink);
  border: 0;
  border-left: 3px solid var(--ink);
  padding: 0 1.1rem;
  cursor: pointer;
  transition: background .2s ease;
  flex: 0 0 auto;
}

.ca-copy:hover { background: #7ce485; }
.ca-copy.done  { background: var(--paper); }

/* TICKER */
.ticker {
  position: relative;
  flex: 0 0 auto;
  width: 104%;
  margin-left: -2%;
  margin-top: 2.4rem;
  border-block: 3px solid var(--ink);
  background: var(--red);
  color: var(--paper);
  overflow: hidden;
  transform: rotate(-1deg);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .6);
}

.ticker-track {
  display: flex;
  gap: 2.4rem;
  padding: .55rem 0;
  width: max-content;
  animation: roll 26s linear infinite;
  font-family: var(--f-pop);
  font-size: 1.25rem;
  letter-spacing: .1em;
  white-space: nowrap;
}

.ticker-track span::after { content: "🦍"; margin-left: 2.4rem; }

@keyframes roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   6. SECTION FRAME (each section gets its own personality)
   ========================================================================== */

.sec { position: relative; padding: 7rem 0; }

/* ABOUT — skewed olive slab */
.sec-about {
  background: linear-gradient(180deg, rgba(42, 44, 31, .60), rgba(17, 17, 13, .72));
  border-block: 4px solid var(--ink);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .7);
}

.about-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 3.2rem;
  align-items: center;
}

.about-art .photo-frame { aspect-ratio: 4 / 5; }
.about-art .caption { position: absolute; bottom: -16px; right: -14px; z-index: 5; transform: rotate(2deg); max-width: 78%; }

.rules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-top: 2.2rem;
}

.rule { padding: 1.4rem 1.3rem 1.5rem; }

.rule-no {
  font-family: var(--f-pop);
  font-size: 2.4rem;
  color: var(--green);
  line-height: .8;
  -webkit-text-stroke: 1.5px var(--ink);
}

.rule h3 {
  font-family: var(--f-head);
  font-size: 1.12rem;
  text-transform: uppercase;
  color: var(--paper);
  margin: .5rem 0 .45rem;
}

.rule p { margin: 0; font-size: 1rem; color: rgba(208, 190, 153, .82); }

/* HOW TO BUY — receding 3D deck */
.sec-buy { background: linear-gradient(180deg, rgba(10, 10, 7, .55), rgba(10, 10, 7, .8)); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  transform-style: preserve-3d;
}

.step {
  position: relative;
  padding: 2.4rem 1.3rem 1.6rem;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

.step:nth-child(1) { transform: rotateY(14deg)  translateZ(-30px); }
.step:nth-child(2) { transform: rotateY(6deg)   translateZ(0px); }
.step:nth-child(3) { transform: rotateY(-6deg)  translateZ(0px); }
.step:nth-child(4) { transform: rotateY(-14deg) translateZ(-30px); }
.step:hover { transform: rotateY(0deg) translateZ(70px); }

.step-no {
  position: absolute;
  top: -22px; left: -14px;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  font-family: var(--f-pop);
  font-size: 1.7rem;
  background: var(--canvas);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .8);
  transform: rotate(-6deg);
  z-index: 4;
}

.step h3 {
  font-family: var(--f-head);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .5rem;
}

.step p { margin: 0; font-size: 1rem; color: rgba(208, 190, 153, .84); }

.step-ico {
  font-size: 1.6rem;
  color: var(--tan);
  margin-bottom: .6rem;
  display: block;
}

.buy-foot { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 3.2rem; }

/* CHART — command monitor */
.sec-chart {
  background:
    linear-gradient(180deg, rgba(17, 17, 13, .85), rgba(42, 44, 31, .62));
  border-block: 4px solid var(--ink);
}

.monitor {
  position: relative;
  padding: 1.1rem;
  background: linear-gradient(180deg, var(--olive-2), var(--ink));
  border: 5px solid var(--ink);
  box-shadow: 0 0 0 3px var(--tan), 18px 18px 0 rgba(0, 0, 0, .8);
  transform-style: preserve-3d;
}

.monitor-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0 .3rem .9rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
  border-bottom: 2px dashed rgba(178, 154, 114, .45);
  margin-bottom: .9rem;
}

.led {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--ink);
  box-shadow: 0 0 10px var(--green);
  animation: blip 1.4s steps(2) infinite;
}

.monitor-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 460px;
  border: 3px solid var(--ink);
  background: #0b0b08;
  overflow: hidden;
}

.monitor-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.monitor-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
  opacity: .5;
}

.chart-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .6rem;
  padding: 2rem;
  font-family: var(--f-mono);
  color: var(--tan);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
}

.chart-fallback .pop { font-size: 2rem; color: var(--green); letter-spacing: .06em; }

.chart-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.4rem; }

/* JOIN US — banner section */
.sec-join {
  background: linear-gradient(180deg, rgba(10, 10, 7, .72), rgba(17, 17, 13, .92));
  border-top: 4px solid var(--ink);
  overflow: hidden;
}

.banner-frame {
  position: relative;
  border: 5px solid var(--ink);
  box-shadow: 0 0 0 3px var(--tan), 20px 20px 0 rgba(0, 0, 0, .82);
  overflow: hidden;
  transform: rotateX(7deg) rotateZ(-.8deg);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.banner-frame:hover { transform: rotateX(0deg) rotateZ(0deg) translateZ(40px); }

.banner-frame img { width: 100%; }

.banner-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10, 10, 7, .45) 1.1px, transparent 1.3px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
  opacity: .45;
  pointer-events: none;
}

/* shine sweeping over the banner */
.banner-shine {
  position: absolute;
  top: -60%; left: -40%;
  width: 30%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: rotate(18deg);
  animation: bannerSweep 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes bannerSweep {
  0%, 55% { transform: rotate(18deg) translateX(0); }
  92%, 100% { transform: rotate(18deg) translateX(560%); }
}

.join-socials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
}

.social {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.3rem;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.social:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 3px var(--green), 8px 8px 0 rgba(0, 0, 0, .8); }

.social-ico {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--canvas);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .8);
  font-size: 1.5rem;
}

.social-ico svg { width: 26px; height: 26px; }

.social b {
  display: block;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--paper);
}

.social small {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tan);
}

.join-final {
  margin-top: 3.4rem;
  text-align: center;
}

.join-final h3 {
  font-family: var(--f-head);
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  text-transform: uppercase;
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.foot {
  position: relative;
  background: rgba(6, 6, 4, .95);
  border-top: 4px solid var(--ink);
  padding: 3.4rem 0 2.2rem;
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
}

.foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tan); }
.foot-links a:hover { color: var(--green); }

.disclaimer {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 2px dashed rgba(178, 154, 114, .35);
  font-size: .95rem;
  color: rgba(178, 154, 114, .68);
  max-width: 78ch;
}

/* ==========================================================================
   8. TOAST
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 140%);
  z-index: 200;
  background: var(--green);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .8);
  font-family: var(--f-pop);
  font-size: 1.15rem;
  letter-spacing: .06em;
  padding: .7rem 1.4rem .55rem;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.toast.show { transform: translate(-50%, 0); }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-art { max-width: 460px; margin-inline: auto; }
  .about-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(n) { transform: none; }
  .step:hover { transform: translateZ(40px); }
  .join-socials { grid-template-columns: 1fr; }
  .tilt-l, .tilt-r, .tilt-f { transform: none; }
  .banner-frame { transform: none; }
  .nav-links { display: none; }
  .nav-buy { display: none; }
  .burger { display: grid; }
}

@media (max-width: 700px) {
  body { font-size: 17px; }
  .sec { padding: 4.6rem 0; }
  .hero { padding-top: 7rem; }
  .rules { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .monitor-screen { min-height: 380px; aspect-ratio: 3 / 4; }
  .hero-art .burst { width: 96px; height: 96px; font-size: 1rem; right: -10px; top: -18px; }
  .ca-bar { flex-wrap: wrap; }
  .ca-tag { width: 100%; border-right: 0; border-bottom: 3px solid var(--ink); }
  .ca-val { font-size: .74rem; }
  .foot-top { flex-direction: column; align-items: flex-start; }
  .bg-photo { background-attachment: scroll; }
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(6, 6, 4, .97);
  display: grid;
  place-content: center;
  gap: 1rem;
  text-align: center;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.drawer.open { transform: none; }

.drawer a {
  font-family: var(--f-head);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--canvas);
  padding: .4rem 1rem;
}

.drawer a:hover { color: var(--green); }

/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rise { opacity: 1; transform: none; }
}