/*
Theme Name: TotsName — Baby Names Platform
Theme URI: https://totsname.com
Author: TotsName
Author URI: https://totsname.com
Description: World-class baby names platform with SEO-optimized name pages, smart name finder, stories, and pet names. Built for India and global audiences.
Version: 2.0.0
License: Commercial
Text Domain: totsname
Tags: baby-names, custom-post-types, seo-optimized, india, responsive
*/

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* === ULTRA LIVELY WORLD-CLASS PALETTE 2.0 === */

  /* PRIMARY — Electric Coral (more saturated, more energy) */
  --sunrise:    #FF4D2E;   /* Indigo — calm, premium */
  --sunrise-lt: #FFF0EC;
  --sunrise-dk: #CC2A0A;

  /* SECONDARY — Deep Ocean Teal */
  --teal:       #00B5AD;   /* Deeper, richer teal */
  --teal-lt:    #DFFAFA;
  --teal-dk:    #007A75;

  /* ACCENT — Pure Saffron Gold (India-inspired) */
  --gold:       #F59E0B;   /* Bright saffron-orange gold */
  --gold-lt:    #FEF3C7;
  --gold-dk:    #B45309;

  /* FEATURE — Electric Violet */
  --violet:     #6B21F4;   /* Deeper electric violet */
  --violet-lt:  #EEE5FF;
  --violet-dk:  #4A0FCC;

  /* SUCCESS — Tropical Mint */
  --mint:       #00C48C;   /* Vivid tropical green */
  --mint-lt:    #CCFAEC;

  /* GIRL — Hot Magenta Rose */
  --rose:       #F0006B;   /* Cyan — fresh accent */
  --rose-lt:    #FFE0F0;

  /* BOY — Electric Sky */
  --sky:        #0090FF;   /* Pure electric blue */
  --sky-lt:     #E0F2FF;

  /* SPECIAL — Festival Pink (India festive) */
  --festival:   #FF2D78;   /* Soft violet */
  --festival-lt:#FFE0EC;

  /* === NEUTRALS === */
  --ink:        #0F0820;   /* Near-black deep plum */
  --ink-70:     #3D2B60;
  --ink-45:     #7B6A9E;
  --ink-20:     #CDC4E8;
  --white:      #FFFFFF;
  --cream:      #FFFCF8;   /* Slightly warmer cream */
  --surface:    #F7F3FF;
  --border:     rgba(107,33,244,0.12);
  --border-md:  rgba(107,33,244,0.22);

  /* === TYPOGRAPHY === */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

  /* === SPACING & RADIUS === */
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-pill: 100px;
  --shadow:      0 4px 24px rgba(22,11,46,0.08);
  --shadow-lg:   0 12px 48px rgba(22,11,46,0.14);
  --shadow-xl:   0 24px 80px rgba(22,11,46,0.18);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); }
input, select, textarea { font-family: var(--font-body); }

/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ===== UTILITY CLASSES ===== */
.container     { max-width: 1200px; margin: 0 auto; padding: 0 5vw; }
.container-sm  { max-width: 900px; margin: 0 auto; padding: 0 5vw; }
.text-center   { text-align: center; }
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.grid          { display: grid; }
.sr-only       { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ===== SECTION COMMONS ===== */
section { padding: 46px 0; }
.section-eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: ''; flex: 1; height: 1px;
  background: currentColor; opacity: 0.2; max-width: 40px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 400; line-height: 1.15;
  letter-spacing: -0.5px; color: var(--ink);
}
.section-title em   { font-style: italic; }
.section-title span.highlight {
  background: linear-gradient(135deg, var(--sunrise), var(--rose));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.section-sub { font-size: 16px; color: var(--ink-45); margin-top: 8px; line-height: 1.65; }
.section-header { text-align: center; margin-bottom: 30px; }
.section-header .section-eyebrow { justify-content: center; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; border: none;
  transition: all 0.22s; letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--sunrise); color: #fff;
  box-shadow: 0 4px 20px rgba(255,77,46,0.35);
}
.btn-primary:hover { background: var(--sunrise-dk); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,77,46,0.4); }
.btn-teal {
  background: var(--teal); color: #fff;
  box-shadow: 0 4px 20px rgba(14,165,160,0.3);
}
.btn-teal:hover { background: var(--teal-dk); transform: translateY(-2px); }
.btn-outline {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--border-md);
}
.btn-outline:hover { background: var(--surface); border-color: var(--violet); color: var(--violet); }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--ink-70); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.btn-ghost:hover { background: rgba(255,255,255,0.22); }

/* ===== BADGE / PILL ===== */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
}
.badge-hindu    { background: #FEF3C7; color: #B45309; border: 1px solid #FCD79A; }
.badge-muslim   { background: #E0F7F6; color: #0A7A76; border: 1px solid #A0E8E5; }
.badge-sikh     { background: #FEF3D0; color: #B87800; border: 1px solid #FAD870; }
.badge-christian{ background: #E0F2FE; color: #0369A1; border: 1px solid #BAE6FD; }
.badge-girl     { background: var(--violet-lt); color: var(--violet); border: 1px solid rgba(107,33,244,0.2); }
.badge-boy      { background: var(--sky-lt); color: var(--sky); border: 1px solid rgba(14,165,233,0.2); }
.badge-neutral   { background: var(--violet-lt); color: var(--violet); border: 1px solid rgba(124,58,237,0.2); }
.badge-trending { background: linear-gradient(135deg,var(--sunrise-lt),var(--rose-lt)); color: var(--sunrise-dk); border: 1px solid rgba(255,77,46,0.2); }

/* ===== TICKER BAR ===== */
.ticker-bar {
  background: #FFF3F8;
  padding: 10px 0; overflow: hidden; position: relative;
  border-bottom: 1px solid #FCE2ED;
}
.ticker-inner { display: flex; gap: 0; white-space: nowrap; }
.ticker-track {
  display: flex; gap: 40px;
  animation: ticker-scroll 60s linear infinite;
  padding-right: 40px;
}
.ticker-item { font-size: 16px; color: #4A4A4A; display: flex; align-items: center; gap: 4px; }
.ticker-item strong, .ticker-item .t-name { color: #E6198D; font-weight: 700; }
.ticker-item .t-dash { color: #4A4A4A; font-weight: 600; }
.ticker-item .t-mean { color: #4A4A4A; font-weight: 500; }
.ticker-sep { color: rgba(70,70,80,0.30); }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== NAVIGATION ===== */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(247,247,249,0.96);   /* light grey — distinct from the pink marquee */
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(22,11,46,0.06);
}
.nav-inner {
  display: flex; align-items: center;
  justify-content: space-between; height: 70px;
}
.site-logo {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.5px;
}
.site-logo span { color: var(--sunrise); }
.site-logo sup {
  font-size: 10px; color: var(--teal); font-family: var(--font-body);
  font-weight: 500; letter-spacing: 0.05em; vertical-align: super; margin-left: 2px;
}
.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu a {
  font-size: 14px; font-weight: 400; color: var(--ink-70);
  padding: 8px 14px; border-radius: var(--radius-sm);
  transition: all 0.18s;
}
.nav-menu a:hover, .nav-menu a.current-menu-item { color: var(--ink); background: var(--surface); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-search-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-70); transition: all 0.2s; font-size: 15px;
}
.nav-search-btn:hover { background: var(--teal-lt); color: var(--teal); border-color: var(--teal); }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: none; }
.hamburger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
@media (max-width: 900px) {
  .nav-menu { display: none; }
  .hamburger { display: flex; }
}

/* ===== HERO ===== */
.hero {
  padding: 60px 0 40px;
  background: linear-gradient(160deg, var(--cream) 0%, #FFE8F1 50%, var(--rose-lt) 100%);
  position: relative; overflow: hidden; text-align: center;
}
.hero-orb-1 {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,46,0.12) 0%, transparent 70%);
  top: -100px; right: -100px; pointer-events: none;
}
.hero-orb-2 {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,160,0.1) 0%, transparent 70%);
  bottom: -80px; left: -80px; pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--violet-lt), var(--rose-lt));
  border: 1px solid rgba(124,58,237,0.25);
  padding: 8px 20px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; color: var(--violet);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px;
}
.hero-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sunrise); animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.7; }
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 300; line-height: 1.14;
  color: var(--ink); letter-spacing: -1px; margin-bottom: 12px;
  overflow-wrap: break-word; word-break: normal; max-width: 100%;
}
.hero-title em { font-style: italic; color: var(--sunrise); }
.hero-title .hero-accent {
  background: linear-gradient(135deg, var(--violet), var(--rose));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
  font-weight: 600; display: inline-block; padding-bottom: 0.08em;
}
.hero-sub {
  font-size: 18px; color: var(--ink-45); max-width: 560px;
  margin: 0 auto 24px; font-weight: 300; line-height: 1.7;
}
.hero-search-box {
  max-width: 740px; margin: 0 auto 14px;
  background: #fff;
  border: 2px solid var(--border-md);
  border-radius: var(--radius-pill);
  display: flex; align-items: center;
  padding: 8px 8px 8px 28px;
  box-shadow: var(--shadow-xl);
  transition: all 0.25s;
}
.hero-search-box:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 6px rgba(14,165,160,0.12), var(--shadow-xl);
}
.hero-search-box input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--ink); padding-right: 12px;
}
.hero-search-box input::placeholder { color: var(--ink-20); }
.hero-search-btn {
  background: linear-gradient(135deg, var(--sunrise), var(--rose));
  color: #fff; border: none;
  border-radius: var(--radius-pill);
  padding: 13px 30px; font-size: 14px; font-weight: 500;
  transition: all 0.2s; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(255,77,46,0.4);
}
.hero-search-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,77,46,0.5); }
.hero-filter-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.filter-chip {
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.8); border: 1.5px solid var(--border-md);
  font-size: 12.5px; font-weight: 400; color: var(--ink-70);
  transition: all 0.2s; cursor: pointer; backdrop-filter: blur(4px);
}
.filter-chip:hover, .filter-chip.active {
  background: var(--ink); color: #fff; border-color: var(--ink);
  transform: translateY(-2px);
}
.filter-chip.active-teal   { background: var(--teal);   color: #fff; border-color: var(--teal); }
.filter-chip.active-violet { background: var(--violet); color: #fff; border-color: var(--violet); }
.filter-chip.active-rose   { background: var(--rose);   color: #fff; border-color: var(--rose); }

/* ===== STATS ROW ===== */
.stats-bar {
  background: var(--ink); padding: 26px 0;
}
.stats-grid {
  display: flex; justify-content: center; align-items: center;
  gap: 0; flex-wrap: wrap;
}
.stat-item {
  text-align: center; padding: 12px 48px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 600; color: #fff;
  line-height: 1;
}
.stat-label { font-size: 12px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.stat-unit { font-size: 20px; color: var(--sunrise); }

/* ===== CATEGORY CARDS ===== */
.categories-section { background: var(--surface); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 155px), 1fr));
  gap: 16px;
}
.cat-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 18px;
  text-align: center; transition: all 0.25s;
  display: block; position: relative; overflow: hidden;
}
.cat-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cat-card:hover::after { transform: scaleX(1); }
.cat-card.c-sunrise::after { background: var(--sunrise); }
.cat-card.c-teal::after    { background: var(--teal); }
.cat-card.c-gold::after    { background: var(--gold); }
.cat-card.c-violet::after  { background: var(--violet); }
.cat-card.c-rose::after    { background: var(--rose); }
.cat-card.c-mint::after    { background: var(--mint); }
.cat-icon-wrap {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-size: 24px;
  transition: transform 0.2s;
}
.cat-card:hover .cat-icon-wrap { transform: scale(1.1) rotate(4deg); }
.cat-card h3 { font-size: 15px; font-weight: 500; color: var(--ink); }
.cat-card p  { font-size: 12px; color: var(--ink-45); margin-top: 4px; }

/* ===== NAME CARDS ===== */
.names-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 18px;
}
.name-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: all 0.25s; cursor: pointer; position: relative;
}
.name-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.name-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.name-display {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 500; color: var(--ink); line-height: 1;
}
.name-sub { font-size: 11px; color: var(--ink-45); text-transform: uppercase; letter-spacing: 0.07em; margin: 5px 0; }
.name-meaning { font-size: 13px; color: var(--ink-70); line-height: 1.55; }
.name-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.name-rank-tag {
  position: absolute; top: 16px; right: 16px;
  font-size: 11px; color: var(--ink-45);
}
.heart-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--ink-45); transition: all 0.2s;
  flex-shrink: 0;
}
.heart-btn:hover, .heart-btn.loved {
  background: var(--rose-lt); border-color: var(--rose); color: var(--rose);
}

/* ===== NAME STORY SECTION ===== */
.stories-section { background: linear-gradient(160deg, #FFF8F0 0%, #F0F0FF 100%); }
.story-layout {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: start;
}
.story-featured-card {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.story-banner {
  height: 200px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.story-banner-name {
  font-family: var(--font-display);
  font-size: 80px; font-weight: 600; line-height: 1;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 4px 24px rgba(0,0,0,0.15);
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.story-banner-gradient-1 { background: linear-gradient(135deg, #FF4D2E 0%, #7C3AED 50%, #0EA5A0 100%); }
.story-banner-gradient-2 { background: linear-gradient(135deg, #0EA5A0 0%, #0EA5E9 100%); }
.story-banner-gradient-3 { background: linear-gradient(135deg, #F0A500 0%, #FF4D2E 100%); }
.story-card-body { padding: 32px; }
.story-name-head {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 500; color: var(--ink); margin-bottom: 4px;
}
.story-origin-line { font-size: 12px; color: var(--ink-45); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; }
.story-text { font-size: 14px; color: var(--ink-70); line-height: 1.85; }
.story-quote {
  margin: 20px 0; padding: 18px 22px;
  border-left: 4px solid var(--sunrise);
  background: linear-gradient(90deg, rgba(255,77,46,0.06), transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display);
  font-size: 18px; font-style: italic; color: var(--ink); line-height: 1.6;
}
.story-meta-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px;
}
.story-meta-box {
  flex: 1; min-width: 72px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; text-align: center;
}
.story-meta-val { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.story-meta-key { font-size: 10px; color: var(--ink-45); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.story-list { display: flex; flex-direction: column; gap: 14px; }
.story-mini-link {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; gap: 16px; align-items: center;
  transition: all 0.22s;
}
.story-mini-link:hover { transform: translateX(5px); box-shadow: var(--shadow); border-color: var(--teal); }
.story-mini-letter {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  flex-shrink: 0;
}
.story-mini-info h4 { font-size: 15px; font-weight: 500; color: var(--ink); }
.story-mini-info p { font-size: 12px; color: var(--ink-45); margin-top: 3px; line-height: 1.5; }

/* ===== NAME FINDER SECTION ===== */
.finder-section {
  background: linear-gradient(160deg, var(--ink) 0%, #2D1560 60%, #0D4A47 100%);
  position: relative; overflow: hidden;
}
.finder-section::before {
  content: ''; position: absolute; width: 600px; height: 600px;
  border-radius: 50%; top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(255,77,46,0.15) 0%, transparent 70%);
}
.finder-section::after {
  content: ''; position: absolute; width: 400px; height: 400px;
  border-radius: 50%; bottom: -150px; left: -50px;
  background: radial-gradient(circle, rgba(14,165,160,0.12) 0%, transparent 70%);
}
.finder-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center; position: relative;
}
.finder-form-wrap { display: flex; flex-direction: column; gap: 14px; }
.finder-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); margin-bottom: 5px; display: block; }
.finder-input, .finder-select {
  width: 100%; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm); padding: 14px 18px;
  color: #fff; font-size: 14px; font-family: var(--font-body);
  outline: none; transition: border-color 0.2s;
  -webkit-appearance: none;
}
.finder-input::placeholder { color: rgba(255,255,255,0.3); }
.finder-input:focus, .finder-select:focus { border-color: var(--teal); }
.finder-select option { background: #1E0A3C; color: #fff; }
.finder-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.finder-btn {
  width: 100%; padding: 16px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--sunrise), var(--rose));
  color: #fff; border: none; font-size: 15px; font-weight: 500;
  transition: all 0.22s; display: flex; align-items: center;
  justify-content: center; gap: 10px;
  box-shadow: 0 6px 24px rgba(255,77,46,0.4);
}
.finder-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255,77,46,0.5); }
.finder-btn svg { width: 20px; height: 20px; }
.finder-results { display: flex; flex-direction: column; gap: 12px; }
.finder-result-card {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 20px 24px; transition: all 0.2s;
}
.finder-result-card:hover { background: rgba(255,255,255,0.12); }
.finder-result-name {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500; color: #fff;
}
.finder-result-meaning { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.finder-match { font-size: 12px; color: var(--teal); margin-top: 8px; font-weight: 500; }
.finder-tag { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 6px; }

/* ===== ALPHA BROWSER ===== */
.alpha-section { background: var(--surface); }
.alpha-grid {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.alpha-btn {
  width: 54px; height: 54px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500; color: var(--ink);
  transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.alpha-btn:hover {
  background: var(--sunrise); color: #fff;
  border-color: var(--sunrise); transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255,77,46,0.3);
}

/* ===== EMOTION SECTION ===== */
.emotion-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 18px;
}
.emotion-card {
  border-radius: var(--radius); padding: 30px; cursor: pointer;
  transition: all 0.25s; display: block;
}
.emotion-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.emotion-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 16px;
  background: rgba(255,255,255,0.45);
}
.emotion-card h3 { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin-bottom: 6px; }
.emotion-card p { font-size: 13px; opacity: 0.7; }
.emotion-card .e-count { font-family: var(--font-display); font-size: 36px; font-weight: 300; margin-top: 18px; opacity: 0.3; }
.ec-courage  { background: linear-gradient(135deg, #FFF0EC, #FFD4C4); color: #B3322F; }
.ec-wisdom   { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; }
.ec-joy      { background: linear-gradient(135deg, #FFF7D6, #FDE047); color: #854D0E; }
.ec-love     { background: linear-gradient(135deg, #FFE0F0, #FFB3D9); color: #9D174D; }
.ec-peace    { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color: #065F46; }
.ec-success  { background: linear-gradient(135deg, #FFE4EC, #FFB3CE); color: #9F1239; }
.ec-power    { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); color: #4C1D95; }
.ec-blessing { background: linear-gradient(135deg, #E0F2FE, #BAE6FD); color: #0C4A6E; }

/* ===== SWIPE SECTION ===== */
.swipe-section {
  background: linear-gradient(135deg, #FF4D2E 0%, #F0006B 50%, #7C3AED 100%);
  padding: 80px 0; text-align: center;
}
.swipe-card-demo {
  max-width: 290px; margin: 40px auto 0;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 28px; padding: 40px 32px;
  backdrop-filter: blur(10px);
}
.swipe-name-text {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 400; color: #fff; line-height: 1;
}
.swipe-meaning-text { font-size: 14px; color: rgba(255,255,255,0.65); margin-top: 10px; }
.swipe-tags-text { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 6px; }
.swipe-actions { display: flex; gap: 18px; justify-content: center; margin-top: 28px; }
.swipe-action-btn {
  width: 60px; height: 60px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: all 0.2s;
}
.swipe-pass { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
.swipe-pass:hover { background: rgba(255,80,80,0.30); transform: scale(1.12); }
.swipe-love { background: rgba(255,255,255,0.9); color: #F0006B; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.swipe-love:hover { background: #fff; transform: scale(1.12); }
.swipe-save { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }
.swipe-save:hover { background: rgba(240,165,0,0.3); transform: scale(1.12); }

/* ===== PET NAMES SECTION ===== */
.pet-section { background: linear-gradient(160deg, #F5F0FF 0%, #E0F7F6 100%); }
.pet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 18px;
}
.pet-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  text-align: center; transition: all 0.25s; cursor: pointer;
}
.pet-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pet-emoji { font-size: 42px; margin-bottom: 14px; }
.pet-card h3 { font-size: 16px; font-weight: 500; color: var(--ink); }
.pet-card p  { font-size: 12px; color: var(--ink-45); margin-top: 4px; }
.pet-count   { font-size: 22px; font-family: var(--font-display); color: var(--violet); font-weight: 600; margin-top: 8px; }

/* ===== BLOG SECTION ===== */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}
.blog-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: all 0.25s; display: block;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-thumb {
  height: 155px; display: flex; align-items: center;
  justify-content: center; position: relative; overflow: hidden;
}
.blog-thumb-text {
  font-family: var(--font-display);
  font-size: 56px; color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 16px rgba(0,0,0,0.12);
}
.blog-body   { padding: 22px 24px; }
.blog-cat    { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 10px; }
.blog-body h3 { font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.blog-body p  { font-size: 13px; color: var(--ink-45); margin-top: 8px; line-height: 1.65; }
.blog-meta   { font-size: 11px; color: var(--ink-45); margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.blog-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-20); }

/* ===== NAME DETAIL PAGE ===== */
.name-detail-hero {
  padding: 80px 0 60px;
  background: linear-gradient(160deg, var(--cream) 0%, #F0E8FF 100%);
}
.name-detail-layout {
  display: grid; grid-template-columns: 2fr 1fr; gap: 48px;
}
.name-detail-main h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300; color: var(--ink); line-height: 1; letter-spacing: -2px;
}
.name-phonetic { font-size: 18px; color: var(--ink-45); font-style: italic; margin: 12px 0 6px; }
.name-detail-meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.name-detail-section { margin: 36px 0; }
.name-detail-section h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-45); font-weight: 500; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.name-detail-section h2::after {
  content: ''; flex: 1; height: 1px; background: var(--border); max-width: 100px;
}
.name-story-text { font-size: 15px; color: var(--ink-70); line-height: 1.9; }
.name-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.name-stat-box {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px; text-align: center;
}
.name-stat-val { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.name-stat-key { font-size: 11px; color: var(--ink-45); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.similar-names-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.similar-name-pill {
  font-family: var(--font-display); font-size: 16px;
  padding: 8px 18px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-70); transition: all 0.2s;
}
.similar-name-pill:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.pop-year-bar { margin: 8px 0; }
.pop-year-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-45); margin-bottom: 4px; }
.pop-track { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.pop-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--violet)); border-radius: 4px; transition: width 1s ease; }
.name-sidebar-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
}
.name-sidebar-card h3 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 16px; }

/* ===== MODAL ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(22,11,46,0.6); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--cream); border-radius: var(--radius-lg);
  max-width: 660px; width: 100%; max-height: 90vh;
  overflow-y: auto; padding: 44px;
  box-shadow: var(--shadow-xl); position: relative;
  animation: modal-in 0.3s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close-btn {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink-70); transition: all 0.2s;
}
.modal-close-btn:hover { background: var(--rose-lt); color: var(--rose); }
.modal-name-big {
  font-family: var(--font-display);
  font-size: 60px; font-weight: 300; color: var(--ink); line-height: 1;
}
.modal-section-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-45); font-weight: 500; margin: 22px 0 10px; }
.modal-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.modal-stat-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.modal-stat-val { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.modal-stat-key { font-size: 10px; color: var(--ink-45); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 3px; }
.modal-story p { font-size: 14px; color: var(--ink-70); line-height: 1.85; }
.modal-footer-row { display: flex; gap: 12px; margin-top: 28px; }
.modal-footer-row .btn { flex: 1; justify-content: center; }

/* ===== NOTICE BANNERS ===== */
.notice-bar {
  padding: 14px 5vw; text-align: center;
  font-size: 13px; font-weight: 500;
}
.notice-bar.success { background: var(--mint-lt); color: #065F46; }
.notice-bar.info    { background: var(--sky-lt);  color: #0C4A6E; }

/* ===== FOOTER ===== */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.55); }
.footer-top-bar {
  background: linear-gradient(135deg, var(--sunrise), var(--rose), var(--violet));
  height: 4px;
}
.footer-inner {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 36px; padding: 42px 0 30px;
}
.footer-brand-logo {
  font-family: var(--font-display); font-size: 28px; font-weight: 600;
  color: #fff; letter-spacing:-0.5px; margin-bottom: 14px; display: inline-block;
}
.footer-brand-logo sup{ font-size:10px; color:var(--teal); font-family:var(--font-body); font-weight:500; letter-spacing:.05em; vertical-align:super; margin-left:2px; }
.footer-brand-logo span { color: var(--sunrise); }
.footer-tagline { font-size: 13px; line-height: 1.75; max-width: 260px; }
.footer-col h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: #fff; font-weight: 500; margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 13px; color: rgba(255,255,255,0.45); transition: color 0.2s; }
.footer-col ul a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
}
.footer-bottom a { color: rgba(255,255,255,0.35); }
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }
.footer-social { display: flex; gap: 16px; }
.footer-heart { color: var(--sunrise); }

/* ===== REVEAL ANIMATION ===== */
/* Content is visible by default; only hidden+animated when JS is present */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
html.js .reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .finder-inner, .story-layout, .name-detail-layout { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .stats-grid .stat-item { padding: 12px 28px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .stats-grid .stat-item:last-child { border-bottom: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .modal-stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
}
@media (max-width: 480px) {
  .hero-title { letter-spacing: -0.5px; }
  .hero-search-box { flex-direction: column; border-radius: var(--radius); padding: 12px; }
  .hero-search-btn { width: 100%; justify-content: center; }
}

/* ===== WP PAGINATION ===== */
.wp-pagination {
  display: flex; justify-content: center; gap: 8px; margin: 48px 0;
}
.wp-pagination .page-numbers {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: #fff; font-size: 14px; color: var(--ink-70); transition: all 0.2s;
}
.wp-pagination .page-numbers.current,
.wp-pagination .page-numbers:hover {
  background: var(--teal); color: #fff; border-color: var(--teal);
}

/* ===== BREADCRUMB ===== */
.breadcrumb { font-size: 13px; color: var(--ink-45); display: flex; gap: 8px; align-items: center; margin-bottom: 24px; }
.breadcrumb a { color: var(--teal); }
.breadcrumb-sep { color: var(--ink-20); }

/* ===== COPY FREE IMAGE GALLERY ===== */
.hero-images-row {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 44px; flex-wrap: wrap;
}
.hero-img-frame {
  width: 90px; height: 90px; border-radius: 50%;
  overflow: hidden; border: 3px solid #fff;
  box-shadow: var(--shadow);
  animation: float 4s ease-in-out infinite;
}
.hero-img-frame:nth-child(2) { animation-delay: 0.5s; width: 110px; height: 110px; }
.hero-img-frame:nth-child(3) { animation-delay: 1s; }
.hero-img-frame:nth-child(4) { animation-delay: 1.5s; width: 110px; height: 110px; }
.hero-img-frame:nth-child(5) { animation-delay: 2s; }
.hero-img-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ===== ALIGNMENT FIXES ===== */
/* Filter chips — perfect center alignment */
.hero-filter-row { display:flex; flex-wrap:nowrap; justify-content:center; gap:8px; align-items:center; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; }
.hero-filter-row::-webkit-scrollbar{display:none;}
.filter-chip { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; flex:0 0 auto; }

/* Name cards — equal height grid */
.names-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:14px; align-items:start; }
.name-card { display:flex; flex-direction:column; height:100%; }
.name-badges { margin-top:auto; padding-top:14px; }

/* Finder form — full width consistent inputs */
.finder-input, .finder-select { width:100%; }
.finder-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Stats bar — centered, equal columns */
.stats-grid { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
.stat-item { flex:1; min-width:140px; text-align:center; padding:12px 24px; }

/* Category grid — equal height cards */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 155px), 1fr)); gap:12px; }
.cat-card { display:flex; flex-direction:column; align-items:center; height:100%; }

/* Blog grid — equal height */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:18px; align-items:start; }
.blog-card { display:flex; flex-direction:column; height:100%; }
.blog-body { flex:1; }

/* Emotion grid — equal height */
.emotion-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:14px; }
.emotion-card { display:flex; flex-direction:column; }

/* Pet grid — equal height */
.pet-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap:14px; }
.pet-card { display:flex; flex-direction:column; align-items:center; }

/* Story layout — consistent gap */
.story-layout { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }

/* Name detail layout */
.name-detail-layout { display:grid; grid-template-columns:2fr 1fr; gap:48px; }

/* Footer — proper alignment */
.footer-inner { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:48px; }

/* Mobile fixes */
@media (max-width:1024px) {
  .story-layout, .name-detail-layout, .finder-inner { grid-template-columns:1fr; gap:32px; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:768px) {
  .finder-grid-2 { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:24px; }
  .stats-grid { flex-direction:column; }
  .stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); width:100%; }
  .stat-item:last-child { border-bottom:none; }
  .names-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap:12px; }
  .blog-grid { grid-template-columns:1fr; }
  .cat-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
}
@media (max-width:480px) {
  .hero-search-box { flex-direction:column; border-radius:var(--radius); padding:12px; }
  .hero-search-btn { width:100%; justify-content:center; border-radius:var(--radius-pill); }
  .names-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .pet-grid { grid-template-columns:1fr 1fr; }
}
/* Hero search: never stack input + button to avoid double-height on mobile */
@media(max-width:600px){
  .hero-search-box{ flex-direction:row !important; padding:6px 6px 6px 14px !important; border-radius:var(--radius-pill) !important; align-items:center; }
  .hero-search-box input{ font-size:14px !important; padding:10px 0 !important; min-height:0 !important; }
  .hero-search-btn{ width:auto !important; border-radius:var(--radius-pill) !important; padding:10px 16px !important; font-size:13px !important; }
}

/* ===== ULTRA LIVELY UPGRADE — BUTTONS & GRADIENTS ===== */

/* Primary button — electric coral with glow */
.btn-primary {
  background: linear-gradient(135deg, #FF4D2E, #F0006B) !important;
  box-shadow: 0 6px 28px rgba(240,0,107,.4) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #CC2A0A, #7C3AED) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(240,0,107,.5) !important;
}

/* Teal button */
.btn-teal {
  background: linear-gradient(135deg, #00B5AD, #0090FF) !important;
  box-shadow: 0 6px 28px rgba(0,181,173,.35) !important;
}
.btn-teal:hover { background: linear-gradient(135deg,#007A75,#006ACC) !important; }

/* Hero search button */
.hero-search-btn {
  background: linear-gradient(135deg, #FF4D2E, #F0006B) !important;
  box-shadow: 0 6px 24px rgba(255,77,46,.40) !important;
}

/* Hero background — more vibrant */
.hero {
  background: linear-gradient(160deg, #FFFCF8 0%, #EDE0FF 45%, #DFFAFA 100%) !important;
}

/* Ticker bar — light pink, logo-coloured text */
.ticker-bar {
  background: #FFF3F8 !important;
}

/* Nav logo accent */
.site-logo span { color: #FF4D2E !important; }

/* Category cards — more electric hover */
.cat-card.c-sunrise::after { background: linear-gradient(90deg, #FF4D2E, #F0006B) !important; }
.cat-card.c-teal::after    { background: linear-gradient(90deg, #00B5AD, #0090FF) !important; }
.cat-card.c-gold::after    { background: linear-gradient(90deg, #FF9500, #FF4D2E) !important; }
.cat-card.c-violet::after  { background: linear-gradient(90deg, #6B21F4, #F0006B) !important; }
.cat-card.c-rose::after    { background: linear-gradient(90deg, #F0006B, #F0006B) !important; }
.cat-card.c-mint::after    { background: linear-gradient(90deg, #00C48C, #00B5AD) !important; }

/* Name card border on hover — electric teal */
.name-card:hover { border-color: #00B5AD !important; box-shadow: 0 12px 48px rgba(0,181,173,.18) !important; }

/* Filter chip active state — more vivid */
.filter-chip.active         { background: #0F0820 !important; color: #fff !important; }
.filter-chip.active-teal    { background: linear-gradient(135deg,#00B5AD,#0090FF) !important; color:#fff !important; border-color:transparent !important; }
.filter-chip.active-violet  { background: linear-gradient(135deg,#6B21F4,#9B1AF5) !important; color:#fff !important; border-color:transparent !important; }
.filter-chip.active-rose    { background: linear-gradient(135deg,#F0006B,#F0006B) !important; color:#fff !important; border-color:transparent !important; }

/* Alpha browser button hover — electric */
.alpha-btn:hover {
  background: linear-gradient(135deg,#FF4D2E,#F0006B) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(240,0,107,.35) !important;
}

/* Emotion cards — more saturated */
.ec-courage  { background: linear-gradient(135deg, #FFF0EC, #FFD4C4) !important; color: #B3322F !important; }
.ec-wisdom   { background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important; color: #92400E !important; }
.ec-joy      { background: linear-gradient(135deg, #FFF7D6, #FDE047) !important; color: #854D0E !important; }
.ec-love     { background: linear-gradient(135deg, #FFE0F0, #FFB3D9) !important; color: #9D174D !important; }
.ec-peace    { background: linear-gradient(135deg, #CCFAEC, #99F5D8) !important; color: #004D33 !important; }
.ec-success  { background: linear-gradient(135deg, #FFE4EC, #FFB3CE) !important; color: #9F1239 !important; }

/* Story quote border — vivid */
.story-quote { border-left-color: #FF4D2E !important; }

/* Pet section bg */
.pet-section { background: linear-gradient(160deg, #EEE5FF 0%, #DFFAFA 100%) !important; }

/* Finder section — deeper */
.finder-section {
  background: linear-gradient(160deg, #0F0820 0%, #200C60 60%, #062420 100%) !important;
}

/* Stats bar */
.stats-bar { background: linear-gradient(135deg, #0F0820, #200C60) !important; }

/* CTA banner */
.footer-top-bar {
  background: linear-gradient(90deg, #FF4D2E, #F0006B, #6B21F4) !important;
  height: 5px !important;
}

/* Badge colors — more saturated */
.badge-hindu     { background: #FEF3C7 !important; color: #92400E !important; border-color: #FCD79A !important; }
.badge-muslim    { background: #DFFAFA !important; color: #005555 !important; border-color: #99E8E5 !important; }
.badge-sikh      { background: #FFF3DC !important; color: #774400 !important; border-color: #FFD080 !important; }
.badge-christian { background: #E0F2FF !important; color: #003D7A !important; border-color: #99CCFF !important; }
.badge-boy       { background: #E0F2FF !important; color: #003D99 !important; border-color: #80BBFF !important; }
.badge-girl      { background: #FFE0F0 !important; color: #B0004F !important; border-color: #FF99C8 !important; }
.badge-trending  { background: linear-gradient(135deg,#FFF0EC,#FFE0F0) !important; color: #CC2A0A !important; border-color: rgba(240,0,107,.25) !important; }

/* Popularity bar — vivid gradient */
.pop-fill { background: linear-gradient(90deg, #00B5AD, #6B21F4) !important; }

/* Similar name pill hover */
.similar-name-pill:hover { background: #00B5AD !important; color: #fff !important; border-color: #00B5AD !important; }

/* Footer social links hover */
.footer-social a:hover { color: #FF4D2E !important; }

/* Heart button loved state */
.heart-btn.loved { background: #FFE0F0 !important; border-color: #F0006B !important; color: #F0006B !important; }

/* Section eyebrow decorators */
.section-eyebrow::before, .section-eyebrow::after { background: currentColor !important; }

/* Scroll reveal — smoother */
html.js .reveal { transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) !important; }

/* Blog card hover */
.blog-card:hover { border-color: #6B21F4 !important; box-shadow: 0 16px 48px rgba(107,33,244,.15) !important; }

/* Story mini link hover */
.story-mini-link:hover { border-color: #00B5AD !important; box-shadow: 0 4px 20px rgba(0,181,173,.15) !important; }

/* Mobile menu links */
#mobile-menu a { font-family: var(--font-display); font-size: 32px; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--border); display: block; }

/* Word glow on hover for name cards */
.name-display { transition: color .2s; }
.name-card:hover .name-display { color: #C0005A !important; }

/* Kundali section colors */
.tn-kundali-wrap .finder-input:focus,
.tn-kundali-wrap .finder-select:focus { border-color: var(--gold) !important; }

/* ══════════════════════════════════════════════
   HERO — two-column layout + embedded baby image
   (v2.0 premium blend)
══════════════════════════════════════════════ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.hero-content { position: relative; z-index: 2; }

/* Right-side visual wrapper */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
/* Soft blurred colour orb behind the baby */
.hero-visual-orb {
  position: absolute;
  width: 92%; max-width: 580px; aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.18) 50%, transparent 75%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
/* Image wrapper — feathered edges + shadow glow + float */
.hero-baby-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 490px;
  /* drop-shadow (not box-shadow) so the glow follows the feathered
     silhouette instead of being clipped by the mask */
  /* depth + subtle white glow */
  filter: drop-shadow(0 22px 55px rgba(22,11,46,0.10)) drop-shadow(0 0 28px rgba(255,255,255,0.55));
  transform: translateY(0);
  animation: heroFloat 7s ease-in-out infinite;
  /* GENTLE outer fade only — feathers the empty transparent margin so there is
     no visible edge, while the ENTIRE baby stays fully visible (no clipping). */
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 86%, rgba(0,0,0,0.6) 94%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 48%, #000 86%, rgba(0,0,0,0.6) 94%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hero-baby-img {
  display: block;
  width: 100%;
  height: auto;        /* keeps aspect ratio — no stretching, no cropping */
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-baby-wrap { animation: none; }
}

/* Desktop: 60 / 40 split, left-aligned content */
@media (min-width: 981px) {
  .hero { text-align: left; }
  .hero-grid { grid-template-columns: 55% 45%; gap: 24px; }
  .hero-content .hero-badge { margin-bottom: 24px; }
  .hero-content .hero-sub { margin-left: 0; margin-right: 0; max-width: 540px; }
  .hero-content .hero-search-box { margin-left: 0; margin-right: 0; }
  .hero-content .hero-filter-row { justify-content: flex-start; }
  .hero-content #hero-search-results { margin-left: 0; margin-right: 0; max-width: 100%; }
  .hero-visual { min-height: 500px; }
  .hero-baby-wrap { max-width: 690px; }
}

/* Mobile: image below content, centered, smaller float */
@media (max-width: 980px) {
  .hero-visual { order: 2; min-height: 300px; margin-top: 8px; }
  .hero-content { order: 1; }
  .hero-baby-wrap { max-width: 350px; margin: 0 auto; }
  .hero-visual-orb { max-width: 320px; }
}

/* ── Pet feature pills, Celebrity & Gift Corner (v2.3 additions) ── */
.pet-feature-pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface,#fff);border:1.5px solid var(--border-md,#e7e1f5);border-radius:100px;padding:11px 22px;font-size:14px;font-weight:500;color:var(--ink,#160b2e);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.pet-feature-pill:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(22,11,46,.08);border-color:var(--violet,#7c3aed)}
.pet-feature-pill span{font-size:16px}

.celeb-section,.gift-section{padding:46px 0}
.gift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 210px),1fr));gap:14px}
.gift-card{display:flex;flex-direction:column;align-items:flex-start;background:var(--surface,#fff);border:1px solid var(--border,#eee);border-radius:18px;padding:22px;text-decoration:none;color:var(--ink,#160b2e);transition:transform .18s,box-shadow .18s}
.gift-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(22,11,46,.10)}
.gift-card .gift-emoji{font-size:30px;margin-bottom:12px}
.gift-card h3{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:21px;margin:0 0 6px;font-weight:500}
.gift-card p{margin:0 0 14px;font-size:13px;color:var(--ink-45,rgba(22,11,46,.55));line-height:1.5}
.gift-card .gift-cta{margin-top:auto;font-size:13px;font-weight:600;color:var(--teal,#0ea5a0)}

/* ── v2.5: heading bold+colorful, tighter hero top, category 2nd-row ── */
.hero-title.hero-title-bold { font-weight: 600; }
.hero-title .ht-c1 {
  background: linear-gradient(135deg, var(--sunrise), var(--gold, #F0A500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 700; display: inline-block; padding-bottom: 0.06em;
}
.hero-title .hero-accent { font-weight: 700; }

/* Reduce empty space above the hero heading */
.hero { padding-top: 34px; }
.hero .hero-badge { margin-bottom: 14px; }

/* Categories: religions on row 1, Trending 2026 & Unique & Rare on row 2 */
@media (min-width: 900px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Full-width hero search results (moved out of hero) */
#hero-search-results:empty { display: none; }
#hero-search-results { padding-left: 24px; padding-right: 24px; }
#hero-search-results .names-grid { margin-top: 8px; }

/* ── Blog article typography ── */
.article-body { font-size: 17px; line-height: 1.8; color: var(--ink-70, #3a3350); }
.article-body p { margin: 0 0 18px; }
.article-body h2 { font-family: var(--font-display,'Cormorant Garamond',serif); font-size: 28px; font-weight: 600; color: var(--ink,#160b2e); margin: 34px 0 12px; letter-spacing: -0.3px; }
.article-body strong { color: var(--ink,#160b2e); font-weight: 600; }
.article-body em { font-style: italic; }
.article-body ul { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin: 0 0 10px; }
.article-body a { color: var(--teal,#0ea5a0); }

/* ===================== MYTHOLOGY SECTION ===================== */
/* Design tokens for the mythology scope. These are LIGHT by default and are
   driven by the single sitewide theme (html[data-theme]) — see the dark-mode
   override block further below (v10.7). Contrast targets (WCAG AA on the dark
   surface #1c1530): --m-ink #F3EEFE ≈ 15:1, --m-mut #C3BBDD ≈ 8.5:1. */
.myth-scope{
  --m-bg:var(--cream); --m-surface:#fff; --m-ink:var(--ink);
  --m-mut:#5a5470; --m-border:var(--border); --m-soft:#faf7ff;
}
.myth-scope{ background:var(--m-bg); color:var(--m-ink); }
.myth-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

.myth-hero{ position:relative; padding:54px 0 30px; text-align:center; }
.myth-hero h1{ font-family:var(--font-display); font-size:clamp(34px,5vw,60px); font-weight:600; margin:8px 0 10px; color:var(--m-ink); letter-spacing:-.5px; }
.myth-hero h1 em{ font-style:normal; background:linear-gradient(120deg,var(--sunrise),var(--violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.myth-hero p{ max-width:620px; margin:0 auto; color:var(--m-mut); font-size:17px; }
.myth-eyebrow{ display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); }
.myth-theme-toggle{ position:absolute; right:20px; top:20px; border:1.5px solid var(--m-border); background:var(--m-surface); color:var(--m-ink); border-radius:100px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }

.myth-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:34px 0 10px; }
@media(max-width:980px){ .myth-cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .myth-cat-grid{ grid-template-columns:1fr; } }
.myth-cat-card{ position:relative; border-radius:22px; padding:26px 22px; min-height:184px; color:#3a2e1c; text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; box-shadow:var(--shadow-lg); transition:transform .25s ease, box-shadow .25s ease; isolation:isolate; border:1px solid rgba(0,0,0,.05); }
.myth-cat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.myth-cat-card::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.35), transparent 55%); z-index:-1; }
.myth-cat-emoji{ font-size:38px; line-height:1; filter:drop-shadow(0 3px 8px rgba(0,0,0,.18)); }
.myth-cat-card h3{ font-family:var(--font-display); font-size:25px; font-weight:700; margin:14px 0 4px; color:#F0006B !important; text-shadow:none; }
.myth-cat-grid .myth-cat-card > div > h3,
.myth-cat-grid .myth-cat-card h3{ color:#F0006B !important; }
.myth-cat-card p{ font-size:13px; opacity:1; line-height:1.45; margin:0; color:#5a4a3a; }
.myth-cat-count{ position:absolute; top:18px; right:18px; background:rgba(0,0,0,.10); backdrop-filter:blur(4px); border-radius:100px; padding:4px 11px; font-size:12px; font-weight:700; color:#3a2e1c; }
.myth-cat-heart{ position:absolute; top:16px; right:16px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.7); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12); transition:transform .15s ease, background .15s ease; }
.myth-cat-heart:hover{ transform:scale(1.1); background:#fff; }
.myth-cat-heart svg{ fill:none; stroke:#F0006B; stroke-width:2; transition:fill .18s ease, transform .18s ease; }
.myth-cat-heart.on svg{ fill:#F0006B; stroke:#F0006B; transform:scale(1.05); }
.myth-cat-heart.on{ background:#FFE0F0; }
/* Dark mode — keep cards light-ish but readable, headings a lighter blue */
[data-theme="dark"] .myth-cat-card{ filter:saturate(.9) brightness(.96); border-color:rgba(255,255,255,.06); }
[data-theme="dark"] .myth-cat-card h3,
[data-theme="dark"] .myth-cat-grid .myth-cat-card h3{ color:#F0006B !important; }
[data-theme="dark"] .myth-cat-card p{ color:#4a3f30; }
[data-theme="dark"] .myth-cat-count{ background:rgba(0,0,0,.14); color:#2e2418; }

.myth-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:42px 0 16px; flex-wrap:wrap; }
.myth-section-head h2{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--m-ink); margin:0; }
.myth-section-head a{ color:var(--violet); font-weight:600; font-size:14px; text-decoration:none; }

/* name cards */
.myth-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%, 260px),1fr)); gap:18px; }
.myth-card{ background:var(--m-surface); border:1px solid var(--m-border); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--m-ink); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.myth-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--violet); }
.myth-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.myth-card-name{ font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.1; }
.myth-pop{ font-size:11px; font-weight:700; color:var(--gold-dk,#9a7400); background:var(--gold-lt,#fff3d6); border-radius:100px; padding:3px 9px; white-space:nowrap; }
.myth-card-sub{ font-size:12px; color:var(--m-mut); font-weight:600; letter-spacing:.02em; }
.myth-card-mean{ font-size:14px; color:var(--m-ink); line-height:1.5; }
.myth-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.myth-tag{ font-size:11px; font-weight:600; color:var(--m-mut); background:var(--m-soft); border:1px solid var(--m-border); border-radius:100px; padding:3px 9px; }
.myth-tag b{ color:var(--violet); font-weight:700; }
.myth-card-cta{ margin-top:auto; font-size:13px; font-weight:700; color:var(--violet); }

/* filters */
.myth-toolbar{ position:sticky; top:64px; z-index:20; background:var(--m-bg); padding:12px 0; border-bottom:1px solid var(--m-border); margin-bottom:20px; }
.myth-search{ width:100%; border:1.5px solid var(--m-border); background:var(--m-surface); color:var(--m-ink); border-radius:100px; padding:13px 18px; font-size:15px; }
.myth-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.myth-filters select{ border:1.5px solid var(--m-border); background:var(--m-surface); color:var(--m-ink); border-radius:100px; padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.myth-count{ font-size:13px; color:var(--m-mut); margin:4px 0 14px; }

/* detail / story page */
.myth-detail{ max-width:820px; margin:0 auto; }
.myth-detail-banner{ border-radius:24px; padding:34px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.myth-detail-banner::after{ content:""; position:absolute; inset:0; background:radial-gradient(130% 120% at 100% 0%, rgba(255,255,255,.25), transparent 55%); }
.myth-detail-banner .ttl{ font-family:var(--font-display); font-size:clamp(36px,6vw,58px); font-weight:700; margin:0; position:relative; }
.myth-detail-banner .sub{ font-size:15px; opacity:.95; margin-top:6px; font-weight:600; position:relative; }
.myth-actions{ display:flex; gap:10px; margin:18px 0; flex-wrap:wrap; }
.myth-btn{ border:1.5px solid var(--m-border); background:var(--m-surface); color:var(--m-ink); border-radius:100px; padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; gap:7px; align-items:center; text-decoration:none; }
.myth-btn.fav.saved{ background:var(--rose-lt,#ffe4ef); border-color:var(--rose); color:#c0306a; }
.myth-fact-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%, 150px),1fr)); gap:12px; margin:22px 0; }
.myth-fact{ background:var(--m-surface); border:1px solid var(--m-border); border-radius:14px; padding:12px 14px; }
.myth-fact .k{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--m-mut); }
.myth-fact .v{ font-family:var(--font-display); font-size:18px; color:var(--m-ink); margin-top:2px; }
.myth-block{ background:var(--m-surface); border:1px solid var(--m-border); border-radius:16px; padding:22px 24px; margin:18px 0; }
.myth-block h3{ font-family:var(--font-display); font-size:23px; font-weight:600; margin:0 0 10px; color:var(--m-ink); }
.myth-block .story-quote{ border-left:4px solid var(--gold); background:var(--m-soft); margin:14px 0; padding:14px 18px; font-style:italic; font-size:17px; color:var(--m-ink); border-radius:0 10px 10px 0; }
.myth-block p{ color:var(--m-ink); line-height:1.75; margin:0 0 12px; font-size:16px; }
.myth-faq details{ border-bottom:1px solid var(--m-border); padding:12px 0; }
.myth-faq summary{ cursor:pointer; font-weight:600; color:var(--m-ink); font-size:15px; list-style:none; display:flex; justify-content:space-between; }
.myth-faq summary::after{ content:"+"; color:var(--violet); font-size:20px; }
.myth-faq details[open] summary::after{ content:"\2013"; }
.myth-faq p{ margin:10px 0 0; color:var(--m-mut); font-size:15px; line-height:1.6; }
.myth-rel{ display:flex; flex-wrap:wrap; gap:10px; }
.myth-rel a, .myth-rel span{ border:1.5px solid var(--m-border); background:var(--m-surface); color:var(--m-ink); border-radius:100px; padding:8px 15px; font-size:14px; font-weight:600; text-decoration:none; }
.myth-rel a:hover{ border-color:var(--violet); color:var(--violet); }
.myth-rel span{ opacity:.6; }

/* ===================== KUNDALI (full report, mobile-friendly) ===================== */
.kundali-result-wrap{ padding:24px 16px 56px; overflow-x:hidden; }
.kundali-result-card{ max-width:900px; margin:0 auto; background:#fff; border-radius:18px; padding:24px; box-shadow:var(--shadow-lg); box-sizing:border-box; }
.kundali-form{ max-width:660px; margin:0 auto; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:22px; display:grid; gap:13px; box-sizing:border-box; }
.kundali-form .finder-label{ color:rgba(255,255,255,.8); }
.kform-row{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }

.kundali-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:8px; }
.kundali-name{ font-family:var(--font-display); font-size:24px; color:var(--ink); }
.kundali-meta{ font-size:13px; color:var(--ink-45,#7a748f); margin-top:2px; }
.kundali-dl{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.kundali-dl-label{ font-size:11px; color:var(--ink-45,#7a748f); text-transform:uppercase; letter-spacing:.05em; }
.pdf-lang-toggle{ display:inline-flex; border:1.5px solid var(--border-md); border-radius:100px; overflow:hidden; }
.pdf-btn-en{ border:0; background:var(--violet); color:#fff; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.pdf-btn-hi{ border:0; background:var(--gold,#F0A500); color:#160B2E; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer; }

.ksec{ font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--ink); margin:26px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--cream); }
.kundali-charts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 220px),1fr)); gap:18px; }
.kchart{ min-width:0; }
.kchart-title{ font-weight:600; font-size:13px; margin-bottom:8px; color:var(--ink); }
.kchart-note{ font-size:13px; color:var(--ink-45,#7a748f); padding:18px; background:var(--cream); border-radius:10px; }
.kchart svg{ width:100%; height:auto; display:block; }
.kchart-key{ font-size:11px; color:var(--ink-45,#7a748f); margin:10px 0 0; }

.kfacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 132px),1fr)); gap:11px; }
.kfact{ background:var(--cream); border:1px solid var(--border); border-radius:12px; padding:10px 12px; min-width:0; }
.kfact-k{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-45,#7a748f); }
.kfact-v{ font-family:var(--font-display); font-size:18px; color:var(--ink); margin-top:2px; word-break:break-word; }

.ktable-wrap{ width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:12px; }
.ktable{ width:100%; border-collapse:collapse; font-size:13px; min-width:480px; }
.ktable th{ text-align:left; color:var(--ink-45,#7a748f); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--cream); }
.ktable td{ padding:8px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.ktable tr:last-child td{ border-bottom:0; }
.ktable .kbold{ font-weight:600; color:var(--ink); }

.kmanglik{ border-radius:12px; padding:13px 16px; font-size:14px; line-height:1.5; }
.kmanglik-nonmanglik{ background:#e8f7ee; border:1px solid #b9e6c9; color:#1e7a44; }
.kmanglik-partialmanglik{ background:#fff6e6; border:1px solid #ffd98a; color:#9a6a00; }
.kmanglik-manglik{ background:#FFF1E6; border:1px solid #F0C9A8; color:#C2410C; }
.kdisclaimer{ font-size:11px; color:var(--ink-45,#7a748f); margin-top:18px; }

/* ---- mobile ---- */
@media (max-width:640px){
  .kundali-result-wrap{ padding:16px 10px 44px; }
  .kundali-result-card{ padding:16px; border-radius:14px; }
  .kform-row{ grid-template-columns:1fr; }
  .kundali-charts{ grid-template-columns:1fr; gap:14px; }
  .kchart svg{ max-width:320px; margin:0 auto; }
  .kundali-head{ gap:10px; }
  .kundali-dl{ width:100%; }
  .ksec{ font-size:19px; margin:22px 0 10px; }
  .kfacts{ grid-template-columns:repeat(auto-fit,minmax(min(100%, 110px),1fr)); gap:9px; }
  .kfact-v{ font-size:16px; }
}

/* ============================================================
   GLOBAL MOBILE SAFETY NET — make every page 100% mobile-friendly
   (kills horizontal overflow / right-side cut-off, sticky-safe)
   ============================================================ */
/* overflow-x:hidden on the ROOT prevents horizontal scroll without
   breaking position:sticky (which lives on body descendants). */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
html, body { max-width: 100%; overflow-x: hidden; }
body { position: relative; width: 100%; }
img, svg, video, canvas, iframe, table, pre { max-width: 100%; }
.container, .container-sm, section, header, footer, main { max-width: 100%; }

@media (max-width: 768px) {
  .container, .container-sm { padding-left: 16px; padding-right: 16px; }
  .finder-grid-2 { grid-template-columns: 1fr !important; }
  .finder-inner, .story-layout, .name-detail-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .hero-title { font-size: clamp(24px, 6.6vw, 44px) !important; letter-spacing: -0.4px; }
  .hero-sub { font-size: 16px; }
  .section-title { font-size: clamp(24px, 6vw, 40px); }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ktable { display: table; }
}
@media (max-width: 480px) {
  .container, .container-sm { padding-left: 14px; padding-right: 14px; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
  .hero-title { font-size: clamp(22px, 7.4vw, 40px) !important; }
  .hero-badge { font-size: 10px; padding: 7px 14px; letter-spacing: 0.03em; }
  .site-logo { font-size: 24px; }
  .nav-inner { height: 60px; }
  .modal-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .names-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
}
@media (max-width: 380px) {
  .footer-inner { grid-template-columns: 1fr !important; }
  .hero-search-btn { padding: 12px 18px; }
}

/* ===== Homepage celebrity kids' names (no parents) ===== */
.celeb-kids-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%, 150px),1fr)); gap:12px; margin:8px 0 18px; }
.celeb-kid-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; text-decoration:none; display:flex; flex-direction:column; gap:4px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.celeb-kid-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--rose); }
.celeb-kid-name{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink); line-height:1.1; }
.celeb-kid-meta{ font-size:12px; color:var(--ink-45,#7a748f); line-height:1.4; }
@media (max-width:480px){ .celeb-kids-grid{ grid-template-columns:1fr 1fr; gap:10px; } .celeb-kid-name{ font-size:18px; } }

/* ============ HOMEPAGE v3.3 UI REFRESH ============ */
/* 1. Stats moved up (tighter to hero) */
.hero { padding-bottom: 18px !important; }
.stats-bar { padding: 16px 0 24px !important; }

/* 3+4+5 consistent section rhythm */
.section-header { margin-bottom: 30px; }

/* 4. Names by Emotion — 3 x 2 premium grid */
.emotion-grid-3x2 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.emotion-grid-3x2 .emotion-card{
  background:#fff; border:1px solid var(--border); border-radius:20px; padding:26px 24px;
  text-align:left; display:flex; flex-direction:column; gap:8px; min-height:210px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
  position:relative; overflow:hidden;
}
.emotion-grid-3x2 .emotion-card::after{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(240,0,107,.05)); pointer-events:none; }
.emotion-grid-3x2 .emotion-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:var(--violet); }
.emotion-grid-3x2 .emotion-card:hover::after{ opacity:1; }
.emotion-grid-3x2 .emotion-icon{ font-size:40px; line-height:1; }
.emotion-grid-3x2 .emotion-card h3{ font-family:var(--font-display); font-size:24px; font-weight:600; margin:6px 0 0; color:var(--ink); }
.emotion-grid-3x2 .emotion-card p{ font-size:13.5px; color:var(--ink-45,#6b6580); opacity:1; line-height:1.55; flex:1; }
.emotion-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.emotion-foot .e-count{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--violet); opacity:1; margin:0; }
.emotion-cta{ font-size:13px; font-weight:600; color:var(--sunrise); text-decoration:none; white-space:nowrap; }
.emotion-cta:hover{ text-decoration:underline; }

/* 5. Pet — 4 x 2 grid with CTA */
.pet-grid-4x2 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pet-grid-4x2 .pet-card{
  background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px 20px;
  display:flex; flex-direction:column; gap:7px; text-align:left; min-height:196px;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, border-color .26s ease;
}
.pet-grid-4x2 .pet-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:var(--violet); }
.pet-grid-4x2 .pet-emoji{ font-size:36px; line-height:1; }
.pet-grid-4x2 .pet-card h3{ font-size:18px; font-weight:600; color:var(--ink); margin:4px 0 0; }
.pet-grid-4x2 .pet-card p{ font-size:13px; color:var(--ink-45,#6b6580); line-height:1.5; flex:1; }
.pet-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.pet-grid-4x2 .pet-count{ font-size:13px; font-weight:700; color:var(--teal); }
.pet-cta{ font-size:12.5px; font-weight:600; color:var(--violet); text-decoration:none; white-space:nowrap; }
.pet-cta:hover{ text-decoration:underline; }

/* Most Loved page */
.ml-hero{ padding:30px 0 4px; }
.ml-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%, 240px),1fr)); gap:16px; }
.ml-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px 20px; text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.ml-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--sunrise); }
.ml-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ml-name{ font-family:var(--font-display); font-size:23px; font-weight:600; color:var(--ink); }
.ml-pop{ font-size:12px; font-weight:700; color:var(--gold-dk,#9a7400); background:var(--gold-lt,#fff3d6); border-radius:100px; padding:3px 10px; white-space:nowrap; }
.ml-meaning{ font-size:14px; color:var(--ink-45,#6b6580); line-height:1.5; }
.ml-tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px; }
.ml-origin{ font-size:11px; color:var(--ink-45,#7a748f); border:1px solid var(--border); border-radius:100px; padding:2px 9px; }

/* responsive */
@media (max-width: 900px){
  .emotion-grid-3x2{ grid-template-columns:repeat(2,1fr); }
  .pet-grid-4x2{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .emotion-grid-3x2{ grid-template-columns:1fr; }
  .pet-grid-4x2{ grid-template-columns:1fr 1fr; }
  .emotion-grid-3x2 .emotion-card{ min-height:0; }
}
@media (max-width: 380px){
  .pet-grid-4x2{ grid-template-columns:1fr; }
}

/* ============ AUTH / DASHBOARD / ADMIN ============ */
.nav-user{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:var(--cream); border:1px solid var(--border); border-radius:100px; padding:5px 12px 5px 5px; }
.nav-user img,.nav-user-ph{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.nav-user-ph{ background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }
.nav-user-name{ font-size:13px; font-weight:600; color:var(--ink); }
.auth-card{ background:#fff; border:1px solid var(--border); border-radius:22px; padding:38px 32px; text-align:center; box-shadow:var(--shadow-lg); }
.auth-logo{ font-size:42px; }
.auth-title{ font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--ink); margin:8px 0 6px; }
.auth-sub{ color:var(--ink-45,#6b6580); font-size:15px; line-height:1.6; margin-bottom:24px; }
.google-btn{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; background:#fff; border:1.5px solid var(--border-md); border-radius:100px; padding:14px 20px; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; transition:box-shadow .2s, border-color .2s; }
.google-btn:hover{ box-shadow:var(--shadow); border-color:var(--violet); }
.auth-fine{ font-size:11.5px; color:var(--ink-45,#7a748f); margin-top:16px; line-height:1.5; }
.auth-notice{ background:#fff6e6; border:1px solid #ffd98a; color:#7a5800; border-radius:14px; padding:16px 18px; text-align:left; font-size:13.5px; line-height:1.6; }
.auth-notice code{ background:rgba(0,0,0,.06); padding:1px 5px; border-radius:5px; font-size:12px; }

.dash-head{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.dash-avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:var(--shadow); }
.dash-avatar-ph{ background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:30px; }
.dash-name{ font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--ink); margin:0; }
.dash-email{ color:var(--ink-45,#6b6580); margin:2px 0 0; }
.dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.dash-tile{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px; text-decoration:none; transition:transform .2s, box-shadow .2s, border-color .2s; }
.dash-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--violet); }
.dash-tile-ico{ font-size:28px; }
.dash-tile h3{ font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); margin:10px 0 3px; }
.dash-tile p{ font-size:13px; color:var(--ink-45,#6b6580); margin:0; }
.dash-meta{ display:flex; flex-wrap:wrap; gap:26px; margin-top:26px; padding:18px 22px; background:var(--cream); border-radius:14px; }
.dash-meta div{ display:flex; flex-direction:column; }
.dash-meta span{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-45,#7a748f); }
.dash-meta b{ font-family:var(--font-display); font-size:18px; color:var(--ink); }
.profile-card{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-top:14px; }
.profile-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; border-bottom:1px solid var(--border); }
.profile-row:last-child{ border-bottom:0; }
.profile-row > span:first-child{ color:var(--ink-45,#6b6580); font-size:13px; }
.admin-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.admin-stat{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; text-align:center; }
.admin-stat-n{ font-family:var(--font-display); font-size:32px; font-weight:600; color:var(--violet); }
@media (max-width:760px){ .dash-grid{ grid-template-columns:1fr 1fr; } .admin-stats{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .dash-grid{ grid-template-columns:1fr; } }

/* Name Stories banner inside Mythology landing */
.myth-stories-banner{ display:flex; align-items:center; gap:18px; margin:30px 0 8px; padding:22px 26px;
  border-radius:20px; text-decoration:none; color:#3a2e1c; box-shadow:var(--shadow-lg);
  background:linear-gradient(135deg,#D6F5F3,#DDEEFF); position:relative; overflow:hidden;
  border:1px solid rgba(0,0,0,.05);
  transition:transform .25s ease, box-shadow .25s ease; }
.myth-stories-banner::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.35), transparent 55%); pointer-events:none; }
.myth-stories-banner:hover{ transform:translateY(-4px); box-shadow:var(--shadow-xl); }
.myth-stories-ico{ font-size:40px; line-height:1; flex:0 0 auto; }
.myth-stories-text{ flex:1; min-width:0; }
.myth-stories-text h3{ font-family:var(--font-display); font-size:24px; font-weight:700; margin:0 0 3px; color:#F0006B; text-shadow:none; }
.myth-stories-text p{ font-size:14px; opacity:1; margin:0; line-height:1.5; color:#5a4a3a; }
.myth-stories-cta{ flex:0 0 auto; font-weight:700; font-size:14px; white-space:nowrap; background:rgba(240,0,107,.10); border:1px solid rgba(240,0,107,.3); color:#F0006B; padding:10px 18px; border-radius:100px; }
[data-theme="dark"] .myth-stories-banner{ filter:saturate(.9) brightness(.96); border-color:rgba(255,255,255,.06); }
[data-theme="dark"] .myth-stories-text h3,[data-theme="dark"] .myth-stories-text p{ color:#3a2e1c; }
@media (max-width:600px){
  .myth-stories-banner{ flex-direction:column; text-align:center; gap:12px; padding:22px 18px; }
  .myth-stories-cta{ width:100%; text-align:center; }
}

/* ===== Brand mark: baby-face "o" in TotsName ===== */
.brand-o{ display:inline-block; width:0.78em; height:0.78em; margin:0 0.005em; position:relative; top:0.04em; }
.brand-o .brand-o-svg{ width:100%; height:100%; display:block; overflow:visible; }
.site-logo .brand-o, .footer-brand-logo .brand-o{ color:initial; }

/* ================= Hi/En + Light/Dark toggles ================= */
.seg-toggle{ display:inline-flex; align-items:center; border:1px solid var(--border-md); border-radius:100px; overflow:hidden; background:var(--surface); }
.seg-btn{ border:0; background:transparent; padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--ink-45); cursor:pointer; line-height:1; font-family:var(--font-body); transition:background .2s,color .2s; }
.seg-btn.active{ background:var(--violet); color:#fff; }
.icon-toggle{ width:38px; height:38px; border:1px solid var(--border-md); border-radius:50%; background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:border-color .2s,color .2s; }
.icon-toggle:hover{ border-color:var(--violet); color:var(--violet); }
.icon-toggle .ic-sun{ display:none; }
.icon-toggle .ic-moon{ display:block; }
[data-theme="dark"] .icon-toggle .ic-sun{ display:block; }
[data-theme="dark"] .icon-toggle .ic-moon{ display:none; }
.nav-right{ display:flex; align-items:center; gap:10px; }
.m-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 16px; }
.m-toggle-row .seg-btn{ padding:9px 16px; font-size:15px; }
.m-toggle-row .icon-toggle{ width:46px; height:46px; }
@media (max-width:820px){ .nav-right .seg-toggle, .nav-right #theme-toggle{ display:none; } }

/* Hide Google Translate chrome (banner, tooltip, highlight) */
.goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .skiptranslate iframe{ display:none !important; visibility:hidden !important; }
body{ top:0 !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
#google_translate_element{ position:absolute !important; left:-9999px !important; }

/* ================= DARK MODE ================= */
[data-theme="dark"]{
  --cream:#14111F; --white:#1C1830; --surface:#241E3C;
  --border:rgba(255,255,255,0.10); --border-md:rgba(255,255,255,0.18);
  --ink:#ECE8F7; --ink-70:#C9C1E0; --ink-45:#A79DC4; --ink-20:#4A4266;
  --teal-lt:#0E2B2A; --violet-lt:#241B45; --sunrise-lt:#1E2140;
  --gold-lt:#2A2410; --rose-lt:#0E2B30; --sky-lt:#10243A; --mint-lt:#0E2B22;
  --shadow:0 4px 24px rgba(0,0,0,.45); --shadow-lg:0 12px 48px rgba(0,0,0,.55); --shadow-xl:0 24px 80px rgba(0,0,0,.65);
}
[data-theme="dark"] body{ background:var(--cream); color:var(--ink); }
[data-theme="dark"] .site-header{ background:rgba(20,17,31,.88) !important; border-bottom-color:var(--border); }
[data-theme="dark"] .stats-bar{ background:#0A0715; }
[data-theme="dark"] .site-footer{ background:#0A0715; }
[data-theme="dark"] .hero{ background:linear-gradient(160deg,#14111F 0%,#1B1633 52%,#0E2424 100%); }
[data-theme="dark"] .mobile-menu, [data-theme="dark"] #mobile-menu{ background:var(--cream) !important; }
/* card / surface backgrounds that are hardcoded white in light mode */
[data-theme="dark"] .name-card,
[data-theme="dark"] .cat-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .gift-card,
[data-theme="dark"] .pet-card,
[data-theme="dark"] .emotion-card,
[data-theme="dark"] .emotion-grid-3x2 .emotion-card,
[data-theme="dark"] .pet-grid-4x2 .pet-card,
[data-theme="dark"] .ml-card,
[data-theme="dark"] .story-featured-card,
[data-theme="dark"] .story-mini-link,
[data-theme="dark"] .alpha-btn,
[data-theme="dark"] .finder-result-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .dash-tile,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .admin-stat,
[data-theme="dark"] .ktable-wrap,
[data-theme="dark"] .name-card-top{ background:var(--white); }
[data-theme="dark"] .name-card, [data-theme="dark"] .cat-card, [data-theme="dark"] .blog-card,
[data-theme="dark"] .pet-card, [data-theme="dark"] .emotion-card, [data-theme="dark"] .ml-card,
[data-theme="dark"] .alpha-btn, [data-theme="dark"] .dash-tile{ border-color:var(--border); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{ background:var(--white); color:var(--ink); border-color:var(--border-md); }
[data-theme="dark"] .hero-search-box{ background:var(--white); }
[data-theme="dark"] .badge-girl{ background:#241B45; }
[data-theme="dark"] .badge-boy{ background:#10243A; }
[data-theme="dark"] .badge-hindu{ background:#2A2410 !important; color:#FCD79A !important; border-color:#5A4A18 !important; }
[data-theme="dark"] .nav-user{ background:var(--surface); border-color:var(--border); }

/* Dark mode: sections with hardcoded light gradients */
[data-theme="dark"] .stories-section{ background:linear-gradient(160deg,#14111F 0%,#1A1633 100%); }
[data-theme="dark"] .pet-section{ background:linear-gradient(160deg,#181430 0%,#0E2424 100%) !important; }
[data-theme="dark"] .story-quote{ background:rgba(255,255,255,.04); }
[data-theme="dark"] .breadcrumb{ color:var(--ink-45); }
[data-theme="dark"] .myth-stories-text p{ opacity:.95; }

/* ====================================================================
   MOBILE HERO — consolidated & bulletproof (overrides scattered rules)
   ==================================================================== */
@media (max-width: 980px){
  .hero{ padding: 36px 0 22px !important; text-align:center !important; }
  .hero .container{ position:relative; }
  .hero-grid{ display:flex !important; flex-direction:column !important; gap:16px !important; align-items:stretch !important; }
  .hero-content{ order:1; width:100%; }
  .hero-visual{ order:2; min-height:0 !important; margin-top:2px !important; width:100%; }
  .hero-visual-orb{ max-width:300px; }
  .hero-baby-wrap{ max-width:280px !important; width:78%; margin:0 auto !important; }
  .hero-badge{ margin-bottom:14px !important; }
  .hero-title{ font-size:clamp(26px,6.8vw,40px) !important; line-height:1.16 !important; margin-bottom:10px !important; }
  .hero-sub{ font-size:15.5px !important; line-height:1.6 !important; max-width:520px; margin:0 auto 18px !important; }
  .hero-search-box{ max-width:560px; margin:0 auto 14px !important; }
}
@media (max-width: 560px){
  .hero{ padding: 28px 0 18px !important; }
  .hero-title{ font-size:clamp(23px,7.4vw,34px) !important; line-height:1.18 !important; }
  .hero-sub{ font-size:14.5px !important; margin-bottom:16px !important; }
  .hero-search-box{ flex-direction:column !important; align-items:stretch !important; border-radius:20px !important; padding:12px !important; gap:9px; }
  .hero-search-box input{ padding:8px 10px !important; text-align:center; font-size:15px !important; }
  .hero-search-btn{ width:100% !important; justify-content:center; border-radius:16px !important; padding:13px !important; }
  .hero-baby-wrap{ max-width:240px !important; width:72%; }
}
@media (max-width: 380px){
  .hero-title{ font-size:22px !important; }
  .hero-sub{ font-size:14px !important; }
  .hero-baby-wrap{ max-width:200px !important; width:66%; }
}
/* Hard guarantee: no hero element can exceed the viewport width */
.hero, .hero .container, .hero-grid, .hero-content, .hero-visual,
.hero-visual-orb, .hero-baby-wrap, .hero-search-box{ max-width:100% !important; }
.hero-baby-img{ max-width:100% !important; height:auto !important; }

/* ============ MYTHOLOGY HOME SECTION ============ */
.myth-home-section{ padding:54px 0; background:linear-gradient(160deg,#FFF6FB 0%,#FFF0EC 100%); }
.myth-home-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.myth-home-card{ display:flex; flex-direction:column; gap:9px; background:#fff; border:1px solid var(--border);
  border-radius:18px; padding:22px 22px 20px; text-decoration:none; color:var(--ink);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; position:relative; overflow:hidden; }
.myth-home-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--sunrise),var(--rose)); }
.myth-home-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:var(--rose); }
.myth-home-top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.myth-home-name{ font-family:var(--font-display); font-size:27px; font-weight:600; line-height:1; }
.myth-home-tag{ font-size:12px; font-weight:600; color:var(--rose); }
.myth-home-meaning{ font-size:13.5px; color:var(--ink-70,#4a4360); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.myth-home-facts{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--ink-45,#6b6580); }
.myth-home-facts b{ color:var(--ink-70,#4a4360); font-weight:600; }
.myth-home-story{ font-size:13px; color:var(--ink-45,#6b6580); line-height:1.55; margin:2px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.myth-home-cta{ margin-top:auto; padding-top:6px; font-size:13px; font-weight:700; color:var(--sunrise); }
[data-theme="dark"] .myth-home-section{ background:linear-gradient(160deg,#181226 0%,#1E1330 100%); }
[data-theme="dark"] .myth-home-card{ background:var(--white); border-color:var(--border); }
@media (max-width:900px){ .myth-home-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .myth-home-grid{ grid-template-columns:1fr; } }

/* ============ FLOATING BACK-TO-TOP ============ */
.back-to-top{ position:fixed; right:20px; bottom:22px; z-index:200; width:48px; height:48px; border-radius:50%;
  border:none; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--sunrise),var(--rose));
  box-shadow:0 8px 24px rgba(240,0,107,.4); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:opacity .25s, transform .25s, visibility .25s; }
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.back-to-top:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 30px rgba(240,0,107,.5); }
@media (max-width:560px){ .back-to-top{ right:14px; bottom:16px; width:44px; height:44px; } }

/* ============================================================
   v3.7 — Names bold+pink, heart favourites, mobile chips, spacing
   ============================================================ */
/* 1. ALL names bold + brand pink, most prominent element */
.name-display,
.ml-name,
.myth-card-name,
.myth-home-name,
.celeb-kid-name,
.finder-result-name,
.name-detail-main h1,
.similar-names-box .name-display{
  color: var(--rose) !important;      /* brand pink #F0006B */
  font-weight: 700 !important;
}
.name-card:hover .name-display{ color:#C0005A !important; }
.myth-card:hover .myth-card-name, .myth-home-card:hover .myth-home-name{ color:#C0005A !important; }

/* 2. Heart favourite button — outline ↔ filled pink + pop animation */
.heart-btn{ cursor:pointer; user-select:none; line-height:1; }
.heart-btn.loved{ background:var(--rose-lt) !important; border-color:var(--rose) !important; color:var(--rose) !important; }
.card-heart{ font-size:17px; }
@keyframes heartPop{ 0%{transform:scale(1);} 40%{transform:scale(1.4);} 70%{transform:scale(.88);} 100%{transform:scale(1);} }
.heart-btn.heart-pop{ animation:heartPop .35s ease; }
/* heart inside mythology / most-loved card tops sits top-right */
.myth-card-top, .ml-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }

/* 5. MOBILE category chips — Row1: All Names, then 4 + 4 (no scroll, no cut) */
@media (max-width: 600px){
  .hero-filter-row{
    display:grid !important; grid-template-columns:repeat(4, 1fr);
    gap:8px; overflow:visible !important; padding-bottom:0; justify-items:stretch;
  }
  .hero-filter-row::-webkit-scrollbar{ display:none; }
  .hero-filter-row .filter-chip{
    width:auto; text-align:center; padding:9px 4px; font-size:12px; white-space:nowrap;
    min-height:40px; display:flex; align-items:center; justify-content:center;
  }
  .hero-filter-row .filter-chip:first-child{   /* All Names spans full row, centered */
    grid-column:1 / -1; justify-self:center; padding:9px 30px; font-weight:700;
  }
}

/* 6. Tighter hero → strip spacing (premium above-the-fold) */
.hero{ padding-top: 26px !important; padding-bottom: 14px !important; }
.hero .hero-badge{ margin-bottom: 12px !important; }
.hero-sub{ margin-bottom: 16px !important; }
.hero-search-box{ margin-bottom: 12px !important; }
.hero-filter-row{ margin-top: 12px !important; }
.stats-bar{ padding: 14px 0 22px !important; }
@media (max-width: 600px){
  .hero{ padding-top: 18px !important; padding-bottom: 10px !important; }
  .hero-sub{ margin-bottom: 12px !important; }
}

/* ============ BLOG (v3.8) ============ */
.blog-readmore{ display:inline-block; margin-top:10px; font-size:13px; font-weight:700; color:var(--rose); }
.blog-cat-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
/* Featured */
.blog-featured{ display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--border); border-radius:20px; overflow:hidden; text-decoration:none; color:inherit; margin-bottom:30px; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; background:#fff; }
.blog-featured:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.blog-featured-thumb{ display:flex; align-items:center; justify-content:center; font-size:72px; min-height:220px; }
.blog-featured-body{ padding:26px 30px; }
.blog-featured-body h2{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--ink); margin:6px 0 8px; line-height:1.15; }
.blog-featured-body p{ color:var(--ink-45); font-size:15px; line-height:1.6; }
/* Author + share + meta row */
.post-author-row{ display:flex; align-items:center; gap:12px; margin-bottom:26px; flex-wrap:wrap; }
.post-author-avatar{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--rose),var(--festival)); color:#fff; font-family:var(--font-display); font-weight:600; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.post-author-avatar.lg{ width:56px; height:56px; font-size:26px; }
.post-author-name{ font-weight:700; color:var(--ink); font-size:14px; }
.post-author-meta{ font-size:12.5px; color:var(--ink-45); }
.post-share{ display:flex; gap:8px; margin-left:auto; }
.share-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; text-decoration:none; transition:all .2s; }
.share-btn:hover{ border-color:var(--rose); color:var(--rose); transform:translateY(-2px); }
/* TOC */
.post-toc{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--rose); border-radius:14px; padding:16px 22px; margin:0 0 28px; }
.post-toc-title{ font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--rose); margin-bottom:8px; }
.post-toc ol{ margin:0; padding-left:18px; }
.post-toc li{ margin:4px 0; }
.post-toc a{ color:var(--ink-70); text-decoration:none; font-size:14.5px; }
.post-toc a:hover{ color:var(--rose); }
.blog-index{ list-style:none; margin:14px 0 8px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
@media(max-width:680px){ .blog-index{ grid-template-columns:1fr; } }
.blog-index li{ display:flex; align-items:baseline; gap:8px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14.5px; line-height:1.45; }
.blog-index li a{ color:var(--ink-70); text-decoration:none; flex:1; }
.blog-index li a:hover{ color:var(--rose); }
.blog-index .bi-emoji{ margin-right:4px; }
.blog-index .bi-cat{ font-size:11px; color:var(--ink-45); white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; }
.blog-index li.current{ background:var(--surface); border-left:3px solid var(--rose); padding-left:10px; border-radius:6px; }
.blog-index li.current .bi-cur{ flex:1; color:var(--ink-85); font-weight:600; }
.blog-index li.current em{ color:var(--rose); font-style:normal; font-weight:400; }

/* ===== Book-style blog article ===== */
.book-page{
  background:radial-gradient(120% 80% at 50% 0%, #fffdf8 0%, #fbf6ea 58%, #f5eedb 100%);
  border:1px solid #e7d9b8; border-radius:6px;
  box-shadow:0 18px 50px -24px rgba(90,60,20,.45), inset 0 0 0 6px #fbf6ea, inset 0 0 0 7px #e3d2a8;
  padding:clamp(26px,5vw,64px) clamp(22px,5vw,70px); margin:16px 0 10px; position:relative;
}
.book-eyebrow{ text-align:center; text-transform:uppercase; letter-spacing:.26em; font-size:11.5px; color:#b08948; font-weight:600; }
.book-title{ font-family:'Cormorant Garamond',Georgia,serif; text-align:center; color:#7a2e1e; font-weight:600; font-size:clamp(30px,4.4vw,46px); line-height:1.16; margin:6px 0 6px; }
.book-meta{ text-align:center; color:#9a8a6a; font-style:italic; font-family:var(--font-display); font-size:16px; }
.book-rule{ width:130px; border:none; border-top:1.5px solid #d9c38c; margin:16px auto 26px; position:relative; }
.book-rule::after{ content:'\2766'; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:#fbf6ea; padding:0 12px; color:#c9a24b; font-size:16px; }
.book-body{ font-family:'Cormorant Garamond',Georgia,serif; color:#33291c; font-size:clamp(17px,1.5vw,19.5px); line-height:1.9; }
.book-body p{ margin:0 0 16px; text-align:justify; }
.book-body > p:first-of-type::first-letter{ font-family:var(--font-display); float:left; font-size:3.4em; line-height:.82; padding:6px 10px 0 0; color:#7a2e1e; font-weight:600; }
.book-body h2{ font-family:var(--font-display); color:#7a2e1e; font-weight:600; font-size:clamp(24px,3vw,32px); text-align:center; margin:36px 0 8px; line-height:1.2; }
.book-body h2::before{ content:'\2726'; display:block; color:#c9a24b; font-size:13px; margin-bottom:8px; letter-spacing:.2em; }
.book-body h3{ font-family:var(--font-display); color:#9a3b25; font-weight:600; font-size:clamp(19px,2.2vw,23px); margin:24px 0 6px; }
.book-body strong{ color:#5a3a1a; }
.book-body em{ color:#6a5a3a; }
.book-body a{ color:#9a3b25; text-decoration:underline; text-decoration-color:#d9c38c; }
.book-body ul,.book-body ol{ margin:6px 0 18px; padding-left:24px; }
.book-body li{ margin:7px 0; }
.book-body ul{ list-style:none; padding-left:6px; }
.book-body ul li{ position:relative; padding-left:24px; }
.book-body ul li::before{ content:'\2767'; position:absolute; left:0; top:1px; color:#c9a24b; font-size:13px; }
.book-figure{ margin:28px auto; text-align:center; max-width:440px; }
.book-figure img{ width:100%; border-radius:10px; border:6px solid #fff; box-shadow:0 14px 36px -16px rgba(90,60,20,.5), 0 0 0 1px #e7d9b8; }
.book-figure figcaption{ font-family:var(--font-display); font-style:italic; color:#9a8a6a; font-size:15px; margin-top:10px; }
.book-toc{ background:#fffaf0; border:1px solid #e7d9b8; border-left:4px solid #c9a24b; border-radius:8px; padding:14px 22px; margin:0 0 26px; }
.book-toc-title{ font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.04em; color:#9a3b25; margin-bottom:6px; }
.book-toc ol{ margin:0; padding-left:18px; }
.book-toc li{ margin:4px 0; }
.book-toc a{ color:#7a5a32; text-decoration:none; font-family:var(--font-display); font-size:16px; }
.book-toc a:hover{ color:#9a3b25; }
.book-body .tn-table{ width:100%; border-collapse:collapse; margin:18px 0 24px; font-family:'DM Sans','Cormorant Garamond',serif; font-size:15px; }
.book-body .tn-table th,.book-body .tn-table td{ border:1px solid #e7d9b8; padding:9px 12px; text-align:left; vertical-align:top; }
.book-body .tn-table th{ background:#fbf3dd; color:#7a2e1e; font-weight:600; }
.book-body .tn-table tr:nth-child(even) td{ background:#fffdf6; }
[data-theme="dark"] .book-body .tn-table th,[data-theme="dark"] .book-body .tn-table td{ border-color:#3a2e1c; }
[data-theme="dark"] .book-body .tn-table th{ background:#241c12; color:#eab78c; }
[data-theme="dark"] .book-body .tn-table tr:nth-child(even) td{ background:#1f1810; }
@media (max-width:560px){ .book-body .tn-table{ font-size:13px; } .book-body .tn-table th,.book-body .tn-table td{ padding:6px 8px; } }
@media (max-width:560px){ .book-body p,.book-body{ text-align:left; } }
[data-theme="dark"] .book-page{ background:linear-gradient(180deg,#221b12,#1b150e); border-color:#3a2e1c; box-shadow:0 18px 50px -24px #000, inset 0 0 0 6px #1b150e, inset 0 0 0 7px #3a2e1c; }
[data-theme="dark"] .book-body{ color:#e8dcc4; }
[data-theme="dark"] .book-title,[data-theme="dark"] .book-body h2{ color:#eab78c; }
[data-theme="dark"] .book-body h3{ color:#e0a07e; }
[data-theme="dark"] .book-body strong{ color:#f0d9a8; }
[data-theme="dark"] .book-toc{ background:#241c12; border-color:#3a2e1c; }
[data-theme="dark"] .book-meta{ color:#b8a888; }
/* Article body */
.article-body{ font-size:17px; line-height:1.75; color:var(--ink-70); }
.article-body h2{ font-family:var(--font-display); font-size:27px; color:var(--ink); margin:34px 0 12px; scroll-margin-top:90px; }
.article-body h2::after{ content:''; display:block; width:48px; height:3px; background:var(--rose); border-radius:3px; margin-top:8px; }
.article-body p{ margin:0 0 16px; }
.article-body ul{ margin:0 0 18px; padding-left:22px; }
.article-body li{ margin:7px 0; }
.article-body strong{ color:var(--ink); }
/* FAQ */
.post-faq{ margin:40px 0 10px; }
.post-faq h2{ font-family:var(--font-display); font-size:26px; margin-bottom:14px; }
.faq-item{ border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin-bottom:10px; background:#fff; }
.faq-item summary{ font-weight:700; color:var(--ink); cursor:pointer; font-size:15px; }
.faq-item p{ margin:10px 0 0; color:var(--ink-70); line-height:1.6; }
/* Author box */
.post-author-box{ display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 22px; margin-top:36px; }
.post-author-box p{ margin:6px 0 0; font-size:13.5px; color:var(--ink-45); line-height:1.6; }
[data-theme="dark"] .blog-featured, [data-theme="dark"] .faq-item{ background:var(--white); }
@media (max-width:680px){
  .blog-featured{ grid-template-columns:1fr; }
  .blog-featured-thumb{ min-height:150px; font-size:56px; }
  .post-share{ margin-left:0; width:100%; }
}

/* ============================================================
   v4.0 — Vibrant-blue headings, hero "Name", Mythology Library
   ============================================================ */
:root{ --head-blue:#1E66FF; --head-blue-dk:#0B45D8; }
[data-theme="dark"]{ --head-blue:#5B9BFF; }

/* 3. Vibrant blue for ALL major headings (NOT the hero heading) */
.section-title, .section-title em,
.myth-hero h1, .myth-hero h1 em,
.article-body h2, .post-faq h2, .post-faq h2,
.myth-section-head h2,
.blog-featured-body h2,
footer h4, .footer-col h4, .footer-col-title, .footer h3{
  color: var(--head-blue) !important;
  -webkit-text-fill-color: var(--head-blue) !important;  /* override any gradient text */
  background: none !important;
}
.section-title em{ font-style: normal; }            /* keep clean, unified blue */
.article-body h2::after{ background: var(--head-blue) !important; }

/* 2. Make hero "Name" slightly more prominent (keep gradient + animation) */
.hero-accent{ font-weight: 800 !important; letter-spacing: .3px; }

/* 6. Mythology Library cards (home) — equal heights, responsive, modern */
.myth-lib-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,200px),1fr));
  gap:16px; align-items:stretch;
}
.myth-lib-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:12px; padding:28px 18px; min-height:184px;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.myth-lib-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--head-blue); }
.myth-lib-ico{
  width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:30px; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.14); flex-shrink:0;
}
.myth-lib-card h3{ font-family:var(--font-display); font-size:17.5px; font-weight:600; color:var(--ink); line-height:1.25; margin:0; }
.myth-lib-card:hover h3{ color:var(--head-blue); }
.myth-lib-cta{ font-size:12.5px; font-weight:700; color:var(--rose); }
[data-theme="dark"] .myth-lib-card{ background:var(--white); }

/* 1. Extra hard guarantee against horizontal overflow (any page, any width) */
html, body{ overflow-x:clip; }
img, svg, video, iframe, canvas, pre, table{ max-width:100%; }
.container, section, header, footer{ max-width:100%; }
@media (max-width:420px){
  .myth-lib-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .myth-lib-card{ min-height:150px; padding:20px 12px; }
  .myth-lib-ico{ width:52px; height:52px; font-size:25px; }
  .myth-lib-card h3{ font-size:15px; }
}

/* Community & Region filter (Browse Names) */
.community-filter{ margin:0 0 22px; }
.community-filter-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--head-blue); margin-bottom:9px; }
.community-chips{ display:flex; flex-wrap:wrap; gap:8px; }

/* ============ v4.1 — Religion-based browse + religion pages ============ */
/* Religion cards (Browse Names + religion page footer) */
.religion-browse{ margin:0 0 26px; }
.religion-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr)); gap:14px; }
.religion-card{
  display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.religion-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--head-blue); }
.religion-card-ico{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; flex-shrink:0; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.religion-card-body{ flex:1; min-width:0; }
.religion-card-body h3{ font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ink); margin:0; line-height:1.2; }
.religion-card:hover .religion-card-body h3{ color:var(--head-blue); }
.religion-card-count{ font-size:13px; color:var(--ink-45); }
.religion-card-cta{ font-size:13px; font-weight:700; color:var(--rose); white-space:nowrap; }
[data-theme="dark"] .religion-card{ background:var(--white); }

/* Religion page */
.religion-hero{ display:flex; align-items:center; gap:18px; margin:6px 0 14px; }
.religion-hero-ico{ width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:36px; color:#fff; flex-shrink:0; box-shadow:0 8px 22px rgba(0,0,0,.14); }
.religion-hero-count{ color:var(--ink-45); margin:0; font-size:15px; }
.religion-hero-count strong{ color:var(--rose); }
.religion-intro{ font-size:16px; line-height:1.7; color:var(--ink-70); max-width:880px; margin:0 0 18px; }
.religion-quick{ display:flex; flex-wrap:wrap; gap:8px; }
.religion-sec{ padding:26px 0; }
.religion-sec:nth-child(even){ background:var(--surface); }
.religion-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.religion-viewall{ font-size:14px; font-weight:700; color:var(--head-blue); text-decoration:none; white-space:nowrap; }
.religion-viewall:hover{ text-decoration:underline; }
@media (max-width:560px){
  .religion-hero-ico{ width:58px; height:58px; font-size:28px; }
  .religion-sec-head{ align-items:center; }
}

/* ============ v4.2 — Kundali report sections ============ */
.kcards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,260px),1fr)); gap:14px; margin:4px 0 8px; }
.kcard{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--gold); border-radius:14px; padding:16px 18px; }
.kcard-h{ font-weight:700; color:var(--head-blue); margin-bottom:6px; font-size:15px; }
.kcard p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-70); }
.kfacts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,220px),1fr)); gap:10px; margin:4px 0 8px; }
.kfact{ display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.kfact-k{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-45); font-weight:700; }
.kfact-v{ font-size:14.5px; font-weight:600; color:var(--ink); }
[data-theme="dark"] .kcard, [data-theme="dark"] .kfact{ background:var(--white); }

/* Kundali predictions */
.ksub{ font-size:13px; color:var(--ink-45); margin:-2px 0 10px; }
.kcard-pred{ border-left-color:var(--head-blue); }

/* Kundali remedies sub-sections */
.ksub-h{ font-size:15px; font-weight:700; color:var(--head-blue); margin:18px 0 8px; }
.kremedy-list{ margin:6px 0 8px; padding-left:20px; }
.kremedy-list li{ font-size:13.5px; line-height:1.7; color:var(--ink-70); margin-bottom:4px; }

/* Kundali matching */
.kmatch-form{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px; }
.kmatch-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:18px; }
.kmatch-card{ background:var(--white); border:1px solid var(--border); border-radius:14px; padding:18px; }
.kmatch-card h3{ font-family:var(--font-display); font-size:20px; margin:0 0 10px; }
.kmatch-card .finder-label{ margin-top:10px; }
.kmatch-error{ background:#FEE2E2; color:#991B1B; border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:14px; }
.kmatch-result{ margin-top:30px; }
.kmatch-score{ text-align:center; background:linear-gradient(135deg,#1B0F3D,#3a1d6e); color:#fff; border-radius:18px; padding:28px; margin-bottom:20px; }
.kmatch-score-num{ font-family:var(--font-display); font-size:64px; font-weight:700; color:var(--gold); line-height:1; }
.kmatch-score-num span{ font-size:28px; color:rgba(255,255,255,.6); }
.kmatch-score-pct{ font-size:18px; font-weight:600; margin-top:4px; }
.kmatch-verdict{ font-size:15px; margin:10px 0 0; color:#E8DEFF; }
.kmatch-score .ksub{ color:rgba(255,255,255,.7); margin-top:8px; }

/* Kundali name-suggestion tabs */
.kname-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; }
.kname-tab{ padding:9px 18px; border:1.5px solid var(--border-md); background:var(--surface); border-radius:100px; font-weight:600; font-size:14px; cursor:pointer; color:var(--ink-70); }
.kname-tab.active{ background:var(--head-blue); border-color:var(--head-blue); color:#fff; }
.kname-panel{ display:none; }
.kname-panel.active{ display:block; }
.kname-basis{ display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--rose); margin-top:3px; }

/* ===== Mythological Names hub + figure ===== */
.myth-fig-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:14px; }
.myth-fig-card{ display:flex; gap:14px; align-items:flex-start; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:16px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s,border-color .2s; }
.myth-fig-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--head-blue); }
.myth-fig-ava{ width:50px;height:50px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:24px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--sunrise),var(--rose)); }
.myth-fig-body{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.myth-fig-name{ font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--ink); }
.myth-fig-card:hover .myth-fig-name{ color:var(--head-blue); }
.myth-fig-meta{ font-size:12px;font-weight:700;color:var(--rose);text-transform:uppercase;letter-spacing:.03em; }
.myth-fig-intro{ font-size:12.5px;color:var(--ink-45);line-height:1.5;margin-top:3px; }
.myth-fig-hero{ display:flex;gap:16px;align-items:center;margin:6px 0 10px; }
.myth-fig-hero-ava{ width:66px;height:66px;flex-shrink:0;border-radius:18px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:32px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--sunrise),var(--rose));box-shadow:0 8px 22px rgba(0,0,0,.14); }
.myth-fig-cat{ font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--rose); }
.myth-fig-lead{ font-size:16px;line-height:1.7;color:var(--ink-70);margin:0 0 6px; }
.myth-prose{ font-size:15px;line-height:1.75;color:var(--ink-70); }
.myth-story{ font-size:12.5px;color:var(--ink-45);font-style:italic; }
.myth-chips{ display:flex;flex-wrap:wrap;gap:8px; }
.myth-chip{ padding:7px 14px;background:var(--surface);border:1px solid var(--border);border-radius:100px;font-size:13px;color:var(--ink-70);text-decoration:none; }
a.myth-chip.linked:hover{ border-color:var(--head-blue);color:var(--head-blue); }
.myth-names{ display:flex;flex-wrap:wrap;gap:8px; }
.myth-name-pill{ padding:7px 14px;border-radius:100px;font-size:14px;font-weight:600;background:#FFF0F5;color:var(--ink-45);border:1px solid var(--border); }
.myth-name-pill.linked{ background:linear-gradient(135deg,var(--sunrise),var(--rose));color:#fff;text-decoration:none;border:none; }
.myth-name-pill.linked:hover{ opacity:.9; }
[data-theme="dark"] .myth-fig-card,[data-theme="dark"] .myth-chip{ background:var(--white); }

/* ===== All-names A-Z directory ===== */
.alpha-nav{ display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0; }
.alpha-link{ min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink-70);text-decoration:none;font-weight:600;font-size:14px; }
.alpha-link:hover{ background:var(--head-blue);border-color:var(--head-blue);color:#fff; }
.alpha-hindi .alpha-link{ font-size:15px; }
.alpha-block{ margin:22px 0;scroll-margin-top:90px; }
.alpha-head{ font-family:var(--font-display);font-size:26px;color:var(--head-blue);border-bottom:2px solid var(--border);padding-bottom:6px;margin-bottom:12px; }
.alpha-head span{ font-size:13px;color:var(--ink-45);font-weight:400; }
.alpha-names{ display:flex;flex-wrap:wrap;gap:7px; }
.alpha-name{ padding:5px 12px;background:var(--surface);border:1px solid var(--border);border-radius:100px;font-size:13.5px;color:var(--ink);text-decoration:none;font-weight:600; }
.alpha-name:hover{ border-color:var(--rose);color:var(--rose); }
[data-theme="dark"] .alpha-link,[data-theme="dark"] .alpha-name{ background:var(--white); }

/* ===== Instant search ===== */
.search-bar{ max-width:680px;margin:8px auto 14px; }
.search-input{ width:100%;padding:16px 22px;font-size:17px;border:2px solid var(--border-md);border-radius:100px;background:var(--surface);color:var(--ink);outline:none; }
.search-input:focus{ border-color:var(--head-blue); }
.search-filters{ display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:920px;margin:0 auto; }
.search-select{ padding:10px 14px;border:1px solid var(--border-md);border-radius:10px;background:var(--surface);color:var(--ink);font-size:13.5px;cursor:pointer; }
.search-clear{ padding:10px 18px;border:1px solid var(--border-md);border-radius:10px;background:transparent;color:var(--rose);font-weight:600;font-size:13.5px;cursor:pointer; }
.search-clear:hover{ background:var(--rose);color:#fff;border-color:var(--rose); }
.search-meta{ text-align:center;color:var(--ink-45);font-size:14px;margin:6px 0 18px;font-weight:600; }
.search-empty{ text-align:center;color:var(--ink-45);padding:40px 0;font-size:15px; }

/* ===== Ceremonies ===== */
.cer-hero{ padding:46px 0 28px;text-align:center;background:linear-gradient(135deg,#1B0F3D,#3a1d6e);color:#fff; }
.cer-hero .breadcrumb a,.cer-hero .breadcrumb span{ color:rgba(255,255,255,.7); }
.cer-hero-title{ font-family:var(--font-display);font-size:clamp(36px,6vw,60px);font-weight:300;margin:6px 0 8px;color:#fff; }
.cer-hero-sub{ font-size:clamp(15px,2.4vw,21px);font-weight:600;color:var(--gold);margin:0 0 14px; }
.cer-hero-desc{ max-width:720px;margin:0 auto;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.78); }
.cer-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px; }
.cer-card{ display:flex;flex-direction:column;gap:8px;padding:24px 20px;background:var(--surface);border:1px solid var(--border);border-radius:18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s; }
.cer-card:hover{ transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--head-blue); }
.cer-card-ico{ width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.14); }
.cer-card h3{ font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--ink);margin:6px 0 0; }
.cer-card p{ font-size:13.5px;color:var(--ink-45);line-height:1.55;margin:0;flex:1; }
.cer-card-cta{ font-size:13px;font-weight:700;color:var(--rose);margin-top:4px; }
/* timeline */
.cer-timeline{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 22px; }
.cer-stage{ display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;border:1.5px solid var(--border);border-radius:14px;background:var(--surface);cursor:pointer;min-width:92px; }
.cer-stage.active{ border-color:var(--head-blue);background:var(--head-blue);color:#fff; }
.cer-stage-ico{ font-size:24px; }
.cer-stage-lbl{ font-size:12px;font-weight:600;text-align:center; }
.cer-stage-panel{ display:none; }
.cer-stage-panel.active{ display:block; }
.cer-stage-h{ font-family:var(--font-display);font-size:22px;color:var(--head-blue);text-align:center;margin-bottom:14px; }
.cer-stage-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px; }
.cer-stage-card{ background:var(--white);border:1px solid var(--border);border-radius:14px;padding:16px; }
.cer-stage-rel{ display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);text-decoration:none;margin-bottom:8px; }
.cer-stage-dot{ width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0; }
.cer-stage-item{ display:flex;flex-direction:column;padding:6px 0;border-top:1px dashed var(--border); }
.cer-stage-item strong{ font-size:13.5px;color:var(--ink); }
.cer-stage-item span{ font-size:12px;color:var(--ink-45); }
.cer-compare a{ color:var(--head-blue);font-weight:700;text-decoration:none; }
.cer-articles{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;margin-top:8px; }
.cer-article{ display:flex;align-items:center;gap:12px;padding:16px;background:var(--white);border:1px solid var(--border);border-radius:14px;font-weight:600;color:var(--ink);font-size:14.5px; }
.cer-article-ico{ font-size:22px; }
/* religion detail */
.cer-fig-hero{ display:flex;align-items:center;gap:16px;margin:6px 0 10px; }
.cer-lead{ font-size:16px;line-height:1.7;color:var(--ink-70);margin:0 0 8px; }
.cer-list{ display:flex;flex-direction:column;gap:14px; }
.cer-item{ background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px; }
.cer-item-h{ display:flex;gap:14px;align-items:flex-start;margin-bottom:10px; }
.cer-item-num{ width:34px;height:34px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,var(--sunrise),var(--rose));color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px; }
.cer-item-name{ font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--head-blue);margin:0; }
.cer-item-alt{ font-size:13px;color:var(--ink-45); }
.cer-item-rows{ display:flex;flex-direction:column;gap:6px; }
.cer-row{ display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:14px;line-height:1.6; }
.cer-row-k{ font-weight:700;color:var(--rose);font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;padding-top:1px; }
.cer-note{ background:var(--surface);border-left:4px solid var(--gold);border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.7;color:var(--ink-70);margin:18px 0; }
.cer-other{ display:flex;flex-wrap:wrap;gap:8px; }
.cer-other-chip{ display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:100px;text-decoration:none;color:var(--ink);font-weight:600;font-size:13.5px; }
.cer-other-chip:hover{ border-color:var(--head-blue);color:var(--head-blue); }
[data-theme="dark"] .cer-card,[data-theme="dark"] .cer-item,[data-theme="dark"] .cer-stage,[data-theme="dark"] .cer-stage-card,[data-theme="dark"] .cer-article,[data-theme="dark"] .cer-other-chip{ background:var(--white); }
@media (max-width:560px){ .cer-row{ grid-template-columns:1fr;gap:0; } .cer-row-k{ margin-top:6px; } }

/* Blog article table */
.blog-table-wrap{ overflow-x:auto;margin:18px 0;border:1px solid var(--border);border-radius:12px; }
.blog-table{ width:100%;border-collapse:collapse;font-size:14px;min-width:560px; }
.blog-table th{ background:var(--head-blue);color:#fff;text-align:left;padding:10px 12px;font-size:13px;font-weight:600; }
.blog-table td{ padding:10px 12px;border-top:1px solid var(--border);color:var(--ink-70); }
.blog-table tr:nth-child(even) td{ background:var(--surface); }
.article-body table:not(.blog-table){ width:100%;border-collapse:collapse;margin:16px 0; }

/* ============================================================
   Google-Translate visibility fix
   When the page is translated (Hi), Google wraps each word in
   <font> tags. This breaks gradient/clipped text
   (background-clip:text + transparent fill) → text turns invisible
   or ghosts behind the original. While translated, Google adds
   .translated-ltr / .translated-rtl to <html>; in that state we
   fall back to solid, fully-visible colours everywhere.
   ============================================================ */
.translated-ltr .ht-c1, .translated-rtl .ht-c1,
.translated-ltr .ht-c1 font, .translated-rtl .ht-c1 font{
  background:none !important; -webkit-text-fill-color:var(--sunrise) !important; color:var(--sunrise) !important;
}
.translated-ltr .hero-title .hero-accent, .translated-rtl .hero-title .hero-accent,
.translated-ltr .hero-title .hero-accent font, .translated-rtl .hero-title .hero-accent font{
  background:none !important; -webkit-text-fill-color:var(--rose) !important; color:var(--rose) !important;
}
.translated-ltr .hero-title, .translated-rtl .hero-title,
.translated-ltr .hero-title font, .translated-rtl .hero-title font{
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
}
.translated-ltr .section-title span.highlight, .translated-rtl .section-title span.highlight,
.translated-ltr .section-title span.highlight font, .translated-rtl .section-title span.highlight font{
  background:none !important; -webkit-text-fill-color:var(--rose) !important; color:var(--rose) !important;
}
.translated-ltr .myth-hero h1 em, .translated-rtl .myth-hero h1 em,
.translated-ltr .myth-hero h1 em font, .translated-rtl .myth-hero h1 em font{
  background:none !important; -webkit-text-fill-color:var(--sunrise) !important; color:var(--sunrise) !important;
}
/* generic safety net: any element using transparent text-fill, once translated */
.translated-ltr [style*="text-fill-color: transparent"], .translated-rtl [style*="text-fill-color: transparent"],
.translated-ltr [style*="text-fill-color:transparent"], .translated-rtl [style*="text-fill-color:transparent"]{
  -webkit-text-fill-color:currentColor !important; background:none !important;
}
.translated-ltr [class*="gradient-text"], .translated-rtl [class*="gradient-text"]{
  -webkit-text-fill-color:currentColor !important; background:none !important;
}

/* Safety net: kundali / matching hero (white text needs a dark bg) */
.kundali-hero{ background:linear-gradient(135deg,#0F0820 0%,#200C60 50%,#062420 100%); }

/* ════════════════════════════════════════════════════════════
   v8.0 — PREMIUM HOMEPAGE REDESIGN (appended last → wins cascade)
   ════════════════════════════════════════════════════════════ */

/* 1 + 2. HERO: high-contrast heading, tighter balance, content pulled up */
.hero{ padding:30px 0 38px !important; }
.hero .hero-badge{ margin-bottom:16px !important; }
.hero-title.hero-title-bold{
  font-weight:800 !important;
  font-size:clamp(30px,4.7vw,60px) !important;
  line-height:1.08 !important; letter-spacing:-1.4px !important;
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  margin-bottom:16px !important; text-wrap:balance;
}
/* "First Gift" — warm solid (strong contrast, not a washed-out gradient) */
.hero-title .ht-c1{
  background:none !important; -webkit-text-fill-color:#E8431C !important; color:#E8431C !important;
  font-weight:800 !important;
}
/* "Name" — premium, readable gradient (saturated stops + bold) */
.hero-title .hero-accent{
  background:linear-gradient(120deg,var(--violet) 0%,var(--rose) 55%,var(--sunrise) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  font-weight:800 !important;
}
.hero-sub{
  font-size:17px !important; line-height:1.65 !important; color:var(--ink-70) !important;
  max-width:600px; margin:0 0 24px !important; font-weight:400 !important;
}

/* 3. SEARCH BAR — taller, bigger placeholder, icon, prominent button */
.hero-search-box{
  max-width:700px; margin:0 0 18px; padding:6px 6px 6px 22px;
  border:2px solid var(--border-md); border-radius:60px;
  box-shadow:0 18px 48px rgba(22,11,46,.14); transition:border-color .2s, box-shadow .2s;
}
.hero-search-ico{ color:var(--ink-45); flex-shrink:0; margin-right:8px; transition:color .2s; }
.hero-search-box:focus-within{ border-color:var(--teal); box-shadow:0 0 0 6px rgba(14,165,160,.12),0 18px 48px rgba(22,11,46,.14); }
.hero-search-box:focus-within .hero-search-ico{ color:var(--teal); }
.hero-search-box input{ font-size:17px !important; padding:17px 14px 17px 0 !important; }
.hero-search-box input::placeholder{ color:var(--ink-45) !important; font-size:15.5px; }
.hero-search-btn{
  padding:15px 32px !important; font-size:15px !important; font-weight:700 !important;
  border-radius:50px !important; box-shadow:0 6px 18px rgba(255,77,46,.42) !important;
}
.hero-search-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,77,46,.5) !important; }

/* 4. CATEGORY CHIPS — spacing, contrast, equal sizing, hover, wrap (no h-scroll) */
.hero-filter-row{
  display:flex !important; flex-wrap:wrap !important; overflow:visible !important;
  gap:11px !important; row-gap:11px; margin-top:22px !important;
}
.filter-chip{
  padding:10px 20px !important; font-size:14px !important; font-weight:600 !important;
  border-radius:50px !important; border:1.5px solid var(--border-md) !important;
  background:#fff !important; color:var(--ink-70) !important;
  box-shadow:0 2px 8px rgba(22,11,46,.05); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.filter-chip:hover{ transform:translateY(-2px); border-color:var(--rose) !important; color:var(--rose) !important; box-shadow:0 8px 18px rgba(240,0,107,.16); }
.filter-chip.active{ background:linear-gradient(135deg,var(--sunrise),var(--rose)) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 6px 16px rgba(255,77,46,.34); }

/* 7. TRUST BAR — premium stat cards */
.trust-bar{ padding:24px 0; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.trust-card{
  display:flex; align-items:center; gap:13px; padding:16px 18px;
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 4px 16px rgba(22,11,46,.05); transition:transform .2s ease, box-shadow .2s ease;
}
.trust-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(22,11,46,.1); }
.trust-ico{ font-size:26px; line-height:1; flex-shrink:0; }
.trust-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.trust-txt strong{ font-size:15.5px; color:var(--ink); font-weight:700; }
.trust-txt span{ font-size:12px; color:var(--ink-45); }
@media(max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .trust-grid{ grid-template-columns:1fr; } }

/* 6. MARQUEE — slow ~42% + breathing room */
.ticker-track{ animation-duration:86s !important; }
.ticker-item{ padding:0 6px; }
.ticker-sep{ margin:0 20px !important; }

/* 12. VISUAL POLISH — desktop hero balance */
@media(min-width:981px){
  .hero{ text-align:left; padding:34px 0 44px !important; }
  .hero-grid{ grid-template-columns:1.08fr .92fr !important; gap:34px !important; align-items:center; }
  .hero-content{ padding-right:8px; }
  .hero-search-box{ margin-left:0; margin-right:0; }
  .hero-filter-row{ justify-content:flex-start; }
}

/* 13. MOBILE — no horizontal scroll, hero fully visible, chips wrap, big touch targets */
@media(max-width:980px){
  .hero{ text-align:center !important; padding:22px 0 30px !important; }
  .hero-content{ padding-right:0; }
  .hero-search-box{ margin-left:auto; margin-right:auto; flex-wrap:nowrap; }
  .hero-filter-row{ justify-content:center; }
  .hero-visual{ min-height:240px; }
  .hero-baby-wrap{ max-width:300px; }
}
@media(max-width:560px){
  .hero-title.hero-title-bold{ font-size:clamp(27px,7.6vw,36px) !important; letter-spacing:-.8px !important; }
  .hero-sub{ font-size:15px !important; }
  .hero-search-box{ padding-left:16px; }
  .hero-search-box input{ font-size:15px !important; padding:14px 8px 14px 0 !important; }
  .hero-search-btn{ padding:13px 18px !important; font-size:13px !important; }
  .filter-chip{ padding:9px 16px !important; font-size:13px !important; }
}
html,body{ overflow-x:clip; }

/* ── Fix: Kundali Matching form inputs must be readable in BOTH light & dark ──
   .finder-input was built for the dark Name-Finder (white text). On the matching
   page the inputs sit in solid white cards, so white text was invisible in light
   mode. Re-theme them with theme-aware tokens. */
.kmatch-card .finder-input,
.kmatch-card .finder-select{
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-md) !important;
}
.kmatch-card .finder-input::placeholder{ color: var(--ink-45) !important; }
.kmatch-card .finder-select option{ background: var(--white) !important; color: var(--ink) !important; }
.kmatch-card .finder-label{ color: var(--ink-70) !important; }
.kmatch-card .finder-input:focus,
.kmatch-card .finder-select:focus{ border-color: var(--rose) !important; }

/* ── Kundali Matching banner (on /kundali/) + expert disclaimer ── */
.kmatch-banner{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  max-width:660px; margin:22px auto 0; padding:26px 24px;
  background:linear-gradient(135deg,#1B0F3D 0%,#3a1d6e 55%,#062420 100%);
  border-radius:18px; text-decoration:none; box-shadow:0 14px 40px rgba(22,11,46,.28);
  border:1px solid rgba(255,255,255,.08); transition:transform .2s ease, box-shadow .2s ease;
}
.kmatch-banner:hover{ transform:translateY(-3px); box-shadow:0 20px 52px rgba(22,11,46,.38); }
.kmatch-banner-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; }
.kmatch-banner-title{ font-family:var(--font-display); font-size:clamp(26px,4vw,42px); font-weight:300; color:#fff; line-height:1.1; }
.kmatch-banner-title em{ font-style:normal; color:var(--gold); }
.kmatch-banner-sub{ color:var(--gold); font-weight:600; font-size:clamp(13px,2vw,17px); }
.kmatch-banner-cta{ margin-top:10px; display:inline-block; background:linear-gradient(135deg,var(--gold),var(--sunrise)); color:var(--ink); font-weight:700; font-size:15px; padding:11px 26px; border-radius:100px; }
.kundali-disclaimer{
  max-width:660px; margin:18px auto 0; padding:14px 18px; font-size:13.5px; line-height:1.6;
  color:var(--ink-70); background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--gold); border-radius:12px;
}
.kmatch-disclaimer{
  margin:20px 0 0; padding:14px 18px; font-size:13.5px; line-height:1.6;
  color:var(--ink-70); background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--gold); border-radius:12px;
}

/* Pink "Continue" button */
.btn-continue{ background:linear-gradient(135deg,var(--rose),var(--sunrise)) !important; color:#fff !important; font-weight:700; padding:14px 40px; border-radius:100px; font-size:16px; box-shadow:0 8px 22px rgba(240,0,107,.32); border:none; }
.btn-continue:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(240,0,107,.42); }

/* ── v8.4 fixes ── */
/* 2. Hero base text must be WHITE in dark mode (was reading black) */
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-title.hero-title-bold,
[data-theme="dark"] .hero-title.hero-title-bold font{
  color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;
}
/* keep the two accents readable on the dark hero */
[data-theme="dark"] .hero-title .ht-c1{ color:#FF7A4D !important; -webkit-text-fill-color:#FF7A4D !important; background:none !important; }
[data-theme="dark"] .hero-title .hero-accent{
  background:linear-gradient(120deg,#A78BFA 0%,#FF6FA3 55%,#FF8A5C 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* 3. Hero filter chips: force a row break so Boy + gender/style wrap to 2nd row */
.hero-filter-break{ flex-basis:100%; width:100%; height:0; margin:0; padding:0; }

/* 5. Shift trust cards ~0.75 inch up toward the hero */
.trust-bar{ margin-top:-0.75in; position:relative; z-index:3; background:transparent; border-top:none; border-bottom:none; }
.trust-bar .trust-grid{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:16px; box-shadow:0 14px 40px rgba(22,11,46,.10); }
@media(max-width:980px){ .trust-bar{ margin-top:-0.4in; } }

/* ════ v8.5 ════ */
/* 2. Ceremonies hero — vibrant, festive, ceremonial-light banner */
.cer-hero{
  background:
    radial-gradient(circle at 18% 20%, rgba(255,184,77,.45) 0%, transparent 40%),
    radial-gradient(circle at 82% 25%, rgba(240,0,107,.40) 0%, transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(255,210,120,.35) 0%, transparent 55%),
    linear-gradient(135deg,#4A0E4E 0%,#812B5E 45%,#C2410C 100%) !important;
  position:relative; overflow:hidden;
}
.cer-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 30% 60%, rgba(255,221,148,.30), transparent 8%),
    radial-gradient(circle at 70% 40%, rgba(255,221,148,.28), transparent 7%),
    radial-gradient(circle at 12% 80%, rgba(255,221,148,.25), transparent 6%),
    radial-gradient(circle at 88% 75%, rgba(255,221,148,.25), transparent 6%);
}
.cer-hero-title{ font-weight:800 !important; font-size:clamp(38px,6.5vw,72px) !important; text-shadow:0 4px 30px rgba(0,0,0,.3); position:relative; }
.cer-hero-sub{ color:#FFE6A8 !important; font-size:clamp(16px,2.6vw,24px) !important; font-weight:700 !important; position:relative; }
.cer-hero-desc{ position:relative; }

/* 4. Ceremony article links — look & behave clickable */
.cer-article{ cursor:pointer; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cer-article:hover{ transform:translateY(-2px); border-color:var(--rose); box-shadow:0 8px 20px rgba(240,0,107,.14); }

/* 5. Hero palette warmed to harmonise with the baby (warm skin + cream clothes) */
.hero{ background:
    radial-gradient(circle at 78% 30%, rgba(255,214,184,.55) 0%, transparent 48%),
    radial-gradient(circle at 12% 18%, rgba(255,236,210,.6) 0%, transparent 50%),
    linear-gradient(135deg,#FFF6EF 0%,#FBEFF5 55%,#F3ECFF 100%) !important; }

/* 7. Print: show only the matching result, clean for PDF */
@media print{
  .site-header,.ticker-bar,.site-footer,#mobile-menu,.back-to-top,.kmatch-banner,.kmatch-actions,#nav-search-dropdown{ display:none !important; }
  .kundali-hero{ background:#fff !important; color:#111 !important; }
  .kundali-hero *{ color:#111 !important; }
  body{ background:#fff !important; }
}

/* ════ v8.6 ════ */
/* 9. ALL HEADINGS → bold pink→magenta→blue gradient (with translate fallback) */
.section-title{
  background:linear-gradient(100deg,#F0006B 0%,#C026D3 48%,#1E66FF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:800 !important; letter-spacing:-.5px;
}
.section-title em{ font-style:normal; -webkit-text-fill-color:transparent; }
.translated-ltr .section-title, .translated-rtl .section-title,
.translated-ltr .section-title em, .translated-rtl .section-title em{
  background:none !important; -webkit-text-fill-color:#C026D3 !important; color:#C026D3 !important;
}

/* 2. /names/ "Search Baby Names" — big, bold, highlighted */
.names-h1-highlight{ font-size:clamp(34px,5.2vw,58px) !important; line-height:1.05; display:inline-block; position:relative; padding-bottom:6px; }
.names-h1-highlight::after{ content:""; position:absolute; left:12%; right:12%; bottom:-2px; height:5px; border-radius:5px; background:linear-gradient(90deg,#F0006B,#C026D3,#1E66FF); opacity:.9; }

/* 7. HERO heading — ~50% larger, bold, colourful */
.hero-title.hero-title-bold{
  font-size:clamp(44px,7vw,86px) !important; line-height:1.05 !important; letter-spacing:-1.6px !important;
  font-weight:800 !important;
}
.hero-title .ht-c1{
  background:linear-gradient(100deg,#F0006B,#C026D3) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; font-weight:800 !important;
}
.hero-title .hero-accent{
  background:linear-gradient(100deg,#C026D3 0%,#F0006B 45%,#1E66FF 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; font-weight:800 !important;
}
.hero-sub{ font-size:clamp(16px,2.2vw,21px) !important; }
/* translate fallback for the new hero gradients */
.translated-ltr .hero-title .ht-c1, .translated-rtl .hero-title .ht-c1{ background:none !important; -webkit-text-fill-color:#F0006B !important; color:#F0006B !important; }
.translated-ltr .hero-title .hero-accent, .translated-rtl .hero-title .hero-accent{ background:none !important; -webkit-text-fill-color:#C026D3 !important; color:#C026D3 !important; }

/* ════ v8.7 — headings: pink/red/magenta/orange/blue, bold, never white in dark ════ */
.section-title,
.section-title em{
  background:linear-gradient(100deg,#F0006B 0%,#FF2D55 24%,#C026D3 48%,#FF6B00 72%,#1E66FF 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  font-weight:800 !important;
}
/* keep the gradient in dark mode too (do NOT turn headings white) */
[data-theme="dark"] .section-title,
[data-theme="dark"] .section-title em{
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
/* translate fallback (Hindi) — solid magenta so it never disappears */
.translated-ltr .section-title, .translated-rtl .section-title,
.translated-ltr .section-title em, .translated-rtl .section-title em{
  background:none !important; -webkit-text-fill-color:#C026D3 !important; color:#C026D3 !important;
}

/* HERO heading — same five-colour combination across the whole line, bold */
.hero-title.hero-title-bold,
.hero-title.hero-title-bold .ht-c1,
.hero-title.hero-title-bold .hero-accent{
  background:linear-gradient(100deg,#F0006B 0%,#FF2D55 22%,#C026D3 46%,#FF6B00 70%,#1E66FF 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  font-weight:800 !important;
}
/* never white in dark mode */
[data-theme="dark"] .hero-title.hero-title-bold,
[data-theme="dark"] .hero-title.hero-title-bold .ht-c1,
[data-theme="dark"] .hero-title.hero-title-bold .hero-accent,
[data-theme="dark"] .hero-title.hero-title-bold font{
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
/* soft, small underline beneath the hero heading (like /style/trending/) */
.hero-title.hero-title-bold{ position:relative; padding-bottom:14px; display:block; }
.hero-title.hero-title-bold::after{
  content:""; position:absolute; left:0; bottom:2px; width:84px; height:4px; border-radius:4px;
  background:linear-gradient(90deg,#F0006B,#FF6B00,#1E66FF); opacity:.55;
}
@media(max-width:980px){ .hero-title.hero-title-bold::after{ left:50%; transform:translateX(-50%); } }
/* translate (Hindi) fallback for the hero gradient */
.translated-ltr .hero-title.hero-title-bold, .translated-rtl .hero-title.hero-title-bold,
.translated-ltr .hero-title.hero-title-bold .ht-c1, .translated-rtl .hero-title.hero-title-bold .ht-c1,
.translated-ltr .hero-title.hero-title-bold .hero-accent, .translated-rtl .hero-title.hero-title-bold .hero-accent{
  background:none !important; -webkit-text-fill-color:#C026D3 !important; color:#C026D3 !important;
}

/* ════ v8.8 ════ */
/* Hero heading: SOLID multi-colour words (no gradient-clip → no "paper-slip" boxes,
   no white outline, renders cleanly even when Google wraps words in <font>) */
.hero-title.hero-title-bold{
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:initial !important;
}
.hero-title.hero-title-bold,
.hero-title.hero-title-bold font{ color:#C026D3 !important; -webkit-text-fill-color:#C026D3 !important; }
.hero-title.hero-title-bold .ht-c1,
.hero-title.hero-title-bold .ht-c1 font{ background:none !important; color:#F0006B !important; -webkit-text-fill-color:#F0006B !important; }
.hero-title.hero-title-bold .hero-accent,
.hero-title.hero-title-bold .hero-accent font{ background:none !important; color:#1E66FF !important; -webkit-text-fill-color:#1E66FF !important; }
[data-theme="dark"] .hero-title.hero-title-bold,
[data-theme="dark"] .hero-title.hero-title-bold font{ color:#E879F9 !important; -webkit-text-fill-color:#E879F9 !important; }
[data-theme="dark"] .hero-title.hero-title-bold .ht-c1,
[data-theme="dark"] .hero-title.hero-title-bold .ht-c1 font{ color:#FF6FA3 !important; -webkit-text-fill-color:#FF6FA3 !important; }
[data-theme="dark"] .hero-title.hero-title-bold .hero-accent,
[data-theme="dark"] .hero-title.hero-title-bold .hero-accent font{ color:#7AAEFF !important; -webkit-text-fill-color:#7AAEFF !important; }

/* Hero sub-text: readable in dark mode (was dark purple --ink-70) */
[data-theme="dark"] .hero-sub{ color:rgba(255,255,255,.82) !important; }

/* ============================================================
   v9.2 — HERO REDESIGN (match approved mockup)
   Star badge · full-gradient heading · feature chips ·
   decorative script · 4-item trust strip
   ============================================================ */

/* ---- Star badge ---- */
.hero-badge.hero-badge-star{
  gap:7px; padding:7px 18px; text-transform:uppercase;
  letter-spacing:.07em; font-weight:600;
}
.hero-badge-star-ico{ color:var(--rose); flex-shrink:0; }

/* ---- Full-gradient hero heading ---- */
.hero-title.hero-title-grad{
  font-family:var(--font-display);
  font-weight:800 !important;
  font-size:clamp(32px,4.9vw,62px) !important;
  line-height:1.08 !important; letter-spacing:-1.4px !important;
  margin:0 0 14px !important; max-width:14ch; text-wrap:balance;
  background:linear-gradient(104deg,
      var(--rose) 0%, #A62BC9 34%, var(--violet) 54%, #C42E7A 74%, var(--sunrise) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* thin gradient rule under the heading (mockup) */
.hero-title-rule{
  display:block; width:96px; height:5px; border-radius:6px; margin:0 0 22px;
  background:linear-gradient(90deg,var(--rose),var(--violet),var(--sunrise));
}
/* Dark-mode + Google-Translate fallbacks so it never goes invisible */
[data-theme="dark"] .hero-title.hero-title-grad,
[data-theme="dark"] .hero-title.hero-title-grad font{
  background:none !important; -webkit-text-fill-color:#FFFFFF !important; color:#FFFFFF !important;
}
.translated-ltr .hero-title.hero-title-grad, .translated-rtl .hero-title.hero-title-grad,
.translated-ltr .hero-title.hero-title-grad font, .translated-rtl .hero-title.hero-title-grad font{
  background:none !important; -webkit-text-fill-color:var(--rose) !important; color:var(--rose) !important;
}

/* ---- Feature chips row (Verified / Origins / Rashi / Modern) ---- */
.hero-features{
  display:flex; align-items:flex-start; gap:0;
  margin:6px 0 22px; flex-wrap:wrap;
}
.hero-feat{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:9px; padding:0 20px; position:relative; min-width:96px;
}
.hero-feat + .hero-feat::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:1px; background:var(--border-md); opacity:.7;
}
.hero-feat-ico{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero-feat-ico.hf-rose  { background:rgba(240,0,107,.10);  color:var(--rose); }
.hero-feat-ico.hf-violet{ background:rgba(107,33,244,.10); color:var(--violet); }
.hero-feat-ico.hf-gold  { background:rgba(245,158,11,.14); color:var(--gold); }
.hero-feat-ico.hf-pink  { background:rgba(240,0,107,.10);  color:var(--rose); }
.hero-feat-lbl{
  font-size:12.5px; font-weight:600; line-height:1.28; color:#54505E;
}
[data-theme="dark"] .hero-feat-lbl{ color:#D9CCF5; }

/* ---- Hero decorative script + hearts (desktop only) ---- */
.hero-deco{ position:absolute; z-index:2; pointer-events:none; }
.hero-deco-script{
  top:14%; right:-2%;
  font-family:'Pacifico','Segoe Script',var(--font-display),cursive;
  font-style:italic; font-weight:600; font-size:20px; line-height:1.15;
  color:var(--rose); text-align:center; transform:rotate(-6deg);
  background:linear-gradient(120deg,var(--rose),var(--violet));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero-deco-heart.hd-1{ top:24%; left:2%; opacity:.85; }
.hero-deco-heart.hd-2{ top:11%; left:18%; opacity:.9; }
.translated-ltr .hero-deco-script, .translated-rtl .hero-deco-script,
.translated-ltr .hero-deco-script font, .translated-rtl .hero-deco-script font{
  background:none !important; -webkit-text-fill-color:var(--rose) !important; color:var(--rose) !important;
}
@media(max-width:980px){ .hero-deco{ display:none !important; } }

/* ---- TRUST STRIP — flat 4-up band (match mockup) ---- */
.trust-bar{ padding:20px 0 !important; background:var(--surface) !important;
  border-top:1px solid var(--border) !important; border-bottom:1px solid var(--border) !important; }
.trust-grid{ grid-template-columns:repeat(5,1fr) !important; gap:10px !important; }
.trust-card{
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:6px 12px !important; gap:12px !important; justify-content:center;
}
.trust-card:hover{ transform:none !important; box-shadow:none !important; }
.trust-ico-svg{ flex-shrink:0; color:var(--violet); display:flex; align-items:center; }
[data-theme="dark"] .trust-ico-svg{ color:#C9B6FF; }
.trust-txt strong{ font-size:14.5px !important; }
.trust-txt span{ font-size:11.5px !important; }
@media(max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; } }
@media(max-width:480px){ .trust-grid{ grid-template-columns:1fr !important; } .trust-card{ justify-content:flex-start; } }

/* ---- Hero responsive tweaks for new pieces ---- */
@media(min-width:981px){
  .hero-features{ justify-content:flex-start; }
}
@media(max-width:980px){
  .hero-title.hero-title-grad{ max-width:100%; margin-left:auto; margin-right:auto; }
  .hero-title-rule{ margin-left:auto; margin-right:auto; }
  .hero-features{ justify-content:center; }
}
@media(max-width:560px){
  .hero-title.hero-title-grad{ font-size:clamp(28px,8vw,38px) !important; letter-spacing:-.8px !important; }
  .hero-feat{ padding:0 12px; min-width:0; flex:1 1 40%; }
  .hero-feat-ico{ width:42px; height:42px; }
}

/* ============================================================
   v9.3 — HERO IMAGE 100% BLEND + SCRIPT (pink, Title Case, stretched)
   ============================================================ */

/* Backdrop behind baby = EXACT photo background pink, so the image edge
   has no visible box — it melts into a matching field that then fades
   into the page. */
.hero-visual-orb{
  background:radial-gradient(circle,
      #FDDFD6 0%, #FDE3DB 46%, rgba(253,227,219,.35) 70%, transparent 82%) !important;
  filter:blur(10px) !important;
  width:104% !important; max-width:760px !important;
}
/* Dissolve ALL edges of the photo into that pink field (no rectangle) */
.hero-baby-wrap{
  -webkit-mask-image:radial-gradient(closest-side, #000 60%, rgba(0,0,0,.45) 82%, transparent 100%) !important;
          mask-image:radial-gradient(closest-side, #000 60%, rgba(0,0,0,.45) 82%, transparent 100%) !important;
}
/* Stretch the image fuller within the visual area */
@media(min-width:981px){
  .hero-visual{ min-height:540px !important; }
  .hero-baby-wrap{ max-width:560px !important; width:100% !important; }
}

/* Script — solid PINK, Title Case (text), larger & stretched across the image */
.hero-deco-script{
  top:6% !important; left:50% !important; right:auto !important;
  transform:translateX(-50%) rotate(-4deg) !important;
  width:88% !important; text-align:center !important;
  font-size:clamp(26px,2.4vw,40px) !important; line-height:1.05 !important;
  letter-spacing:.5px !important; white-space:nowrap !important;
  background:none !important;
  -webkit-text-fill-color:var(--rose) !important; color:var(--rose) !important;
  text-shadow:0 1px 10px rgba(255,255,255,.65) !important;
}

/* ============================================================
   v9.4 — PINK PUNCHLINE HEADING + HERO SCENE (fills the void)
   ============================================================ */

/* --- Heading: beautiful PINK-only gradient, Title Case, "Name" punchline --- */
.hero-title.hero-title-grad.hero-title-pink{
  background:linear-gradient(100deg,#FF7AB8 0%, #F50A78 44%, #D6005E 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  max-width:15ch;
}
.hero-title .ht-dash{
  -webkit-text-fill-color:#F50A78; color:#F50A78; font-weight:400; opacity:.8;
  padding:0 .04em;
}
.hero-title .ht-name{
  font-weight:900; letter-spacing:-.5px;
  -webkit-text-fill-color:transparent; color:transparent;
  background:linear-gradient(120deg,#FF4FA3 0%, #F0006B 60%, #C2005A 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 6px 22px rgba(240,0,107,.18);
}
[data-theme="dark"] .hero-title.hero-title-grad.hero-title-pink,
[data-theme="dark"] .hero-title.hero-title-grad.hero-title-pink font,
[data-theme="dark"] .hero-title .ht-name, [data-theme="dark"] .hero-title .ht-dash{
  background:none !important; -webkit-text-fill-color:#FF8FC0 !important; color:#FF8FC0 !important;
}
.translated-ltr .hero-title.hero-title-pink, .translated-rtl .hero-title.hero-title-pink,
.translated-ltr .hero-title.hero-title-pink font, .translated-rtl .hero-title.hero-title-pink font,
.translated-ltr .ht-name, .translated-rtl .ht-name{
  background:none !important; -webkit-text-fill-color:#F0006B !important; color:#F0006B !important;
}

/* --- Glow ring behind the baby --- */
.hero-ring{
  position:absolute; z-index:0; pointer-events:none;
  width:66%; aspect-ratio:1/1; border-radius:50%;
  border:1.5px solid rgba(240,0,107,.16);
  top:4%; right:4%;
  box-shadow:0 0 60px rgba(255,140,190,.18) inset;
}

/* --- Floating name pills (bridge heading and baby) --- */
.name-pill{
  position:absolute; z-index:3; pointer-events:none; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:16px;
  color:var(--rose); background:rgba(255,255,255,.92);
  padding:9px 18px; border-radius:100px;
  border:1px solid rgba(240,0,107,.10);
  box-shadow:0 10px 30px rgba(214,0,94,.14), 0 2px 6px rgba(214,0,94,.08);
  backdrop-filter:blur(3px);
  animation:pillFloat 6s ease-in-out infinite;
}
.name-pill::before{ content:"✦"; margin-right:7px; color:var(--gold); font-size:12px; }
.np-1{ top:5%;  left:-20%; animation-delay:0s;   }
.np-2{ top:43%; left:-30%; animation-delay:1.1s; font-size:15px; }
.np-3{ top:62%; left:-30%; animation-delay:.6s;  }
.np-4{ top:26%; left:-6%;  animation-delay:1.7s; font-size:14px; opacity:.96; }
@keyframes pillFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* --- Sparkles --- */
.hero-spark{
  position:absolute; z-index:2; width:16px; height:16px; pointer-events:none;
  background:linear-gradient(var(--gold),var(--gold));
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 61%) ,
    conic-gradient(#000 0 0);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  background:var(--gold); opacity:.85;
  animation:twinkle 3.2s ease-in-out infinite;
}
.hero-spark.sp-1{ top:14%; left:-6%; }
.hero-spark.sp-2{ top:50%; left:-38%; width:11px; height:11px; background:var(--rose); animation-delay:1s; }
.hero-spark.sp-3{ top:72%; right:14%; width:13px; height:13px; animation-delay:.5s; }
@keyframes twinkle{ 0%,100%{ transform:scale(1) rotate(0); opacity:.4; } 50%{ transform:scale(1.25) rotate(45deg); opacity:1; } }

/* --- Heart positions (3) --- */
.hero-deco-heart.hd-1{ top:24%; left:-18%; opacity:.9; animation:pillFloat 7s ease-in-out infinite; }
.hero-deco-heart.hd-2{ top:9%;  left:6%;  opacity:.95; animation:pillFloat 5.5s ease-in-out .4s infinite; }
.hero-deco-heart.hd-3{ top:64%; left:-2%; opacity:.9; animation:pillFloat 6.5s ease-in-out .9s infinite; }

/* keep the script above the scene */
.hero-deco-script{ z-index:4; }

/* hide the busy scene on smaller screens (keep it clean) */
@media(max-width:1080px){ .name-pill{ display:none; } }
@media(max-width:980px){
  .hero-ring, .hero-spark, .hero-deco-heart{ display:none !important; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .name-pill, .hero-spark, .hero-deco-heart{ animation:none !important; }
}

/* ============================================================
   v9.4b — BABY IMAGE +45% via absolute bleed (no layout stretch)
   ============================================================ */
@media(min-width:981px){
  .hero-grid{ align-items:stretch !important; }
  .hero-visual{ position:relative !important; min-height:600px !important; overflow:visible !important; }
  .hero-baby-wrap{
    position:absolute !important; top:50% !important; left:-148px !important;
    transform:translateY(-50%) !important; margin:0 !important;
    width:760px !important; max-width:none !important;
    animation:none !important;
  }
  .hero-visual-orb{
    width:600px !important; max-width:none !important;
    left:38% !important; top:50% !important; transform:translate(-50%,-50%) !important;
  }
  .hero-ring{ top:8% !important; right:1% !important; width:70% !important; }
  .hero-deco-script{ top:2% !important; }
}

/* ============================================================
   v9.4c — final scene placement (clean, no text overlap)
   ============================================================ */
@media(min-width:981px){
  .np-1{ top:7%  !important; left:-20% !important; }   /* Aarav */
  .np-2{ top:28% !important; left:-24% !important; }   /* Diya  */
  .np-3{ display:none !important; }                    /* Vivaan (trim) */
  .np-4{ top:47% !important; left:-16% !important; }   /* Anaya */

  .hero-deco-heart.hd-1{ top:12% !important; left:36% !important; }  /* over baby pink */
  .hero-deco-heart.hd-2{ top:4%  !important; left:-2% !important; }
  .hero-deco-heart.hd-3{ top:40% !important; left:50% !important; }  /* over baby */

  .hero-spark.sp-1{ top:18% !important; left:-7% !important; }
  .hero-spark.sp-2{ top:62% !important; left:34% !important; }       /* over baby */
  .hero-spark.sp-3{ top:30% !important; right:16% !important; left:auto !important; }
}

/* ============================================================
   v9.5 — pink underline under "Name" · "Is A" · site-wide pink headlines
   ============================================================ */

/* Move the underline from "Is a" to "Name", make it PURE PINK */
.hero-title-rule{ display:none !important; }     /* old left underline off */
.hero-title .ht-name{ position:relative; display:inline-block; }
.hero-title .ht-name::after{
  content:""; position:absolute; left:2%; right:2%; bottom:-.16em;
  height:6px; border-radius:6px; background:#F0006B;   /* pure pink */
}
[data-theme="dark"] .hero-title .ht-name::after{ background:#FF8FC0; }

/* ---- ALL PAGE HEADLINES → same beautiful PINK ---- */
.section-title,
.section-title em,
.myth-hero h1, .myth-hero h1 em{
  background:linear-gradient(100deg,#FF7AB8 0%, #F50A78 46%, #D6005E 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  font-weight:800 !important;
}
.section-title span.highlight{
  background:linear-gradient(100deg,#FF5FA8,#F0006B) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
/* /names/ headline underline → pure pink to match */
.names-h1-highlight::after{ background:#F0006B !important; opacity:1 !important; }

/* Dark-mode + Google-Translate fallbacks (never invisible) */
[data-theme="dark"] .section-title, [data-theme="dark"] .section-title em,
[data-theme="dark"] .section-title font,
[data-theme="dark"] .myth-hero h1, [data-theme="dark"] .myth-hero h1 em{
  background:none !important; -webkit-text-fill-color:#FF8FC0 !important; color:#FF8FC0 !important;
}
.translated-ltr .section-title, .translated-rtl .section-title,
.translated-ltr .section-title em, .translated-rtl .section-title em,
.translated-ltr .section-title font, .translated-rtl .section-title font,
.translated-ltr .myth-hero h1, .translated-rtl .myth-hero h1,
.translated-ltr .section-title span.highlight, .translated-rtl .section-title span.highlight{
  background:none !important; -webkit-text-fill-color:#F0006B !important; color:#F0006B !important;
}

/* ============================================================
   v9.6 — remove forehead heart · keep decos off the baby ·
   shift hero content +0.5in right · pills Dittya/Moh
   ============================================================ */
@media(min-width:981px){
  /* shift ALL left-column content ~0.5in (48px) to the right */
  .hero-content{ padding-left:48px !important; }

  /* remove the tiny heart that landed on the forehead */
  .hero-deco-heart.hd-3{ display:none !important; }

  /* keep remaining decorations OFF the baby (in the pink void / top only) */
  .hero-deco-heart.hd-1{ top:6%  !important; left:-2% !important; }   /* upper void */
  .hero-spark.sp-2{ top:54% !important; left:-10% !important; }       /* void, not on baby */
  .hero-spark.sp-3{ top:9%  !important; left:8%  !important; right:auto !important; }

  /* nudge name pills right a touch so the shifted text never touches them */
  .np-1{ top:6%  !important; left:-14% !important; }   /* Dittya */
  .np-2{ top:30% !important; left:-18% !important; }   /* Moh    */
  .np-4{ top:52% !important; left:-12% !important; }   /* Anaya  */
}

/* ============================================================
   v9.6b — keep the baby 100% clean; tasteful void scene
   ============================================================ */
@media(min-width:981px){
  .np-1{ top:6%  !important; left:-18% !important; }  /* Dittya */
  .np-2{ top:32% !important; left:-20% !important; }  /* Moh    */
  .np-4{ top:56% !important; left:-16% !important; }  /* Anaya  */

  .hero-deco-heart.hd-1{ top:20% !important; left:-30% !important; }
  .hero-deco-heart.hd-2{ display:none !important; }
  .hero-spark.sp-1{ top:10% !important; left:-8%  !important; }
  .hero-spark.sp-2{ top:46% !important; left:-30% !important; }
  .hero-spark.sp-3{ display:none !important; }
}

/* ============================================================
   v9.7 — solid DARK-PINK heading (no fade) · single-colour pink
   page headlines · heart top-right near the script
   ============================================================ */

/* ---- HERO heading: ONE solid dark pink, no gradient, no faded word ---- */
.hero-title.hero-title-grad.hero-title-pink,
.hero-title.hero-title-grad.hero-title-pink .ht-name,
.hero-title.hero-title-grad.hero-title-pink .ht-dash{
  background:none !important;
  -webkit-text-fill-color:#D6005E !important;
  color:#D6005E !important;
  text-shadow:none !important;
}
.hero-title.hero-title-grad.hero-title-pink .ht-dash{ opacity:.85 !important; }
[data-theme="dark"] .hero-title.hero-title-grad.hero-title-pink,
[data-theme="dark"] .hero-title.hero-title-grad.hero-title-pink .ht-name,
[data-theme="dark"] .hero-title.hero-title-grad.hero-title-pink .ht-dash,
[data-theme="dark"] .hero-title.hero-title-grad.hero-title-pink font{
  -webkit-text-fill-color:#FF7FB6 !important; color:#FF7FB6 !important; background:none !important;
}

/* ---- ALL PAGE HEADLINES: single solid pink (no gradient) ---- */
.section-title, .section-title em, .section-title span.highlight,
.myth-hero h1, .myth-hero h1 em{
  background:none !important;
  -webkit-text-fill-color:#D6005E !important;
  color:#D6005E !important;
}
[data-theme="dark"] .section-title, [data-theme="dark"] .section-title em,
[data-theme="dark"] .section-title span.highlight, [data-theme="dark"] .section-title font,
[data-theme="dark"] .myth-hero h1, [data-theme="dark"] .myth-hero h1 em{
  background:none !important; -webkit-text-fill-color:#FF7FB6 !important; color:#FF7FB6 !important;
}
.translated-ltr .section-title, .translated-rtl .section-title,
.translated-ltr .section-title em, .translated-rtl .section-title em,
.translated-ltr .section-title font, .translated-rtl .section-title font,
.translated-ltr .myth-hero h1, .translated-rtl .myth-hero h1{
  background:none !important; -webkit-text-fill-color:#D6005E !important; color:#D6005E !important;
}

/* ---- Heart top-right, filling the space near "A Lifetime Of Love" ---- */
@media(min-width:981px){
  .hero-deco-heart.hd-top{
    display:block !important; top:13% !important; right:8% !important; left:auto !important;
    opacity:.95; filter:none;
    animation:pillFloat 6s ease-in-out .3s infinite;
  }
}
@media(max-width:980px){ .hero-deco-heart.hd-top{ display:none !important; } }

/* ---- v9.7b: unify the remaining page-headline classes to the SAME solid pink ---- */
.alpha-head, .auth-title, .ksec, h1.ttl, h2.ttl, .page-hero-title{
  -webkit-text-fill-color:#D6005E !important; color:#D6005E !important; background:none !important;
}
.alpha-head span{ -webkit-text-fill-color:var(--ink-45) !important; color:var(--ink-45) !important; }  /* keep count muted */
[data-theme="dark"] .alpha-head, [data-theme="dark"] .auth-title,
[data-theme="dark"] .ksec, [data-theme="dark"] h1.ttl, [data-theme="dark"] h2.ttl{
  -webkit-text-fill-color:#FF7FB6 !important; color:#FF7FB6 !important;
}
/* (ceremonies hero title stays white — it sits on a photo) */

/* ============================================================
   v9.8 — EVERY heading on EVERY page = single beautiful pink
   (light bg -> #D6005E · dark bg -> readable bright pink ·
    footer + ceremony photo-hero excluded)
   ============================================================ */
h1, h2, h3,
h1 em, h2 em, h3 em,
h1 font, h2 font, h3 font,
.section-title, .section-title em,
.ksec, .ttl, .alpha-head, .auth-title, .dash-name,
.cer-stage-h, .cer-item-name,
.myth-hero h1, .myth-hero h1 em{
  background:none !important;
  -webkit-text-fill-color:#D6005E !important;
  color:#D6005E !important;
}
/* keep the small count text in /all-names muted */
.alpha-head span{ -webkit-text-fill-color:var(--ink-45) !important; color:var(--ink-45) !important; }

/* DARK-background headings (Kundali, "from Birth Chart", etc.) stay WHITE */
h1[style*="#fff"], h2[style*="#fff"], h3[style*="#fff"],
h1[style*="#fff"] em, h2[style*="#fff"] em, h3[style*="#fff"] em,
h1[style*="#fff"] font, h2[style*="#fff"] font, h3[style*="#fff"] font,
.section-title[style*="#fff"], .section-title[style*="#fff"] em{
  -webkit-text-fill-color:#fff !important; color:#fff !important; background:none !important;
}

/* EXCLUDE: footer column titles + ceremonies photo-hero keep their design */
footer h1, footer h2, footer h3, footer h4,
.footer-col h4, .footer-col-title, .footer h3, .footer h4{
  -webkit-text-fill-color:var(--head-blue) !important; color:var(--head-blue) !important; background:none !important;
}
.cer-hero-title, .cer-hero-title em{
  -webkit-text-fill-color:#fff !important; color:#fff !important; background:none !important;
}

/* Dark mode: lighter pink for all headings */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h1 em, [data-theme="dark"] h2 em, [data-theme="dark"] h3 em,
[data-theme="dark"] h1 font, [data-theme="dark"] h2 font, [data-theme="dark"] h3 font,
[data-theme="dark"] .section-title, [data-theme="dark"] .section-title em,
[data-theme="dark"] .ksec, [data-theme="dark"] .cer-stage-h, [data-theme="dark"] .cer-item-name{
  -webkit-text-fill-color:#FF8FC0 !important; color:#FF8FC0 !important;
}
[data-theme="dark"] footer h3, [data-theme="dark"] footer h4,
[data-theme="dark"] .footer-col h4, [data-theme="dark"] .footer-col-title{
  -webkit-text-fill-color:#9FB3D9 !important; color:#9FB3D9 !important;
}

/* Google-Translate fallback: keep headings pink after translation */
.translated-ltr h1, .translated-rtl h1, .translated-ltr h2, .translated-rtl h2,
.translated-ltr h3, .translated-rtl h3,
.translated-ltr .section-title font, .translated-rtl .section-title font{
  -webkit-text-fill-color:#D6005E !important; color:#D6005E !important; background:none !important;
}

/* ============================================================
   v9.9 — search redesign · no-shift results · equal cards ·
   dark-mode hero identical to light · mobile hero
   ============================================================ */

/* (4) SEARCH BAR — rectangular box, premium SaaS feel (button unchanged) */
.hero-search-box{ border-radius:12px !important; padding:8px 8px 8px 22px !important; }
@media(max-width:980px){
  .hero-search-box{ border-radius:12px !important; }
}

/* (5) SEARCH RESULTS — absolute overlay, never pushes the trust section */
.hero-wrap{ position:relative; }
.hero-results-overlay{ position:static; z-index:45; }
.hero-results-overlay:empty{ display:none !important; }
.hero-results-overlay:not(:empty){
  background:linear-gradient(180deg,#FFFCF8 0%,#FFFFFF 14%);
  border-top:1px solid rgba(107,33,244,0.12);
  box-shadow:0 36px 90px rgba(214,0,94,.12);
  max-height:80vh; overflow-y:auto; padding:22px 0 30px;
  border-radius:0 0 20px 20px;
}
.hero-results-head{ margin-bottom:16px; font-size:13px; color:#7B6A9E; }

/* (7) RESULT CARDS — equal heights + clean responsive grid */
.names-grid{ align-items:stretch !important; }
.name-card{ height:100% !important; }

/* (3) DARK MODE — hero (and its results) look IDENTICAL to light.
   Re-pin the light design tokens locally so every hero child renders
   exactly as in light mode; only text content differs. */
[data-theme="dark"] .hero{
  --ink:#0F0820; --ink-70:#3D2B60; --ink-45:#7B6A9E; --ink-20:#CDC4E8;
  --white:#FFFFFF; --cream:#FFFCF8; --surface:#F7F3FF;
  --border:rgba(107,33,244,0.12); --border-md:rgba(107,33,244,0.22);
  --rose-lt:#FFE0F0; --violet-lt:#EEE5FF;
  background:linear-gradient(160deg,#FFFCF8 0%,#FFE8F1 50%,#FFE0F0 100%) !important;
}
/* override the hard-coded dark rules inside the hero */
[data-theme="dark"] .hero .hero-sub{ color:#3D2B60 !important; }
[data-theme="dark"] .hero .hero-feat-lbl{ color:#3D2B60 !important; }
[data-theme="dark"] .hero .hero-title.hero-title-grad.hero-title-pink,
[data-theme="dark"] .hero .hero-title.hero-title-grad.hero-title-pink .ht-name,
[data-theme="dark"] .hero .hero-title.hero-title-grad.hero-title-pink font{
  -webkit-text-fill-color:#D6005E !important; color:#D6005E !important; background:none !important;
}
[data-theme="dark"] .hero .ht-name::after{ background:#F0006B !important; }
[data-theme="dark"] .hero .hero-search-box{ background:#FFFFFF !important; border-color:rgba(107,33,244,0.22) !important; }
[data-theme="dark"] .hero .hero-search-box input{ color:#0F0820 !important; }
[data-theme="dark"] .hero .name-card{ background:#FFFFFF !important; }
[data-theme="dark"] .hero .name-display{ color:#D6005E !important; }

/* (8) MOBILE HERO — readable heading, no overflow, search stays before image */
@media(max-width:560px){
  .hero-title.hero-title-grad.hero-title-pink{ font-size:clamp(27px,7.6vw,36px) !important; line-height:1.16 !important; }
  .hero-sub{ font-size:15px !important; line-height:1.5 !important; }
  .hero{ overflow-x:hidden !important; }
}

/* ============================================================
   v9.10 — badge/sign-in colors · slim search · fixed grids ·
   mobile hero centering · dark-section headings stay white
   ============================================================ */

/* (5) Sign In button -> light grey; hero badge -> same fill as Search button */
.btn.btn-signin{
  background:#ECECF1 !important; color:#2A2440 !important;
  border:1px solid rgba(15,8,32,.10) !important; box-shadow:none !important;
}
.btn.btn-signin:hover{ background:#E2E1EA !important; transform:translateY(-1px); }
.hero-badge.hero-badge-star{
  background:linear-gradient(135deg, var(--sunrise), var(--rose)) !important;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 6px 18px rgba(255,77,46,.28) !important;
}
.hero-badge.hero-badge-star, .hero-badge.hero-badge-star *{ color:#fff !important; }
.hero-badge-star-ico{ color:#fff !important; }

/* (8) Search box — slimmer (less height) + nudged up slightly */
.hero-search-box{ padding-top:5px !important; padding-bottom:5px !important; margin-top:-2px !important; }
.hero-features{ margin-bottom:14px !important; }

/* (11) FIXED COLUMNS — box count stays the same on zoom / width % (cards
   resize via 1fr). Mobile is the only exception. */
@media(min-width:981px){
  .names-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .cat-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .celeb-kids-grid{ grid-template-columns:repeat(7,1fr) !important; }
  .emotion-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .pet-grid{ grid-template-columns:repeat(4,1fr) !important; }
}
@media(min-width:768px) and (max-width:980px){
  .names-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .cat-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .celeb-kids-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .emotion-grid, .pet-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:767px){
  .names-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .cat-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .celeb-kids-grid{ grid-template-columns:repeat(3,1fr) !important; }
}

/* (12) MOBILE HERO — heading centred, content balanced both sides */
@media(max-width:980px){
  html, body{ overflow-x:hidden !important; }
  .hero-content{ padding-left:0 !important; padding-right:0 !important; text-align:center !important; }
  .hero-title.hero-title-grad.hero-title-pink{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  .hero-title-rule{ margin-left:auto !important; margin-right:auto !important; }
  .hero-sub{ text-align:center !important; }
}

/* ============================================================
   v9.11 — hero tweaks: blue badge · vibrant-pink heading ·
   slimmer search bar (~45% shorter)
   ============================================================ */
/* Badge -> light blue → vibrant blue, white text */
.hero-badge.hero-badge-star{
  background:linear-gradient(135deg, #5BC0FF 0%, #1565E0 100%) !important;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 6px 18px rgba(21,101,224,.28) !important;
}
.hero-badge.hero-badge-star, .hero-badge.hero-badge-star *, .hero-badge-star-ico{ color:#fff !important; }

/* Hero heading -> vibrant light pink (hero only; other page headings unchanged) */
.hero-title.hero-title-grad.hero-title-pink,
.hero-title.hero-title-grad.hero-title-pink .ht-name,
.hero-title.hero-title-grad.hero-title-pink font,
[data-theme="dark"] .hero .hero-title.hero-title-grad.hero-title-pink,
[data-theme="dark"] .hero .hero-title.hero-title-grad.hero-title-pink .ht-name{
  -webkit-text-fill-color:#D6005E !important; color:#D6005E !important; background:none !important;
}
.hero .ht-name::after, [data-theme="dark"] .hero .ht-name::after{ background:#D6005E !important; }

/* Search bar + button ~45% slimmer (kept vertically aligned) */
.hero-search-box{ padding-top:2px !important; padding-bottom:2px !important; }
.hero-search-btn{ padding-top:7px !important; padding-bottom:7px !important; }
@media(max-width:980px){
  .hero-search-box{ padding-top:6px !important; padding-bottom:6px !important; }
  .hero-search-btn{ padding-top:9px !important; padding-bottom:9px !important; }
}

/* ============================================================
   v9.12 — Mega-menu navigation (desktop dropdowns + premium CTA)
   + mobile accordion. Colours/fonts/logo unchanged.
   ============================================================ */
/* nav items become dropdown anchors */
.nav-menu .nav-item{ position:relative; }
.nav-menu .nav-link{
  font-size:14px; color:var(--ink-70); padding:8px 12px; border-radius:8px;
  background:none; border:none; cursor:pointer; font-family:inherit; font-weight:500;
  display:inline-flex; align-items:center; gap:5px; text-decoration:none; line-height:1.2;
}
.nav-menu .nav-link:hover, .nav-menu .nav-item:hover > .nav-link{ color:var(--ink); background:var(--surface); }
.nav-caret{ font-size:9px; opacity:.7; transition:transform .2s; }
.nav-item:hover .nav-caret{ transform:rotate(180deg); }

/* mega panel */
.mega-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 30px 70px rgba(15,8,32,.16); padding:20px 22px; z-index:500;
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s; min-width:560px;
}
.mega-panel-sm{ min-width:300px; }
.mega-panel-right{ left:auto; right:0; transform:translateX(0) translateY(8px); }
.nav-item:hover > .mega-panel,
.nav-item.open > .mega-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-panel-right.open, .nav-item-premium:hover > .mega-panel-right{ transform:translateX(0) translateY(0); }
.mega-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px 24px; }
.mega-panel-sm .mega-grid{ grid-template-columns:1fr 1fr; }
.mega-col h4{
  font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--violet);
  margin:0 0 8px; letter-spacing:.3px; text-transform:uppercase; -webkit-text-fill-color:var(--violet);
}
.mega-col a{
  display:block; font-size:13.5px; color:var(--ink-70); text-decoration:none;
  padding:5px 0; border-radius:6px; transition:color .15s, padding .15s;
}
.mega-col a:hover{ color:var(--rose); padding-left:4px; }
.mega-more{ font-weight:600; color:var(--teal) !important; margin-top:6px; }
.mega-az{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:8px; }
.mega-az a{ text-align:center; padding:5px 0; font-size:12px; font-weight:600; background:var(--surface); }
.mega-az a:hover{ background:var(--rose); color:#fff !important; padding-left:0; }
.mega-price{ float:right; font-size:11px; font-weight:700; color:var(--teal); }

/* Premium CTA button in header */
.nav-premium-btn{
  background:linear-gradient(135deg,#7C3AED,#F0006B) !important; color:#fff !important;
  font-weight:600 !important; box-shadow:0 4px 14px rgba(124,58,237,.28);
}
.nav-premium-btn:hover{ color:#fff !important; filter:brightness(1.05); }
.nav-item-premium:hover .nav-premium-btn{ color:#fff !important; }

/* ---- MOBILE ACCORDION ---- */
.m-link{ font-family:var(--font-display); font-size:26px; color:var(--ink); padding:10px 0; border-bottom:1px solid var(--border); text-decoration:none; }
.m-acc{ border-bottom:1px solid var(--border); }
.m-acc-head{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-size:24px; color:var(--ink); padding:12px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.m-caret{ font-size:14px; opacity:.6; transition:transform .25s; }
.m-acc.open .m-caret{ transform:rotate(180deg); }
.m-acc-body{ display:none; padding:2px 0 12px; flex-direction:column; gap:2px; }
.m-acc.open .m-acc-body{ display:flex; }
.m-acc-body strong{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--violet); margin:10px 0 2px; }
.m-acc-body a{ font-size:15px; color:var(--ink-70); text-decoration:none; padding:6px 0 6px 12px; }
.m-acc-body a:hover{ color:var(--rose); }
.m-more{ font-weight:600; color:var(--teal) !important; }
.m-acc-premium .m-acc-head{ color:#7C3AED; }
.m-signin{ margin-top:16px; display:inline-block; background:#ECECF1; color:#2A2440 !important; border-radius:10px; padding:12px 0 !important; text-align:center; font-family:var(--font-body) !important; font-size:16px !important; border:none; }

/* v9.12b — override the legacy #mobile-menu a rule for the accordion */
#mobile-menu .m-link{ font-family:var(--font-display); font-size:26px; color:var(--ink); padding:10px 0; display:block; }
#mobile-menu .m-acc-head{ font-family:var(--font-display); font-size:23px; color:var(--ink); border-bottom:none; }
#mobile-menu .m-acc-premium .m-acc-head{ color:#7C3AED; }
#mobile-menu .m-acc-body a{
  font-family:var(--font-body); font-size:15px; color:var(--ink-70);
  padding:6px 0 6px 12px; border-bottom:none; display:block;
}
#mobile-menu .m-acc-body a:hover{ color:var(--rose); }
#mobile-menu .m-acc-body strong{ font-family:var(--font-body); }
#mobile-menu .m-signin{ font-family:var(--font-body); font-size:16px; color:#2A2440; border-bottom:none; text-align:center; }
#mobile-menu .m-more{ color:var(--teal); }

/* ============================================================
   v9.15 — Premium 6-column footer + newsletter + social +
   mobile accordion. (Footer is on the existing dark surface.)
   ============================================================ */
.footer-newsletter{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:18px; padding:26px 30px; margin:8px 0 44px;
}
.footer-newsletter .fn-text h3{ font-family:var(--font-display); font-size:24px; color:#fff; margin:0 0 6px; -webkit-text-fill-color:#fff; }
.footer-newsletter .fn-text p{ font-size:14px; color:rgba(255,255,255,.6); margin:0; max-width:520px; }
.footer-newsletter .fn-form{ display:flex; gap:10px; flex:1; min-width:280px; max-width:440px; }
.footer-newsletter .fn-form input{
  flex:1; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:13px 16px; color:#fff; font-size:14px; font-family:var(--font-body); outline:none;
}
.footer-newsletter .fn-form input::placeholder{ color:rgba(255,255,255,.45); }
.footer-newsletter .fn-form button{
  background:linear-gradient(135deg,var(--sunrise),var(--rose)); color:#fff; border:none;
  border-radius:10px; padding:13px 26px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.footer-newsletter .fn-form button:hover{ filter:brightness(1.05); }
.footer-newsletter .fn-msg{ width:100%; font-size:13px; color:rgba(255,255,255,.7); min-height:0; }

.footer-grid{
  display:grid; grid-template-columns:2.1fr 1fr 1fr 1.15fr 1fr 1fr; gap:30px 26px; padding:8px 0 36px;
}
.footer-brand-col .footer-tagline{ font-style:italic; color:rgba(255,255,255,.85); font-size:15px; margin:14px 0 10px; max-width:340px; }
.footer-brand-col .footer-desc{ color:rgba(255,255,255,.55); font-size:13px; line-height:1.6; margin:0 0 16px; max-width:340px; }
.footer-trust{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.footer-trust li{ font-size:13px; color:rgba(255,255,255,.72); }
.footer-col h4{ font-family:var(--font-display); font-size:16px; color:#fff; margin:0 0 14px; -webkit-text-fill-color:#fff; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.footer-col ul a{ color:rgba(255,255,255,.6); font-size:13.5px; text-decoration:none; transition:color .15s; }
.footer-col ul a:hover{ color:#fff; }
.footer-col-premium h4{ color:#FFD9A0; -webkit-text-fill-color:#FFD9A0; }
.footer-price{ float:right; font-size:11px; font-weight:700; color:#7BE0C8; }
.footer-caret{ display:none; }

.footer-socials{ display:flex; align-items:center; gap:16px; padding:22px 0; border-top:1px solid rgba(255,255,255,.08); }
.footer-socials-title{ font-size:13px; color:rgba(255,255,255,.5); }
.footer-social-icons{ display:flex; gap:12px; }
.footer-social-icons a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.75); transition:.18s;
}
.footer-social-icons a:hover{ background:linear-gradient(135deg,var(--sunrise),var(--rose)); color:#fff; transform:translateY(-2px); }

.footer-bottom-wrap{ border-top:1px solid rgba(255,255,255,.08); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:20px 0; font-size:13px; color:rgba(255,255,255,.55); }
.footer-bottom a{ color:rgba(255,255,255,.75); text-decoration:none; }
.footer-bottom-tags{ color:rgba(255,255,255,.4); }
.footer-heart{ color:var(--rose); }

/* ---- MOBILE: accordion footer ---- */
@media(max-width:760px){
  .footer-newsletter{ flex-direction:column; align-items:stretch; text-align:center; padding:22px; }
  .footer-newsletter .fn-form{ max-width:none; }
  .footer-grid{ grid-template-columns:1fr; gap:0; padding:8px 0 18px; }
  .footer-brand-col{ text-align:center; padding-bottom:18px; }
  .footer-brand-col .footer-tagline, .footer-brand-col .footer-desc{ max-width:none; }
  .footer-trust{ align-items:center; }
  .footer-col{ border-top:1px solid rgba(255,255,255,.08); }
  .footer-col h4.footer-acc-head{
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    margin:0; padding:16px 2px; font-size:16px;
  }
  .footer-caret{ display:inline; font-size:12px; opacity:.6; transition:transform .25s; }
  .footer-col.open .footer-caret{ transform:rotate(180deg); }
  .footer-col ul{ display:none; padding:0 2px 16px; }
  .footer-col.open ul{ display:flex; }
  .footer-socials{ flex-direction:column; gap:12px; text-align:center; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:8px; }
}

/* v9.15b — legal/content page body */
.legal-body{ color:var(--ink-70); font-size:15px; line-height:1.75; }
.legal-body p{ margin:0 0 12px; }
.legal-body a{ color:var(--rose); text-decoration:underline; }
.legal-body h2{ -webkit-text-fill-color:var(--ink); }
[data-theme="dark"] .legal-body h2{ color:#ECE8F7 !important; -webkit-text-fill-color:#ECE8F7 !important; }

/* v9.15c — footer heading colours (override legacy footer rule) */
.site-footer .footer-newsletter h3,
.site-footer .footer-col h4,
.site-footer .footer-brand-col .footer-brand-logo{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.site-footer .footer-col-premium h4{ color:#FFD9A0 !important; -webkit-text-fill-color:#FFD9A0 !important; }

/* ============================================================
   v9.16 — badge orange/yellow · search bottom spacing ·
   vibrant-blue names in Smart Name Finder
   ============================================================ */
/* (1) Hero badge -> orange → yellow */
.hero-badge.hero-badge-star{
  background:linear-gradient(135deg, #FF7A00 0%, #FFC107 100%) !important;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 6px 18px rgba(255,138,0,.30) !important;
  text-shadow:0 1px 2px rgba(120,60,0,.30);
}
.hero-badge.hero-badge-star, .hero-badge.hero-badge-star *, .hero-badge-star-ico{ color:#fff !important; }

/* (4) Search bar: lift it off the hero's bottom edge */
.hero-search-box{ margin-bottom:30px !important; }
@media(max-width:980px){ .hero-search-box{ margin-bottom:18px !important; } }

/* (6) Smart Name Finder names -> vibrant blue (home preview + /find-name/) */
.finder-result-name{ color:#3D8BFF !important; -webkit-text-fill-color:#3D8BFF !important; }

/* ============================================================
   v9.18 — premium glass button + sparkle · dropdown stability ·
   bigger pink trust bar
   ============================================================ */

/* (2) Premium dropdown — stop the jump: lock the right-aligned panel's
   transform for BOTH hover and click(open) states */
.nav-item-premium > .mega-panel-right{ left:auto; right:0; transform:translateX(0) translateY(8px); }
.nav-item-premium:hover > .mega-panel-right,
.nav-item-premium.open > .mega-panel-right{ transform:translateX(0) translateY(0) !important; }

/* (5/6) Premium button — glassmorphism + blinking corner sparkle */
.nav-premium-btn{
  position:relative; overflow:visible;
  background:linear-gradient(135deg, rgba(124,58,237,.55), rgba(240,0,107,.55)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.5); backdrop-filter:blur(10px) saturate(1.5);
  border:1px solid rgba(255,255,255,.45) !important; color:#fff !important; font-weight:600 !important;
  box-shadow:0 6px 20px rgba(124,58,237,.28), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(124,58,237,.25) !important;
  text-shadow:0 1px 2px rgba(80,20,90,.35);
}
.nav-premium-btn:hover{ filter:brightness(1.08); border-color:rgba(255,255,255,.7) !important; }
.nav-item-premium:hover .nav-premium-btn{ color:#fff !important; }
.nav-premium-btn::after{
  content:"✦"; position:absolute; top:-7px; right:-5px; font-size:13px; pointer-events:none;
  animation:tnSparkle 1.7s ease-in-out infinite; filter:drop-shadow(0 0 4px rgba(255,210,120,.9));
}
@keyframes tnSparkle{
  0%,72%,100%{ opacity:0; transform:scale(.5) rotate(-10deg); }
  82%{ opacity:1; transform:scale(1.15) rotate(15deg); }
  92%{ opacity:.5; transform:scale(.9) rotate(8deg); }
}

/* (7) Trust bar — bigger cards + PINK icons */
.trust-bar .trust-ico-svg{ color:var(--rose) !important; }
.trust-bar .trust-ico-svg svg{ width:30px !important; height:30px !important; }
.trust-bar .trust-card{ gap:16px; }
.trust-bar .trust-ico-svg{
  width:58px; height:58px; min-width:58px;
  background:linear-gradient(135deg, var(--rose-lt), #FFD0E6); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
}
.trust-bar .trust-txt strong{ font-size:17px; }
.trust-bar .trust-txt span{ font-size:13.5px; }
@media(max-width:760px){
  .trust-bar .trust-ico-svg{ width:50px; height:50px; min-width:50px; }
  .trust-bar .trust-ico-svg svg{ width:26px !important; height:26px !important; }
  .trust-bar .trust-txt strong{ font-size:15.5px; }
}

/* v9.18b — name-stories search + filter controls */
.story-filters{ display:flex; gap:12px; max-width:760px; margin:0 auto 28px; flex-wrap:wrap; }
.story-search-wrap{ flex:1; min-width:220px; display:flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--border); border-radius:12px; padding:11px 16px; color:var(--ink-45); }
.story-search-wrap input{ flex:1; border:none; outline:none; background:none; font-size:15px; color:var(--ink); font-family:var(--font-body); }
#story-filter{ border:1px solid var(--border); border-radius:12px; padding:11px 16px; font-size:14px; background:var(--white); color:var(--ink); font-family:var(--font-body); cursor:pointer; }
[data-theme="dark"] .story-search-wrap, [data-theme="dark"] #story-filter{ background:#221A33; border-color:rgba(255,255,255,.12); }

/* ============================================================
   v9.19 — social proof · reviews · suggestion box
   ============================================================ */
.proof-section{ padding:40px 0 8px; }
.proof-bar{
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--rose-lt), var(--violet-lt));
  border:1px solid var(--border); border-radius:18px; padding:18px 28px; max-width:560px; margin:0 auto 26px;
}
.proof-stat{ display:flex; align-items:center; gap:10px; }
.proof-stars{ color:#FFB300; font-size:20px; letter-spacing:2px; }
.proof-rate{ font-size:15px; color:var(--ink-70); } .proof-rate strong{ font-size:22px; color:var(--ink); }
.proof-divider{ width:1px; height:34px; background:var(--ink-20); }
.proof-text strong{ display:block; font-size:15px; color:var(--ink); } .proof-text span{ font-size:12.5px; color:var(--ink-45); }
.proof-reviews{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:6px; }
.proof-review-card{ background:var(--white); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:0 6px 18px rgba(15,8,32,.04); }
.proof-review-stars{ color:#FFB300; font-size:13px; letter-spacing:1px; margin-bottom:8px; }
.proof-review-text{ font-size:13.5px; color:var(--ink-70); line-height:1.55; margin:0 0 10px; }
.proof-review-by{ font-size:12.5px; color:var(--ink-45); font-weight:600; }
@media(max-width:900px){ .proof-reviews{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .proof-reviews{ grid-template-columns:1fr; } }

.suggest-box{
  margin:34px auto 0; max-width:680px; background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:26px 28px;
}
.suggest-head h3{ font-family:var(--font-display); font-size:22px; margin:0 0 4px; -webkit-text-fill-color:var(--ink); }
.suggest-head p{ font-size:13.5px; color:var(--ink-45); margin:0 0 14px; }
[data-theme="dark"] .suggest-box{ background:#221A33; }

/* Reviews page */
.rv-summary{ display:flex; align-items:center; gap:18px; justify-content:center; margin:18px 0 30px; }
.rv-score{ font-size:48px; font-weight:800; color:var(--ink); font-family:var(--font-display); }
.rv-stars{ color:#FFB300; font-size:22px; letter-spacing:2px; }
.rv-count{ font-size:13px; color:var(--ink-45); margin-top:2px; }
.rv-form-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px 26px; margin-bottom:32px; }
[data-theme="dark"] .rv-form-card{ background:#221A33; }
.rv-list{ display:grid; gap:16px; }
.rv-item{ background:var(--white); border:1px solid var(--border); border-radius:14px; padding:18px 20px; }
[data-theme="dark"] .rv-item{ background:var(--surface); border-color:var(--border); }
.rv-item-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.rv-avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--rose),var(--violet)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.rv-name{ font-weight:600; color:var(--ink); font-size:14.5px; } .rv-loc{ color:var(--ink-45); font-weight:400; }
.rv-item-stars{ color:#FFB300; font-size:13px; letter-spacing:1px; } .rv-item-stars-off{ opacity:.25; }
.rv-text{ margin:0; color:var(--ink-70); font-size:14px; line-height:1.6; }

/* ============================================================
   v9.20 — glass premium + white sparkle · grey stars ·
   clean pink trust icons · footer logo = header
   ============================================================ */
/* (3) Premium button -> GLASS, dark-grey text, WHITE blinking sparkle */
.nav-premium-btn{
  background:rgba(255,255,255,.20) !important;
  -webkit-backdrop-filter:blur(11px) saturate(1.4); backdrop-filter:blur(11px) saturate(1.4);
  border:1px solid rgba(255,255,255,.65) !important;
  color:#4A4754 !important; font-weight:600 !important; text-shadow:none !important;
  box-shadow:0 4px 16px rgba(15,8,32,.10), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.nav-premium-btn:hover{ background:rgba(255,255,255,.32) !important; border-color:rgba(255,255,255,.85) !important; filter:none !important; }
.nav-item-premium:hover .nav-premium-btn{ color:#4A4754 !important; }
.nav-premium-btn .nav-caret{ color:#4A4754; opacity:.8; }
.nav-premium-btn::after{
  content:"\2726" !important;            /* ✦ four-point star, respects colour */
  color:#fff !important; font-size:14px; top:-8px; right:-6px;
  text-shadow:0 0 4px rgba(90,90,110,.85), 0 0 7px rgba(255,255,255,.7) !important;
  filter:none !important;
}
[data-theme="dark"] .nav-premium-btn{ color:#EDEAF5 !important; background:rgba(255,255,255,.10) !important; }
[data-theme="dark"] .nav-premium-btn .nav-caret{ color:#EDEAF5; }

/* (4) Trust icons — clean PINK, no square background */
.trust-bar .trust-ico-svg{
  background:none !important; width:auto !important; height:auto !important; min-width:0 !important;
  border-radius:0 !important; color:var(--rose) !important;
}
.trust-bar .trust-ico-svg svg{ width:32px !important; height:32px !important; }

/* (5) Stars / ratings -> visible GREY */
.proof-stars, .proof-rate strong, .proof-review-stars,
.rv-stars, .rv-item-stars, .rv-score{ color:#5A5563 !important; }
.proof-stars-off, .rv-item-stars-off, .proof-review-stars .proof-stars-off{ color:#C7C3D0 !important; }

/* (9) Footer "Totsname" = header logo style */
.site-footer .footer-brand-col .footer-brand-logo{
  font-family:var(--font-display) !important; font-size:28px !important; font-weight:600 !important;
  letter-spacing:-0.5px !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.site-footer .footer-brand-logo .brand-name{ color:var(--sunrise) !important; -webkit-text-fill-color:var(--sunrise) !important; }
.site-footer .footer-brand-logo sup{ color:var(--teal) !important; -webkit-text-fill-color:var(--teal) !important; font-size:11px; }

/* v9.20b — name-stories names dropdown */
.story-select-full{ flex:1; min-width:240px; border:1px solid var(--border); border-radius:12px; padding:12px 16px; font-size:15px; background:var(--white); color:var(--ink); font-family:var(--font-body); cursor:pointer; }
[data-theme="dark"] .story-select-full{ background:#221A33; border-color:rgba(255,255,255,.12); }

/* ============================================================
   v9.21 — premium = gift-button teal · grey emotion boxes ·
   visible dark-grey reviews + coloured avatars
   ============================================================ */
/* Premium button = EXACTLY the "Explore the Gift Corner" (.btn-teal) fill */
.nav-premium-btn{
  background:linear-gradient(135deg, var(--sunrise), var(--rose)) !important;  /* match Search Names button */
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:none !important; color:#fff !important; font-weight:600 !important;
  box-shadow:0 4px 16px rgba(255,77,46,.4) !important; text-shadow:none !important;
}
.nav-premium-btn:hover{ background:linear-gradient(135deg, var(--sunrise), var(--rose)) !important; filter:brightness(1.05) !important; box-shadow:0 8px 24px rgba(255,77,46,.5) !important; }
.nav-item-premium:hover .nav-premium-btn{ color:#fff !important; }
.nav-premium-btn .nav-caret{ color:#fff !important; opacity:.9; }
.nav-premium-btn::after{ color:#fff !important; text-shadow:0 0 5px rgba(255,255,255,.85) !important; }
[data-theme="dark"] .nav-premium-btn{ color:#fff !important; }

/* Names-by-emotion boxes -> light grey */
.emotion-grid-3x2 .emotion-card{ background:#F1F0F4 !important; }
[data-theme="dark"] .emotion-grid-3x2 .emotion-card{ background:#241C36 !important; }

/* Reviews page: words + stars clearly visible in dark grey */
.rv-score{ color:#3A3742 !important; }
.rv-stars, .rv-item-stars{ color:#4A4754 !important; }
.rv-name{ color:#2E2B36 !important; }
.rv-text{ color:#46434E !important; }
.rv-loc{ color:#7A7682 !important; }
.proof-review-text{ color:#46434E !important; }
.proof-review-by{ color:#5A5563 !important; }
[data-theme="dark"] .rv-score{ color:#F3F1F8 !important; }
[data-theme="dark"] .rv-stars,[data-theme="dark"] .rv-item-stars{ color:#FFB300 !important; }
[data-theme="dark"] .rv-name{ color:#FFFFFF !important; }
[data-theme="dark"] .rv-text{ color:#E8E5F0 !important; }
[data-theme="dark"] .rv-loc{ color:#B8B2C8 !important; }
[data-theme="dark"] .proof-review-text{ color:#E8E5F0 !important; }
[data-theme="dark"] .proof-review-by{ color:#C8C2D8 !important; }
[data-theme="dark"] .proof-review-card{ background:var(--surface) !important; border-color:var(--border) !important; }

/* v9.22 — alphabet name-list blogs */
.name-list-blog{ list-style:none; margin:16px 0 8px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; }
.name-list-blog li{ padding:8px 0; border-bottom:1px solid var(--border); font-size:15px; line-height:1.5; }
.name-list-blog li a{ color:var(--rose); text-decoration:none; }
.name-list-blog li a:hover{ text-decoration:underline; }
.name-list-blog li em{ color:var(--ink-45); font-size:12.5px; font-style:normal; }
@media(max-width:640px){ .name-list-blog{ grid-template-columns:1fr; } }

/* ============================================================
   v9.25 — KUNDALI & GUN MILAN: festive saffron/red/orange/yellow/blue
   ============================================================ */
:root{
  --k-saffron:#FF8A00; --k-deep:#B83A0C; --k-red:#C62828; --k-orange:#FB6E00;
  --k-gold:#FFB300; --k-blue:#1565C0; --k-maroon:#7A1F0A; --k-cream:#FFF6EC;
}
/* Result card — festive top accent + warm frame */
.kundali-result-card{ border:1px solid #F2D9BE !important; position:relative; overflow:hidden; }
.kundali-result-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg,#FF8A00,#FB6E00,#C62828,#FFB300,#1565C0); }
.kundali-name{ color:var(--k-deep) !important; }

/* PDF buttons — English blue, Hindi saffron */
.pdf-btn-en{ background:linear-gradient(135deg,#1976D2,#1565C0) !important; color:#fff !important; }
.pdf-btn-hi{ background:linear-gradient(135deg,#FF8A00,#FB6E00) !important; color:#fff !important; }

/* Chart titles + section heads -> saffron-red */
.kchart-title{ color:var(--k-deep) !important; font-weight:700; }
.kundali-result-card .ksec{ color:var(--k-deep) !important; border-bottom:2px solid #FFE0B2 !important; }
.ksub-h{ color:var(--k-deep) !important; }

/* Fact cards / tables -> warm */
.ktable th{ background:linear-gradient(135deg,#FFF3E0,#FFE6CC) !important; color:#8A3B0E !important; }
.ktable .kbold{ color:var(--k-deep) !important; }
.kcard{ border-left:4px solid var(--k-saffron) !important; background:var(--k-cream) !important; }
.kcard-h{ color:var(--k-deep) !important; }
.kcard-pred{ border-left-color:var(--k-blue) !important; }
[data-theme="dark"] .kcard{ background:#2A1206 !important; }

/* Manglik badges */
.kmanglik{ display:inline-block; padding:4px 12px; border-radius:999px; font-weight:700; font-size:13px; }
.kmanglik-manglik, .kmanglik-highmanglik{ background:#FDE7E7; color:#C62828; }
.kmanglik-nonmanglik, .kmanglik-notmanglik{ background:#E6F4EA; color:#1B7F3B; }
.kmanglik-lowmanglik, .kmanglik-partialmanglik{ background:#FFF3E0; color:#B83A0C; }

/* ---- GUN MILAN result ---- */
.kmatch-score{
  background:linear-gradient(135deg,#FF8A00 0%,#FB4D0C 45%,#C62828 100%) !important;
  box-shadow:0 14px 40px rgba(200,40,40,.28); position:relative; overflow:hidden;
}
.kmatch-score::after{ content:'\2740'; position:absolute; top:-10px; right:14px; font-size:80px; color:rgba(255,255,255,.10); }
.kmatch-score-num{ color:#FFE08A !important; text-shadow:0 2px 10px rgba(0,0,0,.25); }
.kmatch-score-num span{ color:rgba(255,255,255,.7) !important; }
.kmatch-verdict{ color:#FFF0DC !important; }
.kmatch-result .ktable th{ background:linear-gradient(135deg,#FF8A00,#FB6E00) !important; color:#fff !important; }
.kmatch-result .ktable tr:nth-child(even) td{ background:#FFF8F0; }
.kmatch-disclaimer{ background:#FFF6EC; border-left:4px solid var(--k-saffron); border-radius:10px; padding:12px 16px; font-size:13px; color:#7a5a3a; }
.kmatch-error{ border-left:4px solid #C62828; }

/* ════════════════════════════════════════════════════════════
   v9.26 — Fix readability of review + suggestion form inputs.
   .finder-input was built for the dark Name-Finder (white text +
   faint white border), so on the light Reviews form card and the
   home "Have an idea for us?" suggestion box the typed text,
   borders and the rating-dropdown stars were invisible. Re-theme
   them with theme-aware tokens so they read in BOTH light & dark.
   ════════════════════════════════════════════════════════════ */
.rv-form-card .finder-input,
.rv-form-card .finder-select,
.suggest-box .finder-input,
.suggest-box .finder-select{
  background: var(--surface) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;   /* iOS/Safari */
  border: 1.5px solid var(--border-md) !important;
  caret-color: var(--rose);
}
.rv-form-card .finder-input::placeholder,
.suggest-box .finder-input::placeholder,
.rv-form-card .finder-select::placeholder,
.suggest-box .finder-select::placeholder{
  color: var(--ink-45) !important;
  -webkit-text-fill-color: var(--ink-45) !important;
  opacity: 1;
}
/* dropdown options + the ★ rating stars inside the select */
.rv-form-card .finder-input option,
.rv-form-card .finder-select option,
.suggest-box .finder-input option{
  background: var(--white) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.rv-form-card .finder-input:focus,
.rv-form-card .finder-select:focus,
.suggest-box .finder-input:focus,
.suggest-box .finder-select:focus{
  border-color: var(--rose) !important;
  box-shadow: 0 0 0 3px rgba(240,0,107,0.12) !important;
  outline: none;
}
/* Review summary + per-item stars: clearly visible gold */
.rv-summary .rv-stars,
.rv-item-stars{ color:#F5A623 !important; }
.rv-item-stars-off{ color:#D9D4E0 !important; opacity:1 !important; }

/* ════════════════════════════════════════════════════════════
   v9.27 — Sample Report Preview section (Kundali + Matching pages)
   Real report thumbnails, hover-zoom cards, lightbox modal.
   ════════════════════════════════════════════════════════════ */
.ksample-wrap{ padding:46px 0 18px; }
.ksample-head{ text-align:center; margin-bottom:26px; }
.ksample-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(26px,3.4vw,40px);
  color:var(--ink); margin:6px 0 8px; }
.ksample-title em{ font-style:normal; color:var(--rose); }
.ksample-sub{ color:var(--ink-45); font-size:15px; max-width:560px; margin:0 auto; }
.ksample-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:26px; }
.ksample-card{ position:relative; border-radius:14px; overflow:hidden; cursor:pointer; background:var(--white);
  border:1px solid var(--border-md); box-shadow:0 10px 26px -16px rgba(60,20,80,.45);
  transition:transform .3s, box-shadow .3s; }
.ksample-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px -18px rgba(184,58,12,.4); }
.ksample-shot{ aspect-ratio:1/1.414; overflow:hidden; background:var(--surface); }
.ksample-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .45s ease; display:block; }
.ksample-card:hover .ksample-shot img{ transform:scale(1.08); }
.ksample-label{ font-size:11.5px; font-weight:600; color:var(--ink-70); padding:9px 6px; text-align:center; }
.ksample-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ksample-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:13px 28px; border-radius:100px; cursor:pointer; text-decoration:none; transition:transform .25s, filter .25s; }
.ksample-btn.primary{ color:#fff; background:linear-gradient(135deg,var(--sunrise),var(--rose)); border:none; }
.ksample-btn.primary:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.ksample-btn.ghost{ color:var(--rose); background:var(--white); border:1.5px solid var(--border-md); }
.ksample-btn.ghost:hover{ border-color:var(--rose); transform:translateY(-2px); }
/* lightbox */
.ksample-lb{ position:fixed; inset:0; z-index:1200; background:rgba(30,15,35,.84); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:24px; }
.ksample-lb.open{ display:flex; }
.ksample-lb-inner{ position:relative; max-width:min(620px,92vw); display:flex; flex-direction:column; align-items:center; gap:14px; }
.ksample-lb-inner img{ max-width:100%; max-height:80vh; border-radius:12px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); background:#fff; }
.ksample-lb-close{ position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%; border:none;
  cursor:pointer; background:rgba(255,255,255,.92); color:var(--rose); font-size:18px; }
.ksample-lb-nav{ display:flex; gap:14px; align-items:center; }
.ksample-lb-nav button{ width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink-70); font-size:18px; }
.ksample-lb-pdf{ font-weight:600; font-size:14px; color:#fff; text-decoration:none; padding:10px 22px;
  border-radius:100px; background:linear-gradient(135deg,var(--sunrise),var(--rose)); }
@media(max-width:900px){ .ksample-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .ksample-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }

/* ════════════════════════════════════════════════════════════
   v9.31 — Premium UI refinements (header button, hero badge,
   heading underline, script size, single-row feature cards)
   ════════════════════════════════════════════════════════════ */

/* shared elegant twinkle: mostly steady, a soft sparkle once per ~2.6s */
@keyframes tnTwinkle{
  0%, 66%, 100%{ opacity:.92; transform:scale(1); }
  80%{ opacity:1; transform:scale(1.18); }
  90%{ opacity:.92; transform:scale(1); }
}
@keyframes tnBtnBreath{
  0%,100%{ transform:scale(1); filter:brightness(1); }
  50%   { transform:scale(1.03); filter:brightness(1.04); }
}

/* ---- (2) Premium header button ---- */
.nav-premium-btn{
  display:inline-flex !important; align-items:center; gap:6px;
  border-radius:999px !important;
  /* extremely thin, soft outer shadow + subtle glass highlight */
  box-shadow:0 1px 4px rgba(124,58,237,.18), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition:transform .35s cubic-bezier(.4,0,.2,1), filter .35s ease, box-shadow .35s ease !important;
  animation:tnBtnBreath 2.6s ease-in-out infinite;
  transform-origin:center; will-change:transform;
}
.nav-premium-btn:hover{
  animation-play-state:paused;
  transform:translateY(-1px) scale(1.03) !important;
  filter:brightness(1.06);
  box-shadow:0 3px 10px rgba(124,58,237,.22), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
/* retire the old aggressive corner sparkle — the star twinkle replaces it */
.nav-premium-btn::after{ display:none !important; }
/* star icon: light-grey outline + white fill + soft twinkle */
.nav-premium-star{
  fill:#FFFFFF; stroke:#D3D3D3; stroke-width:1px; vertical-align:-2px; flex-shrink:0;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.5));
  animation:tnTwinkle 2.6s ease-in-out infinite; transform-origin:center;
}

/* ---- (3) Hero badge "Discover meaningful baby names" — Orange, thicker border ---- */
.hero-badge.hero-badge-star{
  background:linear-gradient(135deg, #FF9A40, #FF7A2A) !important; /* Orange */
  border:2.5px solid #FFFFFF !important;   /* thicker white border */
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 2px 14px rgba(230,110,30,.28) !important;
  color:#FFFFFF !important;                 /* white text */
}
.hero-badge-star-ico{
  color:#FFFFFF !important; fill:#FFFFFF !important; flex-shrink:0;
  stroke:none;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.45));
  animation:tnTwinkle 2.6s ease-in-out infinite; transform-origin:center;
}

/* ---- (4) Remove underline under "Name" ---- */
.hero-title .ht-name::after,
[data-theme="dark"] .hero-title .ht-name::after{ display:none !important; content:none !important; }

/* ---- (5) "A Lifetime Of Love" ~13% smaller (same font/colour/position) ---- */
.hero-deco-script{ font-size:clamp(22px,2.1vw,34px) !important; }

/* ---- (6) Three feature cards in one equal-width row ---- */
.nf-feat-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px;
  align-items:stretch;
}
.nf-feat-card{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:10px;
  height:100%;
}
.nf-feat-ico{ font-size:20px; line-height:1; flex-shrink:0; }
.nf-feat-t{ font-size:13px; color:#fff; font-weight:500; }
.nf-feat-s{ font-size:11px; color:rgba(255,255,255,.4); line-height:1.35; }
/* tablet: keep 3 columns if space allows */
@media(max-width:1024px) and (min-width:641px){ .nf-feat-row{ grid-template-columns:repeat(3,1fr); gap:10px; } .nf-feat-card{ padding:12px 13px; } }
/* mobile: stack vertically */
@media(max-width:640px){ .nf-feat-row{ grid-template-columns:1fr; } }

/* accessibility: respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  .nav-premium-btn, .nav-premium-star, .hero-badge-star-ico{ animation:none !important; }
}

/* ════════════════════════════════════════════════════════════
   v9.33 — Image-as-hero (supplied artwork) + transparent functional form
   Kundali (/kundali/) and Milan (/kundali/matching/)
   ════════════════════════════════════════════════════════════ */
.khero{ background:#fbf1ea; padding:0 0 10px; }
.khero-crumb{ max-width:1320px; margin:0 auto; padding:11px 16px 7px; font-size:13px; color:var(--ink-70); }
.khero-crumb a{ color:var(--ink-70); text-decoration:none; opacity:.85; }
.khero-crumb a:hover{ text-decoration:underline; opacity:1; }

.khero-stage{ position:relative; width:100%; max-width:1320px; margin:0 auto; }
.khero-stage-k{ aspect-ratio:1536 / 944; }
.khero-stage-m{ aspect-ratio:1536 / 1024; }
.khero-bg{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; }

.khero-form{ position:absolute; inset:0; margin:0; }
.khero-f{
  position:absolute; box-sizing:border-box; margin:0;
  background:transparent; border:0; outline:0;
  color:transparent; -webkit-text-fill-color:transparent; caret-color:#b8452a;
  font-family:inherit; font-size:clamp(11px,1.3vw,16px); font-weight:500;
  padding:0 1.1%; border-radius:8px; transition:background .12s ease; cursor:text;
}
.khero-sel{ cursor:pointer; -webkit-appearance:none; appearance:none; }
.khero-dt{ cursor:pointer; }
.khero-f::-webkit-calendar-picker-indicator{ opacity:0; cursor:pointer; }
.khero-f:focus, .khero-f.filled{
  color:#5b3a26; -webkit-text-fill-color:#5b3a26;
  background:#fffdf8;            /* solid — fully hides the baked-in placeholder, no peek */
  box-shadow:none;
}
/* fit the overlay box neatly inside the baked-in field border */
.khero-stage-k .khero-f{ height:4.4% !important; border-radius:999px !important; }  /* kundali fields = pill */
.khero-stage-m .khero-f{ height:3.4% !important; border-radius:10px !important; }   /* milan fields = rounded rect */
.khero-sel option{ color:#3a2a1a; }
.khero-submit{ position:absolute; background:transparent; border:0; padding:0; cursor:pointer; border-radius:100px; }
.khero-submit:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:-3px; }

.khero-mobile{ display:none; }

/* ---- mobile: image becomes a banner, real form stacks below ---- */
@media (max-width:760px){
  .khero-stage, .khero-stage-k, .khero-stage-m{ aspect-ratio:auto; height:196px; overflow:hidden; }
  .khero-bg{ height:100%; object-fit:cover; object-position:50% 18%; border-radius:0; }
  .khero-form{ display:none; }
  .khero-mobile{ display:block; max-width:560px; margin:0 auto; padding:18px 16px 4px; }
  .khero-m-title{ font-family:var(--font-display); font-weight:300; font-size:30px; text-align:center; margin:4px 0; color:var(--ink); }
  .khero-m-title em{ color:var(--rose); font-style:normal; }
  .khero-m-sub{ text-align:center; color:var(--ink-70); font-size:14px; margin:0 0 14px; }
  .khero-form-m > label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-70); margin:8px 0 4px; }
  .khero-form-m input, .khero-form-m select{ width:100%; padding:11px 12px; border:1px solid var(--border-md); border-radius:10px; background:#fff; color:var(--ink); font-size:15px; box-sizing:border-box; }
  .khero-form-m .khm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .khero-form-m > button{ width:100%; margin-top:16px; padding:14px; border:0; border-radius:100px; background:linear-gradient(135deg,var(--rose),var(--violet)); color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
  /* Milan mobile dual cards -> light theme */
  .khero-mobile .kmatch-cols{ display:grid; grid-template-columns:1fr; gap:14px; }
  .khero-mobile .kmatch-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; }
  .khero-mobile .finder-label{ color:var(--ink-70); }
  .khero-mobile .finder-input, .khero-mobile .finder-select{ background:#fbf6f0; border:1px solid var(--border-md); color:var(--ink); }
}

/* ════════════════════════════════════════════════════════════
   v9.37 — TotsName logo to match the Vedic Kundali design
   (baby icon + "Tots" blue + "Name" pink + ".com" orange, rounded font, no gaps)
   ════════════════════════════════════════════════════════════ */
.site-logo, .footer-brand-logo{
  display:inline-flex !important; align-items:center; gap:.02em;
  font-family:Arial, 'Helvetica Neue', sans-serif !important; font-weight:700 !important;
  letter-spacing:0 !important;
}
.site-logo .brand-baby, .footer-brand-logo .brand-baby{
  display:inline-flex; align-items:center; line-height:0; margin-right:.01em;
  color:#23A8E0 !important; -webkit-text-fill-color:#23A8E0 !important;
}
.brand-baby svg{ width:.92em; height:.92em; display:block; }
.site-logo .brand-tots, .footer-brand-logo .brand-tots,
.site-footer .footer-brand-logo .brand-tots{
  color:#E6198D !important; -webkit-text-fill-color:#E6198D !important;
  font-family:Arial, 'Helvetica Neue', sans-serif !important; font-weight:700 !important;
}
.site-logo .brand-name, .footer-brand-logo .brand-name,
.site-footer .footer-brand-logo .brand-name{
  color:#23A8E0 !important; -webkit-text-fill-color:#23A8E0 !important;
  font-family:Arial, 'Helvetica Neue', sans-serif !important; font-weight:700 !important;
}
.site-logo sup, .footer-brand-logo sup,
.site-footer .footer-brand-logo sup{
  color:#FF7A1A !important; -webkit-text-fill-color:#FF7A1A !important;   /* .com orange */
  font-family:Arial, 'Helvetica Neue', sans-serif !important; font-weight:700 !important;
  font-size:.36em; vertical-align:.5em; margin-left:.02em; letter-spacing:0;
}
[data-theme="dark"] .site-logo sup{ color:#FF8C33 !important; -webkit-text-fill-color:#FF8C33 !important; }

/* ============================================================
   BOOK STYLE for blog posts (.book-article)
   Elegant serif "storybook" treatment. Headings stay un-translated
   (translate="no"); body text translates via the site toggle.
   ============================================================ */
.book-article{
  background:
    radial-gradient(120% 60% at 50% 0%, #fffdf8 0%, #fdf7ec 60%, #fbf2e2 100%);
  border:1px solid #efe3cf;
  border-radius:18px;
  box-shadow:0 24px 60px -34px rgba(80,50,10,.45), inset 0 1px 0 #fffef9;
  padding:46px clamp(20px,5vw,64px) 52px;
  position:relative;
}
.book-article::before,
.book-article::after{
  content:"❦"; position:absolute; left:50%; transform:translateX(-50%);
  color:#c2a35a; font-size:20px; opacity:.8;
}
.book-article::before{ top:16px; }
.book-article::after{ bottom:14px; }
.book-article .breadcrumb{ justify-content:center; }
.book-article .blog-cat{ text-align:center; }
.book-article > h1.section-title{
  text-align:center !important; font-family:var(--font-display);
  font-weight:600; color:#3a1d10; letter-spacing:-.3px;
  border-bottom:none; position:relative; padding-bottom:14px;
}
.book-article > h1.section-title::after{
  content:""; display:block; width:120px; height:2px; margin:16px auto 0;
  background:linear-gradient(90deg,transparent,#c2a35a,transparent);
}
.book-article .post-author-row{ justify-content:center; border:none; }
.book-article .post-author-row > div:nth-child(2){ text-align:center; }

/* body — book typography */
.book-article .article-body{
  font-family:var(--font-display,'Cormorant Garamond',serif);
  font-size:21px; line-height:1.85; color:#33291f; text-align:justify;
  hyphens:auto;
}
.book-article .article-body p{ margin:0 0 16px; }
.book-article .article-body > p:first-of-type::first-letter{
  float:left; font-size:64px; line-height:.78; font-weight:600;
  padding:6px 12px 0 0; color:#b8336a; font-family:var(--font-display),serif;
}
.book-article .article-body h2{
  font-family:var(--font-display),serif; text-align:center; font-weight:600;
  font-size:30px; color:#6a2230; margin:40px 0 18px; letter-spacing:.2px;
  position:relative;
}
.book-article .article-body h2::before,
.book-article .article-body h2::after{
  content:"·"; color:#c2a35a; padding:0 14px; font-weight:700;
}
.book-article .article-body h3{
  font-family:var(--font-display),serif; font-weight:600; font-size:22px;
  color:#9a3b1e; margin:26px 0 8px;
}
.book-article .article-body strong{ color:#4a2a14; font-weight:600; }
.book-article .article-body em{ color:#5a4632; }
.book-article .article-body ul{ margin:0 0 18px; padding-left:26px; list-style:none; }
.book-article .article-body ul li{ position:relative; margin:0 0 9px; padding-left:6px; }
.book-article .article-body ul li::before{
  content:"❧"; position:absolute; left:-22px; color:#c2a35a; font-size:15px; top:2px;
}
.book-article .article-body a{ color:#b8336a; text-decoration:underline; text-underline-offset:2px; }

/* book frontispiece / plate image */
.book-plate{
  margin:8px auto 30px; max-width:340px; text-align:center;
}
.book-plate img{
  width:100%; height:auto; border-radius:12px;
  border:6px solid #fff; box-shadow:0 16px 40px -18px rgba(80,50,10,.5);
  outline:1px solid #e6d4b3;
}
.book-plate figcaption{
  font-family:var(--font-display),serif; font-style:italic; font-size:15px;
  color:#7a6448; margin-top:10px;
}

/* the TOC keeps a parchment look inside a book article */
.book-article .post-toc{ background:#fffaf0; border-left-color:#c2a35a; }
.book-article .post-toc-title{ color:#9a6a1e; }
.book-article .post-toc a{ color:#5a4632; }

@media (max-width:640px){
  .book-article{ padding:34px 20px 40px; }
  .book-article .article-body{ font-size:19px; }
}

/* ============================================================
   SMART NAME FINDER (upgraded)
   ============================================================ */
.sf-hero{ background:linear-gradient(135deg,#2a0f2b 0%,#3a1533 45%,#4a1b2e 100%); color:#fff; padding:56px 0 62px; text-align:center; position:relative; overflow:hidden; }
.sf-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%, rgba(240,0,107,.22), transparent 70%); pointer-events:none; }
.sf-hero .container{ position:relative; z-index:1; max-width:760px; }
.sf-hero-badge{ display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#ffd; padding:6px 16px; border-radius:30px; font-size:13px; letter-spacing:.04em; margin-bottom:16px; }
.sf-hero-title{ font-family:var(--font-display); font-size:clamp(38px,6vw,64px); margin:0 0 6px; color:#fff; line-height:1.04; }
.sf-hero-sub{ font-size:clamp(16px,2.2vw,21px); color:#ffb3d4; font-weight:600; margin:0 0 14px; }
.sf-hero-desc{ font-size:16px; color:rgba(255,255,255,.72); line-height:1.7; max-width:600px; margin:0 auto 26px; }
.sf-hero-cta{ display:inline-block; background:linear-gradient(135deg,var(--rose),var(--sunrise)); color:#fff; text-decoration:none; font-weight:700; font-size:17px; padding:15px 34px; border-radius:40px; box-shadow:0 12px 30px -10px rgba(240,0,107,.7); transition:transform .15s; }
.sf-hero-cta:hover{ transform:translateY(-2px); }

.sf-wrap{ padding:34px 0 60px; }
.sf-card{ background:var(--surface,#fff); border:1px solid var(--border); border-radius:20px; padding:clamp(20px,3vw,34px); box-shadow:0 20px 50px -30px rgba(0,0,0,.25); }
.sf-sec{ margin-bottom:20px; }
.sf-sec-h{ font-family:var(--font-display); font-size:19px; color:var(--ink); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.sf-sec-h span{ font-size:20px; }
.sf-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sf-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.sf-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:680px){ .sf-grid-2,.sf-grid-3,.sf-grid-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:440px){ .sf-grid-2,.sf-grid-3,.sf-grid-4{ grid-template-columns:1fr; } }
.sf-l{ display:block; font-size:12px; font-weight:600; color:var(--ink-70); margin-bottom:5px; text-transform:uppercase; letter-spacing:.03em; }
.sf-opt{ text-transform:none; font-weight:400; color:var(--ink-45); letter-spacing:0; }
.sf-in{ width:100%; padding:11px 13px; border:1.5px solid var(--border-md,#e2e2e2); border-radius:11px; font-size:15px; background:#fff; color:var(--ink); }
.sf-in:focus{ outline:none; border-color:var(--rose); }
.sf-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.sf-chip{ border:1.5px solid var(--border-md,#e2e2e2); background:#fff; color:var(--ink-70); border-radius:30px; padding:8px 15px; font-size:14px; cursor:pointer; transition:all .15s; }
.sf-chip:hover{ border-color:var(--rose); color:var(--rose); }
.sf-chip.active{ background:linear-gradient(135deg,var(--rose),var(--sunrise)); color:#fff; border-color:transparent; box-shadow:0 6px 16px -8px rgba(240,0,107,.6); }
.sf-chip.mode.active{ background:linear-gradient(135deg,#7a2e9e,#c0398a); }
.sf-more-opts{ border:1px dashed var(--border-md,#ddd); border-radius:14px; padding:12px 16px; margin-bottom:20px; }
.sf-more-opts summary{ cursor:pointer; font-weight:600; color:var(--ink-70); font-size:15px; }
.sf-run{ width:100%; border:none; background:linear-gradient(135deg,var(--rose),var(--sunrise)); color:#fff; font-weight:700; font-size:18px; padding:16px; border-radius:14px; cursor:pointer; box-shadow:0 14px 30px -12px rgba(240,0,107,.6); }
.sf-run:hover{ filter:brightness(1.05); }
.sf-run:disabled{ opacity:.75; cursor:wait; }

.sf-magic{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:26px 0 6px; }
.sf-mbtn{ border:1.5px solid var(--border-md,#e2e2e2); background:#fff; color:var(--ink-70); border-radius:30px; padding:9px 16px; font-size:13.5px; cursor:pointer; font-weight:500; transition:all .15s; }
.sf-mbtn:hover{ border-color:var(--rose); color:var(--rose); transform:translateY(-1px); }
.sf-mbtn.big{ font-size:15px; padding:12px 26px; background:linear-gradient(135deg,var(--rose),var(--sunrise)); color:#fff; border:none; box-shadow:0 10px 24px -12px rgba(240,0,107,.6); }

.sf-block-h{ font-family:var(--font-display); font-size:22px; color:var(--ink); margin:26px 0 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sf-count,.sf-block-h .sf-count{ font-size:12px; color:var(--ink-45); font-family:var(--font-body); background:var(--cream,#faf6ef); padding:3px 10px; border-radius:20px; font-weight:400; }
.sf-grid-r{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:720px){ .sf-grid-r{ grid-template-columns:1fr; } }
.sf-r{ border:1px solid var(--border); border-radius:16px; padding:16px 18px; background:#fff; transition:box-shadow .15s,transform .15s; }
.sf-r:hover{ box-shadow:0 14px 34px -18px rgba(0,0,0,.28); transform:translateY(-2px); }
.sf-r.blend{ background:linear-gradient(180deg,#fff,#fff8fb); border-color:#f4c9dd; }
.sf-r-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.sf-r-name{ font-family:var(--font-display); font-size:26px; color:var(--rose); font-weight:700; line-height:1; }
.sf-r-pron{ font-size:12px; color:var(--ink-45); margin-left:8px; }
.sf-r-stars{ margin-top:5px; font-size:13px; }
.sf-star{ color:#f5a623; letter-spacing:1px; } .sf-star.dim{ color:#e2d3b8; }
.sf-r-pct{ color:var(--ink-45); font-size:11.5px; margin-left:6px; }
.sf-r-acts{ display:flex; gap:6px; }
.sf-act{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border-md,#e2e2e2); background:#fff; cursor:pointer; font-size:15px; line-height:1; color:var(--ink-45); }
.sf-act.like:hover,.sf-act.like.on{ color:var(--rose); border-color:var(--rose); }
.sf-act.nope:hover{ color:#c0392b; border-color:#e0a99f; }
.sf-r-mean{ font-size:14.5px; color:var(--ink-70); margin:8px 0 2px; font-style:italic; }
.sf-r-og{ color:var(--ink-45); font-style:normal; font-size:12.5px; }
.sf-r-blend{ font-size:12.5px; color:#a15a7a; background:#fff2f7; border-radius:8px; padding:6px 10px; margin:6px 0; }
.sf-r-lucky{ font-size:12.5px; color:var(--ink-70); margin:6px 0; }
.sf-r-traits{ display:flex; flex-wrap:wrap; gap:5px; margin:6px 0; }
.sf-r-traits span{ font-size:11px; background:var(--cream,#faf6ef); color:var(--ink-70); padding:2px 9px; border-radius:20px; }
.sf-r-story{ margin:6px 0; }
.sf-r-story summary{ cursor:pointer; font-size:13px; color:var(--teal,#0a8f80); font-weight:600; }
.sf-r-story p{ font-size:14px; color:var(--ink-70); line-height:1.6; margin:8px 0; }
.sf-r-why{ color:var(--sunrise)!important; font-weight:500; }
.sf-r-scoregrid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin-top:8px; }
@media(max-width:520px){ .sf-r-scoregrid{ grid-template-columns:1fr; } }
.sf-bar{ display:flex; align-items:center; gap:7px; font-size:11px; }
.sf-bar-l{ width:78px; color:var(--ink-45); flex-shrink:0; }
.sf-bar-t{ flex:1; height:6px; background:#efeae0; border-radius:5px; overflow:hidden; }
.sf-bar-t i{ display:block; height:100%; background:linear-gradient(90deg,var(--sunrise),var(--rose)); }
.sf-bar-v{ width:20px; text-align:right; color:var(--ink-70); font-weight:600; }
.sf-r-view{ display:inline-block; margin-top:8px; font-size:13px; color:var(--rose); text-decoration:none; font-weight:600; }
.sf-r-new{ display:inline-block; margin-top:8px; font-size:12px; color:#a15a7a; }
.sf-book-btn{ border:none; background:linear-gradient(135deg,#7a2e9e,#c0398a); color:#fff; font-weight:700; font-size:16px; padding:15px 30px; border-radius:40px; cursor:pointer; box-shadow:0 14px 30px -12px rgba(122,46,158,.6); }
.sf-book-btn:hover{ filter:brightness(1.06); }

.sf-pop-h{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); margin:26px 0 12px; }
.sf-pop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:640px){ .sf-pop-grid{ grid-template-columns:1fr 1fr; } }
.sf-pop-card{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; text-decoration:none; background:#fff; }
.sf-pop-name{ font-family:var(--font-display); font-size:19px; color:var(--rose); font-weight:700; }
.sf-pop-mean{ font-size:12.5px; color:var(--ink-45); margin-top:2px; }
[data-theme="dark"] .sf-card,[data-theme="dark"] .sf-r,[data-theme="dark"] .sf-in,[data-theme="dark"] .sf-chip,[data-theme="dark"] .sf-mbtn,[data-theme="dark"] .sf-pop-card{ background:var(--white); }

/* Smart Finder — WOW presets, references, comparison */
.sf-wow{ background:linear-gradient(180deg,#fff,#faf6ef); border-bottom:1px solid var(--border); padding:20px 0; }
.sf-wow-h{ text-align:center; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); margin-bottom:12px; }
.sf-wow-row{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.sf-wow-btn{ border:1.5px solid #efc9dd; background:#fff; color:#a1246b; border-radius:30px; padding:9px 17px; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .15s; }
.sf-wow-btn:hover{ background:linear-gradient(135deg,var(--rose),var(--sunrise)); color:#fff; border-color:transparent; transform:translateY(-1px); }
.sf-wow-btn.active{ background:linear-gradient(135deg,#7a2e9e,#c0398a); color:#fff; border-color:transparent; }
.sf-refs{ margin:8px 0 2px; }
.sf-ref{ font-size:12.5px; color:var(--ink-70); padding:3px 0; line-height:1.4; }
.sf-cmp{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-45); margin:8px 12px 0 0; cursor:pointer; }
.sf-cmp input{ accent-color:var(--rose); }
.sf-cmp-bar{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:80; display:flex; align-items:center; gap:12px; background:#2a0f2b; color:#fff; padding:12px 20px; border-radius:40px; box-shadow:0 16px 40px -14px rgba(0,0,0,.6); font-size:14px; }
.sf-cmp-bar button{ border:none; border-radius:30px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; }
#sf-cmp-go{ background:linear-gradient(135deg,var(--rose),var(--sunrise)); color:#fff; }
#sf-cmp-clear{ background:rgba(255,255,255,.15); color:#fff; }
.sf-cmp-wrap{ overflow-x:auto; margin:0 0 20px; }
.sf-cmp-t{ width:100%; border-collapse:collapse; min-width:520px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.sf-cmp-t th,.sf-cmp-t td{ padding:9px 12px; border-bottom:1px solid var(--border); font-size:13.5px; text-align:center; }
.sf-cmp-t th{ background:var(--cream,#faf6ef); font-family:var(--font-display); color:var(--rose); font-size:17px; }
.sf-cmp-t td.k{ text-align:left; color:var(--ink-45); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
[data-theme="dark"] .sf-wow,[data-theme="dark"] .sf-wow-btn,[data-theme="dark"] .sf-cmp-t,[data-theme="dark"] .sf-cmp-t th{ background:var(--white); }

/* ============================================================
   THE GUIDE — premium interactive digital book (v9.49)
   ============================================================ */
.guide-progress-track{ position:sticky; top:0; z-index:250; height:3px; background:transparent; }
.guide-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--sunrise),var(--rose)); transition:width .1s linear; }

.guide-hero{ text-align:center; max-width:720px; margin:8px auto 26px; }
.guide-hero-eyebrow{ font-family:var(--font-display); font-size:15px; color:var(--rose); font-weight:600; letter-spacing:.04em; }

.guide-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; background:var(--surface,#fff); border:1px solid var(--border); border-radius:14px; padding:12px 16px; margin:0 0 24px; position:sticky; top:6px; z-index:60; box-shadow:0 8px 24px -18px rgba(0,0,0,.25); }
.guide-search-wrap{ position:relative; flex:1 1 260px; min-width:200px; display:flex; align-items:center; gap:8px; }
.guide-search-wrap .finder-input{ width:100%; margin:0; }
.guide-search-count{ font-size:12px; color:var(--ink-45); white-space:nowrap; }
.guide-toolbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.guide-translate-wrap{ display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:8px; padding:6px 10px; background:var(--cream,#faf6ef); }
.guide-translate-select{ border:none; background:transparent; font-size:13px; font-family:var(--font-body); cursor:pointer; }
.guide-tool-btn{ border:1px solid var(--border); background:#fff; border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; text-decoration:none; color:var(--ink); white-space:nowrap; }
.guide-tool-btn:hover{ border-color:var(--sunrise); color:var(--sunrise-dk); }

.guide-shell{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:36px; align-items:start; }
.guide-sidebar{ position:sticky; top:78px; max-height:calc(100vh - 100px); overflow-y:auto; background:#fffaf0; border:1px solid #e7d9b8; border-radius:14px; padding:16px; }
.guide-sidebar-title{ font-family:var(--font-display); font-weight:600; color:#7a2e1e; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.guide-toc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.guide-toc-item{ display:flex; align-items:center; gap:6px; border-radius:8px; padding:2px; }
.guide-toc-item.active{ background:#f5e7c4; }
.guide-toc-link{ flex:1; display:flex; align-items:center; gap:8px; text-decoration:none; color:#5a3a1a; padding:7px 8px; border-radius:8px; font-size:13.5px; line-height:1.3; }
.guide-toc-item.active .guide-toc-link{ color:#7a2e1e; font-weight:600; }
.guide-toc-num{ flex:none; width:20px; height:20px; border-radius:50%; background:#c9a24b; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); }
.guide-bookmark-btn{ flex:none; background:none; border:none; cursor:pointer; font-size:16px; color:#c9a24b; padding:4px; }
.guide-bookmark-btn.on{ color:#e0a020; }
.guide-sidebar-note{ margin-top:10px; font-size:11.5px; color:#9a8a6a; line-height:1.4; }

.guide-book{ min-width:0; }
.guide-chapter{ margin-bottom:34px; }
.guide-chapter-num{ text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#c9a24b; margin-bottom:6px; }
.guide-chapter-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:30px; padding-top:18px; border-top:1px dashed #d9c38c; }
.guide-chapter-nav-btn{ flex:1; text-decoration:none; color:#7a5a32; font-family:var(--font-display); font-size:14px; display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; }
.guide-chapter-nav-btn.next{ justify-content:flex-end; text-align:right; margin-left:auto; }
.guide-chapter-nav-btn:hover{ background:#fffaf0; color:#9a3b25; }
.guide-search-hit{ background:#ffe08a; color:#5a3a1a; border-radius:2px; padding:0 1px; }
.guide-end-note{ text-align:center; color:var(--ink-45); font-size:14px; padding:28px 10px 0; }

[data-theme="dark"] .guide-toolbar{ background:#1b150e; border-color:#3a2e1c; }
[data-theme="dark"] .guide-translate-wrap{ background:#241c12; border-color:#3a2e1c; }
[data-theme="dark"] .guide-tool-btn{ background:#1b150e; border-color:#3a2e1c; color:#e8dcc4; }
[data-theme="dark"] .guide-sidebar{ background:#241c12; border-color:#3a2e1c; }
[data-theme="dark"] .guide-toc-item.active{ background:#3a2e1c; }
[data-theme="dark"] .guide-toc-link{ color:#e8dcc4; }
[data-theme="dark"] .guide-search-hit{ background:#7a5a1a; color:#fff; }

@media (max-width:900px){
  .guide-shell{ grid-template-columns:1fr; }
  .guide-sidebar{ position:static; max-height:none; }
  .guide-toolbar{ position:static; }
}

/* "📖 Guide" — now only in the Blog mega-menu + on the Blog page itself */
.mega-guide-link{
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#fdf0cf,#f7dfae) !important; color:#7a2e1e !important;
  border-radius:10px; padding:8px 12px !important; font-weight:600; margin-top:2px;
}
[data-theme="dark"] .mega-guide-link{ background:linear-gradient(135deg,#3a2e1c,#2a2113) !important; color:#f0d9a8 !important; }

.blog-guide-banner{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:linear-gradient(135deg,#fdf0cf,#f7dfae); border:1px solid #d9b968;
  border-radius:16px; padding:18px 24px; margin:0 0 26px;
  box-shadow:0 8px 26px -14px rgba(201,162,75,.6);
  transition:transform .18s ease, box-shadow .18s ease;
}
.blog-guide-banner:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -14px rgba(201,162,75,.75); }
.blog-guide-banner-ico{ font-size:34px; flex:none; }
.blog-guide-banner-text h3{ font-family:var(--font-display); color:#7a2e1e; margin:0 0 3px; font-size:20px; }
.blog-guide-banner-text p{ margin:0; color:#8a6a3a; font-size:13.5px; }
.blog-guide-banner-cta{ margin-left:auto; flex:none; font-family:var(--font-display); color:#7a2e1e; font-weight:600; white-space:nowrap; }
[data-theme="dark"] .blog-guide-banner{ background:linear-gradient(135deg,#3a2e1c,#2a2113); border-color:#5a4a2c; }
[data-theme="dark"] .blog-guide-banner-text h3{ color:#f0d9a8; }
[data-theme="dark"] .blog-guide-banner-text p,[data-theme="dark"] .blog-guide-banner-cta{ color:#e0c088; }
@media (max-width:560px){ .blog-guide-banner{ flex-wrap:wrap; } .blog-guide-banner-cta{ margin-left:0; } }


/* Blog pagination */
.blog-pagination{ display:flex; justify-content:center; gap:8px; margin:32px 0 8px; flex-wrap:wrap; }
.blog-page-btn{ min-width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:14px; font-family:var(--font-body); color:var(--ink); }
.blog-page-btn:hover{ border-color:var(--sunrise); color:var(--sunrise-dk); }
.blog-page-btn.active{ background:var(--sunrise); color:#fff; border-color:var(--sunrise); }
[data-theme="dark"] .blog-page-btn{ background:#1b150e; border-color:#3a2e1c; color:#e8dcc4; }

/* Home page — slightly darker grey header (per request) */
/* Home header now matches every other page (default .site-header grey) */

/* Name-discovery CTA block — pink brand gradient (matches Image 2) */
.finder-cta-section{
  background:linear-gradient(135deg,#6B21F4 0%,#F0006B 55%,#FF4D2E 100%);
  padding:64px 0; position:relative; overflow:hidden;
}
.finder-cta{ position:relative; z-index:2; text-align:center; }
.finder-cta-btns{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.finder-cta-primary{
  background:#fff; color:var(--violet,#6B21F4) !important; font-size:16px; font-weight:600;
  padding:16px 38px; border-radius:100px; box-shadow:0 10px 30px -10px rgba(0,0,0,.35);
}
.finder-cta-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(0,0,0,.45); }
.finder-cta-secondary{
  background:rgba(255,255,255,.16); color:#fff !important; font-size:16px; font-weight:600;
  padding:16px 38px; border-radius:100px; border:1px solid rgba(255,255,255,.5);
}
.finder-cta-secondary:hover{ background:rgba(255,255,255,.26); transform:translateY(-2px); }
@media (max-width:560px){ .finder-cta-btns{ flex-direction:column; align-items:stretch; } .finder-cta-primary,.finder-cta-secondary{ text-align:center; justify-content:center; } }

/* ============================================================
   "Names with a 5,000-year story" heading — force solid vibrant
   pink in BOTH light & dark mode (beats the gradient-text rules).
   ============================================================ */
.section-title.myth-5000-head,
.section-title.myth-5000-head em,
[data-theme="dark"] .section-title.myth-5000-head,
[data-theme="dark"] .section-title.myth-5000-head em,
.translated-ltr .section-title.myth-5000-head,
.translated-rtl .section-title.myth-5000-head,
.translated-ltr .section-title.myth-5000-head em,
.translated-rtl .section-title.myth-5000-head em{
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#F0006B !important;
  color:#F0006B !important;
  font-weight:800 !important;
}
.section-title.myth-5000-head em{ font-style:italic !important; }

/* Guide page — chapter "book" cards use the header light-grey instead of cream parchment */
.guide-chapter.book-page{
  background:#F7F7F9 !important;
  border:1px solid #E3E4E8 !important;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.18), inset 0 0 0 6px #F7F7F9, inset 0 0 0 7px #E3E4E8 !important;
}
[data-theme="dark"] .guide-chapter.book-page{
  background:#1b150e !important; border-color:#3a2e1c !important;
  box-shadow:0 18px 50px -24px #000, inset 0 0 0 6px #1b150e, inset 0 0 0 7px #3a2e1c !important;
}

/* v9.71+ hero story line (below search) */
.hero-story-line{ font-family:var(--font-body); font-size:15px; color:var(--ink-45); margin:14px 0 0; }
.hero-story-line a{ color:var(--rose); font-weight:600; }
.hero-story-line a:hover{ text-decoration:underline; }
@media(max-width:900px){ .hero-story-line{ text-align:center; } }

/* ===== Razorpay checkout — global overlay + reusable pay button (v9.75) ===== */
#tots-pay-overlay{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
  background:rgba(21,8,26,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
#tots-pay-overlay .tpo-card{ background:#fff; border-radius:18px; padding:26px 30px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.28); max-width:300px; }
#tots-pay-overlay .tpo-spin{ width:38px; height:38px; display:inline-block; border-radius:50%;
  border:3px solid #F3CAD5; border-top-color:var(--crimson); animation:tpoSpin .8s linear infinite; }
#tots-pay-overlay .tpo-msg{ margin:14px 0 0; font-family:var(--font-body,sans-serif); color:#4A2530; font-size:15px; }
@keyframes tpoSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ #tots-pay-overlay .tpo-spin{ animation-duration:1.6s; } }

.tots-pay-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-family:var(--font-body,sans-serif); font-weight:600; font-size:16px;
  color:#fff; background:linear-gradient(135deg,var(--crimson),var(--crimson-dk)); padding:13px 26px; border-radius:100px;
  box-shadow:0 10px 26px rgba(198,21,63,.28); transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.tots-pay-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(198,21,63,.36); }
.tots-pay-btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.tots-pay-btn .tpb-lock{ opacity:.9; }

/* Accessibility: skip-to-content link (visible only on keyboard focus) */
.skip-link{ position:absolute; left:12px; top:-48px; z-index:100000; background:var(--crimson); color:#fff;
  padding:10px 16px; border-radius:0 0 10px 10px; font-family:var(--font-body,sans-serif); font-weight:600;
  font-size:14px; text-decoration:none; transition:top .15s ease; }
.skip-link:focus{ top:0; outline:3px solid #fff; outline-offset:-3px; }

/* ===== AI Naming Consultant (v9.84) — theme-matched, namespaced cns- ===== */
.cns-wrap{ padding:34px 0 70px; }
.cns-card{ background:var(--white,#fff); border:1px solid var(--border,rgba(107,33,244,.12)); border-radius:22px; padding:clamp(18px,3vw,34px); box-shadow:0 14px 44px rgba(22,11,46,.07); max-width:980px; margin:0 auto; }
.cns-progress{ margin-bottom:20px; }
.cns-steps{ display:flex; align-items:center; gap:6px; }
.cns-step{ width:34px; height:34px; flex-shrink:0; border-radius:50%; background:#F3EDFB; color:var(--ink-45,#7B6A9E); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; position:relative; }
.cns-step i{ position:absolute; top:38px; left:50%; transform:translateX(-50%); font-style:normal; font-size:10.5px; color:var(--ink-45,#7B6A9E); white-space:nowrap; }
.cns-step.active{ background:linear-gradient(135deg,var(--rose,var(--crimson)),var(--crimson-dk)); color:#fff; }
.cns-step.done{ background:#12A150; color:#fff; }
.cns-bar{ flex:1; height:2px; background:#EFE7F8; }
.cns-save{ margin:26px 0 0; font-size:12px; color:var(--ink-45,#7B6A9E); }
.cns-pane{ display:none; }
.cns-pane.active{ display:block; animation:cnsIn .25s ease; }
@keyframes cnsIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.cns-h{ font-family:var(--font-display,serif); font-size:clamp(20px,3vw,26px); color:var(--ink,#1a1030); margin:8px 0 4px; }
.cns-why{ font-size:13px; color:var(--ink-45,#7B6A9E); margin:0 0 16px; }
.cns-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:14px; }
.cns-field .sf-l{ display:block; margin-bottom:6px; }
.cns-tip{ cursor:help; font-size:12px; color:var(--rose,var(--crimson)); }
.cns-seg{ display:flex; gap:6px; flex-wrap:wrap; }
.cns-seg button{ flex:1; min-width:70px; padding:10px 12px; border:1px solid var(--border,rgba(107,33,244,.16)); background:#fff; border-radius:12px; font-size:13.5px; color:var(--ink,#1a1030); cursor:pointer; transition:all .15s; }
.cns-seg button.on{ background:linear-gradient(135deg,var(--rose,var(--crimson)),var(--crimson-dk)); color:#fff; border-color:transparent; }
.cns-seg-wrap button{ flex:0 1 auto; }
.cns-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px; }
.cns-groupl{ margin-top:6px; }
.cns-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:12px; flex-wrap:wrap; }
.cns-back{ background:none; border:1px solid var(--border,rgba(107,33,244,.18)); border-radius:100px; padding:11px 20px; font-size:14px; color:var(--ink,#1a1030); cursor:pointer; }
.cns-trust{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12.5px; color:var(--ink-45,#7B6A9E); margin:10px 0 4px; }
#cns-loading{ position:fixed; inset:0; z-index:99998; display:none; align-items:center; justify-content:center; background:rgba(21,8,26,.55); backdrop-filter:blur(3px); }
.cns-load-card{ background:#fff; border-radius:18px; padding:28px 32px; text-align:center; max-width:340px; box-shadow:0 24px 70px rgba(0,0,0,.28); }
.cns-spin{ width:40px; height:40px; display:inline-block; border-radius:50%; border:3px solid #F3CAD5; border-top-color:var(--rose,var(--crimson)); animation:tpoSpin .8s linear infinite; }
#cns-load-msg{ margin:14px 0 0; color:#4A2530; font-size:15px; min-height:44px; }
.cns-congrats{ text-align:center; margin:34px 0 18px; }
.cns-congrats-ico{ font-size:42px; }
.cns-congrats h2{ font-family:var(--font-display,serif); font-size:clamp(24px,4vw,32px); color:var(--ink,#1a1030); margin:6px 0 4px; }
.cns-congrats p{ color:var(--ink-45,#7B6A9E); margin:0; }
.cns-rescard{ background:#fff; border:1px solid var(--border,rgba(107,33,244,.12)); border-radius:18px; padding:20px 22px; margin:0 auto 14px; max-width:980px; box-shadow:0 8px 26px rgba(22,11,46,.05); position:relative; }
.cns-topcard{ border:2px solid var(--rose,var(--crimson)); box-shadow:0 16px 44px rgba(198,21,63,.14); }
.cns-topbadge{ display:inline-block; background:linear-gradient(135deg,var(--rose,var(--crimson)),var(--crimson-dk)); color:#fff; font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:100px; margin-bottom:10px; }
.cns-rank{ position:absolute; top:16px; right:18px; font-weight:800; color:var(--ink-45,#7B6A9E); font-size:14px; }
.cns-reshead{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cns-name{ font-family:var(--font-display,serif); font-size:clamp(22px,3.4vw,30px); font-weight:700; color:var(--ink,#1a1030); text-decoration:none; }
.cns-name:hover{ color:var(--rose,var(--crimson)); }
.cns-ai{ background:#FDF0F4; color:var(--rose,var(--crimson)); border:1px solid #F6CFDC; font-size:12.5px; padding:4px 12px; border-radius:100px; }
.cns-ai b{ font-size:15px; }
.cns-mean{ color:var(--ink-70,#5a4a66); font-size:14px; margin:6px 0 10px; }
.cns-scores{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.cns-score{ background:#F8F5FE; border:1px solid #ECE3FA; border-radius:10px; padding:5px 10px; font-size:11.5px; color:var(--ink-45,#7B6A9E); display:inline-flex; flex-direction:column; align-items:center; line-height:1.2; }
.cns-score b{ font-size:14px; color:var(--ink,#1a1030); }
.cns-whyfam{ font-size:14px; color:var(--ink,#1a1030); background:#FFF8F3; border-left:3px solid var(--rose,var(--crimson)); padding:9px 12px; border-radius:8px; margin:0 0 10px; }
.cns-more summary{ cursor:pointer; font-size:13.5px; font-weight:600; color:var(--rose,var(--crimson)); }
.cns-more[open] summary{ margin-bottom:8px; }
.cns-more ul{ margin:4px 0 10px 18px; font-size:13.5px; color:var(--ink-70,#5a4a66); }
.cns-dl{ font-size:13.5px; color:var(--ink-70,#5a4a66); margin:6px 0; }
.cns-story{ font-size:13.5px; color:var(--ink-70,#5a4a66); background:#FDF7FA; padding:10px 12px; border-radius:10px; }
.cns-listh{ text-align:center; font-family:var(--font-display,serif); font-size:20px; color:var(--ink,#1a1030); margin:26px 0 14px; }
.cns-pdfcta{ text-align:center; background:#fff; border:1px dashed var(--rose,var(--crimson)); border-radius:18px; padding:22px; max-width:640px; margin:26px auto 0; }
.cns-pdfcta p{ color:var(--ink-70,#5a4a66); font-size:14px; margin:0 0 12px; }
@media(max-width:560px){ .cns-step i{ display:none; } .cns-nav .sf-hero-cta{ width:100%; text-align:center; } .cns-back{ width:100%; } }

/* Consultant v2 (v9.85) additions */
.cns-eta{ margin:10px 0 0; font-size:13px; color:rgba(255,255,255,.85); }
.cns-stepline{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
#cns-stepnum{ font-weight:700; font-size:13.5px; color:var(--rose,var(--crimson)); }
.cns-track{ height:6px; background:#F3EDFB; border-radius:6px; margin-top:8px; overflow:hidden; }
.cns-fill{ height:100%; background:linear-gradient(90deg,var(--rose,var(--crimson)),var(--crimson-dk)); border-radius:6px; transition:width .3s ease; }
.cns-name-xl{ font-size:clamp(28px,4.5vw,38px); }
.cns-finalstmt{ font-size:14.5px; line-height:1.65; color:var(--ink,#1a1030); background:#FFF8F3; border-left:3px solid var(--rose,var(--crimson)); padding:12px 14px; border-radius:8px; margin:8px 0 12px; }
.cns-altrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; max-width:980px; margin:0 auto 8px; }
.cns-alt{ background:#fff; border:1px solid var(--border,rgba(107,33,244,.12)); border-radius:14px; padding:14px 16px; text-decoration:none; display:flex; flex-direction:column; gap:3px; box-shadow:0 6px 18px rgba(22,11,46,.05); }
.cns-alt b{ font-family:var(--font-display,serif); font-size:19px; color:var(--ink,#1a1030); }
.cns-alt span{ font-size:12.5px; color:var(--ink-45,#7B6A9E); }
.cns-alt em{ font-style:normal; font-size:12px; color:var(--rose,var(--crimson)); font-weight:700; }
.cns-tiers{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 14px; }
.cns-tier{ border:1px solid var(--border,rgba(107,33,244,.14)); border-radius:12px; padding:10px 18px; display:flex; flex-direction:column; }
.cns-tier b{ font-size:14px; color:var(--ink,#1a1030); }
.cns-tier span{ font-size:12px; color:var(--ink-45,#7B6A9E); }
.cns-tier-hi{ border:2px solid var(--rose,var(--crimson)); }

/* ==========================================================================
   DESIGN SYSTEM LAYER v1 (v9.87)
   Canonical tokens + the .ds-* kit for all FUTURE pages.
   Purely additive: no legacy selector is modified. See DESIGN-SYSTEM.md.
   ========================================================================== */
:root{
  /* Premium crimson — names the colour already shipped across payments,
     consultant & premium surfaces (var(--crimson)/var(--crimson-dk)) so new CSS never
     hardcodes it again. */
  --crimson:var(--crimson); --crimson-dk:var(--crimson-dk); --crimson-lt:#FDF0F4;
  /* Canonical elevation scale (98 ad-hoc shadows → 4 roles for new work) */
  --shadow-1:0 8px 26px rgba(22,11,46,.06);
  --shadow-2:0 14px 44px rgba(22,11,46,.10);
  --shadow-3:0 24px 70px rgba(22,11,46,.18);
  --shadow-brand:0 10px 26px rgba(198,21,63,.28);
  /* Spacing scale (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  /* Focus ring */
  --focus-ring:0 0 0 2px var(--white,#fff), 0 0 0 4px var(--crimson);
}

/* Global accessible focus (the one behavioural improvement — a11y gap fix).
   Only shows for keyboard navigation, never on mouse click. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:none; box-shadow:var(--focus-ring); border-radius:6px;
}

/* ---- Canonical buttons ---- */
.ds-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; border-radius:var(--radius-pill,100px); border:none; cursor:pointer;
  font-family:var(--font-body,sans-serif); font-weight:600; font-size:15px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; text-decoration:none; }
.ds-btn:hover{ transform:translateY(-1px); }
.ds-btn.ds-primary{ background:linear-gradient(135deg,var(--crimson),var(--crimson-dk));
  color:#fff; box-shadow:var(--shadow-brand); }
.ds-btn.ds-secondary{ background:var(--sunrise,#FF4D2E); color:#fff;
  box-shadow:0 6px 20px rgba(255,77,46,.30); }
.ds-btn.ds-secondary:hover{ background:var(--sunrise-dk,#CC2A0A); }
.ds-btn.ds-ghost{ background:var(--white,#fff); color:var(--ink,#0F0820);
  border:1px solid var(--ink-20,#CDC4E8); }
.ds-btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }

/* ---- Canonical card ---- */
.ds-card{ background:var(--white,#fff); border:1px solid rgba(107,33,244,.12);
  border-radius:var(--radius-lg,18px); padding:var(--space-5,24px); box-shadow:var(--shadow-1); }

/* ---- Canonical input (matches .sf-in language) ---- */
.ds-input{ width:100%; padding:12px 14px; font-size:15px; color:var(--ink,#0F0820);
  border:1px solid rgba(107,33,244,.16); border-radius:var(--radius-md,14px);
  background:var(--white,#fff); font-family:var(--font-body,sans-serif); }
.ds-input::placeholder{ color:var(--ink-45,#7B6A9E); }

/* ---- Canonical badge ---- */
.ds-badge{ display:inline-block; padding:4px 12px; border-radius:var(--radius-pill,100px);
  font-size:12px; font-weight:600; background:var(--crimson-lt); color:var(--crimson); }
.ds-badge.gold{ background:var(--gold-lt,#FEF3C7); color:var(--gold-dk,#B45309); }
.ds-badge.mint{ background:var(--mint-lt,#CCFAEC); color:#0B7A5C; }
.ds-badge.rose{ background:var(--rose-lt,#FFE0F0); color:var(--rose,#F0006B); }

/* ---- Canonical section heading (eyebrow + title) ---- */
.ds-sec{ text-align:center; margin-bottom:var(--space-6,32px); }
.ds-sec small{ display:block; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--crimson); font-weight:700; margin-bottom:6px; }
.ds-sec h2{ font-family:var(--font-display,serif); font-size:clamp(24px,3.6vw,34px);
  color:var(--ink,#0F0820); font-weight:600; margin:0; }

/* ============================================================
   THE GUIDE — Premium Book upgrades (v9.89)
   ============================================================ */
/* Book shelf — real chapters shown as hardcover books */
.guide-shelf{ display:flex; gap:16px; overflow-x:auto; padding:10px 4px 22px; margin-bottom:6px; scroll-snap-type:x proximity; }
.guide-shelf-book{ flex:none; width:172px; scroll-snap-align:start; text-decoration:none; display:flex;
  border-radius:4px 10px 10px 4px; overflow:hidden; box-shadow:0 14px 30px -14px rgba(90,60,20,.4); transition:transform .2s ease, box-shadow .2s ease; }
.guide-shelf-book:hover{ transform:translateY(-6px) rotate(-1deg); box-shadow:0 22px 40px -16px rgba(90,60,20,.5); }
.guide-shelf-spine{ width:10px; background:var(--spine,#7a2e1e); flex:none;
  background-image:linear-gradient(90deg, rgba(0,0,0,.25), transparent 40%, transparent 60%, rgba(255,255,255,.15)); }
.guide-shelf-cover{ flex:1; background:linear-gradient(160deg,#fffdf8,#f5eedb); padding:16px 12px 14px;
  display:flex; flex-direction:column; align-items:center; gap:8px; min-height:224px; border:1px solid #e7d9b8; border-left:none; text-align:center; }
.guide-shelf-title{ font-family:var(--font-display); font-size:20px; line-height:1.15; font-weight:800; }
.guide-shelf-art{ width:76px; height:76px; flex:none; border-radius:50%; overflow:hidden; border:3px solid #c9a24b; box-shadow:0 0 0 2px #fbf6ea; }
.guide-shelf-art img{ width:100%; height:100%; display:block; object-fit:cover; }
.guide-shelf-meta{ font-size:10.5px; color:#9a8a6a; margin-top:auto; }
.guide-shelf-by{ font-size:9.5px; color:#c9a24b; font-weight:700; letter-spacing:.03em; }
[data-theme="dark"] .guide-shelf-cover{ background:linear-gradient(160deg,#241c12,#1b150e); border-color:#3a2e1c; }
[data-theme="dark"] .guide-shelf-meta{ color:#a8987c; }

/* Continue reading banner */
.guide-continue{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#fdf0cf; border:1px solid #e7cf94; border-radius:12px; padding:10px 16px; margin-bottom:18px; font-size:13.5px; color:#5a3a1a; }
[data-theme="dark"] .guide-continue{ background:#2a2010; border-color:#4a3a1a; color:#e8dcc4; }

/* Mobile TOC toggle + slide-in drawer */
.guide-toc-toggle{ display:none; }
.guide-toc-scrim{ display:none; }
@media (max-width:900px){
  .guide-toc-toggle{ display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; border:1px solid var(--border); background:#fff; border-radius:100px; padding:9px 16px; font-size:13.5px; cursor:pointer; }
  .guide-sidebar{ position:fixed; top:0; left:0; height:100vh; width:280px; max-height:none; z-index:400;
    transform:translateX(-105%); transition:transform .25s ease; border-radius:0; box-shadow:20px 0 50px rgba(0,0,0,.2); }
  .guide-sidebar.open{ transform:translateX(0); }
  .guide-toc-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:390; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .guide-toc-scrim.show{ display:block; opacity:1; pointer-events:auto; }
}

/* Font-size control (applies to book body only) */
:root{ --guide-font-step:0; }
.guide-book .book-body{ font-size:calc(clamp(17px,1.5vw,19.5px) + (var(--guide-font-step) * 1.3px)); }

/* Reading mode — sepia, independent of site dark mode */
.guide-shell.guide-sepia .guide-book, .guide-shell.guide-sepia .book-page{ background:#f4ecd8 !important; }
.guide-shell.guide-sepia .book-body{ color:#4a3a20; }
.guide-shell.guide-sepia .guide-sidebar{ background:#efe3c8; }
#guideReadModeBtn.on{ background:#7a2e1e; color:#fff; border-color:#7a2e1e; }

/* Bookmarks panel */
.guide-bm-panel{ position:absolute; right:0; top:100%; margin-top:8px; width:280px; max-width:90vw;
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.16); z-index:70; padding:14px; }
.guide-bm-head{ display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:13.5px; margin-bottom:8px; }
.guide-bm-head button{ border:none; background:none; cursor:pointer; font-size:14px; color:var(--ink-45); }
.guide-bm-list{ display:flex; flex-direction:column; gap:4px; max-height:240px; overflow-y:auto; }
.guide-bm-item{ text-decoration:none; color:#5a3a1a; font-size:13px; padding:7px 8px; border-radius:8px; }
.guide-bm-item:hover{ background:#fdf0cf; }
.guide-bm-empty{ font-size:12.5px; color:var(--ink-45); margin:0; }
[data-theme="dark"] .guide-bm-panel{ background:#1b150e; border-color:#3a2e1c; }
[data-theme="dark"] .guide-bm-item{ color:#e8dcc4; }

.guide-toolbar-actions{ position:relative; }
@media (max-width:560px){ .guide-shelf-book{ width:150px; } .guide-shelf-cover{ min-height:196px; padding:14px 9px 12px; } .guide-shelf-art{ width:64px; height:64px; } .guide-shelf-title{ font-size:17px; } }

/* Dedicated chapter page — its own book cover (v9.91) */
.guide-chapter-cover{ max-width:520px; margin:8px auto 0; text-align:center; padding:34px 24px 26px;
  background:radial-gradient(120% 80% at 50% 0%, #fffdf8 0%, #fbf6ea 58%, #f5eedb 100%);
  border:1px solid #e7d9b8; border-top:6px solid var(--spine,#7a2e1e); border-radius:6px 6px 16px 16px;
  box-shadow:0 18px 50px -24px rgba(90,60,20,.4); }
.guide-chapter-cover-art{ width:120px; height:120px; margin:0 auto 14px; border-radius:50%; overflow:hidden; border:4px solid #c9a24b; box-shadow:0 0 0 3px #fbf6ea, 0 12px 28px -10px rgba(90,60,20,.4); }
.guide-chapter-cover-art img{ width:100%; height:100%; display:block; object-fit:cover; }
.guide-chapter-cover-title{ font-family:var(--font-display); font-size:clamp(32px,5vw,44px); font-weight:800; margin:0 0 10px; line-height:1.1; }
.guide-chapter-cover-meta{ font-size:13px; color:#9a8a6a; font-style:italic; }
.guide-chapter-cover-by{ font-size:11px; color:#c9a24b; font-weight:700; letter-spacing:.06em; margin-top:8px; text-transform:uppercase; }
[data-theme="dark"] .guide-chapter-cover{ background:radial-gradient(120% 80% at 50% 0%,#241c12,#1b150e); border-color:#3a2e1c; }

/* ===== Guide book — headings pink, remove the short underline bar (v9.93) ===== */
.book-title,
.guide-chapter-cover-title,
.book-body h2,
.book-body h3{ color:var(--rose) !important; }
.book-body.article-body h2::after,
.guide-chapter-body h2::after{ display:none !important; content:none !important; }
/* Remove the short underline bar below headings everywhere it's used —
   both Blog articles and The Guide book (color of headings is untouched). */
.article-body h2::after{ display:none !important; content:none !important; }
[data-theme="dark"] .book-title,
[data-theme="dark"] .guide-chapter-cover-title,
[data-theme="dark"] .book-body h2,
[data-theme="dark"] .book-body h3{ color:#ff6fae !important; }

/* ===== Homepage requests (v9.94) ===== */
/* Hero title — word-level colors matching the logo palette:
   "Meaningful" & "Beautiful" = logo's "Name" blue, "Tomorrow" = logo's ".com" orange */
.hero-title.hero-title-grad .ht-blue{
  background:none !important; -webkit-text-fill-color:#23A8E0 !important; color:#23A8E0 !important;
}
.hero-title.hero-title-grad .ht-orange{
  background:none !important; -webkit-text-fill-color:#FF7A1A !important; color:#FF7A1A !important;
}
[data-theme="dark"] .hero-title.hero-title-grad .ht-blue{ -webkit-text-fill-color:#5FC4F5 !important; color:#5FC4F5 !important; }
[data-theme="dark"] .hero-title.hero-title-grad .ht-orange{ -webkit-text-fill-color:#FF8C33 !important; color:#FF8C33 !important; }

/* Hero sub-line keywords — pink + capitalised */
.ht-pink-cap{ color:var(--rose); text-transform:uppercase; font-weight:600; }

/* "One of the Best..." badge above the Name-Finder CTA heading */
.finder-cta-badge{
  display:inline-flex; align-items:center; gap:6px; margin:0 auto 16px; padding:8px 20px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); border-radius:100px;
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em;
  backdrop-filter:blur(6px);
}

/* Big vibrant blue→green "Try Name Finder" button */
.finder-cta-huge{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--font-body); font-weight:800; font-size:clamp(18px,2.2vw,22px);
  color:#fff; padding:20px 48px; border-radius:100px;
  background:linear-gradient(100deg,#0090FF 0%, #00B5AD 55%, #00C48C 100%);
  box-shadow:0 18px 44px -14px rgba(0,144,255,.55), 0 8px 20px -8px rgba(0,196,140,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.finder-cta-huge:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 24px 54px -14px rgba(0,144,255,.65), 0 12px 26px -8px rgba(0,196,140,.5); }
@media (max-width:560px){ .finder-cta-huge{ padding:17px 30px; width:100%; text-align:center; justify-content:center; } }

/* ===== v9.95 fixes ===== */

/* 1. Navbar dropdown column headings — logo "Name" blue (#23A8E0), bold */
.mega-col h4{
  color:#23A8E0 !important;
  -webkit-text-fill-color:#23A8E0 !important;
  font-weight:800 !important;
  font-family:Arial,'Helvetica Neue',sans-serif !important;
}
/* Mobile accordion heads — same treatment */
.m-acc-head{
  color:#23A8E0 !important;
  font-weight:800 !important;
}
#mobile-menu .m-acc-head{
  color:#23A8E0 !important;
  -webkit-text-fill-color:#23A8E0 !important;
  font-weight:800 !important;
}
/* Keep the Premium entry its own purple */
.m-acc-premium .m-acc-head,
#mobile-menu .m-acc-premium .m-acc-head{
  color:#7C3AED !important;
  -webkit-text-fill-color:#7C3AED !important;
}

/* 2. Mythology category pages — change all blue (violet) accents to pink
   • myth-tag <b> labels (Rashi, Nakshatra, Num, Deity …)
   • myth-card-cta "Read the story →" link
   Applied across ALL mythology category pages (Ramayana, Mahabharat, etc.) */
.myth-tag b{
  color:var(--rose) !important;
  -webkit-text-fill-color:var(--rose) !important;
}
.myth-card-cta{
  color:var(--rose) !important;
  -webkit-text-fill-color:var(--rose) !important;
}
.myth-card:hover .myth-card-cta{
  color:var(--rose-dk,#D6005E) !important;
  -webkit-text-fill-color:var(--rose-dk,#D6005E) !important;
}

/* ===== v9.96 fixes ===== */

/* Fix 2: Dropdown h4 headings — pink underline */
.mega-col h4{
  border-bottom:2px solid var(--rose) !important;
  padding-bottom:4px !important;
}
#mobile-menu .m-acc-head{
  border-bottom:2px solid var(--rose) !important;
}

/* Fix 3: finder-cta-huge — reduce size by 40% */
.finder-cta-huge{
  font-size:clamp(13px,1.4vw,16px) !important;
  padding:13px 30px !important;
}
@media(max-width:560px){ .finder-cta-huge{ padding:12px 22px !important; font-size:14px !important; } }

/* Fix 4: ✦ in blog breadcrumb current-item — pink */
.bi-cur{ color:var(--rose); }

/* Fix 5: "View More Loved Names" + "Browse All Names" — grey outlined buttons */
.btn-outline{
  background:#F4F4F6 !important;
  border-color:#C8C8D0 !important;
  color:#5A5A6E !important;
}
.btn-outline:hover{
  background:#E8E8EE !important;
  border-color:#A0A0B0 !important;
  color:#3A3A4E !important;
}

/* ===== v9.99: Hero heading — EXACT poster match (user's reference image) =====
   "A Meaningful" + "For A Beautiful" = deep maroon serif (Cormorant, 600 — not heavy bold)
   "Name" = larger crimson red serif
   "Tomorrow" = orange brush-script (Kaushan Script — closest match to the poster's
   hand-brush style) with a small curved underline.
   NOTE: Pacifico was REMOVED from the font loading so "A Lifetime Of Love"
   renders exactly as it did originally (Segoe Script fallback) — untouched again. */
.hero-poster.hero-title{
  background:none !important;
  -webkit-background-clip:initial !important; background-clip:initial !important;
  -webkit-text-fill-color:#5C1A2B !important; color:#5C1A2B !important;
  font-family:var(--font-display) !important;
  font-weight:600 !important;
}
.hero-poster .ht-maroon{
  background:none !important;
  -webkit-text-fill-color:#5C1A2B !important; color:#5C1A2B !important;
  font-weight:600 !important;
}
.hero-poster .ht-name{
  background:none !important;
  -webkit-text-fill-color:#C31432 !important; color:#C31432 !important;
  font-size:1.28em !important; font-weight:700 !important; line-height:1 !important;
}
.hero-poster .ht-tomorrow{
  font-family:'Kaushan Script',cursive !important;
  font-style:normal !important;
  font-weight:400 !important;
  background:none !important;
  -webkit-background-clip:initial !important; background-clip:initial !important;
  -webkit-text-fill-color:#E8722A !important; color:#E8722A !important;
  display:inline-block;
  position:relative;
  padding-bottom:10px;
}
.hero-poster .ht-tomorrow::after{
  content:'';
  position:absolute;
  bottom:2px; left:5%; width:90%; height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q50 1 100 7 Q150 13 198 7' fill='none' stroke='%23E8722A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  pointer-events:none;
}
[data-theme="dark"] .hero-poster.hero-title,
[data-theme="dark"] .hero-poster .ht-maroon{ -webkit-text-fill-color:#F3D9DF !important; color:#F3D9DF !important; }
[data-theme="dark"] .hero-poster .ht-name{ -webkit-text-fill-color:#FF5A72 !important; color:#FF5A72 !important; }
[data-theme="dark"] .hero-poster .ht-tomorrow{ -webkit-text-fill-color:#FF9A55 !important; color:#FF9A55 !important; }

/* Fix: names-grid mobile — cards cut at right on home page most-loved section */
@media(max-width:600px){
  .names-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    overflow:hidden;
  }
  section .container{ overflow:hidden; }
  .name-card{ min-width:0; word-break:break-word; }
}

/* Guide: shelf card and chapter-cover — blue circle matching logo "Name" color */
.guide-shelf-art{ border-color:#23A8E0 !important; box-shadow:0 0 0 2px #e8f6fd !important; }
.guide-chapter-cover-art{ border-color:#23A8E0 !important; box-shadow:0 0 0 3px #e8f6fd, 0 12px 28px -10px rgba(0,100,180,.3) !important; }

/* ===== v9.100: Guide sidebar + circle + cover subtitle ===== */
/* Item 5: sidebar TOC titles — bigger + pink; "Chapters" heading blue + logo font bold */
.guide-sidebar-title{
  color:#23A8E0 !important;
  font-family:Arial,'Helvetica Neue',sans-serif !important;
  font-weight:800 !important;
}
.guide-toc-text{
  color:var(--rose) !important;
  font-size:16px !important;
  font-weight:600 !important;
}
.guide-toc-item.active .guide-toc-text{ color:var(--rose-dk,#D6005E) !important; }

/* Item 6: baby circle — light pink (screen: shelf + dedicated cover) */
.guide-shelf-art{ border-color:#F9C5D8 !important; box-shadow:0 0 0 2px #fdeef3 !important; }
.guide-chapter-cover-art{ border-color:#F9C5D8 !important; box-shadow:0 0 0 3px #fdeef3, 0 12px 28px -10px rgba(220,120,150,.3) !important; }

/* Item 4: dedicated chapter cover subtitle (under baby image) */
.guide-chapter-cover-subtitle{
  color:var(--ink-70,#5a4a66); font-size:15px; font-style:italic;
  max-width:440px; margin:2px auto 8px; line-height:1.5;
}

/* ===== v10: Email/password auth UI ===== */
.auth-form{ display:flex; flex-direction:column; gap:14px; text-align:left; margin-top:6px; }
.auth-field{ display:flex; flex-direction:column; gap:5px; }
.auth-field span{ font-size:13px; font-weight:600; color:var(--ink-70,#4a4160); }
.auth-field input{ padding:12px 14px; font-size:15px; border:1px solid var(--border-md,rgba(107,33,244,.22));
  border-radius:12px; background:#fff; color:var(--ink,#160b2e); transition:border-color .15s, box-shadow .15s; }
.auth-field input:focus{ outline:none; border-color:var(--rose,#F0006B); box-shadow:0 0 0 3px rgba(240,0,107,.12); }
.auth-submit{ margin-top:4px; padding:13px 20px; font-size:15px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--rose,#F0006B),#C4005A); border:none; border-radius:100px;
  box-shadow:0 10px 26px rgba(240,0,107,.26); transition:transform .15s, box-shadow .15s; }
.auth-submit:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(240,0,107,.32); }
.auth-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.auth-remember{ display:flex; align-items:center; gap:6px; color:var(--ink-70,#4a4160); cursor:pointer; }
.auth-link{ color:var(--rose,#F0006B); text-decoration:none; }
.auth-link:hover{ text-decoration:underline; }
.auth-switch{ margin-top:16px; font-size:14px; color:var(--ink-70,#4a4160); }
.auth-switch a{ color:var(--rose,#F0006B); font-weight:600; text-decoration:none; }
.auth-or{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--ink-45,#8a7ea5); font-size:13px; }
.auth-or::before, .auth-or::after{ content:''; flex:1; height:1px; background:var(--border,rgba(107,33,244,.14)); }
.auth-flash{ padding:11px 14px; border-radius:12px; font-size:13.5px; margin:4px 0 12px; text-align:left; line-height:1.5; }
.auth-flash.ok{ background:#E6F7EE; color:#12833f; border:1px solid #b7e6c9; }
.auth-flash.err{ background:#FDECEC; color:#c0392b; border:1px solid #f3c2c2; }
.pw-meter{ display:block; height:5px; border-radius:4px; background:#eee; overflow:hidden; margin-top:6px; }
.pw-meter i{ display:block; height:100%; width:0; transition:width .2s, background .2s; }
.pw-meter.s1 i{ width:25%; background:#e74c3c; } .pw-meter.s2 i{ width:50%; background:#e8a020; }
.pw-meter.s3 i{ width:75%; background:#3498db; } .pw-meter.s4 i{ width:100%; background:#27ae60; }
[data-theme="dark"] .auth-field input{ background:#221a2e; color:#f0e9f7; border-color:#3a2e4a; }
[data-theme="dark"] .auth-flash.ok{ background:#12321f; color:#7fe0a6; }
[data-theme="dark"] .auth-flash.err{ background:#3a1a1a; color:#f0a0a0; }

/* ===== v10.2: Enterprise dashboard + profile ===== */
.dash-hero{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg,#fff,#fdf0f6); border:1px solid var(--border,rgba(107,33,244,.1)); border-radius:20px; padding:24px 28px; margin-bottom:20px; }
.dash-hero-l{ display:flex; align-items:center; gap:16px; }
.dash-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.1); }
.dash-avatar-ph{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--rose),#C4005A); color:#fff; font-size:26px; font-weight:700; }
.dash-name{ font-family:var(--font-display); font-size:26px; margin:0; color:var(--ink,#160b2e); }
.dash-email{ margin:2px 0 0; color:var(--ink-45,#8a7ea5); font-size:14px; }
.dash-verified{ color:#12833f; font-weight:600; font-size:12px; margin-left:4px; }
.dash-unverified{ color:#e08b12; font-weight:600; font-size:12px; text-decoration:none; }
.dash-completion{ position:relative; width:76px; height:76px; }
.dash-ring{ width:76px; height:76px; transform:rotate(0deg); }
.dash-ring-bg{ fill:none; stroke:#f0e4ee; stroke-width:3; }
.dash-ring-fg{ fill:none; stroke:var(--rose,#F0006B); stroke-width:3; stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.dash-ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dash-ring-label b{ font-size:17px; color:var(--ink,#160b2e); line-height:1; }
.dash-ring-label span{ font-size:9px; color:var(--ink-45,#8a7ea5); text-transform:uppercase; letter-spacing:.5px; }

.dash-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px; }
.dash-stat{ background:#fff; border:1px solid var(--border,rgba(107,33,244,.1)); border-radius:14px; padding:14px 10px; text-align:center; }
.dash-stat-ico{ font-size:20px; }
.dash-stat b{ display:block; font-size:22px; color:var(--ink,#160b2e); margin:4px 0 2px; }
.dash-stat span{ font-size:11px; color:var(--ink-45,#8a7ea5); }

.dash-cols{ display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
.dash-col-main, .dash-col-side{ display:flex; flex-direction:column; gap:16px; }
.dash-card{ background:#fff; border:1px solid var(--border,rgba(107,33,244,.1)); border-radius:16px; padding:18px 20px; }
.dash-card-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.dash-card-h h2{ font-size:16px; margin:0; color:var(--ink,#160b2e); }
.dash-card-h a{ font-size:12.5px; color:var(--rose,#F0006B); text-decoration:none; font-weight:600; }
.dash-empty{ color:var(--ink-45,#8a7ea5); font-size:13.5px; margin:0; }
.dash-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.dash-chip{ background:#fdf0f6; border:1px solid #f5d0e5; color:#C0005A; border-radius:100px; padding:5px 13px; font-size:13px; text-decoration:none; }
.dash-chip:hover{ background:#fce0ee; }
.dash-list{ list-style:none; margin:0; padding:0; }
.dash-list li{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f4eef2; }
.dash-list li:last-child{ border-bottom:none; }
.dash-list a{ color:var(--ink,#160b2e); text-decoration:none; font-size:14px; }
.dash-list span{ font-size:12px; color:var(--ink-45,#8a7ea5); }
.dash-progress{ display:flex; align-items:center; gap:10px; padding:7px 0; text-decoration:none; color:var(--ink,#160b2e); font-size:13.5px; }
.dash-progress > span:first-child{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-progress-bar{ width:80px; height:6px; background:#f0e4ee; border-radius:4px; overflow:hidden; }
.dash-progress-bar i{ display:block; height:100%; background:var(--rose,#F0006B); }
.dash-progress b{ font-size:12px; color:var(--rose,#F0006B); width:34px; text-align:right; }
.dash-timeline{ list-style:none; margin:0; padding:0; }
.dash-timeline li{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; }
.dash-tl-dot{ width:8px; height:8px; border-radius:50%; background:var(--rose,#F0006B); flex:none; }
.dash-tl-act{ flex:1; text-transform:capitalize; color:var(--ink,#160b2e); }
.dash-tl-at{ font-size:11.5px; color:var(--ink-45,#8a7ea5); }
.dash-sub{ text-align:center; }
.dash-sub-badge{ display:inline-block; padding:5px 16px; border-radius:100px; background:#f0e4ee; color:#6a5a80; font-weight:700; font-size:13px; }
.dash-sub-badge.premium{ background:linear-gradient(135deg,#FFD700,#FFA500); color:#7a4a00; }
.dash-credits{ margin:12px 0; }
.dash-credits b{ font-size:32px; color:var(--ink,#160b2e); }
.dash-credits span{ font-size:12px; color:var(--ink-45,#8a7ea5); margin-left:4px; }
.dash-upgrade{ display:inline-block; margin-top:4px; color:var(--rose,#F0006B); font-weight:600; text-decoration:none; font-size:14px; }
.dash-badge{ background:var(--rose,#F0006B); color:#fff; border-radius:100px; padding:1px 8px; font-size:11px; margin-left:4px; }
.dash-notif{ list-style:none; margin:0; padding:0; }
.dash-notif li{ display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #f4eef2; font-size:13px; }
.dash-notif li.unread b{ color:var(--rose,#F0006B); }
.dash-notif li span{ font-size:11.5px; color:var(--ink-45,#8a7ea5); }
.dash-achievements{ display:flex; flex-wrap:wrap; gap:10px; }
.dash-ach{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:22px; width:64px; text-align:center; }
.dash-ach small{ font-size:9.5px; color:var(--ink-45,#8a7ea5); line-height:1.2; }
.dash-referral .dash-refcode{ background:#fdf0f6; border:1px dashed #e090b8; border-radius:12px; padding:12px; text-align:center; font-weight:800; letter-spacing:1px; color:#C0005A; cursor:pointer; }
.dash-referral .dash-refcode span{ display:block; font-size:10px; font-weight:400; letter-spacing:0; color:var(--ink-45,#8a7ea5); margin-top:3px; }
.dash-quick{ display:flex; flex-direction:column; gap:8px; }
.dash-quick a{ color:var(--ink,#160b2e); text-decoration:none; font-size:14px; padding:6px 0; }
.dash-quick a:hover{ color:var(--rose,#F0006B); }
/* profile */
.prof-h{ font-size:17px; margin:0 0 14px; color:var(--ink,#160b2e); }
.prof-sub{ font-size:14px; margin:16px 0 8px; color:var(--ink-70,#4a4160); }
.prof-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.prof-select{ padding:12px 14px; border:1px solid var(--border-md,rgba(107,33,244,.22)); border-radius:12px; font-size:15px; background:#fff; }
.prof-check{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-70,#4a4160); margin:8px 0; cursor:pointer; }
.prof-avatar-form{ display:flex; align-items:center; gap:18px; }
.prof-avatar{ width:80px; height:80px; border-radius:50%; object-fit:cover; }
.prof-avatar-ph{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--rose),#C4005A); color:#fff; font-size:32px; font-weight:700; }
.prof-danger{ border-color:#f3c2c2; background:#fffafa; }
.prof-delete-btn{ background:#fff; border:1px solid #e07070; color:#c0392b; border-radius:100px; padding:10px 22px; cursor:pointer; font-weight:600; }
.prof-delete-btn:hover{ background:#c0392b; color:#fff; }
.notif-full{ list-style:none; margin:0; padding:0; }
.notif-full li{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid #f4eef2; }
.notif-full li:last-child{ border-bottom:none; }
.notif-full li.unread{ background:#fdf7fb; margin:0 -20px; padding:14px 20px; }
.notif-ico{ font-size:20px; }
.notif-full b{ color:var(--ink,#160b2e); font-size:14.5px; }
.notif-full p{ margin:3px 0 0; font-size:13px; color:var(--ink-45,#8a7ea5); }
.notif-at{ margin-left:auto; font-size:11.5px; color:var(--ink-45,#8a7ea5); white-space:nowrap; }
.dl-table{ width:100%; border-collapse:collapse; }
.dl-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-45,#8a7ea5); padding:8px; border-bottom:2px solid #f0e4ee; }
.dl-table td{ padding:11px 8px; border-bottom:1px solid #f4eef2; font-size:14px; }
.dl-kind{ background:#fdf0f6; color:#C0005A; padding:2px 10px; border-radius:100px; font-size:12px; }
@media(max-width:820px){ .dash-cols{ grid-template-columns:1fr; } .dash-stats{ grid-template-columns:repeat(3,1fr); } .prof-row2{ grid-template-columns:1fr; } }
@media(max-width:480px){ .dash-stats{ grid-template-columns:repeat(2,1fr); } }

/* ===== v10.3: Admin panel ===== */
.admin-shell{ display:flex; min-height:70vh; max-width:1200px; margin:0 auto; }
.admin-nav{ width:210px; flex:none; background:#1a1226; border-radius:0 16px 16px 0; padding:20px 0; }
.admin-brand{ color:#fff; font-size:18px; padding:0 20px 16px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:10px; }
.admin-nav nav{ display:flex; flex-direction:column; }
.admin-nav a{ color:#c9bdd8; text-decoration:none; padding:11px 20px; font-size:14px; transition:background .15s; }
.admin-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.admin-nav a.on{ background:linear-gradient(90deg,var(--rose,#F0006B),transparent); color:#fff; font-weight:600; }
.admin-exit{ margin-top:16px; border-top:1px solid rgba(255,255,255,.1); color:#9a8ab0!important; }
.admin-main{ flex:1; padding:24px 28px; min-width:0; }
.admin-title{ font-family:var(--font-display); font-size:28px; margin:0 0 20px; color:var(--ink,#160b2e); }
.admin-count, .admin-total b{ color:var(--rose,#F0006B); }
.admin-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px; }
.admin-kpi{ background:#fff; border:1px solid var(--border,rgba(107,33,244,.1)); border-radius:14px; padding:14px; text-align:center; }
.admin-kpi span{ display:block; font-size:11px; color:var(--ink-45,#8a7ea5); text-transform:uppercase; letter-spacing:.4px; }
.admin-kpi b{ font-size:26px; color:var(--ink,#160b2e); }
.admin-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.admin-card{ background:#fff; border:1px solid var(--border,rgba(107,33,244,.1)); border-radius:16px; padding:18px 20px; margin-bottom:16px; }
.admin-card h2{ font-size:15px; margin:0 0 14px; color:var(--ink,#160b2e); }
.admin-bars{ display:flex; align-items:flex-end; gap:10px; height:120px; }
.admin-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.admin-bar-fill{ width:70%; background:linear-gradient(180deg,var(--rose,#F0006B),#C4005A); border-radius:6px 6px 0 0; min-height:3px; transition:height .4s; }
.admin-bar small{ font-size:11px; color:var(--ink,#160b2e); margin-top:4px; }
.admin-bar em{ font-size:10px; color:var(--ink-45,#8a7ea5); font-style:normal; }
.admin-stat-list{ list-style:none; margin:0; padding:0; }
.admin-stat-list li{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #f4eef2; font-size:14px; }
.admin-stat-list li:last-child{ border-bottom:none; }
.admin-stat-list li span{ color:var(--ink-70,#4a4160); word-break:break-all; }
.admin-stat-list li b{ color:var(--ink,#160b2e); }
.admin-rev b{ color:#12833f; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.admin-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-45,#8a7ea5); padding:8px; border-bottom:2px solid #f0e4ee; }
.admin-table td{ padding:10px 8px; border-bottom:1px solid #f4eef2; }
.admin-role{ padding:2px 10px; border-radius:100px; font-size:11px; }
.admin-role-admin{ background:#fdf0f6; color:#C0005A; } .admin-role-user{ background:#eef; color:#556; }
.admin-btn{ background:#f4f4f6; border:1px solid #ddd; border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; }
.admin-btn:hover{ background:#e8e8ee; }
.admin-btn-danger{ color:#c0392b; border-color:#f0c0c0; }
.admin-actions{ white-space:nowrap; }
@media(max-width:820px){ .admin-shell{ flex-direction:column; } .admin-nav{ width:100%; border-radius:0; display:flex; overflow-x:auto; padding:8px; }
  .admin-nav nav{ flex-direction:row; } .admin-brand{ display:none; } .admin-kpis{ grid-template-columns:repeat(3,1fr); } .admin-row2{ grid-template-columns:1fr; } }

/* ===== Error / offline / maintenance pages ===== */
.err-page{ text-align:center; padding:70px 20px; max-width:560px; margin:0 auto; }
.err-code{ font-family:var(--font-display); font-size:88px; line-height:1; color:var(--rose,#F0006B); margin:0; }
.err-title{ font-size:24px; margin:10px 0 8px; color:var(--ink,#160b2e); }
.err-msg{ color:var(--ink-45,#8a7ea5); font-size:15px; margin-bottom:24px; line-height:1.6; }
.err-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ════════════════════════════════════════════════════════════════
   v10.5 — UI/UX improvement pass (appended last → wins cascade)
   1) Hero heading word-scale ("Name" is the visual focus)
   2) New two-line + heart divider under "Tomorrow" (replaces underline)
   3) Hero subtitle — sentence case, slightly smaller
   4) Hero section — soft light-pink background (light + dark mode)
   5) AI badge — larger, centered
   6) Mythology name-page subtitle — dark grey, always legible
   ════════════════════════════════════════════════════════════════ */

/* --- 1. Hero heading word sizing --------------------------------- */
.hero-poster .ht-maroon{
  font-size:0.5em !important;              /* "A Meaningful" / "For A Beautiful" → 50% */
}
.hero-poster .ht-name{
  font-size:2.56em !important;              /* "Name" → 200% of its current (1.28em) size */
  line-height:0.9 !important;
}
.hero-poster .ht-tomorrow{
  font-size:1.2em !important;               /* "Tomorrow" → +20% */
  padding-bottom:0 !important;              /* remove space reserved for old underline */
}
.hero-poster .ht-tomorrow::after{
  display:none !important; content:none !important;   /* remove old brush-stroke underline */
}
@media(max-width:980px){
  .hero-poster .ht-name{ line-height:1 !important; }
}

/* --- 2. New divider under "Tomorrow": line — heart — line --------- */
.hero-tomorrow-divider{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:230px;
  width:100%;
  margin:12px auto 0 !important;
}
.hero-tomorrow-divider .htd-line{
  flex:1 1 auto;
  height:2px;
  min-width:20px;
  background:linear-gradient(90deg, transparent, var(--rose,#EE6FA6) 50%, transparent);
  border-radius:2px;
}
.hero-tomorrow-divider .htd-heart{
  flex:0 0 auto;
  display:block;
}
[data-theme="dark"] .hero-tomorrow-divider .htd-line{
  background:linear-gradient(90deg, transparent, #FF8FC0 50%, transparent);
}
@media(max-width:560px){
  .hero-tomorrow-divider{ max-width:180px; gap:8px; margin-top:10px !important; }
  .hero-tomorrow-divider .htd-heart svg{ width:14px; height:14px; }
}

/* --- 3. Hero subtitle — sentence case + slightly smaller ---------- */
.hero-sub.hero-sub-refined{
  font-size:16px !important;
  line-height:1.7 !important;
  letter-spacing:.005em;
}
@media(max-width:980px){
  .hero-sub.hero-sub-refined{ font-size:15px !important; }
}
@media(max-width:560px){
  .hero-sub.hero-sub-refined{ font-size:13.5px !important; line-height:1.6 !important; }
}

/* --- 4. Hero background — soft light-pink gradient ----------------- */
.hero{
  background:
    radial-gradient(circle at 82% 22%, rgba(255,182,214,.38) 0%, transparent 50%),
    radial-gradient(circle at 8% 82%, rgba(255,205,226,.42) 0%, transparent 55%),
    linear-gradient(135deg,#FFF6FA 0%,#FFE9F2 50%,#FFDDEC 100%) !important;
}
[data-theme="dark"] .hero{
  background:
    radial-gradient(circle at 82% 22%, rgba(255,143,192,.16) 0%, transparent 50%),
    radial-gradient(circle at 8% 82%, rgba(255,143,192,.14) 0%, transparent 55%),
    linear-gradient(160deg,#FFFCF8 0%,#FFE8F1 50%,#FFE0F0 100%) !important;
}

/* --- 5. AI badge — larger, still centered -------------------------- */
.finder-cta-badge{
  font-size:16px !important;
  padding:9px 24px !important;
  display:inline-flex !important;
  margin-left:auto !important; margin-right:auto !important;
}
.sf-hero-badge{
  font-size:15px !important;
  padding:8px 20px !important;
}

/* --- 6. Mythology name-page subtitle — dark grey, always legible --- */
/* The subtitle sits on a colourful gradient banner whose hue varies per
   category, so a plain dark-grey color alone isn't reliably readable on
   every gradient. A soft light pill behind the text guarantees WCAG-safe
   contrast in both Light and Dark mode without touching the title. */
.myth-detail-banner .sub{
  display:inline-block;
  color:#555555 !important;
  opacity:1 !important;
  background:rgba(255,255,255,.92);
  padding:4px 12px;
  border-radius:8px;
  margin-top:8px;
}
.myth-detail-banner .sub:first-of-type{ margin-top:10px; }
/* Belt-and-braces: mythology pages have their own independent dark-mode
   toggle (data-myth-theme on #mythScope) in addition to the sitewide
   data-theme toggle — cover both so the subtitle never disappears. */
[data-theme="dark"] .myth-detail-banner .sub,
.myth-scope[data-myth-theme="dark"] .myth-detail-banner .sub{
  color:#3A3A3A !important;
  background:rgba(255,255,255,.88) !important;
}


/* ════════════════════════════════════════════════════════════════
   v10.7 — MYTHOLOGY DARK MODE: single source of truth (ROOT-CAUSE FIX)
   ----------------------------------------------------------------
   Previously the mythology section ran its OWN theme (data-myth-theme on
   #mythScope) that could fall out of sync with the sitewide theme
   (html[data-theme]) — producing dark-on-dark, unreadable pages.
   The two systems are now collapsed into ONE: the mythology design tokens
   are derived directly from the sitewide theme. No per-page patches.

   Colour hierarchy on the dark card surface (#1C1530) — all WCAG AA+:
     --m-ink   #F3EEFE  headings / body        (~15:1)
     body copy #E7E2F5                          (~13:1)
     --m-mut   #C3BBDD  metadata / muted        (~8.5:1)
     links     #C9A9FF  / accents #FF8FC0       (AA on dark)
   ════════════════════════════════════════════════════════════════ */

/* 1) TOKENS follow the sitewide theme (works whether or not the local
      #mythTheme override exists; local dark also supported for back-compat). */
html[data-theme="dark"] .myth-scope,
.myth-scope[data-myth-theme="dark"]{
  --m-bg:#0F0A1E;
  --m-surface:#1C1530;
  --m-ink:#F3EEFE;
  --m-mut:#C3BBDD;
  --m-border:#332A4D;
  --m-soft:#241A3A;
}
/* If a visitor explicitly forces the mythology scope LIGHT via the local
   toggle, honour it even on a dark site (keeps user choice). */
html[data-theme="dark"] .myth-scope[data-myth-theme="light"]{
  --m-bg:var(--cream); --m-surface:#fff; --m-ink:var(--ink);
  --m-mut:#5a5470; --m-border:var(--border); --m-soft:#faf7ff;
}

/* 2) Paint the scope so a dark site never shows a light mythology page,
      even for the split second before any script runs (no flash). */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]){
  background:var(--m-bg);
  color:var(--m-ink);
}

/* 3) TYPOGRAPHY HIERARCHY — explicit, token-driven, per component.
      Scoped to the dark mythology scope only; light mode is untouched. */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]){
  /* Headings */
}
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-block h3,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-section-head h2,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-card-name,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-fact .v,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-faq summary{
  color:var(--m-ink);
}
/* Body / description text — slightly softer than pure heading white */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-block p,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-block li,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-card-mean,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-block .story-quote{
  color:#E7E2F5;
}
/* Muted / metadata / labels / counts */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-fact .k,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-card-sub,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-count,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-faq p,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-eyebrow{
  color:var(--m-mut);
}
/* Inline strong labels inside paragraphs (e.g. "Meaning:") stay bright */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-block p strong,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-block p b{
  color:#FFFFFF;
}

/* 4) SURFACES — cards, facts, blocks, inputs, buttons, chips */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-block,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-fact,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-card,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-search,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-filters select,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-btn,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-rel a,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-rel span,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-theme-toggle{
  background:var(--m-surface);
  border-color:var(--m-border);
  color:var(--m-ink);
}
/* Soft-tinted surfaces (tags, quote background) */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-tag{
  background:var(--m-soft);
  border-color:var(--m-border);
  color:var(--m-mut);
}
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-block .story-quote{
  background:var(--m-soft);
}

/* 5) LINKS & ACCENTS — identifiable, AA-contrast on dark */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-section-head a,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-card-cta,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-rel a,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .breadcrumb a{
  color:#C9A9FF;
}
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-rel a:hover,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .breadcrumb a:hover{
  color:#E0CCFF;
}
/* Pink tag <b> labels + CTA already-pink — keep a lighter pink for contrast */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-tag b{
  color:#FF9EC7;
}
/* Breadcrumb current + separators */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .breadcrumb,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .breadcrumb span,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .breadcrumb-sep{
  color:var(--m-mut);
}
/* FAQ toggle "+/–" glyph */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-faq summary::after{
  color:#C9A9FF;
}
/* Saved-favourite state stays legible */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-btn.fav.saved{
  background:#3A1230; border-color:#FF6FA3; color:#FFC0DA;
}

/* 6) BANNER — the coloured detail banner keeps white title; the subtitle pill
      (v10.5) stays dark-grey-on-light and is readable on the banner in both
      modes. Ensure the title itself is bright white in dark mode. */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-detail-banner .ttl{
  color:#FFFFFF;
}

/* 7) Category cards on the mythology index keep their bright headings; ensure
      their body copy is readable when the site is dark (cards are light). */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) .myth-cat-card p{
  color:#5a4a3a;
}

/* 8) Focus-visible rings for keyboard users (accessibility) */
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) a:focus-visible,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) button:focus-visible,
html[data-theme="dark"] .myth-scope:not([data-myth-theme="light"]) summary:focus-visible{
  outline:2px solid #C9A9FF;
  outline-offset:2px;
}

/* ════════════════════════════════════════════════════════════════
   v10.8 — HERO heading pixel-match to reference images
   (appended last → wins cascade). Left-aligned poster on desktop,
   centred on mobile, matching the current hero layout behaviour.
   Colours sampled from the supplied reference PNGs:
     brown rows   #3A1512   (dark warm brown)
     "Name"       red gradient  #E4203F → #B21230 (crimson red)
     "Tomorrow"   #E0722A   (orange, Kaushan Script)
     subtitle accent (meanings/origins/cultural) rose #D14E6A
     subtitle base text  #40302C
   The hero is deliberately theme-isolated: Dark Mode must NOT alter it.
   ════════════════════════════════════════════════════════════════ */

/* ---- Layout: four stacked rows, left aligned (matches desktop hero) ---- */
.hero-poster-rows{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:0 !important;
  line-height:1.02 !important;
  margin:0 0 6px !important;
  padding:0 !important;
}
.hero-poster-rows .hp-row{ display:block; width:auto; }

/* Row 1 & 3 — "A Meaningful" / "For A Beautiful" — dark brown serif */
.hero-poster-rows .hp-row-grey .ht-brown{
  font-family:var(--font-display) !important;
  font-size:30px !important;
  font-weight:600 !important;
  color:#3A1512 !important;
  -webkit-text-fill-color:#3A1512 !important;
  background:none !important;
  letter-spacing:.1px !important;
  line-height:1.16 !important;
  display:inline-block;
}

/* Row 2 — "Name" — large red-gradient serif, the focal word */
.hero-poster-rows .hp-row-name{ margin:-2px 0 -2px !important; }
.hero-poster-rows .hp-row-name .ht-name{
  font-family:var(--font-display) !important;
  font-size:88px !important;
  font-weight:700 !important;
  line-height:.98 !important;
  letter-spacing:-.5px !important;
  display:inline-block;
  background:linear-gradient(180deg,#E4203F 0%,#C71834 55%,#B21230 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* Row 4 — "Tomorrow" — orange script, with the heart flourish at top-right */
.hero-poster-rows .hp-row-tomorrow{
  display:inline-flex !important;
  align-items:flex-start;
  justify-content:flex-start;
  gap:2px;
  margin-top:2px !important;
}
.hero-poster-rows .hp-row-tomorrow .ht-tomorrow{
  font-family:'Kaushan Script',cursive !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-size:52px !important;
  line-height:1.04 !important;
  color:#E0722A !important;
  -webkit-text-fill-color:#E0722A !important;
  background:none !important;
  padding:0 !important;
  display:inline-block;
}
.hero-poster-rows .hp-row-tomorrow .ht-tomorrow::after{
  display:none !important; content:none !important;   /* no underline in reference */
}
/* Heart sits high, at the end of the script word (top-right flourish) */
.ht-tomorrow-heart{
  flex:0 0 auto;
  align-self:flex-start;
  margin-top:6px;
  margin-left:-2px;
}

/* ---- Divider under the heading: line — small brown heart — line ---- */
.hero-heart-divider{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:200px;
  max-width:60%;
  margin:12px 0 14px !important;
}
.hero-heart-divider .hhd-line{
  flex:1 1 auto;
  height:1.5px;
  background:#5C2A22;
  opacity:.55;
  border-radius:2px;
}
.hero-heart-divider .hhd-heart{ flex:0 0 auto; display:block; }

/* ---- Subtitle: base brown text + rose accent words ---- */
.hero-sub.hero-sub-refined{
  font-size:16px !important;
  line-height:1.6 !important;
  color:#40302C !important;
  font-weight:400 !important;
  text-align:left !important;
  max-width:520px;
  margin:0 0 22px !important;
}
.hero-sub.hero-sub-refined .ht-accent{
  color:#D14E6A !important;
  -webkit-text-fill-color:#D14E6A !important;
  font-weight:600 !important;
}

/* ---- Responsive scaling (proportional; hierarchy preserved) ---- */
@media(max-width:1200px){
  .hero-poster-rows .hp-row-name .ht-name{ font-size:78px !important; }
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:27px !important; }
  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:47px !important; }
}
@media(max-width:980px){
  /* hero centres on tablet/mobile in the existing layout — follow it */
  .hero-poster-rows{ align-items:center !important; text-align:center !important; margin-left:auto; margin-right:auto; }
  .hero-poster-rows .hp-row-tomorrow{ justify-content:center !important; }
  .hero-heart-divider{ justify-content:center !important; margin-left:auto !important; margin-right:auto !important; max-width:220px; }
  .hero-sub.hero-sub-refined{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:72px !important; }
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:25px !important; }
  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:44px !important; }
}
@media(max-width:560px){
  .hero-poster-rows .hp-row-name .ht-name{ font-size:56px !important; }
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:21px !important; }
  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:38px !important; }
  .ht-tomorrow-heart{ width:24px; height:24px; margin-top:5px; }
  .hero-sub.hero-sub-refined{ font-size:14.5px !important; }
}

/* ---- THEME ISOLATION: Dark Mode must NOT alter the hero ---- */
[data-theme="dark"] .hero-poster-rows .hp-row-grey .ht-brown{
  color:#3A1512 !important; -webkit-text-fill-color:#3A1512 !important; background:none !important;
}
[data-theme="dark"] .hero-poster-rows .hp-row-name .ht-name{
  background:linear-gradient(180deg,#E4203F 0%,#C71834 55%,#B21230 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
[data-theme="dark"] .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{
  color:#E0722A !important; -webkit-text-fill-color:#E0722A !important; background:none !important;
}
[data-theme="dark"] .hero-sub.hero-sub-refined{ color:#40302C !important; }
[data-theme="dark"] .hero-sub.hero-sub-refined .ht-accent{
  color:#D14E6A !important; -webkit-text-fill-color:#D14E6A !important;
}
[data-theme="dark"] .hero-heart-divider .hhd-line{ background:#5C2A22 !important; opacity:.55 !important; }

/* ---- Language switch must not restyle the hero (translate fallback) ---- */
.translated-ltr .hero-poster-rows .hp-row-name .ht-name,
.translated-rtl .hero-poster-rows .hp-row-name .ht-name{
  background:linear-gradient(180deg,#E4203F 0%,#C71834 55%,#B21230 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.translated-ltr .hero-poster-rows .hp-row-grey .ht-brown,
.translated-rtl .hero-poster-rows .hp-row-grey .ht-brown{ color:#3A1512 !important; -webkit-text-fill-color:#3A1512 !important; }
.translated-ltr .hero-poster-rows .hp-row-tomorrow .ht-tomorrow,
.translated-rtl .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ color:#E0722A !important; -webkit-text-fill-color:#E0722A !important; }
.translated-ltr .hero-sub.hero-sub-refined .ht-accent,
.translated-rtl .hero-sub.hero-sub-refined .ht-accent{ color:#D14E6A !important; -webkit-text-fill-color:#D14E6A !important; }


/* ════════════════════════════════════════════════════════════════
   v10.9 — Floating widgets: AI Assistant (bottom-left) + WhatsApp (bottom-right)
   Safe-area aware, touch-friendly, theme-independent, no layout shift.
   Reuses brand tokens: --sunrise (#FF4D2E) for AI, WhatsApp green #25D366.
   ════════════════════════════════════════════════════════════════ */

:root{
  --fw-gap: 16px;                       /* margin from screen edges */
  --fw-size: 45px;                      /* launcher diameter (>=56px touch) */
  --fw-safe-b: env(safe-area-inset-bottom, 0px);
  --fw-safe-l: env(safe-area-inset-left, 0px);
  --fw-safe-r: env(safe-area-inset-right, 0px);
  --fw-wa-green: #25D366;
  --fw-wa-green-dk: #1EBE5A;
}

/* Shared launcher base */
.fw-btn{
  position:fixed;
  z-index:2147483000;                   /* above everything, incl. modals */
  width:var(--fw-size); height:var(--fw-size);
  min-width:44px; min-height:44px;
  border-radius:50%;
  border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.14);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.fw-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.22); }

/* Gentle idle float */
@keyframes fw-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (prefers-reduced-motion:no-preference){
  .fw-ai-btn{ animation:fw-float 3.4s ease-in-out infinite; }
  .fw-wa-btn{ animation:fw-float 3.4s ease-in-out .4s infinite; }
}

/* ---------- AI Assistant launcher — BOTTOM LEFT ---------- */
.fw-ai-btn{
  left:calc(var(--fw-gap) + var(--fw-safe-l));
  bottom:calc(var(--fw-gap) + var(--fw-safe-b));
  background:linear-gradient(135deg,#FF6A3D 0%, var(--sunrise,#FF4D2E) 100%);
  box-shadow:0 10px 28px rgba(255,77,46,.42), 0 4px 10px rgba(255,77,46,.28);
}
.fw-ai-btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 16px 36px rgba(255,77,46,.5); }
.fw-ai-btn:active{ transform:scale(.96); }
.fw-ai-btn .fw-ai-close{ display:none; }
.fw-ai-btn.active{ animation:none; }
.fw-ai-btn.active .fw-ai-ico{ display:none; }
.fw-ai-btn.active .fw-ai-close{ display:flex; }
.fw-ai-ico, .fw-ai-close{ display:flex; align-items:center; justify-content:center; }

/* ---------- WhatsApp launcher — BOTTOM RIGHT ---------- */
.fw-wa-btn{
  right:calc(var(--fw-gap) + var(--fw-safe-r));
  bottom:calc(var(--fw-gap) + var(--fw-safe-b));
  background:var(--fw-wa-green);
  box-shadow:0 10px 28px rgba(37,211,102,.42), 0 4px 10px rgba(37,211,102,.26);
  overflow:hidden;
}
.fw-wa-btn:hover{ transform:translateY(-3px) scale(1.05); background:var(--fw-wa-green-dk); box-shadow:0 16px 36px rgba(37,211,102,.5); }
.fw-wa-btn:active{ transform:scale(.96); }
.fw-wa-ico{ position:relative; z-index:1; }
/* Ripple on click */
.fw-wa-ripple{ position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); opacity:0; pointer-events:none; }
.fw-wa-btn:active .fw-wa-ripple{ animation:fw-ripple .5s ease-out; }
@keyframes fw-ripple{ 0%{ transform:scale(0); opacity:.55; } 100%{ transform:scale(2.4); opacity:0; } }

/* Keep the existing Back-to-Top clear of the WhatsApp button (stack above it) */
.back-to-top{ right:calc(var(--fw-gap) + var(--fw-safe-r)) !important;
  bottom:calc(var(--fw-gap) + var(--fw-safe-b) + var(--fw-size) + 12px) !important; z-index:2147482000 !important; }
@media (max-width:560px){
  .back-to-top{ right:calc(var(--fw-gap) + var(--fw-safe-r)) !important;
    bottom:calc(var(--fw-gap) + var(--fw-safe-b) + var(--fw-size) + 10px) !important; }
}

/* ---------- AI chat panel ---------- */
.fw-ai-panel{
  position:fixed;
  z-index:2147483001;
  left:calc(var(--fw-gap) + var(--fw-safe-l));
  bottom:calc(var(--fw-gap) + var(--fw-safe-b) + var(--fw-size) + 12px);
  width:370px; max-width:calc(100vw - 2*var(--fw-gap));
  max-height:75vh; height:520px;
  display:flex; flex-direction:column;
  background:#fff; color:var(--ink,#160b2e);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.28), 0 8px 20px rgba(0,0,0,.16);
  transform-origin:bottom left;
  opacity:0; transform:translateY(16px) scale(.96);
  transition:opacity .2s ease, transform .22s cubic-bezier(.34,1.4,.64,1);
}
.fw-ai-panel.open{ opacity:1; transform:translateY(0) scale(1); }
.fw-ai-panel[hidden]{ display:none; }

.fw-ai-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; color:#fff;
  background:linear-gradient(135deg,#FF6A3D 0%, var(--sunrise,#FF4D2E) 100%);
}
.fw-ai-head-id{ display:flex; align-items:center; gap:10px; }
.fw-ai-head-avatar{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }
.fw-ai-title{ font-family:var(--font-body,inherit); font-size:15px; font-weight:700; margin:0; line-height:1.1; color:#fff; }
.fw-ai-sub{ font-size:12px; margin:2px 0 0; opacity:.9; color:#fff; }
.fw-ai-panel-close{ background:rgba(255,255,255,.16); border:none; color:#fff; cursor:pointer;
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .18s; }
.fw-ai-panel-close:hover{ background:rgba(255,255,255,.3); }
.fw-ai-panel-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.fw-ai-body{ flex:1 1 auto; overflow-y:auto; padding:16px; background:#FAF8FC;
  display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch; }
.fw-ai-msg{ display:flex; }
.fw-ai-user{ justify-content:flex-end; }
.fw-ai-bubble{ max-width:82%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.5; word-wrap:break-word; white-space:pre-wrap; }
.fw-ai-bot .fw-ai-bubble{ background:#fff; border:1px solid rgba(0,0,0,.07); color:var(--ink,#160b2e); border-bottom-left-radius:4px; }
.fw-ai-user .fw-ai-bubble{ background:linear-gradient(135deg,#FF6A3D,var(--sunrise,#FF4D2E)); color:#fff; border-bottom-right-radius:4px; }
/* typing dots */
.fw-ai-typing .fw-ai-bubble{ display:inline-flex; gap:4px; align-items:center; }
.fw-dot{ width:7px; height:7px; border-radius:50%; background:#C4BCD4; animation:fw-blink 1.2s infinite ease-in-out; }
.fw-dot:nth-child(2){ animation-delay:.2s; } .fw-dot:nth-child(3){ animation-delay:.4s; }
@keyframes fw-blink{ 0%,60%,100%{ opacity:.3; } 30%{ opacity:1; } }

.fw-ai-input{ display:flex; gap:8px; padding:12px; border-top:1px solid rgba(0,0,0,.08); background:#fff; }
.fw-ai-text{ flex:1 1 auto; min-width:0; border:1.5px solid rgba(0,0,0,.14); border-radius:100px;
  padding:11px 16px; font-size:14px; color:var(--ink,#160b2e); background:#fff; }
.fw-ai-text:focus{ outline:none; border-color:var(--sunrise,#FF4D2E); box-shadow:0 0 0 3px rgba(255,77,46,.14); }
.fw-ai-send{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,#FF6A3D,var(--sunrise,#FF4D2E)); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:transform .15s, box-shadow .15s; }
.fw-ai-send:hover{ transform:scale(1.06); box-shadow:0 6px 16px rgba(255,77,46,.4); }
.fw-ai-send:focus-visible{ outline:2px solid var(--sunrise,#FF4D2E); outline-offset:2px; }

.fw-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Dark mode: chat panel adapts; launchers/brand stay constant ---------- */
[data-theme="dark"] .fw-ai-panel{ background:#1C1530; color:#F3EEFE; border-color:#332A4D; }
[data-theme="dark"] .fw-ai-body{ background:#150F26; }
[data-theme="dark"] .fw-ai-bot .fw-ai-bubble{ background:#241A3A; border-color:#332A4D; color:#F3EEFE; }
[data-theme="dark"] .fw-ai-input{ background:#1C1530; border-top-color:#332A4D; }
[data-theme="dark"] .fw-ai-text{ background:#241A3A; border-color:#332A4D; color:#F3EEFE; }

/* ---------- Mobile: full-width sheet, safe areas, no clipping ---------- */
@media (max-width:560px){
  :root{ --fw-size:44px; }
  .fw-ai-panel{
    left:50%; right:auto;
    transform-origin:bottom center;
    transform:translateX(-50%) translateY(16px) scale(.98);
    width:94vw; max-width:94vw;
    height:78vh; max-height:80vh;
    bottom:calc(var(--fw-gap) + var(--fw-safe-b) + var(--fw-size) + 10px);
    border-radius:20px 20px 16px 16px;   /* rounded top corners emphasised */
  }
  .fw-ai-panel.open{ transform:translateX(-50%) translateY(0) scale(1); }
}
@media (max-width:400px){
  .fw-ai-panel{ width:96vw; max-width:96vw; height:80vh; }
}

/* Landscape / very short screens: keep panel inside viewport */
@media (max-height:520px){
  .fw-ai-panel{ height:auto; max-height:calc(100vh - 2*var(--fw-gap) - var(--fw-size) - 16px); }
}

/* Print: hide floating widgets */
@media print{ .fw-btn, .fw-ai-panel{ display:none !important; } }

/* ---------- v10.10 — Totsy voice + multilingual controls ---------- */
.fw-ai-head-actions{ display:flex; align-items:center; gap:6px; }
.fw-ai-speak-toggle{ background:rgba(255,255,255,.16); border:none; color:#fff; cursor:pointer;
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; transition:background .18s; }
.fw-ai-speak-toggle:hover{ background:rgba(255,255,255,.3); }
.fw-ai-speak-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.fw-ai-speak-toggle .ic-off{ display:block; }
.fw-ai-speak-toggle .ic-on{ display:none; }
.fw-ai-speak-toggle.on .ic-off{ display:none; }
.fw-ai-speak-toggle.on .ic-on{ display:block; }
.fw-ai-speak-toggle.on{ background:rgba(255,255,255,.34); }

/* Mic button inside the input row */
.fw-ai-mic{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(0,0,0,.14);
  background:#fff; color:var(--sunrise,#FF4D2E); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .15s, box-shadow .15s, background .15s, color .15s; }
.fw-ai-mic:hover{ transform:scale(1.05); box-shadow:0 4px 12px rgba(255,77,46,.25); }
.fw-ai-mic:focus-visible{ outline:2px solid var(--sunrise,#FF4D2E); outline-offset:2px; }
.fw-ai-mic.listening{ background:var(--sunrise,#FF4D2E); color:#fff; border-color:transparent; animation:fw-mic-pulse 1.2s ease-in-out infinite; }
@keyframes fw-mic-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,77,46,.5); } 50%{ box-shadow:0 0 0 8px rgba(255,77,46,0); } }

[data-theme="dark"] .fw-ai-mic{ background:#241A3A; border-color:#332A4D; color:#FF8A66; }
[data-theme="dark"] .fw-ai-mic.listening{ background:var(--sunrise,#FF4D2E); color:#fff; }

@media (prefers-reduced-motion:reduce){ .fw-ai-mic.listening{ animation:none; } }



/* ════════════════════════════════════════════════════════════════
   v10.11 — Hero heading: enlarge + recolour per request
   - "A Meaningful" & "For A Beautiful": big (like "Name") + PINK
   - "Name": kept big, PINK (flat, matches the other rows)
   - "Tomorrow": ORANGE, same big size as the words above
   - Heart: at the top-right "w" corner of Tomorrow, PINK outline,
     nudged ~half inch (48px) to the right
   (appended last → wins cascade)
   ════════════════════════════════════════════════════════════════ */

/* Rows 1 & 3 — now large + pink (match "Name") */
.hero-poster-rows .hp-row-grey .ht-brown{
  font-size:88px !important;
  font-weight:700 !important;
  line-height:.98 !important;
  letter-spacing:-.5px !important;
  color:#F0006B !important;
  -webkit-text-fill-color:#F0006B !important;
  background:none !important;
}

/* Row 2 — "Name" flat pink (consistent with rows 1 & 3) */
.hero-poster-rows .hp-row-name .ht-name{
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:#F0006B !important;
  -webkit-text-fill-color:#F0006B !important;
}

/* Row 4 — "Tomorrow" orange, same big size as the rows above */
.hero-poster-rows .hp-row-tomorrow{ align-items:flex-start !important; overflow:visible !important; }
.hero-poster-rows .hp-row-tomorrow .ht-tomorrow{
  font-size:88px !important;
  line-height:1.02 !important;
  color:#E0722A !important;
  -webkit-text-fill-color:#E0722A !important;
}

/* Heart — top-right "w" corner, pink outline, pushed ~half inch right */
.ht-tomorrow-heart{
  width:40px !important; height:40px !important;
  align-self:flex-start !important;
  margin-top:10px !important;         /* sits slightly ABOVE the word top */
  margin-left:48px !important;        /* ~half inch to the right of the word */
  stroke:#F0006B !important;
}
.ht-tomorrow-heart path{ stroke:#F0006B !important; }

/* ---- Responsive: keep the big pink poster balanced on smaller screens ---- */
@media(max-width:1200px){
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:76px !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:76px !important; }
  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:76px !important; }
  .ht-tomorrow-heart{ width:36px !important; height:36px !important; margin-left:42px !important; }
}
@media(max-width:980px){
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:66px !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:66px !important; }
  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:66px !important; }
  .ht-tomorrow-heart{ width:32px !important; height:32px !important; margin-left:36px !important; margin-top:8px !important; }
}
@media(max-width:640px){
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:48px !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:48px !important; }
  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:48px !important; }
  .ht-tomorrow-heart{ width:26px !important; height:26px !important; margin-left:26px !important; margin-top:6px !important; }
}
@media(max-width:420px){
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:40px !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:40px !important; }
  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:40px !important; }
  .ht-tomorrow-heart{ width:22px !important; height:22px !important; margin-left:20px !important; }
}

/* Dark mode: keep the same colours (hero is theme-isolated) */
[data-theme="dark"] .hero-poster-rows .hp-row-grey .ht-brown{ color:#F0006B !important; -webkit-text-fill-color:#F0006B !important; background:none !important; }
[data-theme="dark"] .hero-poster-rows .hp-row-name .ht-name{ color:#F0006B !important; -webkit-text-fill-color:#F0006B !important; background:none !important; }
[data-theme="dark"] .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ color:#E0722A !important; -webkit-text-fill-color:#E0722A !important; }
[data-theme="dark"] .ht-tomorrow-heart path{ stroke:#F0006B !important; }

/* ════════════════════════════════════════════════════════════════
   v10.12 — Hero fine-tuning per request
   1) "A Meaningful"/"For A Beautiful" −25% (88→66); "Name" +30% (88→114)
   2) "Tomorrow" = logo ".com" orange (#FF7A1A)
   3) Red underline under Tomorrow: starts at "T", extends slightly past "w",
      heart in the middle — line + heart RED
   4) Trust-bar headings 40% greyer
   (appended last → wins cascade)
   ════════════════════════════════════════════════════════════════ */

/* 1) Sizes */
.hero-poster-rows .hp-row-grey .ht-brown{ font-size:66px !important; }   /* −25% */
.hero-poster-rows .hp-row-name .ht-name{ font-size:114px !important; }   /* +30% */

/* 2) Tomorrow color = logo ".com" orange */
.hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ color:#FF7A1A !important; -webkit-text-fill-color:#FF7A1A !important; }
[data-theme="dark"] .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ color:#FF7A1A !important; -webkit-text-fill-color:#FF7A1A !important; }

/* 3) Red underline under Tomorrow (T → slightly past w) with red heart */
.hero-poster-rows .hp-row-tomorrow{ align-items:flex-start !important; }
.ht-tomorrow-wrap{ display:inline-flex; flex-direction:column; align-items:stretch; }
.ht-tomorrow-underline{
  display:flex; align-items:center; gap:7px;
  width:calc(100% + 14px);          /* slightly longer than the word (past "w") */
  margin-top:4px;
}
.ht-tomorrow-underline .ttu-line{
  flex:1 1 auto; height:3px; border-radius:3px; background:#E11D2E;   /* RED line */
}
.ht-tomorrow-underline .ttu-heart{ flex:0 0 auto; display:block; }    /* RED heart */

/* keep the small pink corner heart to the right of the word */
.ht-tomorrow-heart{ align-self:flex-start !important; margin-top:8px !important; }

/* Responsive sizes for new scale */
@media(max-width:1200px){
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:57px !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:99px !important; }
}
@media(max-width:980px){
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:50px !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:86px !important; }
}
@media(max-width:640px){
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:36px !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:62px !important; }
  .ht-tomorrow-underline .ttu-heart{ width:13px; height:13px; }
}
@media(max-width:420px){
  .hero-poster-rows .hp-row-grey .ht-brown{ font-size:30px !important; }
  .hero-poster-rows .hp-row-name .ht-name{ font-size:52px !important; }
}

/* 4) Trust-bar headings — 40% greyer (from dark ink toward grey) */
.trust-bar .trust-txt strong,
.trust-txt strong{
  color:#6E6A78 !important;          /* ~40% lighter/greyer than --ink */
  -webkit-text-fill-color:#6E6A78 !important;
}
[data-theme="dark"] .trust-bar .trust-txt strong,
[data-theme="dark"] .trust-txt strong{
  color:#B3AEC2 !important;          /* greyer in dark mode too, still readable */
  -webkit-text-fill-color:#B3AEC2 !important;
}

/* ════════════════════════════════════════════════════════════════
   v10.13 — Hero tweaks
   1) Underline under "Tomorrow": ONE clean line, T→W only, colour = logo
      "Name" blue (#23A8E0). No heart.
   2) "Tomorrow" size −20%.
   3) Corner pink heart removed (markup gone; hide any leftover just in case).
   (appended last → wins cascade)
   ════════════════════════════════════════════════════════════════ */

/* 2) Tomorrow −20% (base 88 -> ~70) */
.hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:70px !important; }
@media(max-width:1200px){ .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:61px !important; } }
@media(max-width:980px){  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:53px !important; } }
@media(max-width:640px){  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:38px !important; } }
@media(max-width:420px){  .hero-poster-rows .hp-row-tomorrow .ht-tomorrow{ font-size:32px !important; } }

/* 1) Clean single underline, exactly word width (T -> W), logo "Name" blue */
.ht-tomorrow-wrap{ display:inline-flex; flex-direction:column; align-items:stretch; }
.ht-tomorrow-underline{
  display:block;
  width:100%;                 /* matches the word: starts at T, ends at W */
  height:4px;
  border-radius:4px;
  background:#23A8E0;          /* logo "Name" blue */
  margin-top:4px;
}
/* remove old multi-part underline bits + red heart if present */
.ht-tomorrow-underline .ttu-line, .ht-tomorrow-underline .ttu-heart{ display:none !important; }

/* 3) Corner heart removed */
.ht-tomorrow-heart{ display:none !important; }

/* ════════════════════════════════════════════════════════════════
   v10.14 — Hero underline back to RED + heart · ticker −10%
   (appended last → wins cascade over v10.13's blue solid line)
   ════════════════════════════════════════════════════════════════ */

/* 1) Underline of "Tomorrow": RED line — heart — RED line (as it was earlier).
   Override v10.13 which had turned it into a single solid BLUE bar and
   hidden the heart. */
.ht-tomorrow-wrap{ display:inline-flex; flex-direction:column; align-items:stretch; }
.ht-tomorrow-underline{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;                 /* spans the word: T → W */
  height:auto !important;
  background:none !important;  /* kill the v10.13 solid blue bar */
  border-radius:0 !important;
  margin-top:5px;
}
.ht-tomorrow-underline .ttu-line{
  display:block !important;    /* re-show the line halves (v10.13 hid them) */
  flex:1 1 auto;
  height:3px;
  border-radius:3px;
  background:#E11D2E !important;   /* RED line */
}
.ht-tomorrow-underline .ttu-heart{
  display:block !important;    /* re-show the heart in the middle */
  flex:0 0 auto;
}
@media(max-width:640px){
  .ht-tomorrow-underline .ttu-heart{ width:13px; height:13px; }
}

/* 2) Trending ticker / marquee above the hero — reduce size by ~10% */
.ticker-bar{ padding-top:9px !important; padding-bottom:9px !important; }   /* was 10px */
.ticker-item{ font-size:14.4px !important; }                               /* 16px −10% */
.ticker-item .t-name, .ticker-item strong{ font-size:14.4px !important; }


/* ════════════════════════════════════════════════════════════════
   v10.19 — DARK MODE ROOT-CAUSE FIX (site-wide)
   Problem: 47 components (dashboard cards/tiles, profile, guides,
   blog, kundali results, smart-finder, auth card, FAQ, etc.) had hardcoded
   background:#fff. In dark mode, text colours flip to light (var(--ink) ->
   #ECE8F7) but these boxes stayed WHITE -> light text on white = invisible.
   Fix: in dark mode these surfaces use the dark card colour with proper
   borders, so all fonts are visible on every page.
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .admin-card,
[data-theme="dark"] .admin-kpi,
[data-theme="dark"] .admin-stat,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .auth-notice,
[data-theme="dark"] .blog-featured,
[data-theme="dark"] .blog-page-btn,
[data-theme="dark"] .book-article,
[data-theme="dark"] .book-body,
[data-theme="dark"] .book-toc,
[data-theme="dark"] .celeb-kid-card,
[data-theme="dark"] .cns-alt,
[data-theme="dark"] .cns-load-card,
[data-theme="dark"] .cns-pdfcta,
[data-theme="dark"] .cns-rescard,
[data-theme="dark"] .cns-seg,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .dash-stat,
[data-theme="dark"] .dash-tile,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .fw-ai-bot,
[data-theme="dark"] .fw-ai-input,
[data-theme="dark"] .google-btn,
[data-theme="dark"] .guide-chapter-nav-btn,
[data-theme="dark"] .guide-sidebar,
[data-theme="dark"] .guide-tool-btn,
[data-theme="dark"] .kmanglik-partialmanglik,
[data-theme="dark"] .ksample-lb-inner,
[data-theme="dark"] .kundali-result-card,
[data-theme="dark"] .ml-card,
[data-theme="dark"] .modal-stat-item,
[data-theme="dark"] .myth-cat-heart,
[data-theme="dark"] .myth-home-card,
[data-theme="dark"] .prof-danger,
[data-theme="dark"] .prof-delete-btn,
[data-theme="dark"] .prof-select,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .sf-act,
[data-theme="dark"] .sf-chip,
[data-theme="dark"] .sf-cmp-t,
[data-theme="dark"] .sf-in,
[data-theme="dark"] .sf-mbtn,
[data-theme="dark"] .sf-pop-card,
[data-theme="dark"] .sf-r,
[data-theme="dark"] .sf-r-blend,
[data-theme="dark"] .sf-wow-btn,
[data-theme="dark"] .swipe-love{
  background: var(--white, #1C1830) !important;
  border-color: var(--border, rgba(255,255,255,.10)) !important;
}

/* Inputs/selects inside these dark surfaces */
[data-theme="dark"] .prof-select,
[data-theme="dark"] .sf-in,
[data-theme="dark"] .fw-ai-input{
  background: var(--surface, #241E3C) !important;
  color: var(--ink, #ECE8F7) !important;
}

/* Hardcoded near-black or dark-grey inline text -> readable in dark mode */
[data-theme="dark"] .dash-list li{ border-bottom-color: var(--border, rgba(255,255,255,.10)); }
[data-theme="dark"] .dash-card-h h2,
[data-theme="dark"] .dash-name,
[data-theme="dark"] .dash-list a{ color: var(--ink, #ECE8F7) !important; }

/* Generic safety net: common text elements never inherit an invisible colour
   inside main content areas in dark mode */
[data-theme="dark"] main p, [data-theme="dark"] main li, [data-theme="dark"] main td,
[data-theme="dark"] main th, [data-theme="dark"] main label, [data-theme="dark"] main h1,
[data-theme="dark"] main h2, [data-theme="dark"] main h3, [data-theme="dark"] main h4{
  color: var(--ink, #ECE8F7);
}
[data-theme="dark"] main .muted, [data-theme="dark"] main small{ color: var(--ink-70, #C9C1E0); }

/* ============================================================
   v10.29 — Premium mega-menu (new 8-item IA, navConfig-driven)
   ============================================================ */
/* wider panels for 4–5 column menus, kept on-screen */
.mega-panel.mega-cols-4{ min-width:660px; }
.mega-panel.mega-cols-5{ min-width:820px; }
.mega-panel.mega-cols-4 .mega-grid,
.mega-panel.mega-cols-5 .mega-grid{ grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:20px 26px; }

/* keep very wide menus from overflowing the viewport edges */
@media (min-width:1025px){
  .nav-item.has-mega{ position:relative; }
  .mega-panel.mega-cols-5{ left:50%; }
}

/* column heading icons */
.mega-ico{ font-size:14px; margin-right:2px; filter:saturate(1.1); }

/* premium mega cards — subtle hover lift on links */
.mega-col a{ position:relative; }
.mega-col a:hover{ color:var(--rose); padding-left:6px; }
.mega-col a::before{
  content:""; position:absolute; left:-2px; top:50%; width:0; height:0; border-radius:50%;
  background:var(--rose); transform:translateY(-50%); transition:width .18s, height .18s;
}
.mega-col a:hover::before{ width:4px; height:4px; }

/* heading colour uses brand blue for the new IA */
.mega-col h4{ display:flex; align-items:center; gap:5px; }

/* Exclusives (premium) menu: gold-tinted headings */
.nav-item-premium .mega-col h4{ color:#B8860B; -webkit-text-fill-color:#B8860B; }

/* mega panel entrance animation */
.nav-item.has-mega > .mega-panel{ transition:opacity .2s ease, transform .22s cubic-bezier(.34,1.4,.64,1); }

/* ---- responsive: mobile drawer shows the same IA as a stacked accordion ---- */
@media (max-width:1024px){
  .mega-panel, .mega-panel.mega-cols-4, .mega-panel.mega-cols-5{
    position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; padding:6px 0 10px; background:transparent;
  }
  .mega-grid, .mega-panel.mega-cols-4 .mega-grid, .mega-panel.mega-cols-5 .mega-grid{
    grid-template-columns:1fr; gap:10px 0;
  }
  .mega-col h4{ margin-top:8px; }
}

/* ============================================================
   v10.30 — Compact Baby Names mega-menu (smaller, tighter, less hero cover)
   ============================================================ */
/* reduce panel padding & column gaps across all mega-menus */
.mega-panel{ padding:16px 18px !important; }
.mega-grid{ gap:14px 20px !important; }

/* Baby Names now has fewer links per column → make it noticeably narrower.
   Was 820px (5 cols); bring to ~560px (~32% smaller) and let columns wrap
   tighter. Height shrinks automatically with fewer links. */
.mega-panel.mega-cols-5{ min-width:560px !important; max-width:600px; }
.mega-panel.mega-cols-5 .mega-grid{
  grid-template-columns:repeat(3, minmax(140px,1fr)) !important;
  gap:12px 18px !important;
}
.mega-panel.mega-cols-4{ min-width:480px !important; }
.mega-panel.mega-cols-4 .mega-grid{ grid-template-columns:repeat(2, minmax(150px,1fr)) !important; }

/* tighter link rhythm for a compact, scannable list */
.mega-col h4{ margin:0 0 6px !important; font-size:12px !important; }
.mega-col a{ padding:3px 0 !important; font-size:13px !important; line-height:1.35; }
.mega-col a:hover{ padding-left:5px !important; }

/* keep the panel from covering the hero: cap height, scroll if ever needed */
.mega-panel{ max-height:min(70vh, 420px); overflow:auto; }

/* one small icon beside heading only (already the case) — ensure link items
   never render an icon */
.mega-col a .mega-ico{ display:none; }

/* Tablet: reduce spacing, allow 2 columns */
@media (min-width:641px) and (max-width:1024px){
  .mega-panel.mega-cols-5, .mega-panel.mega-cols-4{ min-width:0 !important; }
  .mega-panel.mega-cols-5 .mega-grid,
  .mega-panel.mega-cols-4 .mega-grid{ grid-template-columns:repeat(2,1fr) !important; }
}