/* ═══════════════════════════════════════════════════════════════
   SR PREMIUM 2026 — Tam Tasarım Yenileme
   Tüm sorunlu bölümleri düzeltir: harmonics, audio, reading,
   guide, faq, footer, hero readout, stats, nav
   ═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL TOKENS ─────────────────────────────────────────── */
:root {
  --sr-bg:        #040608;
  --sr-surface:   rgba(255,255,255,0.038);
  --sr-border:    rgba(255,255,255,0.07);
  --sr-border-h:  rgba(99,217,180,0.25);
  --sr-accent:    #63d9b4;
  --sr-accent2:   #4fc3f7;
  --sr-gold:      #f5c842;
  --sr-red:       #f87171;
  --sr-text:      #e8edf5;
  --sr-muted:     rgba(232,237,245,0.45);
  --sr-dim:       rgba(232,237,245,0.18);
  --sr-radius:    18px;
  --sr-radius-sm: 10px;
  --sr-glow:      0 0 40px rgba(99,217,180,0.12);
  --sr-shadow:    0 4px 32px rgba(0,0,0,0.45);
  --sr-blur:      blur(20px) saturate(160%);
}

/* ── BASE ──────────────────────────────────────────────────── */
body {
  background: var(--sr-bg) !important;
  color: var(--sr-text) !important;
  font-family: 'Instrument Sans', 'Inter', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── CARD ──────────────────────────────────────────────────── */
.card {
  background: var(--sr-surface) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius) !important;
  backdrop-filter: var(--sr-blur) !important;
  -webkit-backdrop-filter: var(--sr-blur) !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s !important;
  box-shadow: var(--sr-shadow) !important;
}
.card:hover {
  border-color: var(--sr-border-h) !important;
  box-shadow: var(--sr-glow), var(--sr-shadow) !important;
  transform: translateY(-2px) !important;
}

/* ── SECTION KICKER / OVERLINE ─────────────────────────────── */
.text-\[10px\] {
  letter-spacing: 0.22em !important;
}

/* ── HERO SECTION ──────────────────────────────────────────── */
.hero-stage {
  padding-top: 7rem !important;
  padding-bottom: 4rem !important;
}

.hero-readout-wrap {
  background: linear-gradient(135deg,
    rgba(99,217,180,0.06) 0%,
    rgba(10,14,22,0.95) 60%,
    rgba(79,195,247,0.04) 100%) !important;
  border: 1px solid rgba(99,217,180,0.18) !important;
  border-radius: 28px !important;
  padding: 2.5rem 3rem !important;
  box-shadow: 0 0 80px rgba(99,217,180,0.07), 0 8px 48px rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(32px) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-readout-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(99,217,180,0.07), transparent 70%);
  pointer-events: none;
}

.hero-freq-value {
  font-size: clamp(4rem, 12vw, 7.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: 0 0 60px rgba(99,217,180,0.35), 0 0 120px rgba(99,217,180,0.15) !important;
}
.hero-freq-unit {
  font-size: 1.75rem !important;
  font-weight: 300 !important;
  color: var(--sr-accent) !important;
  opacity: 0.8 !important;
  letter-spacing: 0.05em !important;
}

.hero-readout-sub {
  font-size: 0.95rem !important;
  color: var(--sr-muted) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}

/* Hero stats pills */
.hero-stat-chip, .chip, [class*="hz-max"], [class*="hz-min"] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 100px !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--sr-text) !important;
  letter-spacing: 0.03em !important;
}

/* ── SECTION DIVIDER ───────────────────────────────────────── */
.section-orb-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0.75rem auto 1rem !important;
}
.section-orb-divider::before,
.section-orb-divider::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,217,180,0.3));
}
.section-orb-divider::after {
  background: linear-gradient(90deg, rgba(99,217,180,0.3), transparent);
}
.section-orb-divider-ball {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--sr-accent) !important;
  box-shadow: 0 0 12px var(--sr-accent) !important;
  display: inline-block !important;
}

/* ── HARMONICS SECTION ─────────────────────────────────────── */
#harmonic-0, #harmonic-1, #harmonic-2, #harmonic-3, #harmonic-4 {
  background: linear-gradient(135deg,
    rgba(99,217,180,0.05) 0%,
    rgba(255,255,255,0.03) 100%) !important;
  border: 1px solid rgba(99,217,180,0.12) !important;
  border-radius: 20px !important;
  padding: 1.5rem 1rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
#harmonic-0::before, #harmonic-1::before, #harmonic-2::before,
#harmonic-3::before, #harmonic-4::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sr-accent), transparent);
  opacity: 0.5;
}
#harmonic-0:hover, #harmonic-1:hover, #harmonic-2:hover,
#harmonic-3:hover, #harmonic-4:hover {
  border-color: rgba(99,217,180,0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(99,217,180,0.15) !important;
}

.harmonic-freq {
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 0 20px rgba(99,217,180,0.4) !important;
  transition: color 0.2s !important;
}
#harmonic-0:hover .harmonic-freq,
#harmonic-1:hover .harmonic-freq,
#harmonic-2:hover .harmonic-freq,
#harmonic-3:hover .harmonic-freq,
#harmonic-4:hover .harmonic-freq {
  color: var(--sr-accent) !important;
}

/* SR1-SR5 labels */
.harmonic-label-sr {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.25em !important;
  color: var(--sr-accent) !important;
  opacity: 0.7 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Harmonic progress bar */
.harmonic-bar {
  height: 3px !important;
  border-radius: 100px !important;
  background: linear-gradient(90deg, var(--sr-accent), var(--sr-accent2)) !important;
  box-shadow: 0 0 8px rgba(99,217,180,0.5) !important;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1) !important;
}
.h-1.bg-dark-800 {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 100px !important;
}
.harmonic-pct {
  color: var(--sr-dim) !important;
  font-family: 'Roboto Mono', 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  margin-top: 0.5rem !important;
}

/* Harmonics section title */
.fade-up .text-2xl.sm\:text-3xl {
  font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--sr-text) !important;
}

/* ── HARMONICS DESC TEXT ────────────────────────────────────── */
.harmonics-desc {
  max-width: 52rem !important;
  margin: 1rem auto 2rem !important;
  color: var(--sr-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

/* ── AUDIO SECTION ─────────────────────────────────────────── */
.card [class*="audio"], .card [class*="binaural"],
[class*="audio-player"], [class*="play-btn"],
.star-launch-wrap .card,
.card:has(> [class*="audio"]) {
  border: 1px solid rgba(99,217,180,0.15) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg,
    rgba(99,217,180,0.04) 0%,
    rgba(79,195,247,0.03) 100%) !important;
  overflow: hidden !important;
}

/* Star / audio section wrapper */
.star-launch-wrap {
  margin-top: 1.5rem !important;
}
.star-launch-wrap .card {
  padding: 2rem !important;
}

/* Play button */
button[class*="play"], .play-btn,
button[class*="audio"], .audio-play-btn,
[id*="play-btn"], [id*="audio-play"] {
  background: linear-gradient(135deg, var(--sr-accent), var(--sr-accent2)) !important;
  color: #040608 !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 0.75rem 2rem !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  box-shadow: 0 4px 24px rgba(99,217,180,0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
button[class*="play"]:hover, .play-btn:hover,
button[class*="audio"]:hover, .audio-play-btn:hover,
[id*="play-btn"]:hover, [id*="audio-play"]:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 32px rgba(99,217,180,0.45) !important;
}

/* ── SPIRITUAL READING / INTERPRETATION ────────────────────── */
[class*="reading"], [class*="interpret"],
[id*="reading"], [id*="interpret"],
.sr-reading-card {
  background: linear-gradient(135deg,
    rgba(245,200,66,0.06) 0%,
    rgba(255,255,255,0.03) 100%) !important;
  border: 1px solid rgba(245,200,66,0.15) !important;
  border-radius: 24px !important;
  padding: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
}
[class*="reading"]::before, [class*="interpret"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sr-gold), transparent);
  opacity: 0.6;
}

/* Reading stats (Baskın Yoğunluk, Tepe Genliği etc) */
[class*="reading"] .grid > div,
[class*="interpret"] .grid > div,
.reading-stat {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  text-align: center !important;
}
[class*="reading"] .grid > div .text-brand-400,
[class*="interpret"] .grid > div .text-brand-400 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--sr-accent) !important;
}

/* ── GUIDE / CONTENT SECTION ───────────────────────────────── */
#guide {
  padding: 5rem 1.5rem !important;
}
#guide .card {
  padding: 2.5rem !important;
}
#guide article.card {
  border-radius: 24px !important;
}

/* Guide feature cards (📊 📈 icons) */
#guide .grid .card,
.guide-feature-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 20px !important;
  padding: 1.75rem !important;
  transition: all 0.3s !important;
  position: relative !important;
  overflow: hidden !important;
}
#guide .grid .card:hover {
  border-color: rgba(99,217,180,0.2) !important;
  background: rgba(99,217,180,0.04) !important;
  transform: translateY(-3px) !important;
}
#guide .grid .card .text-2xl,
.guide-feature-icon {
  font-size: 1.75rem !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}
#guide .grid .card h4,
.guide-feature-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--sr-text) !important;
  margin-bottom: 0.5rem !important;
}
#guide .grid .card p,
.guide-feature-desc {
  font-size: 0.82rem !important;
  color: var(--sr-muted) !important;
  line-height: 1.65 !important;
}

/* Cite / authority block */
.cite-block, [class*="cite"],
#guide .cite-kicker ~ * {
  color: var(--sr-muted) !important;
  line-height: 1.75 !important;
}

/* ── SEO TEXT BLOCKS ───────────────────────────────────────── */
#guide p, #guide .text-sm, #guide .text-xs {
  line-height: 1.75 !important;
  color: var(--sr-muted) !important;
}
#guide h2, #guide h3 {
  color: var(--sr-text) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Official data source chips */
#guide ul li, .feature-chip {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0 !important;
  color: var(--sr-muted) !important;
  font-size: 0.88rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
#guide ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sr-accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--sr-accent);
}

/* ── FAQ SECTION ───────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 0 !important;
  transition: background 0.2s !important;
  border-radius: 12px !important;
  margin-bottom: 4px !important;
  overflow: hidden !important;
}
.faq-item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* FAQ question button */
.faq-item > div:first-child,
.faq-question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.1rem 1.25rem !important;
  cursor: pointer !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--sr-text) !important;
  transition: color 0.2s !important;
  gap: 1rem !important;
}
.faq-item.open > div:first-child,
.faq-item.open .faq-question {
  color: var(--sr-accent) !important;
}
.faq-item:hover > div:first-child,
.faq-item:hover .faq-question {
  background: rgba(99,217,180,0.04) !important;
}

/* FAQ chevron */
.faq-chevron {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  color: var(--sr-dim) !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), color 0.2s !important;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg) !important;
  color: var(--sr-accent) !important;
}

/* FAQ answer */
.faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1) !important;
  padding: 0 1.25rem !important;
}
.faq-item.open .faq-answer {
  max-height: 600px !important;
  padding-bottom: 1.1rem !important;
}
.faq-answer p, .faq-answer div {
  font-size: 0.875rem !important;
  line-height: 1.75 !important;
  color: var(--sr-muted) !important;
}

/* FAQ number badges */
.faq-num, [class*="faq-num"] {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: var(--sr-accent) !important;
  opacity: 0.6 !important;
  min-width: 24px !important;
  letter-spacing: 0.05em !important;
}

/* FAQ container */
#guide .faq-item,
.faq-container .faq-item {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  margin-bottom: 6px !important;
}
#guide .faq-item.open,
.faq-container .faq-item.open {
  border-color: rgba(99,217,180,0.15) !important;
  background: rgba(99,217,180,0.03) !important;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.footer-premium {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(4,6,8,0.98) 10%,
    #020305 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 4rem 1.5rem 2.5rem !important;
  position: relative !important;
  z-index: 10 !important;
}
.footer-premium::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sr-accent), transparent);
  opacity: 0.25;
}

.footer-premium-shell {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.footer-premium-hero {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2.5rem !important;
  align-items: flex-start !important;
  margin-bottom: 3rem !important;
  padding-bottom: 2.5rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.footer-premium-logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--sr-accent), var(--sr-accent2)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 20px rgba(99,217,180,0.25) !important;
  flex-shrink: 0 !important;
}

.footer-premium-brand h3 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--sr-text) !important;
  letter-spacing: -0.01em !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.4rem !important;
}
.footer-premium-brand p,
.footer-premium-note {
  font-size: 0.83rem !important;
  color: var(--sr-muted) !important;
  line-height: 1.65 !important;
  max-width: 26rem !important;
}

/* Footer chip row */
.footer-premium-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 1.25rem !important;
}
.footer-premium-chip {
  background: rgba(99,217,180,0.08) !important;
  border: 1px solid rgba(99,217,180,0.18) !important;
  border-radius: 100px !important;
  padding: 0.3rem 0.85rem !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--sr-accent) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Footer grid columns */
.footer-premium-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 2rem !important;
  margin-bottom: 2.5rem !important;
}
.footer-premium-col h4 {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--sr-dim) !important;
  margin-bottom: 1rem !important;
}
.footer-premium-col a {
  display: block !important;
  font-size: 0.85rem !important;
  color: var(--sr-muted) !important;
  padding: 0.3rem 0 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.footer-premium-col a:hover {
  color: var(--sr-accent) !important;
}

/* Footer bottom */
.footer-premium-bottom {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding-top: 1.75rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.footer-premium-bottom * {
  font-size: 0.78rem !important;
  color: var(--sr-dim) !important;
}

/* Footer badge */
.footer-premium-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgba(99,217,180,0.07) !important;
  border: 1px solid rgba(99,217,180,0.15) !important;
  border-radius: 100px !important;
  padding: 0.4rem 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--sr-accent) !important;
}
.footer-premium-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sr-accent);
  box-shadow: 0 0 8px var(--sr-accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── NAV ───────────────────────────────────────────────────── */
.nav-glass {
  background: rgba(4,6,8,0.75) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
}

.nav-pill {
  color: rgba(232,237,245,0.55) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 0.45rem 0.9rem !important;
  border-radius: 100px !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}
.nav-pill:hover, .nav-pill.active {
  color: var(--sr-text) !important;
  background: rgba(255,255,255,0.07) !important;
}

.nav-cta-link {
  background: linear-gradient(135deg, var(--sr-gold), #f59e0b) !important;
  color: #111 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.25s !important;
  box-shadow: 0 2px 12px rgba(245,200,66,0.25) !important;
}
.nav-cta-link:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 4px 20px rgba(245,200,66,0.4) !important;
}

.nav-live-strip {
  background: rgba(34,197,94,0.08) !important;
  border: 1px solid rgba(34,197,94,0.18) !important;
  border-radius: 100px !important;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #4ade80 !important;
  gap: 0.4rem !important;
}
.nav-live-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  box-shadow: 0 0 8px #4ade80 !important;
  animation: pulse-dot 1.8s ease-in-out infinite !important;
}

/* ── LOCALE SELECT ─────────────────────────────────────────── */
.locale-select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: var(--sr-text) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 0.4rem 0.75rem !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  outline: none !important;
}
.locale-select:hover, .locale-select:focus {
  border-color: rgba(99,217,180,0.3) !important;
}

/* ── BRAND ─────────────────────────────────────────────────── */
.brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(99,217,180,0.15), rgba(79,195,247,0.1)) !important;
  border: 1px solid rgba(99,217,180,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.brand-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--sr-text) !important;
  letter-spacing: -0.01em !important;
}
.brand-caption {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--sr-accent) !important;
  opacity: 0.7 !important;
  text-transform: uppercase !important;
  display: block !important;
}
.brand-subcopy {
  font-size: 0.6rem !important;
  color: var(--sr-dim) !important;
  display: block !important;
  letter-spacing: 0.05em !important;
}

/* ── LIVE DATA CARDS ────────────────────────────────────────── */
.stat-val, [class*="stat-val"], [class*="data-val"] {
  font-family: 'Roboto Mono', 'JetBrains Mono', monospace !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--sr-accent) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.stat-label, [class*="stat-label"] {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sr-dim) !important;
  margin-bottom: 0.25rem !important;
}
.stat-unit {
  font-size: 0.75rem !important;
  color: var(--sr-dim) !important;
  margin-left: 2px !important;
}

/* ── NEWS CARDS ─────────────────────────────────────────────── */
#guide a.block {
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.025) !important;
  text-decoration: none !important;
  transition: all 0.25s !important;
}
#guide a.block:hover {
  border-color: rgba(99,217,180,0.22) !important;
  background: rgba(99,217,180,0.04) !important;
  transform: translateY(-2px) !important;
}

/* ── SCROLL FADE-UP ANIMATION ──────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUpIn 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes fadeUpIn {
  to { opacity: 1; transform: none; }
}
.fade-up:nth-child(1) { animation-delay: 0.05s; }
.fade-up:nth-child(2) { animation-delay: 0.12s; }
.fade-up:nth-child(3) { animation-delay: 0.19s; }
.fade-up:nth-child(4) { animation-delay: 0.26s; }
.fade-up:nth-child(5) { animation-delay: 0.33s; }

/* ── PULSE DOT ANIMATION ────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ── MOBILE RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-readout-wrap { padding: 1.75rem 1.25rem !important; }
  .hero-freq-value { font-size: clamp(3.5rem, 18vw, 6rem) !important; }
  .footer-premium { padding: 3rem 1rem 2rem !important; }
  .footer-premium-hero { flex-direction: column !important; gap: 1.5rem !important; }
  #guide { padding: 3rem 1rem !important; }
  #guide .card { padding: 1.5rem !important; }
  .footer-premium-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── SPECTROGRAM & CHARTS ───────────────────────────────────── */
#spectrogram .card, [id*="spectro"] .card {
  border-radius: 24px !important;
  overflow: hidden !important;
}

/* Chart bars */
.kp-bar, [class*="kp-bar"] {
  border-radius: 3px 3px 0 0 !important;
  transition: height 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── GLOBAL OVERRIDES ───────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--sr-text) !important; }
a { transition: color 0.2s !important; }
::selection { background: rgba(99,217,180,0.25) !important; }
::-webkit-scrollbar { width: 5px; background: #040608; }
::-webkit-scrollbar-thumb { background: rgba(99,217,180,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,217,180,0.4); }

/* Text colors */
.text-brand-400 { color: var(--sr-accent) !important; }
.text-gray-500, .text-gray-600 { color: var(--sr-muted) !important; }
.text-gray-400 { color: rgba(232,237,245,0.6) !important; }
.text-white { color: var(--sr-text) !important; }

/* Brand bg */
.bg-brand-400, .bg-brand-500 { background-color: var(--sr-accent) !important; }
.bg-dark-800, .bg-dark-900, .bg-dark-950 { background-color: rgba(255,255,255,0.04) !important; }


/* ── NAV FIX - overflow & brand title truncation ──────────── */
.nav-shell {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  overflow: visible !important;
}
.nav-brand {
  flex-shrink: 0 !important;
  text-decoration: none !important;
}
.brand-lockup {
  min-width: 0 !important;
}
.brand-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.logo-desktop {
  display: none !important;
}
@media (min-width: 1024px) {
  .logo-desktop { display: inline !important; }
  .logo-mobile { display: none !important; }
}
.nav-center {
  flex: 1 1 auto !important;
  justify-content: center !important;
  gap: 0.25rem !important;
}
.nav-right {
  flex-shrink: 0 !important;
  gap: 0.5rem !important;
}
@media (max-width: 1100px) {
  .nav-cta-link { display: none !important; }
}

/* ── HERO COMPACT & CENTER ─────────────────────────────────── */
.hero-stage {
  min-height: 85vh !important;
  padding-top: 5.5rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 768px) {
  .hero-stage {
    padding-top: 5rem !important;
  }
}

/* Hero readout centered & wider */
.hero-readout-wrap {
  max-width: 520px !important;
  margin: 0 auto 1.5rem !important;
}

/* Hero freq number bigger on desktop */
@media (min-width: 1024px) {
  .hero-freq-value {
    font-size: 7rem !important;
  }
}

/* Subtitle spacing */
.hero-stage-shell > h1 {
  margin-bottom: 1.5rem !important;
}

/* Remove excessive top space on bg globe */
#globe-shell {
  top: 0 !important;
}

/* ── HARMONICS GRID BETTER SPACING ────────────────────────── */
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 {
  gap: 1rem !important;
}

/* ── DASHBOARD SECTION PADDING ─────────────────────────────── */
#dashboard {
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
}

/* ── SECTION HEADINGS ─────────────────────────────────────── */
section h2 {
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* ── READING / INTERPRET SECTION STATS ─────────────────────── */
.grid.grid-cols-2.gap-3 > div,
.grid.grid-cols-4.gap-3 > div,
.grid.grid-cols-2.sm\:grid-cols-4 > div {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
}

/* ── CTA BUTTONS ───────────────────────────────────────────── */
.btn-primary, a.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, #63d9b4, #4fc3f7) !important;
  color: #040608 !important;
  font-weight: 700 !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: 100px !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  box-shadow: 0 4px 20px rgba(99,217,180,0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.btn-primary:hover, a.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(99,217,180,0.45) !important;
}

/* ── FAQ H2 SECTION HEADER ────────────────────────────────── */
.faq-section-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--sr-text) !important;
  margin-bottom: 2rem !important;
  text-align: center !important;
}

/* ── FOOTER ACTIONS ────────────────────────────────────────── */
.footer-premium-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin-top: 1.25rem !important;
}
.footer-premium-button {
  background: linear-gradient(135deg, #63d9b4, #4fc3f7) !important;
  color: #040608 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.25s !important;
  white-space: nowrap !important;
}
.footer-premium-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(99,217,180,0.35) !important;
}
.footer-premium-button-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--sr-text) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.25s !important;
  white-space: nowrap !important;
}
.footer-premium-button-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(99,217,180,0.2) !important;
}

/* ── SOLAR SECTION ─────────────────────────────────────────── */
#solar {
  padding: 2rem 1.5rem 3rem !important;
}

/* ── SPECTROGRAM SECTION ───────────────────────────────────── */
#spectrogram {
  padding: 2rem 1.5rem !important;
}