@import './_variables.css';
@import './_reset.css';

/* ═══════════════════════════════════════════════════════════════
   SPACE BACKGROUND - SIMPLE CSS VERSION
   ═══════════════════════════════════════════════════════════════ */

/* GPU-accelerated layers */
.space-stars,
.space-nebula,
.hero,
.card,
.nav-bar {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

/* CSS containment for performance isolation */
.card,
.news-card,
.research-card,
section {
  contain: content;
}

/* Space background wrapper - must not block clicks */
.space-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -10;
}

.space-stars,
.space-nebula {
  position: fixed;
  top: -20%;
  left: -20%;
  width: 140vw;
  height: 140vh;
  pointer-events: none;
}

.space-stars {
  /* DISABLED: starry sky background - testing constellation layout */
  /* background: url('/public/assets/images/backgrounds/stars-360.jpg') center center no-repeat; */
  /* background-size: 115% auto; */
  background: none;
  z-index: -5;
}

/* NEBULA - FULL SCREEN COVERAGE */
.nebula-bg,
#nebula,
.space-nebula,
.stars-bg,
.space-stars,
[class*="nebula"] {
  position: fixed;
  top: -20%;
  left: -20%;
  width: 140vw;
  height: 140vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Deep nebula layer - behind main nebula */
.space-nebula-deep {
  position: fixed;
  top: -20%;
  left: -20%;
  width: 140vw;
  height: 140vh;
  pointer-events: none;
  background: url('/assets/images/backgrounds/nebula-glow.jpg') center center no-repeat;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.35;
  z-index: -4;
  filter: blur(3px) hue-rotate(180deg);
  animation: nebula-deep-breathe 60s ease-in-out infinite;
}

@keyframes nebula-deep-breathe {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.45; }
}

/* Deep particles container */
.deep-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -3;
}

/* Deep particles - larger, dimmer, slower */
.deep-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(14, 165, 233, 0.15);
  box-shadow: 0 0 6px 2px rgba(14, 165, 233, 0.1);
  animation: deep-pulse 8s ease-in-out infinite;
}

@keyframes deep-pulse {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.3); }
}

.space-nebula {
  position: fixed;
  top: -20%;
  left: -20%;
  width: 140vw;
  height: 140vh;
  background: url('/assets/images/backgrounds/nebula-glow.jpg') center center no-repeat;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.7;
  z-index: -2;
  animation: nebula-breathe 45s ease-in-out infinite, nebula-shift 90s ease-in-out infinite;
}

@keyframes nebula-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.85; }
}

@keyframes nebula-shift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(15deg); }
}

/* Twinkle stars - PREMIUM: subtle, sophisticated */
.twinkle-star {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.twinkle-star.small {
  width: 1px;
  height: 1px;
  background: #e2e8f0;
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.3);
  animation: twinkle-small 6s ease-in-out infinite;
}

.twinkle-star.medium {
  width: 2px;
  height: 2px;
  background: #f8fafc;
  box-shadow: 0 0 4px 1px rgba(14, 165, 233, 0.3);
  animation: twinkle-medium 5s ease-in-out infinite;
}

.twinkle-star.large {
  width: 2px;
  height: 2px;
  background: #ffffff;
  box-shadow: 0 0 6px 2px rgba(14, 165, 233, 0.4);
  animation: twinkle-large 7s ease-in-out infinite;
}

@keyframes twinkle-small {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes twinkle-medium {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

@keyframes twinkle-large {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.3); }
}

/* Floating particles - PREMIUM: subtle, slow movement */
.particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.particle.dust {
  width: 1px;
  height: 1px;
  background: rgba(14, 165, 233, 0.2);
  animation: float-up 35s linear infinite;
}

.particle.spark {
  width: 1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 3px rgba(14, 165, 233, 0.3);
  animation: float-up-wobble 30s ease-in-out infinite;
}

@keyframes float-up {
  0% { transform: translateY(100vh) translateX(0px); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}

@keyframes float-up-wobble {
  0% { transform: translateY(100vh) translateX(0px); opacity: 0; }
  10% { opacity: 0.5; }
  25% { transform: translateY(50vh) translateX(15px); }
  50% { transform: translateY(0vh) translateX(-15px); }
  75% { transform: translateY(-50vh) translateX(15px); }
  90% { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(0px); opacity: 0; }
}

/* Cursor glow - PREMIUM: subtle, sophisticated */
.cursor-glow {
  position: fixed;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0.02) 40%, transparent 70%);
  transform: translate(-50%, -50%);
}

.cursor-glow-inner {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.5) 0%, rgba(14, 165, 233, 0.2) 50%, transparent 70%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 3px rgba(14, 165, 233, 0.2);
}

/* Scroll reveal - PREMIUM: subtle, smooth */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card hover - PREMIUM: glass morphism, subtle lift */
.card:hover, .news-card:hover, .research-card:hover {
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(14, 165, 233, 0.1);
  transform: translateY(-8px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero title - PREMIUM: subtle glow, NO pulsing animation */
.hero-title, .hero h1 {
  text-shadow: 0 0 40px rgba(14, 165, 233, 0.3), 0 0 80px rgba(14, 165, 233, 0.15);
}

/* Button shine - PREMIUM: subtle, sophisticated */
.btn-primary, .cta-button {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary::before, .cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: button-shine 4s infinite;
}

@keyframes button-shine {
  0% { left: -100%; }
  40%, 100% { left: 100%; }
}

.btn-primary:hover, .cta-button:hover {
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM EFFECTS — Glass, Glow, Grid, Living Feel
   ═══════════════════════════════════════════════════════════════ */

/* 1. GLASS CARDS - Frosted glass morphism */
.card, .glass-card, .news-card, .research-card {
  background: rgba(10, 20, 40, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. BREATHING BORDERS - Living, organic feel */
.breathing-border {
  animation: breathe 4s ease-in-out infinite;
}

.card, .glass-card {
  animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    border-color: rgba(0, 212, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 212, 255, 0.1);
  }
  50% {
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 212, 255, 0.2);
  }
}

/* 3. PULSE GLOW - Ambient background glow */
.glow-bg {
  position: relative;
}

.glow-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
  animation: pulse-glow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* 4. GRID OVERLAY - Tech precision feel */
.grid-bg {
  position: relative;
}

.grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* 5. VIGNETTE - Focus attention to center */
.vignette {
  position: relative;
}

.vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 6. HOVER LIFT - Enhanced card interactions */
.card:hover, .glass-card:hover, .news-card:hover, .research-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 212, 255, 0.2);
  border-color: rgba(0, 212, 255, 0.4);
  animation: none;
}

/* 7. TEXT GLOW - Premium heading treatment */
h1, h2, .glow-text, .hero-title {
  text-shadow:
    0 0 20px rgba(0, 212, 255, 0.4),
    0 0 40px rgba(0, 212, 255, 0.2);
}

h3, h4 {
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* Gradient text option */
.gradient-text {
  background: linear-gradient(135deg, #00d4ff 0%, #0066ff 50%, #00d4ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Scan line effect for tech sections */
.scan-lines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 212, 255, 0.02) 2px,
    rgba(0, 212, 255, 0.02) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   TEXT READABILITY — Dark shadows for bright background
   ═══════════════════════════════════════════════════════════════ */

/* Vignette around edges for depth */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM BIOTECH TYPOGRAPHY - Sora + Inter
   ═══════════════════════════════════════════════════════════════ */

/* All headings - Sora font, dark shadows (no colored glow) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif;
  color: #ffffff;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}

h1 { font-weight: 700; }
h2 { font-weight: 600; color: #38bdf8; }
h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 500; }

/* Body text - Inter font */
body, p, li, span {
  font-family: 'Inter', sans-serif;
}

p, li, span:not(.clock-time):not(.clock-label):not(.live-indicator) {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* Nav links */
.nav-link {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.container {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }

.main-content {
  padding-top: 110px; /* 30px ticker + 80px nav */
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.nav-bar {
  position: fixed;
  top: 24px; /* Below the live ticker bar */
  left: 0;
  right: 0;
  height: 56px; /* Tighter nav */
  z-index: var(--z-nav);
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0 2rem;
  display: flex;
  align-items: center;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-2xl);
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.nav-logo:hover {
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════
   LOGO — PREMIUM: Sora font, matching hero style
   ═══════════════════════════════════════════════════════════════ */

/* Hide old pixelated logo image */
.logo-icon, .logo img, .nav-logo img {
  display: none !important;
}

.nav-logo {
  margin-right: auto;
  margin-left: 40px;
  padding-right: 32px;
  flex-shrink: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-text, .nav-logo span.logo-text, .logo span {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow:
    0 0 20px rgba(56, 189, 248, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.nav-logo:hover .logo-text {
  color: #7dd3fc;
  text-shadow:
    0 0 30px rgba(56, 189, 248, 0.6),
    0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL CLOCKS — Real-time biotech hub time zones
   ═══════════════════════════════════════════════════════════════ */
.global-clocks {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: rgba(0, 18, 51, 0.9);
  border: 1px solid rgba(0, 102, 255, 0.3);
  border-radius: 20px;
  font-family: var(--font-data);
  font-size: 10px;
  margin-left: auto;
  margin-right: 20px;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--emerald-bright);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: var(--emerald-bright);
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px var(--emerald-bright);
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.clock-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  padding: 0 6px;
  border-left: 1px solid rgba(0, 102, 255, 0.2);
}

.clock-item:first-of-type {
  border-left: none;
}

.clock-label {
  color: var(--sapphire-bright);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.clock-time {
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.clock-status {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-left: 3px;
}

.clock-status.open {
  background: var(--emerald-bright);
  box-shadow: 0 0 6px var(--emerald-bright);
}

.clock-status.closed {
  background: var(--crimson);
  box-shadow: 0 0 4px var(--crimson);
  opacity: 0.7;
}

/* Hide clocks on mobile */
@media (max-width: 1200px) {
  .global-clocks {
    display: none;
  }
}

.nav-links {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   NAV LINKS — PREMIUM: Clean, professional, unified color
   ═══════════════════════════════════════════════════════════════ */
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 8px 16px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.nav-link:hover {
  color: #f8fafc;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: #0ea5e9;
  border-radius: 1px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 60%;
}

.nav-link.active {
  color: #0ea5e9;
}

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2);
}

.nav-mobile-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: var(--transition-fast);
}

@media (max-width: 1024px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(2, 6, 23, 0.98);
    flex-direction: column;
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
  }

  .nav-links.active {
    display: flex;
  }

  .nav-mobile-toggle {
    display: flex;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-gray-950);
  border-top: 1px solid var(--border-color);
  padding: var(--space-12) var(--space-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
  max-width: var(--container-2xl);
  margin: 0 auto var(--space-8);
}

.footer-section h4 {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-section a {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-color);
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: var(--container-2xl);
  margin: 0 auto;
}

.footer-legal {
  display: flex;
  gap: var(--space-4);
}

.footer-legal a:hover {
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════
   CONTEXTUAL FOOTERS
   ═══════════════════════════════════════════════════════════════ */

.contextual-footer {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-color);
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
}

.contextual-footer h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.contextual-footer p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  line-height: 1.6;
}

.contextual-footer .portfolio-note {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.contextual-footer .games-list,
.contextual-footer .research-list {
  font-size: var(--text-base);
  color: var(--text-primary);
}

.contextual-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.ctx-btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--bg-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.ctx-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.3);
}

.ctx-btn-outline {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.ctx-btn-outline:hover {
  background: rgba(0, 229, 255, 0.1);
}

/* Footer A - Authority */
.footer-authority h3 {
  color: var(--color-primary);
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

/* Footer B - Games */
.footer-games h3 {
  color: var(--color-accent);
}

.footer-games .games-list {
  color: var(--text-secondary);
}

/* Footer C - Research */
.footer-research h3 {
  color: #10b981;
}

.footer-research .research-list {
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM ORGANOID - Clean, elegant, soft glow
   ═══════════════════════════════════════════════════════════════ */

.organoid-container {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 320px;
  height: 380px;
  flex-shrink: 0;
  opacity: 0.6;
  transform: scale(0.25);
  transform-origin: bottom right;
}

/* Glow background behind organoid */
.organoid-container::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.35) 0%,
    rgba(56, 189, 248, 0.15) 40%,
    transparent 70%
  );
  filter: blur(40px);
  z-index: 0;
}

/* Main sphere - BRIGHT and VISIBLE */
.organoid,
.css-organoid-sphere,
.organoid-sphere {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(125, 211, 252, 0.9) 15%,
    rgba(56, 189, 248, 0.8) 35%,
    rgba(14, 165, 233, 0.6) 55%,
    rgba(2, 132, 199, 0.4) 75%,
    transparent 100%
  );
  box-shadow:
    0 0 80px rgba(56, 189, 248, 0.9),
    0 0 120px rgba(56, 189, 248, 0.7),
    0 0 160px rgba(56, 189, 248, 0.5),
    0 0 200px rgba(56, 189, 248, 0.3),
    inset 0 0 60px rgba(255, 255, 255, 0.5),
    inset -30px -30px 60px rgba(56, 189, 248, 0.4);
  animation: organoid-breathe 5s ease-in-out infinite;
}

/* Visible outer ring */
.organoid-ring {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
  animation: ring-rotate 30s linear infinite;
}

/* Second ring - more visible */
.organoid-ring-2 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.35);
  animation: ring-rotate 25s linear infinite reverse;
}

/* Bright core glow */
.organoid-core {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(125, 211, 252, 0.8) 40%,
    rgba(56, 189, 248, 0.4) 70%,
    transparent 100%
  );
  filter: blur(10px);
  animation: core-pulse 3s ease-in-out infinite;
}

@keyframes organoid-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
}

@keyframes ring-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes core-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* Metrics panel - minimal, clean */
.organoid-metrics {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  min-width: 200px;
}

.organoid-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 0.25rem;
}

.organoid-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Legacy organoid classes - keep for compatibility but hide extra elements */
.organoid-membrane,
.organoid-neural,
.organoid-particle,
.organoid-subtitle,
.organoid-stats,
.organoid-stat,
.live-badge {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION - Side by side layout
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  padding: 120px 5% 80px;
}

.hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  max-width: 1400px;
  width: 100%;
}

/* Left side - text content */
.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-title, .hero h1 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.hero-subtitle {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.hero-description {
  margin-bottom: 2rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Responsive - stack on smaller screens */
@media (max-width: 1024px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
  }

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

  .hero-buttons {
    justify-content: center;
  }

  .organoid-container {
    width: 280px;
    height: 340px;
    margin-top: 2rem;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 100px 5% 60px;
  }

  .organoid-container {
    width: 240px;
    height: 300px;
  }

  .organoid {
    width: 140px;
    height: 140px;
  }

  .organoid-ring {
    width: 180px;
    height: 180px;
  }

  .organoid-ring-2 {
    width: 200px;
    height: 200px;
  }
}

/* Vignette overlay for hero - dark edges, clear center */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Global Space Nebula Background Canvas - ALL PAGES */
#global-nebula-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Hero-specific background (if needed) */
#hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px;
  max-width: 900px;
}

/* ═══════════════════════════════════════════════════════════════
   HERO TYPOGRAPHY — PREMIUM: Sora font, dark shadows only
   ═══════════════════════════════════════════════════════════════ */

.hero h1,
.hero-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 700;
  font-style: normal;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  position: relative;
  z-index: 100;
  color: #ffffff;

  /* PREMIUM: Dark shadows only - NO cyan glow (that looks gaming) */
  text-shadow:
    0 4px 30px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-lead {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  margin: 1.5rem auto 40px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* Hero subtitle - white, not cyan (more premium) */
.hero-subtitle, .hero h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  margin-top: 1.5rem;
}

/* Hero body text */
.hero p, .hero-description {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  max-width: 600px;
  margin: 1.5rem auto 0;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL HEADINGS — PREMIUM: Subtle glow, readable
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

h1 { font-weight: 700; letter-spacing: 0.03em; }
h2 { font-weight: 600; letter-spacing: 0.02em; }
h3, h4 { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   CARDS — PREMIUM: Glass morphism done right
   ═══════════════════════════════════════════════════════════════ */

.card, .feature-card, .news-card {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.4s ease;
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(14, 165, 233, 0.15);
  border-color: rgba(255, 255, 255, 0.12);
}

/* All card types - consistent opaque background for readability */
.feature-card, .news-card, .research-card, .stat-card {
  background: rgba(5, 15, 40, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.card-header {
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.card-description {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — 3D POLISHED: Premium depth and interaction
   ═══════════════════════════════════════════════════════════════ */

.btn, button, .button, .btn-primary, .cta-button, .hero-btn {
  /* Base */
  background: linear-gradient(180deg, #00d4ff 0%, #0066ff 50%, #004499 100%);
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* 3D Effect */
  box-shadow:
    0 4px 0 #003366,
    0 6px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);

  /* Polish */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  white-space: nowrap;

  /* Smooth transitions */
  transition: all 0.15s ease;
}

.btn:hover, button:hover, .button:hover, .btn-primary:hover, .cta-button:hover, .hero-btn:hover {
  background: linear-gradient(180deg, #33e0ff 0%, #0088ff 50%, #0055aa 100%);
  box-shadow:
    0 4px 0 #003366,
    0 8px 15px rgba(0, 212, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.btn:active, button:active, .button:active, .btn-primary:active, .cta-button:active, .hero-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #003366,
    0 3px 5px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Glow effect on focus */
.btn:focus, button:focus, .button:focus, .btn-primary:focus, .cta-button:focus, .hero-btn:focus {
  outline: none;
  box-shadow:
    0 4px 0 #003366,
    0 0 20px rgba(0, 212, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Secondary button variant - 3D Dark */
.btn-secondary {
  background: linear-gradient(180deg, #1a2a3a 0%, #0d1a2a 50%, #050d15 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 8px;
  box-shadow:
    0 4px 0 #000,
    0 6px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.btn-secondary:hover {
  background: linear-gradient(180deg, #243444 0%, #152434 50%, #0a1520 100%);
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow:
    0 4px 0 #000,
    0 0 15px rgba(0, 212, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #000,
    0 3px 5px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Outline button - 3D Border */
.btn-outline {
  background: transparent;
  border: 2px solid #00d4ff;
  color: #00d4ff;
  box-shadow:
    0 4px 0 rgba(0, 102, 153, 0.5),
    0 6px 10px rgba(0, 0, 0, 0.3);
}

.btn-outline:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: #33e0ff;
  box-shadow:
    0 4px 0 rgba(0, 102, 153, 0.5),
    0 0 20px rgba(0, 212, 255, 0.4);
  transform: translateY(-2px);
}

/* Ghost button - Subtle 3D */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  border: none;
}

.btn-ghost:hover {
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

/* Size variants */
.btn-lg {
  padding: 16px 36px;
  font-size: 1rem;
  letter-spacing: 1.5px;
  box-shadow:
    0 5px 0 #003366,
    0 8px 15px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  box-shadow:
    0 3px 0 #003366,
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════ */

.section {
  padding: 100px 0;
  position: relative;
}

/* Section vignette overlay - dark edges, clear center */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(0, 10, 25, 0.4) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.section > * {
  position: relative;
  z-index: 1;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #0ea5e9;
  margin-bottom: 24px;
  padding: 6px 16px;
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 100px;
  background: rgba(14, 165, 233, 0.08);
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  color: #f8fafc;
}

.section-description {
  font-size: 18px;
  line-height: 1.7;
  color: #e2e8f0;
  max-width: 700px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */

.page-header {
  padding: var(--space-24) 0 var(--space-12);
  text-align: center;
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--border-color);
}

.page-header h1 {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  margin-bottom: var(--space-4);
}

.page-header p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   STATS
   ═══════════════════════════════════════════════════════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.stat {
  text-align: center;
  padding: var(--space-6);
  position: relative;
  background: rgba(0, 8, 24, 0.6);
  border: 1px solid rgba(0, 85, 255, 0.15);
  border-radius: 12px;
  transition: all 0.4s ease;
}

.stat:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 40px rgba(0, 85, 255, 0.2);
  transform: translateY(-4px);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  text-shadow: 0 0 30px rgba(0, 85, 255, 0.5);
  transition: all 0.3s ease;
}

.stat-animating .stat-value {
  color: var(--color-secondary);
  text-shadow: 0 0 40px rgba(255, 170, 0, 0.6);
}

.stat-animated .stat-value {
  color: var(--color-primary);
}

.stat-pulse {
  animation: statPulse 0.5s ease-out;
}

@keyframes statPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); text-shadow: 0 0 50px rgba(255, 170, 0, 0.8); }
  100% { transform: scale(1); }
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.stat-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-gray-400);
  background: rgba(0, 85, 255, 0.1);
  border: 1px solid rgba(0, 85, 255, 0.2);
  border-radius: 20px;
  padding: 4px 10px;
  margin-top: 8px;
}

.stat-badge.live {
  color: var(--color-secondary);
  background: rgba(255, 170, 0, 0.1);
  border-color: rgba(255, 170, 0, 0.3);
}

.stat-badge.live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-secondary);
  border-radius: 50%;
  margin-right: 6px;
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(255, 170, 0, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BADGES
   ═══════════════════════════════════════════════════════════════ */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(0, 18, 51, 0.8);
  border: 1px solid var(--sapphire);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-8);
  box-shadow: 0 0 20px rgba(0, 119, 255, 0.3);
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--emerald);
  border-radius: 50%;
  animation: badgePulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px var(--emerald-glow);
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

.badge-text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-primary);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   STAT CARD COLORS - UNIQUE PER STAT
   ═══════════════════════════════════════════════════════════════ */

/* Sapphire - Market Stats */
.stat-sapphire {
  --stat-color: var(--sapphire);
  --stat-glow: var(--sapphire-glow);
  border-top: 3px solid var(--sapphire);
}
.stat-sapphire::before {
  background: linear-gradient(90deg, transparent, var(--sapphire), transparent);
  box-shadow: 0 0 20px var(--sapphire-glow);
}
.stat-sapphire .stat-value {
  color: var(--sapphire);
  text-shadow: var(--sapphire-shadow);
}
.stat-sapphire .stat-icon {
  color: var(--sapphire);
  filter: drop-shadow(0 0 10px var(--sapphire-glow));
}

/* Crimson - Failure/Risk Stats */
.stat-crimson {
  --stat-color: var(--crimson);
  --stat-glow: var(--crimson-glow);
  border-top: 3px solid var(--crimson);
}
.stat-crimson .stat-value {
  color: var(--crimson);
  text-shadow: var(--crimson-shadow);
}
.stat-crimson .stat-icon {
  color: var(--crimson);
  filter: drop-shadow(0 0 10px var(--crimson-glow));
}

/* Emerald - Growth Stats */
.stat-emerald {
  --stat-color: var(--emerald);
  --stat-glow: var(--emerald-glow);
  border-top: 3px solid var(--emerald);
}
.stat-emerald .stat-value {
  color: var(--emerald);
  text-shadow: var(--emerald-shadow);
}
.stat-emerald .stat-icon {
  color: var(--emerald);
  filter: drop-shadow(0 0 10px var(--emerald-glow));
}

/* Amber - FDA/Regulatory Stats */
.stat-amber {
  --stat-color: var(--amber);
  --stat-glow: var(--amber-glow);
  border-top: 3px solid var(--amber);
}
.stat-amber .stat-value {
  color: var(--amber);
  text-shadow: var(--amber-shadow);
}
.stat-amber .stat-icon {
  color: var(--amber);
  filter: drop-shadow(0 0 10px var(--amber-glow));
}

/* Indigo - Company Stats */
.stat-indigo {
  --stat-color: var(--indigo);
  --stat-glow: var(--indigo-glow);
  border-top: 3px solid var(--indigo);
}
.stat-indigo .stat-value {
  color: var(--indigo-bright);
  text-shadow: var(--indigo-shadow);
}
.stat-indigo .stat-icon {
  color: var(--indigo-bright);
  filter: drop-shadow(0 0 10px var(--indigo-glow));
}

/* Teal - Adoption Stats */
.stat-teal {
  --stat-color: var(--teal);
  --stat-glow: var(--teal-glow);
  border-top: 3px solid var(--teal);
}
.stat-teal .stat-value {
  color: var(--teal-bright);
  text-shadow: var(--teal-shadow);
}
.stat-teal .stat-icon {
  color: var(--teal-bright);
  filter: drop-shadow(0 0 10px var(--teal-glow));
}

/* Stat Card Enhancements */
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  background: rgba(0, 18, 51, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(0, 119, 255, 0.2);
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.stat-source {
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 119, 255, 0.1);
}

/* Stats Section Secondary */
.stats-section-secondary {
  background: rgba(0, 10, 31, 0.5);
  border-top: 1px solid rgba(0, 119, 255, 0.1);
  border-bottom: 1px solid rgba(0, 119, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   INSTITUTIONAL BADGES
   ═══════════════════════════════════════════════════════════════ */
.badges-section {
  padding: var(--space-16) 0;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Institution badges - can be div or anchor */
a.institution-badge {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.institution-badge {
  padding: 20px;
  background: var(--gradient-card);
  border: 1px solid rgba(0, 119, 255, 0.2);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.institution-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--badge-color, var(--sapphire));
  box-shadow: 0 0 15px var(--badge-glow, var(--sapphire-glow));
}

.institution-badge:hover {
  transform: translateY(-4px);
  border-color: var(--badge-color, var(--sapphire));
  box-shadow: 0 10px 40px rgba(0, 119, 255, 0.2);
}

.inst-abbrev {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--badge-color, var(--sapphire));
  text-shadow: 0 0 20px var(--badge-glow, var(--sapphire-glow));
}

.inst-name {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.3;
}

.inst-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: rgba(0, 119, 255, 0.1);
  border: 1px solid rgba(0, 119, 255, 0.2);
  border-radius: var(--radius-full);
  padding: 4px 10px;
}

/* Badge Color Variants */
.badge-amber {
  --badge-color: var(--amber);
  --badge-glow: var(--amber-glow);
}
.badge-amber .inst-abbrev { color: var(--amber); text-shadow: var(--amber-shadow); }

.badge-sapphire {
  --badge-color: var(--sapphire);
  --badge-glow: var(--sapphire-glow);
}
.badge-sapphire .inst-abbrev { color: var(--sapphire); text-shadow: var(--sapphire-shadow); }

.badge-emerald {
  --badge-color: var(--emerald);
  --badge-glow: var(--emerald-glow);
}
.badge-emerald .inst-abbrev { color: var(--emerald); text-shadow: var(--emerald-shadow); }

.badge-crimson {
  --badge-color: var(--crimson);
  --badge-glow: var(--crimson-glow);
}
.badge-crimson .inst-abbrev { color: var(--crimson); text-shadow: var(--crimson-shadow); }

.badge-teal {
  --badge-color: var(--teal);
  --badge-glow: var(--teal-glow);
}
.badge-teal .inst-abbrev { color: var(--teal-bright); text-shadow: var(--teal-shadow); }

.badge-indigo {
  --badge-color: var(--indigo);
  --badge-glow: var(--indigo-glow);
}
.badge-indigo .inst-abbrev { color: var(--indigo-bright); text-shadow: var(--indigo-shadow); }

/* Disclaimer */
.disclaimer-small {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--space-6);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-900);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.1);
  outline: none;
}

.form-input::placeholder {
  color: var(--text-muted);
}

textarea.form-input {
  min-height: 120px;
  resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.table-wrapper {
  overflow-x: auto;
}

.table {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table th,
.table td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table th {
  background: var(--color-gray-900);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--color-gray-900);
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.glow { box-shadow: var(--glow-primary); }
.glow-purple { box-shadow: var(--glow-purple); }
.glow-green { box-shadow: var(--glow-green); }
.glow-orange { box-shadow: var(--glow-orange); }
.glow-intense { box-shadow: var(--glow-intense); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.grid { display: grid; }
.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); }

.hidden { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }

@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LOADING STATES
   ═══════════════════════════════════════════════════════════════ */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════
   TAGS & BADGES
   ═══════════════════════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--color-gray-800);
  color: var(--text-secondary);
}

.tag-primary {
  background: rgba(0, 85, 255, 0.15);
  color: var(--color-primary);
}

.tag-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}

.tag-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}

.tag-error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════ */

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-800);
  color: var(--text-primary);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-tooltip);
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════
   DOMAIN MODAL
   ═══════════════════════════════════════════════════════════════ */

.domain-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  z-index: var(--z-modal);
  backdrop-filter: blur(20px);
  box-shadow: var(--glow-primary);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  min-width: 300px;
  text-align: center;
}

.domain-modal h3 {
  color: var(--color-primary);
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-lg);
}

.domain-modal .modal-category {
  color: var(--color-gray-400);
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-sm);
}

.domain-modal .modal-description {
  color: var(--color-gray-300);
  margin: 0 0 var(--space-5) 0;
  font-size: var(--text-xs);
}

.domain-modal .modal-cta {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-black);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.domain-modal .modal-cta:hover {
  background: var(--color-primary-light);
  box-shadow: var(--glow-intense);
  transform: translateY(-2px);
}

.domain-modal .close-modal {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--color-gray-400);
  font-size: var(--text-2xl);
  cursor: pointer;
  transition: color var(--transition-fast);
}

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

/* ═══════════════════════════════════════════════════════════════
   HIERARCHY PYRAMID SECTION
   ═══════════════════════════════════════════════════════════════ */

.hierarchy-section {
  padding: 120px 40px;
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg,
    rgba(0, 5, 16, 0.9) 0%,
    rgba(0, 12, 32, 0.5) 50%,
    rgba(0, 5, 16, 0.9) 100%
  );
}

.hierarchy-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  overflow: visible;
}

@media (max-width: 968px) {
  .hierarchy-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

/* Framework Origin Statement */
.framework-origin {
  font-size: 14px;
  font-style: italic;
  color: var(--color-gray-400);
  margin-bottom: 30px;
  padding: 15px 20px;
  border-left: 3px solid var(--color-secondary);
  background: rgba(255, 170, 0, 0.05);
}

.hierarchy-text h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 30px;
  line-height: 1.2;
  text-shadow: var(--text-glow-primary);
}

.hierarchy-text p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-gray-300);
  margin-bottom: 20px;
}

.hierarchy-text p strong {
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(0, 85, 255, 0.5);
}

.hierarchy-list {
  list-style: none;
  margin-top: 30px;
  padding: 0;
}

.hierarchy-list li {
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 85, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hierarchy-list li:hover {
  padding-left: 15px;
  background: rgba(0, 85, 255, 0.05);
}

.hierarchy-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  box-shadow: 0 0 15px var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.hierarchy-list li .level-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-light);
  min-width: 150px;
}

.hierarchy-list li .level-desc {
  font-size: 14px;
  color: var(--color-gray-400);
}

/* Pyramid Visual */
.pyramid-visual {
  position: relative;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED PYRAMID - Museum Grade Interactive
   ═══════════════════════════════════════════════════════════════ */

.pyramid-visual-enhanced {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   LEFT LIST - Interactive Hover Effects
   ═══════════════════════════════════════════════════════════════ */

.hierarchy-list {
  --tier-color: var(--color-primary);
}

.hierarchy-item {
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 8px;
  border-left: 3px solid transparent;
  position: relative;
}

.hierarchy-item:hover {
  transform: scale(1.02) translateX(5px);
  background: rgba(0, 85, 255, 0.08);
  border-left-color: var(--color-primary);
}

.hierarchy-item:hover .level-name {
  text-shadow: 0 0 15px rgba(0, 85, 255, 0.6);
  color: var(--color-primary);
}

.hierarchy-item.active {
  background: rgba(0, 85, 255, 0.12);
  border-left-color: var(--color-primary);
  transform: scale(1.02) translateX(5px);
}

.hierarchy-item.active .level-name {
  color: var(--color-primary);
  text-shadow: 0 0 20px rgba(0, 85, 255, 0.7);
}

/* Tier-specific colors for list items */
.hierarchy-item[data-tier="the-human"]:hover,
.hierarchy-item[data-tier="the-human"].active {
  border-left-color: #ffaa00;
  background: rgba(255, 170, 0, 0.1);
}
.hierarchy-item[data-tier="the-human"]:hover .level-name,
.hierarchy-item[data-tier="the-human"].active .level-name {
  color: #ffaa00;
  text-shadow: 0 0 15px rgba(255, 170, 0, 0.6);
}

.hierarchy-item[data-tier="digital-twin"]:hover,
.hierarchy-item[data-tier="digital-twin"].active {
  border-left-color: #06b6d4;
  background: rgba(6, 182, 212, 0.1);
}
.hierarchy-item[data-tier="digital-twin"]:hover .level-name,
.hierarchy-item[data-tier="digital-twin"].active .level-name {
  color: #06b6d4;
  text-shadow: 0 0 15px rgba(6, 182, 212, 0.6);
}

.hierarchy-item[data-tier="patient-analog"]:hover,
.hierarchy-item[data-tier="patient-analog"].active {
  border-left-color: #0055ff;
  background: rgba(0, 85, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   DNA Helix Hero - Rotating & Alive
   ═══════════════════════════════════════════════════════════════ */

.pyramid-hero-anchor {
  margin-bottom: 30px;
  animation: float-gentle 4s ease-in-out infinite;
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(2deg); }
  50% { transform: translateY(-8px) rotate(0deg); }
  75% { transform: translateY(-5px) rotate(-2deg); }
}

.dna-helix-hero {
  filter: drop-shadow(0 0 15px rgba(0, 85, 255, 0.3));
  animation: dna-glow-pulse 3s ease-in-out infinite, dna-slow-rotate 25s linear infinite;
}

@keyframes dna-slow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dna-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(0, 85, 255, 0.3)); }
  50% { filter: drop-shadow(0 0 25px rgba(0, 85, 255, 0.6)); }
}

.dna-helix-hero .dna-strand-1,
.dna-helix-hero .dna-strand-2 {
  stroke-dasharray: 10 5;
  animation: dna-dash 3s linear infinite;
}

.dna-helix-hero .dna-strand-2 {
  animation-direction: reverse;
}

@keyframes dna-dash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 30; }
}

.dna-helix-hero .dna-base {
  animation: base-pulse 2s ease-in-out infinite;
}

.dna-helix-hero line:nth-child(odd) {
  animation-delay: 0.3s;
}

@keyframes base-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Pyramid with Side Icons */
.pyramid-with-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: visible;
  padding-bottom: 80px; /* Space for tooltips below bottom tier */
}

.pyramid-row {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.pyramid-row:hover {
  z-index: 100; /* Bring hovered row and tooltip to front */
}

/* Tier Icons */
.tier-icon {
  position: absolute;
  right: 100%;
  margin-right: 20px;
  display: flex;
  align-items: center;
  opacity: 0.85;
  transition: all 0.3s ease;
}

.tier-icon svg {
  filter: drop-shadow(0 0 8px rgba(0, 85, 255, 0.3));
  transition: all 0.3s ease;
}

.tier-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

.tier-icon:hover svg {
  filter: drop-shadow(0 0 15px rgba(0, 85, 255, 0.5));
}

/* Tier-specific icon colors */
.tier-icon-human svg {
  filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.4));
}

.tier-icon-digital svg {
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

/* Connector Lines */
.tier-connector {
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 85, 255, 0.4) 50%,
    rgba(0, 85, 255, 0.1) 100%
  );
  margin-left: 5px;
}

.tier-icon-human .tier-connector {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 170, 0, 0.4) 50%,
    rgba(255, 170, 0, 0.1) 100%
  );
}

.tier-icon-digital .tier-connector {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(6, 182, 212, 0.4) 50%,
    rgba(6, 182, 212, 0.1) 100%
  );
}

/* ═══════════════════════════════════════════════════════════════
   PYRAMID TIERS - Enhanced Hover & Active States
   ═══════════════════════════════════════════════════════════════ */

.pyramid-row {
  opacity: 0;
  animation: tier-fade-in 0.6s ease forwards;
}

/* Sequential fade-in from bottom to top */
.pyramid-row[data-level="organoid"] { animation-delay: 0.1s; }
.pyramid-row[data-level="tissue-mps"] { animation-delay: 0.2s; }
.pyramid-row[data-level="organ-analog"] { animation-delay: 0.3s; }
.pyramid-row[data-level="system-analog"] { animation-delay: 0.4s; }
.pyramid-row[data-level="digital-twin"] { animation-delay: 0.5s; }
.pyramid-row[data-level="patient-analog"] { animation-delay: 0.6s; }
.pyramid-row[data-level="the-human"] { animation-delay: 0.7s; }

@keyframes tier-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced pyramid level hover */
.pyramid-row .pyramid-level {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pyramid-row:hover .pyramid-level {
  transform: translateY(-5px) scale(1.03);
  z-index: 20;
}

.pyramid-row:hover .pyramid-shape {
  box-shadow: 0 8px 40px rgba(0, 85, 255, 0.4),
              0 0 60px rgba(0, 85, 255, 0.2);
  border-color: var(--color-secondary);
}

.pyramid-row:hover .pyramid-label {
  color: var(--color-secondary);
  text-shadow: 0 0 30px rgba(255, 170, 0, 0.8);
}

/* Active state when corresponding list item is hovered */
.pyramid-row.active .pyramid-level {
  transform: translateY(-5px) scale(1.03);
  z-index: 20;
}

.pyramid-row.active .pyramid-shape {
  box-shadow: 0 8px 40px rgba(0, 85, 255, 0.5),
              0 0 80px rgba(0, 85, 255, 0.3);
  border-color: var(--color-secondary);
}

.pyramid-row.active .pyramid-label {
  color: var(--color-secondary);
  text-shadow: 0 0 30px rgba(255, 170, 0, 0.9);
}

/* Tier-specific active/hover colors */
.pyramid-row[data-level="the-human"]:hover .pyramid-shape,
.pyramid-row[data-level="the-human"].active .pyramid-shape {
  box-shadow: 0 8px 40px rgba(255, 170, 0, 0.5),
              0 0 60px rgba(255, 170, 0, 0.3);
}

.pyramid-row[data-level="digital-twin"]:hover .pyramid-shape,
.pyramid-row[data-level="digital-twin"].active .pyramid-shape {
  box-shadow: 0 8px 40px rgba(6, 182, 212, 0.5),
              0 0 60px rgba(6, 182, 212, 0.3);
  border-color: #06b6d4;
}

.pyramid-row[data-level="digital-twin"]:hover .pyramid-label,
.pyramid-row[data-level="digital-twin"].active .pyramid-label {
  color: #22d3ee;
  text-shadow: 0 0 25px rgba(6, 182, 212, 0.8);
}

/* Patient Analog - Breathing Glow (Brand Tier) */
.pyramid-row[data-level="patient-analog"] .pyramid-shape {
  animation: patient-analog-breathe 4s ease-in-out infinite;
}

@keyframes patient-analog-breathe {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 85, 255, 0.2),
                0 0 40px rgba(0, 85, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 85, 255, 0.4),
                0 0 60px rgba(0, 85, 255, 0.2);
  }
}

/* Highlight tier icon when row is active */
.pyramid-row.active .tier-icon,
.pyramid-row:hover .tier-icon {
  opacity: 1;
  transform: scale(1.15);
}

.pyramid-row.active .tier-icon svg,
.pyramid-row:hover .tier-icon svg {
  filter: drop-shadow(0 0 20px rgba(0, 85, 255, 0.6));
}

.pyramid-row[data-level="the-human"].active .tier-icon svg,
.pyramid-row[data-level="the-human"]:hover .tier-icon svg {
  filter: drop-shadow(0 0 20px rgba(255, 170, 0, 0.6));
}

.pyramid-row[data-level="digital-twin"].active .tier-icon svg,
.pyramid-row[data-level="digital-twin"]:hover .tier-icon svg {
  filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.6));
}

/* Research Framework Badge */
.pyramid-research-badge {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 40px;
  padding: 12px 24px;
  background: rgba(0, 85, 255, 0.05);
  border: 1px solid rgba(0, 85, 255, 0.15);
  border-radius: 30px;
}

.pyramid-research-badge .badge-line {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 85, 255, 0.4), transparent);
}

.pyramid-research-badge .badge-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--color-gray-400);
  text-transform: uppercase;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .tier-icon {
    display: none;
  }

  .pyramid-hero-anchor svg {
    width: 60px;
    height: 72px;
  }

  .pyramid-research-badge {
    flex-direction: column;
    text-align: center;
    padding: 15px 20px;
  }

  .pyramid-research-badge .badge-line {
    width: 60px;
    margin: 5px 0;
  }

  .pyramid-research-badge .badge-text {
    font-size: 10px;
    line-height: 1.5;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DIGITAL TWIN ANATOMICAL VISUALIZATION
   Premium medical-grade wireframe aesthetic
   ═══════════════════════════════════════════════════════════════ */

.human-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.human-silhouette {
  position: relative;
  width: 160px;
  height: 220px;
}

.human-silhouette svg.anatomical-figure {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.6))
          drop-shadow(0 0 40px rgba(0, 153, 255, 0.4))
          drop-shadow(0 0 60px rgba(0, 85, 204, 0.2));
}

.human-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #00e5ff;
  text-transform: uppercase;
  margin-top: 15px;
  text-shadow:
    0 0 10px rgba(0, 229, 255, 0.8),
    0 0 20px rgba(0, 229, 255, 0.5),
    0 0 40px rgba(0, 153, 255, 0.3);
}

/* Outer Aura Glow */
.aura-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(0, 229, 255, 0.15) 0%,
    rgba(0, 153, 255, 0.08) 30%,
    rgba(0, 85, 204, 0.03) 60%,
    transparent 80%
  );
  border-radius: 50%;
  animation: auraBreath 4s ease-in-out infinite;
  pointer-events: none;
}

.aura-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(0, 229, 255, 0.2) 0%,
    rgba(0, 255, 136, 0.1) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: auraBreath 3s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes auraBreath {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

/* Data Flow Particles */
.data-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.data-particles .particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #00e5ff;
  border-radius: 50%;
  box-shadow:
    0 0 6px #00e5ff,
    0 0 12px rgba(0, 229, 255, 0.6);
  animation: particleOrbit 6s linear infinite;
  animation-delay: var(--delay);
  transform-origin: 80px 0;
}

@keyframes particleOrbit {
  0% {
    transform: rotate(var(--angle)) translateX(80px) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(100px) scale(1);
  }
  50% {
    transform: rotate(calc(var(--angle) + 180deg)) translateX(120px) scale(0.8);
    opacity: 0.7;
  }
  90% {
    opacity: 1;
    transform: rotate(calc(var(--angle) + 340deg)) translateX(100px) scale(1);
  }
  100% {
    transform: rotate(calc(var(--angle) + 360deg)) translateX(80px) scale(0.5);
    opacity: 0;
  }
}

/* Hover enhancement */
.human-icon:hover .anatomical-figure {
  filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.9))
          drop-shadow(0 0 60px rgba(0, 153, 255, 0.6))
          drop-shadow(0 0 100px rgba(0, 85, 204, 0.4));
}

.human-icon:hover .human-label {
  color: #00ffff;
  text-shadow:
    0 0 15px rgba(0, 255, 255, 1),
    0 0 30px rgba(0, 229, 255, 0.8),
    0 0 60px rgba(0, 153, 255, 0.5);
}

.human-icon:hover .aura-outer {
  animation-duration: 2s;
}

/* SVG layer animations */
.anatomical-figure .skeleton-layer {
  animation: skeletonPulse 4s ease-in-out infinite;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

.anatomical-figure .organs-layer {
  animation: organsPulse 3s ease-in-out infinite;
}

@keyframes organsPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Responsive sizing */
@media (max-width: 768px) {
  .human-silhouette {
    width: 120px;
    height: 165px;
  }
  .aura-outer {
    width: 180px;
    height: 220px;
  }
  .aura-inner {
    width: 140px;
    height: 180px;
  }
}

/* Pyramid Levels */
.pyramid-level {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* THE HUMAN - Top of pyramid hierarchy */
.pyramid-human {
  flex-direction: column;
  margin-bottom: 15px;
}

.pyramid-human .human-icon {
  margin-bottom: 10px;
}

.pyramid-human .pyramid-shape {
  background: linear-gradient(135deg,
    rgba(255, 170, 0, 0.3) 0%,
    rgba(204, 136, 0, 0.5) 100%
  );
  border-color: var(--color-secondary);
}

.pyramid-human .pyramid-label {
  color: var(--color-secondary);
  text-shadow: 0 0 20px rgba(255, 170, 0, 0.5);
}

/* DIGITAL TWIN - Computational simulation layer */
.pyramid-digital-twin .pyramid-shape {
  background: linear-gradient(135deg,
    rgba(6, 182, 212, 0.25) 0%,
    rgba(14, 116, 144, 0.45) 100%
  );
  border-color: #06b6d4;
}

.pyramid-digital-twin .pyramid-label {
  color: #06b6d4;
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.pyramid-level:hover {
  transform: scale(1.05) translateY(-5px);
  z-index: 10;
}

.pyramid-level:hover .pyramid-label {
  color: var(--color-secondary);
  text-shadow: 0 0 30px rgba(255, 170, 0, 0.8);
}

.pyramid-shape {
  background: linear-gradient(180deg,
    rgba(0, 85, 255, 0.3) 0%,
    rgba(0, 51, 204, 0.5) 100%
  );
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  padding: 0.75rem 2rem;
  overflow: visible;
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
  box-shadow:
    0 4px 15px rgba(0, 85, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pyramid-level:hover .pyramid-shape {
  transform: scale(1.02);
  box-shadow:
    0 0 40px rgba(0, 85, 255, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.4);
}

.pyramid-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-white);
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(0, 85, 255, 0.5);
}

/* Pyramid Tooltips - REMOVED (tooltips deleted from HTML) */

/* Section Divider */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--color-primary),
    var(--color-secondary),
    var(--color-primary),
    transparent
  );
  background-size: 200% 100%;
  animation: gradient-flow 3s linear infinite;
  margin: 0;
  position: relative;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Responsive pyramid */
@media (max-width: 768px) {
  .hierarchy-section {
    padding: 80px 20px;
  }

  .pyramid-with-icons {
    padding-bottom: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIVING ORGANOID HUD - Premium Biotech Visualization
   Blue (#0055ff) + Gold (#ffaa00) Color Scheme
   ═══════════════════════════════════════════════════════════════ */

#living-organoid-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

#living-organoid-container canvas {
  pointer-events: none;
}

.organoid-hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-family: var(--font-sans);
  z-index: 10;
}

.organoid-hud-top-left,
.organoid-hud-top-right,
.organoid-hud-bottom-left,
.organoid-hud-bottom-right {
  position: absolute;
  padding: 20px 25px;
  background: linear-gradient(135deg, rgba(0, 5, 16, 0.85) 0%, rgba(0, 12, 32, 0.75) 100%);
  border: 1px solid rgba(0, 85, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.organoid-hud-top-left {
  top: 100px;
  left: 20px;
  border-radius: 0 0 12px 0;
  border-left: 3px solid rgba(0, 85, 255, 0.6);
}

.organoid-hud-top-right {
  top: 100px;
  right: 20px;
  border-radius: 0 0 0 12px;
  border-right: 3px solid rgba(34, 197, 94, 0.6);
  text-align: right;
}

.organoid-hud-bottom-left {
  bottom: 20px;
  left: 20px;
  border-radius: 0 12px 0 0;
  border-left: 3px solid rgba(255, 170, 0, 0.6);
  min-width: 220px;
}

.organoid-hud-bottom-right {
  bottom: 20px;
  right: 20px;
  border-radius: 12px 0 0 0;
  border-right: 3px solid rgba(0, 85, 255, 0.6);
  text-align: right;
}

.organoid-hud-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(0, 85, 255, 0.7);
  margin-bottom: 5px;
}

.organoid-hud-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(0, 85, 255, 0.4);
}

.organoid-hud-meta {
  font-size: 12px;
  color: var(--color-gray-400);
  margin-top: 4px;
}

.organoid-hud-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #22c55e;
  letter-spacing: 2px;
}

.organoid-status-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: organoid-pulse-dot 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
}

@keyframes organoid-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.organoid-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.organoid-metric:last-child {
  margin-bottom: 0;
}

.organoid-metric-label {
  font-size: 11px;
  color: var(--color-gray-400);
  width: 85px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.organoid-metric-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.organoid-metric-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease-out;
}

.organoid-metric-fill.consciousness-bar {
  background: linear-gradient(90deg, #0055ff, #3377ff);
}

.organoid-metric-fill.activity-bar {
  background: linear-gradient(90deg, #ffaa00, #ffcc00);
}

.organoid-metric-fill.growth-bar {
  background: linear-gradient(90deg, var(--emerald-deep), var(--emerald-bright));
}

.organoid-metric-value {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  width: 48px;
  text-align: right;
}

.organoid-hud-brand {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 85, 255, 0.9);
  letter-spacing: 1px;
  margin-top: 5px;
}

.organoid-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 85, 255, 0.4);
  pointer-events: none;
}

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

/* Mobile responsive for organoid HUD */
@media (max-width: 768px) {
  .organoid-hud-top-left,
  .organoid-hud-top-right,
  .organoid-hud-bottom-left,
  .organoid-hud-bottom-right {
    padding: 12px 15px;
  }

  .organoid-hud-title { font-size: 13px; }
  .organoid-metric-label { width: 60px; font-size: 9px; }
  .organoid-hud-bottom-left { min-width: 180px; }

  .organoid-corner { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   EMBEDDED GAMES SECTION
   ═══════════════════════════════════════════════════════════════ */

.games-section {
  background: linear-gradient(180deg,
    rgba(0, 5, 16, 0.9) 0%,
    rgba(0, 8, 24, 0.95) 100%
  );
}

.game-embed-block {
  margin-top: 60px;
  text-align: center;
}

.game-embed-block:first-of-type {
  margin-top: 40px;
}

.game-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(255, 170, 0, 0.4);
}

.game-description {
  color: var(--color-gray-300);
  margin-bottom: 30px;
  font-size: 16px;
}

.game-description strong {
  color: var(--color-success);
}

.game-iframe-container {
  border: 3px solid rgba(0, 85, 255, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(0, 85, 255, 0.3),
    inset 0 0 60px rgba(0, 5, 16, 0.5);
  background: linear-gradient(135deg, rgba(0, 5, 16, 0.95), rgba(0, 12, 32, 0.9));
}

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

.game-iframe-container.game-iframe-medium iframe {
  height: 750px;
}

.game-actions {
  margin-top: 25px;
}

.game-tags {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.game-tag {
  font-size: 12px;
  color: var(--color-gray-400);
  padding: 6px 12px;
  background: rgba(0, 85, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(0, 85, 255, 0.2);
}

.game-tag.tag-gold {
  background: rgba(255, 170, 0, 0.1);
  border-color: rgba(255, 170, 0, 0.2);
  color: var(--color-secondary);
}

/* Responsive games */
@media (max-width: 768px) {
  .game-iframe-container iframe {
    height: 600px;
  }

  .game-iframe-container.game-iframe-medium iframe {
    height: 500px;
  }

  .game-embed-block {
    margin-top: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INTELLIGENCE HUB SECTION
   ═══════════════════════════════════════════════════════════════ */

.intelligence-section {
  background: linear-gradient(180deg,
    rgba(0, 5, 16, 0.95) 0%,
    rgba(0, 12, 40, 0.9) 50%,
    rgba(0, 5, 16, 0.95) 100%
  );
}

.intel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 50px;
}

@media (max-width: 1024px) {
  .intel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.intel-card {
  background: rgba(0, 8, 32, 0.8);
  border: 1px solid rgba(0, 85, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.intel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.intel-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary);
  box-shadow: 0 20px 60px rgba(0, 85, 255, 0.2);
}

.intel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 85, 255, 0.3);
  transition: all 0.3s ease;
}

.intel-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-primary);
  filter: drop-shadow(0 0 8px rgba(0, 85, 255, 0.5));
}

.intel-card:hover .intel-icon {
  background: rgba(0, 85, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 85, 255, 0.5);
}

.intel-card:hover .intel-icon svg {
  stroke: var(--color-secondary);
  filter: drop-shadow(0 0 12px rgba(255, 170, 0, 0.6));
}

.intel-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 12px;
}

.intel-card p {
  font-size: 14px;
  color: var(--color-gray-400);
  line-height: 1.6;
  margin-bottom: 15px;
}

.intel-count {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary);
  padding: 4px 12px;
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: var(--radius-full);
}

.intel-cta {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
}

/* Live Feed Preview */
.live-feed-preview {
  margin-top: 60px;
  background: rgba(0, 5, 16, 0.9);
  border: 1px solid rgba(0, 85, 255, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.feed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  background: rgba(0, 85, 255, 0.1);
  border-bottom: 1px solid rgba(0, 85, 255, 0.2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.feed-dot {
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  animation: feedPulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
}

@keyframes feedPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.feed-items {
  padding: 10px 0;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0, 85, 255, 0.1);
  transition: background 0.2s ease;
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-item:hover {
  background: rgba(0, 85, 255, 0.05);
}

.feed-source {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-secondary);
  padding: 3px 8px;
  background: rgba(255, 170, 0, 0.1);
  border-radius: 3px;
  min-width: 80px;
  text-align: center;
}

.feed-title {
  font-size: 14px;
  color: var(--color-gray-300);
}

/* ═══════════════════════════════════════════════════════════════
   8-CATEGORY NEWS GRID
   Each category has unique color theme and font styling
   ═══════════════════════════════════════════════════════════════ */

.news-grid-section {
  margin-top: 60px;
}

/* Live Badge */
.news-live-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  margin-bottom: 30px;
  background: rgba(0, 10, 20, 0.8);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 30px;
  font-family: var(--font-display);
}

.news-live-badge .live-dot {
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  animation: live-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

.news-live-badge .live-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ef4444;
}

.news-live-badge .live-divider {
  color: rgba(255, 255, 255, 0.2);
}

.news-live-badge .live-refresh,
.news-live-badge .live-time {
  font-size: 11px;
  color: var(--color-gray-400);
  letter-spacing: 0.5px;
}

/* News Category Grid - 4x2 Desktop */
.news-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Individual News Box */
.news-box {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.news-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.news-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.news-box-header h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
}

.news-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.news-headlines {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-headlines li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.news-headlines li:last-child {
  border-bottom: none;
}

.news-headlines a {
  display: block;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-gray-300);
  text-decoration: none;
  transition: all 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-headlines a:hover {
  background: rgba(255, 255, 255, 0.03);
}

.news-source {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.6;
}

.news-more {
  display: block;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}

.news-more:hover {
  background: rgba(255, 255, 255, 0.05);
}

.news-more::after {
  content: ' →';
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY-SPECIFIC COLORS & FONTS
   ═══════════════════════════════════════════════════════════════ */

/* 1. Organ-on-Chip - Teal/Cyan (Microfluidic feel) */
.news-chip {
  border-color: rgba(6, 182, 212, 0.2);
}
.news-chip:hover {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 12px 40px rgba(6, 182, 212, 0.15);
}
.news-chip .news-box-header {
  background: rgba(6, 182, 212, 0.08);
  border-bottom-color: rgba(6, 182, 212, 0.15);
}
.news-chip .news-box-header h4 { color: #22d3ee; }
.news-chip .news-icon {
  background: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.3);
}
.news-chip .news-source { color: #06b6d4; }
.news-chip .news-more { color: #22d3ee; }
.news-chip .news-more:hover { background: rgba(6, 182, 212, 0.1); }

/* 2. Organoid - Purple/Violet (Cell biology) */
.news-organoid {
  border-color: rgba(139, 92, 246, 0.2);
}
.news-organoid:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
}
.news-organoid .news-box-header {
  background: rgba(139, 92, 246, 0.08);
  border-bottom-color: rgba(139, 92, 246, 0.15);
}
.news-organoid .news-box-header h4 { color: #a78bfa; }
.news-organoid .news-icon {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.news-organoid .news-source { color: #8b5cf6; }
.news-organoid .news-more { color: #a78bfa; }
.news-organoid .news-more:hover { background: rgba(139, 92, 246, 0.1); }

/* 3. Digital Twin - Electric Blue (Digital/Tech) */
.news-digital {
  border-color: rgba(59, 130, 246, 0.2);
}
.news-digital:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
}
.news-digital .news-box-header {
  background: rgba(59, 130, 246, 0.08);
  border-bottom-color: rgba(59, 130, 246, 0.15);
}
.news-digital .news-box-header h4 { color: #60a5fa; }
.news-digital .news-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.news-digital .news-source { color: #3b82f6; }
.news-digital .news-more { color: #60a5fa; }
.news-digital .news-more:hover { background: rgba(59, 130, 246, 0.1); }

/* 4. Regulatory - Gold/Amber (Official/Authority) */
.news-regulatory {
  border-color: rgba(245, 158, 11, 0.2);
}
.news-regulatory:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 12px 40px rgba(245, 158, 11, 0.15);
}
.news-regulatory .news-box-header {
  background: rgba(245, 158, 11, 0.08);
  border-bottom-color: rgba(245, 158, 11, 0.15);
}
.news-regulatory .news-box-header h4 { color: #fbbf24; }
.news-regulatory .news-icon {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.news-regulatory .news-source { color: #f59e0b; }
.news-regulatory .news-more { color: #fbbf24; }
.news-regulatory .news-more:hover { background: rgba(245, 158, 11, 0.1); }

/* 5. Drug Discovery - Green (Medicine/Pharma) */
.news-pharma {
  border-color: rgba(16, 185, 129, 0.2);
}
.news-pharma:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15);
}
.news-pharma .news-box-header {
  background: rgba(16, 185, 129, 0.08);
  border-bottom-color: rgba(16, 185, 129, 0.15);
}
.news-pharma .news-box-header h4 { color: #34d399; }
.news-pharma .news-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.news-pharma .news-source { color: #10b981; }
.news-pharma .news-more { color: #34d399; }
.news-pharma .news-more:hover { background: rgba(16, 185, 129, 0.1); }

/* 6. Industry - Orange (Business/Finance) */
.news-industry {
  border-color: rgba(249, 115, 22, 0.2);
}
.news-industry:hover {
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 12px 40px rgba(249, 115, 22, 0.15);
}
.news-industry .news-box-header {
  background: rgba(249, 115, 22, 0.08);
  border-bottom-color: rgba(249, 115, 22, 0.15);
}
.news-industry .news-box-header h4 { color: #fb923c; }
.news-industry .news-icon {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.news-industry .news-source { color: #f97316; }
.news-industry .news-more { color: #fb923c; }
.news-industry .news-more:hover { background: rgba(249, 115, 22, 0.1); }

/* 7. Research/PubMed - Rose/Pink (Academic) */
.news-research {
  border-color: rgba(236, 72, 153, 0.2);
}
.news-research:hover {
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 0 12px 40px rgba(236, 72, 153, 0.15);
}
.news-research .news-box-header {
  background: rgba(236, 72, 153, 0.08);
  border-bottom-color: rgba(236, 72, 153, 0.15);
}
.news-research .news-box-header h4 { color: #f472b6; }
.news-research .news-icon {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.3);
}
.news-research .news-source { color: #ec4899; }
.news-research .news-more { color: #f472b6; }
.news-research .news-more:hover { background: rgba(236, 72, 153, 0.1); }

/* 8. Technology - Lime/Yellow-Green (Innovation) */
.news-tech {
  border-color: rgba(132, 204, 22, 0.2);
}
.news-tech:hover {
  border-color: rgba(132, 204, 22, 0.4);
  box-shadow: 0 12px 40px rgba(132, 204, 22, 0.15);
}
.news-tech .news-box-header {
  background: rgba(132, 204, 22, 0.08);
  border-bottom-color: rgba(132, 204, 22, 0.15);
}
.news-tech .news-box-header h4 { color: #a3e635; }
.news-tech .news-icon {
  background: rgba(132, 204, 22, 0.2);
  color: #84cc16;
  border: 1px solid rgba(132, 204, 22, 0.3);
}
.news-tech .news-source { color: #84cc16; }
.news-tech .news-more { color: #a3e635; }
.news-tech .news-more:hover { background: rgba(132, 204, 22, 0.1); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE - News Grid
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .news-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .news-category-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .news-live-badge {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    font-size: 10px;
  }

  .news-live-badge .live-divider {
    display: none;
  }

  .news-live-badge .live-refresh,
  .news-live-badge .live-time {
    font-size: 10px;
  }

  .news-box-header h4 {
    font-size: 12px;
  }

  .news-headlines a {
    font-size: 11px;
    padding: 10px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REGULATORY TRUST BAR
   ═══════════════════════════════════════════════════════════════ */

.trust-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 5, 16, 0.95) 0%, rgba(0, 8, 24, 0.9) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: calc(var(--z-nav) + 1);
  border-bottom: 1px solid rgba(0, 85, 255, 0.2);
  padding: 6px 0;
}

.trust-bar-inner {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.trust-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-gray-400);
  font-family: var(--font-mono);
}

.trust-bar-row:first-child {
  margin-bottom: 4px;
}

.trust-bar-row-secondary {
  display: flex;
  gap: 20px;
  font-size: 9px;
  opacity: 0.8;
}

.trust-bar-items {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.trust-highlight-gold {
  color: var(--color-secondary);
  font-weight: 700;
  letter-spacing: 1px;
}

.trust-bar-live {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-live-dot {
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: 50%;
  animation: trustDotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

@keyframes trustDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.trust-live-text {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 1px;
}

/* Adjust nav-bar position when trust bar is present */
.nav-bar {
  top: 45px !important;
}

.main-content {
  padding-top: 125px;
}

/* Mobile trust bar */
@media (max-width: 768px) {
  .trust-bar,
  .live-ticker-bar {
    display: none;
  }

  .nav-bar {
    top: 0 !important;
  }

  .main-content {
    padding-top: 80px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIVE API TICKER ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

.live-ticker-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  background: linear-gradient(180deg, rgba(0, 5, 16, 0.98) 0%, rgba(0, 12, 36, 0.95) 100%);
  backdrop-filter: blur(12px);
  z-index: calc(var(--z-nav) + 1);
  border-bottom: 1px solid rgba(0, 85, 255, 0.25);
  border-left: 1px solid rgba(0, 85, 255, 0.15);
  border-right: 1px solid rgba(0, 85, 255, 0.15);
  border-radius: 0 0 12px 12px;
  padding: 6px 0;
  font-size: 12px;
  box-shadow: 0 4px 20px rgba(0, 85, 255, 0.1);
}

.live-ticker-inner {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.live-ticker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-gray-400);
  font-family: var(--font-mono);
  line-height: 1.3;
}

.live-ticker-row:first-child {
  margin-bottom: 2px;
}

.ticker-row-secondary {
  overflow: hidden;
  position: relative;
}

.live-ticker-items {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.ticker-highlight {
  color: var(--color-secondary);
  font-weight: 700;
  letter-spacing: 1px;
}

.ticker-item {
  transition: opacity 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* All ticker text readability */
.live-ticker-bar, .live-ticker-items, .ticker-highlight {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.ticker-item.ticker-loaded {
  color: var(--color-primary-light);
}

.ticker-item.ticker-pulse {
  animation: tickerPulse 1s ease;
}

@keyframes tickerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; color: var(--color-secondary); }
}

.ticker-static {
  opacity: 0.8;
}

.live-ticker-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticker-live-dot {
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: 50%;
  animation: tickerDotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

@keyframes tickerDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.ticker-live-text {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 1px;
}

.ticker-time {
  font-size: 9px;
  color: var(--color-gray-500);
  font-family: var(--font-mono);
}

/* Scrolling ticker */
.ticker-scroll {
  display: block;
  width: 100%;
  overflow: hidden;
}

.ticker-scroll-content {
  display: inline-block;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
  font-size: 9px;
  color: var(--color-gray-500);
}

.scroll-item {
  padding: 0 10px;
}

.scroll-separator {
  color: var(--color-primary);
  opacity: 0.5;
  padding: 0 5px;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-scroll:hover .ticker-scroll-content {
  animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════════
   LIVING BIOTECH ORGANISM - Easter Egg that grows over time
   ═══════════════════════════════════════════════════════════════ */

.biotech-organism {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  opacity: 0.7;
  transition: opacity 0.5s, transform 0.5s;
}

.biotech-organism:hover {
  opacity: 1;
  transform: scale(1.1);
  pointer-events: auto;
  cursor: pointer;
}

/* Core cell */
.organism-core {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 255, 180, 0.9),
    rgba(0, 212, 255, 0.6),
    rgba(0, 100, 180, 0.3)
  );
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.6),
    0 0 40px rgba(0, 212, 255, 0.3),
    inset 0 0 15px rgba(0, 255, 200, 0.4);
  animation: organism-pulse 4s ease-in-out infinite;
}

/* Inner nucleus */
.organism-core::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 20%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  filter: blur(3px);
  animation: nucleus-float 3s ease-in-out infinite;
}

/* Membrane */
.organism-membrane {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.4);
  animation: membrane-rotate 20s linear infinite;
}

/* Child cells (appear as organism grows) */
.organism-child {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 255, 200, 0.7),
    rgba(0, 212, 255, 0.4),
    transparent
  );
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  animation: child-float 5s ease-in-out infinite;
}

/* Connection tendrils */
.organism-tendril {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.6), transparent);
  transform-origin: left center;
  animation: tendril-pulse 3s ease-in-out infinite;
}

/* Organism Animations */
@keyframes organism-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.2); }
}

@keyframes nucleus-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -2px); }
}

@keyframes membrane-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes child-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3px, -3px) scale(1.1); }
}

@keyframes tendril-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Growth stages */
.organism-stage-1 .organism-core { width: 20px; height: 20px; }
.organism-stage-2 .organism-core { width: 30px; height: 30px; }
.organism-stage-3 .organism-core { width: 40px; height: 40px; }
.organism-stage-4 .organism-core { width: 50px; height: 50px; }
.organism-stage-5 .organism-core { width: 60px; height: 60px; }

.organism-stage-1 .organism-membrane { width: 30px; height: 30px; }
.organism-stage-2 .organism-membrane { width: 45px; height: 45px; }
.organism-stage-3 .organism-membrane { width: 60px; height: 60px; }
.organism-stage-4 .organism-membrane { width: 75px; height: 75px; }
.organism-stage-5 .organism-membrane { width: 90px; height: 90px; }

/* ═══════════════════════════════════════════════════════════════
   PYRAMID SECTION FIXES - Premium styling
   ═══════════════════════════════════════════════════════════════ */

/* ISSUE 1: Hide cheap DNA icon at top of pyramid */
.pyramid-icon,
.dna-icon,
.framework-icon,
.pyramid-header-icon,
.pyramid-hero-anchor,
.dna-helix-hero {
  display: none !important;
}

/* ISSUE 2: Fix "THE HUMAN" text getting cut off */
.pyramid-tier,
.framework-tier,
.pyramid-level,
.pyramid-label {
  overflow: visible !important;
  white-space: nowrap;
  padding: 0.75rem 2rem;
  min-width: fit-content;
}

.pyramid-container,
.framework-pyramid,
.pyramid-visual,
.pyramid-visual-enhanced {
  overflow: visible !important;
  padding: 2rem;
}

/* ISSUE 3: Remove emoji bullets - use CSS instead */
.framework-list li,
.tier-list li,
.hierarchy-list li {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

/* Premium CSS dot indicator */
.framework-list li::before,
.tier-list li::before,
.hierarchy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  background: #38bdf8;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

/* ISSUE 4: Better pyramid tier styling */
.pyramid-tier,
.pyramid-level,
.pyramid-shape {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* THE HUMAN - gold/orange top tier (apex - narrowest) */
.pyramid-row[data-level="the-human"] .pyramid-shape {
  background: linear-gradient(180deg, #fbbf24, #d97706) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}

/* PATIENT ANALOG tier */
.pyramid-row[data-level="patient-analog"] .pyramid-shape {
  background: linear-gradient(180deg, #38bdf8, #0284c7) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
}

/* DIGITAL TWIN tier - emerald green */
.pyramid-row[data-level="digital-twin"] .pyramid-shape,
.pyramid-digital-twin .pyramid-shape {
  background: linear-gradient(180deg, #10b981, #047857) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
  clip-path: polygon(6% 0%, 94% 0%, 100% 100%, 0% 100%);
}

.pyramid-row[data-level="digital-twin"] .pyramid-label,
.pyramid-digital-twin .pyramid-label {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* SYSTEM ANALOG tier */
.pyramid-row[data-level="system-analog"] .pyramid-shape {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.4), rgba(2, 132, 199, 0.6)) !important;
  clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
}

/* ORGAN ANALOG tier */
.pyramid-row[data-level="organ-analog"] .pyramid-shape {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.35), rgba(2, 132, 199, 0.55)) !important;
  clip-path: polygon(4% 0%, 96% 0%, 100% 100%, 0% 100%);
}

/* TISSUE / MPS tier */
.pyramid-row[data-level="tissue-mps"] .pyramid-shape {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.3), rgba(2, 132, 199, 0.5)) !important;
  clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%);
}

/* ORGANOID tier - base of pyramid */
.pyramid-row[data-level="organoid"] .pyramid-shape {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.25), rgba(2, 132, 199, 0.45)) !important;
  clip-path: polygon(2% 0%, 98% 0%, 100% 100%, 0% 100%);
}

.pyramid-tier:hover,
.pyramid-row:hover .pyramid-level {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* ISSUE 5: List item styling */
.tier-name,
.item-title,
.level-name {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #38bdf8;
  min-width: 140px;
}

.tier-description,
.item-description,
.level-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   SPLINE 3D VIEWER - Container styles
   ═══════════════════════════════════════════════════════════════ */

.spline-container {
  width: 100%;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.spline-container spline-viewer {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

/* Hero organoid container */
.hero-spline {
  width: 350px;
  height: 400px;
  flex-shrink: 0;
}

/* Full-width section viewer */
.spline-section {
  width: 100%;
  height: 500px;
  margin: 2rem 0;
}

/* Small inline viewer */
.spline-inline {
  width: 300px;
  height: 300px;
}

/* ═══════════════════════════════════════════════════════════════
   3D MODEL CARD - Premium component
   ═══════════════════════════════════════════════════════════════ */

.model-card {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  max-width: 420px;
}

.model-card-viewer {
  width: 100%;
  height: 280px;
  background: rgba(0, 0, 0, 0.3);
}

.model-card-info {
  padding: 1.5rem;
}

.model-card-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38bdf8;
}

.model-card-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0.4rem 0;
}

.model-card-description {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.model-card-stats {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
}

.model-card-stats .stat {
  text-align: center;
}

.model-card-stats .stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #38bdf8;
  display: block;
}

.model-card-stats .stat-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.model-card-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
  margin-top: 1rem;
}

.model-card-hint svg {
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   CSS ORGANOID FALLBACK - When no Spline model - BRIGHT VERSION
   ═══════════════════════════════════════════════════════════════ */

.css-organoid {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Glow behind css-organoid */
.css-organoid::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.4) 0%,
    rgba(56, 189, 248, 0.2) 40%,
    transparent 70%
  );
  filter: blur(40px);
  z-index: 0;
}

.css-organoid-sphere {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(125, 211, 252, 0.9) 15%,
    rgba(56, 189, 248, 0.8) 35%,
    rgba(14, 165, 233, 0.6) 55%,
    rgba(2, 132, 199, 0.4) 75%,
    transparent 100%
  );
  box-shadow:
    0 0 80px rgba(56, 189, 248, 0.9),
    0 0 120px rgba(56, 189, 248, 0.7),
    0 0 160px rgba(56, 189, 248, 0.5),
    inset 0 0 60px rgba(255, 255, 255, 0.5);
  animation: css-organoid-pulse 5s ease-in-out infinite;
  z-index: 1;
}

.css-organoid-ring {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
  animation: css-ring-spin 20s linear infinite;
  z-index: 2;
}

.css-organoid-ring-2 {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.35);
  animation: css-ring-spin 15s linear infinite reverse;
  z-index: 2;
}

@keyframes css-organoid-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.2);
  }
}

@keyframes css-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   FINAL POLISH - Section Titles, Footer, CTA
   ═══════════════════════════════════════════════════════════════ */

/* FIX 4: Section titles - bolder Sora 700 */
.section-title,
.framework-title,
h2.section-title {
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: #38bdf8 !important;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* Hierarchy section H2 specifically */
.hierarchy-text h2,
.hierarchy-section h2 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: #38bdf8 !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 1.5rem;
}

/* FIX 5: Footer hover effects */
footer a,
.site-footer a,
.footer-section a {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

footer a:hover,
.site-footer a:hover,
.footer-section a:hover {
  color: #38bdf8 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Footer headings */
footer h4,
.footer-title,
.footer-section h4 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  margin-bottom: 1rem;
}

/* Footer links */
footer ul li a,
.footer-section ul li a {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

/* FIX 6: CTA section - more prominent */
.cta-box,
.cta-card,
.cta-section .container > div {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.cta-box h2,
.cta-card h2,
.cta-title {
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: 2rem;
  color: #ffffff !important;
  margin-bottom: 1rem;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}

.cta-box p,
.cta-card p {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   MOLECULAR VISUALIZATION SECTION - Real PDB Structures
   ═══════════════════════════════════════════════════════════════ */

.molecular-section {
  padding: 5rem 0;
}

.molecular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.molecule-card {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.molecule-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(56, 189, 248, 0.1);
  transform: translateY(-4px);
}

.protein-viewer {
  width: 100%;
  height: 350px;
  background: rgba(15, 23, 42, 1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.molecule-info {
  padding: 1.5rem;
}

.molecule-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.molecule-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.molecule-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.pdb-attribution {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Inter', sans-serif;
}

.pdb-attribution a {
  color: #38bdf8;
  text-decoration: none;
}

.pdb-attribution a:hover {
  text-decoration: underline;
}

/* Preview cards for homepage (links to models page) */
.molecule-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.protein-viewer-preview {
  width: 100%;
  height: 350px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(30, 41, 59, 1) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.protein-viewer-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.molecule-card-link:hover .protein-viewer-preview::before {
  opacity: 1;
}

.preview-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  filter: grayscale(0.3);
  transition: all 0.4s ease;
}

.molecule-card-link:hover .preview-icon {
  transform: scale(1.1);
  filter: grayscale(0);
}

.preview-badge {
  font-family: 'Sora', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  transition: all 0.3s ease;
}

.molecule-card-link:hover .preview-badge {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.5);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .molecular-grid {
    grid-template-columns: 1fr;
  }

  .protein-viewer,
  .protein-viewer-preview {
    height: 300px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FINAL POLISH - Text Shadows & Mobile Responsive
   ═══════════════════════════════════════════════════════════════ */

/* Enhanced text shadows for readability */
h1, h2, h3, h4, h5, h6 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

p, li, span, a {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.hero-title, .hero h1 {
  text-shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Mobile Responsive - 768px and below */
@media (max-width: 768px) {
  .hero-title, .hero h1 {
    font-size: 2.5rem !important;
  }

  .hero-subtitle, .hero h2 {
    font-size: 1.1rem;
  }

  .hero-container {
    flex-direction: column;
    text-align: center;
    padding: 0 1rem;
  }

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

  .organoid-container,
  .hero-spline {
    width: 220px;
    height: 260px;
    margin-top: 2rem;
  }

  .pyramid-tier,
  .pyramid-shape,
  .pyramid-level {
    min-width: 90% !important;
    font-size: 0.7rem !important;
    padding: 0.5rem 1rem !important;
  }

  .hierarchy-container {
    flex-direction: column;
  }

  .hierarchy-text,
  .pyramid-visual-enhanced {
    width: 100%;
    padding: 1rem;
  }

  section {
    padding: 3rem 1rem;
  }

  .section-title {
    font-size: 1.75rem !important;
  }

  .card-grid,
  .stats-grid,
  .badges-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .nav-links {
    display: none;
  }

  .nav-mobile-toggle {
    display: flex !important;
  }

  .cta-box {
    padding: 2rem 1.5rem;
  }

  .cta-box h2 {
    font-size: 1.5rem !important;
  }

  .news-category-grid {
    grid-template-columns: 1fr;
  }

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

/* Small phones */
@media (max-width: 480px) {
  .hero-title, .hero h1 {
    font-size: 2rem !important;
  }

  .nav-bar {
    padding: 0 1rem;
  }

  .logo-text, .nav-logo span {
    font-size: 1.2rem;
  }

  .stat-value {
    font-size: 1.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DNA VIEWER CARD - Science Page
   ═══════════════════════════════════════════════════════════════ */

.page-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.page-header-text {
  flex: 1;
}

.dna-viewer-card {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  max-width: 350px;
  flex-shrink: 0;
}

.dna-viewer {
  width: 100%;
  height: 280px;
  background: rgba(15, 23, 42, 1);
}

.viewer-info {
  padding: 1rem 1.25rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.viewer-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.viewer-info h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0.25rem 0;
}

.viewer-info p {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

@media (max-width: 900px) {
  .page-header-content {
    flex-direction: column;
    text-align: center;
  }

  .dna-viewer-card {
    max-width: 300px;
    margin-top: 2rem;
  }

  .dna-viewer {
    height: 220px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AGGRESSIVE TOOLTIP REMOVAL - No tooltips anywhere
   ═══════════════════════════════════════════════════════════════ */

/* KILL ALL TOOLTIPS COMPLETELY */
.pyramid-tooltip,
.tier-tooltip,
.tooltip,
.tier-info,
.tier-details,
.pyramid-details,
.hover-tooltip,
.info-card,
.tier-hover,
div[class*="tooltip"],
div[class*="hover-info"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  pointer-events: none !important;
}

/* Make sure pyramid tiers stay visible */
.pyramid-tier,
.pyramid-level,
.pyramid-shape,
.pyramid-row {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY PAGE STYLES - For migrated content pages
   ═══════════════════════════════════════════════════════════════ */

/* Programs/Cards Grid */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.program-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 25px;
  transition: all 0.3s ease;
}

.program-card:hover {
  border-color: var(--cyan-bright);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.15);
}

.program-agency {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gold-accent);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.program-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  color: var(--white-pure);
  margin-bottom: 12px;
}

.program-description {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(224, 242, 254, 0.75);
  margin-bottom: 15px;
}

.program-meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: rgba(224, 242, 254, 0.5);
  border-top: 1px solid var(--glass-border);
  padding-top: 12px;
}

/* Stats Grid Enhancement */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.stat-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: var(--cyan-bright);
  transform: translateY(-3px);
}

.stat-card.highlight-card {
  border-color: var(--gold-accent);
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.1), var(--glass-bg));
}

.stat-number {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--cyan-bright);
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.stat-card.highlight-card .stat-number {
  color: var(--gold-accent);
  text-shadow: 0 0 20px rgba(255, 170, 0, 0.5);
}

.stat-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white-pure);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.stat-detail {
  font-size: 12px;
  color: rgba(224, 242, 254, 0.6);
}

/* Section Content Container */
.section-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Trust Bar */
.trust-bar {
  background: linear-gradient(90deg, rgba(0, 20, 50, 0.95), rgba(0, 30, 70, 0.95));
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

.trust-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.trust-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.trust-bar-items {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: rgba(224, 242, 254, 0.7);
}

.trust-highlight-regulatory {
  color: var(--gold-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.trust-live-indicator {
  color: var(--emerald);
  font-weight: 600;
}

/* Section Divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  margin: 40px 0;
}

/* Apex Badge */
.apex-badge {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-accent);
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: 4px;
  padding: 8px 16px;
  margin-bottom: 20px;
}

/* Designation Marker */
.designation-marker {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: rgba(224, 242, 254, 0.5);
  margin-top: 20px;
}

/* Hero adjustments for content pages */
.hero {
  padding-top: 140px; /* Account for trust bar + nav */
}

.hero-content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  color: var(--white-pure);
  margin-bottom: 15px;
  text-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
}

.hero-subtitle {
  font-family: 'Sora', sans-serif;
  font-size: clamp(18px, 3vw, 24px);
  color: var(--cyan-bright);
  margin-bottom: 20px;
}

.hero-description {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(224, 242, 254, 0.8);
  max-width: 700px;
  margin: 0 auto;
}

/* Sticky Nav */
.sticky-nav {
  position: fixed;
  top: 38px; /* Below trust bar */
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 15, 40, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: 12px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan-bright);
  text-decoration: none;
  letter-spacing: 2px;
}

.nav-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.nav-links a {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: rgba(224, 242, 254, 0.7);
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--cyan-bright);
}

.nav-back {
  color: var(--gold-accent) !important;
}

/* Scientific Grid Background */
.scientific-grid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: -1;
}

/* Cosmic Background */
.cosmic-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(0, 30, 80, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: -2;
}

/* Skip Link for accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 10px 20px;
  background: var(--cyan-bright);
  color: #000;
  z-index: 9999;
  text-decoration: none;
}

/* Company cards (used in company listings) */
.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.company-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 25px;
  transition: all 0.3s ease;
}

.company-card:hover {
  border-color: var(--cyan-bright);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 212, 255, 0.2);
}

/* Timeline styles */
.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan-bright), var(--gold-accent), var(--cyan-bright));
}

.timeline-item {
  position: relative;
  padding: 20px 0;
  padding-left: 25px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 24px;
  width: 12px;
  height: 12px;
  background: var(--cyan-bright);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

.timeline-year {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  color: var(--gold-accent);
  margin-bottom: 8px;
}

.timeline-content {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(224, 242, 254, 0.8);
}

/* FAQ/Accordion styles */
.faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.faq-question {
  padding: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  color: var(--white-pure);
  transition: background 0.3s;
}

.faq-question:hover {
  background: rgba(0, 212, 255, 0.05);
}

.faq-answer {
  padding: 0 20px 20px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(224, 242, 254, 0.75);
}

/* Data tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
}

.data-table th,
.data-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}

.data-table th {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-accent);
  background: rgba(255, 170, 0, 0.1);
}

.data-table td {
  font-size: 14px;
  color: rgba(224, 242, 254, 0.8);
}

.data-table tr:hover td {
  background: rgba(0, 212, 255, 0.05);
}

/* Responsive adjustments for content pages */
@media (max-width: 768px) {
  .trust-bar-items {
    gap: 10px;
    font-size: 10px;
  }

  .sticky-nav {
    padding: 10px 15px;
    flex-direction: column;
    gap: 10px;
  }

  .nav-links {
    gap: 10px;
    justify-content: center;
  }

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

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

  .hero {
    padding-top: 180px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MODERN PREMIUM OVERRIDES
   Clean, sophisticated aesthetic inspired by Apple, Linear, Stripe
   Removes 80s synthwave/retro elements
   ═══════════════════════════════════════════════════════════════ */

/* Typography - Modern, clean, no heavy glows */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title {
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 20px rgba(0, 100, 200, 0.15) !important;
  text-transform: none !important;
}

.hero-title {
  font-weight: 700 !important;
  text-shadow: 0 4px 30px rgba(0, 100, 200, 0.2) !important;
}

/* Body text - Clean Inter */
body, p, span, a, li, td, th, label, input, textarea, select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Remove heavy neon glows from text */
.apex-badge,
.cabinet-title,
.drawer-title,
.program-name,
.stat-number {
  text-shadow: none !important;
}

/* Softer accent colors - not neon */
:root {
  --modern-blue: #0066ff;
  --modern-cyan: #00aaff;
  --modern-glow: rgba(0, 100, 200, 0.15);
  --modern-border: rgba(0, 100, 200, 0.12);
}

/* ═══════════ POLISHED BUTTONS ═══════════ */

/* Primary buttons - Blue gradient */
.btn, .button,
.btn-primary, .cta-button, .hero-btn,
.refresh-btn, .drawer-control,
a.btn, a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(180deg, #0077ff 0%, #0055dd 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 100, 255, 0.35) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 12px 24px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn:hover, .button:hover,
.btn-primary:hover, .cta-button:hover, .hero-btn:hover,
.refresh-btn:hover, a.btn:hover, a.button:hover {
  background: linear-gradient(180deg, #0088ff 0%, #0066ee 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 100, 255, 0.45) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.btn:active, .button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0, 100, 255, 0.3) !important;
}

/* Secondary buttons - Dark with border */
.btn-secondary, .btn-outline,
.hero-btn-secondary, .button-secondary {
  background: rgba(10, 20, 40, 0.8) !important;
  border: 1px solid rgba(0, 150, 255, 0.3) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 12px 24px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover, .btn-outline:hover,
.hero-btn-secondary:hover, .button-secondary:hover {
  background: rgba(0, 100, 200, 0.15) !important;
  border-color: rgba(0, 150, 255, 0.5) !important;
  box-shadow: 0 6px 20px rgba(0, 100, 200, 0.2) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* Hero buttons container alignment */
.hero-buttons, .hero-cta, .cta-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
}

/* Override generic button element but exclude specific elements */
button:not(.nav-toggle):not(.menu-toggle):not(.close-btn) {
  background: linear-gradient(180deg, #0077ff 0%, #0055dd 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 100, 255, 0.35) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  padding: 12px 24px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

button:not(.nav-toggle):not(.menu-toggle):not(.close-btn):hover {
  background: linear-gradient(180deg, #0088ff 0%, #0066ee 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 100, 255, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Large buttons */
.btn-lg, .button-lg {
  padding: 14px 32px !important;
  font-size: 15px !important;
}

/* Small buttons */
.btn-sm, .button-sm {
  padding: 8px 16px !important;
  font-size: 12px !important;
}

/* ═══════════ Cards - Cleaner glassmorphism ═══════════ */
.filing-cabinet,
.cabinet-drawer,
.news-file,
.stat-card,
.program-card,
.company-card,
.glass-card {
  background: rgba(8, 20, 40, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

.filing-cabinet:hover,
.news-file:hover,
.stat-card:hover,
.program-card:hover {
  border-color: rgba(0, 150, 255, 0.2) !important;
  box-shadow: 0 12px 40px rgba(0, 100, 200, 0.15), 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

/* Cabinet headers - softer gradient */
.cabinet-header {
  background: linear-gradient(90deg, rgba(var(--cabinet-color-rgb, 0, 150, 255), 0.15) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Category badges/icons - softer */
.cabinet-icon,
.tab-icon,
.cat-icon,
.apex-badge {
  font-family: 'Space Grotesk', monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-radius: 6px !important;
}

.apex-badge {
  background: rgba(0, 150, 255, 0.1) !important;
  border: 1px solid rgba(0, 150, 255, 0.2) !important;
  color: #00aaff !important;
  font-size: 12px !important;
  padding: 8px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Nav - cleaner */
.sticky-nav, .trust-bar {
  background: rgba(5, 15, 30, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nav-logo {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
}

.nav-links a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.2s ease !important;
}

.nav-links a:hover {
  color: #00aaff !important;
}

/* Status indicators - softer pulse */
.status-pill.breaking::before,
.status-indicator.breaking::before {
  animation: soft-pulse 2s ease-in-out infinite !important;
}

@keyframes soft-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* News files - subtle left border */
.news-file {
  border-left-width: 3px !important;
  border-radius: 10px !important;
}

.news-file:hover {
  transform: translateX(4px) !important;
}

/* Scrollbars - subtle */
.cabinet-drawer::-webkit-scrollbar-thumb {
  background: rgba(0, 150, 255, 0.3) !important;
  border-radius: 4px !important;
}

.cabinet-drawer::-webkit-scrollbar-track {
  background: rgba(0, 20, 40, 0.3) !important;
}

/* Footer - cleaner */
.cabinet-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cabinet-footer a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: rgba(0, 170, 255, 0.8) !important;
}

.cabinet-footer a:hover {
  color: #ffffff !important;
}

/* Hero section - cleaner glow */
.hero {
  background: transparent !important;
}

/* ═══════════ HERO TEXT - HIGH VISIBILITY ═══════════ */
.hero h1,
.hero-title {
  font-size: clamp(4.5rem, 13vw, 8rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow:
    0 0 20px rgba(0, 150, 255, 0.8),
    0 0 40px rgba(0, 150, 255, 0.5),
    0 0 80px rgba(0, 150, 255, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
}

.hero-subtitle,
.hero h2 {
  font-size: clamp(1.55rem, 3.85vw, 2.2rem) !important;
  font-weight: 600 !important;
  color: #d4af37 !important;
  text-shadow:
    0 0 15px rgba(212, 175, 55, 0.6),
    0 0 30px rgba(212, 175, 55, 0.3),
    0 2px 10px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 1.5rem !important;
}

.hero-description,
.hero p:not(.hero-subtitle) {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.9),
    0 4px 20px rgba(0, 0, 0, 0.6) !important;
  line-height: 1.7 !important;
  max-width: 700px !important;
  margin: 0 auto 2rem auto !important;
}

/* Links - softer cyan */
a {
  color: #00aaff;
  transition: color 0.2s ease;
}

a:hover {
  color: #66ccff;
}

/* Reduce space background intensity */
.space-nebula {
  opacity: 0.4 !important;
}

.space-nebula-deep {
  opacity: 0.2 !important;
}

/* Grid overlay - much more subtle */
.scientific-grid {
  opacity: 0.3 !important;
  background-image:
    linear-gradient(rgba(0, 150, 200, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 150, 200, 0.02) 1px, transparent 1px) !important;
}

/* Section dividers - subtle */
.section-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 150, 255, 0.15), transparent) !important;
}

/* Data tables - cleaner */
.data-table th {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #00aaff !important;
  background: rgba(0, 100, 200, 0.08) !important;
}

/* Trust bar items */
.trust-bar-items span {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

.trust-highlight-regulatory {
  color: #00aaff !important;
  font-weight: 600 !important;
}

/* Stat numbers - cleaner glow */
.stat-number {
  color: #00aaff !important;
  text-shadow: 0 0 30px rgba(0, 150, 255, 0.3) !important;
}

/* Loading spinner - softer */
.spinner, .loading-spinner {
  border-color: rgba(0, 150, 255, 0.15) !important;
  border-top-color: #00aaff !important;
}

/* Form inputs - modern */
input, textarea, select {
  background: rgba(10, 25, 50, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.2s ease !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(0, 150, 255, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 255, 0.1) !important;
  outline: none !important;
}

/* ═══════════ NAVIGATION BAR POLISH ═══════════ */

/* Main nav bar - positioned below the ticker */
.nav-bar {
  position: fixed !important;
  top: 32px !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  max-height: 56px !important;
  z-index: 1001 !important;
  background: rgba(5, 12, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.nav-bar .nav-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1800px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.nav-bar .nav-logo {
  flex-shrink: 0 !important;
}

.nav-bar .global-clocks {
  flex-shrink: 0 !important;
  order: 2 !important;
}

.nav-bar .nav-links,
.nav-bar #nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  order: 3 !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

.nav-bar .nav-links .nav-link,
.nav-bar .nav-link,
.nav-bar #nav-links a {
  display: inline-block !important;
  visibility: visible !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  padding: 6px 8px !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color 0.2s ease !important;
}

.nav-bar .nav-links .nav-link:hover,
.nav-bar .nav-link:hover,
.nav-bar #nav-links a:hover {
  color: #00aaff !important;
  background: none !important;
  transform: none !important;
}

/* FORCE nav-links visible on all screen sizes */
@media (min-width: 768px) {
  .nav-links,
  #nav-links,
  .nav-bar .nav-links {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    background: transparent !important;
  }
}

/* Mobile nav - show hamburger below 768px */
@media (max-width: 767px) {
  .nav-bar .nav-content {
    flex-wrap: nowrap !important;
  }

  .nav-bar .nav-links,
  .nav-bar #nav-links {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(5, 12, 30, 0.98) !important;
    flex-direction: column !important;
    padding: 16px !important;
    gap: 8px !important;
  }

  .nav-bar .nav-links.active,
  .nav-bar #nav-links.active {
    display: flex !important;
  }

  .nav-mobile-toggle {
    display: flex !important;
  }

  .global-clocks {
    display: none !important;
  }
}

/* Trust bar - for internal pages only (not homepage) */
.trust-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1002 !important;
  height: 32px !important;
  padding: 6px 20px !important;
  background: rgba(5, 10, 25, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.trust-bar-inner,
.trust-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  white-space: nowrap !important;
}

.trust-bar-items {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.trust-highlight-regulatory {
  color: #00aaff !important;
  font-weight: 600 !important;
}

/* Main navigation - below trust bar */
.sticky-nav {
  position: fixed !important;
  top: 32px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 56px !important;
  padding: 0 30px !important;
  background: rgba(5, 12, 30, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nav-logo {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

/* Nav links container - horizontal scrolling, no wrap */
.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 0 10px !important;
}

.nav-links::-webkit-scrollbar {
  display: none !important;
}

/* Nav link items - clean, no button styling */
.nav-links a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  padding: 8px 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color 0.2s ease !important;
}

.nav-links a:hover {
  color: #00aaff !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav-back {
  color: #00aaff !important;
}

/* Responsive nav */
@media (max-width: 1200px) {
  .nav-links {
    gap: 14px !important;
  }

  .nav-links a {
    font-size: 12px !important;
  }
}

@media (max-width: 768px) {
  .sticky-nav {
    padding: 0 15px !important;
    height: 50px !important;
  }

  .nav-logo {
    font-size: 15px !important;
  }

  .nav-links {
    gap: 10px !important;
  }

  .nav-links a {
    font-size: 11px !important;
  }
}

/* Exclude nav links from button styles */
.nav-links a,
.cabinet-footer a,
.curated-link,
a.back-link {
  background: none !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  font-size: inherit !important;
}

/* ═══════════ LIVE TICKER STYLES ═══════════ */

#live-ticker,
.live-ticker,
.trust-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 32px !important;
  max-height: 32px !important;
  min-height: 32px !important;
  z-index: 1002 !important;
  overflow: hidden !important;
  font-size: 11px !important;
  background: rgba(5, 12, 30, 0.98);
  border-bottom: 1px solid rgba(0, 100, 255, 0.2);
}

.live-ticker-bar {
  width: 100%;
  height: 32px !important;
  max-height: 32px !important;
}

.live-ticker-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 32px !important;
  max-height: 32px !important;
  padding: 0 15px;
}

.live-ticker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 32px !important;
  width: 100%;
}

.live-ticker-items {
  display: flex;
  align-items: center;
  gap: 15px;
  overflow: hidden;
  flex: 1;
  height: 32px !important;
}

.ticker-highlight {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #00aaff;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 10px;
  background: rgba(0, 170, 255, 0.12);
  border-radius: 4px;
  border: 1px solid rgba(0, 170, 255, 0.25);
}

.ticker-item {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.ticker-item.ticker-loaded {
  color: rgba(255, 255, 255, 0.9);
}

.ticker-item.ticker-pulse {
  animation: tickerPulse 1s ease-out;
}

@keyframes tickerPulse {
  0% { color: #00aaff; }
  100% { color: rgba(255, 255, 255, 0.85); }
}

.ticker-static {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.live-ticker-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ticker-live-dot {
  width: 6px;
  height: 6px;
  background: #00ff88;
  border-radius: 50%;
  animation: livePulse 2s infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px #00ff88; }
  50% { opacity: 0.5; box-shadow: 0 0 3px #00ff88; }
}

.ticker-live-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #00ff88;
}

.ticker-time {
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

.ticker-row-secondary {
  display: none;
}

/* ═══════════ BREAKING NEWS TICKER ═══════════ */
.ticker-row-breaking {
  display: flex !important;
  align-items: center;
  gap: 12px;
  height: 32px !important;
  width: 100%;
  overflow: hidden;
}

.ticker-breaking-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #ff3366;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 10px;
  background: rgba(255, 51, 102, 0.15);
  border-radius: 4px;
  border: 1px solid rgba(255, 51, 102, 0.3);
  flex-shrink: 0;
}

.breaking-dot {
  width: 6px;
  height: 6px;
  background: #ff3366;
  border-radius: 50%;
  animation: breakingPulse 1s infinite;
}

@keyframes breakingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.ticker-breaking-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

.ticker-breaking-content {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: breakingScroll 45s linear infinite;
}

@keyframes breakingScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-breaking-content:hover {
  animation-play-state: paused;
}

.breaking-headline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.breaking-headline:hover {
  opacity: 0.8;
}

.headline-source {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #00aaff;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(0, 170, 255, 0.15);
  border-radius: 3px;
}

.headline-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.breaking-separator {
  color: rgba(255, 255, 255, 0.2);
  padding: 0 8px;
  font-size: 10px;
}

.breaking-placeholder {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 16px;
}

.ticker-more-news {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #00aaff;
  text-decoration: none;
  padding: 4px 12px;
  background: rgba(0, 170, 255, 0.1);
  border: 1px solid rgba(0, 170, 255, 0.25);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
}

.ticker-more-news:hover {
  background: rgba(0, 170, 255, 0.2);
  color: #fff;
}

/* Hide stats row on homepage - show only breaking news */
.live-ticker-row:not(.ticker-row-breaking):not(.ticker-row-secondary) {
  display: none !important;
}

/* Make ticker content scroll horizontally in single row */
.live-ticker-items {
  animation: tickerMarquee 30s linear infinite;
}

@keyframes tickerMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════ CONTENT LAYOUT FIX ═══════════ */
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}

.hero {
  padding-top: 140px !important;
  margin-top: 0 !important;
  position: relative !important;
  top: 0 !important;
}

main, .main-content {
  margin-top: 0 !important;
  padding-top: 88px !important;
  display: block !important;
  visibility: visible !important;
}

.ticker-scroll {
  display: flex;
  overflow: hidden;
  flex: 1;
}

.ticker-scroll-content {
  display: flex;
  gap: 8px;
  animation: tickerScroll 60s linear infinite;
  white-space: nowrap;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.scroll-item {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.scroll-separator {
  color: rgba(255, 255, 255, 0.2);
  margin: 0 8px;
}

/* Responsive ticker */
@media (max-width: 768px) {
  .ticker-static {
    display: none;
  }

  .live-ticker-items {
    gap: 12px;
  }

  .ticker-item {
    font-size: 10px;
  }
}

/* ═══════════ INLINE STYLE OVERRIDES ═══════════ */
/* Override inline Orbitron fonts - use attribute selectors for high specificity */
[style*="Orbitron"],
[style*="orbitron"] {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif !important;
}

/* Any element with inline font-family */
h2[style*="font-family"],
h3[style*="font-family"],
h4[style*="font-family"],
span[style*="font-family"],
div[style*="font-family"],
strong[style*="font-family"] {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif !important;
  text-transform: none !important;
}

/* Override ALL CAPS on section headers */
h2[style*="letter-spacing: 2px"],
h2[style*="letter-spacing:2px"],
h3[style*="letter-spacing: 2px"],
h3[style*="letter-spacing:2px"] {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

/* Domain grid cards - modern style */
.domain-grid {
  gap: 24px !important;
}

.domain-card,
.flagship-card {
  background: rgba(8, 20, 40, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

.domain-card:hover,
.flagship-card:hover {
  border-color: rgba(0, 150, 255, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0, 100, 200, 0.2) !important;
  transform: translateY(-4px) !important;
}

.card-category {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #00aaff !important;
}

.card-domain {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.card-description {
  font-family: 'Inter', sans-serif !important;
  color: rgba(224, 242, 254, 0.7) !important;
  line-height: 1.6 !important;
}

.card-cta {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #00aaff !important;
}

/* Program cards - consistent modern style */
.program-card {
  padding: 24px !important;
  border-left: 3px solid #0066ff !important;
}

.program-name {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* Reference lists - clean */
.ref-item,
.reference-card {
  background: rgba(10, 25, 50, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
}

/* Override any remaining pink/plasma colors */
[style*="plasma-pink"],
[style*="ff0066"] {
  color: #3b82f6 !important;
}

/* Make sure gold-accent doesn't look orange */
[style*="gold-accent"],
[style*="ffaa00"] {
  color: #0077ff !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE CENTERING & RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* CRITICAL: Prevent horizontal overflow and text cutoff */
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     TRANSLUCENT LAYERS - FULL EDGE-TO-EDGE MOBILE COVERAGE
     ═══════════════════════════════════════════════════════════════ */
  .space-nebula,
  .space-nebula-deep,
  .space-stars,
  .nebula-bg,
  #nebula,
  #global-nebula-bg,
  [class*="nebula"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Hero background - absolute within hero section */
  #hero-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Ensure parent containers don't clip translucent layers */
  body,
  html,
  #app,
  .app-container,
  .page-wrapper,
  .main-wrapper,
  .hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* Force all major containers to fit viewport */
  .hero,
  .hero-content,
  .hero-container,
  header,
  .site-header,
  .nav-bar,
  main,
  section,
  .container,
  .page-header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     RESPONSIVE TYPOGRAPHY - Using clamp() for smooth scaling
     ═══════════════════════════════════════════════════════════════ */
  h1, .hero h1, .hero-title {
    font-size: var(--hero-title) !important;
    line-height: 1.15 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 10px !important;
    margin: 0 auto 12px auto !important;
    box-sizing: border-box !important;
  }

  h2, .hero-subtitle, .section-title {
    font-size: var(--hero-subtitle) !important;
    line-height: 1.25 !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 10px !important;
    margin: 0 auto 10px auto !important;
  }

  h3 {
    font-size: var(--card-title) !important;
    line-height: 1.3 !important;
    margin: 0 auto 8px auto !important;
  }

  .hero-description, .hero p, .lead {
    font-size: var(--hero-description) !important;
    line-height: 1.5 !important;
    padding: 0 10px !important;
    max-width: 100% !important;
    margin: 0 auto 15px auto !important;
  }

  p {
    font-size: var(--text-base) !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    margin: 0 auto 10px auto !important;
  }

  .logo, .nav-logo, .site-title, .logo-text {
    font-size: clamp(0.7rem, 2.5vw, 0.9rem) !important;
    white-space: nowrap !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     REDUCED PADDING & MARGINS FOR MOBILE
     ═══════════════════════════════════════════════════════════════ */
  section {
    padding: 40px 15px !important;
    margin: 0 !important;
  }

  .container {
    padding: 0 12px !important;
    margin: 0 auto !important;
  }

  .card, .feature-card, .news-card, .stat-card {
    padding: 15px !important;
    margin: 10px auto !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     MOBILE HAMBURGER NAVIGATION - VERTICAL DROPDOWN
     ═══════════════════════════════════════════════════════════════ */

  /* Nav bar layout */
  .nav-bar, .site-header, header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    padding: 10px 15px !important;
  }

  .nav-content, .nav-bar > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Mobile nav - hidden by default, shown in portrait via later rule */
  .nav-links,
  #nav-links,
  .nav-bar .nav-links {
    position: fixed !important;
    background: rgba(0, 8, 24, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    flex-direction: column !important;
    z-index: 99999 !important;
  }

  /* Show nav when active - BOTTOM CENTER popup above FAB */
  .nav-links.active,
  #nav-links.active,
  .nav-bar .nav-links.active,
  .nav-links.mobile-open,
  #nav-links.mobile-open,
  .nav-links.open,
  #nav-links.open,
  .nav-bar .nav-links.open {
    position: fixed !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    right: auto !important;
    background: rgba(0, 20, 40, 0.95) !important;
    padding: 20px !important;
    border-radius: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
    border-bottom: none !important;
  }

  /* Vertical nav link styling */
  .nav-links a,
  #nav-links a,
  .nav-bar .nav-links a,
  .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .nav-links a:hover,
  #nav-links a:hover,
  .nav-link:hover {
    background: rgba(0, 170, 255, 0.15) !important;
    color: #00aaff !important;
    padding-left: 25px !important;
  }

  .nav-links a:last-child,
  #nav-links a:last-child {
    border-bottom: none !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     HERO SECTION - 100vh HEIGHT FIX FOR MOBILE
     ═══════════════════════════════════════════════════════════════ */
  .hero {
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 60px 15px 80px 15px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    max-height: calc(100vh - 140px) !important;
    overflow: hidden !important;
  }

  .hero-buttons {
    margin-top: 20px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }

  .hero-buttons .btn,
  .hero-buttons button {
    padding: 10px 20px !important;
    font-size: var(--text-sm) !important;
  }

  /* Hamburger button - BOTTOM CENTER (FAB style) */
  .nav-toggle,
  .nav-mobile-toggle,
  .menu-toggle,
  .hamburger,
  .mobile-menu-btn,
  #nav-toggle,
  #mobile-menu-toggle {
    position: fixed !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, rgba(0, 120, 255, 0.95) 0%, rgba(0, 200, 255, 0.95) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    padding: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 150, 255, 0.5), 0 0 40px rgba(0, 200, 255, 0.3) !important;
  }

  .nav-toggle span,
  .nav-mobile-toggle span,
  #nav-toggle span {
    width: 22px !important;
    height: 3px !important;
    background: white !important;
    border-radius: 2px !important;
    margin: 2px 0 !important;
  }

  /* Hamburger X animation when open */
  .nav-toggle.active span:nth-child(1),
  .nav-mobile-toggle.active span:nth-child(1),
  #nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }

  .nav-toggle.active span:nth-child(2),
  .nav-mobile-toggle.active span:nth-child(2),
  #nav-toggle.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .nav-toggle.active span:nth-child(3),
  .nav-mobile-toggle.active span:nth-child(3),
  #nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }

  /* Center all text content on mobile */
  .hero-content,
  .page-header,
  .section-header,
  .card-content,
  .game-content {
    text-align: center !important;
  }

  /* Center hero elements */
  .hero-title,
  .hero-subtitle,
  .hero-description,
  .hero-cta {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center buttons */
  .hero-cta {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .hero-cta .btn-primary,
  .hero-cta .btn-outline {
    width: 100% !important;
    max-width: 250px !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    padding: 12px 20px !important;
  }

  /* Center containers */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Center cards grid */
  .card-grid,
  .games-grid {
    justify-content: center !important;
  }

  /* Full width cards on mobile */
  .card,
  .game-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center stats */
  .stats-grid,
  .games-stats {
    justify-content: center !important;
    text-align: center !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     GAMES PAGE - MOBILE LAYOUT FIX
     ═══════════════════════════════════════════════════════════════ */
  .games-section {
    padding: 30px 10px !important;
  }

  .game-embed-block {
    margin-top: 30px !important;
    padding: 0 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .game-iframe-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .game-iframe-container iframe {
    width: 100% !important;
    height: 50vh !important;
    min-height: 300px !important;
    max-height: 500px !important;
  }

  .game-title {
    font-size: var(--text-xl) !important;
    padding: 0 10px !important;
  }

  .game-description {
    font-size: var(--text-sm) !important;
    padding: 0 10px !important;
    margin-bottom: 15px !important;
  }

  .game-tags {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    padding: 0 10px !important;
  }

  .game-tag {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  .game-actions {
    margin-top: 15px !important;
  }

  .game-actions .btn {
    padding: 10px 20px !important;
    font-size: var(--text-sm) !important;
  }

  /* Fix mobile padding for fixed nav */
  .main-content,
  main {
    padding-top: 80px !important;
  }

  /* Hide global clocks on mobile */
  .global-clocks {
    display: none !important;
  }

  /* Organoid container responsive */
  .organoid-container {
    display: none !important;
  }

  /* Hide nexus float on small screens */
  .nexus-float {
    display: none !important;
  }

  /* Quick nav tab - hide on mobile */
  .quick-nav-tab {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     COMPREHENSIVE MOBILE FIXES - AUTO-FIT, NO OVERLAP
     ═══════════════════════════════════════════════════════════════ */

  /* 1. GLOBAL IMAGE SCALING */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2. SAFE AREA INSETS FOR iPHONE NOTCH */
  body {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  .nav-bar, .site-header, header {
    padding-top: env(safe-area-inset-top) !important;
  }

  /* 3. DISABLE ANIMATIONS ON MOBILE FOR PERFORMANCE */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Keep essential animations */
  .hamburger span,
  .nav-toggle span {
    transition-duration: 0.3s !important;
  }

  /* 4. FIX ALL FIXED-WIDTH ELEMENTS */
  .organoid-container,
  .organoid-ring,
  .organoid-ring-2,
  .hero-spline,
  .spline-inline,
  .css-organoid,
  .css-organoid-ring,
  .css-organoid-ring-2,
  .molecule-card,
  .dna-viewer-card,
  .pyramid-container,
  .hierarchy-pyramid {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. PREVENT OVERFLOW ON ALL CONTAINERS */
  .container,
  .content,
  .wrapper,
  .page-content,
  .main-content,
  main,
  article,
  section,
  .section,
  .row,
  .grid,
  .card-grid,
  .news-grid,
  .games-grid {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 6. BUTTON AND CTA FIT */
  .btn,
  button,
  .button,
  .cta-button,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  a.btn {
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: center !important;
    padding: 12px 20px !important;
  }

  /* 7. TABLE RESPONSIVENESS */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  /* 8. FORM ELEMENTS */
  input,
  textarea,
  select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 9. HIDE DESKTOP-ONLY ELEMENTS */
  .desktop-only,
  .hide-mobile,
  .spline-viewer,
  .hero-3d,
  .floating-element,
  .cursor-glow,
  .cursor-glow-inner,
  .deep-particles,
  .twinkle-star,
  .particle {
    display: none !important;
  }

  /* 10. FIX ABSOLUTE/FIXED POSITIONED ELEMENTS */
  [style*="position: absolute"],
  [style*="position: fixed"] {
    max-width: 100vw !important;
  }

  /* 11. PREVENT TEXT OVERFLOW */
  h1, h2, h3, h4, h5, h6, p, span, a, li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* 12. MODAL/POPUP FIX */
  .modal,
  .popup,
  .overlay,
  .lightbox {
    max-width: 100vw !important;
    max-height: 100vh !important;
    overflow: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE MODE - Nav logo position fix
   ═══════════════════════════════════════════════════════════════ */
@media (orientation: landscape) {
  .site-header .logo,
  .nav-brand,
  .nav-logo,
  header h1,
  .nav-bar .nav-logo {
    margin-top: 10% !important;
    padding-top: 10px !important;
  }

  /* Show normal horizontal nav in landscape */
  .nav-links,
  .nav-menu,
  #nav-links {
    position: relative !important;
    flex-direction: row !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    display: flex !important;
  }

  .nav-links a,
  .nav-menu a,
  #nav-links a {
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PORTRAIT - Permanent vertical nav on LEFT side
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {
  /* ═══════════════════════════════════════════════════════════════
     TRANSLUCENT LAYERS - FULL EDGE-TO-EDGE MOBILE PORTRAIT COVERAGE
     Fixes: top: -20%, width: 140vw bleed issues
     ═══════════════════════════════════════════════════════════════ */
  .space-nebula,
  .space-nebula-deep,
  .space-stars,
  .nebula-bg,
  #nebula,
  #global-nebula-bg,
  [class*="nebula"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Hero background - absolute within hero section */
  #hero-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Ensure parent containers don't clip translucent layers */
  body,
  html,
  #app,
  .app-container,
  .page-wrapper,
  .main-wrapper,
  .hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* FORCE Vertical nav strip on LEFT - ALWAYS VISIBLE */
  .nav-links,
  .nav-menu,
  #nav-links,
  .nav-bar .nav-links,
  .nav-bar #nav-links {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, rgba(0, 30, 60, 0.95) 0%, rgba(0, 15, 40, 0.98) 100%) !important;
    padding: 20px 10px !important;
    border-radius: 0 20px 20px 0 !important;
    gap: 8px !important;
    z-index: 999999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border: 2px solid rgba(0, 150, 255, 0.4) !important;
    border-left: 4px solid #00aaff !important;
    box-shadow: 6px 0 30px rgba(0, 100, 255, 0.3), 0 0 50px rgba(0, 150, 255, 0.15) !important;
    width: auto !important;
    min-width: 45px !important;
  }

  /* Vertical text for nav links */
  .nav-links a,
  .nav-menu a,
  #nav-links a,
  .nav-bar .nav-links a,
  .nav-link {
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 15px 8px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    border-right: 3px solid transparent !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    display: block !important;
  }

  .nav-links a:hover,
  .nav-menu a:hover,
  #nav-links a:hover,
  .nav-link:hover {
    color: #00ddff !important;
    border-right-color: #00ddff !important;
    background: rgba(0, 150, 255, 0.15) !important;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5) !important;
  }

  /* HIDE hamburger in portrait - nav is always visible */
  .hamburger,
  .nav-mobile-toggle,
  .nav-toggle,
  #nav-toggle,
  .menu-toggle,
  .mobile-menu-btn,
  #mobile-menu-toggle {
    display: none !important;
  }

  /* Hide the top nav bar in portrait - we use side nav */
  .nav-bar,
  #main-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .nav-logo,
  .nav-brand {
    position: fixed !important;
    top: 15px !important;
    left: 60px !important;
    z-index: 999998 !important;
  }

  /* Adjust main content to not overlap with left nav */
  .hero-content,
  .main-content,
  main,
  .container {
    padding-left: 60px !important;
  }

  /* HERO BACKGROUND - Stretch more with increased padding */
  .hero::before,
  .hero-container,
  .pulse-glow,
  [class*="glow"] {
    transform: scale(1.15) !important;
  }

  /* Increase ALL padding and margins by 20% */
  .hero {
    padding: 100px 25px 75px 70px !important;
  }

  .hero-content {
    padding: 25px !important;
    margin: 15px !important;
  }

  .hero-title {
    margin-bottom: 20px !important;
  }

  .hero-subtitle {
    margin-bottom: 25px !important;
    padding: 0 10px !important;
  }

  .hero-description {
    margin-bottom: 30px !important;
    padding: 0 15px !important;
  }

  .hero-cta {
    padding: 15px !important;
    gap: 18px !important;
  }

  /* Mobile text adjustments */
  .hero-subtitle {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }

  .hero-description {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .btn-primary,
  .btn-outline {
    font-size: 0.9rem !important;
    padding: 14px 28px !important;
  }
}