/* ==========================================================================
   CODEXSEC LABS by CODEXSEC - OFFICIAL FRONTEND DESIGN SYSTEM
   Dedicated Portal for Core Labs, Target Sandboxes & Live Challenges
   1:1 Pixel & Animation Precision matching CyberWarFare Labs aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root,
[data-theme="light"] {
  /* 1. CLEAN LIGHT BASE THEME (Default) */
  --bg-primary: #fafafa;
  --bg-secondary: #f4f6f9;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-dark-surface: #070c18;

  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-light: #f8fafc;

  /* Brand Accents */
  --lime: #a3e635;
  --lime-glow: rgba(163, 230, 53, 0.45);
  --lime-dark: #65a30d;
  --blue-primary: #2563eb;
  --blue-dark: #1e3a8a;
  --blue-glow: rgba(37, 99, 235, 0.35);
  --cyan-accent: #06b6d4;
  --purple-accent: #9333ea;
  --rose-accent: #f43f5e;
  --amber-accent: #f59e0b;

  /* Signature Cyber Gradient Tokens */
  --gradient-navbar: linear-gradient(135deg, #0b2a45 0%, #070c18 60%, #000000 100%);
  --gradient-footer: linear-gradient(135deg, #070c18 0%, #0c1527 50%, #02050c 100%);
  --gradient-hero: linear-gradient(180deg, #1d4ed8 0%, #0f172a 100%);
  --gradient-learning-heading: linear-gradient(180deg, #2563eb 0%, #0f172a 100%);
  --gradient-subtitle: linear-gradient(90deg, #b91c1c 0%, #7c3aed 50%, #1d4ed8 100%);
  --gradient-btn-lime: linear-gradient(90deg, #a3e635 0%, #84cc16 100%);

  /* Borders & Shadows */
  --border-light: #e2e8f0;
  --border-subtle: #edf2f7;
  --border-card: rgba(226, 232, 240, 0.85);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 20px 35px -5px rgba(15, 23, 42, 0.12), 0 0 20px rgba(163, 230, 53, 0.15);
  --shadow-floating-nav: 0 20px 40px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.15);

  /* Fonts */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. CYBER WARFARE DARK THEME (Obsidian Command & Cyber Mint) */
[data-theme="dark"] {
  --bg-primary: #030712;
  --bg-secondary: #070e20;
  --bg-card: #0b152d;
  --bg-card-hover: #112044;
  --bg-dark-surface: #020409;
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-light: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-card: rgba(0, 245, 155, 0.2);
  --lime: #00f59b;
  --lime-glow: rgba(0, 245, 155, 0.45);
  --lime-dark: #00c77b;
  --blue-primary: #00d2ff;
  --shadow-card-hover: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 245, 155, 0.28);
  --gradient-navbar: linear-gradient(135deg, #0e1e3b 0%, #070e1c 60%, #020409 100%);
  --gradient-footer: linear-gradient(135deg, #030712 0%, #070e20 50%, #020409 100%);
  --gradient-learning-heading: linear-gradient(135deg, #ffffff 0%, #00d2ff 45%, #00f59b 100%);
}

/* 3. DEEP NEBULA THEME (Quantum Cyberspace: Indigo & Electric Cyan) */
[data-theme="nebula"] {
  --bg-primary: #040412;
  --bg-secondary: #090a26;
  --bg-card: #0e123b;
  --bg-card-hover: #161c56;
  --bg-dark-surface: #02020a;
  --text-primary: #ffffff;
  --text-secondary: #e0e7ff;
  --text-muted: #a5b4fc;
  --border-light: rgba(129, 140, 248, 0.28);
  --border-subtle: rgba(129, 140, 248, 0.14);
  --border-card: rgba(0, 240, 255, 0.25);
  --lime: #00f0ff;
  --lime-glow: rgba(0, 240, 255, 0.45);
  --lime-dark: #38bdf8;
  --blue-primary: #818cf8;
  --shadow-card-hover: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.3);
  --gradient-navbar: linear-gradient(135deg, #1b1747 0%, #0b0924 60%, #03020c 100%);
  --gradient-footer: linear-gradient(135deg, #040412 0%, #090a26 50%, #02020a 100%);
  --gradient-learning-heading: linear-gradient(135deg, #ffffff 0%, #00f0ff 45%, #c084fc 100%);
}

/* 4. BLOODHOUND CRIMSON THEME (Tactical Red Cell: Laser Ruby & Fire) */
[data-theme="crimson"] {
  --bg-primary: #070306;
  --bg-secondary: #120811;
  --bg-card: #1c0d1b;
  --bg-card-hover: #2a1428;
  --bg-dark-surface: #040103;
  --text-primary: #ffffff;
  --text-secondary: #f1f5f9;
  --text-muted: #fda4af;
  --border-light: rgba(244, 63, 94, 0.28);
  --border-subtle: rgba(244, 63, 94, 0.14);
  --border-card: rgba(255, 0, 85, 0.26);
  --lime: #ff0055;
  --lime-glow: rgba(255, 0, 85, 0.45);
  --lime-dark: #f43f5e;
  --blue-primary: #f59e0b;
  --shadow-card-hover: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 0, 85, 0.3);
  --gradient-navbar: linear-gradient(135deg, #2e0c16 0%, #15050b 60%, #050204 100%);
  --gradient-footer: linear-gradient(135deg, #070306 0%, #120811 50%, #040103 100%);
  --gradient-learning-heading: linear-gradient(135deg, #ffffff 0%, #ff0055 45%, #fb923c 100%);
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Background grid pattern */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(#e2e8f0 1.2px, transparent 1.2px);
  background-size: 32px 32px;
  background-position: 0 0;
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}

/* Layout Container */
.container,
.page-container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  z-index: 10;
}

/* Gradients */
.gradient-title {
  background: var(--gradient-learning-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.gradient-title-lime {
  background: linear-gradient(135deg, #65a30d 0%, #15803d 50%, #0f172a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.gradient-footer {
  background: var(--gradient-footer);
}

/* ==========================================================================
   TOP ANNOUNCEMENT BANNER
   ========================================================================== */
.top-banner {
  background: #070c18;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.55rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #e2e8f0;
  position: relative;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
}

.top-banner.hidden {
  display: none;
}

.banner-pill {
  background: rgba(163, 230, 53, 0.18);
  border: 1px solid rgba(163, 230, 53, 0.4);
  padding: 0.18rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--lime);
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}

.banner-btn-link {
  color: var(--lime);
  text-decoration: none;
  font-weight: 700;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s;
}

.banner-btn-link:hover {
  color: #bef264;
  text-decoration: underline;
}

.banner-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  margin-left: auto;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  padding: 0.2rem;
  transition: color 0.2s;
}

.banner-close-btn:hover {
  color: #ffffff;
}

/* ==========================================================================
   STICKY FLOATING PILL NAVBAR
   ========================================================================== */
.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1rem;
  z-index: 100;
  transition: all 0.3s ease;
}

.navbar-wrapper.with-banner {
  top: 38px;
}

.navbar-pill {
  width: min(98%, 1440px);
  max-width: 1440px;
  background: var(--gradient-navbar);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 0.3rem 0.65rem 0.3rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-floating-nav);
  backdrop-filter: blur(24px);
  position: relative;
  transition: all 0.3s ease;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.navbar-pill:hover {
  border-color: rgba(163, 230, 53, 0.35);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: #ffffff;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.nav-brand img,
footer img,
.cyber-footer img,
.portal-footer img,
.footer-logo img,
.footer-brand img,
.footer-brand-col img,
.brand-col img,
.brand-logo img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 8px rgba(0, 245, 155, 0.4));
}

.brand-title {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  white-space: nowrap !important;
}

.brand-title span.lime-part {
  color: var(--lime);
}

.brand-title span.sub-labs {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 0.2rem;
}

/* Nav Menu Items */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.nav-item {
  position: relative;
  flex-shrink: 0;
}

.nav-link {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.77rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.45rem;
  border-radius: 9999px;
  transition: var(--transition-smooth);
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.nav-link:hover,
.nav-item:hover .nav-link,
.nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-link.active-dot {
  color: var(--lime);
}

.nav-link .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  display: inline-block;
  animation: pulseDot 2s infinite;
}

.nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.nav-item:hover .nav-chevron {
  transform: rotate(180deg);
}

/* Mega Menu Dropdown */
.mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-40%) translateY(10px);
  background: #090e1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(163, 230, 53, 0.12);
  padding: 1.5rem;
  width: 720px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 120;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  backdrop-filter: blur(24px);
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-40%) translateY(0);
}

/* --------------------------------------------------------------------------
   Protocol Mega Menu Dropdown in Navbar
   -------------------------------------------------------------------------- */
.protocol-nav-item {
  position: relative;
}

.protocol-active-pill {
  color: var(--lime) !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.04em !important;
}

.protocol-mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #090e1a;
  border: 1px solid rgba(0, 245, 155, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 245, 155, 0.15);
  padding: 1.25rem;
  width: 520px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 120;
  backdrop-filter: blur(24px);
  text-align: left;
}

.nav-item:hover .protocol-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.proto-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #94a3b8;
}

.proto-head-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--lime);
  font-weight: 800;
  letter-spacing: 0.05em;
}

.proto-clearance-pill {
  padding: 0.18rem 0.5rem;
  border-radius: 9999px;
  background: rgba(0, 245, 155, 0.12);
  border: 1px solid var(--lime);
  color: var(--lime);
  font-weight: 800;
  font-size: 0.65rem;
}

.protocol-menu-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.proto-menu-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.95rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.proto-menu-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.proto-menu-card.active {
  background: rgba(0, 245, 155, 0.08);
  border-color: var(--lime);
  box-shadow: 0 0 20px rgba(0, 245, 155, 0.15);
}

.proto-card-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 900;
  color: #94a3b8;
  flex-shrink: 0;
}

.proto-menu-card.active .proto-card-badge {
  background: rgba(0, 245, 155, 0.15);
  border-color: var(--lime);
  color: var(--lime);
}

.proto-card-body {
  flex: 1;
}

.proto-card-name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.proto-card-name .active-tag {
  font-size: 0.62rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--lime);
  color: #030712;
  font-weight: 900;
}

.proto-card-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 0.15rem;
}

.proto-card-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  letter-spacing: 0.05em;
}

.proto-card-status.online {
  color: var(--lime);
  background: rgba(0, 245, 155, 0.12);
  border: 1px solid rgba(0, 245, 155, 0.3);
}

.proto-card-status.active {
  color: #030712;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
}

.proto-card-status.soon {
  color: #64748b;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mega-categories {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-right: 1rem;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.category-tab:hover,
.category-tab.active {
  background: rgba(163, 230, 53, 0.12);
  color: var(--lime);
}

.category-tab .tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tab-lime .tab-dot {
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}

.tab-red .tab-dot {
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
}

.tab-blue .tab-dot {
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
}

.tab-purple .tab-dot {
  background: #a855f7;
  box-shadow: 0 0 8px #a855f7;
}

.tab-cloud .tab-dot {
  background: #06b6d4;
  box-shadow: 0 0 8px #06b6d4;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.mega-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.mega-card:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(163, 230, 53, 0.35);
  transform: translateY(-2px);
}

.mega-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 0.6rem;
  background: rgba(15, 23, 42, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px;
}

.mega-card-info h4 {
  font-size: 0.82rem;
  color: #f1f5f9;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.mega-card-info p {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Nav Action Buttons */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.nav-actions .audio-toggle-btn {
  width: 28px;
  height: 28px;
}

/* 4-Theme Switcher Pill */
.theme-switcher-wrapper {
  position: relative;
  flex-shrink: 0;
}

.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  padding: 0.28rem 0.52rem;
  border-radius: 9999px;
  font-size: 0.71rem;
  font-weight: 700;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--lime);
  color: #ffffff;
}

.theme-toggle-btn svg {
  width: 13px;
  height: 13px;
}

.theme-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #090e1a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(163, 230, 53, 0.1);
  padding: 0.45rem;
  min-width: 195px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
  backdrop-filter: blur(24px);
}

.theme-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-opt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.6rem;
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.theme-opt:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.theme-opt.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 700;
}

.theme-opt-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dot-light {
  background: #f8fafc;
  border: 1.5px solid #64748b;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.dot-dark {
  background: #030712;
  border: 1.5px solid #00f59b;
  box-shadow: 0 0 8px rgba(0, 245, 155, 0.6);
}

.dot-nebula {
  background: #040412;
  border: 1.5px solid #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.dot-crimson {
  background: #070306;
  border: 1.5px solid #ff0055;
  box-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
}

.vpn-badge {
  background: rgba(163, 230, 53, 0.15);
  border: 1px solid rgba(163, 230, 53, 0.35);
  color: var(--lime);
  font-size: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0.28rem 0.52rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.vpn-badge:hover {
  background: rgba(163, 230, 53, 0.25);
  border-color: var(--lime);
}

.btn-signin {
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.28rem 0.48rem;
  border-radius: 9999px;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.btn-signin:hover {
  color: var(--lime);
}

.btn-cta-nav,
.nav-btn-primary {
  background: var(--lime);
  color: #030712;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.32rem 0.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 4px 14px rgba(163, 230, 53, 0.35);
  transition: var(--transition-smooth);
  white-space: nowrap !important;
  flex-shrink: 0;
  margin-right: 0.15rem;
}

.btn-cta-nav:hover,
.nav-btn-primary:hover {
  background: #bef264;
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(163, 230, 53, 0.55);
}

.nav-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.38rem 0.85rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-smooth);
  white-space: nowrap !important;
  flex-shrink: 0;
}

.nav-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.pulse-dot-lime {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  display: inline-block;
  animation: pulseDot 2s infinite;
  flex-shrink: 0;
}

.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--lime);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.3rem;
  flex-shrink: 0;
}

/* ==========================================================================
   MOBILE DRAWER (Off-Canvas Navigation Menu)
   ========================================================================== */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: #080d1a;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
}

.mobile-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.5rem;
}

.mobile-drawer-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem;
  transition: color 0.2s;
}

.mobile-drawer-close:hover {
  color: #ffffff;
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-nav-links li a {
  display: block;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  transition: all 0.2s;
}

.mobile-nav-links li a:hover,
.mobile-nav-links li a.active {
  background: rgba(163, 230, 53, 0.12);
  color: var(--lime);
  border: 1px solid rgba(163, 230, 53, 0.25);
}

@media (min-width: 1025px) {
  .mobile-drawer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1340px) and (min-width: 1025px) {
  .navbar-pill {
    padding: 0.28rem 0.55rem 0.28rem 0.75rem !important;
  }
  .nav-menu {
    gap: 0.15rem !important;
  }
  .nav-link {
    padding: 0.24rem 0.36rem !important;
    font-size: 0.74rem !important;
  }
  .nav-actions {
    gap: 0.25rem !important;
  }
}

@media (max-width: 1220px) and (min-width: 1025px) {
  .btn-signin {
    display: none !important;
  }
  .nav-link {
    padding: 0.2rem 0.3rem !important;
    font-size: 0.71rem !important;
  }
  .btn-cta-nav {
    padding: 0.28rem 0.65rem !important;
    font-size: 0.73rem !important;
  }
}

/* ==========================================================================
   HERO SECTION WITH CONCENTRIC RADAR ORBITS
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 8rem;
  padding-bottom: 5.5rem;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at center, #ffffff 0%, #fafafa 70%, #f1f5f9 100%);
}

.radar-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1350px;
  height: 1350px;
  pointer-events: none;
  z-index: 1;
}

.radar-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(203, 213, 225, 0.55);
}

.rc-1 {
  width: 440px;
  height: 440px;
}

.rc-2 {
  width: 720px;
  height: 720px;
}

.rc-3 {
  width: 920px;
  height: 920px;
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.45);
}

.rc-4 {
  width: 1080px;
  height: 1080px;
}

.rc-5 {
  width: 1320px;
  height: 1320px;
  border-color: rgba(226, 232, 240, 0.4);
}

/* Rotating Orbit Rings */
.radar-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.orbit-1 {
  width: 720px;
  height: 720px;
  margin-left: -360px;
  margin-top: -360px;
  animation: orbitSpinCW 50s linear infinite;
}

.orbit-2 {
  width: 1080px;
  height: 1080px;
  margin-left: -540px;
  margin-top: -540px;
  animation: orbitSpinCCW 70s linear infinite;
}

.radar-orbit:hover,
.radar-orbit:hover .orbit-inner {
  animation-play-state: paused;
}

/* Orbit Badge Nodes */
.orbit-badge {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.orbit-badge:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
  z-index: 15;
}

/* Inner Orbit 1 (Clockwise) Positions - 4 Cardinal Points */
.orbit-1 .b1 {
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-1 .b2 {
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
}

.orbit-1 .b3 {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-1 .b4 {
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
}

/* Outer Orbit 2 (Counter-Clockwise) Positions - 4 Diagonal Points (45-deg offset) */
.orbit-2 .b1 {
  top: 14.65%;
  left: 85.35%;
  transform: translate(-50%, -50%);
}

.orbit-2 .b2 {
  top: 85.35%;
  left: 85.35%;
  transform: translate(-50%, -50%);
}

.orbit-2 .b3 {
  top: 85.35%;
  left: 14.65%;
  transform: translate(-50%, -50%);
}

.orbit-2 .b4 {
  top: 14.65%;
  left: 14.65%;
  transform: translate(-50%, -50%);
}

/* Counter-Rotating Badge Inner Container - Keeps text and icons 100% upright */
.orbit-1 .orbit-inner {
  animation: orbitCounterCW 50s linear infinite;
}

.orbit-2 .orbit-inner {
  animation: orbitCounterCCW 70s linear infinite;
}

.orbit-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  color: #0f172a;
  transform-origin: center center;
  transition: all 0.25s ease;
}

.orbit-inner svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Domain Accent Colorings */
.ob-lime .orbit-inner {
  border-color: rgba(132, 204, 22, 0.45);
  color: #3f6212;
  box-shadow: 0 4px 15px rgba(132, 204, 22, 0.15);
}

.ob-lime .orbit-inner svg {
  stroke: #65a30d;
}

.ob-blue .orbit-inner {
  border-color: rgba(56, 189, 248, 0.45);
  color: #0369a1;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.15);
}

.ob-blue .orbit-inner svg {
  stroke: #0284c7;
}

.ob-purple .orbit-inner {
  border-color: rgba(168, 85, 247, 0.45);
  color: #7e22ce;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.15);
}

.ob-purple .orbit-inner svg {
  stroke: #9333ea;
}

.ob-red .orbit-inner {
  border-color: rgba(244, 63, 94, 0.45);
  color: #be123c;
  box-shadow: 0 4px 15px rgba(244, 63, 94, 0.15);
}

.ob-red .orbit-inner svg {
  stroke: #e11d48;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .radar-stage {
    transform: translate(-50%, -50%) scale(0.72);
  }
}

@media (max-width: 640px) {
  .radar-stage {
    transform: translate(-50%, -50%) scale(0.52);
  }
}

.center-radar-core {
  display: none !important;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 860px;
  margin: 0 auto;
}

.hero-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.hero-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hero-pill-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gradient-navbar);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  font-size: 0.65rem;
}

.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4.4rem);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 1.25rem;
}

.hero-title .brand-accent {
  color: var(--text-primary);
}

.hero-title .brand-accent span.lime {
  color: var(--lime);
}

.hero-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 2.25rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.btn-primary-hero {
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.85rem 2.2rem;
  border-radius: 9999px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
  transition: var(--transition-smooth);
}

.btn-primary-hero:hover {
  background: #1e293b;
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.35);
}

.btn-secondary-hero {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 2rem;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: var(--transition-smooth);
}

.btn-secondary-hero:hover {
  border-color: var(--lime-dark);
  color: var(--lime-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.hero-stats-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 1.25rem 2.5rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  max-width: 760px;
  margin: 0 auto;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: #e2e8f0;
}

.featured-labs-section,
.courses-section {
  padding: 6.5rem 0;
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
}

.section-header-center,
.courses-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   PAGE HERO FOR INNER PAGES (labs.html, challenges.html, etc.)
   ========================================================================== */
.page-hero {
  padding-top: 8rem;
  padding-bottom: 3.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.page-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.page-hero-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 680px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
}

/* Search & Filter Toolbar */
.toolbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.search-input-box {
  position: relative;
  flex: 1;
  min-width: 280px;
}

.search-input-box input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.75rem 1.25rem 0.75rem 2.85rem;
  font-size: 0.88rem;
  font-family: var(--font-sans);
  color: #0f172a;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.search-input-box input:focus {
  border-color: var(--lime-dark);
  box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.2);
}

.search-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.filter-tags-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-tag-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-tag-pill:hover,
.filter-tag-pill.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

/* ==========================================================================
   LABS CATALOG GRID (labs.html & Hub)
   ========================================================================== */
.labs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.lab-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.85rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  transition: var(--transition-smooth);
  overflow: hidden;
}

.lab-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lab-card:hover {
  transform: translateY(-6px);
  border-color: #cbd5e1;
  box-shadow: var(--shadow-card-hover);
}

.lab-card:hover::before {
  opacity: 1;
}

.lab-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.lab-os-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  font-family: var(--font-mono);
}

.difficulty-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.diff-easy {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #059669;
}

.diff-medium {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #d97706;
}

.diff-hard {
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: #e11d48;
}

.diff-insane {
  background: rgba(147, 51, 234, 0.1);
  border: 1px solid rgba(147, 51, 234, 0.3);
  color: #7e22ce;
}

.lab-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.lab-avatar-box {
  width: 52px;
  height: 52px;
  border-radius: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--lime);
  transition: all 0.25s ease;
}

[data-theme="dark"] .lab-avatar-box {
  background: rgba(0, 245, 155, 0.08);
  border-color: rgba(0, 245, 155, 0.25);
  color: var(--lime);
}

[data-theme="nebula"] .lab-avatar-box {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.25);
  color: #00f0ff;
}

[data-theme="crimson"] .lab-avatar-box {
  background: rgba(255, 0, 85, 0.08);
  border-color: rgba(255, 0, 85, 0.25);
  color: #ff0055;
}

.lab-title-group h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
}

.lab-ip-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.lab-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.lab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.lab-tag {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-weight: 600;
  transition: all 0.2s ease;
}

[data-theme="dark"] .lab-tag,
[data-theme="nebula"] .lab-tag,
[data-theme="crimson"] .lab-tag {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.lab-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

.lab-points-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.btn-launch-vm {
  background: #0f172a;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.55rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-smooth);
}

.btn-launch-vm:hover {
  background: var(--lime-dark);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(101, 163, 13, 0.4);
}

/* ==========================================================================
   CHALLENGES ARENA (challenges.html)
   ========================================================================== */
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
  margin-bottom: 4rem;
}

.chal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.15rem;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.chal-card:hover {
  transform: translateY(-5px);
  border-color: var(--lime);
  box-shadow: var(--shadow-card-hover);
}

.chal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.chal-cat-pill {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--blue-primary);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
}

.chal-pts {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.chal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.chal-card:hover .chal-title {
  color: var(--lime);
}

.chal-summary {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.chal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ==========================================================================
   LAB RUNNER BATTLE STATION (lab-view.html)
   ========================================================================== */
.lab-runner-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.lab-control-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.target-status-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.25rem;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.timer-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}

.ip-copy-box {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.ip-copy-box:hover {
  background: #1e293b;
}

.flag-submit-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.25rem;
}

.flag-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.6rem;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
  outline: none;
}

.flag-input:focus {
  border-color: var(--lime-dark);
}

.btn-submit-flag {
  width: 100%;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 0.6rem;
  padding: 0.65rem;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-submit-flag:hover {
  background: var(--lime-dark);
}

.lab-stage-container {
  background: #080d1a;
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.lab-stage-bar {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lab-runner-layout,
.runner-content-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2rem;
  padding: 2.5rem 0 5rem;
}

.runner-header {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
}

.runner-badge {
  background: rgba(163, 230, 53, 0.15);
  border: 1px solid rgba(163, 230, 53, 0.4);
  color: var(--lime);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tab-bar {
  display: flex;
  gap: 0.5rem;
  background: #0a0f1d;
  padding: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.station-tab-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-mono);
}

.station-tab-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.station-tab-btn:hover {
  color: #ffffff;
}

.station-tab-pane {
  display: none;
  flex-direction: column;
  flex: 1;
}

.station-tab-pane.active {
  display: flex;
}

.briefing-box {
  background: #080d1a;
  padding: 2.5rem;
  color: #cbd5e1;
  line-height: 1.7;
  font-size: 0.95rem;
  overflow-y: auto;
  max-height: 600px;
}

.briefing-box h3 {
  color: #ffffff;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.briefing-box h4 {
  color: var(--lime);
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
}

.briefing-box pre {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  padding: 1rem;
  color: #38bdf8;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin: 1rem 0;
  overflow-x: auto;
}

.btn-action-small {
  background: #1e293b;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.45rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-action-small:hover {
  background: #334155;
}

.btn-action-danger {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: #f43f5e;
}

.btn-action-danger:hover {
  background: rgba(244, 63, 94, 0.25);
}

.term-window,
.terminal-window {
  background: #080d1a;
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 35px rgba(163, 230, 53, 0.12);
  overflow: hidden;
  position: relative;
  font-family: var(--font-mono);
}

.term-body,
.terminal-body {
  padding: 1.25rem;
  min-height: 330px;
  font-size: 0.82rem;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 480px;
  overflow-y: auto;
}

.term-input-row,
.term-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #060a14;
}

/* ==========================================================================
   LEADERBOARD (leaderboard.html)
   ========================================================================== */
.podium-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 4rem;
}

.podium-pedestal {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
  width: 100%;
  max-width: 290px;
}

.podium-1 {
  height: 280px;
  border-color: #f59e0b;
  box-shadow: 0 15px 35px rgba(245, 158, 11, 0.15);
  order: 2;
}

.podium-2 {
  height: 240px;
  border-color: #94a3b8;
  order: 1;
}

.podium-3 {
  height: 210px;
  border-color: #d97706;
  order: 3;
}

.leaderboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.75rem;
}

.leaderboard-table th {
  padding: 0.75rem 1.5rem;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
}

.leaderboard-table tr.lb-row {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s;
}

.leaderboard-table tr.lb-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.leaderboard-table td {
  padding: 1.1rem 1.5rem;
  font-size: 0.88rem;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.leaderboard-table td:first-child {
  border-left: 1px solid #e2e8f0;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  font-weight: 900;
  font-family: var(--font-mono);
}

.leaderboard-table td:last-child {
  border-right: 1px solid #e2e8f0;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-family: var(--font-mono);
  font-weight: 800;
}

/* ==========================================================================
   HANDS-ON LEARNING & TERMINAL (Section lCe)
   ========================================================================== */
.cyberrange-section {
  padding: 6.5rem 0;
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.range-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 3.5rem;
  align-items: center;
}

.range-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-badge,
.sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: rgba(163, 230, 53, 0.12);
  border: 1px solid rgba(163, 230, 53, 0.4);
  color: var(--lime);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  box-shadow: 0 0 15px rgba(163, 230, 53, 0.15);
}

.section-title {
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 2.25rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.feature-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(163, 230, 53, 0.18);
  border: 1px solid rgba(163, 230, 53, 0.45);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(163, 230, 53, 0.25);
}

.terminal-window {
  background: #080d1a;
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 35px rgba(163, 230, 53, 0.12);
  overflow: hidden;
  position: relative;
  font-family: var(--font-mono);
}

.terminal-header {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.window-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red {
  background: #ef4444;
}

.dot-yellow {
  background: #f59e0b;
}

.dot-green {
  background: #10b981;
}

.terminal-tabs {
  display: flex;
  gap: 0.5rem;
}

.term-tab {
  padding: 0.25rem 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.72rem;
  color: #94a3b8;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  transition: all 0.2s;
}

.term-tab.active {
  background: rgba(163, 230, 53, 0.15);
  color: var(--lime);
}

.terminal-body {
  padding: 1.25rem;
  min-height: 330px;
  font-size: 0.82rem;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 420px;
  overflow-y: auto;
}

.term-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}

.term-prompt {
  color: var(--lime);
  font-weight: 700;
  flex-shrink: 0;
}

.term-cmd {
  color: #ffffff;
  font-weight: 600;
}

.term-out {
  color: #94a3b8;
  padding-left: 1.25rem;
  white-space: pre-wrap;
}

.term-out.highlight {
  color: #38bdf8;
}

.term-out.success {
  color: var(--lime);
}

.term-out.alert {
  color: #f87171;
}

.term-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.term-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  width: 100%;
}

.cursor-blink {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--lime);
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

/* ==========================================================================
   ROADMAP SECTION (Section mCe)
   ========================================================================== */
.roadmap-section {
  padding: 6.5rem 0;
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
}

.roadmap-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4.5rem auto;
}

.roadmap-canvas-wrapper {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  min-height: 380px;
}

.roadmap-svg-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 5;
}

.milestone-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.25rem;
  padding: 2rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.milestone-card:hover {
  transform: translateY(-6px);
  border-color: var(--lime);
  box-shadow: var(--shadow-card-hover);
}

.milestone-step-pill {
  position: absolute;
  top: -12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--lime);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.22rem 0.65rem;
  border-radius: 9999px;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}

.milestone-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  transition: var(--transition-smooth);
}

.milestone-card:hover .milestone-icon-box {
  background: var(--bg-primary);
  color: var(--lime);
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--lime-glow);
}

.milestone-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.milestone-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ==========================================================================
   PRODUCTS & RANGES (Section PCe)
   ========================================================================== */
.products-section {
  padding: 6.5rem 0;
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
}

.products-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem auto;
}

.product-tab-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  padding: 0.4rem;
  max-width: 530px;
  margin: 0 auto 3.5rem auto;
  box-shadow: var(--shadow-sm);
}

.product-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.product-tab-btn.active {
  background: var(--lime);
  color: #030712;
  box-shadow: 0 4px 15px var(--lime-glow);
}

.product-pane {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.5rem;
  padding: 3.5rem;
  box-shadow: var(--shadow-md);
}

.product-pane.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  animation: fadeIn 0.4s ease-out;
}

.product-pane-info h3 {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.product-pane-info p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.product-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.p-feat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 1rem;
}

.p-feat-card h4 {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.p-feat-card p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.4;
}

.product-preview-box {
  background: #080d1a;
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

.product-preview-graphic {
  width: 100%;
  height: 290px;
  border-radius: 0.75rem;
  background: radial-gradient(circle at center, rgba(163, 230, 53, 0.12) 0%, #030712 80%);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* ==========================================================================
   ENTERPRISE TRUST & MARQUEE (Section $Ce)
   ========================================================================== */
.trust-section {
  padding: 6.5rem 0;
  position: relative;
  z-index: 10;
  text-align: center;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
}

.trust-header {
  max-width: 760px;
  margin: 0 auto 3.5rem auto;
}

.marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  padding: 1.5rem 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: marqueeScroll 35s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.partner-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%) opacity(0.55);
  transition: all 0.3s ease;
}

.partner-logo-item img {
  height: 38px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.partner-logo-item:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.08);
}

[data-theme="dark"] .partner-logo-item,
[data-theme="nebula"] .partner-logo-item,
[data-theme="crimson"] .partner-logo-item {
  filter: brightness(0) invert(1) opacity(0.85);
}

[data-theme="dark"] .partner-logo-item:hover,
[data-theme="nebula"] .partner-logo-item:hover,
[data-theme="crimson"] .partner-logo-item:hover {
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
  transform: scale(1.08);
}

.trust-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4.5rem;
}

.trust-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.25rem;
  padding: 2.25rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.trust-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--lime);
  box-shadow: var(--shadow-card-hover);
}

.trust-stat-number {
  font-size: 2.85rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.trust-stat-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ==========================================================================
   TESTIMONIALS (Section zCe)
   ========================================================================== */
.testimonials-section {
  padding: 6.5rem 0;
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
}

.testimonials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3.5rem;
}

.carousel-controls {
  display: flex;
  gap: 0.75rem;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.carousel-btn:hover {
  background: var(--lime);
  color: #020617;
  border-color: var(--lime);
  box-shadow: 0 0 15px var(--lime-glow);
}

.testimonials-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  transition: all 0.5s ease;
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.25rem;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: var(--lime);
  box-shadow: var(--shadow-card-hover);
}

.stars-row {
  color: #f59e0b;
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.testimonial-quote {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--lime);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.author-details h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
}

.author-details p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================================================
   CONVERSION CALL TO ACTION (Section FCe)
   ========================================================================== */
.cta-banner-section {
  padding: 5rem 0 6.5rem 0;
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
}

.cta-box {
  background: var(--gradient-footer);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2.25rem;
  padding: 4.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(163, 230, 53, 0.15);
}

.cta-box::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(circle, rgba(163, 230, 53, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.cta-box h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
  letter-spacing: -0.02em;
}

.cta-box p {
  font-size: 1.05rem;
  color: #cbd5e1;
  max-width: 620px;
  margin: 0 auto 2.5rem auto;
  position: relative;
  z-index: 2;
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.btn-cta-lime {
  background: var(--lime);
  color: #030712;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.85rem 2.2rem;
  border-radius: 9999px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 25px rgba(163, 230, 53, 0.35);
  transition: var(--transition-smooth);
}

.btn-cta-lime:hover {
  background: #bef264;
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(163, 230, 53, 0.55);
}

/* ==========================================================================
   GLOBAL FOOTER (Section pLe)
   ========================================================================== */
.footer,
.cyber-footer {
  background: #040711;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5.5rem 0 2.5rem 0;
  position: relative;
  z-index: 10;
  color: #cbd5e1;
}

.footer-inner {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  z-index: 10;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 4.5rem;
}

.footer-brand,
.footer-brand-col {
  display: flex;
  flex-direction: column;
}

.footer-brand p,
.footer-brand-col p {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.footer-ecosystem-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
}

.footer-ecosystem-pill strong {
  color: var(--lime);
}

.footer-col h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--lime);
}

.footer-newsletter p {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-bottom: 1rem;
}

.newsletter-form {
  display: flex;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  padding: 0.25rem;
}

.newsletter-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  flex: 1;
}

.newsletter-btn {
  background: var(--lime);
  border: none;
  color: #000000;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.newsletter-btn:hover {
  background: #bef264;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: #64748b;
}

.system-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--lime);
  font-weight: 700;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: pulseDot 2s infinite;
}

/* ==========================================================================
   MODAL POPUP
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.25s ease-out;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.5rem;
  max-width: 640px;
  width: 100%;
  padding: 2.5rem;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--text-primary);
}

/* ==========================================================================
   INNER PAGE HERO & BREADCRUMBS
   ========================================================================== */
.inner-hero {
  padding: 8.5rem 0 3.25rem;
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}

.sec-badge,
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: rgba(0, 245, 155, 0.12);
  border: 1px solid rgba(0, 245, 155, 0.35);
  color: var(--lime);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  box-shadow: 0 0 15px var(--lime-glow);
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  display: inline-block;
  animation: pulseDot 2s infinite;
}

.station-top-bar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  padding: 8rem 0 1.25rem;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
}

.breadcrumb-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-nav a:hover {
  color: var(--lime);
}

.breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.6;
}

.inner-hero-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

.inner-hero-text h1 {
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.inner-hero-text p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 650px;
  line-height: 1.6;
}

.inner-metrics-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1rem;
  padding: 0.85rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-value {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.metric-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.metric-divider {
  width: 1px;
  height: 28px;
  background: var(--border-light);
}

/* ==========================================================================
   FILTER TOOLBAR & SEARCH
   ========================================================================= */
.filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.search-box-wrap {
  position: relative;
  min-width: 280px;
  flex: 1;
  max-width: 420px;
}

.search-icon-svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  pointer-events: none;
}

.search-input-field {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  padding: 0.7rem 1.25rem 0.7rem 2.75rem;
  font-size: 0.88rem;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}

.search-input-field:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-glow);
}

.filter-pills-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-pill:hover {
  background: var(--bg-secondary);
  border-color: var(--lime);
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--lime);
  border-color: var(--lime);
  color: #020617;
  font-weight: 800;
  box-shadow: 0 4px 12px var(--lime-glow);
}

.filter-pill.active.lime-style {
  background: var(--lime);
  border-color: var(--lime);
  color: #000000;
}

/* ==========================================================================
   OPENVPN CONNECTION WIDGET (labs.html)
   ========================================================================== */
.vpn-widget-box {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 1.25rem;
  padding: 1.75rem 2rem;
  color: #ffffff;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vpn-left-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.vpn-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(163, 230, 53, 0.15);
  border: 1px solid rgba(163, 230, 53, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  flex-shrink: 0;
}

.vpn-details h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.vpn-details p {
  font-size: 0.85rem;
  color: #94a3b8;
}

.vpn-actions-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.vpn-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.55rem 1rem;
  border-radius: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
}

.vpn-select option {
  background: #0f172a;
  color: #ffffff;
}

.btn-download-vpn {
  background: var(--lime);
  color: #000000;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.btn-download-vpn:hover {
  background: #bef264;
  box-shadow: 0 4px 15px rgba(163, 230, 53, 0.4);
}

/* ==========================================================================
   CYBER RANGES & TOPOLOGY (ranges.html)
   ========================================================================== */
.ranges-container {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  margin-bottom: 5rem;
}

.range-complex-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.5rem;
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.range-complex-card:hover {
  border-color: var(--lime);
  box-shadow: var(--shadow-card-hover);
}

.range-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.range-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.range-tier-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  font-family: var(--font-mono);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue-primary);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.range-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.range-overview {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 0.5rem;
  max-width: 800px;
}

.topology-visualizer-box {
  background: #080d1a;
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  padding: 2rem;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

.topology-grid-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  position: relative;
  z-index: 2;
}

.topo-node {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.25rem;
  transition: all 0.2s;
  cursor: pointer;
}

.topo-node:hover {
  border-color: var(--lime);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(163, 230, 53, 0.2);
}

.topo-node.compromised {
  border-color: rgba(244, 63, 94, 0.4);
}

.topo-node-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.topo-node-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.2rem;
}

.topo-node-ip {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: #94a3b8;
}

.topo-node-role {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  font-family: var(--font-mono);
  margin-top: 0.6rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  color: #38bdf8;
}

.range-objectives-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.range-obj-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.range-obj-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* ==========================================================================
   CHALLENGE DETAILS MODAL
   ========================================================================== */
.chal-modal-card {
  max-width: 680px;
}

.chal-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.chal-modal-tags {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.chal-modal-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-primary);
}

.chal-modal-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.chal-resource-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0.85rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.chal-resource-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #1e293b;
  font-weight: 700;
}

.btn-download-file {
  background: #0f172a;
  color: #ffffff;
  padding: 0.45rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.btn-download-file:hover {
  background: var(--blue-primary);
}

/* ==========================================================================
   TOAST NOTIFICATION SYSTEM
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast-msg {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.85rem;
  padding: 0.9rem 1.4rem;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
  max-width: 360px;
}

.toast-msg.toast-success {
  border-color: rgba(163, 230, 53, 0.5);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(163, 230, 53, 0.2);
}

.toast-msg.toast-error {
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(244, 63, 94, 0.2);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */
@keyframes radarSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes orbitSpinCW {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes orbitCounterCW {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes orbitSpinCCW {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes orbitCounterCCW {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseCore {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08), 0 0 30px rgba(163, 230, 53, 0.25);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12), 0 0 50px rgba(163, 230, 53, 0.5);
  }
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   RESPONSIVE QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-menu {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

  .range-grid {
    grid-template-columns: 1fr;
  }

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

  .product-pane.active {
    grid-template-columns: 1fr;
  }

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

  .testimonials-track {
    grid-template-columns: 1fr;
  }

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

  .lab-runner-layout {
    grid-template-columns: 1fr;
  }
}

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

  .labs-grid {
    grid-template-columns: 1fr;
  }

  .challenges-grid {
    grid-template-columns: 1fr;
  }

  .trust-stats-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .hero-stats-banner {
    flex-direction: column;
    gap: 1.25rem;
  }

  .stat-divider {
    width: 100%;
    height: 1px;
  }

  .product-features-grid {
    grid-template-columns: 1fr;
  }

  .podium-container {
    flex-direction: column;
    align-items: center;
  }

  .podium-1,
  .podium-2,
  .podium-3 {
    width: 100%;
    height: auto;
    order: unset;
  }
}

/* ==========================================================================
/* ==========================================================================
   THEME COMPONENT OVERRIDES (Cyber Warfare Dark, Deep Nebula, Bloodhound Crimson)
   ========================================================================== */

/* Universal High-Contrast Dark Rules (Applies to dark, nebula, crimson) */
/* Universal High-Contrast Dark Rules (Applies to dark, nebula, crimson) */
[data-theme="dark"] body,
[data-theme="nebula"] body,
[data-theme="crimson"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .hero-title,
[data-theme="nebula"] .hero-title,
[data-theme="crimson"] .hero-title {
  color: #ffffff !important;
}

[data-theme="dark"] .hero-title .brand-accent,
[data-theme="nebula"] .hero-title .brand-accent,
[data-theme="crimson"] .hero-title .brand-accent {
  color: #ffffff !important;
}

[data-theme="dark"] .hero-subtitle,
[data-theme="nebula"] .hero-subtitle,
[data-theme="crimson"] .hero-subtitle {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .hero-pill,
[data-theme="nebula"] .hero-pill,
[data-theme="crimson"] .hero-pill {
  background: rgba(14, 22, 46, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
}

/* Radiant Theme CTA Buttons */
[data-theme="dark"] .btn-primary-hero {
  background: linear-gradient(135deg, #00f59b 0%, #00d2ff 100%) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 245, 155, 0.45) !important;
}

[data-theme="dark"] .btn-primary-hero:hover {
  background: linear-gradient(135deg, #34d399 0%, #38bdf8 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 245, 155, 0.65) !important;
}

[data-theme="nebula"] .btn-primary-hero {
  background: linear-gradient(135deg, #00f0ff 0%, #818cf8 50%, #c084fc 100%) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 240, 255, 0.45) !important;
}

[data-theme="nebula"] .btn-primary-hero:hover {
  background: linear-gradient(135deg, #7dd3fc 0%, #a5b4fc 50%, #d8b4fe 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 240, 255, 0.6) !important;
}

[data-theme="crimson"] .btn-primary-hero {
  background: linear-gradient(135deg, #ff0055 0%, #e11d48 50%, #f97316 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 0, 85, 0.45) !important;
}

[data-theme="crimson"] .btn-primary-hero:hover {
  background: linear-gradient(135deg, #ff3377 0%, #f43f5e 50%, #fb923c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 0, 85, 0.65) !important;
}

[data-theme="dark"] .btn-secondary-hero,
[data-theme="nebula"] .btn-secondary-hero,
[data-theme="crimson"] .btn-secondary-hero {
  background: rgba(11, 21, 45, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px);
}

[data-theme="dark"] .btn-secondary-hero:hover,
[data-theme="nebula"] .btn-secondary-hero:hover,
[data-theme="crimson"] .btn-secondary-hero:hover {
  border-color: var(--lime) !important;
  color: var(--lime) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px var(--lime-glow) !important;
}

[data-theme="dark"] .hero-stats-banner,
[data-theme="nebula"] .hero-stats-banner,
[data-theme="crimson"] .hero-stats-banner {
  background: rgba(11, 21, 45, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(20px);
}

[data-theme="dark"] .stat-num,
[data-theme="nebula"] .stat-num,
[data-theme="crimson"] .stat-num {
  color: #ffffff !important;
}

[data-theme="dark"] .stat-label,
[data-theme="nebula"] .stat-label,
[data-theme="crimson"] .stat-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .stat-divider,
[data-theme="nebula"] .stat-divider,
[data-theme="crimson"] .stat-divider {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Radar Circles in Dark Themes */
[data-theme="dark"] .radar-circle {
  border-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .rc-1 {
  border-color: rgba(0, 245, 155, 0.18);
}

[data-theme="dark"] .rc-2 {
  border-color: rgba(0, 210, 255, 0.14);
}

[data-theme="dark"] .rc-3 {
  border-color: rgba(0, 245, 155, 0.28);
}

[data-theme="dark"] .rc-4 {
  border-color: rgba(0, 210, 255, 0.08);
}

[data-theme="nebula"] .radar-circle {
  border-color: rgba(129, 140, 248, 0.1);
}

[data-theme="nebula"] .rc-1 {
  border-color: rgba(0, 240, 255, 0.22);
}

[data-theme="nebula"] .rc-2 {
  border-color: rgba(139, 92, 246, 0.18);
}

[data-theme="nebula"] .rc-3 {
  border-color: rgba(0, 240, 255, 0.32);
}

[data-theme="nebula"] .rc-4 {
  border-color: rgba(129, 140, 248, 0.1);
}

[data-theme="crimson"] .radar-circle {
  border-color: rgba(244, 63, 94, 0.1);
}

[data-theme="crimson"] .rc-1 {
  border-color: rgba(255, 0, 85, 0.22);
}

[data-theme="crimson"] .rc-2 {
  border-color: rgba(245, 158, 11, 0.18);
}

[data-theme="crimson"] .rc-3 {
  border-color: rgba(255, 0, 85, 0.32);
}

[data-theme="crimson"] .rc-4 {
  border-color: rgba(244, 63, 94, 0.1);
}

/* Universal Orbit Badges in Dark Modes */
[data-theme="dark"] .orbit-inner {
  background: rgba(11, 21, 45, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

[data-theme="nebula"] .orbit-inner {
  background: rgba(14, 18, 59, 0.95) !important;
  border-color: rgba(129, 140, 248, 0.35) !important;
  color: #f8fafc !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

[data-theme="crimson"] .orbit-inner {
  background: rgba(28, 13, 27, 0.95) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
  color: #f8fafc !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

/* Dark Theme Orbit Accents */
[data-theme="dark"] .ob-lime .orbit-inner {
  border-color: rgba(0, 245, 155, 0.45) !important;
  color: #00f59b !important;
  box-shadow: 0 0 20px rgba(0, 245, 155, 0.35) !important;
}

[data-theme="dark"] .ob-lime .orbit-inner svg {
  stroke: #00f59b !important;
}

[data-theme="dark"] .ob-blue .orbit-inner {
  border-color: rgba(0, 210, 255, 0.45) !important;
  color: #00d2ff !important;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.35) !important;
}

[data-theme="dark"] .ob-blue .orbit-inner svg {
  stroke: #00d2ff !important;
}

[data-theme="dark"] .ob-purple .orbit-inner {
  border-color: rgba(192, 132, 252, 0.45) !important;
  color: #e9d5ff !important;
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.25) !important;
}

[data-theme="dark"] .ob-purple .orbit-inner svg {
  stroke: #c084fc !important;
}

[data-theme="dark"] .ob-red .orbit-inner {
  border-color: rgba(251, 113, 133, 0.45) !important;
  color: #fecdd3 !important;
  box-shadow: 0 0 20px rgba(251, 113, 133, 0.25) !important;
}

[data-theme="dark"] .ob-red .orbit-inner svg {
  stroke: #fb7185 !important;
}

/* Nebula Theme Orbit Accents */
[data-theme="nebula"] .ob-lime .orbit-inner {
  border-color: rgba(0, 240, 255, 0.5) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35) !important;
}

[data-theme="nebula"] .ob-lime .orbit-inner svg {
  stroke: #00f0ff !important;
}

[data-theme="nebula"] .ob-blue .orbit-inner {
  border-color: rgba(129, 140, 248, 0.5) !important;
  color: #a5b4fc !important;
  box-shadow: 0 0 20px rgba(129, 140, 248, 0.35) !important;
}

[data-theme="nebula"] .ob-blue .orbit-inner svg {
  stroke: #818cf8 !important;
}

[data-theme="nebula"] .ob-purple .orbit-inner {
  border-color: rgba(192, 132, 252, 0.5) !important;
  color: #e9d5ff !important;
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.35) !important;
}

[data-theme="nebula"] .ob-purple .orbit-inner svg {
  stroke: #c084fc !important;
}

[data-theme="nebula"] .ob-red .orbit-inner {
  border-color: rgba(244, 63, 94, 0.5) !important;
  color: #fda4af !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.35) !important;
}

[data-theme="nebula"] .ob-red .orbit-inner svg {
  stroke: #f43f5e !important;
}

/* Crimson Theme Orbit Accents */
[data-theme="crimson"] .ob-lime .orbit-inner {
  border-color: rgba(255, 0, 85, 0.55) !important;
  color: #ff0055 !important;
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.4) !important;
}

[data-theme="crimson"] .ob-lime .orbit-inner svg {
  stroke: #ff0055 !important;
}

[data-theme="crimson"] .ob-blue .orbit-inner {
  border-color: rgba(245, 158, 11, 0.55) !important;
  color: #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35) !important;
}

[data-theme="crimson"] .ob-blue .orbit-inner svg {
  stroke: #f59e0b !important;
}

[data-theme="crimson"] .ob-purple .orbit-inner {
  border-color: rgba(251, 113, 133, 0.55) !important;
  color: #fecdd3 !important;
  box-shadow: 0 0 20px rgba(251, 113, 133, 0.35) !important;
}

[data-theme="crimson"] .ob-purple .orbit-inner svg {
  stroke: #fb7185 !important;
}

[data-theme="crimson"] .ob-red .orbit-inner {
  border-color: rgba(255, 0, 85, 0.6) !important;
  color: #ff0055 !important;
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.45) !important;
}

[data-theme="crimson"] .ob-red .orbit-inner svg {
  stroke: #ff0055 !important;
}

/* Page Hero Overrides for Inner Pages */
[data-theme="dark"] .page-hero {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 210, 255, 0.15) 0%, #030712 70%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="nebula"] .page-hero {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139, 92, 246, 0.22) 0%, #040412 70%) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.25) !important;
}

[data-theme="crimson"] .page-hero {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 0, 85, 0.18) 0%, #070306 70%) !important;
  border-bottom: 1px solid rgba(244, 63, 94, 0.25) !important;
}

[data-theme="dark"] .page-hero-title,
[data-theme="nebula"] .page-hero-title,
[data-theme="crimson"] .page-hero-title {
  color: #ffffff !important;
}

[data-theme="dark"] .page-hero-subtitle,
[data-theme="nebula"] .page-hero-subtitle,
[data-theme="crimson"] .page-hero-subtitle {
  color: #cbd5e1 !important;
}

/* Section Badges in Dark Themes */
[data-theme="dark"] .section-badge,
[data-theme="dark"] .sec-badge {
  background: rgba(0, 245, 155, 0.12) !important;
  border-color: rgba(0, 245, 155, 0.45) !important;
  color: #00f59b !important;
  box-shadow: 0 0 15px rgba(0, 245, 155, 0.25) !important;
  text-shadow: 0 0 12px rgba(0, 245, 155, 0.4) !important;
}

[data-theme="nebula"] .section-badge,
[data-theme="nebula"] .sec-badge {
  background: rgba(0, 240, 255, 0.12) !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3) !important;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5) !important;
}

[data-theme="crimson"] .section-badge,
[data-theme="crimson"] .sec-badge {
  background: rgba(255, 0, 85, 0.12) !important;
  border-color: rgba(255, 0, 85, 0.45) !important;
  color: #ff0055 !important;
  box-shadow: 0 0 15px rgba(255, 0, 85, 0.3) !important;
  text-shadow: 0 0 12px rgba(255, 0, 85, 0.5) !important;
}

/* Feature Checkmarks in Dark Themes */
[data-theme="dark"] .feature-check {
  background: rgba(0, 245, 155, 0.2) !important;
  border-color: rgba(0, 245, 155, 0.55) !important;
  color: #00f59b !important;
  box-shadow: 0 0 12px rgba(0, 245, 155, 0.35) !important;
}

[data-theme="nebula"] .feature-check {
  background: rgba(0, 240, 255, 0.2) !important;
  border-color: rgba(0, 240, 255, 0.55) !important;
  color: #00f0ff !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35) !important;
}

[data-theme="crimson"] .feature-check {
  background: rgba(255, 0, 85, 0.2) !important;
  border-color: rgba(255, 0, 85, 0.55) !important;
  color: #ff0055 !important;
  box-shadow: 0 0 12px rgba(255, 0, 85, 0.35) !important;
}

/* Terminal Console Windows */
[data-theme="dark"] .terminal-window {
  background: rgba(7, 14, 32, 0.95) !important;
  border: 1px solid rgba(0, 245, 155, 0.25) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 245, 155, 0.15) !important;
}

[data-theme="nebula"] .terminal-window {
  background: rgba(10, 13, 44, 0.95) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 240, 255, 0.18) !important;
}

[data-theme="crimson"] .terminal-window {
  background: rgba(20, 10, 19, 0.95) !important;
  border: 1px solid rgba(255, 0, 85, 0.28) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 0, 85, 0.18) !important;
}

/* High-Contrast Body and Description Typography */
[data-theme="dark"] .section-desc,
[data-theme="nebula"] .section-desc,
[data-theme="crimson"] .section-desc,
[data-theme="dark"] .feature-item,
[data-theme="nebula"] .feature-item,
[data-theme="crimson"] .feature-item,
[data-theme="dark"] .feature-item span,
[data-theme="nebula"] .feature-item span,
[data-theme="crimson"] .feature-item span,
[data-theme="dark"] .product-pane-info p,
[data-theme="nebula"] .product-pane-info p,
[data-theme="crimson"] .product-pane-info p,
[data-theme="dark"] .testimonial-quote,
[data-theme="nebula"] .testimonial-quote,
[data-theme="crimson"] .testimonial-quote,
[data-theme="dark"] .card-desc,
[data-theme="nebula"] .card-desc,
[data-theme="crimson"] .card-desc,
[data-theme="dark"] .range-overview,
[data-theme="nebula"] .range-overview,
[data-theme="crimson"] .range-overview,
[data-theme="dark"] .lab-desc,
[data-theme="nebula"] .lab-desc,
[data-theme="crimson"] .lab-desc,
[data-theme="dark"] .chal-summary,
[data-theme="nebula"] .chal-summary,
[data-theme="crimson"] .chal-summary,
[data-theme="dark"] .faq-answer p,
[data-theme="nebula"] .faq-answer p,
[data-theme="crimson"] .faq-answer p,
[data-theme="dark"] .chal-modal-desc,
[data-theme="nebula"] .chal-modal-desc,
[data-theme="crimson"] .chal-modal-desc {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .section-title,
[data-theme="nebula"] .section-title,
[data-theme="crimson"] .section-title,
[data-theme="dark"] .card-title,
[data-theme="nebula"] .card-title,
[data-theme="crimson"] .card-title,
[data-theme="dark"] .lab-card-title,
[data-theme="nebula"] .lab-card-title,
[data-theme="crimson"] .lab-card-title,
[data-theme="dark"] .range-title,
[data-theme="nebula"] .range-title,
[data-theme="crimson"] .range-title,
[data-theme="dark"] .product-pane-info h3,
[data-theme="nebula"] .product-pane-info h3,
[data-theme="crimson"] .product-pane-info h3,
[data-theme="dark"] .milestone-title,
[data-theme="nebula"] .milestone-title,
[data-theme="crimson"] .milestone-title,
[data-theme="dark"] .milestone-card h3,
[data-theme="nebula"] .milestone-card h3,
[data-theme="crimson"] .milestone-card h3,
[data-theme="dark"] .trust-stat-number,
[data-theme="nebula"] .trust-stat-number,
[data-theme="crimson"] .trust-stat-number,
[data-theme="dark"] .trust-num,
[data-theme="nebula"] .trust-num,
[data-theme="crimson"] .trust-num,
[data-theme="dark"] .author-details h4,
[data-theme="nebula"] .author-details h4,
[data-theme="crimson"] .author-details h4,
[data-theme="dark"] .faq-question span,
[data-theme="nebula"] .faq-question span,
[data-theme="crimson"] .faq-question span,
[data-theme="dark"] .range-info h3,
[data-theme="nebula"] .range-info h3,
[data-theme="crimson"] .range-info h3,
[data-theme="dark"] .p-feat-card h4,
[data-theme="nebula"] .p-feat-card h4,
[data-theme="crimson"] .p-feat-card h4,
[data-theme="dark"] .chal-modal-title,
[data-theme="nebula"] .chal-modal-title,
[data-theme="crimson"] .chal-modal-title {
  color: #ffffff !important;
}

/* Universal Safety Overrides for inline styles in dark themes */
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="nebula"] [style*="color: #0f172a"],
[data-theme="crimson"] [style*="color: #0f172a"] {
  color: #ffffff !important;
}

[data-theme="dark"] [style*="color: #475569"],
[data-theme="nebula"] [style*="color: #475569"],
[data-theme="crimson"] [style*="color: #475569"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="nebula"] [style*="color: #64748b"],
[data-theme="crimson"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="nebula"] [style*="color: #334155"],
[data-theme="crimson"] [style*="color: #334155"] {
  color: #cbd5e1 !important;
}

[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="nebula"] [style*="background: #ffffff"],
[data-theme="crimson"] [style*="background: #ffffff"] {
  background: var(--bg-card) !important;
}

[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="nebula"] [style*="background: #f8fafc"],
[data-theme="crimson"] [style*="background: #f8fafc"] {
  background: var(--bg-secondary) !important;
}

[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
[data-theme="nebula"] [style*="border: 1px solid #e2e8f0"],
[data-theme="crimson"] [style*="border: 1px solid #e2e8f0"],
[data-theme="dark"] [style*="border: 1px solid #cbd5e1"],
[data-theme="nebula"] [style*="border: 1px solid #cbd5e1"],
[data-theme="crimson"] [style*="border: 1px solid #cbd5e1"] {
  border-color: var(--border-light) !important;
}

.ecosystem-callout-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  margin-top: 2.5rem;
}

.ecosystem-callout-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

.ecosystem-callout-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 650px;
}


/* Alternating Section Backgrounds for Structural Depth */
[data-theme="dark"] .cyberrange-section,
[data-theme="dark"] .products-section,
[data-theme="dark"] .trust-section {
  background: #070e20 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .roadmap-section,
[data-theme="dark"] .featured-labs-section,
[data-theme="dark"] .testimonials-section {
  background: #030712 !important;
}

[data-theme="nebula"] .cyberrange-section,
[data-theme="nebula"] .products-section,
[data-theme="nebula"] .trust-section {
  background: #090a26 !important;
  border-top: 1px solid rgba(129, 140, 248, 0.18) !important;
  border-bottom: 1px solid rgba(129, 140, 248, 0.18) !important;
}

[data-theme="nebula"] .roadmap-section,
[data-theme="nebula"] .featured-labs-section,
[data-theme="nebula"] .testimonials-section {
  background: #040412 !important;
}

[data-theme="crimson"] .cyberrange-section,
[data-theme="crimson"] .products-section,
[data-theme="crimson"] .trust-section {
  background: #120811 !important;
  border-top: 1px solid rgba(244, 63, 94, 0.18) !important;
  border-bottom: 1px solid rgba(244, 63, 94, 0.18) !important;
}

[data-theme="crimson"] .roadmap-section,
[data-theme="crimson"] .featured-labs-section,
[data-theme="crimson"] .testimonials-section {
  background: #070306 !important;
}

/* 1. CYBER WARFARE DARK THEME SPECIFIC */
[data-theme="dark"] body::before {
  opacity: 0.15;
  background-image: radial-gradient(#00d2ff 1.2px, transparent 1.2px);
}

[data-theme="dark"] .hero-section {
  background: radial-gradient(ellipse 90% 60% at 50% 30%, rgba(0, 210, 255, 0.15) 0%, rgba(11, 21, 45, 0.95) 55%, #030712 100%) !important;
}

[data-theme="dark"] .inner-hero {
  background: radial-gradient(circle at 50% 0%, rgba(0, 245, 155, 0.08) 0%, transparent 65%), #030712;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .station-top-bar {
  background: #030712;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .inner-metrics-bar {
  background: #0b152d;
  border-color: rgba(0, 245, 155, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .metric-value {
  color: #ffffff;
}

[data-theme="dark"] .metric-divider {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .inner-hero-text h1 {
  color: #ffffff;
}

[data-theme="dark"] .inner-hero-text p {
  color: #cbd5e1;
}

[data-theme="dark"] .hero-title .brand-accent span.lime {
  color: #00f59b !important;
  text-shadow: 0 0 25px rgba(0, 245, 155, 0.45);
}

[data-theme="dark"] .gradient-title {
  background: linear-gradient(135deg, #ffffff 0%, #00d2ff 50%, #00f59b 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="dark"] .lab-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .challenge-card,
[data-theme="dark"] .chal-card,
[data-theme="dark"] .milestone-card,
[data-theme="dark"] .range-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .leaderboard-table-card,
[data-theme="dark"] .podium-pedestal,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .briefing-card,
[data-theme="dark"] .vpn-card,
[data-theme="dark"] .activity-item,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .range-complex-card,
[data-theme="dark"] .trust-stat-box,
[data-theme="dark"] .target-status-box,
[data-theme="dark"] .flag-submit-card,
[data-theme="dark"] .topology-visualizer-box,
[data-theme="dark"] .lab-control-panel,
[data-theme="dark"] .range-obj-item,
[data-theme="dark"] .vpn-server-card,
[data-theme="dark"] .term-sidebar-card {
  background: #0b152d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc;
}

[data-theme="dark"] .lab-card:hover,
[data-theme="dark"] .challenge-card:hover,
[data-theme="dark"] .chal-card:hover,
[data-theme="dark"] .range-complex-card:hover,
[data-theme="dark"] .range-obj-item:hover {
  border-color: #00f59b !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 245, 155, 0.25) !important;
}

[data-theme="dark"] .filter-input,
[data-theme="dark"] .filter-select,
[data-theme="dark"] .flag-input,
[data-theme="dark"] .search-input-field {
  background: #060b18 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .rank-row {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .rank-row:hover {
  background: rgba(0, 245, 155, 0.06);
}

[data-theme="dark"] .rank-row td {
  color: #cbd5e1;
}

[data-theme="dark"] .modal-card {
  background: #0b152d;
  border-color: rgba(0, 245, 155, 0.25);
}

[data-theme="dark"] .modal-title {
  color: #ffffff;
}

/* 2. DEEP NEBULA THEME (Electric Indigo & Cyan) */
[data-theme="nebula"] body::before {
  opacity: 0.2;
  background-image: radial-gradient(#00f0ff 1.2px, transparent 1.2px);
}

[data-theme="nebula"] .hero-section {
  background: radial-gradient(ellipse 90% 60% at 50% 30%, rgba(139, 92, 246, 0.25) 0%, rgba(14, 18, 59, 0.95) 55%, #040412 100%) !important;
}

[data-theme="nebula"] .inner-hero {
  background: radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.12) 0%, transparent 65%), #040412;
  border-color: rgba(129, 140, 248, 0.2);
}

[data-theme="nebula"] .station-top-bar {
  background: #040412;
  border-color: rgba(129, 140, 248, 0.2);
}

[data-theme="nebula"] .inner-metrics-bar {
  background: #0e123b;
  border-color: rgba(0, 240, 255, 0.22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="nebula"] .metric-value {
  color: #ffffff;
}

[data-theme="nebula"] .metric-divider {
  background: rgba(129, 140, 248, 0.2);
}

[data-theme="nebula"] .inner-hero-text h1 {
  color: #ffffff;
}

[data-theme="nebula"] .inner-hero-text p {
  color: #cbd5e1;
}

[data-theme="nebula"] .hero-title .brand-accent span.lime {
  color: #00f0ff !important;
  text-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
}

[data-theme="nebula"] .gradient-title {
  background: linear-gradient(135deg, #ffffff 0%, #00f0ff 45%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="nebula"] .lab-card,
[data-theme="nebula"] .feature-card,
[data-theme="nebula"] .challenge-card,
[data-theme="nebula"] .chal-card,
[data-theme="nebula"] .milestone-card,
[data-theme="nebula"] .range-card,
[data-theme="nebula"] .testimonial-card,
[data-theme="nebula"] .leaderboard-table-card,
[data-theme="nebula"] .podium-pedestal,
[data-theme="nebula"] .sidebar-card,
[data-theme="nebula"] .briefing-card,
[data-theme="nebula"] .vpn-card,
[data-theme="nebula"] .activity-item,
[data-theme="nebula"] .faq-item,
[data-theme="nebula"] .range-complex-card,
[data-theme="nebula"] .trust-stat-box,
[data-theme="nebula"] .target-status-box,
[data-theme="nebula"] .flag-submit-card,
[data-theme="nebula"] .topology-visualizer-box,
[data-theme="nebula"] .lab-control-panel,
[data-theme="nebula"] .range-obj-item,
[data-theme="nebula"] .vpn-server-card,
[data-theme="nebula"] .term-sidebar-card {
  background: #0e123b !important;
  border-color: rgba(129, 140, 248, 0.22) !important;
  color: #f8fafc;
}

[data-theme="nebula"] .lab-card:hover,
[data-theme="nebula"] .challenge-card:hover,
[data-theme="nebula"] .chal-card:hover,
[data-theme="nebula"] .range-complex-card:hover,
[data-theme="nebula"] .range-obj-item:hover {
  border-color: #00f0ff !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.35) !important;
}

[data-theme="nebula"] .filter-input,
[data-theme="nebula"] .filter-select,
[data-theme="nebula"] .flag-input,
[data-theme="nebula"] .search-input-field {
  background: #080a22 !important;
  border-color: rgba(129, 140, 248, 0.25) !important;
  color: #ffffff !important;
}

[data-theme="nebula"] .rank-row {
  border-color: rgba(129, 140, 248, 0.15);
}

[data-theme="nebula"] .rank-row:hover {
  background: rgba(0, 240, 255, 0.08);
}

[data-theme="nebula"] .rank-row td {
  color: #cbd5e1;
}

[data-theme="nebula"] .modal-card {
  background: #0e123b;
  border-color: rgba(0, 240, 255, 0.3);
}

[data-theme="nebula"] .modal-title {
  color: #ffffff;
}

/* 3. BLOODHOUND CRIMSON THEME (Tactical Red Cell) */
[data-theme="crimson"] body::before {
  opacity: 0.18;
  background-image: radial-gradient(#ff0055 1.2px, transparent 1.2px);
}

[data-theme="crimson"] .hero-section {
  background: radial-gradient(ellipse 90% 60% at 50% 30%, rgba(255, 0, 85, 0.2) 0%, rgba(28, 13, 27, 0.95) 55%, #070306 100%) !important;
}

[data-theme="crimson"] .inner-hero {
  background: radial-gradient(circle at 50% 0%, rgba(255, 0, 85, 0.12) 0%, transparent 65%), #070306;
  border-color: rgba(244, 63, 94, 0.2);
}

[data-theme="crimson"] .station-top-bar {
  background: #070306;
  border-color: rgba(244, 63, 94, 0.2);
}

[data-theme="crimson"] .inner-metrics-bar {
  background: #1c0d1b;
  border-color: rgba(255, 0, 85, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="crimson"] .metric-value {
  color: #ffffff;
}

[data-theme="crimson"] .metric-divider {
  background: rgba(244, 63, 94, 0.2);
}

[data-theme="crimson"] .inner-hero-text h1 {
  color: #ffffff;
}

[data-theme="crimson"] .inner-hero-text p {
  color: #cbd5e1;
}

[data-theme="crimson"] .hero-title .brand-accent span.lime {
  color: #ff0055 !important;
  text-shadow: 0 0 25px rgba(255, 0, 85, 0.5);
}

[data-theme="crimson"] .gradient-title {
  background: linear-gradient(135deg, #ffffff 0%, #ff0055 45%, #fb923c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="crimson"] .lab-card,
[data-theme="crimson"] .feature-card,
[data-theme="crimson"] .challenge-card,
[data-theme="crimson"] .chal-card,
[data-theme="crimson"] .milestone-card,
[data-theme="crimson"] .range-card,
[data-theme="crimson"] .testimonial-card,
[data-theme="crimson"] .leaderboard-table-card,
[data-theme="crimson"] .podium-pedestal,
[data-theme="crimson"] .sidebar-card,
[data-theme="crimson"] .briefing-card,
[data-theme="crimson"] .vpn-card,
[data-theme="crimson"] .activity-item,
[data-theme="crimson"] .faq-item,
[data-theme="crimson"] .range-complex-card,
[data-theme="crimson"] .trust-stat-box,
[data-theme="crimson"] .target-status-box,
[data-theme="crimson"] .flag-submit-card,
[data-theme="crimson"] .topology-visualizer-box,
[data-theme="crimson"] .lab-control-panel,
[data-theme="crimson"] .range-obj-item,
[data-theme="crimson"] .vpn-server-card,
[data-theme="crimson"] .term-sidebar-card {
  background: #1c0d1b !important;
  border-color: rgba(244, 63, 94, 0.22) !important;
  color: #f8fafc;
}

[data-theme="crimson"] .lab-card:hover,
[data-theme="crimson"] .challenge-card:hover,
[data-theme="crimson"] .chal-card:hover,
[data-theme="crimson"] .range-complex-card:hover,
[data-theme="crimson"] .range-obj-item:hover {
  border-color: #ff0055 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 0, 85, 0.3) !important;
}

[data-theme="crimson"] .filter-input,
[data-theme="crimson"] .filter-select,
[data-theme="crimson"] .flag-input,
[data-theme="crimson"] .search-input-field {
  background: #10060f !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
  color: #ffffff !important;
}

[data-theme="crimson"] .rank-row {
  border-color: rgba(244, 63, 94, 0.15);
}

[data-theme="crimson"] .rank-row:hover {
  background: rgba(255, 0, 85, 0.08);
}

[data-theme="crimson"] .rank-row td {
  color: #cbd5e1;
}

[data-theme="crimson"] .modal-card {
  background: #1c0d1b;
  border-color: rgba(255, 0, 85, 0.3);
}

[data-theme="crimson"] .modal-title {
  color: #ffffff;
}

/* ==========================================================================
   VPN ACCESS CENTER & DIAGNOSTIC TOOL STYLES (vpn-guide.html)
   ========================================================================== */
.vpn-servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.vpn-server-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  position: relative;
}

.vpn-server-card:hover {
  transform: translateY(-4px);
  border-color: var(--lime);
  box-shadow: var(--shadow-card-hover);
}

.vpn-server-card.recommended {
  border-color: var(--lime);
  background: linear-gradient(180deg, rgba(163, 230, 53, 0.05) 0%, var(--bg-card) 100%);
}

.vpn-server-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vpn-server-flag {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.vpn-latency-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: rgba(163, 230, 53, 0.12);
  color: var(--lime-dark);
}

.vpn-latency-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-accent);
}

.vpn-server-info h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.vpn-server-info p {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.vpn-diag-console {
  background: #080d1a;
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  padding: 1.5rem;
  font-family: var(--font-mono);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.vpn-diag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.25rem;
}

.vpn-diag-output {
  min-height: 180px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 0.82rem;
  color: #38bdf8;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  line-height: 1.5;
}

/* ==========================================================================
   LIVE ATTACK STREAM & ACTIVITY FEED (activity.html)
   ========================================================================== */
.activity-feed-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
}

@media (max-width: 960px) {
  .activity-feed-layout {
    grid-template-columns: 1fr;
  }
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.activity-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.15rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  animation: fadeIn 0.4s ease-out;
}

.activity-item:hover {
  transform: translateX(4px);
  border-color: var(--lime);
  box-shadow: var(--shadow-md);
}

.activity-item.first-blood {
  border-left: 4px solid #e11d48;
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.04) 0%, var(--bg-card) 100%);
}

.activity-item.pwn {
  border-left: 4px solid var(--lime);
}

.activity-item-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.activity-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 0.75rem;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-meta h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.activity-meta p {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.activity-points {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--lime-dark);
  text-align: right;
  white-space: nowrap;
}

.activity-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ==========================================================================
   WEBASSEMBLY LINUX TERMINAL & xterm.js INTEGRATION
   ========================================================================== */
.wasm-terminal-frame {
  display: flex;
  flex-direction: column;
  background: var(--bg-dark-surface, #020409);
  border: 1px solid rgba(0, 245, 155, 0.25);
  border-radius: 1.15rem;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 245, 155, 0.15);
  transition: var(--transition-smooth);
  position: relative;
  width: 100%;
}

[data-theme="nebula"] .wasm-terminal-frame {
  background: #040412;
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 240, 255, 0.15);
}

[data-theme="crimson"] .wasm-terminal-frame {
  background: #070306;
  border-color: rgba(255, 0, 85, 0.25);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 0, 85, 0.15);
}

[data-theme="light"] .wasm-terminal-frame {
  background: #090e1a;
  border: 1px solid rgba(15, 23, 42, 0.25);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18), 0 0 25px rgba(56, 189, 248, 0.15);
}

/* Fullscreen Isolation: Completely hide fixed navbar, banners, and footers so they never overlap */
body.has-term-fullscreen .navbar-wrapper,
body.has-term-fullscreen .top-banner,
body.has-term-fullscreen header,
body.has-term-fullscreen .cyber-footer,
body.has-term-fullscreen .terminal-page-hero,
body.has-term-fullscreen .term-sidebar-col,
body:has(.wasm-terminal-frame.wasm-fullscreen) .navbar-wrapper,
body:has(.wasm-terminal-frame.wasm-fullscreen) .top-banner,
body:has(.wasm-terminal-frame.wasm-fullscreen) header,
body:has(.wasm-terminal-frame.wasm-fullscreen) .cyber-footer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

body.has-term-fullscreen {
  overflow: hidden !important;
}

.wasm-terminal-frame.wasm-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483647 !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
}

.wasm-terminal-frame.wasm-fullscreen .wasm-xterm-canvas-wrapper,
.wasm-terminal-frame.wasm-fullscreen .vm-seamless-viewport {
  min-height: calc(100vh - 85px) !important;
  height: calc(100vh - 85px) !important;
}

.wasm-terminal-frame.wasm-fullscreen #realVmIframe {
  min-height: calc(100vh - 85px) !important;
  height: calc(100vh - 85px) !important;
}

.vm-seamless-viewport.v86-mode #realVmIframe {
  margin-top: -44px;
  height: calc(100% + 44px);
}

.wasm-term-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.15rem;
  background: rgba(11, 21, 45, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  gap: 0.75rem;
  flex-wrap: wrap;
}

[data-theme="nebula"] .wasm-term-control-bar {
  background: rgba(14, 18, 59, 0.92);
}

[data-theme="crimson"] .wasm-term-control-bar {
  background: rgba(28, 13, 27, 0.92);
}

[data-theme="light"] .wasm-term-control-bar {
  background: #0d1527;
}

.wasm-term-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.wasm-window-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.w-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.w-dot.dot-close {
  background: #ef4444;
}

.w-dot.dot-min {
  background: #f59e0b;
}

.w-dot.dot-max {
  background: #10b981;
}

.wasm-title-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #ffffff;
}

.title-bold {
  font-weight: 800;
  letter-spacing: 0.5px;
}

.title-tag {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-weight: 700;
}

.wasm-engine-picker {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.2rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.engine-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.engine-badge-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.engine-badge-btn.active {
  background: rgba(0, 245, 155, 0.16);
  color: var(--lime);
  border-color: rgba(0, 245, 155, 0.4);
  box-shadow: 0 0 12px rgba(0, 245, 155, 0.25);
}

[data-theme="nebula"] .engine-badge-btn.active {
  background: rgba(0, 240, 255, 0.16);
  color: #00f0ff;
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

[data-theme="crimson"] .engine-badge-btn.active {
  background: rgba(255, 0, 85, 0.16);
  color: #ff0055;
  border-color: rgba(255, 0, 85, 0.4);
  box-shadow: 0 0 12px rgba(255, 0, 85, 0.25);
}

[data-theme="light"] .engine-badge-btn.active {
  background: rgba(0, 245, 155, 0.2);
  color: #00f59b;
  border-color: rgba(0, 245, 155, 0.5);
}

.engine-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dot-fast {
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}

.dot-wasm {
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
}

.dot-kali {
  background: #e11d48;
  box-shadow: 0 0 6px #e11d48;
}

.wasm-term-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.wasm-metrics-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

.metric-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.18);
}

.status-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 800;
  color: var(--lime);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}

.wasm-action-buttons {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

.term-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.term-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.term-dropdown-wrapper {
  position: relative;
}

.term-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0b152d;
  border: 1px solid var(--border-card);
  border-radius: 0.75rem;
  padding: 0.4rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 230px;
  z-index: 100;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 245, 155, 0.2);
}

.term-dropdown-menu.show {
  display: flex;
}

.term-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}

.term-dropdown-item:hover {
  background: rgba(0, 245, 155, 0.12);
  color: #ffffff;
}

/* Sub-HUD Bar */
.wasm-sub-hud-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1.15rem;
  background: rgba(0, 0, 0, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #94a3b8;
  gap: 1rem;
  flex-wrap: wrap;
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hud-icon {
  color: var(--lime);
  font-size: 0.8rem;
}

.hud-left strong {
  color: #ffffff;
}

.hud-quick-cmds {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.hud-cmd-pill {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.hud-cmd-pill:hover {
  background: rgba(56, 189, 248, 0.18);
  color: #ffffff;
  border-color: #38bdf8;
}

.hud-cmd-pill.copied {
  background: rgba(0, 245, 155, 0.2);
  color: var(--lime);
  border-color: var(--lime);
}

/* Viewport & Iframe Wrapper */
.wasm-xterm-canvas-wrapper {
  flex: 1;
  min-height: 540px;
  background: #000000;
  padding: 0;
  position: relative;
  overflow: hidden;
}

[data-theme="nebula"] .wasm-xterm-canvas-wrapper {
  background: #000000;
}

[data-theme="crimson"] .wasm-xterm-canvas-wrapper {
  background: #000000;
}

[data-theme="light"] .wasm-xterm-canvas-wrapper {
  background: #000000;
}

.vm-seamless-viewport {
  width: 100%;
  height: 540px;
  min-height: 540px;
  position: relative;
  overflow: hidden;
  background: #000000;
}

#realVmIframe {
  width: 100%;
  height: calc(100% + 32px);
  min-height: 540px;
  border: none;
  display: block;
  background: #000000;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#realVmIframe::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.wasm-term-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1rem;
  background: rgba(5, 10, 22, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.status-left,
.status-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.status-sep {
  opacity: 0.35;
}

/* Fallback terminal renderer */
.wasm-fallback-term {
  width: 100%;
  height: 100%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
}

.fallback-output {
  flex: 1;
  overflow-y: auto;
  color: #cbd5e1;
  font-size: 0.82rem;
  white-space: pre-wrap;
  line-height: 1.4;
  padding: 0.5rem;
}

.fallback-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fallback-prompt {
  color: var(--lime);
  font-weight: 700;
  font-size: 0.82rem;
}

.fallback-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

/* ==========================================================================
   TERMINAL PAGE LAYOUT & CHEATSHEET CONTROLS
   ========================================================================== */
.terminal-page-hero {
  padding: 8.5rem 0 2rem;
  text-align: center;
  position: relative;
}

.terminal-page-hero .section-badge {
  margin: 0 auto 1rem;
}

.terminal-page-hero h1 {
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.terminal-page-hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 720px;
  margin: 0 auto 1.5rem;
}

.term-arena-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.75rem;
  margin-bottom: 5rem;
}

@media (max-width: 1100px) {
  .term-arena-layout {
    grid-template-columns: 1fr;
  }
}

.term-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.term-sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
}

.term-sidebar-card:hover {
  border-color: var(--border-card-hover);
}

.term-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-family: var(--font-mono);
}

.term-cheatsheet-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.term-cheat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.6rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s;
  cursor: pointer;
}

[data-theme="light"] .term-cheat-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.term-cheat-item:hover {
  background: rgba(0, 245, 155, 0.08);
  border-color: rgba(0, 245, 155, 0.3);
}

[data-theme="nebula"] .term-cheat-item:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.3);
}

[data-theme="crimson"] .term-cheat-item:hover {
  background: rgba(255, 0, 85, 0.08);
  border-color: rgba(255, 0, 85, 0.3);
}

.term-cheat-cmd {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--lime);
}

[data-theme="nebula"] .term-cheat-cmd {
  color: #00f0ff;
}

[data-theme="crimson"] .term-cheat-cmd {
  color: #ff0055;
}

[data-theme="light"] .term-cheat-cmd {
  color: #0284c7;
}

.term-cheat-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.term-cheat-btn-run {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  cursor: pointer;
  transition: all 0.15s;
}

.term-cheat-btn-run:hover {
  background: var(--lime);
  color: #030712;
}

.term-iso-select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-light);
  border-radius: 0.6rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  outline: none;
  margin-bottom: 0.75rem;
}

[data-theme="light"] .term-iso-select {
  background: #ffffff;
}

.term-target-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.term-target-pill.active {
  border-color: var(--lime);
  background: rgba(0, 245, 155, 0.08);
}

[data-theme="nebula"] .term-target-pill.active {
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.08);
}

[data-theme="crimson"] .term-target-pill.active {
  border-color: #ff0055;
  background: rgba(255, 0, 85, 0.08);
}

.fs-node-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}

.fs-node-row:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

/* ==========================================================================
   CINEMATIC VOLUMETRIC SPOTLIGHT & 3D CYBER HERO STAGE (TryHackMe / HTB Style)
   ========================================================================== */
.hero-section {
  overflow: visible !important;
}

/* Volumetric Overhead Spotlight Beam */
.hero-volumetric-spotlight {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 850px;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 65% 55% at 50% 0%, rgba(0, 245, 155, 0.28) 0%, rgba(0, 210, 255, 0.15) 35%, rgba(15, 23, 42, 0) 75%);
  filter: blur(28px);
  opacity: 0.85;
}

.hero-volumetric-beam {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 750px;
  pointer-events: none;
  z-index: 2;
  background: conic-gradient(from 165deg at 50% 0%, transparent 0deg, rgba(0, 245, 155, 0.18) 15deg, rgba(0, 210, 255, 0.22) 25deg, rgba(255, 255, 255, 0.25) 30deg, rgba(0, 210, 255, 0.22) 35deg, rgba(0, 245, 155, 0.18) 45deg, transparent 60deg);
  filter: blur(16px);
  mix-blend-mode: screen;
  opacity: 0.75;
}

[data-theme="dark"] .hero-volumetric-spotlight,
[data-theme="nebula"] .hero-volumetric-spotlight {
  opacity: 1;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(0, 245, 155, 0.35) 0%, rgba(0, 210, 255, 0.22) 40%, rgba(3, 7, 18, 0) 80%);
}

/* Floating 3D Cyber Assets on Hero Flanks */
.hero-flank-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.floating-drone-card {
  position: absolute;
  top: 18%;
  left: 3%;
  width: 250px;
  background: rgba(11, 21, 45, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 245, 155, 0.35);
  border-radius: 1.25rem;
  padding: 0.85rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 245, 155, 0.2);
  pointer-events: auto;
  animation: floatDrone 6s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.floating-drone-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 245, 155, 0.35);
}

@keyframes floatDrone {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

.floating-drone-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 0.9rem;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.drone-status-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--lime);
}

.drone-meta-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 0.35rem;
  letter-spacing: -0.01em;
}

/* Event Details Glass Card (Floating Right) */
.floating-event-card {
  position: absolute;
  top: 16%;
  right: 3%;
  width: 290px;
  background: rgba(11, 21, 45, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 210, 255, 0.3);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 210, 255, 0.18);
  pointer-events: auto;
  text-align: left;
  animation: floatEventCard 7s ease-in-out infinite 1s;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-event-card:hover {
  transform: translateY(-8px);
  border-color: var(--lime);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 245, 155, 0.25);
}

@keyframes floatEventCard {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

.event-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--lime);
  background: rgba(0, 245, 155, 0.12);
  border: 1px solid rgba(0, 245, 155, 0.3);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.event-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.event-details-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.15rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-details-list li {
  font-size: 0.78rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.4;
}

.event-details-list li span.accent {
  color: var(--lime);
  font-weight: 600;
}

.event-btn-row {
  display: flex;
  gap: 0.5rem;
}

.btn-event-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--gradient-btn-lime);
  color: #070c18;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(0, 245, 155, 0.3);
}

.btn-event-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 245, 155, 0.45);
}

.btn-event-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-event-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

/* Hide or tuck floating cards on smaller screens */
@media (max-width: 1280px) {
  .floating-drone-card {
    display: none !important;
  }

  .floating-event-card {
    display: none !important;
  }
}

/* ==========================================================================
   FEATURE QUICK-BENEFITS RIBBON (4 Glass Cards)
   ========================================================================== */
.benefits-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1140px;
  margin: 3.5rem auto 0 auto;
  position: relative;
  z-index: 10;
}

.benefit-glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  border-radius: 1.15rem;
  padding: 1.25rem 1.15rem;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .benefit-glass-card,
[data-theme="nebula"] .benefit-glass-card {
  background: rgba(11, 21, 45, 0.65);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
}

.benefit-glass-card:hover {
  transform: translateY(-4px);
  border-color: var(--lime);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08), 0 0 20px var(--lime-glow);
}

.benefit-badge-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 0.85rem;
  background: rgba(0, 245, 155, 0.1);
  border: 1px solid rgba(0, 245, 155, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-info h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}

.benefit-info p {
  font-size: 0.77rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 1024px) {
  .benefits-ribbon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .benefits-ribbon-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   INTERACTIVE WAVY QUEST MAP SECTION (THM Style Mission Roadmap)
   ========================================================================== */
.quest-map-section {
  padding: 7rem 0 6rem 0;
  position: relative;
  background: radial-gradient(circle at 50% 20%, rgba(14, 30, 59, 0.95) 0%, #030712 70%);
  color: #ffffff;
  overflow: hidden;
  z-index: 5;
}

[data-theme="light"] .quest-map-section {
  background: radial-gradient(circle at 50% 20%, #0f1d3a 0%, #070c18 80%);
}

.quest-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4rem auto;
}

.quest-header .section-title {
  color: #ffffff !important;
}

.quest-header .section-desc {
  color: #94a3b8;
}

.quest-path-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 480px;
}

.quest-spline-svg {
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 220px;
  pointer-events: none;
  z-index: 1;
}

.animated-path-dash {
  animation: dashFlow 25s linear infinite;
}

@keyframes dashFlow {
  to {
    stroke-dashoffset: -400;
  }
}

.quest-nodes-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.quest-station-card {
  background: rgba(11, 21, 45, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem;
  transition: var(--transition-smooth);
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.quest-station-card:hover {
  transform: translateY(-8px);
  border-color: var(--lime);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px var(--lime-glow);
}

.station-node-icon {
  position: relative;
  width: 54px;
  height: 54px;
  margin-bottom: 1.25rem;
}

.node-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 245, 155, 0.5);
  animation: rotateNodeRing 14s linear infinite;
}

@keyframes rotateNodeRing {
  100% {
    transform: rotate(360deg);
  }
}

.node-core-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 245, 155, 0.25) 0%, rgba(0, 210, 255, 0.15) 100%);
  border: 2px solid var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  box-shadow: 0 0 20px var(--lime-glow);
}

.station-index {
  position: absolute;
  top: -4px;
  right: -6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 900;
  color: #070c18;
  background: var(--lime);
  border-radius: 9999px;
  padding: 2px 6px;
}

.station-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.station-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
}

.badge-blue {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.badge-cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-lime {
  background: rgba(0, 245, 155, 0.15);
  color: var(--lime);
  border: 1px solid rgba(0, 245, 155, 0.3);
}

.badge-red {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.station-time {
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.station-info h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.station-info p {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 1rem;
  flex: 1;
}

.station-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.station-tags span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
}

@media (max-width: 1024px) {
  .quest-nodes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quest-spline-svg {
    display: none;
  }
}

@media (max-width: 640px) {
  .quest-nodes-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SQUAD MATCHMAKING & BATTLE ARENA LOBBY (TryHackMe CYBERX Squad Card)
   ========================================================================== */
.squad-battle-section {
  padding: 6rem 0;
  position: relative;
  background: var(--bg-secondary);
  z-index: 5;
}

.squad-lobby-box {
  max-width: 840px;
  margin: 0 auto;
  background: rgba(11, 21, 45, 0.85);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 245, 155, 0.3);
  border-radius: 1.75rem;
  padding: 3rem 2.5rem;
  position: relative;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 245, 155, 0.15);
  color: #ffffff;
  overflow: hidden;
}

.squad-lobby-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 350px;
  background: radial-gradient(circle, rgba(0, 245, 155, 0.22) 0%, transparent 70%);
  filter: blur(35px);
  pointer-events: none;
}

.squad-avatar-wrapper {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 1.25rem auto;
}

.squad-avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--lime);
  box-shadow: 0 0 25px var(--lime-glow);
}

.squad-verified-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lime);
  color: #070c18;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  border: 2px solid #0b152d;
}

.squad-badge-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lime);
  background: rgba(0, 245, 155, 0.1);
  border: 1px solid rgba(0, 245, 155, 0.25);
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}

.squad-team-name {
  font-size: 1.85rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}

.squad-desc {
  font-size: 0.88rem;
  color: #cbd5e1;
  max-width: 560px;
  margin: 0 auto 2rem auto;
  line-height: 1.55;
}

.squad-roster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.roster-slot {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 0.85rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  position: relative;
  transition: all 0.2s;
}

.slot-filled {
  border-color: rgba(0, 245, 155, 0.25);
}

.slot-open {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.2);
}

.slot-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 245, 155, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--lime);
}

.slot-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slot-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-role {
  font-size: 0.65rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.slot-status-dot.online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  margin-left: auto;
}

.slot-status-badge {
  font-size: 0.62rem;
  color: #38bdf8;
  font-family: var(--font-mono);
  margin-left: auto;
}

.squad-invite-container {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.15rem;
  padding: 1.25rem;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.squad-invite-label {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 0.65rem;
  font-weight: 600;
}

.squad-copy-row {
  display: flex;
  gap: 0.5rem;
}

.squad-invite-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  outline: none;
}

.btn-copy-squad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gradient-btn-lime);
  border: none;
  color: #070c18;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.65rem 1.25rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(0, 245, 155, 0.3);
}

.btn-copy-squad:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 245, 155, 0.45);
}

@media (max-width: 860px) {
  .squad-roster-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .squad-roster-grid {
    grid-template-columns: 1fr;
  }

  .squad-copy-row {
    flex-direction: column;
  }
}

/* ==========================================================================
   CAPABILITY GAPS & SHOWCASE SECTION (THM Enterprise Darker Does)
   ========================================================================== */
.capability-gaps-section {
  padding: 7rem 0;
  position: relative;
  background: var(--bg-primary);
  z-index: 5;
}

.gaps-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem auto;
}

.gaps-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1140px;
  margin: 0 auto 3.5rem auto;
}

.gap-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  text-align: left;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.gap-card:hover {
  transform: translateY(-6px);
  border-color: var(--lime);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 25px var(--lime-glow);
}

.gap-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.9rem;
  background: rgba(0, 245, 155, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.gap-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.65rem;
  letter-spacing: -0.01em;
}

.gap-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  flex: 1;
}

.gap-learn-more {
  color: var(--lime-dark);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

[data-theme="dark"] .gap-learn-more,
[data-theme="nebula"] .gap-learn-more {
  color: var(--lime);
}

.gap-learn-more:hover {
  gap: 8px;
}

/* Widescreen Cyber Command Banner Showcase */
.warzone-banner-showcase {
  max-width: 1140px;
  margin: 0 auto;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 245, 155, 0.15);
  border: 1px solid rgba(0, 245, 155, 0.35);
}

.showcase-banner-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.showcase-banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.88) 40%, rgba(3, 7, 18, 0.98) 100%);
  padding: 3rem 2.5rem 2rem 2.5rem;
  text-align: left;
  color: #ffffff;
}

.showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lime);
  background: rgba(0, 245, 155, 0.12);
  border: 1px solid rgba(0, 245, 155, 0.3);
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.showcase-banner-overlay h3 {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.showcase-banner-overlay p {
  font-size: 0.9rem;
  color: #cbd5e1;
  max-width: 680px;
  margin: 0;
}

@media (max-width: 900px) {
  .gaps-cards-grid {
    grid-template-columns: 1fr;
  }

  .showcase-banner-img {
    height: 280px;
  }
}

/* ==========================================================================
   CROSS-PAGE CINEMATIC POLISH & THEME CONTRAST ENHANCEMENTS
   ========================================================================== */

/* 1. Universal Partner Logos Crisp Silver-White Inversion in Dark/Nebula/Crimson */
[data-theme="dark"] .partner-logo-item,
[data-theme="nebula"] .partner-logo-item,
[data-theme="crimson"] .partner-logo-item {
  filter: brightness(0) invert(1) opacity(0.75) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .partner-logo-item:hover,
[data-theme="nebula"] .partner-logo-item:hover,
[data-theme="crimson"] .partner-logo-item:hover {
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)) !important;
  transform: scale(1.12);
}

/* 2. Hero Stats Banner & Benefits Cards Unified Theme Styling */
[data-theme="dark"] .hero-stats-banner,
[data-theme="nebula"] .hero-stats-banner,
[data-theme="crimson"] .hero-stats-banner {
  background: rgba(11, 21, 45, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="crimson"] .hero-stats-banner {
  background: rgba(28, 13, 27, 0.82) !important;
  border-color: rgba(255, 0, 85, 0.28) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 0, 85, 0.15) !important;
}

[data-theme="dark"] .stat-num,
[data-theme="nebula"] .stat-num,
[data-theme="crimson"] .stat-num {
  color: #ffffff !important;
}

[data-theme="dark"] .stat-label,
[data-theme="nebula"] .stat-label,
[data-theme="crimson"] .stat-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .stat-divider,
[data-theme="nebula"] .stat-divider,
[data-theme="crimson"] .stat-divider {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Benefits Ribbon Glass Cards in Dark / Nebula / Crimson */
[data-theme="dark"] .benefit-glass-card,
[data-theme="nebula"] .benefit-glass-card,
[data-theme="crimson"] .benefit-glass-card {
  background: rgba(11, 21, 45, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="crimson"] .benefit-glass-card {
  background: rgba(28, 13, 27, 0.78) !important;
  border-color: rgba(255, 0, 85, 0.2) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 0, 85, 0.1) !important;
}

[data-theme="dark"] .benefit-info h4,
[data-theme="nebula"] .benefit-info h4,
[data-theme="crimson"] .benefit-info h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .benefit-info p,
[data-theme="nebula"] .benefit-info p,
[data-theme="crimson"] .benefit-info p {
  color: #cbd5e1 !important;
}

/* 3. Global `.inner-hero` Cinematic Volumetric Upgrade for All Pages */
.inner-hero {
  position: relative;
  overflow: hidden;
  padding: 8.5rem 0 3.5rem;
}

.inner-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 480px;
  background: radial-gradient(ellipse 65% 50% at 50% 0%, rgba(0, 245, 155, 0.2) 0%, rgba(37, 99, 235, 0.1) 45%, transparent 75%);
  filter: blur(35px);
  pointer-events: none;
  z-index: 1;
}

.inner-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}

[data-theme="dark"] .inner-hero::before {
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0, 245, 155, 0.28) 0%, rgba(0, 210, 255, 0.14) 45%, transparent 80%);
}

[data-theme="nebula"] .inner-hero::before {
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0, 240, 255, 0.3) 0%, rgba(129, 140, 248, 0.18) 45%, transparent 80%);
}

[data-theme="crimson"] .inner-hero::before {
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 0, 85, 0.32) 0%, rgba(251, 146, 60, 0.15) 45%, transparent 80%);
}

.inner-hero .page-container,
.inner-hero .container {
  position: relative;
  z-index: 2;
}

/* Luminous Metrics Bar in Inner Hero */
.inner-metrics-bar {
  background: rgba(11, 21, 45, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 245, 155, 0.25) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 245, 155, 0.1) !important;
}

[data-theme="nebula"] .inner-metrics-bar {
  background: rgba(14, 18, 59, 0.78) !important;
  border-color: rgba(0, 240, 255, 0.3) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 240, 255, 0.15) !important;
}

[data-theme="crimson"] .inner-metrics-bar {
  background: rgba(28, 13, 27, 0.8) !important;
  border-color: rgba(255, 0, 85, 0.3) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 0, 85, 0.15) !important;
}

/* 4. Filter Toolbar & Search Field Glow */
.filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.search-box-wrap {
  position: relative;
  width: 100%;
}

.search-input-field {
  width: 100%;
  background: rgba(11, 21, 45, 0.65);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 0.95rem 1.25rem 0.95rem 3rem;
  color: var(--text-primary);
  font-size: 0.92rem;
  font-family: var(--font-sans);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

[data-theme="dark"] .search-input-field,
[data-theme="nebula"] .search-input-field,
[data-theme="crimson"] .search-input-field {
  background: rgba(11, 21, 45, 0.75);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.search-input-field:focus {
  border-color: var(--lime);
  box-shadow: 0 0 25px var(--lime-glow);
  background: rgba(11, 21, 45, 0.9);
}

.filter-pills-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filter-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-sans);
}

[data-theme="dark"] .filter-pill,
[data-theme="nebula"] .filter-pill,
[data-theme="crimson"] .filter-pill {
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

.filter-pill:hover {
  border-color: var(--lime);
  color: #ffffff;
  transform: translateY(-2px);
}

.filter-pill.active {
  background: var(--lime) !important;
  color: #070c18 !important;
  border-color: var(--lime) !important;
  font-weight: 800;
  box-shadow: 0 0 18px var(--lime-glow);
}

[data-theme="nebula"] .filter-pill.active {
  background: #00f0ff !important;
  color: #040412 !important;
  border-color: #00f0ff !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.45);
}

[data-theme="crimson"] .filter-pill.active {
  background: #ff0055 !important;
  color: #ffffff !important;
  border-color: #ff0055 !important;
  box-shadow: 0 0 18px rgba(255, 0, 85, 0.45);
}

/* 5. Enhanced Lab & Challenge Cards */
.lab-card,
.challenge-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.25s ease !important;
  position: relative;
  overflow: hidden;
}

.lab-card:hover,
.challenge-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 30px var(--lime-glow) !important;
  border-color: var(--lime) !important;
}

[data-theme="nebula"] .lab-card:hover,
[data-theme="nebula"] .challenge-card:hover {
  border-color: #00f0ff !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 240, 255, 0.35) !important;
}

[data-theme="crimson"] .lab-card:hover,
[data-theme="crimson"] .challenge-card:hover {
  border-color: #ff0055 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 0, 85, 0.35) !important;
}

/* Difficulty Badges Glowing Halos */
.difficulty-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.diff-easy {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.diff-medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.diff-hard {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.4);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.2);
}

.diff-insane {
  background: rgba(244, 63, 94, 0.18);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.45);
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.3);
}

/* 6. VPN Quick Connect Box & Status Badges */
.vpn-widget-box {
  background: rgba(11, 21, 45, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 245, 155, 0.25) !important;
  border-radius: 1.25rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="crimson"] .vpn-widget-box {
  background: rgba(28, 13, 27, 0.8) !important;
  border-color: rgba(255, 0, 85, 0.25) !important;
}

/* 7. Operator Leaderboard Podium Glass Pedestals */
.podium-pedestal {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.podium-pedestal:hover {
  transform: translateY(-8px);
}

.podium-pedestal.rank-1,
.podium-pedestal.podium-1 {
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 35px rgba(251, 191, 36, 0.35) !important;
}

.podium-pedestal.rank-2,
.podium-pedestal.podium-2 {
  border: 2px solid #94a3b8 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(148, 163, 184, 0.25) !important;
}

.podium-pedestal.rank-3,
.podium-pedestal.podium-3 {
  border: 2px solid #f97316 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(249, 115, 22, 0.25) !important;
}

/* Subtle crown halo behind podium 1 */
.podium-pedestal.podium-1::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 8. Leaderboard Table Elevation */
.leaderboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

.leaderboard-table thead tr th {
  padding: 0.9rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-light);
}

.leaderboard-table tbody tr.lb-row {
  background: var(--bg-card);
  transition: all 0.2s ease;
  border-radius: 0.75rem;
}

.leaderboard-table tbody tr.lb-row td {
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  font-size: 0.88rem;
}

.leaderboard-table tbody tr.lb-row td:first-child {
  border-left: 1px solid var(--border-card);
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.leaderboard-table tbody tr.lb-row td:last-child {
  border-right: 1px solid var(--border-card);
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.leaderboard-table tbody tr.lb-row:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .leaderboard-table tbody tr.lb-row {
  background: #0b152d;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .leaderboard-table tbody tr.lb-row:hover {
  border-color: rgba(0, 245, 155, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 245, 155, 0.12);
}

[data-theme="nebula"] .leaderboard-table tbody tr.lb-row {
  background: #0e123b;
  border-color: rgba(129, 140, 248, 0.15);
}

[data-theme="nebula"] .leaderboard-table tbody tr.lb-row:hover {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 240, 255, 0.15);
}

[data-theme="crimson"] .leaderboard-table tbody tr.lb-row {
  background: #1c0d1b;
  border-color: rgba(244, 63, 94, 0.18);
}

[data-theme="crimson"] .leaderboard-table tbody tr.lb-row:hover {
  border-color: rgba(255, 0, 85, 0.4);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 0, 85, 0.15);
}

/* 9. Cyber Range Interactive Topology Radar */
.topology-visualizer-box {
  background: #060913 !important;
  border: 1px solid rgba(0, 245, 155, 0.2) !important;
  background-image:
    radial-gradient(rgba(0, 245, 155, 0.08) 1.5px, transparent 1.5px),
    linear-gradient(rgba(0, 245, 155, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 155, 0.03) 1px, transparent 1px) !important;
  background-size: 24px 24px, 48px 48px, 48px 48px !important;
  position: relative;
}

[data-theme="crimson"] .topology-visualizer-box {
  background: #0d040a !important;
  border-color: rgba(255, 0, 85, 0.25) !important;
  background-image:
    radial-gradient(rgba(255, 0, 85, 0.1) 1.5px, transparent 1.5px),
    linear-gradient(rgba(255, 0, 85, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 85, 0.04) 1px, transparent 1px) !important;
}

[data-theme="nebula"] .topology-visualizer-box {
  background: #050616 !important;
  border-color: rgba(0, 240, 255, 0.25) !important;
  background-image:
    radial-gradient(rgba(0, 240, 255, 0.1) 1.5px, transparent 1.5px),
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px) !important;
}

.topo-node {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
}

.topo-node:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 245, 155, 0.2);
}

.topo-node.compromised {
  border-color: rgba(225, 29, 72, 0.5) !important;
  box-shadow: 0 0 15px rgba(225, 29, 72, 0.2) !important;
}

/* 10. Live Activity Stream Glowing Items */
.activity-item {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}

.activity-item:hover {
  transform: translateX(4px);
}

.activity-item.first-blood {
  border-left: 3px solid #e11d48 !important;
  box-shadow: inset 4px 0 12px rgba(225, 29, 72, 0.15);
}

.activity-item.pwn {
  border-left: 3px solid var(--lime) !important;
}

/* 11. Podium Avatar Glowing Rings & First Blood Badges */
.podium-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.podium-avatar-gold {
  width: 68px;
  height: 68px;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 3px solid #f59e0b !important;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.45) !important;
}

.podium-avatar-silver {
  width: 58px;
  height: 58px;
  background: rgba(148, 163, 184, 0.15) !important;
  border: 2px solid #94a3b8 !important;
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.3) !important;
}

.podium-avatar-bronze {
  width: 58px;
  height: 58px;
  background: rgba(217, 119, 6, 0.15) !important;
  border: 2px solid #d97706 !important;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.3) !important;
}

.podium-fb-badge {
  font-size: 0.74rem;
  font-weight: 800;
  font-family: var(--font-mono);
  margin-top: 0.45rem;
  padding: 0.22rem 0.65rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(225, 29, 72, 0.12) !important;
  color: #f43f5e !important;
  border: 1px solid rgba(225, 29, 72, 0.25) !important;
}

.podium-fb-badge.gold {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

/* ==========================================================================
   12. TACTICAL AUDIO TOGGLE, NODE INSPECTOR DRAWER & VM SPAWNER MODAL
   ========================================================================== */

/* Audio Sound Toggle Button */
.audio-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.audio-toggle-btn:hover {
  color: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 12px var(--lime-glow);
}

.audio-toggle-btn.muted {
  opacity: 0.6;
  color: var(--text-muted);
}

/* Range Topology Node Inspector Drawer */
.topo-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.topo-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.topo-drawer {
  position: fixed;
  top: 0;
  right: -520px;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  background: #090e1c;
  border-left: 1px solid var(--border-card);
  z-index: 9999;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 245, 155, 0.15);
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="crimson"] .topo-drawer {
  background: #110610;
  border-left-color: rgba(255, 0, 85, 0.3);
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 0, 85, 0.2);
}

[data-theme="nebula"] .topo-drawer {
  background: #080a22;
  border-left-color: rgba(0, 240, 255, 0.3);
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.2);
}

[data-theme="light"] .topo-drawer {
  background: #ffffff;
  border-left-color: #e2e8f0;
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.15);
}

.topo-drawer.active {
  right: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-card);
  padding-bottom: 1rem;
}

.drawer-title-group h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.drawer-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.drawer-close-btn:hover {
  background: rgba(255, 0, 85, 0.2);
  color: #ff0055;
  border-color: #ff0055;
}

.drawer-section-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.drawer-port-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.drawer-port-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.drawer-port-open {
  color: var(--lime);
  font-weight: 700;
}

.drawer-cve-pill {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  background: rgba(225, 29, 72, 0.12);
  border: 1px solid rgba(225, 29, 72, 0.3);
  color: #f43f5e;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}

.drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.btn-toggle-pwn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.65rem;
  background: rgba(225, 29, 72, 0.15);
  border: 1px solid #e11d48;
  color: #f43f5e;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-toggle-pwn.pwned {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #10b981;
}

/* Target VM Spawner Modal */
.vm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 1.25rem;
}

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

.vm-modal-card {
  width: 520px;
  max-width: 100%;
  background: #090e1c;
  border: 1px solid var(--border-card);
  border-radius: 1.25rem;
  padding: 2.25rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px var(--lime-glow);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

[data-theme="crimson"] .vm-modal-card {
  background: #110610;
  border-color: rgba(255, 0, 85, 0.35);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 0, 85, 0.25);
}

[data-theme="nebula"] .vm-modal-card {
  background: #080a22;
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 240, 255, 0.25);
}

[data-theme="light"] .vm-modal-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.vm-modal-backdrop.active .vm-modal-card {
  transform: scale(1);
}

.spawner-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.spawner-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--lime), #00f0ff);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.spawner-log-line {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spawner-log-line.active {
  color: var(--lime);
  font-weight: 700;
}

/* Card Favorite Star Toggle */
.card-fav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.card-fav-btn:hover,
.card-fav-btn.active {
  color: #f59e0b;
  transform: scale(1.18);
}
/* ==========================================================================
   NEXT-GEN INNOVATIONS: SHADOW PROD SLA, SILICON GLITCHER, PURPLE PATCH,
   LIVING COMPANY NPC WORKFORCE & GHOST COPILOT MITRE ATT&CK REPLAY
   ========================================================================== */

/* 1. SHADOW PROD SLA & COLLATERAL DAMAGE TELEMETRY HUD */
.sla-telemetry-hud {
  background: rgba(11, 21, 45, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 245, 155, 0.25);
  border-radius: 1rem;
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 245, 155, 0.08);
  transition: all 0.3s ease;
}

.sla-telemetry-hud.opsec-alert {
  border-color: rgba(244, 63, 94, 0.6);
  background: rgba(30, 8, 16, 0.85);
  box-shadow: 0 10px 30px rgba(244, 63, 94, 0.3), 0 0 20px rgba(244, 63, 94, 0.2);
}

.sla-metrics-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sla-metric-box {
  display: flex;
  flex-direction: column;
}

.sla-metric-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}

.sla-metric-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sla-metric-val.green { color: #00f59b; }
.sla-metric-val.amber { color: #f59e0b; }
.sla-metric-val.red { color: #f43f5e; }

.sla-opsec-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(0, 245, 155, 0.12);
  border: 1px solid rgba(0, 245, 155, 0.35);
  color: #00f59b;
}

.sla-opsec-pill.alert {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.5);
  color: #f43f5e;
  animation: pulseAlert 1.5s infinite;
}

@keyframes pulseAlert {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

/* 2. PURPLE PATCH REMEDIATION SANDBOX */
.purple-badge {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
}

.btn-purple-patch {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #ffffff;
  border: 1px solid rgba(192, 132, 252, 0.35);
  padding: 0.65rem 1.25rem;
  border-radius: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
}

.btn-purple-patch:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.5);
}

.patch-editor-container {
  background: #060b17;
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 0.75rem;
  overflow: hidden;
  margin: 1rem 0;
}

.patch-editor-header {
  background: #0c1427;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #cbd5e1;
}

.patch-code-textarea {
  width: 100%;
  height: 180px;
  background: transparent;
  color: #38bdf8;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 1rem;
  border: none;
  resize: vertical;
  outline: none;
  line-height: 1.5;
}

.patch-probe-result {
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.patch-probe-result.pass {
  background: rgba(0, 245, 155, 0.08);
  border-color: rgba(0, 245, 155, 0.3);
  color: #00f59b;
}

.patch-probe-result.fail {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.3);
  color: #f43f5e;
}

/* 3. LIVING COMPANY: SYNTHETIC NPC WORKFORCE CHAT */
.npc-workforce-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  min-height: 520px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 1.25rem;
  overflow: hidden;
}

@media (max-width: 900px) {
  .npc-workforce-grid {
    grid-template-columns: 1fr;
  }
}

.npc-roster {
  background: rgba(6, 11, 24, 0.6);
  border-right: 1px solid var(--border-light);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.npc-card {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
}

.npc-card:hover, .npc-card.active {
  background: rgba(0, 210, 255, 0.08);
  border-color: rgba(0, 210, 255, 0.3);
}

.npc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #00d2ff;
  border: 1.5px solid rgba(0, 210, 255, 0.4);
  flex-shrink: 0;
}

.npc-info-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
}

.npc-info-role {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.npc-chat-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.npc-chat-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
}

.npc-chat-messages {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-bubble {
  max-width: 80%;
  padding: 0.85rem 1.15rem;
  border-radius: 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
}

.chat-bubble.npc {
  align-self: flex-start;
  background: #0f1932;
  border: 1px solid rgba(0, 210, 255, 0.2);
  color: #f1f5f9;
}

.chat-bubble.user {
  align-self: flex-end;
  background: #0284c7;
  color: #ffffff;
  border-bottom-right-radius: 0.2rem;
}

.npc-quick-prompts {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem 0;
  flex-wrap: wrap;
}

.quick-prompt-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.quick-prompt-chip:hover {
  background: rgba(0, 245, 155, 0.1);
  border-color: var(--lime);
  color: var(--lime);
}

.npc-input-bar {
  padding: 1rem 1.5rem;
  display: flex;
  gap: 0.75rem;
}

.npc-input-field {
  flex: 1;
  background: #080d1a;
  border: 1px solid var(--border-light);
  border-radius: 0.6rem;
  padding: 0.65rem 1rem;
  color: #ffffff;
  font-size: 0.85rem;
  outline: none;
}

/* 4. SILICON GLITCHER & LOGIC ANALYZER WORKBENCH */
.glitcher-container {
  background: #040813;
  border: 1px solid rgba(0, 210, 255, 0.25);
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.glitcher-canvas-wrapper {
  background: #020409;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
  height: 220px;
}

.glitcher-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.glitcher-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glitcher-slider-box label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
}

.glitcher-slider {
  width: 100%;
  accent-color: #00d2ff;
  cursor: pointer;
}

.btn-trigger-glitch {
  background: linear-gradient(135deg, #0284c7 0%, #00d2ff 100%);
  color: #030712;
  font-weight: 900;
  font-family: var(--font-mono);
  border: none;
  padding: 0.85rem 1.5rem;
  border-radius: 0.6rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.4);
}

.btn-trigger-glitch:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 210, 255, 0.6);
}

/* 5. GHOST COPILOT MITRE ATT&CK REPLAY MODAL */
.mitre-modal-card {
  width: 780px;
  max-width: 95%;
  background: #080e1e;
  border: 1px solid rgba(0, 245, 155, 0.3);
  border-radius: 1.25rem;
  padding: 2.25rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 245, 155, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mitre-timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .mitre-timeline-grid {
    grid-template-columns: 1fr;
  }
}

.mitre-stage-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.6rem;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mitre-stage-card.completed {
  border-color: rgba(0, 245, 155, 0.4);
  background: rgba(0, 245, 155, 0.05);
}

.mitre-stage-num {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--lime);
  font-weight: 800;
}

.mitre-stage-name {
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
}

.mitre-technique-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.2rem 0.4rem;
  background: rgba(0, 210, 255, 0.1);
  color: #38bdf8;
  border-radius: 0.3rem;
  display: inline-block;
}

/* ==========================================================================
   LIVE-SERVICE & GAMIFICATION EXPANSION:
   OPERATION PASS, BLUEPRINT GARAGE, SHRINKING SUBNET, TURF WARS, BLACK MARKET
   ========================================================================== */

/* 1. Nav Ops Pass Badge */
.nav-badge-ops {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(225, 29, 72, 0.2) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 0.35rem;
  animation: pulseOpsGlow 2.5s infinite;
}

@keyframes pulseOpsGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(245, 158, 11, 0.2); }
  50% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.6); }
}

/* 2. Season Hero Banner */
.ops-hero-card {
  background: radial-gradient(circle at 85% 20%, rgba(245, 158, 11, 0.12) 0%, rgba(11, 21, 45, 0.8) 60%), #040814;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 1.25rem;
  padding: 2rem 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(245, 158, 11, 0.1);
  margin-bottom: 2rem;
}

.ops-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid #f59e0b;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.ops-hero-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.ops-hero-title span {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f43f5e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ops-xp-bar-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  height: 14px;
  position: relative;
  overflow: hidden;
  margin: 1rem 0;
}

.ops-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #e11d48, #00f59b);
  border-radius: 9999px;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
  transition: width 0.5s ease;
}

/* ==========================================================================
   3. AAA DUAL-TRACK OPERATION PASS (FREE FIRE & ASPHALT 9 FIDELITY)
   ========================================================================== */

/* Outer Armored Mecha-Chassis Frame */
.pass-track-wrapper {
  background: radial-gradient(circle at 50% 10%, #0d172e 0%, #040814 60%, #02040a 100%);
  border: 2px solid #1e293b;
  border-radius: 1.5rem;
  padding: 1.75rem;
  margin-bottom: 2.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9),
              0 0 40px rgba(0, 245, 155, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -2px 0 rgba(0, 0, 0, 0.8);
}

/* Carbon & Tech Grid Overlay */
.pass-track-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(0, 245, 155, 0.08) 0%, transparent 70%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* 4-Corner Titanium Mecha Brackets */
.pass-corner-bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 2;
}
.pass-corner-bracket.tl {
  top: 8px; left: 8px;
  border-top: 3px solid #00f59b;
  border-left: 3px solid #00f59b;
  border-top-left-radius: 6px;
  filter: drop-shadow(0 0 6px #00f59b);
}
.pass-corner-bracket.tr {
  top: 8px; right: 8px;
  border-top: 3px solid #fbbf24;
  border-right: 3px solid #fbbf24;
  border-top-right-radius: 6px;
  filter: drop-shadow(0 0 6px #fbbf24);
}
.pass-corner-bracket.bl {
  bottom: 8px; left: 8px;
  border-bottom: 3px solid #00f59b;
  border-left: 3px solid #00f59b;
  border-bottom-left-radius: 6px;
  filter: drop-shadow(0 0 6px #00f59b);
}
.pass-corner-bracket.br {
  bottom: 8px; right: 8px;
  border-bottom: 3px solid #fbbf24;
  border-right: 3px solid #fbbf24;
  border-bottom-right-radius: 6px;
  filter: drop-shadow(0 0 6px #fbbf24);
}

/* Top HUD Header Bar */
.pass-top-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .pass-top-hud {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.25rem;
  }
}

.pass-hud-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pass-season-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 900;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: fit-content;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.pass-season-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
  animation: pulseOpsGlow 1.5s infinite;
}

.pass-glory-title {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.15);
}

.pass-glory-sub {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

/* Center Holographic Hex HUD Node */
.pass-center-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(2, 6, 23, 0.95) 100%);
  border: 2px solid #00f59b;
  border-radius: 1rem;
  box-shadow: 0 0 25px rgba(0, 245, 155, 0.25), inset 0 0 15px rgba(0, 245, 155, 0.1);
  position: relative;
  min-width: 220px;
}

.pass-center-hud::before,
.pass-center-hud::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: #00f59b;
}
.pass-center-hud::before {
  top: -2px; left: -2px;
  border-top: 2px solid #00f59b;
  border-left: 2px solid #00f59b;
}
.pass-center-hud::after {
  bottom: -2px; right: -2px;
  border-bottom: 2px solid #00f59b;
  border-right: 2px solid #00f59b;
}

.hud-tier-label {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 0 15px rgba(0, 245, 155, 0.6);
}

.hud-xp-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #00f59b;
  font-weight: 700;
  margin-top: 0.25rem;
}

.hud-mini-meter {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  margin-top: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(0, 245, 155, 0.3);
}

.hud-mini-fill {
  height: 100%;
  width: 86.25%;
  background: linear-gradient(90deg, #00f59b, #38bdf8);
  box-shadow: 0 0 10px #00f59b;
}

/* Golden 3D Beveled Unlock Elite Pass Button */
.pass-hud-right {
  display: flex;
  justify-content: flex-end;
}

.btn-unlock-elite {
  position: relative;
  padding: 0.85rem 1.6rem;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 40%, #b45309 100%);
  border: 2px solid #fef08a;
  border-radius: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 900;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4),
              0 0 20px rgba(245, 158, 11, 0.3),
              inset 0 2px 3px rgba(255, 255, 255, 0.7),
              inset 0 -2px 5px rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.btn-unlock-elite::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: eliteShimmer 3s infinite;
}

@keyframes eliteShimmer {
  0% { left: -100%; }
  30% { left: 160%; }
  100% { left: 160%; }
}

.btn-unlock-elite:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px rgba(245, 158, 11, 0.6),
              0 0 35px rgba(245, 158, 11, 0.5),
              inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

.btn-unlock-elite:active {
  transform: translateY(1px);
}

/* Main Arena Grid: Dual-Track Raceway + Free Fire Operator Showcase */
.pass-main-arena {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

@media (max-width: 1200px) {
  .pass-main-arena {
    grid-template-columns: 1fr;
  }
}

/* The Dual-Track Raceway Enclosure */
.pass-raceway-box {
  background: rgba(10, 16, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
}

/* Sticky Left Track Badges + Horizontal Viewport Layout */
.pass-track-lane-wrapper {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

/* Left Rail Track Badges (Free Track & Elite Pro Track) */
.pass-sticky-left-rail {
  width: 120px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 0;
  z-index: 3;
  border-right: 2px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(6, 11, 25, 0.95) 0%, rgba(6, 11, 25, 0.8) 100%);
}

.track-badge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0.4rem;
  border-radius: 0.75rem;
  text-align: center;
  position: relative;
  transition: all 0.25s ease;
}

.track-badge-box.free {
  background: linear-gradient(180deg, rgba(0, 245, 155, 0.15) 0%, rgba(4, 20, 20, 0.6) 100%);
  border: 1px solid rgba(0, 245, 155, 0.4);
  box-shadow: 0 0 15px rgba(0, 245, 155, 0.15);
}

.track-badge-box.elite {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(30, 20, 4, 0.6) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
}

.track-badge-icon {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
  line-height: 1;
}

.track-badge-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}
.track-badge-box.free .track-badge-label {
  color: #00f59b;
  text-shadow: 0 0 8px rgba(0, 245, 155, 0.5);
}
.track-badge-box.elite .track-badge-label {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.track-rail-junction {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.track-rail-junction::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #00f59b 0%, #fbbf24 100%);
  box-shadow: 0 0 8px rgba(0, 245, 155, 0.6);
}

/* Horizontal Viewport */
.pass-horizontal-viewport {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0.5rem 1rem 0.75rem;
  scroll-behavior: smooth;
}

.pass-horizontal-viewport::-webkit-scrollbar {
  height: 10px;
}
.pass-horizontal-viewport::-webkit-scrollbar-track {
  background: rgba(2, 6, 23, 0.8);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.pass-horizontal-viewport::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00f59b, #f59e0b);
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(0, 245, 155, 0.5);
}

.pass-tiers-grid {
  display: flex;
  gap: 1.1rem;
  min-width: max-content;
  position: relative;
}

/* Individual Dual Tier Column */
.tier-column-dual {
  width: 145px;
  min-width: 145px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  flex-shrink: 0;
}

/* Free Track Card (Top Row) */
.tier-free-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(4, 9, 20, 0.95) 100%);
  border: 1.5px solid rgba(0, 245, 155, 0.35);
  border-radius: 0.9rem;
  padding: 0.75rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-height: 185px;
  justify-content: space-between;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tier-free-card:hover {
  border-color: #00f59b;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 245, 155, 0.25);
}

.tier-header-tab {
  width: 100%;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tier-header-tab.free-tab {
  background: rgba(0, 245, 155, 0.15);
  border: 1px solid rgba(0, 245, 155, 0.4);
  color: #00f59b;
}

/* 3D Reward Asset Chamber */
.item-3d-pod {
  width: 72px;
  height: 72px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0.25rem 0;
  transition: all 0.3s ease;
}

.item-3d-pod.free-pod {
  background: radial-gradient(circle, rgba(0, 245, 155, 0.2) 0%, rgba(2, 6, 23, 0.8) 70%);
  border: 1px solid rgba(0, 245, 155, 0.3);
  box-shadow: 0 0 15px rgba(0, 245, 155, 0.15);
}

.item-3d-pod.pro-pod {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(20, 10, 4, 0.8) 70%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.tier-free-card:hover .item-3d-pod.free-pod,
.tier-elite-card:hover .item-3d-pod.pro-pod {
  transform: scale(1.08) rotate(2deg);
}

.item-svg-art {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.tier-reward-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  line-height: 1.25;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center Timeline Power Conduit & Nodes */
.tier-circuit-junction {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.tier-power-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  z-index: 1;
}

.tier-power-line.active {
  background: linear-gradient(90deg, #00f59b 0%, #38bdf8 50%, #fbbf24 100%);
  box-shadow: 0 0 8px rgba(0, 245, 155, 0.6);
}

.circuit-milestone-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 900;
  position: relative;
  z-index: 2;
  transition: all 0.25s ease;
}

.circuit-milestone-node.completed {
  background: #00f59b;
  color: #030712;
  border: 2px solid #ffffff;
  box-shadow: 0 0 15px rgba(0, 245, 155, 0.8);
}

.circuit-milestone-node.current {
  background: #fbbf24;
  color: #030712;
  border: 2px solid #ffffff;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.9);
  animation: pulseOpsGlow 1.2s infinite;
}

.circuit-milestone-node.locked {
  background: #0f172a;
  color: #64748b;
  border: 2px solid #334155;
}

/* Elite Pro Track Card (Bottom Row) */
.tier-elite-card {
  background: linear-gradient(180deg, rgba(30, 20, 5, 0.9) 0%, rgba(10, 7, 2, 0.95) 100%);
  border: 2px solid rgba(245, 158, 11, 0.5);
  border-radius: 0.9rem;
  padding: 0.75rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-height: 185px;
  justify-content: space-between;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6),
              0 0 20px rgba(245, 158, 11, 0.15),
              inset 0 1px 0 rgba(254, 240, 138, 0.3);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tier-elite-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.tier-elite-card:hover {
  border-color: #fbbf24;
  transform: translateY(3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.4);
}

.tier-header-tab.pro-tab {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.3) 100%);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

/* Buttons in Pass Tiers */
.pass-tier-btn {
  width: 100%;
  padding: 0.38rem 0.5rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
}

.pass-tier-btn.btn-free.ready {
  background: linear-gradient(135deg, #00f59b 0%, #00d2ff 100%);
  color: #030712;
  box-shadow: 0 0 12px rgba(0, 245, 155, 0.5);
}
.pass-tier-btn.btn-free.ready:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 245, 155, 0.8);
}

.pass-tier-btn.btn-elite.ready {
  background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
  color: #000000;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
}
.pass-tier-btn.btn-elite.ready:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.9);
}

.pass-tier-btn.claimed {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: default;
}

.pass-tier-btn.locked {
  background: rgba(255, 255, 255, 0.03);
  color: #475569;
  cursor: not-allowed;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Asphalt 9 Style "TAP HERE TO CLAIM ALL REWARDS" Banner */
.pass-claim-all-banner {
  margin-top: 1.25rem;
  background: linear-gradient(90deg, #b45309 0%, #f59e0b 25%, #fbbf24 50%, #f59e0b 75%, #b45309 100%);
  background-size: 200% 100%;
  animation: bannerShimmer 4s linear infinite;
  border: 2px solid #fef08a;
  border-radius: 0.85rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.8);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

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

.pass-claim-all-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(245, 158, 11, 0.7), 0 0 30px rgba(254, 240, 138, 0.6);
}

.claim-banner-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.claim-banner-laurel {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fef08a;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  font-size: 1.2rem;
}

.claim-banner-text {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 900;
  color: #000000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.claim-banner-pill {
  background: #000000;
  color: #fbbf24;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 900;
  border: 1px solid rgba(254, 240, 138, 0.5);
}

/* Free Fire Style Operator Bundle Showcase (Right Panel) */
.pass-operator-showcase {
  background: linear-gradient(180deg, #111827 0%, #070d1e 50%, #030612 100%);
  border: 2px solid rgba(245, 158, 11, 0.4);
  border-radius: 1.25rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 30px rgba(245, 158, 11, 0.15);
  position: relative;
  overflow: hidden;
}

.pass-operator-showcase::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.showcase-bundle-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase-bundle-rarity {
  background: linear-gradient(135deg, #e11d48, #f59e0b);
  color: #ffffff;
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* Animated 3D Cyber Operative Avatar */
.showcase-avatar-stage {
  width: 100%;
  height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}

.avatar-holo-rings {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px dashed rgba(245, 158, 11, 0.35);
  animation: spinHolo 20s linear infinite;
}

.avatar-holo-rings::after {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 245, 155, 0.3);
  animation: spinHolo 15s linear infinite reverse;
}

@keyframes spinHolo {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.avatar-character-art {
  width: 170px;
  height: 190px;
  position: relative;
  z-index: 2;
  animation: floatOperative 4s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 25px rgba(245, 158, 11, 0.3));
}

@keyframes floatOperative {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.showcase-nameplate {
  text-align: center;
  margin-bottom: 0.85rem;
}

.showcase-operative-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.showcase-operative-sub {
  font-size: 0.75rem;
  color: #38bdf8;
  font-family: var(--font-mono);
  margin-top: 0.2rem;
}

/* 4 Mini Item Tiles */
.showcase-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.showcase-item-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.showcase-item-tile:hover {
  border-color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  transform: translateY(-2px);
}

.showcase-item-tile span {
  font-size: 1.2rem;
  line-height: 1;
}

.showcase-item-tile small {
  font-size: 0.6rem;
  color: #94a3b8;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55px;
}

/* Showcase Action Buttons */
.showcase-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btn-showcase-upgrade {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
  border: 2px solid #fef08a;
  border-radius: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 900;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}

.btn-showcase-upgrade:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(245, 158, 11, 0.6);
}

.btn-showcase-missions {
  width: 100%;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  color: #cbd5e1;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-showcase-missions:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   4. 5-Star Machine Mastery Cards */
.mastery-stars-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #f59e0b;
  font-size: 0.82rem;
}

.mastery-star-empty {
  color: rgba(255, 255, 255, 0.15);
}

.mastery-tier-card {
  background: rgba(10, 16, 32, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.25s ease;
}

.mastery-tier-card:hover {
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.1);
}

.mastery-req-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
}

.mastery-req-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
}

.mastery-req-item.completed {
  color: #00f59b;
  background: rgba(0, 245, 155, 0.06);
}

/* 5. Zero-Day Blueprints & Exploit Garage */
.blueprint-card {
  background: linear-gradient(180deg, #070c1a 0%, #03060f 100%);
  border: 1px solid rgba(0, 210, 255, 0.3);
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.blueprint-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00d2ff, #7c3aed, #fbbf24);
}

.blueprint-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  overflow: hidden;
}

.blueprint-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d2ff, #38bdf8);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* 6. Battle Royale "The Shrinking Subnet" */
.br-arena-container {
  background: #040713;
  border: 1px solid rgba(225, 29, 72, 0.35);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(225, 29, 72, 0.15);
}

.br-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}

.br-killfeed-ticker {
  background: #020409;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.6rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
}

.br-zone-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(225, 29, 72, 0.15);
  border: 1px solid #e11d48;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  color: #f43f5e;
  animation: pulseAlert 1.5s infinite;
}

.br-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
}

.br-player-chip {
  padding: 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s;
}

.br-player-chip.alive {
  border-color: rgba(0, 245, 155, 0.3);
  color: #00f59b;
}

.br-player-chip.eliminated {
  border-color: rgba(244, 63, 94, 0.2);
  color: #64748b;
  text-decoration: line-through;
  opacity: 0.45;
}

.br-player-chip.you {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  font-weight: 800;
}

/* 7. Hex Turf Wars Network Map */
.hex-turf-container {
  background: #030612;
  border: 1px solid rgba(0, 210, 255, 0.25);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.hex-grid-svg {
  width: 100%;
  max-height: 340px;
  display: block;
}

.hex-cell {
  cursor: pointer;
  transition: all 0.3s ease;
}

.hex-cell:hover {
  filter: brightness(1.3);
  stroke-width: 3px;
}

/* 8. Black Market Cosmetics & Tactical Store */
.black-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.market-item-card {
  background: rgba(11, 18, 36, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.25s ease;
  position: relative;
}

.market-item-card:hover {
  border-color: rgba(0, 245, 155, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 245, 155, 0.12);
}

.market-price-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: #fbbf24;
}

.btn-buy-market {
  width: 100%;
  padding: 0.6rem;
  border-radius: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.btn-buy-market.buy {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-buy-market.buy:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.btn-buy-market.equipped {
  background: rgba(0, 245, 155, 0.15);
  border: 1px solid #00f59b;
  color: #00f59b;
}

.btn-buy-market.owned {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
}

/* 9. Terminal Shaders (CRT Retro Green, Cyberpunk Neon, Amber Phosphor) */
.crt-shader-green {
  text-shadow: 0 0 5px rgba(0, 255, 102, 0.8), 0 0 10px rgba(0, 255, 102, 0.5) !important;
}
.crt-shader-green .xterm-rows {
  color: #00ff66 !important;
}

.crt-shader-amber {
  text-shadow: 0 0 5px rgba(255, 176, 0, 0.8), 0 0 10px rgba(255, 176, 0, 0.5) !important;
}
.crt-shader-amber .xterm-rows {
  color: #ffb000 !important;
}

.crt-shader-neon {
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.8), 0 0 12px rgba(255, 0, 119, 0.6) !important;
}

/* ==========================================================================
   10. UNIFIED SEASON INNER PORTAL (HUD COMMAND HEADER & NAVIGATION)
   ========================================================================== */

.season-portal-hud-header {
  background: radial-gradient(circle at 50% 0%, #0c1836 0%, #040918 60%, #02050e 100%);
  border-bottom: 2px solid #1e293b;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 245, 155, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.season-top-command-bar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.btn-exit-labs {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.6rem;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-exit-labs:hover {
  background: rgba(0, 245, 155, 0.1);
  border-color: #00f59b;
  color: #00f59b;
  box-shadow: 0 0 12px rgba(0, 245, 155, 0.25);
  transform: translateX(-2px);
}

.season-portal-brand-block {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.season-logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.season-logo-lockup img {
  height: 28px;
  width: auto;
}

.season-identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.season-hud-center-stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hud-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-mono);
  line-height: 1.1;
}

.hud-stat-label {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hud-stat-val {
  font-size: 0.88rem;
  font-weight: 900;
  color: #ffffff;
}

.season-hud-wallet {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.portal-wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 900;
  color: #ffffff;
}

.portal-wallet-chip.gold {
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.portal-wallet-chip.cyan {
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

/* Season Sub-Navigation Tabs Bar */
.season-subnav-bar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.season-subnav-bar::-webkit-scrollbar {
  display: none;
}

.season-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  color: #94a3b8;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
}

.season-nav-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
}

.season-nav-tab.active {
  color: #ffffff;
  border-bottom-color: #00f59b;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 245, 155, 0.08) 100%);
  text-shadow: 0 0 10px rgba(0, 245, 155, 0.5);
}

.season-nav-tab.active.gold-tab {
  border-bottom-color: #fbbf24;
  background: linear-gradient(180deg, transparent 0%, rgba(245, 158, 11, 0.1) 100%);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.season-nav-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  font-weight: 900;
}
.season-nav-badge.cyan {
  background: rgba(0, 245, 155, 0.2);
  color: #00f59b;
  border: 1px solid rgba(0, 245, 155, 0.4);
}
.season-nav-badge.gold {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.season-nav-badge.rose {
  background: rgba(225, 29, 72, 0.2);
  color: #f43f5e;
  border: 1px solid rgba(225, 29, 72, 0.4);
}

/* Season Page Hero Banner */
.season-view-hero {
  max-width: 1320px;
  margin: 1.5rem auto 2rem;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.season-view-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.season-view-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 0.35rem;
}