/* Sanatan Dharma website — one stylesheet for every page, light and dark. */

@font-face {
  font-family: 'Outfit';
  src: url('/assets/outfit.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --canvas: #f7f4ef;
  --glow: rgba(251, 185, 99, 0.32);
  --surface: #ffffff;
  --soft: #f3efe8;
  --line: #ebe5da;
  --text: #1b1a18;
  --muted: #6f6b63;
  --saffron: #e8820c;
  --saffron-deep: #c76c06;
  --saffron-soft: #fff1dc;
  --ink: #1b1a18;
  --on-ink: #ffffff;
  --shadow: 0 2px 14px rgba(60, 40, 10, 0.06);
  --radius: 28px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #121110;
    --glow: rgba(232, 130, 12, 0.16);
    --surface: #1c1b19;
    --soft: #26241f;
    --line: #2f2d29;
    --text: #f2efe9;
    --muted: #a39f97;
    --saffron: #f39a2e;
    --saffron-deep: #f7b25c;
    --saffron-soft: rgba(232, 130, 12, 0.14);
    --ink: #f2efe9;
    --on-ink: #1b1a18;
    --shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Devanagari', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(1100px 560px at 100% 0%, var(--glow), transparent 60%),
    radial-gradient(900px 520px at 0% 100%, var(--glow), transparent 65%),
    var(--canvas);
  background-attachment: fixed;
}

a { color: var(--saffron-deep); text-underline-offset: 3px; }
a:hover { color: var(--saffron); }

img { max-width: 100%; display: block; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Header: floating pill bar */
.site-header { position: sticky; top: 12px; z-index: 10; margin-top: 12px; }
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand img { width: 40px; height: 40px; }
.brand b { font-weight: 600; font-size: 17px; line-height: 1.1; display: block; }
.brand small { color: var(--muted); font-size: 13px; display: block; line-height: 1.1; }
.nav { display: flex; gap: 4px; }
.nav a {
  color: var(--text); text-decoration: none; padding: 9px 16px; border-radius: 999px; font-size: 15px;
}
.nav a:hover { background: var(--soft); color: var(--text); }
.nav a[aria-current='page'] { background: var(--ink); color: var(--on-ink); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  font: inherit; font-weight: 500; text-decoration: none; border: 0; cursor: pointer;
}
.btn-primary { background: var(--saffron); color: #fff; }
.btn-primary:hover { background: var(--saffron-deep); color: #fff; }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { color: var(--on-ink); opacity: 0.9; }

/* Home hero */
.hero {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center;
  padding: 72px 0 40px;
}
.eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--saffron-soft);
  color: var(--saffron-deep); font-size: 14px; font-weight: 500;
}
h1, .hero-title { font-size: clamp(40px, 6vw, 68px); font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; margin: 18px 0 8px; }
.hindi { font-size: clamp(24px, 3vw, 34px); color: var(--saffron-deep); margin: 0 0 18px; font-weight: 400; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 560px; margin: 0 0 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 16px; border-radius: 16px;
  background: var(--ink); color: var(--on-ink); text-decoration: none;
}
.store-badge svg { width: 26px; height: 26px; fill: currentColor; }
.store-badge span { display: block; font-size: 12px; opacity: 0.8; line-height: 1.1; }
.store-badge strong { display: block; font-size: 18px; font-weight: 500; line-height: 1.2; }
.hero-art {
  aspect-ratio: 1; border-radius: 48px; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 35% 30%, #fde3b8 0%, #fbb963 35%, #e8820c 75%, #a35603 100%);
  box-shadow: 0 30px 80px rgba(163, 86, 3, 0.25);
}
.hero-art .halo {
  width: 64%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 20px 60px rgba(120, 60, 0, 0.25);
}
.hero-art .halo img { width: 82%; }
.hero-art .mantra {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #fff; font-size: 20px; opacity: 0.95;
}

/* Sections and cards */
section { padding: 36px 0; }
h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; letter-spacing: -0.01em; margin: 0 0 8px; }
.section-lead { color: var(--muted); margin: 0 0 28px; max-width: 640px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.card .icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: var(--saffron-soft); margin-bottom: 14px;
}
.card h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.band {
  background: var(--ink); color: var(--on-ink); border-radius: var(--radius); padding: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.band h2 { margin: 0; }
.band p { margin: 6px 0 0; opacity: 0.8; }

/* Document pages (privacy, support) */
.doc { padding: 56px 0 24px; }
.doc header h1 { margin-bottom: 6px; }
.doc .meta { color: var(--muted); margin: 0 0 28px; }
.doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.toc { position: sticky; top: 100px; background: var(--surface); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); }
.toc b { display: block; font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 4px 8px 8px; }
.toc a { display: block; padding: 7px 10px; border-radius: 12px; color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.35; }
.toc a:hover { background: var(--soft); }
.prose { background: var(--surface); border-radius: var(--radius); padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow); }
.prose h2 { font-size: 26px; margin: 34px 0 10px; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; font-weight: 500; margin: 22px 0 6px; }
.prose p, .prose li { color: var(--text); }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0 18px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 500; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.table-scroll { overflow-x: auto; }
.callout { background: var(--saffron-soft); border-radius: 20px; padding: 18px 20px; margin: 16px 0; }
.callout p { margin: 0; }

/* Support */
.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
details { border-bottom: 1px solid var(--line); padding: 14px 0; }
details:last-of-type { border-bottom: 0; }
summary { cursor: pointer; font-weight: 500; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--saffron); font-size: 22px; line-height: 1; }
details[open] summary::after { content: '–'; }
details p, details ol, details ul { color: var(--muted); margin: 10px 0 0; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 40px; margin: 12px 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-size: 14px;
}

/* Footer */
.site-footer { padding: 40px 0 48px; color: var(--muted); font-size: 15px; }
.site-footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 24px; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* Tablets and phones */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  .hero-art { max-width: 420px; width: 100%; margin-inline: auto; order: -1; border-radius: 40px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .doc-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .brand small { display: none; }
  .nav a { padding: 8px 12px; font-size: 14px; }
  .grid { grid-template-columns: 1fr; }
  .band { padding: 28px; }
  .doc { padding-top: 36px; }
}
@media (max-width: 430px) {
  .brand b { display: none; }
}

/* Divine touches — CSS only (the site runs no JavaScript). Everything below is still
   decoration; the motion itself runs only when the visitor hasn't asked for reduced motion. */
:root { --dust: rgba(214, 140, 30, 0.32); }
@media (prefers-color-scheme: dark) { :root { --dust: rgba(255, 196, 110, 0.4); } }

/* Golden dust drifting upward behind every page: two tiles, different sizes and speeds */
body::before, body::after {
  content: ''; position: fixed; inset: 0 0 auto; height: calc(100vh + 560px); z-index: -1; pointer-events: none;
}
body::before {
  background-image:
    radial-gradient(1.5px 1.5px at 30px 40px, var(--dust), transparent),
    radial-gradient(1px 1px at 120px 200px, var(--dust), transparent),
    radial-gradient(2px 2px at 220px 90px, var(--dust), transparent),
    radial-gradient(1px 1px at 270px 260px, var(--dust), transparent),
    radial-gradient(1.5px 1.5px at 80px 300px, var(--dust), transparent);
  background-size: 320px 320px;
}
body::after {
  background-image:
    radial-gradient(2.5px 2.5px at 90px 120px, var(--dust), transparent),
    radial-gradient(2px 2px at 400px 340px, var(--dust), transparent),
    radial-gradient(3px 3px at 260px 480px, var(--dust), transparent);
  background-size: 560px 560px;
  opacity: 0.7;
}

/* Hero: sun rays, a breathing glow, ripples like a temple bell, falling marigold petals, rising sparks */
.hero-art { overflow: hidden; isolation: isolate; }
.hero-art .rays {
  position: absolute; inset: -25%; z-index: -1;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%);
  mask: radial-gradient(circle, #000 18%, transparent 66%);
}
.hero-art .glow {
  position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.75) 0%, rgba(255, 220, 150, 0.3) 40%, transparent 68%);
}
.hero-art .ring {
  position: absolute; left: 18%; top: 18%; width: 64%; height: 64%; border-radius: 50%; z-index: -1;
  border: 2px solid rgba(255, 255, 255, 0.7); opacity: 0;
}
.hero-art .halo { position: relative; }
.hero-art .petals, .hero-art .sparks { display: none; position: absolute; inset: 0; pointer-events: none; }
.hero-art .petals i, .hero-art .sparks i { position: absolute; top: 0; width: 16px; height: 100%; opacity: 0; }
.hero-art .petals i::before {
  content: ''; position: absolute; top: 0; left: 0; width: 12px; height: 16px; border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #ffe08a, #f59e0b 60%, #e8820c); box-shadow: 0 2px 4px rgba(120, 60, 0, 0.25);
}
.hero-art .sparks i::before {
  content: ''; position: absolute; bottom: 0; left: 5px; width: 5px; height: 5px; border-radius: 50%;
  background: #fff7df; box-shadow: 0 0 8px 2px rgba(255, 226, 150, 0.9);
}
.hero-art .mantra {
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #ffe7a8 50%, #fff 60%, #fff 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hindi {
  width: fit-content;
  background: linear-gradient(100deg, var(--saffron-deep) 0%, var(--saffron-deep) 40%, #f6c35b 50%, var(--saffron-deep) 60%, var(--saffron-deep) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Cards light up like a diya when touched or hovered */
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(232, 130, 12, 0.16), 0 0 0 1px color-mix(in srgb, var(--saffron) 25%, transparent); }
.card:hover .icon { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--saffron) 12%, transparent), 0 0 24px color-mix(in srgb, var(--saffron) 45%, transparent); }

/* A sheen across the saffron button, and a quiet ॐ behind the contact band */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
}
.band { position: relative; overflow: hidden; isolation: isolate; }
.band::after {
  content: 'ॐ'; position: absolute; right: 2%; top: 50%; transform: translateY(-50%); z-index: -1; pointer-events: none;
  font-family: 'Noto Sans Devanagari', 'Kohinoor Devanagari', sans-serif; font-size: 200px; line-height: 1; opacity: 0.07;
}

/* A mandala turning slowly behind every page, tinted with the theme's saffron */
html::before {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  width: min(1100px, 140vmin); aspect-ratio: 1; left: 50%; top: 50%; margin: calc(min(1100px, 140vmin) / -2) 0 0 calc(min(1100px, 140vmin) / -2);
  background: var(--saffron); opacity: 0.08;
  -webkit-mask: url('/assets/mandala.svg') center / contain no-repeat;
  mask: url('/assets/mandala.svg') center / contain no-repeat;
}
@media (prefers-color-scheme: dark) { html::before { opacity: 0.07; } }

/* Divine hero: the logo glowing at the centre of turning mandala rings and golden rays,
   eight deities orbiting it in 3D, and the title in shimmering gold. site.js tilts the
   whole scene towards the mouse (the layers sit at different depths, so they shift
   apart), moves a soft light with the pointer and bursts petals when the logo is clicked. */
.divine-hero {
  --E: min(520px, 86vw);
  position: relative; isolation: isolate; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 24px; align-items: center;
  min-height: min(calc(100svh - 70px), 820px); padding: 24px 0 64px;
}
.dh-light {
  position: absolute; z-index: -1; pointer-events: none; top: -90px; bottom: 0; left: 50%; width: 100vw; translate: -50% 0;
  background:
    radial-gradient(520px circle at var(--mx, 30%) var(--my, 45%), rgba(255, 184, 77, 0.22), transparent 65%),
    radial-gradient(900px 600px at 28% 48%, rgba(251, 185, 99, 0.18), transparent 70%);
}
.dh-emblem { width: var(--E); aspect-ratio: 1; justify-self: center; perspective: 1200px; }
.dh-scene { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.dh-back { position: absolute; inset: -14%; transform: translateZ(-240px) scale(1.42); transform-style: preserve-3d; }
.dh-rays {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(232, 130, 12, 0.22) 0deg 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 66%); mask: radial-gradient(circle, #000 12%, transparent 66%);
}
.dh-mandala {
  position: absolute; background: var(--saffron);
  -webkit-mask: url('/assets/mandala.svg') center / contain no-repeat; mask: url('/assets/mandala.svg') center / contain no-repeat;
}
.dh-m1 { inset: 4%; opacity: 0.3; }
.dh-m2 { inset: 22%; opacity: 0.45; }
.dh-orbit-plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(70deg); }
.dh-orbit { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Each deity: placed round the ring, then turned back to face the viewer */
.dh-orbit span {
  --a: calc(var(--i) * 45deg);
  position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; margin: -7.5%; transform-style: preserve-3d;
  transform: rotate(var(--a)) translateY(calc(var(--E) * -0.46)) rotate(calc(var(--a) * -1));
}
.dh-orbit b { display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.dh-orbit i { position: relative; display: block; width: 100%; height: 100%; transform: rotateX(-70deg); }
.dh-orbit img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 3px solid #f6c35b; background: #fff8ec;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 8px 24px rgba(163, 86, 3, 0.35);
  transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
.dh-orbit i:hover img { scale: 1.3; box-shadow: 0 0 0 4px #fff, 0 0 30px 6px rgba(255, 170, 40, 0.75); }
.dh-orbit i::after {
  content: attr(data-name); position: absolute; left: 50%; top: 100%; white-space: nowrap; pointer-events: none;
  padding: 3px 12px; border-radius: 999px; font-size: 14px; background: var(--ink); color: var(--on-ink);
  translate: -50% 14px; opacity: 0; transition: opacity 0.3s ease;
}
.dh-orbit i:hover::after { opacity: 1; }
.dh-core {
  position: absolute; left: 31%; top: 31%; width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  min-height: 0; background: radial-gradient(circle at 40% 35%, #fff, #fff4e0 60%, #ffe2b5); transform: translateZ(40px); cursor: pointer;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.6), 0 0 60px 10px rgba(251, 185, 99, 0.55), 0 20px 50px rgba(163, 86, 3, 0.3);
  transition: box-shadow 0.4s ease, scale 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dh-core img { width: 84%; height: 84%; object-fit: contain; transition: rotate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dh-core:hover { scale: 1.06; box-shadow: 0 0 0 6px #fff, 0 0 90px 24px rgba(255, 176, 50, 0.75), 0 20px 50px rgba(163, 86, 3, 0.3); }
.dh-core:hover img { rotate: 8deg; }
.dh-halo { position: absolute; inset: -10%; border-radius: 50%; border: 2px solid rgba(232, 130, 12, 0.6); opacity: 0; pointer-events: none; }
.dh-petal {
  position: absolute; width: 14px; height: 18px; border-radius: 80% 0 80% 0; pointer-events: none; z-index: 5;
  background: linear-gradient(135deg, #ffe08a, #f59e0b 60%, #e8820c);
}
.dh-copy { position: relative; }
.dh-kicker { margin: 0 0 6px; color: var(--saffron-deep); font-size: clamp(17px, 1.8vw, 20px); letter-spacing: 0.04em; }
.divine-hero h1 { margin: 0 0 14px; line-height: 1; }
.dh-hi {
  display: block; width: fit-content; font-size: clamp(56px, 8.5vw, 108px); font-weight: 600; line-height: 1.15; padding-bottom: 0.06em;
  font-family: 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Outfit', sans-serif;
  background: linear-gradient(100deg, #b85d00 0%, #e8820c 30%, #ffc24d 50%, #e8820c 70%, #b85d00 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(232, 130, 12, 0.25));
}
.dh-en { display: block; font-size: clamp(22px, 2.6vw, 32px); font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; margin-top: 6px; }
.dh-en .ch { display: inline-block; }
.dh-lead { color: var(--muted); font-size: clamp(17px, 1.8vw, 20px); max-width: 480px; margin: 0 0 26px; }
.dh-scroll {
  position: absolute; left: 50%; bottom: 10px; translate: -50% 0; width: 26px; height: 42px; border-radius: 14px;
  border: 2px solid color-mix(in srgb, var(--text) 35%, transparent);
}
.dh-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--saffron); }
@media (prefers-color-scheme: dark) {
  .dh-hi { background-image: linear-gradient(100deg, #e8820c 0%, #ffb02e 30%, #ffe7a8 50%, #ffb02e 70%, #e8820c 100%); }
  .dh-core { background: radial-gradient(circle at 40% 35%, #fff8ec, #f6e2c0 70%, #e9c48a); }
}
@media (max-width: 900px) {
  .divine-hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 8px; gap: 8px; }
  .dh-hi { margin-inline: auto; }
  .dh-lead { margin-inline: auto; }
  .dh-actions { justify-content: center; }
  .dh-scroll { display: none; }
}

/* Cosmic panel behind the deity sphere: a warm, lamp-lit night sky in both themes */
.cosmos {
  position: relative; isolation: isolate; overflow: hidden; margin: 36px 0; padding: clamp(28px, 5vw, 56px);
  border-radius: 36px; color: #f2efe9;
  background: radial-gradient(ellipse at 70% 40%, #5a2c06 0%, #2a1406 40%, #120904 75%, #080403 100%);
  box-shadow: 0 30px 80px rgba(60, 30, 5, 0.3);
}
.cosmos::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 230px 170px, #ffe7b0, transparent),
    radial-gradient(1px 1px at 60px 210px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 280px 40px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 180px 250px, rgba(255, 214, 150, 0.9), transparent);
  background-size: 300px 280px;
}
.cosmos h2 { color: #fff; }
.cosmos p { color: rgba(242, 239, 233, 0.78); }
.cosmos .eyebrow { background: rgba(255, 190, 90, 0.14); color: #ffc56b; margin-bottom: 14px; }
.cosmos .hint { font-size: 14px; color: rgba(255, 197, 107, 0.85); }

/* Divya darshan: a globe tiled with deities and dhams. site.js builds the tiles on
   latitude bands; each faces outward and the far side is hidden. Drag to turn it. */
.darshan { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; align-items: center; }
.sphere-stage {
  --r: 190px;
  position: relative; height: calc(var(--r) * 2 + 70px); display: grid; place-items: center;
  perspective: 1400px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.sphere-stage:active { cursor: grabbing; }
.sphere-glow {
  position: absolute; width: calc(var(--r) * 2.9); aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 176, 70, 0.4) 0%, rgba(232, 130, 12, 0.16) 45%, transparent 68%);
}
.sphere { position: relative; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-12deg); }
.sphere .tile {
  position: absolute; border-radius: 5px; background: #2a1a0c center / cover no-repeat;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 140, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.35);
}
.sphere .tile:hover { filter: brightness(1.25) saturate(1.1); box-shadow: inset 0 0 0 2px #ffc56b, 0 0 18px rgba(255, 190, 90, 0.8); }
/* Shading in front of the globe: a highlight up-left, darker towards the rim */
.sphere-shade {
  position: absolute; width: calc(var(--r) * 2.02); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22), transparent 32%),
    radial-gradient(circle, transparent 58%, rgba(20, 8, 2, 0.6) 100%);
  box-shadow: 0 0 60px rgba(255, 170, 60, 0.25);
}
.sphere-name {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0; padding: 6px 18px; border-radius: 999px;
  background: rgba(255, 190, 90, 0.16); color: #ffd58f; font-size: 18px; opacity: 0; transition: opacity 0.3s ease;
}
.sphere-name.show { opacity: 1; }

/* Naam jaap: a 108-bead mala that site.js lights up bead by bead */
.jaap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.mala { position: relative; width: min(420px, 100%); justify-self: center; }
.mala svg { display: block; width: 100%; height: auto; overflow: visible; }
.mala .thread { fill: none; stroke: color-mix(in srgb, var(--saffron) 35%, transparent); stroke-width: 1.2; }
.mala .bead {
  fill: #b9875a; stroke: rgba(90, 50, 15, 0.35); stroke-width: 0.6;
  transform-box: fill-box; transform-origin: center;
}
.mala .bead.lit { fill: #ffb02e; }
.mala .sumeru { fill: var(--saffron); }
.mala .tassel { fill: none; stroke: var(--saffron); stroke-width: 2; stroke-linecap: round; }
.mala-center {
  position: absolute; left: 50%; top: 47.6%; translate: -50% -50%; display: grid; justify-items: center; line-height: 1.1;
}
.mala-name { font-weight: 500; font-size: clamp(22px, 3vw, 30px); color: var(--saffron-deep); }
.mala-count { font-size: clamp(54px, 8vw, 84px); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.mala-center small { color: var(--muted); font-size: 15px; }

/* ॐ: the glyph on a dark medallion, a chakra drawn line by line behind it (site.js)
   whose rings then turn at different speeds, and golden smoke curling out on a canvas.
   No panel: it sits straight on the page, and the smoke spreads past the content
   column and fades out at its edges. */
:root { --om-1: #e9a43a; --om-2: #c9821a; --om-3: #9a5c0c; --om-4: #d99a2e; }
@media (prefers-color-scheme: dark) { :root { --om-1: #fff4cf; --om-2: #f7c85a; --om-3: #d1901f; --om-4: #ffe08a; } }
html, body { overflow-x: clip; }
.om-section {
  position: relative; isolation: isolate; padding: clamp(24px, 4vw, 48px) 0;
  display: grid; justify-items: center; gap: 4px; text-align: center;
}
.om-smoke {
  position: absolute; z-index: -1; pointer-events: none; top: -12%; height: 124%; left: 50%; width: 100vw; translate: -50% 0;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 46%, #000 45%, transparent 100%);
  mask: radial-gradient(ellipse 50% 50% at 50% 46%, #000 45%, transparent 100%);
}
.om-chakra .s1 { stop-color: var(--om-1); }
.om-chakra .s2 { stop-color: var(--om-2); }
.om-chakra .s3 { stop-color: var(--om-3); }
.om-chakra .s4 { stop-color: var(--om-4); }
.om-stage { width: min(520px, 94%); aspect-ratio: 1; }
.om-chakra { display: block; width: 100%; height: 100%; overflow: visible; }
.om-chakra .lines { fill: none; stroke: url(#om-gold); stroke-width: 1.6; stroke-linejoin: round; }
.om-chakra .ring-blades path { fill: rgba(247, 200, 90, 0.1); stroke-width: 1.8; }
.om-chakra .ring-petals path { fill: rgba(247, 200, 90, 0.07); }
.om-chakra .ring-star path { stroke-width: 1.2; opacity: 0.8; }
.om-chakra .ring-spokes path { stroke-width: 1; opacity: 0.7; }
.om-chakra .ring-dots circle { fill: var(--om-2); stroke: none; }
/* The chakra is centred on the viewBox origin, so rings turn about 0 0 */
.om-chakra [class^='ring-'] { transform-box: view-box; transform-origin: 0 0; }
.om-disc { fill: url(#om-disc); }
.om-disc-ring { fill: none; stroke: url(#om-gold); stroke-width: 3; filter: url(#om-glow); }
.om-glyph { fill: url(#om-gold); stroke: #ffe7a8; stroke-width: 0; filter: url(#om-glow); }
.om-copy h2 {
  margin: 8px auto 4px; width: fit-content; max-width: 100%; font-size: clamp(26px, 6vw, 40px);
  background: linear-gradient(100deg, var(--om-3), var(--om-2) 50%, var(--om-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-color-scheme: dark) {
  .om-copy h2 { background-image: linear-gradient(100deg, #ffe7a8, #f7c85a 50%, #ffd27a); }
}
.om-copy p { margin: 0; color: var(--muted); }

/* Gita: the banner pans slowly (Ken Burns) with a light sweep and rising embers; a
   parchment card below holds the shloka, revealed word by word by site.js. The plate
   covers the banner's own caption, whose Sanskrit the image generator garbled. */
.gita { padding-top: 40px; }
.gita-scene {
  position: relative; margin: 0; aspect-ratio: 1638 / 656; border-radius: 36px; overflow: hidden; isolation: isolate;
  container-type: inline-size; box-shadow: 0 30px 80px rgba(120, 60, 0, 0.3);
}
.gita-pan { position: absolute; inset: 0; transform-origin: 30% 60%; }
.gita-pan img { width: 100%; height: 100%; object-fit: cover; }
.gita-plate {
  position: absolute; left: 52.6%; top: 62.5%; width: 17.6%; height: 30%; display: grid; place-content: center; text-align: center;
  border-radius: 1cqw; background: radial-gradient(ellipse, rgba(70, 40, 20, 0.88), rgba(70, 40, 20, 0.7) 70%, rgba(70, 40, 20, 0) 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fbe6c4; line-height: 1.25;
}
.gita-plate b { font-weight: 400; font-size: 1.45cqw; letter-spacing: 0.08em; text-transform: uppercase; font-family: Georgia, 'Times New Roman', serif; }
.gita-plate span { font-size: 1.1cqw; color: #ffd27a; margin: 0.3cqw 0; }
.gita-plate small { font-size: 0.72cqw; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.9; font-family: Georgia, serif; }
.gita-sheen {
  position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 190, 0.35) 50%, transparent 62%);
}
.gita-embers { position: absolute; inset: 0; pointer-events: none; display: none; }
.gita-embers i { position: absolute; bottom: 0; width: 12px; height: 100%; opacity: 0; }
.gita-embers i::before {
  content: ''; position: absolute; bottom: 0; left: 3px; width: 5px; height: 5px; border-radius: 50%;
  background: #fff1c4; box-shadow: 0 0 10px 3px rgba(255, 180, 60, 0.9);
}
.gita-card {
  position: relative; width: min(820px, 92%); margin: -56px auto 0; padding: clamp(24px, 4vw, 40px); text-align: center;
  border-radius: 28px; background: linear-gradient(180deg, #fffaf1, #fdf0dc);
  border: 1px solid color-mix(in srgb, var(--saffron) 30%, transparent);
  box-shadow: 0 24px 60px rgba(120, 60, 0, 0.18);
}
.gita-card h2 {
  font-size: clamp(28px, 4vw, 42px); margin: 14px auto 4px; width: fit-content;
  background: linear-gradient(100deg, #c76c06, #e8820c 50%, #b85d00); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gita-card blockquote { margin: 10px 0 14px; }
.gita-card blockquote p { margin: 0; font-size: clamp(19px, 2.3vw, 25px); line-height: 1.75; color: #6b3a07; }
.gita-card .translation { color: var(--muted); margin: 0 auto; max-width: 620px; font-size: 16px; }
.gita-card .w { display: inline-block; }
.js-reveal .w { opacity: 0; }
@media (prefers-color-scheme: dark) {
  .gita-card { background: linear-gradient(180deg, #2a1d10, #1e150c); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
  .gita-card blockquote p { color: #ffe3b3; }
  .gita-card h2 { background-image: linear-gradient(100deg, #ffd27a, #ffb02e 50%, #ffe7a8); }
}

/* A trail of golden sparks behind the mouse (site.js; mouse only) */
.spark-trail {
  position: fixed; z-index: 50; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fffbe8 0%, #ffc04d 55%, transparent 72%);
  box-shadow: 0 0 10px 2px rgba(255, 176, 50, 0.65);
}

@media (max-width: 900px) {
  .darshan, .jaap { grid-template-columns: 1fr; gap: 12px; }
  .jaap .mala { order: 1; }
}
@media (max-width: 600px) {
  .sphere-stage { --r: 132px; }
  /* Phones: a taller crop of the banner's left half — Krishna, Arjuna and the Gita scroll;
     the caption is out of frame, so no plate is needed */
  .gita-scene { border-radius: 22px; aspect-ratio: 5 / 4; }
  .gita-pan img { object-position: 0% 50%; }
  .gita-plate { display: none; }
  .gita-card { margin-top: -20px; width: 96%; }
  .cosmos { border-radius: 28px; margin: 24px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html::before { animation: spin 240s linear infinite; }
  .cosmos::before { animation: twinkle 5s ease-in-out infinite alternate; }
  .sphere-glow { animation: breathe 6s ease-in-out infinite; }
  .dh-rays { animation: spin 80s linear infinite; }
  .dh-m1 { animation: spin 140s linear infinite; }
  .dh-m2 { animation: spin 90s linear infinite reverse; }
  .dh-orbit { animation: spin 40s linear infinite; }
  .dh-orbit b { animation: spin 40s linear infinite reverse; }
  .dh-orbit-plane:has(i:hover) .dh-orbit, .dh-orbit-plane:has(i:hover) .dh-orbit b { animation-play-state: paused; }
  .dh-halo { animation: ripple 3.6s ease-out infinite; }
  .dh-hi { animation: shimmer 7s linear infinite 2s; }
  .dh-scroll span { animation: scroll-cue 1.8s ease-in-out infinite; }
  .om-chakra .ring-blades { animation: spin 60s linear infinite; }
  .om-chakra .ring-dots { animation: spin 45s linear infinite reverse; }
  .om-chakra .ring-spokes { animation: spin 90s linear infinite reverse; }
  .om-chakra .ring-star { animation: spin 120s linear infinite; }
  .om-stage { animation: float 8s ease-in-out infinite; }
  .gita-pan { animation: ken-burns 28s ease-in-out infinite alternate; }
  .gita-sheen { animation: sheen 9s ease-in-out infinite 2s; }
  .gita-embers { display: block; }
  .gita-embers i { animation: spark 8s ease-in infinite; }
  .gita-embers i:nth-child(1) { left: 8%; }
  .gita-embers i:nth-child(2) { left: 21%; animation-delay: 2.2s; animation-duration: 9s; }
  .gita-embers i:nth-child(3) { left: 33%; animation-delay: 4.5s; }
  .gita-embers i:nth-child(4) { left: 46%; animation-delay: 1.1s; animation-duration: 10s; }
  .gita-embers i:nth-child(5) { left: 58%; animation-delay: 5.6s; }
  .gita-embers i:nth-child(6) { left: 71%; animation-delay: 3.3s; animation-duration: 9s; }
  .gita-embers i:nth-child(7) { left: 84%; animation-delay: 6.4s; }
  .gita-embers i:nth-child(8) { left: 93%; animation-delay: 0.6s; animation-duration: 11s; }
  body::before { animation: drift 70s linear infinite; }
  body::after { animation: drift-slow 140s linear infinite, twinkle 7s ease-in-out infinite alternate; }

  .hero > div:first-child > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero > div:first-child > :nth-child(2) { animation-delay: 0.08s; }
  .hero > div:first-child > :nth-child(3) { animation-delay: 0.16s; }
  .hero > div:first-child > :nth-child(4) { animation-delay: 0.24s; }
  .hero > div:first-child > :nth-child(5) { animation-delay: 0.32s; }
  .hero-art { animation: bloom 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-art .rays { animation: spin 120s linear infinite; }
  .hero-art .glow { animation: breathe 6s ease-in-out infinite; }
  .hero-art .halo { animation: float 7s ease-in-out infinite; }
  .hero-art .ring { animation: ripple 6s ease-out infinite; }
  .hero-art .ring + .ring { animation-delay: 3s; }
  .hero-art .mantra { animation: shimmer 6s linear infinite 1s; }
  .hero > div:first-child > p.hindi { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.16s both, shimmer 7s linear infinite 1.5s; }

  .hero-art .petals, .hero-art .sparks { display: block; }
  .hero-art .petals i { animation: fall 12s linear infinite; }
  .hero-art .petals i::before { animation: sway 3s ease-in-out infinite alternate; }
  .hero-art .petals i:nth-child(1) { left: 10%; }
  .hero-art .petals i:nth-child(2) { left: 30%; animation-duration: 14s; animation-delay: 3s; }
  .hero-art .petals i:nth-child(3) { left: 52%; animation-duration: 11s; animation-delay: 6s; }
  .hero-art .petals i:nth-child(4) { left: 72%; animation-duration: 15s; animation-delay: 1.5s; }
  .hero-art .petals i:nth-child(5) { left: 86%; animation-duration: 13s; animation-delay: 8s; }
  .hero-art .petals i:nth-child(6) { left: 20%; animation-duration: 16s; animation-delay: 10s; }
  .hero-art .petals i:nth-child(even)::before { animation-duration: 4s; }
  .hero-art .sparks i { animation: spark 7s ease-in infinite; }
  .hero-art .sparks i:nth-child(1) { left: 14%; }
  .hero-art .sparks i:nth-child(2) { left: 28%; animation-duration: 8s; animation-delay: 2.4s; }
  .hero-art .sparks i:nth-child(3) { left: 46%; animation-delay: 4.1s; }
  .hero-art .sparks i:nth-child(4) { left: 63%; animation-duration: 9s; animation-delay: 1.2s; }
  .hero-art .sparks i:nth-child(5) { left: 78%; animation-delay: 3.3s; }
  .hero-art .sparks i:nth-child(6) { left: 88%; animation-duration: 8s; animation-delay: 5.2s; }
  .hero-art .sparks i:nth-child(7) { left: 36%; animation-duration: 10s; animation-delay: 6s; }

  .brand img { animation: aura 5s ease-in-out infinite; }
  .btn-primary::after { animation: sheen 6s ease-in-out infinite 2s; }
  .band::after { animation: om 8s ease-in-out infinite; }
  .card, .card .icon { transition: transform 0.35s ease, box-shadow 0.35s ease; }
  .doc header > *, .toc, .prose { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .doc header > :nth-child(2) { animation-delay: 0.08s; }
  .toc { animation-delay: 0.12s; }
  .prose { animation-delay: 0.18s; }

  /* Cards and the band rise into place as they scroll into view (browsers that support it) */
  @supports (animation-timeline: view()) {
    .card, .band { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}

@keyframes drift { to { transform: translateY(-320px); } }
@keyframes drift-slow { to { transform: translateY(-560px); } }
@keyframes twinkle { from { opacity: 0.4; } to { opacity: 0.9; } }
@keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes bloom { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes breathe { 0%, 100% { opacity: 0.65; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes ripple { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.55); opacity: 0; } }
@keyframes shimmer { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
@keyframes fall { 0% { transform: translateY(-6%); opacity: 0; } 8% { opacity: 0.95; } 85% { opacity: 0.9; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes sway { from { transform: translateX(-10px) rotate(-25deg); } to { transform: translateX(14px) rotate(35deg); } }
@keyframes spark { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 0.8; } 100% { transform: translateY(-85%); opacity: 0; } }
@keyframes aura { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 8px rgba(232, 130, 12, 0.55)); } }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }
@keyframes scroll-cue { 0% { translate: 0 0; opacity: 0; } 30% { opacity: 1; } 100% { translate: 0 14px; opacity: 0; } }
@keyframes om { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.12; } }