/* ═══════════════════════════════════════════════════════════
   KundaliBabaji — Main Website CSS
   ═══════════════════════════════════════════════════════════ */

/* ── GLOBAL SOCIAL PROOF BAR (all pages) ─────────────────── */
.sp-bar {
  display: flex;
  align-items: center;
  gap: 0;
  height: 48px;
  background: rgba(18, 10, 4, 0.97);
  border-bottom: 1px solid rgba(255,153,51,0.35);
  overflow: hidden;
  /* Fixed just below the nav (nav height = 64px) */
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 98;
}

/* Push hero/first-sections down: nav(64) + sp-bar(48) = 112px + extra breathing */
.hero         { padding-top: 160px !important; }
.fmg-hero     { padding-top: 164px !important; }
.k-hero       { margin-top: 48px !important; }   /* k-page already has 64px padding-top */

.sp-bar__label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.9rem 0 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #FF9933;
  border-right: 1px solid rgba(255,153,51,0.2);
  height: 100%;
  background: rgba(255,153,51,0.05);
  white-space: nowrap;
}

.sp-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF9933;
  display: inline-block;
  animation: sp-dot-blink 1.2s ease-in-out infinite;
}
@keyframes sp-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}

.sp-bar__viewport {
  flex: 1;
  overflow: hidden;
  height: 100%;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.sp-bar__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: sp-bar-scroll 45s linear infinite;
}
.sp-bar__track:hover { animation-play-state: paused; }

@keyframes sp-bar-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.sp-bar__card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.4rem 0 0.4rem;
  height: 100%;
  border-right: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.sp-bar__avatar-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255,153,51,0.5);
  background: rgba(255,153,51,0.1);
  position: relative;
}
.sp-bar__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.sp-bar__avatar-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #FF9933;
  font-weight: 700;
}

.sp-bar__content {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  white-space: nowrap;
}
.sp-bar__name  { color: #FF9933; font-weight: 600; }
.sp-bar__city  { color: rgba(255,255,255,0.35); font-size: 0.65rem; }
.sp-bar__sep   { color: rgba(255,255,255,0.2); }
.sp-bar__comment { color: rgba(255,255,255,0.65); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.sp-bar__time {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.2);
  white-space: nowrap;
  padding-left: 0.3rem;
}

@media (max-width: 600px) {
  .sp-bar__comment { max-width: 160px; }
  .sp-bar__time { display: none; }
}

:root {
  --gold:        #D4AF37;
  --gold-dim:    #A8892A;
  --gold-glow:   rgba(212,175,55,0.25);
  --dark-1:      #09090F;
  --dark-2:      #0E0E18;
  --dark-3:      #14141F;
  --dark-4:      #1C1C2A;
  --white:       #F0EDE6;
  --white-dim:   rgba(240,237,230,0.65);
  --border:      rgba(212,175,55,0.15);
  --border-glow: rgba(212,175,55,0.45);
  --radius:      14px;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-display:'Cinzel', serif;
  --font-sans:   'Montserrat', sans-serif;
  --font-devanagari: 'Tiro Devanagari Hindi', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:  var(--dark-1);
  color:       var(--white);
  font-family: var(--font-sans);
  font-size:   16px;
  line-height: 1.6;
  overflow-x:  hidden;
}

a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--gold); }

.container {
  max-width: 1160px;
  margin:    0 auto;
  padding:   0 24px;
}

/* ── STARFIELD ──────────────────────────────────────────── */
#starfield {
  position: fixed;
  inset:    0;
  z-index:  0;
  pointer-events: none;
}

/* ── NAV ────────────────────────────────────────────────── */
.nav {
  position:   fixed;
  top:        0; left: 0; right: 0;
  z-index:    100;
  padding:    0;
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.2) 20%, rgba(212,175,55,0.5) 50%, rgba(212,175,55,0.2) 80%, transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nav.scrolled {
  background:  rgba(7,7,12,0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:  0 4px 32px rgba(0,0,0,0.5);
}
.nav.scrolled::after { opacity: 1; }

.nav-inner {
  max-width:       1200px;
  margin:          0 auto;
  padding:         0 32px;
  height:          64px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
}
.nav-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--font-display);
  font-size:   1.05rem;
  letter-spacing: 3px;
  color:       var(--gold);
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-om {
  font-family: var(--font-devanagari);
  font-size:   1.7rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
}
.nav-logo:hover .nav-logo-om { filter: drop-shadow(0 0 16px rgba(212,175,55,0.7)); }

.nav-links {
  display:    flex;
  align-items:center;
  gap:        4px;
}
.nav-link {
  position: relative;
  font-size:      0.72rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color:          rgba(240,237,230,0.6);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--gold); background: rgba(212,175,55,0.06); }
.nav-link.active { color: var(--gold); }

/* ── Services dropdown ── */
.nav-dropdown {
  position: relative;
  padding-bottom: 16px; /* bridge hover gap between nav bottom and fixed mega panel */
  margin-bottom: -16px;
}
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav-dropdown-toggle .nav-chevron {
  font-size: .55rem;
  opacity: .6;
  transition: transform .25s ease;
}
.nav-dropdown:hover .nav-chevron,
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); opacity: 1; }

.nav-mega {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  background: rgba(9,9,15,0.97);
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.05);
  backdrop-filter: blur(24px);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
/* Align mega to dropdown button position when it's not centered */
.nav-dropdown:hover .nav-mega,
.nav-dropdown.open .nav-mega {
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown:hover .nav-mega,
.nav-dropdown.open .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-mega-header {
  font-size: .6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  padding: 10px 16px 6px;
  opacity: .7;
}
.nav-mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 4px 8px;
}
.nav-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .18s, border-color .18s;
  border: 1px solid transparent;
  cursor: pointer;
}
.nav-mega-item:hover {
  background: rgba(212,175,55,0.07);
  border-color: rgba(212,175,55,0.15);
}
.nav-mega-item.soon { opacity: .45; cursor: default; }
.nav-mega-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background .18s;
}
.nav-mega-item:hover .nav-mega-icon { background: rgba(212,175,55,0.15); }
.nav-mega-text {}
.nav-mega-name {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .5px;
  color: rgba(240,237,230,0.9);
  margin-bottom: 2px;
}
.nav-mega-desc {
  font-size: .7rem;
  color: rgba(240,237,230,0.38);
  line-height: 1.4;
}
.nav-mega-badge {
  font-size: .55rem;
  letter-spacing: 1px;
  background: rgba(212,175,55,0.12);
  color: var(--gold);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
}
.nav-mega-divider {
  height: 1px;
  background: rgba(212,175,55,0.1);
  margin: 4px 14px;
}

/* CTA pill */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--gold) 0%, #b8960c 100%);
  color: #0a0a0f !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  padding: 9px 18px !important;
  border-radius: 24px !important;
  transition: opacity .2s, transform .15s, box-shadow .2s !important;
  box-shadow: 0 0 0 0 rgba(212,175,55,0);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover {
  opacity: .92 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(212,175,55,0.35) !important;
  background: rgba(0,0,0,0) !important;
  background: linear-gradient(135deg, var(--gold) 0%, #b8960c 100%) !important;
}

/* Mobile menu btn */
.nav-menu-btn {
  display:    none;
  background: none;
  border:     1px solid rgba(212,175,55,0.3);
  color:      var(--gold);
  font-size:  1.1rem;
  cursor:     pointer;
  padding:    7px 10px;
  border-radius: 8px;
  line-height: 1;
}

/* Mobile nav drawer */
.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  background: rgba(7,7,12,0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212,175,55,0.15);
  padding: 16px 24px 24px;
  z-index: 200;
  flex-direction: column;
  gap: 2px;
}
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .82rem;
  letter-spacing: 1px;
  color: rgba(240,237,230,0.7);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-mobile-link:hover { background: rgba(212,175,55,0.07); color: var(--gold); }
.nav-mobile-link .nav-mobile-icon { font-size: 1.1rem; }
.nav-mobile-divider { height: 1px; background: rgba(212,175,55,0.1); margin: 8px 0; }
.nav-mobile-cta {
  margin-top: 12px;
  padding: 13px;
  background: linear-gradient(135deg, var(--gold) 0%, #b8960c 100%);
  color: #0a0a0f;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: block; }
  .nav-cta { display: none; }
}
.nav-menu-btn {
  display:    none;
  background: none;
  border:     none;
  color:      var(--gold);
  font-size:  1.4rem;
  cursor:     pointer;
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  position:        relative;
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  z-index:         1;
  padding:         100px 24px 60px;
}

.hero-content {
  position:   relative;
  z-index:    3;
  text-align: center;
  max-width:  700px;
}

.hero-eyebrow {
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            16px;
  font-family:    var(--font-devanagari);
  font-size:      1.1rem;
  color:          var(--gold);
  opacity:        0.8;
  margin-bottom:  24px;
  letter-spacing: 2px;
}
.eyebrow-line {
  display:    block;
  width:      60px;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero-title {
  font-family:   var(--font-serif);
  font-size:     clamp(2.8rem, 6vw, 4.8rem);
  font-weight:   300;
  line-height:   1.15;
  color:         var(--white);
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.hero-sub {
  font-size:     1rem;
  color:         var(--white-dim);
  line-height:   1.75;
  margin-bottom: 36px;
  max-width:     520px;
  margin-left:   auto;
  margin-right:  auto;
}

.hero-stats {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  margin-bottom:   40px;
}
.hero-stat { text-align: center; }
.stat-num {
  display:     block;
  font-family: var(--font-display);
  font-size:   1.8rem;
  color:       var(--gold);
  line-height: 1;
}
.stat-label {
  font-size:   0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:       var(--white-dim);
  opacity:     0.6;
}
.hero-stat-div {
  color:   var(--gold);
  opacity: 0.3;
  font-size: 1.5rem;
}

.hero-cta {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             16px;
}
.btn-hero-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      linear-gradient(135deg, #D4AF37, #A8892A);
  color:           #09090F;
  font-family:     var(--font-display);
  font-size:       0.85rem;
  font-weight:     600;
  letter-spacing:  2px;
  text-transform:  uppercase;
  padding:         16px 36px;
  border-radius:   50px;
  transition:      transform 0.25s, box-shadow 0.25s;
  box-shadow:      0 4px 24px rgba(212,175,55,0.3);
}
.btn-hero-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 36px rgba(212,175,55,0.45);
}
.btn-glyph { font-size: 1.1rem; }

.btn-hero-secondary {
  font-size:      0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--white-dim);
  opacity:        0.6;
  transition:     opacity 0.2s;
}
.btn-hero-secondary:hover { opacity: 1; color: var(--gold); }

/* ── MANDALA ─────────────────────────────────────────────── */
.hero-mandala {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items:center;
  justify-content:center;
  z-index:    1;
  pointer-events: none;
}
.mandala-svg {
  width:   min(700px, 90vw);
  height:  min(700px, 90vw);
  opacity: 0.6;
  animation: mandalaRotate 90s linear infinite;
}
@keyframes mandalaRotate { to { transform: rotate(360deg); } }

/* Om glyph counter-rotates to stay stationary */
.mandala-om {
  animation: mandalaOmStatic 90s linear infinite;
  transform-origin: 200px 200px;
}
@keyframes mandalaOmStatic { to { transform: rotate(-360deg); } }

/* Mandala on sub-pages — sized to fit within the hero section height */
.nm-hero .mandala-svg,
.cz-hero .mandala-svg,
.fmg-hero .mandala-svg {
  width:   min(360px, 70vw);
  height:  min(360px, 70vw);
  opacity: 1;
}

/* ॐ watermark — sits above everything at near-invisible opacity so it's always visible but never covers text */
.hero-om-water {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(140px, 22vw, 200px);
  font-family: 'Tiro Devanagari Hindi', serif;
  color: rgba(212, 175, 55, 0.10);
  pointer-events: none;
  user-select: none;
  z-index: 10;
  line-height: 1;
  white-space: nowrap;
}

/* Hero headings — always pop against the animated background */
.nm-hero h1, .nm-hero-sub,
.cz-hero h1, .cz-hero-sub,
.fmg-hero__title, .fmg-hero__hindi, .fmg-hero__sub {
  text-shadow: 0 0 40px rgba(0,0,0,0.95), 0 2px 8px rgba(0,0,0,0.8);
}

/* ── PLANET RING ─────────────────────────────────────────── */
.planet-ring {
  position:   absolute;
  inset:      0;
  z-index:    2;
  pointer-events: none;
}
.planet-float {
  position:   absolute;
  top:        50%;
  left:       50%;
  font-size:  1.1rem;
  color:      var(--gold);
  opacity:    0.4;
  transform-origin: 0 0;
  animation:  planetOrbit var(--dur, 25s) linear infinite;
  --tx:       calc(cos(var(--ang)) * var(--r, 200px));
  --ty:       calc(sin(var(--ang)) * var(--r, 200px));
}
@keyframes planetOrbit {
  from { transform: rotate(0deg) translateX(var(--r, 200px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r, 200px)) rotate(-360deg); }
}

/* ── SCROLL INDICATOR ────────────────────────────────────── */
.scroll-indicator {
  position:        absolute;
  bottom:          32px;
  left:            50%;
  transform:       translateX(-50%);
  width:           24px;
  height:          40px;
  border:          1px solid var(--border-glow);
  border-radius:   12px;
  display:         flex;
  justify-content: center;
  padding-top:     6px;
  z-index:         10;
}
.scroll-dot {
  width:      4px;
  height:     8px;
  background: var(--gold);
  border-radius: 2px;
  animation:  scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  70%       { transform: translateY(14px); opacity: 0.3; }
}

/* ── SECTIONS ────────────────────────────────────────────── */
.section { position: relative; z-index: 1; padding: 100px 0; }
.section-label {
  text-align:     center;
  font-size:      0.72rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        0.7;
  margin-bottom:  14px;
}
.section-title {
  font-family:   var(--font-serif);
  font-size:     clamp(2rem, 4vw, 3rem);
  font-weight:   400;
  text-align:    center;
  line-height:   1.2;
  margin-bottom: 12px;
}
.section-sub {
  text-align:    center;
  color:         var(--white-dim);
  font-size:     0.92rem;
  max-width:     500px;
  margin:        0 auto 60px;
  line-height:   1.7;
}

/* ── SERVICES ────────────────────────────────────────────── */
.services-section { background: var(--dark-2); }
.services-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
}
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  position:      relative;
  background:    var(--dark-3);
  border:        1px solid var(--border);
  border-radius: 18px;
  padding:       28px 24px 24px;
  overflow:      hidden;
  transition:    transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor:        pointer;
}
.service-card:hover {
  transform:    translateY(-6px);
  border-color: var(--border-glow);
  box-shadow:   0 0 40px rgba(212,175,55,0.12);
}

/* ── COMPACT GOLD SERVICE CARDS (sc2) ───────────────────── */
.sc2-card {
  position:       relative;
  display:        flex;
  flex-direction: column;
  background:     linear-gradient(135deg, rgba(212,175,55,0.06) 0%, rgba(20,20,32,0.95) 60%);
  border:         1px solid rgba(212,175,55,0.32);
  border-radius:  18px;
  padding:        26px 24px 24px;
  overflow:       hidden;
  cursor:         pointer;
  transition:     transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sc2-card:hover {
  transform:    translateY(-5px);
  border-color: rgba(212,175,55,0.6);
  box-shadow:   0 0 50px rgba(212,175,55,0.12), 0 12px 40px rgba(0,0,0,0.35);
}
.sc2-card--soon {
  opacity: 0.72;
}
.sc2-card--soon:hover {
  opacity: 0.88;
}

.sc2-top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   18px;
}
.sc2-badge {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 3px;
  color:          var(--gold);
  background:     rgba(212,175,55,0.1);
  border:         1px solid rgba(212,175,55,0.28);
  border-radius:  20px;
  padding:        4px 12px;
}
.sc2-symbol {
  font-family: var(--font-serif);
  font-size:   1.8rem;
  color:       rgba(212,175,55,0.75);
  line-height: 1;
  filter:      drop-shadow(0 0 8px rgba(212,175,55,0.3));
}
.sc2-title {
  font-family:   var(--font-display);
  font-size:     1.05rem;
  font-weight:   400;
  color:         var(--white);
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  line-height:   1.3;
}
.sc2-desc {
  font-family:   var(--font-serif);
  font-size:     0.92rem;
  color:         var(--white-dim);
  line-height:   1.6;
  margin-bottom: 18px;
  flex:          1;
}
.sc2-chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 22px;
}
.sc2-chip {
  font-family:    var(--font-sans);
  font-size:      0.65rem;
  letter-spacing: 0.3px;
  color:          rgba(212,175,55,0.85);
  background:     rgba(212,175,55,0.07);
  border:         1px solid rgba(212,175,55,0.2);
  border-radius:  14px;
  padding:        4px 11px;
  transition:     background 0.2s, border-color 0.2s;
}
.sc2-card:hover .sc2-chip {
  background:   rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.38);
}
.sc2-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         12px;
  margin-top:  auto;
  flex-wrap:   wrap;
}
.sc2-price {
  font-family:   var(--font-display);
  font-size:     1.25rem;
  color:         var(--gold);
  letter-spacing: 1px;
  text-shadow:   0 0 20px rgba(212,175,55,0.3);
  white-space:   nowrap;
}
.sc2-price-note {
  display:        block;
  font-family:    var(--font-sans);
  font-size:      0.6rem;
  letter-spacing: 1px;
  color:          var(--white-dim);
  opacity:        0.5;
  margin-top:     2px;
  font-weight:    400;
}
.sc2-btn {
  font-family:    var(--font-display);
  font-size:      0.65rem;
  letter-spacing: 1.5px;
  color:          #09090F;
  background:     linear-gradient(135deg, #D4AF37, #B8962E);
  border-radius:  5px;
  padding:        10px 18px;
  white-space:    nowrap;
  transition:     transform 0.2s, box-shadow 0.2s;
  position:       relative;
  overflow:       hidden;
}
.sc2-btn::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(108deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform:  translateX(-120%);
  transition: transform 0.45s ease;
}
.sc2-btn:hover::after { transform: translateX(120%); }
.sc2-btn:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,175,55,0.4);
}
.sc2-soon-tag {
  font-family:    var(--font-display);
  font-size:      0.6rem;
  letter-spacing: 2px;
  color:          rgba(212,175,55,0.45);
  border:         1px solid rgba(212,175,55,0.2);
  border-radius:  5px;
  padding:        8px 14px;
  white-space:    nowrap;
}

/* ── FEATURED KUNDALI CARD ───────────────────────────────── */
.scf-card {
  grid-column:  1 / -1;
  position:     relative;
  display:      flex;
  flex-direction: row;
  gap:          0;
  background:   linear-gradient(135deg, rgba(212,175,55,0.07) 0%, rgba(20,20,32,0.95) 55%, rgba(10,10,20,0.98) 100%);
  border:       1px solid rgba(212,175,55,0.45);
  border-radius: 20px;
  padding:      40px 44px;
  overflow:     hidden;
  cursor:       pointer;
  box-shadow:   0 0 0 1px rgba(212,175,55,0.12), 0 0 60px rgba(212,175,55,0.08);
  animation:    scfPulse 4s ease-in-out infinite;
  transition:   transform 0.3s ease, box-shadow 0.3s ease;
}
.scf-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.6), 0 0 80px rgba(212,175,55,0.16), 0 20px 60px rgba(0,0,0,0.4);
}
@keyframes scfPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212,175,55,0.35), 0 0 40px rgba(212,175,55,0.07); }
  50%       { box-shadow: 0 0 0 1px rgba(212,175,55,0.55), 0 0 70px rgba(212,175,55,0.14), 0 0 120px rgba(212,175,55,0.05); }
}

/* shimmer sweep */
.scf-shimmer {
  position:   absolute;
  inset:      0;
  background: linear-gradient(108deg, transparent 35%, rgba(212,175,55,0.06) 50%, transparent 65%);
  animation:  scfShimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index:    0;
}
@keyframes scfShimmer {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}

/* left pane */
.scf-left {
  flex:          3;
  padding-right: 48px;
  border-right:  1px solid rgba(212,175,55,0.14);
  display:       flex;
  flex-direction: column;
  position:      relative;
  z-index:       1;
}
.scf-badge {
  display:        inline-block;
  font-family:    var(--font-display);
  font-size:      0.6rem;
  letter-spacing: 3px;
  color:          var(--gold);
  background:     rgba(212,175,55,0.1);
  border:         1px solid rgba(212,175,55,0.3);
  border-radius:  20px;
  padding:        5px 16px;
  width:          fit-content;
  margin-bottom:  20px;
}
.scf-title {
  font-family:   var(--font-display);
  font-size:     clamp(1.8rem, 3vw, 2.6rem);
  font-weight:   400;
  color:         var(--white);
  letter-spacing: 2px;
  line-height:   1.1;
  margin-bottom: 14px;
}
.scf-desc {
  font-family:   var(--font-serif);
  font-size:     1.05rem;
  color:         var(--white-dim);
  line-height:   1.65;
  margin-bottom: 24px;
  max-width:     480px;
}

/* feature chips */
.scf-chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 32px;
}
.scf-chip {
  font-family:    var(--font-sans);
  font-size:      0.72rem;
  letter-spacing: 0.4px;
  color:          rgba(212,175,55,0.9);
  background:     rgba(212,175,55,0.07);
  border:         1px solid rgba(212,175,55,0.22);
  border-radius:  20px;
  padding:        6px 14px;
  transition:     background 0.2s, border-color 0.2s, transform 0.2s;
}
.scf-chip:hover {
  background:   rgba(212,175,55,0.15);
  border-color: rgba(212,175,55,0.5);
  transform:    translateY(-1px);
}

/* bottom: price + cta */
.scf-bottom {
  display:     flex;
  align-items: center;
  gap:         32px;
  margin-top:  auto;
  flex-wrap:   wrap;
}
.scf-price-block {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.scf-amount {
  font-family: var(--font-display);
  font-size:   2.6rem;
  color:       var(--gold);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0 40px rgba(212,175,55,0.45);
}
.scf-price-note {
  font-size:  0.7rem;
  color:      var(--white-dim);
  opacity:    0.55;
  letter-spacing: 0.5px;
}

/* gold CTA button */
.scf-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             12px;
  background:      linear-gradient(135deg, #D4AF37 0%, #B8962E 100%);
  color:           #09090F;
  font-family:     var(--font-display);
  font-size:       0.78rem;
  letter-spacing:  2.5px;
  font-weight:     600;
  padding:         16px 32px;
  border-radius:   6px;
  position:        relative;
  overflow:        hidden;
  transition:      transform 0.25s ease, box-shadow 0.25s ease;
  white-space:     nowrap;
}
.scf-cta::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(108deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform:  translateX(-120%);
  transition: transform 0.5s ease;
}
.scf-cta:hover::after  { transform: translateX(120%); }
.scf-cta:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 32px rgba(212,175,55,0.45);
}
.scf-cta-arrow {
  font-size:  1rem;
  transition: transform 0.25s ease;
}
.scf-cta:hover .scf-cta-arrow { transform: translateX(4px); }

/* right pane — chart */
.scf-right {
  flex:            2;
  padding-left:    48px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  position:        relative;
  z-index:         1;
}
.scf-chart-svg {
  width:      100%;
  max-width:  260px;
  filter:     drop-shadow(0 0 24px rgba(212,175,55,0.18));
  animation:  scfChartSpin 90s linear infinite;
}
@keyframes scfChartSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* ॐ counter-rotates so it stays upright while chart spins */
.scf-om-glyph {
  animation: scfOmStatic 90s linear infinite;
  transform-origin: 140px 140px;
}
@keyframes scfOmStatic {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── Kundali page background chart ─────────────────────────── */
.k-chart-bg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  width: min(500px, 70vw);
  height: min(500px, 70vw);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
}
.k-chart-bg-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 40px rgba(212,175,55,0.08));
  animation: scfChartSpin 120s linear infinite;
}
.k-chart-bg-om {
  animation: scfOmStatic 120s linear infinite;
  transform-origin: 140px 140px;
}
.scf-chart-label {
  margin-top:     16px;
  font-family:    var(--font-sans);
  font-size:      0.65rem;
  letter-spacing: 2px;
  color:          rgba(212,175,55,0.4);
  text-transform: uppercase;
  text-align:     center;
}

/* responsive */
@media (max-width: 900px) {
  .scf-card    { flex-direction: column; padding: 32px 28px; }
  .scf-left    { padding-right: 0; border-right: none; border-bottom: 1px solid rgba(212,175,55,0.14); padding-bottom: 32px; margin-bottom: 32px; }
  .scf-right   { padding-left: 0; }
  .scf-chart-svg { max-width: 180px; }
}
@media (max-width: 500px) {
  .scf-card    { padding: 24px 20px; }
  .scf-title   { font-size: 1.7rem; }
  .scf-bottom  { flex-direction: column; align-items: flex-start; gap: 16px; }
  .scf-cta     { width: 100%; justify-content: center; }
}

.sc-glow {
  position:   absolute;
  top:        -40px; left: -40px;
  width:      160px; height: 160px;
  background: radial-gradient(circle, rgba(212,175,55,0.08), transparent 70%);
  pointer-events: none;
  opacity:    0;
  transition: opacity 0.4s ease;
}
.service-card:hover .sc-glow { opacity: 1; }

.sc-number {
  font-family:    monospace;
  font-size:      0.65rem;
  letter-spacing: 3px;
  color:          var(--gold);
  opacity:        0.5;
  margin-bottom:  14px;
}
.sc-icon   { font-size: 2rem; margin-bottom: 12px; display: block; }
.sc-title  {
  font-family:   var(--font-serif);
  font-size:     1.25rem;
  font-weight:   600;
  margin-bottom: 10px;
  color:         var(--white);
}
.sc-desc {
  font-size:     0.84rem;
  color:         var(--white-dim);
  line-height:   1.65;
  margin-bottom: 16px;
}
.sc-features {
  list-style: none;
  margin-bottom: 20px;
}
.sc-features li {
  font-size:   0.78rem;
  color:       var(--white-dim);
  padding:     4px 0;
  display:     flex;
  gap:         8px;
}
.sc-features li::before {
  content: '✦';
  color:   var(--gold);
  opacity: 0.6;
  font-size: 0.6rem;
  margin-top: 3px;
  flex-shrink: 0;
}
.sc-price {
  font-family:   var(--font-display);
  font-size:     1.3rem;
  color:         var(--gold);
  margin-bottom: 16px;
}
.sc-free { color: #4CAF50; }
.sc-price-sub {
  font-family: var(--font-sans);
  font-size:   0.7rem;
  color:       var(--white-dim);
  font-weight: 400;
  margin-left: 6px;
}
.sc-btn {
  display:        inline-block;
  font-size:      0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--gold);
  border:         1px solid var(--border-glow);
  padding:        10px 20px;
  border-radius:  50px;
  transition:     background 0.2s, color 0.2s;
}
.sc-btn:hover   { background: var(--gold); color: var(--dark-1); }
.sc-btn--soon   { opacity: 0.4; pointer-events: none; }

/* ── WHY SECTION ─────────────────────────────────────────── */
.why-section { background: var(--dark-1); }
.why-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}
@media (max-width: 800px) {
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
}
.why-body {
  color:         var(--white-dim);
  font-size:     0.93rem;
  line-height:   1.85;
  margin-bottom: 18px;
}
.why-stats {
  display:    flex;
  gap:        32px;
  margin-top: 36px;
}
.why-stat    { text-align: center; }
.ws-num      { display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--gold); }
.ws-label    { font-size: 0.7rem; color: var(--white-dim); letter-spacing: 1px; }

/* ── KUNDALI PREVIEW CHART ───────────────────────────────── */
.kundali-preview {
  background:    var(--dark-3);
  border:        1px solid var(--border);
  border-radius: 18px;
  padding:       28px;
}
.kp-label {
  font-size:      0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        0.6;
  text-align:     center;
  margin-bottom:  20px;
}
.kp-chart {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:    repeat(4, 1fr);
  gap:                   2px;
  aspect-ratio:          1;
  background:            var(--border);
  border:                1px solid var(--border-glow);
  border-radius:         8px;
  overflow:              hidden;
  position:              relative;
}
.kp-house {
  background:      var(--dark-4);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.7rem;
  color:           var(--gold);
  opacity:         0.7;
  transition:      background 0.2s, opacity 0.2s;
  cursor:          default;
}
.kp-house:hover { background: rgba(212,175,55,0.08); opacity: 1; }

/* North Indian chart grid positions */
.kp-h12 { grid-area: 1/1/2/2; }
.kp-h1  { grid-area: 1/2/2/3; }
.kp-h2  { grid-area: 1/3/2/4; }
.kp-h3  { grid-area: 1/4/2/5; }
.kp-h11 { grid-area: 2/1/3/2; }
.kp-h4  { grid-area: 2/4/3/5; }
.kp-h10 { grid-area: 3/1/4/2; }
.kp-h5  { grid-area: 3/4/4/5; }
.kp-h9  { grid-area: 4/1/5/2; }
.kp-h8  { grid-area: 4/2/5/3; }
.kp-h7  { grid-area: 4/3/5/4; }
.kp-h6  { grid-area: 4/4/5/5; }
.kp-center {
  grid-area:       2/2/4/4;
  background:      var(--dark-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid var(--border-glow);
}
.kp-center-text {
  font-family: var(--font-devanagari);
  font-size:   1.1rem;
  color:       var(--gold);
  text-align:  center;
  line-height: 1.4;
}
.kp-hint {
  font-size:   0.7rem;
  color:       var(--white-dim);
  opacity:     0.5;
  text-align:  center;
  margin-top:  14px;
  font-style:  italic;
}

/* ── 9 GRAHAS GRID ───────────────────────────────────────── */
.grahas-section { background: var(--dark-2); }
.grahas-grid {
  display:               grid;
  grid-template-columns: repeat(9, 1fr);
  gap:                   12px;
}
@media (max-width: 1100px) { .grahas-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 600px)  { .grahas-grid { grid-template-columns: repeat(3, 1fr); } }

.graha-card {
  background:    var(--dark-3);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       18px 10px;
  text-align:    center;
  transition:    transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor:        pointer;
}
.graha-card:hover {
  transform:    translateY(-4px);
  border-color: var(--border-glow);
  box-shadow:   0 0 24px rgba(212,175,55,0.1);
}
.gc-glyph {
  font-size:     1.8rem;
  color:         var(--gold);
  margin-bottom: 8px;
  display:       block;
}
.gc-sanskrit {
  font-family:   var(--font-devanagari);
  font-size:     0.95rem;
  color:         var(--gold);
  opacity:       0.8;
  margin-bottom: 2px;
}
.gc-name {
  font-family:   var(--font-serif);
  font-size:     0.9rem;
  font-weight:   600;
  margin-bottom: 6px;
  color:         var(--white);
}
.gc-governs {
  font-size:   0.62rem;
  color:       var(--white-dim);
  line-height: 1.5;
  opacity:     0.7;
}
.gc-day {
  font-size:   0.6rem;
  color:       var(--gold);
  opacity:     0.5;
  margin-top:  6px;
  font-style:  italic;
}

/* ── TESTIMONIALS ────────────────────────────────────────── */
.testimonials-section { background: var(--dark-1); }
.testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
}
@media (max-width: 800px) { .testimonials-grid { grid-template-columns: 1fr; } }

.tcard {
  background:    var(--dark-3);
  border:        1px solid var(--border);
  border-radius: 18px;
  padding:       28px 24px;
  transition:    border-color 0.3s, transform 0.3s;
}
.tcard:hover { border-color: var(--border-glow); transform: translateY(-3px); }
.tcard-stars   { color: var(--gold); margin-bottom: 14px; letter-spacing: 2px; }
.tcard-text    { font-family: var(--font-serif); font-size: 0.95rem; font-style: italic; line-height: 1.8; color: var(--white-dim); margin-bottom: 16px; }
.tcard-author  { font-size: 0.72rem; letter-spacing: 1px; color: var(--gold); opacity: 0.6; text-transform: uppercase; }

/* ── CTA SECTION ─────────────────────────────────────────── */
.cta-section {
  position:        relative;
  padding:         120px 24px;
  text-align:      center;
  background:      var(--dark-2);
  overflow:        hidden;
  z-index:         1;
}
.cta-om {
  position:    absolute;
  top:         50%;
  left:        50%;
  transform:   translate(-50%, -50%);
  font-family: var(--font-devanagari);
  font-size:   clamp(200px, 30vw, 380px);
  color:       var(--gold);
  opacity:     0.03;
  pointer-events: none;
  animation:   omPulse 8s ease-in-out infinite;
  line-height: 1;
}
@keyframes omPulse {
  0%, 100% { opacity: 0.03; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.055; transform: translate(-50%, -50%) scale(1.04); }
}
.cta-title {
  font-family:   var(--font-serif);
  font-size:     clamp(2rem, 4vw, 3.2rem);
  font-weight:   300;
  line-height:   1.3;
  margin-bottom: 20px;
  position:      relative;
  z-index:       1;
}
.cta-sub {
  color:         var(--white-dim);
  font-size:     0.95rem;
  line-height:   1.75;
  margin-bottom: 40px;
  position:      relative;
  z-index:       1;
}
.btn-cta {
  display:        inline-block;
  font-family:    var(--font-display);
  font-size:      0.9rem;
  font-weight:    600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background:     linear-gradient(135deg, #D4AF37, #A8892A);
  color:          var(--dark-1);
  padding:        18px 44px;
  border-radius:  50px;
  box-shadow:     0 6px 32px rgba(212,175,55,0.35);
  transition:     transform 0.25s, box-shadow 0.25s;
  position:       relative;
  z-index:        1;
}
.btn-cta:hover {
  transform:  translateY(-3px);
  box-shadow: 0 12px 48px rgba(212,175,55,0.5);
}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
  background:  var(--dark-1);
  border-top:  1px solid var(--border);
  padding:     60px 0 32px;
  position:    relative;
  z-index:     1;
}
.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   48px;
  margin-bottom:         48px;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
.footer-brand .footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.footer-tagline { font-family: var(--font-serif); font-style: italic; color: var(--gold); opacity: 0.7; margin-bottom: 10px; }
.footer-desc    { font-size: 0.8rem; color: var(--white-dim); opacity: 0.6; line-height: 1.7; }
.footer-links-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title { font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); opacity: 0.6; margin-bottom: 6px; }
.footer-links-col a { font-size: 0.82rem; color: var(--white-dim); opacity: 0.7; transition: color 0.2s, opacity 0.2s; }
.footer-links-col a:hover { color: var(--gold); opacity: 1; }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; text-align: center; font-size: 0.78rem; color: var(--white-dim); opacity: 0.5; }

/* ── VISUAL IMAGE EFFECTS ────────────────────────────────── */

/* Atmospheric horizon glow — mimics Earth from space (image 2) */
.hero::before {
  content: '';
  position: absolute;
  bottom: -8%;
  left: -10%;
  right: -10%;
  height: 55%;
  background: radial-gradient(ellipse 75% 100% at 50% 100%,
    rgba(35, 75, 210, 0.22) 0%,
    rgba(18, 45, 145, 0.12) 38%,
    rgba(8, 18, 75, 0.06) 62%,
    transparent 75%
  );
  z-index: 1;
  pointer-events: none;
}

/* Night Earth gold divider — mimics city lights from orbit (image 3) */
.cosmic-earth-divider {
  position: relative;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent 5%, rgba(212,175,55,0.2) 30%, rgba(212,175,55,0.35) 50%, rgba(212,175,55,0.2) 70%, transparent 95%);
  overflow: visible;
}
.cosmic-earth-divider::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10%;
  right: -10%;
  height: 160px;
  background:
    radial-gradient(ellipse 90% 100% at 20% 100%, rgba(212,175,55,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 100% at 50% 100%, rgba(212,175,55,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 90% 100% at 80% 100%, rgba(212,175,55,0.07) 0%, transparent 55%);
  pointer-events: none;
}
.cosmic-earth-divider::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-image:
    radial-gradient(circle 1.5px at 8%  40%, rgba(212,175,55,0.55) 0%, transparent 100%),
    radial-gradient(circle 1px  at 14% 70%, rgba(212,175,55,0.40) 0%, transparent 100%),
    radial-gradient(circle 1px  at 18% 25%, rgba(212,175,55,0.45) 0%, transparent 100%),
    radial-gradient(circle 2px  at 23% 55%, rgba(212,175,55,0.60) 0%, transparent 100%),
    radial-gradient(circle 1px  at 28% 80%, rgba(212,175,55,0.35) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 33% 35%, rgba(212,175,55,0.50) 0%, transparent 100%),
    radial-gradient(circle 1px  at 38% 65%, rgba(212,175,55,0.40) 0%, transparent 100%),
    radial-gradient(circle 2px  at 42% 20%, rgba(212,175,55,0.55) 0%, transparent 100%),
    radial-gradient(circle 1px  at 46% 75%, rgba(212,175,55,0.35) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 50% 45%, rgba(212,175,55,0.60) 0%, transparent 100%),
    radial-gradient(circle 1px  at 55% 30%, rgba(212,175,55,0.45) 0%, transparent 100%),
    radial-gradient(circle 2px  at 59% 68%, rgba(212,175,55,0.50) 0%, transparent 100%),
    radial-gradient(circle 1px  at 63% 22%, rgba(212,175,55,0.38) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 68% 58%, rgba(212,175,55,0.55) 0%, transparent 100%),
    radial-gradient(circle 1px  at 73% 38%, rgba(212,175,55,0.42) 0%, transparent 100%),
    radial-gradient(circle 2px  at 77% 72%, rgba(212,175,55,0.60) 0%, transparent 100%),
    radial-gradient(circle 1px  at 82% 28%, rgba(212,175,55,0.40) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 87% 62%, rgba(212,175,55,0.48) 0%, transparent 100%),
    radial-gradient(circle 1px  at 92% 45%, rgba(212,175,55,0.35) 0%, transparent 100%);
  pointer-events: none;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: block; }
  .hero { padding: 90px 20px 60px; }
  .hero-stats { flex-wrap: wrap; gap: 12px; }
  .planet-float { display: none; }
  .section { padding: 60px 0; }
  .why-stats { flex-direction: column; gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM UPGRADES — Navigation, Cards, Effects, Sections
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL PREMIUM FORM INPUTS — shared across all pages
   ═══════════════════════════════════════════════════════════════ */

/* Base token — every input/select/textarea across all pages */
input[type="text"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 10px;
  color: rgba(240,237,230,0.92);
  font-family: var(--font-sans, 'Montserrat', sans-serif);
  font-size: 0.9rem;
  padding: 12px 16px;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  color-scheme: dark;
}
input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(212,175,55,0.7);
  background: rgba(212,175,55,0.05);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}
input::placeholder,
textarea::placeholder { color: rgba(240,237,230,0.3); }

/* Select arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
select option {
  background: #0e0e18;
  color: rgba(240,237,230,0.9);
}

/* Date / time calendar icon tint */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(80%) sepia(40%) saturate(300%) hue-rotate(5deg);
  cursor: pointer;
  opacity: .7;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Label consistency across pages */
label, .kf-label, .nm-label, .cz-label, .fmg-label {
  display: block;
  font-size: .72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(212,175,55,0.8);
  margin-bottom: 7px;
  font-family: var(--font-sans, 'Montserrat', sans-serif);
}

/* Form group spacing */
.kf-group, .nm-field, .cz-field, .fmg-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Active nav link underline ─────────────────────────────── */
.nav-links .nav-link.active {
  color: var(--gold);
  position: relative;
}
.nav-links .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
}

/* ── Hero nebula glow enhancement ──────────────────────────── */
.hero::after {
  content: '';
  position: absolute;
  top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(212,175,55,0.055) 0%,
    rgba(180,130,40,0.03) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: nebulaBreath 8s ease-in-out infinite;
}
@keyframes nebulaBreath {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%       { opacity: 0.7; transform: translateX(-50%) scale(1.08); }
}

/* ── Hero trust bar ─────────────────────────────────────────── */
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid rgba(212,175,55,0.1);
  padding-top: 24px;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  font-size: .7rem;
  letter-spacing: 1px;
  color: rgba(240,237,230,0.45);
  white-space: nowrap;
  border-right: 1px solid rgba(212,175,55,0.1);
}
.hero-trust-item:last-child { border-right: none; }
.hero-trust-icon { font-size: .85rem; color: var(--gold); opacity: .7; }
@media (max-width: 700px) {
  .hero-trust-item { padding: 6px 12px; border-right: none; border-bottom: 1px solid rgba(212,175,55,0.08); width: 100%; justify-content: center; }
  .hero-trust-item:last-child { border-bottom: none; }
}

/* ── Section label premium treatment ────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: .65rem;
  letter-spacing: 4px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: .8;
}

/* ── Service card glassmorphism uplift ──────────────────────── */
.sc2-card {
  background: linear-gradient(145deg, rgba(212,175,55,0.07) 0%, rgba(14,14,24,0.96) 50%, rgba(9,9,15,0.98) 100%) !important;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
/* Top corner gold accent */
.sc2-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(ellipse at top right, rgba(212,175,55,0.12), transparent 65%);
  pointer-events: none;
  transition: opacity .3s;
}
.sc2-card:hover::before { opacity: 1.5; }
/* Animated bottom-left glow on hover */
.sc2-card::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(212,175,55,0.1), transparent 65%);
  opacity: 0;
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.sc2-card:hover::after { opacity: 1; transform: scale(1.15); }

/* Enhanced featured card */
.scf-card::before {
  background: radial-gradient(ellipse at top right, rgba(212,175,55,0.15), transparent 55%),
              radial-gradient(ellipse at bottom left, rgba(120,80,200,0.08), transparent 55%);
}

/* ── Graha card premium hover ───────────────────────────────── */
.graha-card {
  background: linear-gradient(145deg, rgba(212,175,55,0.05) 0%, var(--dark-3) 100%) !important;
  position: relative;
  overflow: hidden;
}
.graha-card::before {
  content: attr(data-graha);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.gc-glyph {
  transition: transform .3s, filter .3s;
}
.graha-card:hover .gc-glyph {
  transform: scale(1.25);
  filter: drop-shadow(0 0 16px rgba(212,175,55,0.6));
}
.graha-card:hover {
  background: linear-gradient(145deg, rgba(212,175,55,0.12) 0%, rgba(20,20,32,0.98) 100%) !important;
  box-shadow: 0 0 32px rgba(212,175,55,0.14), 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* ── Testimonials premium upgrade ───────────────────────────── */
.tcard {
  background: linear-gradient(145deg, rgba(212,175,55,0.05) 0%, rgba(14,14,24,0.97) 100%) !important;
  position: relative;
  overflow: hidden;
}
.tcard::before {
  content: '"';
  position: absolute;
  top: -10px; left: 18px;
  font-family: var(--font-serif);
  font-size: 6rem;
  color: var(--gold);
  opacity: .07;
  line-height: 1;
  pointer-events: none;
  font-style: italic;
}
.tcard-stars {
  letter-spacing: 4px;
  font-size: .9rem;
  text-shadow: 0 0 12px rgba(212,175,55,0.4);
}
.tcard-text {
  position: relative;
  z-index: 1;
}
/* Author pill */
.tcard-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .7rem;
  letter-spacing: .5px;
  color: rgba(212,175,55,0.6);
  text-transform: none;
}
.tcard-author::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: rgba(212,175,55,0.35);
  flex-shrink: 0;
}

/* ── CTA section enhancement ────────────────────────────────── */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%,
    rgba(212,175,55,0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.cta-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3) 30%, rgba(212,175,55,0.5) 50%, rgba(212,175,55,0.3) 70%, transparent);
}

/* ── Premium section separators ─────────────────────────────── */
.section {
  position: relative;
}
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.1) 30%, rgba(212,175,55,0.18) 50%, rgba(212,175,55,0.1) 70%, transparent);
}

/* ── Services section label upgrade ─────────────────────────── */
.services-section .section-label,
.testimonials-section .section-label,
.grahas-section .section-label {
  margin-bottom: 12px;
}
.services-section .section-title::after,
.testimonials-section .section-title::after,
.grahas-section .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 1.5px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
}

/* ── Why section stats premium ───────────────────────────────── */
.why-stat {
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 12px;
  padding: 16px 20px;
  transition: border-color .2s, background .2s;
}
.why-stat:hover {
  border-color: rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.09);
}
.ws-num { font-size: 2rem !important; }

/* ── Footer upgrades ─────────────────────────────────────────── */
.footer {
  border-top: 1px solid rgba(212,175,55,0.12);
}
.footer::before {
  content: '';
  display: block;
  width: 60px; height: 1.5px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateY(-1px);
}

/* ── Scroll-reveal fade-up ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── New Reading bars (numerology, chinese-zodiac) ──────────────────────── */
.nm-new-reading, .cz-new-reading {
  text-align: center;
  padding: 36px 24px;
  border-top: 1px solid rgba(212,175,55,0.12);
  margin-top: 12px;
}
.nm-new-reading-inner, .cz-new-reading-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}
.nm-new-reading-label, .cz-new-reading-label {
  font-family: var(--font-sans);
  font-size: .78rem;
  color: rgba(240,237,230,0.4);
  letter-spacing: .5px;
}
.nm-new-reading-btn, .cz-new-reading-btn {
  background: rgba(212,175,55,0.09);
  border: 1px solid rgba(212,175,55,0.32);
  color: var(--gold);
  padding: 11px 24px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.nm-new-reading-btn:hover, .cz-new-reading-btn:hover {
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.6);
  transform: translateY(-1px);
}
.nm-new-reading-link, .cz-new-reading-link {
  font-family: var(--font-sans);
  font-size: .72rem;
  color: rgba(212,175,55,0.6);
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(212,175,55,0.2);
  padding-bottom: 1px;
  transition: color .2s;
}
.nm-new-reading-link:hover, .cz-new-reading-link:hover { color: var(--gold); }

/* ── Services grid numbering fix ─────────────────────────────── */
.sc2-card--chinese .sc2-symbol { color: rgba(212,80,60,0.8); filter: drop-shadow(0 0 10px rgba(212,80,60,0.35)); }
.sc2-card--chinese { border-color: rgba(180,60,50,0.35); }
.sc2-card--chinese:hover { border-color: rgba(220,80,60,0.7); box-shadow: 0 0 50px rgba(180,60,50,0.14), 0 12px 40px rgba(0,0,0,0.35); }
.sc2-card--chinese .sc2-chip { color: rgba(220,130,110,0.85); background: rgba(180,60,50,0.09); border-color: rgba(180,60,50,0.22); }
.sc2-card--chinese .sc2-badge { color: rgba(220,130,110,0.85); background: rgba(180,60,50,0.09); border-color: rgba(180,60,50,0.22); }