/* ————— CSS Variables ————— */
:root {
  --saffron: #f77f00;
  --marigold: #ffb703;
  --kumkum: #b23a48;
  --leaf: #2f855a;
  --cream: #fff7e6;
  --ink: #2b2b2b;
  --gold: #c49a2c;
}

/* ————— Global Base ————— */
html {
  scroll-behavior: smooth;
}
body {
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Noto Sans",
    "Helvetica Neue",
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  background:
    radial-gradient(1200px 600px at 10% 0%, #fff9ed 0%, #fff 60%),
    conic-gradient(
      from 0deg at 120% -10%,
      rgba(247, 127, 0, 0.08),
      rgba(255, 183, 3, 0.08),
      rgba(178, 58, 72, 0.08),
      rgba(47, 133, 90, 0.08),
      rgba(247, 127, 0, 0.08)
    );
  background-attachment: fixed;
  color: var(--ink);
}

/* ————— Hero (Peepal Aura) ————— */
.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      800px 300px at 70% -10%,
      rgba(255, 183, 3, 0.28),
      transparent 60%
    ),
    radial-gradient(
      700px 250px at 5% -5%,
      rgba(247, 127, 0, 0.22),
      transparent 60%
    ),
    linear-gradient(180deg, #fffdf7, #fff9ef);
}
.hero-section::before {
  /* Floating aura rings */
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 140%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(247, 127, 0, 0.07) 0 10deg,
    transparent 10deg 20deg
  );
  animation: hero-slow-rotate 28s linear infinite;
  z-index: -1;
}
@keyframes hero-slow-rotate {
  to {
    transform: rotate(1turn);
  }
}

.hero-aura-ring {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    #fff 20%,
    rgba(255, 255, 255, 0.85) 40%,
    rgba(255, 183, 3, 0.25) 60%,
    rgba(247, 127, 0, 0.35) 75%,
    transparent 80%
  );
  display: grid;
  place-items: center;
  margin: 0 auto;
  position: relative;
  box-shadow:
    0 12px 40px rgba(247, 127, 0, 0.25),
    inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  animation: hero-pulse 6s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}
.hero-aura-ring img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.hero-mantra-ticker {
  white-space: nowrap;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fffef8;
}
.hero-mantra-flow {
  display: inline-block;
  padding: 0.6rem 0;
  animation: hero-marquee 18s linear infinite;
}
@keyframes hero-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.hero-mantra-chip {
  color: var(--kumkum);
  font-family: "Noto Serif Devanagari", serif;
  margin-right: 2rem;
}

/* ————— Hero Reveal on Scroll ————— */
.hero-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: 0.7s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.hero-reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* ————— Hero Chip ————— */
.hero-chip {
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

/* ————— Hero Button Gold ————— */
.hero-btn-gold {
  background: linear-gradient(90deg, var(--gold), #e7c56a);
  border: none;
  color: #3b2f14;
  box-shadow: 0 6px 16px rgba(196, 154, 44, 0.35);
}

/* ————— Hero Shadow Soft ————— */
.hero-shadow-soft {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

/* ————— Hero Section Title ————— */
.hero-section-title {
  font-family: "Gloock", serif;
  letter-spacing: 0.3px;
  position: relative;
  margin-bottom: 1.25rem;
}
.hero-section-title .hero-orn {
  width: 90px;
  height: 8px;
  display: block;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}