/*
Theme Name: Shanmukh Astro
Theme URI: https://slategrey-elk-899479.hostingersite.com
Author: Shanmukh
Description: Dark cosmic astrology theme for Famous Astrologer Psychic & Spiritual Healer Shanmukh — Houston, TX. Universe background with rotating Saturn and Moon, animated Lord Vishnu hero.
Version: 1.4
License: GNU General Public License v2 or later
Text Domain: shanmukh-astro
*/

/* ============================================================
   Famous Astrologer Psychic & Spiritual Healer Shanmukh
   Dark cosmic theme — gold & red
   ============================================================ */

:root {
  --bg-deep: #04040e;
  --bg-panel: rgba(14, 12, 30, 0.72);
  --bg-card: rgba(20, 16, 40, 0.66);
  --gold: #ffc53d;
  --gold-soft: #f5d67b;
  --gold-dim: #b8860b;
  --red: #e23b2e;
  --red-deep: #c1121f;
  --text: #f2ead6;
  --text-dim: #b8afa0;
  --border-gold: rgba(255, 197, 61, 0.28);
  --glow-gold: rgba(255, 197, 61, 0.45);
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--gold); text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; }

/* ============ UNIVERSE BACKGROUND ============ */

#cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.nebula-1 {
  width: 55vw; height: 55vw;
  top: -18vw; left: -15vw;
  background: radial-gradient(circle, rgba(193, 18, 31, 0.35), transparent 65%);
  animation: nebulaDrift 26s ease-in-out infinite alternate;
}
.nebula-2 {
  width: 48vw; height: 48vw;
  top: 45vh; right: -18vw;
  background: radial-gradient(circle, rgba(255, 165, 0, 0.16), transparent 65%);
  animation: nebulaDrift 32s ease-in-out infinite alternate-reverse;
}
.nebula-3 {
  width: 42vw; height: 42vw;
  bottom: -12vw; left: 22vw;
  background: radial-gradient(circle, rgba(90, 24, 130, 0.4), transparent 65%);
  animation: nebulaDrift 38s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, -3vh, 0) scale(1.12); }
}

/* ---- Saturn ---- */
#saturn {
  position: absolute;
  top: 6vh;
  right: -12vw;
  width: min(58vw, 760px);
  will-change: transform, opacity;
}
#saturn svg { width: 100%; height: auto; display: block; overflow: visible; }

.saturn-spin { transform-origin: 260px 200px; animation: saturnSpin 90s linear infinite; }
@keyframes saturnSpin { to { transform: rotate(360deg); } }

.ring-orbit { transform-origin: 260px 200px; animation: ringPulse 12s ease-in-out infinite; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.7; }
}

/* ---- Moon ---- */
#moon {
  position: absolute;
  top: 28vh;
  left: -8vw;
  width: min(34vw, 420px);
  will-change: transform, opacity;
  opacity: 0;
}
#moon svg { width: 100%; height: auto; display: block; overflow: visible; }
.moon-spin { transform-origin: 200px 200px; animation: moonSpin 140s linear infinite; }
@keyframes moonSpin { to { transform: rotate(360deg); } }

/* ---- Venus / Mars / Galaxy ---- */
.planet {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.planet svg { width: 100%; height: auto; display: block; overflow: visible; }

#venus { top: 24vh; right: -12vw; width: min(42vw, 500px); }
#mars { top: 26vh; left: -10vw; width: min(38vw, 440px); }
#jupiter { top: 24vh; right: -13vw; width: min(44vw, 520px); }
#galaxy { top: 26vh; left: -8vw; width: min(56vw, 640px); }

.venus-spin { transform-origin: 200px 200px; animation: saturnSpin 110s linear infinite; }
.mars-spin { transform-origin: 200px 200px; animation: saturnSpin 100s linear infinite; }
.jupiter-spin { transform-origin: 200px 200px; animation: saturnSpin 95s linear infinite; }
.galaxy-spin { transform-origin: 300px 200px; animation: saturnSpin 150s linear infinite; }

/* ---- shooting star ---- */
.shooting-star {
  position: absolute;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
  border-radius: 2px;
  opacity: 0;
  transform: rotate(-35deg);
  animation: shoot 7s ease-in infinite;
}
.shooting-star.s2 { animation-delay: 3.4s; top: 30% !important; left: 65% !important; }
.shooting-star.s3 { animation-delay: 5.6s; top: 62% !important; left: 25% !important; }
@keyframes shoot {
  0% { opacity: 0; transform: rotate(-35deg) translateX(0); }
  4% { opacity: 1; }
  12% { opacity: 0; transform: rotate(-35deg) translateX(-42vw); }
  100% { opacity: 0; }
}

/* ============ CONTENT LAYER ============ */

#page { position: relative; z-index: 1; }

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

section { position: relative; padding: 96px 0; }

.section-tag {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--gold);
  margin-bottom: 18px;
  text-shadow: 0 0 30px rgba(255, 197, 61, 0.25);
}

.section-sub {
  color: var(--text-dim);
  max-width: 720px;
  margin-bottom: 48px;
}

.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }

.gold-divider {
  width: 90px; height: 3px;
  margin: 0 0 26px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 3px;
}
.center .gold-divider { margin-left: auto; margin-right: auto; }

/* ============ HEADER ============ */

#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 14px 0;
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
#header.scrolled {
  background: rgba(6, 5, 18, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-gold);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-om {
  width: 46px; height: 46px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffdf8e, var(--gold-dim));
  color: #3a1200;
  font-size: 1.5rem;
  box-shadow: 0 0 22px var(--glow-gold);
  animation: brandGlow 3s ease-in-out infinite;
}
@keyframes brandGlow {
  0%, 100% { box-shadow: 0 0 14px var(--glow-gold); }
  50% { box-shadow: 0 0 30px var(--glow-gold); }
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--gold);
}
.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav-links { display: flex; gap: 26px; list-style: none; }
.nav-links a {
  color: var(--text);
  font-size: 0.92rem;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }

.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--red-deep), var(--red));
  color: #fff;
  padding: 10px 20px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 0 20px rgba(226, 59, 46, 0.5);
  transition: transform 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}
.nav-call:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(226, 59, 46, 0.8); }

#nav-toggle { display: none; background: none; border: none; color: var(--gold); font-size: 1.7rem; cursor: pointer; }

/* ============ HERO ============ */

#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-gold);
  background: rgba(255, 197, 61, 0.08);
  color: var(--gold-soft);
  border-radius: 40px;
  padding: 7px 18px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse { 50% { opacity: 0.35; } }

.hero-title {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.15;
  margin-bottom: 8px;
  color: #fff;
  text-shadow: 0 0 40px rgba(255, 197, 61, 0.3);
}
.hero-title .gold-text {
  background: linear-gradient(120deg, #ffe9a8, var(--gold) 45%, #ff9d2e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title .red-text { color: var(--red); -webkit-text-fill-color: var(--red); }

.hero-sub-line {
  font-family: var(--font-display);
  color: var(--gold-soft);
  letter-spacing: 3px;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  margin-bottom: 20px;
}

.hero-desc { color: var(--text-dim); max-width: 560px; margin-bottom: 34px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 42px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 44px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.25s, box-shadow 0.25s;
}
.btn-gold {
  background: linear-gradient(135deg, #ffdf8e, var(--gold) 55%, #e59a13);
  color: #3a1500;
  box-shadow: 0 0 26px rgba(255, 197, 61, 0.45);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 0 44px rgba(255, 197, 61, 0.75); }
.btn-outline {
  border: 1.5px solid var(--red);
  color: #ffb3ab;
  background: rgba(226, 59, 46, 0.08);
}
.btn-outline:hover { background: rgba(226, 59, 46, 0.2); transform: translateY(-3px); }

.hero-trust { display: flex; flex-wrap: wrap; gap: 30px; }
.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
}
.trust-item span { font-size: 0.8rem; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }

/* ---- Vishnu figure ---- */

.vishnu-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
}
.vishnu-stage::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(4, 4, 14, 0.85) 0%, rgba(4, 4, 14, 0.55) 45%, transparent 72%);
  pointer-events: none;
}
.vishnu-stage > div { position: relative; }

.vishnu-wrap { position: relative; display: grid; place-items: center; padding: 30px 0 0; }
.vishnu-rings {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  pointer-events: none;
}
.vishnu-frame {
  position: relative;
  width: min(66vw, 330px);
  border-radius: 165px 165px 22px 22px;
  padding: 7px;
  background: linear-gradient(160deg, #ffe9a8, #ffc53d 40%, #b8860b 75%, #e23b2e);
  box-shadow:
    0 0 42px rgba(255, 197, 61, 0.5),
    0 0 110px rgba(226, 120, 46, 0.28),
    0 24px 60px rgba(0, 0, 0, 0.6);
  animation: vishnuFloat 6s ease-in-out infinite, frameGlow 4s ease-in-out infinite;
}
@keyframes frameGlow {
  0%, 100% { box-shadow: 0 0 34px rgba(255, 197, 61, 0.42), 0 0 90px rgba(226, 120, 46, 0.22), 0 24px 60px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 60px rgba(255, 197, 61, 0.7), 0 0 140px rgba(226, 120, 46, 0.4), 0 24px 60px rgba(0, 0, 0, 0.6); }
}
.vishnu-frame::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 158px 158px 16px 16px;
  background: linear-gradient(180deg, transparent 62%, rgba(4, 4, 14, 0.55));
  pointer-events: none;
}
.vishnu-frame img {
  display: block;
  width: 100%;
  border-radius: 158px 158px 16px 16px;
  animation: kenBurns 14s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1); filter: saturate(1.05) brightness(1); }
  to   { transform: scale(1.001); filter: saturate(1.2) brightness(1.1); }
}
.vishnu-stage svg { width: min(100%, 470px); height: auto; overflow: visible; }

.vishnu-float { animation: vishnuFloat 6s ease-in-out infinite; transform-origin: 250px 300px; }
@keyframes vishnuFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.aura-ring { transform-origin: 250px 240px; }
.aura-1 { animation: auraPulse 4s ease-in-out infinite; }
.aura-2 { animation: auraPulse 4s ease-in-out 1s infinite; }
.aura-3 { animation: auraPulse 4s ease-in-out 2s infinite; }
@keyframes auraPulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.mandala-spin { transform-origin: 250px 240px; animation: mandalaSpin 60s linear infinite; }
.mandala-spin-rev { transform-origin: 250px 240px; animation: mandalaSpinRev 45s linear infinite; }
@keyframes mandalaSpin { to { transform: rotate(360deg); } }
@keyframes mandalaSpinRev { to { transform: rotate(-360deg); } }

.chakra-spin { transform-origin: 118px 168px; animation: chakraSpin 5s linear infinite; }
@keyframes chakraSpin { to { transform: rotate(360deg); } }

.deity-glow { filter: drop-shadow(0 0 26px rgba(255, 197, 61, 0.55)); }

.spark {
  animation: sparkTwinkle 3s ease-in-out infinite;
}
.spark:nth-of-type(odd) { animation-delay: 1.2s; }
@keyframes sparkTwinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

.vishnu-caption {
  margin-top: 6px;
  text-align: center;
  font-family: var(--font-display);
  color: var(--gold-soft);
  letter-spacing: 4px;
  font-size: 0.85rem;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ============ SCROLL REVEAL ============ */

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============ ABOUT ============ */

#about .about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 54px;
  align-items: center;
}

.about-figure {
  position: relative;
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  background: var(--bg-panel);
  backdrop-filter: blur(8px);
  padding: 34px;
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 197, 61, 0.08);
}
.about-orb {
  width: 190px; height: 190px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 4.6rem;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 226, 150, 0.95), rgba(229, 154, 19, 0.9) 55%, #7a4a00);
  box-shadow: 0 0 60px var(--glow-gold), inset -14px -18px 40px rgba(122, 30, 0, 0.55);
  animation: brandGlow 4s ease-in-out infinite;
}
.about-orb-img { overflow: hidden; padding: 5px; }
.about-orb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  display: block;
}
.about-figure h3 { color: var(--gold); font-size: 1.35rem; margin-bottom: 6px; }
.about-figure p { color: var(--text-dim); font-size: 0.9rem; }

.about-text p { color: var(--text-dim); margin-bottom: 18px; }
.about-text strong { color: var(--gold-soft); }

.about-points { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.about-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
.about-points .tick {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 3px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.7rem;
  color: #2a1000;
  background: linear-gradient(135deg, var(--gold), #e59a13);
  box-shadow: 0 0 12px rgba(255, 197, 61, 0.5);
}

/* ============ STATS ============ */

#stats { padding: 40px 0; }
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(193, 18, 31, 0.18), rgba(255, 197, 61, 0.08));
  backdrop-filter: blur(10px);
  padding: 38px 30px;
  text-align: center;
}
.stat h3 {
  font-size: 2.1rem;
  background: linear-gradient(120deg, #ffe9a8, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat p { color: var(--text-dim); font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; }

/* ============ SERVICES ============ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px;
}

.service-card {
  border: 1px solid rgba(255, 197, 61, 0.16);
  border-radius: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  padding: 0;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.card-img {
  position: relative;
  height: 150px;
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  transition: transform 0.5s ease;
}
.service-card:hover .card-img img { transform: scale(1.08); }
.card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 4, 14, 0.05) 40%, rgba(14, 12, 30, 0.92));
  pointer-events: none;
}
.card-img .service-icon {
  position: absolute;
  left: 18px;
  bottom: -14px;
  z-index: 2;
  width: 48px;
  height: 48px;
  font-size: 1.35rem;
  margin-bottom: 0;
  background: linear-gradient(135deg, rgba(40, 26, 8, 0.95), rgba(60, 14, 10, 0.95));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 197, 61, 0.25);
}
.card-body { padding: 26px 22px 24px; }
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(226, 59, 46, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 197, 61, 0.18);
}
.service-card:hover::before { opacity: 1; }

.service-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(255, 197, 61, 0.2), rgba(193, 18, 31, 0.25));
  border: 1px solid var(--border-gold);
  color: var(--gold);
}
.service-card h3 { font-size: 1.06rem; color: var(--gold-soft); margin-bottom: 10px; }
.service-card p { font-size: 0.88rem; color: var(--text-dim); }

/* ============ POOJAS ============ */

#poojas { background: linear-gradient(180deg, transparent, rgba(120, 20, 20, 0.12), transparent); }

.pooja-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}
.pooja-card {
  text-align: center;
  border: 1px solid rgba(226, 59, 46, 0.25);
  border-radius: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  padding: 30px 22px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.pooja-card:hover {
  transform: translateY(-8px);
  border-color: var(--red);
  box-shadow: 0 0 36px rgba(226, 59, 46, 0.25);
}
.pooja-img {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 0 auto 18px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(150deg, #ffe9a8, #ffc53d 45%, #e23b2e);
  box-shadow: 0 0 26px rgba(255, 197, 61, 0.35);
}
.pooja-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.pooja-card:hover .pooja-img { box-shadow: 0 0 42px rgba(226, 59, 46, 0.5); }
.pooja-img .pooja-flame {
  position: absolute;
  right: -8px;
  bottom: -6px;
  font-size: 1.5rem;
  margin: 0;
}

.pooja-flame {
  font-size: 2.1rem;
  margin-bottom: 12px;
  display: inline-block;
  animation: flameFlicker 2.2s ease-in-out infinite;
}
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: brightness(1); }
  50% { transform: scale(1.12) rotate(2deg); filter: brightness(1.35); }
}
.pooja-card h3 { color: var(--gold); font-size: 1.1rem; }
.pooja-card .pooja-tag {
  display: inline-block;
  margin: 8px 0 12px;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(226, 59, 46, 0.4);
  padding: 3px 12px;
  border-radius: 20px;
}
.pooja-card p { font-size: 0.86rem; color: var(--text-dim); }

/* ============ BLACK MAGIC ============ */

.bm-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 54px; align-items: start; }

.bm-signs {
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  background: var(--bg-panel);
  backdrop-filter: blur(8px);
  padding: 30px;
}
.bm-signs h3 { color: var(--gold); margin-bottom: 16px; font-size: 1.15rem; }
.bm-signs ul { list-style: none; display: grid; gap: 10px; }
.bm-signs li { display: flex; gap: 10px; color: var(--text-dim); font-size: 0.92rem; }
.bm-signs li::before { content: '✦'; color: var(--red); }

.bm-steps { display: grid; gap: 18px; margin-top: 26px; }
.bm-step {
  display: flex;
  gap: 18px;
  border: 1px solid rgba(255, 197, 61, 0.16);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 20px;
}
.bm-step .num {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #2a1000;
  background: linear-gradient(135deg, #ffdf8e, #e59a13);
  box-shadow: 0 0 18px rgba(255, 197, 61, 0.45);
}
.bm-step h4 { color: var(--gold-soft); margin-bottom: 4px; font-size: 1rem; }
.bm-step p { font-size: 0.88rem; color: var(--text-dim); }

/* ============ TESTIMONIALS ============ */

.testi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.testi-card {
  border: 1px solid rgba(255, 197, 61, 0.16);
  border-radius: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  padding: 28px;
  transition: transform 0.3s, border-color 0.3s;
}
.testi-card:hover { transform: translateY(-6px); border-color: var(--gold); }
.testi-stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 14px; }
.testi-card p { font-size: 0.92rem; color: var(--text-dim); font-style: italic; margin-bottom: 18px; }
.testi-who { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  color: #2a1000;
  background: linear-gradient(135deg, #ffdf8e, #e59a13);
}
.testi-who strong { display: block; font-size: 0.92rem; color: var(--text); }
.testi-who span { font-size: 0.78rem; color: var(--text-dim); }

/* ============ CONTACT ============ */

#contact .contact-band {
  border: 1px solid var(--border-gold);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(193, 18, 31, 0.25), transparent 55%),
    radial-gradient(circle at bottom right, rgba(255, 197, 61, 0.14), transparent 55%),
    var(--bg-panel);
  backdrop-filter: blur(12px);
  padding: 60px 44px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 44px;
  align-items: center;
  box-shadow: 0 0 80px rgba(255, 197, 61, 0.1);
}

.contact-list { list-style: none; display: grid; gap: 18px; margin-top: 10px; }
.contact-list li { display: flex; gap: 16px; align-items: center; }
.contact-ic {
  flex: none;
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(255, 197, 61, 0.2), rgba(193, 18, 31, 0.3));
  border: 1px solid var(--border-gold);
}
.contact-list strong { display: block; color: var(--gold-soft); font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; }
.contact-list a, .contact-list span.val { color: var(--text); font-size: 1.05rem; }

.contact-cta { text-align: center; }
.contact-cta .big-phone {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--gold);
  margin: 14px 0 24px;
  text-shadow: 0 0 26px rgba(255, 197, 61, 0.4);
}
.contact-cta p { color: var(--text-dim); font-size: 0.9rem; }
.contact-cta .btn { margin: 8px 6px 0; }

/* ============ FOOTER ============ */

footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border-gold);
  background: rgba(5, 4, 16, 0.92);
  padding: 60px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h4 { color: var(--gold); font-size: 1rem; margin-bottom: 16px; letter-spacing: 1px; }
.footer-grid ul { list-style: none; display: grid; gap: 9px; }
.footer-grid ul a { color: var(--text-dim); font-size: 0.88rem; transition: color 0.25s; }
.footer-grid ul a:hover { color: var(--gold); }
.footer-about p { color: var(--text-dim); font-size: 0.88rem; margin-top: 14px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 197, 61, 0.12);
  padding-top: 22px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
}
.footer-bottom .disclaimer { display: block; margin-top: 6px; opacity: 0.7; }

/* ============ FLOATING CALL BUTTONS ============ */

.float-btns {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  gap: 12px;
}
.float-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.5rem;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  animation: floatBob 3s ease-in-out infinite;
}
.float-call { background: linear-gradient(135deg, var(--red-deep), var(--red)); }
.float-wa { background: linear-gradient(135deg, #128c4b, #25d366); animation-delay: 1.5s; }
@keyframes floatBob { 50% { transform: translateY(-6px); } }

/* ============ RESPONSIVE ============ */

@media (max-width: 980px) {
  .hero-grid, #about .about-grid, .bm-grid, #contact .contact-band { grid-template-columns: 1fr; }
  #hero { padding-top: 96px; }
  .vishnu-stage { min-height: 0; order: -1; }
  .vishnu-frame { width: min(64vw, 290px); }
  .vishnu-rings { inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); }
  .vishnu-wrap { padding-top: 10px; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  #saturn { right: -32vw; width: 85vw; }
  #moon { left: -20vw; width: 62vw; }
  #venus { right: -24vw; width: 72vw; }
  #mars { left: -22vw; width: 66vw; }
  #jupiter { right: -26vw; width: 74vw; }
  #galaxy { left: -20vw; width: 90vw; }
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed;
    top: 64px; right: 0;
    flex-direction: column;
    background: rgba(6, 5, 18, 0.97);
    border: 1px solid var(--border-gold);
    border-right: none;
    border-radius: 14px 0 0 14px;
    padding: 24px 34px;
    gap: 18px;
    transform: translateX(110%);
    transition: transform 0.35s;
  }
  .nav-links.open { transform: translateX(0); }
  #nav-toggle { display: block; }
  .nav-call { display: none; }
  section { padding: 70px 0; }
}