/*
Theme Name: Sharon Lee Healing Strategist
Theme URI: https://sharonleeastrology.com
Author: Google Deepmind Agentic Team
Author URI: https://sharonleeastrology.com
Description: Premium animated astrology, healing guidance, and personal transformation WordPress theme for Sharon Lee Healing Strategist. Featuring cosmic mandala visuals, 60fps stardust particle systems, interactive zodiac explorer, and Web Audio API celestial ambience.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sharon-lee
Tags: astrology, spiritual, healing, animations, responsive-layout, custom-menu, featured-images, full-width-template
*/

/* ==========================================================================
   SHARON LEE HEALING STRATEGIST - PREMIUM ANIMATED ASTROLOGY & HEALING
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS RESET & CUSTOM PROPERTIES (THEME TOKENS)
   -------------------------------------------------------------------------- */
:root {
  /* Cosmic Backgrounds */
  --bg-deep-void: #07040F;
  --bg-cosmic-1: #0B061A;
  --bg-cosmic-2: #120A27;
  --bg-cosmic-3: #180E36;
  --bg-card: rgba(22, 14, 48, 0.72);
  --bg-card-hover: rgba(32, 20, 68, 0.88);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-heavy: rgba(14, 9, 32, 0.88);

  /* Celestial Gold Accent Palette */
  --gold-starlight: #FFF3D6;
  --gold-light: #F5DEB0;
  --gold-primary: #DFB76C;
  --gold-dark: #A87E30;
  --gold-glow: rgba(223, 183, 108, 0.45);
  --gold-glow-strong: rgba(223, 183, 108, 0.75);

  /* Ethereal Lavender / Lilac Palette */
  --lavender-light: #ECE5FF;
  --lavender-primary: #BCA8F2;
  --lavender-muted: #8E79CC;
  --lavender-dark: #452D80;
  --lavender-glow: rgba(188, 168, 242, 0.35);

  /* Ethereal Rose Quartz & Pink Accents */
  --pink-light: #FCE8EE;
  --pink-primary: #E29BB4;
  --pink-accent: #C86D98;
  --pink-glow: rgba(226, 155, 180, 0.35);

  /* Cosmic Indigo & Midnight Blue */
  --indigo-primary: #1C2758;
  --indigo-light: #2D3E8C;
  --indigo-glow: rgba(45, 62, 140, 0.4);

  /* Typography Colors */
  --text-pure: #FFFFFF;
  --text-cream: #FAF7F2;
  --text-soft: #DDD6F0;
  --text-muted: #9E93BE;
  --text-gold: #F2D594;

  /* Borders & Dividers */
  --border-subtle: rgba(223, 183, 108, 0.16);
  --border-active: rgba(223, 183, 108, 0.5);
  --border-highlight: rgba(223, 183, 108, 0.75);
  --border-lavender: rgba(188, 168, 242, 0.22);

  /* Fonts */
  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-heading: 'Cinzel', 'Cormorant Garamond', serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Transitions & Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-full: 9999px;
  
  /* Precision Easing Curves for Instant Yet Velvety Smooth Response */
  --transition-instant: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-cosmic: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
  --shadow-gold-card: 0 22px 50px -12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(223, 183, 108, 0.25);
  --shadow-purple-card: 0 22px 50px -12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(188, 168, 242, 0.25);
}

/* --------------------------------------------------------------------------
   2. GLOBAL BASE & RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-deep-void);
  color: var(--text-soft);
  line-height: 1.68;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

::selection {
  background: rgba(223, 183, 108, 0.35);
  color: #FFFFFF;
}

/* Custom Cosmic Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep-void);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-dark), var(--lavender-dark));
  border-radius: 5px;
  border: 2px solid var(--bg-deep-void);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-cream);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.02em;
}

p {
  margin-bottom: 1.1rem;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
  border: none;
  background: none;
}

/* --------------------------------------------------------------------------
   3. BACKGROUND PARTICLES CANVAS & AMBIENT GLOW ORBS
   -------------------------------------------------------------------------- */
#stardust-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.ambient-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  animation: floatAmbient 18s ease-in-out infinite alternate;
}

.orb-purple {
  top: -10%;
  right: -5%;
  background: radial-gradient(circle, var(--lavender-primary), transparent 70%);
}

.orb-gold {
  top: 35%;
  left: -15%;
  background: radial-gradient(circle, var(--gold-primary), transparent 70%);
  animation-duration: 22s;
  animation-delay: -5s;
}

.orb-indigo {
  bottom: 5%;
  right: 10%;
  background: radial-gradient(circle, #563B9E, transparent 70%);
  animation-duration: 26s;
  animation-delay: -9s;
}

@keyframes floatAmbient {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.12); }
  100% { transform: translate(-40px, 60px) scale(0.95); }
}

/* --------------------------------------------------------------------------
   4. LAYOUT CONTAINERS & UTILITY CLASSES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

.section {
  padding: 6.5rem 0;
  position: relative;
  z-index: 1;
}

.text-center {
  text-align: center;
}

/* Section Header Shared */
.section-header {
  max-width: 760px;
  margin: 0 auto 4rem auto;
}

.section-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  background: rgba(223, 183, 108, 0.09);
  border: 1px solid rgba(223, 183, 108, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  margin-bottom: 1.2rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(223, 183, 108, 0.1);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.section-pill:hover {
  transform: translateY(-2px);
  border-color: var(--gold-primary);
  box-shadow: 0 6px 20px rgba(223, 183, 108, 0.25);
}

.section-title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 700;
  margin-bottom: 1.1rem;
  color: var(--text-cream);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Radiant Text Gradients */
.gradient-text {
  background: linear-gradient(135deg, var(--gold-starlight) 0%, var(--gold-primary) 50%, var(--pink-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.gold-glow {
  text-shadow: 0 0 30px rgba(223, 183, 108, 0.35);
}

/* --------------------------------------------------------------------------
   5. BUTTONS & INTERACTIVE CONTROLS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.85rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  z-index: 1;
}

.btn-primary {
  background: linear-gradient(135deg, #DFB76C 0%, #C28435 50%, #945B1A 100%);
  color: #0B061A;
  border: 1px solid rgba(255, 238, 194, 0.5);
  box-shadow: 0 4px 20px rgba(223, 183, 108, 0.35);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: 0.6s ease;
  z-index: -1;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 32px rgba(223, 183, 108, 0.6), 0 0 18px rgba(255, 238, 194, 0.45);
  color: #06020E;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-secondary {
  background: rgba(22, 14, 46, 0.6);
  color: var(--text-cream);
  border: 1px solid var(--border-lavender);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(45, 28, 90, 0.8);
  border-color: var(--gold-primary);
  color: var(--gold-light);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(188, 168, 242, 0.3), 0 0 15px rgba(223, 183, 108, 0.2);
}

.btn-outline {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(223, 183, 108, 0.4);
}

.btn-outline:hover {
  background: rgba(223, 183, 108, 0.15);
  border-color: var(--gold-primary);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 24px rgba(223, 183, 108, 0.35);
  color: #FFFFFF;
}

.btn-lg {
  padding: 1rem 2.2rem;
  font-size: 1.05rem;
}

.btn-glow {
  box-shadow: 0 0 25px rgba(223, 183, 108, 0.4);
}

.btn-full-width {
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. HEADER & NAVBAR (Sticky Glassmorphic)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.25rem 0;
  transition: all var(--transition-smooth);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  padding: 0.85rem 0;
  background: rgba(11, 6, 26, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(223, 183, 108, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  transition: transform var(--transition-fast);
}

.brand-logo:hover {
  transform: scale(1.03);
}

.logo-symbol {
  width: 42px;
  height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sacred-star {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(223, 183, 108, 0.6));
  animation: pulseStar 4s ease-in-out infinite alternate;
}

@keyframes pulseStar {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.08) rotate(15deg); }
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-cream);
  letter-spacing: 0.06em;
  line-height: 1.1;
  transition: color var(--transition-fast);
}

.brand-logo:hover .logo-name {
  color: var(--gold-light);
}

.logo-tagline {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-primary);
  font-weight: 500;
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  position: relative;
  padding: 0.4rem 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-primary), var(--lavender-primary));
  transition: width var(--transition-fast);
  border-radius: 2px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--gold-light);
  transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-yt-icon {
  color: #FF4D4D;
  margin-right: 0.2rem;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Cosmic Ambience Sound Toggle */
.sound-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: rgba(188, 168, 242, 0.08);
  border: 1px solid rgba(188, 168, 242, 0.25);
  border-radius: var(--radius-full);
  color: var(--lavender-light);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sound-toggle-btn:hover {
  background: rgba(188, 168, 242, 0.2);
  border-color: var(--lavender-primary);
  color: #FFFFFF;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 15px rgba(188, 168, 242, 0.3);
}

.sound-toggle-btn.active {
  border-color: var(--gold-primary);
  color: var(--gold-light);
  background: rgba(223, 183, 108, 0.15);
  box-shadow: 0 0 15px rgba(223, 183, 108, 0.3);
}

.btn-nav-cta {
  padding: 0.65rem 1.4rem;
  font-size: 0.88rem;
}

/* Mobile Toggle Hamburger */
.mobile-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
  z-index: 1001;
}

.mobile-toggle-btn .bar {
  height: 2px;
  width: 100%;
  background-color: var(--gold-light);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-toggle-btn.open .bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.mobile-toggle-btn.open .bar:nth-child(2) {
  opacity: 0;
}
.mobile-toggle-btn.open .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 360px;
  height: 100vh;
  background: rgba(11, 6, 26, 0.96);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-left: 1px solid rgba(223, 183, 108, 0.2);
  z-index: 999;
  padding: 6rem 2rem 3rem 2rem;
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -15px 0 40px rgba(0, 0, 0, 0.7);
}

.mobile-drawer.open {
  right: 0;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: 2.5rem;
}

.mobile-link {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--text-cream);
  display: block;
  transition: all var(--transition-fast);
}

.mobile-link:hover {
  color: var(--gold-primary);
  transform: translateX(8px);
}

/* --------------------------------------------------------------------------
   7. HERO SECTION (ANIMATED ASTROLOGY & COSMIC MANDALA HERO)
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: 100vh;
  padding: 9rem 0 5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.2rem;
  background: rgba(188, 168, 242, 0.08);
  border: 1px solid rgba(188, 168, 242, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  color: var(--lavender-light);
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
  transition: all var(--transition-fast);
  cursor: default;
}

.hero-pill-badge:hover {
  background: rgba(188, 168, 242, 0.16);
  border-color: var(--gold-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(223, 183, 108, 0.2);
}

.hero-title {
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 1.5rem;
  color: var(--text-pure);
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-soft);
  line-height: 1.75;
  margin-bottom: 2.2rem;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.8rem;
  flex-wrap: wrap;
}

/* Micro Trust Bar */
.hero-trust-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.4rem;
  background: rgba(22, 14, 46, 0.5);
  border: 1px solid rgba(223, 183, 108, 0.18);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  width: fit-content;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}

.hero-trust-bar:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--gold-primary);
  background: rgba(30, 18, 62, 0.75);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(223, 183, 108, 0.2);
}

.trust-item {
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast);
}

.trust-item:hover {
  transform: scale(1.05);
}

.stars-gold {
  color: var(--gold-primary);
  font-size: 0.9rem;
  letter-spacing: 2px;
  line-height: 1;
}

.trust-stat {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gold-light);
  font-size: 1.05rem;
  line-height: 1.1;
}

.trust-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}

.trust-divider {
  width: 1px;
  height: 28px;
  background: rgba(223, 183, 108, 0.2);
}

/* --------------------------------------------------------------------------
   8. HERO ASTROLOGY VISUAL: CELESTIAL MANDALA & ENERGY RIBBONS
   -------------------------------------------------------------------------- */
.hero-visual-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.nebula-aura {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(188, 168, 242, 0.25) 0%, rgba(223, 183, 108, 0.18) 40%, rgba(7, 4, 15, 0) 70%);
  filter: blur(50px);
  animation: pulseNebula 6s ease-in-out infinite alternate;
}

.cosmic-ring-pulse {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(223, 183, 108, 0.18);
  animation: rippleRing 8s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

@keyframes pulseNebula {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.85; }
}

@keyframes rippleRing {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

.celestial-mandala {
  position: relative;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.3, 1);
}

/* SVG Degree Coordinates Outer Ring */
.mandala-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  animation: rotateClockwise 90s linear infinite;
}

/* 12 Zodiac Glyphs Ring Layer */
.zodiac-wheel-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  animation: rotateCounterClockwise 65s linear infinite;
}

.zodiac-glyph-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  margin-left: -22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.28s var(--transition-fast), filter 0.28s var(--transition-fast);
}

.zodiac-glyph-item .z-symbol {
  font-size: 1.35rem;
  color: var(--gold-light);
  filter: drop-shadow(0 0 6px rgba(223, 183, 108, 0.7));
  transition: all 0.28s ease;
}

.zodiac-glyph-item .z-name {
  font-size: 0.55rem;
  text-transform: uppercase;
  color: var(--lavender-light);
  letter-spacing: 0.05em;
  opacity: 0.8;
  display: none;
}

.zodiac-glyph-item:hover .z-symbol {
  transform: scale(1.35);
  color: #FFFFFF;
  filter: drop-shadow(0 0 15px rgba(255, 238, 194, 1)), drop-shadow(0 0 25px rgba(223, 183, 108, 0.8));
}

/* 12 Circular Positions */
.pos-0  { transform: rotate(0deg) translate(205px) rotate(0deg); }
.pos-1  { transform: rotate(30deg) translate(205px) rotate(-30deg); }
.pos-2  { transform: rotate(60deg) translate(205px) rotate(-60deg); }
.pos-3  { transform: rotate(90deg) translate(205px) rotate(-90deg); }
.pos-4  { transform: rotate(120deg) translate(205px) rotate(-120deg); }
.pos-5  { transform: rotate(150deg) translate(205px) rotate(-150deg); }
.pos-6  { transform: rotate(180deg) translate(205px) rotate(-180deg); }
.pos-7  { transform: rotate(210deg) translate(205px) rotate(-210deg); }
.pos-8  { transform: rotate(240deg) translate(205px) rotate(-240deg); }
.pos-9  { transform: rotate(270deg) translate(205px) rotate(-270deg); }
.pos-10 { transform: rotate(300deg) translate(205px) rotate(-300deg); }
.pos-11 { transform: rotate(330deg) translate(205px) rotate(-330deg); }

/* Sacred Geometry Middle SVG Layer */
.mandala-geometry {
  position: absolute;
  width: 92%;
  height: 92%;
  pointer-events: none;
  animation: rotateClockwise 50s linear infinite;
  opacity: 0.85;
}

/* Planetary Glyph Layer (Inner Ring) */
.planetary-glyph-layer {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  animation: rotateClockwise 40s linear infinite;
}

.planet-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--lavender-light);
  filter: drop-shadow(0 0 5px rgba(188, 168, 242, 0.6));
  cursor: pointer;
  transition: transform 0.25s ease, color 0.25s ease, filter 0.25s ease;
}

.planet-glyph:hover {
  transform: scale(1.4);
  color: var(--gold-light);
  filter: drop-shadow(0 0 12px rgba(223, 183, 108, 0.9));
}

/* 7 Planets Circular Position */
.p-sun     { transform: rotate(0deg) translate(95px) rotate(0deg); color: var(--gold-primary); font-size: 1.3rem; }
.p-moon    { transform: rotate(51.4deg) translate(95px) rotate(-51.4deg); color: #FFF; }
.p-mercury { transform: rotate(102.8deg) translate(95px) rotate(-102.8deg); }
.p-venus   { transform: rotate(154.2deg) translate(95px) rotate(-154.2deg); color: var(--pink-primary); }
.p-mars    { transform: rotate(205.6deg) translate(95px) rotate(-205.6deg); color: #FF9B9B; }
.p-jupiter { transform: rotate(257deg) translate(95px) rotate(-257deg); color: var(--gold-light); }
.p-saturn  { transform: rotate(308.4deg) translate(95px) rotate(-308.4deg); }

/* Central Luminescent Crystal & Healing Core */
.mandala-core {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.mandala-core:hover {
  transform: scale(1.15);
}

.core-pulsing-orb {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #FFEEC2 0%, #DFB76C 45%, rgba(188, 168, 242, 0.4) 75%, transparent 100%);
  filter: blur(6px);
  animation: pulseCore 3s ease-in-out infinite alternate;
}

.core-starlight {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-star-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 15px rgba(255, 238, 194, 0.9));
  animation: rotateClockwise 20s linear infinite;
}

@keyframes pulseCore {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 25px rgba(223, 183, 108, 0.9)); }
}

@keyframes rotateClockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Flowing Cosmic Energy Ribbons */
.energy-ribbon {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid transparent;
  pointer-events: none;
}

.ribbon-1 {
  width: 320px;
  height: 320px;
  border-top-color: rgba(223, 183, 108, 0.7);
  border-right-color: rgba(226, 155, 180, 0.5);
  animation: spinRibbon 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  filter: blur(1px) drop-shadow(0 0 8px rgba(223, 183, 108, 0.6));
}

.ribbon-2 {
  width: 380px;
  height: 380px;
  border-bottom-color: rgba(188, 168, 242, 0.7);
  border-left-color: rgba(223, 183, 108, 0.4);
  animation: spinRibbonReverse 11s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  filter: blur(1px) drop-shadow(0 0 10px rgba(188, 168, 242, 0.6));
}

.ribbon-3 {
  width: 430px;
  height: 430px;
  border-top-color: rgba(255, 238, 194, 0.8);
  border-left-color: rgba(226, 155, 180, 0.6);
  animation: spinRibbon 14s linear infinite;
}

@keyframes spinRibbon {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes spinRibbonReverse {
  0% { transform: rotate(360deg) scale(1.03); }
  50% { transform: rotate(180deg) scale(0.97); }
  100% { transform: rotate(0deg) scale(1.03); }
}

/* Floating Celestial Charms around Mandala */
.floating-charm {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  background: rgba(14, 9, 32, 0.8);
  border: 1px solid rgba(223, 183, 108, 0.3);
  border-radius: var(--radius-full);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  z-index: 10;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  pointer-events: auto;
  cursor: pointer;
}

.floating-charm:hover {
  border-color: var(--gold-primary);
  background: rgba(28, 16, 56, 0.95);
  transform: translateY(-6px) scale(1.12) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(223, 183, 108, 0.4);
}

.charm-icon {
  font-size: 1.1rem;
  color: var(--gold-light);
  transition: transform var(--transition-fast);
}

.floating-charm:hover .charm-icon {
  transform: scale(1.2);
}

.charm-label {
  font-size: 0.72rem;
  color: var(--text-cream);
  font-weight: 500;
  white-space: nowrap;
}

.charm-moon {
  top: -15px;
  left: 20px;
  animation: floatCharm 6s ease-in-out infinite alternate;
}

.charm-crystal {
  bottom: 20px;
  left: -20px;
  animation: floatCharm 7s ease-in-out infinite alternate-reverse;
}

.charm-nodes {
  top: 30px;
  right: -30px;
  animation: floatCharm 8s ease-in-out infinite alternate;
}

.charm-aspect {
  bottom: -10px;
  right: 40px;
  animation: floatCharm 6.5s ease-in-out infinite alternate-reverse;
}

@keyframes floatCharm {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-16px) rotate(4deg); }
}

/* Hero Scroll Indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  z-index: 10;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.hero-scroll-indicator:hover {
  color: var(--gold-light);
  transform: translateX(-50%) translateY(-3px);
}

.scroll-mouse {
  width: 20px;
  height: 32px;
  border: 1.5px solid var(--border-active);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.scroll-wheel {
  width: 3px;
  height: 6px;
  background: var(--gold-primary);
  border-radius: 2px;
  animation: scrollWheelAnim 2s ease-in-out infinite;
}

@keyframes scrollWheelAnim {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   9. ASTROLOGY / SERVICES SHOWCASE SECTION (PREMIUM INTERACTIVE CARDS)
   -------------------------------------------------------------------------- */
.services-section {
  background: linear-gradient(180deg, var(--bg-deep-void) 0%, rgba(18, 10, 39, 0.7) 50%, var(--bg-deep-void) 100%);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

/* Interactive Service Card with Radial Spotlight */
.service-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 2.3rem 1.9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition-smooth), 
              box-shadow var(--transition-smooth), 
              border-color var(--transition-smooth), 
              background var(--transition-smooth);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(
    450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(223, 183, 108, 0.12),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.service-card-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  filter: blur(25px);
  opacity: 0;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  pointer-events: none;
}

.featured-glow {
  background: radial-gradient(circle, var(--pink-glow) 0%, transparent 70%);
  opacity: 0.6;
}

/* Hover State */
.service-card:hover {
  transform: translateY(-8px) scale(1.018);
  border-color: var(--border-highlight);
  box-shadow: var(--shadow-gold-card);
  background: var(--bg-card-hover);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover .service-card-glow {
  opacity: 0.9;
  transform: scale(1.15);
}

.featured-service {
  border-color: rgba(226, 155, 180, 0.45);
  box-shadow: 0 10px 40px -10px rgba(200, 109, 152, 0.2);
  background: rgba(28, 16, 56, 0.85);
}

.featured-service:hover {
  border-color: var(--pink-primary);
  box-shadow: 0 22px 50px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(226, 155, 180, 0.3);
  background: rgba(36, 20, 72, 0.95);
}

.card-badge {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  padding: 0.28rem 0.8rem;
  background: rgba(223, 183, 108, 0.12);
  border: 1px solid rgba(223, 183, 108, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  font-weight: 600;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.service-card:hover .card-badge {
  transform: translateY(-2px);
  border-color: var(--gold-primary);
  background: rgba(223, 183, 108, 0.22);
}

.badge-featured {
  background: rgba(226, 155, 180, 0.2);
  border-color: rgba(226, 155, 180, 0.5);
  color: var(--pink-light);
}

/* Service Card Celestial Art Visual */
.service-visual-art {
  width: 90px;
  height: 90px;
  margin: 0.5rem 0 1.5rem 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(223, 183, 108, 0.4));
  transition: transform var(--transition-smooth), filter var(--transition-smooth);
}

.service-card:hover .art-svg {
  transform: scale(1.12) rotate(12deg);
  filter: drop-shadow(0 0 18px rgba(223, 183, 108, 0.75));
}

.service-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--gold-light);
  margin-bottom: 1rem;
}

.service-duration {
  font-weight: 600;
}

.service-format {
  color: var(--text-muted);
}

.service-title {
  font-size: 1.45rem;
  margin-bottom: 0.9rem;
  color: var(--text-cream);
  transition: color var(--transition-fast);
}

.service-card:hover .service-title {
  color: #FFFFFF;
}

.service-description {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 2rem;
}

.service-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-soft);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.service-card:hover .service-features li {
  color: var(--text-cream);
}

.service-features li i {
  color: var(--gold-primary);
  margin-top: 0.2rem;
  font-size: 0.85rem;
  transition: transform var(--transition-fast);
}

.service-card:hover .service-features li i {
  transform: scale(1.15);
}

.service-card-footer {
  margin-top: auto;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   10. BENEFITS SECTION (THE HEALING & TRANSFORMATION)
   -------------------------------------------------------------------------- */
.benefits-section {
  position: relative;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

/* Interactive Benefit Card with Hover Shimmer & Lift */
.benefit-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.3rem 1.7rem;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-smooth), 
              box-shadow var(--transition-smooth), 
              border-color var(--transition-smooth), 
              background var(--transition-smooth);
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(223, 183, 108, 0.1),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.benefit-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--border-highlight);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.65), 0 0 25px rgba(223, 183, 108, 0.2);
  background: var(--bg-card-hover);
}

.benefit-card:hover::before {
  opacity: 1;
}

.benefit-icon-box {
  width: 64px;
  height: 64px;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(223, 183, 108, 0.08);
  border: 1px solid rgba(223, 183, 108, 0.25);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.benefit-card:hover .benefit-icon-box {
  transform: scale(1.14) rotate(8deg);
  border-color: var(--gold-primary);
  background: rgba(223, 183, 108, 0.18);
  box-shadow: 0 0 25px rgba(223, 183, 108, 0.5);
}

.benefit-icon-svg {
  width: 48px;
  height: 48px;
}

.benefit-title {
  font-size: 1.25rem;
  margin-bottom: 0.8rem;
  color: var(--text-cream);
  transition: color var(--transition-fast);
}

.benefit-card:hover .benefit-title {
  color: var(--gold-light);
}

.benefit-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  transition: color var(--transition-fast);
}

.benefit-card:hover .benefit-text {
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   11. ASTROLOGY / HEALING STORY SECTION (Meet Sharon Lee)
   -------------------------------------------------------------------------- */
.story-section {
  background: linear-gradient(180deg, var(--bg-deep-void) 0%, rgba(24, 14, 54, 0.6) 50%, var(--bg-deep-void) 100%);
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 4.5rem;
  align-items: center;
}

.story-visual-column {
  position: relative;
  display: flex;
  justify-content: center;
}

.story-frame-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.story-halo-ring {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: var(--radius-xl);
  border: 1px dashed rgba(223, 183, 108, 0.3);
  pointer-events: none;
  animation: rotateClockwise 80s linear infinite;
  transition: border-color var(--transition-fast);
}

.story-portrait-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  padding: 1.2rem;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-purple-card);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.story-portrait-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--gold-primary);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(223, 183, 108, 0.3);
}

.story-portrait-card:hover ~ .story-halo-ring {
  border-color: var(--gold-primary);
}

.portrait-art-container {
  position: relative;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #1A0F38 0%, #0B061A 100%);
  overflow: hidden;
  border: 1px solid rgba(188, 168, 242, 0.2);
}

.portrait-aura-glow {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 183, 108, 0.3) 0%, rgba(188, 168, 242, 0.2) 60%, transparent 100%);
  filter: blur(30px);
  transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}

.story-portrait-card:hover .portrait-aura-glow {
  transform: scale(1.25);
  opacity: 0.9;
}

.portrait-svg-artwork {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  transition: transform var(--transition-smooth);
}

.story-portrait-card:hover .portrait-svg-artwork {
  transform: scale(1.03);
}

.portrait-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 1rem 1rem 1rem;
  background: linear-gradient(to top, rgba(7, 4, 15, 0.95), transparent);
  text-align: center;
  z-index: 3;
}

.caption-tag {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-light);
}

.caption-title {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lavender-light);
}

.portrait-badge {
  position: absolute;
  bottom: 1.8rem;
  right: 1.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: rgba(11, 6, 26, 0.9);
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--text-cream);
  z-index: 5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  transition: transform var(--transition-fast);
}

.story-portrait-card:hover .portrait-badge {
  transform: scale(1.08);
}

.story-body {
  margin-bottom: 2.2rem;
}

.lead-story-text {
  font-family: var(--font-editorial);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--gold-light);
  line-height: 1.5;
  margin-bottom: 1.4rem;
  border-left: 2px solid var(--gold-primary);
  padding-left: 1.2rem;
}

/* Interactive Credibility Stat Boxes */
.story-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}

.story-stat-card {
  padding: 1.3rem 1.1rem;
  background: rgba(22, 14, 46, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-smooth), 
              box-shadow var(--transition-smooth), 
              border-color var(--transition-smooth), 
              background var(--transition-smooth);
}

.story-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(
    250px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(223, 183, 108, 0.15),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.story-stat-card:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--gold-primary);
  background: var(--bg-card-hover);
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(223, 183, 108, 0.25);
}

.story-stat-card:hover::before {
  opacity: 1;
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--gold-primary);
  line-height: 1.1;
  margin-bottom: 0.3rem;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.story-stat-card:hover .stat-number {
  transform: scale(1.08);
  color: var(--gold-starlight);
}

.stat-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--transition-fast);
}

.story-stat-card:hover .stat-desc {
  color: var(--text-cream);
}

.story-cta-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   12. INTERACTIVE ASTROLOGY SECTION (Zodiac & Chart Explorer)
   -------------------------------------------------------------------------- */
.interactive-section {
  position: relative;
  background: linear-gradient(180deg, var(--bg-deep-void) 0%, rgba(19, 27, 59, 0.65) 50%, var(--bg-deep-void) 100%);
  transition: background 0.8s ease;
}

.element-filter-bar {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.element-tab {
  padding: 0.55rem 1.3rem;
  background: rgba(22, 14, 46, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.element-tab:hover {
  border-color: var(--gold-primary);
  color: var(--gold-light);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 15px rgba(223, 183, 108, 0.2);
}

.element-tab.active {
  background: linear-gradient(135deg, rgba(223, 183, 108, 0.25), rgba(188, 168, 242, 0.25));
  border-color: var(--gold-primary);
  color: var(--gold-light);
  box-shadow: 0 0 20px rgba(223, 183, 108, 0.3);
}

/* 12 Zodiac Buttons Grid */
.zodiac-interactive-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}

.z-card-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.1rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), 
              box-shadow var(--transition-fast), 
              border-color var(--transition-fast), 
              background var(--transition-fast);
}

.z-card-btn:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: var(--gold-primary);
  background: var(--bg-card-hover);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(223, 183, 108, 0.3);
}

.z-card-btn.active {
  border-color: var(--gold-primary);
  background: linear-gradient(180deg, rgba(38, 24, 76, 0.85) 0%, rgba(22, 14, 46, 0.95) 100%);
  box-shadow: 0 8px 25px rgba(223, 183, 108, 0.3), inset 0 0 15px rgba(223, 183, 108, 0.2);
}

.z-icon {
  font-size: 1.8rem;
  color: var(--gold-light);
  margin-bottom: 0.3rem;
  transition: transform var(--transition-fast), color var(--transition-fast), filter var(--transition-fast);
}

.z-card-btn:hover .z-icon,
.z-card-btn.active .z-icon {
  transform: scale(1.2);
  color: #FFFFFF;
  filter: drop-shadow(0 0 10px rgba(255, 238, 194, 0.9));
}

.z-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-cream);
  margin-bottom: 0.15rem;
}

.z-dates {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Dynamic Detail Showcase Box */
.interactive-detail-box {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-xl);
  padding: 3rem 2.5rem;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-cosmic);
  margin-bottom: 4rem;
  overflow: hidden;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.interactive-detail-box:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(223, 183, 108, 0.2);
}

.detail-box-glow {
  position: absolute;
  top: -100px;
  left: 20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.detail-header-col {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--border-subtle);
}

.detail-glyph-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-primary), var(--lavender-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: var(--bg-deep-void);
  font-weight: 700;
  box-shadow: 0 0 30px rgba(223, 183, 108, 0.5);
  flex-shrink: 0;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  cursor: pointer;
}

.detail-glyph-badge:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 0 40px rgba(223, 183, 108, 0.8);
}

.detail-element-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  margin-bottom: 0.3rem;
}

.detail-sign-name {
  font-size: 1.85rem;
  color: var(--text-pure);
  margin-bottom: 0.2rem;
}

.detail-sign-dates {
  font-size: 0.9rem;
  color: var(--lavender-light);
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-bottom: 2.5rem;
}

/* Interactive Detail Info Cards */
.detail-info-card {
  background: rgba(14, 9, 32, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-smooth), 
              box-shadow var(--transition-smooth), 
              border-color var(--transition-smooth), 
              background var(--transition-smooth);
}

.detail-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(223, 183, 108, 0.12),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.detail-info-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--gold-primary);
  background: rgba(26, 16, 56, 0.9);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6), 0 0 25px rgba(223, 183, 108, 0.2);
}

.detail-info-card:hover::before {
  opacity: 1;
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  color: var(--gold-light);
  transition: transform var(--transition-fast);
}

.detail-info-card:hover .info-card-header {
  transform: translateX(4px);
}

.info-card-header i {
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.detail-info-card:hover .info-card-header i {
  transform: scale(1.2);
  color: #FFFFFF;
}

.info-card-header h4 {
  font-size: 1.05rem;
}

.detail-info-card p {
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.6;
  transition: color var(--transition-fast);
}

.detail-info-card:hover p {
  color: var(--text-cream);
}

.detail-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(223, 183, 108, 0.08);
  border: 1px solid rgba(223, 183, 108, 0.3);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  gap: 1.5rem;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.detail-cta-banner:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 8px 30px rgba(223, 183, 108, 0.2);
}

.banner-text h4 {
  font-size: 1.15rem;
  margin-bottom: 0.2rem;
  color: var(--gold-light);
}

.banner-text p {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* 3 Pillars Accordion */
.interactive-pillars-wrapper {
  max-width: 920px;
  margin: 0 auto;
}

.pillars-title {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

.pillars-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pillar-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform var(--transition-smooth), 
              box-shadow var(--transition-smooth), 
              border-color var(--transition-smooth), 
              background var(--transition-smooth);
}

.pillar-item:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--gold-primary);
  background: var(--bg-card-hover);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(223, 183, 108, 0.2);
}

.pillar-item.active {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.pillar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.6rem;
}

.pillar-icon {
  font-size: 1.4rem;
  color: var(--gold-primary);
  margin-right: 1rem;
  transition: transform var(--transition-fast);
}

.pillar-item:hover .pillar-icon {
  transform: scale(1.25);
}

.pillar-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-cream);
  flex-grow: 1;
  transition: color var(--transition-fast);
}

.pillar-item:hover .pillar-name {
  color: var(--gold-light);
}

.pillar-arrow {
  color: var(--gold-primary);
  transition: transform 0.3s ease;
}

.pillar-item.active .pillar-arrow {
  transform: rotate(180deg);
}

.pillar-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 1.6rem;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}

.pillar-item.active .pillar-content {
  max-height: 200px;
  padding-bottom: 1.4rem;
}

/* --------------------------------------------------------------------------
   13. REVIEWS SECTION (Client Transformation & Praise)
   -------------------------------------------------------------------------- */
.reviews-section {
  position: relative;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Interactive Review Cards */
.review-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.3rem 1.9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(14px);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition-smooth), 
              box-shadow var(--transition-smooth), 
              border-color var(--transition-smooth), 
              background var(--transition-smooth);
}

.review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(223, 183, 108, 0.12),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.review-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.review-card:hover {
  transform: translateY(-8px) scale(1.018);
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-gold-card);
  background: var(--bg-card-hover);
}

.review-card:hover::before {
  opacity: 1;
}

.review-card:hover .review-glow {
  opacity: 0.85;
}

.featured-review {
  border-color: rgba(226, 155, 180, 0.4);
}

.featured-review:hover {
  border-color: var(--pink-primary);
  box-shadow: 0 22px 50px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(226, 155, 180, 0.3);
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.review-stars {
  color: var(--gold-primary);
  font-size: 0.95rem;
  letter-spacing: 2px;
  transition: transform var(--transition-fast);
}

.review-card:hover .review-stars {
  transform: scale(1.05);
}

.review-badge {
  font-size: 0.72rem;
  color: var(--lavender-light);
  background: rgba(188, 168, 242, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
}

.review-quote {
  font-family: var(--font-editorial);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-cream);
  line-height: 1.6;
  margin-bottom: 1.8rem;
  transition: color var(--transition-fast);
}

.review-card:hover .review-quote {
  color: #FFFFFF;
}

.reviewer-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reviewer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-primary), var(--lavender-primary));
  color: var(--bg-deep-void);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.review-card:hover .reviewer-avatar {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(223, 183, 108, 0.6);
}

.reviewer-details h4 {
  font-size: 1rem;
  color: var(--text-cream);
  line-height: 1.2;
}

.reviewer-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. FINAL CTA & BOOKING PREVIEW SECTION
   -------------------------------------------------------------------------- */
.cta-section {
  position: relative;
  padding: 5rem 0 7rem 0;
}

.cta-box {
  position: relative;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #1A0D38 0%, #0D0620 100%);
  border: 1px solid var(--border-active);
  padding: 4.5rem 3rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 50px rgba(223, 183, 108, 0.15);
  overflow: hidden;
  text-align: center;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.cta-box:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.8), 0 0 60px rgba(223, 183, 108, 0.25);
}

.cta-cosmic-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.cta-aurora {
  position: absolute;
  top: -30%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 183, 108, 0.25) 0%, rgba(188, 168, 242, 0.15) 50%, transparent 70%);
  filter: blur(60px);
}

.cta-mandala-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  animation: rotateClockwise 100s linear infinite;
  opacity: 0.6;
}

.cta-content-wrapper {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}

.cta-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  margin-bottom: 1.2rem;
}

.cta-subtitle {
  font-size: 1.15rem;
  color: var(--text-soft);
  margin-bottom: 2.8rem;
}

/* Booking Preview Form */
.cta-booking-form {
  background: rgba(11, 6, 26, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cta-booking-form:hover {
  border-color: rgba(223, 183, 108, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-bottom: 1.8rem;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-light);
  margin-bottom: 0.45rem;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper i {
  position: absolute;
  left: 1.1rem;
  color: var(--lavender-muted);
  font-size: 0.95rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.input-wrapper input,
.input-wrapper select {
  width: 100%;
  padding: 0.85rem 1.1rem 0.85rem 2.8rem;
  background: rgba(22, 14, 46, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-cream);
  font-size: 0.92rem;
  transition: all var(--transition-fast);
}

.input-wrapper select {
  appearance: none;
  cursor: pointer;
}

.select-wrapper::after {
  content: '▼';
  font-size: 0.65rem;
  position: absolute;
  right: 1.1rem;
  color: var(--gold-primary);
  pointer-events: none;
}

.input-wrapper input:hover,
.input-wrapper select:hover {
  border-color: var(--border-active);
  background: rgba(26, 16, 56, 0.9);
}

.input-wrapper input:focus,
.input-wrapper select:focus {
  border-color: var(--gold-primary);
  background: rgba(30, 20, 64, 0.95);
  box-shadow: 0 0 18px rgba(223, 183, 108, 0.35);
}

.input-wrapper input:focus ~ i,
.input-wrapper input:hover ~ i {
  color: var(--gold-light);
  transform: scale(1.1);
}

.input-wrapper input::placeholder {
  color: rgba(158, 147, 190, 0.6);
}

.form-submit-row {
  text-align: center;
  margin-bottom: 1rem;
}

.btn-form-submit {
  width: 100%;
  max-width: 420px;
}

.form-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}

.form-footnote i {
  color: var(--gold-primary);
}

/* --------------------------------------------------------------------------
   15. YOUTUBE & FOOTER SECTION
   -------------------------------------------------------------------------- */
.youtube-bar-section {
  padding: 2rem 0 4rem 0;
}

/* Interactive YouTube Banner Card */
.youtube-card {
  background: linear-gradient(90deg, rgba(22, 14, 46, 0.8) 0%, rgba(45, 15, 30, 0.8) 100%);
  border: 1px solid rgba(255, 77, 77, 0.3);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-smooth), 
              box-shadow var(--transition-smooth), 
              border-color var(--transition-smooth), 
              background var(--transition-smooth);
}

.youtube-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 77, 77, 0.15),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.youtube-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(255, 77, 77, 0.65);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 77, 77, 0.25);
  background: linear-gradient(90deg, rgba(30, 18, 62, 0.9) 0%, rgba(55, 20, 38, 0.9) 100%);
}

.youtube-card:hover::before {
  opacity: 1;
}

.yt-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FF0000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #FFFFFF;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.5);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.youtube-card:hover .yt-icon-circle {
  transform: scale(1.15) rotate(6deg);
  box-shadow: 0 0 35px rgba(255, 0, 0, 0.8);
}

.yt-text-col {
  flex-grow: 1;
}

.yt-tag {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FF8585;
  display: block;
  margin-bottom: 0.2rem;
}

.yt-title {
  font-size: 1.3rem;
  color: var(--text-pure);
  margin-bottom: 0.3rem;
  transition: color var(--transition-fast);
}

.youtube-card:hover .yt-title {
  color: #FFFFFF;
}

.yt-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.yt-btn {
  white-space: nowrap;
  border-color: rgba(255, 77, 77, 0.5);
}

.yt-btn:hover {
  background: rgba(255, 0, 0, 0.25);
  border-color: #FF0000;
  color: #FFF;
}

/* Main Site Footer */
.site-footer {
  background: #040209;
  border-top: 1px solid var(--border-subtle);
  padding: 5rem 0 2rem 0;
  position: relative;
  z-index: 2;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-logo {
  margin-bottom: 1.2rem;
}

.footer-bio {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.social-links-row {
  display: flex;
  gap: 0.8rem;
}

.social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(22, 14, 46, 0.8);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}

.social-link:hover {
  border-color: var(--gold-primary);
  background: var(--gold-primary);
  color: var(--bg-deep-void);
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 0 20px rgba(223, 183, 108, 0.6);
}

.footer-heading {
  font-size: 1.05rem;
  color: var(--text-cream);
  margin-bottom: 1.3rem;
  position: relative;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links li a {
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.footer-links li a:hover {
  color: var(--gold-light);
  transform: translateX(4px);
}

.newsletter-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.newsletter-form {
  position: relative;
}

.newsletter-input-group {
  display: flex;
  align-items: center;
}

.newsletter-input-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(22, 14, 46, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  color: var(--text-cream);
  font-size: 0.88rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.newsletter-input-group input:focus {
  border-color: var(--gold-primary);
  background: rgba(30, 20, 64, 0.95);
}

.newsletter-input-group button {
  padding: 0.75rem 1.3rem;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid rgba(223, 183, 108, 0.1);
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   16. MODALS & FLOATING CONTROLS
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 4, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: linear-gradient(180deg, #180D36 0%, #0D0620 100%);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(223, 183, 108, 0.2);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-card-lg {
  max-width: 680px;
}

.modal-close-btn {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  background: var(--gold-primary);
  color: var(--bg-deep-void);
  transform: rotate(90deg) scale(1.1);
}

.modal-header {
  margin-bottom: 1.8rem;
  text-align: center;
}

.modal-pill {
  font-size: 0.78rem;
  color: var(--gold-light);
  margin-bottom: 0.4rem;
}

.modal-title {
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
}

.modal-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.modal-form-group {
  margin-bottom: 1.2rem;
}

.modal-form-group label {
  display: block;
  font-size: 0.8rem;
  color: var(--gold-light);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.modal-form-group input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(22, 14, 46, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-cream);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.modal-form-group input:focus {
  border-color: var(--gold-primary);
  background: rgba(30, 20, 64, 0.95);
}

.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.modal-submit-btn {
  margin-top: 1.5rem;
}

.story-modal-body h4 {
  color: var(--gold-light);
  font-size: 1.15rem;
  margin: 1.2rem 0 0.5rem 0;
}

.story-modal-body p {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.7;
}

.modal-footer-action {
  margin-top: 1.8rem;
  text-align: center;
}

/* Floating Back to Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(22, 14, 46, 0.85);
  border: 1px solid var(--border-active);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-fast);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.back-to-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top-btn:hover {
  background: var(--gold-primary);
  color: var(--bg-deep-void);
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 0 20px rgba(223, 183, 108, 0.6);
}

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   18. WORDPRESS CORE & POST/PAGE CONTENT STYLING
   -------------------------------------------------------------------------- */
.wp-page-container {
  padding: 8rem 0 5rem 0;
  min-height: 80vh;
}

.wp-page-header {
  margin-bottom: 2.5rem;
}

.wp-page-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 0.8rem;
}

.wp-post-meta {
  display: flex;
  gap: 1.2rem;
  font-size: 0.85rem;
  color: var(--gold-light);
  margin-bottom: 2rem;
}

.wp-post-content {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 3rem;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-cosmic);
  line-height: 1.8;
}

.wp-post-content h2, 
.wp-post-content h3, 
.wp-post-content h4 {
  margin: 2rem 0 1rem 0;
  color: var(--gold-light);
}

.wp-post-content a {
  color: var(--gold-primary);
  text-decoration: underline;
}

.wp-post-content blockquote {
  border-left: 3px solid var(--gold-primary);
  padding-left: 1.5rem;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-light);
  margin: 1.8rem 0;
}

.wp-post-content img {
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
}

.wp-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.wp-post-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-smooth);
}

.wp-post-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-gold-card);
  background: var(--bg-card-hover);
}

.error-404-box {
  text-align: center;
  padding: 6rem 2rem;
}

.error-code {
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--gold-primary);
  line-height: 1;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE MEDIA QUERIES
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 4rem;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-trust-bar {
    justify-content: center;
  }
  .services-grid,
  .reviews-grid,
  .wp-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .story-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .zodiac-interactive-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .nav-menu {
    display: none;
  }
  .mobile-toggle-btn {
    display: flex;
  }
  .btn-nav-cta {
    display: none;
  }
  .services-grid,
  .reviews-grid,
  .benefits-grid,
  .wp-posts-grid {
    grid-template-columns: 1fr;
  }
  .detail-info-grid {
    grid-template-columns: 1fr;
  }
  .detail-cta-banner {
    flex-direction: column;
    text-align: center;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .youtube-card {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 580px) {
  .hero-section {
    padding-top: 7rem;
  }
  .celestial-mandala {
    width: 320px;
    height: 320px;
  }
  .pos-0  { transform: rotate(0deg) translate(140px) rotate(0deg); }
  .pos-1  { transform: rotate(30deg) translate(140px) rotate(-30deg); }
  .pos-2  { transform: rotate(60deg) translate(140px) rotate(-60deg); }
  .pos-3  { transform: rotate(90deg) translate(140px) rotate(-90deg); }
  .pos-4  { transform: rotate(120deg) translate(140px) rotate(-120deg); }
  .pos-5  { transform: rotate(150deg) translate(140px) rotate(-150deg); }
  .pos-6  { transform: rotate(180deg) translate(140px) rotate(-180deg); }
  .pos-7  { transform: rotate(210deg) translate(140px) rotate(-210deg); }
  .pos-8  { transform: rotate(240deg) translate(140px) rotate(-240deg); }
  .pos-9  { transform: rotate(270deg) translate(140px) rotate(-270deg); }
  .pos-10 { transform: rotate(300deg) translate(140px) rotate(-300deg); }
  .pos-11 { transform: rotate(330deg) translate(140px) rotate(-330deg); }

  .zodiac-interactive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .story-stats-grid {
    grid-template-columns: 1fr;
  }
  .cta-box {
    padding: 3rem 1.5rem;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}