/**
 * Design Upgrade — Premium Aesthetic Layer
 * Applies high-end design tokens and component refinements over main.css.
 * Font: Plus Jakarta Sans (replaces Inter)
 * Vibe: Soft Structuralism — airy, deep, premium medical.
 */

/* ═══════════════════════════════════════════════════
   1. DESIGN TOKENS OVERRIDE
   ═══════════════════════════════════════════════════ */

:root {
  /* Font */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Colors — refined tints */
  --brand-color: #1B3B5C;
  --brand-deep: #122840;
  --primary-light: #2A6299;
  --bg-body: #F5F8FC;
  --bg-section: #EDF2F8;
  --bg-alt: #EDF2F8;
  --bg-card: #FFFFFF;

  /* Colored shadows — navy-tinted, no harsh black */
  --shadow-sm: 0 2px 12px rgba(27, 59, 92, .07);
  --shadow-md: 0 6px 28px rgba(27, 59, 92, .11);
  --shadow-lg: 0 14px 56px rgba(27, 59, 92, .16);
  --shadow-xl: 0 24px 80px rgba(27, 59, 92, .22);
  --shadow-header: 0 1px 16px rgba(27, 59, 92, .08);

  /* Spring + fluid transitions */
  --transition: 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  --transition-slow: 0.48s cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Radius — bigger, more premium */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Aliases */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-full: 999px;

  /* Legacy variable fixes — eliminates purple fallbacks */
  --color-heading: #1B3B5C;
  --brand-purple: #1B3B5C;
  --color-primary: #1B3B5C;
  --color-primary-dark: #122840;
  --brand-primary: #1B3B5C;
}


/* ═══════════════════════════════════════════════════
   2. TYPOGRAPHY — Plus Jakarta Sans
   ═══════════════════════════════════════════════════ */

body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero__title,
.section__title,
.doctor-profile__name {
  font-family: var(--font-family);
  text-wrap: balance;
  letter-spacing: -0.02em;
}

.hero__title {
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.section__title {
  letter-spacing: -0.025em;
}

p {
  text-wrap: pretty;
}


/* ═══════════════════════════════════════════════════
   3. GRAIN / NOISE TEXTURE (fixed overlay, no scroll cost)
   ═══════════════════════════════════════════════════ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}


/* ═══════════════════════════════════════════════════
   4. BUTTONS — pill shape, spring physics
   ═══════════════════════════════════════════════════ */

.btn {
  border-radius: var(--r-sm);
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform 0.18s var(--spring);
  font-family: var(--font-family);
  letter-spacing: -0.01em;
}

.btn:active {
  transform: scale(0.97) translateY(1px);
}

.btn--primary {
  background: var(--color-accent);
  box-shadow: 0 2px 14px rgba(220, 54, 70, .28);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 24px rgba(220, 54, 70, .38);
  transform: translateY(-2px);
}

.btn--secondary,
.btn--brand {
  background: var(--brand-color);
  box-shadow: 0 2px 14px rgba(27, 59, 92, .28);
}

.btn--secondary:hover,
.btn--brand:hover {
  background: var(--brand-deep);
  box-shadow: 0 4px 24px rgba(27, 59, 92, .38);
  transform: translateY(-2px);
}

.btn--outline {
  border-color: rgba(27, 59, 92, .18);
  border-radius: var(--r-sm);
}

.btn--outline:hover {
  border-color: var(--accent-orange);
  box-shadow: 0 4px 20px rgba(255, 130, 27, .28);
}

.btn--whatsapp {
  box-shadow: 0 2px 14px rgba(37, 211, 102, .28);
}

.btn--whatsapp:hover {
  box-shadow: 0 4px 24px rgba(37, 211, 102, .38);
  transform: translateY(-2px);
}

.btn--telegram {
  box-shadow: 0 2px 14px rgba(42, 171, 238, .28);
}

.btn--telegram:hover {
  box-shadow: 0 4px 24px rgba(42, 171, 238, .38);
  transform: translateY(-2px);
}

.header__cta.btn--primary,
.mobile-menu__cta.btn--primary {
  border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════════════════════
   5. HEADER — refined floating feel
   ═══════════════════════════════════════════════════ */

.header {
  box-shadow: var(--shadow-header);
  border-bottom: 1px solid rgba(27, 59, 92, .06);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .96);
}

.header__license-badge {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(27, 59, 92, .12);
  padding: 4px 12px 4px 8px;
  font-size: 12px;
  transition: background var(--transition), border-color var(--transition);
}

.header__license-badge:hover {
  background: rgba(27, 59, 92, .05);
}

.header__trust-badge {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(27, 59, 92, .1);
  padding: 6px 14px;
  transition: box-shadow var(--transition), transform var(--transition);
}

.header__trust-badge:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Nav menu links — animated underline */
.nav-menu li a {
  position: relative;
  transition: color var(--transition);
  font-family: var(--font-family);
}

.nav-menu li a {
  position: relative;
}

.nav-menu li>a {
  position: relative;
  padding: 12px 18px;
}

.nav-menu li a::after {
  content: '';
  position: absolute;
  left: auto;
  right: 18px;
  bottom: 35px;
  width: 0;
  height: 2px;
  background: rgba(255, 255, 255, .7);
  border-radius: 2px;
  transition: width var(--transition);
}

.nav-menu li a:hover::after,
.nav-menu li.current-menu-item>a::after {
  width: 100%;
  bottom: 0;
  right: 0;
}


/* ═══════════════════════════════════════════════════
   6. HERO — depth + radial ambient light
   ═══════════════════════════════════════════════════ */

.hero--home {
  background: linear-gradient(135deg, #4A7AAD 0%, #2C5A8A 32%, #1B3B5C 100%);
}

.hero--home::after {
  background:
    radial-gradient(ellipse 60% 80% at 75% 40%, rgba(95, 168, 211, .18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 70%, rgba(255, 255, 255, .06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .12) 100%);
}

/* Page hero — subtle gradient bg instead of flat white */
.hero--page {
  background: linear-gradient(160deg, #f5f8fc 0%, #edf2f8 100%);
  border-bottom: 1px solid rgba(27, 59, 92, .07);
}

.hero__title {
  font-weight: 800;
}


/* ═══════════════════════════════════════════════════
   7. CARDS — double-bezel, colored shadows
   ═══════════════════════════════════════════════════ */

/* Service card */
.service-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 59, 92, .07);
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition);
}

.service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

/* Doctor card — double-bezel */
.doctor-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 59, 92, .07);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition);
  overflow: visible;
}

.doctor-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.doctor-card__photo {
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
  overflow: hidden;
}

.doctor-card__photo img {
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.doctor-card:hover .doctor-card__photo img {
  transform: scale(1.06);
}

.doctor-card__badge {
  border-radius: var(--radius-pill);
}

/* Contact card */
.contact-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 59, 92, .07);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition);
}

.contact-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.contact-card__icon {
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #edf2f8 0%, #dde8f4 100%);
}


/* ═══════════════════════════════════════════════════
   8. SECTION HEADERS — eyebrow tag pattern
   ═══════════════════════════════════════════════════ */

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: rgba(27, 59, 92, .07);
  color: var(--brand-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════
   9. CALLBACK / CTA BLOCK — elevated treatment
   ═══════════════════════════════════════════════════ */

.callback-block,
.section--callback {
  border-radius: var(--radius-xl);
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════
   10. FOOTER — refined
   ═══════════════════════════════════════════════════ */

.footer__heading {
  letter-spacing: -0.015em;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
}


/* ═══════════════════════════════════════════════════
   11. MOBILE MENU — glass panel
   ═══════════════════════════════════════════════════ */

.mobile-menu {
  backdrop-filter: blur(24px);
}


/* ═══════════════════════════════════════════════════
   12. FORMS — pill inputs
   ═══════════════════════════════════════════════════ */

.modal input[type="text"],
.modal input[type="tel"],
.modal input[type="email"],
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.callback-form__input,
.modal-form input {
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(27, 59, 92, .15);
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: var(--font-family);
}

.modal input:focus,
.wpcf7-form input:focus,
.callback-form__input:focus,
.modal-form input:focus {
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(27, 59, 92, .1);
  outline: none;
}

.modal {
  border-radius: var(--radius-xl);
}


/* ═══════════════════════════════════════════════════
   13. SCROLL REVEAL — initial state
   Animated by design-upgrade.js via IntersectionObserver
   ═══════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.72s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.72s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 {
  transition-delay: 0.08s;
}

.reveal--delay-2 {
  transition-delay: 0.16s;
}

.reveal--delay-3 {
  transition-delay: 0.24s;
}

.reveal--delay-4 {
  transition-delay: 0.32s;
}


/* ═══════════════════════════════════════════════════
   14. BACK-TO-TOP — pill shape
   ═══════════════════════════════════════════════════ */

.back-to-top {
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition), transform var(--transition);
}

.back-to-top:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}


/* ═══════════════════════════════════════════════════
   15. DOCTOR PROFILE PAGE — premium hero
   ═══════════════════════════════════════════════════ */

.doctor-profile {
  background: linear-gradient(160deg, #f0f5fb 0%, #e6eef8 100%);
}

.doctor-profile__photo {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.doctor-profile__name {
  letter-spacing: -0.03em;
}

.doctor-profile__meta-item {
  border-radius: var(--radius-pill);
  background: rgba(27, 59, 92, .06);
  padding: 4px 12px 4px 8px;
  font-size: 13px;
  transition: background var(--transition);
}

.doctor-profile__meta-item:hover {
  background: rgba(27, 59, 92, .10);
}

.doctor-profile__expertise-tag {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(27, 59, 92, .12);
  transition: background var(--transition), border-color var(--transition);
}

.doctor-profile__expertise-tag:hover {
  background: rgba(27, 59, 92, .06);
}

.doctor-facts-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 59, 92, .07);
  box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════════════════
   16. STICKY CTA BAR — pill treatment
   ═══════════════════════════════════════════════════ */

.sticky-cta {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -4px 24px rgba(27, 59, 92, .12);
}

.sticky-cta__btn {
  border-radius: var(--radius-sm);
  transition: filter var(--transition);
}

.sticky-cta__btn:hover {
  filter: brightness(1.08);
}


/* ═══════════════════════════════════════════════════
   17. SMOOTH SCROLL
   ═══════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}


/* ═══════════════════════════════════════════════════
   18. FOCUS RING — accessible + premium
   ═══════════════════════════════════════════════════ */

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


/* ═══════════════════════════════════════════════════
   19. SERVICE CARD TAG & MORE BUTTON
   ═══════════════════════════════════════════════════ */

.service-card__tag {
  border-radius: var(--radius-pill);
}

.service-card__more {
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.service-card:hover .service-card__more {
  box-shadow: 0 4px 14px rgba(27, 59, 92, .2);
}


/* ═══════════════════════════════════════════════════
   20. REVIEW CARDS
   ═══════════════════════════════════════════════════ */

.review-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(27, 59, 92, .07) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.review-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
}


/* ═══════════════════════════════════════════════════
   21. SECTION — subtle ambient gradient backgrounds
   ═══════════════════════════════════════════════════ */

.section--alt,
.section--reviews {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%);
}


/* ═══════════════════════════════════════════════════
   22. HOME — FEATURES SECTION (dark navy bg, white cards)
   ═══════════════════════════════════════════════════ */

.section--home-features {
  background: linear-gradient(160deg, #1B3B5C 0%, #112840 60%, #0D1F30 100%);
  position: relative;
  overflow: hidden;
}

/* Ambient light blob behind the section */
.section--home-features::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 90% 10%, rgba(95, 168, 211, .10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 5% 90%, rgba(255, 255, 255, .04) 0%, transparent 55%);
  pointer-events: none;
}

.section--home-features .section__title {
  letter-spacing: -0.03em;
  font-weight: 800;
}

.section--home-features .section__subtitle {
  opacity: 0.72;
  font-size: 1.05rem;
}

/* Feature cards — elevated from flat to double-bezel */
.home-feature-item {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 8px 32px rgba(0, 0, 0, .22);
  border-radius: var(--radius-lg);
  transition:
    background var(--transition),
    box-shadow var(--transition-slow),
    transform var(--transition);
  backdrop-filter: blur(4px);
}

.home-feature-item:hover {
  background: rgba(255, 255, 255, .10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 16px 48px rgba(0, 0, 0, .32);
  transform: translateY(-6px);
}

/* Icon container — gradient pill */
.home-feature-item__icon {
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(95, 168, 211, .25) 0%, rgba(42, 98, 153, .35) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background var(--transition);
}

.home-feature-item:hover .home-feature-item__icon {
  background: linear-gradient(135deg, rgba(95, 168, 211, .35) 0%, rgba(42, 98, 153, .45) 100%);
}

.home-feature-item__title {
  letter-spacing: -0.02em;
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════
   23. HOME — COUNTERS SECTION
   ═══════════════════════════════════════════════════ */

.section--counters {
  background: linear-gradient(135deg, #122840 0%, #1B3B5C 50%, #1E4470 100%);
  position: relative;
  overflow: hidden;
}

.section--counters::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(95, 168, 211, .12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 50%, rgba(255, 255, 255, .04) 0%, transparent 50%);
  pointer-events: none;
}

.counters-grid {
  position: relative;
}

.counter-item {
  position: relative;
}

/* Divider between items */
.counter-item+.counter-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(255, 255, 255, .10);
}

.counter-item__icon i {
  opacity: 0.7;
}

/* Large tabular numbers — premium stat look */
.counter-item__number {
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  font-weight: 800;
  background: linear-gradient(180deg, #fff 40%, rgba(255, 255, 255, .65) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.counter-item__suffix {
  letter-spacing: -0.02em;
  font-weight: 700;
  background: linear-gradient(180deg, #fff 40%, rgba(255, 255, 255, .65) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.counter-item__text {
  color: rgba(255, 255, 255, .72);
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .counter-item+.counter-item::before {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════
   24. HOME — ABOUT SECTION (editorial split)
   ═══════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .home-about__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
  }
}

@media (min-width: 1024px) {
  .home-about__inner {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
  }
}

.home-about__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
}

.home-about__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(27, 59, 92, .08) inset;
  pointer-events: none;
}

.home-about__image img {
  transition: transform 0.8s cubic-bezier(0.32, 0.72, 0, 1);
  border-radius: inherit;
}

.home-about__image:hover img {
  transform: scale(1.04);
}

.home-about__content h2 {
  letter-spacing: -0.03em;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}

.home-about__content p {
  color: rgba(0, 0, 0, .62);
}

.home-about__btn {
  border-radius: var(--radius-pill);
}


/* ═══════════════════════════════════════════════════
   25. HOME — HERO FEATURE (video preview + waves)
   ═══════════════════════════════════════════════════ */

.hero-feature {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.hero-feature img {
  transition: transform 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}

.hero-feature:hover img {
  transform: scale(1.03);
}

.hero-feature__play-btn {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, .18),
    0 8px 32px rgba(0, 0, 0, .24);
  transition:
    transform 0.28s var(--spring),
    box-shadow var(--transition);
  color: var(--brand-color);
}

.hero-feature__play-btn:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, .12),
    0 12px 40px rgba(0, 0, 0, .28);
}

.hero-feature__badge {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}


/* ═══════════════════════════════════════════════════
   26. HOME — PROCESS STEPS / NAV CARDS
   ═══════════════════════════════════════════════════ */

.nav-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 59, 92, .07);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition);
}

.nav-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.promo-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 59, 92, .07);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition);
}

.promo-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.article-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(27, 59, 92, .07);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition);
}

.article-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}


/* ═══════════════════════════════════════════════════
   27. RESPONSIVE — mobile adjustments
   ═══════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .reveal {
    transform: translateY(16px);
  }

  .doctor-card:hover,
  .service-card:hover,
  .contact-card:hover,
  .home-feature-item:hover,
  .nav-card:hover,
  .promo-card:hover,
  .article-card:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════
   28. STEPS BLOCK — enhanced dark card
   ═══════════════════════════════════════════════════ */

.steps-block {
  background: linear-gradient(135deg, #112840 0%, var(--brand-color) 60%, #1e4a73 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.steps-block::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .05) 0%, transparent 70%);
  pointer-events: none;
}

.steps__number {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-xl);
  backdrop-filter: blur(4px);
  transition: background var(--transition);
}

.steps__item:hover .steps__number {
  background: rgba(255, 255, 255, .2);
}

.steps__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}

.steps__item+.steps__item {
  padding-top: var(--sp-xl);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ═══════════════════════════════════════════════════
   29. ABOUT TIMELINE — brand color fix + polish
   ═══════════════════════════════════════════════════ */

.timeline::before {
  background: linear-gradient(to bottom, var(--brand-color), rgba(27, 59, 92, .15));
}

.timeline__marker {
  background: var(--brand-color);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--brand-color), 0 4px 12px rgba(27, 59, 92, .22);
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.timeline__item:hover .timeline__marker {
  transform: scale(1.25);
}

.timeline__year {
  background: var(--brand-color);
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.timeline__content {
  background: #fff;
  border: 1px solid rgba(27, 59, 92, .08);
  box-shadow: 0 2px 16px rgba(27, 59, 92, .07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.timeline__item:hover .timeline__content {
  box-shadow: 0 6px 28px rgba(27, 59, 92, .12);
  transform: translateY(-2px);
}

.timeline__title {
  color: var(--brand-color);
  font-weight: 700;
  font-size: var(--fs-lg);
}

.timeline__text {
  color: var(--text-muted, #6b7280);
  line-height: 1.65;
}

/* Treatment timeline — same brand fix */
.treatment-timeline::before {
  background: linear-gradient(to bottom, var(--brand-color), rgba(27, 59, 92, .1));
  width: 2px;
}

.treatment-timeline__marker {
  box-shadow: 0 2px 10px rgba(27, 59, 92, .25);
}

/* ═══════════════════════════════════════════════════
   30. ADVANTAGES SECTION — gradient upgrade
   ═══════════════════════════════════════════════════ */

.section--advantages {
  background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%);
  position: relative;
  overflow: hidden;
}

.section--advantages::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 120% at 90% 50%, rgba(95, 168, 211, .1) 0%, transparent 60%);
  pointer-events: none;
}

.section--advantages .section__title {
  position: relative;
}

.advantages-row {
  position: relative;
}

.advantage-item {
  position: relative;
}

.advantage-item+.advantage-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255, 255, 255, .12);
}

.advantage-item__number {
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

/* ═══════════════════════════════════════════════════
   31. BENEFIT CARDS — polish
   ═══════════════════════════════════════════════════ */

.benefit-card {
  border: 1px solid rgba(27, 59, 92, .07);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slow), transform var(--transition);
}

.benefit-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.benefit-card__icon {
  background: linear-gradient(135deg, rgba(95, 168, 211, .18) 0%, rgba(27, 59, 92, .12) 100%);
  transition: background var(--transition);
}

.benefit-card:hover .benefit-card__icon {
  background: linear-gradient(135deg, rgba(95, 168, 211, .28) 0%, rgba(27, 59, 92, .22) 100%);
}

/* ═══════════════════════════════════════════════════
   32. PHONE CTA — brand-aligned colors
   ═══════════════════════════════════════════════════ */

.section--phone-cta {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%);
}

.phone-cta__phone {
  background: var(--brand-color);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 28px rgba(27, 59, 92, .22);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.phone-cta__phone:hover {
  background: var(--brand-deep);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(27, 59, 92, .3);
}

.phone-cta__messenger {
  background: var(--brand-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 12px rgba(27, 59, 92, .14);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.phone-cta__messenger:hover {
  background: var(--brand-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27, 59, 92, .22);
}

/* ═══════════════════════════════════════════════════
   33. CONSULT CTA — button hover upgrade
   ═══════════════════════════════════════════════════ */

.consult-cta__btn {
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.consult-cta__btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}

.consult-cta {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════
   34. FAQ ACCORDION — card-style upgrade
   ═══════════════════════════════════════════════════ */

.faq {
  padding: 0;
  gap: 10px;
}

.faq__item {
  border: 1px solid rgba(27, 59, 92, .09);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.faq__item:first-child {
  border-top: 1px solid rgba(27, 59, 92, .09);
}

.faq__item--open {
  box-shadow: var(--shadow-md);
}

.faq__question {
  padding: 16px 20px;
  font-size: var(--fs-base);
  border-radius: var(--radius-sm);
}

.faq__icon {
  border-radius: var(--radius-xs);
  border-color: rgba(27, 59, 92, .2);
  width: 28px;
  height: 28px;
}

.faq__answer-inner {
  padding: 0 20px 16px;
}

/* ═══════════════════════════════════════════════════
   35. MEGAMENU — brand navy alignment
   ═══════════════════════════════════════════════════ */

.nav-menu>li.has-megamenu>.sub-menu {
  background: var(--brand-color) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 8px 32px rgba(27, 59, 92, .22);
}

.nav-menu>li.has-megamenu>.sub-menu>li>.sub-menu {
  background: var(--brand-deep) !important;
}

/* ═══════════════════════════════════════════════════
   36. GLOBAL PURPLE → NAVY BRAND FIX
   ═══════════════════════════════════════════════════ */

/* Footer background (main.css uses #2E2751 !important) */
.footer {
  /* background: linear-gradient(170deg, #0d2035 0%, var(--brand-color) 60%, #1a4876 100%) !important; */
}

/* Megamenu sub-menu (duplicate safety, already in section 35) */
.nav-menu>li.has-megamenu>.sub-menu {
  background: var(--brand-color) !important;
}

/* Article-card __more button */
.article-card__more {
  color: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
}

.article-card__link:hover .article-card__more,
.promo-card:hover .promo-card__more {
  background: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
}

/* Phone CTA specific messenger overrides */
.phone-cta__messenger--tg,
.phone-cta__messenger--wa {
  background: var(--brand-color) !important;
}

.phone-cta--gradient {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-color) 100%);
}

/* Doctor appointment section */
.section--doctor-appoint,
.section--doctor-appointment {
  background: linear-gradient(135deg, var(--brand-deep) 0%, #1a4876 100%);
}

/* ═══════════════════════════════════════════════════
   37. HOME ARTICLE CARDS — design system alignment
   ═══════════════════════════════════════════════════ */

.home-article-card__link {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slow), transform var(--transition);
}

.home-article-card__link:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.home-article-card__image--placeholder {
  background: linear-gradient(135deg, var(--brand-deep) 0%, #1a4876 100%);
}

.home-article-card__overlay {
  background: linear-gradient(transparent 0%, rgba(10, 24, 42, .82) 100%);
}

.home-article-card__title {
  font-family: var(--font-family);
  letter-spacing: -0.01em;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════
   38. PHONE CONSULT — premium treatment
   ═══════════════════════════════════════════════════ */

.section--phone-consult {
  position: relative;
  overflow: hidden;
}

.section--phone-consult::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 150% at 100% 50%, rgba(255, 255, 255, .06) 0%, transparent 60%);
  pointer-events: none;
}

.phone-consult__phone {
  transition: opacity var(--transition), transform var(--transition);
}

.phone-consult__phone:hover {
  opacity: 1;
  transform: scale(1.03);
}

/* ═══════════════════════════════════════════════════
   39. CITIES LIST — brand color bullet + subtle hover
   ═══════════════════════════════════════════════════ */

.cities-list__item::before {
  color: var(--brand-color);
}

.cities-list__item {
  transition: color var(--transition);
}

.cities-list__item:hover {
  color: var(--brand-color);
}

/* ═══════════════════════════════════════════════════
   40. CLINIC RATING CARDS — shadow + border upgrade
   ═══════════════════════════════════════════════════ */

.clinic-rating-card {
  box-shadow: var(--shadow-sm);
  border-color: rgba(27, 59, 92, .08);
  transition:
    border-color var(--transition),
    box-shadow var(--transition-slow),
    transform var(--transition);
}

.clinic-rating-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-color);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   41. FILTER TAGS — brand active state (not red)
   ═══════════════════════════════════════════════════ */

.filter-tags__item:hover,
.filter-tags__item--active {
  background: var(--brand-color) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════
   42. PRICE NAV — frosted sticky bar upgrade
   ═══════════════════════════════════════════════════ */

.section--price-nav {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(27, 59, 92, .08) !important;
  box-shadow: 0 2px 16px rgba(27, 59, 92, .06);
}

.price-nav__item {
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.price-nav__item--active {
  background: var(--brand-color) !important;
  color: #fff !important;
  border-color: var(--brand-color) !important;
}

/* ═══════════════════════════════════════════════════
   43. ABOUT GALLERY SLIDER — brand hover (not purple)
   ═══════════════════════════════════════════════════ */

.about-gallery-slider .swiper-button-prev:hover,
.about-gallery-slider .swiper-button-next:hover {
  background: var(--brand-color) !important;
}

/* ═══════════════════════════════════════════════════
   44. LEAVE-REVIEW CTA — navy-tinted background
   ═══════════════════════════════════════════════════ */

.section--leave-review {
  background: linear-gradient(135deg, #f5f8fc 0%, #e8f0f8 100%) !important;
}

/* ═══════════════════════════════════════════════════
   45. EXPERT QUOTE — shadow + border upgrade
   ═══════════════════════════════════════════════════ */

.expert-quote {
  box-shadow: var(--shadow-md);
  border-left-width: 5px;
  border-left-color: var(--brand-color);
}

.expert-quote__mark {
  opacity: .18;
}

/* ═══════════════════════════════════════════════════
   46. COMPARISON TABLE — header gradient
   ═══════════════════════════════════════════════════ */

.comparison-table thead th {
  background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-color) 100%) !important;
}

.comparison-table thead th:first-child {
  background: var(--brand-deep) !important;
}

.comparison-table tbody tr:hover {
  background: rgba(27, 59, 92, .04) !important;
}

/* ═══════════════════════════════════════════════════
   47. PROMO BANNER — box shadow + radius upgrade
   ═══════════════════════════════════════════════════ */

.promo-banner__inner {
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-lg) !important;
}

/* ═══════════════════════════════════════════════════
   48. HERO GRADIENTS — remove legacy purple endpoints
   ═══════════════════════════════════════════════════ */

/* Audit test page hero */
.hero--audit {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-color) 60%, #1a4876 100%) !important;
}

/* Doctor page hero */
.page-hero--doctor {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-color) 60%, #1a4876 100%) !important;
}

/* ═══════════════════════════════════════════════════
   49. PHONE CTA — heading color fix (--color-heading undefined)
   ═══════════════════════════════════════════════════ */

.phone-cta__text {
  color: var(--brand-color) !important;
}


/* ═══════════════════════════════════════════════════
   51. CALLBACK SECTION — premium gradient (overrides flat navy)
   ═══════════════════════════════════════════════════ */

.section--callback {
  position: relative;
  overflow: hidden;
}

.section--callback::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 200% at 0% 50%, rgba(255, 255, 255, .04) 0%, transparent 55%);
  pointer-events: none;
}

.callback-form {
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-md) !important;
}

/* ═══════════════════════════════════════════════════
   52. BENEFIT CARDS — icon ring upgrade
   ═══════════════════════════════════════════════════ */

.benefit-card__icon {
  background: linear-gradient(135deg, #e8f0f8 0%, #ddeaf6 100%);
  box-shadow: 0 4px 14px rgba(27, 59, 92, .10);
}

.benefit-card {
  border: 1px solid rgba(27, 59, 92, .06);
}

.benefit-card:hover {
  border-color: rgba(27, 59, 92, .15);
}

/* ═══════════════════════════════════════════════════
   53. CTA BLOCK SECTION — gradient (matches dark sections)
   ═══════════════════════════════════════════════════ */

.section--cta {
  background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%);
  position: relative;
  overflow: hidden;
}

.section--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 180% at 100% 50%, rgba(95, 168, 211, .08) 0%, transparent 55%);
  pointer-events: none;
}

.cta-block {
  position: relative;
}

.cta-block__title {
  letter-spacing: -0.025em;
}

/* ═══════════════════════════════════════════════════
   54. SERVICE HERO — rich gradient (no flat navy)
   ═══════════════════════════════════════════════════ */

.hero--service:not(.hero--has-overlay) {
  background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%);
}

.hero--service.hero--has-overlay::before {
  background: linear-gradient(135deg,
      rgba(13, 32, 53, .82) 0%,
      rgba(27, 59, 92, .72) 55%,
      rgba(26, 72, 118, .78) 100%) !important;
}

/* ═══════════════════════════════════════════════════
   55. ABOUT CTA + SIDEBAR CTA — gradient upgrade
   ═══════════════════════════════════════════════════ */

.section--about-cta {
  /* background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%); */
  position: relative;
  overflow: hidden;
}

.section--about-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 200% at 100% 50%, rgba(95, 168, 211, .07) 0%, transparent 55%);
  pointer-events: none;
}

.sb-widget--cta {
  background: linear-gradient(160deg, var(--brand-deep) 0%, var(--brand-color) 100%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════
   56. NAV CARD ICON — brand gradient upgrade
   ═══════════════════════════════════════════════════ */

.nav-card__icon a {
  background: linear-gradient(135deg, var(--brand-color) 0%, #2a6299 100%);
  transition: background var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(27, 59, 92, .22);
}

.nav-card__icon a:hover {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-color) 100%);
  box-shadow: 0 6px 20px rgba(27, 59, 92, .32);
}

/* ═══════════════════════════════════════════════════
   57. MOBILE MENU — navy accent border
   ═══════════════════════════════════════════════════ */

.mobile-menu {
  border-left-color: var(--brand-color) !important;
  box-shadow: -4px 0 32px rgba(27, 59, 92, .14) !important;
}

/* ═══════════════════════════════════════════════════
   58. TRUST RATINGS — brand-aligned background + card shadows
   ═══════════════════════════════════════════════════ */

.section.section--trust-ratings {
  background: linear-gradient(160deg, #edf2f8 0%, #e2eaf5 100%) !important;
}

.trust-ratings {
  background: rgba(255, 255, 255, .55) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
}

.trust-ratings__card {
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(27, 59, 92, .06) !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition) !important;
}

.trust-ratings__card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}

/* ═══════════════════════════════════════════════════
   59. CALCULATOR RESULT — brand-aligned (--color-primary now navy)
   ═══════════════════════════════════════════════════ */

.calc-result__inner {
  background: linear-gradient(135deg, #eef3f9 0%, #fff 60%);
  border-color: var(--brand-color);
}

.calc-result__price {
  color: var(--brand-color);
}

/* ═══════════════════════════════════════════════════
   60. FINAL PURPLE SWEEP — front-page.css & dark sections
   ═══════════════════════════════════════════════════ */

/* front-page.css loads after design-upgrade.css — needs !important */
.phone-cta__messenger {
  background: var(--brand-color) !important;
}

.phone-cta__messenger:hover {
  background: var(--brand-deep) !important;
  color: #fff !important;
}

.phone-cta--gradient {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-color) 55%, #1a4876 100%) !important;
}

/* Section: callback form (separate component from .section--callback) */
.section--callback-form {
  background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%) !important;
  position: relative;
  overflow: hidden;
}

.section--callback-form::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 200% at 0% 50%, rgba(255, 255, 255, .04) 0%, transparent 55%);
  pointer-events: none;
}

/* Section: CTA messengers bar (flat brand-color → gradient) */
.section--cta-messengers {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-color) 100%) !important;
}

/* Advantage card icon — premium gradient circle */
.advantage-card__icon {
  background: linear-gradient(135deg, var(--brand-color) 0%, #2a6299 100%) !important;
  box-shadow: 0 4px 14px rgba(27, 59, 92, .22) !important;
}

/* ═══════════════════════════════════════════════════
   61. REVIEWS PAGE — aggregate block & video reviews
   ═══════════════════════════════════════════════════ */

.reviews-aggregate {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid rgba(27, 59, 92, .06) !important;
}

.reviews-filter__bar:hover {
  background: rgba(27, 59, 92, .04) !important;
}

.reviews-filter__bar--active {
  background: rgba(27, 59, 92, .08) !important;
}

.section--video-reviews {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

.video-review-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.video-review-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
}

/* ═══════════════════════════════════════════════════
   62. LICENSE CARDS & PHOTO GALLERY — design tokens
   ═══════════════════════════════════════════════════ */

.license-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.license-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
}

.section--photo-gallery {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

.photo-gallery-grid__item {
  border-radius: var(--radius-sm) !important;
}

/* ═══════════════════════════════════════════════════
   63. AMBIENT GRADIENT — remaining flat-gray sections
   ═══════════════════════════════════════════════════ */

/* Home licenses row */
.section--home-licenses {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

/* About page: gallery and methods sections */
.section--about-gallery {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

.section--about-methods {
  background: linear-gradient(160deg, #edf2f8 0%, #e0eaf5 100%) !important;
}

/* --bg-alt token now navy-tinted via :root, but override any still-literal gray */
.section--doctors-archive,
.section--filters {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

/* Comparison table: even rows navy-tinted */
.comparison-table tbody tr:nth-child(even) {
  background: rgba(27, 59, 92, .025) !important;
}

/* ═══════════════════════════════════════════════════
   64. ABOUT-COUNTERS dark section + misc upgrades
   ═══════════════════════════════════════════════════ */

/* About: counters dark section — flat brand-color → gradient */
.section--about-counters {
  background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%) !important;
  position: relative;
  overflow: hidden;
}

.section--about-counters::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 200% at 100% 50%, rgba(255, 255, 255, .04) 0%, transparent 55%);
  pointer-events: none;
}

/* About video section — ambient navy gradient */
.section--about-video {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

/* About video player — design token shadows */
.about-video {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Stats section — subtle ambient lift from white */
.section--stats {
  background: linear-gradient(160deg, #fff 0%, #f0f5fb 100%) !important;
}

/* Hotlines section — uses --bg-alt now navy-tinted; add extra warmth */
.section--hotlines {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

/* ═══════════════════════════════════════════════════
   65. REMAINING FLAT-GRAY SECTIONS — ambient gradient
   ═══════════════════════════════════════════════════ */

/* About: advantages section (main.css uses #f4f6fb) */
.section--about-advantages {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

/* About: gallery (main.css uses --bg-body) — gentle lift */
.section--about-gallery {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

/* About: about-intro uses white — subtle lift so it reads as premium */
.section--about-intro {
  background: linear-gradient(160deg, #fff 0%, #f0f5fb 100%) !important;
}

/* Trust section (white bg) — subtle lift */
.section--trust {
  background: linear-gradient(160deg, #fff 0%, #f0f5fb 100%) !important;
}

/* ═══════════════════════════════════════════════════
   66. FRONT-PAGE.CSS LOAD-ORDER FIXES — !important
   ═══════════════════════════════════════════════════
   front-page.css loads AFTER design-upgrade.css,
   so any design-upgrade rule without !important is
   overridden on the front page. Fix key sections.
   ═══════════════════════════════════════════════════ */

/* home-features: current front-page design is LIGHT
   (white cards, dark text) — upgrade cold #EDF3F8 to warm gradient */
.section--home-features {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e0eaf5 100%) !important;
  color: inherit !important;
}

/* Counters section: front-page.css uses flat brand-color */
.section--counters {
  background: linear-gradient(135deg, #122840 0%, #1B3B5C 50%, #1E4470 100%) !important;
}

/* Nav card icon circle: front-page.css uses flat #1F3A5F */
.nav-card__icon a {
  background: linear-gradient(135deg, var(--brand-color) 0%, #2a6299 100%) !important;
}

.nav-card__icon a:hover {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-color) 100%) !important;
}

/* Home feature item cards: upgrade from cold border to design tokens */
.home-feature-item {
  border-radius: var(--radius-md) !important;
  border-color: rgba(27, 59, 92, .09) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.home-feature-item:hover {
  box-shadow: var(--shadow-lg) !important;
}

/* ═══════════════════════════════════════════════════
   67. FRONT-PAGE.CSS PURPLE PLACEHOLDERS — !important
   ═══════════════════════════════════════════════════ */

/* Home article cards: purple placeholder overridden */
.home-article-card__link {
  border-radius: var(--radius-md) !important;
}

.home-article-card__image--placeholder {
  background: linear-gradient(135deg, var(--brand-deep) 0%, #1a4876 100%) !important;
}

/* Home promo cards: purple placeholder overridden */
.home-promo-card__image--placeholder {
  background: linear-gradient(135deg, var(--brand-deep) 0%, #1a4876 100%) !important;
}

/* ═══════════════════════════════════════════════════
   68. SERVICE.CSS LOAD-ORDER FIXES — !important
   ═══════════════════════════════════════════════════
   service.css loads AFTER design-upgrade.css.
   ═══════════════════════════════════════════════════ */

/* Steps section: flat brand-color → premium gradient */
.section--steps {
  background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%) !important;
}

/* Content block tables in service pages: gradient header */
.section--intro .content-block table thead th {
  background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-color) 100%) !important;
}

/* ═══════════════════════════════════════════════════
   69. ABOUT PAGE CARDS — design token upgrades
   ═══════════════════════════════════════════════════ */

/* About method cards: border-top accent now uses brand-color,
   upgrade shadow and radius to design tokens */
.about-method-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border-top-color: var(--brand-color) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.about-method-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
}

/* About standards list items */
.about-standard-item {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(27, 59, 92, .06) !important;
}

/* About logo cards (partners, accreditations) */
.about-logo-card,
a.about-logo-card {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(27, 59, 92, .07) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

a.about-logo-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Legal table: design token radius and shadow */
.about-legal-table {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════
   70. FINAL COMPONENT SWEEP — black shadow → navy
   ═══════════════════════════════════════════════════ */

/* About value cards */
.about-value-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(27, 59, 92, .06) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.about-value-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
}

/* Doctor video embed */
.doctor-video-embed {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ═══════════════════════════════════════════════════
   71. REMAINING BLACK SHADOW → NAVY SWEEP
   ═══════════════════════════════════════════════════ */

/* Home license cards (front page licenses row) */
.home-license-card {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(27, 59, 92, .07) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.home-license-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* About page license and award cards */
.about-license-card {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}

.about-license-card:hover {
  box-shadow: var(--shadow-md) !important;
}

.about-award-card {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(27, 59, 92, .06) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.about-award-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Doctor appointment form card — harsh black shadow → navy depth */
.section--doctor-appoint .rehab-cf7-wrap {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Exit popup box — navy-depth shadow */
.exit-popup__box {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ═══════════════════════════════════════════════════
   72. MAIN.CSS BLACK SHADOW → NAVY SWEEP
   ═══════════════════════════════════════════════════ */

/* About advantages card (border-top now navy via --color-primary) */
.about-adv-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border-top-color: var(--brand-color) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.about-adv-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
}


/* Team member cards */
.team-item {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  transition: box-shadow var(--transition-slow), transform var(--transition) !important;
}

.team-item:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
}

/* Feature cards (single-feature) */
.single-feature {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Testimonial slider */
.testimonial-inner .single-slider {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Doctor appointment form (harsh 0 20px 60px black → navy depth) */
.doctor-appoint-form {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ═══════════════════════════════════════════════════
   73. SERVICE.CSS MINOR IMAGE SHADOWS → NAVY
   ═══════════════════════════════════════════════════ */

.hero--service .hero__img {
  box-shadow: var(--shadow-sm) !important;
}

.license-block__img {
  box-shadow: var(--shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════
   74. MEGAMENU.CSS — purple → navy + black shadows → navy
   ═══════════════════════════════════════════════════ */

/* Primary dropdown panel: #2E2751 → navy */
.nav-menu>li.has-megamenu>.sub-menu {
  background: var(--brand-color) !important;
  box-shadow: 0 4px 20px rgba(27, 59, 92, .25) !important;
}

/* Nested sub-panel: #1e1a3a → deep navy */
.nav-menu>li.has-megamenu>.sub-menu>li>.sub-menu {
  background: var(--brand-deep) !important;
  box-shadow: 2px 0 12px rgba(27, 59, 92, .18) !important;
}

/* Even-child variant reverses shadow direction */
.nav-menu>li.has-megamenu>.sub-menu>li:nth-child(even)>.sub-menu {
  box-shadow: -2px 0 12px rgba(27, 59, 92, .18) !important;
}

/* ═══════════════════════════════════════════════════
   75. CLINIC-GALLERY.CSS — slider nav shadow → navy
   ═══════════════════════════════════════════════════ */

.clinic-gallery-slider .swiper-button-next,
.clinic-gallery-slider .swiper-button-prev {
  box-shadow: 0 2px 8px rgba(27, 59, 92, .18) !important;
}

/* ═══════════════════════════════════════════════════
   76. MAIN.CSS GALLERY CAROUSEL — black shadows → navy
   ═══════════════════════════════════════════════════ */

/* Gallery photo card */
.gallery-carousel__slide a {
  box-shadow: 0 2px 8px rgba(27, 59, 92, .10);
}

.gallery-carousel__slide a:hover {
  box-shadow: 0 6px 20px rgba(27, 59, 92, .18);
}

/* Gallery swiper navigation buttons */
.gallery-carousel .swiper-button-prev,
.gallery-carousel .swiper-button-next {
  box-shadow: 0 2px 8px rgba(27, 59, 92, .22);
}

.gallery-carousel .swiper-button-prev:hover,
.gallery-carousel .swiper-button-next:hover {
  box-shadow: 0 4px 14px rgba(27, 59, 92, .28);
}

/* ═══════════════════════════════════════════════════
   77. REGULAR NAV DROPDOWN — purple → navy
   ═══════════════════════════════════════════════════ */

/* main.css uses #2E2751 (no !important) for regular sub-menu dropdowns */
.nav-menu .sub-menu {
  background: var(--brand-color);
  box-shadow: 0 4px 16px rgba(27, 59, 92, .22);
}

/* ═══════════════════════════════════════════════════
   78. FROSTED-GLASS КАРТОЧКИ ВРАЧА — чёрная тень → navy
   Три варианта плавающей info-карточки поверх hero-фото:
   fix-patch.css (.hero-doctor__card),
   main.css (.hero-audit__doctor-info, .hero-page-doctor__doctor-info)
   ═══════════════════════════════════════════════════ */

.hero-doctor__card {
  box-shadow: 0 12px 36px rgba(27, 59, 92, .28);
}

.hero-audit__doctor-info,
.hero-page-doctor__doctor-info {
  box-shadow: 0 14px 36px rgba(27, 59, 92, .26);
}

/* ═══════════════════════════════════════════════════
   79. ОСТАВШИЕСЯ ПЛОСКИЕ var(--bg-alt) СЕКЦИИ
   Три секции используют плоский var(--bg-alt)=#EDF2F8
   без градиента — добавляем ambient gradient
   ═══════════════════════════════════════════════════ */

/* Шапка-герой страниц (page hero с хлебными крошками) */
.section--page-hero {
  background: linear-gradient(160deg, var(--bg-section) 0%, #dde8f4 100%) !important;
}

/* Рейтинги клиники на странице «О нас» */
.section--about-ratings {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

/* Секция преимуществ лечения (на сервисных страницах) */
.section--benefits {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%) !important;
}

/* ═══════════════════════════════════════════════════
   80. CALCULATOR HERO — тёмно-фиолетовый #1a1640 → navy
   fix-patch.css: section--page-hero--calculator использует
   linear-gradient(var(--brand-purple) → #1a1640)
   #1a1640 — тёмно-фиолетовый, требует замены на deep navy
   ═══════════════════════════════════════════════════ */

.section--page-hero--calculator {
  background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%);
  position: relative;
  overflow: hidden;
}

.section--page-hero--calculator::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 180% at 100% 50%, rgba(255, 255, 255, .04) 0%, transparent 55%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   81. ABOUT-ADV-CARD ИКОНКА — фиолетовый → navy
   main.css: .about-adv-card__icon использует
   rgba(109, 40, 217, .12/.06) — цвет #6D28D9 (фиолетовый).
   Заменяем на navy-тонированный фон иконки.
   ═══════════════════════════════════════════════════ */

/* Декоративная угловая подсветка ::before — фиолетовый → navy */
.about-adv-card::before {
  background: radial-gradient(circle at top right, rgba(27, 59, 92, .07), transparent 70%);
}

/* Иконка карточки — фиолетовый тонированный фон → navy */
.about-adv-card__icon {
  background: linear-gradient(135deg, rgba(27, 59, 92, .12) 0%, rgba(27, 59, 92, .06) 100%);
  color: var(--brand-color);
}

/* ═══════════════════════════════════════════════════
   82. ABOUT-VALUE-CARD ИКОНКА — фиолетовый → navy
   fix-patch.css: .about-value-card__icon и ::before
   используют rgba(109,40,217,...) — #6D28D9 фиолетовый.
   Аналогичный паттерн с about-adv-card — заменяем
   на navy-тонированные значения.
   ═══════════════════════════════════════════════════ */

/* Декоративная угловая подсветка ::before — фиолетовый → navy */
.about-value-card::before {
  background: radial-gradient(circle at top right, rgba(27, 59, 92, .07), transparent 70%);
}

/* Иконка карточки — фиолетовый тонированный фон → navy */
.about-value-card__icon {
  background: linear-gradient(135deg, rgba(27, 59, 92, .12) 0%, rgba(27, 59, 92, .06) 100%);
  color: var(--brand-color);
}

/* ═══════════════════════════════════════════════════
   83. ABOUT-STANDARD-ITEM и ABOUT-LOGO-CARD — navy
   fix-patch.css: .about-standard-item__icon использует
   rgba(109,40,217,.1); a.about-logo-card--link:hover —
   rgba(109,40,217,.15). Также чёрные rgba тени карточек.
   ═══════════════════════════════════════════════════ */

/* Иконка стандартного пункта — фиолетовый фон → navy */
.about-standard-item__icon {
  background: rgba(27, 59, 92, .10);
  color: var(--brand-color);
}

/* Тень карточки при наведении — фиолетовый → navy */
a.about-logo-card--link:hover {
  box-shadow: 0 6px 20px rgba(27, 59, 92, .18);
}

/* Чёрные box-shadow на карточках → navy-тонированные */
.about-standard-item {
  box-shadow: 0 2px 10px rgba(27, 59, 92, .08);
}

.about-logo-card,
a.about-logo-card {
  box-shadow: 0 2px 10px rgba(27, 59, 92, .08);
}

/* ═══════════════════════════════════════════════════
   84. КАРТОЧКИ СТРАНИЦЫ «О КЛИНИКЕ» — navy тени
   fix-patch.css: .about-value-card, .about-license-card,
   .about-award-card, .about-legal-table —
   все используют rgba(0,0,0,...) box-shadow.
   ═══════════════════════════════════════════════════ */

/* about-value-card — базовая и hover тень */
.about-value-card {
  box-shadow: 0 2px 16px rgba(27, 59, 92, .09);
}

.about-value-card:hover {
  box-shadow: 0 6px 24px rgba(27, 59, 92, .13);
}

/* about-license-card — базовая и hover тень */
.about-license-card {
  box-shadow: 0 2px 12px rgba(27, 59, 92, .10);
}

.about-license-card:hover {
  box-shadow: 0 6px 24px rgba(27, 59, 92, .18);
}

/* about-award-card — базовая и hover тень */
.about-award-card {
  box-shadow: 0 2px 12px rgba(27, 59, 92, .09);
}

.about-award-card:hover {
  box-shadow: 0 8px 28px rgba(27, 59, 92, .16);
}

/* about-legal-table — тень таблицы */
.about-legal-table {
  box-shadow: 0 2px 14px rgba(27, 59, 92, .09);
}

/* ═══════════════════════════════════════════════════
   85. КАРТОЧКИ КОНТЕНТА — navy тени
   fix-patch.css: .nav-card, .reviews-aggregate,
   .review-card--page, .video-review-card —
   все используют rgba(0,0,0,...) box-shadow.
   ═══════════════════════════════════════════════════ */

/* nav-card — базовая и hover тень */
.nav-card {
  box-shadow: 0 1px 4px rgba(27, 59, 92, .06);
}

.nav-card:hover {
  box-shadow: 0 4px 16px rgba(27, 59, 92, .12);
}

/* Агрегированный блок отзывов */
.reviews-aggregate {
  box-shadow: 0 2px 16px rgba(27, 59, 92, .09);
}

/* Карточка отзыва на странице */
.review-card--page {
  box-shadow: 0 2px 12px rgba(27, 59, 92, .09);
}

/* Карточка видео-отзыва */
.video-review-card {
  box-shadow: 0 2px 12px rgba(27, 59, 92, .09);
}

/* ═══════════════════════════════════════════════════
   86. ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ — navy тени
   fix-patch.css + main.css: лицензии, формы,
   видео, всплывающие окна — высокоопасные тени
   rgba(0,0,0,...) заменяем на navy-эквиваленты.
   ═══════════════════════════════════════════════════ */

/* Лицензия при наведении */
.license-card:hover {
  box-shadow: 0 6px 20px rgba(27, 59, 92, .18);
}

/* Форма в секции doctor-appoint (CF7 wrap) */
.section--doctor-appoint .rehab-cf7-wrap {
  box-shadow: 0 20px 60px rgba(27, 59, 92, .28);
}

/* Видео-вставка врача */
.doctor-video-embed {
  box-shadow: 0 4px 24px rgba(27, 59, 92, .20);
}

/* Всплывающее окно exit-intent */
.exit-popup__box {
  box-shadow: 0 20px 60px rgba(27, 59, 92, .32);
}

/* Видео клиники на странице «О нас» */
.about-video {
  box-shadow: 0 8px 40px rgba(27, 59, 92, .22);
}


/* Карточка формы записи к врачу */
.doctor-appoint-form {
  box-shadow: 0 20px 60px rgba(27, 59, 92, .28);
}

/* ═══════════════════════════════════════════════════
   87. ОСТАВШИЕСЯ ФИОЛЕТОВЫЕ rgba — #2E2751 ≡ rgb(46,39,81)
   main.css: .service-card__tag использует rgba(46,39,81,.08).
   front-page.css: .phone-cta--card — rgba(46,39,81,.06).
   ═══════════════════════════════════════════════════ */

/* Тег сервисной карточки — фиолетовый фон → navy */
.service-card__tag {
  background: rgba(27, 59, 92, .09);
}

/* CTA-блок с телефоном — тень с фиолетовым оттенком → navy */
.phone-cta--card {
  box-shadow: 0 2px 6px rgba(27, 59, 92, .08) !important;
}

/* ═══════════════════════════════════════════════════
   88. ФИНАЛЬНЫЕ ОСТАТКИ — ambient gradient + navy тени
   fix-patch.css: .section--popular (var(--bg-alt) плоский),
   .home-license-card — rgba(0,0,0,...) тени на карточках.
   ═══════════════════════════════════════════════════ */

/* Секция популярных услуг — ambient gradient */
.section--popular {
  background: linear-gradient(160deg, var(--bg-section) 0%, #e4ecf6 100%);
}

/* Карточки лицензий на главной — navy тени */
.home-license-card {
  box-shadow: 0 1px 8px rgba(27, 59, 92, .09);
}

.home-license-card:hover {
  box-shadow: 0 4px 16px rgba(27, 59, 92, .15);
}

/* ═══════════════════════════════════════════════════
   89. STYLE.CSS — navy бордеры и тени
   style.css (корневой файл темы) использует
   rgba(0,0,0,...) в border и box-shadow у всех
   контентных карточек. Заменяем на navy-тонированные.
   ═══════════════════════════════════════════════════ */

/* EEAT и доверительные карточки — navy тень */
.eeat-meta-card,
.author-box-card,
.contraindications-box,
.sources-box,
.doctor-facts-card {
  border-color: rgba(27, 59, 92, .10);
  box-shadow: 0 12px 32px rgba(27, 59, 92, .08);
}

/* trust-stat — navy бордер */
.trust-stat {
  border-color: rgba(27, 59, 92, .10);
}

/* trust-license-link — navy бордер */
.trust-license-link {
  border-color: rgba(27, 59, 92, .14);
}

/* trust-licenses-preview — navy бордер */
.trust-licenses-preview__item {
  border-color: rgba(27, 59, 92, .10);
}

/* license-card (style.css) — navy бордер и тень */
.license-card {
  border-color: rgba(27, 59, 92, .10);
  box-shadow: 0 10px 30px rgba(27, 59, 92, .07);
}

/* hotlines-box, error-report-box, faq-expert-card, cookie-notice__inner */
.hotlines-box,
.error-report-box,
.faq-expert-card,
.cookie-notice__inner {
  border-color: rgba(27, 59, 92, .09);
  box-shadow: 0 10px 30px rgba(27, 59, 92, .07);
}

/* Sticky CTA кнопка — глубокий navy вместо почти-чёрного #111827 */
.sticky-cta__btn--accent {
  background: var(--brand-deep);
}

/* ═══════════════════════════════════════════════════
   90. MAIN.CSS — оставшиеся rgba(0,0,0,...) тени
   Карточки team-item, single-feature, single-slider,
   about-adv-card, lightbox__img и кнопки hero — заменяем
   нейтральный чёрный на navy-тонированные тени.
   ═══════════════════════════════════════════════════ */

/* Карточки команды (main.css:6886) */
.team-item {
  box-shadow: 0 8px 24px rgba(27, 59, 92, .09) !important;
}

/* Карточки преимуществ/особенностей (main.css:7025) */
.single-feature {
  box-shadow: 0 8px 24px rgba(27, 59, 92, .07) !important;
}

/* Слайдер отзывов (main.css:7064) */
.testimonial-inner .single-slider {
  box-shadow: 0 10px 30px rgba(27, 59, 92, .09) !important;
}

/* Карточка преимуществ about (main.css:1316) */
.about-adv-card {
  box-shadow: 0 2px 16px rgba(27, 59, 92, .08) !important;
}

/* Изображение в лайтбоксе (main.css:1589) */
.lightbox__img {
  box-shadow: 0 2px 6px rgba(27, 59, 92, .08) !important;
}

/* Кнопки героя на оверлей-секциях (main.css:954, 958) */
.hero--has-overlay .hero__btn {
  box-shadow: 0 1px 4px rgba(27, 59, 92, .08) !important;
}

.hero--has-overlay .hero__btn:hover {
  box-shadow: 0 2px 8px rgba(27, 59, 92, .14) !important;
}

/* Кнопки Swiper в галерее клиники (clinic-gallery.css:67) */
.clinic-gallery-slider .swiper-button-next,
.clinic-gallery-slider .swiper-button-prev {
  box-shadow: 0 2px 8px rgba(27, 59, 92, .18) !important;
}

/* ═══════════════════════════════════════════════════
   91. ABOUT-METHOD-CARD — фиолетовый → navy
   fix-patch.css: ::before и __icon используют
   rgba(109,40,217,...) — #6D28D9. Аналог секции 81.
   ═══════════════════════════════════════════════════ */

/* Декоративная угловая подсветка */
.about-method-card::before {
  background: radial-gradient(circle at top right, rgba(27, 59, 92, .07), transparent 70%) !important;
}

/* Иконка метода — navy тонированный фон */
.about-method-card__icon {
  background: linear-gradient(135deg, rgba(27, 59, 92, .12) 0%, rgba(27, 59, 92, .06) 100%) !important;
  color: var(--brand-color) !important;
}

/* ═══════════════════════════════════════════════════
   92. FRONT-PAGE.CSS — фиолетовые заглушки и кнопки
   front-page.css: жёстко прописаны #2E2751, #3B2E7A,
   rgba(46,39,81,...) в кнопках мессенджеров, CTA-блоке
   и заглушках картинок. Заменяем на navy-палитру.
   ═══════════════════════════════════════════════════ */

/* Заглушка изображения промо-карточки (строка 376) */
.home-promo-card__image--placeholder {
  background: linear-gradient(135deg, var(--brand-color) 0%, #1a4876 100%) !important;
}

/* Заглушка изображения карточки статьи (строка 1048) */
.home-article-card__image--placeholder {
  background: linear-gradient(135deg, #1a4876 0%, var(--brand-color) 100%) !important;
}

/* Кнопки мессенджеров — базовый и специфичные (строки 700, 715) */
.phone-cta__messenger {
  background: var(--brand-color) !important;
}

.phone-cta__messenger--tg,
.phone-cta__messenger--wa {
  background: var(--brand-color) !important;
}

/* Карточка с тенью phone-cta — navy вместо rgba(46,39,81,...) (строка 723) */
.phone-cta--card {
  box-shadow: 0 2px 6px rgba(27, 59, 92, .08) !important;
}

/* CTA-блок с градиентным фоном (строка 735) */
.phone-cta--gradient {
  background: linear-gradient(135deg, #0d2035 0%, var(--brand-color) 55%, #1a4876 100%) !important;
}

/* ═══════════════════════════════════════════════════
   93. BRAND CONSISTENCY — залишкові тёмні не-токенні кольори
   fix-patch.css і front-page.css використовують тёмні
   кольори, близькі до navy, але не брендові токени.
   Вирівнюємо по var(--brand-color) / var(--brand-deep).
   ═══════════════════════════════════════════════════ */

/* Hover-стан кнопки мессенджера — #3d3468 (тёмно-фіолетовий) → brand-deep */
.phone-cta__messenger:hover {
  background: var(--brand-deep) !important;
}

/* Кнопка CTA зі стрілкою (service.css:1646) — #1E2A4A → brand-color */
.flex-phone-cta__btn {
  background: var(--brand-color) !important;
}
.flex-phone-cta__btn:hover {
  background: var(--brand-deep) !important;
}

/* Іконка nav-card (fix-patch.css:2428, front-page.css:844) — #1F3A5F → brand-color */
.nav-card__icon a {
  background: var(--brand-color) !important;
}
.nav-card__icon a:hover {
  background: var(--primary-light) !important;
}

/* Перша комірка шапки таблиці порівняння (fix-patch.css:3411) — #132338 → brand-deep */
.comparison-table thead th:first-child {
  background: var(--brand-deep) !important;
}

/* PDF-кнопка hover (fix-patch.css:3682) — #152540 → brand-deep */
.price-header-meta__pdf:hover {
  background: var(--brand-deep) !important;
}

/* ── Дисклеймер в подвале ─────────────────────────────────────────── */
.footer__disclaimer {
  background: rgba(0, 0, 0, .25);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 0;
}
.footer__disclaimer-text {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .45);
  margin: 0;
  text-align: center;
}