/* ============================================
   MADISON MEDS — Design Tokens & Styles
   Blue theme, gender-neutral, modern medical
   ============================================ */

:root {
  /* Type Scale */
  /* Mobile-first fluid type scale — tuned for 375px viewports */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.375rem, 1.1rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  --text-3xl: clamp(2rem, 0.9rem + 4.5vw, 5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --space-32: 8rem;

  /* Fonts */
  --font-display: 'Cabinet Grotesk', 'Arial', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;

  /* Radius */
  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem; --radius-xl: 1rem;
  --radius-2xl: 1.25rem; --radius-full: 9999px;

  /* Content widths */
  --content-narrow: 640px; --content-default: 960px;
  --content-wide: 1200px; --content-max: 1320px;

  /* Transitions */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Madison Meds Theme (Purple + Mauve) ---- */
  --color-bg: #FDFBFF;
  --color-surface: #F8F5FA;
  --color-surface-2: #F0EDF4;
  --color-surface-blue: #F3E8FF;
  --color-surface-blue-light: #FAF5FF;

  --color-text: #1A1225;
  --color-text-muted: #6A5C7B;
  --color-text-faint: #9B8FB0;
  --color-text-inverse: #FFFFFF;

  --color-primary: #2D1B4E;
  --color-primary-bright: #B84DFF;
  --color-primary-hover: #720EEC;
  --color-primary-light: #C97DFF;
  --color-mauve: #D88FB7;
  --color-mauve-light: #FFE4F2;

  --color-accent-green: #16A34A;
  --color-accent-amber: #D97706;
  --color-accent-coral: #F43F5E;

  --color-border: #E4DCF0;
  --color-divider: #CBD5E1;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.1);
  --shadow-xl: 0 20px 48px rgba(15,23,42,0.12);
}

/* ---- Dark Mode ---- */
[data-theme='dark'] {
  --color-bg: #0B1120;
  --color-surface: #111827;
  --color-surface-2: #1E293B;
  --color-surface-blue: #1E3A5F;
  --color-surface-blue-light: #172554;

  --color-text: #E2E8F0;
  --color-text-muted: #94A3B8;
  --color-text-faint: #64748B;
  --color-text-inverse: #0F172A;

  --color-primary: #3B82F6;
  --color-primary-bright: #60A5FA;
  --color-primary-hover: #93C5FD;
  --color-primary-light: #60A5FA;

  --color-border: #1E293B;
  --color-divider: #334155;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0B1120;
    --color-surface: #111827;
    --color-surface-2: #1E293B;
    --color-surface-blue: #1E3A5F;
    --color-surface-blue-light: #172554;
    --color-text: #E2E8F0;
    --color-text-muted: #94A3B8;
    --color-text-faint: #64748B;
    --color-text-inverse: #0F172A;
    --color-primary: #3B82F6;
    --color-primary-bright: #60A5FA;
    --color-primary-hover: #93C5FD;
    --color-primary-light: #60A5FA;
    --color-border: #1E293B;
    --color-divider: #334155;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 48px rgba(0,0,0,0.6);
  }
}

/* ============================================
   COMPONENTS
   ============================================ */

/* --- Container --- */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .container { padding-inline: var(--space-8); } }

/* --- Header / Navbar --- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
[data-theme='dark'] .header,
:root:not([data-theme]) .header { background: rgba(11,17,32,0.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .header { background: rgba(11,17,32,0.92); } }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; max-width: var(--content-max); margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) { .header__inner { padding-inline: var(--space-8); } }

.header__logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-text); }
.header__logo-icon { width: 40px; height: 40px; }
.header__logo-img { height: 72px; width: auto; }
.header__logo-text { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.header__logo-text span { color: var(--color-primary-bright); }

.header__nav { display: none; gap: var(--space-6); list-style: none; }
@media (min-width: 1024px) { .header__nav { display: flex; } }
.header__nav a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; font-weight: 500; }
.header__nav a:hover { color: var(--color-text); }

.header__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Header Search */
.header__search {
  position: relative; display: flex; align-items: center;
}
.header__search-btn {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--color-text-muted); display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all 0.3s;
}
.header__search-btn:hover { color: var(--color-primary-bright); background: rgba(184,77,255,0.08); }
.header__search-field {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
  width: 0; opacity: 0; overflow: hidden;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full); box-shadow: var(--shadow-lg);
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}
.header__search.open .header__search-field {
  width: 280px; opacity: 1;
}
.header__search.open .header__search-btn { opacity: 0; pointer-events: none; }
.header__search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: var(--text-sm);
  padding: 0.5rem 0.75rem; color: var(--color-text); width: 100%;
}
.header__search-input::placeholder { color: var(--color-text-muted); }
.header__search-close {
  background: none; border: none; cursor: pointer; padding: 6px 8px;
  color: var(--color-text-muted); display: flex; align-items: center;
  transition: color 0.2s;
}
.header__search-close:hover { color: var(--color-text); }
.header__search-results {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px; max-height: 360px; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  display: none; z-index: 100;
}
.header__search.open .header__search-results:not(:empty) { display: block; }
.search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; text-decoration: none; color: var(--color-text);
  transition: background 0.15s;
}
.search-result:hover { background: rgba(184,77,255,0.06); }
.search-result__img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.search-result__info { flex: 1; }
.search-result__name { font-weight: 600; font-size: var(--text-sm); }
.search-result__cat { font-size: var(--text-xs); color: var(--color-text-muted); }
.search-no-results {
  padding: 16px; text-align: center;
  font-size: var(--text-sm); color: var(--color-text-muted);
}
@media (max-width: 767px) {
  .header__search.open .header__search-field { width: 200px; }
  .header__search-results { width: 260px; }
}

.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); border-radius: var(--radius-full); padding: 0.625rem 1.5rem; text-decoration: none; white-space: nowrap; }
.btn--primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--outline { border: 1.5px solid var(--color-primary); color: var(--color-primary); background: transparent; }
.btn--outline:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.btn--large { padding: 0.875rem 2rem; font-size: var(--text-base); }
.btn--icon { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: var(--radius-full); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.theme-toggle { color: var(--color-text-muted); }
.theme-toggle:hover { color: var(--color-text); }

.mobile-menu-btn { display: flex; color: var(--color-text); }
@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }

/* Mobile Menu */
.mobile-menu {
  display: none; position: fixed; inset: 72px 0 0 0; z-index: 99;
  background: var(--color-bg); padding: var(--space-6) var(--space-4);
  overflow-y: auto;
}
.mobile-menu.open { display: flex; flex-direction: column; gap: var(--space-4); }
.mobile-menu a {
  display: block; padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg); font-weight: 500; color: var(--color-text);
  text-decoration: none; border-radius: var(--radius-lg);
}
.mobile-menu a:hover { background: var(--color-surface); }
/* --- Product Page Mobile Menu (hamburger toggle) --- */
.header__menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none; border: none;
  color: var(--color-text); cursor: pointer; border-radius: var(--radius-lg);
  transition: background 0.2s;
}
.header__menu-btn:hover { background: rgba(184,77,255,0.08); }
@media (min-width: 1024px) { .header__menu-btn { display: none; } }

/* Product page nav — mobile overlay */
.header__nav.nav-open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px);
  z-index: 99;
  background: var(--color-bg);
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
  gap: var(--space-1);
}
.header__nav.nav-open a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  border-radius: var(--radius-lg);
}
.header__nav.nav-open a:hover { background: var(--color-surface); }

body.menu-open { overflow: hidden; }


/* --- Hero Section --- */
.hero {
  padding: clamp(var(--space-12), 8vw, var(--space-24)) 0;
  padding-bottom: clamp(var(--space-8), 5vw, var(--space-16));
}
.hero__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  align-items: center;
}
@media (min-width: 768px) {
  .hero__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); }
}
.hero__headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-3xl); letter-spacing: -0.03em;
  color: var(--color-text); line-height: 1.05;
}
.hero__headline .accent { color: var(--color-primary-bright); }

/* Cycling word animation (Vander Meds style) */
.hero__cycle-wrapper {
  display: inline-block;
  position: relative;
  height: 1.35em;
  overflow: hidden;
  vertical-align: bottom;
}
.hero__cycle {
  display: flex;
  flex-direction: column;
}
.hero__cycle-word {
  display: block;
  height: 1.35em;
  line-height: 1.35;
  color: var(--color-primary-bright);
  font-style: italic;
  white-space: nowrap;
}
.hero__sub {
  font-size: var(--text-base); color: var(--color-text-muted);
  margin-top: var(--space-4); max-width: 520px;
}
.hero__cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__benefits {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface); border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
}
.hero__benefit {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text);
}
.hero__benefit-icon {
  width: 36px; height: 36px; border-radius: var(--radius-lg);
  background: var(--color-surface-blue); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.hero__benefit-icon svg { width: 18px; height: 18px; color: var(--color-primary-bright); }

/* --- Product Category Cards --- */
.categories { padding: var(--space-4) 0 clamp(var(--space-8), 5vw, var(--space-16)); }
.categories__large {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 768px) { .categories__large { grid-template-columns: 1fr 1fr; } }

.cat-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-2xl); padding: var(--space-8);
  background: var(--color-surface-blue-light);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 280px; text-decoration: none; color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s;
}
.cat-card:hover {
  box-shadow: var(--shadow-xl); transform: translateY(-4px);
  border-color: var(--color-primary-bright);
}
.cat-card__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xl); line-height: 1.15;
}
.cat-card__title .highlight { color: var(--color-primary-bright); }
.cat-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); max-width: 280px; }
.cat-card__sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; letter-spacing: 0.02em; font-weight: 500; }
.cat-card__price { font-size: var(--text-sm); color: var(--color-primary-bright); font-weight: 600; margin-top: var(--space-2); }
.cat-card__price-note { font-size: 0.75rem; color: var(--color-text-muted, #6b7280); margin-top: 2px; line-height: 1.35; }

/* Bundle availability strip — site-wide */
.bundle-strip {
  background: var(--color-surface-soft, #f6f8fb);
  border-top: 1px solid var(--color-border, #e5e7eb);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  padding: 14px 0;
}
.bundle-strip__inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--space-4, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.bundle-strip__icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary-bright);
  flex-shrink: 0;
}
.bundle-strip__text {
  font-size: 0.875rem;
  color: var(--color-text, #1f2937);
  line-height: 1.45;
}
.bundle-strip__text strong { color: var(--color-primary-bright); font-weight: 600; }
@media (max-width: 600px) {
  .bundle-strip__text { font-size: 0.8125rem; }
}
.cat-card__img {
  position: absolute; right: 8px; bottom: 8px;
  width: 210px; height: 210px; object-fit: contain;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease-out, filter 0.5s;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}
.cat-card__img.scroll-in {
  opacity: 0.92;
  transform: translateY(0) scale(1);
}
.cat-card:hover .cat-card__img {
  transform: scale(1.08);
  opacity: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15));
}
@media (min-width: 768px) { .cat-card__img { width: 260px; height: 260px; right: 12px; bottom: 12px; } }

/* Three bottles row on Weight Loss category card */
.cat-card__bottles {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; align-items: flex-end; gap: 4px;
  opacity: 0; transform: translateY(20px);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease-out;
}
.cat-card.visible .cat-card__bottles,
.cat-card:hover .cat-card__bottles {
  opacity: 1; transform: translateY(0);
}
.cat-card__bottle {
  width: 120px; height: 120px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.cat-card:hover .cat-card__bottle {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.14));
}
.cat-card:hover .cat-card__bottle:nth-child(1) { transform: translateY(-4px); }
.cat-card:hover .cat-card__bottle:nth-child(2) { transform: translateY(-8px); transition-delay: 0.04s; }
.cat-card:hover .cat-card__bottle:nth-child(3) { transform: translateY(-4px); transition-delay: 0.08s; }
@media (min-width: 768px) {
  .cat-card__bottles { right: 16px; bottom: 16px; gap: 6px; }
  .cat-card__bottle { width: 150px; height: 150px; }
}
@media (min-width: 1024px) {
  .cat-card__bottle { width: 180px; height: 180px; }
}

.categories__small {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (min-width: 640px) { .categories__small { grid-template-columns: 1fr 1fr 1fr; } }

.cat-card--small {
  min-height: 200px; padding: var(--space-6);
  background: var(--color-surface);
}
.cat-card--small .cat-card__title { font-size: var(--text-lg); }
.cat-card--small .cat-card__img { width: 130px; height: 130px; right: 4px; bottom: 4px; }
@media (min-width: 640px) { .cat-card--small .cat-card__img { width: 140px; height: 140px; right: 8px; bottom: 8px; } }
.cat-card__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
  margin-top: var(--space-4);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s;
}
.cat-card:hover .cat-card__arrow {
  transform: translateX(4px);
  background: var(--color-primary-bright);
}
.cat-card__arrow svg { width: 16px; height: 16px; }

/* Dual CTA buttons in carousel cards */
.cat-card__ctas {
  display: flex; gap: 8px; margin-top: var(--space-4); position: relative; z-index: 2;
}
.cat-card__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 1rem; border-radius: var(--radius-full, 999px);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.cat-card__btn--outline {
  background: transparent; color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.cat-card__btn--outline:hover {
  background: var(--color-primary); color: var(--color-text-inverse);
}
.cat-card__btn--solid {
  background: var(--color-primary); color: var(--color-text-inverse);
  border: 1.5px solid var(--color-primary);
}
.cat-card__btn--solid:hover {
  background: var(--color-primary-bright); border-color: var(--color-primary-bright);
}
/* Small carousel card CTA adjustments */
.cat-card--small .cat-card__ctas { gap: 6px; }
.cat-card--small .cat-card__btn { font-size: 0.65rem; padding: 0.35rem 0.7rem; }

/* --- Category Card Carousel (infinite swipe, original card look) --- */
.cat-carousel {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-surface-blue-light);
  border: 1px solid var(--color-border);
  transition: box-shadow 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s;
}
.cat-carousel:hover {
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary-bright);
}
.cat-carousel__viewport {
  overflow: hidden;
}
.cat-carousel__track {
  display: flex;
  will-change: transform;
}
.cat-carousel__track.animating {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Each slide re-uses original .cat-card internal layout */
.cat-carousel__slide {
  position: relative;
  min-width: 100%; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-8);
  min-height: 280px;
  box-sizing: border-box;
  color: var(--color-text);
}
/* Keep text from going behind the bottle */
.cat-carousel__slide > div:first-child {
  position: relative; z-index: 1;
  max-width: 55%;
}
.cat-carousel__slide .cat-card__desc {
  max-width: 100%;
}
/* Bottle inside carousel slides — animate in with card reveal, stay upright */
.cat-carousel__slide .cat-card__img {
  opacity: 0; transform: translateY(30px) scale(0.9);
}
.cat-carousel.visible .cat-carousel__slide .cat-card__img {
  opacity: 0.92; transform: translateY(0) scale(1);
}
.cat-carousel:hover .cat-carousel__slide .cat-card__img {
  transform: scale(1.08); opacity: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15));
}
/* Mobile: give text more room, shrink bottle */
@media (max-width: 767px) {
  .cat-carousel__slide > div:first-child {
    max-width: 60%;
  }
  .cat-carousel__slide .cat-card__img {
    width: 170px; height: 170px;
    right: 4px; bottom: 4px;
  }
}
/* Small carousel variant — symmetrical layout across all 3 cards */
.cat-carousel--small { background: var(--color-surface); }
.cat-carousel--small .cat-carousel__slide {
  min-height: 260px; height: 260px;
  padding: var(--space-6);
  display: flex; flex-direction: column;
}
.cat-carousel--small .cat-carousel__slide > div:first-child {
  max-width: 58%; flex: 1 1 auto;
}
.cat-carousel--small .cat-card__title { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.cat-carousel--small .cat-card__desc {
  font-size: var(--text-xs);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: var(--space-2);
}
.cat-carousel--small .cat-card__price { font-size: var(--text-sm); }
.cat-carousel--small .cat-card__ctas {
  flex-shrink: 0; margin-top: auto;
  position: relative; z-index: 2;
}
.cat-carousel--small .cat-card__img {
  width: 120px; height: 120px;
  position: absolute; right: 12px;
  top: 50%; transform: translateY(-55%);
}
@media (min-width: 640px) {
  .cat-carousel--small .cat-card__img { width: 130px; height: 130px; right: 16px; }
}
@media (max-width: 639px) {
  .cat-carousel--small .cat-carousel__slide > div:first-child { max-width: 55%; }
  .cat-carousel--small .cat-card__img { right: 8px; width: 110px; height: 110px; }
}
/* Dots — centered below viewport */
.cat-carousel__dots {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-5);
}
.cat-carousel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border);
  border: none; padding: 0; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.cat-carousel__dot.active {
  background: var(--color-primary-bright);
  transform: scale(1.35);
}

/* --- Trust Bar (Scrolling Ticker) --- */
.trust-bar {
  background: var(--color-primary); overflow: hidden;
  padding: var(--space-4) 0; position: relative;
}
.trust-bar__track {
  display: flex; gap: var(--space-12); white-space: nowrap;
  animation: ticker 15s linear infinite;
}
.trust-bar__item {
  font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: 600; color: rgba(255,255,255,0.9);
  display: flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
}
.trust-bar__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================
   WEIGHT LOSS SECTION (Vander-style)
   ============================================ */
.wl-section { padding: clamp(var(--space-8), 5vw, var(--space-16)) 0; }

/* Hero Banner */
.wl-hero {
  position: relative; border-radius: var(--radius-2xl); overflow: hidden;
  min-height: 380px; display: flex; align-items: center;
}
@media (min-width: 768px) { .wl-hero { min-height: 440px; } }
.wl-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 80% center;
}
@media (max-width: 767px) {
  .wl-hero { min-height: 420px; }
  .wl-hero__img { object-position: 75% center; }
  .wl-hero::after {
    background: linear-gradient(to right, rgba(45,27,78,0.92) 0%, rgba(45,27,78,0.7) 55%, rgba(45,27,78,0.3) 80%, transparent 100%);
  }
}
.wl-hero__overlay {
  position: relative; z-index: 2; padding: var(--space-8);
  max-width: 540px;
}
@media (min-width: 768px) { .wl-hero__overlay { padding: var(--space-12); } }
.wl-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(45,27,78,0.88) 0%, rgba(45,27,78,0.65) 45%, rgba(45,27,78,0.15) 75%, transparent 100%);
}
.wl-hero__tag {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-primary-light); margin-bottom: var(--space-2);
}
.wl-hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); letter-spacing: -0.02em;
  line-height: 1.1; color: white;
}
.wl-hero__title em {
  font-style: italic; color: var(--color-primary-light);
}
.wl-hero__sub {
  font-size: var(--text-base); color: rgba(255,255,255,0.8);
  margin-top: var(--space-3); margin-bottom: var(--space-5);
}

/* WL Hero staggered slide-in reveal */
.wl-reveal {
  opacity: 0;
  transform: translateX(-60px) translateY(8px);
  filter: blur(6px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1),
              filter 0.8s cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--reveal-i, 0) * 0.15s + 0.2s);
}
.wl-hero.visible .wl-reveal {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
}

/* Three Cards Row */
.wl-cards {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-4); margin-top: var(--space-4);
}
@media (min-width: 768px) { .wl-cards { grid-template-columns: 1fr 1fr 1fr; } }

.wl-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl); padding: var(--space-6);
  display: flex; flex-direction: column;
}
.wl-card__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); margin-bottom: var(--space-4); line-height: 1.2;
}

/* Goal Quiz Card */
.wl-quiz__options { display: flex; flex-direction: column; gap: var(--space-2); }
.wl-quiz__opt {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border); background: var(--color-bg);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text);
  text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.wl-quiz__opt:hover {
  border-color: var(--color-primary-bright); background: var(--color-surface-blue-light);
  transform: translateY(-1px);
}
.wl-quiz__opt.selected {
  border-color: var(--color-primary-bright); background: var(--color-surface-blue);
  color: var(--color-primary);
}
.wl-quiz__cta {
  display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-text-inverse);
  font-size: var(--text-sm); font-weight: 700; text-align: center;
  text-decoration: none; margin-top: var(--space-1);
  transition: background 0.2s, transform 0.2s;
}
.wl-quiz__cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); }

/* Product Carousel Card */
.wl-product__carousel { position: relative; text-align: center; flex: 1; }
.wl-product__slide {
  display: none; flex-direction: column; align-items: center;
  animation: wlFadeIn 0.4s ease;
}
.wl-product__slide.active { display: flex; }
@keyframes wlFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.wl-product__img { width: 160px; height: 200px; object-fit: contain; margin-bottom: var(--space-3); }
.wl-product__name { font-weight: 700; font-size: var(--text-base); }
.wl-product__sub { font-size: var(--text-xs); color: var(--color-text-faint); font-style: italic; margin-top: var(--space-1); }
.wl-product__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; margin-top: var(--space-2); max-width: 280px; margin-inline: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wl-product__price { font-size: var(--text-sm); color: var(--color-primary-bright); font-weight: 600; margin-top: var(--space-1); }

.wl-product__nav {
  display: flex; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-3);
}
.wl-product__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--color-border); background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.wl-product__arrow:hover {
  border-color: var(--color-primary-bright); color: var(--color-primary-bright);
  background: var(--color-surface-blue-light);
}
.wl-product__arrow svg { width: 18px; height: 18px; }
.wl-product__actions {
  display: flex; gap: var(--space-2); justify-content: center;
  margin-top: var(--space-4);
}

/* Stats Card */
.wl-stats__big {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); color: var(--color-primary);
  text-align: center; line-height: 1;
}
.wl-stats__chart {
  display: flex; align-items: flex-end; justify-content: center;
  gap: var(--space-2); margin-top: var(--space-4);
  height: 160px; flex: 1;
}
.wl-stats__bar-group {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; height: 100%;
  justify-content: flex-end;
}
.wl-stats__bar {
  width: 100%; max-width: 52px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-primary); display: flex;
  align-items: flex-start; justify-content: center;
  padding-top: var(--space-2); min-height: 40px;
  transition: height 0.8s cubic-bezier(0.16,1,0.3,1);
}
.wl-stats__bar span {
  font-size: var(--text-xs); font-weight: 700; color: white;
}
.wl-stats__bar--dashed {
  background: transparent;
  border: 2px dashed var(--color-primary);
}
.wl-stats__bar--dashed span { color: var(--color-primary); }
.wl-stats__label {
  font-size: 0.65rem; color: var(--color-text-faint); margin-top: var(--space-1);
  font-style: italic;
}
.wl-stats__disclaimer {
  font-size: 0.6rem; color: var(--color-text-faint); text-align: center;
  margin-top: var(--space-3); font-style: italic;
}

/* --- Feature Banner --- */
.feature-banner {
  padding: clamp(var(--space-12), 8vw, var(--space-24)) 0;
}
.feature-banner__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  align-items: center;
}
@media (min-width: 768px) {
  .feature-banner__inner { grid-template-columns: 1fr 1fr; }
  .feature-banner--reverse .feature-banner__inner { direction: rtl; }
  .feature-banner--reverse .feature-banner__inner > * { direction: ltr; }
}
.feature-banner__tag {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-primary-bright);
  margin-bottom: var(--space-2);
}
.feature-banner__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); letter-spacing: -0.02em;
  line-height: 1.1;
}
.feature-banner__desc {
  font-size: var(--text-base); color: var(--color-text-muted);
  margin-top: var(--space-4); max-width: 480px;
}
.feature-banner__products {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-top: var(--space-6);
}
.product-mini {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-4);
  text-align: center; text-decoration: none; color: var(--color-text);
}
.product-mini:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-mini__img {
  width: 80px; height: 100px; object-fit: contain; margin: 0 auto var(--space-2);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease-out;
  opacity: 0;
  transform: translateY(20px) scale(0.85);
}
@media (max-width: 767px) {
  .product-mini__img { width: 64px; height: 80px; }
}
.product-mini__img.scroll-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.product-mini__name { font-weight: 600; font-size: var(--text-sm); }
.product-mini__sub { font-size: 0.7rem; color: var(--color-text-faint); margin-top: var(--space-1); font-style: italic; }
.product-mini__desc { font-size: 0.7rem; color: var(--color-text-muted); line-height: 1.45; margin-top: var(--space-1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-mini__price { font-size: var(--text-xs); color: var(--color-primary-bright); font-weight: 600; margin-top: var(--space-1); }

.feature-banner__visual {
  background: var(--color-surface-blue-light); border-radius: var(--radius-2xl);
  padding: var(--space-8); display: flex; align-items: center; justify-content: center;
  min-height: 320px; position: relative; overflow: hidden;
}
.feature-banner__visual img {
  max-width: 100%; max-height: 280px; object-fit: contain;
}

/* Layered visual — lifestyle bg + bottle fg */
.feature-banner__visual--layered {
  position: relative; overflow: hidden;
}
.feature-banner__visual--layered .visual-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; max-height: none;
  filter: brightness(1.2);
  z-index: 0;
  transition: opacity 1s ease 0.2s, transform 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s;
  transform: scale(1.08);
}
.feature-banner__visual--layered .visual-fg {
  position: absolute; z-index: 1;
  bottom: 16px; right: 16px;
  max-height: 220px; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
  opacity: 0;
  transform: translateY(30px) scale(0.92);
  transition: opacity 0.8s ease 0.5s, transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.5s, filter 0.5s;
}
/* Animate in when parent enters view */
.feature-banner__visual--layered.in-view .visual-bg {
  opacity: 0.4; transform: scale(1);
}
/* Color-reveal variant: JS controls opacity/filter, CSS just handles initial transform */
[data-color-reveal].in-view .visual-bg {
  opacity: 0.4; transform: scale(1);
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.feature-banner__visual--layered.in-view .visual-fg {
  opacity: 1; transform: translateY(0) scale(1);
}
.feature-banner__visual--layered .visual-fg:hover {
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.18));
  transform: translateY(-4px) scale(1.03);
}
/* Glow bottle — bottom left */
.visual-fg--left { right: auto; left: 16px; }
@media (max-width: 767px) {
  .feature-banner__visual--layered .visual-fg { max-height: 160px; bottom: 12px; right: 12px; }
  .visual-fg--left { right: auto; left: 12px; }
}
/* Mobile: show visual above text content */
@media (max-width: 767px) {
  .feature-banner--reverse .feature-banner__visual { order: -1; min-height: 220px; }
  .feature-banner { padding: clamp(var(--space-8), 5vw, var(--space-16)) 0; }
  .feature-banner__visual { min-height: 240px; padding: var(--space-6); }
}

/* Full-width products row below 2-col grid */
.feature-banner__products-full {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
}
.feature-banner__products-full .feature-banner__products {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 767px) {
  .feature-banner__products-full .feature-banner__products {
    grid-template-columns: 1fr 1fr;
  }
}

/* Stat cards inside feature banners */
.stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); }
.stat-card {
  background: var(--color-surface-blue-light); border-radius: var(--radius-xl);
  padding: var(--space-4); text-align: center;
}
.stat-card__number {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xl); color: var(--color-primary-bright);
}
.stat-card__label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* --- How It Works (Vander-style with images) --- */
.how-it-works { padding: clamp(var(--space-12), 8vw, var(--space-24)) 0; }
.section-header { text-align: center; margin-bottom: var(--space-12); }
.section-tag {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-primary-bright);
  margin-bottom: var(--space-3);
}
.section-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); letter-spacing: -0.02em;
}
.section-desc {
  font-size: var(--text-base); color: var(--color-text-muted);
  margin-top: var(--space-3); max-width: 560px; margin-inline: auto;
}

.hiw-heading {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-3xl); letter-spacing: -0.03em;
  text-align: center;
}

.hiw-steps {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) { .hiw-steps { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); } }

.hiw-step { position: relative; }

.hiw-step__img-wrap {
  border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-4);
}
.hiw-step__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.hiw-step:hover .hiw-step__img {
  transform: scale(1.04);
}

.hiw-step__num {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xs); color: var(--color-text-faint);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.hiw-step__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xl); letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-2);
}

.hiw-step__desc {
  font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: 1.6;
}

.hiw-cta {
  text-align: center;
  margin-top: var(--space-12);
}

/* --- Testimonials --- */
.testimonials {
  padding: clamp(var(--space-12), 8vw, var(--space-24)) 0;
  background: var(--color-surface);
}
.testimonials__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 640px) { .testimonials__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .testimonials__grid { grid-template-columns: 1fr 1fr 1fr; } }

.testimonial {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl); padding: var(--space-6);
}
.testimonial__stars { display: flex; gap: 2px; margin-bottom: var(--space-3); }
.testimonial__stars svg { width: 16px; height: 16px; color: #F59E0B; fill: #F59E0B; }
.testimonial__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--space-4); }
.testimonial__author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(184,77,255,0.15), rgba(114,14,236,0.1)); display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  color: var(--color-primary-bright);
}
.testimonial__name { font-weight: 600; font-size: var(--text-sm); }
.testimonial__product { font-size: var(--text-xs); color: var(--color-text-faint); }

/* --- FAQ --- */
.faq { padding: clamp(var(--space-12), 8vw, var(--space-24)) 0; }
.faq__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  max-width: 800px; margin-inline: auto;
}
.faq-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  overflow: hidden; background: var(--color-bg);
}
.faq-item__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-text); text-align: left; cursor: pointer;
  background: transparent;
}
.faq-item__question:hover { background: var(--color-surface); }
.faq-item__icon {
  width: 24px; height: 24px; flex-shrink: 0;
  transition: transform 0.3s; color: var(--color-text-muted);
}
.faq-item.open .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
  max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
}
.faq-item.open .faq-item__answer { max-height: 500px; }
.faq-item__answer-inner {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7;
}

/* --- CTA Banner --- */
.cta-banner {
  padding: clamp(var(--space-12), 6vw, var(--space-20)) 0;
}
.cta-banner__inner {
  background: linear-gradient(135deg, var(--color-primary) 0%, #720EEC 50%, #B84DFF 100%);
  border-radius: var(--radius-2xl); padding: clamp(var(--space-8), 6vw, var(--space-16));
  text-align: center; color: white; position: relative; overflow: hidden;
}
.cta-banner__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45,27,78,0.72) 0%, rgba(114,14,236,0.65) 50%, rgba(184,77,255,0.6) 100%);
  z-index: 1;
}
.cta-banner__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); letter-spacing: -0.02em; position: relative; z-index: 2;
}
.cta-banner__desc {
  font-size: var(--text-base); opacity: 0.9;
  margin-top: var(--space-3); max-width: 480px; margin-inline: auto; position: relative; z-index: 2;
}
.cta-banner__actions { margin-top: var(--space-6); position: relative; z-index: 2; }
.btn--white { background: white; color: var(--color-primary); }
.btn--white:hover { background: #F8FAFC; transform: translateY(-1px); box-shadow: var(--shadow-lg); }

/* --- Footer (Condensed) --- */
.footer {
  padding: var(--space-10) 0 var(--space-6);
  background: var(--color-surface);
  border-top: 1px solid rgba(45, 27, 78, 0.08);
  color: var(--color-text);
}

/* Top row: brand | nav | socials */
.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}
@media (min-width: 768px) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: var(--space-6);
  }
}

/* Brand name — Playfair Display serif, matching Vander Meds style */
.footer__brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.footer__brand-name:hover { color: var(--color-primary-bright); }

/* Nav links — horizontal row */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}
.footer__nav a {
  font-size: var(--text-sm);
  color: rgba(26, 18, 37, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--color-primary-bright); }

/* Socials */
.footer__socials { display: flex; gap: var(--space-3); flex-shrink: 0; }
.footer__socials a { color: rgba(26, 18, 37, 0.45); transition: color 0.2s; }
.footer__socials a:hover { color: var(--color-primary-bright); }
.footer__socials svg { width: 18px; height: 18px; }

/* Mid row: address + legal links inline */
.footer__mid {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(45, 27, 78, 0.06);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: rgba(26, 18, 37, 0.5);
  text-align: center;
}
.footer__mid a {
  color: rgba(26, 18, 37, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__mid a:hover { color: var(--color-primary-bright); }
.footer__mid-sep { color: rgba(26, 18, 37, 0.2); }

/* Copyright */
.footer__copy {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: rgba(26, 18, 37, 0.4);
  text-align: center;
}

/* LegitScript Badge */
.footer__legitscript {
  margin-top: var(--space-4);
  text-align: center;
}
.footer__legitscript img {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.footer__legitscript img:hover {
  opacity: 1;
}

/* Disclaimer */
.footer__disclaimer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(45, 27, 78, 0.05);
  font-size: 0.65rem;
  color: rgba(26, 18, 37, 0.35);
  line-height: 1.6;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.footer__disclaimer p + p { margin-top: var(--space-2); }

/* ============================================
   SCROLL ANIMATIONS — Dynamic Entrances
   ============================================ */

/* Base hidden state for all animated elements */
[data-anim] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 0.85s;
  will-change: transform, opacity;
}
[data-anim].in-view { opacity: 1; transform: none; filter: none; }

/* Direction variants */
[data-anim="up"]    { transform: translateY(50px); }
[data-anim="down"]  { transform: translateY(-40px); }
[data-anim="left"]  { transform: translateX(-60px); }
[data-anim="right"] { transform: translateX(60px); }
[data-anim="scale"] { transform: scale(0.85); }
[data-anim="blur"]  { transform: translateY(30px); filter: blur(8px); }
[data-anim="fade"]  { transform: none; }
[data-anim="zoom-rotate"] { transform: scale(0.7) rotate(-8deg); }
[data-anim="flip"]  { transform: perspective(600px) rotateY(-15deg) translateX(-30px); }

/* Stagger delays via data-delay attribute */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }

/* Legacy .reveal support */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Bottles scroll-in (no continuous float) */

/* Parallax wrapper for WL hero — smooth transition */
.wl-hero__img { transition: none; }

/* Counter animation pulse */
@keyframes counterPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.wl-stats__big.counted { animation: counterPop 0.5s cubic-bezier(0.16,1,0.3,1); }

/* CTA glow pulse */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,77,255,0); }
  50% { box-shadow: 0 0 40px 8px rgba(184,77,255,0.25); }
}
.cta-banner__inner.in-view { animation: ctaGlow 3s ease-in-out infinite 1s; }

/* HIW step cards stagger entrance */
.hiw-step[data-anim].in-view { transition-duration: 0.9s; }

/* Testimonial card lift on entrance */
.testimonial[data-anim].in-view {
  transition-duration: 0.8s;
}

/* Section header text reveal */
.section-title[data-anim], .section-tag[data-anim] {
  transition-duration: 0.7s;
}

/* Product mini scroll-in (no continuous float) */

/* Reveal delay classes for staggered entrance */
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }

/* WL cards entrance */
.wl-card[data-anim] { transition-duration: 0.8s; }

/* --- Pharmacy Partners --- */
.partners { padding: clamp(var(--space-8), 4vw, var(--space-12)) 0; }
.partners__grid {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center; align-items: center;
}
.partner-badge {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted);
  display: flex; align-items: center; gap: var(--space-2);
}
.partner-badge svg { width: 16px; height: 16px; color: var(--color-accent-green); }

/* --- LegitScript Badge --- */
.legitscript {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-green);
}
.legitscript svg { width: 18px; height: 18px; }

/* ============================================
   SOCIAL PROOF COUNTER
   ============================================ */
.social-proof {
  padding: clamp(var(--space-8), 3vw, var(--space-12)) 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.social-proof::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(184,77,255,0.2) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(184,77,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.social-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
  max-width: 680px; margin: 0 auto;
  align-items: center;
  text-align: center;
  position: relative;
}
.social-proof__stat {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-2);
}
.social-proof__number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  position: relative;
}
.social-proof__number::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  background: var(--color-primary-bright);
  border-radius: 2px;
  margin: var(--space-3) auto 0;
}
.social-proof__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Trustpilot box */
.social-proof__trustpilot {
  display: flex; align-items: center; justify-content: center;
}
.social-proof__tp-link {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-2);
  text-decoration: none; color: inherit;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.social-proof__tp-link:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
.social-proof__tp-stars {
  display: flex; gap: 2px;
}
.social-proof__tp-stars svg {
  width: 20px; height: 20px;
  fill: #00B67A;
}
.social-proof__tp-text {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}
.social-proof__tp-logo {
  width: 120px; height: auto;
  color: #fff;
}

/* Counter count-up animation pop */
@keyframes counterReveal {
  0% { opacity: 0; transform: translateY(20px) scale(0.9); }
  60% { transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.social-proof__number.counted {
  animation: counterReveal 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .social-proof__number {
    font-size: clamp(2rem, 1.2rem + 3vw, 2.8rem);
  }
}

/* ============================================
   PREMIUM VISUAL POLISH (merged from premium.css)
   ============================================ */

/* ============================================
   MADISON MEDS — Premium Visual Polish Layer
   Glossy effects, refined animations, depth
   ============================================ */

/* --- Premium Easing Curves --- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ============================================
   HEADER — Frosted Glass Upgrade
   ============================================ */
.header {
  background: rgba(253, 251, 255, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(228, 220, 240, 0.5);
}
.header__nav a {
  position: relative;
}
.header__nav a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%; width: 0; height: 2px;
  background: var(--color-primary-bright);
  border-radius: 1px;
  transition: width 0.35s var(--ease-out-expo), left 0.35s var(--ease-out-expo);
}
.header__nav a:hover::after {
  width: 100%; left: 0;
}

/* ============================================
   BUTTONS — Glossy, Depth, Shimmer
   ============================================ */
.btn--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #5B21B6 50%, var(--color-primary-hover) 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.25), 0 1px 2px rgba(45, 27, 78, 0.15), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background-position 0.5s var(--ease-smooth), transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 55%, transparent 65%);
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position 0.7s var(--ease-out-expo);
}
.btn--primary:hover::before {
  background-position: -100% 0;
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 6px 20px rgba(45, 27, 78, 0.35), 0 2px 6px rgba(45, 27, 78, 0.2), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

.btn--white {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}
.btn--white::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.6) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position 0.7s var(--ease-out-expo);
}
.btn--white:hover::before {
  background-position: -100% 0;
}

/* ============================================
   HERO — Gradient Text, Refined Entrance
   ============================================ */
.hero__cycle-word {
  background: linear-gradient(135deg, var(--color-primary-bright) 0%, #9333EA 40%, #7C3AED 70%, var(--color-primary-bright) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero__headline .accent {
  background: linear-gradient(135deg, var(--color-primary-bright) 0%, #A855F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero benefits card — glassmorphism */
.hero__benefits {
  background: rgba(248, 245, 250, 0.65);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(228, 220, 240, 0.6);
  box-shadow: 0 8px 32px rgba(45, 27, 78, 0.06), 0 1px 2px rgba(45, 27, 78, 0.04);
}

.hero__benefit-icon {
  background: linear-gradient(135deg, var(--color-surface-blue) 0%, #EDE9FE 100%);
  box-shadow: 0 2px 8px rgba(184, 77, 255, 0.12);
}

/* ============================================
   CATEGORY CARDS — Glossy Glass Treatment
   ============================================ */
.cat-card,
.cat-carousel {
  background: linear-gradient(145deg, rgba(250, 245, 255, 0.95) 0%, rgba(243, 232, 255, 0.6) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(228, 220, 240, 0.7);
  box-shadow: 0 4px 16px rgba(45, 27, 78, 0.05), 0 1px 3px rgba(45, 27, 78, 0.04);
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), border-color 0.4s;
}
.cat-card:hover,
.cat-carousel:hover {
  box-shadow: 0 16px 48px rgba(45, 27, 78, 0.12), 0 4px 12px rgba(184, 77, 255, 0.08);
  border-color: rgba(184, 77, 255, 0.4);
  transform: translateY(-6px);
}

/* Glossy inner shine on large cards */
.cat-carousel::before,
.cat-card:not(.cat-card--small)::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  pointer-events: none; z-index: 0;
}

/* Mouse-follow radial glow on carousel cards (desktop) */
.cat-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(184, 77, 255, 0.06), transparent 40%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s;
}
.cat-carousel:hover::after {
  opacity: 1;
}
/* Mouse-follow glow on wl-cards */
.wl-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(184, 77, 255, 0.05), transparent 40%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s;
}
.wl-card:hover::after {
  opacity: 1;
}

/* Small card glass */
.cat-card--small,
.cat-carousel--small {
  background: linear-gradient(145deg, rgba(248, 245, 250, 0.9) 0%, rgba(240, 237, 244, 0.7) 100%);
  box-shadow: 0 2px 12px rgba(45, 27, 78, 0.04), 0 1px 2px rgba(45, 27, 78, 0.03);
}

/* Bottle shadow enhancement */
.cat-card__img {
  filter: drop-shadow(0 6px 16px rgba(45, 27, 78, 0.1));
}
.cat-card__img.scroll-in {
  filter: drop-shadow(0 8px 24px rgba(45, 27, 78, 0.12));
}
.cat-card:hover .cat-card__img,
.cat-carousel:hover .cat-card__img {
  filter: drop-shadow(0 12px 32px rgba(45, 27, 78, 0.18));
}

/* Carousel dots — refined */
.cat-carousel__dot {
  width: 7px; height: 7px;
  background: rgba(45, 27, 78, 0.15);
  transition: background 0.35s, transform 0.35s var(--ease-spring), width 0.35s var(--ease-out-expo);
  border-radius: 4px;
}
.cat-carousel__dot.active {
  background: var(--color-primary-bright);
  transform: scale(1);
  width: 20px;
  border-radius: 4px;
}

/* ============================================
   CAROUSEL — Smoother Slide Transition
   ============================================ */
.cat-carousel__track.animating {
  transition: transform 0.55s var(--ease-out-quint);
}

/* ============================================
   TRUST BAR — Glossy Depth
   ============================================ */
.trust-bar {
  background: linear-gradient(135deg, var(--color-primary) 0%, #3D1B6E 50%, #4C1D95 100%);
  box-shadow: 0 4px 20px rgba(45, 27, 78, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}
.trust-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.trust-bar__item {
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ============================================
   WEIGHT LOSS HERO — Cinematic Gradient
   ============================================ */
.wl-hero::after {
  background: linear-gradient(
    105deg,
    rgba(45, 27, 78, 0.92) 0%,
    rgba(45, 27, 78, 0.78) 30%,
    rgba(76, 29, 149, 0.45) 60%,
    rgba(45, 27, 78, 0.1) 80%,
    transparent 100%
  );
}
@media (max-width: 767px) {
  .wl-hero::after {
    background: linear-gradient(
      to right,
      rgba(45, 27, 78, 0.95) 0%,
      rgba(45, 27, 78, 0.8) 40%,
      rgba(76, 29, 149, 0.5) 70%,
      transparent 100%
    );
  }
}

/* ============================================
   WEIGHT LOSS CARDS — Glossy Treatment
   ============================================ */
.wl-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-surface) 0%, rgba(248, 245, 250, 0.8) 100%);
  box-shadow: 0 4px 16px rgba(45, 27, 78, 0.05), 0 1px 3px rgba(45, 27, 78, 0.04);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.wl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 27, 78, 0.1), 0 4px 8px rgba(45, 27, 78, 0.06);
}

/* Stats bar chart — gradient bars */
.wl-stats__bar {
  background: linear-gradient(180deg, var(--color-primary-bright) 0%, var(--color-primary) 100%);
  box-shadow: 0 2px 8px rgba(184, 77, 255, 0.2);
}
.wl-stats__bar--dashed {
  background: transparent;
  box-shadow: none;
}

/* Product carousel image — soft glow */
.wl-product__img {
  filter: drop-shadow(0 6px 20px rgba(45, 27, 78, 0.1));
  transition: transform 0.5s var(--ease-out-expo), filter 0.5s;
}

/* ============================================
   FEATURE BANNERS — Refined Visual
   ============================================ */
.feature-banner__visual {
  background: linear-gradient(145deg, rgba(250, 245, 255, 0.9) 0%, rgba(243, 232, 255, 0.5) 100%);
  box-shadow: 0 8px 32px rgba(45, 27, 78, 0.06);
  border: 1px solid rgba(228, 220, 240, 0.4);
}

/* Lifestyle image — soft vignette overlay */
.feature-banner__visual--layered::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(250, 245, 255, 0.5) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* Product mini cards — subtle glass */
.product-mini {
  background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, var(--color-surface) 100%);
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.04), 0 1px 2px rgba(45, 27, 78, 0.03);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.3s;
}
.product-mini:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45, 27, 78, 0.1), 0 2px 6px rgba(45, 27, 78, 0.06);
  border-color: rgba(184, 77, 255, 0.3);
}

/* ============================================
   HOW IT WORKS — Image Polish
   ============================================ */
.hiw-step__img-wrap {
  box-shadow: 0 8px 24px rgba(45, 27, 78, 0.08);
  transition: box-shadow 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.hiw-step:hover .hiw-step__img-wrap {
  box-shadow: 0 16px 40px rgba(45, 27, 78, 0.14);
  transform: translateY(-4px);
}

.hiw-step__num {
  color: var(--color-primary-bright);
  opacity: 0.7;
}

/* ============================================
   TESTIMONIALS — Glass Cards
   ============================================ */

/* ============================================
   SOCIAL PROOF — Premium Depth
   ============================================ */
.social-proof {
  background: linear-gradient(135deg, var(--color-primary) 0%, #3D1B6E 40%, #4C1D95 70%, #5B21B6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.social-proof::before {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(184, 77, 255, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 40%);
}
.social-proof__number {
  text-shadow: 0 2px 16px rgba(184, 77, 255, 0.3);
}
.social-proof__number::after {
  background: linear-gradient(90deg, transparent, var(--color-primary-bright), transparent);
  height: 2px;
  width: 48px;
}

/* Trustpilot card — glass */
.social-proof__tp-link {
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.social-proof__tp-link:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ============================================
   CTA BANNER — Vivid Gradient + Glass
   ============================================ */
.cta-banner__inner {
  background: linear-gradient(135deg, var(--color-primary) 0%, #5B21B6 30%, #7C3AED 60%, var(--color-primary-bright) 100%);
  background-size: 200% 200%;
  animation: ctaGradient 8s ease infinite;
  box-shadow: 0 16px 48px rgba(45, 27, 78, 0.25), 0 4px 12px rgba(184, 77, 255, 0.15);
}
@keyframes ctaGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cta-banner__inner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 40%);
  border-radius: inherit;
  pointer-events: none;
}

/* ============================================
   FAQ — Refined
   ============================================ */
.faq-item {
  background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, var(--color-surface) 100%);
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.03);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.faq-item:hover {
  box-shadow: 0 4px 16px rgba(45, 27, 78, 0.06);
  border-color: rgba(184, 77, 255, 0.2);
}
.faq-item.open {
  box-shadow: 0 8px 24px rgba(45, 27, 78, 0.08);
  border-color: rgba(184, 77, 255, 0.3);
}

/* ============================================
   PARTNERS — Badge Glow
   ============================================ */
.partner-badge {
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s, background 0.3s;
}
.partner-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45, 27, 78, 0.08);
  background: var(--color-surface-blue-light);
}

.legitscript {
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-5);
  background: rgba(22, 163, 74, 0.04);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}
.legitscript:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.1);
}

/* ============================================
   SCROLL ANIMATIONS — Premium Reveal System
   ============================================ */

/* Override base animations with smoother curves */
[data-anim] {
  transition-duration: 1s;
  transition-timing-function: var(--ease-out-quint);
}
[data-anim="blur"] {
  transform: translateY(40px);
  filter: blur(12px);
}
[data-anim="up"] {
  transform: translateY(60px);
}
[data-anim="down"] {
  transform: translateY(-50px);
}
[data-anim="left"] {
  transform: translateX(-80px);
}
[data-anim="right"] {
  transform: translateX(80px);
}
[data-anim="scale"] {
  transform: scale(0.8);
  filter: blur(4px);
}
[data-anim="zoom-rotate"] {
  transform: scale(0.65) rotate(-10deg);
  filter: blur(4px);
}
[data-anim="flip"] {
  transform: perspective(600px) rotateY(-20deg) translateX(-40px);
  filter: blur(2px);
}

/* Clean reveal state */
[data-anim].in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Enhanced stagger delays */
[data-delay="1"] { transition-delay: 0.12s; }
[data-delay="2"] { transition-delay: 0.24s; }
[data-delay="3"] { transition-delay: 0.36s; }
[data-delay="4"] { transition-delay: 0.48s; }
[data-delay="5"] { transition-delay: 0.6s; }
[data-delay="6"] { transition-delay: 0.72s; }

/* Legacy reveal — smoother */
.reveal {
  transition-duration: 0.9s;
  transition-timing-function: var(--ease-out-quint);
}

/* Bottle scroll-in — refined spring entrance */
.cat-card__img,
.product-mini__img {
  transition-duration: 0.9s;
  transition-timing-function: var(--ease-spring);
}

/* ============================================
   FOOTER — Refined
   ============================================ */
.footer {
  background: var(--color-surface);
}

/* ============================================
   AMBIENT BACKGROUND — Subtle Gradient Orbs
   ============================================ */
.hero::before {
  content: '';
  position: absolute; top: -20%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(184, 77, 255, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute; bottom: -10%; left: -5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: float 10s ease-in-out infinite reverse;
}
.hero {
  position: relative;
  overflow: hidden;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(20px, -30px); }
  66% { transform: translate(-15px, 15px); }
}

/* Feature banner ambient orb */
.feature-banner {
  position: relative;
}

/* ============================================
   ARROW CIRCLES — Polished
   ============================================ */
.cat-card__arrow {
  background: linear-gradient(135deg, var(--color-primary) 0%, #5B21B6 100%);
  box-shadow: 0 2px 8px rgba(45, 27, 78, 0.2);
  transition: transform 0.4s var(--ease-spring), background 0.3s, box-shadow 0.3s;
}
.cat-card:hover .cat-card__arrow,
.cat-carousel:hover .cat-card__arrow {
  background: linear-gradient(135deg, var(--color-primary-bright) 0%, #9333EA 100%);
  transform: translateX(4px) scale(1.08);
  box-shadow: 0 4px 16px rgba(184, 77, 255, 0.35);
}

/* WL product arrows */
.wl-product__arrow {
  transition: all 0.3s var(--ease-out-expo);
}
.wl-product__arrow:hover {
  border-color: var(--color-primary-bright);
  color: var(--color-primary-bright);
  background: var(--color-surface-blue-light);
  box-shadow: 0 2px 8px rgba(184, 77, 255, 0.15);
  transform: scale(1.08);
}

/* ============================================
   QUIZ OPTIONS — Refined Interaction
   ============================================ */
.wl-quiz__opt {
  transition: all 0.35s var(--ease-out-expo);
}
.wl-quiz__opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 77, 255, 0.1);
}
.wl-quiz__opt.selected {
  box-shadow: 0 4px 16px rgba(184, 77, 255, 0.15);
  transform: translateY(-1px);
}

/* ============================================
   GLOBAL — Smooth page-level polish
   ============================================ */

/* Smoother image hover on all interactive containers */
a:has(img):hover img,
.hiw-step:hover img {
  transition: transform 0.6s var(--ease-out-expo);
}

/* Price color refinement — add slight glow */
.cat-card__price,
.product-mini__price,
.wl-product__price {
  text-shadow: 0 0 20px rgba(184, 77, 255, 0.15);
}

/* Section tags — refined tracking */
.feature-banner__tag,
.section-tag,
.wl-hero__tag {
  letter-spacing: 0.1em;
}

/* ============================================
   MOBILE — Premium Mobile Polish
   ============================================ */
@media (max-width: 767px) {
  /* Reduce ambient effects on mobile for performance */
  .hero::before, .hero::after {
    display: none;
  }
  
  /* Tighter card shadows on mobile */
  .cat-card:hover, .cat-carousel:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(45, 27, 78, 0.1);
  }
  
  /* Subtle touch feedback */
  .cat-card:active, .cat-carousel:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
  }
  .btn--primary:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
  }

  /* Smooth scroll snap feel on mobile */
  .cat-carousel__viewport {
    scroll-snap-type: x mandatory;
  }
}

/* ============================================
   REDUCED MOTION — Respect preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  .cta-banner__inner,
  .hero__cycle-word {
    animation: none;
  }
  .btn--primary::before, .btn--white::before {
    display: none;
  }
}

/* ============================================
   BMI CALCULATOR CARD
   ============================================ */
.wl-card--bmi {
  position: relative;
  overflow: hidden;
}
.wl-card--bmi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(184, 77, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.wl-card--bmi > * { position: relative; z-index: 1; }

.bmi-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  animation: bmiFade 0.45s var(--ease-out-expo);
}
.bmi-view[hidden] { display: none; }

@keyframes bmiFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.bmi-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-1);
}

.bmi-field { display: flex; flex-direction: column; gap: var(--space-2); }
.bmi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bmi-height { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.bmi-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl, 1rem);
  padding: 0 var(--space-4);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.bmi-input-wrap:focus-within {
  border-color: var(--color-primary-bright);
  box-shadow: 0 0 0 4px rgba(184, 77, 255, 0.12);
  background: var(--color-surface);
}
.bmi-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: var(--space-3) 0;
  font-family: inherit;
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--color-text);
  outline: none;
  -moz-appearance: textfield;
}
.bmi-input::-webkit-outer-spin-button,
.bmi-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bmi-input::placeholder { color: var(--color-text-muted); font-weight: 400; opacity: 0.6; }
.bmi-unit {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  padding-left: var(--space-2);
}

.bmi-submit {
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.bmi-submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(184, 77, 255, 0.25);
}
.bmi-submit:active:not(:disabled) { transform: translateY(0); }
.bmi-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* Result view */
.bmi-gauge {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0 auto var(--space-2);
  aspect-ratio: 200 / 120;
}
.bmi-gauge__svg { width: 100%; height: 100%; overflow: visible; }
.bmi-gauge__fill {
  transition: stroke-dashoffset 1.2s var(--ease-out-expo);
}
.bmi-gauge__number {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.bmi-gauge__number > span:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.bmi-gauge__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.bmi-category {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  align-self: center;
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.bmi-category__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-primary-bright);
  box-shadow: 0 0 0 4px rgba(184, 77, 255, 0.15);
  transition: background 0.4s, box-shadow 0.4s;
}
.bmi-category__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

/* Category color states */
.bmi-category[data-cat="underweight"] { background: #EFF6FF; border-color: #BFDBFE; }
.bmi-category[data-cat="underweight"] .bmi-category__dot { background: #60A5FA; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2); }

.bmi-category[data-cat="healthy"] { background: #F0FDF4; border-color: #BBF7D0; }
.bmi-category[data-cat="healthy"] .bmi-category__dot { background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); }

.bmi-category[data-cat="overweight"] { background: #FEF9C3; border-color: #FDE68A; }
.bmi-category[data-cat="overweight"] .bmi-category__dot { background: #EAB308; box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.2); }

.bmi-category[data-cat="obesity"] { background: #FEF2F2; border-color: #FECACA; }
.bmi-category[data-cat="obesity"] .bmi-category__dot { background: #EF4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); }

.bmi-message {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

.bmi-cta {
  display: block;
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.bmi-cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(184, 77, 255, 0.28);
}

.bmi-reset {
  margin-top: var(--space-1);
  padding: var(--space-2);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.bmi-reset:hover { color: var(--color-primary-bright); }

/* Dark mode tweaks */
@media (prefers-color-scheme: dark) {
  .bmi-category[data-cat="underweight"] { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.3); }
  .bmi-category[data-cat="healthy"] { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); }
  .bmi-category[data-cat="overweight"] { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.3); }
  .bmi-category[data-cat="obesity"] { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); }
}

/* ===== Testimonials typicality disclosure (FTC compliance) ===== */
.testimonials__disclosure {
  margin-top: var(--space-8, 2rem);
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.6;
  color: var(--color-text-muted, #6b6478);
  background: rgba(248, 245, 250, 0.6);
  border-radius: var(--radius-lg, 14px);
  border: 1px solid rgba(45, 27, 78, 0.06);
  text-align: left;
}
.testimonials__disclosure strong {
  color: var(--color-primary, #2D1B4E);
  font-weight: 600;
}

/* ============================================
   MOBILE-FIRST OPTIMIZATION PASS
   (applied 2026-04-18)
   - Tighter hero spacing at <480px
   - Larger touch targets (44×44 minimum)
   - Improved readability + fit for 375px viewports
   ============================================ */

/* -------- Small mobile (<480px) -------- */
@media (max-width: 479px) {
  /* Shrink the cycling word so "Anti-Aging Peptides" fits 375px on one line.
     Keep wrapper animation intact: fixed-height window with overflow hidden. */
  .hero__headline {
    font-size: clamp(1.75rem, 7.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  .hero__cycle-word {
    font-size: inherit;
    line-height: 1.25;
    height: 1.25em;
  }
  .hero__cycle-wrapper {
    height: 1.25em;
    max-width: 100%;
    vertical-align: top;
  }
  .hero {
    padding: var(--space-10) 0 var(--space-8);
  }
  .hero__sub {
    font-size: 1rem;
    line-height: 1.55;
  }

  /* Treatments hero */
  .tx-hero {
    padding: calc(72px + var(--space-8)) 0 var(--space-8) !important;
  }
  .tx-hero__title {
    font-size: clamp(1.875rem, 8vw, 2.4rem) !important;
    line-height: 1.12 !important;
    padding: 0 var(--space-3);
  }
  .tx-hero__sub {
    font-size: 0.95rem !important;
    padding: 0 var(--space-3);
  }

  /* Product page hero — reduce top gap on phones */
  main[style*="padding-top"] {
    padding-top: calc(60px + var(--space-4)) !important;
  }
  .product-back { margin-bottom: var(--space-4); }
  .product-hero { gap: var(--space-6); padding-bottom: var(--space-10); }
  .product-hero__img-wrap {
    padding: var(--space-6);
    max-width: 260px;
  }
  .product-hero__img { max-width: 170px; }
  .product-hero__title {
    font-size: clamp(1.875rem, 8vw, 2.4rem);
  }
}

/* -------- Standard mobile (<768px) -------- */
@media (max-width: 767px) {
  /* Tighter section padding across the board */
  .categories { padding: var(--space-2) 0 var(--space-10); }

  /* Hero CTA — full-width button for easy tapping */
  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__cta { width: 100%; }

  /* Touch targets — 44×44 minimum */
  .header__search-btn,
  .mobile-menu-btn,
  .header__menu-btn,
  .header__search-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Category card buttons — meet 44px tap target */
  .cat-card__btn {
    min-height: 44px;
    padding-inline: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Footer nav links — vertical padding for tap */
  .footer__nav a {
    padding: var(--space-3) var(--space-2);
    display: inline-block;
    font-size: 0.95rem;
    min-height: 44px;
    line-height: 1.5;
  }
  .footer__nav { gap: var(--space-1) var(--space-3); }

  /* Footer socials — bigger icons and tap area */
  .footer__socials a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer__socials svg { width: 22px; height: 22px; }
  .footer__socials { gap: var(--space-2); }

  /* Legal/mid links tap area */
  .footer__mid a,
  .footer__legal a {
    padding: var(--space-2) var(--space-1);
    display: inline-block;
    min-height: 40px;
  }

  /* Primary button — ensure 44px minimum height */
  .btn--primary, .btn--outline, .btn--white {
    min-height: 44px;
  }

  /* Treatments filter: fade mask so users see it scrolls horizontally */
  .tx-filter__inner {
    padding: 0 var(--space-4);
    scroll-padding-inline: var(--space-4);
  }
  .tx-filter__btn {
    min-height: 40px;
    padding: 8px 18px;
  }

  /* Treatments category title size */
  .tx-category__name {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
  }

  /* Treatments bottom CTA — full-width button for easy tap */
  .tx-cta__btn {
    width: 100%;
    justify-content: center;
    padding: 14px var(--space-6);
    min-height: 48px;
  }

  /* Product page: back link tap area */
  .product-back {
    padding: var(--space-2) 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Product CTA button full-width on mobile */
  .product-hero__cta .btn,
  .product-hero__cta a {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* Body line-height for readability */
  p, .product-section__text, .hero__sub {
    line-height: 1.65;
  }

  /* Prevent font inflation on iOS */
  html { -webkit-text-size-adjust: 100%; }

  /* Remove horizontal overflow safety */
  body, html { overflow-x: hidden; }

  /* FDA notice callout — tighter padding on mobile */
  .fda-notice {
    padding: var(--space-4) var(--space-4);
    font-size: 0.9rem;
  }
  .fda-notice__title { font-size: 0.95rem; }

  /* Smooth tap-highlight color */
  a, button {
    -webkit-tap-highlight-color: rgba(184, 77, 255, 0.15);
  }
}

/* ============================================
   PREMIUM POLISH PASS (2026-04-18)
   Scroll experience + transitions + motion
   ============================================ */

/* --- Scroll progress bar (top of page) --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    var(--color-primary) 0%,
    var(--color-primary-bright) 50%,
    #d4a5ff 100%);
  box-shadow: 0 0 10px rgba(184, 77, 255, 0.5);
  transition: width 80ms linear;
  will-change: width;
  border-radius: 0 2px 2px 0;
}

/* --- Tuned data-anim initial + in-view states --- */
[data-anim] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 900ms;
  will-change: opacity, transform;
}
[data-anim="up"]   { transform: translate3d(0, 28px, 0); }
[data-anim="down"] { transform: translate3d(0, -28px, 0); }
[data-anim="left"] { transform: translate3d(-28px, 0, 0); }
[data-anim="right"]{ transform: translate3d(28px, 0, 0); }
[data-anim="fade"] { transform: none; }
[data-anim="blur"] {
  filter: blur(10px);
  transform: translate3d(0, 12px, 0);
}
[data-anim="scale"]{ transform: scale(0.96); }
[data-anim].in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}
/* Stagger via data-delay */
[data-delay="1"].in-view { transition-delay: 80ms; }
[data-delay="2"].in-view { transition-delay: 160ms; }
[data-delay="3"].in-view { transition-delay: 240ms; }
[data-delay="4"].in-view { transition-delay: 320ms; }
[data-delay="5"].in-view { transition-delay: 400ms; }

/* --- Header: smoother scroll-based state change --- */
.header {
  transition: background 400ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 400ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.header.scrolled {
  background: rgba(250, 248, 252, 0.82);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  box-shadow: 0 4px 30px rgba(45, 27, 78, 0.08), 0 1px 0 rgba(45, 27, 78, 0.04);
}
/* Hide header when scrolling down, show when scrolling up */
.header.hidden {
  transform: translateY(-100%);
}

/* --- Premium button interactions --- */
.btn--primary, .btn--outline, .btn--white, .btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
              background 280ms cubic-bezier(0.22, 1, 0.36, 1),
              color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(45, 27, 78, 0.22),
                0 4px 10px rgba(184, 77, 255, 0.25);
  }
  .btn--outline:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(45, 27, 78, 0.12);
  }
}
.btn--primary:active, .btn--outline:active, .btn--white:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 100ms;
}

/* Button shine sweep on hover */
@media (hover: hover) and (pointer: fine) {
  .btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 1;
  }
  .btn--primary:hover::after {
    transform: translateX(120%);
  }
  .btn--primary > * { position: relative; z-index: 2; }
}

/* --- Card lift system (universal) --- */
@media (hover: hover) and (pointer: fine) {
  .cat-card,
  .cat-carousel,
  .wl-card,
  .tx-card,
  .benefit-card {
    transform: translateZ(0);
  }
  .cat-card:hover,
  .cat-carousel:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(45, 27, 78, 0.14),
                0 8px 20px rgba(45, 27, 78, 0.06);
    border-color: rgba(184, 77, 255, 0.18);
  }
  .tx-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(45, 27, 78, 0.15),
                0 10px 25px rgba(45, 27, 78, 0.08);
    border-color: rgba(184, 77, 255, 0.22);
  }
  .benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(45, 27, 78, 0.1);
  }
}

/* --- Link underline elegance --- */
@media (hover: hover) and (pointer: fine) {
  .footer__nav a,
  .footer__mid a,
  .footer__legal a {
    position: relative;
  }
  .footer__nav a::after {
    content: '';
    position: absolute;
    left: var(--space-2, 0.5rem);
    right: var(--space-2, 0.5rem);
    bottom: calc(var(--space-3, 0.75rem) - 2px);
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .footer__nav a:hover::after {
    transform: scaleX(1);
  }
}

/* --- Image loading / aspect lock --- */
.cat-card__img,
.cat-card__bottle,
.product-hero__img,
.tx-card__img,
.blog-card__img,
img[loading="lazy"] {
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Page-load fade-in choreography --- */
html:not(.page-loaded) [data-anim] {
  /* Hold state until page is ready so no pop-in */
  transition: none;
}
html.page-loaded [data-anim] {
  transition-property: opacity, transform, filter;
}

/* --- Subtle lift on all sticky/fixed surfaces --- */
.header,
.tx-filter.scrolled {
  will-change: transform, background;
}

/* --- Section entrance choreography --- */
section {
  scroll-margin-top: 88px;
}

/* --- Anchor-aware focus ring (less harsh) --- */
:focus-visible {
  outline: 2px solid var(--color-primary-bright);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(184, 77, 255, 0.12);
}

/* --- Crisp text on retina with GPU --- */
.hero__headline,
.wl-hero__title,
.tx-hero__title,
.product-hero__title,
.product-section__title,
.cta-banner__title {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* --- Smooth horizontal scroll for carousels --- */
.cat-carousel__viewport,
.tx-filter__inner {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.cat-carousel__item {
  scroll-snap-align: start;
}
.tx-filter__btn {
  scroll-snap-align: start;
}

/* --- Reduce reflow cost on hover transforms --- */
.cat-card__img,
.tx-card__img,
.hero__benefit-icon {
  will-change: transform;
}

/* --- Tighten transitions for reduced-motion users --- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress__bar { transition: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
}