/* ============================================================
   PREMIUM REDESIGN v1 — schumannresonancelive.com
   Loaded last. Full authority. Replaces all amateurish styles.
   ============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --nav-h: 68px;
  --col-bg:       #020817;
  --col-surface:  rgba(255,255,255,0.03);
  --col-border:   rgba(255,255,255,0.07);
  --col-border-h: rgba(255,255,255,0.12);
  --col-text:     #f1f5f9;
  --col-muted:    #64748b;
  --col-subtle:   #334155;
  --col-live:     #22c55e;
  --col-gold:     #f59e0b;
  --col-blue:     #38bdf8;
  --col-purple:   #a78bfa;
  --col-red:      #ef4444;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --radius-xl:    24px;
  --shadow-card:  0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --shadow-glow:  0 0 32px rgba(56,189,248,.12);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box !important; }

html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui) !important;
  background: var(--col-bg) !important;
  color: var(--col-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════════════
   NAV — PREMIUM REDESIGN
   ════════════════════════════════════════════════ */

/* Wipe ticker bar — replace with cleaner version */
.sr-ticker {
  background: rgba(2,8,23,.92) !important;
  border-bottom: 1px solid var(--col-border) !important;
  height: 28px !important;
  overflow: hidden !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
  display: flex !important;
  align-items: center !important;
}

.sr-ticker-track {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  animation: tickerScroll 40s linear infinite !important;
  white-space: nowrap !important;
  will-change: transform;
}

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

.sr-ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 20px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  color: var(--col-muted) !important;
  text-transform: uppercase !important;
  border-right: 1px solid var(--col-border) !important;
}

.sr-ticker-val {
  color: var(--col-text) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

.sr-ticker-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--col-live) !important;
  box-shadow: 0 0 6px var(--col-live) !important;
  animation: pulse 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

.sr-ticker-label {
  color: var(--col-muted) !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
}

.sr-ticker-hz { color: var(--col-muted) !important; font-size: 9px !important; }

.sr-ticker-badge {
  font-size: 8px !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  background: rgba(245,158,11,.12) !important;
  color: var(--col-gold) !important;
  border: 1px solid rgba(245,158,11,.2) !important;
}

/* ── MAIN NAV BAR ── */
nav.nav-glass {
  position: fixed !important;
  top: 28px !important; /* below ticker */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--nav-h) !important;
  z-index: 1000 !important;
  background: rgba(2,8,23,0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--col-border) !important;
  transition: background .3s ease, box-shadow .3s ease !important;
  overflow: visible !important;
  /* Remove the amateurish dark pill container look */
  padding: 0 !important;
  margin: 0 !important;
}

nav.nav-glass.scrolled,
nav.nav-glass:not(.at-top) {
  background: rgba(2,8,23,0.97) !important;
  box-shadow: 0 1px 0 var(--col-border), 0 8px 32px rgba(0,0,0,.4) !important;
}

/* Nav inner wrapper */
.nav-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--nav-h) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px,3vw,40px) !important;
  gap: 16px !important;
  overflow: visible !important;
}

/* ── BRAND / LOGO ── */
.nav-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

/* Kill the emoji icon, replace with SVG wave icon */
.nav-brand .brand-icon,
.nav-brand img.brand-logo,
.brand-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(56,189,248,.15) 0%, rgba(167,139,250,.15) 100%) !important;
  border: 1px solid rgba(56,189,248,.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
  /* Hide emoji if present */
  font-family: var(--font-ui) !important;
  overflow: hidden !important;
}

/* If brand icon is a raw emoji span, contain it */
.nav-brand .brand-icon span {
  font-size: 14px !important;
  line-height: 1 !important;
}

.brand-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.brand-subcopy,
.brand-kicker {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--col-muted) !important;
  line-height: 1 !important;
}

.brand-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--col-text) !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* ── NAV CENTER LINKS — wipe the dark pill container ── */
.nav-center {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  /* Remove inner dark capsule */
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Wipe the dark pill container background */
.nav-center > div,
.nav-links-shell,
.nav-pill-row {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.nav-pill {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--col-muted) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease !important;
  white-space: nowrap !important;
  background: none !important;
}

.nav-pill:hover {
  color: var(--col-text) !important;
  background: rgba(255,255,255,.05) !important;
  border-color: var(--col-border) !important;
}

.nav-pill.active,
.nav-pill[aria-current="page"],
.nav-pill.is-active {
  color: var(--col-text) !important;
  background: rgba(255,255,255,.06) !important;
  border-color: var(--col-border-h) !important;
}

/* Gold active pill — LIVE */
.nav-pill.active.live-pill,
.nav-pill[data-page="home"].active,
a.nav-pill:first-child.active {
  color: var(--col-gold) !important;
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.2) !important;
}

/* Live dot on CANLI pill */
.nav-pill .live-dot,
.nav-pill .nav-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--col-live) !important;
  box-shadow: 0 0 5px var(--col-live) !important;
  animation: pulse 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(.8); }
}

/* ── NAV RIGHT ── */
.sr-nav-actions,
.nav-right,
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* UTC clock */
#sr-nav-utc-clock,
.nav-clock {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--col-muted) !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

/* Language selector — premium style */
.locale-select-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.locale-select,
select#sr-nav-lang-select,
select.locale-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--col-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--col-text) !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  padding: 5px 26px 5px 10px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color .2s, background .2s !important;
  min-width: 52px !important;
}

.locale-select:hover,
select#sr-nav-lang-select:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--col-border-h) !important;
}

/* chevron arrow for select */
.locale-select-wrap > svg {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--col-muted) !important;
  width: 12px !important;
  height: 12px !important;
}

/* Hamburger button */
.nav-mobile-toggle,
#nav-toggle {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--col-border) !important;
  color: var(--col-text) !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s !important;
  padding: 0 !important;
}

.nav-mobile-toggle:hover { background: rgba(255,255,255,.08) !important; }

/* Hero must account for ticker + nav */
:root { --total-nav-h: calc(28px + var(--nav-h)); }

section[id], div[id]:not([id*="nav"]):not([id*="globe"]):not([id*="earth"]):not([id*="ticker"]) {
  scroll-margin-top: calc(var(--total-nav-h) + 8px) !important;
}

/* ════════════════════════════════════════════════
   HERO SECTION — PREMIUM
   ════════════════════════════════════════════════ */

.hero-stage {
  position: relative !important;
  z-index: 2 !important;
  min-height: 100svh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-top: calc(var(--total-nav-h) + 3rem) !important;
  padding-bottom: 5rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
}

.hero-stage-shell {
  position: relative !important;
  z-index: 3 !important;
  max-width: 780px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Overline badge */
.hero-stage-shell > .inline-flex:first-child,
.hero-overline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}

.hero-overline span.text-\[10px\],
.hero-badge-text {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  color: var(--col-muted) !important;
  text-transform: uppercase !important;
}

/* H1 — refined, not bludgeoning */
.hero-visual-h1 {
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  color: var(--col-text) !important;
  text-align: center !important;
  text-wrap: balance !important;
  margin: 0 0 32px !important;
  max-width: 100% !important;
}

/* Frequency readout display */
.hero-readout-wrap {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto 36px !important;
}

.hero-readout-shell {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--col-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px) !important;
}

.hero-readout-shell::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(56,189,248,.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* Frequency number */
.hero-readout-shell .text-7xl,
.hero-readout-shell .text-6xl,
.hero-hz-value,
[id*="hero-freq"],
[id*="schumann-freq"],
.hero-readout-shell [class*="text-7"] {
  font-family: var(--font-mono) !important;
  font-size: clamp(3rem, 8vw, 5rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.04em !important;
  color: var(--col-text) !important;
  line-height: 1 !important;
  font-feature-settings: 'tnum' !important;
}

/* Hz label */
.hero-readout-shell .sr-hz-label,
.hero-hz-unit {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--col-muted) !important;
  letter-spacing: .04em !important;
  align-self: flex-end !important;
  padding-bottom: 6px !important;
}

/* LIVE badge */
.hero-readout-status,
.hero-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  background: rgba(34,197,94,.08) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  color: var(--col-live) !important;
  text-transform: uppercase !important;
}

/* Hero stats row */
.hero-stats-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto 32px !important;
}

.hero-stats-row .card,
.hero-stats-row > div {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--col-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 10px !important;
  text-align: center !important;
  transition: border-color .2s !important;
}

.hero-stats-row .card:hover { border-color: var(--col-border-h) !important; }

/* CTA row */
.hero-cta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-bottom: 32px !important;
}

/* Primary CTA button */
.hero-cta-row > a:first-child,
.btn-primary-hero {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 24px !important;
  border-radius: var(--radius-md) !important;
  background: var(--col-text) !important;
  color: #020817 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: opacity .2s, transform .15s !important;
  white-space: nowrap !important;
}

.hero-cta-row > a:first-child:hover { opacity: .88 !important; transform: translateY(-1px) !important; }

/* Secondary CTA */
.hero-cta-row > a:last-child,
.btn-secondary-hero {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 24px !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--col-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid var(--col-border) !important;
  transition: border-color .2s, background .2s !important;
  white-space: nowrap !important;
}

.hero-cta-row > a:last-child:hover {
  border-color: var(--col-border-h) !important;
  background: rgba(255,255,255,.04) !important;
}

/* ════════════════════════════════════════════════
   STAR CHART / LEAD GEN SECTION — REFINED
   ════════════════════════════════════════════════ */

/* Kill the garish yellow background */
.star-launch-card,
.star-launch-wrap > .card,
[class*="star-launch"] .card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--col-border) !important;
  border-radius: var(--radius-xl) !important;
}

/* Kill the bright yellow CTA button */
.star-launch-card .btn,
.star-launch-card button,
.star-launch-card a[class*="btn"],
[class*="star-launch"] a.bg-yellow,
[class*="star-launch"] a.bg-amber,
[class*="star-launch"] button.bg-yellow,
[class*="star-launch"] button.bg-amber,
a[href*="star-chart"].bg-yellow,
a[href*="star-chart"].bg-amber-400,
a.bg-amber-400,
a.bg-yellow-400,
button.bg-amber-400,
button.bg-yellow-400 {
  background: var(--col-text) !important;
  color: #020817 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Feature grid items inside star card */
.star-launch-card .feature-grid > div,
.star-feature-item {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--col-border) !important;
  border-radius: var(--radius-md) !important;
}

/* ════════════════════════════════════════════════
   SECTION HEADINGS — PREMIUM TYPOGRAPHY
   ════════════════════════════════════════════════ */

section h2,
.section-heading,
h2.section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.2 !important;
  color: var(--col-text) !important;
}

section h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
  color: var(--col-text) !important;
}

/* Section overline labels */
.section-label,
[class*="section-kicker"],
.text-xs.tracking-widest {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--col-muted) !important;
}

/* ════════════════════════════════════════════════
   CARDS — UNIFIED PREMIUM STYLE
   ════════════════════════════════════════════════ */

.card,
[class*="metric-card"],
[class*="stat-card"],
[class*="data-card"],
[class*="info-card"] {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--col-border) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.card:hover,
[class*="metric-card"]:hover {
  border-color: var(--col-border-h) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.2) !important;
}

/* ════════════════════════════════════════════════
   SPECTROGRAM SECTION
   ════════════════════════════════════════════════ */

.spectro-container,
[class*="spectrogram"] {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--col-border) !important;
}

/* Spectrogram header */
.spectro-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

/* ════════════════════════════════════════════════
   FOOTER — PREMIUM REBUILD
   ════════════════════════════════════════════════ */

footer.footer-premium,
.site-footer {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  background: rgba(2,8,23,1) !important;
  border-top: 1px solid var(--col-border) !important;
  padding: 0 !important;
  margin-top: 80px !important;
}

.footer-premium-shell {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 60px clamp(16px,4vw,40px) 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
}

/* Footer top area */
.footer-premium-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  align-items: start !important;
}

/* Brand block */
.footer-premium-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.footer-premium-brand-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.footer-premium-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(56,189,248,.15), rgba(167,139,250,.15)) !important;
  border: 1px solid rgba(56,189,248,.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--col-blue) !important;
}

.footer-premium-logo svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--col-blue) !important;
}

.footer-premium-kicker {
  display: block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--col-muted) !important;
  margin-bottom: 2px !important;
}

.footer-premium-brand h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--col-text) !important;
  margin: 0 !important;
}

.footer-premium-brand p {
  font-size: 13px !important;
  color: var(--col-muted) !important;
  line-height: 1.65 !important;
  max-width: 320px !important;
}

/* Chips */
.footer-premium-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.footer-premium-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--col-border) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  color: var(--col-muted) !important;
  text-transform: uppercase !important;
}

.footer-premium-chip::before {
  content: '' !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--col-live) !important;
  flex-shrink: 0 !important;
}

/* Footer nav grid */
.footer-premium-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
}

.footer-premium-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.footer-premium-col h4 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--col-muted) !important;
  margin: 0 0 6px !important;
}

.footer-premium-col a {
  font-size: 13px !important;
  color: var(--col-muted) !important;
  text-decoration: none !important;
  transition: color .2s !important;
  line-height: 1 !important;
}

.footer-premium-col a:hover {
  color: var(--col-text) !important;
}

/* Divider */
.footer-premium-divider,
.footer-divider {
  width: 100% !important;
  height: 1px !important;
  background: var(--col-border) !important;
}

/* Footer bottom bar */
.footer-premium-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--col-border) !important;
}

.footer-premium-bottom p {
  font-size: 12px !important;
  color: var(--col-muted) !important;
  margin: 0 !important;
}

.footer-premium-bottom a {
  color: var(--col-muted) !important;
  text-decoration: none !important;
  transition: color .2s !important;
}

.footer-premium-bottom a:hover { color: var(--col-text) !important; }

/* ════════════════════════════════════════════════
   MOBILE NAV PANEL — PREMIUM
   ════════════════════════════════════════════════ */

.nav-mobile-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: rgba(2,8,23,.8) !important;
  backdrop-filter: blur(4px) !important;
  transition: opacity .25s ease, visibility 0s linear .25s !important;
}

.nav-mobile-overlay.active,
.nav-mobile-overlay.is-open {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity .25s ease !important;
}

.nav-mobile-menu {
  position: absolute !important;
  top: calc(28px + var(--nav-h)) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(300px, 85vw) !important;
  background: #0a0f1e !important;
  border-left: 1px solid var(--col-border) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(100%) !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}

.nav-mobile-overlay.active .nav-mobile-menu,
.nav-mobile-overlay.is-open .nav-mobile-menu {
  transform: translateX(0) !important;
}

.nav-mobile-links {
  padding: 20px 0 !important;
  flex: 1 !important;
  overflow-y: auto !important;
}

.nav-mobile-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--col-muted) !important;
  text-decoration: none !important;
  letter-spacing: .04em !important;
  border-bottom: 1px solid var(--col-border) !important;
  transition: color .2s, background .2s !important;
}

.nav-mobile-link:hover,
.nav-mobile-link.active {
  color: var(--col-text) !important;
  background: rgba(255,255,255,.04) !important;
}

.nav-mobile-footer {
  padding: 16px 20px !important;
  border-top: 1px solid var(--col-border) !important;
}

/* ════════════════════════════════════════════════
   GLOBAL UTILITY FIXES
   ════════════════════════════════════════════════ */

/* Sections above bg */
section, main, footer, .section { position: relative !important; z-index: 2 !important; }

/* Smooth section transitions */
section { transition: none !important; }

/* Remove min-height voids on non-hero sections */
section:not(.hero-stage) {
  min-height: unset !important;
}

/* Tailwind min-h overrides */
.min-h-\[90vh\]:not(.hero-stage),
.min-h-\[80vh\]:not(.hero-stage) {
  min-height: auto !important;
}

/* No horizontal overflow anywhere */
section, .max-w-7xl, .max-w-6xl, .max-w-5xl, .container {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Canvas elements */
canvas { max-width: 100% !important; display: block !important; }

/* Background layers must not affect layout */
#earth-3d-container, #globe-shell, .cosmic-bg, #starfield {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .nav-center { display: none !important; }
  .nav-mobile-toggle, #nav-toggle { display: flex !important; }
  .nav-live-strip { display: none !important; }
}

@media (max-width: 1400px) {
  .brand-subcopy { display: none !important; }
}

@media (max-width: 900px) {
  .footer-premium-hero {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-h: 56px !important;
    --total-nav-h: calc(28px + 56px) !important;
  }

  .sr-ticker { height: 24px !important; }

  .hero-stage {
    padding-top: calc(var(--total-nav-h) + 2rem) !important;
    padding-bottom: 3rem !important;
  }

  .hero-visual-h1 {
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
    margin-bottom: 24px !important;
  }

  .hero-readout-shell {
    padding: 20px 24px !important;
  }

  .hero-stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-cta-row > a {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer-premium-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .footer-premium-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .max-w-7xl, .max-w-6xl, .max-w-5xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  .hero-stats-row {
    grid-template-columns: 1fr !important;
  }

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

  .sr-ticker { display: none !important; }
  :root {
    --total-nav-h: var(--nav-h) !important;
  }
  nav.nav-glass { top: 0 !important; }
}


/* ============================================================
   NAV v2 — CORRECT SELECTORS (sr-nav classes)
   The actual nav uses .sr-nav, .sr-nav-inner, .sr-nav-bar etc.
   ============================================================ */

/* ── TICKER BAR ── */
.sr-ticker {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 28px !important;
  z-index: 1001 !important;
  background: rgba(2,8,23,0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

.sr-ticker-track {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  animation: srTickerScroll 50s linear infinite !important;
  will-change: transform !important;
  gap: 0 !important;
}

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

.sr-ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 18px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  height: 28px !important;
}

.sr-ticker-label { color: #475569 !important; font-size: 9px !important; letter-spacing: .1em !important; }
.sr-ticker-val   { color: #f1f5f9 !important; font-family: 'JetBrains Mono','SF Mono',Menlo,monospace !important; font-size: 10px !important; font-weight: 600 !important; }
.sr-ticker-hz    { color: #475569 !important; font-size: 9px !important; }
.sr-ticker-domain{ color: #334155 !important; font-size: 9px !important; letter-spacing: .1em !important; padding: 0 18px !important; }

.sr-ticker-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 6px #22c55e !important;
  animation: srPulse 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

@keyframes srPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.55; transform:scale(.75); }
}

.sr-ticker-badge {
  font-size: 8px !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}

.sr-ticker-badge.mod1 { background: rgba(245,158,11,.1) !important; color: #f59e0b !important; border: 1px solid rgba(245,158,11,.2) !important; }
.sr-ticker-badge.mod2 { background: rgba(56,189,248,.1) !important; color: #38bdf8 !important; border: 1px solid rgba(56,189,248,.2) !important; }
.sr-ticker-badge.mod3 { background: rgba(167,139,250,.1) !important; color: #a78bfa !important; border: 1px solid rgba(167,139,250,.2) !important; }
.sr-ticker-badge.stable { background: rgba(34,197,94,.1) !important; color: #22c55e !important; border: 1px solid rgba(34,197,94,.2) !important; }
.sr-ticker-badge.noaa  { background: rgba(59,130,246,.1) !important; color: #60a5fa !important; border: 1px solid rgba(59,130,246,.2) !important; }

/* ── MAIN NAV ── */
#sr-main-nav,
nav.sr-nav {
  position: fixed !important;
  top: 28px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 64px !important;
  z-index: 1000 !important;
  background: rgba(2,8,23,0.85) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  transition: background .25s ease, border-color .25s ease !important;
}

#sr-main-nav.is-scrolled,
nav.sr-nav.is-scrolled {
  background: rgba(2,8,23,0.97) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,.5) !important;
}

.sr-nav-inner {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 3vw, 40px) !important;
}

.sr-nav-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px !important;
  overflow: visible !important;
}

/* ── BRAND ── */
.sr-nav-brand {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

/* Logo ring mark — already SVG-like CSS circles */
.sr-nav-logo-wrap {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  flex-shrink: 0 !important;
}

.sr-nav-logo {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(56,189,248,0.12) 0%, rgba(167,139,250,0.12) 100%) !important;
  border: 1px solid rgba(56,189,248,0.25) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.sr-nav-logo-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1px solid rgba(56,189,248,0.35) !important;
  width: 20px !important;
  height: 20px !important;
  animation: srLogoSpin 8s linear infinite !important;
}

.sr-nav-logo-ring--b {
  width: 12px !important;
  height: 12px !important;
  border-color: rgba(167,139,250,0.35) !important;
  animation-direction: reverse !important;
  animation-duration: 5s !important;
}

.sr-nav-logo-core {
  position: absolute !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56,189,248,.7) !important;
}

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

.sr-nav-status-dot {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 6px #22c55e !important;
  border: 1.5px solid rgba(2,8,23,0.8) !important;
  animation: srPulse 2.5s ease-in-out infinite !important;
}

.sr-nav-brand-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sr-nav-brand-kicker {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  line-height: 1 !important;
}

.sr-nav-brand-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  color: #f1f5f9 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.sr-nav-brand-title em {
  font-style: normal !important;
  color: #38bdf8 !important;
}

/* ── NAV LINKS ── */
.sr-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  /* Remove old pill container */
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.sr-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: color .18s, background .18s, border-color .18s !important;
  white-space: nowrap !important;
  background: none !important;
}

.sr-nav-link:hover {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,0.05) !important;
}

.sr-nav-link.active {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Live dot on active link */
.sr-nav-link-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 5px #22c55e !important;
  animation: srPulse 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

/* ── NAV ACTIONS (right side) ── */
.sr-nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Live pill / UTC clock */
.sr-nav-live-pill {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  background: rgba(34,197,94,0.06) !important;
  border: 1px solid rgba(34,197,94,0.15) !important;
  white-space: nowrap !important;
}

.sr-nav-live-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 5px #22c55e !important;
  animation: srPulse 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

#sr-nav-utc-clock {
  font-family: 'JetBrains Mono','SF Mono',Menlo,monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  letter-spacing: .04em !important;
}

.sr-nav-live-tag {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #22c55e !important;
}

/* Star Chart CTA button */
.sr-nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #f1f5f9 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  transition: background .18s, border-color .18s !important;
  white-space: nowrap !important;
}

.sr-nav-cta:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Language selector */
.sr-nav-lang {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.sr-nav-lang select,
select#sr-nav-lang-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #94a3b8 !important;
  font-family: 'Inter',-apple-system,sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  padding: 6px 26px 6px 10px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color .18s, background .18s !important;
  min-width: 54px !important;
}

.sr-nav-lang select:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.14) !important; }

.sr-nav-lang > svg {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #475569 !important;
}

/* Hamburger */
.sr-nav-hamburger {
  display: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4.5px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background .18s !important;
}

.sr-nav-hamburger:hover { background: rgba(255,255,255,0.08) !important; }

.sr-nav-hamburger span {
  display: block !important;
  width: 16px !important;
  height: 1.5px !important;
  background: #94a3b8 !important;
  border-radius: 2px !important;
  transition: transform .25s ease, opacity .25s ease !important;
}

.sr-nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
.sr-nav-hamburger.open span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
.sr-nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }

/* ── MOBILE PANEL ── */
.sr-nav-mobile-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 998 !important;
  background: rgba(2,8,23,0.7) !important;
  backdrop-filter: blur(4px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .25s ease, visibility 0s linear .25s !important;
}

.sr-nav-mobile-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .25s ease !important;
}

.sr-nav-mobile-panel {
  position: fixed !important;
  top: calc(28px + 64px) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(290px, 88vw) !important;
  z-index: 999 !important;
  background: #080f1e !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  transform: translateX(100%) !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 0 !important;
}

.sr-nav-mobile-panel.open {
  transform: translateX(0) !important;
}

.sr-nav-mobile-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  color: #64748b !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: color .18s, background .18s !important;
}

.sr-nav-mobile-link:hover,
.sr-nav-mobile-link.active {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,0.04) !important;
}

.sr-nav-mobile-link svg { color: #475569 !important; flex-shrink: 0 !important; }

.sr-nav-mobile-divider {
  height: 1px !important;
  background: rgba(255,255,255,0.06) !important;
  margin: 8px 0 !important;
}

.sr-nav-mobile-cta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  text-decoration: none !important;
  margin: 8px 12px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: background .18s !important;
}

.sr-nav-mobile-cta:hover { background: rgba(255,255,255,0.1) !important; }

/* ── HERO OFFSET (ticker + nav) ── */
.hero-stage,
section.hero-stage {
  padding-top: calc(28px + 64px + 3rem) !important;
}

/* section anchor offset */
section[id] { scroll-margin-top: calc(28px + 64px + 8px) !important; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .sr-nav-links { display: none !important; }
  .sr-nav-hamburger { display: flex !important; }
  .sr-nav-live-pill { display: none !important; }
}

@media (max-width: 900px) {
  .sr-nav-cta { display: none !important; }
}

@media (max-width: 480px) {
  .sr-ticker { display: none !important; }
  #sr-main-nav, nav.sr-nav { top: 0 !important; }
  .hero-stage, section.hero-stage { padding-top: calc(64px + 2rem) !important; }
  .sr-nav-mobile-panel { top: 64px !important; }
  section[id] { scroll-margin-top: calc(64px + 8px) !important; }
}