/**
 * PREMIUM PATHFINDER BACKGROUND
 * Ethereal, clean, breathtaking light theme with glassmorphism
 */

:root {
  --premium-gold: #daa41b;
  --premium-gold-light: rgba(218, 164, 27, 0.15);
  --premium-blue-light: rgba(59, 130, 246, 0.1);
  --premium-peach-light: rgba(255, 183, 178, 0.15);
  --text-dark: #0F172A;
  --text-dim-dark: #475569;
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.8);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ====================================
   FLUID LUMINOUS BACKGROUND
   ==================================== */
body {
  background-color: #F8FAFC !important;
  background-image: none !important;
  color: var(--text-dark) !important;
}

/* Clear old dark theme background overlays */
body::before, body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -2;
  pointer-events: none;
}

/* Glowing Orbs for the Magical Background */
body::before {
  background: 
    radial-gradient(circle at 15% 20%, var(--premium-gold-light) 0%, transparent 45%),
    radial-gradient(circle at 85% 30%, var(--premium-blue-light) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, var(--premium-peach-light) 0%, transparent 55%);
  filter: blur(80px);
  animation: floatOrbs 25s ease-in-out infinite alternate;
  opacity: 0.9;
}

/* Matte Noise Texture for sophisticated paper-like feel */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  z-index: -1;
  opacity: 1;
}

@keyframes floatOrbs {
  0% { transform: scale(1) translate(0px, 0px); }
  33% { transform: scale(1.15) translate(40px, -40px); }
  66% { transform: scale(0.9) translate(-30px, 50px); }
  100% { transform: scale(1.05) translate(20px, -20px); }
}

/* ====================================
   HERO ENHANCEMENTS
   ==================================== */
.hero {
  background: transparent !important;
}

.hero::before, .hero::after {
  display: none !important; /* kill old cinematic wrappers */
}

.hero h1 {
  background: linear-gradient(135deg, #0F172A 0%, #334155 50%, var(--premium-gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0F172A !important; /* fallback */
  text-shadow: none !important;
  filter: drop-shadow(0px 8px 16px rgba(218, 164, 27, 0.15)) !important;
  transform: translateY(0);
}

.hero p {
  color: var(--text-dim-dark) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
}

/* Ultra-Premium CTA Button */
.hero .cta-button, .hero button, .hero a[role="button"], .hero-actions a, .hero-actions button, .btn-gold {
  background: linear-gradient(135deg, var(--premium-gold) 0%, #FCD34D 100%) !important;
  color: #000 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 10px 30px rgba(218, 164, 27, 0.25), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  border-radius: 50px !important;
  padding: 16px 36px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  transition: all 0.4s var(--ease-premium) !important;
  position: relative;
  overflow: hidden;
  text-shadow: none !important;
}

.hero .cta-button::before, .btn-gold::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transition: none !important;
  z-index: 1;
}

.hero .cta-button:hover::before, .btn-gold:hover::before {
  left: 200%;
  transition: left 0.8s ease-in-out !important;
}

.hero .cta-button:hover, .btn-gold:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(218, 164, 27, 0.35), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  background: linear-gradient(135deg, var(--premium-gold) 0%, #FDE68A 100%) !important;
}

/* ====================================
   UNIFY SECTIONS INTO LIGHT THEME
   ==================================== */
.problem-stat-section, #who, .contrast-section, #how, .section-dark, 
[style*="background: rgba(0,0,0,0.02)"], [style*="background: #0F172A"],
.live-numbers-section, .marquee-strip {
  background: transparent !important;
}

/* For sections that originally had a dark background, add a soft frosted container */
.section-dark::before, .problem-stat-section::before, .live-numbers-section::before, .marquee-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: -1;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  animation: none !important;
}

.section-dark::after {
  display: none !important; /* disable old visual artifact */
}

/* Change typography in these dark sections to light mode */
.section-dark *, .problem-stat-section *, .live-numbers-section *, .marquee-strip * {
  color: var(--text-dark) !important;
  text-shadow: none !important;
}

.section-dark p, .problem-stat-subtext, .problem-stat-section p, .live-label, .marquee-item {
  color: var(--text-dim-dark) !important;
}

/* Large numbers styling */
.problem-stat-number, .live-number {
  background: linear-gradient(135deg, var(--premium-gold) 0%, #B45309 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* ====================================
   GLASSMORPHISM CARDS (Bento, Pricing, Steps)
   ==================================== */
.bento-card, .card, [class*="card"], .step-card, .pricing-card, .who-card, .architect-card, .faq-item {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  color: var(--text-dark) !important;
  border-radius: 20px !important;
  transition: all 0.5s var(--ease-premium) !important;
}

.bento-card:hover, .card:hover, [class*="card"]:hover, .step-card:hover, .pricing-card:hover, .who-card:hover, .architect-card:hover, .faq-item:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 50px rgba(218, 164, 27, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(218, 164, 27, 0.3) !important;
}

/* Featured Pricing Card specific handling */
.pricing-card.featured {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(218, 164, 27, 0.4) !important;
  box-shadow: 0 20px 60px rgba(218, 164, 27, 0.2) !important;
}

/* Specific card internal typography */
.bento-card h3, .card h3, .step-card h3, .pricing-card h3, .benefit-card h3, .who-card h3, .architect-card h3 {
  color: #0F172A !important;
  font-weight: 700 !important;
}

.bento-card p, .card p, .step-card p, .pricing-card p, .benefit-card p, .pricing-card li, .who-card p, .architect-card p {
  color: var(--text-dim-dark) !important;
}

/* Icons within cards */
.step-number, .card-icon, .who-ring, .benefit-icon-svg svg {
  background: linear-gradient(135deg, var(--premium-gold), #FDE68A) !important;
  box-shadow: 0 8px 20px rgba(218, 164, 27, 0.25) !important;
  color: #000 !important;
  border: none !important;
  stroke: #000 !important;
}
.card-icon svg {
  stroke: #000 !important;
}
.who-ring-svg {
  background: none !important;
  box-shadow: none !important;
}
.who-ring-svg .who-ring {
  stroke: var(--premium-gold) !important;
  background: none !important;
  box-shadow: none !important;
}

/* ====================================
   SECTION TITLES & TYPOGRAPHY
   ==================================== */
.section-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentcolor !important;
  color: #0F172A !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  text-shadow: none !important;
  filter: none !important;
}

.section-subtitle {
  color: var(--text-dim-dark) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* Links & Accents */
a {
  color: #0F172A !important;
}
a:hover {
  color: var(--premium-gold) !important;
  text-shadow: none !important;
}
nav a {
  color: var(--text-dim-dark) !important;
}
nav a:hover {
  color: var(--premium-gold) !important;
  transform: translateY(-1px);
}

/* Removes aggressive cinematic text styling */
p, li, span, h1, h2, h3, h4, h5, h6 {
  text-shadow: none !important;
}

/* Tags & Labels */
.badge, .tag, [class*="signal"], [class*="label"], .hero-kicker, .architect-role, .timeline-tag, .contrast-label {
  background: rgba(218, 164, 27, 0.1) !important;
  color: #B45309 !important; /* warm amber text */
  border: 1px solid rgba(218, 164, 27, 0.2) !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.contrast-after .contrast-label {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

.contrast-before .contrast-label {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #DC2626 !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.badge:hover, .tag:hover, [class*="signal"]:hover, [class*="label"]:hover {
  background: rgba(218, 164, 27, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* ====================================
   MAGIC MICRO-INTERACTIONS
   ==================================== */
/* Smooth reveal animations */
.reveal, .reveal-item {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: all 1s var(--ease-premium) !important;
  will-change: transform, opacity;
  filter: blur(5px) !important;
}

.reveal.active, .reveal-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
}

/* Elegant horizontal rules */
hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent) !important;
  margin: 3rem 0;
}

/* Floating Animations */
.hero-stats-strip {
  animation: floatSubtle 6s ease-in-out infinite alternate;
}

@keyframes floatSubtle {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

/* High contrast overrides off */
@media (prefers-contrast: more) {
  .hero h1 { filter: none !important; }
}