/* ==========================================================================
   ENLIGHTENED REPUBLIC — ALT ALIENS
   Punk zine x 16-bit arcade. Dark purple void, alien green, xerox texture.

   The organising idea is the FREQUENCY: Ax starts clinical at 1.2 and ends
   human at 9.8. The page carries that arc — --warmth is driven from 0 to 1
   by scroll depth in app.js, and everything tinted by it goes from cold
   cyan at the top of the page to hot magenta at the bottom.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Silkscreen:wght@400;700&family=Special+Elite&display=swap');

:root {
  /* === OG palette (re-skinned to match enlightenedrepublic.online) === */
  --void:    #080808;
  --deep:    #0d0d15;
  --panel:   #0d0d15;
  --panel-2: #12072a;

  --teal:    #00f5d4;
  --teal-30: #00f5d430;
  --teal-08: #00f5d408;
  --teal-dim:#008870;
  --purple:  #b44fff;
  --purple-2:#7c3aed;
  --purple-30:#b44fff30;
  --purple-08:#b44fff08;
  --pink:    #ff2d78;
  --pink-30: #ff2d7830;
  --pink-08: #ff2d7808;
  --yellow:  #ffe600;
  --bone:    #f0edf6;
  --ash:     #8d84a3;
  --ash-2:   #555;

  /* Aliases so existing class names that reference --cyan / --alien / --acid
     / --amber / --magenta still work — they just point at the OG palette now. */
  --cyan:    #00f5d4;
  --alien:   #00f5d4;
  --acid:    #ffe600;
  --amber:   #ffe600;
  --magenta: #ff2d78;

  /* 0 = clinical (top of page), 1 = alive (bottom). Set by app.js. */
  --warmth: 0;
  --heat: color-mix(in oklab, var(--teal) calc((1 - var(--warmth)) * 100%), var(--pink));

  --display: 'Pixelify Sans', 'Trebuchet MS', sans-serif;
  --hud:     'Pixelify Sans', 'Courier New', monospace;
  --body:    'Special Elite', 'Courier New', monospace;

  --edge: 1px solid #1e1e2e;
  --shadow-hard: 0 0 12px rgba(0, 245, 212, 0.3);
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: crosshair;
}
body::after {
  /* Subtle OG-style repeating-conic pattern in the background (like the
     original site's conic-gradient noise layer). */
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-conic-gradient(#0d0d15 0% 25%, transparent 0% 50%);
  background-size: 16px 16px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* --- Atmosphere: starfield canvas, scanlines, xerox grain ---------------- */

#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {  /* CRT scanlines */
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.28) 2px 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

body::after {   /* photocopier grain */
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(3) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

main, header, footer { position: relative; z-index: 1; }

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.01em;
}

.hud {
  font-family: var(--hud);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--heat);
}

.section-tag {
  display: inline-block;
  font-family: var(--hud);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  background: transparent;
  padding: 0.35rem 0.8rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--teal);
  text-shadow: 0 0 8px rgba(0, 245, 212, 0.4);
  transform: rotate(-1.4deg);
  display: inline-block;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}

section { padding: clamp(4.5rem, 11vh, 8rem) 0; }

/* --- Frequency meter (fixed HUD) ---------------------------------------- */

.freq {
  position: fixed;
  right: clamp(0.6rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}

.freq-label {
  font-family: var(--hud);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--ash);
  writing-mode: vertical-rl;
}

.freq-track {
  width: 12px;
  height: min(42vh, 320px);
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid var(--bone);
  position: relative;
  overflow: hidden;
}

.freq-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, var(--alien), var(--heat));
  box-shadow: 0 0 14px var(--heat);
  transition: height 120ms linear;
}

.freq-value {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heat);
  text-shadow: 0 0 12px var(--heat);
  font-variant-numeric: tabular-nums;
}

/* --- Nav ----------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(8, 8, 8, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--teal);
}

/* The teal checkered bar at the very top of the nav (OG match). */
.nav-top-bar {
  height: 8px;
  background: var(--teal);
  background-image: repeating-conic-gradient(var(--teal) 0% 25%, transparent 0% 50%);
  background-size: 8px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.7rem clamp(1.1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1 1 auto;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--teal);
  overflow: hidden;
  flex-shrink: 0;
  transition: box-shadow 200ms;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-logo:hover { box-shadow: 0 0 16px var(--teal); }

.brand-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.05;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-shadow: 0 0 6px rgba(0, 245, 212, 0.4);
  display: block;
}
.brand-text span { display: block; font-size: 0.95rem; }

/* Notched-corner checkered pill for the .tech link (OG match). */
.tech-link {
  font-family: var(--hud);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  padding: 0.45rem 0.8rem 0.45rem 1rem;
  margin-left: 0.4rem;
  background: var(--void);
  border: 1.5px solid var(--teal);
  text-shadow: 0 0 6px rgba(0, 245, 212, 0.4);
  white-space: nowrap;
  transition: background 160ms, color 160ms, box-shadow 160ms;
  /* Notched-corner clip-path */
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  display: none;
}
@media (min-width: 880px) { .tech-link { display: inline-block; } }
.tech-link:hover {
  background: var(--teal);
  color: var(--void);
  text-shadow: none;
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.5);
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  flex-wrap: wrap;
}

.nav-links a {
  font-family: var(--hud);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 140ms, border-color 140ms;
  display: none;
}
@media (min-width: 700px) { .nav-links a { display: inline-block; } }
.nav-links a:hover { color: var(--teal); border-bottom-color: var(--teal); text-shadow: 0 0 6px rgba(0, 245, 212, 0.4); }

.nav-links a.cta {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  padding: 0.55rem 1rem;
  border: 2px solid var(--purple);
  color: var(--purple);
  text-shadow: 0 0 6px rgba(180, 79, 255, 0.5);
  background: transparent;
  margin-left: 0.5rem;
  transition: background 160ms, color 160ms, box-shadow 160ms;
}
.nav-links a.cta:hover {
  background: var(--purple);
  color: var(--bone);
  text-shadow: none;
  border-color: var(--purple);
  box-shadow: 0 0 14px rgba(180, 79, 255, 0.6);
  border-bottom-color: var(--purple);
}
.nav-links a.cta {
  background: transparent;
  color: var(--purple);
  padding: 0.45rem 0.85rem;
  border: 2px solid var(--purple);
  text-shadow: 0 0 6px rgba(180, 79, 255, 0.5);
  transition: background 160ms, color 160ms, box-shadow 160ms, border-color 160ms;
}
.nav-links a.cta:hover {
  background: var(--purple);
  color: var(--bone);
  border-color: var(--purple);
  text-shadow: none;
  box-shadow: 0 0 14px rgba(180, 79, 255, 0.6);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: block;
  padding: 0 0 4rem;
  overflow: hidden;
}

.hero-heads {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-head {
  position: absolute;
  width: clamp(70px, 9vw, 128px);
  image-rendering: pixelated;
  opacity: 0.5;
  filter: drop-shadow(0 0 18px rgba(93, 214, 44, 0.35));
  animation: drift var(--dur, 22s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(-5deg); }
  to   { transform: translate3d(var(--dx, 30px), var(--dy, -40px), 0) rotate(5deg); }
}

.hero-inner { position: relative; z-index: 1; max-width: 780px; }

.hero h1 {
  font-size: clamp(2.9rem, 10.5vw, 7.4rem);
  text-transform: uppercase;
  margin: 0.6rem 0 0;
  color: var(--bone);
  text-shadow:
    4px 0 0 var(--magenta),
   -4px 0 0 var(--cyan),
    0 8px 0 rgba(0, 0, 0, 0.55);
  animation: chroma 5.5s steps(2) infinite;
}

@keyframes chroma {
  0%, 92%, 100% { text-shadow: 4px 0 0 var(--magenta), -4px 0 0 var(--cyan), 0 8px 0 rgba(0,0,0,.55); }
  94% { text-shadow: -9px 0 0 var(--magenta), 9px 0 0 var(--acid), 0 8px 0 rgba(0,0,0,.55); }
  97% { text-shadow: 12px 2px 0 var(--cyan), -7px -2px 0 var(--magenta), 0 8px 0 rgba(0,0,0,.55); }
}

.hero h1 .sub {
  display: block;
  font-size: clamp(0.95rem, 2.6vw, 1.9rem);
  color: var(--alien);
  text-shadow: none;
  letter-spacing: 0.14em;
  margin-top: 0.7rem;
}

.hero p.lede {
  font-size: clamp(1rem, 1.9vw, 1.22rem);
  max-width: 55ch;
  color: var(--bone);
  margin: 1.8rem 0 2.4rem;
  border-left: 3px solid var(--alien);
  padding-left: 1.1rem;
}

.buttons { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 0.9rem 1.8rem;
  border: 2px solid var(--teal);
  box-shadow: 0 0 0 0 transparent;
  color: var(--teal);
  background: transparent;
  transition: background 160ms, color 160ms, box-shadow 160ms, transform 80ms;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 245, 212, 0.4);
  position: relative;
}
.btn:hover {
  background: var(--teal);
  color: var(--void);
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.5);
  text-shadow: none;
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn.alt {
  border-color: var(--purple);
  color: var(--purple);
  text-shadow: 0 0 8px rgba(180, 79, 255, 0.5);
}
.btn.alt:hover {
  background: var(--purple);
  color: var(--bone);
  box-shadow: 0 0 16px rgba(180, 79, 255, 0.55);
  text-shadow: none;
}

.btn.ghost {
  border-color: var(--ash);
  color: var(--bone);
  text-shadow: none;
}
.btn.ghost:hover {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.4);
  text-shadow: 0 0 8px rgba(0, 245, 212, 0.4);
}

.btn.pink {
  border-color: var(--pink);
  color: var(--pink);
  text-shadow: 0 0 8px rgba(255, 45, 120, 0.5);
}
.btn.pink:hover {
  background: var(--pink);
  color: var(--bone);
  box-shadow: 0 0 16px rgba(255, 45, 120, 0.6);
  text-shadow: none;
}

/* --- Generic blocks ------------------------------------------------------ */

.section-head { max-width: 62ch; margin-bottom: 3rem; }

.section-head h2 {
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  text-transform: uppercase;
  color: var(--bone);
}
.section-head h2 em { color: var(--heat); font-style: normal; }

.section-head p { color: var(--ash); font-size: 1.05rem; margin-top: 1rem; }

.rule {
  height: 0;
  border-top: 2px dashed rgba(237, 228, 211, 0.25);
  margin: 0;
}

/* --- The Eight: arcade character select --------------------------------- */

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.15rem;
}

.card {
  position: relative;
  border: var(--edge);
  background: linear-gradient(160deg, var(--purple), var(--deep));
  padding: 1.3rem 1.1rem 1.5rem;
  text-align: center;
  overflow: hidden;
  transition: transform 150ms, box-shadow 150ms, background 200ms;
  box-shadow: var(--shadow-hard);
}

.card::before {  /* scan sweep on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(182, 255, 63, 0.16), transparent);
  transform: translateY(-100%);
  transition: transform 520ms ease;
  pointer-events: none;
}
.card:hover::before { transform: translateY(100%); }

.card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0 var(--void);
  background: linear-gradient(160deg, var(--purple-2), var(--purple));
}

.card img {
  width: 118px;
  height: 118px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 0.8rem;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.5));
  transition: transform 200ms;
}
.card:hover img { transform: translateY(-5px) scale(1.06); }

.card h3 {
  font-size: 1.65rem;
  text-transform: uppercase;
  color: var(--acid);
  letter-spacing: 0.03em;
}

.card .city {
  font-family: var(--hud);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--ash);
  text-transform: uppercase;
  display: block;
  margin: 0.35rem 0 0.9rem;
}

.card .mech {
  display: inline-block;
  font-family: var(--hud);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--alien);
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--void);
}

.card .line {
  font-size: 0.93rem;
  color: var(--bone);
  opacity: 0.82;
  margin: 0.95rem 0 0;
  min-height: 3.2em;
}

.card .num {
  position: absolute;
  top: 0.4rem;
  left: 0.6rem;
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  color: rgba(237, 228, 211, 0.1);
  line-height: 1;
}

/* --- The Episode (trailer) ---------------------------------------------- */

.episode {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 46, 136, 0.16), transparent 62%),
    linear-gradient(var(--deep), var(--void));
  border-top: 2px solid rgba(237, 228, 211, 0.2);
  border-bottom: 2px solid rgba(237, 228, 211, 0.2);
}

.screen {
  position: relative;
  border: var(--edge);
  box-shadow: var(--shadow-hard);
  background: #000;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.screen video { width: 100%; height: 100%; object-fit: cover; display: block; }

.screen .pending {
  text-align: center;
  padding: 2rem;
}
.screen .pending .hud { display: block; margin-bottom: 0.9rem; }
.screen .pending h3 {
  font-size: clamp(1.3rem, 3.4vw, 2.3rem);
  color: var(--bone);
  text-transform: uppercase;
}
.screen .pending p { color: var(--ash); max-width: 44ch; margin: 0.8rem auto 0; }

/* --- Mechanics list ------------------------------------------------------ */

.mechs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.6rem;
}

.mech-item {
  border-left: 3px solid var(--heat);
  padding-left: 1.1rem;
}
.mech-item h3 {
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 0.5rem;
}
.mech-item p { color: var(--ash); margin: 0; font-size: 0.98rem; }

/* --- Zine: declaration + commandments ----------------------------------- */

.zine {
  background: linear-gradient(180deg, var(--deep) 0%, var(--void) 100%);
  color: var(--bone);
  border-top: 1px solid #1e1e2e;
  border-bottom: 1px solid #1e1e2e;
  position: relative;
}
.zine::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: repeating-conic-gradient(#ff2d78 0% 25%, transparent 0% 50%);
  background-size: 20px 20px;
}
.zine > * { position: relative; }

.zine .section-tag {
  background: var(--void);
  color: var(--pink);
  border-color: var(--pink);
  text-shadow: 0 0 6px rgba(255, 45, 120, 0.5);
}
.zine h2 { color: var(--bone); }
.zine h2 em { color: var(--teal); }

.declaration {
  font-size: clamp(1.35rem, 3.6vw, 2.5rem);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.4;
  max-width: 32ch;
  margin: 0 0 2rem;
  color: var(--bone);
}
.declaration span { display: block; }
.declaration span.hot {
  color: var(--teal);
  text-shadow: 0 0 12px rgba(0, 245, 212, 0.4);
}

.commandments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 0.9rem;
  counter-reset: cmd;
}

.commandments li {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  border: 1px solid #1e1e2e;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.9rem 1rem;
  transition: border-color 160ms, background 160ms;
}
.commandments li:hover {
  border-color: var(--teal);
  background: rgba(0, 245, 212, 0.04);
}

.commandments li .roman {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--teal);
  text-shadow: 0 0 8px rgba(0, 245, 212, 0.4);
  min-width: 2.3ch;
}

.commandments li span:last-child {
  font-size: 1rem;
  color: var(--bone);
  font-family: var(--body);
}

/* --- Services ------------------------------------------------------------ */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
}

.service {
  border: 2px solid rgba(237, 228, 211, 0.3);
  padding: 1.2rem 1.1rem;
  transition: border-color 150ms, background 150ms, transform 150ms;
  background: rgba(42, 16, 84, 0.32);
}
.service:hover {
  border-color: var(--acid);
  background: rgba(61, 26, 115, 0.5);
  transform: translateY(-4px);
}
.service .ico { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.service h3 {
  font-size: 1.1rem;
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --- Signup -------------------------------------------------------------- */

.signup {
  border: var(--edge);
  box-shadow: var(--shadow-hard);
  background: linear-gradient(135deg, var(--purple), var(--deep));
  padding: clamp(1.8rem, 5vw, 3.2rem);
  text-align: center;
}

.signup h2 { font-size: clamp(1.8rem, 5vw, 3.1rem); text-transform: uppercase; }
.signup p { color: var(--bone); max-width: 46ch; margin: 1rem auto 1.9rem; }

.signup form {
  display: flex;
  gap: 0.7rem;
  max-width: 500px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.signup input {
  flex: 1 1 250px;
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: var(--edge);
  background: var(--void);
  color: var(--bone);
}
.signup input:focus { outline: 3px solid var(--acid); outline-offset: 2px; }

.signup .note { font-size: 0.86rem; color: var(--ash); margin: 1.1rem 0 0; }

/* --- Footer -------------------------------------------------------------- */

footer {
  padding: 0 0 0;
  background: var(--void);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  margin: 2.5rem 0 1.5rem;
}
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.foot-grid h4 {
  font-family: var(--hud);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--teal);
  text-shadow: 0 0 6px rgba(0, 245, 212, 0.4);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.foot-grid a {
  color: var(--ash);
  text-decoration: none;
  display: block;
  padding: 0.3rem 0;
  font-size: 0.92rem;
  transition: color 140ms;
}
.foot-grid a:hover { color: var(--teal); }

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.foot-brand img {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--teal);
  object-fit: cover;
}
.foot-name {
  font-family: var(--hud);
  font-size: 0.78rem;
  color: var(--teal);
  text-shadow: 0 0 6px rgba(0, 245, 212, 0.4);
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1.1;
}
.foot-est {
  font-family: var(--body);
  color: var(--ash);
  font-size: 0.78rem;
  margin: 0.2rem 0;
}
.foot-mail {
  font-family: var(--body);
  font-size: 0.8rem;
  color: var(--teal);
  text-shadow: 0 0 4px rgba(0, 245, 212, 0.4);
  text-decoration: none;
  display: inline;
  padding: 0;
}
.foot-mail:hover { color: var(--purple); text-shadow: 0 0 6px rgba(180, 79, 255, 0.5); }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid #1e1e2e;
}
.copyright {
  font-size: 0.78rem;
  color: var(--ash);
  margin: 0;
}
.motto {
  font-family: var(--hud);
  font-size: 0.7rem;
  color: var(--ash);
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}

.ticker {
  border-top: 1px solid #1e1e2e;
  border-bottom: 1px solid #1e1e2e;
  background: linear-gradient(180deg, var(--deep) 0%, var(--void) 100%);
  overflow: hidden;
  padding: 0.9rem 0;
  margin: 0;
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: var(--hud);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  animation: scroll-x 38s linear infinite;
  gap: 1.5rem;
  align-items: center;
}
.ticker-track .diamond {
  color: var(--teal);
  font-size: 0.7rem;
  text-shadow: 0 0 6px rgba(0, 245, 212, 0.5);
}
.ticker-track span { white-space: nowrap; }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* The slim purple checkered bar above the footer (OG match). */
.footer-bar {
  height: 6px;
  background: var(--purple);
  background-image: repeating-conic-gradient(var(--purple) 0% 25%, transparent 0% 50%);
  background-size: 10px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.copyright {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ash);
  padding-bottom: 1.5rem;
}

.copyright {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ash);
  padding-bottom: 1.5rem;
}

/* --- Reveal on scroll ---------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms ease, transform 620ms ease;
}
.reveal.in { opacity: 1; transform: none; }

/* --- Responsive / motion ------------------------------------------------- */

@media (max-width: 720px) {
  .freq { display: none; }
  .hero { min-height: 84vh; }
  .hero-head { opacity: 0.3; }
  body { font-size: 16px; }
}

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

/* ==========================================================================
   PLAY — embedded game iframe
   Single section between The Eight and the Zine. The iframe loads the Godot
   web build via a junction (game/) and a same-origin serve.py that emits the
   COOP + COEP + CORP headers SharedArrayBuffer needs to boot.
   ========================================================================== */

.play {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(93, 214, 44, 0.08), transparent 60%),
    linear-gradient(var(--void), var(--deep));
}

.game-frame {
  position: relative;
  border: var(--edge);
  box-shadow: var(--shadow-hard);
  background: #000;
  overflow: hidden;
  margin-top: 1rem;
}

.frame-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: var(--void);
  border-bottom: 2px solid rgba(237, 228, 211, 0.2);
}

.frame-status {
  font-family: var(--hud);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--heat);
  text-transform: uppercase;
}

.frame-link {
  font-family: var(--hud);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--acid);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 140ms;
}

.frame-link:hover { color: var(--magenta); }

.frame-window {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

.frame-window iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* --- Launch panel (replaces the embedded iframe; game lives on its own
       origin now — see app.js GAME_ORIGIN) -------------------------------- */

.frame-launch {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(57, 255, 20, 0.14), transparent 62%),
    #000;
}

.launch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 2rem 2.4rem;
  text-decoration: none;
  text-align: center;
  transition: transform 160ms ease, filter 160ms ease;
}

.launch:hover,
.launch:focus-visible { transform: translateY(-3px); filter: brightness(1.12); }

.launch:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 6px;
}

.launch-eyebrow {
  font-family: var(--hud);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--heat);
}

.launch-cta {
  font-family: var(--display, var(--hud));
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  line-height: 1;
  color: var(--acid);
  text-shadow: 0 0 22px rgba(57, 255, 20, 0.55);
}

.launch-meta {
  font-family: var(--hud);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 228, 211, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .launch, .launch:hover, .launch:focus-visible { transition: none; transform: none; }
}

.frame-controls {
  padding: 0.7rem 1rem;
  background: var(--void);
  border-top: 2px solid rgba(237, 228, 211, 0.2);
  text-align: center;
}

.hint {
  font-family: var(--hud);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--ash);
  text-transform: uppercase;
}
/* ============================================================================
   ABOUT + JOIN pages
   Added when /about and /join were ported over from the Next.js site so the
   static build reaches feature parity with what was live on Vercel.
   Tone modifiers map the Next site's raw hex onto this build's tokens.
   ========================================================================== */

.tone-cool { --tone: var(--cyan); }
/* NOT --purple-2 (#3d1a73) — that's a background purple and fails badly as
   text on the dark void. This is the Republic's own violet from the Next
   site's palette, which is bright enough to read. */
.tone-viol { --tone: #b46bff; }
.tone-hot  { --tone: var(--magenta); }
.tone-warm { --tone: var(--amber); }

section.alt { background: rgba(18, 7, 42, 0.55); }

.sub-lede {
  color: var(--ash);
  max-width: 54ch;
  margin: 0.6rem auto 0;
  font-size: 0.98rem;
}

/* --- Long-form prose ----------------------------------------------------- */

.prose { max-width: 68ch; }
.prose p { color: var(--bone); line-height: 1.75; margin: 0 0 1.1rem; }
.prose blockquote {
  margin: 1.4rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--acid);
  color: var(--ash);
  font-style: normal;
}
.prose .pull {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.25;
  margin: 1.6rem 0;
}
.prose .micro, .micro { color: var(--ash); font-size: 0.82rem; letter-spacing: 0.04em; }
.cool { color: var(--cyan); }
.hot  { color: var(--magenta); }
.viol { color: var(--acid); }
.dim  { color: var(--ash); }

.declaration.sub {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  max-width: 34ch;
  margin-top: 2rem;
}
.declaration span.cool { color: var(--cyan); }
.declaration span.viol { color: var(--purple-2); }

/* --- Philosophy grid ----------------------------------------------------- */

.phil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.phil {
  border: 2px solid rgba(237, 228, 211, 0.22);
  padding: 1.15rem 1.05rem;
  background: rgba(42, 16, 84, 0.28);
  transition: border-color 150ms, transform 150ms, background 150ms;
}
.phil:hover {
  border-color: var(--acid);
  background: rgba(61, 26, 115, 0.45);
  transform: translateY(-3px);
}
.phil h3 {
  font-family: var(--hud);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acid);
  margin: 0 0 0.55rem;
}
.phil p { color: var(--ash); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* --- Commandments, long form (NOT .rule — that's the divider) ------------ */

.cmd-list { display: flex; flex-direction: column; gap: 0.75rem; }
.cmd {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 2px solid color-mix(in oklab, var(--tone, var(--bone)) 34%, transparent);
  background: rgba(6, 4, 13, 0.4);
  position: relative;
  transition: border-color 160ms, background 160ms;
}
.cmd:hover {
  border-color: var(--tone, var(--bone));
  background: rgba(42, 16, 84, 0.42);
}
.cmd::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tone, var(--bone));
  opacity: 0;
  transition: opacity 160ms;
}
.cmd:hover::before { opacity: 1; }
.cmd-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1;
  color: var(--tone, var(--bone));
  min-width: 2.6ch;
}
.cmd-body h3 {
  font-size: 1.02rem;
  color: var(--tone, var(--bone));
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cmd-body p { color: var(--ash); font-size: 0.93rem; line-height: 1.65; margin: 0; }

/* --- The Oath ------------------------------------------------------------ */

.oath { background: rgba(6, 4, 13, 0.72); border-top: var(--edge); border-bottom: var(--edge); }
.oath-body {
  max-width: 60ch;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.65;
}
.oath-body p { margin: 0 0 0.5rem; color: var(--bone); }
.oath-close { text-align: center; margin-top: 2.4rem; }
.oath-close p {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  margin: 0 0 0.3rem;
  color: var(--bone);
}
.oath-close .stamp {
  font-family: var(--hud);
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  color: var(--magenta);
  margin: 1.4rem 0 1.8rem;
  text-transform: uppercase;
}

/* --- Three pillars ------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
}
.pillar {
  border: 3px solid var(--tone, var(--bone));
  padding: 1.9rem 1.3rem;
  text-align: center;
  background: linear-gradient(140deg, rgba(18, 7, 42, 0.8), transparent);
  box-shadow: var(--shadow-hard);
  transition: transform 180ms;
}
.pillar:hover { transform: translateY(-5px); }
.pillar-icon { font-size: 2.2rem; display: block; margin-bottom: 0.7rem; }
.pillar h3 {
  font-family: var(--hud);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tone, var(--bone));
  margin: 0 0 0.6rem;
}
.pillar p { color: var(--ash); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* --- Join: ways in ------------------------------------------------------- */

.ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1rem;
}
.way {
  display: block;
  text-decoration: none;
  border: 2px solid color-mix(in oklab, var(--tone, var(--bone)) 40%, transparent);
  padding: 1.3rem 1.2rem;
  background: rgba(42, 16, 84, 0.3);
  transition: border-color 160ms, transform 160ms, background 160ms;
}
.way:hover {
  border-color: var(--tone, var(--bone));
  background: rgba(61, 26, 115, 0.48);
  transform: translateY(-4px);
}
.way .ico { font-size: 1.6rem; display: block; margin-bottom: 0.6rem; }
.way h3 {
  font-size: 1.05rem;
  color: var(--tone, var(--bone));
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
.way p { color: var(--ash); font-size: 0.92rem; line-height: 1.6; margin: 0 0 0.9rem; }
.way-cta {
  font-family: var(--hud);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acid);
}

/* --- Join: channels + contact -------------------------------------------- */

.channels, .contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
}
.channel, .contact-card {
  border: 2px solid rgba(237, 228, 211, 0.26);
  padding: 1.4rem 1.25rem;
  background: rgba(6, 4, 13, 0.45);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.channel { border-color: color-mix(in oklab, var(--tone, var(--bone)) 40%, transparent); }
.channel .ico, .contact-card .ico { font-size: 1.7rem; }
.channel h3, .contact-card h3 {
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tone, var(--bone));
  margin: 0;
}
.contact-card h3 { color: var(--bone); }
.channel p, .contact-card p {
  color: var(--ash);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 0.5rem;
}
.channel .btn, .contact-card .btn { margin-top: auto; }

.nav-links a.active { color: var(--teal); text-shadow: 0 0 6px rgba(0, 245, 212, 0.5); border-bottom-color: var(--teal); }

@media (max-width: 720px) {
  .cmd { flex-direction: column; gap: 0.5rem; }
  .oath-body { font-size: 1.02rem; }
}

/* --- Nav overflow fix ----------------------------------------------------
   The nav row ran 37px past the viewport at ~373px wide, giving the whole
   site a horizontal scrollbar on phones. Affects every page (index, services,
   about, join) — the row simply cannot hold five items plus the brand at that
   width. Below 620px the links wrap under the brand and tighten up.
   ------------------------------------------------------------------------ */

@media (max-width: 620px) {
  .nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  .brand { text-align: center; font-size: 0.95rem; }
  .nav-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 0.85rem;
    row-gap: 0.5rem;
  }
  .nav-links a { font-size: 0.62rem; letter-spacing: 0.1em; }
  .nav-links a.cta { padding: 0.35rem 0.62rem; box-shadow: 2px 2px 0 var(--void); }
}

/* Belt-and-braces: nothing should ever produce a sideways scrollbar. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   FEEDBACK + POLL (Observation Deck)
   ========================================================================== */

.feedback { padding: 6rem 0 4rem; }
.feedback .section-head { margin-bottom: 3rem; }
.feedback-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .feedback-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.8rem;
  background: linear-gradient(180deg, rgba(34, 224, 255, 0.04), rgba(255, 46, 136, 0.04));
  border: 1px solid rgba(34, 224, 255, 0.3);
  position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.feedback-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-shadow: 0 0 4px rgba(34, 224, 255, 0.4);
}
.feedback-form label em { color: var(--ash); font-style: normal; font-size: 0.7rem; letter-spacing: 0.04em; }

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form select,
.feedback-form textarea {
  background: rgba(6, 4, 13, 0.7);
  border: 1px solid rgba(141, 132, 163, 0.4);
  color: var(--bone);
  font-family: 'Special Elite', monospace;
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
}
.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 1px var(--magenta), 0 0 18px rgba(255, 46, 136, 0.25);
}
.feedback-form textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }

.feedback-form .row { display: flex; gap: 1rem; align-items: center; }
.feedback-form .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .feedback-form .row.two { grid-template-columns: 1fr; } }
.feedback-form .row.split { justify-content: space-between; flex-wrap: wrap; }
.feedback-form .row .btn { white-space: nowrap; }
.feedback-form .hint { color: var(--ash); font-size: 0.78rem; font-family: 'Pixelify Sans', monospace; }
.feedback-form .hint a { color: var(--cyan); text-shadow: 0 0 4px rgba(34, 224, 255, 0.4); }
.feedback-form .note {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--acid);
  background: rgba(182, 255, 63, 0.06);
  color: var(--acid);
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.poll {
  padding: 1.8rem;
  background: linear-gradient(180deg, rgba(255, 46, 136, 0.05), rgba(93, 214, 44, 0.05));
  border: 1px solid rgba(255, 46, 136, 0.35);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.poll h3 {
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
  color: var(--magenta);
  text-shadow: 0 0 6px rgba(255, 46, 136, 0.4);
  letter-spacing: 0.04em;
}
.poll-lede { color: var(--ash); font-family: 'Special Elite', monospace; font-size: 0.9rem; margin: 0 0 1.2rem; }

.poll-form, .poll-options { display: flex; flex-direction: column; gap: 0.6rem; }
.poll-option {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(141, 132, 163, 0.35);
  background: rgba(6, 4, 13, 0.6);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  transition: border-color 140ms, background 140ms, transform 140ms;
}
.poll-option:hover { border-color: var(--acid); transform: translateX(2px); }
.poll-option.voted {
  border-color: var(--teal);
  background: rgba(0, 245, 212, 0.06);
  box-shadow: 0 0 14px rgba(0, 245, 212, 0.25);
}
.poll-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--ash);
  background: transparent;
  flex-shrink: 0;
  margin-top: 0.2rem;
  position: relative;
  transition: border-color 120ms;
}
.poll-option input[type="radio"]:checked { border-color: var(--acid); }
.poll-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  background: var(--acid);
  box-shadow: 0 0 6px var(--acid);
}
.poll-option:has(input:checked) { border-color: var(--acid); background: rgba(182, 255, 63, 0.06); }
.poll-option strong { display: block; color: var(--bone); font-family: 'Pixelify Sans', monospace; font-size: 0.85rem; letter-spacing: 0.04em; }
.poll-option span { display: block; color: var(--ash); font-family: 'Special Elite', monospace; font-size: 0.82rem; margin-top: 0.15rem; }
.poll-form .btn { margin-top: 0.6rem; align-self: flex-start; }

.beta-cta {
  margin-top: 3rem;
  padding: 1.8rem;
  background: linear-gradient(180deg, rgba(93, 214, 44, 0.05), transparent);
  border: 1px dashed rgba(93, 214, 44, 0.4);
  text-align: center;
}
.beta-cta .section-tag { display: block; margin-bottom: 0.6rem; }
.beta-cta h3 { font-family: 'Pixelify Sans', monospace; font-size: 1.1rem; color: var(--alien); text-shadow: 0 0 6px rgba(93, 214, 44, 0.4); margin: 0 0 0.6rem; letter-spacing: 0.04em; }
.beta-cta p { color: var(--bone); font-family: 'Special Elite', monospace; font-size: 0.95rem; margin: 0; max-width: 38rem; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   HERO (banner-image version — banner above, text below)
   ========================================================================== */

.hero { position: relative; padding: 0 0 4rem; overflow: hidden; }

.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 400;
  max-height: 55vh;
  overflow: hidden;
  background: var(--void);
  border-bottom: 2px solid var(--cyan);
  box-shadow: 0 0 40px rgba(34, 224, 255, 0.18);
}
.hero-banner img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  filter: contrast(1.05) saturate(1.15);
}
.hero-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.hero-frame {
  position: absolute; inset: 0;
  pointer-events: none;
  border-top: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  box-shadow: 0 0 60px rgba(0, 245, 212, 0.18) inset, 0 0 40px rgba(0, 245, 212, 0.15);
}
.hero-frame::before, .hero-frame::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
.hero-frame::before { top: 18%; opacity: 0.45; }
.hero-frame::after  { bottom: 18%; opacity: 0.45; }

.hero-body {
  position: relative;
  padding-top: 3rem;
  text-align: left;
  max-width: 64rem;
}
.hero .hud {
  display: inline-block;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(34, 224, 255, 0.5);
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(34, 224, 255, 0.45);
  background: rgba(6, 4, 13, 0.4);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-family: 'Pixelify Sans', monospace;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1.04;
  margin: 0 0 1.4rem;
  color: var(--bone);
  text-shadow: 0 0 18px rgba(34, 224, 255, 0.4), 0 2px 0 var(--void);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.hero h1 em {
  font-style: normal;
  color: var(--magenta);
  text-shadow: 0 0 14px rgba(255, 46, 136, 0.6), 0 0 28px rgba(255, 46, 136, 0.3);
}

.hero .lede {
  max-width: 52rem;
  font-family: 'Special Elite', monospace;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--bone);
  margin: 0 0 2rem;
}
.hero .lede .hot {
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 46, 136, 0.5);
  font-weight: 600;
}
.hero .lede strong { font-weight: normal; }

.hero .buttons { gap: 0.8rem; flex-wrap: wrap; }
.hero .btn.ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--ash);
}
.hero .btn.ghost:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: transparent;
  box-shadow: 0 0 12px rgba(34, 224, 255, 0.4);
}

/* ==========================================================================
   SUB-HERO (smaller hero for sub-pages: the-eight, play, feedback)
   ========================================================================== */

.sub-hero {
  padding: 6rem 0 3rem;
  position: relative;
  border-bottom: 1px solid rgba(34, 224, 255, 0.18);
}
.sub-hero .hud {
  display: inline-block;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(34, 224, 255, 0.5);
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(34, 224, 255, 0.45);
  background: rgba(6, 4, 13, 0.4);
  margin-bottom: 1.2rem;
}
.sub-hero h1 {
  font-family: 'Pixelify Sans', monospace;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  color: var(--bone);
  text-shadow: 0 0 14px rgba(34, 224, 255, 0.4);
  text-transform: uppercase;
}
.sub-hero h1 em {
  font-style: normal;
  color: var(--magenta);
  text-shadow: 0 0 12px rgba(255, 46, 136, 0.5);
}
.sub-hero .lede {
  max-width: 48rem;
  font-family: 'Special Elite', monospace;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--ash);
  margin: 0;
}

/* ==========================================================================
   EXPLORE THE UNIVERSE (3-card grid on home)
   ========================================================================== */

.explore { padding: 6rem 0 4rem; }
.explore .section-head { text-align: center; margin-bottom: 3rem; }
.explore .section-head h2 { font-family: 'Pixelify Sans', monospace; }

.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 70rem;
  margin: 0 auto;
}
@media (max-width: 900px) { .explore-grid { grid-template-columns: 1fr; } }

.explore-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.8rem 1.5rem;
  background: linear-gradient(135deg, rgba(13, 13, 21, 0.85), rgba(0, 0, 0, 0.6));
  border: 1px solid rgba(34, 224, 255, 0.4);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--bone);
  font-family: 'Special Elite', monospace;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.explore-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: 0 0 28px rgba(34, 224, 255, 0.4);
}
.explore-card .num {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(34, 224, 255, 0.4);
}
.explore-card h3 {
  margin: 0;
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.4rem;
  color: var(--bone);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.explore-card p { color: var(--ash); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.explore-cta {
  margin-top: auto;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--cyan);
  color: var(--cyan);
}

/* ==========================================================================
   EIGHT (full roster page) + PLAY-PAGE (game meta + frame) + NEXT-CTA
   ========================================================================== */

.eight { padding: 5rem 0 6rem; }
.eight .section-head { text-align: center; margin-bottom: 3rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.eight .section-head h2 { font-family: 'Pixelify Sans', monospace; }
.eight .section-head p { color: var(--ash); font-family: 'Special Elite', monospace; font-size: 1rem; }

.eight .roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
}

/* The roster card was already styled under .roster in the original CSS.
   Make sure the article.card uses the same rules. */
.eight .roster article.card,
.eight .roster .card {
  background: linear-gradient(180deg, rgba(13, 13, 21, 0.85), rgba(0, 0, 0, 0.6));
  border: 1px solid rgba(141, 132, 163, 0.3);
  padding: 1.4rem 1rem;
  text-align: center;
  position: relative;
  font-family: 'Special Elite', monospace;
  transition: border-color 180ms, transform 180ms;
}
.eight .roster .card:hover { border-color: var(--cyan); transform: translateY(-3px); }
.eight .roster .card .num {
  position: absolute; top: 0.5rem; left: 0.7rem;
  font-family: 'Pixelify Sans', monospace; font-size: 0.7rem;
  color: var(--cyan); letter-spacing: 0.15em;
}
.eight .roster .card h3 {
  margin: 0.4rem 0 0.2rem;
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.2rem;
  color: var(--bone);
  letter-spacing: 0.04em;
}
.eight .roster .card .city { color: var(--ash); font-size: 0.78rem; display: block; }
.eight .roster .card .mech {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--magenta);
  color: var(--magenta);
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255, 46, 136, 0.4);
}
.eight .roster .card .line { color: var(--bone); font-size: 0.85rem; line-height: 1.5; margin: 0.6rem 0 0; }
.eight .roster .card img { display: block; margin: 0 auto 0.5rem; }

.play-page { padding: 5rem 0 4rem; }
.play-page .section-head { text-align: center; margin-bottom: 2.5rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.play-page .section-head h2 { font-family: 'Pixelify Sans', monospace; }
.play-page .section-head p { color: var(--ash); font-family: 'Special Elite', monospace; font-size: 1rem; }

.play-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) { .play-meta { grid-template-columns: repeat(2, 1fr); } }
.meta-card {
  text-align: center;
  padding: 1.2rem 0.8rem;
  border: 1px solid rgba(34, 224, 255, 0.3);
  background: rgba(6, 4, 13, 0.5);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.meta-card .num {
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.4rem;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(34, 224, 255, 0.5);
}
.meta-card .meta-label {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--ash);
  text-transform: uppercase;
}

.next-cta,
.join-cta { padding: 4rem 0 6rem; }
.next-card,
.join-cta > .wrap > .section-head + .join-grid {
  /* no-op */
}
.next-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: linear-gradient(180deg, rgba(34, 224, 255, 0.05), rgba(255, 46, 136, 0.05));
  border: 1px dashed rgba(93, 214, 44, 0.4);
  max-width: 38rem;
  margin: 0 auto;
}
.next-card .section-tag { display: block; margin-bottom: 0.6rem; }
.next-card h2 { font-family: 'Pixelify Sans', monospace; font-size: 1.5rem; color: var(--alien); text-shadow: 0 0 8px rgba(93, 214, 44, 0.4); margin: 0 0 0.6rem; letter-spacing: 0.03em; }
.next-card p { color: var(--bone); font-family: 'Special Elite', monospace; font-size: 0.95rem; margin: 0 0 1.4rem; }

.join-cta .section-head { text-align: center; margin-bottom: 3rem; }
.join-cta .section-head h2 em { color: var(--magenta); text-shadow: 0 0 10px rgba(255, 46, 136, 0.5); }
.join-cta .join-grid { margin-top: 0; }

/* ==========================================================================
   JOIN THE REPUBLIC (3-card grid: Discord, X, Email)
   ========================================================================== */

.join { padding: 6rem 0 4rem; }
.join .section-head { margin-bottom: 3rem; text-align: center; }
.join .section-head h2 em { color: var(--magenta); text-shadow: 0 0 10px rgba(255, 46, 136, 0.5); }

.join-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 70rem;
  margin: 0 auto;
}
@media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; gap: 1rem; } }

.join-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.8rem 1.5rem;
  background: linear-gradient(135deg, rgba(13, 13, 21, 0.85), rgba(0, 0, 0, 0.6));
  border: 2px solid;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--bone);
  font-family: 'Special Elite', monospace;
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.join-card:hover {
  transform: translateY(-4px);
}
.join-card.discord { border-color: rgba(180, 79, 255, 0.55); }
.join-card.discord:hover { box-shadow: 0 0 28px rgba(180, 79, 255, 0.4); border-color: #b44fff; }
.join-card.x { border-color: rgba(255, 45, 120, 0.55); }
.join-card.x:hover { box-shadow: 0 0 28px rgba(255, 45, 120, 0.4); border-color: #ff2d78; }
.join-card.mail { border-color: rgba(0, 245, 212, 0.55); }
.join-card.mail:hover { box-shadow: 0 0 28px rgba(0, 245, 212, 0.35); border-color: #00f5d4; }

.join-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  flex-shrink: 0;
}
.join-icon svg { width: 28px; height: 28px; }
.join-card.discord .join-icon { color: #b44fff; background: rgba(180, 79, 255, 0.08); }
.join-card.x .join-icon { color: #ff2d78; background: rgba(255, 45, 120, 0.08); }
.join-card.mail .join-icon { color: #00f5d4; background: rgba(0, 245, 212, 0.08); }

.join-card h3 {
  margin: 0;
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
.join-card.discord h3 { color: #b44fff; text-shadow: 0 0 8px rgba(180, 79, 255, 0.5); }
.join-card.x h3 { color: #ff2d78; text-shadow: 0 0 8px rgba(255, 45, 120, 0.5); }
.join-card.mail h3 { color: #00f5d4; text-shadow: 0 0 8px rgba(0, 245, 212, 0.5); }

.join-card p { color: var(--ash); font-size: 0.92rem; line-height: 1.55; margin: 0; }

.join-cta {
  margin-top: auto;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding-top: 0.6rem;
  border-top: 1px dashed currentColor;
}
.join-card.discord .join-cta { color: #b44fff; }
.join-card.x .join-cta { color: #ff2d78; }
.join-card.mail .join-cta { color: #00f5d4; }

.join-mute {
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.85rem;
  color: var(--ash);
  letter-spacing: 0.05em;
  max-width: 38rem;
}