/* ==========================================
   QUESTLORD — HANDCRAFTED CRT / DOS TERMINAL
   A unique retro aesthetic: phosphor greens,
   warm ambers, CRT bloom, chromatic aberration,
   Win95 window chrome, and glitch effects.
   ========================================== */

/* ── Google-font stacks ── */
/* Expects: Press Start 2P · VT323 · Roboto Mono */

/* ═══════════════════════════════════════════
   0. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════ */
:root {
  /* Phosphor green gradient palette */
  --g1: #00ff41;
  --g2: #33ff77;
  --g3: #88ffaa;
  --g-dim: #0b3d12;

  /* Warm amber / orange */
  --amber: #ffbf00;
  --amber-dim: #66500a;
  --amber-glow: rgba(255, 191, 0, 0.45);

  /* Accent colours */
  --scan-blue: #0066ff;
  --crt-purple: #cc44ff;
  --hot-pink: #ff0066;
  --pixel-yellow: #ffd700;
  --red: #ff4444;
  --mage-blue: #4488ff;

  /* Backgrounds */
  --bg-deep: #060c18;
  --bg-navy: #0b1628;
  --bg-panel: #0a0e1a;
  --black: #000000;

  /* Win95 chrome */
  --win-light: #dfdfdf;
  --win-gray: #c0c0c0;
  --win-dark: #808080;
  --win-shadow: #404040;
  --win-blue: #000080;

  /* Fonts */
  --font-heading: 'Press Start 2P', monospace;
  --font-sub: 'VT323', monospace;
  --font-body: 'Roboto Mono', monospace;

  /* Shared timing */
  --ease-snappy: cubic-bezier(.22, .61, .36, 1);
}

/* ═══════════════════════════════════════════
   1. RESET & BASE
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: #c4c4c4;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  /* Deep navy gradient + repeating CSS noise */
  background:
    repeating-conic-gradient(rgba(255,255,255,.008) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px,
    linear-gradient(175deg, var(--bg-deep) 0%, #07101e 40%, #0e1932 70%, #120828 100%);
  background-attachment: fixed;
}

/* ── CRT scanlines + subtle flicker ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.12) 0px,
      rgba(0,0,0,.12) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: multiply;
  animation: scanFlicker 6s ease-in-out infinite;
}

@keyframes scanFlicker {
  0%,100% { opacity: 1; }
  30%     { opacity: .96; }
  50%     { opacity: 1; }
  70%     { opacity: .97; }
  85%     { opacity: .99; }
}

/* ── Vignette overlay (darkened edges) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ═══════════════════════════════════════════
   2. TYPOGRAPHY
   ═══════════════════════════════════════════ */
h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--g1);
  letter-spacing: 2px;
  /* Chromatic aberration */
  text-shadow:
    -2px 0 var(--hot-pink),
     2px 0 var(--scan-blue),
     0 0 12px var(--g1),
     0 0 28px rgba(0,255,65,.25);
}

h1 { font-size: 1.4rem; margin-bottom: 1rem; }
h2 { font-size: .85rem; margin-bottom: 1.2rem; }
h3 { font-size: .7rem; margin-bottom: .8rem; }

p { margin-bottom: 1rem; font-size: .95rem; }

a {
  color: var(--g1);
  text-decoration: none;
  transition: color .25s, text-shadow .25s;
}
a:hover {
  color: var(--pixel-yellow);
  text-shadow: 0 0 6px var(--pixel-yellow), 0 0 14px rgba(255,215,0,.35);
}

/* ═══════════════════════════════════════════
   3. SCROLLBAR (retro styled)
   ═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track {
  background: var(--bg-deep);
  box-shadow: inset -2px 0 0 var(--win-dark);
}
::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, var(--win-light) 0%, var(--win-gray) 45%, var(--win-dark) 100%);
  border: 2px outset var(--win-light);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--g1);
  border-color: var(--g2);
}

/* ═══════════════════════════════════════════
   4. SCREEN CONTAINER
   ═══════════════════════════════════════════ */
.screen-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ═══════════════════════════════════════════
   5. NAVIGATION (OS menu-bar feel)
   ═══════════════════════════════════════════ */
.retro-nav {
  /* 3-D raised toolbar */
  background:
    linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
  border-bottom: 2px solid var(--g1);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.06),
    0 2px 18px rgba(0,255,65,.12);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.retro-nav .screen-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: .7rem;
  color: var(--g1);
  text-shadow:
    -1px 0 var(--hot-pink),
     1px 0 var(--scan-blue),
     0 0 8px var(--g1);
  letter-spacing: 3px;
  position: relative;
}
.nav-logo::before {
  content: 'C:\\>';
  color: var(--amber);
  margin-right: 4px;
  text-shadow: 0 0 4px var(--amber-glow);
}

.nav-links {
  display: none;
  list-style: none;
  gap: 20px;
}

.nav-links.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #0f0f1e 0%, #0a0a18 100%);
  border-bottom: 2px solid var(--g1);
  padding: 16px;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}

.nav-links li a {
  font-family: var(--font-sub);
  font-size: 1.2rem;
  color: var(--g2);
  padding: 4px 8px;
  display: block;
  letter-spacing: 1px;
  transition: color .2s, background .2s;
  position: relative;
}
.nav-links li a::before {
  content: '>';
  color: transparent;
  margin-right: 6px;
  transition: color .2s;
}
.nav-links li a:hover {
  color: var(--pixel-yellow);
  background: rgba(255,191,0,.06);
}
.nav-links li a:hover::before {
  color: var(--amber);
}

.burger-menu {
  font-family: var(--font-heading);
  font-size: .55rem;
  color: var(--g1);
  background: transparent;
  /* Win95 raised button */
  border: 2px solid;
  border-color: var(--win-light) var(--win-shadow) var(--win-shadow) var(--win-light);
  padding: 8px 14px;
  cursor: pointer;
  text-shadow: 0 0 4px var(--g1);
  transition: all .2s;
}
.burger-menu:hover {
  background: var(--g1);
  color: var(--black);
  text-shadow: none;
  box-shadow: 0 0 12px rgba(0,255,65,.4);
}
.burger-menu:active {
  border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow);
}

/* ═══════════════════════════════════════════
   6. HERO SECTION
   ═══════════════════════════════════════════ */
.hero-section {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 16px;
  position: relative;
  /* Matrix-style rain via CSS gradients */
  background:
    /* vertical "rain" columns */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 28px,
      rgba(0,255,65,.018) 28px,
      rgba(0,255,65,.018) 29px
    ),
    /* falling streaks */
    repeating-linear-gradient(
      180deg,
      rgba(0,255,65,.03) 0px,
      transparent 8px,
      transparent 30px
    ),
    /* deep gradient */
    radial-gradient(ellipse at 50% 30%, #0e1a38 0%, var(--bg-deep) 50%, #120828 100%);
  overflow: hidden;
}

/* Animated falling streaks overlay */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 22px,
      rgba(0,255,65,.02) 22px,
      rgba(0,255,65,.02) 23px
    ),
    linear-gradient(
      180deg,
      rgba(0,255,65,.04) 0%,
      transparent 40%,
      transparent 60%,
      rgba(204,68,255,.02) 100%
    );
  animation: matrixScroll 12s linear infinite;
}

@keyframes matrixScroll {
  from { background-position: 0 -600px; }
  to   { background-position: 0 600px; }
}

/* Screen-glow border at bottom */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g1), var(--scan-blue), var(--g1), transparent);
  box-shadow: 0 0 20px var(--g1), 0 0 60px rgba(0,255,65,.2);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--g1);
  text-shadow:
    -3px 0 var(--hot-pink),
     3px 0 var(--scan-blue),
     0 0 20px var(--g1),
     0 0 50px rgba(0,255,65,.3),
     0 0 90px rgba(0,255,65,.12);
  margin-bottom: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--g1);
  animation: typewriter 2s steps(9) forwards, blink-caret .8s step-end infinite;
  width: 0;
  display: inline-block;
  position: relative;
  z-index: 2;
}

/* Glitch effect on hero title */
@keyframes glitchHero {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-3px, 1px); filter: hue-rotate(40deg); }
  94% { transform: translate(3px, -1px); }
  96% { transform: translate(-1px, 2px); filter: hue-rotate(-20deg); }
  98% { transform: translate(2px, -1px); }
}

.hero-title:hover {
  animation: typewriter 2s steps(9) forwards, blink-caret .8s step-end infinite, glitchHero 3s infinite;
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 9ch; }
}
@keyframes blink-caret {
  from, to { border-color: var(--g1); }
  50%      { border-color: transparent; }
}

.hero-subtitle {
  font-family: var(--font-sub);
  font-size: 1.5rem;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow), 0 0 30px rgba(255,191,0,.15);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease 2.2s forwards;
  letter-spacing: 3px;
  position: relative;
  z-index: 2;
}

.hero-description {
  font-size: .95rem;
  color: var(--g3);
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.8;
  opacity: 0;
  animation: fadeIn 1s ease 2s forwards;
  letter-spacing: .5px;
  position: relative;
  z-index: 2;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.hero-cta {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .65rem;
  color: var(--g1);
  background: var(--black);
  padding: 16px 36px;
  cursor: pointer;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
  /* Win95 raised button */
  border: 2px solid;
  border-color: var(--g2) var(--g-dim) var(--g-dim) var(--g2);
  text-shadow: 0 0 8px var(--g1);
  box-shadow:
    0 0 20px rgba(0,255,65,.15),
    inset 0 0 20px rgba(0,255,65,.04);
  transition: all .25s var(--ease-snappy);
  opacity: 0;
  animation: fadeIn 1s ease 2.5s forwards;
}
.hero-cta:hover {
  background: var(--g1);
  color: var(--black);
  text-shadow: none;
  border-color: var(--g-dim) var(--g2) var(--g2) var(--g-dim);
  box-shadow:
    0 0 40px rgba(0,255,65,.45),
    0 0 80px rgba(0,255,65,.15);
}
.hero-cta:active {
  transform: translateY(1px);
  border-color: var(--g-dim) var(--g2) var(--g2) var(--g-dim);
}

.hero-sub-text {
  font-family: var(--font-sub);
  font-size: 1.2rem;
  color: var(--g2);
  margin-top: 1.5rem;
  opacity: 0;
  animation: fadeIn 1s ease 2.8s forwards;
  position: relative;
  z-index: 2;
}

.blink-underscore {
  animation: blink-caret 1s step-end infinite;
  border-right: 2px solid var(--g1);
  padding-right: 2px;
}

/* ═══════════════════════════════════════════
   7. WIN95 WINDOW CHROME MIXIN
      (applied to .retro-section via pseudo-elements)
   ═══════════════════════════════════════════ */

/* Each section looks like its own running program */
.retro-section {
  padding: 0;
  margin: 32px auto;
  max-width: 960px;
  /* Win95 outset panel */
  background: var(--bg-panel);
  border: 2px solid;
  border-color: var(--win-gray) var(--win-shadow) var(--win-shadow) var(--win-gray);
  box-shadow:
    1px 1px 0 var(--win-shadow),
    4px 4px 0 rgba(0,0,0,.35),
    0 0 40px rgba(0,0,0,.3);
  position: relative;
}

.retro-section > .screen-container {
  padding: 24px 20px 32px;
}

/* Simulated title bar gradient */
.retro-section::before {
  content: '';
  display: block;
  height: 26px;
  background: linear-gradient(90deg, var(--win-blue) 0%, #0044aa 40%, #1166cc 100%);
  border-bottom: 1px solid var(--win-shadow);
}

.retro-section:nth-child(even) {
  background: linear-gradient(180deg, var(--bg-panel) 0%, #090d1c 100%);
}

/* ── Section title (sits visually inside the title-bar) ── */
.section-title {
  font-family: var(--font-heading);
  font-size: .65rem;
  color: var(--g1);
  letter-spacing: 2px;
  margin-bottom: 2rem;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(0,255,65,.06), transparent 80%);
  border-left: 3px solid var(--g1);
  text-shadow:
    -1px 0 var(--hot-pink),
     1px 0 var(--scan-blue),
     0 0 10px var(--g1);
  position: relative;
}
.section-title::before {
  content: 'C:\\QUESTLORD> ';
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-glow);
}
/* Small "running" indicator */
.section-title::after {
  content: '_ ';
  animation: blink-caret 1s step-end infinite;
  border-right: none;
}

/* ═══════════════════════════════════════════
   8. ABOUT SECTION — text-editor feel
   ═══════════════════════════════════════════ */
.terminal-log {
  background: var(--black);
  border: 1px solid var(--g1);
  padding: 16px 20px;
  margin-bottom: 2rem;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--g2);
  position: relative;
  /* Phosphor glow */
  box-shadow:
    inset 0 0 30px rgba(0,255,65,.04),
    0 0 12px rgba(0,255,65,.08);
  /* Subtle CRT curvature */
  border-radius: 3px;
}
.terminal-log::before {
  content: '─ TERMINAL OUTPUT ─────────────────────────────';
  display: block;
  font-family: var(--font-body);
  font-size: .7rem;
  color: var(--win-dark);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.terminal-log p {
  margin-bottom: .5rem;
  color: var(--g2);
  text-shadow: 0 0 3px rgba(0,255,65,.5);
}
.terminal-log p::before {
  content: '$ ';
  color: var(--amber);
  text-shadow: 0 0 4px var(--amber-glow);
}

.about-text {
  font-family: var(--font-body);
  font-size: .92rem;
  color: #b8b8b8;
  line-height: 1.85;
  letter-spacing: .3px;
  /* text-editor: line numbers gutter simulation */
  padding-left: 16px;
  border-left: 2px solid rgba(0,255,65,.15);
}
.about-text p {
  position: relative;
  color: #b8b8b8;
}

/* ═══════════════════════════════════════════
   9. CHARACTER CLASSES — DOS dialog boxes
   ═══════════════════════════════════════════ */
.classes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 1.5rem;
}

.class-card {
  background: var(--bg-panel);
  padding: 0;
  position: relative;
  transition: transform .25s var(--ease-snappy), box-shadow .25s;
  overflow: hidden;
}

/* Shared DOS dialog chrome */
.class-card::before {
  content: '';
  display: block;
  height: 22px;
  border-bottom: 1px solid;
}
.class-card h3 {
  font-family: var(--font-heading);
  font-size: .6rem;
  margin: 0;
  /* Overlay onto the "title bar" */
  position: absolute;
  top: 3px;
  left: 10px;
  z-index: 2;
  letter-spacing: 2px;
}
.class-card p {
  font-family: var(--font-body);
  font-size: .85rem;
  color: #aaa;
  line-height: 1.8;
  padding: 14px 16px 18px;
}

.class-card:hover {
  transform: translateY(-3px) scale(1.01);
}

/* ── WARRIOR ── */
.class-card--warrior {
  border: 2px solid;
  border-color: #ff8888 #881111 #881111 #ff8888;
  box-shadow:
    inset 0 0 30px rgba(255,68,68,.05),
    3px 3px 0 rgba(0,0,0,.4);
}
.class-card--warrior::before {
  background: linear-gradient(90deg, #660000, #aa2222, #660000);
  border-bottom-color: #881111;
}
.class-card--warrior h3 {
  color: var(--red);
  text-shadow: -1px 0 #ff6666, 1px 0 #cc0000, 0 0 8px var(--red);
}
.class-card--warrior:hover {
  box-shadow:
    inset 0 0 30px rgba(255,68,68,.05),
    0 0 20px rgba(255,68,68,.25),
    3px 3px 0 rgba(0,0,0,.4);
}

/* ── MAGE ── */
.class-card--mage {
  border: 2px solid;
  border-color: #88aaff #112266 #112266 #88aaff;
  box-shadow:
    inset 0 0 30px rgba(68,136,255,.05),
    3px 3px 0 rgba(0,0,0,.4);
}
.class-card--mage::before {
  background: linear-gradient(90deg, #001166, #2244aa, #001166);
  border-bottom-color: #112266;
}
.class-card--mage h3 {
  color: var(--mage-blue);
  text-shadow: -1px 0 #6699ff, 1px 0 #0033cc, 0 0 8px var(--mage-blue);
}
.class-card--mage:hover {
  box-shadow:
    inset 0 0 30px rgba(68,136,255,.05),
    0 0 20px rgba(68,136,255,.25),
    3px 3px 0 rgba(0,0,0,.4);
}

/* ── ROGUE ── */
.class-card--rogue {
  border: 2px solid;
  border-color: var(--g2) var(--g-dim) var(--g-dim) var(--g2);
  box-shadow:
    inset 0 0 30px rgba(0,255,65,.04),
    3px 3px 0 rgba(0,0,0,.4);
}
.class-card--rogue::before {
  background: linear-gradient(90deg, #003311, #116633, #003311);
  border-bottom-color: var(--g-dim);
}
.class-card--rogue h3 {
  color: var(--g1);
  text-shadow: -1px 0 var(--g3), 1px 0 #009922, 0 0 8px var(--g1);
}
.class-card--rogue:hover {
  box-shadow:
    inset 0 0 30px rgba(0,255,65,.04),
    0 0 20px rgba(0,255,65,.25),
    3px 3px 0 rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════
   10. FEATURES — README.TXT viewer
   ═══════════════════════════════════════════ */
.readme-block {
  background: var(--black);
  border: 2px solid;
  border-color: var(--amber) var(--amber-dim) var(--amber-dim) var(--amber);
  padding: 0;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--amber);
  position: relative;
  box-shadow:
    inset 0 0 40px rgba(255,191,0,.03),
    3px 3px 0 rgba(0,0,0,.4);
  overflow: hidden;
}

/* Fake file viewer menu bar */
.readme-block::before {
  content: ' File  Edit  View  Help';
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--black);
  background: var(--win-gray);
  padding: 3px 8px;
  border-bottom: 1px solid var(--win-shadow);
  letter-spacing: .5px;
}

.readme-border {
  color: var(--amber-dim);
  margin: 0;
  padding: 0 16px;
  font-family: var(--font-body);
  letter-spacing: 1px;
  text-shadow: 0 0 2px rgba(255,191,0,.3);
}

.readme-title {
  font-family: var(--font-heading);
  font-size: .55rem;
  text-align: center;
  color: var(--amber);
  padding: 8px 16px;
  text-shadow:
    -1px 0 var(--hot-pink),
     1px 0 var(--scan-blue),
     0 0 8px var(--amber-glow);
  letter-spacing: 3px;
}

.readme-list {
  list-style: none;
  padding: 12px 16px;
}
.readme-list li {
  padding: 7px 0;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--amber);
  border-bottom: 1px solid rgba(255,191,0,.06);
  transition: padding-left .2s, color .2s;
}
.readme-list li:last-child { border-bottom: none; }
.readme-list li::before {
  content: '[*] ';
  color: var(--g1);
  text-shadow: 0 0 4px var(--g1);
}
.readme-list li:hover {
  padding-left: 8px;
  color: var(--pixel-yellow);
}

/* ═══════════════════════════════════════════
   11. TERMINAL SCREENSHOTS
   ═══════════════════════════════════════════ */
.terminal-screenshots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.terminal-shot {
  background: var(--black);
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  position: relative;
  /* Win95 inset frame */
  border: 2px solid;
  border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow);
}
/* CRT curvature simulation */
.terminal-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 20px rgba(0,0,0,.5);
  border-radius: 2px;
  z-index: 3;
}
.terminal-shot:hover {
  border-color: var(--g2) var(--g-dim) var(--g-dim) var(--g2);
  transform: scale(1.03);
  box-shadow: 0 0 18px rgba(0,255,65,.25);
}

.terminal-shot__bar {
  background: linear-gradient(90deg, #111 0%, #1a1a1a 100%);
  padding: 4px 8px;
  font-family: var(--font-heading);
  font-size: .45rem;
  color: var(--g2);
  border-bottom: 1px solid var(--g-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 1px;
}
.terminal-shot__bar::before {
  content: 'C:\\IMG> ';
  color: var(--amber);
}

.terminal-shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(.88) saturate(.75) contrast(1.1);
  transition: filter .3s;
}
.terminal-shot:hover img {
  filter: brightness(1) saturate(.95) contrast(1.05);
}

/* ═══════════════════════════════════════════
   12. GALLERY SECTION — image viewer
   ═══════════════════════════════════════════ */
.gallery-section {
  padding: 0;
  margin: 32px auto;
  max-width: 960px;
  background: var(--bg-panel);
  border: 2px solid;
  border-color: var(--win-gray) var(--win-shadow) var(--win-shadow) var(--win-gray);
  box-shadow:
    1px 1px 0 var(--win-shadow),
    4px 4px 0 rgba(0,0,0,.35),
    0 0 40px rgba(0,0,0,.3);
  position: relative;
}
/* Window title bar for gallery */
.gallery-section::before {
  content: '';
  display: block;
  height: 26px;
  background: linear-gradient(90deg, var(--win-blue) 0%, #0044aa 40%, #1166cc 100%);
  border-bottom: 1px solid var(--win-shadow);
}

.gallery-section > .screen-container {
  padding: 24px 20px 32px;
}

.section-heading {
  font-family: var(--font-heading);
  font-size: .65rem;
  color: var(--g1);
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(0,255,65,.06), transparent 80%);
  border-left: 3px solid var(--g1);
  text-shadow:
    -1px 0 var(--hot-pink),
     1px 0 var(--scan-blue),
     0 0 10px var(--g1);
}

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

.gallery-item.crt-frame {
  overflow: hidden;
  position: relative;
  transition: box-shadow .3s, transform .3s;
  /* Inset frame for "CRT screen" */
  border: 3px solid;
  border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow);
  border-radius: 4px;
  background: var(--black);
}
/* Pixel grid overlay */
.gallery-item.crt-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.08) 0px,
      rgba(0,0,0,.08) 1px,
      transparent 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.04) 0px,
      rgba(0,0,0,.04) 1px,
      transparent 1px,
      transparent 2px
    );
}
/* CRT curvature + vignette */
.gallery-item.crt-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.45),
    inset 0 0 80px rgba(0,0,0,.15);
  border-radius: 4px;
}
.gallery-item.crt-frame:hover {
  box-shadow: 0 0 22px rgba(0,255,65,.3), 0 0 50px rgba(0,255,65,.08);
  transform: scale(1.02);
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(.9) saturate(.8) contrast(1.1);
  transition: filter .3s;
}
.gallery-item:hover img {
  filter: brightness(1) saturate(.95) contrast(1.05);
}

.crt-frame {
  position: relative;
  border: 3px solid var(--win-dark);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.5),
    0 0 0 1px var(--black),
    0 0 20px rgba(0,0,0,.4);
  overflow: hidden;
  border-radius: 4px;
}
.crt-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  filter: contrast(1.1) saturate(.8) brightness(.9);
}

.crt-caption {
  font-family: var(--font-sub);
  font-size: 1.1rem;
  color: var(--g2);
  text-align: center;
  padding: 8px;
  background: var(--black);
  text-shadow: 0 0 4px var(--g1);
}

/* ═══════════════════════════════════════════
   13. BBS REVIEWS — bulletin board
   ═══════════════════════════════════════════ */
.bbs-reviews {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 1.5rem;
}

.bbs-post {
  background: var(--black);
  font-family: var(--font-body);
  position: relative;
  /* Inset Win95 well */
  border: 2px solid;
  border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow);
  padding: 0;
  overflow: hidden;
  transition: box-shadow .3s;
}
.bbs-post:hover {
  box-shadow: 0 0 14px rgba(0,255,65,.1);
}

/* Post header bar */
.bbs-post .bbs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  margin-bottom: 0;
  font-size: .85rem;
  background: linear-gradient(90deg, #111, #1a1a2e);
  border-bottom: 1px solid var(--win-shadow);
}

.bbs-border {
  color: rgba(255,255,255,.08);
  margin: 0;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: 2px;
}

.bbs-user {
  font-family: var(--font-heading);
  font-size: .5rem;
  letter-spacing: 1px;
}

.bbs-user--1 {
  color: var(--red);
  text-shadow: 0 0 6px var(--red);
}
.bbs-user--2 {
  color: var(--mage-blue);
  text-shadow: 0 0 6px var(--mage-blue);
}
.bbs-user--3 {
  color: var(--g1);
  text-shadow: 0 0 6px var(--g1);
}

.bbs-rating {
  font-family: var(--font-sub);
  font-size: 1.1rem;
  color: var(--pixel-yellow);
  text-shadow: 0 0 4px rgba(255,215,0,.4);
}

.bbs-text {
  font-family: var(--font-body);
  font-size: .85rem;
  color: #b0b0b0;
  line-height: 1.8;
  font-style: normal;
  padding: 12px 14px 16px;
}

/* ═══════════════════════════════════════════
   14. FAQ — HELP.EXE viewer
   ═══════════════════════════════════════════ */
.faq-section {
  margin-top: 1.5rem;
  /* File tree / help viewer inset */
  border: 2px solid;
  border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow);
  background: var(--black);
  padding: 6px;
}
.faq-section::before {
  content: none;
}

.faq-item {
  margin-bottom: 4px;
  background: rgba(10,14,26,.8);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .2s;
}
.faq-item.active {
  border-color: var(--amber-dim);
}

.faq-question {
  font-family: var(--font-sub);
  font-size: 1.1rem;
  color: var(--amber);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
  transition: color .2s, background .2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .5px;
}
.faq-question::before {
  content: 'HELP> ';
  color: var(--g2);
  font-family: var(--font-body);
  font-size: .7rem;
  text-shadow: 0 0 3px var(--g1);
  flex-shrink: 0;
  margin-right: 6px;
}
.faq-question::after {
  content: '[+]';
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--g1);
  text-shadow: 0 0 4px var(--g1);
  flex-shrink: 0;
}
.faq-item.active .faq-question::after {
  content: '[-]';
  color: var(--hot-pink);
  text-shadow: 0 0 4px var(--hot-pink);
}
.faq-question:hover {
  color: var(--pixel-yellow);
  background: rgba(255,191,0,.04);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease-snappy);
}

.faq-answer-inner {
  padding: 0 14px 14px;
  padding-left: 62px; /* align with text after HELP> prefix */
  font-family: var(--font-body);
  font-size: .85rem;
  color: #a0a0a0;
  line-height: 1.8;
  border-top: 1px dashed rgba(255,191,0,.12);
}

/* ═══════════════════════════════════════════
   15. FINAL CTA
   ═══════════════════════════════════════════ */
.final-cta {
  text-align: center;
  padding: 80px 16px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(204,68,255,.04) 0%, transparent 60%),
    linear-gradient(180deg, #120828 0%, var(--bg-deep) 100%);
  position: relative;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--crt-purple), var(--g1), var(--crt-purple), transparent);
  box-shadow: 0 0 15px var(--crt-purple);
}

.final-cta h2 {
  font-family: var(--font-heading);
  font-size: .85rem;
  color: var(--g1);
  text-shadow:
    -2px 0 var(--hot-pink),
     2px 0 var(--scan-blue),
     0 0 15px var(--g1);
  margin-bottom: 2rem;
}

.final-cta-btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .65rem;
  color: var(--g1);
  background: var(--black);
  padding: 16px 36px;
  letter-spacing: 2px;
  border: 2px solid;
  border-color: var(--g2) var(--g-dim) var(--g-dim) var(--g2);
  text-shadow: 0 0 8px var(--g1);
  box-shadow: 0 0 18px rgba(0,255,65,.15);
  transition: all .25s var(--ease-snappy);
  animation: pulseCta 2.5s ease-in-out infinite;
}
.final-cta-btn:hover {
  background: var(--g1);
  color: var(--black);
  text-shadow: none;
  border-color: var(--g-dim) var(--g2) var(--g2) var(--g-dim);
  box-shadow: 0 0 40px rgba(0,255,65,.45);
}
.final-cta-btn:active {
  transform: translateY(1px);
  border-color: var(--g-dim) var(--g2) var(--g2) var(--g-dim);
}

@keyframes pulseCta {
  0%,100% { box-shadow: 0 0 18px rgba(0,255,65,.15); }
  50%     { box-shadow: 0 0 36px rgba(0,255,65,.3), 0 0 60px rgba(0,255,65,.1); }
}

/* ═══════════════════════════════════════════
   16. FOOTER
   ═══════════════════════════════════════════ */
.retro-footer {
  background:
    linear-gradient(180deg, #080810 0%, var(--black) 100%);
  border-top: 2px solid var(--g1);
  box-shadow: 0 -4px 24px rgba(0,255,65,.06);
  padding: 40px 0 30px;
  text-align: center;
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--g2);
  text-shadow: 0 0 4px rgba(0,255,65,.4);
  margin-bottom: 1rem;
  letter-spacing: .5px;
}

.footer-links {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}
.footer-links li {
  font-family: var(--font-sub);
  font-size: 1.1rem;
}
.footer-links li a {
  color: var(--amber);
  transition: color .2s, text-shadow .2s;
}
.footer-links li a:hover {
  color: var(--pixel-yellow);
  text-shadow: 0 0 8px rgba(255,215,0,.4);
}

.footer-separator {
  color: var(--win-dark);
}

.footer-disclaimer {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--win-dark);
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.footer-rendered {
  font-family: var(--font-sub);
  font-size: .9rem;
  color: var(--win-dark);
  opacity: .5;
}

/* ═══════════════════════════════════════════
   17. GDPR — Win95 dialog box
   ═══════════════════════════════════════════ */
.gdpr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn .3s ease forwards;
  opacity: 1;
}
.gdpr-overlay.closing {
  animation: scaleDown .4s ease forwards;
}

@keyframes scaleDown {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.1); }
}

.gdpr-dialog {
  background: var(--win-gray);
  max-width: 480px;
  width: 90%;
  font-family: var(--font-body);
  /* Full Win95 3D border stack */
  border: 2px solid;
  border-color: #fff var(--win-shadow) var(--win-shadow) #fff;
  box-shadow:
    1px 1px 0 var(--win-shadow),
    6px 6px 0 rgba(0,0,0,.5);
}

.gdpr-titlebar {
  background: linear-gradient(90deg, var(--win-blue), #0044aa);
  color: #fff;
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: .45rem;
  letter-spacing: 1px;
}

.gdpr-close-btn {
  background: var(--win-gray);
  border: 2px solid;
  border-color: #fff var(--win-shadow) var(--win-shadow) #fff;
  color: var(--black);
  font-family: var(--font-heading);
  font-size: .4rem;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
.gdpr-close-btn:hover { background: #ddd; }
.gdpr-close-btn:active {
  border-color: var(--win-shadow) #fff #fff var(--win-shadow);
}

.gdpr-body {
  padding: 20px;
  background: var(--win-gray);
  color: var(--black);
  font-size: .85rem;
  line-height: 1.65;
}
.gdpr-body p {
  color: var(--black);
  margin-bottom: 16px;
}

.gdpr-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 20px 20px;
  background: var(--win-gray);
}

.gdpr-btn {
  font-family: var(--font-heading);
  font-size: .45rem;
  padding: 8px 24px;
  border: 2px solid;
  border-color: #fff var(--win-shadow) var(--win-shadow) #fff;
  background: var(--win-gray);
  color: var(--black);
  cursor: pointer;
  letter-spacing: 1px;
  transition: background .15s;
}
.gdpr-btn:hover { background: #ddd; }
.gdpr-btn:active {
  border-color: var(--win-shadow) #fff #fff var(--win-shadow);
}
.gdpr-btn--ok {
  background: var(--win-gray);
}

/* ═══════════════════════════════════════════
   18. CONTACT FORM — terminal input
   ═══════════════════════════════════════════ */
.terminal-form {
  background: var(--black);
  padding: 0;
  margin-top: 1.5rem;
  border: 2px solid;
  border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow);
  overflow: hidden;
}
/* Title bar for form */
.terminal-form::before {
  content: 'CONTACT.EXE';
  display: block;
  font-family: var(--font-heading);
  font-size: .45rem;
  color: #fff;
  background: linear-gradient(90deg, var(--win-blue), #0044aa);
  padding: 5px 10px;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--win-shadow);
}

.form-group {
  margin: 0 20px 18px;
}
.form-group:first-of-type {
  margin-top: 20px;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--g2);
  text-shadow: 0 0 3px rgba(0,255,65,.4);
  margin-bottom: 6px;
  letter-spacing: .5px;
}
.form-label::before {
  content: '> ';
  color: var(--amber);
  text-shadow: 0 0 4px var(--amber-glow);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: #060a14;
  border: 1px solid var(--g-dim);
  color: var(--g1);
  font-family: var(--font-body);
  font-size: .9rem;
  padding: 10px 12px;
  outline: none;
  letter-spacing: .5px;
  transition: border-color .25s, box-shadow .25s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--g1);
  box-shadow: 0 0 12px rgba(0,255,65,.15), inset 0 0 12px rgba(0,255,65,.03);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%2300ff41'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-select option {
  background: var(--black);
  color: var(--g1);
}

.form-submit {
  font-family: var(--font-heading);
  font-size: .6rem;
  color: var(--g1);
  background: var(--black);
  padding: 14px 32px;
  cursor: pointer;
  letter-spacing: 2px;
  border: 2px solid;
  border-color: var(--g2) var(--g-dim) var(--g-dim) var(--g2);
  text-shadow: 0 0 6px var(--g1);
  transition: all .2s var(--ease-snappy);
  display: block;
  margin: 0 20px 20px;
}
.form-submit:hover {
  background: var(--g1);
  color: var(--black);
  text-shadow: none;
  border-color: var(--g-dim) var(--g2) var(--g2) var(--g-dim);
  box-shadow: 0 0 20px rgba(0,255,65,.3);
}
.form-submit:active {
  transform: translateY(1px);
  border-color: var(--g-dim) var(--g2) var(--g2) var(--g-dim);
}

.form-response {
  margin: 0 20px 16px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--g1);
  text-shadow: 0 0 4px var(--g1);
  display: none;
}
.form-response.active { display: block; }

/* ── Contact info block ── */
.contact-info {
  margin-top: 2rem;
  padding: 0;
  background: var(--black);
  border: 2px solid;
  border-color: var(--amber) var(--amber-dim) var(--amber-dim) var(--amber);
  overflow: hidden;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35);
}
.contact-info::before {
  content: 'INFO.DAT';
  display: block;
  font-family: var(--font-heading);
  font-size: .45rem;
  color: var(--black);
  background: var(--amber);
  padding: 4px 10px;
  letter-spacing: 2px;
}
.contact-info h3 {
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber-glow);
  margin: 14px 16px 10px;
}
.contact-info p {
  font-family: var(--font-body);
  font-size: .85rem;
  color: #aaa;
  margin: 0 16px .5rem;
  padding-bottom: .5rem;
}
.contact-info p:last-child { padding-bottom: 16px; }
.contact-info a { color: var(--g1); }

/* ═══════════════════════════════════════════
   19. LEGAL PAGES
   ═══════════════════════════════════════════ */
.legal-content {
  padding: 40px 0 60px;
}
.legal-content h1 {
  font-size: .85rem;
  margin-bottom: 2rem;
  color: var(--amber);
  text-shadow:
    -1px 0 var(--hot-pink),
     1px 0 var(--scan-blue),
     0 0 10px var(--amber-glow);
}
.legal-content h2 {
  font-size: .65rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--g1);
}
.legal-content h3 {
  font-size: .55rem;
  margin-top: 1.5rem;
  margin-bottom: .8rem;
  color: var(--g1);
}
.legal-content p,
.legal-content li {
  font-family: var(--font-body);
  font-size: .85rem;
  color: #bbb;
  line-height: 1.8;
}
.legal-content ul,
.legal-content ol {
  margin: 1rem 0;
  padding-left: 24px;
}
.legal-content li { margin-bottom: .5rem; }
.legal-content .legal-separator {
  color: var(--win-dark);
  margin: 2rem 0;
  letter-spacing: 2px;
  text-align: center;
}

/* ═══════════════════════════════════════════
   20. COUNTERS
   ═══════════════════════════════════════════ */
.counter-value {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--pixel-yellow);
  text-shadow:
    0 0 8px rgba(255,215,0,.5),
    0 0 20px rgba(255,215,0,.15);
  display: inline-block;
  min-width: 2ch;
}

/* ═══════════════════════════════════════════
   21. GDPR info page
   ═══════════════════════════════════════════ */
.gdpr-page-header {
  background: linear-gradient(90deg, var(--win-blue), #0044aa);
  color: #fff;
  padding: 16px;
  font-family: var(--font-heading);
  font-size: .6rem;
  margin-bottom: 2rem;
  border: 2px solid;
  border-color: #fff var(--win-shadow) var(--win-shadow) #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  letter-spacing: 2px;
}

/* ═══════════════════════════════════════════
   22. UTILITIES
   ═══════════════════════════════════════════ */
.text-center { text-align: center; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════
   23. GLITCH KEYFRAMES (for headings)
   ═══════════════════════════════════════════ */
@keyframes glitchClip {
  0%   { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 0); }
  20%  { clip-path: inset(10% 0 80% 0); transform: translate(2px, 0); }
  40%  { clip-path: inset(70% 0 5% 0);  transform: translate(-1px, 0); }
  60%  { clip-path: inset(30% 0 50% 0); transform: translate(1px, 0); }
  80%  { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
  100% { clip-path: inset(0 0 0 0);     transform: translate(0); }
}

/* Subtle glitch on section title hover */
.section-title:hover,
.section-heading:hover {
  animation: glitchClip .3s linear;
}

/* ═══════════════════════════════════════════
   24. RESPONSIVE — 640px
   ═══════════════════════════════════════════ */
@media (min-width: 640px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1rem; }

  .hero-title { font-size: 2.2rem; }
  .hero-subtitle { font-size: 1.8rem; }

  .classes-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-links {
    display: flex;
    flex-direction: row;
  }
  .burger-menu { display: none; }

  .nav-links.active {
    position: static;
    border-bottom: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .bbs-header { flex-direction: row; }

  .retro-section {
    margin-left: 16px;
    margin-right: 16px;
  }
  .gallery-section {
    margin-left: 16px;
    margin-right: 16px;
  }
}

@media (max-width: 639px) {
  .gallery-grid { grid-template-columns: 1fr; }

  .retro-section,
  .gallery-section {
    margin-left: 8px;
    margin-right: 8px;
    border-width: 1px;
  }

  .class-card h3 {
    font-size: .5rem;
  }

  .faq-answer-inner {
    padding-left: 14px;
  }
}

/* ═══════════════════════════════════════════
   25. RESPONSIVE — 768px
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {
  .terminal-screenshots {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
  }
}

/* ═══════════════════════════════════════════
   26. RESPONSIVE — 960px
   ═══════════════════════════════════════════ */
@media (min-width: 960px) {
  .hero-title { font-size: 2.8rem; }
  .hero-subtitle { font-size: 2rem; }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .retro-section > .screen-container {
    padding: 32px 28px 40px;
  }
  .gallery-section > .screen-container {
    padding: 32px 28px 40px;
  }

  .retro-section,
  .gallery-section {
    margin-left: auto;
    margin-right: auto;
  }

  .final-cta {
    padding: 100px 16px;
  }
}

/* ═══════════════════════════════════════════
   27. PHOSPHOR PERSISTENCE — glow on
       interactive elements on hover
   ═══════════════════════════════════════════ */
.hero-cta,
.final-cta-btn,
.form-submit,
.burger-menu,
.gdpr-btn,
.nav-links li a {
  position: relative;
}

/* Expanding glow ring on buttons */
.hero-cta::after,
.final-cta-btn::after,
.form-submit::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(0,255,65,.2), 0 0 40px rgba(0,255,65,.1);
}
.hero-cta:hover::after,
.final-cta-btn:hover::after,
.form-submit:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════
   28. PRINT — don't waste toner
   ═══════════════════════════════════════════ */
@media print {
  body::before,
  body::after { display: none; }
  .retro-nav { position: static; }
  .gdpr-overlay { display: none !important; }
  * { text-shadow: none !important; box-shadow: none !important; }
}