/* ===========================================
   HERO — Главный экран с тумблером и фоном
   =========================================== */

.hero {
  position: relative;
  /* 100vh / 1.25 компенсирует zoom на html, чтобы hero не выходил за viewport */
  min-height: calc(100vh / 1.25);
  max-height: calc(100vh / 1.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: background var(--t-slower) var(--ease-smooth);
  padding-top: calc(var(--topbar-h) + var(--header-h) + var(--nav-h) + 20px);
  padding-bottom: var(--sp-8);
  overflow: hidden;
}

/* ─── Background layers ─── */
.hero__bg {
  position: absolute;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
}

/* Hero-фон: зацикленное видео (см. <video class="hero__photo"> в index.html).
   object-fit: cover + object-position: center bottom воспроизводят поведение
   старой картинки (cover + center bottom): полное покрытие hero, обрезание
   по бокам, верх не оголяется. Белый фон виден до загрузки видео и сквозь
   постер - доли секунды на медленном соединении. */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  object-fit: cover;
  object-position: center bottom;
  transform: none;
  transform-origin: center 75%;
  opacity: 1;
  transition: opacity 1.6s var(--ease-smooth);
  pointer-events: none;
  will-change: opacity;
  border: 0;
  outline: 0;
}

[data-theme="light"] .hero__photo {
  filter: brightness(1.05) saturate(1.1);
}

/* Zoom-переход на интерьер (кликом ОМС/ДМС/Платно).
   Применяется только к базовому слою, только в момент transitionToInterior() */
.hero__photo--zooming {
  transform: scale(1.6);
  opacity: 0;
  transition: transform 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 1.2s ease 1.8s;
}

/* Photo layer - интерьер холла */
.hero__photo-interior {
  position: absolute;
  inset: 0;
  background: url('../assets/img/n3.jpg') center center/cover no-repeat;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.6s ease 2.2s,
              transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s;
  will-change: opacity, transform;
}

/* Этап 2: появление интерьера с отдалением */
.hero__photo-interior--visible {
  opacity: 1;
  transform: scale(1);
}

/* Подложка по центру - стеклянная панель.
   Высота детерминирована чисто в CSS: top: 0 + фиксированный bottom.
   Никакого JS - чтобы поведение было одинаковым во всех браузерах
   (Chrome, Yandex, старые Chromium на Windows 7 и т.п.).
   В v1_16 изначально подложка прозрачная без размытия и белизны,
   стеклянный эффект (blur + матовый фон + рамка + тень) появляется
   только при клике тумблера через класс --expanded */
.hero__backdrop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 66%;
  bottom: var(--backdrop-bottom, 17.5%);
  z-index: 1;
  pointer-events: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid transparent;
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: none;
  transition:
    width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    bottom 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.8s var(--ease-smooth),
    backdrop-filter 0.8s var(--ease-smooth),
    -webkit-backdrop-filter 0.8s var(--ease-smooth),
    border-color 0.8s var(--ease-smooth),
    box-shadow 0.8s var(--ease-smooth);
}

/* Класс оставлен для обратной совместимости - opacity больше не нужен,
   подложка видна сразу (нет JS-пересчёта высоты → нет «скачка») */
.hero__backdrop--ready {
  opacity: 1;
}

/* При нажатии starter-кнопки (Записаться/Программы) - стеклянная панель
   проявляется в УЗКОМ виде (42%): тумблер компактный, info-карточки
   ещё скрыты, лишнего места не нужно. Когда выбран ОМС/ДМС/Платно
   (`.hero--mode-active`) - подложка плавно расширяется до 66%, чтобы
   info-карточки и текст контента поместились (см. правило ниже). */
.hero__backdrop--expanded {
  bottom: 0;
  width: 54%;
  border-radius: 0;
  border-bottom: none;
  background: rgba(230, 233, 240, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 8px 32px rgba(144, 238, 144, 0.2),
    0 4px 16px rgba(144, 238, 144, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* В mode-active появляются подразделы, телефоны и info-карточки -
   расширяемся до полной ширины 66% */
.hero--mode-active .hero__backdrop--expanded {
  width: 66%;
}

/* В mode-active контент (subs / CTA / phones) сдвигается влево: уменьшаем
   padding-left c 173px до 50px (= -123px = ~17% от 720px wrap). Это даёт
   3 sub-pillам "Список страховых компаний / Программы ДМС / Перечень
   услуг" поместиться в одну строку (раньше "Перечень услуг" переносилось)
   при этом контент остаётся внутри расширенной подложки. */
.hero--mode-active .hero__subs,
.hero--mode-active .hero__cta,
.hero--mode-active .hero__phones {
  padding-left: 50px;
  transition: padding 0.6s var(--ease-smooth),
              max-height var(--t-slow) var(--ease-smooth),
              opacity var(--t-base) var(--ease-smooth),
              margin-top var(--t-slow) var(--ease-smooth);
}

/* Gradient overlay — driven by theme token */
.hero__gradient {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  transition: background 0.8s var(--ease-smooth);
}

.hero__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 0L60 17.3V52L30 69.3L0 52V17.3Z' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='.5'/%3E%3Cpath d='M30 34.6L60 52V86.6L30 104L0 86.6V52Z' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='.5'/%3E%3C/svg%3E");
  background-size: 60px 104px;
}

/* Floating shapes hidden — replaced by photo background */
.hero__shapes {
  display: none;
}

/* ─── Герб УДП watermark ─── */
.hero__emblem {
  position: absolute;
  right: 8%;
  bottom: 15%;
  width: 160px;
  height: 200px;
  opacity: 0.35;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.05));
  animation: emblem-float 6s ease-in-out infinite;
}

@keyframes emblem-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ─── Toggle centered wrapper (in flex flow, centered naturally) ─── */
.hero__toggle-wrap {
  position: relative;
  z-index: 2;
  width: 720px;
  margin-top: calc(var(--sp-4) - 5px + 50px);
  margin-left: 25px;
  transition: margin 1s ease-in-out, transform 0.4s var(--ease-smooth);
  /* hero-scale управляется JS - сжимает тумблер, если контент не влезает */
  transform: scale(var(--hero-scale, 1));
  transform-origin: center top;
}

/* Состояние 2: тумблер появился (после "Записаться на приём").
   Wrap выше стартовой позиции, сдвиг по горизонтали зависит от
   ширины окна: 40px минус 3vw (сдвиг на 3% влево) */
.hero__toggle-wrap--toggle-showing {
  margin-top: calc(var(--sp-4) - 5px);
  margin-left: calc(40px - 3vw);
}

/* Состояние 3: режим активен (после клика по ОМС/ДМС/Платно).
   Wrap сдвигается левее (освобождает место под info-карточки справа).
   Вертикальное центрирование контента обеспечивается через margin-top
   на heading-block (см. .hero--mode-active .hero__heading-block--compact),
   поэтому wrap сохраняет естественный отступ от заголовка */
.hero__toggle-wrap--shifted {
  margin-left: -220px;
  margin-top: calc(var(--sp-4) - 5px);
}

/* ─── Expandable content (CTA + phones, inside toggle-wrap area) ─── */
.hero__content {
  position: relative;
  z-index: var(--z-base);
  margin-top: 20px;
  /* Hidden initially */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out 0.3s,
              max-height 0.8s ease-in-out 0.2s;
}

.hero__content--visible {
  opacity: 1;
  max-height: 300px;
  pointer-events: auto;
}

/* hero__left removed — CTA/phones now inside toggle-wrap */

/* Info cards — positioned to the right of toggle-wrap content */
.hero__right {
  position: absolute;
  left: calc(100% + 10px);
  top: -10px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transform: translate(40px, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform 1s ease-in-out 0.3s,
              opacity 0.8s ease-in-out 0.3s;
}

.hero__right--visible {
  transform: translate(0, 0);
  opacity: 1;
  pointer-events: auto;
}

/* ─── Hero heading block (in flex flow, centered naturally) ─── */
/* hero-scale управляется JS - сжимает блок целиком (заголовки, логотип, отступы),
   если контент не помещается над стеклянной подложкой.
   Базовый min-height уменьшен с 270 до 200, чтобы тумблер и подложка
   располагались выше без необходимости сжатия контента */
.hero__heading-block {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 66%;
  max-width: 1000px;
  min-height: calc(260px * var(--hero-scale, 1));
  padding-left: 0;
  transition: opacity 0.6s var(--ease-smooth),
              transform 0.6s var(--ease-smooth),
              min-height 0.9s var(--ease-smooth),
              padding 0.9s var(--ease-smooth),
              text-align 0.9s var(--ease-smooth);
}

.hero__heading-block--hidden {
  opacity: 0;
  transform: translateY(-30px) scale(0.9);
  pointer-events: none;
}

/* Compact: логотип уехал в левый верхний угол, подпись сдвинута вправо.
   Клик по блоку возвращает hero к стартовому экрану (см. toggle.js) */
.hero__heading-block--compact {
  text-align: left;
  padding-left: 320px;
  min-height: 110px;
  margin-top: 50px;
  cursor: default;
  transition: margin 0.7s var(--ease-smooth);
}

/* Состояние "Записаться на приём": логотип и подпись поднимаются
   на 30px, чтобы под ними появилось место для компактной кнопки-
   заголовка. Тумблер (wrap) получает доп. margin-top, чтобы не
   налезать на кнопку */
.hero--appointment-mode .hero__heading-block--compact,
.hero--programs-mode .hero__heading-block--compact {
  margin-top: 20px;
}
.hero--appointment-mode .hero__toggle-wrap--toggle-showing,
.hero--programs-mode .hero__toggle-wrap--programs-showing {
  margin-top: calc(var(--sp-4) - 5px + 55px);
}

/* Состояние 3: режим активен - контент (лого+подпись+тумблер+подразделы
   +телефоны) центрируется по вертикали. На высоких окнах появляется
   отступ сверху, пропорциональный высоте viewport; на низких - 0.
   Это правило идёт ПОСЛЕ --appointment-mode, чтобы переопределять его.

   Потолок 120px обязателен: vh при html{zoom:1.25} не масштабируется, и на
   зуме браузера 90% и ниже viewport в CSS-пикселях резко растёт (67% дают
   ~1600px вместо 1080). Без потолка формула выдавала 380px и больше - сверху
   зияла пустота, а телефоны и карточки уезжали под нижний край экрана. */
.hero--mode-active .hero__heading-block--compact {
  margin-top: min(120px, max(0px, calc((100vh - 850px) / 2)));
}

/* Кнопка "Записаться на приём" после клика перемещается в позицию
   заголовка под логотипом, уменьшается в высоту. Размер шрифта
   сохраняется (font-size у .hero-btn__title не меняется).
   Все координаты/размеры выставляются inline из JS (см. animateAppointmentText
   в toggle.js) - inline стили override-ят базовые .hero-btn правила */

/* Курсор-указатель только когда клик имеет смысл (hero в состоянии
   отличном от стартового). Класс навешивается из JS */
.hero--engaged .hero__heading-block--compact {
  cursor: pointer;
}

.hero__heading-block--compact .hero__upper-title {
  margin-bottom: 2px;
  line-height: 1.4;
}

.hero__heading-block--compact .hero__fgbu-title {
  margin-bottom: 0;
}

.hero__upper-title {
  font-family: var(--font-heading);
  font-weight: 800;
  /* Размер зависит и от ширины (vw), и от высоты (vh) -
     min(vw, vh) предотвращает рост шрифта на узких/низких окнах
     (Win7 в маленьком окне). Минимум 0.85rem, максимум 1.4rem */
  font-size: calc(clamp(0.85rem, min(1.8vw, 2.2vh), 1.4rem) * var(--hero-scale, 1));
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  line-height: 1.7;
  margin-bottom: var(--sp-2);
  transition: color 0.8s, text-shadow 0.8s, font-size 0.4s var(--ease-smooth);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .hero__upper-title {
  color: var(--brand-blue);
  text-shadow: none;
}

.hero__fgbu-title {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Аналогично hero__upper-title: min(vw, vh) - чтобы на низких/узких
     окнах подпись не разрасталась и не толкала heading-block вниз */
  font-size: calc(clamp(0.6rem, min(1.1vw, 1.4vh), 0.9rem) * var(--hero-scale, 1));
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.5;
  margin-bottom: var(--sp-6);
  opacity: 0.95;
  transition: color 0.8s, text-shadow 0.8s, font-size 0.4s var(--ease-smooth);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .hero__fgbu-title {
  color: var(--brand-blue);
  text-shadow: none;
}

[data-theme="light"] .hero__heading-logo {
  filter: none;
}

/* Вторичный режим: подписи становятся синими без тени, чтобы читались
   на светлой стеклянной подложке (backdrop в expanded состоянии).
   Двойной .hero.hero--... поднимает специфичность над
   [data-theme="light"] .hero__upper-title из правил темы выше */
.hero.hero--appointment-mode .hero__upper-title,
.hero.hero--programs-mode .hero__upper-title,
.hero.hero--appointment-mode .hero__fgbu-title,
.hero.hero--programs-mode .hero__fgbu-title {
  color: var(--brand-blue);
  text-shadow: none;
}

.hero__heading-logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(clamp(200px, 20vw, 320px) * var(--hero-scale, 1));
  height: calc(145px * var(--hero-scale, 1));
  background: var(--hero-logo) center/contain no-repeat;
  /* Подсветка логотипа на синем оверлее - чуть плотнее, чем в v1_17,
     чтобы белый лого выгодно отделялся от синего фона */
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.40))
    drop-shadow(0 0 52px rgba(255, 255, 255, 0.28))
    drop-shadow(0 0 90px rgba(255, 255, 255, 0.18));
  transition: background-image 0.8s,
              filter 0.8s,
              left 0.9s var(--ease-smooth),
              top 0.9s var(--ease-smooth),
              bottom 0.9s var(--ease-smooth),
              width 0.9s var(--ease-smooth),
              height 0.9s var(--ease-smooth),
              transform 0.9s var(--ease-smooth);
}

/* Вторичный режим: белый стартовый лого меняется на синий оригинал,
   подсветка гасится - логотип в compact-углу на белой подложке */
.hero--appointment-mode,
.hero--programs-mode {
  --hero-logo: url('../assets/img/logo2-original.svg?v=20260803');
}
.hero--appointment-mode .hero__heading-logo,
.hero--programs-mode .hero__heading-logo {
  filter: none;
}

.hero__heading-block--compact .hero__heading-logo {
  left: 130px;
  top: -15px;
  bottom: auto;
  transform: translateX(0);
  width: 150px;
  height: 110px;
}

/* ─── Стартовые кнопки (и подкнопки программ) ───
   Лёгкие glass-кнопки: полупрозрачный фон с blur, тонкая обводка,
   мягкое направленное свечение. На hover: плавный блик-штрих и
   нижняя акцент-линия, без деформаций и скачков */
.hero__starter,
.hero__programs {
  display: flex;
  justify-content: center;
  gap: var(--sp-10);
  width: 100%;
  margin-bottom: var(--sp-6);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-smooth),
              max-height 0.55s var(--ease-smooth);
}

.hero__starter--visible,
.hero__programs--visible {
  opacity: 1;
  max-height: 220px;
  pointer-events: auto;
}

.hero-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 340px;
  min-height: 118px;
  padding: 30px 44px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out);
}

/* Верхний хайлайт (тонкая светящаяся линия сверху) */
.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  pointer-events: none;
  opacity: 0.7;
}

/* Блик-штрих, плавно пробегающий по кнопке при наведении -
   широкий и мягкий, чтобы не был резкой полосой */
.hero-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-130%) skewX(-12deg);
  transition: transform 1.6s var(--ease-smooth);
}

.hero-btn:hover::after {
  transform: translateX(130%) skewX(-12deg);
}

/* Нижняя акцент-линия (появляется на hover) */
.hero-btn__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  max-width: 260px;
}
.hero-btn__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  height: 2px;
  width: 28px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out);
  border-radius: 2px;
}
.hero-btn:hover .hero-btn__title::after {
  transform: translateX(-50%) scaleX(1);
  width: 64px;
}

/* ─── PRIMARY: плоский тёмно-синий glass.
   Без светлой "засветляющей" полосы внизу - градиент только из
   тёмных navy-тонов, цвет почти однородный. */
.hero-btn--primary {
  /* Стекло прозрачнее прежнего (было 0.5-0.58) - сквозь кнопку читается
     видео hero. Читаемость белого текста держат blur, тень текста и
     мягкая внутренняя виньетка снизу */
  background: linear-gradient(180deg,
    rgba(0, 60, 125, 0.24) 0%,
    rgba(0, 95, 170, 0.28) 55%,
    rgba(0, 60, 130, 0.34) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 10px 30px rgba(0, 45, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -20px 40px -24px rgba(0, 30, 80, 0.75);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  text-shadow: 0 1px 10px rgba(0, 25, 70, 0.65);
  /* Плавный отклик на курсор: подсветка едет за мышью (--mx/--my ставит
     initHeroPrimaryPointer в app.js), кнопка чуть приподнимается и
     наклоняется в сторону курсора */
  transform: perspective(900px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
  transition: background 0.7s var(--ease-out),
              border-color 0.7s var(--ease-out),
              box-shadow 0.7s var(--ease-out),
              transform 0.6s var(--ease-smooth);
  will-change: transform;
}
/* Подъём кнопки при наведении намеренно не делаем: он читался как лишняя
   тень снизу и справа. Наклон за курсором остаётся - он работает только у
   стартовой пары, после выбора режима кнопка живёт на inline-координатах
   (FLIP в toggle.js) и лишний transform сбил бы её позицию */
.hero-btn--primary::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}
/* Пробегающий блик у primary отключён - вместо него слои .hero-btn__fx */
.hero-btn--primary::after {
  background: none;
  transform: none;
}

/* ─── Курсорные слои primary ───
   .hero-btn__photo - снимок регистратуры под синей вуалью, едет за курсором.
   .hero-btn__ring - радужная кромка, видимая только вокруг курсора:
   маска-окно на обёртке вырезает участок, вложенный <b> рисует саму рамку
   (conic-gradient + xor-маска - обычный приём градиентной рамки). */
.hero-btn__fx {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Фотография регистратуры под стеклом кнопки. mix-blend-mode: luminosity
   оставляет от снимка только светотень, цвет берётся у синей кнопки -
   поэтому фон читается как «синеватая» подложка, а не как чужая картинка.
   Смещается за курсором (--px/--py) и проявляется медленно */
.hero-btn__photo {
  position: absolute;
  inset: -10%;
  background: url('../assets/img/registratura6.jpg?v=20260803') 12% 82% / cover no-repeat;
  filter: brightness(1.06) saturate(0.95);
  opacity: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.04);
  transition: opacity 0.9s var(--ease-out),
              transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Синяя вуаль поверх снимка - он должен читаться как подложка ПОД стеклом
   кнопки, а не как самостоятельная картинка, и не выбеливать текст */
.hero-btn__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* блик по верхней кромке - как отсвет на стекле */
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 22%, rgba(255, 255, 255, 0) 46%),
    /* мягкий отсвет снизу */
    linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 26%),
    /* затемнение к краям, чтобы снимок «уходил» под стекло */
    radial-gradient(125% 145% at 50% 45%, rgba(0, 18, 52, 0) 42%, rgba(0, 18, 52, 0.5) 100%),
    /* базовая синева */
    linear-gradient(180deg,
      rgba(0, 58, 125, 0.30) 0%,
      rgba(0, 92, 172, 0.24) 55%,
      rgba(0, 52, 118, 0.38) 100%);
}

.hero-btn__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.75s var(--ease-out);
  -webkit-mask: radial-gradient(circle 210px at var(--mx, 50%) var(--my, 50%),
    #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 72%);
          mask: radial-gradient(circle 210px at var(--mx, 50%) var(--my, 50%),
    #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 72%);
}

.hero-btn__ring b {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  filter: drop-shadow(0 0 7px rgba(130, 190, 255, 0.55));
  /* Углы conic-gradient: 0deg - верх, 90deg - право, 270deg - лево.
     Правую половину держим в фиолетово-салатовых, левую - в тёплых
     (оранжевый, красный, жёлтый); синих и серых тут быть не должно */
  background: conic-gradient(from 0deg,
    #c084fc 0deg,
    #a855f7 45deg,
    #86e02a 110deg,
    #b6f03a 150deg,
    #ffd23f 200deg,
    #ff8a1e 250deg,
    #ff4d3d 292deg,
    #d96bf5 340deg,
    #c084fc 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.hero-btn--primary:hover .hero-btn__ring {
  opacity: 1;
}
.hero-btn--primary:hover .hero-btn__photo {
  opacity: 0.72;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.08);
}
.hero-btn--primary .hero-btn__title::after {
  background: rgba(255, 255, 255, 0.85);
}
.hero-btn--primary:hover {
  background: linear-gradient(180deg,
    rgba(0, 70, 140, 0.36) 0%,
    rgba(0, 110, 195, 0.40) 55%,
    rgba(0, 70, 150, 0.46) 100%);
  border-color: rgba(255, 255, 255, 0.75);
  /* Внешняя тень остаётся ровно такой же, как в покое - при наведении
     меняются только внутренние блики, кнопка не «взлетает» */
  box-shadow:
    0 10px 30px rgba(0, 45, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -22px 44px -22px rgba(0, 25, 70, 0.8);
}

/* ─── SECONDARY: прозрачный светлый glass ─── */
.hero-btn--secondary {
  background: rgba(255, 255, 255, 0.55);
  color: var(--brand-blue);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(0, 50, 110, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.hero-btn--secondary::before {
  background: linear-gradient(90deg, transparent, rgba(0, 95, 171, 0.3), transparent);
}
.hero-btn--secondary::after {
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(0, 95, 171, 0.08) 50%,
    transparent 65%);
}
.hero-btn--secondary .hero-btn__title::after {
  background: var(--brand-blue);
}
.hero-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 95, 171, 0.4);
  box-shadow: 0 10px 24px rgba(0, 50, 110, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ─── CHECK-UP: светлая плашка с крупным вордмарком ───
   Замена кнопки "Полная проверка организма". Светлое матовое стекло (в отличие
   от тёмного navy-glass primary) - синий вордмарк читается на синем hero.
   Сигнатура блока - сам вордмарк Coolvetica; всё вокруг держим тихим.
   Клик открывает модалку записи (data-action="appointment"). */
.hero-btn--checkup {
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px 14px;
  min-height: 128px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(0, 50, 110, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  transition: background 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out),
              transform 0.4s var(--ease-out);
}
.hero-btn--checkup:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(20, 139, 168, 0.35);
  box-shadow: 0 12px 26px rgba(0, 50, 110, 0.16),
              inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translateY(-3px);
}

/* Транскрипция [чек-а́п] - верхний правый угол */
.checkup__ipa {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--slate-pale);
}

/* Вордмарк Check-Up - синий градиент navy -> cyan, шрифт Coolvetica */
.checkup__word {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.005em;
  background: linear-gradient(118deg,
    var(--navy) 0%, var(--navy-light) 46%, var(--cyan-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--navy);
  filter: drop-shadow(0 2px 6px rgba(36, 76, 138, 0.18));
  transition: filter 0.4s var(--ease-out);
}
.hero-btn--checkup:hover .checkup__word {
  filter: drop-shadow(0 4px 12px rgba(26, 172, 209, 0.32));
}

/* Подпись под вордмарком */
.checkup__cap {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn--checkup,
  .checkup__word { transition: none; }
  .hero-btn--checkup:hover { transform: none; }
}

/* В compact-состоянии (кнопка перенесена в hero как заголовок-плашка)
   убираем верхнюю светящуюся линию ::before и блик-штрих ::after -
   на бесфоновой плашке они читаются как лишний артефакт под подписью
   "УПРАВЛЕНИЕ...". Селектор ловит .hero-btn, ставшую прямым потомком hero */
.hero.hero--appointment-mode > .hero-btn::before,
.hero.hero--programs-mode > .hero-btn::before,
.hero.hero--appointment-mode > .hero-btn::after,
.hero.hero--programs-mode > .hero-btn::after {
  display: none;
}

/* Compact "Записаться на приём" (primary вариант) после переезда в hero -
   синий navy без тени, чтобы выглядел как "Комплексные программы".
   !important - чтобы каскад от .hero-btn--primary { color: #fff } и
   inline-стилей анимации точно не перебил navy. */
.hero.hero--appointment-mode > .hero-btn--primary,
.hero.hero--appointment-mode > .hero-btn--primary .hero-btn__title {
  color: var(--brand-blue) !important;
  text-shadow: none !important;
}

/* Курсорные слои в compact-состоянии не нужны: кнопка стала подписью */
.hero.hero--appointment-mode > .hero-btn .hero-btn__fx,
.hero.hero--programs-mode > .hero-btn .hero-btn__fx {
  display: none;
}

/* ─── Toggle (ОМС / ДМС / Платно) ─── */
.toggle {
  margin-bottom: var(--sp-6);
  text-align: center;
  transition: opacity 0.55s var(--ease-smooth),
              transform 0.55s var(--ease-smooth),
              max-height 0.6s var(--ease-smooth);
}

/* Скрыт по умолчанию, появляется после клика на "Записаться на приём" */
.toggle--hidden {
  opacity: 0;
  transform: scale(0.82) translateY(-10px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  margin-bottom: 0;
}

/* Эффектное появление тумблера: трек появляется с blur+scale+rotate
   и мягким свечением, затем кнопки внутри всплывают с каскадом */
.toggle--revealing {
  animation: toggle-reveal 1s var(--ease-spring) both;
}
.toggle--revealing .toggle__track {
  animation: toggle-track-glow 1.2s var(--ease-out) both;
}
.toggle--revealing .toggle__btn {
  animation: toggle-btn-appear 0.55s var(--ease-out) both;
}
.toggle--revealing .toggle__btn:nth-child(2) { animation-delay: 0.35s; }
.toggle--revealing .toggle__btn:nth-child(3) { animation-delay: 0.45s; }
.toggle--revealing .toggle__btn:nth-child(4) { animation-delay: 0.55s; }

@keyframes toggle-reveal {
  0%   { opacity: 0; transform: scale(0.55) rotate(-6deg) translateY(-18px); filter: blur(10px); }
  40%  { opacity: 1; transform: scale(1.08) rotate(2deg) translateY(0); filter: blur(0); }
  65%  { transform: scale(0.97) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0) translateY(0); filter: blur(0); }
}

@keyframes toggle-track-glow {
  0%   { box-shadow: 0 0 0 rgba(255,255,255,0); }
  40%  { box-shadow: 0 0 50px rgba(255,255,255,0.55), 0 0 100px rgba(109,209,233,0.25); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
}

@keyframes toggle-btn-appear {
  0%   { opacity: 0; transform: translateY(12px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.toggle__track {
  display: inline-flex;
  position: relative;
  z-index: 2;
  background: var(--hero-toggle-bg);
  border: 1px solid var(--hero-toggle-border);
  border-radius: var(--radius-pill);
  padding: 3px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 0.8s, border-color 0.8s;
  overflow: hidden;
}

/* Световой блик плавно прокатывается по тумблеру слева направо */
.toggle__track--shimmer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -100%;
  width: 60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.15) 70%,
    transparent 100%
  );
  border-radius: inherit;
  animation: toggle-shimmer 2s ease-in-out 1 forwards;
}

@keyframes toggle-shimmer {
  0%   { left: -60%; }
  100% { left: 100%; }
}

.toggle__indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: calc((100% - 6px) / 3);
  background: var(--white);
  border-radius: var(--radius-pill);
  transition: transform 0.6s var(--ease-spring),
              background 0.4s var(--ease-smooth),
              box-shadow 0.4s var(--ease-smooth),
              opacity 0.3s var(--ease-smooth);
  z-index: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  opacity: 0;
}

.toggle__indicator--active {
  opacity: 1;
}

.toggle__indicator[data-pos="1"] { transform: translateX(0); }
.toggle__indicator[data-pos="2"] { transform: translateX(100%); }
.toggle__indicator[data-pos="3"] { transform: translateX(200%); }

.toggle__btn {
  position: relative;
  z-index: 1;
  /* 150px - чтобы «Платные услуги» (125.6px в Involve Bold 16px) влезало в одну строку */
  width: 150px;
  text-align: center;
  padding: 14px 0;
  font-size: var(--text-md);
  font-weight: 700;
  white-space: nowrap;
  color: var(--hero-text-muted);
  border-radius: var(--radius-pill);
  transition: color var(--t-fast);
  user-select: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.toggle__btn--active {
  color: var(--mode-primary);
  text-shadow: none;
}

.toggle__btn:hover:not(.toggle__btn--active) {
  color: var(--hero-text);
}

/* Light theme: на пастельном overlay полупрозрачный белый текст слепнет.
   Делаем чёрный без тени до hover/active - читается чётко. */
[data-theme="light"] .toggle__btn {
  color: #000;
  text-shadow: none;
}
[data-theme="light"] .toggle__btn:hover:not(.toggle__btn--active) {
  color: #000;
}

/* ─── Subcategories (inside toggle-wrap, 15px below toggle) ─── */
.hero__subs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 173px;
  gap: var(--sp-2);
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--t-slow) var(--ease-smooth),
              opacity var(--t-base) var(--ease-smooth),
              margin-top var(--t-slow) var(--ease-smooth);
}

.hero__subs--visible {
  max-height: 120px;
  opacity: 1;
  margin-top: 15px;
}

.sub-pill {
  padding: 8px 20px;
  border: 1px solid var(--hero-pill-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #000;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  line-height: 1;
}

.sub-pill:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

/* ─── CTA Buttons ─── */
.hero__cta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-left: 173px;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  white-space: nowrap;
}

/* ─── Phones ─── */
.hero__phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 173px;
  gap: var(--sp-8);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--t-slow) var(--ease-smooth),
              opacity var(--t-base) var(--ease-smooth);
}

.hero__phones--visible {
  max-height: 100px;
  opacity: 1;
}

.phone-block {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.phone-block__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--hero-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--hero-glass-bg);
}

.phone-block__icon svg {
  width: 18px;
  height: 18px;
  color: var(--hero-text);
}

.phone-block__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--hero-text-secondary);
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.phone-block__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--hero-text);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

[data-theme="light"] .phone-block__label,
[data-theme="light"] .phone-block__number {
  text-shadow: none;
}

/* Локальный возврат цветов телефонного блока к виду v1_17:
   переопределяем токены только внутри .hero__phones, чтобы дочерние
   элементы (иконка, label, number) использовали тёмно-синие тона
   v1_17 поверх нового градиента */
[data-theme="light"] .hero__phones {
  --hero-text: #1a2a4a;
  --hero-text-secondary: #2d3d5c;
}

/* ─── Info Cards (right side) ─── */
.info-card {
  background: var(--hero-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--hero-glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
  box-shadow: 0 4px 20px rgba(36,76,138,0.1);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "text text"
    "link link";
  column-gap: var(--sp-3);
  row-gap: 4px;
  align-items: center;
}

[data-theme="light"] .info-card {
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
}
/* Наведение: карточка остаётся белой и читаемой. Раньше фон подменялся на
   полупрозрачный серый (--hero-glass-border) и тёмный текст «сваливался» по
   контрасту. Теперь только подъём, тень, брендовая рамка и оживающие
   иконка со стрелкой - смысл «кликабельно» читается, читаемость не страдает */
[data-theme="light"] .info-card:hover {
  background: #ffffff;
  border-color: rgba(0, 95, 170, 0.45);
  box-shadow: 0 14px 38px rgba(0, 60, 130, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
}

.info-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 95, 170, 0.45);
  box-shadow: 0 10px 28px rgba(0, 60, 130, 0.16);
}

.info-card:hover .info-card__icon {
  background: rgba(0, 95, 170, 0.14);
  transform: scale(1.06);
}
.info-card:hover .info-card__icon svg { color: var(--brand-blue); }
.info-card:hover .info-card__title { color: var(--brand-blue); }
/* Стрелка в подписи-ссылке отъезжает вправо */
.info-card:hover .info-card__link { color: var(--brand-blue); }
.info-card:hover .info-card__arrow { transform: translateX(5px); }

.info-card__icon {
  grid-area: icon;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(109,209,233,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  transition: background var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.info-card__icon svg {
  width: 18px;
  height: 18px;
  color: var(--sky);
  transition: color var(--t-base) var(--ease-out);
}

.info-card__title {
  grid-area: title;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--hero-text);
  margin-bottom: 0;
  line-height: 1.25;
}

.info-card__text {
  grid-area: text;
  font-size: var(--text-sm);
  color: #000000;
  line-height: 1.4;
  margin-bottom: 0;
  margin-top: 2px;
}

.info-card__link {
  grid-area: link;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cyan);
  transition: color var(--t-fast);
  margin-top: 2px;
}

.info-card__arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}

/* Карточка целиком - ссылка, поэтому подчёркивание снимаем и наследуем цвет */
a.info-card { text-decoration: none; color: inherit; display: grid; }
a.info-card:hover .info-card__link { color: var(--brand-blue); }

/* Info-карточки сдвигаются влево, чтобы попасть в расширенную подложку.
   Сдвиг адаптивный: на узких окнах прежние -114px, а с ростом ширины
   карточки отходят правее (до -30px) - иначе они жались вплотную к
   телефонам и подразделам. vw при html{zoom:1.25} не масштабируется,
   поэтому пороги заданы в «экранных» пикселях.
   Правило держим в конце файла: выше по тексту оно почему-то не доезжало
   до CSSOM (см. журнал итерации 2026-08-03). */
.hero.hero--mode-active .hero__right.hero__right--visible {
  transform: translate(clamp(-114px, calc(-114px + (100vw - 1500px) * 0.22), -30px), 0);
}

/* На мобиле и планшете карточки стоят в потоке под телефонами, и сдвиг влево
   уводит их за край экрана. В responsive.css сброс уже есть, но у правила выше
   специфичность выше (четыре класса против двух), поэтому гасим здесь. */
@media (max-width: 1024px) {
  .hero.hero--mode-active .hero__right.hero__right--visible {
    transform: none;
  }
}