/* ============================================================
   ГЗТ.РФ — верстка по макету Figma (Page 2, Desktop 1440)
   ============================================================ */

:root {
  --dark: #020d20;
  --red: #ed3237;
  --pink: #ff777b;
  --pink-bg: #fff2f2;
  --blue: #5c83c3;
  --blue-card: #b2cffe;
  --blue-tag-bg: #bfd6fc;
  --green: #a4c100;
  --grey-bg: #ebf0f7;
  --grey-bg-2: #f2f5fa;
  --grey-bg-3: #f7f7f8;
  --text-47: rgba(2, 13, 32, 0.47);
  --text-36: rgba(2, 13, 32, 0.36);
  --text-34: rgba(2, 13, 32, 0.34);
  --grey-text: #a4a8af;
  --grey-light: #a8b3c5;
  /* основной шрифт — Inter Display (как в макете), остальные идут запасными */
  --font-head: 'Inter Display', 'Arimo', 'Inter Tight', Arial, sans-serif;
  --font-body: 'Inter Display', 'Inter Tight', 'Inter', system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.1;
  color: var(--dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input {
  font-family: inherit;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Появление блоков при скролле ----------
   Прозрачность и сдвиг секций пересчитывает JS от положения блока на экране,
   поэтому здесь только стартовое состояние и лёгкое сглаживание рывков
   прокрутки. Классы вешает тот же JS — без него всё остаётся видимым. */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.15s linear, transform 0.15s linear;
  will-change: opacity, transform;
}

.reveal__item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.15s linear, transform 0.15s linear;
}

.reveal__item--drop {
  transform: translateY(-14px);
}

/* первый экран проявляется по загрузке, а не по скроллу — ему нужен свой переход */
.reveal--hero,
.reveal--hero .reveal__item {
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal--hero .reveal__item {
  transition-delay: calc(var(--i, 0) * 90ms + 180ms);
}

.reveal--hero.is-visible,
.reveal--hero.is-visible .reveal__item {
  opacity: 1;
  transform: none;
}

/* фото первого экрана отзеркалено через scaleX(-1) — трогаем только прозрачность */
.reveal__fade {
  opacity: 0;
  transition: opacity 0.9s ease 0.25s;
}

.reveal.is-visible .reveal__fade {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal__item,
  .reveal__fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Общие элементы ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
  padding: 16px 38px;
  transition: opacity 0.2s, transform 0.2s;
}

.btn:hover {
  opacity: 0.88;
}

.btn--dark { background: var(--dark); }
.btn--red { background: var(--red); }
.btn--green { background: var(--green); }

.btn--blue {
  background: var(--blue);
  font-size: 16px;
  padding: 11px 29px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 47px;
  padding: 12px 21px;
  border-radius: 35px;
  background: rgba(92, 131, 195, 0.12);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: rgba(2, 13, 32, 0.5);
}

.chip--white {
  background: #fff;
  height: 45px;
  color: var(--dark);
}

.chip__sq {
  width: 7px;
  height: 7px;
  background: var(--red);
  flex: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--red);
}

/* шевроны в макете повернуты на -90° (острие вправо) */
.link-arrow img,
.service-card__link img,
.post__more img,
.specialists__all img {
  width: 11px;
  height: 6px;
  transform: rotate(-90deg);
}

/* ============================================================
   Header
   ============================================================ */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 21px;
  padding-bottom: 22px;
}

/* логотип с красным бейджем «КЛИНИКА» — в макете это часть логотипа */
.header__logo {
  display: flex;
  align-items: center;
  flex: none;
  gap: 6px;
}

.header__badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--red);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #fff;
}

/* меню занимает всё место между логотипом и кнопкой и центрируется в нём.
   Раньше оно было absolute от left:50% — так ему доставалась лишь правая
   половина шапки, и длинные пункты («Программы ведения») ломались на две строки */
.header__nav {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 42px;
}

.header__nav a {
  white-space: nowrap;
}

.header {
  position: relative;
}

.header__nav a {
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--dark);
  transition: color 0.2s;
}

.header__nav a:hover {
  color: var(--red);
}

.header__login {
  display: flex;
  align-items: center;
  gap: 27px;
  background: var(--dark);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  border-radius: 30px;
  padding: 5px 39px 5px 5px;
  height: 43px;
  transition: opacity 0.2s;
}

.header__login:hover {
  opacity: 0.88;
}

/* по макету круг белый, а стрелка внутри — тёмная (#020D20) */
.header__login-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.header__login-circle img {
  width: 11px;
  height: 11px;
}

/* ---------- Бургер и мобильное меню ---------- */

.burger {
  display: none;
  /* без flex:none кнопку сжимает соседний контент — линии схлопываются в ноль */
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  margin-left: auto;
  margin-right: 12px;
  z-index: 210;
}

.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--dark);
  transition: transform 0.25s, opacity 0.2s;
}

.burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.menu-open {
  overflow: hidden;
}

/* ============================================================
   Hero
   ============================================================ */

.hero__card {
  position: relative;
  height: 764px;
  border-radius: 28px;
  background: linear-gradient(157deg, #ed3237 3.2%, #ff777b 92.7%);
  overflow: hidden;
}

.hero__pixels {
  position: absolute;
  left: 490px;
  top: 32px;
  width: 894px;
  height: 666px;
  pointer-events: none;
}

/* фото занимает правую часть карточки: в макете начинается на 40.4% ширины
   и прижато к низу (top 97 + высота 667 = высота карточки 764) */
.hero__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 667px;
  width: 855px;
  object-fit: cover;
  object-position: right bottom;
  border-top-left-radius: 20px;
}

/* блок тегов из макета: 463×107 в 55px от правого края и 37px сверху.
   Ряды выровнены по ЛЕВОМУ краю блока — второй ряд короче и не прижимается
   к правому краю, как было раньше при justify-content: flex-end */
.hero__tags {
  position: absolute;
  top: 37px;
  right: 55px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 11px 9px;
  /* в макете ровно 463 — сумма трёх тегов первого ряда без остатка;
     округление шрифта уводило третий тег на новую строку, поэтому запас */
  width: 476px;
  z-index: 2;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  padding: 14px 19px;
  border: 1px solid #fff;
  border-radius: 35px;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

.hero__title {
  position: absolute;
  left: 33px;
  top: 40px;
  width: 768px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 74px;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: #fff;
  z-index: 2;
}

.hero__title span {
  color: var(--dark);
}

.hero__subtitle {
  position: absolute;
  left: 33px;
  top: 272px;
  width: 421px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
  z-index: 2;
}

.hero__cta {
  position: absolute;
  left: 33px;
  top: 405px;
  height: 64px;
  z-index: 2;
}

.hero__place {
  position: absolute;
  left: 33px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
  z-index: 2;
}

.hero__license {
  position: absolute;
  left: 448px;
  bottom: 29px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 45px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--grey-bg-2);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--blue);
  z-index: 2;
  transition: opacity 0.2s;
}

.hero__license:hover {
  opacity: 0.85;
}

/* ============================================================
   О клинике
   ============================================================ */

.about {
  padding-top: 72px;
}

.about__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 33px;
}

.about__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 59px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 15px;
}

.about__gallery-link {
  margin-top: 64px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--grey-light);
  transition: color 0.2s;
}

.about__gallery-link:hover {
  color: var(--blue);
}

.about__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 33px;
  margin-top: 55px;
}

.about__lead {
  width: 622px;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.about__lead span {
  color: var(--red);
}

.about__gallery {
  position: relative;
  width: 560px;
  height: 400px;
  margin-top: -70px;
  flex: none;
}

.about__photo-back {
  position: absolute;
  right: 0;
  top: 0;
  width: 494px;
  height: 302px;
  object-fit: cover;
  border-radius: 28px;
  transform: rotate(3.91deg);
}

.about__photo-front {
  position: absolute;
  left: 0;
  top: 62px;
  width: 494px;
  height: 303px;
  object-fit: cover;
  border-radius: 28px;
  border: 4px solid #fff;
}

/* Статистика с линейкой */

.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 100px;
  padding: 0 36px;
}

.about__stat {
  position: relative;
  padding: 79px 0 0 64px;
  min-height: 234px;
}

.about__stat-marker {
  position: absolute;
  left: 0;
  top: 0;
}

.about__stat-line {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 1px;
  height: 212px;
  background: var(--dark);
}

/* в макете линии чередуются: тёмная / красная */
.about__stat:nth-child(even) .about__stat-line {
  background: var(--red);
}

.about__stat-num {
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.about__stat-label {
  margin-top: 29px;
  width: 150px;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text-34);
}

/* линейка на всю ширину экрана (вне контейнера) */
.about__ruler {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 57px;
  overflow: hidden;
}

/* штрихи вынесены в псевдоэлемент: transform анимируется на GPU, в отличие от background-position */
.about__ruler::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* запас в один период, чтобы правый край не оголялся на сдвиге */
  width: calc(100% + 12px);
  background: repeating-linear-gradient(
    to right,
    rgba(2, 13, 32, 0.12) 0,
    rgba(2, 13, 32, 0.12) 1px,
    transparent 1px,
    transparent 12px
  );
  animation: ruler-marquee 0.6s linear infinite;
  will-change: transform;
}

/* сдвиг ровно на период узора — стык незаметен, лента идёт бесконечно */
@keyframes ruler-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .about__ruler::before { animation: none; }
}

/* внутренняя обёртка выровнена по контейнеру — красные деления совпадают с линиями статистики */
.about__ruler-inner {
  position: relative;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* красные деления привязаны к линиям статистики — стоят на месте, лента бежит под ними */
.about__ruler-red {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 3px;
  height: 57px;
  background: var(--red);
}

/* ============================================================
   Программы и услуги
   ============================================================ */

.programs {
  padding-top: 49px;
}

.programs__bg {
  background: var(--grey-bg);
  border-radius: 28px;
  padding: 80px 0 50px 0;
}

.programs__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 59px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
}

.programs__subtitle {
  width: 421px;
  margin: 30px auto 0;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text-36);
}

.programs__cards {
  display: grid;
  grid-template-columns: repeat(4, 335px);
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 74px;
}

.program-card {
  position: relative;
  height: 351px;
  background: #fff;
  border-radius: 22px;
  padding: 27px 26px;
}

.program-card__badge {
  display: inline-block;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.program-card__badge--blue { background: var(--grey-bg); color: var(--blue); }
.program-card__badge--green { background: #f4f7e0; color: var(--green); }
.program-card__badge--red { background: var(--pink-bg); color: var(--red); }

.program-card__title {
  margin-top: 15px;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.program-card__title--blue { color: var(--blue); }
.program-card__title--green { color: var(--green); }
.program-card__title--red { color: var(--red); }

.program-card__text {
  margin-top: 18px;
  width: 263px;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.program-card__btn {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 27px;
  height: 54px;
}

.program-card--photo {
  padding: 0;
  overflow: hidden;
}

.program-card--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-card__caption {
  position: absolute;
  left: 30px;
  bottom: 32px;
  width: 237px;
  font-family: var(--font-head);
  font-size: 33px;
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Фильтры */

.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filters__chip {
  height: 38px;
  padding: 0 20px;
  border-radius: 32px;
  background: var(--grey-bg);
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--dark);
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
}

.filters__chip:hover {
  background: #dde5f0;
}

.filters__chip.is-active {
  background: var(--red);
  color: #fff;
}

/* Слайдер услуг (Swiper, на всю ширину экрана) */

.services {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 36px;
  overflow: hidden;
  cursor: grab;
}

.services:active {
  cursor: grabbing;
}

.service-card {
  position: relative;
  flex: none;
  width: 335px;
  height: 351px;
  border-radius: 22px;
  padding: 30px 26px;
  overflow: hidden; /* снимок прибора обрезается краями карточки */
}

.service-card--white {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(2, 13, 32, 0.06) inset;
}

.service-card--grey {
  background: var(--grey-bg);
}

/* Цветная подложка — отдельный слой, обрезает только фон/фото, а не саму
   карточку: так фото прибора может выступать за правый край слайда. */
.service-card__bg {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  z-index: 0;
}

/* Карточкам с фото поднимаем z-index, иначе следующий слайд в DOM
   (соседняя .swiper-slide) перекрывает выступающую часть фото. */
.service-card--photo {
  z-index: 2;
}

/* Снимок прибора кладётся в правый верхний угол карточки и обрезается её
   границами — картинки нарисованы уже с нужным кадром, двигать их не нужно. */
.service-card__photo {
  position: absolute;
  top: 0;
  right: 0;
  /* снимки обрезаны по самому прибору, поэтому просто прижимаем к углу */
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right top;
  pointer-events: none;
  z-index: 1;
}

/* Карточки импортированного каталога: обычная фотография, а не вырезанный
   прибор, — растягиваем её на всю карточку. */
.service-card--cover .service-card__photo {
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Текст поверх фотографии нечитаем, поэтому кладём его на полупрозрачную
   плашку во всю карточку. */
.service-card--cover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* текст на карточке с фото занимает левую колонку, как в макете,
   иначе строки уходят под прибор */
.service-card--photo .service-card__title,
.service-card--photo .service-card__text {
  max-width: 69%; /* 231px из 335 — колонка текста в макете */
}

/* у карточек каталога плашка закрывает всю карточку, прибора справа нет —
   узкая колонка тут только режет длинные названия */
.service-card--cover .service-card__title,
.service-card--cover .service-card__text {
  max-width: none;
}

/* Иконки выгружены из макета в своих размерах (30–36px) — не подгоняем их под
   общую высоту, иначе часть значков уезжает от макета на 2-3px. Ограничение —
   только страховка от крупного файла, загруженного из админки. */
.service-card__icon {
  position: absolute;
  left: 26px;
  top: 30px;
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
  z-index: 1;
}

.service-card__hit {
  position: absolute;
  top: 30px;
  right: 26px;
  padding: 9px 15px;
  border-radius: 10px;
  background: var(--red);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #fff;
  z-index: 2;
}

/* Кегль одинаковый у всех карточек, поэтому длина названия влияет только на
   число строк: заголовок прижат низом к описанию и растёт вверх, а лишнее
   (в каталоге встречаются названия под 150 символов) обрезается многоточием. */
.service-card__title {
  position: absolute;
  left: 26px;
  bottom: 184px;
  width: calc(100% - 52px);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--dark);
  z-index: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.service-card__text {
  position: absolute;
  left: 26px;
  top: 191px;
  width: calc(100% - 58px);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--dark);
  z-index: 2;
  /* описание из админки может оказаться длиннее макета — обрезаем
     по строкам, а не даём тексту наехать на ссылку «Перейти» снизу */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.service-card__title--white,
.service-card__text--white {
  color: #fff;
}

.service-card__link {
  position: absolute;
  left: 26px;
  bottom: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.service-card__link--red { color: var(--red); }
.service-card__link--white { color: #fff; }

/* ============================================================
   ИИ-ассистент (всплывашка)
   ============================================================ */

.ai-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.ai-bar.is-hidden {
  display: none;
}

/* уезжает вниз, когда на экране форма «Остались вопросы?» (см. main.js) */
.ai-bar {
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.ai-bar.is-tucked {
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ai-bar { transition: none; }
}

.ai-bar__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  width: 845px;
  height: 90px;
  padding: 13px;
  border-radius: 72px;
  background: var(--dark);
  box-shadow: 0 12px 40px rgba(2, 13, 32, 0.25);
}

.ai-bar__label {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 223px;
  height: 64px;
  padding: 0 24px;
  border-radius: 72px;
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--font-head);
  font-size: 22px;
  letter-spacing: -0.03em;
  color: #fff;
  flex: none;
}

.ai-bar__text {
  width: 230px;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #fff;
}

.ai-bar__inner .btn--green {
  min-width: 283px;
  height: 64px;
  flex: none;
  padding: 16px 24px;
  white-space: nowrap;
}

.ai-bar__close {
  padding: 10px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.ai-bar__close:hover {
  opacity: 1;
}

/* ============================================================
   Филиалы
   ============================================================ */

.branches {
  padding-top: 92px;
}

.branches__title {
  padding-left: 33px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.branches__title span {
  margin-left: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--grey-text);
}

.branches__grid {
  display: flex;
  gap: 25px;
  margin-top: 32px;
  padding: 0 33px;
}

.branches__left {
  width: 451px;
  flex: none;
}

.branches__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 67px;
  padding: 0 37px 0 28px;
  border-radius: 18px;
  background: var(--grey-bg-2);
}

.branches__search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.branches__search input::placeholder {
  color: rgba(2, 13, 32, 0.24);
}

.branch-card {
  position: relative;
  margin-top: 8px;
  height: 224px;
  padding: 26px 23px;
  border-radius: 18px;
  background: var(--grey-bg-2);
}

.branch-card__name {
  display: flex;
  align-items: center;
  gap: 9px;
}

.branch-card__name b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.branch-card__addr {
  margin-top: 20px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.branch-card__hours {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--grey-text);
}

.branch-card__hours .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d9d9d9;
}

.branch-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.branch-card__note {
  width: 245px;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text-47);
}

.branch-card__bar {
  position: absolute;
  right: -14px;
  top: 0;
}

.branches__map {
  position: relative;
  flex: 1;
  height: 480px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--grey-bg);
}

.branches__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   Форма «Остались вопросы?»
   ============================================================ */

.ask {
  padding-top: 92px;
}

.ask__wrap {
  position: relative;
  height: 669px;
  border-radius: 28px;
  background: linear-gradient(12deg, #bfd6fc 54.42%, #f2f5fa 103.68%);
  overflow: hidden;
}

.ask__pixels {
  position: absolute;
  left: 14px;
  top: 98px;
  right: 20px;
  height: 474px;
  width: calc(100% - 34px);
  pointer-events: none;
}

.ask__card {
  position: absolute;
  left: 162px;
  right: 162px;
  top: 98px;
  bottom: 97px;
  background-color: #fff;
  border-radius: 22px;
  background-image: url(/img/form_bg_rectangles.png);
}

.ask__content {
  position: absolute;
  left: 36px;
  top: 29px;
  width: 400px;
  z-index: 2;
}

.ask__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 59px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.ask__text {
  margin-top: 22px;
  width: 280px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.ask__form {
  margin-top: 39px;
  width: 410px;
}

.ask__input {
  display: block;
  width: 100%;
  height: 47px;
  margin-bottom: 16px;
  padding: 0 26px;
  border: 1px solid rgba(2, 13, 32, 0.23);
  border-radius: 14px;
  background: #fff;
  outline: none;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--dark);
  transition: border-color 0.2s;
}

.ask__input::placeholder {
  color: rgba(2, 13, 32, 0.2);
}

.ask__input:focus {
  border-color: var(--blue);
}

.ask__input.is-error {
  border-color: var(--red);
}

.ask__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 47px;
  border-radius: 14px;
  background: var(--red);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #fff;
  transition: opacity 0.2s;
}

.ask__submit:hover {
  opacity: 0.88;
}

/* сообщение об успешной отправке — показывает main.js, поля к этому моменту очищены */
.ask__success {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(164, 193, 0, 0.14);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #6f8300;
}

.ask__success[hidden] { display: none; }

.ask__consent {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--text-36);
}

.ask__consent a {
  color: var(--pink);
  text-decoration: underline;
}

.ask__photo {
  position: absolute;
  right: 0;
  top: 29px;
  bottom: 0;
  width: 668px;
  height: calc(100% - 29px);
  object-fit: cover;
  object-position: left top;
  border-bottom-right-radius: 22px;
}

/* ============================================================
   Специалисты
   ============================================================ */

.specialists {
  padding-top: 96px;
}

.specialists__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.specialists__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.specialists__sub {
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: 20px;
  letter-spacing: -0.02em;
}

.specialists__sub b {
  color: var(--red);
}

.specialists__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 63px;
  padding: 20px 26px;
  border-radius: 44px;
  background: var(--grey-bg);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  transition: background 0.2s;
}

.specialists__all:hover {
  background: #dde5f0;
}

/* слайдер врачей: тянется до правого края экрана, карточки уходят за границу контейнера */
.specialists__slider {
  position: relative;
  margin-top: 48px;
  margin-right: calc(50% - 50vw);
  padding-right: 20px;
  overflow: hidden;
}

/* ширина слайда = колонка прежней сетки 4×, чтобы блок не «поехал» относительно макета */
.specialists__slider .swiper-slide {
  width: 337px;
  height: auto;
}

/* стрелки поверх фото, у правого края видимой области */
.specialists__nav {
  position: absolute;
  top: 200px;
  right: 40px;
  z-index: 2;
  display: flex;
  gap: 10px;
}

.specialists__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(2, 13, 32, 0.12);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.specialists__arrow::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-top: 2px solid var(--dark);
  border-right: 2px solid var(--dark);
}

.specialists__arrow--prev::before { transform: rotate(-135deg) translate(-2px, -2px); }
.specialists__arrow--next::before { transform: rotate(45deg) translate(-2px, 2px); }

.specialists__arrow:hover { background: #fff; }

/* Swiper сам вешает этот класс на крайних позициях */
.specialists__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

.doctor__photo {
  display: block; /* ссылка-обёртка: без этого высота и overflow не действуют */
  height: 455px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(92, 131, 195, 0.2), rgba(29, 147, 210, 0.2));
}

.doctor__photo--red {
  background: var(--red);
}

.doctor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.doctor:hover .doctor__photo img {
  transform: scale(1.03);
}

.doctor__name {
  margin-top: 21px;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.doctor__desc {
  margin-top: 14px;
  max-width: 298px;
  font-size: 14px;
  color: var(--text-47);
}

/* ============================================================
   Статьи
   ============================================================ */

.articles {
  padding-top: 122px;
}

.articles__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 59px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.articles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.post {
  position: relative;
  display: flex;
  flex-direction: column;
}

.post__img {
  position: relative;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
}

.post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post__time {
  position: absolute;
  right: 6px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(2, 13, 32, 0.35);
  font-size: 14px;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

.post__tag {
  align-self: flex-start;
  margin-top: 14px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 14px;
  letter-spacing: -0.02em;
}

.post__tag--blue { background: var(--blue-tag-bg); color: var(--blue); }
.post__tag--pink { background: #ffc6c8; color: var(--red); }

.post__title {
  margin-top: 12px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  max-width: 318px;
}

.post__text {
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: rgba(2, 13, 32, 0.91);
  max-width: 318px;
  flex: 1;
}

/* снизу осталась одна ссылка «Читать полностью» — прижимаем её к правому краю */
.post__bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 22px;
}

.post__date {
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--text-47);
}

/* дата встала под картинку, на место прежнего тега */
.post__date--top {
  margin-top: 14px;
}

.post__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--red);
}

.articles__blog-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-top: 46px;
  border-radius: 22px;
  background: var(--dark);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #fff;
  transition: opacity 0.2s;
}

.articles__blog-btn:hover {
  opacity: 0.9;
}

/* ============================================================
   ИИ-бот
   ============================================================ */

.aibot {
  padding-top: 60px;
}

.aibot__bg {
  background: var(--red);
  border-radius: 28px;
  height: 648px;
  padding-top: 89px;
  overflow: hidden;
}

.aibot__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 59px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
  color: #fff;
}

.aibot__subtitle {
  width: 555px;
  margin: 27px auto 0;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.77);
}

.aibot__subtitle a {
  font-weight: 500;
  color: #fff;
  text-decoration: underline;
}

.aibot__panel {
  position: relative;
  width: 1356px;
  max-width: calc(100% - 44px);
  height: 310px;
  margin: 59px auto 0;
  border-radius: 24px;
  background: var(--pink-bg);
  overflow: hidden;
}

.aibot__left {
  position: absolute;
  left: 28px;
  top: 28px;
  width: 494px;
}

.aibot__left h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 40px;
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.aibot__left p {
  margin-top: 27px;
  width: 358px;
  font-size: 16px;
  letter-spacing: -0.02em;
  font-family: Arial, sans-serif;
}

.aibot__upload {
  margin-top: 32px;
  width: 425px;
  height: 50px;
  font-size: 16px;
  font-weight: 400;
  font-family: Arial, sans-serif;
}

.aibot__3d {
  position: absolute;
  left: 412px;
  top: 9px;
  width: 413px;
  height: 413px;
  pointer-events: none;
  z-index: 2; /* в макете 3D-графика лежит поверх чата */
}

/* Чат-мокап */

.aibot__chat {
  position: absolute;
  left: 643px;
  top: 23px;
  width: 690px;
  height: 372px;
  border: 1px solid rgba(2, 13, 32, 0.06);
  border-radius: 22px;
  background: linear-gradient(240deg, #f4f8ff 2.2%, #fff2f2 100%);
  cursor: pointer; /* карточка кликабельна — открывает модалку chat.js */
}

.aibot__chat:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.aibot__chat-head {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  height: 37px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  background: #fff;
}

.aibot__chat-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 37px;
  border-radius: 10px;
  background: var(--red);
}

.aibot__chat-name {
  margin-left: 8px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: -0.02em;
}

.aibot__chat-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: 14px;
  opacity: 0.75;
}

.aibot__chat-title {
  position: absolute;
  left: 50%;
  top: 80px;
  transform: translateX(-50%);
  width: 276px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-align: center;
  background: linear-gradient(85deg, #020d20 0.6%, #2a4a7d 98.3%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aibot__chat-sub {
  position: absolute;
  left: 50%;
  top: 132px;
  transform: translateX(-50%);
  width: 326px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  text-align: center;
  color: rgba(161, 138, 146, 0.48);
}

.aibot__msg {
  position: absolute;
  display: flex;
  align-items: center;
  border: 1px solid rgba(161, 138, 146, 0.16);
  background: #fff;
  font-size: 12px;
  letter-spacing: -0.02em;
}

.aibot__msg--bot {
  left: 16px;
  top: 193px;
  width: 281px;
  height: 51px;
  padding: 0 16px;
  border-radius: 12px 12px 12px 0;
}

.aibot__msg--user {
  right: 16px;
  top: 244px;
  width: 196px;
  height: 46px;
  padding: 0 16px;
  border-radius: 12px 12px 0 12px;
  justify-content: space-between;
}

.aibot__msg--user a {
  color: var(--red);
  text-decoration: underline;
}

.aibot__msg-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: Arial, sans-serif;
  font-size: 8px;
  color: var(--text-36);
}

.aibot__input {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -7px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 24px;
  border: 1px solid rgba(161, 138, 146, 0.16);
  border-radius: 10px;
  background: #fff;
}

.aibot__input span {
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #a18a92;
}

.aibot__input button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 6px;
  background: var(--dark);
}

/* ============================================================
   Модальное окно чата с ботом (.chatm__*)
   Две колонки: чат (59%) + панель рекомендаций (41%), как у донора.
   Пропорции и структура — донорские, оформление — из нашей палитры.
   ============================================================ */

body.chat-open {
  overflow: hidden;
}

.chatm {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.22s;
}

.chatm[hidden] { display: none; }
.chatm.is-open { opacity: 1; }

.chatm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 13, 32, 0.55);
  backdrop-filter: blur(3px);
}

.chatm__window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1144px, 100vw - 40px);
  height: min(860px, 100vh - 40px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(2, 13, 32, 0.35);
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s;
}

.chatm.is-open .chatm__window { transform: none; }

/* ---------- Закрытие ---------- */

.chatm__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(2, 13, 32, 0.06);
  transition: background 0.18s;
}

.chatm__close:hover { background: rgba(2, 13, 32, 0.12); }

.chatm__close span {
  position: absolute;
  width: 14px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--dark);
}

.chatm__close span:first-child { transform: rotate(45deg); }
.chatm__close span:last-child { transform: rotate(-45deg); }

/* ---------- Вкладки (только мобильные) ---------- */

.chatm__tabs { display: none; }

/* ---------- Две колонки ---------- */

.chatm__row {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* ---------- Левая колонка: чат (59%) ---------- */

.chatm__chat {
  display: flex;
  flex-direction: column;
  width: 59%;
  min-height: 0;
  padding: 44px 8px 28px 44px;
  gap: 18px;
}

.chatm__chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* вводный блок — виден, пока в переписке нет сообщений пользователя */

.chatm__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: auto 0 26px;
  padding: 0 20px;
  text-align: center;
}

.chatm__intro[hidden] { display: none; }

.chatm__intro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--red);
}

.chatm__intro-icon img { width: 28px; height: 28px; }

.chatm__intro-title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.chatm__intro-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-47);
  max-width: 360px;
}

.chatm__messages {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scroll-behavior: smooth;
  /* снизу воздух, иначе последнее сообщение упирается в подпись поля ввода */
  padding: 0 14px 20px 0;
}

/* сообщения бота — маленький аватар слева + подпись над текстом */

.chatm__msg-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 88%;
}

.chatm__msg-row--bot { align-self: flex-start; }

.chatm__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pink-bg);
}

.chatm__avatar img { width: 17px; height: 17px; }

.chatm__msg-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.chatm__msg-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
}

.chatm__msg {
  max-width: 100%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
  word-break: break-word;
}

.chatm__msg--bot {
  border-radius: 4px 14px 14px 14px;
  background: var(--grey-bg-3);
  color: var(--dark);
}

.chatm__msg--user {
  align-self: flex-end;
  max-width: 82%;
  border-radius: 14px 14px 4px 14px;
  background: var(--dark);
  color: #fff;
}

.chatm__msg--error {
  align-self: flex-start;
  max-width: 82%;
  border: 1px solid rgba(237, 50, 55, 0.25);
  background: var(--pink-bg);
  color: var(--red);
}

/* каретка typed.js — внутри облачка, в конце набираемой строки */

.chatm__msg--bot .typed-cursor {
  margin-left: 1px;
  color: rgba(2, 13, 32, 0.45);
  font-weight: 400;
}

/* индикатор «печатает» */

.chatm__typing {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  padding: 14px 18px;
}

.chatm__typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(2, 13, 32, 0.55);
  animation: chatmTyping 1s infinite ease-in-out;
}

.chatm__typing span:nth-child(2) { animation-delay: 0.15s; }
.chatm__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatmTyping {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chatm__typing span { animation: none; opacity: 0.6; }
}

/* ---------- Кнопки и варианты ui из ответа бота ---------- */

.chatm__choices {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 8px;
  max-width: 92%;
}

.chatm__choices--doctors,
.chatm__choices--datetime,
.chatm__choices--schedule {
  flex-direction: column;
  align-self: stretch;
  max-width: 100%;
}

.chatm__choices.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.chatm__choice-btn {
  padding: 8px 14px;
  border: 1px solid rgba(2, 13, 32, 0.14);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--dark);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chatm__choice-btn:hover {
  border-color: var(--red);
  background: var(--pink-bg);
  color: var(--red);
}

.chatm__doctor {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(2, 13, 32, 0.1);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.chatm__doctor:hover {
  border-color: var(--red);
  background: var(--pink-bg);
}

.chatm__doctor-photo,
.chatm__doctor-photo--placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grey-bg-3);
  flex-shrink: 0;
}

.chatm__doctor-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chatm__doctor-name {
  font-size: 13px;
  font-weight: 600;
}

.chatm__doctor-position {
  font-size: 11px;
  color: var(--text-47);
}

.chatm__datetime {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(2, 13, 32, 0.1);
  border-radius: 14px;
  background: #fff;
}

.chatm__datetime-row {
  display: flex;
  gap: 8px;
}

.chatm__datetime-field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-47);
}

.chatm__datetime-field input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(2, 13, 32, 0.14);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--dark);
}

.chatm__datetime-submit {
  align-self: flex-start;
}

/* ---------- Пикер расписания: реальные окна врача через SDK ---------- */

.chatm__sched {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(2, 13, 32, 0.1);
  border-radius: 14px;
  background: #fff;
}

.chatm__sched-status {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-47);
}

.chatm__sched-status--warn {
  color: var(--red);
}

.chatm__sched-dates,
.chatm__sched-times {
  display: flex;
  gap: 8px;
  /* окно чата на мобильном узкое — ряд дат/времени прокручивается по
     горизонтали вместо переноса, иначе кнопки не помещаются */
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.chatm__sched-dates[hidden],
.chatm__sched-times[hidden] { display: none; }

.chatm__sched-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 56px;
  padding: 8px 10px;
}

.chatm__sched-date-dow {
  font-size: 11px;
  color: var(--text-47);
}

.chatm__sched-date-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--dark);
}

.chatm__sched-date.is-active {
  background: var(--dark);
  border-color: var(--dark);
}

.chatm__sched-date.is-active .chatm__sched-date-dow,
.chatm__sched-date.is-active .chatm__sched-date-num {
  color: #fff;
}

.chatm__sched-time {
  flex-shrink: 0;
}

.chatm__sched-time.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.chatm__sched-submit {
  align-self: flex-start;
}

.chatm__sched-submit[hidden] { display: none; }

.chatm__sched-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 659px) {
  .chatm__sched-date { min-width: 48px; padding: 6px 8px; }
}

/* ---------- Поле ввода ---------- */

.chatm__action { flex-shrink: 0; }

.chatm__action-title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark);
}

.chatm__input {
  position: relative;
  width: 100%;
}

.chatm__input-field {
  width: 100%;
  min-height: 54px;
  max-height: 140px;
  padding: 16px 62px 16px 20px;
  border: 0;
  outline: 0;
  resize: none;
  border-radius: 16px;
  background: var(--grey-bg-3);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dark);
}

.chatm__input-field::placeholder { color: var(--text-47); }
.chatm__input-field:disabled { opacity: 0.6; }

.chatm__send {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--dark);
  transition: opacity 0.15s;
}

.chatm__send:hover { opacity: 0.85; }
.chatm__send:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Правая колонка: рекомендации (41%) ---------- */

.chatm__rec {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  width: 41%;
  padding: 44px 36px 32px;
  border-radius: 0 28px 28px 0;
  background: var(--grey-bg-2);
  overflow-y: auto;
}

.chatm__rec-title {
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.chatm__rec-desc {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-47);
}

.chatm__rec-desc[hidden] { display: none; }

.chatm__rec-list {
  display: flex;
  flex-direction: column;
}

.chatm__rec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(2, 13, 32, 0.1);
  text-decoration: none;
  transition: opacity 0.15s;
}

.chatm__rec-item:first-child { padding-top: 0; }
.chatm__rec-item:last-child { border-bottom: 0; }
.chatm__rec-item:hover { opacity: 0.7; }

.chatm__rec-item-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark);
}

.chatm__rec-item-meta {
  font-size: 13px;
  color: var(--text-47);
}

.chatm__rec-actions {
  flex-shrink: 0;
  width: 100%;
}

.chatm__rec-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 16px;
  border: 0;
  border-radius: 16px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.chatm__rec-btn:hover { opacity: 0.85; }
.chatm__rec-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.chatm__rec-btn--consult {
  background: rgba(2, 13, 32, 0.08);
  color: var(--dark);
}

.chatm__rec-btn--book {
  margin-top: 12px;
  background: var(--red);
  color: #fff;
}

/* ---------- Планшет: чуть уже отступы ---------- */

@media (max-width: 1200px) {
  .chatm__chat { padding: 28px 8px 24px 28px; }
  .chatm__rec { padding: 28px 24px; }
}

/* ---------- Мобильные: окно на весь экран, вкладки вместо колонок ---------- */

@media (max-width: 899px) {
  .chatm { padding: 0; }

  .chatm__window {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .chatm__tabs {
    display: flex;
    flex-shrink: 0;
    margin: 64px 20px 20px;
    border: 1px solid var(--dark);
    border-radius: 14px;
    overflow: hidden;
  }

  .chatm__tab {
    flex: 1;
    padding: 13px 0;
    border: 0;
    background: transparent;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .chatm__tab.is-active {
    background: var(--dark);
    color: #fff;
  }

  .chatm__row {
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* колонка тянется на всю высоту окна: поле ввода прижато к низу экрана,
     а переписка занимает всё, что осталось, — без flex колонка была
     по высоте содержимого и поле висело сразу под сообщениями */
  .chatm__chat,
  .chatm__rec {
    width: 100%;
    flex: 1;
    min-height: 0;
  }

  .chatm__chat { padding: 0 20px 20px; }
  .chatm__rec { padding: 0 20px 20px; border-radius: 0; }

  .chatm__row[data-active-tab="chat"] .chatm__rec { display: none; }
  .chatm__row[data-active-tab="rec"] .chatm__chat { display: none; }
}

/* ============================================================
   Отзывы
   ============================================================ */

.reviews {
  position: relative;
  height: 1055px;
  margin-top: 81px;
}

.reviews__chip {
  position: absolute;
  left: calc(50% - 76px);
  top: 210px;
}

.reviews__quote {
  position: absolute;
  left: 50%;
  top: 300px;
  transform: translateX(-50%);
  width: 1013px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 59px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
}

.reviews__quote span {
  color: var(--red);
}

.reviews__sub {
  position: absolute;
  left: 50%;
  top: 614px;
  transform: translateX(-50%);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text-47);
  white-space: nowrap;
}

.reviews__more {
  position: absolute;
  left: 50%;
  top: 688px;
  transform: translateX(-50%);
  height: 54px;
}

/* Карточки-отзывы */

.review-card {
  position: absolute;
  z-index: 2;
  width: 325px;
  /* высота держится потолком, а не жёстким height: так раскрытие можно
     анимировать — точную высоту раскрытой карточки ставит main.js */
  height: auto;
  min-height: 242px;
  max-height: 242px;
  overflow: hidden;
  padding: 23px 24px;
  border-radius: 22px;
  background: var(--grey-bg-2);
  transition: max-height 0.32s ease;
}

.review-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.review-card h3 {
  margin-top: 12px;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.review-card p {
  margin-top: 12px;
  max-width: 275px;
  font-weight: 300;
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}

/* Раскрытая карточка не должна вылезать за коллаж: секция фиксированной высоты
   (1055px), карточки в ней абсолютные — без потолка длинный отзыв наезжал на
   блок контактов. Потолок под конкретный отзыв считает main.js, здесь только
   слой поверх соседей. */
.review-card.is-open {
  z-index: 5;
}

/* нижняя карточка стоит вровень с нижним краем секции — вниз ей расти некуда,
   поэтому раскрывается вверх */
.reviews__pos-3.is-open {
  top: auto;
  bottom: 0;
}

.review-card.is-open p {
  -webkit-line-clamp: unset;
}

@media (prefers-reduced-motion: reduce) {
  .review-card { transition: none; }
}

.review-card__toggle {
  margin-top: 10px;
  font-size: 14px;
  color: var(--grey-text);
  transition: color 0.2s;
}

.review-card__toggle:hover {
  color: var(--dark);
}

/* Видео-карточки */

/* превью видео-отзыва: в макете приглушено до 0.74 и оживает при наведении */
.video-card {
  display: block;
  position: absolute;
  z-index: 2;
  width: 325px;
  height: 220px;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0.74;
  cursor: pointer;
  transition: opacity 0.25s;
}

.video-card:hover,
.video-card:focus-visible {
  opacity: 1;
}

.video-card img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__play {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: block;
  transition: transform 0.2s;
}

.video-card:hover .video-card__play {
  transform: scale(1.08);
}

/* Раскладка карточек (координаты из макета) */

.reviews__pos-1 { left: 67px; top: 81px; }    /* текстовый отзыв слева сверху */
.reviews__pos-2 { right: 11px; top: 187px; }  /* текстовый отзыв справа */
.reviews__pos-3 { left: 172px; top: 813px; }  /* текстовый отзыв слева снизу */
.reviews__pos-4 { left: 10px; top: 526px; }   /* видео слева */
.reviews__pos-5 { right: 11px; top: 703px; }  /* видео справа */

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

/* нижняя карточка отзывов заканчивается вровень с секцией, поэтому 17px из макета
   прижимали её к контактам вплотную */
.contacts {
  margin-top: 45px;
}

.contacts__bg {
  position: relative;
  display: flex;
  justify-content: space-between;
  background: var(--grey-bg-2);
  border-radius: 28px;
  min-height: 568px;
  padding: 23px 22px 23px 22px;
}

.contacts__info {
  padding: 24px 20px 0;
  width: 640px;
}

.contacts__title {
  margin-top: 24px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.contacts__cols {
  display: flex;
  gap: 108px;
  margin-top: 68px;
}

.contacts__label {
  display: block;
  margin-bottom: 16px;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text-47);
}

.contacts__cols a,
.contacts__cols p {
  display: block;
  margin-top: 12px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.contacts__bottom {
  display: flex;
  align-items: center;
  gap: 42px;
  margin-top: 96px;
}

.contacts__addr {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 260px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.contacts__cta {
  width: 313px;
  height: 64px;
}

.contacts__map {
  width: 691px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #fff;
  flex: none;
  background: var(--grey-bg);
}

.contacts__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  padding-top: 128px;
}

.faq__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 59px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
}

.faq__list {
  width: 1355px;
  max-width: 100%;
  margin: 42px auto 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.faq__item {
  background: var(--grey-bg-3);
  border-radius: 28px;
  padding: 0 42px;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  min-height: 116px;
  padding: 20px 0;
  font-size: 29px;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__icon {
  position: relative;
  width: 25px;
  height: 25px;
  flex: none;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 25px;
  height: 2.2px;
  background: var(--dark);
  transition: transform 0.25s;
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__item p {
  max-width: 995px;
  padding-bottom: 40px;
  margin-top: -18px;
  font-size: 20px;
  line-height: 1.21;
  letter-spacing: -0.02em;
  color: rgba(2, 13, 32, 0.38);
}

/* ============================================================
   Footer
   ============================================================ */

/* 80px по макету: на страницах без нижнего отступа в контенте (лента блога)
   прежние 66px подтягивали подвал вплотную к карточкам */
.footer {
  margin-top: 80px;
}

/* фон подвала тянется во всю ширину экрана, содержимое остаётся в контейнере */
.footer__bg {
  background: var(--dark);
  border-radius: 28px 28px 0 0;
  padding: 44px 0 0;
  color: #fff;
}

.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 42px;
}

.footer__top {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.footer__dash {
  position: absolute;
  top: 0;
  height: 7px;
  border-radius: 8px;
  background: #fff;
}

.footer__dash--long { left: 333px; width: 41px; }
.footer__dash--short { left: 378px; width: 13px; }
.footer__dash--right { right: 0; width: 41px; }

.footer__cols {
  display: grid;
  /* первая колонка (реквизиты) шире, остальные четыре — равные */
  grid-template-columns: 300px repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-top: 51px;
}

.footer__legal {
  font-size: 10px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.47);
  max-width: 240px;
}

.footer__legal p + p {
  margin-top: 12px;
}

/* ---------- Бейдж лицензии (Росздравнадзор + QR) ----------
   Размеры и позиции сняты из макета (узел 1318:312): плашка 255×86,
   элементы внутри спозиционированы абсолютно, поэтому совпадают пиксель в пиксель. */
.footer__license {
  position: relative;
  margin-top: 36px;
  width: 255px;
  height: 86px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.footer__license-emblem {
  position: absolute;
  left: 11.8px;
  top: 12.6px;
  width: 23.9px;
  height: 28.2px;
}

.footer__license-authority {
  position: absolute;
  left: 46.2px;
  top: 13.3px;
  width: 132px;
  font-size: 8.42px;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  white-space: pre-line; /* переносы строк хранятся в самой настройке */
}

/* QR нарисован белым по прозрачному фону и лежит прямо на тёмной плашке:
   белая подложка, которая была нужна прежнему тёмному коду, его бы съела */
.footer__license-qr {
  position: absolute;
  left: 182.2px;
  top: 15px;
  width: 56.1px;
  height: 56.1px;
  display: block;
}

.footer__license-qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.footer__license-number {
  position: absolute;
  left: 11.8px;
  top: 52.6px;
  font-size: 8.42px;
  font-weight: 600;
  color: #fff;
}

.footer__license-link {
  position: absolute;
  left: 11.8px;
  top: 66.6px;
  font-size: 5.61px;
  color: #fff;
  text-decoration: underline;
}

.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__col-title {
  margin-bottom: 16px;
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.02em;
}

.footer__col a {
  margin-top: 6px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.47);
  transition: color 0.2s;
}

.footer__col a:hover {
  color: #fff;
}

.footer__bottom {
  display: grid;
  grid-template-columns: 300px repeat(4, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
  margin-top: 100px;
}

/* ---------- «Разработано компанией» + логотип разработчика ---------- */
.footer__dev-label {
  display: block;
  font-size: 16px;
  letter-spacing: -0.32px;
  color: rgba(255, 255, 255, 0.47);
}

/* логотип Medo из макета — 96×15 */
.footer__dev-name {
  display: block;
  margin-top: 14px;
}

.footer__dev-name img {
  width: 96px;
  height: 15px;
}

.footer__contact {
  display: block;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: #fff;
}

.footer__bottom span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.47);
}

.footer__addr {
  font-weight: 400;
}

/* в макете ряд иконок 197.6×30: шаг между центрами 55.871 при иконке 30 → зазор 25.87 */
.footer__socials {
  display: flex;
  align-items: center;
  gap: 25.87px;
  justify-self: end;
  margin-top: 4px;
}

/* Иконки соцсетей разной формы: телеграм и MAX квадратные 30×30, ютуб широкий
   38×27, вк 29×30. Жёсткие 30×30 сплющивали ютуб, поэтому держим только высоту,
   ширину отдаём пропорции. */
.footer__social {
  display: block;
  height: 30px;
}

.footer__social img {
  display: block;
  width: auto;
  height: auto;
  max-height: 30px;
}

/* ---------- Плашка дисклеймера во всю ширину экрана ---------- */
.footer__disclaimer {
  margin-top: 44px;
  padding: 26px 0;
  /* фон чуть светлее основного */
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.footer__disclaimer-text {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.47);
}

.footer__disclaimer-notice {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}

.footer__disclaimer-text + .footer__disclaimer-notice {
  margin-top: 10px;
}

/* ============================================================
   Адаптив (макет — desktop 1440; ниже — аккуратная деградация)
   ============================================================ */

@media (max-width: 1439px) {
  .hero__title { font-size: 60px; width: 620px; }
  .hero__tags { width: 420px; }
  .hero__pixels { left: 40%; }
  .about__lead { width: 55%; font-size: 30px; }
  .about__gallery { width: 42%; }
  .about__photo-back, .about__photo-front { width: 100%; }
  .programs__cards { grid-template-columns: repeat(4, 1fr); gap: 15px; }
  .program-card { height: auto; min-height: 351px; }
  .program-card__text { width: auto; }
  .ask__card { left: 60px; right: 60px; }
  .ask__photo { width: 50%; }
  .aibot__panel .aibot__3d { display: none; }
  .aibot__chat { left: auto; right: 22px; width: 56%; }
  .aibot__left { width: 40%; }
  .aibot__left h3 { font-size: 32px; }
  .aibot__upload { width: 100%; }
  .reviews__quote { width: 90%; font-size: 48px; }
  .contacts__bg { flex-direction: column; gap: 30px; }
  .contacts__map { width: 100%; height: 420px; }
  /* планшет: колонки складываются в 3, реквизиты уже не выделяются шириной */
  .footer__cols, .footer__bottom { grid-template-columns: repeat(3, 1fr); gap: 20px; row-gap: 32px; }
  .footer__dash--long { left: 25%; }
  .footer__dash--short { left: calc(25% + 45px); }
  .footer__inner { padding: 0 32px; }
  /* карточка услуги остаётся своего размера (слайдер листается свайпом),
     уменьшаем только фото прибора, чтобы оно меньше выступало за край */
  .service-card__photo { width: 96%; height: 138%; }
}

@media (max-width: 1099px) {
  /* тач-цели: доводим до 44px там, где это не ломает раскладку */
  .header__logo { display: flex; align-items: center; min-height: 44px; }
  .filters__chip { min-height: 44px; padding: 0 22px; }
  .link-arrow, .about__gallery-link { display: inline-flex; align-items: center; min-height: 44px; }
  .ai-bar__close { width: 36px; height: 36px; }

  /* мобильная навигация: выпадающая панель вместо скрытого меню */
  .burger { display: flex; }

  .header,
  .pheader {
    position: relative;
    z-index: 200;
  }

  /* панель меню — сосед логотипа внутри шапки, поэтому их нужно поднять над ней */
  .header__logo,
  .header__login {
    position: relative;
    z-index: 200;
  }

  /* на телефоне бейдж уменьшаем, иначе шапке не хватает места на бургер */
  .header__badge {
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
  }

  .header__nav,
  .pheader__nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 92px 20px 28px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(2, 13, 32, 0.16);
    border-radius: 0 0 22px 22px;
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  }

  .header__nav.is-open,
  .pheader__nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .header__nav a,
  .pheader__nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(2, 13, 32, 0.08);
    font-size: 17px;
  }

  .header__nav a:last-child,
  .pheader__nav a:last-child {
    border-bottom: none;
  }
  /* hero на мобильных — обычный вертикальный поток, порядок задаём через order */
  .hero__card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 26px 20px 0;
  }
  .hero__pixels { display: none; }
  .hero__tags {
    position: static;
    order: 1;
    width: auto;
    gap: 8px;
    justify-content: flex-start;
  }
  .hero__tag { padding: 10px 15px; font-size: 15px; }
  .hero__title {
    position: static;
    order: 2;
    width: auto;
    margin-top: 22px;
    font-size: 42px;
  }
  .hero__subtitle {
    position: static;
    order: 3;
    width: auto;
    margin-top: 18px;
    font-size: 17px;
  }
  .hero__cta {
    position: static;
    order: 4;
    width: 100%;
    height: 58px;
    margin-top: 26px;
    padding: 16px 20px;
    font-size: 17px;
    text-align: center;
  }
  .hero__photo {
    position: static;
    order: 5;
    /* во всю ширину карточки, включая её боковые отступы;
       без max-width общее правило для img резало кадр и он вставал не по правому краю */
    width: calc(100% + 40px);
    max-width: none;
    height: auto;
    aspect-ratio: 1660 / 948; /* показываем кадр целиком, без обрезки по бокам */
    margin: 28px -20px 0;
    transform: none;
    border-radius: 20px 20px 0 0;
    object-fit: cover;
    object-position: center top;
  }
  .hero__place { left: 20px; bottom: 18px; }
  .hero__license { left: auto; right: 20px; bottom: 18px; font-size: 17px; padding: 0 16px; }
  .about__body { flex-direction: column; gap: 60px; }
  .about__lead { width: 100%; }
  .about__gallery { width: 100%; height: 340px; margin-top: 0; }
  .about__photo-back, .about__photo-front { width: 60%; height: 260px; }
  .about__stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .about__ruler { display: none; }
  /* у каждого блока — своя мини-линейка, красное деление всегда на линии */
  .about__stat { min-height: 0; padding-bottom: 77px; }
  .about__stat-line { height: calc(100% - 79px); }
  .about__stat::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 57px;
    background: repeating-linear-gradient(
      to right,
      rgba(2, 13, 32, 0.12) 0,
      rgba(2, 13, 32, 0.12) 1px,
      transparent 1px,
      transparent 12px
    );
  }
  .about__stat::after {
    content: '';
    position: absolute;
    left: 21px;
    bottom: 0;
    width: 3px;
    height: 57px;
    background: var(--red);
  }
  .programs__bg { height: auto; padding-bottom: 40px; }
  .programs__cards { grid-template-columns: repeat(2, 1fr); }
  /* align-items:flex-start ужимал ряд по контенту и растягивал страницу */
  .filters { flex-direction: column; align-items: stretch; gap: 14px; }
  .filters__list { width: 100%; min-width: 0; }
  /* плашка ИИ на мобильных — компактная строка, чтобы не съедать экран */
  .ai-bar { width: calc(100vw - 24px); bottom: 12px; gap: 0; }
  .ai-bar__inner {
    width: 100%;
    height: 64px;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 8px 8px 8px 14px;
    gap: 10px;
  }
  .ai-bar__text { display: none; }
  .ai-bar__label {
    width: auto;
    height: 48px;
    padding: 0 14px 0 10px;
    gap: 10px;
    font-size: 17px;
    background: none;
  }
  .ai-bar__label img { width: 24px; height: 24px; }
  .ai-bar__inner .btn--green {
    min-width: 0;
    height: 48px;
    padding: 0 18px;
    font-size: 15px;
  }
  .ai-bar__close {
    position: absolute;
    top: -10px;
    right: -6px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(2, 13, 32, 0.25);
    opacity: 1;
  }
  .branches__grid { flex-direction: column; }
  .branches__left { width: 100%; }
  .branch-card { height: auto; padding-bottom: 24px; }
  /* блок свёрстан под широкую колонку: заголовок 36px, поиск 67px, карточка с
     полями 26/23 — на телефоне это занимало почти весь экран */
  .branches { padding-top: 40px; }
  .branches__title { padding-left: 0; font-size: 28px; }
  .branches__grid { margin-top: 20px; gap: 16px; padding: 0; }
  .branches__search { height: 52px; border-radius: 14px; }
  .branch-card { padding: 18px; border-radius: 14px; }
  .branch-card__name b { font-size: 17px; }
  .branch-card__name img { width: 24px; height: 28px; }
  .branch-card__addr { margin-top: 14px; font-size: 16px; }
  .branch-card__hours { margin-top: 8px; font-size: 14px; }
  .branch-card__note { font-size: 14px; }
  .branch-card .btn { height: 44px; padding: 0 22px; font-size: 15px; }
  .branches__map { border-radius: 18px; }
  .branch-card__bottom { flex-wrap: wrap; gap: 18px; }
  .branches__search { padding: 0 18px; }
  .branches__search input { min-width: 0; font-size: 15px; text-overflow: ellipsis; }
  .branch-card__hours { flex-wrap: wrap; gap: 4px 10px; }
  .branch-card__hours .dot { display: none; }
  .branch-card__note { width: auto; flex: 1 1 100%; }
  .branch-card__bar { display: none; }
  /* в колоночном flex карта схлопывалась — фиксируем высоту */
  .branches__map { flex: none; width: 100%; height: 300px; }
  .ask__wrap { height: auto; }
  .ask__pixels { display: none; }
  .ask__card { position: static; margin: 40px 20px; }
  .ask__content { position: static; padding: 30px; width: auto; }
  .ask__title { white-space: normal; font-size: 44px; }
  .ask__form { width: 100%; max-width: 410px; }
  .ask__photo { display: none; }
  .specialists__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .specialists__title { font-size: 44px; }
  .specialists__slider .swiper-slide { width: 300px; }
  .specialists__nav { display: none; } /* на тач-устройствах листаем свайпом */
  .doctor__photo { height: 380px; }
  .articles__grid { grid-template-columns: repeat(2, 1fr); }
  /* фиксированные 640px растягивали всю страницу на мобильных */
  .contacts__info { width: auto; padding: 24px 0 0; }
  .contacts__bg { padding: 22px; }
  .contacts__cols { gap: 40px; margin-top: 40px; }
  .contacts__bottom { margin-top: 44px; flex-wrap: wrap; gap: 24px; }
  .contacts__cta { width: 100%; }
  .programs__subtitle { width: auto; max-width: 421px; }
  .about__head { flex-wrap: wrap; gap: 12px; }
  .about__gallery-link { margin-top: 0; }
  .aibot__bg { height: auto; padding-bottom: 40px; }
  .aibot__title { font-size: 42px; }
  .aibot__subtitle { width: min(555px, 90%); }
  .aibot__panel { height: auto; }
  .aibot__left { position: static; width: auto; padding: 28px; }
  .aibot__left p { width: auto; }
  .aibot__chat { display: none; }
  .reviews { height: auto; padding: 28px 20px; margin-top: 40px; }
  .reviews__chip, .reviews__quote, .reviews__sub, .reviews__more { position: static; transform: none; display: block; margin: 16px auto; text-align: center; width: auto; }
  .reviews__chip { display: inline-flex; margin-left: 50%; transform: translateX(-50%); }
  .reviews__more { width: fit-content; }
  /* без relative кнопка play улетала за пределы карточки */
  .review-card, .video-card { position: relative; inset: auto; margin: 16px auto; }
  /* в обычном потоке карточке есть куда расти — потолок из коллажа
     тут только резал бы текст */
  .review-card { height: auto; max-height: none; overflow: visible; }
  /* Отступа под плашку ИИ здесь больше нет: она прячется, как только доходим до
     формы «Остались вопросы?», и до подвала уже не доживает — а 92px оставались
     белой полосой под футером на всех страницах. */
  /* мобильная навигация делит подвал на 2 колонки в ряд */
  .footer__cols, .footer__bottom { grid-template-columns: 1fr 1fr; gap: 24px; row-gap: 32px; }
  .footer__dash { display: none; }
  .footer__legal { max-width: none; }
  /* бейдж свёрстан абсолютом под 255×86 — тянуть его нельзя, только оставить как есть */
  .footer__inner { padding: 0 24px; }
  .footer__disclaimer { padding: 20px 0; }
  /* планшет: карточка услуги уже, фото прибора выступает меньше */
  .service-card { width: 300px; }
  .service-card__photo { width: 90%; height: 128%; }
  /* на узкой карточке макетные 30px уводят длинные названия в четвёртую строку */
  .service-card__title { font-size: 24px; }
}

@media (max-width: 659px) {
  /* телефон: логотип, бургер и «Войти» в исходных размерах не помещаются в ряд —
     на 360px кнопка уезжала за правый край. Уменьшаем логотип и кнопку, бургер
     остаётся 44px как тач-цель */
  .header__logo img { width: 78px; height: 27px; }
  .header__badge { padding: 4px 7px; border-radius: 7px; font-size: 11px; }
  .header__login {
    gap: 8px;
    height: 36px;
    padding: 4px 14px 4px 4px;
    font-size: 14px;
  }
  .header__login-circle { width: 28px; height: 28px; }
  .header__login-circle img { width: 9px; height: 9px; }

  /* на узких экранах в плашке ИИ оставляем только иконку + кнопку */
  .ai-bar__label { font-size: 0; padding: 0 4px 0 6px; gap: 0; }
  .ai-bar__label img { width: 26px; height: 26px; }
  .ai-bar__inner .btn--green { font-size: 14px; padding: 0 14px; }

  .hero__title { font-size: 40px; }
  /* заголовки разделов на телефоне — одним кеглем, иначе блоки выглядят
     разнокалиберными: 36px оставался от планшета */
  .about__title, .programs__title, .articles__title, .faq__title, .aibot__title,
  .specialists__title { font-size: 32px; }
  /* «Последние публикации» отбивались от врачей на 122px — на телефоне это
     полтора пустых экрана между блоками */
  .articles { padding-top: 40px; }
  /* Слайды тянутся по самому высокому: у одного врача пять строк специализации,
     и под остальными карточками зияла пустая полоса в полтораста пикселей.
     Ограничиваем подпись — полный текст всё равно на странице врача. */
  .doctor__name, .doctor__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .doctor__name { -webkit-line-clamp: 2; }
  .doctor__desc { -webkit-line-clamp: 3; }
  /* форма «Остались вопросы?»: карточка с полями 30px и заголовком 44px */
  .ask { padding-top: 40px; }
  .ask__card { margin: 24px 16px; }
  .ask__content { padding: 22px; }
  .ask__title { font-size: 32px; }
  .ask__text { margin-top: 14px; }
  .ask__form { margin-top: 24px; }
  /* видео-отзывы кладём по два в ряд: по одному на строку они занимали
     два экрана, а картинке хватает и половины ширины */
  .video-card {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 5px);
    height: auto;
    aspect-ratio: 325 / 220;
    margin: 0;
    border-radius: 14px;
    opacity: 1;
  }
  .video-card__play { right: 10px; bottom: 10px; }
  .video-card__play img { width: 38px; height: 38px; }
  /* цитата — макетные 59px, на телефоне занимала пол-экрана */
  .reviews__quote { font-size: 22px; }
  .reviews__sub { white-space: normal; text-align: center; font-size: 15px; }
  .reviews__more { height: 48px; font-size: 16px; }
  .about__lead { font-size: 20px; }
  /* «О клинике»: внутренние 33px поверх полей контейнера уводили текст на 53px
     от края экрана, а вертикальные отступы держались десктопными */
  .about { padding-top: 40px; }
  .about__head, .about__body { padding-left: 0; padding-right: 0; }
  .about__body { margin-top: 28px; gap: 32px; }
  .about__stats { margin-top: 48px; padding-left: 0; padding-right: 0; }
  .about__stat { padding-top: 56px; }
  /* ИИ-блок свёрстан под широкую подложку: 89px сверху, подзаголовок 20px,
     панель с полями 28 — на телефоне занимал полтора экрана */
  .aibot { padding-top: 40px; }
  .aibot__bg { padding-top: 40px; padding-bottom: 28px; border-radius: 22px; }
  .aibot__subtitle { width: auto; margin-top: 16px; padding: 0 8px; font-size: 16px; }
  .aibot__panel { margin-top: 28px; max-width: calc(100% - 28px); border-radius: 18px; }
  .aibot__left { padding: 20px; }
  .aibot__left h3 { font-size: 24px; }
  .aibot__left p { margin-top: 14px; font-size: 15px; }
  .aibot__upload { margin-top: 20px; width: 100%; height: 46px; font-size: 15px; }
  .programs__cards, .articles__grid { grid-template-columns: 1fr; }

  /* «Программы и услуги»: на телефоне подложка и карточки держали десктопные
     отступы — заголовок стоял в 80px от края блока, а до карточек оставалось 74 */
  .programs { padding-top: 32px; }
  .programs__bg { padding: 40px 0 32px; border-radius: 22px; }
  .programs__subtitle { margin-top: 16px; font-size: 16px; }
  .programs__cards { margin-top: 32px; padding: 0 16px; gap: 16px; }
  /* карточка по высоте контента: кнопка встаёт в поток, а не абсолютом от низа —
     иначе под коротким текстом оставалась пустая полоса в 80px */
  .program-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
  }
  .program-card--photo { min-height: 260px; }
  .program-card__badge { align-self: flex-start; padding: 7px 9px; font-size: 14px; }
  .program-card__title { margin-top: 12px; font-size: 24px; line-height: 1.2; }
  .program-card__text { margin-top: 12px; font-size: 15px; }
  .program-card__btn { position: static; margin-top: 24px; height: 48px; }
  .program-card__caption { left: 20px; right: 20px; bottom: 24px; width: auto; font-size: 28px; }

  .specialists__slider .swiper-slide { width: 260px; }
  .about__stats { grid-template-columns: 1fr; }
  /* блок отбивался от предыдущего на 128px, а у карточек оставались поля
     под десктоп: 42px по бокам и 116px высоты строки */
  .faq { padding-top: 40px; }
  .faq__list { margin-top: 24px; gap: 10px; }
  .faq__item { padding: 0 18px; border-radius: 18px; }
  .faq__item summary { font-size: 17px; min-height: 64px; padding: 14px 0; gap: 14px; }
  .faq__icon, .faq__icon::before, .faq__icon::after { width: 20px; }
  .faq__icon { height: 20px; }
  .faq__item p { font-size: 15px; padding-bottom: 18px; margin-top: -6px; }
  .footer__cols, .footer__bottom { grid-template-columns: 1fr; }
  .contacts__cols { flex-direction: column; gap: 24px; margin-top: 28px; }
  .contacts__bottom { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 28px; }
  /* блок свёрстан под широкую карточку: заголовок 48px, значения 20px и кнопка
     64px на телефоне занимали почти весь экран */
  .contacts__info { padding: 16px 0 0; }
  .contacts__title { margin-top: 16px; font-size: 32px; }
  .contacts__label { font-size: 14px; }
  .contacts__cols a, .contacts__cols p { font-size: 17px; }
  .contacts__addr { width: auto; font-size: 16px; }
  .contacts__cta { height: 52px; font-size: 16px; }
  .contacts__map { height: 320px; }
  /* телефоны — главный CTA, тач-цель должна быть 44px */
  .contacts__cols a { display: flex; align-items: center; min-height: 44px; margin-top: 0; }
  .contacts__label { margin-bottom: 4px; }
  .footer__col a { display: flex; align-items: center; min-height: 44px; margin-top: 0; }
  .footer__legal { font-size: 12px; line-height: 1.45; max-width: none; }
  .footer__bottom { margin-top: 48px; }
  /* телефон: нижняя строка в столбик, бейдж не шире экрана, плашка с меньшими отступами */
  .footer__bottom { row-gap: 28px; }
  .footer__socials { justify-self: start; }
  .footer__license { margin-top: 24px; }
  .footer__inner { padding: 0 16px; }
  .footer__disclaimer { padding: 18px 0; }
  .footer__disclaimer-text { font-size: 12px; }
  /* телефон: карточка услуги уже, фото прибора мешает тексту — скрываем совсем.
     Фото каталога оставляем: текст там и так лежит на плашке */
  .service-card { width: 260px; }
  .service-card__photo { display: none; }
  .service-card--cover .service-card__photo { display: block; }

  /* Содержимое разложено абсолютом под макетные 335×351: на узкой карточке
     от этого оставались пустые полосы, а описание обрезалось многоточием.
     На телефоне ставим всё в поток, «Перейти» прижимаем к низу — слайды в
     ряду и так растягиваются по самому высокому. */
  .service-card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 20px;
  }
  .service-card__icon {
    position: static;
    margin-bottom: 14px;
  }
  .service-card__title {
    position: static;
    width: auto;
    max-width: none;
    margin-bottom: 10px;
  }
  .service-card__text {
    position: static;
    width: auto;
    max-width: none;
    -webkit-line-clamp: 8;
  }
  .service-card__link {
    position: static;
    margin-top: auto;
    padding-top: 20px;
  }
  .service-card__hit { top: 20px; right: 20px; }
}

/* Самые узкие телефоны (320px): шапке не хватает места даже после уменьшения —
   поджимаем логотип и боковые поля ещё немного, иначе страница едет вбок. */
@media (max-width: 359px) {
  .header { padding-left: 16px; padding-right: 16px; }
  .header__logo img { width: 68px; height: 24px; }
  .header__badge { padding: 3px 6px; font-size: 10px; }
  /* карточки отзывов свёрстаны в фиксированные 325px — на 320px они и тянули
     страницу вбок */
  .review-card, .video-card { max-width: 100%; }
}