/* ==========================================================================
   KOGWA $DOOMSDAY - ULTIMATE RESPONSIVE & HIGH-PERFORMANCE STYLESHEET
   Cyberpunk / Dark Sci-Fi HUD Interface (AAA Visuals & 60-120fps Optimized)
   ========================================================================== */

:root {
  --neon-lime: #a3e635;
  --neon-lime-bright: #bef264;
  --neon-lime-glow: rgba(163, 230, 53, 0.45);
  --neon-lime-dim: rgba(163, 230, 53, 0.15);
  
  --dark-bg: #040804;
  --dark-panel: rgba(8, 18, 9, 0.82);
  --dark-panel-border: rgba(163, 230, 53, 0.35);
  --dark-panel-border-bright: rgba(190, 242, 100, 0.85);

  --text-white: #f8fafc;
  --text-silver: #cbd5e1;
  --text-muted: #8fa38d;
  --text-gold: #facc15;

  --font-cinzel: 'Cinzel Decorative', 'Cinzel', serif;
  --font-orbitron: 'Orbitron', sans-serif;
  --font-rajdhani: 'Rajdhani', sans-serif;
  --font-chakra: 'Chakra Petch', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;

  --hud-clip-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --hud-clip-md: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --hud-clip-lg: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  --hud-clip-panel: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}

/* Base Reset & Hardware Compositing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--dark-bg);
  color: var(--text-white);
  font-family: var(--font-rajdhani);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Interactive Ambient Cursor Glow (Desktop Only) */
.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(163, 230, 53, 0.07) 0%, rgba(163, 230, 53, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: opacity 0.3s ease;
  will-change: transform;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursor-glow {
    display: block;
  }
}

/* ==========================================================================
   2.5D LAYERED DOOMSDAY WORLD STAGE & DEPTH STACK
   ========================================================================== */

.world-scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--dark-bg);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: layout paint;
}

.layer {
  position: absolute;
  top: -25px;
  left: -25px;
  width: calc(100vw + 50px);
  height: calc(100vh + 50px);
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.12s cubic-bezier(0.2, 0, 0.2, 1);
}

/* 1. BACK: Wallpaper (Deep full-screen atmospheric background) */
.layer-wallpaper {
  z-index: 1;
}

.sprite-wallpaper {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: contrast(1.02) brightness(0.8);
  image-rendering: -webkit-optimize-contrast;
}

/* 2. DISTANT SKY: Skybolt Lightning (Slow opacity pulse & subtle variation) */
.layer-skybolt {
  z-index: 2;
}

.sprite-skybolt {
  position: absolute;
  top: -2%;
  left: 48%;
  transform: translateX(-50%);
  width: 60vw;
  min-width: 650px;
  max-width: 1050px;
  mix-blend-mode: screen;
  opacity: 0.72;
  filter: drop-shadow(0 0 30px rgba(163, 230, 53, 0.75)) drop-shadow(0 0 10px rgba(190, 242, 100, 0.9));
  animation: skyboltSlowPulse 11s infinite ease-in-out;
}

@keyframes skyboltSlowPulse {
  0%, 100% { opacity: 0.58; filter: drop-shadow(0 0 20px rgba(163, 230, 53, 0.5)); transform: translateX(-50%) scale(0.99); }
  45% { opacity: 0.85; filter: drop-shadow(0 0 40px rgba(163, 230, 53, 0.85)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.5)); transform: translateX(-50%) scale(1.01); }
  75% { opacity: 0.65; filter: drop-shadow(0 0 25px rgba(163, 230, 53, 0.6)); transform: translateX(-50%) scale(1); }
}

/* 3. DISTANT LANDMARK: Green Castle / Citadel */
.layer-castle {
  z-index: 3;
}

.castle-glow-behind {
  position: absolute;
  top: 10%;
  left: 54%;
  transform: translateX(-50%);
  width: 50vw;
  max-width: 600px;
  height: 350px;
  background: radial-gradient(ellipse at center, rgba(163, 230, 53, 0.22) 0%, rgba(74, 222, 128, 0.08) 55%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}

.sprite-castle {
  position: absolute;
  top: 6%;
  left: 54%;
  transform: translateX(-50%);
  width: 48vw;
  min-width: 540px;
  max-width: 920px;
  filter: contrast(1.05) brightness(0.94) drop-shadow(0 15px 35px rgba(0, 0, 0, 0.85));
  image-rendering: -webkit-optimize-contrast;
  transition: filter 0.25s ease;
}

/* 4. MIDGROUND: Army Depth & Green Banner */
.layer-army {
  z-index: 4;
}

.sprite-army {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 95vw;
  min-width: 980px;
  max-width: 1650px;
  filter: contrast(0.96) brightness(0.86) blur(0.5px);
  opacity: 0.94;
  image-rendering: -webkit-optimize-contrast;
  transition: filter 0.25s ease;
}

.flag-container {
  position: absolute;
  top: 10%;
  right: 14%;
  width: 20vw;
  min-width: 240px;
  max-width: 380px;
  pointer-events: none;
}

.sprite-flag {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.9));
  transform-origin: 20% 0%;
  animation: flagRestrainedSway 8s infinite ease-in-out;
}

@keyframes flagRestrainedSway {
  0%, 100% { transform: rotate(0deg) skewY(0deg); }
  50% { transform: rotate(1.2deg) skewY(-0.8deg); }
}

.layer-fog-haze {
  position: absolute;
  top: 35%;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 26, 12, 0.2) 50%, transparent 100%);
  pointer-events: none;
  z-index: 4;
}

/* 5. GROUND: Green Terrain (Lower platform anchor) */
.layer-terrain {
  z-index: 5;
}

.sprite-terrain {
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: 106vw;
  min-width: 1150px;
  max-width: 1920px;
  filter: contrast(1.06) brightness(0.92) drop-shadow(0 -15px 35px rgba(0, 0, 0, 0.95));
  image-rendering: -webkit-optimize-contrast;
}

.terrain-light-reflection {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85vw;
  height: 200px;
  background: radial-gradient(ellipse at center bottom, rgba(163, 230, 53, 0.12) 0%, rgba(30, 60, 20, 0.05) 50%, transparent 70%);
  filter: blur(35px);
  pointer-events: none;
}

/* 6. FOREGROUND: 2D Doom Hero Sprite (Sharpest, highest contrast) */
.layer-hero {
  z-index: 6;
}

.hero-rim-glow {
  position: absolute;
  bottom: 6%;
  left: 54%;
  transform: translateX(-50%);
  width: 520px;
  height: 650px;
  background: radial-gradient(ellipse at 50% 45%, rgba(163, 230, 53, 0.18) 0%, rgba(190, 242, 100, 0.06) 40%, transparent 70%);
  filter: blur(45px);
  pointer-events: none;
  z-index: 1;
}

.sprite-doom {
  position: absolute;
  bottom: -2%;
  left: 54%;
  transform: translateX(-50%);
  height: 90vh;
  min-height: 540px;
  max-height: 980px;
  width: auto;
  filter: contrast(1.1) brightness(1.02) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.98)) drop-shadow(0 0 16px rgba(163, 230, 53, 0.22));
  image-rendering: -webkit-optimize-contrast;
  z-index: 2;
}

/* 7. FOREGROUND LIGHTNING: Lightning Bolt Strike Sprite */
.layer-lightning {
  z-index: 7;
}

.sprite-lightning-bolt {
  position: absolute;
  top: 1%;
  left: 45%;
  width: 16vw;
  min-width: 160px;
  max-width: 280px;
  mix-blend-mode: screen;
  opacity: 0;
  filter: drop-shadow(0 0 25px rgba(190, 242, 100, 0.95)) drop-shadow(0 0 50px rgba(163, 230, 53, 0.8)) brightness(2.2);
  transform-origin: top center;
  transition: opacity 0.08s ease-out, transform 0.08s ease-out;
  pointer-events: none;
}

.sprite-lightning-bolt.flash-active {
  opacity: 1;
  transform: scale(1.04);
}

.lightning-flash-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 25%, rgba(190, 242, 100, 0.18) 0%, rgba(163, 230, 53, 0.08) 50%, transparent 80%);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  transition: opacity 0.12s ease-out;
}

.lightning-flash-overlay.flash-active {
  opacity: 1;
}

.vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 62% 38%, rgba(0,0,0,0) 28%, rgba(2, 6, 2, 0.35) 60%, rgba(1, 4, 1, 0.88) 95%),
              linear-gradient(180deg, rgba(2, 6, 2, 0.75) 0%, rgba(2, 6, 2, 0) 10%, rgba(2, 6, 2, 0) 80%, rgba(2, 6, 2, 0.95) 100%),
              linear-gradient(90deg, rgba(2, 6, 2, 0.8) 0%, rgba(2, 6, 2, 0.3) 30%, rgba(2, 6, 2, 0) 60%, rgba(2, 6, 2, 0.5) 100%);
  pointer-events: none;
  z-index: 9;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.3;
  pointer-events: none;
  z-index: 9;
}

.green-atmosphere-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vh;
  background: radial-gradient(ellipse at center, rgba(163, 230, 53, 0.08) 0%, rgba(74, 222, 128, 0.03) 50%, transparent 80%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 9;
  animation: pulseAura 8s infinite alternate ease-in-out;
}

@keyframes pulseAura {
  0% { opacity: 0.5; transform: translateX(-50%) scale(0.95); }
  100% { opacity: 0.9; transform: translateX(-50%) scale(1.05); }
}

/* Storm Lightning & Canvas */
#storm-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

/* Site Content Wrapper */
.site-container {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 2.5rem 1rem;
  max-width: 1600px;
  margin: 0 auto;
  contain: layout style;
}

/* Audio Quick Controls Floating */
.hud-quick-controls {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  z-index: 100;
}

.hud-audio-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 22, 10, 0.85);
  border: 1px solid var(--dark-panel-border);
  color: var(--neon-lime);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-chakra);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hud-audio-btn:hover {
  background: rgba(22, 45, 18, 0.95);
  border-color: var(--neon-lime-bright);
  box-shadow: 0 0 14px var(--neon-lime-glow);
}

.hud-audio-btn:active {
  transform: scale(0.96);
}

.audio-wave {
  display: inline-block;
  width: 3px;
  height: 10px;
  background: var(--neon-lime);
  border-radius: 1px;
}

.audio-active .audio-wave:nth-child(1) { animation: wavePulse 0.8s infinite ease-in-out; }
.audio-active .audio-wave:nth-child(2) { animation: wavePulse 0.8s infinite ease-in-out 0.2s; }
.audio-active .audio-wave:nth-child(3) { animation: wavePulse 0.8s infinite ease-in-out 0.4s; }

@keyframes wavePulse {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* ==========================================================================
   HEADER / NAVBAR
   ========================================================================== */

.hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 1rem;
  position: relative;
}

/* Brand Panel (Top-Left) */
.brand-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(8, 20, 8, 0.88) 0%, rgba(4, 10, 4, 0.96) 100%);
  border: 1px solid rgba(163, 230, 53, 0.4);
  padding: 0.5rem 1.25rem 0.5rem 0.85rem;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  box-shadow: 0 0 15px rgba(163, 230, 53, 0.15), inset 0 0 12px rgba(163, 230, 53, 0.08);
  position: relative;
  user-select: none;
  text-decoration: none;
  color: inherit;
}

.brand-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-lime-bright), transparent);
}

.brand-logo-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 10px rgba(163, 230, 53, 0.65));
  flex-shrink: 0;
}

/* Official Kogwa logo — tinted neon lime, original shape preserved */
.kogwa-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Desaturate black bg → transparent feeling, tint white/grey shapes to neon lime */
  filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(44deg) brightness(1.1);
  transition: filter 0.25s ease, transform 0.2s ease;
}

.brand-panel:hover .kogwa-logo-img {
  filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(44deg) brightness(1.25);
  transform: scale(1.08);
}

.brand-text-block {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-orbitron);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(163, 230, 53, 0.3);
  line-height: 1.1;
}

.brand-subtitle {
  font-family: var(--font-chakra);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #a3c48d;
  margin-top: 1px;
}

/* Nav Menu (Center) */
.hud-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: var(--font-orbitron);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #8b9c8b;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0.4rem 0.6rem;
  display: inline-block;
}

.nav-item.active .nav-link {
  color: var(--neon-lime-bright);
  text-shadow: 0 0 12px var(--neon-lime-glow), 0 0 20px rgba(190, 242, 100, 0.4);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--neon-lime-bright);
  box-shadow: 0 0 8px var(--neon-lime-bright);
}

.nav-link:hover {
  color: #f1f5f9;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.header-right-accent {
  width: 180px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Mobile Menu Toggle Button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: rgba(10, 22, 10, 0.85);
  border: 1px solid var(--dark-panel-border);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  padding: 8px;
  z-index: 101;
  transition: all 0.2s ease;
}

.mobile-menu-btn:hover {
  border-color: var(--neon-lime-bright);
  box-shadow: 0 0 10px var(--neon-lime-glow);
}

.mobile-menu-btn .menu-bar {
  width: 20px;
  height: 2px;
  background: var(--neon-lime);
  transition: all 0.3s ease;
}

.mobile-menu-btn.active .menu-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active .menu-bar:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active .menu-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   HERO STAGE LAYOUT & ULTRA-POLISHED TYPOGRAPHY
   ========================================================================== */

.hero-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 2rem;
  margin: 1.5rem 0 2.5rem;
  min-height: 520px;
  will-change: transform;
}

/* Left Narrative Block */
.hero-narrative {
  display: flex;
  flex-direction: column;
  max-width: 580px;
}

.title-block {
  margin-bottom: 1.5rem;
  position: relative;
}

.metallic-title {
  font-family: var(--font-cinzel);
  font-size: clamp(3.2rem, 5.5vw, 5.2rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e2e8f0 20%,
    #94a3b8 40%,
    #cbd5e1 55%,
    #64748b 75%,
    #1e293b 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 2px #0f172a) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(163, 230, 53, 0.25));
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  animation: metallicShimmer 10s ease infinite alternate;
}

@keyframes metallicShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.title-symbol {
  font-family: var(--font-cinzel);
  color: #a3e635;
  -webkit-text-fill-color: #bef264;
  text-shadow: 0 0 15px var(--neon-lime-glow);
}

.metallic-subtitle {
  font-family: var(--font-rajdhani);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.38em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 0.6rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.lore-box {
  margin-bottom: 2rem;
}

.lore-p {
  font-family: var(--font-rajdhani);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  color: #cbd5e1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Actions Group */
.actions-group {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 440px;
}

/* Primary BUY Button */
.btn-primary-doom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  padding: 0.95rem 1.8rem;
  background: linear-gradient(180deg, #bef264 0%, #a3e635 30%, #84cc16 70%, #65a30d 100%);
  border: 1px solid #d9f99d;
  color: #0c1a06;
  font-family: var(--font-orbitron);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  clip-path: var(--hud-clip-md);
  cursor: pointer;
  box-shadow: 0 0 25px rgba(163, 230, 53, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.7), inset 0 -2px 5px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
  user-select: none;
  will-change: transform;
}

.btn-primary-doom:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #d9f99d 0%, #bef264 30%, #a3e635 70%, #84cc16 100%);
  box-shadow: 0 0 35px rgba(163, 230, 53, 0.8), 0 0 15px rgba(190, 242, 100, 0.6), inset 0 2px 4px #ffffff;
}

.btn-primary-doom:active {
  transform: translateY(1px) scale(0.98);
}

.btn-chevron {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.2s ease;
}

.btn-primary-doom:hover .btn-chevron {
  transform: translateX(4px);
}

/* Secondary Button Row */
.secondary-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.btn-secondary-cyber {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.75rem 1rem;
  background: rgba(6, 15, 6, 0.78);
  border: 1px solid rgba(163, 230, 53, 0.35);
  color: var(--text-silver);
  font-family: var(--font-orbitron);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(163, 230, 53, 0.06);
  transition: all 0.2s ease;
  user-select: none;
}

.btn-secondary-cyber:hover {
  background: rgba(14, 30, 14, 0.92);
  border-color: var(--neon-lime-bright);
  color: #ffffff;
  box-shadow: 0 0 16px var(--neon-lime-glow), inset 0 0 12px rgba(163, 230, 53, 0.15);
  transform: translateY(-2px);
}

.btn-secondary-cyber:active {
  transform: translateY(1px) scale(0.98);
}

.play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(163, 230, 53, 0.15);
  padding: 2px;
  border-radius: 3px;
  color: var(--neon-lime);
}

/* ==========================================================================
   RIGHT COLUMN: ACCESS DOOMSDAY CARD
   ========================================================================== */

.hero-access-sidebar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.access-panel {
  position: relative;
  width: 290px;
  background: linear-gradient(180deg, rgba(8, 20, 9, 0.88) 0%, rgba(4, 12, 5, 0.94) 100%);
  border: 1px solid rgba(163, 230, 53, 0.4);
  clip-path: var(--hud-clip-panel);
  padding: 1.4rem 1.4rem 1.6rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(163, 230, 53, 0.18), inset 0 0 20px rgba(163, 230, 53, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  contain: paint;
}

.access-panel-header {
  margin-bottom: 0.8rem;
}

.access-panel-title {
  font-family: var(--font-orbitron);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--neon-lime);
  text-shadow: 0 0 8px var(--neon-lime-glow);
}

.x-hologram-wrap {
  position: relative;
  width: 220px;
  height: 180px;
  margin: 0 auto 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#x-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.x-symbol-container {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-glowing-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 12px rgba(163, 230, 53, 0.7));
}

.spin-ring {
  transform-origin: center;
  animation: rotateClockwise 25s linear infinite;
}

.spin-ring-rev {
  transform-origin: center;
  animation: rotateCounter 35s linear infinite;
}

@keyframes rotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateCounter {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.btn-access-x {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, #bef264 0%, #a3e635 35%, #84cc16 75%, #65a30d 100%);
  border: 1px solid #d9f99d;
  color: #0c1a06;
  font-family: var(--font-orbitron);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  box-shadow: 0 0 20px rgba(163, 230, 53, 0.45), inset 0 1px 2px #ffffff;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-access-x:hover {
  background: linear-gradient(180deg, #d9f99d 0%, #bef264 35%, #a3e635 75%, #84cc16 100%);
  box-shadow: 0 0 30px rgba(163, 230, 53, 0.75), inset 0 2px 3px #ffffff;
  transform: translateY(-2px);
}

.btn-access-x:active {
  transform: translateY(1px) scale(0.98);
}

/* Corner Accents on Card */
.corner-bracket {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--neon-lime-bright);
  pointer-events: none;
}

.corner-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.corner-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.corner-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.corner-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.x-hologram-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ==========================================================================
   LIVE DOOMSDAY MARKETS HUD BAR
   ========================================================================== */

.markets-hud-bar {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0.8rem;
}

.hud-outer-frame-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}

.hud-outer-frame {
  background: linear-gradient(180deg, rgba(8, 22, 10, 0.85) 0%, rgba(3, 10, 4, 0.95) 100%);
  border: 1px solid rgba(163, 230, 53, 0.45);
  clip-path: var(--hud-clip-lg);
  padding: 0.75rem 1.5rem;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 15px rgba(163, 230, 53, 0.2), inset 0 0 15px rgba(163, 230, 53, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hud-inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--neon-lime) transparent;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.hud-inner-container::-webkit-scrollbar {
  height: 3px;
}
.hud-inner-container::-webkit-scrollbar-thumb {
  background: var(--neon-lime);
  border-radius: 2px;
}

.market-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.col-header {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.pulse-wave-icon {
  width: 32px;
  height: 22px;
  filter: drop-shadow(0 0 6px var(--neon-lime-glow));
}

.ecg-svg {
  width: 100%;
  height: 100%;
  animation: pulseEcg 2s ease-in-out infinite;
}

@keyframes pulseEcg {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px var(--neon-lime-bright)); }
}

.market-header-label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-chakra);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--neon-lime-bright);
  line-height: 1.15;
  text-shadow: 0 0 6px var(--neon-lime-glow);
}

.col-stat {
  gap: 0.2rem;
}

.stat-tag {
  font-family: var(--font-chakra);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #8fa38d;
}

.stat-val-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-value {
  font-family: var(--font-orbitron);
  font-size: 0.95rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.05em;
}

.stat-value.font-mono {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

.stat-highlight {
  color: var(--neon-lime-bright);
  text-shadow: 0 0 8px var(--neon-lime-glow);
}

.stat-delta {
  font-family: var(--font-chakra);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 2px;
}

.stat-delta.positive {
  color: var(--neon-lime-bright);
  text-shadow: 0 0 6px var(--neon-lime-glow);
}

.arrow {
  font-size: 0.65rem;
}

.hud-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(163, 230, 53, 0.4), transparent);
  flex-shrink: 0;
}

/* ==========================================================================
   BOTTOM FOOTER BAR
   ========================================================================== */

.hud-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 1.5rem;
  background: rgba(5, 12, 5, 0.85);
  border: 1px solid rgba(163, 230, 53, 0.25);
  clip-path: var(--hud-clip-md);
  box-shadow: 0 0 20px rgba(0,0,0,0.8), inset 0 0 10px rgba(163, 230, 53, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer-segment {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-silver);
  transition: all 0.2s ease;
  min-height: 40px;
}

.segment-status {
  font-family: var(--font-chakra);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.status-indicator {
  position: relative;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beacon-dot {
  width: 6px;
  height: 6px;
  background: var(--neon-lime-bright);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--neon-lime-bright);
}

.beacon-ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--neon-lime);
  border-radius: 50%;
  animation: beaconPulse 2s infinite ease-out;
}

@keyframes beaconPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.status-lbl {
  color: #7b8e7b;
}

.status-state {
  color: var(--neon-lime-bright);
  text-shadow: 0 0 8px var(--neon-lime-glow);
}

.footer-divider-pipe {
  width: 1px;
  height: 20px;
  background: rgba(163, 230, 53, 0.25);
}

.segment-army {
  font-family: var(--font-chakra);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-white);
}

.segment-army:hover, .segment-portal:hover {
  color: var(--neon-lime-bright);
  text-shadow: 0 0 10px var(--neon-lime-glow);
}

.paper-plane-svg {
  width: 18px;
  height: 18px;
  color: var(--neon-lime-bright);
  filter: drop-shadow(0 0 6px var(--neon-lime-glow));
}

.segment-portal {
  font-family: var(--font-chakra);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #94a3b8;
}

.segment-kogwa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-mini-panther {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kogwa-logo-footer {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(44deg) brightness(1.05);
  transition: filter 0.25s ease, transform 0.2s ease;
  opacity: 0.85;
}

.segment-kogwa:hover .kogwa-logo-footer {
  filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(44deg) brightness(1.2);
  transform: scale(1.1);
  opacity: 1;
}

.kogwa-sig {
  font-family: var(--font-orbitron);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #cbd5e1;
}

/* ==========================================================================
   MODAL WINDOWS & INTERACTIVE OVERLAYS
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 2, 0.84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-window {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, rgba(12, 28, 14, 0.96) 0%, rgba(6, 14, 7, 0.98) 100%);
  border: 1px solid rgba(163, 230, 53, 0.5);
  clip-path: var(--hud-clip-lg);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(163, 230, 53, 0.25), inset 0 0 20px rgba(163, 230, 53, 0.08);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.modal-backdrop.open .modal-window {
  transform: translateY(0) scale(1);
}

.modal-window.modal-lg {
  max-width: 760px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(163, 230, 53, 0.25);
  background: rgba(163, 230, 53, 0.04);
}

.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.modal-cyber-icon {
  color: var(--neon-lime-bright);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 6px var(--neon-lime-glow));
}

.modal-title {
  font-family: var(--font-orbitron);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #f8fafc;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  color: var(--neon-lime-bright);
}

.modal-body {
  padding: 1.5rem;
}

/* Swap Card UI */
.swap-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.swap-input-box {
  background: rgba(4, 10, 4, 0.8);
  border: 1px solid rgba(163, 230, 53, 0.25);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.swap-box-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-chakra);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #8fa38d;
  margin-bottom: 0.5rem;
}

.balance-tag b {
  color: var(--neon-lime-bright);
}

.swap-box-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.swap-amount-field {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--font-orbitron);
  font-size: 1.4rem;
  font-weight: 700;
  outline: none;
  width: 100%;
}

.token-selector {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(163, 230, 53, 0.15);
  border: 1px solid rgba(163, 230, 53, 0.4);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-orbitron);
  font-weight: 700;
  color: var(--neon-lime-bright);
}

.token-selector.doom-token {
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.3), rgba(101, 163, 13, 0.3));
  border-color: var(--neon-lime-bright);
  box-shadow: 0 0 10px rgba(163, 230, 53, 0.3);
}

.swap-divider-icon {
  display: flex;
  justify-content: center;
  margin: -4px 0;
  position: relative;
  z-index: 3;
}

.swap-arrow-circle {
  width: 32px;
  height: 32px;
  background: #0d210e;
  border: 1px solid var(--neon-lime-bright);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-lime-bright);
  font-size: 1.1rem;
  box-shadow: 0 0 10px rgba(163, 230, 53, 0.3);
}

.swap-metrics {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
}

.metric-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-chakra);
  font-size: 0.78rem;
  color: #94a3b8;
  padding: 0.25rem 0;
}

.glow-text-green {
  color: var(--neon-lime-bright);
  font-weight: 600;
}

.btn-full {
  width: 100%;
}

/* Video Player Modal Content */
.youtube-iframe-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border: 1px solid rgba(163, 230, 53, 0.4);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), inset 0 0 15px rgba(163, 230, 53, 0.1);
}

.youtube-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(163, 230, 53, 0.3);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.mock-cinema-screen {
  position: absolute;
  inset: 0;
  background: url('assets/hero-bg.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}

.cinema-glitch-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(2,6,2,0.9) 100%);
}

.cinema-content {
  position: relative;
  z-index: 2;
}

.cinema-badge {
  display: inline-block;
  background: rgba(163, 230, 53, 0.2);
  border: 1px solid var(--neon-lime);
  color: var(--neon-lime-bright);
  font-family: var(--font-chakra);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 2px 8px;
  border-radius: 2px;
  margin-bottom: 0.5rem;
}

.cinema-headline {
  font-family: var(--font-orbitron);
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.cinema-sub {
  font-size: 0.9rem;
  color: #cbd5e1;
  margin-bottom: 1.2rem;
}

.cinema-controls-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.6rem 1rem;
  border-radius: 4px;
  border: 1px solid rgba(163, 230, 53, 0.3);
}

.play-pulse-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  min-width: 36px;
  min-height: 36px;
}

.play-pulse-btn:hover {
  transform: scale(1.15);
}

.cinema-progress {
  flex-grow: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.cinema-progress-fill {
  width: 32%;
  height: 100%;
  background: var(--neon-lime-bright);
  box-shadow: 0 0 8px var(--neon-lime-bright);
  animation: progressAdvance 30s linear infinite;
}

@keyframes progressAdvance {
  from { width: 0%; }
  to { width: 100%; }
}

.cinema-timer {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #94a3b8;
}

/* City Sectors Grid */
.city-sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.sector-card {
  background: rgba(6, 16, 7, 0.85);
  border: 1px solid rgba(163, 230, 53, 0.25);
  padding: 1.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sector-card:hover, .sector-card.active {
  border-color: var(--neon-lime-bright);
  background: rgba(14, 32, 16, 0.95);
  box-shadow: 0 0 15px rgba(163, 230, 53, 0.2);
  transform: translateY(-2px);
}

.sector-badge {
  font-family: var(--font-chakra);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--neon-lime);
  margin-bottom: 0.4rem;
}

.sector-card h4 {
  font-family: var(--font-orbitron);
  font-size: 1.05rem;
  color: #f1f5f9;
  margin-bottom: 0.5rem;
}

.sector-card p {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.sector-status {
  display: block;
  font-family: var(--font-chakra);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--neon-lime-bright);
}

/* Channels List */
.channels-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.channel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 16, 7, 0.85);
  border: 1px solid rgba(163, 230, 53, 0.3);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  text-decoration: none;
  color: #f8fafc;
  transition: all 0.2s ease;
  min-height: 52px;
}

.channel-link:hover {
  background: rgba(16, 36, 18, 0.95);
  border-color: var(--neon-lime-bright);
  transform: translateX(4px);
  box-shadow: 0 0 15px rgba(163, 230, 53, 0.25);
}

.channel-name {
  display: block;
  font-family: var(--font-orbitron);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--neon-lime-bright);
}

.channel-desc {
  display: block;
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

.channel-action {
  font-family: var(--font-chakra);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-white);
}

/* Toast Notifications */
.cyber-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: rgba(8, 20, 9, 0.95);
  border: 1px solid var(--neon-lime-bright);
  padding: 0.85rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  clip-path: var(--hud-clip-sm);
  box-shadow: 0 0 25px rgba(163, 230, 53, 0.4);
  font-family: var(--font-chakra);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffffff;
  z-index: 2000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.cyber-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-indicator {
  color: var(--neon-lime-bright);
  font-size: 0.9rem;
  filter: drop-shadow(0 0 6px var(--neon-lime-bright));
}

/* ==========================================================================
   ADVANCED RESPONSIVE MEDIA QUERIES (DESKTOP & MOBILE FIRST)
   ========================================================================== */

/* Large Displays (4K / Ultrawide / 1440p) */
@media (min-width: 1600px) {
  .site-container {
    max-width: 1720px;
    padding: 2.2rem 3.5rem 1.5rem;
  }
  .metallic-title {
    font-size: 5.6rem;
  }
  .lore-p {
    font-size: 1.15rem;
  }
  .access-panel {
    width: 320px;
  }
}

/* Standard Laptops & Compact Desktops (1024px - 1280px) */
@media (max-width: 1280px) {
  .site-container {
    padding: 1.25rem 2rem 1rem;
  }
  .nav-list {
    gap: 2.5rem;
  }
  .hero-stage {
    gap: 1.5rem;
  }
  .access-panel {
    width: 270px;
    padding: 1.2rem;
  }
}

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
  .hero-stage {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin: 1.2rem 0 2rem;
  }

  .hero-narrative {
    max-width: 100%;
  }

  .hero-access-sidebar {
    justify-content: flex-start;
  }

  .access-panel {
    width: 100%;
    max-width: 380px;
  }

  .hud-inner-container {
    gap: 1rem;
  }
}

/* Mobile Screens (Under 768px) */
@media (max-width: 768px) {
  .site-container {
    padding: 1rem 1rem 0.85rem;
  }

  /* Header & Navigation Drawer */
  .hud-header {
    padding-bottom: 0.75rem;
  }

  .brand-panel {
    padding: 0.4rem 0.9rem 0.4rem 0.65rem;
  }

  .brand-title {
    font-size: 1.2rem;
  }

  .brand-subtitle {
    font-size: 0.55rem;
  }

  .brand-logo-icon {
    width: 30px;
    height: 30px;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .hud-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(6, 16, 7, 0.98);
    border-left: 1px solid var(--neon-lime);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.9);
    padding: 5.5rem 2rem 2rem;
    z-index: 100;
    transform: none;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hud-nav.open {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .nav-link {
    font-size: 1.15rem;
  }

  .hud-quick-controls {
    top: auto;
    bottom: 5.5rem;
    right: 1rem;
  }

  /* Hero Section Typography */
  .metallic-title {
    font-size: clamp(2.6rem, 11vw, 3.8rem);
  }

  .metallic-subtitle {
    font-size: 0.85rem;
    letter-spacing: 0.25em;
  }

  .lore-p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .actions-group {
    max-width: 100%;
  }

  .secondary-btn-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .access-panel {
    max-width: 100%;
  }

  /* Markets Ticker on Mobile */
  .hud-outer-frame {
    padding: 0.6rem 1rem;
  }

  .hud-inner-container {
    justify-content: flex-start;
    gap: 1.25rem;
  }

  /* Footer on Mobile */
  .hud-footer {
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    text-align: center;
  }

  .footer-divider-pipe {
    display: none;
  }

  /* Modal Responsive */
  .modal-backdrop {
    padding: 1rem;
  }

  .modal-window {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Small Smartphone Optimization (Under 400px) */
@media (max-width: 400px) {
  .metallic-title {
    font-size: 2.3rem;
  }
  .btn-primary-doom {
    font-size: 0.95rem;
    padding: 0.85rem 1.2rem;
  }
  .btn-secondary-cyber {
    font-size: 0.75rem;
  }
}

/* =========================================================
   KOGWA CHROME MARK
   Shape is the original logo, untouched. Colour and finish only.
   ========================================================= */

.kogwa-mark{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.28))
    drop-shadow(0 0 7px rgba(163,230,53,.42))
    drop-shadow(0 3px 7px rgba(0,0,0,.75));
  transition: filter .3s ease, transform .3s ease;
}

.brand-panel:hover .kogwa-mark,
.segment-kogwa:hover .kogwa-mark{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.4))
    drop-shadow(0 0 14px rgba(190,242,100,.75))
    drop-shadow(0 3px 8px rgba(0,0,0,.8));
  transform: translateY(-1px);
}

/* the eye is a cutout in the silhouette, lit from behind */
.kogwa-mark .glow-eye{
  animation: kogwa-eye-pulse 3.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes kogwa-eye-pulse{
  0%,100%{ opacity: 1 }
  50%    { opacity: .5 }
}

.brand-logo-icon,
.footer-mini-panther{ overflow: visible; }

@media (prefers-reduced-motion: reduce){
  .kogwa-mark .glow-eye{ animation: none }
}

/* =========================================================
   PASS 2 — spacing, hierarchy, separation
   Appended so every change here is reversible as one block.
   ========================================================= */

/* --- 1. breathing room: narrow the hero overlap ---------
   Grid was 1.15fr / 0.85fr with the hero art centred at 54%,
   so the copy ran straight into him. Scoped to desktop so it
   cannot override the single-column mobile stack. -------- */
@media (min-width: 1025px){
  .hero-stage{
    grid-template-columns: 1.22fr 0.78fr;
    gap: 2.75rem;
  }
  .hero-narrative{
    max-width: 545px;
    padding-right: 1.25rem;
  }
}
.sprite-doom{ left: 59%; }
.hero-rim-glow{ left: 59%; }

/* --- 2 + 3. hierarchy: live metrics forward, lore back ---
   Live values read brighter and heavier. Lore fields sit
   back in mono at lower contrast so nobody reads them as a
   broken feed. --------------------------------------- */

.market-col.col-stat .stat-value{
  color: #f4fbe8;
  font-size: 1.02rem;
  text-shadow: 0 0 10px rgba(190,242,100,.18);
}

#stat-doom-price .stat-value{
  font-size: 1.16rem;
  color: #ffffff;
  letter-spacing: .04em;
  text-shadow: 0 0 14px rgba(190,242,100,.35);
}
#stat-doom-price .stat-tag{ color: var(--neon-lime-bright); opacity: .95; }

/* lore stats — deliberately a different species of number */
.stat-lore .stat-tag{
  color: #63775f;
  font-style: italic;
  letter-spacing: .22em;
  opacity: .8;
}
.stat-lore .stat-value{
  font-family: var(--font-mono, "Share Tech Mono", monospace);
  font-size: .88rem;
  font-weight: 400;
  color: #6f8a68;
  letter-spacing: .16em;
  text-shadow: none;
  opacity: .78;
}
.stat-lore .stat-tag::after{
  content: " ◆";
  font-size: .6em;
  vertical-align: .18em;
  opacity: .6;
}

/* --- 4. X card: quieter than the hero ------------------- */
.access-panel{
  border-color: rgba(163, 230, 53, 0.28);
  box-shadow:
    0 0 26px rgba(0,0,0,.85),
    0 0 10px rgba(163,230,53,.10),
    inset 0 0 18px rgba(163,230,53,.035);
  background: linear-gradient(180deg, rgba(8,20,9,.82) 0%, rgba(4,12,5,.90) 100%);
}
.access-panel .corner-bracket{ opacity: .62; }
.x-glowing-svg{ filter: saturate(.9) brightness(.94); }

/* --- 5. separate the hero from the army -----------------
   A dark bloom sits behind his silhouette only. The art is
   untouched; this just kills the tonal merge at the edges. */
.layer-hero::before{
  content: "";
  position: absolute;
  left: 59%;
  bottom: -2%;
  transform: translateX(-50%);
  width: 640px;
  height: 78vh;
  max-height: 900px;
  background:
    radial-gradient(46% 44% at 50% 42%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, transparent 74%),
    radial-gradient(60% 56% at 50% 60%, rgba(2,8,3,.62) 0%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
}
.sprite-doom{
  filter:
    contrast(1.1) brightness(1.03)
    drop-shadow(0 0 2px rgba(0,0,0,.95))
    drop-shadow(0 0 26px rgba(0,0,0,.9))
    drop-shadow(0 20px 40px rgba(0,0,0,.98))
    drop-shadow(0 0 18px rgba(163,230,53,.26));
}

/* --- 6. tighten the bottom bar -------------------------- */
.hud-footer{ padding: 0.55rem 1.5rem; }
.hud-footer .footer-segment{ padding-block: 0; }
.footer-mini-panther{ width: 26px; height: 26px; }
.hud-footer .footer-divider-pipe{ height: 18px; }

@media (max-width: 1024px){
  .hero-narrative{ padding-right: 0; }
}

/* =========================================================
   PASS 3 — army framing, logo weight, nav
   ========================================================= */

/* --- army: show the whole formation ---------------------
   armydepth.png is portrait (1122x1402). Sizing it by WIDTH
   made it 1710px tall in a 900px viewport, so only the front
   rank's torsos were ever on screen — which is what made it
   look like copies of the hero. Height-based sizing puts the
   full mass, the back ranks and the banners in frame.    */
.sprite-army{
  width: auto;
  min-width: 0;
  max-width: none;
  height: 63vh;
  min-height: 380px;
  max-height: 660px;
  left: 47%;
  bottom: 17%;
  filter: contrast(.98) brightness(.88) saturate(.9) blur(.45px);
  opacity: 1;
}

/* --- top-left logo: bring the brightness down ----------- */
.brand-logo-icon .kogwa-mark{
  filter:
    brightness(.86) saturate(.94)
    drop-shadow(0 1px 0 rgba(255,255,255,.16))
    drop-shadow(0 0 5px rgba(163,230,53,.26))
    drop-shadow(0 2px 6px rgba(0,0,0,.75));
}
.brand-panel:hover .kogwa-mark{
  filter:
    brightness(1) saturate(1)
    drop-shadow(0 1px 0 rgba(255,255,255,.3))
    drop-shadow(0 0 11px rgba(190,242,100,.6))
    drop-shadow(0 2px 7px rgba(0,0,0,.8));
}

/* --- nav: single centred item -------------------------- */
.hud-nav{ flex: 1; display: flex; justify-content: center; }
.nav-list{ justify-content: center; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-main{
  position: relative;
  z-index: 3;
  max-width: 780px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
}

.about-title{
  font-family: var(--font-cinzel-dec, "Cinzel Decorative", serif);
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 900;
  letter-spacing: .04em;
  margin: 0 0 .4rem;
  background: linear-gradient(178deg,#f6ffe4 6%,#cdeb9c 30%,#7fa348 52%,#3f5a22 60%,#cfe6a6 82%,#f4fbe8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(163,230,53,.26)) drop-shadow(0 2px 0 rgba(0,0,0,.6));
}

.about-rule{
  width: 120px; height: 1px; margin: 1.6rem auto 2.4rem;
  background: linear-gradient(90deg,transparent,rgba(163,230,53,.75),transparent);
}

.about-body p{
  font-family: var(--font-rajdhani, "Rajdhani", sans-serif);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.9;
  color: #b9c8b2;
  margin: 0 0 1.35rem;
}

/* the short declarative lines carry the rhythm — let them breathe */
.about-body p.beat{
  color: #d7e6cd;
  letter-spacing: .04em;
  margin-bottom: .35rem;
}
.about-body p.beat + p.beat{ margin-top: 0; }
.about-body .gap{ height: 1.3rem; }

.about-body .lift{
  color: var(--neon-lime-bright, #bef264);
  font-weight: 600;
  letter-spacing: .05em;
}

.about-close{
  margin-top: 3rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(163,230,53,.16);
}
.about-close p{
  font-family: var(--font-orbitron, "Orbitron", sans-serif);
  font-size: clamp(.92rem, 1.5vw, 1.16rem);
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.9;
  color: #eaf7dc;
  margin: 0;
  text-shadow: 0 0 18px rgba(163,230,53,.3);
}
.about-close p span{ color: var(--neon-lime-bright, #bef264); }

.about-actions{
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center; margin-top: 2.6rem;
}

@media (max-width: 720px){
  .about-main{ padding: 2.2rem 1.1rem 3rem; }
  .about-body p{ line-height: 1.8; }
}

/* --- about page: the copy is the subject, not the art ---
   Same world behind it, pushed right back so the lore reads. */
.page-about .layer-hero,
.page-about .layer-lightning{ display: none; }

.page-about .layer-army{ opacity: .30; }
.page-about .layer-castle{ opacity: .45; }
.page-about .sprite-wallpaper{ filter: contrast(.9) brightness(.34) saturate(.5); }
.page-about .sprite-terrain{ filter: brightness(.4) saturate(.55); }
.page-about .sprite-skybolt{ opacity: .3; }
.page-about .green-atmosphere-glow{ opacity: .35; }

.page-about .world-scene::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(62% 52% at 50% 42%, rgba(3,7,4,.90) 0%, rgba(3,7,4,.74) 55%, rgba(3,7,4,.60) 100%),
    linear-gradient(180deg, rgba(3,7,4,.72) 0%, rgba(3,7,4,.55) 40%, rgba(3,7,4,.86) 100%);
}

/* =========================================================
   INCOMING TRANSMISSION — one-shot voice line
   ========================================================= */

.hud-quick-controls{
  position: fixed;
  top: 1.15rem;
  right: 1.5rem;
  z-index: 60;
}

.transmission-btn{
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .95rem .5rem .6rem;
  background: linear-gradient(180deg, rgba(9,20,10,.9), rgba(4,12,5,.94));
  border: 1px solid rgba(163,230,53,.3);
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  color: #cfe0c4;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0,0,0,.7), inset 0 0 14px rgba(163,230,53,.05);
  transition: border-color .25s, box-shadow .25s, transform .18s;
}
.transmission-btn:hover{
  border-color: rgba(163,230,53,.62);
  box-shadow: 0 0 26px rgba(163,230,53,.22), inset 0 0 16px rgba(163,230,53,.08);
  transform: translateY(-1px);
}

/* the little pulse that says "there is something here" */
.tx-ping{
  position: absolute;
  top: -4px; right: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neon-lime-bright, #bef264);
  box-shadow: 0 0 10px var(--neon-lime-bright, #bef264);
}
.tx-ping::after{
  content: "";
  position: absolute; inset: -5px;
  border: 1px solid var(--neon-lime-bright, #bef264);
  border-radius: 50%;
  animation: tx-ping 2.3s ease-out infinite;
}
@keyframes tx-ping{
  0%  { transform: scale(.5); opacity: .9 }
  70% { transform: scale(2.2); opacity: 0 }
  100%{ transform: scale(2.2); opacity: 0 }
}
.transmission-btn.is-played .tx-ping{ display: none; }

.tx-icon{
  display: grid; place-items: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid rgba(163,230,53,.35);
  background: rgba(163,230,53,.1);
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.tx-icon svg{ width: 14px; height: 14px; fill: var(--neon-lime, #a3e635); }
.tx-stop{ display: none; }
.transmission-btn.is-playing .tx-play{ display: none; }
.transmission-btn.is-playing .tx-stop{ display: block; }

.tx-text{ display: block; text-align: left; }

.tx-label{
  display: block;
  font-family: var(--font-chakra, "Chakra Petch", sans-serif);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .19em;
  color: #93a88d;
  white-space: nowrap;
  transition: color .25s;
}
.transmission-btn:hover .tx-label,
.transmission-btn.is-playing .tx-label{ color: var(--neon-lime-bright, #bef264); }

/* Bars are the real peaks of the clip, so the shape you see is the
   shape you hear. They fill left to right as it plays. */
.tx-wave{
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
  margin-top: 3px;
  --progress: 0;
}
.tx-wave i{
  width: 2px;
  height: calc(var(--h) * 100%);
  min-height: 2px;
  background: #43563d;
  transition: background .12s linear, transform .12s linear;
}
.transmission-btn.is-playing .tx-wave i{ transform-origin: bottom; }
.tx-wave i.lit{
  background: var(--neon-lime, #a3e635);
  box-shadow: 0 0 5px rgba(163,230,53,.75);
}
.tx-wave i.now{
  background: #f2ffd0;
  box-shadow: 0 0 8px rgba(190,242,100,.95);
  transform: scaleY(1.25);
}

/* the page leans in while it speaks */
body.tx-live .layer-hero .sprite-doom{
  filter:
    contrast(1.14) brightness(1.1)
    drop-shadow(0 0 2px rgba(0,0,0,.95))
    drop-shadow(0 0 30px rgba(0,0,0,.9))
    drop-shadow(0 20px 40px rgba(0,0,0,.98))
    drop-shadow(0 0 34px rgba(163,230,53,.6));
  transition: filter .5s ease;
}
body.tx-live .green-atmosphere-glow{ opacity: .85; transition: opacity .6s ease; }

@media (max-width: 720px){
  .hud-quick-controls{ top: auto; bottom: 1rem; right: 1rem; }
  .tx-label{ font-size: .56rem; letter-spacing: .14em; }
  .tx-wave{ height: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .tx-ping::after{ animation: none }
  .tx-wave i{ transition: none }
}

/* =========================================================
   MOBILE FIX — fixed-position containment
   ---------------------------------------------------------
   .site-container carries `contain: layout style`, which makes
   it the containing block for every position:fixed descendant.
   That is why the mobile nav drawer (right:-100%) never left
   the screen and the transmission button floated mid-page.
   ========================================================= */

.site-container{ contain: none; }

/* desktop centring must not leak into the mobile drawer */
@media (min-width: 769px){
  .hud-nav{ flex: 1; display: flex; justify-content: center; }
}

@media (max-width: 768px){
  .hud-nav{
    flex: none;
    left: auto;
    right: 0;
    /* transform beats offset percentages regardless of containing block */
    transform: translateX(106%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .hud-nav.open{ right: 0; transform: translateX(0); }

  .nav-list{ flex-direction: column; align-items: flex-start; gap: 1.5rem; }

  .hud-quick-controls{ bottom: 1rem; right: 1rem; top: auto; }
}


/* nothing may scroll sideways - a fixed off-canvas drawer can
   otherwise extend the document's scroll width on mobile */
body{ overflow-x: hidden; max-width: 100%; }

/* =========================================================
   TITLE GRADIENT FIX
   ---------------------------------------------------------
   The h1 box was pinned to the narrative column (525px) while
   font-size: clamp(...5.5vw...) let the glyphs grow to 601px
   on wide screens. The gradient paints across the BOX, so the
   overflowing letters landed on the far end of the ramp - and
   that end was #1e293b, near-black. Hence "DAY" vanishing at
   fullscreen but not in a smaller window.

   Three parts: map the gradient to the glyphs rather than the
   column, stop the ramp bottoming out into the background,
   and let the column grow on large monitors.
   ========================================================= */

.metallic-title{
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;

  /* background-IMAGE, never the `background` shorthand: the shorthand
     resets background-clip to border-box and the text fill turns into
     a solid painted rectangle. */
  background-image: linear-gradient(
    135deg,
    #ffffff 0%,
    #eaf0f7 18%,
    #a8b6c6 38%,
    #dbe4ee 54%,
    #8c9cae 74%,
    #6d7f94 100%      /* was #1e293b - it matched the page background */
  );
  background-size: 220% auto;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* let the headline column breathe on big monitors */
@media (min-width: 1200px){
  .hero-narrative{ max-width: 640px; }
}
@media (min-width: 1700px){
  .hero-narrative{ max-width: 660px; }
}
@media (min-width: 2200px){
  .hero-narrative{ max-width: 720px; }
}

/* =========================================================
   MOBILE PERFORMANCE
   ---------------------------------------------------------
   Measured at 4 FPS on a throttled phone profile before this
   block, with 496ms worst frame. Three causes:

   1. `will-change: transform` on all seven .layer elements.
      At 3x DPR that is seven compositor layers of roughly
      390x844x3 each - hundreds of MB of GPU memory, which is
      what makes a real handset stall and then drop the tab.
   2. backdrop-filter on thirteen elements; each one forces a
      readback of what is behind it, every frame.
   3. The parallax rAF loop writing transforms every frame for
      a pointer that does not exist on touch (now gated in JS).

   Desktop is untouched - everything here is inside the query.
   ========================================================= */

@media (max-width: 900px){

  /* 1. stop promoting every layer to its own GPU surface */
  .layer,
  .world-scene,
  .cursor-glow,
  .hero-stage{
    will-change: auto;
    transform: none;
    transition: none;
  }

  /* the scene is static on mobile, so it can paint once and rest */
  .world-scene{ contain: paint; }

  /* 2. backdrop-filter is the single most expensive thing here.
     Solid backgrounds read the same at this size. */
  .hud-header,
  .access-panel,
  .hud-footer,
  .transmission-btn,
  .hud-nav,
  .markets-hud-bar .hud-outer-frame{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hud-header{ background: rgba(4,9,4,.94); }
  .access-panel{ background: linear-gradient(180deg, rgba(8,20,9,.96), rgba(4,12,5,.97)); }
  .hud-footer{ background: rgba(5,12,5,.95); }
  .transmission-btn{ background: linear-gradient(180deg, rgba(9,20,10,.96), rgba(4,12,5,.97)); }

  /* 3. ambient animation on large elements - not worth the battery */
  .sprite-skybolt,
  .layer-fog-haze,
  .green-atmosphere-glow,
  .scanlines{ animation: none; }

  .scanlines{ display: none; }
  .cursor-glow{ display: none; }

  /* keep the small, cheap signals: the ping, the eye, the ECG line */

  /* safer than overflow-x:hidden on html - `clip` does not create a
     scroll container, which is what breaks position:sticky on iOS */
  html, body{ overflow-x: clip; }
}

/* ---------------------------------------------------------
   MOBILE: filters
   Bisecting the frame cost showed animations + filters were
   the whole problem (6fps -> 50 with animations off -> 61
   with filters off). blur() and stacked drop-shadow() are the
   expensive ones; brightness/contrast/saturate are nearly
   free, so the graded look survives.
   --------------------------------------------------------- */

@media (max-width: 900px){

  /* four stacked drop-shadows -> one. Still separates him from
     the army, costs a fraction to composite. */
  .sprite-doom{
    filter: contrast(1.1) brightness(1.04) drop-shadow(0 10px 22px rgba(0,0,0,.95));
  }

  /* 34px and 45px blurs over ~600x900 areas, one of them animated */
  .layer-hero::before{ display: none; }
  .hero-rim-glow{
    animation: none;
    filter: none;
    background: radial-gradient(ellipse at 50% 45%,
      rgba(163,230,53,.16) 0%, rgba(163,230,53,.05)45%, transparent 72%);
  }

  /* keep the colour grading, drop the blur and shadows */
  .sprite-army{    filter: contrast(.98) brightness(.88) saturate(.9); }
  .sprite-castle{  filter: contrast(.62) brightness(.72) saturate(.42); }
  .sprite-terrain{ filter: contrast(1.06) brightness(.93); }
  .sprite-skybolt{ filter: none; }

  /* the shimmer re-rendered three drop-shadows every frame */
  .metallic-title{
    animation: none;
    background-position: 12% 50%;
    filter: drop-shadow(0 2px 2px #0f172a) drop-shadow(0 6px 14px rgba(0,0,0,.9));
  }

  /* an SVG feGaussianBlur being re-rendered by two spinning rings */
  .x-glowing-svg{ filter: none; }
  .x-glowing-svg path{ filter: none !important; }
  .spin-ring, .spin-ring-rev{ animation: none; }
  .x-hologram-wrap{
    filter: drop-shadow(0 0 14px rgba(163,230,53,.35));
  }

  .kogwa-mark{
    filter: drop-shadow(0 0 5px rgba(163,230,53,.3));
  }
  .brand-logo-icon .kogwa-mark{
    filter: brightness(.9) drop-shadow(0 0 4px rgba(163,230,53,.26));
  }

  .sprite-lightning-bolt{ filter: brightness(1.9); }
  .btn-primary-doom{ animation: none; }
}

/* ---------------------------------------------------------
   MOBILE: legibility scrim
   On a narrow screen the copy sits directly over the figure.
   A soft gradient behind the text block lifts it clear without
   dimming the artwork elsewhere. Cheap - one painted gradient,
   no blur, no filter.
   --------------------------------------------------------- */
@media (max-width: 900px){
  .hero-narrative{ position: relative; z-index: 2; }
  .hero-narrative::before{
    content: "";
    position: absolute;
    inset: -1.5rem -1.25rem -0.5rem;
    z-index: -1;
    background: linear-gradient(180deg,
      rgba(4,9,5,.92) 0%,
      rgba(4,9,5,.86) 45%,
      rgba(4,9,5,.72) 78%,
      rgba(4,9,5,0) 100%);
    pointer-events: none;
  }
  .lore-box .lore-p{ color: #cfdcc6; }
}