/* =====================================================================
   FLIPPY — Page layout & sections (rebuilt for pure-black + cartoon-gore)
   ===================================================================== */

/* ---------- Page atmosphere ---------- */
.page {
  position: relative;
  min-height: 100vh;
  background: #000;
  overflow: hidden;
}
/* low contrast grid only at the top */
.page::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(rgba(185,255,31,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,255,31,0.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 90%);
}
/* faint scanlines */
.page::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(185,255,31,0.018) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: overlay;
}

/* ============================================================
   TOP STATUS BAR
   ============================================================ */
.status-bar {
  position: relative;
  z-index: 40;
  background: #000;
  border-bottom: 1px solid rgba(185,255,31,0.18);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.status-bar .ticker {
  display: flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  animation: tape-roll-x 90s linear infinite;
  padding-left: 100%;
}
@keyframes tape-roll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.status-bar .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--acid);
  margin-right: 12px;
  box-shadow: 0 0 8px var(--acid);
  animation: pulse-acid 1.4s infinite;
}
.status-bar .hot { color: var(--acid); }
.status-bar .blood { color: var(--blood); }

/* ============================================================
   NAVBAR — pure black, neon green underline
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(185,255,31,0.16);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
}
.nav-brand img {
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 0 14px var(--acid-glow-65)) drop-shadow(0 0 2px var(--acid));
}
.nav-brand .word {
  font-family: var(--f-cartoon);
  font-size: 30px;
  color: var(--acid);
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px var(--acid-glow-65), 0 0 1px var(--acid);
}
.nav-links {
  display: flex;
  gap: 32px;
}
.nav-links a {
  font-family: var(--f-stencil);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--bone-dim);
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  transition: color 140ms ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--acid); }
.nav-links a::after {
  content: ""; position: absolute;
  left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--acid);
  box-shadow: 0 0 8px var(--acid);
  transition: width 240ms ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 12px; }

.nav-sock {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(185,255,31,0.25);
  color: var(--bone-dim);
  transition: all 160ms;
}
.nav-sock:hover {
  border-color: var(--acid);
  color: var(--acid);
  box-shadow: 0 0 14px var(--acid-glow-25);
  background: rgba(185,255,31,0.06);
}
@media (max-width: 720px) {
  .nav-sock { display: none; }
}

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--line-hot);
  color: var(--acid);
  align-items: center; justify-content: center;
  font-size: 18px;
  cursor: crosshair;
}

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .nav-cta .btn { padding: 10px 14px; font-size: 12px; }
  .nav-brand .word { font-size: 22px; }
  .nav-brand img { width: 44px; height: 44px; }
}

/* Primary button: pulse-glow */
.btn {
  --bg: var(--acid);
  --fg: var(--void);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--f-stencil);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--bg);
  position: relative;
  clip-path: polygon(
    10px 0, 100% 0, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 0 100%, 0 10px
  );
  cursor: crosshair;
  transition: transform 140ms cubic-bezier(0.2,0.9,0.2,1),
              filter 140ms cubic-bezier(0.2,0.9,0.2,1),
              box-shadow 240ms ease;
  box-shadow:
    0 0 18px var(--acid-glow-45),
    0 0 36px var(--acid-glow-25);
  animation: btn-pulse 3.4s ease-in-out infinite;
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 14px var(--acid-glow-25), 0 0 32px var(--acid-glow-25); }
  50%      { box-shadow: 0 0 24px var(--acid-glow-65), 0 0 64px var(--acid-glow-45); }
}

.btn-ghost {
  --bg: transparent;
  --fg: var(--acid);
  border: 2px solid var(--acid);
  background: transparent;
  color: var(--acid);
  animation: btn-pulse-ghost 3.4s ease-in-out infinite;
  box-shadow: 0 0 10px var(--acid-glow-25), inset 0 0 10px var(--acid-glow-25);
}
.btn-ghost:hover {
  background: rgba(166, 255, 20, 0.08);
  filter: drop-shadow(0 0 18px var(--acid-glow-65));
  transform: translateY(-1px) scale(1.02);
}
@keyframes btn-pulse-ghost {
  0%, 100% { box-shadow: 0 0 10px var(--acid-glow-25), inset 0 0 10px var(--acid-glow-25); }
  50%      { box-shadow: 0 0 22px var(--acid-glow-65), inset 0 0 20px var(--acid-glow-25); }
}

.mobile-menu {
  position: fixed;
  top: 70px; left: 0; right: 0;
  background: #000;
  border-bottom: 1px solid var(--line-hot);
  z-index: 49;
  padding: 24px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 280ms, opacity 280ms;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--f-stencil);
  letter-spacing: 0.16em;
  font-size: 18px;
  color: var(--bone);
  text-transform: uppercase;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:hover { color: var(--acid); }

/* ============================================================
   BOOT SEQUENCE — higher quality
   ============================================================ */
.boot {
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(900px 600px at 50% 50%, rgba(74,99,34,0.12), transparent 70%),
    radial-gradient(1400px 900px at 50% 50%, rgba(0,0,0,0.5), #000 80%),
    #000;
  color: var(--acid);
  font-family: var(--f-mono);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.boot::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(185,255,31,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,255,31,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 20%, transparent 80%);
  opacity: 0.6;
}
.boot::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0) 0 2px,
    rgba(185,255,31,0.04) 3px,
    rgba(0,0,0,0) 4px
  );
  pointer-events: none;
}

.boot-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  padding: 32px;
  border: 1px solid rgba(185,255,31,0.35);
  background: rgba(0,0,0,0.7);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.6),
    0 0 60px rgba(185,255,31,0.15),
    0 0 1px rgba(185,255,31,0.7);
  clip-path: polygon(
    18px 0, 100% 0, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, 0 100%, 0 18px
  );
}
.boot-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
}
.boot-inner::after {
  content: "";
  position: absolute;
  bottom: 0; left: 18px; right: 18px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
}

.boot .header {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--acid);
  margin-bottom: 14px;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(185,255,31,0.3);
}
.boot .header span { display: inline-flex; align-items: center; gap: 6px; }
.boot .header .blink { color: var(--blood); }

.boot .title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.boot .title-row .em {
  width: 48px; height: 48px;
  filter: drop-shadow(0 0 16px var(--acid-glow-65));
  animation: emblem-spin 12s linear infinite;
}
.boot .title-row h1 {
  font-family: var(--f-cartoon);
  font-size: 28px;
  color: var(--acid);
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1;
  text-shadow: 0 0 18px var(--acid-glow-65);
}
.boot .title-row .sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--bone-dim);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

@keyframes emblem-spin {
  to { transform: rotate(360deg); }
}

.boot .line {
  padding: 4px 0;
  display: flex; align-items: center; gap: 12px;
  opacity: 0;
  animation: line-in 220ms forwards;
}
.boot .line .tag {
  color: var(--acid-deep);
  min-width: 88px;
  font-weight: 700;
}
.boot .line.warn .tag { color: var(--rust); }
.boot .line.kill .tag { color: var(--blood); }
.boot .line .body { color: var(--bone); }
.boot .line .ok { color: var(--acid); margin-left: auto; font-weight: 700; }
@keyframes line-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.boot .progress {
  margin-top: 22px;
  height: 8px;
  background: rgba(185,255,31,0.06);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(185,255,31,0.25);
}
.boot .progress::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--acid-deep), var(--acid));
  width: var(--w, 0%);
  transition: width 60ms linear;
  box-shadow: 0 0 16px var(--acid);
}
.boot .progress-row {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 10px;
  color: var(--bone-dim);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.boot .scan {
  position: absolute; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--acid-glow-25), transparent);
  animation: scan-down 3s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.boot.exit { animation: boot-out 600ms forwards; }
@keyframes boot-out {
  0%   { opacity: 1; filter: brightness(1) blur(0); }
  40%  { opacity: 1; filter: brightness(3) contrast(1.6) blur(0); }
  100% { opacity: 0; filter: brightness(0) blur(8px); transform: scale(1.02); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 56px var(--gutter) 48px;
  max-width: 1600px;
  margin: 0 auto;
  z-index: 2;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
}

.hero-left { position: relative; padding-left: 0; }
.hero-eyebrow { transform: rotate(-1deg); margin-bottom: 18px; }
.hero-title { transform: rotate(-0.5deg); }
.hero-title .flippy { transform: rotate(1.5deg) translateX(-2%); }
.hero-sub-line { transform: rotate(-0.7deg); }
.hero-cta-row { transform: rotate(0.3deg); }
.hero-sub { transform: rotate(-0.2deg); max-width: 620px; }
.trusted { transform: rotate(-0.4deg); margin-top: 32px; }

/* Eyebrow line — no green circle, just text + decorations */
.hero-eyebrow {
  font-family: var(--f-stencil);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--bone-dim);
  text-transform: uppercase;
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before {
  content: "✕✕";
  color: var(--acid);
  letter-spacing: -0.1em;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--acid);
}

/* Title — "WE ARE" smaller white stencil + "FLIPPY" big acid brush */
.hero-title {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  line-height: 1;
  position: relative;
}
.hero-title .we-are {
  font-family: var(--f-stencil);
  font-weight: 400;
  font-size: clamp(48px, 7.5vw, 96px);
  color: var(--bone);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 0.9;
  text-shadow:
    3px 3px 0 #000,
    5px 5px 0 var(--olive-deep);
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.06);
}
.hero-title .flippy {
  font-family: var(--f-cartoon);
  font-weight: 400;
  font-size: clamp(72px, 12vw, 156px);
  color: var(--acid);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  line-height: 0.9;
  text-shadow:
    3px 3px 0 #000,
    6px 6px 0 var(--olive-deep),
    0 0 30px var(--acid-glow-45);
  margin-top: 22px;
  position: relative;
  white-space: nowrap;
  overflow: visible;
}
.hero-title .flippy .split {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* "JOIN THE PSYCHO'S" sub-line */
.hero-sub-line {
  font-family: var(--f-stencil);
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--bone);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 18px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-sub-line .crosshair {
  color: var(--acid);
  font-size: 0.85em;
  text-shadow: 0 0 12px var(--acid-glow-65);
}
.hero-sub-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--acid) 0 8px, transparent 8px 16px);
  opacity: 0.6;
  max-width: 80px;
}

/* Hero subtitle paragraph */
.hero-sub {
  max-width: 560px;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--bone-dim);
  margin: 22px 0 32px;
  line-height: 1.6;
}
.hero-sub .acid { color: var(--acid); font-weight: 700; }

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}

/* Trusted by row */
.trusted {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trusted-label {
  font-family: var(--f-stencil);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ash);
  text-transform: uppercase;
}
.trusted-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.trusted-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-stencil);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--bone-dim);
  text-transform: uppercase;
  filter: grayscale(1) brightness(0.85);
  transition: filter 200ms, color 200ms;
}
.trusted-logo:hover { filter: none; color: var(--bone); }
.trusted-logo .tg-glyph {
  color: var(--bone-dim);
  font-size: 18px;
}

/* ============================================================
   Hero emblem — big glowy bear on the right
   ============================================================ */
.hero-right {
  position: relative;
  aspect-ratio: 1;
  max-width: 680px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emblem-wrap {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emblem-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    var(--acid-glow-45) 0%,
    rgba(185,255,31,0.18) 35%,
    transparent 70%);
  filter: blur(20px);
  animation: pulse-soft 4.5s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}
.emblem-rings { position: absolute; inset: 0; pointer-events: none; }
.emblem-rings .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(185,255,31,0.18);
  animation: ring-rotate 30s linear infinite;
}
.emblem-rings .r1 { inset: 4%; border-style: dashed; }
.emblem-rings .r2 { inset: 14%; animation-direction: reverse; animation-duration: 40s; }
.emblem-rings .r3 { inset: 26%; border-style: dotted; }
@keyframes ring-rotate {
  to { transform: rotate(360deg); }
}

.emblem-img {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(185,255,31,0.4));
  animation: float-bob 6s ease-in-out infinite;
}
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* blood drips around the emblem */
.emblem-blood-drips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.emblem-blood-drips span {
  position: absolute;
  width: 6px;
  background: var(--blood);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 8px var(--blood);
  opacity: 0.75;
}
.emblem-blood-drips span:nth-child(1) {
  top: 30%; left: 18%; height: 24px;
  animation: drip 4s ease-in 1s infinite;
}
.emblem-blood-drips span:nth-child(2) {
  top: 38%; right: 22%; height: 16px;
  animation: drip 5s ease-in 2.4s infinite;
}
.emblem-blood-drips span:nth-child(3) {
  top: 52%; left: 50%; height: 20px;
  animation: drip 6s ease-in 0.4s infinite;
}
@keyframes drip {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  30%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1) translateY(8px); opacity: 1; }
  100% { transform: scaleY(1) translateY(40px); opacity: 0; }
}

/* ============================================================
   STATS ROW
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 56px;
}
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

.stat {
  position: relative;
  padding: 18px 18px;
  background: #000;
  border: 1px solid rgba(166,255,20,0.18);
  clip-path: polygon(
    12px 0, 100% 0, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 0 100%, 0 12px
  );
  display: flex; gap: 14px; align-items: center;
  transition: border-color 180ms, background 180ms, transform 180ms;
}
.stat:hover {
  border-color: var(--acid);
  background: #050605;
  transform: translateY(-2px);
}
.stat .ic {
  width: 52px; height: 52px;
  background: #000;
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(185,255,31,0.22);
}
.stat .ic img {
  width: 40px; height: 40px; object-fit: contain;
}
.stat .stat-text { min-width: 0; }
.stat .num {
  font-family: var(--f-cartoon);
  font-size: 22px;
  color: var(--acid);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px var(--acid-glow-45);
}
.stat .lbl {
  font-family: var(--f-stencil);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
  text-transform: uppercase;
  margin-top: 6px;
  line-height: 1.2;
}

/* ============================================================
   SECTION HEAD (simplified)
   ============================================================ */
.section {
  position: relative;
  padding: 64px var(--gutter);
  max-width: 1500px;
  margin: 0 auto;
  z-index: 2;
}
@media (max-width: 700px) { .section { padding: 48px var(--gutter); } }

.section-head {
  margin-bottom: 56px;
  text-align: center;
}
.section-eyebrow {
  font-family: var(--f-stencil);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--ash);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--acid);
  opacity: 0.6;
}
.section-title {
  font-family: var(--f-cartoon);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 78px);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 4px 4px 0 var(--olive-deep);
  margin: 0;
  letter-spacing: 0.005em;
}
.section-title .acid {
  color: var(--acid);
  text-shadow: 4px 4px 0 var(--olive-deep), 0 0 30px var(--acid-glow-45);
}
.section-sub {
  margin-top: 14px;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--bone-dim);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 900px) { .manifesto { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 900px) { .manifesto { grid-template-columns: 1fr; gap: 40px; } }

.manifesto p {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--bone-dim);
  margin: 0 0 18px;
}
.manifesto p strong {
  color: var(--acid);
  font-weight: 700;
}
.manifesto .acid {
  color: var(--acid);
  font-weight: 700;
}
.manifesto .kicker {
  font-family: var(--f-cartoon);
  font-size: clamp(30px, 4vw, 48px);
  color: var(--bone);
  line-height: 1.05;
  margin-top: 32px;
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 var(--olive-deep);
  text-align: center;
}
.manifesto .kicker .acid {
  color: var(--acid);
  text-shadow: 3px 3px 0 var(--olive-deep), 0 0 24px var(--acid-glow-45);
}

/* Stay-psycho card */
.psycho-figure {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
@media (max-width: 560px) { .psycho-card { grid-template-columns: 1fr; } }
.psycho-sticker {
  width: 100%;
  max-width: 480px;
  height: auto;
  animation: float-bob 5s ease-in-out infinite;
}
.psycho-card-meta .small {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--acid);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.psycho-name {
  font-family: var(--f-cartoon);
  font-size: 36px;
  color: var(--acid);
  margin: 4px 0 16px;
  letter-spacing: 0.02em;
  text-shadow: 0 0 16px var(--acid-glow-45);
}
.psycho-card-meta dl {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 16px;
  font-family: var(--f-mono);
  font-size: 13px;
}
.psycho-card-meta dt { color: var(--ash); letter-spacing: 0.1em; text-transform: uppercase; }
.psycho-card-meta dd { margin: 0; color: var(--bone); }
.psycho-card-meta dd.hot { color: var(--acid); font-weight: 700; }

/* ============================================================
   FEATURES — image already contains title, only desc + read more
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1600px;
  margin: 0 auto;
}
@media (max-width: 1100px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

.feature {
  position: relative;
  background: #000;
  border: 1px solid rgba(166,255,20,0.2);
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px
  );
  overflow: hidden;
  transition: transform 280ms, border-color 180ms, box-shadow 180ms;
  display: flex;
  flex-direction: column;
}
.feature:hover {
  transform: translateY(-4px);
  border-color: var(--acid);
  box-shadow: 0 0 32px var(--acid-glow-25);
}
.feature-img {
  aspect-ratio: 1 / 1;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  overflow: hidden;
}
.feature-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform 520ms ease;
}
.feature:hover .feature-img img { transform: scale(1.06); }

.feature-body {
  padding: 18px 22px 22px;
  border-top: 1px solid rgba(185,255,31,0.18);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.feature-desc {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--bone);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  text-align: center;
}
.feature-more { display: none; }

@media (max-width: 980px) {
  .gear-shell { grid-template-columns: 1fr; }
}

.gear-title-card {
  background: transparent;
  border: 0;
  clip-path: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gear-title-img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  animation: float-bob 5s ease-in-out infinite;
}

.gear-carousel {
  position: relative;
}

.gear-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  background: #000;
  border: 1px solid rgba(185,255,31,0.4);
  color: var(--acid);
  font-size: 24px;
  font-family: var(--f-cartoon);
  display: grid; place-items: center;
  cursor: crosshair;
  z-index: 2;
  transition: background 160ms, box-shadow 160ms;
}
.gear-arrow:hover {
  background: var(--acid);
  color: #000;
  box-shadow: 0 0 24px var(--acid-glow-65);
}
.gear-arrow.left { left: -16px; }
.gear-arrow.right { right: -16px; }
@media (max-width: 560px) {
  .gear-arrow.left { left: 0; }
  .gear-arrow.right { right: 0; }
}

.gear-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--acid) #000;
}
.gear-track::-webkit-scrollbar { height: 6px; }
.gear-track::-webkit-scrollbar-track { background: #000; }
.gear-track::-webkit-scrollbar-thumb { background: var(--olive-hi); }
.gear-track::-webkit-scrollbar-thumb:hover { background: var(--acid); }

.gear-card {
  position: relative;
  background: #000;
  border: 1px solid rgba(166,255,20,0.18);
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px
  );
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  transition: transform 280ms, border-color 180ms, box-shadow 180ms;
  overflow: hidden;
}
.gear-card:hover {
  transform: translateY(-4px);
  border-color: var(--acid);
  box-shadow: 0 0 32px var(--acid-glow-25);
}
.gear-card .gear-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--f-stencil);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--void);
  background: var(--acid);
  padding: 4px 8px;
  text-transform: uppercase;
  box-shadow: 0 0 16px var(--acid-glow-45);
  animation: pulse-acid 2s ease-in-out infinite;
}
.gear-card .gear-img {
  aspect-ratio: 1;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gear-card .gear-img img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform 520ms;
}
.gear-card:hover .gear-img img { transform: scale(1.04) rotate(-1deg); }
.gear-foot {
  padding: 14px 18px;
  border-top: 1px solid rgba(185,255,31,0.12);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  background: #000;
}
.gear-name-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gear-name {
  font-family: var(--f-stencil);
  font-weight: 400;
  font-size: 16px;
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.gear-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ash);
  text-transform: uppercase;
}
.gear-price {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--acid);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

/* ============================================================
   ROADMAP — pure black background, full image, contained
   ============================================================ */
.section-roadmap {
  background: #000;
  max-width: none;
  padding: 56px var(--gutter);
}
.roadmap-frame {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
}
.roadmap-frame::before { display: none; }
.roadmap-image {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 720px) {
  .section-roadmap { padding: 56px var(--gutter); }
}

/* ============================================================
   FINAL CTA — full-width banner image (asset 19) + accessible actions
   ============================================================ */
.final-cta {
  position: relative;
  background: #000;
  padding: 56px var(--gutter) 24px;
  overflow: hidden;
  border-top: 1px solid rgba(185,255,31,0.16);
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 30% 50%, rgba(74,99,34,0.18), transparent 70%),
    radial-gradient(700px 500px at 80% 50%, rgba(215, 38, 61, 0.08), transparent 60%);
  pointer-events: none;
  opacity: 0.7;
}
.final-banner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  z-index: 1;
}
.final-banner-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 60px rgba(185,255,31,0.18));
}
.final-banner-cta {
  position: absolute;
  right: 4%;
  top: 20%;
  width: 30%;
  height: 60%;
  background: transparent;
  border: 0;
  cursor: crosshair;
  z-index: 2;
  border-radius: 8px;
  transition: background-color 200ms;
}
.final-banner-cta:hover {
  background: rgba(185, 255, 31, 0.04);
  box-shadow: 0 0 0 1px rgba(185, 255, 31, 0.3);
}
.final-banner-cta:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 4px;
}
.final-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .final-cta { padding: 40px var(--gutter) 20px; }
  .final-banner-cta { display: none; }
  .final-cta-actions { margin-top: 18px; }
}

/* btn-big used in the final actions block */
.btn-big {
  padding: 18px 28px;
  font-size: 17px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #000;
  border-top: 1px solid rgba(185,255,31,0.2);
  margin-top: 0;
  padding: 18px clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-left .copy {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ash);
  text-transform: uppercase;
}
.footer-legal {
  display: flex;
  gap: 28px;
}
.footer-legal a {
  font-family: var(--f-stencil);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--bone-dim);
  text-transform: uppercase;
}
.footer-legal a:hover { color: var(--acid); }

.socials {
  display: flex; gap: 10px;
}
.sock {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: #000;
  border: 1px solid rgba(185,255,31,0.22);
  color: var(--bone-dim);
  transition: all 140ms;
}
.sock:hover {
  border-color: var(--acid);
  color: var(--acid);
  box-shadow: 0 0 16px var(--acid-glow-25);
}

/* ============================================================
   NEXT-LEVEL EFFECTS — cursor light, scroll progress, parallax
   ============================================================ */
.cursor-light {
  position: fixed;
  top: 0; left: 0;
  width: 560px;
  height: 560px;
  pointer-events: none;
  z-index: 35;
  background: radial-gradient(circle at center,
    rgba(185, 255, 31, 0.10) 0%,
    rgba(185, 255, 31, 0.04) 30%,
    transparent 70%);
  mix-blend-mode: screen;
  filter: blur(40px);
  transition: opacity 220ms;
  will-change: transform;
}
@media (pointer: coarse) { .cursor-light { display: none; } }

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--acid), var(--acid-hot));
  box-shadow: 0 0 12px var(--acid), 0 0 4px var(--acid);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1000;
  pointer-events: none;
}

/* Mouse-parallax wrapper for the hero emblem */
.hero-right .emblem-parallax {
  width: 100%; height: 100%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Parallax slow-drift element (uses --scroll-y from useScrollParallax) */
.parallax-slow {
  transform: translate3d(0, var(--scroll-y, 0px), 0);
  will-change: transform;
}

/* Floating tactical glyphs in background of hero / sections */
.floaters {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.floater {
  position: absolute;
  color: var(--acid);
  opacity: 0.05;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  user-select: none;
}
.floater.big { font-size: 14vw; opacity: 0.018; line-height: 0.85; color: var(--acid); font-family: var(--f-cartoon); }

/* Split text reveal */
.split { display: inline-flex; flex-wrap: wrap; }
.split-letter { will-change: transform, opacity; backface-visibility: hidden; }

/* Smooth scrolling site-wide */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Better tap targets on mobile */
@media (max-width: 720px) {
  .btn { padding: 14px 18px; font-size: 15px; }
  .btn-big { padding: 16px 22px; font-size: 15px; }
  .hero { padding-top: 40px; padding-bottom: 60px; }
  .hero-grid { gap: 16px; }
  .hero-right { max-width: 480px; margin: 0 auto; }
  .section { padding: 64px var(--gutter); }
  .gear-arrow { width: 36px; height: 36px; font-size: 20px; }
  .nav-inner { padding: 12px var(--gutter); }
  .nav-brand img { width: 32px; height: 32px; }
  .nav-brand .word { font-size: 18px; }
}

@media (max-width: 480px) {
  .hero-title { line-height: 0.82; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.2em; }
  .hero-sub { font-size: 15px; }
  .hero-sub-line { font-size: 16px; gap: 8px; }
  .hero-sub-line::after { max-width: 40px; }
  .footer { padding: 18px var(--gutter); flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-legal { gap: 14px; }
  .trusted-row { gap: 16px; }
  .trusted-logo { font-size: 11px; }
  .trusted-logo .tg-glyph { font-size: 14px; }
}


/* ============================================================
   V3 — MARQUEE STRIP
   ============================================================ */
.marquee {
  position: relative;
  background: #000;
  border-top: 1px solid rgba(185,255,31,0.18);
  border-bottom: 1px solid rgba(185,255,31,0.18);
  overflow: hidden;
  height: 64px;
  display: flex;
  align-items: center;
  z-index: 2;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, #000, transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, #000, transparent); }

.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  animation: marquee-roll 38s linear infinite;
  padding-left: 40px;
}
.marquee.reverse .marquee-track {
  animation-direction: reverse;
}
@keyframes marquee-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
.marquee-item {
  font-family: var(--f-cartoon);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--bone);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.marquee-item .marquee-star {
  color: var(--acid);
  font-size: 18px;
  filter: drop-shadow(0 0 8px var(--acid-glow-65));
  animation: spin-slow 8s linear infinite;
}
.marquee-item:nth-child(3n) { color: var(--acid); text-shadow: 0 0 24px var(--acid-glow-45); }
.marquee-item:nth-child(5n) { color: var(--bone); }
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* ============================================================
   V3 — PSYCHO SQUAD full-bleed section
   ============================================================ */



@keyframes squad-drift {
  from { transform: scale(1.04) translateX(-12px); }
  to   { transform: scale(1.08) translateX(12px); }
}


















/* ============================================================
   V3 — Intel grid tiles
   ============================================================ */
.intel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
  max-width: 560px;
}
@media (max-width: 640px) { .intel-grid { grid-template-columns: repeat(2, 1fr); } }

.intel-tile {
  padding: 10px 12px;
  background: rgba(185,255,31,0.04);
  border: 1px solid rgba(185,255,31,0.18);
  clip-path: polygon(
    6px 0, 100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%, 0 6px
  );
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.intel-k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ash);
  text-transform: uppercase;
}
.intel-v {
  font-family: var(--f-stencil);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--acid);
  text-transform: uppercase;
}


/* ============================================================
   V3.1 — LIGHTNING + AUDIO + RATIO LOCK
   ============================================================ */

/* Lock the site's visual width on huge monitors so the layout doesn't drift.
   The body is centered + clipped to a maximum, with the page bg extending to viewport edges. */
html, body { background: #000; }
body { margin: 0; max-width: none; }

/* Right-click disabled — give a small hint via cursor */
img { user-drag: none; -webkit-user-drag: none; }

/* Lightning flash overlay — full-screen acid green flash */
.lightning-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(185, 255, 31, 0.5), transparent 60%),
    rgba(185, 255, 31, 0.18);
  opacity: 0;
  mix-blend-mode: screen;
}
.lightning-flash.flash-on {
  animation: lightning-flash 540ms ease-out forwards;
}
@keyframes lightning-flash {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  18%  { opacity: 0.15; }
  24%  { opacity: 0.8; }
  40%  { opacity: 0.05; }
  60%  { opacity: 0.3; }
  100% { opacity: 0; }
}

/* Zigzag bolt SVG drawn across the screen */
.lightning-bolt {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 91;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(185,255,31,0.9)) drop-shadow(0 0 24px rgba(185,255,31,0.5));
}
.lightning-bolt path {
  stroke: var(--acid);
  stroke-width: 3;
  fill: none;
}
.lightning-bolt.bolt-on {
  animation: bolt-flash 520ms ease-out forwards;
}
@keyframes bolt-flash {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  20%  { opacity: 0.2; }
  30%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Audio toggle button — bottom-left floating */
.audio-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 95;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #000;
  color: var(--acid);
  border: 1px solid var(--acid);
  cursor: crosshair;
  transition: all 160ms;
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 0 100%, 0 8px
  );
  box-shadow: 0 0 14px var(--acid-glow-25);
}
.audio-toggle:hover {
  background: var(--acid);
  color: #000;
  box-shadow: 0 0 18px var(--acid-glow-65);
}
.audio-toggle.muted {
  color: var(--bone-dim);
  border-color: rgba(185, 255, 31, 0.4);
  box-shadow: none;
}
@media (max-width: 720px) {
  .audio-toggle { left: 10px; bottom: 10px; }
}

/* Section title shadow paint via stack — no more SVG filter, cleaner */
.section-title,
.squad-title,
.hero-title .we-are,
.hero-title .flippy {
  /* ensure crisp rendering */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Improved marquee with tactical chevrons */
.marquee {
  height: 56px;
  background: linear-gradient(180deg, #000 0%, #0a0d0a 50%, #000 100%);
  position: relative;
  border-top: 1px solid var(--acid);
  border-bottom: 1px solid var(--acid);
}
.marquee::before,
.marquee::after {
  width: 120px;
}
.marquee-item {
  font-family: var(--f-stencil);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--bone);
}
.marquee-item .marquee-star {
  color: var(--blood);
  font-size: 14px;
  animation: none;
  filter: drop-shadow(0 0 6px var(--blood));
  letter-spacing: 0;
}
.marquee-item:nth-child(3n) .marquee-star { color: var(--acid); filter: drop-shadow(0 0 8px var(--acid-glow-65)); }
.marquee-item:nth-child(3n) { color: var(--acid); text-shadow: 0 0 16px var(--acid-glow-45); }

/* Make squad text wrap normally on huge backgrounds */




/* Reveal-wrap fix: when used inside flex/grid, contents must inherit display */
.gear-card.reveal-card, .feature.reveal-card { width: 100%; }


/* ============================================================
   V3.2 — PSYCHO BAND (transition strip, was full-section)
   ============================================================ */
.psycho-band {
  position: relative;
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(220px, 32vw, 380px);
  background: #000;
  overflow: hidden;
  border-top: 1px solid rgba(166,255,20,0.2);
  border-bottom: 1px solid rgba(166,255,20,0.2);
}
.band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.band-bg-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
@keyframes band-drift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.04); }
}
@keyframes band-drift {
  from { transform: scale(1.0) translateY(-2px); }
  to   { transform: scale(1.02) translateY(2px); }
}
@keyframes band-drift {
  from { transform: scale(1.03) translateX(-10px); }
  to   { transform: scale(1.06) translateX(10px); }
}
@keyframes band-drift {
  from { transform: scale(1.02) translateX(-12px); }
  to   { transform: scale(1.04) translateX(12px); }
}
@keyframes band-drift {
  from { transform: translate(calc(-50% - 12px), -42%); }
  to   { transform: translate(calc(-50% + 12px), -40%); }
}
@keyframes band-drift {
  from { transform: translate(calc(-50% - 12px), -52%); }
  to   { transform: translate(calc(-50% + 12px), -50%); }
}
@keyframes band-drift {
  from { transform: translateX(calc(-50% - 8px)) translateY(2px); }
  to   { transform: translateX(calc(-50% + 8px)) translateY(-2px); }
}
.band-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, transparent 12%, transparent 88%, #000 100%);
}
.band-inner {
  position: relative;
  z-index: 2;
  padding: 36px var(--gutter) 0;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  text-align: center;
  pointer-events: none;
}
.band-inner > * { pointer-events: auto; }
.band-eyebrow {
  font-family: var(--f-stencil);
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--acid);
  text-transform: uppercase;
  margin-bottom: 18px;
  text-shadow: 0 0 12px var(--acid-glow-65), 0 0 1px var(--acid);
}
.band-title {
  font-family: var(--f-cartoon);
  font-weight: 400;
  margin: 0 0 14px;
  line-height: 0.9;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.95));
}
.band-w {
  font-family: var(--f-stencil);
  font-size: clamp(40px, 6vw, 80px);
  color: var(--bone);
  text-shadow: 3px 3px 0 #000, 5px 5px 0 var(--olive-deep);
  letter-spacing: 0.01em;
}
.band-a {
  font-size: clamp(48px, 8vw, 120px);
  color: var(--acid);
  text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--olive-deep), 0 0 32px var(--acid-glow-65);
  letter-spacing: 0.005em;
}
.band-sub {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--bone-dim);
  max-width: 540px;
  margin: 0 auto;
  text-shadow: 0 2px 12px #000;
}
.band-sub .acid { color: var(--acid); font-weight: 700; }
@media (max-width: 720px) {
  .psycho-band { height: 380px; }
  .band-inner { padding-top: 24px; }
}

/* ============================================================
   V3.2 — TOKENOMICS section
   ============================================================ */
.section-tokenomics { padding-bottom: 80px; }
.tok-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) { .tok-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tok-grid { grid-template-columns: 1fr; } }
.tok-cell {
  position: relative;
  padding: 22px 22px 26px;
  background: #000;
  border: 1px solid rgba(166,255,20,0.22);
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px
  );
  transition: border-color 180ms, box-shadow 180ms, transform 180ms;
}
.tok-cell:hover {
  border-color: var(--acid);
  box-shadow: 0 0 26px var(--acid-glow-25);
  transform: translateY(-3px);
}
.tok-k {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--acid);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tok-v {
  display: block;
  font-family: var(--f-stencil);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--bone);
  letter-spacing: 0.01em;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--olive-deep);
}
.tok-sub {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--bone-dim);
  text-transform: uppercase;
}
.tok-corner {
  position: absolute;
  top: 8px; right: 8px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--acid);
  border-right: 2px solid var(--acid);
  opacity: 0.7;
}
.tok-disclaimer {
  margin: 32px auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ash);
}
.tok-disclaimer .acid { color: var(--acid); font-weight: 700; }

/* ============================================================
   V3.2 — FAQ accordion
   ============================================================ */
.section-faq { padding-bottom: 80px; }
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #000;
  border: 1px solid rgba(166,255,20,0.18);
  clip-path: polygon(
    10px 0, 100% 0, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 0 100%, 0 10px
  );
  transition: border-color 180ms, box-shadow 180ms;
}
.faq-item.open {
  border-color: var(--acid);
  box-shadow: 0 0 26px var(--acid-glow-25);
}
.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: crosshair;
  color: var(--bone);
  font-family: var(--f-stencil);
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.faq-n {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--acid);
  min-width: 28px;
}
.faq-text { flex: 1; }
.faq-plus {
  font-family: var(--f-cartoon);
  font-size: 24px;
  color: var(--acid);
  line-height: 1;
}
.faq-a {
  padding: 0 22px 18px 66px;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--bone-dim);
  line-height: 1.6;
}

/* ============================================================
   V3.2 — TIGHTER FINAL CTA / FOOTER block
   ============================================================ */
.final-cta {
  padding-bottom: 8px !important;
}
.final-banner {
  filter: drop-shadow(0 0 40px rgba(185,255,31,0.18));
}
.final-banner-img {
  display: block;
}
/* Hide the duplicate action row — the banner image is the CTA */
.final-cta-actions { display: none !important; }
/* Make the entire banner the click target on touch / small screens */
@media (max-width: 720px) {
  .final-cta-actions { display: flex !important; }
}

/* Footer integrates directly under the banner — no gap */
.footer {
  border-top: 1px solid rgba(185,255,31,0.18);
  margin-top: 0;
  padding: 16px var(--gutter);
}
.footer-left .copy { font-size: 10px; }

/* Better DEXTools/DEXScreener/CMC/CoinGecko monogram tiles */
.trusted-logo {
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(185,255,31,0.18);
  background: rgba(185,255,31,0.04);
  border-radius: 4px;
  filter: none;
  color: var(--bone-dim);
}
.trusted-logo:hover {
  border-color: var(--acid);
  color: var(--bone);
  background: rgba(185,255,31,0.08);
}
.trusted-logo .tg-glyph {
  color: var(--acid);
  font-size: 16px;
  filter: drop-shadow(0 0 6px var(--acid-glow-45));
}


/* ============================================================
   V3.4 — AMBIENT NEON PAINT SPLASHES
   Scattered SVG paint splatters fade in/out across the page
   ============================================================ */
.paint-splash { display: none; }
.paint-splash svg { display: block; }
.paint-splash.s1 { top: 6%;  left: -2%;  width: 240px; transform: rotate(-12deg); opacity: 0.55; }
.paint-splash.s2 { top: 22%; right: -3%; width: 280px; transform: rotate(28deg); animation-delay: 1.4s; opacity: 0.4; }
.paint-splash.s3 { top: 48%; left: 38%;  width: 200px; transform: rotate(-40deg); animation-delay: 2.6s; opacity: 0.3; }
.paint-splash.s4 { top: 64%; right: 8%;  width: 320px; transform: rotate(8deg); animation-delay: 0.8s; opacity: 0.45; }
.paint-splash.s5 { top: 84%; left: -4%;  width: 260px; transform: rotate(60deg); animation-delay: 3.2s; opacity: 0.5; }
.paint-splash.s6 { top: 92%; right: 12%; width: 220px; transform: rotate(-20deg); animation-delay: 4s; opacity: 0.35; }
@keyframes splash-pulse {
  0%, 100% { opacity: var(--s-op, 0.45); }
  50%      { opacity: calc(var(--s-op, 0.45) * 1.6); }
}
@media (max-width: 720px) {
  .paint-splash { display: none; }
}

/* Smaller drips inside each major section */
.splash-drips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}


/* ============================================================
   V3.5 — BORDERLESS / WALLPAPER / MICRO SPLATS
   ============================================================ */

/* Subtle electric-line + smoke wallpaper — very low opacity */
.page::before {
  background-image:
    linear-gradient(rgba(166,255,20,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166,255,20,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
}
.bg-wallpaper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 1100px 700px at 20% 20%, rgba(166,255,20,0.04), transparent 60%),
    radial-gradient(ellipse 900px 600px at 80% 70%, rgba(166,255,20,0.03), transparent 60%);
  background-size: auto, auto;
  background-position: 0 0, 0 0;
  animation: wallpaper-drift 120s linear infinite;
  will-change: background-position;
}
@keyframes wallpaper-drift {
  to { background-position: 800px 0, 0 0, 0 0; }
}

/* Lots of tiny micro-splats scattered as pseudo-particles via box-shadow */
.micro-splats {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: screen;
}
.micro-splats span {
  position: absolute;
  background: var(--acid);
  border-radius: 50%;
  width: 4px; height: 4px;
  box-shadow: 0 0 4px var(--acid);
  filter: drop-shadow(0 0 4px var(--acid));
  animation: splat-pulse 7s ease-in-out infinite;
}

@keyframes splat-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 0.9; transform: scale(1.2); }
}

/* Mild per-word color variation on big titles — barely visible */
.title-grad .word-a { color: var(--bone); }
.title-grad .word-b { color: var(--acid); text-shadow: 0 0 30px var(--acid-glow-45); }
.title-grad .word-c {
  background: linear-gradient(180deg, var(--acid-hot), var(--acid-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Make sure full-width regions truly stretch */
.psycho-band, .final-cta, .footer, .marquee {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.psycho-band {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}
.final-cta, .footer, .marquee {
  /* These already span the page width since their parent is the body — no margin trick needed */
}

/* Wider sections breathe better when site is borderless */
.section { max-width: 1500px; }


/* ============================================================
   V3.6 — IMAGE-AS-FOOTER (page-wide stretch, replaces functional footer)
   ============================================================ */
.final-cta-page {
  position: relative;
  background: #000;
  padding: 32px 0 0;
  margin: 0;
  width: 100%;
  border-top: 1px solid rgba(166,255,20,0.18);
}
.final-banner-stretch {
  position: relative;
  width: 100%;
  margin: 0;
}
.final-stretch-img {
  display: block;
  width: 100%;
  height: auto;
}
.final-stretch-cta {
  position: absolute;
  /* The JOIN NOW button sits in the right portion of the banner image */
  right: 4%;
  top: 18%;
  width: 28%;
  height: 56%;
  background: transparent;
  border: 0;
  cursor: crosshair;
  z-index: 2;
  transition: background-color 200ms;
}
.final-stretch-cta:hover {
  background: rgba(166, 255, 20, 0.05);
  box-shadow: 0 0 0 1px rgba(166, 255, 20, 0.4), 0 0 32px rgba(166,255,20,0.25);
}
.final-stretch-cta:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 4px;
}

/* Social link overlays — invisible clickable rectangles positioned over the
   X, Telegram icons baked into the bottom-right area of the image. */
.final-stretch-socials {
  position: absolute;
  right: 4%;
  bottom: 1%;
  display: flex;
  gap: 6px;
  height: 7%;
  z-index: 2;
}
.final-stretch-socials a {
  display: block;
  width: 32px;
  height: 100%;
  cursor: crosshair;
  border-radius: 4px;
  transition: background-color 180ms;
}
.final-stretch-socials a:hover {
  background: rgba(166,255,20,0.12);
}

/* Kill the old functional footer block (we no longer render it) */
.footer { display: none !important; }
.final-cta { display: none !important; } /* old version of FinalCTA */

@media (max-width: 720px) {
  .final-stretch-cta { display: none; }
  .final-stretch-socials { display: none; }
  .final-cta-page { padding-top: 16px; }
}

/* Section spacing: pull successive sections closer */
.section + .section { padding-top: 24px; }
.section + .marquee, .marquee + .section { margin-top: 0; }
.psycho-band + .section { padding-top: 48px; }


/* ============================================================
   V3.8 — BRIGHTER, BOLDER, BIGGER SECONDARY TEXT
   ============================================================ */

/* Hero subtitle — bigger, brighter, heavier */
.hero-sub {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  color: var(--bone) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  max-width: 640px !important;
}

/* Feature card descriptions — bolder & brighter */
.feature-desc {
  font-size: 16px !important;
  color: var(--bone) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Manifesto paragraphs — bigger and heavier */
.manifesto p {
  font-size: 20px !important;
  color: var(--bone) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.manifesto p strong { color: var(--acid); font-weight: 800; }

/* Tokenomics sub-labels — punchier */
.tok-sub {
  font-size: 13px !important;
  color: var(--bone) !important;
  font-weight: 600 !important;
}
.tok-k {
  color: var(--acid) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
.tok-disclaimer {
  color: var(--bone) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
}

/* FAQ answers — bolder & bigger */
.faq-a {
  font-size: 17px !important;
  color: var(--bone) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  padding-bottom: 22px !important;
}

/* Stats numbers + labels — bolder */
.stat .num { font-weight: 400; font-size: 26px; }
.stat .lbl { color: var(--bone) !important; font-size: 12px; font-weight: 600; }

/* Trusted-by row — brighter */
.trusted-label { color: var(--bone-dim); font-weight: 600; }
.trusted-logo { color: var(--bone); font-weight: 600; }

/* Section sub copy — bigger, brighter */
.section-sub {
  color: var(--bone) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
}

/* PsychoCard sticker section labels (still rendered in some places) - kill greys */
.psycho-card-meta dt, .psycho-card-meta dd { color: var(--bone) !important; font-weight: 600 !important; }


/* ============================================================
   V3.11 — CA BOX (placeholder until contract drops)
   ============================================================ */
.ca-box {
  margin: 32px auto 0;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 0;
  background: #000;
  border: 1px solid var(--acid);
  clip-path: polygon(
    12px 0, 100% 0, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 0 100%, 0 12px
  );
  box-shadow: 0 0 24px var(--acid-glow-25);
  overflow: hidden;
}
.ca-tag {
  background: var(--acid);
  color: var(--void);
  font-family: var(--f-stencil);
  font-size: 14px;
  letter-spacing: 0.18em;
  padding: 14px 18px;
  text-transform: uppercase;
}
.ca-val {
  flex: 1;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--bone);
  padding: 14px 16px;
  text-transform: uppercase;
}
.ca-blink {
  padding: 14px 16px;
  color: var(--blood);
  animation: blink 1.2s steps(2) infinite;
  font-size: 14px;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }
@media (max-width: 560px) {
  .ca-val { font-size: 12px; padding: 12px 10px; letter-spacing: 0.12em; }
  .ca-tag { padding: 12px 12px; font-size: 12px; }
}

/* Stats coming-soon ribbon-ish: tighten the .num for COMING SOON copy */
.stat .num {
  font-family: var(--f-stencil) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  color: var(--acid) !important;
  text-shadow: 0 0 12px var(--acid-glow-45);
  line-height: 1.1;
}
.stat .lbl { font-size: 11px; letter-spacing: 0.18em; }


/* ============================================================
   V3.13 — HOW TO BUY STEPS (replaces FAQ)
   ============================================================ */
.buy-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px) { .buy-steps { grid-template-columns: 1fr; } }

.buy-step {
  position: relative;
  background: #000;
  border: 1px solid rgba(166,255,20,0.22);
  padding: 32px 28px;
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px
  );
  transition: border-color 180ms, transform 180ms, box-shadow 180ms;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.buy-step:hover {
  border-color: var(--acid);
  transform: translateY(-4px);
  box-shadow: 0 0 28px var(--acid-glow-25);
}
.buy-step-num {
  font-family: var(--f-cartoon);
  font-weight: 400;
  font-size: 84px;
  line-height: 0.85;
  color: var(--acid);
  text-shadow: 0 0 24px var(--acid-glow-45), 3px 3px 0 #000;
  margin-bottom: 6px;
}
.buy-step-title {
  font-family: var(--f-stencil);
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--bone);
  text-transform: uppercase;
  margin: 6px 0 14px;
  text-align: center;
}
.buy-step-body {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--bone);
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 18px;
  text-align: center;
  max-width: 320px;
}
.buy-step-link {
  font-family: var(--f-stencil);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--acid);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--acid);
  padding-bottom: 2px;
}
.buy-step-link:hover { gap: 12px; color: var(--acid-hot); }

/* Sticky persistent CA box pinned just under the nav */
.ca-sticky {
  position: sticky;
  top: 70px;
  z-index: 38;
  display: flex;
  justify-content: center;
  padding: 10px var(--gutter);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(166,255,20,0.22);
}
.ca-sticky .ca-box {
  margin: 0;
  max-width: 760px;
  width: 100%;
  box-shadow: 0 0 18px var(--acid-glow-25);
}
.ca-sticky .ca-tag { padding: 10px 14px; font-size: 12px; }
.ca-sticky .ca-val { padding: 10px 14px; font-size: 13px; }
.ca-sticky .ca-blink { padding: 10px 12px; font-size: 12px; }
@media (max-width: 720px) {
  .ca-sticky { top: 62px; padding: 8px 12px; }
  .ca-sticky .ca-val { font-size: 11px; letter-spacing: 0.1em; padding: 8px 8px; }
  .ca-sticky .ca-tag { padding: 8px 10px; font-size: 11px; }
}