/* ==========================================================================
   Dr. Seetal Yadav — Ayurvedic Women's Hormonal Health & Fertility Support
   style.css — Core design system, layout & components
   Author: Premium Healthcare Build
   ========================================================================== */

/* ------------------------------------------------------------------ */
/*  1. Design Tokens (CSS Custom Properties)                           */
/* ------------------------------------------------------------------ */
:root {
  /* Brand palette — warm, colourful Ayurvedic */
  --color-primary: #087443;         /* vivid herbal green */
  --color-primary-dark: #064D31;
  --color-secondary: #45B649;       /* fresh leaf green */
  --color-gold: #F4A500;            /* turmeric / saffron */
  --color-gold-dark: #B86C00;
  --color-terracotta: #D94C28;      /* clay / rust */
  --color-terracotta-soft: #FF7A59;
  --color-plum: #A52A68;            /* women's wellness accent */
  --color-teal: #087F8C;            /* herbal teal */
  --color-accent: #E7ECE5;          /* quiet pale sage */
  --color-cream: #F2F0E8;
  --color-bg: #F7F6F2;              /* natural warm white */
  --color-dark: #201710;            /* warm espresso */
  --color-text: #3D3027;            /* warm brown-charcoal */
  --color-text-soft: #67574C;
  --color-success: #4CAF50;
  --color-white: #FFFFFF;
  --color-border: #DFC9A5;          /* warm sand border */

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #045A35 0%, #079653 55%, #45B649 100%);
  --gradient-gold: linear-gradient(135deg, #E67E00 0%, #FFC531 100%);
  --gradient-warm: linear-gradient(135deg, #C92E27 0%, #F4A500 100%);
  --gradient-plum: linear-gradient(135deg, #86205A 0%, #D94D8B 100%);
  --gradient-soft: linear-gradient(135deg, #F1F2EE 0%, #F8F7F3 100%);
  --gradient-hero: radial-gradient(1100px 560px at 12% 8%, rgba(69,182,73,0.62), transparent 61%),
                   radial-gradient(1000px 700px at 88% 12%, rgba(244,165,0,0.48), transparent 56%),
                   radial-gradient(900px 700px at 78% 95%, rgba(217,76,40,0.30), transparent 55%),
                   radial-gradient(900px 900px at 30% 100%, rgba(255,226,168,0.85), transparent 60%),
                   linear-gradient(135deg, #FFF3D8 0%, #F4F8E9 100%);
  --gradient-cta: linear-gradient(120deg, #043F29 0%, #087443 38%, #087F8C 68%, #F4A500 135%);

  /* Surfaces & glass */
  --surface: #FFFFFF;
  --surface-2: #EEEFEA;
  --glass-bg: rgba(255, 250, 239, 0.90);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: saturate(170%) blur(14px);

  /* Typography */
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;

  --fs-hero: clamp(2.4rem, 5vw + 1rem, 4.4rem);
  --fs-h1: clamp(2rem, 3vw + 1rem, 3.2rem);
  --fs-h2: clamp(1.6rem, 2vw + 0.8rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 1vw + 0.7rem, 1.6rem);
  --fs-lead: clamp(1.05rem, 0.4vw + 1rem, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 10px 28px rgba(59, 41, 20, 0.14);
  --shadow-lg: 0 24px 60px rgba(59, 41, 20, 0.20);
  --shadow-glow: 0 12px 38px rgba(8, 116, 67, 0.38);
  --shadow-gold: 0 12px 38px rgba(244, 165, 0, 0.42);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 88px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
}

/* Dark mode tokens */
:root[data-theme="dark"] {
  --color-bg: #14100C;              /* warm near-black */
  --color-text: #E7DECF;
  --color-text-soft: #A99C8A;
  --color-dark: #F3ECDD;
  --color-border: #362C22;
  --surface: #1E1811;
  --surface-2: #241D14;
  --color-accent: #3A2E1C;
  --color-cream: #241D14;
  --glass-bg: rgba(30, 24, 17, 0.62);
  --glass-border: rgba(224, 168, 46, 0.18);
  --gradient-soft: linear-gradient(135deg, #221B12 0%, #14100C 100%);
  --gradient-hero: radial-gradient(1100px 560px at 12% 8%, rgba(31,122,72,0.4), transparent 60%),
                   radial-gradient(1000px 700px at 88% 12%, rgba(224,168,46,0.22), transparent 55%),
                   radial-gradient(900px 700px at 78% 95%, rgba(199,91,57,0.20), transparent 55%),
                   linear-gradient(135deg, #171209 0%, #14100C 100%);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 10px 36px rgba(46, 155, 87, 0.3);
}

/* ------------------------------------------------------------------ */
/*  2. Reset & Base                                                    */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--color-primary); text-decoration: none; transition: color 0.25s var(--ease); }
a:hover { color: var(--color-primary-dark); }

ul, ol { padding-left: 1.2rem; }

h1, h2, h3, h4 { line-height: 1.25; color: var(--color-dark); font-weight: 700; letter-spacing: -0.015em; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.font-display { font-family: var(--font-display); }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--color-secondary); color: #0b2a10; }

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ------------------------------------------------------------------ */
/*  3. Layout helpers                                                  */
/* ------------------------------------------------------------------ */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container-narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }

.section { padding: var(--space-xl) 0; position: relative; }
.section-sm { padding: var(--space-lg) 0; }

.section-head { max-width: 720px; margin: 0 auto var(--space-lg); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: linear-gradient(135deg, #FFE09A, #FFF0C7);
  border: 1px solid rgba(184,108,0,0.24);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}
:root[data-theme="dark"] .eyebrow { background: rgba(129,199,132,0.12); }

.section-title { font-family: var(--font-display); margin-bottom: var(--space-sm); }
.section-subtitle { color: var(--color-text-soft); font-size: var(--fs-lead); }

.text-center { text-align: center; }
.grid { display: grid; gap: var(--space-md); }
.bg-soft { background: #EEF1EC; }
.bg-surface { background: #FFFFFF; }
:root[data-theme="dark"] .bg-surface { background: linear-gradient(135deg, #1B2016 0%, #14100C 60%, #221B12 100%); }
.bg-cream { background: #F2F0E8; }
.bg-gold-soft { background: #F3F1EA; }
:root[data-theme="dark"] .bg-gold-soft { background: linear-gradient(135deg, #2A2113 0%, #14100C 100%); }
.bg-peach { background: #F4EFEB; }
:root[data-theme="dark"] .bg-peach { background: linear-gradient(135deg, #2C1E16 0%, #14100C 100%); }
.bg-sage { background: #E9EFE9; }
:root[data-theme="dark"] .bg-sage { background: linear-gradient(135deg, #182016 0%, #14100C 100%); }

/* Decorative botanical pattern layer (usable on any section) */
.has-pattern { position: relative; }
.has-pattern::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../images/pattern-leaves.svg");
  background-size: 340px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.has-pattern > .container { position: relative; z-index: 1; }
:root[data-theme="dark"] .has-pattern::before { opacity: 0.12; }

/* ------------------------------------------------------------------ */
/*  4. Buttons                                                         */
/* ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--gradient-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.9rem 1.7rem;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--btn-bg);
  box-shadow: var(--shadow-glow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
  will-change: transform;
}
.btn::after {
  content: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28, 46, 35, 0.22); color: #fff; }
.btn:active { transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}
.btn-outline:hover { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-glow); }

.btn-whatsapp { --btn-bg: #168A57; box-shadow: 0 4px 12px rgba(22, 138, 87, 0.24); }
.btn-whatsapp:hover { --btn-bg: #117548; box-shadow: 0 8px 20px rgba(22, 138, 87, 0.28); }

.btn-gold { --btn-bg: #E6A11A; box-shadow: 0 4px 12px rgba(166, 108, 0, 0.22); color: #2F2512; }
.btn-gold:hover { --btn-bg: #CF8D10; color: #2F2512; box-shadow: 0 8px 20px rgba(166, 108, 0, 0.28); }

.btn-ghost { background: var(--glass-bg); color: var(--color-dark); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); backdrop-filter: var(--glass-blur); }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.08rem; }
.btn-block { width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ------------------------------------------------------------------ */
/*  5. Header / Navigation                                             */
/* ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(24, 7, 5, 0.94);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 249, 238, 0.12);
  box-shadow: 0 4px 18px rgba(10, 3, 2, 0.22);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), height 0.4s var(--ease);
}
.site-header.scrolled {
  background: rgba(24, 7, 5, 0.96);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid rgba(134, 210, 111, 0.28);
}
.nav {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.header-logo { display: inline-flex; align-items: center; justify-content: flex-start; }
.header-logo img { width: auto; height: 68px; object-fit: contain; }
.mobile-menu-logo { display: none; }
@media (max-width: 1024px) { .header-logo img { height: 56px; } }
@media (max-width: 480px) { .header-logo img { height: 50px; } }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--color-dark); }
.site-header .brand { flex: 0 1 390px; min-width: 0; gap: 14px; }
.brand:hover { color: var(--color-dark); }
.site-header .brand,
.site-header .brand:hover { color: #FFF9EE; }
.site-header .brand-name small { color: rgba(255, 249, 238, 0.68); }
.brand-mark {
  width: 50px; height: 50px;
  flex: 0 0 50px;
  display: grid; place-items: center;
  background: var(--gradient-primary);
  border-radius: 12px;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.brand-name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.48rem;
  line-height: 1.1;
  white-space: nowrap;
}
.brand-name small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  white-space: nowrap;
}

.nav-menu { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.65rem 0.9rem;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: var(--radius-pill);
  position: relative;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--color-primary); background: var(--color-accent); }
@media (min-width: 1025px) {
  .site-header .nav-menu > li > a { color: rgba(255, 249, 238, 0.88); }
  .site-header .nav-menu > li > a:hover,
  .site-header .nav-menu > li > a[aria-current="page"] { color: #183B25; background: #E7ECE5; }
}
:root[data-theme="dark"] .nav-menu a:hover, :root[data-theme="dark"] .nav-menu a[aria-current="page"] { background: rgba(129,199,132,0.1); }

/* Dropdown */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  min-width: 540px;
  max-height: calc(100vh - var(--header-h) - 30px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(19, 31, 24, 0.18);
  padding: 12px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); flex-direction: column; align-items: flex-start; gap: 2px; }
.nav-dropdown a span { font-size: 0.78rem; color: var(--color-text-soft); font-weight: 400; }

.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.65rem; }
.header-whatsapp { min-height: 44px; padding: 0.7rem 1rem; white-space: nowrap; box-shadow: none; }

.theme-toggle, .menu-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--color-border);
  background: var(--surface);
  border-radius: 50%;
  color: var(--color-text);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s;
}
.site-header .theme-toggle, .site-header .menu-toggle { color: #FFF9EE; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); }
.theme-toggle:hover, .menu-toggle:hover { transform: rotate(15deg) scale(1.05); color: var(--color-primary); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.menu-toggle { display: none; }
.menu-toggle span { position: relative; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease); }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-cta { display: inline-flex; }

/* ------------------------------------------------------------------ */
/*  6. Hero                                                            */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 1.75rem) 0 3.25rem;
  background: var(--gradient-hero);
  overflow: hidden;
}
.hero-home {
  min-height: clamp(650px, 78vh, 820px);
  background-image: linear-gradient(90deg, rgba(18, 7, 5, 0.76) 0%, rgba(31, 10, 6, 0.55) 43%, rgba(31, 10, 6, 0.10) 68%),
                    url("../images/index-hero-ayurveda-v2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-home .hero-grid { grid-template-columns: minmax(0, 660px); }
.hero-home .hero-content { padding-block: var(--space-md); }
.hero-home .hero-decor::after { display: none; }
.hero-home .hero-title { color: #FFF9EE; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.26); }
.hero-home .hero-title .accent {
  background: none;
  color: #86D26F;
  -webkit-text-fill-color: currentColor;
}
.hero-home .hero-sub { color: rgba(255, 249, 238, 0.86); }
.hero-home .hero-eyebrow {
  color: #DDF4D2;
  background: rgba(80, 130, 55, 0.20);
  border-color: rgba(164, 221, 132, 0.35);
}
.hero-home .hero-trust-item,
.hero-home .hero-trust-item strong { color: #FFF9EE; }
.hero-home .hero-trust-item { opacity: 0.88; }
:root[data-theme="dark"] .hero-home {
  background-image: linear-gradient(90deg, rgba(11, 4, 3, 0.84) 0%, rgba(20, 7, 5, 0.64) 45%, rgba(20, 7, 5, 0.18) 70%),
                    url("../images/index-hero-ayurveda-v2.jpg");
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; }
.hero-eyebrow { margin-bottom: var(--space-md); }
.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-md);
}
.hero-title .accent { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: var(--fs-lead); color: var(--color-text-soft); max-width: 560px; margin-bottom: var(--space-lg); }
.hero-actions { margin-bottom: var(--space-lg); }

.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.hero-trust-item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--color-text-soft); }
.hero-trust-item strong { display: block; font-size: 1.35rem; color: var(--color-dark); font-family: var(--font-display); line-height: 1; }

/* Hero visual / portrait */
.hero-visual { position: relative; }
.hero-portrait {
  position: relative;
  max-height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #C8E6C9, #E8F5E9);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--glass-border);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-badge .hb-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--gradient-primary); color: #fff; flex-shrink: 0; }
.hero-badge strong { display: block; font-size: 0.95rem; color: var(--color-dark); }
.hero-badge span { font-size: 0.75rem; color: var(--color-text-soft); }
.hero-badge.badge-top { top: 8%; left: -8%; animation: float 6s var(--ease) infinite; }
.hero-badge.badge-bottom { bottom: 9%; right: -6%; animation: float 7s var(--ease) infinite 0.6s; }

/* Floating leaves & particles */
.hero-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero-decor::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("../images/pattern-leaves.svg");
  background-size: 360px; opacity: 0.35;
}
:root[data-theme="dark"] .hero-decor::after { opacity: 0.08; }
.leaf {
  position: absolute;
  color: var(--color-secondary);
  opacity: 0.5;
  animation: leaf-float linear infinite;
}
.leaf:nth-child(4n+1) { color: var(--color-secondary); }
.leaf:nth-child(4n+2) { color: var(--color-gold); }
.leaf:nth-child(4n+3) { color: var(--color-terracotta-soft); }
.leaf:nth-child(4n+4) { color: var(--color-primary); }
.particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(129,199,132,0.9), transparent 70%); animation: particle-rise linear infinite; }
.hero .container { position: relative; z-index: 1; }

/* Wave divider */
.section-divider { line-height: 0; }
.section-divider svg { width: 100%; height: 70px; }
.section-divider path { fill: var(--surface-2); }

/* ------------------------------------------------------------------ */
/*  7. Cards / Treatments                                             */
/* ------------------------------------------------------------------ */
.cards-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.approach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
  overflow: hidden;
  isolation: isolate;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-soft);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--color-secondary); filter: saturate(1.08); }
.card:hover::before { opacity: 1; }

.card--image { display: flex; flex-direction: column; padding: 0; }
.card-media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.card--image:hover .card-media img { transform: scale(1.045); }
.card--image .card-body { display: flex; flex: 1; flex-direction: column; padding: 1.35rem; }
.card--image .card-link { margin-top: auto; padding-top: var(--space-sm); }

.card-icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--color-accent);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s;
}
.card:hover .card-icon { transform: rotate(-6deg) scale(1.08); background: var(--gradient-primary); color: #fff; }
:root[data-theme="dark"] .card-icon { background: rgba(129,199,132,0.12); }
.card h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.card p { color: var(--color-text-soft); font-size: 0.95rem; }
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-sm); font-weight: 600; font-size: 0.9rem; }
.card-link svg { transition: transform 0.3s var(--ease); }
.card:hover .card-link svg { transform: translateX(4px); }

/* Colourful card theming — cycle warm Ayurvedic accents */
.cards-grid .card { --c: var(--color-primary); --cg: var(--gradient-primary); --ct: #EAF4E6; }
.cards-grid .card:nth-child(8n+2) { --c: var(--color-gold-dark);   --cg: var(--gradient-gold);  --ct: #FBEDCB; }
.cards-grid .card:nth-child(8n+3) { --c: var(--color-terracotta);  --cg: var(--gradient-warm);  --ct: #FBE3D6; }
.cards-grid .card:nth-child(8n+4) { --c: var(--color-plum);        --cg: var(--gradient-plum);  --ct: #F6E1EA; }
.cards-grid .card:nth-child(8n+5) { --c: var(--color-teal);        --cg: linear-gradient(135deg,#217373,#41B0B0); --ct: #DCF0F0; }
.cards-grid .card:nth-child(8n+6) { --c: var(--color-gold-dark);   --cg: var(--gradient-gold);  --ct: #FBEDCB; }
.cards-grid .card:nth-child(8n+7) { --c: var(--color-terracotta);  --cg: var(--gradient-warm);  --ct: #FBE3D6; }
.cards-grid .card:nth-child(8n+8) { --c: var(--color-plum);        --cg: var(--gradient-plum);  --ct: #F6E1EA; }
.cards-grid .card .card-icon { background: var(--ct); color: var(--c); }
.cards-grid .card:hover .card-icon { background: var(--cg); color: #fff; }
.cards-grid .card:hover { border-color: var(--c); }
.cards-grid .card .card-link { color: var(--c); }
.cards-grid .card::before { background: linear-gradient(160deg, var(--ct), transparent 70%); }
:root[data-theme="dark"] .cards-grid .card .card-icon { filter: saturate(1.1); }
:root[data-theme="dark"] .cards-grid .card::before { opacity: 0; }
:root[data-theme="dark"] .cards-grid .card:hover::before { opacity: 0.18; }
/* top accent bar */
.cards-grid .card { border-top: 4px solid var(--c); }
.cards-grid .card:hover { border-top-color: var(--c); }

/* Feature / value list with icons */
.feature { display: flex; gap: var(--space-sm); align-items: flex-start; }
.feature-icon { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; background: var(--color-accent); color: var(--color-primary); }
:root[data-theme="dark"] .feature-icon { background: rgba(129,199,132,0.12); }
.feature h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.feature p { color: var(--color-text-soft); font-size: 0.95rem; }
/* Colourful feature icons */
.grid .feature:nth-child(4n+2) .feature-icon { background: #FBEDCB; color: var(--color-gold-dark); }
.grid .feature:nth-child(4n+3) .feature-icon { background: #FBE3D6; color: var(--color-terracotta); }
.grid .feature:nth-child(4n+4) .feature-icon { background: #F6E1EA; color: var(--color-plum); }

/* ------------------------------------------------------------------ */
/*  8. Timeline / Why choose us                                       */
/* ------------------------------------------------------------------ */
.timeline { position: relative; max-width: 820px; margin-inline: auto; }
.timeline::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--color-secondary), var(--color-accent)); }
.timeline-item { position: relative; padding: 0 0 var(--space-lg) 74px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 6px; top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--color-secondary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.timeline-item h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.timeline-item p { color: var(--color-text-soft); }

/* Patient journey (horizontal steps) */
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); counter-reset: step; }
.journey-step { position: relative; text-align: center; padding: var(--space-md) var(--space-sm); background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.journey-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.journey-num { counter-increment: step; width: 52px; height: 52px; margin: 0 auto var(--space-sm); display: grid; place-items: center; border-radius: 50%; background: var(--gradient-primary); color: #fff; font-family: var(--font-display); font-size: 1.3rem; box-shadow: var(--shadow-glow); }
.journey-num::before { content: counter(step); }
.journey-step h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.journey-step p { font-size: 0.85rem; color: var(--color-text-soft); }
/* Colourful journey numbers */
.journey .journey-step:nth-child(6n+2) .journey-num { background: var(--gradient-gold); box-shadow: var(--shadow-gold); }
.journey .journey-step:nth-child(6n+3) .journey-num { background: var(--gradient-warm); }
.journey .journey-step:nth-child(6n+4) .journey-num { background: var(--gradient-plum); }
.journey .journey-step:nth-child(6n+5) .journey-num { background: linear-gradient(135deg,#217373,#41B0B0); }
.journey .journey-step:nth-child(6n+6) .journey-num { background: var(--gradient-warm); }
/* Colourful timeline dots */
.timeline-item:nth-child(7n+2) .timeline-dot { border-color: var(--color-gold); color: var(--color-gold-dark); }
.timeline-item:nth-child(7n+3) .timeline-dot { border-color: var(--color-terracotta); color: var(--color-terracotta); }
.timeline-item:nth-child(7n+4) .timeline-dot { border-color: var(--color-plum); color: var(--color-plum); }
.timeline-item:nth-child(7n+5) .timeline-dot { border-color: var(--color-teal); color: var(--color-teal); }
.timeline-item:nth-child(7n+6) .timeline-dot { border-color: var(--color-gold); color: var(--color-gold-dark); }
.timeline::before { background: linear-gradient(180deg, var(--color-secondary), var(--color-gold) 45%, var(--color-terracotta) 80%, var(--color-plum)); opacity: 0.55; }

/* ------------------------------------------------------------------ */
/*  9. Testimonials carousel                                          */
/* ------------------------------------------------------------------ */
.testimonials { overflow: hidden; }
.carousel { position: relative; }
.carousel-track { display: flex; gap: var(--space-md); transition: transform 0.6s var(--ease); }
.testimonial-card {
  flex: 0 0 calc(33.333% - var(--space-md));
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.testimonial-stars { color: #F5A623; margin-bottom: var(--space-sm); letter-spacing: 2px; }
.testimonial-card blockquote { font-size: 1.02rem; color: var(--color-text); margin-bottom: var(--space-md); font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--gradient-primary); color: #fff; display: grid; place-items: center; font-weight: 600; }
.testimonial-author strong { display: block; font-size: 0.95rem; color: var(--color-dark); }
.testimonial-author span { font-size: 0.8rem; color: var(--color-text-soft); }

.carousel-controls { display: flex; justify-content: center; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.carousel-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--surface); color: var(--color-primary); display: grid; place-items: center; transition: background 0.3s var(--ease), color 0.3s, transform 0.3s; }
.carousel-btn:hover { background: var(--color-primary); color: #fff; transform: scale(1.05); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--color-border); cursor: pointer; transition: background 0.3s, width 0.3s; }
.carousel-dot.active { background: var(--color-primary); width: 26px; border-radius: 6px; }

/* ------------------------------------------------------------------ */
/*  10. FAQ Accordion                                                 */
/* ------------------------------------------------------------------ */
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: var(--space-sm); }
.faq-item { background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.3s var(--ease), box-shadow 0.3s; }
.faq-item.open { border-color: var(--color-secondary); box-shadow: var(--shadow-md); }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: 1.15rem var(--space-md);
  background: none; border: none; text-align: left;
  font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--color-dark);
}
.faq-icon { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent); color: var(--color-primary); transition: transform 0.35s var(--ease), background 0.35s; }
:root[data-theme="dark"] .faq-icon { background: rgba(129,199,132,0.12); }
.faq-item.open .faq-icon { transform: rotate(135deg); background: var(--gradient-primary); color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-answer-inner { padding: 0 var(--space-md) 1.2rem; color: var(--color-text-soft); }

/* ------------------------------------------------------------------ */
/*  11. CTA band                                                      */
/* ------------------------------------------------------------------ */
.cta-band { position: relative; overflow: hidden; }
.cta-inner {
  position: relative;
  background: var(--gradient-cta);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
.cta-inner::before, .cta-inner::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1; filter: blur(2px);
}
.cta-inner::before { width: 340px; height: 340px; background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%); top: -120px; right: -80px; }
.cta-inner::after { width: 300px; height: 300px; background: radial-gradient(circle, rgba(244,235,208,0.22), transparent 70%); bottom: -120px; left: -60px; }
.cta-inner h2 { color: #fff; font-family: var(--font-display); margin-bottom: var(--space-sm); }
.cta-inner p { color: rgba(255,255,255,0.9); font-size: var(--fs-lead); max-width: 620px; margin: 0 auto var(--space-lg); }
.cta-inner .btn-group { justify-content: center; }
.cta-inner .btn-outline { color: #fff; border-color: rgba(255,255,255,0.7); }
.cta-inner .btn-outline:hover { background: #fff; color: var(--color-primary); }

/* ------------------------------------------------------------------ */
/*  12. Forms                                                         */
/* ------------------------------------------------------------------ */
.form-card { background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.75rem); box-shadow: var(--shadow-md); }
.form-row { display: grid; gap: var(--space-sm); grid-template-columns: 1fr 1fr; }
.form-group { margin-bottom: var(--space-sm); position: relative; }
.form-group label { display: block; font-weight: 500; font-size: 0.9rem; margin-bottom: 6px; color: var(--color-dark); }
.form-group label .req { color: #E5484D; }
.form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s, background 0.25s;
}
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(46,125,50,0.12); background: var(--surface); }
textarea.form-control { min-height: 130px; resize: vertical; }
.form-control.invalid { border-color: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,0.12); }
.form-error { color: #E5484D; font-size: 0.8rem; margin-top: 4px; min-height: 1em; display: block; }
.form-hint { font-size: 0.8rem; color: var(--color-text-soft); }

/* honeypot */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-success {
  display: none;
  text-align: center;
  padding: var(--space-md);
  background: rgba(76,175,80,0.1);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  color: var(--color-primary-dark);
}
.form-success.show { display: block; animation: pop-in 0.5s var(--ease); }
.form-success .check-circle { width: 64px; height: 64px; margin: 0 auto var(--space-sm); }

/* ------------------------------------------------------------------ */
/*  13. Contact info blocks & map                                     */
/* ------------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.info-list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.info-item { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm); background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.info-item .feature-icon { width: 44px; height: 44px; }
.info-item strong { display: block; color: var(--color-dark); }
.info-item a, .info-item span { color: var(--color-text-soft); }
.map-embed { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); aspect-ratio: 16/10; background: var(--surface-2); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ */
/*  14. Breadcrumbs & page hero                                       */
/* ------------------------------------------------------------------ */
.page-hero {
  min-height: 470px;
  padding: calc(var(--header-h) + var(--space-lg)) 0 var(--space-lg);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image: linear-gradient(90deg, rgba(17, 6, 4, 0.90) 0%, rgba(36, 10, 7, 0.75) 44%, rgba(36, 10, 7, 0.30) 72%), var(--page-hero-image, var(--gradient-hero));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-hero--about { --page-hero-image: url("../images/bg-about-us.png"); }
.page-hero--treatments { --page-hero-image: url("../images/hero-treatments-panchkarma.jpg"); }
.page-hero--fertility { --page-hero-image: url("../images/hero-fertility-ayurved.jpg"); }
.page-hero--hormonal { --page-hero-image: url("../images/hero-hormonal-balance.jpg"); }
.page-hero--pcod { --page-hero-image: url("../images/hero-pcod-ayurved.jpg"); }
.page-hero--periods { --page-hero-image: url("../images/bg-irregular-periods.png"); }
.page-hero--ovulation { --page-hero-image: url("../images/bg-ovulation-wellness.png"); }
.page-hero--lifestyle { --page-hero-image: url("../images/bg-lifestyle-management.png"); }
.page-hero--panchkarma { --page-hero-image: url("../images/bg-panchkarma.png"); }
.page-hero--wellness { --page-hero-image: url("../images/bg-womens-wellness.png"); }
.page-hero--contact { --page-hero-image: url("../images/hero-contact-clinic.jpg"); }
.page-hero--privacy { --page-hero-image: url("../images/hero-privacy-clinic.jpg"); }
.page-hero--terms { --page-hero-image: url("../images/hero-terms-clinic.jpg"); }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.20));
  pointer-events: none; z-index: 0;
}
:root[data-theme="dark"] .page-hero::after { opacity: 1; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 .accent, .page-hero .lead b { color: #9ADD7D; }
.page-hero h1 { font-family: var(--font-display); color: #FFF9EE; margin-bottom: var(--space-sm); max-width: 720px; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.32); }
.page-hero p { color: rgba(255, 249, 238, 0.88); font-size: var(--fs-lead); max-width: 680px; }
.page-hero .breadcrumbs,
.page-hero .breadcrumbs li,
.page-hero .breadcrumbs a,
.page-hero .breadcrumbs span { color: rgba(255, 249, 238, 0.76); }
.page-hero .breadcrumbs a:hover,
.page-hero .breadcrumbs li[aria-current="page"] { color: #A8E58B; }
.page-hero .eyebrow { color: #DDF4D2; background: rgba(78, 128, 55, 0.22); border-color: rgba(164, 221, 132, 0.34); }
.page-hero .hero-note { color: rgba(255, 249, 238, 0.84); background: rgba(20, 7, 5, 0.42); border-color: rgba(255, 249, 238, 0.18); }
.page-hero-image {
  display: block;
  width: min(100%, 920px);
  max-height: 430px;
  margin: var(--space-lg) 0;
  object-fit: cover;
  filter: saturate(1.16) contrast(1.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero-portrait img,
.media-frame img,
.blog-thumb img {
  filter: saturate(1.14) contrast(1.04);
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; padding: 0; margin-bottom: var(--space-md); font-size: 0.85rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--color-text-soft); }
.breadcrumbs a { color: var(--color-text-soft); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs li[aria-current="page"] { color: var(--color-primary); font-weight: 500; }

/* Prose (blog / legal / treatment content) */
.prose { max-width: 760px; }
.prose > * + * { margin-top: var(--space-sm); }
.prose h2 { font-family: var(--font-display); margin-top: var(--space-lg); }
.prose h3 { margin-top: var(--space-md); }
.prose ul, .prose ol { display: grid; gap: 0.4rem; }
.prose img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.prose blockquote { border-left: 4px solid var(--color-secondary); padding: var(--space-sm) var(--space-md); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--color-text-soft); }

/* Sidebar layout */
.content-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--space-lg); align-items: start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: var(--space-md); }
.sidebar-card { background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-sm); }
.sidebar-card h3 { font-size: 1.1rem; margin-bottom: var(--space-sm); }
.sidebar-card ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.sidebar-card a { color: var(--color-text); font-size: 0.95rem; }
.sidebar-card a:hover { color: var(--color-primary); }

/* Info pill list (symptoms / benefits) */
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.focus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.focus-grid li { width: 100%; min-height: 72px; border-radius: var(--radius-md); padding: 0; }
.focus-grid li a { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; padding: 1rem 1.1rem; color: var(--color-text); font-weight: 600; }
.pill-list li { display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 1rem; background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 0.92rem; transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s; }
.focus-grid li { padding: 0; border-radius: var(--radius-md); }
.pill-list li:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.focus-image-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.focus-image-card { position: relative; display: block; overflow: hidden; min-height: 210px; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); background: var(--surface-2); }
.focus-image-card img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform 0.5s var(--ease); }
.focus-image-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(17, 22, 18, 0.88)); }
.focus-image-card span { position: absolute; z-index: 1; right: 1rem; bottom: 1rem; left: 1rem; color: #fff; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.focus-image-card:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .focus-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .focus-image-grid { grid-template-columns: 1fr; } .focus-image-card { min-height: 230px; } }
.pill-list li svg { color: var(--color-primary); flex-shrink: 0; }
.pill-list li:nth-child(5n+1) { border-color: #CDE7C8; } .pill-list li:nth-child(5n+1) svg { color: var(--color-primary); }
.pill-list li:nth-child(5n+2) { border-color: #F1DDA6; } .pill-list li:nth-child(5n+2) svg { color: var(--color-gold-dark); }
.pill-list li:nth-child(5n+3) { border-color: #F2C9B7; } .pill-list li:nth-child(5n+3) svg { color: var(--color-terracotta); }
.pill-list li:nth-child(5n+4) { border-color: #E7C2D2; } .pill-list li:nth-child(5n+4) svg { color: var(--color-plum); }
.pill-list li:nth-child(5n+5) { border-color: #B9E0E0; } .pill-list li:nth-child(5n+5) svg { color: var(--color-teal); }

/* Blog cards */
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.blog-card { background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-thumb { aspect-ratio: 16/9; background: var(--gradient-soft); position: relative; overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.blog-card:hover .blog-thumb img { transform: scale(1.06); }
.blog-tag { position: absolute; top: 12px; left: 12px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); color: var(--color-primary); font-size: 0.72rem; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill); }
.blog-body { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-size: 0.78rem; color: var(--color-text-soft); margin-bottom: 8px; }
.blog-body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.blog-body p { color: var(--color-text-soft); font-size: 0.92rem; flex: 1; }
.blog-body .card-link { margin-top: var(--space-sm); }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-md); text-align: center; }
.stat strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.stat:nth-child(4n+2) strong { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; }
.stat:nth-child(4n+3) strong { background: var(--gradient-warm); -webkit-background-clip: text; background-clip: text; }
.stat:nth-child(4n+4) strong { background: var(--gradient-plum); -webkit-background-clip: text; background-clip: text; }
.stat span { color: var(--color-text-soft); font-size: 0.9rem; }

/* ------------------------------------------------------------------ */
/*  15. Footer                                                        */
/* ------------------------------------------------------------------ */
.site-footer { background: var(--color-dark); color: #D9CDBB; padding: var(--space-xl) 0 var(--space-md); position: relative; }
.footer-logo { display: inline-flex; align-items: center; margin-bottom: 1rem; }
.footer-logo img { width: auto; height: 76px; object-fit: contain; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-gold) 40%, var(--color-terracotta) 70%, var(--color-plum)); }
:root[data-theme="dark"] .site-footer { background: #0C0906; border-top: 1px solid var(--color-border); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { color: #B8AB98; margin: var(--space-sm) 0; font-size: 0.92rem; max-width: 320px; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--space-sm); }
.footer-links { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer-links a { color: #B8AB98; font-size: 0.92rem; }
.footer-links a:hover { color: var(--color-secondary); padding-left: 4px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; color: #B8AB98; font-size: 0.92rem; }
.footer-contact svg { flex-shrink: 0; margin-top: 3px; color: var(--color-secondary); }
.social-list { display: flex; gap: 10px; margin-top: var(--space-sm); }
.social-list a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; transition: background 0.3s var(--ease), transform 0.3s; }
.social-list a:hover { background: var(--gradient-primary); transform: translateY(-3px); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-md); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); align-items: center; font-size: 0.85rem; color: #8A958E; }
.footer-bottom a { color: #8A958E; }
.footer-bottom a:hover { color: var(--color-secondary); }
.footer-disclaimer { font-size: 0.78rem; color: #77817A; margin-top: var(--space-sm); line-height: 1.6; }

/* ------------------------------------------------------------------ */
/*  16. Floating actions & utilities                                  */
/* ------------------------------------------------------------------ */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37,211,102,0.45);
  transition: transform 0.3s var(--ease);
}
.whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: pulse-ring 2.2s var(--ease) infinite; }
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

.back-to-top {
  position: fixed; right: 24px; bottom: 92px; z-index: 899;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); color: var(--color-primary);
  border: 1px solid var(--color-border);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s, visibility 0.35s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-primary); color: #fff; }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 1100; background: var(--gradient-primary); transition: width 0.1s linear; }

/* Custom cursor (desktop pointer only) */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 3000; transform: translate(-50%, -50%); mix-blend-mode: multiply; }
.cursor-dot { width: 8px; height: 8px; background: var(--color-primary); }
.cursor-ring { width: 36px; height: 36px; border: 2px solid var(--color-secondary); transition: transform 0.18s var(--ease), width 0.2s, height 0.2s, opacity 0.2s; }
.cursor-ring.hovering { width: 54px; height: 54px; background: rgba(129,199,132,0.12); }
:root[data-theme="dark"] .cursor-dot, :root[data-theme="dark"] .cursor-ring { mix-blend-mode: screen; }

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: 5000; background: var(--color-bg); display: grid; place-items: center; transition: opacity 0.6s var(--ease), visibility 0.6s; }
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-leaf { width: 64px; height: 64px; color: var(--color-primary); animation: spin-grow 1.4s var(--ease) infinite; }
.preloader-text { margin-top: var(--space-sm); font-family: var(--font-display); color: var(--color-primary); letter-spacing: 0.1em; }

/* Visually hidden */
.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; }

/* Two-column generic */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.media-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--glass-border); aspect-ratio: 4/3; background: var(--gradient-soft); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--portrait { aspect-ratio: 2/3; width: min(100%, 480px); justify-self: center; }

/* Authentic clinic photography */
.clinic-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.clinic-gallery__item { position: relative; overflow: hidden; margin: 0; aspect-ratio: 3/2; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--gradient-soft); }
.clinic-gallery__item img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform 0.5s var(--ease); }
.clinic-gallery__item:hover img { transform: scale(1.025); }
.clinic-gallery__item figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 2.5rem 1rem 1rem; color: #fff; font-weight: 600; background: linear-gradient(transparent, rgba(17, 6, 4, 0.82)); }
.clinic-gallery__item--wide { aspect-ratio: 4/3; }
.treatment-photo { display: block; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: contain; }
.treatment-photo--portrait { width: min(100%, 420px) !important; margin: 0 auto 1.5rem; }
@media (max-width: 700px) { .clinic-gallery { grid-template-columns: 1fr; } .clinic-gallery__item, .clinic-gallery__item--wide { aspect-ratio: 4/3; } }
</content>