/* ============================================
   Ierahkwa Design System — ierahkwa.css
   Futuristic Glassmorphism Edition — Sovereign Platforms
   v4.2.0 — 13 Mar 2026 — Enhanced Readability & Elegance
   ============================================ */

@import url('fonts/fonts-local.css');

/* --- 1. CSS Custom Properties --- */
:root {
  /* Backgrounds */
  --bg:  #0a0e17;
  --bg2: #0d1a2d;
  --bg3: #142238;
  --bg4: #1e3a5f;
  /* Brand */
  --gold: #FFD700;
  --accent: #ffcf6b; /* override per-platform */
  --neon-green: #ffcf6b;
  --neon-cyan:  #00FFFF;
  /* Text — Enhanced Readability */
  --txt:  #f0f0f5;
  --txt2: #a0a8b8;
  /* Borders & Radius */
  --brd: #1e3a5f;
  --r:   16px;
  /* Tag Colors */
  --ai:  #7c4dff;
  --wam: #FFD700;
  --sat: #00bcd4;
  --bc:  #4a9eff;
  --qt:  #e84040;
  /* NEXUS Colors */
  --nx-orbital:  #00bcd4;
  --nx-escudo:   #f44336;
  --nx-cerebro:  #7c4dff;
  --nx-tesoro:   #ffd600;
  --nx-voces:    #e040fb;
  --nx-consejo:  #1565c0;
  --nx-tierra:   #43a047;
  --nx-forja:    #00e676;
  --nx-urbe:     #ff9100;
  --nx-raices:   #ffcf6b;
  /* NEXUS Expansion v3.7.0 */
  --nx-salud:    #FF5722;
  --nx-academia: #9C27B0;
  --nx-amparo:   #607D8B;
  --nx-escolar:  #1E88E5;
  --nx-entretenimiento: #E91E63;
}

/* --- 2. Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- 3. Base Typography --- */
body {
  background: linear-gradient(135deg, #0a0e17 0%, #0d1a2d 50%, #0a1a0a 100%);
  background-attachment: fixed;
  color: var(--txt);
  font-family: 'Exo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }

/* --- 4. Accessibility --- */
.skip, .skip-nav {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  padding: .7rem 1.5rem;
  border-radius: var(--r);
  font-weight: 700;
  z-index: 1000;
  transition: top .2s;
  text-decoration: none;
}
.skip:focus, .skip-nav:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- 5. Navigation (NEXUS + Futurehead) --- */
nav {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(255,207,107,.08) 0%, rgba(10,14,23,.98) 100%);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--accent);
  padding: .8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
}
/* header element (inline platforms use <header> instead of <nav>) */
header {
  background: linear-gradient(180deg, rgba(255,207,107,.08) 0%, rgba(10,14,23,.98) 100%);
  border-bottom: 2px solid var(--accent);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 99;
  backdrop-filter: blur(12px);
}
.brand {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--accent);
}
.logo {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent), #00cc33);
  border-radius: var(--r);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.2rem;
  color: #000;
  box-shadow: 0 0 20px rgba(255,207,107,.3);
}
.logo h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.25rem;
  color: var(--accent);
  letter-spacing: -.02em;
}
.logo h1 span { color: var(--accent); }
header nav, nav[aria-label] {
  display: flex;
  gap: .25rem;
}
header nav a, nav a {
  color: var(--txt2);
  text-decoration: none;
  padding: .5rem .85rem;
  border-radius: var(--r);
  font-size: .9rem;
  transition: all .2s;
}
header nav a:hover, header nav a[aria-current="page"],
nav a:hover, nav a[aria-current="page"] {
  color: var(--accent);
  background: rgba(255,207,107,.08);
}
.btn {
  background: linear-gradient(135deg, var(--accent), #00cc33);
  color: #000;
  padding: .5rem 1.2rem;
  border-radius: var(--r);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  border: none;
  cursor: pointer;
  transition: all .3s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,207,107,.3);
}

/* --- 6. Hero --- */
.hero {
  text-align: center;
  padding: 5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,207,107,.06), transparent 70%);
}
.hero::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,207,107,.08), transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.badge {
  display: inline-block;
  background: rgba(255,207,107,.08);
  border: 1px solid rgba(255,207,107,.25);
  padding: .4rem 1.2rem;
  border-radius: 2rem;
  font-size: .8rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1.25rem;
}
.hero h1, .hero h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: .5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.hero h1 span, .hero h2 span {
  background: linear-gradient(135deg, var(--txt), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p {
  color: var(--txt2);
  max-width: 650px;
  margin: 0 auto 1.5rem;
  font-size: 1.1rem;
}

/* --- 7. Counters / Stats --- */
.counters {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.counter strong {
  font-family: 'Orbitron', sans-serif;
  color: var(--accent);
  font-size: 1.8rem;
  display: block;
}
.counter span {
  font-size: .8rem;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* Inline platform stats (used by ~163 platforms) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  padding: 0 2rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}
.stat {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.25rem;
  text-align: center;
  transition: all .3s;
}
.stat:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 25px rgba(255,207,107,.1);
}
.stat .val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: .25rem;
}
.stat .lbl {
  font-size: .85rem;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --- 8. Dashboard Cards --- */
.dash {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
}
.dash-card {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.2rem;
  text-align: center;
  transition: all .3s;
}
.dash-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255,207,107,.1);
}
.dash-card strong {
  font-family: 'Orbitron', sans-serif;
  color: var(--accent);
  font-size: 1.4rem;
  display: block;
}
.dash-card span { font-size: .8rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .06em; }

/* --- 9. Sections --- */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}
.section h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  margin-bottom: .3rem;
  color: var(--accent);
}
.section .sub {
  font-size: .9rem;
  color: var(--txt2);
  margin-bottom: 1.2rem;
}
/* Section titles (inline platforms) */
.section-title {
  text-align: center;
  padding: 2rem 2rem .5rem;
}
.section-title h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
}
.section-title p {
  color: var(--txt2);
  font-size: .9rem;
  margin-top: .5rem;
}

/* --- 10. Grid & Cards --- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
  /* Inline platforms add padding */
  padding: 1.5rem 2rem 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.card {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,207,107,.06), transparent);
  transition: left .5s;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(255,207,107,.1);
}
.card:hover::before {
  left: 100%;
}
.card h3 { font-family: 'Orbitron', sans-serif; font-size: .95rem; margin-bottom: .3rem; }
.card h4 { font-family: 'Orbitron', sans-serif; font-size: .95rem; font-weight: 700; margin-bottom: .5rem; color: var(--txt); }
.card p { color: var(--txt2); font-size: .88rem; margin-bottom: .5rem; line-height: 1.6; }
.card-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(255,207,107,.15), rgba(255,207,107,.05));
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* --- 11. Tags --- */
.tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.tag {
  font-size: .68rem;
  padding: .2rem .5rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tag.ai  { background: rgba(124,77,255,.15); color: var(--ai); }
.tag.wam { background: rgba(255,215,0,.15); color: var(--wam); }
.tag.sat { background: rgba(0,188,212,.15);  color: var(--sat); }
.tag.bc  { background: rgba(74,158,255,.15); color: var(--bc); }
.tag.qt  { background: rgba(232,64,64,.15);  color: var(--qt); }

/* --- 12. Connections --- */
.connections {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
}
.connections h2 {
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  color: var(--accent);
}
.conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.conn {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1rem;
  font-size: .9rem;
  transition: all .3s;
}
.conn:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,207,107,.08);
}
.conn strong { color: var(--accent); }

/* --- 13. Footer --- */
footer {
  text-align: center;
  padding: 2rem;
  border-top: 2px solid var(--accent);
  background: var(--bg2);
  color: var(--txt2);
  font-size: .88rem;
  margin-top: 2rem;
}
footer span { color: var(--accent); }
footer a { color: var(--accent); text-decoration: none; }

/* --- 14. Animations --- */
@keyframes shine {
  0%   { left: -100%; }
  100% { left: 100%; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255,207,107,.3); }
  50%      { box-shadow: 0 0 20px rgba(255,207,107,.6); }
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: pulse 2s infinite;
  box-shadow: 0 0 8px rgba(255,207,107,.4);
}

/* --- 15. Light Theme (opt-in via .light-theme) --- */
.light-theme {
  --bg:  #f0f4f8;
  --bg2: #ffffff;
  --bg3: #e8ecf0;
  --bg4: #d0d4d8;
  --txt: #0a0e17;
  --txt2: #555e6b;
  --brd: #c8ccd0;
}
.light-theme .skip,
.light-theme .skip-nav { color: #fff; }
.light-theme body { background: var(--bg); }

/* --- 16. Variant Class Aliases (109+ platforms) --- */
/* Many platforms use alternate class names — these ensure consistent rendering */

/* Global main centering */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* .nav-brand = .brand */
.nav-brand {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--accent);
}
.nav-links {
  display: flex;
  gap: .25rem;
}
.nav-links a {
  color: var(--txt2);
  padding: .5rem .85rem;
  border-radius: var(--r);
  font-size: .9rem;
  transition: all .2s;
}
.nav-links a:hover {
  color: var(--accent);
  background: rgba(255,207,107,.08);
}

/* .hero-btn = .btn inside hero */
.hero-btn {
  background: linear-gradient(135deg, var(--accent), #00cc33);
  color: #000;
  padding: .7rem 1.5rem;
  border-radius: var(--r);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  border: none;
  cursor: pointer;
  transition: all .3s;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,207,107,.3);
}

/* .accent-text (highlight spans) */
.accent-text { color: var(--accent); }

/* .section-header = .section-title (48 platforms) */
.section-header {
  text-align: center;
  padding: 2rem 0 1.5rem;
}
.section-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
}
.section-header p {
  color: var(--txt2);
  font-size: .9rem;
  margin-top: .5rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* .features-grid = .grid (48 platforms) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* .feature-card = .card (48 platforms) */
.feature-card {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,207,107,.06), transparent);
  transition: left .5s;
}
.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(255,207,107,.1);
}
.feature-card:hover::before { left: 100%; }
.feature-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--txt);
}
.feature-card p {
  color: var(--txt2);
  font-size: .88rem;
  line-height: 1.6;
}

/* .feature-icon = .card-icon (48 platforms) */
.feature-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(255,207,107,.15), rgba(255,207,107,.05));
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* .stat-val / .stat-lbl = .val / .lbl (19 platforms) */
.stat .stat-val, .stat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: .25rem;
}
.stat .stat-lbl, .stat-lbl {
  font-size: .85rem;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Coverage map (Starlink, GPS, Telecom) */
.coverage-map {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 2rem;
  text-align: center;
  margin-top: 1.5rem;
}
.coverage-map h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  color: var(--txt);
  margin-bottom: 1rem;
}
.sat-ticker {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(255,207,107,.4);
}
.ticker-label {
  color: var(--txt2);
  font-size: .8rem;
  margin-bottom: 1.5rem;
}
.beam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
  margin-top: 1.5rem;
}
.beam-zone {
  background: var(--bg3);
  border: 1px solid var(--brd);
  border-radius: 8px;
  padding: .6rem;
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.zone-status {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: auto;
  animation: pulse 2s infinite;
}
.flag { font-size: 1.2rem; }

/* --- 17. Mobile Menu Toggle (shared) --- */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,207,107,.2);
  color: var(--accent);
  font-size: 1.4rem;
  padding: .3rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  line-height: 1;
}
.mobile-menu-toggle:hover {
  background: rgba(255,207,107,.08);
  border-color: var(--accent);
}

/* --- 17b. Responsive --- */
@media (max-width: 900px) {
  .grid, .features-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .charts-row { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .conn-grid { grid-template-columns: 1fr; }
  .beam-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 768px) {
  /* Navigation collapses */
  nav { flex-wrap: wrap; padding: .6rem 1rem; }
  nav .nav-links,
  nav .nav-container .nav-links,
  header nav:not(#mainNav) { display: none; }
  .mobile-menu-toggle { display: block; }
  nav .nav-links.open,
  nav .nav-container .nav-links.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    order: 10;
    gap: .25rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,207,107,.1);
    margin-top: .5rem;
  }
  nav .nav-links.open a {
    padding: .6rem .85rem;
    width: 100%;
  }
  header { flex-wrap: wrap; padding: .6rem 1rem; gap: .5rem; }
  /* Sidebar layouts collapse */
  .admin-body { grid-template-columns: 1fr; }
  .admin-body > aside {
    position: fixed;
    left: -260px;
    width: 240px;
    z-index: 200;
    transition: left .3s;
  }
  .admin-body > aside.open { left: 0; }
  .section { padding: 1.5rem 1rem; }
  .logo-icon { width: 36px; height: 36px; font-size: 1rem; }
  .logo h1 { font-size: 1rem; }
  .brand { font-size: .95rem; }
  .stats-bar { padding: .5rem 1rem; }
  .stat { min-width: auto; }
}
@media (max-width: 600px) {
  .counters { gap: 1rem; }
  .hero { padding: 3rem 1rem 2rem; }
  .dash { grid-template-columns: repeat(3, 1fr); }
  .grid, .features-grid { grid-template-columns: 1fr; padding: 1rem; }
  .stats { grid-template-columns: repeat(2, 1fr); padding: 0 1rem 2rem; }
  main { padding: 0 1rem; }
  nav, header { padding: .6rem .8rem; }
  .hero h1, .hero h2 { font-size: 1.6rem; }
  .counter strong { font-size: 1.4rem; }
  .section h2 { font-size: 1.1rem; }
  footer { font-size: .8rem; padding: 1.5rem 1rem; }
  .btn { padding: .4rem 1rem; font-size: .8rem; }
}
@media (max-width: 400px) {
  .hero h1, .hero h2 { font-size: 1.3rem; }
  .hero p { font-size: .9rem; }
  .badge { font-size: .7rem; padding: .3rem .8rem; }
  .brand { font-size: .85rem; gap: .3rem; }
  .logo-icon { width: 30px; height: 30px; font-size: .9rem; }
  .stat .val { font-size: 1.1rem; }
  .card { padding: 1rem; }
  .card h3 { font-size: .95rem; }
}

/* ============================================
   18. SECURITY MODULE STYLES (ierahkwa-security.js)
   ============================================ */

/* --- Security Status Badge --- */
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,207,107,.08);
  border: 1px solid rgba(255,207,107,.3);
  padding: .25rem .75rem;
  border-radius: 2rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: default;
  transition: all .3s;
}
.security-badge:hover {
  background: rgba(255,207,107,.15);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255,207,107,.2);
}
.security-badge .sec-icon { font-size: .9rem; }
.security-badge[data-grade="A+"] { border-color: #ffcf6b; color: #ffcf6b; }
.security-badge[data-grade="A"]  { border-color: #00e676; color: #00e676; }
.security-badge[data-grade="B"]  { border-color: #ffd600; color: #ffd600; }
.security-badge[data-grade="C"]  { border-color: #ff9100; color: #ff9100; }
.security-badge[data-grade="F"]  { border-color: #f44336; color: #f44336; }

/* --- Security Boundary Warning Banner --- */
.security-boundary-warn {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: linear-gradient(90deg, rgba(244,67,54,.95), rgba(183,28,28,.95));
  color: #fff;
  padding: .75rem 2rem;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(244,67,54,.4);
  animation: slideDown .3s ease-out;
}
.security-boundary-warn button {
  background: transparent;
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: all .2s;
  display: grid;
  place-items: center;
}
.security-boundary-warn button:hover {
  background: rgba(255,255,255,.2);
  border-color: #fff;
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* --- Input Validation States --- */
.input-valid {
  border-color: #ffcf6b !important;
  box-shadow: 0 0 0 2px rgba(255,207,107,.15);
}
.input-invalid {
  border-color: #f44336 !important;
  box-shadow: 0 0 0 2px rgba(244,67,54,.15);
}
.input-blocked {
  border-color: #ff9100 !important;
  box-shadow: 0 0 0 2px rgba(255,145,0,.15);
  background: rgba(255,145,0,.05) !important;
}

/* --- Secure Field Indicator --- */
.sec-field-indicator {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  pointer-events: none;
  opacity: .6;
}

/* --- Security Dashboard Panel --- */
.sec-panel {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.sec-panel h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: .95rem;
  color: var(--accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sec-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .88rem;
  border-bottom: 1px solid rgba(30,58,95,.5);
}
.sec-check:last-child { border-bottom: none; }
.sec-check .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sec-check .dot.ok { background: #ffcf6b; box-shadow: 0 0 6px rgba(255,207,107,.4); }
.sec-check .dot.fail { background: #f44336; box-shadow: 0 0 6px rgba(244,67,54,.4); }
.sec-check .dot.warn { background: #ffd600; box-shadow: 0 0 6px rgba(255,214,0,.4); }
.sec-check .label { color: var(--txt2); flex: 1; }
.sec-check .status { font-weight: 600; font-size: .75rem; text-transform: uppercase; }
.sec-check .status.ok { color: #ffcf6b; }
.sec-check .status.fail { color: #f44336; }

/* --- Security Score Ring --- */
.sec-score {
  width: 80px;
  height: 80px;
  position: relative;
  margin: 0 auto 1rem;
}
.sec-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sec-score circle {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
.sec-score .track { stroke: var(--bg3); }
.sec-score .fill { stroke: var(--accent); transition: stroke-dashoffset 1s ease; }
.sec-score .score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Orbitron', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent);
}

/* --- Encrypted/Protected Data Badge --- */
.encrypted-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(0,188,212,.08);
  border: 1px solid rgba(0,188,212,.3);
  padding: .2rem .6rem;
  border-radius: 4px;
  font-size: .75rem;
  color: #00bcd4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Security Audit Trail --- */
.audit-trail {
  background: var(--bg);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--txt2);
}
.audit-trail .entry {
  padding: .2rem 0;
  border-bottom: 1px solid rgba(30,58,95,.3);
}
.audit-trail .entry:last-child { border-bottom: none; }
.audit-trail .ts { color: var(--txt2); opacity: .6; }
.audit-trail .cat { color: var(--accent); font-weight: 600; }
.audit-trail .cat.SQLI,
.audit-trail .cat.XSS,
.audit-trail .cat.CLICKJACK,
.audit-trail .cat.TAMPER { color: #f44336; }
.audit-trail .cat.RATE_LIMIT,
.audit-trail .cat.BOUNDARY { color: #ffd600; }
.audit-trail .cat.SESSION,
.audit-trail .cat.INIT { color: #00bcd4; }

/* --- Sovereign Shield Animation --- */
@keyframes shieldPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255,207,107,.2), inset 0 0 5px rgba(255,207,107,.1); }
  50%      { box-shadow: 0 0 20px rgba(255,207,107,.4), inset 0 0 10px rgba(255,207,107,.2); }
}
.sec-shield {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(255,207,107,.15), rgba(255,207,107,.05));
  border: 2px solid rgba(255,207,107,.3);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  animation: shieldPulse 3s infinite;
}

/* --- Security Progress Bars --- */
.sec-progress {
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .5rem;
}
.sec-progress .bar {
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease;
}
.sec-progress .bar.green { background: linear-gradient(90deg, #ffcf6b, #00e676); }
.sec-progress .bar.yellow { background: linear-gradient(90deg, #ffd600, #ff9100); }
.sec-progress .bar.red { background: linear-gradient(90deg, #f44336, #b71c1c); }


/* ============================================
   19. FUTURISTIC DESIGN v4.0 — Mar 2026
   Glassmorphism · Glow · Particles · Animations
   ============================================ */

/* --- Smooth Scroll --- */
html { scroll-behavior: smooth; }

/* --- Glassmorphism Cards --- */
.glass {
  background: rgba(13,26,45,.6);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.08);
}

/* --- Neon Glow Utilities --- */
.glow-accent { box-shadow: 0 0 15px rgba(255,207,107,.15), 0 0 45px rgba(255,207,107,.05); }
.glow-accent-strong { box-shadow: 0 0 20px rgba(255,207,107,.25), 0 0 60px rgba(255,207,107,.1); }
.glow-text { text-shadow: 0 0 20px rgba(255,207,107,.3), 0 0 40px rgba(255,207,107,.1); }

/* --- Animated Gradient Border --- */
.gradient-border {
  position: relative;
  border: none !important;
}
.gradient-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 40%, transparent 60%, var(--accent));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}
.gradient-border:hover::after { opacity: 1; }

/* --- Scroll Reveal Animation --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Floating Particles Background --- */
.particles-bg {
  position: relative;
  overflow: hidden;
}
.particles-bg canvas.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  border: none;
  margin: 0;
  border-radius: 0;
}
.particles-bg > *:not(canvas) { position: relative; z-index: 1; }

/* --- Counter Animation --- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.counter-animated { animation: countUp .5s ease-out forwards; }

/* --- Hero Enhancements --- */
.hero-futuristic {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255,207,107,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,188,212,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(124,77,255,.04) 0%, transparent 50%);
  padding: 6rem 2rem 4rem;
}
.hero-futuristic h1 {
  background: linear-gradient(135deg, #ffffff 0%, var(--accent) 50%, #00bcd4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 8s ease infinite;
  background-size: 200% 200%;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Futuristic Stat Cards --- */
.stat-futuristic {
  background: rgba(13,26,45,.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,207,107,.1);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.stat-futuristic::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,207,107,.05), transparent 60%);
  animation: rotateBg 8s linear infinite;
  pointer-events: none;
}
@keyframes rotateBg {
  to { transform: rotate(360deg); }
}
.stat-futuristic:hover {
  border-color: rgba(255,207,107,.4);
  box-shadow: 0 0 25px rgba(255,207,107,.12), inset 0 0 25px rgba(255,207,107,.03);
  transform: translateY(-4px);
}

/* --- NEXUS Card Futuristic --- */
.nx-card-futuristic {
  background: rgba(13,26,45,.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  display: block;
  position: relative;
  overflow: hidden;
}
.nx-card-futuristic::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.nx-card-futuristic:hover::before { width: 100%; }
.nx-card-futuristic:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}

/* --- Platform Card Futuristic --- */
.p-card-futuristic {
  background: rgba(13,26,45,.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 1.1rem;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  display: block;
  position: relative;
  overflow: hidden;
}
.p-card-futuristic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,207,107,.02) 0%, transparent 50%, rgba(255,207,107,.02) 100%);
  opacity: 0;
  transition: opacity .4s;
}
.p-card-futuristic:hover::before { opacity: 1; }
.p-card-futuristic:hover {
  border-color: rgba(255,207,107,.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 15px rgba(255,207,107,.05);
}

/* --- Scanline Effect (subtle) --- */
.scanline-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.03) 2px,
    rgba(0,0,0,.03) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* --- Typing Cursor --- */
@keyframes blink {
  50% { opacity: 0; }
}
.typing-cursor::after {
  content: '|';
  color: var(--accent);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

/* --- Pulse Ring for Live Indicators --- */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,207,107,.4); }
  100% { box-shadow: 0 0 0 12px rgba(255,207,107,0); }
}
.pulse-ring {
  animation: pulse 2s infinite, pulseRing 2s infinite;
}

/* --- Futuristic Badge --- */
.badge-futuristic {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,207,107,.06);
  border: 1px solid rgba(255,207,107,.2);
  padding: .4rem 1.2rem;
  border-radius: 2rem;
  font-size: .75rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  backdrop-filter: blur(8px);
}
.badge-futuristic .pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* --- Futuristic Search --- */
.search-futuristic input {
  background: rgba(13,26,45,.7) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: all .3s;
}
.search-futuristic input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px rgba(255,207,107,.1), inset 0 0 10px rgba(255,207,107,.02);
}

/* --- Footer Futuristic --- */
footer.futuristic-footer {
  background: rgba(13,26,45,.8);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,207,107,.15);
}

/* --- Stagger children animation --- */
.stagger > * {
  opacity: 0;
  animation: fadeInUp .5s ease-out forwards;
}
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .1s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .2s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .3s; }
.stagger > *:nth-child(7) { animation-delay: .35s; }
.stagger > *:nth-child(8) { animation-delay: .4s; }
.stagger > *:nth-child(9) { animation-delay: .45s; }
.stagger > *:nth-child(10) { animation-delay: .5s; }
.stagger > *:nth-child(n+11) { animation-delay: .55s; }

/* --- Responsive adjustments for futuristic --- */
@media (max-width: 600px) {
  .hero-futuristic { padding: 4rem 1rem 3rem; }
  .stat-futuristic { padding: 1rem; }
  .nx-card-futuristic { padding: 1rem; }
}

/* --- NEXUS-specific Turístico color --- */
:root {
  --nx-turistico: #FFB300;
  --nx-escritorio: #26C6DA;
  --nx-comercio: #FF6D00;
  --nx-cosmos: #1a237e;
}

/* ============================================
   20. PLANES SOBERANOS — Pricing Cards v5.5
   5 tiers: Member · Bronce · Silver · Gold · Diamante
   ============================================ */

/* Plans grid inside .grid override */
#pricing + .grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Plan card enhancements */
#pricing + .grid .card {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  border: 1px solid rgba(255,255,255,.08);
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
#pricing + .grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0,0,0,.3), 0 0 20px rgba(255,207,107,.08);
}

/* Plan name styling */
#pricing + .grid .card h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .3rem;
}

/* Price display */
#pricing + .grid .card > div:nth-child(2) {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  margin: .5rem 0;
}

/* Feature list styling */
#pricing + .grid .card ul {
  text-align: left;
  flex: 1;
}
#pricing + .grid .card ul li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  line-height: 1.5;
}
#pricing + .grid .card ul li:last-child {
  border-bottom: none;
}

/* Gold plan — RECOMENDADO badge */
#pricing + .grid .card[style*="box-shadow"]::after {
  content: 'RECOMENDADO';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #0a0e17;
  font-size: .58rem;
  font-weight: 800;
  padding: .2rem .7rem;
  border-radius: 0 0 8px 8px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .06em;
}

/* Diamante gradient card */
#pricing + .grid .card[style*="rgba(185,242,255"] {
  border-image: linear-gradient(135deg, rgba(185,242,255,.3), rgba(0,188,212,.2)) 1;
}

/* Pricing section title enhancement */
#pricing h3 {
  background: linear-gradient(135deg, var(--accent), #00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.6rem;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  #pricing + .grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  #pricing + .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   21. GLOBAL AESTHETIC POLISH v5.5.1
   Ensures consistent design across 1,097 platforms
   ============================================ */

/* --- All content inside cards stays contained --- */
.card, .feature-card, .stat, .dash-card, .conn {
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --- Smooth page-level transitions --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Universal list styling inside cards --- */
.card ul, .feature-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.card ul li, .feature-card ul li {
  font-size: .82rem;
  color: var(--txt2);
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  line-height: 1.5;
}
.card ul li:last-child, .feature-card ul li:last-child {
  border-bottom: none;
}

/* --- Data display cards (NOC, stats grids) --- */
.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.data-card {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.2rem;
  transition: all .35s;
  position: relative;
  overflow: hidden;
}
.data-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255,207,107,.08);
}
.data-card h4, .data-card strong {
  font-family: 'Orbitron', sans-serif;
  font-size: .9rem;
  color: var(--txt);
  margin-bottom: .5rem;
  display: block;
}
.data-card .metric {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
}
.data-card .label {
  font-size: .75rem;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* --- Inline stats row (for NOC-style displays) --- */
.stats-inline {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.stats-inline .chip {
  background: rgba(255,207,107,.06);
  border: 1px solid rgba(255,207,107,.12);
  border-radius: 8px;
  padding: .3rem .6rem;
  font-size: .72rem;
  font-family: 'Orbitron', sans-serif;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.stats-inline .chip-label {
  font-size: .65rem;
  color: var(--txt2);
  display: block;
  font-family: 'Exo 2', sans-serif;
  font-weight: 400;
}

/* --- Ensure all sections have proper spacing --- */
section, .section, [role="region"] {
  padding-bottom: 1rem;
}

/* --- Fix text overflow on all elements --- */
h1, h2, h3, h4, h5, h6, p, span, div, li, td, th {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- Consistent button styling across all platforms --- */
.btn-action, [class*="btn-"] {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  border-radius: var(--r);
  cursor: pointer;
  transition: all .3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* --- Network/Node status indicators --- */
.status-online { color: #ffcf6b; }
.status-offline { color: #f44336; }
.status-warning { color: #ffd600; }

/* --- Scrollbar styling (dark theme) --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,207,107,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,207,107,.4); }

/* --- Selection color --- */
::selection { background: rgba(255,207,107,.2); color: var(--txt); }

/* --- 22. Dashboard / NOC Panel --- */
.dashboard {
  background: linear-gradient(135deg, rgba(255,207,107,.03), rgba(0,188,212,.02));
  border: 1px solid rgba(255,207,107,.15);
  border-radius: var(--r);
  padding: 1.5rem;
  margin: 1rem auto;
  max-width: 900px;
}
.dashboard h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 1rem;
  text-align: center;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.dash-item {
  background: rgba(10,14,23,.7);
  border: 1px solid var(--brd);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.dash-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}
.dash-lbl {
  font-size: .8rem;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .25rem;
}
.dash-bar {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  margin-top: .6rem;
  overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--accent), #00bcd4);
  border-radius: 2px;
  transition: width .6s ease;
}

/* --- 23. Hub Diagram / Connected Nodes --- */
.hub-section {
  text-align: center;
}
.hub-diagram {
  position: relative;
  max-width: 900px;
  margin: 1rem auto;
  padding: 2rem 1rem;
}
.hub-ring {
  display: none; /* decorative, hidden for clean layout */
}
.hub-center {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, rgba(255,207,107,.08), rgba(0,188,212,.06));
  border: 2px solid var(--accent);
  border-radius: 50px;
  padding: .8rem 1.8rem;
  margin-bottom: 1.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent);
  box-shadow: 0 0 20px rgba(255,207,107,.1);
}
.hub-icon {
  font-size: 1.4rem;
}
.nodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .8rem;
}
.node-card {
  background: rgba(10,14,23,.6);
  border: 1px solid var(--brd);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.node-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.n-icon {
  font-size: 1.6rem;
  margin-bottom: .4rem;
}
.n-name {
  font-family: 'Orbitron', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: var(--txt);
}
.n-link {
  font-size: .72rem;
  color: var(--txt2);
  margin-top: .2rem;
}

/* --- 24. CTA Section --- */
.cta {
  text-align: center;
  padding: 3rem 1.5rem;
  margin: 2rem auto;
  max-width: 700px;
}
.cta h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.cta p {
  color: var(--txt2);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* --- 25. Section Header --- */
.section-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 1rem;
}
.section-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  margin-bottom: .5rem;
}
.section-header p {
  color: var(--txt2);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* --- 26. Features Grid --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.feature-card {
  background: rgba(10,14,23,.5);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: border-color .2s, transform .2s;
}
.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.feature-icon {
  font-size: 2rem;
  margin-bottom: .6rem;
}
.feature-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: .9rem;
  margin-bottom: .4rem;
}
.feature-card p {
  font-size: .82rem;
  color: var(--txt2);
  line-height: 1.5;
}

/* --- 27. Platform-Specific Pricing Plans --- */
.platform-plans {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.platform-plans h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: .5rem;
}
.platform-plans > p {
  text-align: center;
  color: var(--txt2);
  margin-bottom: 1.5rem;
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.plan-card {
  background: rgba(10,14,23,.6);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.2rem;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.plan-card:hover {
  transform: translateY(-3px);
}
.plan-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(255,207,107,.12);
}
.plan-name {
  font-family: 'Orbitron', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.plan-price {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin: .4rem 0;
}
.plan-price small {
  font-size: .7rem;
  font-weight: 400;
  color: var(--txt2);
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: .8rem 0;
}
.plan-features li {
  font-size: .78rem;
  color: var(--txt2);
  padding: .25rem 0;
}
.plan-features li::before {
  content: '\2713 ';
  color: var(--accent);
}
.plan-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  padding: .5rem 1.2rem;
  font-family: 'Exo 2', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
  width: 100%;
  margin-top: .5rem;
}
.plan-btn:hover {
  opacity: .85;
}

/* --- 28. Tower Animation (Telecom) --- */
.tower {
  width: 4px;
  height: 60px;
  background: var(--accent);
  margin: 0 auto 1rem;
  border-radius: 2px;
  box-shadow: 0 0 10px var(--accent);
}
.ring {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255,207,107,.15);
  border-radius: 50%;
  margin: -25px auto 0;
  animation: ringPulse 2s ease-out infinite;
}
.ring:nth-child(3) { animation-delay: .4s; width: 60px; height: 60px; margin-top: -35px; }
.ring:nth-child(4) { animation-delay: .8s; width: 80px; height: 80px; margin-top: -45px; }
@keyframes ringPulse {
  0% { opacity: .6; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* --- 29. Data Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .82rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
thead {
  background: rgba(255,207,107,.06);
}
th {
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  padding: .7rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--brd);
}
td {
  padding: .6rem;
  border-bottom: 1px solid rgba(30,58,95,.3);
  color: var(--txt2);
}
tbody tr:hover {
  background: rgba(255,207,107,.03);
}

/* --- 30. API Endpoint Cards --- */
.api-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  max-width: 900px;
  margin: 1rem auto;
}
.api-card {
  background: rgba(10,14,23,.5);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: .8rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  transition: border-color .2s;
}
.api-card:hover {
  border-color: var(--accent);
}
.api-method {
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 4px;
  flex-shrink: 0;
  min-width: 40px;
  text-align: center;
}
.api-method.post { background: rgba(255,207,107,.15); color: var(--accent); }
.api-method.get { background: rgba(0,188,212,.15); color: #00bcd4; }
.api-method.put { background: rgba(255,214,0,.15); color: #ffd600; }
.api-method.delete { background: rgba(244,67,54,.15); color: #f44336; }
.api-path {
  font-family: monospace;
  font-size: .8rem;
  color: var(--txt);
  word-break: break-all;
}
.api-desc {
  font-size: .75rem;
  color: var(--txt2);
  margin-top: .2rem;
}

/* --- 31. Fee/Split Badge --- */
.fee-badge {
  display: inline-block;
  font-size: .7rem;
  background: rgba(255,207,107,.06);
  border: 1px solid rgba(255,207,107,.1);
  border-radius: 6px;
  padding: .2rem .5rem;
  margin: .2rem .15rem;
  color: var(--txt2);
}
.fee-badge b {
  color: var(--accent);
}

/* --- 32. Pre/Code Architecture Diagrams --- */
pre {
  background: rgba(10,14,23,.7);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.2rem;
  overflow-x: auto;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--txt2);
  margin: 1rem auto;
  max-width: 1000px;
}

/* --- 30. Legacy Platform Classes (BDET Bank, FirewallQ, etc.) --- */
/* .c = main container */
.c { max-width: 1100px; margin: 0 auto; padding: 2rem; }

/* .g = green/accent highlight text */
.g { color: var(--accent); }

/* .w = warning/gold text */
.w { color: var(--gold); }

/* .c2 = secondary cyan text */
.c2 { color: var(--neon-cyan, #00bcd4); }

/* .gr = gray secondary text */
.gr { color: var(--txt2); }

/* .desc = description paragraph */
.desc {
  color: var(--txt2);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 2rem;
  text-align: center;
}

/* .sub = subtitle */
.sub {
  color: var(--txt2);
  font-size: .95rem;
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: .03em;
}

/* .metrics = stats row */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .8rem;
  margin: 0 auto 2.5rem;
  max-width: 900px;
}

/* .m = individual metric box */
.m {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1rem;
  text-align: center;
  transition: all .3s;
}
.m:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255,207,107,.1);
}
.m b {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: .2rem;
}
.m span {
  font-size: .7rem;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* .sec = section block */
.sec {
  margin: 2rem 0 1.5rem;
  padding: 1.2rem 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  border-left: 3px solid var(--accent);
}
.sec h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  margin-bottom: .3rem;
  color: var(--txt);
}
.sec p {
  color: var(--txt2);
  font-size: .85rem;
}

/* pre = code/diagram blocks */
pre {
  background: rgba(13,26,45,.8);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.5rem;
  overflow-x: auto;
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--txt);
  margin: 1rem 0 1.5rem;
  white-space: pre;
  tab-size: 2;
}

/* h1 styling for inline platforms */
main > h1, .c > h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .5rem;
  text-align: center;
  line-height: 1.15;
}

/* --- Light Mode --- */
html.light-theme {
  --bg:  #f5f7fa;
  --bg2: #e8ecf1;
  --bg3: #dce1e8;
  --bg4: #cfd6df;
  --txt:  #1a1a2e;
  --txt2: #4a5568;
  --brd: #cbd5e0;
  --gold: #b8860b;
  --neon-green: #ffcf6b;
  --neon-cyan:  #0891b2;
  --accent: #ffcf6b;
}
html.light-theme body {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f0 100%);
}
html.light-theme .card,
html.light-theme .feature-card,
html.light-theme .stat,
html.light-theme .metric-card {
  background: rgba(255,255,255,0.85);
  border-color: var(--brd);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
html.light-theme .glass,
html.light-theme .glass-card {
  background: rgba(255,255,255,0.7);
}
html.light-theme a { color: #0d6f8f; }
html.light-theme .badge { background: rgba(0,0,0,0.06); color: var(--txt); }

/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg2);
  color: var(--accent);
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 9999;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255,207,107,0.2);
}
.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(255,207,107,0.4);
}
html.light-theme .theme-toggle {
  background: #fff;
  border-color: #ffcf6b;
  color: #ffcf6b;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* --- Print styles --- */
@media print {
  body { background: #fff; color: #000; }
  nav, header, footer, .security-badge, .status-dot, .theme-toggle { display: none; }
  .card, .feature-card { border: 1px solid #ccc; box-shadow: none; }
}


/* ============================================
   33. RESPONSIVE CSS — Enhanced Breakpoints v5.5.2
   Tablet · Mobile · Small Mobile
   ============================================ */

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
  .features-grid,
  .grid,
  .data-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero h1, .hero h2 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
  }
  .hero p {
    font-size: 1rem;
  }
  .counters {
    gap: 1.5rem;
  }
  .dash {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nodes-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Navigation: stacked */
  nav, header {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .6rem 1rem;
  }
  .nav-links,
  header nav,
  nav[aria-label] {
    flex-direction: column;
    gap: .25rem;
    width: 100%;
  }
  .nav-links a,
  header nav a,
  nav a {
    text-align: center;
    padding: .6rem;
  }
  .brand, .nav-brand, .logo {
    justify-content: center;
  }

  /* Grids: single column */
  .features-grid,
  .grid,
  .data-grid,
  .conn-grid,
  .plans-grid,
  .dash-grid,
  .nodes-grid {
    grid-template-columns: 1fr;
  }

  /* Cards: full width */
  .card,
  .feature-card,
  .data-card,
  .plan-card,
  .node-card,
  .component-card {
    width: 100%;
  }

  /* Typography: smaller */
  .hero h1, .hero h2 {
    font-size: 1.5rem;
  }
  .hero p {
    font-size: .9rem;
  }
  .section h2, .section-header h2, .section-title h3 {
    font-size: 1.15rem;
  }
  .counter strong {
    font-size: 1.3rem;
  }
  .stat .val, .stat-val, .dash-val {
    font-size: 1.1rem;
  }

  /* Spacing */
  .hero {
    padding: 3rem 1rem 2rem;
  }
  main {
    padding: 0 .75rem;
  }
  .section {
    padding: 1.5rem .75rem;
  }
  .cta {
    padding: 2rem 1rem;
  }

  /* Stats */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 .75rem 2rem;
  }
  .counters {
    gap: 1rem;
  }

  /* Tables: horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Hub diagram compact */
  .hub-center {
    font-size: .75rem;
    padding: .6rem 1.2rem;
  }
}

/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
  /* Even more compact */
  .hero {
    padding: 2rem .75rem 1.5rem;
  }
  .hero h1, .hero h2 {
    font-size: 1.25rem;
  }
  .hero p {
    font-size: .82rem;
    margin-bottom: 1rem;
  }
  .badge, .badge-futuristic {
    font-size: .68rem;
    padding: .3rem .8rem;
  }

  /* Hide non-essential elements */
  .hero::before,
  .card::before,
  .feature-card::before,
  .particles-bg canvas.particles,
  .hub-ring,
  .scanline-bg::after {
    display: none;
  }

  /* Minimal nav */
  .logo-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .logo h1 {
    font-size: 1rem;
  }

  /* Compact cards */
  .card, .feature-card, .data-card {
    padding: 1rem;
  }
  .card-icon, .feature-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-bottom: .6rem;
  }
  .card h3, .card h4, .feature-card h3 {
    font-size: .82rem;
  }
  .card p, .feature-card p {
    font-size: .78rem;
  }

  /* Stats: 2 columns, tighter */
  .stats {
    gap: .5rem;
  }
  .stat {
    padding: .8rem;
  }
  .counters {
    gap: .6rem;
  }
  .counter strong {
    font-size: 1.1rem;
  }
  .counter span {
    font-size: .68rem;
  }

  /* Dash: 2-column on small */
  .dash {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
  }
  .dash-card {
    padding: .8rem;
  }
  .dash-card strong {
    font-size: 1rem;
  }

  /* Footer compact */
  footer {
    font-size: .75rem;
    padding: 1rem .75rem;
  }

  /* Section */
  .section h2 {
    font-size: 1rem;
  }
  .section .sub {
    font-size: .78rem;
  }

  /* API cards stack tighter */
  .api-card {
    flex-direction: column;
    gap: .4rem;
  }
}


/* ============================================
   34. MICRO-ANIMATIONS CSS v5.5.2
   Keyframes · Hover Effects · Loading Skeletons
   ============================================ */

/* --- @keyframes shimmer (loading skeletons) --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- @keyframes slideInLeft (nav items) --- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- @keyframes slideInRight (notifications) --- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- @keyframes fadeOut --- */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- @keyframes progressFill --- */
@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--progress, 100%); }
}

/* --- Enhanced card hover (scale + shadow) --- */
.card:hover,
.feature-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 35px rgba(255,207,107,.12);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s;
}
.card,
.feature-card {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s;
}

/* --- Loading skeleton --- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg2) 25%,
    var(--bg3) 50%,
    var(--bg2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton * {
  visibility: hidden;
}
.skeleton.skeleton-text {
  height: 1em;
  margin-bottom: .5rem;
  border-radius: 4px;
}
.skeleton.skeleton-circle {
  border-radius: 50%;
}
.skeleton.skeleton-card {
  min-height: 180px;
}

/* --- Fade-in on scroll --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp .6s ease-out forwards;
}
.fade-in-up.delay-1 { animation-delay: .1s; }
.fade-in-up.delay-2 { animation-delay: .2s; }
.fade-in-up.delay-3 { animation-delay: .3s; }
.fade-in-up.delay-4 { animation-delay: .4s; }
.fade-in-up.delay-5 { animation-delay: .5s; }

/* --- Nav items slide-in --- */
.slide-in-left {
  opacity: 0;
  animation: slideInLeft .4s ease-out forwards;
}
.slide-in-left:nth-child(1) { animation-delay: .05s; }
.slide-in-left:nth-child(2) { animation-delay: .1s; }
.slide-in-left:nth-child(3) { animation-delay: .15s; }
.slide-in-left:nth-child(4) { animation-delay: .2s; }
.slide-in-left:nth-child(5) { animation-delay: .25s; }


/* ============================================
   35. WEB COMPONENT HELPER STYLES v5.5.2
   Cards · Badges · Progress · Tooltips · Modals
   Notifications · Tabs · Breadcrumbs
   ============================================ */

/* --- .component-card — standardized card --- */
.component-card {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.component-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(255,207,107,.1);
}
.component-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--txt);
}
.component-card p {
  color: var(--txt2);
  font-size: .85rem;
  line-height: 1.6;
}

/* --- .status-badge — active/inactive with pulse --- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .75rem;
  border-radius: 2rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.status-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-badge.active {
  background: rgba(255,207,107,.08);
  border: 1px solid rgba(255,207,107,.25);
  color: var(--accent);
}
.status-badge.active::before {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255,207,107,.4);
  animation: pulse 2s infinite;
}
.status-badge.inactive {
  background: rgba(244,67,54,.08);
  border: 1px solid rgba(244,67,54,.25);
  color: #f44336;
}
.status-badge.inactive::before {
  background: #f44336;
  box-shadow: 0 0 6px rgba(244,67,54,.3);
}
.status-badge.warning {
  background: rgba(255,214,0,.08);
  border: 1px solid rgba(255,214,0,.25);
  color: #ffd600;
}
.status-badge.warning::before {
  background: #ffd600;
  box-shadow: 0 0 6px rgba(255,214,0,.3);
  animation: pulse 2s infinite;
}

/* --- .progress-bar — animated fill --- */
.progress-bar {
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.progress-bar .progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--accent), #00bcd4);
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  animation: progressFill .8s ease-out;
}
.progress-bar.progress-sm { height: 4px; }
.progress-bar.progress-lg { height: 10px; border-radius: 5px; }
.progress-bar.progress-lg .progress-fill { border-radius: 5px; }
.progress-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .3rem;
  font-size: .78rem;
}
.progress-bar-label span:first-child {
  color: var(--txt2);
}
.progress-bar-label span:last-child {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: var(--accent);
}

/* --- .tooltip — hover tooltips --- */
.tooltip {
  position: relative;
  cursor: help;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.85);
  background: var(--bg);
  border: 1px solid var(--brd);
  color: var(--txt);
  padding: .4rem .75rem;
  border-radius: 8px;
  font-size: .75rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
}
.tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--brd);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  z-index: 1001;
}
.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}
.tooltip:hover::after {
  transform: translateX(-50%) scale(1);
}

/* --- .modal — overlay + content --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 2rem;
  max-width: 560px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  transform: scale(.9) translateY(20px);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal-overlay.open .modal-content {
  transform: scale(1) translateY(0);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--brd);
}
.modal-header h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--txt2);
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .2s;
}
.modal-close:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,207,107,.05);
}
.modal-body {
  color: var(--txt2);
  font-size: .9rem;
  line-height: 1.7;
}
.modal-footer {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--brd);
}

/* --- .notification — toast from right --- */
.notification {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9500;
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1rem 1.5rem;
  min-width: 280px;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  animation: slideInRight .4s cubic-bezier(.4,0,.2,1) forwards;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.notification.notification-exit {
  animation: fadeOut .3s ease forwards;
}
.notification-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.notification-body {
  flex: 1;
}
.notification-title {
  font-family: 'Orbitron', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: .2rem;
}
.notification-message {
  font-size: .8rem;
  color: var(--txt2);
  line-height: 1.5;
}
.notification-dismiss {
  background: none;
  border: none;
  color: var(--txt2);
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color .2s;
}
.notification-dismiss:hover {
  color: var(--accent);
}
/* Notification variants */
.notification.success { border-left: 3px solid var(--accent); }
.notification.error   { border-left: 3px solid #f44336; }
.notification.warning { border-left: 3px solid #ffd600; }
.notification.info    { border-left: 3px solid #00bcd4; }

/* Stacked notifications */
.notification:nth-child(2) { top: 5.5rem; }
.notification:nth-child(3) { top: 9.5rem; }

/* --- .tabs — tab component --- */
.tabs {
  width: 100%;
}
.tab-list {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--brd);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--txt2);
  background: transparent;
  border: none;
  padding: .75rem 1.25rem;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color .2s;
}
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  transition: background .2s;
}
.tab-btn:hover {
  color: var(--txt);
}
.tab-btn.active {
  color: var(--accent);
}
.tab-btn.active::after {
  background: var(--accent);
}
.tab-panel {
  display: none;
  padding: 1.5rem 0;
}
.tab-panel.active {
  display: block;
  animation: fadeInUp .3s ease-out;
}

/* --- .breadcrumb — navigation trail --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .75rem 0;
  font-size: .8rem;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--txt2);
  text-decoration: none;
  transition: color .2s;
  padding: .2rem .4rem;
  border-radius: 4px;
}
.breadcrumb a:hover {
  color: var(--accent);
  background: rgba(255,207,107,.05);
}
.breadcrumb .separator {
  color: var(--txt2);
  opacity: .4;
  font-size: .7rem;
  user-select: none;
}
.breadcrumb .current {
  color: var(--accent);
  font-weight: 600;
  padding: .2rem .4rem;
}

/* --- Light theme overrides for new components --- */
html.light-theme .component-card {
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
html.light-theme .modal-content {
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
html.light-theme .notification {
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}
html.light-theme .tooltip::after {
  background: #fff;
  border-color: var(--brd);
  color: var(--txt);
}
html.light-theme .skeleton {
  background: linear-gradient(
    90deg,
    #e8ecf1 25%,
    #f5f7fa 50%,
    #e8ecf1 75%
  );
  background-size: 200% 100%;
}
html.light-theme .tab-btn {
  color: var(--txt2);
}
html.light-theme .tab-btn.active {
  color: var(--accent);
}
html.light-theme .modal-overlay {
  background: rgba(0,0,0,.4);
}

/* --- Responsive overrides for new components --- */
@media (max-width: 768px) {
  .notification {
    right: .75rem;
    left: .75rem;
    min-width: auto;
    max-width: none;
  }
  .modal-content {
    padding: 1.5rem;
    width: 95%;
  }
  .tab-btn {
    padding: .6rem .8rem;
    font-size: .72rem;
  }
}
@media (max-width: 480px) {
  .notification {
    top: .75rem;
    right: .5rem;
    left: .5rem;
    padding: .75rem 1rem;
  }
  .notification:nth-child(2) { top: 4.5rem; }
  .notification:nth-child(3) { top: 8rem; }
  .breadcrumb {
    font-size: .72rem;
  }
}


/* ============================================
   36. DESIGN SYSTEM ENHANCEMENT v5.6.0
   21 Mar 2026 — NEXUS Variables · Buttons · Cards
   Accessibility · Print · Skeletons · Utilities
   ============================================ */

/* --- 36.1 Complete NEXUS Color Variables --- */
:root {
  /* Missing NEXUS colors (completing the full 29 set) */
  --nx-justicia:       #37474F;
  --nx-fortaleza:      #B71C1C;
  --nx-naciones:       #1B5E20;
  --nx-diplomatico:    #0D47A1;
  --nx-cadena:         #E65100;
  --nx-energia:        #F9A825;
  --nx-creativo:       #AD1457;
  --nx-trabajo:        #546E7A;
  --nx-bienestar:      #00BFA5;
  --nx-dashboard:      #ffcf6b;

  /* NEXUS colors with alpha (for backgrounds) */
  --nx-orbital-bg:     rgba(0,188,212,.08);
  --nx-escudo-bg:      rgba(244,67,54,.08);
  --nx-cerebro-bg:     rgba(124,77,255,.08);
  --nx-tesoro-bg:      rgba(255,214,0,.08);
  --nx-voces-bg:       rgba(224,64,251,.08);
  --nx-consejo-bg:     rgba(21,101,192,.08);
  --nx-tierra-bg:      rgba(67,160,71,.08);
  --nx-forja-bg:       rgba(0,230,118,.08);
  --nx-urbe-bg:        rgba(255,145,0,.08);
  --nx-raices-bg:      rgba(255,207,107,.08);
  --nx-salud-bg:       rgba(255,87,34,.08);
  --nx-academia-bg:    rgba(156,39,176,.08);
  --nx-escolar-bg:     rgba(30,136,229,.08);
  --nx-entretenimiento-bg: rgba(233,30,99,.08);
  --nx-escritorio-bg:  rgba(38,198,218,.08);
  --nx-comercio-bg:    rgba(255,109,0,.08);
  --nx-amparo-bg:      rgba(96,125,139,.08);
  --nx-cosmos-bg:      rgba(26,35,126,.08);
  --nx-turistico-bg:   rgba(255,179,0,.08);
  --nx-justicia-bg:    rgba(55,71,79,.08);
  --nx-fortaleza-bg:   rgba(183,28,28,.08);
  --nx-naciones-bg:    rgba(27,94,32,.08);
  --nx-diplomatico-bg: rgba(13,71,161,.08);
  --nx-cadena-bg:      rgba(230,81,0,.08);
  --nx-energia-bg:     rgba(249,168,37,.08);
  --nx-creativo-bg:    rgba(173,20,87,.08);
  --nx-trabajo-bg:     rgba(84,110,122,.08);
  --nx-bienestar-bg:   rgba(0,191,165,.08);

  /* Spacing scale */
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Font sizes */
  --text-xs:  .72rem;
  --text-sm:  .82rem;
  --text-md:  .9rem;
  --text-lg:  1.1rem;
  --text-xl:  1.3rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2rem;

  /* Transitions */
  --ease-out:   cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.68,-.55,.27,1.55);
  --duration-fast: .15s;
  --duration-normal: .3s;
  --duration-slow: .5s;

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:    9000;
  --z-toast:    9500;
  --z-top:      10000;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.15);
  --shadow-md:  0 8px 25px rgba(0,0,0,.2);
  --shadow-lg:  0 16px 40px rgba(0,0,0,.3);
  --shadow-glow: 0 0 20px rgba(255,207,107,.15);
}


/* --- 36.2 Enhanced Button System --- */
.btn-sm {
  padding: .35rem .8rem;
  font-size: .75rem;
  border-radius: 8px;
}
.btn-lg {
  padding: .75rem 2rem;
  font-size: 1rem;
  border-radius: var(--r);
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  padding: .5rem 1.2rem;
  border-radius: var(--r);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}
.btn-outline:hover {
  background: var(--accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,207,107,.25);
}
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--accent);
  padding: .5rem 1rem;
  border-radius: var(--r);
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: all var(--duration-normal);
}
.btn-ghost:hover {
  background: rgba(255,207,107,.08);
  transform: translateY(-1px);
}
.btn-danger {
  background: linear-gradient(135deg, #f44336, #b71c1c);
  color: #fff;
  padding: .5rem 1.2rem;
  border-radius: var(--r);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(244,67,54,.3);
}
.btn-gold {
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #000;
  padding: .5rem 1.2rem;
  border-radius: var(--r);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,215,0,.3);
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--txt2);
  cursor: pointer;
  transition: all var(--duration-normal);
}
.btn-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,207,107,.05);
  transform: scale(1.1);
}

/* Button loading state */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Button group */
.btn-group {
  display: inline-flex;
  gap: 0;
}
.btn-group > .btn,
.btn-group > .btn-outline {
  border-radius: 0;
}
.btn-group > :first-child {
  border-radius: var(--r) 0 0 var(--r);
}
.btn-group > :last-child {
  border-radius: 0 var(--r) var(--r) 0;
}


/* --- 36.3 Enhanced Card Hover Effects --- */
.card-glow:hover {
  box-shadow:
    0 0 15px rgba(255,207,107,.15),
    0 0 45px rgba(255,207,107,.05),
    0 12px 35px rgba(0,0,0,.2);
}
.card-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.card-border-glow {
  position: relative;
}
.card-border-glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), transparent 40%, transparent 60%, var(--accent));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--duration-normal);
}
.card-border-glow:hover::after {
  opacity: 1;
}

/* NEXUS-colored card tops */
.card-nx-orbital  { border-top: 3px solid var(--nx-orbital); }
.card-nx-escudo   { border-top: 3px solid var(--nx-escudo); }
.card-nx-cerebro  { border-top: 3px solid var(--nx-cerebro); }
.card-nx-tesoro   { border-top: 3px solid var(--nx-tesoro); }
.card-nx-voces    { border-top: 3px solid var(--nx-voces); }
.card-nx-consejo  { border-top: 3px solid var(--nx-consejo); }
.card-nx-tierra   { border-top: 3px solid var(--nx-tierra); }
.card-nx-forja    { border-top: 3px solid var(--nx-forja); }
.card-nx-urbe     { border-top: 3px solid var(--nx-urbe); }
.card-nx-raices   { border-top: 3px solid var(--nx-raices); }
.card-nx-salud    { border-top: 3px solid var(--nx-salud); }
.card-nx-academia { border-top: 3px solid var(--nx-academia); }
.card-nx-escolar  { border-top: 3px solid var(--nx-escolar); }
.card-nx-entretenimiento { border-top: 3px solid var(--nx-entretenimiento); }
.card-nx-escritorio { border-top: 3px solid var(--nx-escritorio); }
.card-nx-comercio { border-top: 3px solid var(--nx-comercio); }
.card-nx-amparo   { border-top: 3px solid var(--nx-amparo); }
.card-nx-cosmos   { border-top: 3px solid var(--nx-cosmos); }
.card-nx-turistico { border-top: 3px solid var(--nx-turistico); }
.card-nx-justicia { border-top: 3px solid var(--nx-justicia); }
.card-nx-fortaleza { border-top: 3px solid var(--nx-fortaleza); }
.card-nx-naciones { border-top: 3px solid var(--nx-naciones); }
.card-nx-diplomatico { border-top: 3px solid var(--nx-diplomatico); }
.card-nx-cadena   { border-top: 3px solid var(--nx-cadena); }
.card-nx-energia  { border-top: 3px solid var(--nx-energia); }
.card-nx-creativo { border-top: 3px solid var(--nx-creativo); }
.card-nx-trabajo  { border-top: 3px solid var(--nx-trabajo); }
.card-nx-bienestar { border-top: 3px solid var(--nx-bienestar); }


/* --- 36.4 GAAD Accessibility Focus Styles --- */
/* Enhanced focus-visible for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255,207,107,.15);
}

/* Card focus */
.card:focus-visible,
.feature-card:focus-visible,
.component-card:focus-visible,
.data-card:focus-visible,
.nx-card-futuristic:focus-visible,
.p-card-futuristic:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  transform: translateY(-3px);
  box-shadow: 0 0 0 6px rgba(255,207,107,.12), 0 8px 25px rgba(255,207,107,.1);
}

/* Focus within containers */
.card:focus-within,
.feature-card:focus-within {
  border-color: var(--accent);
}

/* High contrast mode support */
@media (forced-colors: active) {
  .btn, .btn-outline, .btn-ghost, .btn-danger, .btn-gold {
    border: 2px solid ButtonText;
  }
  .card, .feature-card, .component-card {
    border: 2px solid CanvasText;
  }
  .badge, .tag, .status-badge {
    border: 1px solid CanvasText;
  }
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Visible focus indicator for keyboard nav */
.focus-ring:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}


/* --- 36.5 Enhanced Print Styles --- */
@media print {
  /* Override dark backgrounds */
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body {
    font-size: 12pt;
    line-height: 1.5;
    background: #fff !important;
    color: #000 !important;
  }

  /* Hide non-essential UI */
  nav, header, footer,
  .security-badge, .status-dot, .theme-toggle,
  .particles-bg canvas.particles,
  .skip, .skip-nav,
  .btn, .btn-outline, .btn-ghost, .hero-btn,
  .notification, .modal-overlay,
  .search-futuristic,
  .sec-shield,
  .tower, .ring {
    display: none !important;
  }

  /* Show link URLs */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666 !important;
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: '';
  }

  /* Cards print with borders */
  .card, .feature-card, .component-card, .data-card, .stat {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
    break-inside: avoid;
    padding: 8pt;
    margin-bottom: 8pt;
  }

  /* Grids to single column */
  .grid, .features-grid, .data-grid, .conn-grid, .plans-grid {
    display: block !important;
  }
  .grid > *, .features-grid > *, .data-grid > * {
    margin-bottom: 8pt;
  }

  /* Hero simplified */
  .hero {
    padding: 16pt 0 !important;
  }
  .hero h1, .hero h2 {
    font-size: 18pt !important;
    -webkit-text-fill-color: #000 !important;
  }

  /* Tables print-friendly */
  table {
    border-collapse: collapse !important;
  }
  th, td {
    border: 1px solid #ccc !important;
    padding: 4pt 6pt !important;
    color: #000 !important;
  }
  thead {
    background: #f0f0f0 !important;
  }

  /* Page breaks */
  h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }
  .section {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Remove animations */
  * {
    animation: none !important;
    transition: none !important;
  }
}


/* --- 36.6 Loading Skeleton Enhancements --- */
.skeleton-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: .75rem;
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.skeleton-line {
  height: .85rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-line.w-25 { width: 25%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-100 { width: 100%; }
.skeleton-line.h-lg { height: 1.5rem; }
.skeleton-line.h-sm { height: .5rem; }

/* Skeleton grid layout */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.skeleton-card-placeholder {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.5rem;
  min-height: 200px;
}
.skeleton-card-placeholder .skeleton-line {
  margin-bottom: .6rem;
}

/* Pulse skeleton variant */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
.skeleton-pulse {
  animation: skeletonPulse 1.5s ease-in-out infinite;
  background: var(--bg3);
  border-radius: var(--r);
}


/* --- 36.7 Badge & Tag System for Platform Categories --- */
/* NEXUS category badges */
.badge-nx {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .7rem;
  border-radius: 2rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.badge-nx-orbital       { background: var(--nx-orbital-bg);  color: var(--nx-orbital);  border: 1px solid rgba(0,188,212,.25); }
.badge-nx-escudo        { background: var(--nx-escudo-bg);   color: var(--nx-escudo);   border: 1px solid rgba(244,67,54,.25); }
.badge-nx-cerebro       { background: var(--nx-cerebro-bg);  color: var(--nx-cerebro);  border: 1px solid rgba(124,77,255,.25); }
.badge-nx-tesoro        { background: var(--nx-tesoro-bg);   color: var(--nx-tesoro);   border: 1px solid rgba(255,214,0,.25); }
.badge-nx-voces         { background: var(--nx-voces-bg);    color: var(--nx-voces);    border: 1px solid rgba(224,64,251,.25); }
.badge-nx-consejo       { background: var(--nx-consejo-bg);  color: var(--nx-consejo);  border: 1px solid rgba(21,101,192,.25); }
.badge-nx-tierra        { background: var(--nx-tierra-bg);   color: var(--nx-tierra);   border: 1px solid rgba(67,160,71,.25); }
.badge-nx-forja         { background: var(--nx-forja-bg);    color: var(--nx-forja);    border: 1px solid rgba(0,230,118,.25); }
.badge-nx-urbe          { background: var(--nx-urbe-bg);     color: var(--nx-urbe);     border: 1px solid rgba(255,145,0,.25); }
.badge-nx-raices        { background: var(--nx-raices-bg);   color: var(--nx-raices);   border: 1px solid rgba(255,207,107,.25); }
.badge-nx-salud         { background: var(--nx-salud-bg);    color: var(--nx-salud);    border: 1px solid rgba(255,87,34,.25); }
.badge-nx-academia      { background: var(--nx-academia-bg); color: var(--nx-academia); border: 1px solid rgba(156,39,176,.25); }
.badge-nx-escolar       { background: var(--nx-escolar-bg);  color: var(--nx-escolar);  border: 1px solid rgba(30,136,229,.25); }
.badge-nx-entretenimiento { background: var(--nx-entretenimiento-bg); color: var(--nx-entretenimiento); border: 1px solid rgba(233,30,99,.25); }
.badge-nx-escritorio    { background: var(--nx-escritorio-bg); color: var(--nx-escritorio); border: 1px solid rgba(38,198,218,.25); }
.badge-nx-comercio      { background: var(--nx-comercio-bg); color: var(--nx-comercio); border: 1px solid rgba(255,109,0,.25); }
.badge-nx-amparo        { background: var(--nx-amparo-bg);   color: var(--nx-amparo);   border: 1px solid rgba(96,125,139,.25); }
.badge-nx-cosmos        { background: var(--nx-cosmos-bg);   color: var(--nx-cosmos);   border: 1px solid rgba(26,35,126,.25); }
.badge-nx-turistico     { background: var(--nx-turistico-bg); color: var(--nx-turistico); border: 1px solid rgba(255,179,0,.25); }
.badge-nx-justicia      { background: var(--nx-justicia-bg); color: var(--nx-justicia); border: 1px solid rgba(55,71,79,.25); }
.badge-nx-fortaleza     { background: var(--nx-fortaleza-bg); color: var(--nx-fortaleza); border: 1px solid rgba(183,28,28,.25); }
.badge-nx-naciones      { background: var(--nx-naciones-bg); color: var(--nx-naciones); border: 1px solid rgba(27,94,32,.25); }
.badge-nx-diplomatico   { background: var(--nx-diplomatico-bg); color: var(--nx-diplomatico); border: 1px solid rgba(13,71,161,.25); }
.badge-nx-cadena        { background: var(--nx-cadena-bg);   color: var(--nx-cadena);   border: 1px solid rgba(230,81,0,.25); }
.badge-nx-energia       { background: var(--nx-energia-bg);  color: var(--nx-energia);  border: 1px solid rgba(249,168,37,.25); }
.badge-nx-creativo      { background: var(--nx-creativo-bg); color: var(--nx-creativo); border: 1px solid rgba(173,20,87,.25); }
.badge-nx-trabajo       { background: var(--nx-trabajo-bg);  color: var(--nx-trabajo);  border: 1px solid rgba(84,110,122,.25); }
.badge-nx-bienestar     { background: var(--nx-bienestar-bg); color: var(--nx-bienestar); border: 1px solid rgba(0,191,165,.25); }

/* Tag variants for technology categories */
.tag-blockchain { background: rgba(74,158,255,.12); color: #4a9eff; }
.tag-ai         { background: rgba(124,77,255,.12); color: #7c4dff; }
.tag-quantum    { background: rgba(232,64,64,.12);  color: #e84040; }
.tag-satellite  { background: rgba(0,188,212,.12);  color: #00bcd4; }
.tag-iot        { background: rgba(255,145,0,.12);  color: #ff9100; }
.tag-security   { background: rgba(244,67,54,.12);  color: #f44336; }
.tag-finance    { background: rgba(255,214,0,.12);  color: #ffd600; }
.tag-health     { background: rgba(255,87,34,.12);  color: #FF5722; }
.tag-education  { background: rgba(156,39,176,.12); color: #9C27B0; }
.tag-energy     { background: rgba(249,168,37,.12); color: #F9A825; }
.tag-sovereign  { background: rgba(255,207,107,.12);   color: #ffcf6b; }

/* Badge sizes */
.badge-sm {
  font-size: .62rem;
  padding: .15rem .5rem;
}
.badge-lg {
  font-size: .85rem;
  padding: .4rem 1rem;
}

/* Badge with count */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 .4rem;
  border-radius: 11px;
  background: var(--accent);
  color: #000;
  font-size: .68rem;
  font-weight: 800;
  font-family: 'Orbitron', sans-serif;
}


/* --- 36.8 Toast / Notification Enhancement --- */
/* Auto-dismiss progress bar */
.notification-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 var(--r) var(--r);
  animation: shrinkWidth var(--toast-duration, 5s) linear forwards;
}
@keyframes shrinkWidth {
  from { width: 100%; }
  to   { width: 0; }
}

/* Toast position variants */
.toast-top-center {
  top: 1.5rem;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.toast-bottom-right {
  top: auto;
  bottom: 1.5rem;
  right: 1.5rem;
}
.toast-bottom-center {
  top: auto;
  bottom: 1.5rem;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* Compact toast variant */
.notification-compact {
  padding: .6rem 1rem;
  min-width: 200px;
  font-size: .8rem;
  gap: .5rem;
}
.notification-compact .notification-title {
  font-size: .75rem;
}
.notification-compact .notification-message {
  font-size: .72rem;
}


/* --- 36.9 Dark Mode Contrast Enhancements --- */
/* Ensure minimum 4.5:1 contrast ratio (WCAG AA) */
:root {
  /* Text on dark background: #f0f0f5 on #0a0e17 = 15.8:1 */
  /* Secondary text: #b0b8c8 on #0a0e17 = 9.1:1 (upgraded from #a0a8b8) */
  --txt2-high-contrast: #b0b8c8;
}

/* High-contrast text option */
.text-hc {
  color: var(--txt2-high-contrast);
}

/* Ensure links are distinguishable */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
a:not([class]):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Increase contrast on disabled states */
[disabled],
.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}


/* --- 36.10 Utility Classes --- */

/* --- Display --- */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }

/* --- Flexbox --- */
.flex          { display: flex; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-1        { flex: 1; }
.flex-auto     { flex: auto; }
.flex-none     { flex: none; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.self-center   { align-self: center; }
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }

/* --- Grid --- */
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* --- Gap --- */
.gap-0  { gap: 0; }
.gap-1  { gap: .25rem; }
.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* --- Text Alignment --- */
.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }

/* --- Text Sizes --- */
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* --- Font Weight --- */
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* --- Text Transform --- */
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* --- Text Colors --- */
.text-accent  { color: var(--accent); }
.text-gold    { color: var(--gold); }
.text-muted   { color: var(--txt2); }
.text-success { color: #ffcf6b; }
.text-danger  { color: #f44336; }
.text-warning { color: #ffd600; }
.text-info    { color: #00bcd4; }

/* --- Margin --- */
.m-0   { margin: 0 !important; }
.m-1   { margin: .25rem !important; }
.m-2   { margin: .5rem !important; }
.m-3   { margin: .75rem !important; }
.m-4   { margin: 1rem !important; }
.m-5   { margin: 1.25rem !important; }
.m-6   { margin: 1.5rem !important; }
.m-8   { margin: 2rem !important; }
.m-auto { margin: auto !important; }

.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: .25rem !important; }
.mt-2  { margin-top: .5rem !important; }
.mt-3  { margin-top: .75rem !important; }
.mt-4  { margin-top: 1rem !important; }
.mt-5  { margin-top: 1.25rem !important; }
.mt-6  { margin-top: 1.5rem !important; }
.mt-8  { margin-top: 2rem !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: .25rem !important; }
.mb-2  { margin-bottom: .5rem !important; }
.mb-3  { margin-bottom: .75rem !important; }
.mb-4  { margin-bottom: 1rem !important; }
.mb-5  { margin-bottom: 1.25rem !important; }
.mb-6  { margin-bottom: 1.5rem !important; }
.mb-8  { margin-bottom: 2rem !important; }

.ml-0  { margin-left: 0 !important; }
.ml-1  { margin-left: .25rem !important; }
.ml-2  { margin-left: .5rem !important; }
.ml-4  { margin-left: 1rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-0  { margin-right: 0 !important; }
.mr-1  { margin-right: .25rem !important; }
.mr-2  { margin-right: .5rem !important; }
.mr-4  { margin-right: 1rem !important; }
.mr-auto { margin-right: auto !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* --- Padding --- */
.p-0   { padding: 0 !important; }
.p-1   { padding: .25rem !important; }
.p-2   { padding: .5rem !important; }
.p-3   { padding: .75rem !important; }
.p-4   { padding: 1rem !important; }
.p-5   { padding: 1.25rem !important; }
.p-6   { padding: 1.5rem !important; }
.p-8   { padding: 2rem !important; }

.pt-0  { padding-top: 0 !important; }
.pt-2  { padding-top: .5rem !important; }
.pt-4  { padding-top: 1rem !important; }
.pt-6  { padding-top: 1.5rem !important; }
.pt-8  { padding-top: 2rem !important; }

.pb-0  { padding-bottom: 0 !important; }
.pb-2  { padding-bottom: .5rem !important; }
.pb-4  { padding-bottom: 1rem !important; }
.pb-6  { padding-bottom: 1.5rem !important; }
.pb-8  { padding-bottom: 2rem !important; }

.px-2  { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-4  { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6  { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8  { padding-left: 2rem !important; padding-right: 2rem !important; }

.py-2  { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-4  { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8  { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* --- Width & Height --- */
.w-full    { width: 100%; }
.w-auto    { width: auto; }
.w-screen  { width: 100vw; }
.h-full    { height: 100%; }
.h-auto    { height: auto; }
.h-screen  { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-w-sm  { max-width: 400px; }
.max-w-md  { max-width: 700px; }
.max-w-lg  { max-width: 1000px; }
.max-w-xl  { max-width: 1200px; }
.max-w-full { max-width: 100%; }

/* --- Border --- */
.border      { border: 1px solid var(--brd); }
.border-0    { border: none; }
.border-accent { border-color: var(--accent); }
.rounded     { border-radius: var(--r); }
.rounded-sm  { border-radius: 8px; }
.rounded-lg  { border-radius: 24px; }
.rounded-full { border-radius: 9999px; }
.rounded-none { border-radius: 0; }

/* --- Background --- */
.bg-dark     { background: var(--bg); }
.bg-card     { background: var(--bg2); }
.bg-surface  { background: var(--bg3); }
.bg-accent   { background: var(--accent); color: #000; }
.bg-transparent { background: transparent; }

/* --- Overflow --- */
.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }

/* --- Visibility --- */
.invisible { visibility: hidden; }
.visible   { visibility: visible; }
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: .25; }
.opacity-50  { opacity: .5; }
.opacity-75  { opacity: .75; }
.opacity-100 { opacity: 1; }

/* --- Pointer & Cursor --- */
.pointer       { cursor: pointer; }
.cursor-default { cursor: default; }
.no-select     { user-select: none; }
.no-pointer    { pointer-events: none; }

/* --- Truncation --- */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Responsive utilities --- */
@media (max-width: 768px) {
  .md\:d-none     { display: none !important; }
  .md\:d-block    { display: block !important; }
  .md\:d-flex     { display: flex !important; }
  .md\:flex-col   { flex-direction: column !important; }
  .md\:text-center { text-align: center !important; }
  .md\:grid-cols-1 { grid-template-columns: 1fr !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .md\:p-2        { padding: .5rem !important; }
  .md\:p-4        { padding: 1rem !important; }
  .md\:w-full     { width: 100% !important; }
}
@media (max-width: 480px) {
  .sm\:d-none     { display: none !important; }
  .sm\:d-block    { display: block !important; }
  .sm\:flex-col   { flex-direction: column !important; }
  .sm\:text-center { text-align: center !important; }
  .sm\:grid-cols-1 { grid-template-columns: 1fr !important; }
  .sm\:p-2        { padding: .5rem !important; }
  .sm\:text-sm    { font-size: var(--text-sm) !important; }
}


/* --- 36.11 Form Input Styles --- */
.input, .select, .textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
select,
textarea {
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: .6rem 1rem;
  color: var(--txt);
  font-family: 'Exo 2', sans-serif;
  font-size: .88rem;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,207,107,.1);
  outline: none;
}
.input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--txt2);
  opacity: .6;
}

/* Input group */
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .input,
.input-group input {
  border-radius: 10px 0 0 10px;
}
.input-group .btn {
  border-radius: 0 10px 10px 0;
}

/* Form label */
.form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--txt2);
  margin-bottom: .4rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-hint {
  font-size: .72rem;
  color: var(--txt2);
  margin-top: .3rem;
  opacity: .7;
}

/* --- 36.12 Divider --- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brd), transparent);
  margin: 1.5rem 0;
  border: none;
}
.divider-accent {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 2rem 0;
  border: none;
}

/* --- 36.13 Aspect Ratio Containers --- */
.aspect-square { aspect-ratio: 1/1; }
.aspect-video  { aspect-ratio: 16/9; }
.aspect-photo  { aspect-ratio: 4/3; }

/* --- 36.14 Container Widths --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
.container-sm { max-width: 800px; }
.container-lg { max-width: 1400px; }

/* --- COMPATIBILITY ALIASES v5.5.1 --- */
:root {
  --matrix-green: #ffcf6b;
  --matrix-cyan: #00e5ff;
  --bg-primary: var(--bg, #0a0e17);
  --bg-secondary: var(--bg2, #0d1a2d);
  --text-primary: var(--txt, #f0f0f5);
  --text-secondary: var(--txt2, #a0a8b8);
  --border-glow: rgba(255,207,107,0.4);
  --font-mono: 'Courier New', 'Fira Code', monospace;
}

/* --- Button: btn-sovereign (compatibility) --- */
.btn-sovereign {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.8rem;
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--bg, #0a0e17);
  background: var(--accent, #ffcf6b);
  border: none;
  border-radius: var(--r, 16px);
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}
.btn-sovereign:hover {
  box-shadow: 0 0 40px rgba(255,207,107,0.6), 0 0 8px rgba(255,207,107,1);
  transform: translateY(-2px);
  filter: brightness(1.15);
}
.btn-sovereign--outline {
  background: transparent;
  color: var(--accent, #ffcf6b);
  border: 1px solid var(--accent, #ffcf6b);
}
.btn-sovereign--outline:hover {
  background: rgba(255,207,107,0.1);
}

/* --- NEON GLOW ENHANCEMENT v5.5.1 --- */
:root {
  --glow-sm: 0 0 8px rgba(255,207,107,0.4), 0 0 2px rgba(255,207,107,0.8);
  --glow-md: 0 0 20px rgba(255,207,107,0.5), 0 0 4px rgba(255,207,107,0.9);
  --glow-lg: 0 0 40px rgba(255,207,107,0.6), 0 0 8px rgba(255,207,107,1);
  --glow-gold: 0 0 8px rgba(255, 215, 0, 0.5), 0 0 2px rgba(255, 215, 0, 0.9);
  --glow-cyan: 0 0 8px rgba(0, 229, 255, 0.5), 0 0 2px rgba(0, 229, 255, 0.9);
  --glow-red: 0 0 8px rgba(255, 82, 82, 0.5), 0 0 2px rgba(255, 82, 82, 0.9);
}

/* Neon Utility Classes */
.neon-green { color: var(--neon-green, #ffcf6b); text-shadow: var(--glow-sm); }
.neon-gold { color: var(--gold); text-shadow: var(--glow-gold); }
.neon-cyan { color: var(--neon-cyan, #00FFFF); text-shadow: var(--glow-cyan); }
.neon-red { color: #ff5252; text-shadow: var(--glow-red); }
.neon-pulse { animation: pulseGlow 2s ease-in-out infinite; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 8px rgba(255,207,107,0.2); } 50% { box-shadow: 0 0 24px rgba(255,207,107,0.5); } }

/* Neon Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg, #0a0e17); }
::-webkit-scrollbar-thumb { background: rgba(255,207,107,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,207,107,0.6); }

/* --- END Design System Enhancement v5.6.0 --- */