/* ════════════════════════════════════════════════════════════════════
   AURORA — PROGRAMMATIC SKIN OVERRIDE
   Re-themes the shared programmatic-page template (how-cites, ai-visibility
   hubs + city pages, cities, services, compare) to the Aurora dark skin.
   Loaded AFTER each page's inline <style>, so equal-specificity rules win;
   CSS custom properties are redefined so the rest cascades automatically.
   Drop-in: add one <link> before </head>. No markup changes needed.
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink:   #F3EFFF !important;
  --muted: rgba(243,239,255,0.66) !important;
  --paper: #0A0A1E !important;
  --card:  rgba(255,255,255,0.05) !important;
  --line:  rgba(255,255,255,0.12) !important;
  --leaf:  #C9A8FF !important;
  --gold:  #C9A8FF !important;
}

body {
  background: #0A0A1E !important;
  color: #F3EFFF !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Whole-page ambient drifting aurora */
body::before {
  content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg at 38% 42%, #6366F1, #A855F7, #EC4899, #3DA9FF, #8B7CFF, #6366F1);
  filter: blur(80px) saturate(1.2); opacity: 0.16;
  animation: apgSwirl 44s linear infinite;
}
@keyframes apgSwirl { to { transform: rotate(360deg); } }

a, .nav-links a { color: #C9A8FF !important; }
.brand { color: #F3EFFF !important; }
.eyebrow { color: #C9A8FF !important; font-family: 'JetBrains Mono', monospace !important; }
.hero h1 { color: #F5F2FF !important; letter-spacing: -0.02em !important; }
.lede { color: rgba(243,239,255,0.72) !important; }

.btn { font-family: 'JetBrains Mono', monospace !important; }
.btn-primary {
  background: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 10px 30px -8px rgba(168,85,247,0.5) !important;
}
.btn-secondary {
  background: rgba(255,255,255,0.05) !important; color: #F3EFFF !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

.content, .side {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top-color: rgba(255,255,255,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 22px 44px -12px rgba(6,4,20,0.6) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
h2 { color: #F3EFFF !important; }
.proof-grid li {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-left: 3px solid #A855F7 !important;
  color: #F3EFFF !important;
}
.note { color: rgba(243,239,255,0.5) !important; }
footer { border-top: 1px solid rgba(255,255,255,0.1) !important; color: rgba(243,239,255,0.6) !important; }

/* Gentle load-in motion (no JS needed) */
.hero { animation: apgRise 0.7s ease both; }
.content, .side { animation: apgRise 0.7s ease 0.1s both; }
@keyframes apgRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body::before, .hero, .content, .side { animation: none !important; }
  .hero, .content, .side { opacity: 1 !important; transform: none !important; }
}