@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap');

:root { --gold: #f5b301; --saffron: #ff7a1a; }

/* Deep indigo spiritual base background */
body.bg-black {
  background: linear-gradient(180deg, #17091f 0%, #0c0614 45%, #050308 100%) !important;
}
/* Let solid black sections reveal the indigo base */
section.bg-black,
.bg-black:not(header):not(.sticky) {
  background-color: transparent !important;
}
/* Saffron-plum header */
header.bg-black,
header.sticky {
  background: linear-gradient(90deg, #1a0b16, #5a2a0c, #1a0b16) !important;
  border-bottom: 1px solid rgba(255, 122, 26, 0.40) !important;
}

/* Recolor blue accent gradients to deep violet */
[class*="from-blue-900"] {
  --tw-gradient-from: rgba(76, 29, 149, 0.45) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(76, 29, 149, 0)) !important;
}
[class*="to-blue-900"] {
  --tw-gradient-to: rgba(76, 29, 149, 0.28) !important;
}

/* Saffron glow accents */
.bg-yellow-500\/10 { background-color: rgba(255, 122, 26, 0.12) !important; }

/* Saffron-gold harmony on borders */
.border-yellow-500\/20 { border-color: rgba(245, 179, 1, 0.32) !important; }

/* Top announcement ribbon */
.top-ribbon {
  background: linear-gradient(90deg, #c2410c, #f5b301, #c2410c);
  background-size: 200% 100%;
  animation: ribbonShine 6s linear infinite;
}
@keyframes ribbonShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---- Sub-page helpers ---- */
.page-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.page-hero {
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
  background: radial-gradient(600px 300px at 50% -10%, rgba(255,122,26,0.18), transparent 70%);
}
.page-eyebrow {
  color: #e6b800;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 700;
  font-size: .8rem;
}
.page-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  margin-top: .75rem;
  background: linear-gradient(90deg, #f5b301, #ff7a1a, #f5b301);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-lead {
  color: #cbd5e1;
  max-width: 46rem;
  margin: 1.25rem auto 0;
  line-height: 1.9;
  font-size: 1.05rem;
}
.content-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(230,184,0,0.18);
  border-radius: 1rem;
  padding: 1.75rem;
}
.content-card h3 { color: #e6b800; font-weight: 700; font-size: 1.25rem; margin-bottom: .6rem; }
.content-card p, .content-card li { color: #cbd5e1; line-height: 1.8; }
.content-prose h2 { color: #ff9d3d; font-size: 1.75rem; font-weight: 700; margin: 2rem 0 1rem; }
.content-prose p { color: #cbd5e1; line-height: 1.9; margin-bottom: 1rem; }
.content-prose ul { margin: 0 0 1rem 0; }
.content-prose li { color: #cbd5e1; line-height: 1.8; margin-bottom: .5rem; }
.cta-gold {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 2.25rem; border-radius: .9rem; font-weight: 700; color: #000;
  background: linear-gradient(90deg, #b8860b, #e6b800, #b8860b);
  transition: transform .2s ease;
}
.cta-gold:hover { transform: scale(1.05); }

/* ============================================================
   PREMIUM POLISH LAYER
   ============================================================ */
html { scroll-behavior: smooth; }

/* Refined typography */
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4,
.hero-title, .feature-title, .page-title, .stat-number {
  font-family: 'Sora', 'Poppins', sans-serif !important;
  letter-spacing: -0.015em;
}

/* Gold-gradient headings */
.hero-title,
h1.text-gold, h2.text-gold, h3.text-gold,
.text-3xl.text-gold, .text-4xl.text-gold, .text-5xl.text-gold {
  background: linear-gradient(92deg, #ffe9a8 0%, #f5b301 40%, #ff7a1a 75%, #f5b301 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  background-size: 200% auto;
}
.stat-number {
  color: #f7e08a !important;
  text-shadow: 0 2px 12px rgba(230,184,0,0.25);
}

/* Premium scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #04140b; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f5b301, #c2410c);
  border-radius: 10px; border: 2px solid #17091f;
}

/* Glass cards with depth + hover lift */
.glass-effect, .feature-card, .stat-box, .trust-box,
.step-card, .content-card, .why-feature, .glass-contact {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(230,184,0,0.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px -16px rgba(0,0,0,0.7);
  transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.glass-effect:hover, .feature-card:hover, .stat-box:hover, .trust-box:hover,
.step-card:hover, .content-card:hover, .why-feature:hover {
  transform: translateY(-6px);
  border-color: rgba(230,184,0,0.55) !important;
  box-shadow: 0 22px 48px -18px rgba(230,184,0,0.28);
}

/* Button glow */
a[class*="from-yellow"], button[class*="from-yellow"],
.cta-gold, .hero-btn, .contact-btn, .faq-cta {
  box-shadow: 0 12px 30px -12px rgba(230,184,0,0.55);
}
a[class*="from-green"], button[class*="from-green"], .bg-green-500 {
  box-shadow: 0 12px 30px -12px rgba(16,185,129,0.5);
}

/* Animated sheen sweep on primary buttons */
.cta-gold, .hero-btn, .contact-btn {
  position: relative; overflow: hidden;
}
.cta-gold::after, .hero-btn::after, .contact-btn::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.cta-gold:hover::after, .hero-btn:hover::after, .contact-btn:hover::after { left: 150%; }

/* Gold divider accent under section headings */
.page-title::after {
  content: ""; display: block; width: 90px; height: 3px; margin: 1rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #f5b301, #ff7a1a, transparent);
}

/* Decorative ambient glow behind the page */
body.bg-black::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 420px at 12% 8%, rgba(124,58,237,0.14), transparent 60%),
    radial-gradient(560px 420px at 88% 14%, rgba(255,122,26,0.10), transparent 60%);
}

/* Scroll-reveal animation (progressive enhancement) */
body.reveal-on .reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
body.reveal-on .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  body.reveal-on .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   SVG ICON SYSTEM
   ============================================================ */
.ic {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -0.18em; flex: none;
}
.ic-lg { width: 2.4rem; height: 2.4rem; }
.ic-gold { color: #e6b800; }
.lead-ic { margin-right: .55rem; }
.check { color: #ff9d3d; margin-right: .6rem; width: 1.1em; height: 1.1em; }
.icon-stars { display: inline-flex; align-items: center; gap: .18rem; color: #e6b800; }
.icon-stars .ic { width: 1.05em; height: 1.05em; }

/* Buttons that lay out icon + label */
.cta-gold, .hero-btn, .contact-btn, .faq-cta { gap: .5rem; }

/* Feature icon tiles render an SVG instead of an emoji glyph */
.feature-icon .ic { width: 2.4rem; height: 2.4rem; color: #f5b301; }

/* ============================================================
   ANIMATION & MOTION LAYER
   ============================================================ */

/* Shimmering gradient headings */
.hero-title, .page-title,
h1.text-gold, h2.text-gold, h3.text-gold,
.text-3xl.text-gold, .text-4xl.text-gold, .text-5xl.text-gold {
  animation: textShimmer 7s ease-in-out infinite;
}
@keyframes textShimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Floating ambient orbs behind the hero */
.orb { will-change: transform; }
.orb-gold    { background: rgba(245, 179, 1, 0.14) !important; animation: floatOrb 14s ease-in-out infinite; }
.orb-saffron { background: rgba(255, 122, 26, 0.15) !important; animation: floatOrb 18s ease-in-out infinite reverse; }
.orb-violet  { background: rgba(124, 58, 237, 0.16) !important; animation: floatOrb2 20s ease-in-out infinite; }
@keyframes floatOrb  { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(28px, -38px) scale(1.06); } }
@keyframes floatOrb2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-34px, 28px) scale(1.08); } }

/* Feature icon float + saffron glow */
.feature-icon { animation: iconFloat 5s ease-in-out infinite; }
.feature-icon .ic { filter: drop-shadow(0 0 10px rgba(255, 122, 26, 0.35)); }
.feature-card:hover .feature-icon { animation-duration: 2.2s; }
@keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Pulsing glow on the animated stat numbers */
.stat-number { animation: statGlow 3.5s ease-in-out infinite; }
@keyframes statGlow {
  0%, 100% { text-shadow: 0 2px 12px rgba(245, 179, 1, 0.25); }
  50% { text-shadow: 0 2px 22px rgba(255, 122, 26, 0.55); }
}

/* Living gradient on primary buttons */
.hero-btn, .cta-gold, .contact-btn, .faq-cta,
a[class*="from-yellow"], button[class*="from-yellow"] {
  background-size: 200% auto;
  animation: btnGradient 5s ease infinite;
}
@keyframes btnGradient {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Breathing glow on badges */
.hero-badge, .feature-badge { animation: badgePulse 4s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); }
  50% { box-shadow: 0 0 26px -4px rgba(255, 122, 26, 0.5); }
}

/* Radar pulse ring on the floating WhatsApp button */
a[aria-label="WhatsApp Customer Care"] > span { position: relative; }
a[aria-label="WhatsApp Customer Care"] > span::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  animation: waPulse 2.2s ease-out infinite;
}
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70% { box-shadow: 0 0 0 16px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-title, .page-title, .orb, .feature-icon, .stat-number,
  .hero-btn, .cta-gold, .contact-btn, .faq-cta,
  .hero-badge, .feature-badge,
  a[aria-label="WhatsApp Customer Care"] > span::before {
    animation: none !important;
  }
}

/* ============================================================
   COLLAPSING NAVBAR ON SCROLL (hide extras, keep logo)
   ============================================================ */
header.sticky { transition: box-shadow .3s ease; }
header.nav-min { box-shadow: 0 8px 26px -12px rgba(0, 0, 0, 0.65); }
.js-nav-extra {
  overflow: hidden;
  max-height: 240px;
  opacity: 1;
  transition: max-height .4s ease, opacity .3s ease, transform .35s ease,
              margin .35s ease, padding .35s ease;
}
header.nav-min .js-nav-extra {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: translateY(-6px);
  pointer-events: none;
}