/* ===========================================================
   Shree Soham — brand stylesheet
   Numerology · Vastu Shastra · Astrology consultancy
   =========================================================== */

:root {
  --navy: #0b1b33;
  --navy-2: #0e2140;
  --cream: #fdf9f0;
  --cream-2: #f6efdd;
  --gold: #b8892f;
  --gold-bright: #d4af37;
  --gold-light: #e8c766;
  --ink: #26241c;
  --muted: #6b6255;
  --line: #e6dcc4;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(11, 27, 51, 0.08);
  --maxw: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Lora", Georgia, serif;
  line-height: 1.7;
  font-size: 17px;
  animation: page-fade 0.7s ease;
}

@keyframes page-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Scroll-reveal (class added by JS only — content is
   already visible by default, so nothing is hidden from a crawler
   or a visitor with JavaScript disabled) ---------- */
.reveal-init {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-init.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

h1, h2, h3, h4, .brand-font {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1.1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.6em;
  display: inline-block;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn:hover::before { left: 130%; }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-light), var(--gold-bright));
  color: var(--navy);
  box-shadow: 0 8px 20px rgba(180, 140, 40, 0.35);
}
.btn-whatsapp {
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}
.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline-light {
  background: transparent;
  border-color: rgba(232, 199, 102, 0.6);
  color: var(--gold-light);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 27, 51, 0.97);
  backdrop-filter: blur(6px);
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  transition: height 0.3s ease;
}
.site-header.scrolled .container { height: 66px; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img {
  height: 52px;
  width: auto;
  transition: height 0.3s ease;
}
.site-header.scrolled .brand img { height: 42px; }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-family: "Poppins", sans-serif;
  font-size: 0.92rem;
  color: #ece4cf;
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 6px;
}
.main-nav a:hover, .main-nav a.active { color: var(--gold-light); }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold-light);
}
/* Pulse is done with an animated box-shadow, not a separate bordered
   element — a box-shadow always paints outside the button's own
   background/text and never on top of it, so there is no way for this
   to look like it's overlapping the button or its label (the earlier
   version used a separate ring element that some browsers could render
   awkwardly at certain animation frames; this approach removes that
   possibility entirely). */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  background: #25d366;
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  margin-left: 6px;
  animation: nav-cta-glow 2.6s ease-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.4);
  animation-play-state: paused;
}
@keyframes nav-cta-glow {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--gold-light);
  font-size: 1.6rem;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(ellipse at 50% 0%, var(--navy-2), var(--navy) 70%);
  color: #ece4cf;
  padding: 90px 0 100px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero .container { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--gold-light); }
.hero h1 { color: #fbf6e6; }
.hero .lede {
  max-width: 680px;
  margin: 0 auto 2em;
  font-size: 1.15rem;
  color: #cdd3de;
}
.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* The mark is THREE stacked images sharing the exact same canvas: a
   static background disc at the bottom, the outer zodiac ring in the
   middle (spins), and the Om + sunburst center on top (glows, never
   rotates — per Hindu tradition the Om symbol should not be shown
   rotating). The z-index order below matters: the background must be
   z-index 0 (bottom) or its own solid fill will paint over and hide the
   ring — that was a real bug in an earlier version of this file. */
.hero-mark {
  width: 150px; height: 150px; margin: 0 auto 28px;
  position: relative;
  z-index: 1;
}
.hero-mark-bg, .hero-mark-ring, .hero-mark-center {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-mark-bg { z-index: 0; }
/* Fast enough to visibly move within a couple of seconds (60s/rotation
   was so slow it read as "not animated at all"), but still an elegant,
   unhurried spin rather than a spinner-style blur. */
.hero-mark-ring { z-index: 1; animation: spin-slow 18s linear infinite; }
/* The Om + sunburst center never rotates, but it isn't inert either —
   a soft "breathing" glow (gentle scale + golden glow pulse) gives the
   logo life without ever moving the sacred symbol itself. */
.hero-mark-center {
  z-index: 2;
  animation: mark-breathe 3.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes mark-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(232, 199, 102, 0)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 12px rgba(232, 199, 102, 0.65)); }
}

/* The larger "Shree Soham" lockup card (badge + wordmark + tagline) used
   on the homepage — same three-layer trick as .hero-mark: background/
   wordmark/tagline stay static, the ring spins, the Om + sunburst center
   only glows. All three images share one canvas so they line up exactly. */
.lockup-anim {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 27, 51, 0.18);
}
.lockup-anim-base, .lockup-anim-ring, .lockup-anim-center {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* IMPORTANT: this card's badge is NOT vertically centered in its own
   square canvas (the sunburst/ring sit at 38.5% down, to leave room for
   the wordmark below), so the ring's rotation must pivot around its own
   true center (50% 38.5%), not the element's default 50% 50%. Without
   this, the ring doesn't spin in place - it swings around the card's
   center instead, so at some points in the 18s cycle it visibly drifts
   off to one side and can appear to cut through the wordmark text below.
   This was a real bug: caught from a screenshot showing the ring
   offset, reproduced by watching a full rotation instead of only
   checking the very start of the animation. */
.lockup-anim-ring {
  animation: spin-slow 18s linear infinite;
  transform-origin: 50% 38.5%;
}
.lockup-anim-center {
  animation: mark-breathe 3.2s ease-in-out infinite;
  transform-origin: 50% 38.5%;
}

.hero-stars, .page-hero-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-stars circle, .page-hero-stars circle {
  fill: #f5efd8;
  animation-name: twinkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.85; }
}

/* ---------- Sections ---------- */
section { padding: 84px 0; }
.section-cream { background: var(--cream); }
.section-tint { background: var(--cream-2); }
.section-navy { background: var(--navy); color: #d9dee8; }
.section-navy h2, .section-navy h3 { color: #fbf6e6; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head p { color: var(--muted); }
.section-navy .section-head p { color: #aeb6c4; }

/* ---------- Cards / grids ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
/* Only for pairing a text column with an image of very different height
   (e.g. the homepage "Why Shree Soham" section) — everywhere else the two
   columns are text lists of uneven length, and centering them makes their
   headings/icons drift out of line with each other, which looked like a
   layout bug. Top-aligning (the default above) keeps both columns starting
   at the same line regardless of how long either one's content is. */
.grid-2.grid-2-center { align-items: center; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 46px rgba(11, 27, 51, 0.16);
  border-color: var(--gold-light);
}
.card .icon {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-bright));
  color: var(--navy);
  font-size: 1.5rem;
  margin-bottom: 18px;
  transition: transform 0.3s ease;
}
.card:hover .icon { transform: scale(1.1) rotate(-6deg); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); margin-bottom: 18px; }
.card a.more {
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
}

.list-check { list-style: none; margin: 0; padding: 0; }
.list-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--ink);
}
.list-check li::before {
  content: "\2726";
  position: absolute; left: 0; top: 1px;
  color: var(--gold);
  font-size: 0.95rem;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.pill {
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.section-navy .pill {
  background: rgba(232, 199, 102, 0.12);
  border-color: rgba(232, 199, 102, 0.4);
  color: #f3ecd8;
  backdrop-filter: blur(4px);
}
.pill:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 4px;
  transition: background 0.25s ease, padding-left 0.25s ease;
  border-radius: 8px;
}
.faq-item:hover {
  background: var(--cream-2);
  padding-left: 16px;
}
.faq-item h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}
.faq-item h3::before {
  content: "\2726";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.9rem;
}
.faq-item p { color: var(--muted); margin: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy), var(--navy-2), #142a4d, var(--navy));
  background-size: 300% 300%;
  animation: gradient-shift 10s ease infinite;
  color: #fbf6e6;
  text-align: center;
  padding: 70px 0;
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cta-band h2 { color: #fbf6e6; }
.cta-band p { color: #cdd3de; max-width: 560px; margin: 0 auto 2em; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Contact form ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: "Lora", serif;
  font-size: 0.98rem;
  background: var(--cream);
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
}
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }

.contact-info .card { margin-bottom: 20px; }
.contact-info .icon { margin-bottom: 12px; }
.whatsapp-cta {
  background: var(--navy);
  color: #ece4cf;
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
}
.whatsapp-cta h3 { color: #fbf6e6; }
.whatsapp-cta p { color: #aeb6c4; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: #aeb6c4;
  padding: 56px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h4 {
  color: #fbf6e6;
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-grid a {
  display: block;
  color: #aeb6c4;
  text-decoration: none;
  font-size: 0.92rem;
  margin-bottom: 10px;
}
.footer-grid a:hover { color: var(--gold-light); }
.footer-brand img { height: 46px; margin-bottom: 14px; }
.footer-brand p { font-size: 0.9rem; color: #93a0b3; max-width: 320px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: #7a869a;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: var(--gold-light); }

/* ---------- Floating WhatsApp button ---------- */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  background: #25d366;
  color: #fff;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  text-decoration: none;
  font-size: 1.6rem;
}

/* ---------- Scroll-to-top button (bottom-left, opposite the WhatsApp
   float on the right, so the two never collide) ---------- */
.scroll-top-btn {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(11, 27, 51, 0.18);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top-btn:hover { background: var(--navy); color: #fbf6e6; border-color: var(--navy); }
@media (max-width: 640px) {
  .scroll-top-btn { left: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ---------- Page header (inner pages) ---------- */
.page-hero {
  background: radial-gradient(ellipse at 50% 0%, var(--navy-2), var(--navy) 75%);
  color: #ece4cf;
  padding: 64px 0 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fbf6e6; }
.breadcrumb {
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  color: #93a0b3;
  margin-bottom: 14px;
}
.breadcrumb a { color: #93a0b3; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-light); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.small-muted { color: var(--muted); font-size: 0.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .main-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 84px; left: 0; right: 0;
    background: var(--navy);
    padding: 18px 24px 26px;
    gap: 16px;
  }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
}