/* ============================================================
   AstroVedanta — premium 3D Vedic design system
   Brand: AstroVedanta · Jyotish for the modern seeker
   Depth · glass · cosmic gold · dimensional cards
   ============================================================ */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}
/* Devanagari needs taller line boxes and slightly larger body type */
html[lang="hi"] {
  line-height: 1.85;
  font-size: 16.5px;
  letter-spacing: 0.01em;
}
html[lang="hi"] body { font-family: var(--font-body-hi); }
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4,
html[lang="hi"] h5,
html[lang="hi"] .display,
html[lang="hi"] .brand,
html[lang="hi"] .chart-title,
html[lang="hi"] .kpi .v,
html[lang="hi"] .strip .cell b,
html[lang="hi"] .stat .num,
html[lang="hi"] .price-card .amt {
  font-family: var(--font-display-hi);
  letter-spacing: 0;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 85% 55% at 5% -5%, rgba(255, 180, 60, .22), transparent 52%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(160, 90, 255, .16), transparent 48%),
    radial-gradient(ellipse 55% 40% at 80% 100%, rgba(40, 180, 160, .12), transparent 50%),
    radial-gradient(ellipse 45% 35% at 10% 90%, rgba(255, 100, 140, .1), transparent 48%),
    linear-gradient(165deg, #fff8ec 0%, #f3ebe0 40%, #ebe4f5 100%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.65;
  letter-spacing: -0.011em;
  transition: background .4s ease, color .4s ease;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  perspective: 1200px;
}
body.nav-open { overflow: hidden; touch-action: none; }
html[data-theme="dark"] body,
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 90% 55% at 10% -8%, rgba(255, 200, 80, .22), transparent 48%),
    radial-gradient(ellipse 70% 50% at 95% 5%, rgba(180, 100, 255, .28), transparent 46%),
    radial-gradient(ellipse 55% 40% at 50% 100%, rgba(40, 200, 180, .14), transparent 50%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(255, 80, 140, .12), transparent 48%),
    linear-gradient(170deg, #07091a 0%, #14103a 40%, #1a1048 70%, #0c1228 100%);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--gold); }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 .5rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0 0 1rem; text-wrap: pretty; }
button, input, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
}
button { cursor: pointer; }
::selection { background: var(--gold); color: #fff; }

/* ---------- Theme tokens ---------- */
:root {
  /* Display: classical literary serif — premium Jyotish headings */
  --font-display: "Cormorant Garamond", "Noto Serif Devanagari", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  /* Body: modern geometric sans — excellent UI readability */
  --font-body: "Manrope", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Hindi-first stacks (swap when html[lang=hi]) */
  --font-display-hi: "Noto Serif Devanagari", "Cormorant Garamond", Georgia, serif;
  --font-body-hi: "Noto Sans Devanagari", "Manrope", system-ui, sans-serif;
  /* Tabular / scores */
  --font-mono: "Manrope", ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;

  /* Jewel palette — saffron, amethyst, turquoise, rose */
  --bg: #fff6ea;
  --bg-2: #f0e6f8;
  --surface: #fffdf9;
  --surface-2: #faf3ff;
  --ink: #18122b;
  --ink-2: #3a2f55;
  --muted: #6a5f80;
  --line: #e8d8f0;
  --line-2: #d4c0e0;

  --gold: #d4a017;
  --gold-2: #ffd86b;
  --g1: #b07808;
  --g2: #ffcf4a;
  --g3: #fff3c4;
  --accent: #5b3fc4;
  --accent-2: #9b7dff;
  --accent-glow: rgba(155, 125, 255, .4);
  --rose: #e85d8a;
  --rose-soft: rgba(232, 93, 138, .15);
  --teal: #12b8a8;
  --teal-soft: rgba(18, 184, 168, .14);
  --violet: #7c4dff;
  --violet-soft: rgba(124, 77, 255, .14);
  --saffron: #ff9f1c;
  --saffron-soft: rgba(255, 159, 28, .16);
  --danger: #e04545;
  --ok: #12a060;
  --cosmic-1: #1a1040;
  --cosmic-2: #2e1f6e;
  --cosmic-3: #5a3fd4;

  /* Dimensional shadows */
  --shadow-sm:
    0 1px 2px rgba(34, 26, 47, .05),
    0 2px 6px rgba(34, 26, 47, .04);
  --shadow-md:
    0 4px 8px rgba(34, 26, 47, .06),
    0 12px 28px rgba(34, 26, 47, .1),
    0 0 0 1px rgba(255, 255, 255, .4) inset;
  --shadow-lg:
    0 8px 16px rgba(34, 26, 47, .08),
    0 24px 56px rgba(34, 26, 47, .14),
    0 0 0 1px rgba(255, 255, 255, .5) inset;
  --shadow-3d:
    0 2px 0 rgba(255, 255, 255, .55) inset,
    0 -2px 0 rgba(34, 26, 47, .04) inset,
    0 10px 30px rgba(34, 26, 47, .12),
    0 2px 6px rgba(185, 138, 31, .12);
  --shadow-gold:
    0 4px 16px rgba(196, 154, 31, .35),
    0 12px 32px rgba(154, 111, 12, .25),
    0 1px 0 rgba(255, 241, 176, .5) inset;
  --glass: rgba(255, 252, 247, .78);
  --glass-border: rgba(255, 255, 255, .65);
  --ring: rgba(196, 154, 31, .4);
  --radius: 18px;
  --radius-sm: 12px;
  --header-h: 72px;
  --grad-gold: linear-gradient(135deg, #c47808 0%, #e8b020 28%, #ffd54a 55%, #fff0a8 82%, #ffe082 100%);
  --grad-gold-soft: linear-gradient(145deg, rgba(255, 200, 80, .4), rgba(180, 100, 255, .12), rgba(18, 184, 168, .1));
  --grad-surface: linear-gradient(155deg, #ffffff 0%, #fff8ee 35%, #f8f0ff 70%, #eefaf8 100%);
  --grad-chromatic: linear-gradient(120deg, #ff9f1c, #e85d8a, #7c4dff, #12b8a8, #d4a017);
  --grad-chromatic-soft: linear-gradient(120deg, rgba(255,159,28,.2), rgba(232,93,138,.15), rgba(124,77,255,.18), rgba(18,184,168,.14));
  --grad-hero:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(255, 200, 80, .35), transparent 52%),
    radial-gradient(ellipse 60% 50% at 90% 15%, rgba(160, 90, 255, .42), transparent 48%),
    radial-gradient(ellipse 50% 40% at 55% 100%, rgba(18, 184, 168, .2), transparent 50%),
    radial-gradient(ellipse 40% 35% at 30% 70%, rgba(232, 93, 138, .15), transparent 48%),
    linear-gradient(160deg, #0c0a24 0%, #1a1050 32%, #2a1870 58%, #12103a 100%);
  --grad-section: linear-gradient(180deg, transparent, rgba(124, 77, 255, .04) 40%, rgba(255, 159, 28, .05) 70%, transparent);
}
[data-theme="dark"] {
  --bg: #07091c;
  --bg-2: #120e32;
  --surface: #18144a;
  --surface-2: #1f1a58;
  --ink: #faf4ea;
  --ink-2: #e0d6f0;
  --muted: #b0a4cc;
  --line: #3a3080;
  --line-2: #4d40a0;
  --gold: #ffc94a;
  --gold-2: #ffe08a;
  --g1: #e0a820;
  --g2: #ffd86b;
  --g3: #fff2b8;
  --accent: #c4b0ff;
  --accent-2: #e0d4ff;
  --accent-glow: rgba(196, 176, 255, .4);
  --rose: #ff7aa8;
  --teal: #3ee0d0;
  --violet: #b08cff;
  --saffron: #ffb84a;
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, .45),
    0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md:
    0 8px 24px rgba(0, 0, 0, .45),
    0 2px 0 rgba(255, 255, 255, .04) inset;
  --shadow-lg:
    0 16px 48px rgba(0, 0, 0, .55),
    0 0 40px rgba(212, 175, 55, .06);
  --shadow-3d:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 12px 36px rgba(0, 0, 0, .5),
    0 0 24px rgba(212, 175, 55, .08);
  --shadow-gold:
    0 6px 24px rgba(255, 200, 80, .35),
    0 0 48px rgba(160, 90, 255, .15);
  --glass: rgba(18, 14, 55, .86);
  --glass-border: rgba(255, 255, 255, .1);
  --ring: rgba(255, 200, 80, .5);
  --grad-gold: linear-gradient(135deg, #e0a010 0%, #ffc94a 40%, #ffe08a 75%, #fff5c8 100%);
  --grad-gold-soft: linear-gradient(145deg, rgba(255, 200, 80, .22), rgba(180, 100, 255, .16), rgba(62, 224, 208, .1));
  --grad-surface: linear-gradient(155deg, #221a5c 0%, #18144a 50%, #14103e 100%);
  --grad-chromatic: linear-gradient(120deg, #ffb84a, #ff7aa8, #b08cff, #3ee0d0, #ffc94a);
  --grad-chromatic-soft: linear-gradient(120deg, rgba(255,184,74,.2), rgba(255,122,168,.16), rgba(176,140,255,.2), rgba(62,224,208,.14));
  --grad-hero:
    radial-gradient(ellipse 70% 55% at 15% 0%, rgba(255, 200, 80, .3), transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 20%, rgba(180, 100, 255, .4), transparent 48%),
    radial-gradient(ellipse 45% 40% at 50% 100%, rgba(62, 224, 208, .18), transparent 50%),
    linear-gradient(160deg, #06051a 0%, #140e42 35%, #281870 65%, #0e0c2e 100%);
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: .75rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lead { font-size: 1.125rem; color: var(--ink-2); line-height: 1.7; font-weight: 400; }
.small { font-size: .875rem; color: var(--muted); line-height: 1.55; }
.gold-text { color: var(--gold); }
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------- Layout ---------- */
.container { width: min(1160px, calc(100% - 2.5rem)); margin-inline: auto; }
.container-wide { width: min(1320px, calc(100% - 2rem)); margin-inline: auto; }
.section { padding: 5.5rem 0; }
.section-tight { padding: 3rem 0; }
.section-alt {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(196, 154, 31, .06), transparent 60%),
    var(--bg-2);
  position: relative;
}
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.section-head { max-width: 720px; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(34, 26, 47, .06);
  padding-top: env(safe-area-inset-top, 0);
}
.nav { display: flex; align-items: center; gap: 1.25rem; height: var(--header-h); min-width: 0; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); min-width: 0; flex-shrink: 1; }
.brand .mark {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--grad-gold); color: #1a1420;
  border-radius: 14px; font-weight: 700; font-size: 1.2rem;
  box-shadow: var(--shadow-gold);
  transform: perspective(400px) rotateX(8deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.brand:hover .mark {
  transform: perspective(400px) rotateX(0) scale(1.05);
  box-shadow: 0 8px 28px rgba(196, 154, 31, .45);
}
.brand b { font-size: 1.28rem; font-weight: 700; letter-spacing: .01em; }
.brand small { display: block; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.nav-links { display: flex; gap: .25rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav-links a { color: var(--ink-2); font-size: .92rem; padding: .5rem .72rem; border-radius: 8px; }
.nav-links a:hover { color: var(--gold); background: rgba(185,138,31,.08); }
.nav-links .active { color: var(--gold); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: .6rem; margin-left: .5rem; flex-shrink: 0; }
.nav-toggle, .theme-toggle, .icon-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 10px; width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 1.05rem; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.lang-pill {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 10px; height: 44px; padding: 0 .55rem; display: inline-flex; align-items: center;
  gap: .3rem; font-size: .8rem; letter-spacing: .04em; font-weight: 600;
  white-space: nowrap; transition: border-color .2s ease, color .2s ease;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.lang-pill:hover { border-color: var(--gold); color: var(--gold); }
.lang-pill .lp-en, .lang-pill .lp-hi { opacity: .55; }
.lang-pill .lp-en.on, .lang-pill .lp-hi.on { opacity: 1; color: var(--gold); }
.nav-toggle { display: none; margin-left: .25rem; }
.theme-toggle:hover, .icon-btn:hover, .nav-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Dropdown ---------- */
.dropdown { position: relative; }
.dropdown > a { display: inline-flex; align-items: center; gap: .3rem; }
.dropdown > a::after { content: "\25BE"; font-size: .7rem; color: var(--muted); }
.drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: .45rem; opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 70; display: flex; flex-direction: column; gap: .1rem;
}
.dropdown:hover .drop-menu, .dropdown:focus-within .drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop-menu a { padding: .55rem .75rem; border-radius: 9px; color: var(--ink-2); font-size: .9rem; white-space: nowrap; }
.drop-menu a:hover { background: rgba(185,138,31,.1); color: var(--gold); }

/* ---------- Buttons (dimensional) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; padding: .75rem 1.4rem;
  border-radius: 14px; border: 1px solid transparent;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .2s ease, border-color .2s;
  white-space: nowrap;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  transform-style: preserve-3d;
}
.btn:hover { transform: translateY(-3px) scale(1.02); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold {
  background: var(--grad-gold);
  color: #1a1420;
  border-color: rgba(255, 241, 176, .35);
  box-shadow: var(--shadow-gold);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-gold:hover {
  filter: brightness(1.06) saturate(1.08);
  box-shadow:
    0 8px 28px rgba(196, 154, 31, .45),
    0 0 40px rgba(240, 208, 106, .25);
}
.btn-outline {
  border-color: var(--line-2);
  color: var(--ink);
  background: var(--grad-surface);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(196, 154, 31, .12);
}
.btn-ghost { color: var(--ink-2); background: transparent; }
.btn-ghost:hover { color: var(--gold); }
.btn-sm { padding: .45rem .9rem; font-size: .85rem; border-radius: 11px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.1rem; min-width: 0; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; }
.field label .req { color: var(--gold); }
.input, select.input, textarea.input {
  width: 100%; max-width: 100%; padding: .7rem .85rem;
  border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--surface); color: var(--ink); font-size: 1rem; /* 16px+ avoids iOS zoom */
  transition: border-color .2s ease, box-shadow .2s ease;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
textarea.input { min-height: 96px; resize: vertical; }
.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--ring), var(--shadow-sm), 0 0 24px rgba(196, 154, 31, .12);
}
.input::placeholder { color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; line-height: 1.45; }
.hint .gold { color: var(--gold); }
.place-wrap, .place-field { position: relative; }
.place-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% - .15rem);
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  max-height: 260px;
  overflow: auto;
  box-shadow: var(--shadow-md, 0 12px 32px rgba(18, 21, 58, .18));
}
.place-suggest button {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: 100%; text-align: left; cursor: pointer;
  padding: .55rem .8rem; border: 0; background: transparent; color: var(--ink);
  font: inherit; border-bottom: 1px solid var(--line);
}
.place-suggest button:last-child { border-bottom: 0; }
.place-suggest button:hover, .place-suggest button:focus {
  background: var(--ring, rgba(196, 154, 31, .12));
  outline: none;
}
.place-suggest small { color: var(--muted); font-size: .78rem; }
.place-advanced { margin-top: .4rem; color: var(--muted); font-size: .78rem; }
.place-advanced summary { cursor: pointer; }
.strip .place-wrap { min-width: 11rem; }
.strip .place-wrap .input {
  border: none; background: transparent; padding: .15rem .3rem;
  min-height: 0; font-size: .95rem; color: var(--ink);
}
input[type="checkbox"], input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--gold);
  flex-shrink: 0;
  margin-top: .15rem;
}

/* ---------- Cards (3D glass) ---------- */
.card {
  background: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3d);
  padding: 1.5rem;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s ease;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.55) 0%, transparent 42%, transparent 100%);
  pointer-events: none;
  opacity: .7;
}
[data-theme="dark"] .card::before {
  background: linear-gradient(145deg, rgba(255,255,255,.07) 0%, transparent 45%);
}
.card-hover { cursor: pointer; }
.card-hover:hover {
  transform: translateY(-8px) rotateX(2deg) scale(1.015);
  box-shadow:
    0 4px 0 rgba(255,255,255,.4) inset,
    0 20px 48px rgba(34, 26, 47, .16),
    0 0 0 1px rgba(196, 154, 31, .35),
    0 0 40px rgba(196, 154, 31, .12);
  border-color: rgba(196, 154, 31, .45);
}
.card-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--grad-gold-soft);
  color: var(--gold);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(196, 154, 31, .2);
  transform: translateZ(12px);
}
.card h3 { font-size: 1.28rem; position: relative; }

/* ---------- Hero (cosmic depth) ---------- */
.hero {
  position: relative; color: #f4efdf; overflow: hidden;
  background: var(--grad-hero);
  padding: 5.5rem 0 6rem;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(circle at 30% 40%, rgba(240, 208, 106, .15), transparent 28%),
    radial-gradient(circle at 70% 60%, rgba(123, 104, 196, .2), transparent 32%);
  animation: heroGlow 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.8px 1.8px at 12% 22%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.2px 1.2px at 34% 68%, rgba(240,208,106,.55), transparent),
    radial-gradient(1.8px 1.8px at 55% 12%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 72% 46%, rgba(200,180,255,.5), transparent),
    radial-gradient(1.8px 1.8px at 88% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 46% 84%, rgba(240,208,106,.4), transparent),
    radial-gradient(1px 1px at 20% 80%, rgba(255,255,255,.4), transparent);
  opacity: .85;
}
.hero .container { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--gold-2); font-size: .74rem; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 1.25rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(240, 208, 106, .25);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
}
.hero-eyebrow::before { content: "\2638"; font-size: 1rem; filter: drop-shadow(0 0 8px rgba(240,208,106,.6)); }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 5.8vw, 4.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 1.1rem;
  text-shadow: 0 4px 40px rgba(0,0,0,.35), 0 0 60px rgba(240,208,106,.12);
}
.hero h1 em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(120deg, #f5d97a, #fff1b0, #e0b93a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(240, 208, 106, .35));
}
.hero p {
  color: rgba(244,239,223,.9);
  font-size: 1.125rem;
  max-width: 560px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-search {
  margin-top: 2.6rem; max-width: 640px;
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-radius: 20px; padding: 1rem;
  display: flex; gap: .6rem; align-items: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 20px 50px rgba(0,0,0,.35),
    0 0 40px rgba(240, 208, 106, .08);
}
.hero-search .place-wrap { flex: 1; min-width: 8rem; }
.hero-search .input {
  border: none;
  background: rgba(255,255,255,.94);
  color: #221a2f;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) inset;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem; color: rgba(244,239,223,.8); font-size: .9rem; }
.hero-meta b { color: var(--gold-2); text-shadow: 0 0 20px rgba(240,208,106,.4); }
.hero-mandala {
  position: absolute; right: -100px; top: 50%;
  transform: translateY(-50%);
  opacity: .22; width: 560px; height: 560px;
  color: #f0d06a;
  filter: drop-shadow(0 0 40px rgba(240, 208, 106, .25));
  animation: mandalaSpin 80s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes mandalaSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}
@keyframes heroGlow {
  from { transform: scale(1) translate(0, 0); opacity: .9; }
  to { transform: scale(1.08) translate(2%, -2%); opacity: 1; }
}

/* ---------- Live panchang strip ---------- */
.quantum { position: relative; z-index: 5; margin-top: -2.6rem; }
.strip {
  background: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5) inset;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.strip .cell {
  padding: 1.15rem 1.25rem;
  border-right: 1px solid var(--line);
  transition: background .2s ease;
}
.strip .cell:hover { background: var(--grad-gold-soft); }
.strip .cell:last-child { border-right: none; }
.strip .cell small {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold); font-weight: 700; display: block; margin-bottom: .3rem;
}
.strip .cell b { font-family: var(--font-display); font-size: 1.15rem; }

/* ---------- Stat tiles ---------- */
.stat { text-align: center; padding: 1.4rem 1rem; }
.stat .num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--gold); line-height: 1; }
.stat .lbl { font-size: .78rem; color: var(--muted); margin-top: .35rem; }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tbl th, .tbl td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.tbl th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl-wrap { overflow-x: auto; }

/* ---------- Tags / chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .75rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  background: var(--grad-gold-soft);
  color: var(--gold);
  border: 1px solid rgba(196, 154, 31, .3);
  box-shadow: 0 2px 8px rgba(196, 154, 31, .12);
}
.chip.gold {
  background: var(--grad-gold);
  color: #1a1420;
  border: none;
  box-shadow: var(--shadow-gold);
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}
.chip.ghost { background: transparent; color: var(--muted); border-color: var(--line-2); box-shadow: none; }

/* ---------- Accordion (FAQ) ---------- */
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: .8rem; overflow: hidden; }
.faq summary { padding: 1rem 1.2rem; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--gold); font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details .body { padding: 0 1.2rem 1.1rem; color: var(--muted); }

/* ---------- Testimonials ---------- */
.tquote { font-style: italic; color: var(--ink-2); font-size: 1.02rem; }
.tname { font-weight: 700; margin-top: 1rem; }
.ttitle { font-size: .8rem; color: var(--muted); }
.stars { color: var(--gold); letter-spacing: 2px; }

/* ---------- Pricing ---------- */
.price-card { position: relative; overflow: hidden; }
.price-card .amt { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--gold); }
.price-card .amt small { font-size: 1rem; color: var(--muted); }
.price-feats { list-style: none; padding: 0; margin: 1.2rem 0; }
.price-feats li { padding: .42rem 0; padding-left: 1.7rem; position: relative; font-size: .93rem; color: var(--ink-2); }
.price-feats li::before { content: "\2726"; position: absolute; left: 0; color: var(--gold); }
.price-feats li.off { opacity: .45; }
.price-feats li.off::before { content: "\00B7"; }
.price-pop { background: var(--grad-gold); color: #fff; padding: .3rem 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; position: absolute; top: 0; right: 0; border-bottom-left-radius: 12px; }

/* ---------- Kundli charts ---------- */
.chart-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.chart-svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.chart-box { fill: var(--surface); stroke: var(--gold); stroke-width: 1.6; }
.chart-box.house1 { fill: rgba(185,138,31,.10); }
.chart-txt {
  fill: var(--ink-2);
  font-size: 12px;
  font-family: var(--font-body), "Noto Sans Devanagari", "Noto Serif Devanagari", sans-serif;
  dominant-baseline: middle;
}
.chart-txt.sign { fill: var(--gold); font-weight: 700; }
.chart-txt.planet { fill: var(--ink); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; }
.chart-txt.house-no { fill: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-retro { fill: #b33a3a; font-weight: 700; }
.chart-legend {
  margin: .65rem auto 0;
  max-width: 440px;
  text-align: center;
  line-height: 1.45;
  color: var(--muted);
  font-size: .72rem;
  font-family: var(--font-body), "Noto Sans Devanagari", sans-serif;
}
.chart-wrap { text-align: center; }
html[lang="hi"] .chart-txt.sign { font-size: 10px; }
html[lang="hi"] .chart-txt.planet { font-size: 10px; }
.chart-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 3.5rem 0 2rem; margin-top: 4rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 2rem; }
.foot-grid h4 { font-size: 1.02rem; margin-bottom: 1rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .5rem; }
.foot-grid a { color: var(--muted); font-size: .92rem; }
.foot-grid a:hover { color: var(--gold); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .82rem; color: var(--muted); }
.foot-legal { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.foot-legal a { color: var(--muted); }
.foot-legal a:hover { color: var(--gold); }
.legal-doc { max-width: 760px; }
.legal-doc h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.legal-doc p { color: var(--muted); line-height: 1.65; }
.disclaimer { margin-top: 1.5rem; padding: .9rem 1.1rem; border-left: 3px solid var(--gold); background: rgba(185,138,31,.08); border-radius: 0 10px 10px 0; font-size: .82rem; color: var(--muted); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(10,8,24,.6); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); width: min(440px, 100%); max-height: 92vh; overflow-y: auto; padding: 2rem; position: relative; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1rem; }
.modal h2 { font-size: 1.7rem; }
.modal-tabs { display: flex; gap: .4rem; border: 1px solid var(--line); border-radius: 12px; padding: .3rem; margin-bottom: 1.4rem; }
.modal-tabs button { flex: 1; padding: .55rem; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; font-size: .9rem; }
.modal-tabs button.active { background: var(--grad-gold); color: #fff; }
.divider { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .8rem; margin: 1.2rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-social { display: flex; align-items: center; justify-content: center; gap: .6rem; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); width: 100%; padding: .7rem; border-radius: 11px; font-weight: 600; margin-bottom: .7rem; }
.btn-social:hover { border-color: var(--gold); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg);
  padding: .8rem 1.4rem; border-radius: 12px; font-size: .9rem;
  box-shadow: var(--shadow-lg); opacity: 0; transition: all .3s ease;
  z-index: 100; max-width: min(420px, calc(100% - 2rem));
  text-align: center; line-height: 1.4;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  background: var(--grad-hero);
  color: #f4efdf;
  padding: 4rem 0 4.6rem;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 40%, rgba(123, 104, 196, .25), transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(240, 208, 106, .12), transparent 50%);
  pointer-events: none;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(240,208,106,.45), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.35), transparent);
  opacity: .7; pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-shadow: 0 4px 32px rgba(0,0,0,.3);
}
.page-hero p {
  color: rgba(244,239,223,.9);
  max-width: 640px;
  font-size: 1.06rem;
  line-height: 1.7;
  font-weight: 400;
}
.breadcrumb {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: .8rem;
  font-weight: 600;
}
.breadcrumb a { color: var(--gold-2); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.tabs-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: .35rem;
  margin-left: -.15rem;
  margin-right: -.15rem;
  padding-left: .15rem;
  padding-right: .15rem;
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.tabs-scroll::-webkit-scrollbar { height: 4px; }
.tabs-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.tab {
  padding: .6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}
.tab:hover { border-color: var(--gold); color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tab.active { background: var(--grad-gold); color: #fff; border-color: transparent; }

/* ---------- Segmented control ---------- */
.segment {
  display: inline-flex; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 12px; padding: .25rem; gap: .25rem;
  max-width: 100%; box-sizing: border-box;
}
.segment button {
  border: none; background: transparent; padding: .55rem 1rem; border-radius: 9px;
  font-weight: 600; color: var(--muted); font-size: .88rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
  min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.segment button:hover { color: var(--ink); }
.segment button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.segment button.active { background: var(--grad-gold); color: #fff; }

/* ---------- Vastu compass ---------- */
.vastu-compass { display: grid; grid-template-areas: "nw n ne" "w c e" "sw s se"; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: .55rem; max-width: 360px; margin: 0 auto; }
.vc-cell { border: 1px solid var(--line-2); background: var(--surface); border-radius: 14px; padding: .9rem .4rem; text-align: center; cursor: pointer; transition: all .2s ease; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; }
.vc-cell:hover { border-color: var(--gold); transform: translateY(-2px); }
.vc-cell.active { background: rgba(185,138,31,.1); border-color: var(--gold); }
.vc-cell .dir { font-weight: 800; font-family: var(--font-display); font-size: 1.05rem; }
.vc-cell .full { font-size: .66rem; color: var(--muted); line-height: 1.15; }
.vc-center { grid-area: c; border: 1.5px dashed var(--line-2); border-radius: 14px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .72rem; color: var(--muted); background: var(--surface-2); }
.vc-nw { grid-area: nw; } .vc-n { grid-area: n; } .vc-ne { grid-area: ne; }
.vc-w { grid-area: w; } .vc-e { grid-area: e; }
.vc-sw { grid-area: sw; } .vc-s { grid-area: s; } .vc-se { grid-area: se; }

/* ---------- Vastu advanced sections ---------- */
.vastu-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.vastu-room-seg { display: flex; flex-wrap: wrap; max-width: 100%; }
.vastu-room-seg button { font-size: .8rem; padding: .45rem .75rem; }
.vastu-sleep-card {
  border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 14px;
  padding: 1rem 1.1rem; text-align: left; cursor: pointer; transition: all .2s ease; color: inherit; font: inherit;
}
.vastu-sleep-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.vastu-sleep-card.active { border-color: var(--gold); background: rgba(185,138,31,.08); }
.vastu-sleep-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vastu-dosha-card { padding: 1.15rem 1.2rem; }
.vastu-fix-item { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.vastu-fix-item:last-child { border-bottom: none; }
.chip.vastu-q-ok { background: rgba(46,140,90,.12); color: var(--ok); border-color: rgba(46,140,90,.28); }
.chip.vastu-q-mid { background: rgba(185,138,31,.12); color: var(--gold); border-color: rgba(185,138,31,.28); }
.chip.vastu-q-bad { background: rgba(179,58,58,.1); color: #b33a3a; border-color: rgba(179,58,58,.25); }
.v.vastu-q-ok { color: var(--ok) !important; }
.v.vastu-q-mid { color: var(--gold) !important; }
.v.vastu-q-bad { color: #b33a3a !important; }

/* ---------- Vastu plot layout builder ---------- */
.vastu-layout-result {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.vastu-layout-result[hidden] { display: none !important; }
.vastu-layout-output { display: block; width: 100%; }
.vastu-ratio-card { padding: 1.1rem 1.2rem; }
.vastu-floor-wrap { padding: 1.25rem 1.35rem; overflow: visible; }
.vastu-floor-canvas {
  width: 100%;
  overflow-x: auto;
  background:
    linear-gradient(180deg, rgba(250,246,238,.9), rgba(255,255,255,.5)),
    repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(185,138,31,.06) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(185,138,31,.06) 20px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: .75rem;
}
.vastu-floor-svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
  font-family: var(--font-body), system-ui, sans-serif;
}
.vl-svg-wall { fill: #faf8f3; stroke: #3d2e1a; stroke-width: 2; }
.vl-svg-room { transition: opacity .15s ease; }
.vl-svg-center { stroke-dasharray: 4 3; }
.vl-svg-ent-zone { stroke: #b98a1f !important; stroke-width: 2.5 !important; }
.vl-svg-door { fill: #b98a1f; stroke: #3d2e1a; stroke-width: 1; }
.vl-svg-door-lbl { fill: #b98a1f; font-size: 10px; font-weight: 700; }
.vl-svg-title { fill: var(--ink, #2a2118); font-size: 14px; font-weight: 700; font-family: var(--font-display), serif; }
.vl-svg-zone { fill: #6b5a45; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.vl-svg-room-name { fill: #2a2118; font-weight: 700; }
.vl-svg-dim { fill: #8a7355; font-size: 10px; }
.vl-svg-dimline { stroke: #8a7355; stroke-width: 1.2; }
.vl-svg-cardinal { fill: #b98a1f; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
[data-theme="dark"] .vastu-floor-canvas {
  background:
    linear-gradient(180deg, rgba(40,32,28,.9), rgba(30,24,22,.6)),
    repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(185,138,31,.08) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(185,138,31,.08) 20px);
}
[data-theme="dark"] .vl-svg-title,
[data-theme="dark"] .vl-svg-room-name { fill: #f4efdf; }
[data-theme="dark"] .vl-svg-zone { fill: #c4b5a0; }
[data-theme="dark"] .vl-svg-wall { fill: #2a241f; }
.vastu-layout-grid {
  display: grid;
  grid-template-areas:
    "nw n ne"
    "w c e"
    "sw s se";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(110px, auto));
  gap: .5rem;
  max-width: 720px;
  margin: 0 auto;
}
.vl-cell {
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 14px;
  padding: .65rem .55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .2rem;
  text-align: center;
  min-height: 110px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vl-cell:hover { border-color: var(--gold); }
.vl-nw { grid-area: nw; } .vl-n { grid-area: n; } .vl-ne { grid-area: ne; }
.vl-w { grid-area: w; } .vl-c { grid-area: c; } .vl-e { grid-area: e; }
.vl-sw { grid-area: sw; } .vl-s { grid-area: s; } .vl-se { grid-area: se; }
.vl-center {
  border-style: dashed;
  border-width: 1.5px;
  background: rgba(185,138,31,.06);
}
.vl-entrance {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(185,138,31,.18);
  background: rgba(185,138,31,.1);
}
.vl-code {
  font-weight: 800;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .02em;
}
.vl-icon { font-size: 1.25rem; line-height: 1.2; }
.vl-name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.vl-use {
  font-size: .68rem;
  color: var(--muted);
  line-height: 1.3;
  max-width: 100%;
}
.vl-dim {
  font-size: .62rem;
  color: var(--gold);
  font-weight: 600;
  margin-top: auto;
  padding-top: .25rem;
}
.vastu-layout-tips {
  margin: .5rem 0 0;
  padding-left: 1.15rem;
}
.vastu-layout-tips li { margin: .35rem 0; }
@media (max-width: 640px) {
  .vastu-layout-grid {
    grid-template-rows: repeat(3, minmax(100px, auto));
    gap: .4rem;
  }
  .vl-cell { min-height: 96px; padding: .5rem .35rem; }
  .vl-use { font-size: .62rem; }
  .vl-name { font-size: .66rem; }
}
@media (max-width: 900px) {
  #vastuMain { grid-template-columns: 1fr !important; }
}

/* ---------- Kundli predictions (पूर्वानुमान) path cards ---------- */
.pred-intro-card { margin-bottom: .25rem; }
.pred-legend {
  display: flex; flex-wrap: wrap; gap: .65rem 1.1rem;
  list-style: none; padding: 0; margin: .5rem 0 0;
  color: var(--muted);
}
.pred-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.pred-dot {
  width: .65rem; height: .65rem; border-radius: 50%; display: inline-block;
  flex-shrink: 0;
}
.pred-dot-high { background: var(--ok, #2f7d4f); }
.pred-dot-mid { background: var(--gold); }
.pred-dot-mix { background: #c9892e; }
.pred-dot-low { background: #b33a3a; }
.pred-card { min-width: 0; }
.pred-card .pred-score {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.pred-path { margin-top: .85rem; }
.pred-simple, .pred-path-body, .pred-now {
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 .55rem;
  color: var(--ink-2);
}
.pred-steps {
  margin: .35rem 0 .75rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.pred-steps li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--ink-2);
  padding: .45rem .55rem;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.pred-step-num {
  flex-shrink: 0;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
  background: var(--grad-gold, linear-gradient(135deg, #a67b12, #efd37c));
  color: #fff;
  margin-top: .1rem;
}
.pred-timing {
  padding: .55rem .7rem;
  border-radius: 10px;
  background: rgba(185,138,31,.08);
  border: 1px solid rgba(185,138,31,.22);
  color: var(--ink-2);
}
.pred-tech {
  border-top: 1px dashed var(--line);
  padding-top: .45rem;
}
.pred-tech summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
}
.pred-tech summary::-webkit-details-marker { display: none; }
.pred-tech summary::before { content: '\25B8 '; color: var(--gold); }
.pred-tech[open] summary::before { content: '\25BE '; }
.pred-high { border-color: rgba(47,125,79,.28); }
.pred-mid { border-color: rgba(185,138,31,.3); }
.pred-mix { border-color: rgba(201,137,46,.35); }
.pred-low { border-color: rgba(179,58,58,.28); }
@media (max-width: 720px) {
  .pred-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Result panels ---------- */
.panel { display: none; }
.panel.active { display: block; animation: fadeUp .45s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- KPI / pill rows ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.kpi {
  background: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.05rem 1.15rem;
  min-width: 0;
  box-shadow: var(--shadow-3d);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kpi::after {
  content: "";
  position: absolute; top: 0; right: 0; width: 80px; height: 80px;
  background: radial-gradient(circle at 100% 0%, rgba(196, 154, 31, .18), transparent 70%);
  pointer-events: none;
}
.kpi:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 28px rgba(196, 154, 31, .12);
}
.kpi .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.kpi .v {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: var(--gold);
  overflow-wrap: anywhere;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(196, 154, 31, .2);
}

/* ---------- Planet dot colors ---------- */
.p-sun { color: #e8a53a; } .p-moon { color: #c9cede; } .p-mars { color: #d2543f; }
.p-mercury { color: #6f9c57; } .p-jupiter { color: #d9a441; } .p-venus { color: #cf8f9c; }
.p-saturn { color: #7a7f9e; } .p-rahu { color: #8a6fb0; } .p-ketu { color: #a5826b; }

/* ---------- Timeline (dasha) ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--line-2); }
.tl-item { position: relative; margin-bottom: 1.1rem; }
.tl-item::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(185,138,31,.18); }
.tl-item .tl-period { font-size: .78rem; color: var(--muted); }
.tl-item b { font-family: var(--font-display); font-size: 1.12rem; }
.tl-item.current b { color: var(--gold); }

/* ---------- Advanced kundli: life path, predictions, strength bars ---------- */
.life-hero { background: linear-gradient(135deg, rgba(185,138,31,.08), rgba(185,138,31,.02)); border-color: rgba(185,138,31,.28); }
.life-score-row { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; margin-top: .6rem; }
.life-score-big { min-width: 88px; text-align: center; }
.life-score-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--gold); line-height: 1; display: block; }
.life-score-pill { display: inline-flex; align-items: center; gap: .55rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; }
.life-score-pill .life-score-num { font-size: 1.25rem; display: inline; }
.str-bar-row { display: grid; grid-template-columns: 88px 1fr 42px; gap: .55rem; align-items: center; margin: .4rem 0; }
.str-bar-label { font-size: .82rem; font-weight: 600; }
.str-bar { height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.str-bar > span { display: block; height: 100%; background: var(--grad-gold); border-radius: 99px; min-width: 2px; }
.pred-card { transition: transform .18s ease, border-color .18s ease; }
.pred-card:hover { transform: translateY(-2px); }
.pred-score { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--gold); line-height: 1; }
.pred-high { border-color: rgba(90,140,80,.35); }
.pred-mid { border-color: rgba(185,138,31,.35); }
.pred-mix { border-color: rgba(180,120,40,.4); }
.pred-low { border-color: rgba(179,58,58,.3); }
.house-score .chip { font-size: .78rem; }
@media (max-width: 640px) {
  .str-bar-row { grid-template-columns: 72px 1fr 36px; }
  .life-score-num { font-size: 2rem; }
}

/* ---------- Blog cards ---------- */
.blog-card img { border-radius: 12px 12px 0 0; aspect-ratio: 16/10; object-fit: cover; }
.blog-card .meta { font-size: .78rem; color: var(--muted); display: flex; gap: .8rem; margin-bottom: .4rem; }

/* ---------- Animations ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; } }

/* ---------- Utility ---------- */
.divider-line { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.ring { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: conic-gradient(var(--gold) calc(var(--p,50)*1%), rgba(185,138,31,.15) 0); }
.ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
/* .mono defined in typography helpers */

/* ---------- Shared page form / layout helpers ---------- */
.page-form-card { max-width: 820px; margin: 0 auto; }
.page-form-card.narrow { max-width: 760px; }
.page-form-card.wide { max-width: 860px; }
.page-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.page-split.panch-main {
  grid-template-columns: 1fr 1.3fr;
}
.page-split.contact-main {
  grid-template-columns: 1.1fr 1fr;
}
.page-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.page-privacy-note {
  text-align: center;
  color: var(--muted);
  margin-top: .75rem;
  margin-bottom: 0;
}
.page-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.auto-grid.tight { gap: 1rem; }
.auto-grid.sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.auto-grid.lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.auto-fill-blog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.3rem;
}
details {
  border-bottom: 1px solid var(--line);
  padding: .85rem 0;
}
details:last-child { border-bottom: none; }
details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink);
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: '+';
  color: var(--gold);
  font-weight: 700;
  width: 1.1rem;
  flex-shrink: 0;
}
details[open] summary::before { content: '\2212'; }
details .body {
  margin-top: .55rem;
  font-size: .92rem;
  color: var(--ink-2);
  line-height: 1.55;
  padding-left: 1.6rem;
}
.input:focus-visible,
.tab:focus-visible,
.btn:focus-visible,
.segment button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Tarot ---------- */
.tarot-spread {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.tarot-card {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem .9rem 1rem;
  text-align: center;
  min-height: 200px;
  min-width: 0;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.04));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tarot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: rgba(201, 162, 39, .35);
}
.tarot-card-rev {
  border-color: rgba(179,58,58,.4);
  background: linear-gradient(180deg, rgba(179,58,58,.08), var(--surface-2));
}
.tarot-pos {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: .35rem;
  overflow-wrap: anywhere;
}
.tarot-glyph { font-size: 1.9rem; margin: .35rem 0; line-height: 1; }
.tarot-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  margin: .3rem 0 .1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.tarot-bilingual {
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: .25rem;
  opacity: .9;
  overflow-wrap: anywhere;
}
.tarot-kw { margin: .55rem 0 0; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }
.tarot-orient { margin-top: .4rem; display: inline-flex; flex-wrap: wrap; justify-content: center; }
.tarot-read-card {
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.tarot-read-card:last-of-type { border-bottom: none; }
.tarot-read-card h4 { overflow-wrap: anywhere; line-height: 1.35; }
.tarot-alt-name {
  font-weight: 500;
  color: var(--muted);
  font-size: .88em;
}
.tarot-pos-adv {
  color: var(--muted);
  font-style: italic;
  margin-top: .35rem;
}

/* ---------- Palmistry ---------- */
.palm-capture { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.palm-preview-wrap {
  position: relative;
  width: 100%;
  max-width: min(420px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 18px;
  border: 1.5px dashed var(--line-2);
  background:
    radial-gradient(circle at 30% 20%, rgba(201,162,39,.08), transparent 50%),
    var(--surface-2);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.palm-video, .palm-img, .palm-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: 100%;
}
.palm-placeholder {
  text-align: center;
  color: var(--muted);
  padding: 1.5rem 1rem;
  max-width: 100%;
}
.palm-placeholder span { font-size: 3rem; display: block; margin-bottom: .5rem; }
.palm-placeholder p { margin: 0; overflow-wrap: anywhere; }
.palm-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
  width: 100%;
}
.palm-capture-actions .btn,
.palm-capture-actions label.btn {
  flex: 1 1 auto;
  min-width: min(160px, 100%);
  justify-content: center;
}
.palm-line-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: .45rem .8rem;
}
.palm-line-grid {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
}
.palm-line-row {
  display: grid;
  grid-template-columns: 1fr minmax(140px, 200px);
  gap: .5rem .75rem;
  align-items: center;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  min-width: 0;
}
.palm-qual-wrap { min-width: 0; width: 100%; }
.palm-qual-wrap .input,
.input-sm {
  width: 100%;
  padding: .5rem .65rem;
  font-size: 1rem;
  min-height: 44px;
}
.palm-check {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .92rem;
  cursor: pointer;
  min-height: 44px;
  padding: .2rem 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.35;
}
.palm-check span { overflow-wrap: anywhere; }
.palm-shape-seg { display: flex; flex-wrap: wrap; width: 100%; }
.palm-shape-seg button {
  flex: 1 1 140px;
  font-size: .8rem;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  padding: .55rem .7rem;
}
.palm-result-img {
  width: 100%;
  max-height: min(360px, 55vh);
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.palm-premium-report,
.ai-report,
#tarotReading {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.palm-premium-report .palm-read-block {
  padding: .9rem 0 1rem;
  border-bottom: 1px solid var(--line);
}
.palm-premium-report .palm-read-block:last-child { border-bottom: none; }
.palm-premium-report h4 {
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.5vw, 1.15rem);
  color: var(--gold, #c9a227);
  line-height: 1.3;
}
.palm-line-card {
  padding: .55rem .65rem;
  margin: .4rem 0;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  min-width: 0;
}
.palm-qual-chip {
  font-size: .72rem !important;
  vertical-align: middle;
  margin-left: .25rem;
  white-space: normal;
  max-width: 100%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ---------- AI Jyotishi ---------- */
.ai-upload {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 1.1rem 1.2rem;
  transition: border-color .2s ease, background .2s ease;
}
.ai-upload.drag {
  border-color: var(--gold);
  background: rgba(185,138,31,.08);
}
.ai-upload-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ai-upload-icon { font-size: 1.8rem; line-height: 1; }
.ai-file-meta { margin-top: .9rem; }
.ai-upload-img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
}
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.ai-chips .chip {
  cursor: pointer;
  border: 1px solid var(--line-2);
  background: var(--surface);
}
.ai-chips .chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.ai-report h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 1.1rem 0 .45rem;
  color: var(--gold);
}
.ai-report .ai-lead { font-size: 1.02rem; }
.ai-cloud-block {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(185,138,31,.35);
  background: rgba(185,138,31,.08);
}
.ai-chat-card { display: flex; flex-direction: column; }
.ai-chat-log {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .4rem 0 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .85rem;
}
.ai-msg {
  max-width: 92%;
  padding: .75rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.ai-msg-user {
  align-self: flex-end;
  background: rgba(185,138,31,.1);
  border-color: rgba(185,138,31,.28);
}
.ai-msg-assistant { align-self: flex-start; }
.ai-msg-role {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: .3rem;
}
.ai-msg-body { font-size: .95rem; line-height: 1.55; }
.ai-msg-body p { margin: .4rem 0; }
.ai-thinking { color: var(--muted); font-style: italic; }
.ai-chat-form {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.ai-chat-form .input { flex: 1 1 220px; }
.ai-voice-bar { padding: 1rem 1.2rem; }
.ai-voice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.ai-voice-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.ai-voice-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
.ai-mantra-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  margin-bottom: .75rem;
}
.ai-mantra-card.priority {
  border-color: rgba(185,138,31,.4);
  background: linear-gradient(180deg, rgba(185,138,31,.08), var(--surface-2));
}
.ai-mantra-beej {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .02em;
  margin: .35rem 0;
  line-height: 1.45;
}
.ai-mantra-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .45rem 0;
}
.ai-speak-inline {
  margin-left: .35rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  opacity: .75;
  vertical-align: middle;
}
.ai-speak-inline:hover { opacity: 1; }
.ai-speaking { animation: aiPulse 1.2s ease infinite; }
@keyframes aiPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
@media print {
  #aiFormCard, #aiChatCard, .ai-chips, .kundli-actions, .site-header, .site-footer,
  .ai-voice-bar, .ai-speak-inline, #aiSpeakReport, #aiSpeakMantra, #aiSpeakRemedies { display: none !important; }
  #aiResult { display: block !important; }
}

/* ---------- Kundli page layout ---------- */
.kundli-form-card { max-width: 760px; margin: 0 auto; }
.kundli-privacy-note { text-align: center; color: var(--muted); margin-bottom: 0; }
.kundli-chart-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.kundli-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.kundli-dasha-grid,
.kundli-navamsa-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.kundli-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}
.kundli-match-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.kundli-match-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
.kundli-subhead { font-size: 1rem; }
.kundli-jump-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.kundli-jump-link:hover { border-bottom-color: var(--gold); }
.kundli-style-seg { width: 100%; }
.kundli-style-seg button { flex: 1 1 auto; min-width: 7.5rem; }
#generateBtn:disabled {
  opacity: .72;
  cursor: wait;
}
.field label .req { margin-left: .15rem; }

/* ---------- Kundli matching ---------- */
.match-person {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.match-person-card {
  padding: 1rem 1.1rem;
  height: 100%;
}
.match-person-card .price-feats li { margin-bottom: .2rem; }
.match-score-row {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}
.match-ring-wrap { text-align: center; min-width: 140px; }
.match-ring {
  width: 140px;
  height: 140px;
  position: relative;
}
.match-ring.band-excellent { background: conic-gradient(var(--ok) calc(var(--p,50)*1%), rgba(47,125,79,.12) 0); }
.match-ring.band-very-good { background: conic-gradient(var(--gold) calc(var(--p,50)*1%), rgba(185,138,31,.15) 0); }
.match-ring.band-compatible { background: conic-gradient(var(--accent-2) calc(var(--p,50)*1%), rgba(106,92,176,.12) 0); }
.match-ring.band-average { background: conic-gradient(#c97b2e calc(var(--p,50)*1%), rgba(201,123,46,.12) 0); }
.match-ring.band-low { background: conic-gradient(var(--danger) calc(var(--p,50)*1%), rgba(179,58,58,.12) 0); }
.match-ring-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.match-total {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.match-of { font-size: .85rem; color: var(--muted); margin-top: .15rem; }
.match-verdict {
  margin-top: .7rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--gold);
}
.match-meta { flex: 1; min-width: 220px; }
.match-pair {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.match-vs {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  opacity: .7;
}
.match-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.match-bar span {
  display: block;
  height: 100%;
  background: var(--grad-gold);
  border-radius: 99px;
}
.danger { color: var(--danger); }
.ok { color: var(--ok); }
.gold { color: var(--gold); }
.chip.gold {
  background: rgba(185,138,31,.12);
  color: var(--gold);
  border: 1px solid rgba(185,138,31,.28);
}

/* ---------- Classical ratna recommendation ---------- */
.ratna-pick { position: relative; }
.ratna-primary {
  border-color: rgba(185,138,31,.45);
  box-shadow: 0 0 0 1px rgba(185,138,31,.12), var(--shadow-md);
  background: linear-gradient(180deg, rgba(185,138,31,.06), var(--surface));
}
.ratna-stone {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gold);
  margin: .35rem 0 .2rem;
}

/* ---------- Print / PDF (kundli export) ---------- */
@media print {
  .site-header, .site-footer, .nav-cta, #chartFormCard, .tabs, .tabs-scroll,
  #printBtn, #matchBtn, #resetBtn, #matchSection, .hero-mandala,
  .kundli-actions, .hero-cta, .kundli-privacy-note { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  #kundliResult { display: block !important; }
  .panel { display: block !important; page-break-inside: avoid; }
  .page-hero { background: #fff !important; color: #000 !important; padding: 1rem 0 !important; }
  .page-hero h1, .page-hero p, .breadcrumb { color: #000 !important; }
  .card, .chart-wrap { border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; }
  .kpi, .strip { border: 1px solid #ccc !important; box-shadow: none !important; }
  .kundli-chart-grid, .kundli-dasha-grid, .kundli-navamsa-grid { grid-template-columns: 1fr !important; }
  section { padding: 1rem 0 !important; }
  a { color: #000 !important; }
  .chart-svg { max-width: 360px; }
}

/* ---------- Responsive: tablet / laptop (hamburger before nav overflows) ---------- */
@media (max-width: 1200px) {
  :root { --header-h: 64px; }

  /* Collapsible nav drawer — laptops & tablets */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin-left: 0;
    padding: .5rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-md);
    max-height: min(75dvh, calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 70;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: .85rem .9rem;
    font-size: .95rem;
    border-radius: 10px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-toggle { display: grid; }
  .brand small { display: none; }
  .brand b { font-size: 1.12rem; }
  .brand .mark { width: 38px; height: 38px; font-size: 1.05rem; }
  .nav-cta { gap: .4rem; margin-left: auto; }
  .lang-pill { height: 42px; padding: 0 .45rem; font-size: .75rem; }
  .nav-toggle, .theme-toggle, .icon-btn { width: 42px; height: 42px; }
  .nav { gap: .75rem; }
}

@media (max-width: 980px) {
  .container { width: min(1160px, calc(100% - 1.75rem)); }
  .container-wide { width: min(1320px, calc(100% - 1.5rem)); }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-mandala { display: none; }
  .kundli-chart-grid,
  .kundli-dasha-grid,
  .kundli-navamsa-grid,
  .page-split,
  .page-split.panch-main,
  .page-split.contact-main,
  #vastuMain { grid-template-columns: 1fr !important; }

  /* Forms stack earlier for tablets */
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .page-form-card,
  .page-form-card.wide,
  .page-form-card.narrow { max-width: 100%; }
  .card { padding: 1.15rem 1.1rem; }
  .page-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .page-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-form-actions .btn { width: 100%; }

  .segment {
    display: flex;
    width: 100%;
  }
  .segment button {
    flex: 1 1 auto;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    padding: .55rem .65rem;
  }

  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .kpi { padding: .85rem .9rem; }

  .tarot-spread {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: .85rem;
  }
  .tarot-card { min-height: 180px; padding: .95rem .75rem; }

  .palm-line-row { grid-template-columns: 1fr; }
  .palm-shape-seg button { flex: 1 1 calc(50% - .25rem); min-width: 0; }
  .palm-capture-actions .btn,
  .palm-capture-actions label.btn { min-width: calc(50% - .4rem); }

  .ai-voice-row,
  .ai-chat-form { flex-direction: column; align-items: stretch; }
  .ai-chat-form .input { flex: 1 1 auto; width: 100%; }
  .ai-voice-btns { width: 100%; }
  .ai-voice-btns .btn { flex: 1 1 auto; }

  .modal { width: min(440px, 100%); padding: 1.35rem 1.15rem; max-height: min(92dvh, 100%); }
  .modal-backdrop { padding: .75rem; align-items: flex-end; }
  @supports (padding: max(0px)) {
    .modal-backdrop { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
  }
}

/* ---------- Responsive: phones ---------- */
@media (max-width: 620px) {
  .container { width: min(1160px, calc(100% - 1.25rem)); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip .cell { border-right: none; border-bottom: 1px solid var(--line); }
  .hero { padding: 3rem 0 3.75rem; }
  .section { padding: 2.75rem 0; }
  .section-tight { padding: 2rem 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-search { flex-direction: column; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .kundli-style-seg { width: 100%; }
  .kundli-style-seg button { flex: 1 1 100%; }
  .tab { padding: .55rem .9rem; font-size: .85rem; min-height: 42px; }
  .match-score-row { justify-content: center; }
  .page-hero { padding: 2.4rem 0 2.6rem; }
  .page-hero h1 { font-size: clamp(1.55rem, 7vw, 2.2rem); }
  .page-hero p { font-size: .95rem; line-height: 1.6; }

  .kpi-row { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi .v { font-size: 1.05rem; }

  /* Tarot: readable single column on narrow phones */
  .tarot-spread {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .tarot-card { min-height: 0; }

  .palm-preview-wrap {
    max-width: 100%;
    border-radius: 14px;
  }
  .palm-capture-actions {
    flex-direction: column;
  }
  .palm-capture-actions .btn,
  .palm-capture-actions label.btn {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
  .palm-shape-seg button { flex: 1 1 100%; text-align: left; }
  .palm-line-checks { grid-template-columns: 1fr; }
  .palm-result-img { max-height: 42vh; }

  .price-feats li,
  .ai-report li,
  .palm-premium-report li {
    overflow-wrap: anywhere;
  }

  .btn { white-space: normal; text-align: center; line-height: 1.3; padding: .7rem 1rem; }
  .btn-sm { min-height: 40px; }

  .auto-grid,
  .auto-grid.sm,
  .auto-grid.lg,
  .auto-fill-blog {
    grid-template-columns: 1fr;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .nav-cta .lang-pill .lp-sep { display: none; }
  .kpi-row { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; }
}

/* Touch: less hover lift (avoids sticky-hover) */
@media (hover: none) {
  .tarot-card:hover,
  .card-hover:hover,
  .btn:hover,
  .vc-cell:hover,
  .vastu-sleep-card:hover {
    transform: none;
  }
  .btn:active { transform: scale(.98); opacity: .95; }
  .tarot-card:active { border-color: rgba(201, 162, 39, .45); }
}

/* Landscape phones: keep forms usable */
@media (max-height: 480px) and (orientation: landscape) {
  .page-hero { padding: 1.5rem 0 1.6rem; }
  .palm-preview-wrap { max-width: 220px; }
  .nav-links {
    max-height: min(85dvh, calc(100dvh - var(--header-h)));
  }
}

/* Laptop / desktop comfort */
@media (min-width: 981px) {
  .page-form-card.wide { max-width: 920px; }
  .tarot-spread { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

@media (min-width: 1201px) {
  .page-split { gap: 1.75rem; }
  .page-form-card.wide { max-width: 960px; }
}

/* ============================================================
   Premium 3D finishing layer — tabs, modals, charts, tarot, footer
   ============================================================ */
.segment {
  box-shadow: var(--shadow-sm);
  background: var(--grad-surface);
  border-color: var(--line);
}
.segment button.active {
  box-shadow: var(--shadow-gold);
  color: #1a1420 !important;
}
.tab.active {
  box-shadow: var(--shadow-gold);
  color: #1a1420 !important;
}
.tabs .tab {
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tabs .tab:hover:not(.active) {
  transform: translateY(-2px);
  border-color: var(--gold);
}
.page-form-card {
  box-shadow: var(--shadow-lg);
  background: var(--grad-surface);
  border: 1px solid var(--line);
  position: relative;
}
.page-form-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.5) 0%, transparent 40%);
  opacity: .6;
}
[data-theme="dark"] .page-form-card::after {
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, transparent 40%);
}
.chart-wrap {
  box-shadow: var(--shadow-3d);
  background: var(--grad-surface);
  border-radius: 20px;
}
.chart-box {
  filter: drop-shadow(0 2px 4px rgba(196, 154, 31, .15));
}
.modal {
  background: var(--grad-surface);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(196, 154, 31, .12);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
}
.modal-backdrop {
  background: rgba(12, 10, 32, .72);
  backdrop-filter: blur(10px) saturate(1.2);
}
.site-footer {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(196, 154, 31, .08), transparent 60%),
    var(--bg-2);
  box-shadow: 0 -12px 40px rgba(34, 26, 47, .04);
}
.gold-text {
  background: linear-gradient(120deg, var(--g1), var(--gold-2), var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(154, 111, 12, .15));
}
.display {
  text-shadow: 0 2px 24px rgba(196, 154, 31, .08);
}
.tarot-card {
  box-shadow: var(--shadow-3d);
  background: var(--grad-surface) !important;
  transform-style: preserve-3d;
}
.tarot-card:hover {
  transform: translateY(-10px) rotateY(-4deg) scale(1.03) !important;
  box-shadow:
    0 20px 48px rgba(34, 26, 47, .16),
    0 0 0 1px rgba(196, 154, 31, .4),
    0 0 36px rgba(196, 154, 31, .15) !important;
}
.tarot-glyph {
  filter: drop-shadow(0 4px 12px rgba(196, 154, 31, .35));
  transform: translateZ(20px);
}
.palm-preview-wrap {
  box-shadow: var(--shadow-3d), 0 0 40px rgba(196, 154, 31, .08);
  border-style: solid !important;
  border-color: rgba(196, 154, 31, .25) !important;
}
.price-card {
  box-shadow: var(--shadow-3d);
  transition: transform .3s ease, box-shadow .3s ease;
}
.price-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(196, 154, 31, .15);
}
.stat .num {
  text-shadow: 0 4px 20px rgba(196, 154, 31, .25);
}
.nav-toggle, .theme-toggle, .icon-btn, .lang-pill {
  box-shadow: var(--shadow-sm);
  background: var(--grad-surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.nav-toggle:hover, .theme-toggle:hover, .icon-btn:hover, .lang-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.tbl tbody tr {
  transition: background .15s ease, transform .15s ease;
}
.tbl tbody tr:hover {
  background: var(--grad-gold-soft);
}
.ai-report, .palm-premium-report, .pred-card {
  position: relative;
}
.pred-card {
  box-shadow: var(--shadow-3d);
}
.pred-card:hover {
  transform: translateY(-4px);
}
.pred-score {
  text-shadow: 0 4px 16px rgba(196, 154, 31, .3);
}
.life-score-num, .life-score-big .life-score-num {
  text-shadow: 0 4px 24px rgba(196, 154, 31, .3);
}
.reveal {
  will-change: transform, opacity;
}
.reveal.in {
  animation: fadeUp3d .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fadeUp3d {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.98);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Subtle cosmic grain on dark sections */
.hero::after,
.page-hero::after {
  mix-blend-mode: screen;
}

/* Scrollbar premium touch */
@supports (scrollbar-color: auto) {
  * { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--grad-gold);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-mandala,
  .hero::before {
    animation: none !important;
  }
  .card-hover:hover,
  .tarot-card:hover,
  .btn:hover,
  .kpi:hover,
  .price-card:hover {
    transform: none !important;
  }
  .reveal.in { animation: none; opacity: 1; }
}

/* Touch: less tilt, keep lift soft */
@media (hover: none) {
  .card-hover:hover {
    transform: none;
  }
  .tarot-card:hover {
    transform: none !important;
  }
}

/* ============================================================
   Colour-rich premium layer v2 — jewel tones & living gradients
   ============================================================ */

/* Animated chromatic border utility on key surfaces */
.card,
.page-form-card,
.strip,
.price-card,
.pred-card,
.tarot-card,
.chart-wrap {
  border: 1px solid transparent;
  background-clip: padding-box;
}
.card {
  background-image:
    linear-gradient(155deg, #ffffff 0%, #fff8ee 40%, #f6f0ff 75%, #eefaf7 100%),
    var(--grad-chromatic);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
}
[data-theme="dark"] .card {
  background-image:
    linear-gradient(155deg, #221a5c 0%, #18144a 55%, #14103e 100%),
    var(--grad-chromatic);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.card-hover:hover {
  box-shadow:
    0 4px 0 rgba(255,255,255,.45) inset,
    0 22px 50px rgba(90, 40, 160, .14),
    0 0 0 1px rgba(255, 200, 80, .4),
    0 0 48px rgba(124, 77, 255, .15),
    0 0 32px rgba(18, 184, 168, .1) !important;
}

/* Colourful card icons — cycle hues */
.card-icon {
  background: linear-gradient(145deg, rgba(255,200,80,.45), rgba(124,77,255,.2), rgba(18,184,168,.18)) !important;
  box-shadow: 0 6px 18px rgba(124, 77, 255, .18), 0 0 0 1px rgba(255, 200, 80, .25) !important;
  color: var(--accent) !important;
}
.grid-4 > a.card:nth-child(4n+1) .card-icon,
.grid > .card:nth-child(4n+1) .card-icon {
  background: linear-gradient(145deg, #ffd86b, #ffb347) !important;
  color: #8a4b00 !important;
  box-shadow: 0 8px 22px rgba(255, 159, 28, .35) !important;
}
.grid-4 > a.card:nth-child(4n+2) .card-icon,
.grid > .card:nth-child(4n+2) .card-icon {
  background: linear-gradient(145deg, #e0c4ff, #9b7dff) !important;
  color: #3a1f8a !important;
  box-shadow: 0 8px 22px rgba(124, 77, 255, .35) !important;
}
.grid-4 > a.card:nth-child(4n+3) .card-icon,
.grid > .card:nth-child(4n+3) .card-icon {
  background: linear-gradient(145deg, #9af0e6, #12b8a8) !important;
  color: #065a52 !important;
  box-shadow: 0 8px 22px rgba(18, 184, 168, .35) !important;
}
.grid-4 > a.card:nth-child(4n+4) .card-icon,
.grid > .card:nth-child(4n+4) .card-icon {
  background: linear-gradient(145deg, #ffc0d4, #e85d8a) !important;
  color: #8a2048 !important;
  box-shadow: 0 8px 22px rgba(232, 93, 138, .35) !important;
}

/* Eyebrow — multi-hue */
.eyebrow {
  background: var(--grad-chromatic-soft);
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(124, 77, 255, .18);
  display: inline-flex !important;
  box-shadow: 0 4px 16px rgba(124, 77, 255, .1);
}
.eyebrow::before {
  background: var(--grad-chromatic) !important;
  height: 2px !important;
  width: 22px !important;
  border-radius: 2px;
}

/* Section headings with chromatic underline vibe */
.section-head h2.display,
.section-head .display {
  background: linear-gradient(105deg, var(--ink) 0%, #5b3fc4 45%, #c49a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .section-head h2.display,
[data-theme="dark"] .section-head .display {
  background: linear-gradient(105deg, #fff6e8 0%, #c4b0ff 40%, #ffd86b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* KPI rainbow accents */
.kpi-row .kpi:nth-child(4n+1) {
  border-image: linear-gradient(135deg, #ffb347, #ffd86b) 1;
  border: 1.5px solid rgba(255, 179, 71, .45);
  box-shadow: var(--shadow-3d), 0 0 24px rgba(255, 159, 28, .12);
}
.kpi-row .kpi:nth-child(4n+2) {
  border: 1.5px solid rgba(124, 77, 255, .4);
  box-shadow: var(--shadow-3d), 0 0 24px rgba(124, 77, 255, .12);
}
.kpi-row .kpi:nth-child(4n+3) {
  border: 1.5px solid rgba(18, 184, 168, .4);
  box-shadow: var(--shadow-3d), 0 0 24px rgba(18, 184, 168, .12);
}
.kpi-row .kpi:nth-child(4n+4) {
  border: 1.5px solid rgba(232, 93, 138, .4);
  box-shadow: var(--shadow-3d), 0 0 24px rgba(232, 93, 138, .12);
}
.kpi-row .kpi:nth-child(4n+1) .v { color: #c47808 !important; }
.kpi-row .kpi:nth-child(4n+2) .v { color: #6a3fd4 !important; }
.kpi-row .kpi:nth-child(4n+3) .v { color: #0e9a8c !important; }
.kpi-row .kpi:nth-child(4n+4) .v { color: #d43d6e !important; }
[data-theme="dark"] .kpi-row .kpi:nth-child(4n+1) .v { color: #ffd86b !important; }
[data-theme="dark"] .kpi-row .kpi:nth-child(4n+2) .v { color: #c4b0ff !important; }
[data-theme="dark"] .kpi-row .kpi:nth-child(4n+3) .v { color: #3ee0d0 !important; }
[data-theme="dark"] .kpi-row .kpi:nth-child(4n+4) .v { color: #ff7aa8 !important; }

/* Strip cells colour tips */
.strip .cell:nth-child(8n+1) small { color: #c47808 !important; }
.strip .cell:nth-child(8n+2) small { color: #6a3fd4 !important; }
.strip .cell:nth-child(8n+3) small { color: #0e9a8c !important; }
.strip .cell:nth-child(8n+4) small { color: #d43d6e !important; }
.strip .cell:nth-child(8n+5) small { color: #c47808 !important; }
.strip .cell:nth-child(8n+6) small { color: #6a3fd4 !important; }
.strip .cell:nth-child(8n+7) small { color: #0e9a8c !important; }
.strip .cell:nth-child(8n+8) small { color: #d43d6e !important; }

/* Buttons — richer multi-hue gold */
.btn-gold {
  background: linear-gradient(135deg, #c47808, #e8b020 30%, #ffd54a 55%, #ffe9a0 80%, #ffb347 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 8px 24px rgba(255, 159, 28, .4),
    0 0 32px rgba(124, 77, 255, .12) !important;
}
.btn-gold:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 12px 36px rgba(255, 159, 28, .5),
    0 0 48px rgba(160, 90, 255, .2) !important;
}
.btn-outline:hover {
  border-image: none;
  border-color: transparent !important;
  background-image:
    linear-gradient(var(--surface), var(--surface)),
    var(--grad-chromatic) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent !important;
  color: var(--accent) !important;
}

/* Brand mark — rainbow gold */
.brand .mark {
  background: linear-gradient(135deg, #ff9f1c, #e85d8a 40%, #7c4dff 70%, #12b8a8) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow:
    0 6px 20px rgba(124, 77, 255, .35),
    0 0 24px rgba(255, 159, 28, .3) !important;
}

/* Hero richer */
.hero {
  box-shadow: inset 0 -40px 80px rgba(0,0,0,.15);
}
.hero h1 em {
  background: linear-gradient(100deg, #ffd86b, #ffe9a8, #ff9f1c, #e0c4ff, #ffd86b) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: goldShift 6s linear infinite;
}
@keyframes goldShift {
  to { background-position: 200% center; }
}
.hero-search {
  border: 1px solid transparent !important;
  background-image:
    linear-gradient(145deg, rgba(30,20,70,.55), rgba(20,15,50,.4)),
    var(--grad-chromatic) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 24px 60px rgba(0,0,0,.4),
    0 0 50px rgba(160, 90, 255, .15) !important;
}

/* Tabs / segments colourful active */
.tab.active,
.segment button.active {
  background: linear-gradient(135deg, #c47808, #ffd54a 50%, #e0c4ff) !important;
  color: #1a1028 !important;
  box-shadow: 0 6px 20px rgba(255, 159, 28, .35), 0 0 20px rgba(124, 77, 255, .15) !important;
}

/* Chip gold richer */
.chip.gold {
  background: linear-gradient(135deg, #ff9f1c, #ffd54a, #e85d8a) !important;
  color: #1a1020 !important;
}
.chip:not(.ghost):not(.gold) {
  background: var(--grad-chromatic-soft) !important;
  border-color: rgba(124, 77, 255, .25) !important;
  color: var(--accent) !important;
}

/* Pricing featured card */
.price-card.featured,
.price-card:nth-child(2) {
  border: 1.5px solid transparent;
  background-image:
    var(--grad-surface),
    var(--grad-chromatic);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-lg), 0 0 48px rgba(124, 77, 255, .12);
}
.price-pop {
  background: linear-gradient(90deg, #ff9f1c, #e85d8a, #7c4dff) !important;
}

/* Pred cards coloured bands */
.pred-high { border-left: 4px solid #12b8a8 !important; }
.pred-mid { border-left: 4px solid #d4a017 !important; }
.pred-mix { border-left: 4px solid #e85d8a !important; }
.pred-low { border-left: 4px solid #c43c3c !important; }
.pred-step-num {
  background: linear-gradient(135deg, #ff9f1c, #7c4dff) !important;
}

/* Tarot richer */
.tarot-card {
  border: 1.5px solid transparent !important;
  background-image:
    var(--grad-surface),
    linear-gradient(145deg, #ffd86b, #e85d8a, #7c4dff) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.tarot-card-rev {
  background-image:
    linear-gradient(180deg, rgba(232,93,138,.12), var(--surface-2)),
    linear-gradient(145deg, #e85d8a, #7c4dff) !important;
}

/* Chart glow */
.chart-wrap {
  border: 1.5px solid transparent;
  background-image:
    var(--grad-surface),
    linear-gradient(135deg, #ffd86b, #7c4dff, #12b8a8);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-3d), 0 0 40px rgba(124, 77, 255, .1);
}

/* Footer colour wash */
.site-footer {
  background:
    radial-gradient(ellipse 50% 40% at 20% 0%, rgba(255, 159, 28, .12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(124, 77, 255, .12), transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(18, 184, 168, .08), transparent 50%),
    var(--bg-2) !important;
}

/* Toast colourful */
.toast {
  background: linear-gradient(135deg, #1a1430, #2a1a55) !important;
  color: #fff8e8 !important;
  border: 1px solid rgba(255, 200, 80, .35);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 30px rgba(124, 77, 255, .2) !important;
}

/* Links hover multi-colour */
a:hover {
  color: var(--rose) !important;
}
.nav-links a:hover,
.nav-links .active {
  background: var(--grad-chromatic-soft) !important;
  color: var(--accent) !important;
}

/* Selection */
::selection {
  background: linear-gradient(90deg, #ffd86b, #e0c4ff);
  color: #1a1028;
}

/* Scrollbar multi-hue */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff9f1c, #e85d8a, #7c4dff) !important;
}

/* Section alt rainbow mist */
.section-alt {
  background:
    radial-gradient(ellipse 70% 50% at 0% 50%, rgba(255, 159, 28, .1), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 50%, rgba(124, 77, 255, .1), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(18, 184, 168, .08), transparent 50%),
    var(--bg-2) !important;
}

/* Form cards chromatic edge */
.page-form-card {
  border: 1.5px solid transparent !important;
  background-image:
    var(--grad-surface),
    var(--grad-chromatic) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: var(--shadow-lg), 0 0 50px rgba(124, 77, 255, .1) !important;
}

/* Quantum strip float with colour */
.strip {
  border: 1.5px solid transparent !important;
  background-image:
    var(--grad-surface),
    var(--grad-chromatic) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow:
    var(--shadow-lg),
    0 0 40px rgba(255, 159, 28, .1),
    0 0 50px rgba(124, 77, 255, .08) !important;
}

/* Subtle body vignette depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 120%, rgba(124, 77, 255, .06), transparent 50%);
}
/* keep stacking: only ambient overlay is fixed at z-0 */
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none !important; }
}

/* solid card fallback — keeps layout visible if gradient border fails */
.card,.page-form-card,.strip,.chart-wrap,.price-card,.pred-card,.tarot-card{background-color:var(--surface)!important;}