/* ============================================================
   omicrons.org — COSMIC SCIENCE EDITORIAL
   Typography: Syne (display) + DM Sans (body)
   Palette: Deep space navy + Electric crimson + Starlight cyan
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
  --bg:       #03060E;
  --bg2:      #080D1A;
  --bg3:      #0D1525;
  --card:     #0B1221;
  --accent:   #E83030;
  --accent2:  #FF6B35;
  --cyan:     #00C9D4;
  --text:     #EEF2FF;
  --muted:    #6E7FA3;
  --border:   rgba(232,48,48,0.15);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(232,48,48,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0,201,212,0.06) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
  overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .footer-brand,
.impact-number, .metric-value,
.section-header h2 {
  font-family: 'Syne', sans-serif !important;
}

/* ── ANIMATED STARFIELD ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 50%, rgba(0,201,212,0.3) 0%, transparent 100%);
  z-index: 0;
  pointer-events: none;
  animation: twinkle 8s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ── NAVBAR ── */
.navbar, .unified-navbar {
  background: rgba(3,6,14,0.97) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(32px) saturate(1.5) !important;
}
.navbar-brand, .unified-navbar .navbar-brand {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.45rem !important;
  color: var(--text) !important;
  letter-spacing: -0.5px !important;
}
.navbar-brand i { color: var(--accent) !important; }
.nav-link, .unified-navbar .nav-link {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: all 0.2s !important;
}
.nav-link:hover, .nav-link.active,
.unified-navbar .nav-link:hover,
.unified-navbar .nav-link.active {
  color: var(--text) !important;
  background: rgba(232,48,48,0.1) !important;
}
.dropdown-menu, .unified-navbar .dropdown-menu {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
}
.dropdown-item, .unified-navbar .dropdown-item {
  color: var(--muted) !important;
  font-size: 0.875rem !important;
}
.dropdown-item:hover, .unified-navbar .dropdown-item:hover {
  color: var(--text) !important;
  background: rgba(232,48,48,0.1) !important;
}
.navbar-toggler { border-color: var(--border) !important; }
.navbar-toggler-icon { filter: brightness(2) !important; }

/* ── GRID BG ── */
.grid-bg {
  background:
    linear-gradient(rgba(232,48,48,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,48,48,0.025) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}
.grid-bg::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(232,48,48,0.08) 0%, transparent 55%) !important;
}

/* ── HERO ── */
.hero { background: transparent !important; }
.hero h1 {
  font-family: 'Syne', sans-serif !important;
  font-size: clamp(2.6rem, 5.5vw, 4.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -2px !important;
  color: var(--text) !important;
}
.hero h1 .highlight { color: var(--accent) !important; }
.hero p { font-size: 1.05rem !important; line-height: 1.8 !important; color: var(--muted) !important; }
.hero-badge {
  background: rgba(232,48,48,0.08) !important;
  border: 1px solid rgba(232,48,48,0.35) !important;
  color: var(--accent) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}

/* ── BUTTONS ── */
.btn-science {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.875rem 2.25rem !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(232,48,48,0.3) !important;
  transition: all 0.25s ease !important;
}
.btn-science:hover {
  background: #c92020 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(232,48,48,0.45) !important;
  color: #fff !important;
}
.btn-outline-science {
  border: 2px solid rgba(232,48,48,0.5) !important;
  color: var(--accent) !important;
  background: transparent !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.875rem 2.25rem !important;
  transition: all 0.25s ease !important;
}
.btn-outline-science:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ── DATA VIZ ── */
.data-visualization {
  background: var(--card) !important;
  border: 1px solid rgba(0,201,212,0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 60px rgba(0,201,212,0.06) !important;
}
.viz-status { color: var(--cyan) !important; }
.status-dot { background: var(--cyan) !important; box-shadow: 0 0 8px var(--cyan) !important; }
.metric-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(0,201,212,0.1) !important;
  border-radius: 8px !important;
}
.metric-value {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── RESEARCH CARDS ── */
.research-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.research-card::before { background: linear-gradient(90deg, var(--accent), var(--cyan)) !important; }
.research-card:hover {
  border-color: rgba(232,48,48,0.4) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
}
.research-icon { background: rgba(232,48,48,0.1) !important; color: var(--accent) !important; }
.research-link { color: var(--accent) !important; }

/* ── IMPACT STATS ── */
.impact { background: transparent !important; }
.impact-item {
  background: var(--card) !important;
  border: 1px solid rgba(0,201,212,0.12) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.impact-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
}
.impact-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
}
.impact-number {
  font-size: 3rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--cyan), var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── PUBLICATION CARDS ── */
.publication-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  transition: all 0.35s ease !important;
}
.publication-card:hover {
  border-color: rgba(0,201,212,0.3) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55) !important;
}
.publication-type { color: var(--cyan) !important; }
.publication-card h4 a { color: var(--text) !important; }
.publication-card h4 a:hover { color: var(--cyan) !important; }

/* ── TEAM ── */
.team-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}
.team-card:hover {
  border-color: rgba(232,48,48,0.4) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
}
.team-image { border-color: var(--accent) !important; }
.team-role { color: var(--accent) !important; }

/* ── NEWSLETTER ── */
.newsletter-box {
  background: linear-gradient(135deg, rgba(232,48,48,0.07), rgba(0,201,212,0.05)) !important;
  border: 1px solid rgba(232,48,48,0.2) !important;
  border-radius: 16px !important;
}
.newsletter-form input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0,201,212,0.3) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
}

/* ── CONTACT ── */
.contact-card { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
.form-control { background: rgba(255,255,255,0.04) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(232,48,48,0.12) !important; color: var(--text) !important; background: rgba(255,255,255,0.06) !important; }
.form-control::placeholder { color: var(--muted) !important; }
.contact-icon { background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; }

/* ── FOOTER ── */
footer, .unified-footer {
  background: #010306 !important;
  border-top: 2px solid var(--accent) !important;
  color: var(--muted) !important;
}
footer h5, .unified-footer h5 { color: var(--text) !important; font-family: 'Syne', sans-serif !important; }
footer ul li a, .unified-footer a { color: var(--muted) !important; text-decoration: none !important; transition: color 0.2s !important; }
footer ul li a:hover, .unified-footer a:hover { color: var(--accent) !important; }
.footer-bottom, .unified-footer .footer-bottom { border-color: rgba(232,48,48,0.1) !important; color: var(--muted) !important; }

/* ── SECTION HEADERS ── */
.section-header h2 {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}
.section-header h2 span, .section-header h2 .highlight, .highlight { color: var(--accent) !important; }
.section-header p { color: var(--muted) !important; }

/* ── ANIMATIONS ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.research-card { animation: fadeInUp 0.5s ease both; }
.research-card:nth-child(1) { animation-delay: 0.05s; }
.research-card:nth-child(2) { animation-delay: 0.12s; }
.research-card:nth-child(3) { animation-delay: 0.19s; }
.research-card:nth-child(4) { animation-delay: 0.26s; }
.research-card:nth-child(5) { animation-delay: 0.33s; }
.research-card:nth-child(6) { animation-delay: 0.40s; }

/* Breadcrumb */
.unified-breadcrumb { background: var(--bg2) !important; border-bottom: 1px solid var(--border) !important; }
.unified-breadcrumb .breadcrumb-item a { color: var(--cyan) !important; }
.unified-breadcrumb .breadcrumb-item.active { color: var(--muted) !important; }

/* Cards */
.card { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--text) !important; }
.card-body { color: var(--text) !important; }

/* Tables */
table { color: var(--text) !important; }
thead { background: var(--bg3) !important; }
tr:hover { background: rgba(232,48,48,0.04) !important; }
th, td { border-color: var(--border) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(232,48,48,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Social */
.social-links a { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; }
.social-links a:hover { background: var(--accent) !important; border-color: var(--accent) !important; transform: translateY(-3px) !important; }

/* Subscribe */
.si-subscribe-section { background: linear-gradient(135deg, var(--bg3) 0%, rgba(232,48,48,0.2) 50%, var(--bg3) 100%) !important; border-top: 1px solid var(--border) !important; }

@media (max-width: 768px) {
  .hero { padding: 7rem 0 4rem !important; }
}

/* ── UNIVERSAL IMPROVEMENTS ── */
/* Smooth image loading */
img { transition: opacity 0.3s ease !important; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded { opacity: 1; }

/* Link transitions */
a { transition: color 0.2s ease, background-color 0.2s ease !important; }

/* Focus styles for a11y */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid currentColor !important;
  outline-offset: 3px !important;
}

/* Smooth section transitions */
section { position: relative; z-index: 1; }

/* Page-level entrance */
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: pageEnter 0.4s ease both; }