/* ============================================================
   PREMIUM POLISH v1 — schumannresonancelive.com
   Loaded LAST. Final authority over all earlier stylesheets.
   Goal: header→footer premium feel, fix mobile issues, tighten
         hierarchy, add depth, kill visual noise.
   Date: 2026-04-30
   ============================================================ */

/* ─── EXTRA TOKENS (extend existing :root) ─────────────────── */
:root {
  --pp-bg-1: #020617;
  --pp-bg-2: #050a1a;
  --pp-surface-1: rgba(255,255,255,0.04);
  --pp-surface-2: rgba(255,255,255,0.06);
  --pp-border:    rgba(255,255,255,0.08);
  --pp-border-h:  rgba(255,255,255,0.16);
  --pp-text:      #f8fafc;
  --pp-text-2:    #cbd5e1;
  --pp-muted:     #94a3b8;
  --pp-dim:       #64748b;
  --pp-gold:      #f59e0b;
  --pp-gold-2:    #fbbf24;
  --pp-cyan:      #38bdf8;
  --pp-violet:    #a78bfa;
  --pp-live:      #22c55e;
  --pp-shadow-1:  0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
  --pp-shadow-2:  0 2px 4px rgba(0,0,0,.4), 0 24px 48px -16px rgba(0,0,0,.55);
  --pp-glow-gold: 0 0 0 1px rgba(245,158,11,.25), 0 8px 32px -8px rgba(245,158,11,.45);
  --pp-glow-cyan: 0 0 0 1px rgba(56,189,248,.18), 0 6px 28px -10px rgba(56,189,248,.35);
  --pp-radius-sm: 8px;
  --pp-radius-md: 14px;
  --pp-radius-lg: 20px;
  --pp-radius-xl: 28px;
  --pp-ease:      cubic-bezier(.22,.61,.36,1);
}

/* ─── GLOBAL HARDENING ─────────────────────────────────────── */
html, body {
  background: radial-gradient(ellipse at top, #061027 0%, #020617 55%, #010410 100%) fixed !important;
  color: var(--pp-text) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Better default selection */
::selection { background: rgba(245,158,11,.35); color: #fff; }

/* Subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border-radius: 8px;
  border: 2px solid #020617;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #334155, #1e293b); }

/* ════════════════════════════════════════════════════════════
   1) NAVIGATION — header polish
   ════════════════════════════════════════════════════════════ */

nav.nav-glass {
  background: rgba(2,6,23,0.78) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--pp-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 8px 24px -8px rgba(0,0,0,.35) !important;
}

/* Tighten nav-shell + logo lockup so subtitles don't wrap */
.nav-shell {
  gap: 18px !important;
  padding: 0 clamp(14px, 2.6vw, 36px) !important;
}

.nav-brand {
  gap: 12px !important;
  min-width: 0 !important; /* allow truncation */
}

/* Brand mark (icon) — premium gradient orb */
.nav-brand .brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(251,191,36,.55), rgba(245,158,11,.0) 60%),
    linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important;
  box-shadow:
    0 0 0 1px rgba(245,158,11,.35),
    0 4px 14px -2px rgba(245,158,11,.45),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  position: relative !important;
  overflow: hidden !important;
}
.nav-brand .brand-mark .brand-ring,
.nav-brand .brand-mark .brand-wave,
.nav-brand .brand-mark .brand-core { opacity: .9 !important; }

/* Lockup — clean, single-line title, dim caption */
.nav-brand .brand-lockup {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  line-height: 1 !important;
}
.nav-brand .brand-caption {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--pp-dim) !important;
}
.nav-brand .brand-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--pp-text) !important;
  letter-spacing: -.005em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 260px !important;
}
/* HIDE the noisy 3rd line on desktop — duplicated by caption */
.nav-brand .brand-subcopy { display: none !important; }

/* Mobile/desktop logo swap */
.nav-brand .logo-mobile { display: none !important; }
@media (max-width: 640px) {
  .nav-brand .logo-desktop { display: none !important; }
  .nav-brand .logo-mobile  { display: inline !important; }
  .nav-brand .brand-title  { max-width: 140px !important; font-size: 13px !important; }
  .nav-brand .brand-caption{ font-size: 8px !important; letter-spacing: .18em !important; }
}

/* Status dot positioning fix */
.nav-brand .status-dot {
  background: var(--pp-live) !important;
  box-shadow: 0 0 8px var(--pp-live), 0 0 0 2px #020617 !important;
}

/* Nav center pills */
.nav-center { gap: 4px !important; }
.nav-pill {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  color: var(--pp-muted) !important;
  border: 1px solid transparent !important;
  transition: all .25s var(--pp-ease) !important;
}
.nav-pill:hover {
  color: var(--pp-text) !important;
  background: rgba(255,255,255,.04) !important;
  border-color: var(--pp-border) !important;
  transform: translateY(-1px);
}
.nav-pill.active,
a.nav-pill:first-child.active {
  color: #fef3c7 !important;
  background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.08)) !important;
  border-color: rgba(245,158,11,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px -8px rgba(245,158,11,.35) !important;
}

/* Right side */
.nav-right { gap: 10px !important; }

/* UTC live strip — refined chip */
.nav-live-strip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: var(--pp-text-2) !important;
  letter-spacing: .04em !important;
}
.nav-live-strip strong { color: var(--pp-text) !important; font-weight: 600 !important; }
.nav-live-strip span:last-child {
  color: var(--pp-live) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.nav-live-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--pp-live) !important;
  box-shadow: 0 0 8px var(--pp-live) !important;
  animation: pp-pulse 1.6s ease-in-out infinite !important;
}
@keyframes pp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.78); }
}

/* CTA - YILDIZ HARITASI - premium gold pill */
.nav-cta-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #1c1206 !important;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #d97706 100%) !important;
  border: 1px solid rgba(245,158,11,.6) !important;
  border-radius: 10px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 6px 20px -6px rgba(245,158,11,.6) !important;
  transition: transform .2s var(--pp-ease), box-shadow .2s var(--pp-ease), filter .2s var(--pp-ease) !important;
  text-decoration: none !important;
}
.nav-cta-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 10px 28px -6px rgba(245,158,11,.7) !important;
}
.nav-cta-link svg { stroke: #1c1206 !important; }

/* Locale select — refined */
.locale-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
.locale-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--pp-text) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 10px !important;
  padding: 7px 28px 7px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
  font-family: var(--font-ui, inherit) !important;
}
.locale-select:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--pp-border-h) !important;
}
.locale-select:focus { outline: 2px solid rgba(56,189,248,.4) !important; outline-offset: 2px !important; }
.locale-select-wrap > svg {
  position: absolute !important;
  right: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--pp-muted) !important;
}
.locale-select option { background: #0b1220 !important; color: var(--pp-text) !important; }

/* ════════════════════════════════════════════════════════════
   2) MOBILE NAV / MENU — kill the dreaded white block
   ════════════════════════════════════════════════════════════ */

/* HARD HIDE the mobile overlay unless explicitly opened */
.nav-mobile-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  background: rgba(2,6,23,.85) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .28s var(--pp-ease), visibility .28s var(--pp-ease) !important;
}
.nav-mobile-overlay.is-open,
.nav-mobile-overlay.open,
.nav-mobile-overlay[aria-hidden="false"],
body.nav-open .nav-mobile-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.nav-mobile-menu {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: min(86vw, 340px) !important;
  height: 100% !important;
  background: linear-gradient(180deg, #0b1224 0%, #050a18 100%) !important;
  border-left: 1px solid var(--pp-border) !important;
  box-shadow: -16px 0 48px -8px rgba(0,0,0,.55) !important;
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  transform: translateX(20px) !important;
  transition: transform .32s var(--pp-ease) !important;
  overflow-y: auto !important;
}
.nav-mobile-overlay.is-open .nav-mobile-menu,
.nav-mobile-overlay.open .nav-mobile-menu,
.nav-mobile-overlay[aria-hidden="false"] .nav-mobile-menu,
body.nav-open .nav-mobile-menu { transform: translateX(0) !important; }

.nav-mobile-links { display: flex !important; flex-direction: column !important; gap: 4px !important; padding-top: 56px !important; }
.nav-mobile-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pp-text-2) !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  transition: all .2s var(--pp-ease) !important;
}
.nav-mobile-link:hover, .nav-mobile-link:focus {
  background: rgba(255,255,255,.04) !important;
  color: var(--pp-text) !important;
  border-color: var(--pp-border) !important;
}
.nav-mobile-link.active {
  background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.06)) !important;
  color: #fde68a !important;
  border-color: rgba(245,158,11,.3) !important;
}
.nav-mobile-link.star-link {
  margin-top: 8px !important;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%) !important;
  color: #1c1206 !important;
  border-color: rgba(245,158,11,.55) !important;
  justify-content: center !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.nav-mobile-link.star-link svg { stroke: #1c1206 !important; }

.nav-mobile-footer { margin-top: auto !important; padding-top: 18px !important; border-top: 1px solid var(--pp-border) !important; }

/* Mobile toggle button — refined */
.nav-mobile-toggle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid var(--pp-border) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--pp-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s var(--pp-ease) !important;
  margin-left: 4px !important;
}
.nav-mobile-toggle:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--pp-border-h) !important;
}
.nav-mobile-toggle svg { width: 18px !important; height: 18px !important; }

/* ════════════════════════════════════════════════════════════
   3) HERO SECTION
   ════════════════════════════════════════════════════════════ */

.hero-stage {
  padding-top: clamp(110px, 14vh, 160px) !important;
  padding-bottom: clamp(48px, 8vh, 96px) !important;
  min-height: auto !important;
}

/* H1 visual heading */
.hero-visual-h1 {
  font-size: clamp(11px, 1.4vw, 13px) !important;
  font-weight: 700 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: var(--pp-muted) !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}

/* Frequency readout shell */
.hero-readout-wrap {
  position: relative !important;
  margin: 12px auto 28px !important;
  max-width: 620px !important;
}
.hero-readout-shell {
  background: linear-gradient(180deg, rgba(56,189,248,.06), rgba(56,189,248,.02)) !important;
  border: 1px solid rgba(56,189,248,.18) !important;
  border-radius: var(--pp-radius-xl) !important;
  padding: clamp(20px, 4vw, 40px) clamp(24px, 5vw, 56px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 3vw, 28px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 24px 60px -20px rgba(56,189,248,.25),
    0 8px 32px -12px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-readout-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(56,189,248,.12), transparent 70%);
  pointer-events: none;
}

.hero-readout-heart svg { filter: drop-shadow(0 0 12px rgba(239,68,68,.5)); }
.hero-readout-heart { animation: pp-heart 1.4s ease-in-out infinite; }
@keyframes pp-heart {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.hero-freq-stack { display: flex !important; align-items: baseline !important; gap: 8px !important; line-height: 1 !important; }
.hero-freq-value, #hero-freq {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: clamp(56px, 12vw, 124px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.04em !important;
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 40px rgba(56,189,248,.35);
}
.hero-freq-unit {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: clamp(20px, 3.5vw, 36px) !important;
  font-weight: 600 !important;
  color: var(--pp-muted) !important;
  letter-spacing: -.02em !important;
}

.hero-readout-meta { margin-top: 22px !important; text-align: center !important; }
.hero-readout-sub {
  font-size: clamp(18px, 2.6vw, 28px) !important;
  font-weight: 600 !important;
  color: var(--pp-text) !important;
  margin: 0 0 12px !important;
  letter-spacing: -.01em !important;
  line-height: 1.25 !important;
}
.hero-readout-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: rgba(34,197,94,.08) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--pp-text-2) !important;
}
.hero-readout-status strong { color: var(--pp-live) !important; font-family: 'JetBrains Mono', monospace !important; letter-spacing: 0 !important; text-transform: none !important; }
.hero-readout-status-dot {
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: var(--pp-live) !important;
  box-shadow: 0 0 8px var(--pp-live) !important;
  animation: pp-pulse 1.6s infinite ease-in-out !important;
}

/* Hero stats pills */
.hero-stats-row { margin-top: 28px !important; gap: 10px !important; }
.hero-stats-row .card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  transition: all .2s var(--pp-ease) !important;
}
.hero-stats-row .card:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--pp-border-h) !important;
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════
   4) STAR-CHART HERO SIDE PANEL — visual hierarchy fix
   ════════════════════════════════════════════════════════════ */

/* Side floating "Kişisel Yıldız Haritan" panel - reduce competition with hero */
.hero-side-card,
.star-launch-side,
.hero-floating-cta,
[data-hero-side="star"] {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-lg) !important;
  box-shadow: var(--pp-shadow-1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  max-width: 280px !important;
}

/* The big yellow CTA button anywhere — premium gold gradient */
.btn-cta-gold,
button.btn-star-create,
a.btn-star-cta,
.star-launch-wrap .btn-primary,
.star-cta-wrap a,
button[data-action="create-star-chart"] {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #1c1206 !important;
  border: 1px solid rgba(245,158,11,.6) !important;
  border-radius: 12px !important;
  padding: 13px 22px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 10px 28px -8px rgba(245,158,11,.5) !important;
  transition: all .2s var(--pp-ease) !important;
}

/* ════════════════════════════════════════════════════════════
   5) GENERIC CARDS / SECTIONS
   ════════════════════════════════════════════════════════════ */

.card,
.glass-card,
.panel,
section.section-card,
.dashboard-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-lg) !important;
  box-shadow: var(--pp-shadow-1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: border-color .25s var(--pp-ease), box-shadow .25s var(--pp-ease), transform .25s var(--pp-ease) !important;
}
.card:hover,
.glass-card:hover,
.dashboard-card:hover {
  border-color: var(--pp-border-h) !important;
  box-shadow: var(--pp-shadow-2) !important;
}

/* Section vertical rhythm */
section {
  padding-top: clamp(48px, 7vh, 96px) !important;
  padding-bottom: clamp(48px, 7vh, 96px) !important;
}

/* Section heading */
section h2,
.section-title {
  font-size: clamp(22px, 3.2vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--pp-text) !important;
  margin-bottom: 18px !important;
}

/* Section subtitle */
.section-subtitle, section h2 + p {
  color: var(--pp-text-2) !important;
  font-size: clamp(14px, 1.6vw, 16px) !important;
  line-height: 1.65 !important;
  max-width: 640px !important;
}

/* Section overline kicker */
.section-kicker, .section-overline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--pp-gold-2) !important;
  margin-bottom: 12px !important;
}

/* ════════════════════════════════════════════════════════════
   6) FREE-COSMIC-GIFT BLOCK FIXES (the "Ücretsiz Kozmik Hediye" card)
   Fix: huge text + missing/blurry right side image area
   ════════════════════════════════════════════════════════════ */

/* Re-tame headings inside any "gift/star" CTA card */
.cosmic-gift-card h2,
.cosmic-gift-card h3,
.star-cta-card h2,
.star-cta-card h3,
.gift-block h2,
.gift-block h3,
[data-block="star-cta"] h2,
[data-block="star-cta"] h3 {
  font-size: clamp(24px, 3.4vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--pp-text) !important;
}

/* If an image placeholder exists with empty/loading state — give graceful background */
.cosmic-gift-card .gift-visual,
.cosmic-gift-card img,
.star-cta-card .visual-side,
.star-cta-card img,
[data-block="star-cta"] .visual-side {
  background:
    radial-gradient(circle at 30% 30%, rgba(167,139,250,.3), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(56,189,248,.25), transparent 55%),
    linear-gradient(135deg, #0b1224, #050a18) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-lg) !important;
  min-height: 240px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* "FREE COSMIC GIFT" badge */
.cosmic-gift-badge,
.gift-block-badge,
.free-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: rgba(34,197,94,.1) !important;
  border: 1px solid rgba(34,197,94,.3) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #4ade80 !important;
  margin-bottom: 14px !important;
}

/* ════════════════════════════════════════════════════════════
   7) BUTTONS — universal premium polish
   ════════════════════════════════════════════════════════════ */

button,
.btn,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-ui, inherit) !important;
  letter-spacing: .02em !important;
  transition: all .2s var(--pp-ease) !important;
}

.btn-primary,
button.primary,
.btn.primary {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #1c1206 !important;
  border: 1px solid rgba(245,158,11,.55) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 8px 24px -6px rgba(245,158,11,.5) !important;
  font-weight: 700 !important;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }

.btn-secondary,
button.secondary,
.btn.secondary {
  background: rgba(255,255,255,.04) !important;
  color: var(--pp-text) !important;
  border: 1px solid var(--pp-border-h) !important;
  font-weight: 600 !important;
}
.btn-secondary:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* ════════════════════════════════════════════════════════════
   8) CHARTS / DATA VIZ
   ════════════════════════════════════════════════════════════ */

canvas, .chart-shell, .spectrogram-shell {
  border-radius: var(--pp-radius-md) !important;
}
.spectrogram-shell, .chart-shell {
  background: rgba(0,0,0,.25) !important;
  border: 1px solid var(--pp-border) !important;
  padding: 14px !important;
}

/* Live "scanning" line over spectrogram (decorative) */
.spectrogram-shell { position: relative; overflow: hidden; }
.spectrogram-shell::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(56,189,248,.85), transparent);
  box-shadow: 0 0 12px rgba(56,189,248,.7);
  animation: pp-scan 4.5s linear infinite;
  pointer-events: none;
}
@keyframes pp-scan {
  from { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { left: 100%; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   9) LINKS
   ════════════════════════════════════════════════════════════ */

a {
  transition: color .15s var(--pp-ease), opacity .15s var(--pp-ease);
}
.content a:not(.btn):not(.nav-pill):not(.nav-cta-link):not(.nav-mobile-link) {
  color: var(--pp-cyan) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(56,189,248,.3);
  padding-bottom: 1px;
}
.content a:not(.btn):hover { color: #7dd3fc !important; border-bottom-color: rgba(125,211,252,.6); }

/* ════════════════════════════════════════════════════════════
   10) FOOTER
   ════════════════════════════════════════════════════════════ */

footer, .site-footer, .footer {
  margin-top: clamp(48px, 8vh, 96px) !important;
  padding: clamp(48px, 7vh, 80px) clamp(20px, 4vw, 48px) clamp(32px, 5vh, 48px) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 30%, #010410 100%) !important;
  border-top: 1px solid var(--pp-border) !important;
  position: relative;
}
footer::before, .site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.6), transparent);
}

footer h3, footer h4, .footer h3, .footer h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--pp-muted) !important;
  margin-bottom: 16px !important;
}

footer a, .footer a {
  color: var(--pp-text-2) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 2 !important;
  transition: color .2s var(--pp-ease) !important;
  display: inline-block !important;
}
footer a:hover, .footer a:hover {
  color: var(--pp-cyan) !important;
}

footer .footer-bottom,
footer .footer-copyright,
.footer-bottom {
  border-top: 1px solid var(--pp-border) !important;
  margin-top: 32px !important;
  padding-top: 22px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 11px !important;
  color: var(--pp-dim) !important;
  letter-spacing: .06em !important;
}

/* Mobile footer center alignment */
@media (max-width: 768px) {
  footer, .site-footer, .footer { text-align: center !important; }
  footer .footer-grid, .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  footer .footer-bottom { flex-direction: column !important; text-align: center !important; }
  footer h3, footer h4 { text-align: center !important; }
}

/* Social icons */
.footer-social, .social-icons {
  display: inline-flex !important;
  gap: 10px !important;
}
.footer-social a, .social-icons a {
  width: 36px !important; height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--pp-border) !important;
  color: var(--pp-muted) !important;
  transition: all .2s var(--pp-ease) !important;
}
.footer-social a:hover, .social-icons a:hover {
  background: rgba(56,189,248,.1) !important;
  color: var(--pp-cyan) !important;
  border-color: rgba(56,189,248,.3) !important;
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════════
   11) FORMS / INPUTS
   ════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select:not(.locale-select) {
  background: rgba(255,255,255,.04) !important;
  color: var(--pp-text) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: var(--font-ui, inherit) !important;
  transition: all .2s var(--pp-ease) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: rgba(56,189,248,.55) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.15) !important;
}
::placeholder { color: var(--pp-dim) !important; }

/* ════════════════════════════════════════════════════════════
   12) TYPOGRAPHY GLOBAL
   ════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui, inherit) !important;
  color: var(--pp-text) !important;
  letter-spacing: -.015em !important;
}

p { color: var(--pp-text-2) !important; line-height: 1.7 !important; }

/* ════════════════════════════════════════════════════════════
   13) RESPONSIVE — MOBILE FINAL POLISH
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* nav height tweak */
  nav.nav-glass { height: 60px !important; }
  .nav-shell { height: 60px !important; padding: 0 14px !important; gap: 8px !important; }

  /* Hide UTC strip and CTA on tightest mobile (already xl: in DOM) */
  .nav-live-strip, .nav-cta-link { display: none !important; }

  /* Tighten hero */
  .hero-stage { padding-top: 96px !important; }
  .hero-readout-shell { padding: 18px 18px !important; gap: 10px !important; }
  .hero-freq-value, #hero-freq { font-size: 64px !important; }
  .hero-readout-sub { font-size: 18px !important; }
  .hero-stats-row { padding: 0 4px !important; }

  /* Locale select smaller */
  .locale-select { padding: 6px 24px 6px 10px !important; font-size: 11px !important; }

  /* Section padding */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ════════════════════════════════════════════════════════════
   14) SAFETY KILL: any rogue white backgrounds
   ════════════════════════════════════════════════════════════ */

/* Some leftover patches inject white blocks at top — kill them */
body > div[style*="background:#fff"]:first-of-type:not(.allow-white),
body > div[style*="background: #fff"]:first-of-type:not(.allow-white),
body > div[style*="background:white"]:first-of-type:not(.allow-white) {
  background: transparent !important;
}

/* If any ad/iframe placeholder is empty, hide gracefully on mobile */
@media (max-width: 768px) {
  .ad-placeholder:empty,
  .adsbygoogle:empty {
    display: none !important;
  }
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   15) FOCUS VISIBILITY (a11y polish)
   ════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid rgba(56,189,248,.6) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* End of premium-polish.css */