/*
  Responsive polish v2 — layout-safe (no hero flex row breakage)
  Load after sr-mobile-perfect.css
*/

/* Earth visible, content readable */
#world-solar-bg .wsb-vignette {
  background:
    radial-gradient(ellipse 55% 50% at 22% 42%, transparent 32%, rgba(2, 6, 14, 0.38) 72%),
    radial-gradient(ellipse 88% 72% at 50% 44%, transparent 24%, rgba(2, 6, 14, 0.5) 100%),
    linear-gradient(180deg, rgba(2, 8, 18, 0.32) 0%, transparent 20%, transparent 74%, rgba(2, 6, 14, 0.48) 100%);
}

#world-solar-bg canvas {
  filter: saturate(1.08) contrast(1.06) brightness(0.9);
}

body.sr-site #dashboard .card,
body.sr-site #spectrogram.card,
body.sr-site .hero-readout-shell,
body.sr-site .hero-audience-card,
body.sr-site .sr-viz-panel {
  background: rgba(6, 10, 22, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

/* Hero stays single centered column — never flex-row on .hero-stage */
body.sr-site .hero-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

body.sr-site .hero-stage::before {
  content: none !important;
  display: none !important;
}

body.sr-site .hero-stage > .hero-orbit-glow,
body.sr-site .hero-stage > .hero-orbit-glow.secondary {
  position: absolute !important;
  flex: none !important;
}

body.sr-site .hero-stage-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  order: unset !important;
}

body.sr-site .hero-visual-h1 {
  order: 2;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  line-height: 1.25;
  max-width: 24ch;
  margin: 0.35rem 0 0.5rem;
}

body.sr-site .hero-terminal-intro { order: 1; }
body.sr-site .hero-terminal-card { order: 2; }
body.sr-site .hero-t-audience { order: 3; }
body.sr-site .hero-features-strip { order: 4; }

@media (min-width: 768px) {
  body.sr-site .hero-stage {
    min-height: min(78vh, 720px);
    padding-top: 7.5rem !important;
    padding-bottom: 3rem !important;
  }

  body.sr-site .hero-visual-h1 {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    max-width: 28ch;
  }

  body.sr-site #spectrogram .spectro-container img {
    min-height: 16rem;
    object-fit: cover;
  }

  body.sr-site .spectro-insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  #world-solar-bg .wsb-vignette {
    background:
      radial-gradient(ellipse 48% 55% at 18% 46%, transparent 38%, rgba(2, 6, 14, 0.35) 70%),
      radial-gradient(ellipse 75% 65% at 62% 40%, transparent 30%, rgba(2, 6, 14, 0.42) 100%),
      linear-gradient(180deg, rgba(2, 8, 18, 0.28) 0%, transparent 18%, transparent 76%, rgba(2, 6, 14, 0.45) 100%);
  }

  body.sr-site .hero-stage-shell {
    max-width: 42rem;
  }

  body.sr-site .spectro-analysis-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1.25rem;
  }

  body.sr-site .sr-footer-columns {
    gap: 1.5rem !important;
  }
}

@media (max-width: 767px) {
  body.sr-site #spectrogram .spectro-container {
    min-height: 11.5rem;
  }

  body.sr-site .spectro-marker {
    max-width: 42%;
  }

  body.sr-site .hero-visual-h1 {
    font-size: 1.2rem;
    max-width: 100%;
  }

  body.sr-site .hero-freq-value {
    font-size: clamp(2.75rem, 14vw, 3.5rem) !important;
  }
}