/**
 * 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.
   Gradient applies only when no custom bg is active:
   colour mode adds inline background-color, image mode adds .hero--has-overlay. */
.hero--page {
  border-bottom: 1px solid rgba(27, 59, 92, .07);
}

.hero--page:not(.hero--has-overlay):not([style*="background-color"]) {
  background: linear-gradient(160deg, #f5f8fc 0%, #edf2f8 100%);
}

.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.sticky-cta__btn--phone {
  width: auto;
  min-width: 323px;
  color: #ffffff;
  display: inline-flex;
  font-size: clamp(var(--fs-sm), var(--fs-xl), var(--fs-xl));
  font-weight: 700;
}

@media screen and (max-width: 429px) {
  .sticky-cta__btn.sticky-cta__btn--phone {
    min-width: 200px;
    font-size: clamp(12px, 5vw, 18px);
    white-space: nowrap;
  }
}

.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(--r-sm);
  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:before {
  content: "";
  position: absolute;
  inset: 0;
  /* 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 {
  width: 100%;
  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);
}

/* Telegram в sticky CTA */
.sticky-cta__btn--tg {
  background: linear-gradient(135deg, #0088cc 0%, #006aad 100%);
}

.sticky-cta__btn--tg::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════
   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;
}

/* ── Хлебные крошки — underline micro-interaction ─────────────────── */
.breadcrumbs__link {
  position: relative;
  text-decoration: none;
}

.breadcrumbs__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--brand-color);
  transition: width var(--transition);
}

.breadcrumbs__link:hover::after {
  width: 100%;
}

.cookie-notice__inner {
  background: rgba(255, 255, 255, .92);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(27, 59, 92, .09);
  box-shadow: 0 8px 32px rgba(27, 59, 92, .12);
  padding: 16px 24px;
}

/* ── Mobile menu — 3rd-level expand button ─────────────────────────── */
.mm-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  padding: 0 16px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, .06);
  cursor: pointer;
  color: #aaa;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.mm-expand-btn:hover,
.mm-expand-btn:active {
  background: rgba(27, 59, 92, .06);
  color: var(--brand-color);
}

.mobile-menu__panel--sub2.is-active {
  animation: mmSlideInRight .25s ease;
}

/* ── Топ-бар мессенджеров ─────────────────────────────────────────── */
.messenger-topbar {
  background: linear-gradient(90deg, var(--brand-deep, #122840) 0%, var(--brand-color, #1B3B5C) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.messenger-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 44px;
}

.messenger-topbar__text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

.messenger-topbar__btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.messenger-topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--radius-pill, 999px);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  transition: filter var(--transition), transform var(--transition);
  white-space: nowrap;
}

.messenger-topbar__btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  color: #fff;
}

.messenger-topbar__btn--wa {
  background: linear-gradient(135deg, #25D366 0%, #18B956 100%);
}

.messenger-topbar__btn--tg {
  background: linear-gradient(135deg, #0088cc 0%, #006aad 100%);
}

/* На мобильных — скрыть текст, оставить только иконки */
@media (max-width: 600px) {
  .messenger-topbar__text {
    font-size: 12px;
  }

  .messenger-topbar__btn span {
    display: none;
  }

  .messenger-topbar__btn {
    padding: 8px 10px;
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES — top-bar, header, sticky-cta
   ══════════════════════════════════════════════════════ */

/* 1. top-bar — скрыть на мобильном.
      На мобильном в top-bar виден только .header__contacts
      с длинным текстом мессенджеров → overflow/wrap.
      Навигация доступна через mobile-menu, мессенджеры —
      через sticky-cta и/или messenger-topbar. */
@media (max-width: 767px) {
  .top-bar {
    display: none !important;
  }
}

/* 2. header__inner — предотвратить выход за пределы viewport */
.header__logo {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .header__inner {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }

  /* Телефон: не сужать логотип, телефон берёт оставшееся место */
  .header__phone {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Номер телефона: обрезать если очень длинный */
  .header__phone .top-bar__phone {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* 3. sticky-cta — не выходить за viewport */
.sticky-cta {
  box-sizing: border-box;
  max-width: 100vw;
  overflow: hidden;
}

/* ── Юридическая структура и партнёрство ─────────────────────────── */
.section--legal-structure {
  padding: 64px 0;
}

.section--legal-structure .section__title {
  margin-bottom: 16px;
}

.legal-struct__intro {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: #4a5568;
}

.legal-orgs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.legal-orgs-grid--single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .legal-orgs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.legal-org-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-left: 4px solid var(--brand-color);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(27, 59, 92, .04);
  transition: box-shadow .25s ease, transform .25s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.legal-org-card:hover {
  box-shadow: 0 8px 28px rgba(27, 59, 92, .12);
  transform: translateY(-2px);
}

.legal-org-card--main {
  border-left-color: var(--brand-color);
}

.legal-org-card--partner {
  border-left-color: #1e4a73;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 60%);
}

.legal-org-card__type {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-color);
  background: rgba(27, 59, 92, .08);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.legal-org-card__name {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--brand-color);
  margin: 0;
}

.legal-org-card__details {
  margin: 0;
  display: grid;
  gap: 8px;
}

.legal-org-card__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, .06);
  font-size: 14px;
}

.legal-org-card__row:last-child {
  border-bottom: 0;
}

.legal-org-card__row dt {
  color: #718096;
  font-weight: 500;
  margin: 0;
}

.legal-org-card__row dd {
  color: #1a202c;
  font-weight: 500;
  margin: 0;
  word-break: break-word;
}

.legal-org-card__license {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  background: rgba(27, 59, 92, .06);
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.legal-org-card__license-badge {
  background: var(--brand-color);
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.legal-org-card__license strong {
  color: var(--brand-color);
  font-weight: 700;
}

.legal-org-card__license small {
  color: #718096;
  flex-basis: 100%;
}

.legal-org-card__license-link {
  margin-left: auto;
  color: var(--brand-color);
  font-weight: 600;
  text-decoration: none;
}

.legal-org-card__license-link:hover {
  text-decoration: underline;
}

.legal-org-card__activities {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5568;
}

.legal-struct__more {
  text-align: center;
  margin: 8px 0 0;
}

.legal-struct__more a {
  white-space: normal;
}

/* Model — steps */
.legal-model {
  margin-bottom: 48px;
}

.legal-model__title {
  font-size: 24px;
  color: var(--brand-color);
  margin-bottom: 14px;
}

.legal-model__intro {
  color: #4a5568;
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 880px;
}

.legal-model__intro p {
  margin: 0 0 12px;
}

.legal-model__intro ul,
.legal-model__intro ol {
  margin: 0 0 14px;
  padding-left: 24px;
}

.legal-model__intro ul {
  list-style: disc;
}

.legal-model__intro ol {
  list-style: decimal;
}

.legal-model__intro li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.legal-model__intro strong,
.legal-model__intro b {
  font-weight: 600;
  color: #2d3748;
}

.legal-model__intro a {
  color: var(--brand-color);
  text-decoration: underline;
}

.legal-model-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: legal-step;
  display: grid;
  gap: 16px;
}

.legal-model-steps__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  padding: 18px 20px;
}

.legal-model-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-color);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.legal-model-steps__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-color);
}

.legal-model-steps__text {
  margin: 0;
  color: #4a5568;
  line-height: 1.55;
  font-size: 15px;
}

/* Doctors at the partner base */
.legal-doctors {
  margin-bottom: 48px;
}

.legal-doctors__title {
  font-size: 24px;
  color: var(--brand-color);
  margin-bottom: 18px;
}

.legal-doctors .section--doctors {
  padding: 0;
}

.legal-doctors .section--doctors .section__title {
  display: none;
}

.legal-doctors .doctors-slider {
  padding: 0 52px;
}

.legal-doctors .doctor-card {
  background: #fff;
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(27, 59, 92, .10);
  box-shadow: 0 2px 12px rgba(27, 59, 92, .07);
  transition:
    box-shadow .25s ease,
    transform .25s ease;
  overflow: hidden;
}

.legal-doctors .doctor-card:hover {
  box-shadow: 0 8px 28px rgba(27, 59, 92, .14);
  transform: translateY(-4px);
}

.legal-doctors .doctor-card__photo {
  aspect-ratio: 4 / 3;
  max-height: 200px;
}

.legal-doctors .doctor-card__link {
  display: block;
}

.legal-doctors .doctor-card__info {
  padding: 14px 16px 8px;
}

.legal-doctors .doctor-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-color);
  margin-bottom: 3px;
  line-height: 1.35;
}

.legal-doctors .doctor-card__position {
  font-size: 12px;
  color: var(--middle-color, #4a5568);
  margin-bottom: 2px;
}

.legal-doctors .doctor-card__experience {
  font-size: 12px;
  color: var(--text-muted, #718096);
}

.legal-doctors .doctor-card__action {
  padding: 0 16px 14px;
}

.legal-doctors .doctor-card__action .btn {
  font-size: 13px;
  padding: 7px 16px;
}

.legal-doctors .section--doctors .swiper-button-prev,
.legal-doctors .section--doctors .swiper-button-next {
  color: #fff;
  background: var(--brand-color, #2E2751);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background .2s, opacity .2s;
  top: 40%;
}

.legal-doctors .section--doctors .swiper-button-prev:after,
.legal-doctors .section--doctors .swiper-button-next:after {
  font-size: 16px;
  font-weight: 700;
}

.legal-doctors .section--doctors .swiper-button-prev:hover,
.legal-doctors .section--doctors .swiper-button-next:hover {
  background: var(--accent, #D53646);
}

.legal-doctors .section--doctors .swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

@media (max-width: 768px) {
  .legal-doctors .doctors-slider {
    padding: 0 36px;
  }

  .legal-doctors .section--doctors .swiper-button-prev,
  .legal-doctors .section--doctors .swiper-button-next {
    width: 32px;
    height: 32px;
  }

  .legal-doctors .section--doctors .swiper-button-prev:after,
  .legal-doctors .section--doctors .swiper-button-next:after {
    font-size: 13px;
  }
}

/* Transparency */
.legal-transparency {
  background: #ffffff;
  border-left: 4px solid #1e4a73;
  padding: 28px 32px;
  border-radius: 8px;
  margin-bottom: 48px;
  box-shadow: 0 4px 16px rgba(27, 59, 92, .04);
  transition: box-shadow .25s ease,
    transform .25s ease;
}

.legal-transparency__title {
  font-size: 22px;
  color: var(--brand-color);
  margin: 0 0 12px;
}

.legal-transparency__text {
  color: #2d3748;
  line-height: 1.7;
}

.legal-transparency__text p {
  margin: 0 0 10px;
}

.legal-transparency__text p:last-child {
  margin-bottom: 0;
}

/* Benefits checklist */
.legal-benefits {
  margin-bottom: 48px;
}

.legal-benefits__title {
  font-size: 24px;
  color: var(--brand-color);
  margin-bottom: 18px;
}

.legal-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}

@media (max-width: 767px) {
  .legal-benefits-list {
    grid-template-columns: 1fr;
  }
}

.legal-benefits-list__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 4px 0;
}

.legal-benefits-list__icon {
  color: #16a34a;
  flex-shrink: 0;
  margin-top: 2px;
}

.legal-benefits-list__item strong {
  display: block;
  color: var(--brand-color);
  font-size: 15px;
  margin-bottom: 2px;
}

.legal-benefits-list__item p {
  margin: 0;
  color: #4a5568;
  font-size: 14px;
  line-height: 1.55;
}

/* Legal contacts */
.legal-contacts {
  background: rgba(27, 59, 92, .04);
  border-radius: 10px;
  padding: 24px 28px;
}

.legal-contacts__title {
  font-size: 20px;
  color: var(--brand-color);
  margin: 0 0 12px;
}

.legal-contacts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.legal-contacts__list li {
  font-size: 15px;
  color: #2d3748;
}

.legal-contacts__list a {
  color: var(--brand-color);
  text-decoration: none;
  font-weight: 600;
}

.legal-contacts__list a:hover {
  text-decoration: underline;
}