/* ==========================================================================
   Центр лазерной микрохирургии глаза
   Дизайн-система «Оптическая точность». Значения перенесены из исходника
   04-ДИЗАЙН/дизайн-система.html без изменений.

   Верстаем от мобильного: базовые правила — узкий экран, медиазапросы
   только наращивают.
   ========================================================================== */

:root {
  --color-bg-primary: #F3F7FC;
  --color-bg-secondary: #EAF1F8;
  --color-surface: #FBFDFF;
  --color-surface-soft: #E1EAFB;
  --color-ice: #E1EAFB;
  --color-air: #A6CAF5;
  --color-optic: #043F8D;
  --color-accent: #1F4FE0;
  --color-accent-hover: #1A43BE;
  --color-vivid-blue: #043F8D;
  --color-text-primary: #0E1C36;
  --color-text-secondary: #536278;
  --color-line: #D5DFEC;
  --color-muted: #8299B3;
  --color-success: #2E7D6B;
  --color-success-soft: #E2EFEA;
  --color-error: #B4544A;
  --color-error-soft: #F6E7E4;

  --font-display: "Wix Madefor Display", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-body: "Golos Text", "Segoe UI", Arial, sans-serif;
  --font-accent: "Lora", Georgia, "Times New Roman", serif;

  --text-display-xl: clamp(3.75rem, 8vw, 8.75rem);
  --text-display: clamp(3rem, 6vw, 6.5rem);
  --text-h1: clamp(2.5rem, 5vw, 5rem);
  --text-h2: clamp(2rem, 3.8vw, 3.75rem);
  --text-h3: clamp(1.5rem, 2.4vw, 2.25rem);
  --text-h4: 1.25rem;
  --text-lead: clamp(1.125rem, 1.6vw, 1.5rem);
  --text-body-lg: 1.1875rem;
  --text-body: 1.0625rem;
  --text-body-sm: .9375rem;
  --text-caption: .8125rem;

  --leading-tight: 1.02;
  --leading-heading: 1.12;
  --leading-body: 1.62;
  --tracking-tight: -.02em;
  --tracking-ui: .02em;
  --tracking-label: .12em;

  --space-2xs: 4px;  --space-xs: 8px;   --space-sm: 16px;
  --space-md: 24px;  --space-lg: 32px;  --space-xl: 48px;
  --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;

  --radius-sm: 8px;  --radius-md: 16px; --radius-lg: 28px;
  --radius-xl: 48px; --radius-pill: 999px;

  --shadow-subtle: 0 1px 2px rgba(14, 28, 54, .05), 0 8px 24px rgba(4, 63, 141, .06);
  --shadow-soft: 0 24px 64px rgba(4, 63, 141, .09);
  --shadow-inset: inset 0 1px 0 rgba(251, 253, 255, .84), inset 0 -1px 0 rgba(166, 202, 245, .16);
  --shadow-float: 0 32px 80px rgba(4, 63, 141, .13);
  --shadow-action: 0 8px 24px -4px rgba(31, 79, 224, .55);
  --shadow-crystal: inset 0 2px 1px rgba(251, 253, 255, .92), inset 0 -2px 3px rgba(4, 63, 141, .14), inset 2px 0 2px rgba(251, 253, 255, .48), inset -2px 0 2px rgba(130, 153, 179, .22), 0 1px 0 rgba(251, 253, 255, .86), 0 5px 0 -2px rgba(130, 153, 179, .24), 0 16px 30px -13px rgba(4, 63, 141, .3);

  --glass-fill-clear: rgba(251, 253, 255, .035);
  --glass-fill-strong: rgba(251, 253, 255, .09);
  --glass-rim: rgba(251, 253, 255, .78);
  --glass-edge: rgba(130, 153, 179, .42);

  --container: 1280px;
  --container-text: 720px;
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --nav-height: 60px;
  --шапка-верх: 60px;

  /* Множители режима доступности. В обычном режиме — единица,
     поэтому внешний вид не меняется ни на пиксель. */
  --масштаб-текста: 1;
  --масштаб-строки: 1;
  --масштаб-цели: 1;
}

/* --- Режимы доступности ---------------------------------------------------
   Меняются только переменные. Отдельной версии сайта нет: копии отстают
   по контенту и ломаются. */

html[data-режим="крупный"],
html[data-режим="контрастный"] {
  --масштаб-текста: 1.25;
  --масштаб-строки: 1.8;
  --масштаб-цели: 1.2;
}

html[data-режим="контрастный"] {
  --color-text-primary: #0E1C36;
  --color-text-secondary: #0E1C36;
  --color-bg-primary: #FBFDFF;
  --color-bg-secondary: #FBFDFF;
  --color-surface: #FBFDFF;
  --color-line: #0E1C36;
  --color-muted: #0E1C36;
  --glass-fill-clear: #FBFDFF;
  --glass-fill-strong: #FBFDFF;
}

/* --- Основа --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 20px);
  font-size: calc(100% * var(--масштаб-текста));
}

body {
  margin: 0;
  color: var(--color-text-primary);
  background:
    radial-gradient(ellipse 75% 55% at 88% -8%, rgba(166,202,245,.42), transparent 68%) fixed,
    radial-gradient(ellipse 70% 52% at -8% 22%, rgba(225,234,251,.64), transparent 68%) fixed,
    linear-gradient(120deg, transparent 12%, rgba(251,253,255,.38) 34%, rgba(166,202,245,.16) 48%, transparent 70%) fixed,
    linear-gradient(160deg, #EAF1F8 0%, #FBFDFF 46%, #E1EAFB 100%);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: calc(var(--leading-body) * var(--масштаб-строки));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
/* Ссылка внутри текста страницы. Без цвета она сливается с абзацем: подчёркивание
   в сплошном тексте замечают не все, а по этим ссылкам скачивают бланки
   и памятки. Кобальт — единственный акцент действия в дизайн-системе. */
.памятка-текст a:not(.btn):not(.карточка),
.колонка-текста a:not(.btn):not(.карточка) {
  color: var(--color-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.памятка-текст a:not(.btn):not(.карточка):hover,
.колонка-текста a:not(.btn):not(.карточка):hover { color: var(--color-accent-hover); }
html[data-режим="контрастный"] .памятка-текст a:not(.btn):not(.карточка),
html[data-режим="контрастный"] .колонка-текста a:not(.btn):not(.карточка) {
  color: var(--color-text-primary); text-decoration-thickness: 2px;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
/* Без этого атрибут height из разметки задаёт высоту в пикселях
   и aspect-ratio не срабатывает: фотография вытягивается. */
img { height: auto; }
p, h1, h2, h3, h4, blockquote, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-heading); }
strong { font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--color-ice); color: var(--color-text-primary); }

/* Фокус виден всегда — весь сайт проходится клавишей Tab. */
:focus-visible { outline: 3px solid rgba(31, 79, 224, .34); outline-offset: 4px; }
html[data-режим="контрастный"] :focus-visible { outline: 3px solid #0E1C36; }

.только-для-читалки {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ссылка-к-содержимому {
  position: fixed; top: 12px; left: 12px; z-index: 2000; transform: translateY(-180%);
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-surface); text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
}
.ссылка-к-содержимому:focus { transform: translateY(0); }

.контейнер { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.колонка-текста { max-width: var(--container-text); }

/* Когда колонка текста живёт прямо на контейнере, сам контейнер остаётся
   широким и центрированным, а до 720 px сужается его содержимое. Иначе
   текстовые блоки уезжали в центр, а обложка оставалась у левого края. */
.контейнер.колонка-текста { max-width: none; }
.контейнер.колонка-текста > * { max-width: var(--container-text); }

.секция { padding-block: var(--space-2xl); }
.секция--приглушённая { background: rgba(234, 241, 248, .55); }

.надзаголовок {
  font: 600 var(--text-caption)/1.2 var(--font-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.заголовок-секции {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-xs);
}
.лид { font-size: var(--text-lead); color: var(--color-text-secondary); }

/* --- Кнопки ---------------------------------------------------------------
   Стеклянные все, включая главное действие. Плоскими не заменять —
   это утверждённый вид. */

.btn {
  min-height: calc(52px * var(--масштаб-цели));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(130,153,179,.46);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font: 700 .9375rem/1 var(--font-display);
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-primary);
  cursor: pointer;
  background: rgba(251,253,255,.025);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: inset 0 2px 1px rgba(251,253,255,.96), inset 0 -3px 3px rgba(4,63,141,.16), inset 2px 0 2px rgba(251,253,255,.54), inset -2px 0 2px rgba(130,153,179,.24), 0 1px 0 rgba(251,253,255,.9), 0 5px 0 -2px rgba(130,153,179,.28), 0 16px 28px -12px rgba(4,63,141,.34);
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast), border-color var(--duration-fast),
              box-shadow var(--duration-fast);
}
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.btn--primary {
  border-color: rgba(31,79,224,.34);
  background: radial-gradient(ellipse 30% 76% at 100% 110%, rgba(31,79,224,.32), rgba(166,202,245,.12) 46%, transparent 76%), rgba(251,253,255,.025);
  box-shadow: inset 0 2px 1px rgba(251,253,255,.98), inset 0 -3px 3px rgba(31,79,224,.16), inset 2px 0 2px rgba(251,253,255,.58), inset -2px 0 2px rgba(31,79,224,.18), 0 1px 0 rgba(251,253,255,.92), 0 5px 0 -2px rgba(31,79,224,.2), 0 17px 30px -12px rgba(31,79,224,.38);
}
.btn--primary:hover {
  border-color: rgba(31,79,224,.42);
  background: radial-gradient(ellipse 34% 82% at 100% 108%, rgba(31,79,224,.42), rgba(166,202,245,.15) 48%, transparent 76%), rgba(251,253,255,.04);
  transform: translateY(-2px);
}
.btn--secondary {
  border-color: rgba(130,153,179,.44);
  background: radial-gradient(ellipse 20% 54% at 96% 100%, rgba(166,202,245,.32), transparent 76%), rgba(251,253,255,.02);
  box-shadow: var(--shadow-crystal);
}
.btn--secondary:hover { transform: translateY(-2px); }
.btn:disabled, .btn.is-disabled {
  color: var(--color-text-secondary);
  border-color: rgba(130,153,179,.22);
  background: rgba(225,234,251,.06);
  opacity: .58;
  transform: none;
  cursor: not-allowed;
}
.btn--во-всю-ширину { width: 100%; }

/* Стеклянная оболочка рисуется скриптом. Правила ниже гасят CSS-версию
   и включаются ТОЛЬКО когда скрипт отработал и поставил класс на <html>.
   Без этой страховки при несработавшем скрипте от кнопки остался бы
   один текст — в исходнике дизайн-системы её нет. */

html.оболочка-готова .btn {
  overflow: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 1px 0 rgba(251,253,255,.48);
}
html.оболочка-готова .btn:hover {
  border-color: transparent; background: transparent; box-shadow: none;
  transform: translateY(-2px);
}
html.оболочка-готова .btn > svg.btn__glass-shell {
  position: absolute; inset: -5px; z-index: 0;
  width: calc(100% + 10px); height: calc(100% + 10px);
  max-width: none; overflow: visible; pointer-events: none;
}
.btn__content {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.glass-shell-fill { fill: rgba(251,253,255,.018); transition: fill var(--duration-fast) var(--ease-out); }
.glass-shell-outer { stroke-width: 2.4; }
.glass-shell-inner { fill: none; stroke: rgba(251,253,255,.58); stroke-width: 1.15; }
.glass-shell-top { fill: none; stroke-linecap: round; opacity: .72; transition: opacity var(--duration-fast), transform var(--duration-fast); }
.glass-shell-bottom { fill: none; stroke-linecap: round; opacity: .82; }
.glass-shell-side { fill: none; stroke: rgba(130,153,179,.32); stroke-width: 1.2; }
.glass-shell-caustic-blue { fill: rgba(31,79,224,.52); opacity: .5; }
.glass-shell-caustic-warm { fill: rgba(180,84,74,.28); opacity: .24; }
html.оболочка-готова .btn:hover .glass-shell-top { opacity: .86; transform: translateY(-.4px); }
html.оболочка-готова .btn:hover .glass-shell-caustic-blue { opacity: .7; }
html.оболочка-готова .btn--primary .glass-shell-caustic-blue { opacity: .76; }
html.оболочка-готова .btn--secondary .glass-shell-caustic-blue { opacity: .46; }
html.оболочка-готова .btn--primary:active {
  color: var(--color-surface);
  transform: translateY(1px);
  text-shadow: 0 1px 1px rgba(4,63,141,.38);
}
html.оболочка-готова .btn--primary:active .glass-shell-fill { fill: rgba(4,63,141,.86); }

/* «Уменьшение прозрачности» включают именно люди с проблемами зрения:
   стекло заменяется сплошной поверхностью. */
@media (prefers-reduced-transparency: reduce) {
  html.оболочка-готова .btn > svg.btn__glass-shell { display: none; }
  html.оболочка-готова .btn {
    border-color: var(--color-line);
    background: var(--color-surface);
    box-shadow: var(--shadow-subtle);
    backdrop-filter: none;
    text-shadow: none;
  }
  html.оболочка-готова .btn--primary { border-color: var(--color-accent); }
}
html[data-режим="контрастный"].оболочка-готова .btn > svg.btn__glass-shell { display: none; }
html[data-режим="контрастный"].оболочка-готова .btn {
  border: 2px solid var(--color-text-primary);
  background: var(--color-surface);
  box-shadow: none;
  text-shadow: none;
}
html[data-режим="контрастный"].оболочка-готова .btn--primary {
  background: var(--color-accent);
  color: #FBFDFF;
  border-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Шапка и меню
   ========================================================================== */

.шапка {
  position: sticky; top: 0; z-index: 900;
  display: block;
  background: rgba(251,253,255,.82);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid rgba(213,223,236,.7);
}
/* Опознавательная плашка выделена голубым градиентом: название клиники должно
   читаться как акцент, а не как строка над меню. Градиент уходит в прозрачность
   вправо, чтобы кнопка «Записаться» осталась на светлом и держала контраст. */
.шапка__верх {
  background: linear-gradient(100deg,
    #CADCFA 0%,
    #DCE8FC 38%,
    #EDF4FE 68%,
    rgba(251,253,255,0) 100%);
}
html[data-режим="контрастный"] .шапка { background: var(--color-surface); backdrop-filter: none; }
html[data-режим="контрастный"] .шапка__верх { background: var(--color-surface); }

.шапка__верх-ряд {
  display: flex; align-items: center; gap: var(--space-2xs);
  width: min(calc(100% - 32px), 1440px); margin-inline: auto;
  min-height: var(--шапка-верх);
}
/* Вторая плашка — только меню. На телефоне её нет: меню живёт в гамбургере. */
.шапка__низ { display: none; }

.логотип {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; margin-right: auto; padding-block: 6px;
  flex: 0 1 auto; min-width: 0;
}
.логотип__знак { width: auto; height: 36px; flex: 0 0 auto; }
.логотип__текст { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.логотип__имя {
  font: 700 .6875rem/1.25 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  max-width: 100%;
  overflow-wrap: break-word;
}
/* На узком экране адреса дают только фамилию улицы и номер дома:
   «ул. Космонавта» и город занимают больше половины строки, а узнают
   адрес по фамилии. Полные адреса показываем с планшета. */
.логотип__адреса {
  display: block;
  font: 500 .625rem/1.3 var(--font-body);
  color: var(--color-text-secondary);
}
.логотип__город, .логотип__адрес { display: none; }
.логотип__адрес-кратко { display: block; white-space: nowrap; }

.кнопка-иконка {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(44px * var(--масштаб-цели));
  min-height: calc(44px * var(--масштаб-цели));
  border: 1px solid var(--glass-edge); border-radius: var(--radius-pill);
  background: var(--glass-fill-clear); box-shadow: var(--shadow-crystal);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
  cursor: pointer; text-decoration: none;
}
.кнопка-иконка svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
html[data-режим="контрастный"] .кнопка-иконка {
  border: 2px solid var(--color-text-primary); background: var(--color-surface);
  box-shadow: none; backdrop-filter: none;
}

.шапка__телефон-текст, .шапка__кнопка-записи, .меню-десктоп { display: none; }
/* В шапке телефона места нет — там переключатель живёт в меню.
   Селектор из двух классов: иначе общее правило .режимы ниже по файлу
   перебивает скрытие. */
.шапка .режимы--в-шапке { display: none; }
.шапка__верх-ряд > * { flex: 0 0 auto; }
.логотип { flex: 0 1 auto; min-width: 0; }

/* Меню на телефоне открывается на весь экран, а не выпадашкой. */
.меню {
  position: fixed; inset: 0; z-index: 950;
  display: none; flex-direction: column;
  padding: var(--space-sm);
  background: var(--color-surface);
  overflow-y: auto;
}
.меню[data-открыто="да"] { display: flex; }
.меню__верх { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.меню__список { list-style: none; display: flex; flex-direction: column; gap: var(--space-2xs); }
.меню__ссылка {
  /* Пункты с выпадающим списком — это <button>, и без сброса браузер
     рисует им свою серую рамку, серый фон и ширину по содержимому.
     В меню на телефоне это выглядело как три чужие кнопки среди ссылок. */
  appearance: none; -webkit-appearance: none;
  width: 100%; border: 0; background: none; color: inherit;
  text-align: left; cursor: pointer;

  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: calc(52px * var(--масштаб-цели));
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font: 600 1.05rem/1.3 var(--font-display);
  text-decoration: none;
}
.меню__ссылка:hover { background: var(--color-bg-secondary); }
.меню__подсписок { list-style: none; display: none; flex-direction: column; padding-left: var(--space-sm); }
.меню__пункт[data-раскрыт="да"] .меню__подсписок { display: flex; }
.меню__пункт[data-раскрыт="да"] .меню__стрелка { transform: rotate(180deg); }
.меню__стрелка { transition: transform var(--duration-fast) var(--ease-out); flex: 0 0 auto; }
.меню__подссылка {
  display: flex; align-items: center;
  min-height: calc(44px * var(--масштаб-цели));
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-body); color: var(--color-text-secondary); text-decoration: none;
}
.меню__подссылка:hover { color: var(--color-accent); }
.меню__низ { margin-top: auto; padding-top: var(--space-lg); display: grid; gap: var(--space-xs); }

/* Переключатель доступности: на телефоне он в меню — в шапке нет места. */
.режимы { display: flex; gap: var(--space-2xs); }
.режимы__кнопка {
  flex: 1; min-height: calc(44px * var(--масштаб-цели));
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: transparent; cursor: pointer;
  font-size: var(--text-body-sm);
}
.режимы__кнопка[aria-pressed="true"] {
  border-color: var(--color-accent); color: var(--color-accent); font-weight: 600;
}

/* ==========================================================================
   Обложка
   ========================================================================== */

.обложка { padding-block: 0 var(--space-xl); }
.слайдер { position: relative; }
.слайд { display: none; }
.слайд[data-активный="да"] { display: block; }

/* На узком экране фотография сверху, текст под ней:
   текст поверх фото на телефоне нечитаем. */
.слайд__фото {
  width: 100vw; margin-left: calc(50% - 50vw);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.слайд__текст { padding-top: var(--space-lg); }
.слайд__заголовок {
  font-size: var(--text-h1); letter-spacing: var(--tracking-tight);
  margin-top: var(--space-xs);
}
.слайд__подзаголовок {
  font-size: var(--text-lead); color: var(--color-text-secondary);
  margin-top: var(--space-sm); max-width: var(--container-text);
}
.обложка__действие { margin-top: var(--space-lg); }
.обложка__подпись {
  margin-top: var(--space-xs); font-size: var(--text-body-sm);
  color: var(--color-text-secondary); text-align: center;
}

/* Точки вместо стрелок на телефоне. Автопрокрутки нет — она мешает читать. */
.слайдер__точки { display: flex; gap: var(--space-xs); justify-content: center; margin-top: var(--space-md); }
.слайдер__точка {
  width: calc(44px * var(--масштаб-цели)); height: calc(44px * var(--масштаб-цели));
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.слайдер__точка::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-muted); transition: background var(--duration-fast), width var(--duration-fast);
}
.слайдер__точка[aria-current="true"]::before { background: var(--color-accent); width: 26px; border-radius: var(--radius-pill); }
.слайдер__стрелки { display: none; }

/* ==========================================================================
   Общие карточки и сетки
   ========================================================================== */

.карточка {
  border: 1px solid rgba(251,253,255,.9); border-radius: var(--radius-lg);
  background: rgba(251,253,255,.6);
  box-shadow: inset 0 1px 1px rgba(251,253,255,.9), inset 0 -1px 2px rgba(166,202,245,.16), 0 22px 54px -22px rgba(4,63,141,.22);
  padding: var(--space-md);
}
html[data-режим="контрастный"] .карточка {
  border: 2px solid var(--color-text-primary); background: var(--color-surface); box-shadow: none;
}
.сетка { display: grid; gap: var(--space-md); }

/* Направления: на телефоне вертикальный список карточек-ссылок.
   Десять табов на 360 px не помещаются, а скрытые за прокруткой не находят. */
.направления__табы { display: none; }
.направления__список { list-style: none; display: grid; gap: var(--space-xs); }
.направление-карточка {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: calc(64px * var(--масштаб-цели));
  padding: var(--space-sm); text-decoration: none;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: rgba(251,253,255,.7);
  transition: border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
.направление-карточка:hover { border-color: var(--color-accent); transform: translateX(2px); }
.направление-карточка__имя { font: 600 var(--text-body-lg)/1.3 var(--font-display); }
.направление-карточка__лид { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* Ленты с прокруткой: оборудование и врачи. */
.лента {
  display: flex; gap: var(--space-sm);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-xs);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.лента > * { flex: 0 0 min(78%, 320px); scroll-snap-align: start; }
.лента__управление { display: none; }

.прибор-карточка__фото, .врач-карточка__фото {
  /* height: auto обязателен: Wagtail проставляет в разметке атрибуты
     width и height, и без него пропорция из стилей не применяется. */
  width: 100%; height: auto; border-radius: var(--radius-md);
  object-fit: cover; margin-bottom: var(--space-sm);
}
.прибор-карточка__фото { aspect-ratio: 4 / 3; }
.врач-карточка__фото { aspect-ratio: 3 / 4; }
.карточка__имя { font: 600 var(--text-h4)/1.25 var(--font-display); }
.карточка__пояснение { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-top: var(--space-2xs); }

.заглушка-фото {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-soft); color: var(--color-text-secondary);
  font-size: var(--text-caption); text-align: center; padding: var(--space-sm);
  border-radius: var(--radius-md);
}

/* Главный врач — карточка на всю ширину. */
.главный-врач { display: grid; gap: var(--space-md); }
.главный-врач__цитата {
  font-family: var(--font-accent); font-style: italic;
  font-size: var(--text-lead); line-height: 1.5;
}

/* Путь пациента: четыре шага в столбик, номер слева. */
.шаги { list-style: none; display: grid; gap: var(--space-md); }
.шаг { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; }
.шаг__номер {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-line); background: var(--color-surface);
  font: 700 var(--text-body)/1 var(--font-display); color: var(--color-accent);
}
.шаг__имя { font: 600 var(--text-body-lg)/1.3 var(--font-display); }
.шаг__текст { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-top: var(--space-2xs); }

/* Вопросы: аккордеон, по умолчанию всё свёрнуто. */
.вопрос { border-bottom: 1px solid var(--color-line); }
.вопрос__кнопка {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: calc(56px * var(--масштаб-цели));
  padding: var(--space-sm) 0; border: 0; background: transparent; cursor: pointer;
  text-align: left; font: 600 var(--text-body-lg)/1.35 var(--font-display);
}
.вопрос__значок { flex: 0 0 auto; transition: transform var(--duration-fast) var(--ease-out); }
.вопрос__кнопка[aria-expanded="true"] .вопрос__значок { transform: rotate(45deg); }
.вопрос__ответ { padding-bottom: var(--space-md); color: var(--color-text-secondary); max-width: var(--container-text); }
.вопрос__ответ[hidden] { display: none; }

/* Прайс: на телефоне список, а не таблица. Три колонки на 360 px нечитаемы. */
.прайс { list-style: none; display: grid; gap: var(--space-2xs); }
.прайс__строка {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-line);
}
.прайс__имя { flex: 1 1 auto; }
.прайс__цена { font: 600 var(--text-body-lg)/1 var(--font-display); white-space: nowrap; }
.прайс__единица { display: block; font-size: var(--text-caption); color: var(--color-text-secondary); font-weight: 400; }

/* Предупреждение о противопоказаниях — ФЗ-38 ст. 24. */
.противопоказания {
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: var(--space-sm); font-size: var(--text-body-sm);
  color: var(--color-text-secondary); background: rgba(251,253,255,.6);
}

/* ==========================================================================
   Подвал и липкая панель
   ========================================================================== */

.подвал {
  margin-top: var(--space-2xl);
  padding-block: var(--space-xl) calc(var(--space-xl) + 76px);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-body-sm);
}
.подвал__колонки { display: grid; gap: var(--space-lg); }
.подвал__заголовок {
  font: 600 var(--text-caption)/1.2 var(--font-display);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary); margin-bottom: var(--space-xs);
}
.подвал__список { list-style: none; display: grid; gap: var(--space-2xs); }
.подвал__список a { text-decoration: none; }
.подвал__список a:hover { color: var(--color-accent); }
.подвал__низ {
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  color: var(--color-text-secondary); font-size: var(--text-caption);
  display: grid; gap: var(--space-xs);
}
.подвал__юрссылки { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Панель внизу сплошная, не стеклянная: размытие — самая дорогая операция
   при прокрутке, а панель висит поверх движущегося контента. */
.липкая-панель {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm) calc(var(--space-xs) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  transform: translateY(120%);
  transition: transform var(--duration-base) var(--ease-out);
}
.липкая-панель[data-видна="да"] { transform: translateY(0); }
.липкая-панель .btn { min-height: calc(48px * var(--масштаб-цели)); padding-inline: 12px; }

/* ==========================================================================
   Форма заявки
   ========================================================================== */

.шторка { position: fixed; inset: 0; z-index: 1000; display: none; }
.шторка[data-открыта="да"] { display: block; }
.шторка__фон { position: absolute; inset: 0; background: rgba(14,28,54,.42); }
.шторка__окно {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-md) var(--space-sm) calc(var(--space-lg) + env(safe-area-inset-bottom));
}
.шторка__верх { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }

.поле { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.поле__подпись { font-size: var(--text-body-sm); font-weight: 600; }
.поле__ввод {
  /* Ширину задаём явно: <select> иначе растягивается по самому длинному
     направлению и на телефоне вылезает за край шторки. */
  width: 100%; max-width: 100%; box-sizing: border-box;
  min-height: calc(52px * var(--масштаб-цели));
  padding: 0 var(--space-sm);
  border: 1px solid var(--glass-edge); border-radius: var(--radius-pill);
  background: rgba(251,253,255,.6);
  /* Не ниже 16px: при меньшем iOS сам увеличивает страницу при фокусе. */
  font-size: max(16px, var(--text-body));
}
/* У поля выбора рисуем свою галочку. Системная прижимается к самому краю,
   а поле у нас скруглено пилюлей — стрелка утыкается в закругление.
   Своя стоит на 18 px от края и не мешает длинным названиям направлений. */
select.поле__ввод {
  appearance: none; -webkit-appearance: none;
  padding-right: calc(var(--space-sm) + 22px);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536278' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px 16px;
}
html[data-режим="контрастный"] select.поле__ввод {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1C36' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.поле__ввод:focus {
  border-color: rgba(31,79,224,.58); outline: none;
  box-shadow: 0 0 0 4px rgba(31,79,224,.12);
}
/* --- Мессенджеры -----------------------------------------------------------
   Один номер на три мессенджера. Подпись «Мессенджеры» обязательна: без неё
   номер читается как второй телефон клиники, и на него будут звонить. */
.мессенджеры { margin-top: var(--space-lg); }
.мессенджеры__номер {
  margin-top: var(--space-2xs);
  font: 600 var(--text-h4, 1.125rem)/1.2 var(--font-display);
}
.мессенджеры__список {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs);
  margin-top: var(--space-xs);
}
.мессенджер {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: calc(40px * var(--масштаб-цели));
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: var(--color-surface);
  font-size: var(--text-body-sm); text-decoration: none; white-space: nowrap;
}
.мессенджер .значок-бренда { width: 26px; height: 26px; }
a.мессенджер:hover { border-color: var(--color-accent); color: var(--color-accent); }
.мессенджер--без-ссылки { color: var(--color-text-secondary); cursor: default; }


/* Текст только для экранных читалок: значок без подписи должен как-то
   называться. */
.визуально-скрыто {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.подвал__мессенджеры-значок { display: inline-flex; }
.подвал__соцсети { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: var(--space-xs); }
.подвал__соцсеть { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.подвал__соцсеть .значок-бренда { width: 26px; height: 26px; }
.подвал__соцсеть:hover { color: var(--color-accent); }
.подвал__мессенджеры { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.подвал__мессенджеры-подпись { width: 100%; color: var(--color-muted); font-size: var(--text-body-sm); }
.подвал__мессенджеры .значок-бренда { width: 26px; height: 26px; }
.подвал__мессенджеры-номер { font-size: var(--text-body-sm); }

.поле__ошибка { color: var(--color-error); font-size: var(--text-body-sm); }
.поле__ошибка[hidden] { display: none; }
.поле__звёздочка { color: var(--color-error); }
.галочка.поле--с-ошибкой { border-radius: var(--radius-sm); outline: 2px solid var(--color-error); outline-offset: 4px; }
.поле--с-ошибкой .поле__ввод { border-color: var(--color-error); }

/* Тап-цель галочки — вся строка с текстом, а не квадратик. */
.галочка {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm);
  align-items: start; padding: var(--space-xs) 0;
  min-height: calc(44px * var(--масштаб-цели));
  cursor: pointer; font-size: var(--text-body-sm); line-height: 1.45;
}
.галочка input {
  width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--color-accent);
}
.галочка a { color: var(--color-accent); }

.медовая-ловушка {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   Cookie — компактная полоса внизу, не модальное окно на весь экран
   ========================================================================== */

.куки {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: none; gap: var(--space-sm); align-items: center; flex-wrap: wrap;
  padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--color-surface); border-top: 1px solid var(--color-line);
  font-size: var(--text-body-sm);
}
.куки[data-показана="да"] { display: flex; }
/* Пока открыто окно поверх страницы — форма или меню — полоса прячется.
   Иначе на телефоне она накрывает кнопку отправки: слой у неё выше.
   Двойная селекторность, чтобы правило перебило строку выше. */
:root[data-окно-поверх="да"] .куки.куки { display: none; }
.куки__текст { flex: 1 1 240px; }
.куки__кнопки { display: flex; gap: var(--space-xs); flex: 0 0 auto; }
.куки .btn { min-height: calc(44px * var(--масштаб-цели)); padding-inline: 16px; font-size: .78rem; }

/* ==========================================================================
   Планшет и десктоп. Базовые правила выше — под телефон, здесь только
   наращивание. Точки перелома из дизайн-системы.
   ========================================================================== */

@media (min-width: 768px) {
  :root { --nav-height: 68px; --шапка-верх: 68px; }
  .логотип__знак { height: 44px; }
  .логотип__имя { font-size: .8125rem; }
  .логотип__адреса {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
    font-size: .6875rem;
  }
  .логотип__город { display: inline; font-weight: 600; color: var(--color-text-secondary); }
  .логотип__адрес { display: inline; white-space: nowrap; }
  .логотип__адрес::before { content: "·"; margin-right: 8px; color: var(--color-muted); }
  .логотип__адрес-кратко { display: none; }
  .контейнер { width: min(calc(100% - 64px), var(--container)); }
  .секция { padding-block: var(--space-3xl); }

  .сетка--два { grid-template-columns: repeat(2, 1fr); }
  .сетка--три { grid-template-columns: repeat(3, 1fr); }

  .слайд__фото { width: 100%; margin-left: 0; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
  .обложка__действие { display: flex; align-items: center; gap: var(--space-md); }
  .обложка__подпись { margin-top: 0; text-align: left; }

  .шаги { grid-template-columns: repeat(2, 1fr); }
  .подвал__колонки { grid-template-columns: repeat(2, 1fr); }
  .главный-врач { grid-template-columns: 320px 1fr; align-items: center; }
}

@media (min-width: 768px) {
  .шапка__кнопка-записи { display: inline-flex; }
  .шапка__кнопка-записи.btn { min-height: 46px; padding-inline: 20px; font-size: .875rem; }
}

/* Меню на второй плашке начинается с 1024 px — правила ниже в блоке
   «Шапка в две плашки». Здесь остался только шаг кегля на широком экране. */
@media (min-width: 1440px) {
  .меню-десктоп__ссылка { font-size: 1rem; }
}

@media (min-width: 1024px) {
  .меню-десктоп__список { list-style: none; display: flex; align-items: center; gap: 2px; }
  .меню-десктоп__пункт { position: relative; }
  .меню-десктоп__ссылка {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 12px; border-radius: var(--radius-pill);
    font: 500 .9375rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  }
  .меню-десктоп__ссылка:hover { background: rgba(225,234,251,.6); color: var(--color-accent); }
  .меню-десктоп__подсписок {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 950;
    display: none; flex-direction: column; gap: 2px;
    min-width: 280px; padding: var(--space-xs);
    border: 1px solid var(--color-line); border-radius: var(--radius-md);
    background: var(--color-surface); box-shadow: var(--shadow-soft);
    list-style: none;
  }
  .меню-десктоп__пункт:hover .меню-десктоп__подсписок,
  .меню-десктоп__пункт:focus-within .меню-десктоп__подсписок { display: flex; }
  .меню-десктоп__подссылка {
    display: block; padding: 10px 12px; border-radius: var(--radius-sm);
    text-decoration: none; font-size: var(--text-body-sm);
  }
  .меню-десктоп__подссылка:hover { background: var(--color-bg-secondary); color: var(--color-accent); }

  /* Обложка: текст слева на фоне страницы, фотография справа.
     Текст поверх снимка не кладём — контраст на светлых кадрах не держится. */
  .слайд { grid-template-columns: 1fr 1.05fr; gap: var(--space-2xl); align-items: center; }
  .слайд[data-активный="да"] { display: grid; }
  .слайд__текст { padding-top: 0; order: -1; }
  .слайд__заголовок { font-size: var(--text-h1); }
  .обложка { padding-block: var(--space-2xl) var(--space-3xl); }

  .слайдер__точки { justify-content: flex-start; }
  .слайдер__стрелки { display: flex; gap: var(--space-xs); }

  /* Направления на широком экране — табы-витрина. */
  .направления__табы { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
  .направления__таб {
    padding: 10px 16px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-line); background: transparent; cursor: pointer;
    font-size: var(--text-body-sm);
  }
  .направления__таб[aria-selected="true"] {
    border-color: var(--color-accent); color: var(--color-accent); font-weight: 600;
    background: rgba(31,79,224,.06);
  }
  .направления__список { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  .лента { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .лента--врачи { grid-template-columns: repeat(4, 1fr); }
  .лента__управление { display: flex; gap: var(--space-xs); }

  .шаги { grid-template-columns: repeat(4, 1fr); }
  .подвал__колонки { grid-template-columns: repeat(4, 1fr); }
  .подвал { padding-bottom: var(--space-xl); }
  .подвал__низ { grid-template-columns: 1fr; }

  /* Липкая панель — только на телефоне. */
  .липкая-панель { display: none; }

  /* Форма на десктопе — окно по центру, а не шторка снизу. */
  .шторка__окно {
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 64px));
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
  }
  .куки { justify-content: center; }
}

/* ==========================================================================
   ГЛАВНАЯ СТРАНИЦА
   Композиция по дизайн-системе: обложка во всю ширину, плотная полоса фактов
   без зазора под ней, чередование плотного и лёгкого, кобальтовый финал.
   ========================================================================== */

.иконка {
  width: 28px; height: 28px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.иконка--крупная { width: 40px; height: 40px; }
/* Фирменные значки мессенджеров и сообществ. Общее правило для иконок
   гасит заливку и рисует линией — брендовым значкам это не подходит. */
/* Значки мессенджеров и сообществ — картинками: логотипы WhatsApp и MAX
   взяты официальные, перерисовывать их линией бессмысленно, а по контуру
   их не узнают. */
img.значок-бренда { width: 26px; height: 26px; flex: 0 0 auto; display: block; }

/* --- Полоса фактов: примыкает к обложке без зазора ------------------------ */

.факты {
  background: var(--color-optic);
  color: var(--color-surface);
}
.факты__ряд {
  display: grid; grid-template-columns: 1fr;
}
.факт {
  padding: var(--space-md) 0;
  display: flex; align-items: center; gap: var(--space-sm);
  border-bottom: 1px solid rgba(251,253,255,.16);
}
.факт:last-child { border-bottom: 0; }
.факт .иконка { color: var(--color-air); }
.факт__число {
  font: 600 clamp(1.5rem, 3.4vw, 2.125rem)/1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}
.факт__подпись { font-size: var(--text-body-sm); color: rgba(251,253,255,.76); }

/* --- Причины: карточки с иконками ---------------------------------------- */

.причины { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.причина {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-fast);
  padding: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(251,253,255,.72);
}
.причина .иконка { color: var(--color-accent); margin-bottom: var(--space-sm); }
.причина__имя { font: 600 var(--text-body-lg)/1.3 var(--font-display); }
.причины--пять { margin-top: var(--space-lg); gap: var(--space-sm); }
.причины--пять .причина__имя { font-size: var(--text-body); line-height: 1.35; }
.причина__текст {
  margin-top: var(--space-xs);
  font-size: var(--text-body-sm); color: var(--color-text-secondary);
}

/* --- Направления вкладками: компактно, как просил владелец ---------------- */

.направления-вкладки { display: grid; margin-top: var(--space-xl); }
/* На узком экране это аккордеон: панель раскрывается прямо под нажатым
   пунктом. Разделители — на самих пунктах, а не зазором в сетке:
   между кнопкой и её панелью полоса не нужна. */
.направления-вкладки__список {
  list-style: none; display: grid;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-surface);
}
.направления-вкладки__список > li + li { border-top: 1px solid var(--color-line); }
/* В аккордеоне панель — продолжение пункта, а не отдельная карточка
   внутри карточки: своя рамка и тень тут только мешают. */
@media (max-width: 1023px) {
  .направления-вкладки__список .направление-панель {
    border: 0; border-top: 1px solid var(--color-line);
    border-radius: 0; box-shadow: none;
    background: var(--color-bg-secondary);
  }
}
.направления-вкладки__кнопка {
  width: 100%; display: flex; align-items: center; gap: var(--space-sm);
  min-height: calc(58px * var(--масштаб-цели));
  padding: var(--space-xs) var(--space-sm);
  border: 0; background: var(--color-surface); cursor: pointer;
  text-align: left; font: 500 var(--text-body)/1.3 var(--font-body);
}
.направления-вкладки__кнопка .иконка { width: 24px; height: 24px; color: var(--color-muted); }
.направления-вкладки__кнопка:hover { background: var(--color-bg-secondary); }
.направления-вкладки__кнопка[aria-selected="true"] {
  background: var(--color-bg-secondary);
  font-weight: 600; color: var(--color-accent);
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.направления-вкладки__кнопка[aria-selected="true"] .иконка { color: var(--color-accent); }
.направления-вкладки__номер {
  margin-left: auto;
  font: 600 var(--text-body-sm)/1 var(--font-display);
  color: var(--color-muted);
}
.направление-панель {
  padding: var(--space-lg);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-subtle);
}
.направление-панель[hidden] { display: none; }
.направление-панель__имя { font-size: var(--text-h3); letter-spacing: var(--tracking-tight); }
.направление-панель__лид {
  margin-top: var(--space-sm); color: var(--color-text-secondary);
  max-width: var(--container-text);
}
.направление-панель__низ { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* --- Врачи: компактная лента, а не стена лиц ----------------------------- */

.врачи-лента > * { flex: 0 0 min(64%, 220px); }
.врач-мини__фото {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-md); margin-bottom: var(--space-xs);
}
.врач-мини__имя { font: 600 var(--text-body)/1.25 var(--font-display); }
.врач-мини__роль { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

.главный-врач--витрина {
  display: grid; gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--color-surface), var(--color-surface-soft));
}
.главный-врач--витрина img {
  border-radius: var(--radius-md); width: 100%; height: auto;
  max-width: 280px; aspect-ratio: 3 / 4; object-fit: cover;
}

/* --- Адреса вкладками ---------------------------------------------------- */

.адреса-вкладки { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.адреса-вкладки__кнопка {
  min-height: calc(48px * var(--масштаб-цели));
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: transparent; cursor: pointer;
  font: 500 var(--text-body)/1 var(--font-body);
}
.адреса-вкладки__кнопка[aria-selected="true"] {
  border-color: var(--color-accent); color: var(--color-accent);
  font-weight: 600; background: rgba(31,79,224,.06);
}
.адрес-панель[hidden] { display: none; }
.адрес-панель { margin-top: var(--space-lg); }

/* --- Кобальтовый финал --------------------------------------------------- */

.призыв {
  margin-top: var(--space-3xl);
  padding-block: var(--space-2xl);
  background:
    radial-gradient(ellipse 40% 90% at 96% 110%, rgba(166,202,245,.28), transparent 70%),
    var(--color-accent-hover);
  color: var(--color-surface);
}
.призыв__ряд { display: grid; gap: var(--space-lg); align-items: end; }
.призыв h2 {
  font-size: var(--text-h3); letter-spacing: var(--tracking-tight);
  max-width: 620px; text-wrap: balance;
}
.призыв__подпись { margin-top: var(--space-xs); color: rgba(251,253,255,.8); font-size: var(--text-body-sm); }

/* --- Орнамент из системы -------------------------------------------------- */

.орнамент-номер {
  font: 500 clamp(2.5rem, 6vw, 3.5rem)/1 var(--font-display);
  letter-spacing: -.06em; color: var(--color-air);
}

@media (min-width: 768px) {
  .факты__ряд { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); }
  .факт { border-bottom: 1px solid rgba(251,253,255,.16); }
  .причины { grid-template-columns: repeat(3, 1fr); }
  /* Пять карточек в два ряда: сверху три, снизу две во всю ширину */
  .причины--пять { grid-template-columns: repeat(6, 1fr); }
  .причины--пять .причина { grid-column: span 2; }
  .причины--пять .причина:nth-child(4),
  .причины--пять .причина:nth-child(5) { grid-column: span 3; }
  .призыв__ряд { grid-template-columns: 1fr auto; }
  .главный-врач--витрина { grid-template-columns: 280px 1fr; align-items: center; }
}

@media (min-width: 1024px) {
  .факты__ряд { grid-template-columns: repeat(4, 1fr); }
  .факт { border-bottom: 0; border-left: 1px solid rgba(251,253,255,.16); padding-inline: var(--space-lg); }
  .факт:first-child { border-left: 0; padding-left: 0; }
  /* На широком экране пункты уходят в левую колонку, панели — в правую.
     display: contents убирает коробку <li>, и кнопка с панелью становятся
     самостоятельными ячейками сетки. Число строк передаётся из шаблона:
     без явных строк запись «1 / -1» не растянет панель на весь столбец. */
  .направления-вкладки__список {
    grid-template-columns: 340px 1fr;
    grid-template-rows: repeat(var(--сколько-направлений, 10), auto);
    column-gap: var(--space-lg);
    border: 0; border-radius: 0; overflow: visible; background: none;
  }
  .направления-вкладки__список > li { display: contents; }
  .направления-вкладки__список > li + li { border-top: 0; }
  .направления-вкладки__кнопка {
    grid-column: 1;
    border: 1px solid var(--color-line); border-bottom: 0;
  }
  .направления-вкладки__список > li:first-child .направления-вкладки__кнопка {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .направления-вкладки__список > li:last-child .направления-вкладки__кнопка {
    border-bottom: 1px solid var(--color-line);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  .направление-панель { grid-column: 2; grid-row: 1 / -1; align-self: start; }
  .врачи-лента { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .врачи-лента > * { flex: none; }
}

/* --- Кнопки на тёмной фотографии ------------------------------------------
   Стеклянная кнопка на светлом фоне почти прозрачна — поверх снимка обложки
   от неё оставался один контур. Стекло сохраняем, но делаем плотнее:
   светлее заливка, ярче кромка, белый текст с тенью. */

.btn--on-dark {
  color: var(--color-surface);
  border-color: rgba(251,253,255,.55);
  background: rgba(251,253,255,.14);
  text-shadow: 0 1px 2px rgba(4,26,64,.5);
}
html.оболочка-готова .btn--on-dark {
  color: var(--color-surface);
  text-shadow: 0 1px 3px rgba(4,26,64,.6);
}
html.оболочка-готова .btn--on-dark .glass-shell-fill { fill: rgba(251,253,255,.18); }
html.оболочка-готова .btn--on-dark .glass-shell-inner { stroke: rgba(251,253,255,.85); stroke-width: 1.4; }
html.оболочка-готова .btn--on-dark .glass-shell-side { stroke: rgba(251,253,255,.4); }
html.оболочка-готова .btn--on-dark .glass-shell-caustic-blue { opacity: .3; }

/* Главное действие на снимке — плотный кобальт: контраст белого текста
   на полупрозрачном стекле поверх светлой фотографии не держится. */
html.оболочка-готова .btn--primary.btn--on-dark .glass-shell-fill { fill: rgba(31,79,224,.94); }
html.оболочка-готова .btn--primary.btn--on-dark .glass-shell-inner { stroke: rgba(251,253,255,.7); }
html.оболочка-готова .btn--primary.btn--on-dark:hover .glass-shell-fill { fill: rgba(26,67,190,.96); }
.btn--primary.btn--on-dark { background: rgba(31,79,224,.94); border-color: rgba(251,253,255,.5); }

@media (prefers-reduced-transparency: reduce) {
  html.оболочка-готова .btn--on-dark { background: rgba(4,26,64,.86); border-color: var(--color-surface); }
  html.оболочка-готова .btn--primary.btn--on-dark { background: var(--color-accent); }
}

/* --- Шапка в две плашки ----------------------------------------------------
   Контейнер сайта 1280 px, а семь пунктов меню при кегле 15 px занимают 868.
   В один ряд с логотипом, телефоном, переключателем и кнопкой они помещались
   только с 1440 px — до этого пользователь видел гамбургер на широком экране.
   Развели по двум плашкам: сверху знак, название и адреса, снизу меню.
   Теперь полное меню появляется с 1024 px, а название читается крупно. */

@media (min-width: 1024px) {
  :root { --шапка-верх: 86px; --nav-height: 136px; }

  .шапка__верх-ряд {
    width: min(calc(100% - 48px), 1440px);
    gap: var(--space-md);
    padding-block: 16px;
  }
  .шапка__низ {
    display: block;
    border-top: 1px solid rgba(213,223,236,.6);
    background: rgba(251,253,255,.55);
  }
  .шапка__низ-ряд {
    width: min(calc(100% - 48px), 1440px);
    margin-inline: auto;
    display: flex; align-items: center;
    min-height: 48px;
  }
  html[data-режим="контрастный"] .шапка__низ { background: var(--color-bg-secondary); }

  /* Название занимает всю свободную ширину до переключателя отображения.
     Кегль подобран замерами: на 1024 px строка помещается при 21 px, на 1280 —
     при 35, на 1440 — при 43, дальше контейнер упирается в 1440 и рост
     останавливается на 44. Между этими точками формула линейна, запас
     до переключателя — 32 px. Менять кегль — только перемерив: строка
     не переносится, и при ошибке она наедет на переключатель. */
  /* Воздух сверху и снизу задаёт ряд, у самого логотипа отступов нет —
     иначе они складываются и шапка распухает. */
  .логотип { gap: clamp(12px, 1.1vw, 18px); padding-block: 0; }
  .логотип__знак { height: clamp(44px, 3.5vw, 54px); }
  .логотип__текст { gap: 4px; }
  /* Переносы не запрещаем: в режимах «крупный» и «контрастный» переключатель
     и телефон становятся шире, места для названия остаётся меньше, и строка
     должна переноситься, а не наезжать на соседей. В обычном режиме кегль
     подобран так, что перенос не нужен. */
  .логотип__имя {
    font-size: clamp(.8125rem, calc(1.35vw - 3px), 1.375rem);
    line-height: 1.18;
    letter-spacing: .08em;
  }

  /* Точный вариант: кегль считается не от ширины окна, а от ширины самого
     блока с названием. Это важно для режимов «крупный» и «контрастный»:
     там переключатель и телефон становятся шире, свободного места меньше,
     а формула от vw об этом не знает — строка наезжала на переключатель.
     Правило выше остаётся запасным для браузеров без контейнерных запросов
     и намеренно осторожнее. */
  @supports (container-type: inline-size) {
    .логотип { flex: 1 1 auto; }
    .логотип__текст { flex: 1 1 auto; container-type: inline-size; }
    .логотип__имя { font-size: clamp(.8125rem, calc(2.4cqi + 6px), 1.5rem); }
  }
  .логотип__адреса { font-size: clamp(.8125rem, .95vw, 1rem); gap: 2px 12px; }

  .кнопка-гамбургер { display: none; }
  .меню-десктоп { display: flex; }
  .шапка .режимы--в-шапке { display: flex; gap: 2px; }
  .режимы--в-шапке .режимы__кнопка {
    flex: 0 0 auto;
    width: calc(38px * var(--масштаб-цели));
    min-height: calc(38px * var(--масштаб-цели));
    font: 600 .8rem/1 var(--font-display);
  }
  .режимы--в-шапке .режимы__кнопка--крупная { font-size: 1rem; }
  .режимы--в-шапке .режимы__кнопка--контраст {
    background: var(--color-text-primary); color: var(--color-surface);
    border-color: var(--color-text-primary);
  }
  .режимы--в-шапке .режимы__кнопка[aria-pressed="true"] {
    border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(31,79,224,.18);
  }

  .шапка__телефон-иконка { display: none; }
  .шапка__телефон-текст {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 var(--text-body)/1 var(--font-display);
    text-decoration: none; white-space: nowrap;
  }
  .шапка__телефон-текст .иконка { width: 20px; height: 20px; color: var(--color-accent); }
}

/* На узком десктопе справа стоят переключатель, телефон и кнопка — почти
   половина ряда. Полные адреса в оставшуюся ширину не влезают и переносятся
   второй строкой, а вслед за ними ломается и название. Там показываем
   короткие адреса, как на телефоне. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .логотип__город, .логотип__адрес { display: none; }
  .логотип__адрес-кратко { display: block; white-space: nowrap; }
}

/* ==========================================================================
   ФАКТУРА ДИЗАЙН-СИСТЕМЫ
   Фирменный оптический приём: фотография синего стекла в контейнере
   optic-stage. Значения масок, наложения и анимации перенесены из
   исходника системы без изменений.
   ========================================================================== */

.оптика {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; isolation: isolate; perspective: 1200px;
  overflow: hidden;
}
.оптика__снимок {
  position: absolute; inset: -24%;
  opacity: .94;
  transform: translate3d(0, 0, 0);
  filter: drop-shadow(0 44px 70px rgba(4, 63, 141, .18));
}
.оптика__снимок img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
  mix-blend-mode: soft-light;
  filter: saturate(.82) contrast(1.08) brightness(1.08);
}
/* Мягкий край, чтобы фактура растворялась, а не обрывалась прямоугольником. */
.оптика--мягкая .оптика__снимок {
  inset: -10%;
  -webkit-mask-image: radial-gradient(ellipse 68% 82% at 57% 50%, #000 45%, rgba(0,0,0,.86) 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 82% at 57% 50%, #000 45%, rgba(0,0,0,.86) 64%, transparent 100%);
}
.оптика--мягкая .оптика__снимок img { mix-blend-mode: multiply; object-position: 54% 49%; }
.оптика__снимок::after {
  content: ""; position: absolute; inset: 8% 12%; pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, .72);
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.18) 46%, transparent 72%);
}
.оптика--парит .оптика__снимок { animation: оптика-парение 9s ease-in-out infinite alternate; }

@keyframes оптика-парение {
  from { transform: translate3d(0, -6px, 0) rotate(-.35deg) scale(1.01); }
  to   { transform: translate3d(0, 10px, 0) rotate(.25deg) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .оптика--парит .оптика__снимок { animation: none; }
}

/* ==========================================================================
   ГЛАВНАЯ: карточная композиция
   Скелет повторяет прототип заказчика, оформление — дизайн-системы:
   крупные скруглённые карты, парящие на светлом фоне.
   ========================================================================== */

.полотно { padding-block: var(--space-md); }

.карта {
  position: relative;
  border-radius: var(--radius-lg);
  background: rgba(251, 253, 255, .74);
  border: 1px solid rgba(251, 253, 255, .9);
  box-shadow: inset 0 1px 1px rgba(251,253,255,.9), inset 0 -1px 2px rgba(166,202,245,.16),
              0 24px 64px rgba(4, 63, 141, .09);
  overflow: hidden;
}
/* Плотная карта: диагональный градиент со световым пятном справа.
   Шара больше нет — владелец просил убрать: он повторялся из блока в блок.
   Слева фон намеренно тёмный: там лежит белый текст, и контраст важнее
   красоты градиента. */
.карта--плотная {
  background:
    radial-gradient(ellipse 42% 58% at 84% 22%, rgba(214,231,252,.5), rgba(214,231,252,.12) 45%, transparent 70%),
    linear-gradient(118deg, #082F66 0%, #0C3E80 34%, #14509C 62%, #245CB0 82%, #3877C6 100%);
  color: var(--color-surface); border-color: transparent;
}
.карта--кобальт {
  background: radial-gradient(ellipse 40% 90% at 96% 110%, rgba(166,202,245,.28), transparent 70%),
              var(--color-accent-hover);
  color: var(--color-surface); border-color: transparent;
}
.карта__нутро { position: relative; z-index: 1; padding: var(--space-lg) var(--space-md); }
/* Матовое стекло без «шаров»: ровная светлая поверхность, мягкая кромка. */
.карта.карта--матовая {
  background: rgba(251,253,255,.62);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}
@media (prefers-reduced-transparency: reduce) {
  .карта.карта--матовая { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

html[data-режим="контрастный"] .карта {
  background: var(--color-surface); border: 2px solid var(--color-text-primary); box-shadow: none;
}

/* --- Обложка: снимок на всю карту, текст стеклянной плашкой поверх ------- */

.обложка2 { position: relative; min-height: 520px; }
.обложка2__фон { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.обложка2__фон img,
.обложка2__видео {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
}
/* Видео проявляется поверх снимка, когда действительно готово играть.
   До этого момента и там, где видео не грузим, виден постер. */
.обложка2__видео { opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); }
.обложка2__видео[data-играет="да"] { opacity: 1; }
/* Светлая вуаль: снимок яркий, тёмный текст поверх него сам по себе
   не читается. */
.обложка2__вуаль {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(251,253,255,.86) 0%, rgba(251,253,255,.62) 34%,
    rgba(251,253,255,.18) 58%, transparent 78%);
}
.слайд2 { display: none; }
.слайд2[data-активный="да"] { display: block; position: relative; z-index: 2; }

.слайд2__текст {
  margin: var(--space-sm);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(251,253,255,.9);
  background: rgba(251,253,255,.58);
  backdrop-filter: blur(22px) saturate(1.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
  box-shadow: inset 0 1px 1px rgba(251,253,255,.96), inset 0 -1px 2px rgba(166,202,245,.22),
              0 26px 64px rgba(4,63,141,.14);
}
html[data-режим="контрастный"] .слайд2__текст {
  background: var(--color-surface); backdrop-filter: none; border: 2px solid var(--color-text-primary);
}



.метка {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid rgba(31,79,224,.28); background: rgba(251,253,255,.7);
  color: var(--color-optic);
  font: 600 var(--text-caption)/1 var(--font-display);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.метка .иконка { width: 18px; height: 18px; }
.слайд2 h1, .слайд2 h2 {
  margin-top: var(--space-md);
  font-size: clamp(2.125rem, 4.6vw, 3.5rem); line-height: 1.05;
  letter-spacing: var(--tracking-tight); text-wrap: balance;
}
.слайд2__лид {
  margin-top: var(--space-md); max-width: 26em;
  font-size: var(--text-lead); color: var(--color-text-secondary);
}
.слайд2__действие { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.слайд2__подпись { margin-top: var(--space-sm); font-size: var(--text-body-sm); color: var(--color-text-secondary); }

.обложка2__точки {
  position: relative; z-index: 3;
  display: flex; gap: 4px; justify-content: center;
  padding: 0 var(--space-md) var(--space-md);
}
.обложка2__точка {
  width: calc(44px * var(--масштаб-цели)); height: calc(44px * var(--масштаб-цели));
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.обложка2__точка::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-muted); transition: background var(--duration-fast), width var(--duration-fast);
}
.обложка2__точка[aria-current="true"]::before {
  background: var(--color-accent); width: 30px; border-radius: var(--radius-pill);
}

/* --- Цифры доверия -------------------------------------------------------- */

.цифры { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-line); }
.цифра { padding: var(--space-md); background: rgba(251,253,255,.9); }
.цифра__значение {
  display: block;
  font: 600 clamp(1.375rem, 3vw, 1.875rem)/1.05 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--color-optic);
}
.цифра__подпись { display: block; margin-top: 6px; font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* --- VisuMax ------------------------------------------------------------- */

.визумакс { display: grid; gap: var(--space-lg); }
/* Снимок без плиты вокруг: она читалась как рамка и налезала на сноску. */
.визумакс__фото { display: grid; place-items: center; }
.визумакс__фото img {
  width: 100%; height: auto; max-width: 540px;
  border-radius: var(--radius-md);
}
.визумакс h2 { font-size: var(--text-h3); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.визумакс__лид { margin-top: var(--space-md); color: rgba(251,253,255,.86); font-size: var(--text-body-lg); }
.визумакс__год {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--space-sm);
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(251,253,255,.4); background: rgba(251,253,255,.12);
  font: 600 var(--text-caption)/1 var(--font-display); letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.сноска {
  margin-top: var(--space-md); padding-top: var(--space-sm);
  border-top: 1px solid rgba(251,253,255,.22);
  font-size: var(--text-body-sm); color: rgba(251,253,255,.72);
}
.сноска sup { color: var(--color-air); }
.сноска--светлая {
  border-top-color: var(--color-line);
  color: var(--color-text-secondary);
}
.сноска--светлая sup { color: var(--color-accent); }

/* --- Витрины врачей и прайса ---------------------------------------------- */

.витрина-ссылка {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--text-body)/1 var(--font-display);
  color: var(--color-accent); text-decoration: none;
}
.витрина-ссылка .иконка { width: 20px; height: 20px; transform: rotate(180deg); }
.витрина-ссылка:hover { color: var(--color-accent-hover); }

@media (min-width: 768px) {
  .полотно { padding-block: var(--space-lg); }
  .карта__нутро { padding: var(--space-xl); }
  .цифры { grid-template-columns: repeat(4, 1fr); }
  .визумакс { grid-template-columns: 1fr 1fr; align-items: center; }
  .обложка2 { min-height: 560px; }
}

@media (min-width: 1024px) {
  .обложка2 { min-height: 640px; display: flex; flex-direction: column; justify-content: center; }
  .слайд2__текст {
    width: min(56%, 620px);
    margin: var(--space-2xl);
    padding: var(--space-2xl);
  }
  .карта__нутро { padding: var(--space-2xl); }
  .обложка2__точки {
    position: absolute; left: var(--space-2xl); bottom: var(--space-lg);
    z-index: 4; justify-content: flex-start; padding: 0;
  }
}

/* ==========================================================================
   ОБЪЁМ И ОТКЛИК
   В дизайн-системе поверхности не плоские: у них градиент, внутренний блик
   и отклик на наведение. Здесь это перенесено на карточки главной.
   ========================================================================== */

.карта {
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(166,202,245,.16), transparent 62%),
    linear-gradient(168deg, rgba(251,253,255,.92), rgba(234,241,248,.72));
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.карта--плотная {
  background:
    radial-gradient(ellipse 54% 96% at 96% 6%, rgba(166,202,245,.26), transparent 66%),
    linear-gradient(158deg, #0B4C9E, var(--color-optic) 58%, #032F6B);
}

/* Отклик на указатель. Пальцем это не вызывается, поэтому только там,
   где есть настоящее наведение. */
@media (hover: hover) and (pointer: fine) {
  .отклик { transition: transform var(--duration-base) var(--ease-out),
                        box-shadow var(--duration-base) var(--ease-out); }
  .отклик:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 1px rgba(251,253,255,.94), 0 32px 80px rgba(4,63,141,.16);
  }
  .отклик:hover .карточка__имя { color: var(--color-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .отклик:hover { transform: none; }
}

/* Карточки-ссылки: видно, что нажимаются. */
.карточка--ссылка { display: block; text-decoration: none; position: relative; }
.карточка--ссылка::after {
  content: ""; position: absolute; right: var(--space-md); bottom: var(--space-md);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--color-line); background: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4FE0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .карточка--ссылка:hover::after { opacity: 1; transform: translateX(0); }
}
.карточка--ссылка:focus-visible::after { opacity: 1; transform: translateX(0); }

/* Врач в ленте: карточка, а не голая картинка. */
.врач-мини {
  display: flex; flex-direction: column;
  padding: var(--space-xs) var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: border-color var(--duration-fast), transform var(--duration-base) var(--ease-out),
              background var(--duration-fast);
}
.врач-мини__фото { border-radius: var(--radius-sm); aspect-ratio: 3/4; object-fit: cover; }
.врач-мини__имя {
  margin-top: var(--space-sm);
  font: 600 var(--text-body)/1.3 var(--font-display); color: var(--color-text-primary);
}
.врач-мини__роль { margin-top: 2px; font-size: var(--text-body-sm); color: var(--color-text-secondary); }
@media (hover: hover) and (pointer: fine) {
  .врач-мини:hover {
    border-color: var(--color-air); background: rgba(251,253,255,.8);
    transform: translateY(-4px);
  }
  .врач-мини:hover .врач-мини__имя { color: var(--color-accent); }
}
.врач-мини:focus-visible { border-color: var(--color-accent); }

/* --- Волна плывёт снизу вверх -------------------------------------------- */

/* Волна струится, а сам снимок стоит на месте и остаётся резким.
   Двигается не картинка, а светлая полоса поверх неё. */
.оптика--течёт { overflow: hidden; }
.оптика--течёт .оптика__снимок { inset: 0; }
.оптика--течёт .оптика__снимок img {
  object-fit: cover; object-position: 50% 50%;
  image-rendering: auto;
}
.оптика--течёт::after {
  content: ""; position: absolute; inset: -30% -10%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(3deg,
    transparent 0%,
    rgba(251,253,255,.0) 34%,
    rgba(251,253,255,.30) 46%,
    rgba(166,202,245,.16) 52%,
    rgba(251,253,255,.0) 66%,
    transparent 100%);
  animation: волна-струится 14s linear infinite;
}
@keyframes волна-струится {
  from { transform: translate3d(0, 34%, 0); }
  to   { transform: translate3d(0, -34%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .оптика--течёт::after { animation: none; opacity: .5; }
}

/* --- Стрелки карусели с обеих сторон -------------------------------------- */

.лента-обёртка { position: relative; }
.лента-стрелка {
  position: absolute; top: 42%; z-index: 3;
  width: calc(48px * var(--масштаб-цели)); height: calc(48px * var(--масштаб-цели));
  display: none; align-items: center; justify-content: center;
  border: 1px solid var(--color-line); border-radius: 50%;
  background: var(--color-surface); cursor: pointer;
  box-shadow: 0 12px 28px rgba(4,63,141,.16);
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast);
}
.лента-стрелка svg { width: 22px; height: 22px; fill: none; stroke: var(--color-text-primary); stroke-width: 1.6; }
.лента-стрелка--влево { left: calc(var(--space-md) * -1); }
.лента-стрелка--вправо { right: calc(var(--space-md) * -1); }
.лента-стрелка:hover { border-color: var(--color-accent); transform: scale(1.06); }
.лента-стрелка[disabled] { opacity: .32; cursor: default; transform: none; }

@media (min-width: 1024px) {
  .лента-стрелка { display: inline-flex; }
  /* Лента остаётся прокручиваемой и на широком экране: приборов больше,
     чем помещается в ряд. */
  .лента--парк { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .лента--парк > * { flex: 0 0 clamp(240px, 23%, 300px); scroll-snap-align: start; }
}

/* --- Карты в блоке адресов ------------------------------------------------ */

.адрес-сетка { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
.карта-врезка {
  position: relative; min-height: 320px;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-line); background: var(--color-bg-secondary);
}
.карта-врезка iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.карта-врезка__заглушка {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: var(--space-sm); padding: var(--space-lg); text-align: center;
  color: var(--color-text-secondary);
}
.карта-врезка__заглушка .иконка--крупная { width: 36px; height: 36px; color: var(--color-muted); }
.карта-врезка:has(iframe) .карта-врезка__заглушка { display: none; }

@media (min-width: 1024px) {
  .адрес-сетка { grid-template-columns: 1fr 1.1fr; align-items: start; }
  .карта-врезка { min-height: 420px; }
}


/* Карточки «Наш подход» откликаются на наведение так же, как остальные. */
@media (hover: hover) and (pointer: fine) {
  .причина:hover {
    transform: translateY(-6px);
    border-color: var(--color-air);
    box-shadow: inset 0 1px 1px rgba(251,253,255,.94), 0 28px 64px rgba(4,63,141,.14);
  }
  .причина:hover .причина__имя { color: var(--color-accent); }
}
@media (prefers-reduced-motion: reduce) { .причина:hover { transform: none; } }

/* ==========================================================================
   ЭЛЕМЕНТЫ ДИЗАЙН-СИСТЕМЫ, КОТОРЫЕ ДО СИХ ПОР НЕ БЫЛИ ВЗЯТЫ
   Нумерованные карточки с активной кобальтовой, стеклянная подпись-плита
   поверх изображения, градиентная сфера и орнаменты.
   ========================================================================== */

/* --- Нумерованные карточки: одна активная, глубокого кобальта -------------- */

.шаги--карточки { list-style: none; display: grid; gap: var(--space-sm); }
.шаг-карта {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 210px; padding: var(--space-md);
  /* Номер сверху, дальше содержимое подряд. Раньше стояло space-between,
     и при разной длине пояснений заголовки шагов вставали на разной высоте. */
  /* На телефоне номер слева от текста — так в плане сайта. */
  display: flex; flex-direction: row; justify-content: flex-start;
  gap: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(251,253,255,.92);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(166,202,245,.2), transparent 64%),
    linear-gradient(168deg, rgba(251,253,255,.94), rgba(234,241,248,.7));
  box-shadow: inset 0 1px 1px rgba(251,253,255,.9), 0 18px 44px rgba(4,63,141,.08);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.шаг-карта__номер {
  font: 500 var(--text-body)/1 var(--font-display);
  letter-spacing: var(--tracking-ui); color: var(--color-optic); opacity: .62;
}
.шаг-карта__имя { display: block; font: 600 var(--text-h4)/1.2 var(--font-display); }
.шаг-карта__текст { display: block; margin-top: var(--space-xs); font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* Активная — глубокий кобальт со сферой, как в системе. */
.шаг-карта--активная {
  border-color: transparent; color: var(--color-surface);
  background:
    radial-gradient(ellipse 48% 62% at 84% 16%, rgba(166,202,245,.42), transparent 62%),
    linear-gradient(158deg, #0B4C9E, var(--color-optic) 56%, #032F6B);
  box-shadow: 0 26px 60px -18px rgba(4,63,141,.5);
}
.шаг-карта--активная .шаг-карта__номер { color: var(--color-air); opacity: .8; }
.шаг-карта--активная .шаг-карта__текст { color: rgba(251,253,255,.78); }

@media (hover: hover) and (pointer: fine) {
  .шаг-карта:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -18px rgba(4,63,141,.28); }
  .шаг-карта--активная:hover { box-shadow: 0 34px 76px -18px rgba(4,63,141,.56); }
}
@media (prefers-reduced-motion: reduce) { .шаг-карта:hover { transform: none; } }

/* --- Градиентная сфера: приём системы для «атмосферного фона» -------------- */

.сфера {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(251,253,255,.9), rgba(251,253,255,.22) 26%, transparent 52%),
    radial-gradient(circle at 62% 62%, rgba(166,202,245,.5), rgba(31,79,224,.16) 58%, transparent 78%);
  filter: blur(.4px);
}
.сфера--правая { right: -12%; top: -18%; width: 46%; aspect-ratio: 1; }
.шаг-карта--активная .сфера { mix-blend-mode: screen; opacity: .5; }

/* --- Стеклянная подпись-плита поверх изображения --------------------------- */

/* На телефоне обложка и так занимает весь экран: плита ложилась поверх
   кнопок и мешала. Показываем её только там, где есть свободное место. */
@media (max-width: 767px) { .обложка2 .подпись-плита { display: none; } }

.подпись-плита {
  position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
  z-index: 2; padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(251,253,255,.86);
  background: rgba(251,253,255,.66);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  box-shadow: inset 0 1px 0 rgba(251,253,255,.96), 0 12px 30px rgba(4,63,141,.14);
}
.подпись-плита__имя { font: 600 var(--text-body)/1.25 var(--font-display); }
.подпись-плита__текст { margin-top: 3px; font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* В обложке плита прижата к правому нижнему углу. Селектор из двух классов:
   общее правило .подпись-плита стоит выше и иначе перетягивает её влево. */
.обложка2 .подпись-плита {
  left: auto; right: var(--space-md); bottom: var(--space-md);
  max-width: 320px; z-index: 3;
}

/* --- Орнаменты: линия, номер, точка, дуга ---------------------------------- */

.орнаменты { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 12px; }
.орнамент {
  min-height: 92px; display: grid; place-items: center;
  border: 1px solid rgba(166,202,245,.32); border-radius: var(--radius-md);
  color: var(--color-air);
}
.орнамент__линия { width: 70%; height: 24px; border-top: 1px solid var(--color-air); border-radius: 50%; transform: rotate(-4deg); }
.орнамент__номер { font: 500 2.25rem/1 var(--font-display); letter-spacing: -.06em; color: var(--color-optic); opacity: .5; }
.орнамент__точка { width: 12px; height: 12px; border: 1px solid var(--color-air); border-radius: 50%; box-shadow: 0 0 0 8px rgba(166,202,245,.1); }
.орнамент__дуга { width: 62%; height: 62%; border: 1px solid var(--color-air); border-left-color: transparent; border-radius: 50%; transform: rotate(24deg); }

@media (min-width: 768px) {
  .шаги--карточки { grid-template-columns: repeat(2, 1fr); }
  .шаг-карта { flex-direction: column; gap: var(--space-lg); }
}
@media (min-width: 1024px) {
  .шаги--карточки { grid-template-columns: repeat(4, 1fr); }
  .орнамент { min-height: 120px; }
}


/* Порядок важен: это правило должно стоять после базового описания плиты. */
@media (min-width: 1024px) {
  .обложка2 .подпись-плита { right: var(--space-2xl); bottom: var(--space-2xl); }
}


/* --- Вкладки направлений: выезжают вперёд, как карточки ------------------- */

.направления-вкладки__кнопка {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background var(--duration-fast), border-color var(--duration-fast);
}
@media (hover: hover) and (pointer: fine) {
  .направления-вкладки__кнопка:hover {
    transform: translateX(8px);
    background: rgba(251,253,255,.96);
    box-shadow: 0 16px 36px -12px rgba(4,63,141,.28);
    z-index: 2;
  }
  .направления-вкладки__кнопка:hover .иконка { color: var(--color-accent); }
}
.направления-вкладки__кнопка[aria-selected="true"] { transform: translateX(8px); z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .направления-вкладки__кнопка:hover,
  .направления-вкладки__кнопка[aria-selected="true"] { transform: none; }
}

/* --- Кнопка на карточке врача --------------------------------------------- */

.врач-мини__действие {
  margin-top: var(--space-sm);
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--text-body-sm)/1 var(--font-display); color: var(--color-accent);
}
.врач-мини__действие .иконка { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .врач-мини:hover .врач-мини__действие { gap: 12px; }
}

/* --- Карточка прибора: кнопка, как у врачей ------------------------------- */

.прибор-действие {
  margin-top: var(--space-sm);
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--text-body-sm)/1 var(--font-display); color: var(--color-accent);
  transition: gap var(--duration-fast) var(--ease-out);
}
.прибор-действие .иконка { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .карточка--ссылка:hover .прибор-действие { gap: 12px; }
}

/* --- Навигатор по страницам ------------------------------------------------ */

.крошки { padding: var(--space-sm) 0 var(--space-md); }
.крошки__список {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs); font-size: var(--text-body-sm);
}
.крошки__звено { display: inline-flex; align-items: center; gap: var(--space-xs); }
.крошки__звено + .крошки__звено::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 1.5px solid var(--color-muted); border-top: 1.5px solid var(--color-muted);
  transform: rotate(45deg);
}
.крошки__звено a {
  color: var(--color-text-secondary); text-decoration: none;
  padding: 6px 2px; border-radius: var(--radius-sm);
  transition: color var(--duration-fast);
}
.крошки__звено a:hover { color: var(--color-accent); }
.крошки__звено[aria-current="page"] { color: var(--color-text-primary); font-weight: 500; }

/* --- Прайс разделами -------------------------------------------------------- */

.прайс-раздел__имя {
  font: 600 var(--text-h4)/1.25 var(--font-display);
  letter-spacing: var(--tracking-tight);
}
.карта--плотная .прайс-раздел__имя { color: var(--color-surface); }
.карта--плотная .прайс__строка { border-bottom-color: rgba(251,253,255,.22); }
.карта--плотная .прайс__цена,
.карта--плотная .прайс__имя { color: var(--color-surface); }
.карта--плотная .прайс__единица,
.карта--плотная .прайс__код { color: rgba(251,253,255,.66); }
.прайс__код {
  display: block; margin-top: 2px;
  font-size: var(--text-caption); color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.прайс__строка { align-items: start; }
.прайс__цена { font-variant-numeric: tabular-nums; text-align: right; }

/* --- Призыв в конце страницы ------------------------------------------------ */

.призыв__ряд { display: grid; gap: var(--space-lg); }
.призыв__подпись { margin-top: var(--space-sm); font-size: var(--text-body-sm); color: rgba(251,253,255,.76); }
@media (min-width: 1024px) {
  .призыв__ряд { grid-template-columns: 1fr auto; align-items: center; }
}

/* --- Памятки ---------------------------------------------------------------- */

.памятка-карта { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); }
.памятка-карта .иконка--крупная { width: 34px; height: 34px; color: var(--color-accent); margin-bottom: var(--space-xs); }
.памятка-карта .прибор-действие { margin-top: auto; padding-top: var(--space-md); }

/* Памятка файлом: две кнопки в одной карточке. «Открыть» растянута кликом
   на всю карточку — так она вела себя и раньше; «Скачать» поднята над этим
   слоем, иначе нажатие по ней всё равно открывало бы файл во вкладке.
   Высота 44 px — минимальная тап-цель на телефоне. */
.памятка-карта--файл { position: relative; }
.памятка-действия {
  margin-top: auto; padding-top: var(--space-md);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg);
}
.памятка-действие {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 var(--text-body-sm)/1 var(--font-display);
  color: var(--color-accent); text-decoration: none;
  position: relative; z-index: 1;
  transition: gap var(--duration-fast) var(--ease-out);
}
.памятка-действие .иконка { width: 18px; height: 18px; }
.памятка-действие--основная { position: static; }
.памятка-действие--основная::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) {
  .памятка-действие:hover { gap: 12px; }
}
.иконка--крупная { width: 32px; height: 32px; }

.памятка-текст h3 {
  margin-top: var(--space-xl); margin-bottom: var(--space-xs);
  font-size: var(--text-h4); letter-spacing: var(--tracking-tight);
}
.памятка-текст p { margin-bottom: var(--space-sm); }
.памятка-текст ul { margin: var(--space-sm) 0 var(--space-md); padding-left: 1.3em; }
.памятка-текст li { margin-bottom: var(--space-xs); }

/* --- Документы -------------------------------------------------------------- */

.документ-блок h3 {
  margin-top: var(--space-lg); margin-bottom: var(--space-xs);
  font-size: var(--text-body-lg); letter-spacing: var(--tracking-tight);
}
.документ-блок p { margin-bottom: var(--space-sm); }
.документ-блок ul { margin: var(--space-xs) 0 var(--space-md); padding-left: 1.3em; }
.документ-блок li { margin-bottom: 6px; }
.карта--плотная .документ-блок,
.карта--плотная .документ-блок a { color: var(--color-surface); }
.карта--плотная .документ-блок a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ: вкладки, карточка врача, карточка прибора
   ========================================================================== */

.вкладки {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs);
  margin-top: var(--space-lg); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
}
.вкладки__кнопка {
  min-height: calc(44px * var(--масштаб-цели));
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  /* У <button> текст по умолчанию по центру: длинное название вкладки
     переносилось на вторую строку и вставало посередине. */
  text-align: left;
  font: 500 var(--text-body-sm)/1.2 var(--font-display);
  color: var(--color-text-secondary);
  transition: background var(--duration-fast), color var(--duration-fast),
              border-color var(--duration-fast), transform var(--duration-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .вкладки__кнопка:hover { background: rgba(251,253,255,.9); color: var(--color-text-primary); transform: translateY(-2px); }
}
.вкладки__кнопка[aria-selected="true"] {
  background: var(--color-accent); color: var(--color-surface);
  border-color: var(--color-accent); font-weight: 600;
}
.карта--плотная .вкладки { border-bottom-color: rgba(251,253,255,.24); }
.карта--плотная .вкладки__кнопка { color: rgba(251,253,255,.78); }
.карта--плотная .вкладки__кнопка[aria-selected="true"] { background: var(--color-surface); color: var(--color-optic); border-color: var(--color-surface); }

.вкладка-панель { padding-top: var(--space-lg); }
.вкладка-панель[hidden] { display: none; }

/* Стопка вкладок: все панели в одной ячейке сетки. Высота блока равна
   самой высокой панели, поэтому переключение не двигает соседние блоки.
   Скрытая панель остаётся в потоке, но недоступна ни мыши, ни читалке. */
.вкладки-стопка { display: grid; }
.вкладки-стопка > .вкладка-панель { grid-area: 1 / 1; }
.вкладки-стопка > .вкладка-панель[hidden] {
  display: block; visibility: hidden; pointer-events: none;
}

/* --- Карточка врача --------------------------------------------------------- */

.врач-шапка { display: grid; gap: var(--space-lg); }
/* Кадр 3:4 у всех врачей одинаковый: и высота, и ширина фиксированы,
   иначе портрет вытягивается в полосу. */
.врач-шапка__фото { max-width: 400px; }
.врач-шапка__фото img {
  width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover;
  object-position: 50% 22%; border-radius: var(--radius-lg);
}
.врач-факт { margin-bottom: var(--space-md); }
.врач-факт__имя {
  display: block; font: 600 var(--text-caption)/1.2 var(--font-display);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary); margin-bottom: 5px;
}
.врач-факт__значение { display: block; color: var(--color-text-primary); }
.врач-список { margin: var(--space-xs) 0 var(--space-md); padding-left: 1.2em; }
.врач-список li { margin-bottom: 7px; }
.врач-шапка__действие {
  margin-top: var(--space-lg); padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}

@media (min-width: 1024px) {
  .врач-шапка { grid-template-columns: 360px 1fr; gap: var(--space-2xl); align-items: start; }
  .врач-шапка__фото { position: sticky; top: calc(var(--nav-height) + 24px); }
}

/* --- Карточка прибора ------------------------------------------------------- */

.прибор-шапка { display: grid; gap: var(--space-lg); }
.прибор-шапка__фото img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; }
@media (min-width: 1024px) {
  .прибор-шапка { grid-template-columns: 1.05fr .95fr; gap: var(--space-2xl); align-items: center; }
}

/* ==========================================================================
   ГЛАССМОРФИЗМ НА ВНУТРЕННИХ СТРАНИЦАХ
   Вместо фотографии-волны — стеклянные поверхности и мягкие световые пятна
   из дизайн-системы. Всё живое: реагирует на наведение.
   ========================================================================== */

/* Световые пятна вместо фотографии: дёшево, не мылит, не спорит с текстом. */
.карта {
  background:
    radial-gradient(ellipse 44% 62% at 96% -8%, rgba(166,202,245,.34), transparent 66%),
    radial-gradient(ellipse 38% 54% at -6% 108%, rgba(225,234,251,.6), transparent 68%),
    linear-gradient(168deg, rgba(251,253,255,.94), rgba(234,241,248,.76));
}
.карта--плотная {
  background:
    radial-gradient(ellipse 46% 64% at 94% 4%, rgba(166,202,245,.3), transparent 64%),
    radial-gradient(ellipse 40% 52% at 4% 100%, rgba(31,79,224,.34), transparent 70%),
    linear-gradient(156deg, #0B4C9E, var(--color-optic) 56%, #032F6B);
}

/* Стеклянная плита: полупрозрачная поверхность с кромкой и бликом.
   Это и есть приём системы — стекло, а не картинка. */
.стекло {
  position: relative; isolation: isolate;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(251,253,255,.9);
  background: rgba(251,253,255,.46);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  box-shadow: inset 0 1px 1px rgba(251,253,255,.96), inset 0 -1px 2px rgba(166,202,245,.22),
              0 20px 48px -18px rgba(4,63,141,.22);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-fast);
}
@media (hover: hover) and (pointer: fine) {
  .стекло:hover {
    transform: translateY(-4px);
    border-color: rgba(166,202,245,.9);
    box-shadow: inset 0 1px 1px rgba(251,253,255,.98), 0 30px 64px -20px rgba(4,63,141,.3);
  }
}
@media (prefers-reduced-motion: reduce) { .стекло:hover { transform: none; } }
html[data-режим="контрастный"] .стекло {
  background: var(--color-surface); backdrop-filter: none;
  border: 2px solid var(--color-text-primary); box-shadow: none;
}

/* Стеклянное пятно-фигура: заменяет фотографию там, где нужен объём. */
.блик {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(251,253,255,.92), rgba(251,253,255,.2) 30%, transparent 56%),
    radial-gradient(circle at 64% 66%, rgba(166,202,245,.46), rgba(31,79,224,.14) 56%, transparent 78%);
  filter: blur(.5px);
  animation: блик-дышит 18s ease-in-out infinite alternate;
}
.блик--верх { right: -8%; top: -22%; width: 38%; aspect-ratio: 1; }
.блик--низ { left: -10%; bottom: -26%; width: 32%; aspect-ratio: 1; opacity: .7; }
@keyframes блик-дышит {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -14px, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .блик { animation: none; } }
html[data-режим="контрастный"] .блик { display: none; }

/* --- Стеклянная фактура на плите ------------------------------------------
   Снимок стекла из дизайн-системы вместо ещё одного светящегося шара:
   на карточке прибора шар уже есть на нижней кобальтовой плите, и два
   подряд читались как повтор. */

.карта__стекло {
  position: absolute; z-index: 0; inset: 0 0 0 auto;
  width: min(42%, 560px); pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 58%);
  mask-image: linear-gradient(to right, transparent, #000 58%);
}
.карта__стекло img {
  width: 100%; height: 100%; object-fit: cover; object-position: 84% 42%;
  opacity: .8;
}
html[data-режим="контрастный"] .карта__стекло { display: none; }
@media (max-width: 767px) { .карта__стекло { width: 72%; opacity: .55; } }

/* Белый текст на светлом не используем никогда: кобальтовый призыв
   стал по-настоящему плотным, без фотографии под текстом. */
.карта--кобальт {
  background:
    radial-gradient(ellipse 40% 70% at 96% 108%, rgba(166,202,245,.26), transparent 68%),
    linear-gradient(150deg, var(--color-accent-hover), #10307E 62%, #0A2560);
}
.карта--кобальт .призыв__подпись { color: rgba(251,253,255,.82); }

/* Вопросы на плотном фоне: ответ был тёмным на тёмном. */
.карта--плотная .вопрос { border-bottom-color: rgba(251,253,255,.26); }
.карта--плотная .вопрос__кнопка { color: var(--color-surface); }
.карта--плотная .вопрос__ответ { color: rgba(251,253,255,.9); }
.карта--плотная .вопрос__ответ p { color: rgba(251,253,255,.9); }
.карта--плотная .надзаголовок { color: var(--color-air); }
.карта--плотная .заголовок-секции,
.карта--плотная .карточка__имя { color: var(--color-surface); }
.карта--плотная .карточка__пояснение { color: rgba(251,253,255,.76); }
.карта--плотная .витрина-ссылка { color: var(--color-air); }

/* Текст на всю ширину карты, а не жмётся к краю. */
.карта__нутро > .памятка-текст,
.карта__нутро.колонка-текста { max-width: none; }
.карта__нутро .колонка-текста { max-width: var(--container-text); }

/* --- Площадки на странице «О нас» -------------------------------------------- */

.площадки { display: grid; gap: var(--space-lg); }
/* min-width: 0 обязателен: внутри колонки лежит лента с карточками
   по 420 px, и без этого ячейка сетки раздувается под их ширину.
   На телефоне колонка выходила 601 px и обрезалась краем карты. */
.площадка { min-width: 0; }
.площадка__адрес { font: 600 var(--text-body-lg)/1.25 var(--font-display); }
.площадка__лента { --ширина-карточки: 100%; min-width: 0; }
.площадка__кадр { margin: 0; scroll-snap-align: start; flex: 0 0 min(88%, 420px); }
.площадка__кадр img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-md);
}
.площадка__подпись {
  margin-top: var(--space-xs);
  font-size: var(--text-body-sm); color: var(--color-text-secondary);
}
.площадка__пусто {
  padding: var(--space-xl) var(--space-md);
  border: 1px dashed var(--color-line); border-radius: var(--radius-md);
  background: rgba(251,253,255,.5); text-align: center;
}
.площадка__пусто .иконка { color: var(--color-muted); margin: 0 auto var(--space-sm); }
@media (min-width: 1024px) { .площадки { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }

/* --- Страховые компании ------------------------------------------------------ */

.страховые { list-style: none; display: grid; gap: var(--space-xs); }
.страховая {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm);
  align-items: start; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: rgba(251,253,255,.72);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.страховая .иконка { color: var(--color-accent); margin-top: 2px; }
.страховая__имя { display: block; font-weight: 600; }
.страховая__пояснение {
  display: block; font-size: var(--text-body-sm); color: var(--color-text-secondary);
}
@media (min-width: 768px) { .страховые { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .страховые { grid-template-columns: repeat(3, 1fr); } }
@media (hover: hover) and (pointer: fine) {
  .страховая:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -20px rgba(4,63,141,.24); }
}
@media (prefers-reduced-motion: reduce) { .страховая:hover { transform: none; } }

/* --- Контакты --------------------------------------------------------------- */

.телефон-главный { margin-top: var(--space-xl); }
.телефон-главный .надзаголовок { display: block; }
.телефон-главный__номер {
  display: inline-flex; align-items: center; gap: 12px;
  margin: var(--space-xs) 0 6px;
  font: 600 var(--text-h3)/1.1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--color-optic); text-decoration: none;
}
.телефон-главный__номер:hover { color: var(--color-accent); }
.телефон-главный__номер .иконка { width: 26px; height: 26px; color: var(--color-accent); }

.отделения { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.отделение {
  padding: var(--space-md);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: rgba(251,253,255,.72);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.отделение .иконка { color: var(--color-accent); margin-bottom: var(--space-xs); }
.отделение__имя { display: block; font: 600 var(--text-body)/1.3 var(--font-display); }
.отделение__номер {
  display: inline-block; margin-top: 6px;
  font: 600 var(--text-body-lg)/1.2 var(--font-display);
  color: var(--color-optic); text-decoration: none;
}
.отделение__номер:hover { color: var(--color-accent); }

.контакт-факт { margin-bottom: var(--space-md); }
.контакт-факт__ссылка {
  font: 600 var(--text-body-lg)/1.2 var(--font-display);
  color: var(--color-optic); text-decoration: none;
}
.контакт-факт__ссылка:hover { color: var(--color-accent); }

@media (min-width: 768px) { .отделения { grid-template-columns: repeat(2, 1fr); } }
@media (hover: hover) and (pointer: fine) {
  .отделение:hover { transform: translateY(-4px); box-shadow: 0 24px 52px -20px rgba(4,63,141,.26); }
}
@media (prefers-reduced-motion: reduce) { .отделение:hover { transform: none; } }

/* --- График работы в подвале ------------------------------------------------ */

.подвал__график { margin-top: var(--space-xs); }
.подвал__график-строка { display: block; margin-top: var(--space-xs); line-height: 1.5; }
.подвал__график-строка b { color: var(--color-text-primary); }

.вкладки__счёт {
  margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(130,153,179,.18); font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}
.вкладки__кнопка[aria-selected="true"] .вкладки__счёт { background: rgba(251,253,255,.24); }

/* --- Снимок на странице направления ---------------------------------------- */

/* Снимок направления — полупрозрачная подложка справа: тает к тексту
   и не разрывает первый экран отдельной картинкой в потоке. */
.карта--с-подложкой .карта__нутро { min-height: 340px; }
.карта__снимок {
  position: absolute; z-index: 0; inset: 0 0 0 auto;
  width: min(46%, 620px); pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 62%);
  mask-image: linear-gradient(to right, transparent, #000 62%);
}
.карта__снимок img {
  width: 100%; height: 100%; object-fit: cover;
  /* По вертикали кадр задаётся в админке: у портретных снимков лицо
     иначе попадает прямо под заголовок. */
  object-position: 42% var(--снимок-по-вертикали, 46%);
  opacity: .5;
}
html[data-режим="контрастный"] .карта__снимок { display: none; }
@media (max-width: 767px) { .карта__снимок { width: 62%; opacity: .55; } }