/* ============================================
   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: #00FF41; /* override per-platform */
  --neon-green: #00FF41;
  --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:   #00FF41;
  /* 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(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.3);
}

/* --- 6. Hero --- */
.hero {
  text-align: center;
  padding: 5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,255,65,.06), transparent 70%);
}
.hero::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,255,65,.08), transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.badge {
  display: inline-block;
  background: rgba(0,255,65,.08);
  border: 1px solid rgba(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.06), transparent);
  transition: left .5s;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,255,65,.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(0,255,65,.15), rgba(0,255,65,.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(0,255,65,.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(0,255,65,.3); }
  50%      { box-shadow: 0 0 20px rgba(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.06), transparent);
  transition: left .5s;
}
.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,255,65,.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(0,255,65,.15), rgba(0,255,65,.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(0,255,65,.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. 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) {
  /* 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; }
}
@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: .8rem 1rem; flex-wrap: wrap; }
  .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; }
}

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

/* --- Security Status Badge --- */
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(0,255,65,.08);
  border: 1px solid rgba(0,255,65,.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(0,255,65,.15);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0,255,65,.2);
}
.security-badge .sec-icon { font-size: .9rem; }
.security-badge[data-grade="A+"] { border-color: #00FF41; color: #00FF41; }
.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: #00FF41 !important;
  box-shadow: 0 0 0 2px rgba(0,255,65,.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: #00FF41; box-shadow: 0 0 6px rgba(0,255,65,.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: #00FF41; }
.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(0,255,65,.2), inset 0 0 5px rgba(0,255,65,.1); }
  50%      { box-shadow: 0 0 20px rgba(0,255,65,.4), inset 0 0 10px rgba(0,255,65,.2); }
}
.sec-shield {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(0,255,65,.15), rgba(0,255,65,.05));
  border: 2px solid rgba(0,255,65,.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, #00FF41, #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(0,255,65,.15), 0 0 45px rgba(0,255,65,.05); }
.glow-accent-strong { box-shadow: 0 0 20px rgba(0,255,65,.25), 0 0 60px rgba(0,255,65,.1); }
.glow-text { text-shadow: 0 0 20px rgba(0,255,65,.3), 0 0 40px rgba(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.05), transparent 60%);
  animation: rotateBg 8s linear infinite;
  pointer-events: none;
}
@keyframes rotateBg {
  to { transform: rotate(360deg); }
}
.stat-futuristic:hover {
  border-color: rgba(0,255,65,.4);
  box-shadow: 0 0 25px rgba(0,255,65,.12), inset 0 0 25px rgba(0,255,65,.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(0,255,65,.02) 0%, transparent 50%, rgba(0,255,65,.02) 100%);
  opacity: 0;
  transition: opacity .4s;
}
.p-card-futuristic:hover::before { opacity: 1; }
.p-card-futuristic:hover {
  border-color: rgba(0,255,65,.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 15px rgba(0,255,65,.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(0,255,65,.4); }
  100% { box-shadow: 0 0 0 12px rgba(0,255,65,0); }
}
.pulse-ring {
  animation: pulse 2s infinite, pulseRing 2s infinite;
}

/* --- Futuristic Badge --- */
.badge-futuristic {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(0,255,65,.06);
  border: 1px solid rgba(0,255,65,.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(0,255,65,.1), inset 0 0 10px rgba(0,255,65,.02);
}

/* --- Footer Futuristic --- */
footer.futuristic-footer {
  background: rgba(13,26,45,.8);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.06);
  border: 1px solid rgba(0,255,65,.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: #00FF41; }
.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(0,255,65,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,255,65,.4); }

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

/* --- 22. Dashboard / NOC Panel --- */
.dashboard {
  background: linear-gradient(135deg, rgba(0,255,65,.03), rgba(0,188,212,.02));
  border: 1px solid rgba(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.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(0,255,65,.06);
  border: 1px solid rgba(0,255,65,.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(0,255,65,.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: #0d8f2d;
  --neon-cyan:  #0891b2;
  --accent: #0d8f2d;
}
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(0,255,65,0.2);
}
.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(0,255,65,0.4);
}
html.light-theme .theme-toggle {
  background: #fff;
  border-color: #0d8f2d;
  color: #0d8f2d;
  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(0,255,65,.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(0,255,65,.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(0,255,65,.08);
  border: 1px solid rgba(0,255,65,.25);
  color: var(--accent);
}
.status-badge.active::before {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,255,65,.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(0,255,65,.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(0,255,65,.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;
  }
}