:root {
  --bg: #02040a;
  --panel: rgba(8, 11, 18, 0.82);
  --panel-strong: rgba(7, 10, 16, 0.92);
  --panel-edge: rgba(141, 246, 255, 0.18);
  --text: #f5f8ff;
  --muted: rgba(228, 236, 255, 0.74);
  --cyan: #8ef6ff;
  --cyan-soft: rgba(142, 246, 255, 0.18);
  --orange: #ff9b3d;
  --orange-soft: rgba(255, 155, 61, 0.18);
  --purple: #8f4dff;
  --red: #ff5868;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% 18%, rgba(122, 96, 255, 0.08), transparent 18%),
    radial-gradient(circle at 80% 22%, rgba(94, 175, 255, 0.08), transparent 18%),
    linear-gradient(180deg, #000000 0%, #010208 52%, #02040a 100%);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

body.pageLoaded {
  touch-action: pan-y;
}

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

.siteShell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
}

.pagePreloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(122, 96, 255, 0.14), transparent 26%),
    radial-gradient(circle at 50% 65%, rgba(94, 175, 255, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(2, 4, 10, 0.98), rgba(3, 6, 14, 0.98));
  opacity: 1;
  visibility: visible;
  transition: opacity 360ms ease, visibility 360ms ease;
}

body.pageLoaded .pagePreloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.pageLoading .siteHeader,
body.pageLoading .page {
  opacity: 0;
}

body.pageLoaded .siteHeader,
body.pageLoaded .page {
  opacity: 1;
  transition: opacity 240ms ease;
}

.pagePreloaderCard {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 24px 28px;
  border-radius: 24px;
  border: 1px solid rgba(142, 246, 255, 0.16);
  background: rgba(6, 10, 18, 0.82);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.pagePreloaderSpinner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(142, 246, 255, 0.18);
  border-top-color: rgba(142, 246, 255, 0.95);
  animation: pagePreloaderSpin 0.9s linear infinite;
}

.pagePreloaderLabel {
  font: 800 14px 'Oxanium', sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cyan);
}

.pagePreloaderSub {
  color: rgba(243, 248, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

@keyframes pagePreloaderSpin {
  to { transform: rotate(360deg); }
}

.siteStageCanvas,
.stars,
.skyGlow {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.siteStageCanvas {
  z-index: -4;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
}

.stars {
  z-index: -3;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0 0.9px, transparent 1.2px),
    radial-gradient(circle, rgba(255,255,255,0.72) 0 0.7px, transparent 1.05px),
    radial-gradient(circle, rgba(167, 227, 255, 0.48) 0 0.8px, transparent 1.1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.42) 0 0.55px, transparent 0.95px);
  background-size: 86px 86px, 128px 128px, 172px 172px, 240px 240px;
  background-position: 0 0, 23px 49px, 64px 12px, 112px 88px;
  opacity: 0.22;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.2));
}

.skyGlow {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 16%, rgba(117, 241, 255, 0.06), transparent 24%),
    radial-gradient(circle at 20% 72%, rgba(143, 77, 255, 0.06), transparent 22%);
}

.homeSun {
  position: fixed;
  right: clamp(-42px, -3vw, -12px);
  bottom: clamp(-44px, -3.5vw, -14px);
  width: clamp(190px, 24vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 250, 224, 1) 0 12%, rgba(255, 233, 151, 1) 24%, rgba(255, 197, 82, 0.98) 46%, rgba(255, 141, 39, 0.95) 68%, rgba(255, 141, 39, 0) 100%);
  box-shadow:
    0 0 36px rgba(255, 208, 110, 0.55),
    0 0 110px rgba(255, 174, 57, 0.28),
    0 0 180px rgba(255, 130, 24, 0.18);
  filter: saturate(1.1);
  opacity: 0.96;
  z-index: -1;
  pointer-events: none;
  animation: homeSunPulse 6s ease-in-out infinite;
}

.homeSun::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 207, 111, 0.24), rgba(255, 161, 47, 0) 68%);
  filter: blur(14px);
}

@keyframes homeSunPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.saturn {
  position: absolute;
  top: 135px;
  right: -70px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(242, 229, 196, 0.98), rgba(219, 196, 151, 0.94) 38%, rgba(166, 136, 101, 0.92) 62%, rgba(62, 45, 39, 0.95) 100%);
  box-shadow: 0 0 120px rgba(255, 235, 188, 0.08);
  opacity: 0.94;
}

.saturn::before {
  content: "";
  position: absolute;
  inset: 132px -110px;
  border-radius: 50%;
  border: 22px solid rgba(238, 229, 201, 0.18);
  border-left-color: rgba(250, 234, 193, 0.34);
  border-right-color: rgba(179, 207, 255, 0.26);
  transform: rotate(-16deg);
  filter: blur(0.2px);
}

.asteroid {
  position: absolute;
  clip-path: polygon(50% 0%, 78% 10%, 100% 36%, 92% 72%, 66% 100%, 30% 94%, 8% 66%, 0% 34%, 18% 8%);
  background:
    radial-gradient(circle at 32% 26%, rgba(182, 154, 128, 0.96), rgba(123, 100, 78, 0.92) 44%, rgba(62, 49, 37, 0.95) 100%);
  box-shadow: inset -18px -18px 36px rgba(0,0,0,0.34), 0 18px 38px rgba(0,0,0,0.3);
  opacity: 0.84;
}

.asteroid.a1 { top: 210px; left: 7%; width: 126px; height: 110px; transform: rotate(-18deg); }
.asteroid.a2 { top: 358px; right: 16%; width: 96px; height: 88px; transform: rotate(18deg); }
.asteroid.a3 { top: 660px; left: -20px; width: 220px; height: 190px; transform: rotate(12deg); opacity: 0.52; }
.asteroid.a4 { top: 950px; right: 5%; width: 156px; height: 138px; transform: rotate(-24deg); opacity: 0.62; }

.roadGlow {
  position: absolute;
  left: 50%;
  top: 490px;
  width: min(94vw, 1220px);
  height: 500px;
  transform: translateX(-50%);
  clip-path: polygon(44% 0%, 56% 0%, 73% 100%, 27% 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(67,208,255,0.05)),
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 9.6%,
      rgba(255,255,255,0.82) 10.1%,
      rgba(255,255,255,0) 10.7%,
      rgba(255,255,255,0) 48.9%,
      rgba(255,255,255,0.96) 49.55%,
      rgba(255,255,255,0.96) 50.45%,
      rgba(255,255,255,0) 51.1%,
      rgba(255,255,255,0) 89.3%,
      rgba(255,255,255,0.82) 89.9%,
      rgba(255,255,255,0) 90.4%,
      rgba(255,255,255,0) 100%
    );
  opacity: 0.95;
  filter: drop-shadow(0 0 24px rgba(67,208,255,0.16));
}

.roadGlow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(67,208,255,0.28) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.12) 0 2px, rgba(255,255,255,0) 2px 20px);
  opacity: 0.78;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 0 calc(56px + env(safe-area-inset-bottom));
}

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 16px 22px 0;
}

.headerInner {
  width: min(1440px, calc(100vw - 24px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(3, 6, 11, 0.84);
  box-shadow: 0 20px 50px rgba(0,0,0,0.32);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brandMarkWrap {
  display: flex;
  align-items: center;
}

.brandMark {
  font: 800 clamp(20px, 2.2vw, 28px) 'Oxanium', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.brandVersion {
  font-size: 0.44em;
  letter-spacing: 1px;
  opacity: 0.72;
  vertical-align: super;
}

.brandSub {
  font: 700 11px 'Space Grotesk', sans-serif;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.navLinks {
  display: flex;
  flex-wrap: nowrap;
  gap: 26px;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
}

.navLinks a,
.navDropdownToggle {
  font: 700 12px 'Oxanium', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(243,248,255,0.76);
}

.navLinks a.active,
.navLinks a:hover,
.navDropdownToggle:hover { color: var(--orange); }

.navPrimaryLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.navDropdown {
  position: relative;
}

.navDropdownToggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 44px;
  cursor: pointer;
  font-family: 'Oxanium', sans-serif;
}

.navDropdownMenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 180px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5, 10, 16, 0.94);
  box-shadow: 0 24px 60px rgba(0,0,0,0.34);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 40;
}

.navDropdown:hover .navDropdownMenu,
.navDropdown:focus-within .navDropdownMenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.navDropdownMenu a {
  font-size: 11px;
  letter-spacing: 1.1px;
  color: rgba(243,248,255,0.72);
}

.navActions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.navBurgerButton {
  display: none;
  margin-left: auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(142, 246, 255, 0.3);
  background: rgba(5, 10, 16, 0.46);
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(142, 246, 255, 0.08);
}

.navBurgerButton span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(142, 246, 255, 0.25);
}

.mobileNavBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 4, 9, 0.52);
  backdrop-filter: blur(6px);
  z-index: 110;
}

.mobileNavPanel {
  position: fixed;
  left: 12px;
  right: 12px;
  top: 86px;
  z-index: 115;
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(142, 246, 255, 0.22);
  background: rgba(4, 8, 14, 0.96);
  box-shadow: 0 28px 70px rgba(0,0,0,0.44);
  max-height: calc(100vh - 104px);
  overflow: auto;
}

.mobileNavBackdrop[hidden],
.mobileNavPanel[hidden] {
  display: none !important;
}

.mobileNavLink,
.mobileNavSubLink,
.mobileNavGroup span {
  font: 700 12px 'Oxanium', sans-serif;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.mobileNavLink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: rgba(243,248,255,0.9);
}

.mobileNavSubLink {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 6px 0 16px;
  color: rgba(243,248,255,0.74);
}

.mobileNavGroup {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobileNavGroup span {
  padding: 0 6px 4px;
  color: var(--orange);
}

.mobileNavActions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.mobileNavAction {
  width: 100%;
}

body.nav-open {
  overflow: hidden;
}

body.nav-open .mobileNavBackdrop,
body.nav-open .mobileNavPanel {
  display: grid;
}

.btn,
.btnGhost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 20px;
  font: 800 13px 'Oxanium', sans-serif;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn {
  color: #11151d;
  background: linear-gradient(135deg, #ffc16b, var(--orange));
  box-shadow: 0 0 26px var(--orange-soft);
}

.btnGhost {
  color: var(--cyan);
  border: 1px solid rgba(142, 246, 255, 0.42);
  background: rgba(5, 10, 16, 0.42);
}

.btn:hover,
.btnGhost:hover { transform: translateY(-1px); }

.heroSection {
  padding: 20px 22px 0;
}

.heroCard {
  position: relative;
  width: min(1440px, calc(100vw - 24px));
  margin: 0 auto;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(162, 190, 255, 0.18);
  background: rgba(5, 7, 14, 0.72);
  box-shadow: 0 40px 110px rgba(0,0,0,0.52), inset 0 0 40px rgba(162,190,255,0.04);
  backdrop-filter: blur(10px);
}

.heroCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 58% 18%, rgba(111, 241, 255, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(143,77,255,0.08), transparent 30%, rgba(255,88,104,0.08) 84%);
  pointer-events: none;
}

.heroCard::after {
  display: none;
}

.heroSlider {
  position: relative;
  min-height: min(66vh, 720px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(5, 8, 16, 0.24), rgba(3, 5, 10, 0.74));
}

.heroBody {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 26px;
  align-items: start;
  padding: 30px 28px 34px;
}

.heroCopy {
  padding: 6px 10px 10px;
}

.heroWordmark {
  margin-bottom: 18px;
}

.heroWordmarkFrame {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 28px 18px;
  border-radius: 20px;
  border: 1px solid rgba(128, 202, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(8,12,22,0.96), rgba(4,7,14,0.96)),
    linear-gradient(135deg, rgba(143,77,255,0.14), rgba(255,88,104,0.1));
  box-shadow:
    0 0 0 2px rgba(90, 154, 255, 0.12) inset,
    0 0 36px rgba(90, 154, 255, 0.16);
  clip-path: polygon(7% 0, 93% 0, 100% 24%, 96% 100%, 50% 92%, 4% 100%, 0 24%);
}

.heroWordmarkFrame span {
  display: block;
  font: 800 clamp(28px, 4.6vw, 56px)/0.92 'Oxanium', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #eef7ff;
  text-shadow:
    0 0 14px rgba(142,246,255,0.2),
    0 0 30px rgba(122, 170, 255, 0.16);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(142,246,255,0.24);
  background: rgba(7, 12, 18, 0.56);
  color: #b9f8ff;
  font: 700 11px 'Oxanium', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.heroCopy h1 {
  margin: 22px 0 16px;
  font: 800 clamp(48px, 7vw, 94px)/0.94 'Oxanium', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  max-width: 740px;
}

.heroCopy p {
  max-width: 600px;
  color: var(--muted);
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.7;
}

.ctaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.heroInlineNotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.heroNoteCard {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.heroNoteCard strong {
  display: block;
  margin-bottom: 8px;
  font: 800 14px 'Oxanium', sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #dff8ff;
}

.heroNoteCard span {
  display: block;
  color: rgba(243,248,255,0.72);
  font-size: 14px;
  line-height: 1.6;
}

.heroStatsPanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.statRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 0;
}

.stat {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.stat strong {
  display: block;
  margin-bottom: 6px;
  font: 800 clamp(18px, 2vw, 26px) 'Oxanium', sans-serif;
  color: var(--cyan);
}

.stat span { color: rgba(243,248,255,0.72); font-size: 13px; }

.stageCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.heroScene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(104, 228, 255, 0.22), transparent 18%),
    radial-gradient(circle at 18% 28%, rgba(92, 111, 255, 0.18), transparent 18%),
    radial-gradient(circle at 84% 34%, rgba(255, 88, 104, 0.16), transparent 18%),
    linear-gradient(180deg, #060912 0%, #080815 45%, #050811 100%);
}

.sceneNebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 44% 30%, rgba(138, 93, 255, 0.42), transparent 18%),
    radial-gradient(circle at 60% 24%, rgba(255, 164, 109, 0.22), transparent 20%),
    radial-gradient(circle at 32% 48%, rgba(74, 154, 255, 0.24), transparent 22%),
    radial-gradient(circle at 76% 50%, rgba(255, 98, 98, 0.2), transparent 16%);
  filter: blur(8px);
}

.scenePlanet,
.sceneRing,
.sceneDrone,
.sceneLogoPlate,
.sceneLaser {
  position: absolute;
}

.scenePlanetBack {
  top: 34px;
  left: -38px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, rgba(175, 210, 255, 0.96), rgba(63, 92, 155, 0.88) 56%, rgba(14, 24, 52, 0.94) 100%);
  opacity: 0.9;
}

.scenePlanetMain {
  top: 14px;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(249, 236, 209, 0.98), rgba(217, 191, 158, 0.92) 42%, rgba(113, 87, 88, 0.94) 74%, rgba(37, 27, 40, 0.98) 100%);
}

.sceneRing {
  top: 58px;
  left: 50%;
  width: 420px;
  height: 140px;
  transform: translateX(-50%) rotate(-10deg);
  border-radius: 50%;
  border: 18px solid rgba(216, 227, 255, 0.16);
  border-left-color: rgba(223, 176, 255, 0.22);
  border-right-color: rgba(149, 191, 255, 0.22);
}

.sceneDrone {
  filter: drop-shadow(0 0 18px rgba(0,0,0,0.35));
}

.sceneDrone span {
  position: absolute;
  inset: 0;
  display: block;
}

.sceneDroneBuster {
  top: 140px;
  left: 96px;
  width: 132px;
  height: 148px;
}

.sceneDroneBuster::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 45px;
  width: 42px;
  height: 92px;
  border-radius: 22px;
  background: linear-gradient(180deg, #1f2532, #080b10);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.06);
}

.sceneDroneBuster::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 108px;
  height: 44px;
  border-radius: 999px;
  border: 10px solid #0d1016;
  transform: rotate(20deg);
}

.sceneDroneBuster span {
  background:
    linear-gradient(#12151c, #12151c) 38px 108px / 16px 34px no-repeat,
    linear-gradient(#12151c, #12151c) 78px 108px / 16px 34px no-repeat,
    linear-gradient(#12151c, #12151c) 50px 116px / 8px 26px no-repeat,
    linear-gradient(#12151c, #12151c) 74px 116px / 8px 26px no-repeat,
    radial-gradient(circle at 62px 70px, #59b7ff 0 8px, transparent 9px);
}

.sceneDroneHunter {
  top: 108px;
  left: 50%;
  width: 250px;
  height: 180px;
  transform: translateX(-50%);
}

.sceneDroneHunter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  width: 70px;
  height: 92px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #7d61d8, #31184f);
  clip-path: polygon(50% 0, 90% 18%, 100% 54%, 68% 100%, 32% 100%, 0 54%, 10% 18%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.06);
}

.sceneDroneHunter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 98px;
  width: 18px;
  height: 56px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #6241c0, #24113d);
}

.sceneDroneHunter span {
  background:
    linear-gradient(135deg, #8f4dff, #3d204d) 20px 44px / 78px 26px no-repeat,
    linear-gradient(225deg, #8f4dff, #3d204d) 152px 44px / 78px 26px no-repeat,
    linear-gradient(180deg, #5520a6, #2a133f) 56px 8px / 26px 52px no-repeat,
    linear-gradient(180deg, #5520a6, #2a133f) 168px 8px / 26px 52px no-repeat,
    linear-gradient(180deg, #5520a6, #2a133f) 92px 122px / 20px 58px no-repeat,
    linear-gradient(180deg, #5520a6, #2a133f) 138px 122px / 20px 58px no-repeat,
    radial-gradient(circle at 125px 86px, #ff5e97 0 11px, transparent 12px);
}

.sceneDroneMobo {
  top: 126px;
  right: 64px;
  width: 170px;
  height: 170px;
}

.sceneDroneMobo::before,
.sceneDroneMobo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #2a2f3b, #0a0d12 60%, #000 100%);
}

.sceneDroneMobo::before {
  top: 8px;
  left: 48px;
  width: 78px;
  height: 78px;
}

.sceneDroneMobo::after {
  top: 70px;
  left: 28px;
  width: 112px;
  height: 92px;
}

.sceneDroneMobo span {
  background:
    linear-gradient(180deg, #11151b, #030406) 18px 124px / 16px 34px no-repeat,
    linear-gradient(180deg, #11151b, #030406) 136px 124px / 16px 34px no-repeat,
    linear-gradient(180deg, #11151b, #030406) 56px 132px / 12px 28px no-repeat,
    linear-gradient(180deg, #11151b, #030406) 100px 132px / 12px 28px no-repeat,
    radial-gradient(circle at 88px 48px, #ff633e 0 8px, transparent 9px),
    radial-gradient(circle at 84px 112px, #ff573d 0 7px, transparent 8px);
}

.sceneLaser {
  top: 246px;
  left: 50%;
  width: 190px;
  height: 8px;
  transform-origin: left center;
  border-radius: 999px;
}

.sceneLaserBlue {
  background: linear-gradient(90deg, rgba(85, 199, 255, 0.04), rgba(94, 210, 255, 1));
  box-shadow: 0 0 18px rgba(94,210,255,0.75);
  transform: translateX(-100%) rotate(-24deg);
}

.sceneLaserRed {
  background: linear-gradient(90deg, rgba(255, 98, 70, 1), rgba(255,98,70,0.04));
  box-shadow: 0 0 18px rgba(255,98,70,0.75);
  transform: rotate(24deg);
}

.sceneLogoPlate {
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  padding: 20px 34px 18px;
  border-radius: 20px;
  border: 1px solid rgba(118, 193, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(7,10,18,0.97), rgba(4,7,14,0.97)),
    linear-gradient(135deg, rgba(120, 171, 255, 0.2), rgba(126,255,247,0.1));
  box-shadow:
    0 0 0 2px rgba(102, 175, 255, 0.14) inset,
    0 0 30px rgba(102,175,255,0.18);
  clip-path: polygon(6% 0, 94% 0, 100% 24%, 96% 100%, 50% 90%, 4% 100%, 0 24%);
}

.sceneLogoPlate span {
  display: block;
  text-align: center;
  color: #eef8ff;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(112, 215, 255, 0.22);
  font: 800 clamp(30px, 4.2vw, 56px)/0.92 'Oxanium', sans-serif;
  letter-spacing: 2px;
}

.heroMediaOverlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(126, 243, 255, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(5,7,12,0.08), rgba(5,7,12,0.28) 45%, rgba(5,7,12,0.78) 100%);
}

.heroMediaCard {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  max-width: 560px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(7, 10, 16, 0.84);
  border: 1px solid rgba(142,246,255,0.12);
  box-shadow: 0 18px 38px rgba(0,0,0,0.3);
}

.heroMediaCard strong {
  display: block;
  margin-bottom: 6px;
  color: var(--cyan);
  font: 800 14px 'Oxanium', sans-serif;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.heroMediaCard p {
  margin: 0;
  color: rgba(255,255,255,0.74);
  font-size: 14px;
  line-height: 1.5;
}

.heroStatsCaption {
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(142, 246, 255, 0.12);
  background: rgba(8, 11, 18, 0.76);
  box-shadow: 0 18px 38px rgba(0,0,0,0.22);
}

.heroStatsCaption strong {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font: 800 13px 'Oxanium', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.heroStatsCaption p {
  margin: 0;
  color: rgba(243,248,255,0.76);
  font-size: 14px;
  line-height: 1.6;
}

.section {
  width: 100%;
  margin-top: 34px;
  padding: 0 22px;
}

.sectionPanel {
  position: relative;
  width: min(1440px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 30px;
  border-radius: 30px;
  background: rgba(8, 11, 18, 0.56);
  border: 1px solid var(--panel-edge);
  box-shadow: 0 20px 60px rgba(0,0,0,0.32);
  overflow: hidden;
}

.sectionPanel::before {
  display: none;
}

.sectionHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}

.sectionHead span {
  display: block;
  color: var(--orange);
  font: 700 11px 'Oxanium', sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sectionHead h2 {
  margin: 0;
  font: 800 clamp(28px, 4vw, 50px)/1.02 'Oxanium', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sectionHead p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  line-height: 1.68;
}

.aboutSectionHead {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.aboutSectionHead p {
  max-width: 860px;
}

.featuresGrid,
.droneGrid,
.roadmapGrid {
  display: grid;
  gap: 18px;
}

.featuresGrid,
.droneGrid,
.roadmapGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panelCard {
  position: relative;
  padding: 22px;
  border-radius: 22px;
  background: rgba(8, 12, 20, 0.34);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.panelCard strong {
  display: block;
  margin-bottom: 10px;
  font: 800 18px 'Oxanium', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.panelCard p,
.panelCard li {
  color: var(--muted);
  line-height: 1.64;
}

.panelCard ul {
  margin: 0;
  padding-left: 18px;
}

.droneCard::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  opacity: 0.22;
  filter: blur(8px);
}
.droneCard.buster::before { background: #35c9ff; }
.droneCard.hunter::before { background: #8f4dff; }
.droneCard.mobo::before { background: #ff485e; }

.droneLabel {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font: 800 11px 'Oxanium', sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.droneCard.buster .droneLabel { background: rgba(53, 201, 255, 0.12); color: #70dfff; }
.droneCard.hunter .droneLabel { background: rgba(143, 77, 255, 0.14); color: #b798ff; }
.droneCard.mobo .droneLabel { background: rgba(255, 72, 94, 0.14); color: #ff9aa7; }

.mediaStrip {
  display: grid;
  grid-template-columns: 1.24fr 0.76fr;
  gap: 18px;
  align-items: stretch;
}

.gameplayPreview {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 390px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #02050b;
}

.worldPanel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 60% 34%, rgba(124, 231, 255, 0.16), transparent 20%),
    linear-gradient(180deg, #050812 0%, #070a14 100%);
}

.worldStars,
.worldSaturn,
.worldRoad,
.worldDataStrip,
.worldRock {
  position: absolute;
}

.worldStars {
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.92) 0 1px, transparent 1.8px),
    radial-gradient(circle at 38% 30%, rgba(255,255,255,0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,0.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 44%, rgba(255,255,255,0.66) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 72%, rgba(255,255,255,0.76) 0 1px, transparent 1.8px);
}

.worldSaturn {
  top: 34px;
  right: 48px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(241,228,196,0.98), rgba(209,190,151,0.94) 40%, rgba(111,89,78,0.94) 72%, rgba(46,34,39,0.98) 100%);
}

.worldSaturn::before {
  content: "";
  position: absolute;
  inset: 54px -56px;
  border-radius: 50%;
  border: 14px solid rgba(229,221,197,0.18);
  border-left-color: rgba(245, 232, 201, 0.28);
  border-right-color: rgba(162, 199, 255, 0.22);
  transform: rotate(-14deg);
}

.worldRoad {
  left: 50%;
  bottom: -10px;
  width: 130%;
  height: 70%;
  transform: translateX(-50%);
  clip-path: polygon(45% 0, 55% 0, 75% 100%, 25% 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(67,208,255,0.04)),
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 10.3%,
      rgba(255,255,255,0.8) 10.9%,
      rgba(255,255,255,0) 11.5%,
      rgba(255,255,255,0) 49.15%,
      rgba(255,255,255,0.94) 49.75%,
      rgba(255,255,255,0.94) 50.25%,
      rgba(255,255,255,0) 50.85%,
      rgba(255,255,255,0) 88.5%,
      rgba(255,255,255,0.8) 89.1%,
      rgba(255,255,255,0) 89.7%,
      rgba(255,255,255,0) 100%
    );
  filter: drop-shadow(0 0 14px rgba(67,208,255,0.14));
}

.worldDataStrip {
  left: 50%;
  top: 94px;
  width: 64%;
  height: 46px;
  transform: translateX(-50%) perspective(600px) rotateX(68deg);
  background:
    repeating-linear-gradient(90deg, rgba(106,255,255,0.4) 0 2px, rgba(106,255,255,0) 2px 14px),
    linear-gradient(180deg, rgba(106,255,255,0.26), rgba(106,255,255,0.02));
  opacity: 0.58;
}

.worldRock {
  clip-path: polygon(50% 0%, 78% 10%, 100% 36%, 92% 72%, 66% 100%, 30% 94%, 8% 66%, 0% 34%, 18% 8%);
  background: radial-gradient(circle at 32% 26%, rgba(182,154,128,0.95), rgba(123,100,78,0.92) 44%, rgba(62,49,37,0.95) 100%);
  box-shadow: inset -16px -16px 30px rgba(0,0,0,0.34);
}

.worldRock1 { left: 34px; top: 60px; width: 80px; height: 72px; transform: rotate(-18deg); }
.worldRock2 { right: 26px; bottom: 64px; width: 92px; height: 82px; transform: rotate(12deg); }
.worldRock3 { left: 8px; bottom: 10px; width: 150px; height: 126px; transform: rotate(8deg); opacity: 0.68; }

.gameplayPreview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.58));
}

.ctaBand {
  width: min(1440px, calc(100vw - 24px));
  margin: 34px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,155,61,0.12), rgba(142,246,255,0.1));
  border: 1px solid rgba(255,255,255,0.1);
}

.ctaBand h3 {
  margin: 0 0 6px;
  font: 800 clamp(24px, 3vw, 40px) 'Oxanium', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ctaBand p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.footer {
  width: min(1440px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 24px 0 10px;
  text-align: center;
  color: rgba(255,255,255,0.54);
  font-size: 13px;
}

.footer a { color: var(--cyan); }

.footerCreditsBtn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

@media (max-width: 1200px) {
  .heroBody,
  .mediaStrip,
  .featuresGrid,
  .droneGrid,
  .roadmapGrid {
    grid-template-columns: 1fr;
  }
  .heroSlider { min-height: 460px; }
  .heroInlineNotes { grid-template-columns: 1fr; }
  .sectionHead { align-items: flex-start; flex-direction: column; }
  .roadGlow { top: 560px; height: 360px; }
}

@media (max-width: 1100px) {
  .navLinks,
  .navActions {
    display: none;
  }

  .navBurgerButton {
    display: inline-flex;
  }

  .headerInner {
    align-items: center;
  }

  .heroLandingCard .heroSlider {
    min-height: 500px;
  }

  .heroSelectionShell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: auto;
    padding: 16px;
  }

  .heroCopyLanding {
    max-width: none;
    padding: 0;
  }

  .heroStagePanel {
    width: 100%;
    min-height: 300px;
    height: 300px;
  }
}

@media (max-width: 920px) {
  .heroSlider { min-height: 420px; }
  .heroInlineNotes { grid-template-columns: 1fr; }
  .sectionHead { align-items: flex-start; flex-direction: column; }
  .roadGlow { top: 560px; height: 360px; }
}

@media (max-width: 760px) {
  .page {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .siteHeader,
  .heroSection,
  .section { padding-left: 10px; padding-right: 10px; }
  .headerInner,
  .heroCard,
  .sectionPanel,
  .ctaBand,
  .footer { width: min(100vw - 12px, 100%); }
  .heroBody { padding: 18px 16px 20px; }
  .brandMark { font-size: clamp(18px, 6vw, 24px); letter-spacing: 2px; }
  .heroWordmarkFrame { padding: 18px 20px 16px; }
  .heroWordmarkFrame span { font-size: clamp(24px, 8vw, 40px); }
  .heroCopy h1 { font-size: clamp(34px, 12vw, 58px); }
  .heroSlider { min-height: auto; }
  .sectionPanel { padding: 22px 16px; }
  .statRow { grid-template-columns: 1fr; }
  .ctaBand { flex-direction: column; align-items: flex-start; }
  .saturn { width: 220px; height: 220px; right: -70px; top: 200px; }
  .homeSun {
    width: clamp(150px, 40vw, 250px);
    right: -28px;
    bottom: -28px;
  }
  .heroLandingCard .heroSlider,
  .heroSelectionShell {
    min-height: clamp(980px, 190vw, 1320px);
  }

  .heroSelectionShell {
    gap: 14px;
    padding: 10px 14px 22px;
  }
  .heroCopyLanding {
    padding: 0;
  }
  .heroCopyLanding h1 {
    max-width: none;
    font-size: clamp(30px, 10.5vw, 48px);
  }
  .heroLaunchRow {
    margin-top: 12px;
  }
  .heroStagePanel {
    min-height: 520px;
    height: 520px;
  }
  .roadGlow { width: 120vw; top: 620px; height: 280px; }
  .asteroid.a3,
  .asteroid.a4 { display: none; }
}

.heroLandingCard {
  overflow: visible;
}

.heroLandingCard .heroSlider {
  min-height: min(66vh, 720px);
  border-bottom: 0;
  border-radius: 34px;
  overflow: hidden;
}

.heroSelectionShell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 0.88fr) minmax(360px, 1.12fr);
  gap: 28px;
  align-items: stretch;
  min-height: min(66vh, 720px);
  padding: 30px;
}

.heroCopyLanding {
  max-width: 660px;
  padding: 26px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.heroCopyLanding h1 {
  max-width: 660px;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: 0.4px;
  text-transform: none;
}

.heroLaunchRow {
  margin-top: 30px;
}

.heroLaunchBtn,
#headerPlayNow {
  border-color: var(--hero-accent, var(--cyan));
}

.heroStagePanel {
  position: relative;
  min-height: 100%;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 50% 24%, rgba(122, 233, 255, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(5, 8, 16, 0.54), rgba(3, 5, 10, 0.82));
}

.heroStageOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 6, 11, 0.06), rgba(4, 6, 11, 0.02) 28%, rgba(4, 6, 11, 0.03) 100%),
    radial-gradient(circle at 70% 32%, rgba(126, 243, 255, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(5,7,12,0.01), rgba(5,7,12,0.14) 40%, rgba(5,7,12,0.38) 100%);
}

.heroStageMobileActions {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  width: calc(100% - 28px);
  gap: 10px;
}

.heroStageAction {
  width: 100%;
}

.characterWeapons {
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(243,248,255,0.84);
  line-height: 1.6;
}

.characterWeapons li + li {
  margin-top: 6px;
}

.mediaStripStory {
  align-items: stretch;
}

.storyCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.storyCard strong,
.aboutCard strong,
.leaderboardCard strong {
  display: block;
  margin-bottom: 10px;
  font: 800 20px 'Oxanium', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.storyCard ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(243,248,255,0.82);
  line-height: 1.7;
}

.storyCard li + li {
  margin-top: 8px;
}

.storyNote {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  line-height: 1.6;
}

.leaderboardGrid,
.aboutGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

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

.leaderboardCard {
  min-height: 220px;
}

.leaderboardCard.buster { border-color: rgba(111, 217, 255, 0.32); }
.leaderboardCard.hunter { border-color: rgba(159, 108, 255, 0.32); }
.leaderboardCard.mobo { border-color: rgba(255, 101, 118, 0.32); }

.leaderboardRank {
  margin-bottom: 12px;
  color: var(--hero-accent, var(--cyan));
  font: 800 32px 'Oxanium', sans-serif;
  letter-spacing: 1px;
}

.leaderboardHero {
  color: rgba(243,248,255,0.72);
  font: 800 11px 'Oxanium', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.leaderboardScore {
  margin: 14px 0 10px;
  font: 800 clamp(32px, 4vw, 46px)/0.96 'Oxanium', sans-serif;
  color: #fff;
}

.leaderboardCard p,
.aboutCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.aboutCard p + p {
  margin-top: 12px;
}

.leaderboardPlaceholder {
  grid-column: 1 / -1;
  min-height: 0;
}

.sectionActions {
  margin-top: 20px;
}

.aboutCard a {
  color: var(--cyan);
}

.aboutContactEmail {
  font: 700 18px/1.4 'Oxanium', sans-serif;
  letter-spacing: 0.6px;
}

body[data-active-hero='buster'] {
  --hero-accent: #6fd9ff;
  --hero-accent-soft: rgba(111, 217, 255, 0.18);
}

body[data-active-hero='hunter'] {
  --hero-accent: #9f6cff;
  --hero-accent-soft: rgba(159, 108, 255, 0.18);
}

body[data-active-hero='mobo'] {
  --hero-accent: #ff6576;
  --hero-accent-soft: rgba(255, 101, 118, 0.18);
}

@media (max-width: 1200px) {
  .leaderboardGrid,
  .aboutGrid {
    grid-template-columns: 1fr;
  }

  .heroSelectionShell {
    min-height: min(48vh, 460px);
    padding-top: 72px;
    padding-bottom: 70px;
  }
}

@media (max-width: 760px) {
  .heroSelectionShell {
    padding: 22px 16px 24px;
  }

  .heroByline {
    margin-top: 18px;
  }
}

.navActions {
  margin-left: auto;
  justify-content: flex-end;
}

.btnGhostButton {
  appearance: none;
  cursor: pointer;
  font-family: 'Oxanium', sans-serif;
}

.showcaseGrid,
.detailsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.characterGrid,
.enemyGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.showcaseCard,
.droneCard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.showcaseCanvas {
  width: 100%;
  height: 230px;
  display: block;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 30%, rgba(106, 214, 255, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(5, 10, 18, 0.96), rgba(7, 10, 16, 0.86));
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
}

.showcaseCanvasFrame {
  position: relative;
  width: 100%;
  height: 230px;
  margin-bottom: 16px;
  border-radius: 18px;
  overflow: hidden;
}

.showcaseCanvasFrame .showcaseCanvas {
  height: 100%;
  margin-bottom: 0;
  border-radius: 18px;
}

.assetLoading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(4, 8, 14, 0.72), rgba(4, 8, 14, 0.38));
  border: 1px solid rgba(142, 246, 255, 0.14);
  color: rgba(243, 248, 255, 0.88);
  font: 700 12px 'Oxanium', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 2;
}

.assetLoading[data-state='loaded'] {
  opacity: 0;
  transform: scale(0.985);
}

.assetLoading[data-state='error'] {
  border-color: rgba(255, 88, 104, 0.28);
  background: linear-gradient(180deg, rgba(32, 7, 11, 0.74), rgba(10, 6, 8, 0.4));
  color: #ffb1bb;
}

.assetLoadingSpinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(142, 246, 255, 0.22);
  border-top-color: rgba(142, 246, 255, 0.96);
  animation: assetLoadingSpin 0.9s linear infinite;
}

@keyframes assetLoadingSpin {
  to { transform: rotate(360deg); }
}

.detailCard strong,
.showcaseCard strong,
.droneCard strong {
  display: block;
  margin-bottom: 10px;
  font: 800 20px 'Oxanium', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.droneCardHead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.droneCardHead strong {
  margin: 0;
}

.droneNameBlue {
  color: #8de7ff;
  text-shadow: 0 0 12px rgba(83, 214, 255, 0.18);
}

.droneNamePurple {
  color: #caa4ff;
  text-shadow: 0 0 12px rgba(143, 77, 255, 0.18);
}

.droneNameRed {
  color: #ffb0b9;
  text-shadow: 0 0 12px rgba(255, 72, 94, 0.18);
}

.detailCard p,
.showcaseCard p,
.droneCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.characterWeapons {
  margin: 22px 0 0;
  list-style: none;
  padding: 0;
}

.characterWeapons li {
  position: relative;
  padding-left: 16px;
}

.characterWeapons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(106,255,255,0.4);
}

.showcaseSubhead {
  margin-top: 24px;
  margin-bottom: 10px;
  font: 800 13px 'Oxanium', sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(230, 239, 255, 0.88);
}

.detailsGrid {
  margin-top: 18px;
}

.detailCard {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.enemyGrid {
  margin-top: 0;
}

.menuModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 12, 0.68);
  backdrop-filter: blur(10px);
  z-index: 120;
}

.menuModalCard {
  width: min(1000px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(142, 246, 255, 0.26);
  background: rgba(6, 12, 20, 0.96);
  box-shadow: 0 30px 70px rgba(0,0,0,0.44);
}

.menuModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.menuModalTitle {
  font: 800 clamp(24px, 3vw, 36px) 'Oxanium', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cyan);
}

.creditsModalCard {
  color: rgba(243,248,255,0.86);
}

.creditsIntro,
.creditsSection p,
.creditsList {
  color: rgba(243,248,255,0.78);
  line-height: 1.65;
}

.creditsSection {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.creditsSectionTitle {
  margin-bottom: 10px;
  color: var(--orange);
  font: 800 14px 'Oxanium', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.creditsQuote {
  margin-top: 0;
}

.creditsList {
  margin: 0;
  padding-left: 18px;
}

.creditsSection a {
  color: var(--cyan);
}

.supportModalCard {
  width: min(620px, calc(100vw - 32px));
  color: rgba(243,248,255,0.86);
}

.supportIntro {
  color: rgba(243,248,255,0.78);
  line-height: 1.65;
}

.supportPanel {
  margin-top: 18px;
  display: grid;
  gap: 16px;
  align-items: center;
  grid-template-columns: auto 1fr;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.paypalLogo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 48, 135, 0.16), rgba(0, 156, 222, 0.12));
  border: 1px solid rgba(0, 156, 222, 0.2);
  box-shadow: 0 0 20px rgba(0, 156, 222, 0.12);
}

.paypalLogoPrimary,
.paypalLogoSecondary {
  font: 800 28px/1 'Oxanium', sans-serif;
  letter-spacing: 0.5px;
}

.paypalLogoPrimary {
  color: #003087;
}

.paypalLogoSecondary {
  color: #009cde;
}

.supportCopy strong {
  display: block;
  margin-bottom: 8px;
  font: 800 18px 'Oxanium', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.supportCopy p {
  margin: 0;
  color: rgba(243,248,255,0.78);
}

.supportCopy a {
  color: var(--cyan);
}

@media (max-width: 1200px) {
  .showcaseGrid,
  .detailsGrid,
  .characterGrid,
  .enemyGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .heroSelectionShell {
    padding: 28px;
  }
}

@media (max-width: 760px) {
  .showcaseGrid,
  .detailsGrid,
  .characterGrid,
  .enemyGrid {
    grid-template-columns: 1fr;
  }

  .showcaseCanvas {
    height: 200px;
  }

  .showcaseCanvasFrame {
    height: 200px;
  }

  .menuModalCard {
    padding: 16px;
  }

  .heroLandingCard .heroSlider,
  .heroSelectionShell {
    min-height: 300px;
  }

  .heroSelectionShell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    padding: 0 14px 0;
  }

  .heroCopyLanding {
    padding: 0;
  }

  .heroCopyLanding h1 {
    max-width: none;
    font-size: clamp(28px, 9.8vw, 46px);
  }

  .heroLaunchRow {
    margin-top: 10px;
  }

  .heroStagePanel {
    width: 100%;
    min-height: 300px;
    height: 300px;
  }

  .heroLaunchRow {
    display: none;
  }

  .heroStageMobileActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .heroStageAction {
    padding-inline: 14px;
    min-height: 48px;
  }
}