/* ==========================================================
    Переменные — сюда выносим все отступы
    ========================================================== */
:root {
    /* clamp(минимум, "предпочитаемое" значение, максимум) —
    предпочитаемое — это calc(база + доля от ширины окна), поэтому
    значение плавно едет между минимумом и максимумом при ресайзе,
    а не переключается скачками по media-запросам.
    Отступы/зазоры/скругления — в rem (масштабируются вместе с
    пользовательскими настройками размера шрифта в браузере).
    Ширины/брейкпоинт-привязанные величины — в px (физическая
    привязка к экрану, не к типографике). */
    --block-padding-x: clamp(
        0.75rem,
        calc(0.75rem + 1.5vw),
        1.5rem
    ); /* горизонтальный паддинг блока-контейнера */
    --block-padding-y: clamp(
        0.75rem,
        calc(0.75rem + 1.5vw),
        1.5rem
    ); /* вертикальный паддинг блока-контейнера */
    --block-gap: clamp(
        0.75rem,
        calc(0.5rem + 1.5vw),
        1.5rem
    ); /* расстояние между дочерними блоками */
    --child-min-width: 320px; /* минимальная ширина дочернего блока */
    --arrow-size: 2.5rem; /* размер кнопок-стрелок */
    --peek-width: 48px; /* сколько от следующего блока видно справа */
    --carousel-item-max-width: 480px; /* максимальная ширина одного блока в карусели */
    --item-direction: column; /* направление содержимого внутри blocks__item: column (верт.) или row (гориз.) */
    --item-bg: #ffffff; /* фон дочерних blocks__item, наследуется от родителя .blocks */
    --item-radius: 0.75rem; /* скругление углов blocks__item, наследуется от родителя .blocks */
    --container-max-width: 1848px; /* максимальная ширина классического container */
    --badge-radius: 1.25rem; /* скругление углов у плашки-бейджа на фото */
    --badge-bg: #EF7C00; /* фон плашки-бейджа на фото */
}

html {
    font-size: 16px; /* база для rem: 1rem = 16px, если пользователь не менял масштаб в браузере */
    overflow-x: hidden; /* 100vw у .row--full/.col--full считает ширину
                        ВМЕСТЕ со скроллбаром, из-за чего трюк с
                        отрицательными полями промахивается на его
                        толщину и иначе рождает горизонтальный скролл */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /*font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;*/
    font-family: "Montserrat", sans-serif;
    background: #ffffff;
    color: #18181b;
}

a {
    color: #004C86;
}

/* горизонтальный отступ у заголовков и блоков больше не задаём
    здесь — его даёт .container (padding-inline), который теперь
    оборачивает вообще весь контент на странице. Раньше h2/.blocks
    добавляли ещё и свой паддинг поверх, из-за чего секции без
    .blocks (row/col-демо, row--full) визуально оказывались шире */

/* ==========================================================
    Блок: container / row / col
    Классическая обвязка (в духе Bootstrap), но на flexbox
    и с теми же переменными паддинга/зазора, что и остальной файл
    ========================================================== */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--block-padding-x);
}

.row {
    display: flex;
    flex-wrap: wrap;
    /* gap вместо отрицательных полей + padding на col — так .row
    физически не может стать шире родителя, никакой балансировки
    между --block-gap и --block-padding-x не требуется */
    gap: var(--block-gap);
}

/* отступ между соседними .row — gap внутри .row разводит только
    колонки в одной строке, между отдельными .row нужен свой margin */
.row + .row {
    margin-top: var(--block-gap);
}

/* ----------------------------------------------------------
    Модификатор --full
    Растягивает элемент на всю ширину экрана независимо от того,
    насколько узок родительский .container. Работает даже если
    сам .container находится глубоко внутри других контейнеров —
    трюк не завязан на конкретную ширину родителя.
    Само содержимое внутрь кладите в обычный .container — так оно
    останется ограничено --container-max-width и отцентровано.
    ---------------------------------------------------------- */
.row--full,
.col--full {
    --section-bg: transparent; /* цвет подложки, переопределяется инлайн-стилем: style="--section-bg: #2563eb" */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--section-bg);
}

/* ----------------------------------------------------------
    Модификатор --full-mobile
    Как --full, но пробивает .container только на смартфоне.
    На десктопе ведёт себя как обычный блок — занимает ширину
    той колонки, в которую его положили (например .col-6) —
    удобно, когда один и тот же блок на десктопе стоит рядом с
    другим блоком в колонке, а на мобильном должен стать полноэкранным
    ---------------------------------------------------------- */
.row--full-mobile {
    --section-bg: transparent;
    background: var(--section-bg);
    padding-inline: var(--block-padding-x);
    border-radius: 24px;
}

@media (max-width: 47.9375em) {
    .row--full-mobile {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
    }
}

.col {
    flex: 1 1 0%;
    min-width: 0;
}

/* фиксированные доли классической 12-колоночной сетки.
    calc() вычитает долю общего gap, приходящуюся на этот col,
    чтобы сумма долей + все gap ровно укладывались в 100% .row —
    без этого при gap колонки с процентной шириной вылезли бы
    за пределы строки */
.col-1 {
    flex: 0 0 calc(8.3333% - var(--block-gap) * 11 / 12);
    max-width: calc(8.3333% - var(--block-gap) * 11 / 12);
}
.col-2 {
    flex: 0 0 calc(16.6667% - var(--block-gap) * 10 / 12);
    max-width: calc(16.6667% - var(--block-gap) * 10 / 12);
}
.col-3 {
    flex: 0 0 calc(25% - var(--block-gap) * 9 / 12);
    max-width: calc(25% - var(--block-gap) * 9 / 12);
}
.col-4 {
    flex: 0 0 calc(33.3333% - var(--block-gap) * 8 / 12);
    max-width: calc(33.3333% - var(--block-gap) * 8 / 12);
}
.col-5 {
    flex: 0 0 calc(41.6667% - var(--block-gap) * 7 / 12);
    max-width: calc(41.6667% - var(--block-gap) * 7 / 12);
}
.col-6 {
    flex: 0 0 calc(50% - var(--block-gap) * 6 / 12);
    max-width: calc(50% - var(--block-gap) * 6 / 12);
}
.col-7 {
    flex: 0 0 calc(58.3333% - var(--block-gap) * 5 / 12);
    max-width: calc(58.3333% - var(--block-gap) * 5 / 12);
}
.col-8 {
    flex: 0 0 calc(66.6667% - var(--block-gap) * 4 / 12);
    max-width: calc(66.6667% - var(--block-gap) * 4 / 12);
}
.col-9 {
    flex: 0 0 calc(75% - var(--block-gap) * 3 / 12);
    max-width: calc(75% - var(--block-gap) * 3 / 12);
}
.col-10 {
    flex: 0 0 calc(83.3333% - var(--block-gap) * 2 / 12);
    max-width: calc(83.3333% - var(--block-gap) * 2 / 12);
}
.col-11 {
    flex: 0 0 calc(91.6667% - var(--block-gap) * 1 / 12);
    max-width: calc(91.6667% - var(--block-gap) * 1 / 12);
}
.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (max-width: 47.9375em) {
    .col[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* #second — декоративное SVG-изображение (370px) в третьей колонке
    на смартфоне не помещается и скрывается */
@media (max-width: 47.9375em) {
    .second__logo {
        display: none;
    }
}

/* ==========================================================
    Блок: text
    Просто текст (без карточек) — заголовок + абзацы, ограниченные
    удобной для чтения шириной строки. Стили ниже покрывают все
    часто используемые типографические теги внутри .text
    ========================================================== */
.text {
    max-width: 65ch; /* примерно 65 символов в строке — комфортно для чтения */
    padding-block: var(--block-padding-y);
    line-height: 1.6;
}

.text > *:first-child {
    margin-top: 0;
}
.text > *:last-child {
    margin-bottom: 0;
}

.text h1 {
    font-size: clamp(1.625rem, calc(1.5rem + 0.55556vw), 2rem);
    line-height: 1.2;
    font-weight: 700;
    margin: 1.2em 0 0.6em;
}
.text h2 {
    font-size: clamp(2.125rem, calc(1.91667rem + 0.92593vw), 2.75rem);
    color: #004c86;
    line-height: 1.25;
    font-weight: 700;
    margin: 1.1em 0 0.6em;
}
.text h3 {
    font-size: clamp(1.1875rem, calc(1.125rem + 0.27778vw), 1.375rem);
    line-height: 1.3;
    font-weight: 600;
    margin: 1em 0 0.5em;
}
.text h4 {
    font-size: clamp(1rem, calc(0.95833rem + 0.18519vw), 1.125rem);
    line-height: 1.4;
    font-weight: 600;
    margin: 1em 0 0.5em;
}
.text h5 {
    font-size: clamp(0.9375rem, calc(0.91667rem + 0.09259vw), 1rem);
    line-height: 1.4;
    font-weight: 600;
    margin: 1em 0 0.4em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.text h6 {
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 600;
    margin: 1em 0 0.4em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #71717a;
}

.text p {
    margin: 0 0 1em;
}

.text a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.text a:hover {
    opacity: 0.8;
}

.text b,
.text strong {
    font-weight: 700;
}
.text i,
.text em {
    font-style: italic;
}
.text small {
    font-size: 0.85em;
    color: #71717a;
}
.text mark {
    background: #fef08a;
    padding: 0 0.2em;
    border-radius: 2px;
}
.text del {
    text-decoration: line-through;
    opacity: 0.6;
}

.text ul,
.text ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}
.text li {
    margin-bottom: 0.25em;
}
.text li:last-child {
    margin-bottom: 0;
}

.text blockquote {
    margin: 0 0 1em;
    padding-left: 1em;
    border-left: 3px solid #e4e4e7;
    color: #52525b;
    font-style: italic;
}

.text code {
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: #f4f4f5;
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

.text pre {
    margin: 0 0 1em;
    padding: 1em;
    background: #18181b;
    color: #f4f4f5;
    border-radius: 8px;
    overflow-x: auto;
}
.text pre code {
    background: none;
    padding: 0;
}

.text hr {
    border: none;
    border-top: 1px solid #e4e4e7;
    margin: 1.5em 0;
}

.text picture,
.text img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.5em 0 1em;
}

/* модификатор для текста поверх цветной подложки (--section-bg) */
.text--invert {
    color: #fff;
}
.text--invert h1,
.text--invert h2,
.text--invert h3,
.text--invert h4,
.text--invert h5,
.text--invert h6 {
    color: #fff;
}
.text--invert h6 {
    color: #d4d4d8;
}
.text--invert a {
    color: #93c5fd;
}
.text--invert blockquote {
    border-left-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.75);
}
.text--invert code {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.text--invert hr {
    border-top-color: rgba(255, 255, 255, 0.25);
}

/* ==========================================================
    Блок: topbar
    Тонкая полоса над основной шапкой: 3 колонки grid — бургер
    + адрес слева, соцсети + телефон по центру, кнопка записи
    справа. #topbar (.row--full) отвечает только за full-bleed
    ширину; фон — на вложенном .topbar-wrap через --section-bg
    (тот же приём, что и у .footer-wrap)
    ========================================================== */
.topbar-wrap {
    --section-bg: transparent;
    background: var(--section-bg);
    border-radius: 0 0 24px 24px;
}

.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    padding-block: 0.625rem;
    color: #fff;
    padding-inline: var(--block-padding-x);
}

.topbar__start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    justify-self: start;
}

.topbar__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    justify-self: center;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
}

.topbar__item:hover {
    color: #fff;
}

.topbar__icon {
    flex-shrink: 0;
    width: 35px;
    height: 36px;
}

/* иконки соцсетей в круглом ободке — цвет вынесен в переменные,
    чтобы стилизацию (в т.ч. hover) можно было менять отдельно,
    не трогая разметку и остальную логику */
.topbar__socials {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar__social {
    --social-color: rgba(255, 255, 255, 0.75);
    --social-color-hover: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--social-color);
    color: var(--social-color);
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.topbar__social:hover {
    color: var(--social-color-hover);
    border-color: var(--social-color-hover);
}

/* цвет самих иконок задан через fill в разметке (не currentColor),
    поэтому дефолт трогать не нужно — переопределяем только на hover */
.topbar__social svg path {
    transition: fill 0.15s ease;
}
.topbar__social:hover svg path {
    fill: var(--social-color-hover);
}

/* .topbar__social svg {
    width: 1rem;
    height: 1rem;
} */

/* бургер — виден только на смартфоне (на десктопе меню и так
    развёрнуто), три полоски анимируются в крестик через :checked
    у чекбокса-состояния (без JS, тот же приём, что и у попапа) */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
}

.burger__bar {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

/* сам чекбокс визуально скрыт, но остаётся в DOM и в табе —
    иначе бургер был бы недоступен с клавиатуры */
.menu-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#menu-toggle:checked ~ .row--full .burger__bar:nth-child(1) {
    transform: translateY(0.5rem) rotate(45deg);
}
#menu-toggle:checked ~ .row--full .burger__bar:nth-child(2) {
    opacity: 0;
}
#menu-toggle:checked ~ .row--full .burger__bar:nth-child(3) {
    transform: translateY(-0.5rem) rotate(-45deg);
}
#menu-toggle:focus-visible ~ .row--full .burger {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 63.9375em) {
    .burger {
        display: flex;
    }
    .topbar__address,
    .topbar__socials {
        display: none;
    } /* на смартфоне остаются
                                        только бургер, телефон
                                        и кнопка */
}

.topbar__button {
    background-color: #CD2D9A;
    justify-self: end;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 0.3125rem 0.75rem;
    color: #fff;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 400;
    cursor: pointer;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.topbar__button:hover {
    opacity: 0.9;
}
.topbar__button:active {
    transform: scale(0.96);
}

/* ==========================================================
    Блок: modal
    Универсальный вызов без единой строчки JS — на HTML Popover
    API (атрибуты popover / popovertarget). Браузер сам берёт на
    себя открытие/закрытие, backdrop, закрытие по клику вовне и
    по Esc — это всё встроено в браузер, не наша логика
    ========================================================== */
[popover] {
    margin: auto; /* центрирование — но это и так поведение по
                    умолчанию у popover, дублируем для ясности */
    border: none;
    padding: 0;
    /* лёгкая анимация появления/исчезновения — тоже чистый CSS,
    через @starting-style, без JS */
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;
}

[popover]:popover-open {
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    [popover]:popover-open {
        opacity: 0;
        transform: scale(0.96);
    }
}

[popover]::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.modal {
    position: relative;
    width: min(90vw, 26rem);
    padding: 1.75rem;
    background: #fff;
    border-radius: var(--item-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #71717a;
    font-size: clamp(1.0625rem, calc(1rem + 0.27778vw), 1.25rem);
    line-height: 1;
    cursor: pointer;
}

.modal__close:hover {
    background: #f4f4f5;
}

.modal__title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.0625rem, calc(1rem + 0.27778vw), 1.25rem);
    font-weight: 700;
    padding-right: 1.5rem; /* не наезжать на крестик закрытия */
}

.modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.modal__field input {
    padding: 0.65rem 0.85rem;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
    font: inherit;
}

.modal__field input:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.modal__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #52525b;
}

.modal__consent input {
    margin-top: 0.2em;
    flex-shrink: 0;
}

.modal__submit {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.modal__submit:hover {
    opacity: 0.9;
}

/* скрытое сообщение "мы вам перезвоним" — заготовка под успешную
    отправку. Без бэкенда/JS переключить его на реальном сабмите
    нечем, поэтому оставлено скрытым (атрибут hidden) — когда форма
    будет подключена, достаточно снять hidden у этого блока и
    спрятать .modal__form (например, ответом сервера или парой
    строк JS, если он всё же появится в проекте) */
.modal__success {
    text-align: center;
    padding: 1rem 0;
}

/* ==========================================================
    Блок: heading
    Заголовок h2 слева + ссылка справа, прижатая к нижнему краю
    блока (а не к центру по высоте заголовка). Ссылка — обычным
    текстовым размером и цветом, а не масштабом заголовка.
    Никакой медиа-скрывающей логики нет специально — ссылка
    остаётся видимой и на смартфоне
    ========================================================== */
.heading {
    display: flex;
    align-items: flex-end; /* именно нижний край, не центр */
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.heading__title {
    margin: 0;
    font-size: 38px;
    line-height: 44px;
}

.heading__link {
    flex-shrink: 0;
    font-size: clamp(0.875rem, calc(0.85417rem + 0.09259vw), 0.9375rem); /* обычный текстовый размер, не заголовочный */
    font-weight: 400;
    color: #4D82AA;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.heading__link:hover {
    opacity: 0.8;
}

/* ==========================================================
    Блок: nav
    Шапка: логотип слева, меню с выпадающими подменю второго
    уровня справа. На смартфоне меню скрывается — остаётся
    только отцентрованный логотип
    ========================================================== */
.nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--block-padding-y);
}

.nav__logo {
    /*flex-shrink: 0;*/
    flex: 0 1 595px;
    width: 595px;
}

.nav__logo .logo {
    --logo-accent: #0057b8;
    --logo-text: #000;
}

.logo {
    display: block;
    width: 100%;
    height: unset;
    aspect-ratio: 595 / 118;
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.5em 0;
    color: inherit;
    text-decoration: none;
    font-size: clamp(1.0625rem, calc(1rem + 0.27778vw), 1.25rem);
    border-bottom: 2px solid transparent;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.nav__link:hover {
    color: #2563eb;
}

/* активный пункт меню */
.nav__link.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

/* маленькая стрелочка у пунктов с подменю, разворачивается при открытии */
.nav__item--has-submenu > .nav__link::after {
    display: none; /* временно скрыта */
    content: "";
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.1em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.nav__item--has-submenu:hover > .nav__link::after,
.nav__item--has-submenu:focus-within > .nav__link::after {
    transform: rotate(225deg);
}

/* подменю второго уровня — по ховеру и по фокусу (клавиатура) */
.nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-top: 5px solid #CD2D9A;
    border-radius: var(--item-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s;
    z-index: 10;
}

.nav__item--has-submenu:hover > .nav__submenu,
.nav__item--has-submenu:focus-within > .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__submenu-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #004C86;
    color: inherit;
    text-decoration: none;
    font-size: clamp(1.0625rem, calc(1rem + 0.27778vw), 1.25rem);
    white-space: nowrap;
}

.nav__submenu-link:hover {
    background: #f4f4f5;
}

.nav__submenu-link.is-active {
    color: #2563eb;
    font-weight: 600;
}

@media (max-width: 63.9375em) {
    .nav {
        justify-content: center; /* меню скрыто — логотип остаётся
                                единственным элементом и центруется */
    }
    .nav__menu {
        display: none;
    }

    /* бургер лежит в topbar выше по странице, но чекбокс-состояние —
    первый элемент body, поэтому общий сосед (~) достаёт и досюда */
    #menu-toggle:checked ~ .container .nav__menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0.5rem;
        background: #fff;
        border: 1px solid #e4e4e7;
        border-top: none;
        border-radius: 0 0 var(--item-radius) var(--item-radius);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
        z-index: 20;
    }

    .nav__item {
        width: 100%;
    }

    .nav__link {
        width: 100%;
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid #e4e4e7;
    }

    /* без JS открыть подменю по тапу негде — проще держать его
    всегда развёрнутым внутри мобильного меню, чем городить
    accordion на чекбоксах ради каждого пункта */
    .nav__item--has-submenu > .nav__link::after {
        display: none;
    }

    .nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: 0 0 0.5rem;
        padding: 0 0 0 1rem;
        border: none;
        box-shadow: none;
    }

    .nav__submenu-link {
        padding: 0.5rem;
    }
}

/* ==========================================================
    Блок: hero
    Большая фотография в пределах ширины .container, слева
    поверх неё — колонка с текстом (~50% на десктопе). Затемнение
    (.hero__overlay) нужно для читаемости белого текста поверх
    фото — не завязано на конкретную картинку
    ========================================================== */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(24rem, 60vw, 34rem);
    color: #fff;
    border-radius: 24px;
    padding: clamp(20px, 5vw, 70px);
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.72) 0%,
        rgba(15, 23, 42, 0.5) 45%,
        rgba(15, 23, 42, 0.05) 85%
    );
    z-index: 1;
}

.hero__col {
    position: relative;
    z-index: 2;
    max-width: 100%;
}

@media (min-width: 48em) {
    .hero__col {
        max-width: calc(50% - var(--block-gap) / 2);
    }
}

.hero__title {
    margin: 0 0 2.9375rem;
    /* font-size: clamp(2.125rem, calc(1.91667rem + 0.92593vw), 2.75rem); */
    font-size: clamp(3.5rem, 4.375vw + 2.625rem, 4.5rem); /* или в px через calc */
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
}

.hero__desc {
    margin: 0 0 3.75rem;
    max-width: 50ch;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-size: 1.25rem;
}

.hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 0 0 3.4375rem;
    padding: 0;
    list-style: none;
}

.hero__feature {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.875rem, calc(0.85417rem + 0.09259vw), 0.9375rem);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.hero__feature-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    fill: #ffb554;
}

.consultation__benefit-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    fill: #ffb554;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    font: inherit;
    font-size: clamp(0.9375rem, calc(0.91667rem + 0.09259vw), 1rem);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.hero__button--primary {
    background: #cd2d9a;
    color: #fff;
}
.hero__button--primary:hover {
    opacity: 0.9;
}

.hero__button--secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.hero__button--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================
    Блок: blocks
    ========================================================== */
.blocks {
    display: flex;
    padding-block: var(
        --block-padding-y
    ); /* горизонтальный отступ теперь
                                            только у .container, чтобы
                                            не задваивался */
    gap: var(--block-gap);
}

/* карточка: направление задаётся переменной --item-direction —
    наследуется от родительского .blocks, можно переопределить на нём же */
.blocks__item {
    position: relative; /* точка отсчёта для растянутой ссылки */
    min-width: var(--child-min-width);
    max-width: 100%; /* страховка от раздувания карточки по контенту —
                        без этого width:100% у картинки внутри мог
                        откатиться на её интринзивный (реальный) размер
                        и вытолкнуть карточку за пределы строки */
    flex: 0 0 auto;
    display: flex;
    flex-direction: var(--item-direction);
    background: var(--item-bg);
    border-radius: var(--item-radius);
    overflow: hidden;
}

.blocks__image {
    display: block;
    width: 100%;
    aspect-ratio: var(--image-ratio, 1 / 1);
    object-fit: cover;
}

.blocks--choice .blocks__image {
    border-radius: var(--item-radius);
}

.blocks--personal .blocks__image {
    aspect-ratio: auto; width: 100%; height: auto;
    border: 1px solid #004C86;
    border-radius: 24px;
}
.blocks--equipment {
    --item-radius: 24px;
}
.blocks--equipment .blocks__title {
    font-size: 24px;
}
.blocks--equipment.blocks--row .blocks__media {
    padding: 0 30px;
    height: 245px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.blocks--equipment.blocks--row .blocks__media picture {
    display: block;
    width: 100%;
    max-width: 320px;
}
.blocks--equipment.blocks--row .blocks__image {
    display: block;
    width: 260px;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
    flex: none;
    align-self: auto;
}

/* обёртка вокруг картинки — нужна как точка отсчёта для бейджа,
    позиционируемого именно поверх фото, а не поверх всей карточки */
.blocks__media {
    position: relative;
}

.blocks__badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    font-size: clamp(0.9375rem, calc(0.91667rem + 0.09259vw), 1rem);
    padding: 0.4em 0.75em;
    color: #fff;
    background: var(--badge-bg);
    border-radius: var(--badge-radius);
}

/* ----------------------------------------------------------
    Модификатор blocks__item--framed-media
    Рамка есть только у фото, у самой карточки — нет
    ---------------------------------------------------------- */
.blocks__item--framed-media {
    border: none;
}

.blocks__item--framed-media .blocks__image {
    border: 1px solid #e4e4e7;
    border-radius: var(--item-radius);
}

.blocks__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* заполняет остаток высоты карточки — нужно,
                    чтобы прижатый к низу текст (.blocks__meta)
                    реально держался за нижний край, а не просто
                    шёл сразу за описанием */
    gap: clamp(0.25rem, calc(0.125rem + 0.5vw), 0.5rem);
    /* --body-padding-y/--body-padding-x — переопределяются на
        конкретном .blocks или .blocks__item инлайн-стилем, когда
        карточкам блока не нужен горизонтальный отступ текста
        (например style="--body-padding-x: 0") */
    padding: var(
            --body-padding-y,
            clamp(0.75rem, calc(0.5rem + 1.5vw), 1.25rem)
        )
        var(
            --body-padding-x,
            clamp(1rem, calc(0.75rem + 1.5vw), 1.25rem)
        );
}

/* текст, прижатый к нижнему краю карточки — отдельный от описания,
    держится внизу независимо от длины заголовка/описания над ним */
.blocks__meta {
    border-top: 1px dotted #004C86;
    margin-top: auto;
    margin-bottom: 0;
    min-height: 45px;
    padding-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #004c86;
}

.blocks__title {
    margin: 0;
    font-size: clamp(0.9375rem, calc(0.91667rem + 0.09259vw), 1rem);
    font-weight: 600;
}

/* ссылка живёт на заголовке (осмысленный текст для скринридеров),
    а ::after растягивает кликабельную область на всю карточку */
.blocks__link {
    font-size: clamp(1.25rem, calc(1.125rem + 0.55556vw), 1.625rem);
    font-weight: 600;
    color: #004c86;
    line-height: 1.875rem;
    text-decoration: none;
}

.blocks__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* если внутри карточки есть свои интерактивные элементы (кнопка,
    ещё одна ссылка) — поднимаем их над растянутой ссылкой */
.blocks__item a:not(.blocks__link),
.blocks__item button {
    position: relative;
    z-index: 1;
}

.blocks__text {
    margin: 0;
    font-size: clamp(0.875rem, calc(0.83333rem + 0.18519vw), 1rem);
    color: #000000;
    line-height: 1.4;
}

.blocks__info {
    color: #004C86;
    font-size: clamp(0.875rem, calc(0.83333rem + 0.18519vw), 1rem);
    line-height: 24px;
    margin: auto 0 0;
}

/* ----------------------------------------------------------
    Модификатор blocks--row
    Разворачивает содержимое каждой карточки горизонтально:
    картинка слева, текст справа (по умолчанию — column, картинка сверху)
    ---------------------------------------------------------- */
.blocks--row {
    --item-direction: row;
}

.blocks--row .blocks__image {
    width: 140px;
    height: auto;
    flex: 0 0 140px;
    align-self: stretch;
}

.blocks--row .blocks__body {
    padding: 1rem 1.25rem;
    justify-content: center;
}

/* ----------------------------------------------------------
    Модификатор blocks--stack
    На смартфоне дети складываются в вертикаль (по умолчанию — горизонтально)
    ---------------------------------------------------------- */
.blocks--stack {
    flex-wrap: wrap;
}

@media (max-width: 47.9375em) {
    .blocks--stack {
        flex-direction: column;
    }
    .blocks--stack .blocks__item {
        min-width: 0;
        width: 100%;
    }
}

/* ----------------------------------------------------------
    Модификатор blocks--cols
    Задаёт число блоков в строке на десктопе через переменную --cols
    и зазор между ними через --gap
    (ставятся инлайново на элемент: style="--cols: 4; --gap: 24px")
    Ни на что не влияет на смартфоне — там всё равно решает blocks--stack
    ---------------------------------------------------------- */
.blocks--cols {
    --cols: 3; /* значение по умолчанию, переопределяется инлайн-стилем */
    --gap: var(
        --block-gap
    ); /* зазор для этого конкретного блока, тоже переопределяется инлайн-стилем */
    gap: var(--gap);
}

/* на планшете держим фиксированные 3 в ряд независимо от
    --cols — на этой ширине 4-5 колонок (как задано в разметке
    ряда секций) смотрятся слишком тесно. Настоящее --cols
    включается только с полноценного десктопа (75em) */
@media (min-width: 48em) and (max-width: 74.9375em) {
    .blocks--cols .blocks__item {
        min-width: 0;
        flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
    }
}

@media (min-width: 75em) {
    .blocks--cols .blocks__item {
        min-width: 0;
        flex: 0 0
            calc(
                (100% - (var(--cols) - 1) * var(--gap)) /
                    var(--cols)
            );
    }
}

/* ----------------------------------------------------------
    Модификатор blocks--carousel
    Всегда горизонтально, overflow: hidden + прокрутка стрелками
    (сама лента; шапка и стрелки — отдельный блок carousel ниже)
    ---------------------------------------------------------- */
.carousel {
    max-width: 100%;
}

.carousel__body {
    position: relative;
    max-width: 100%;
}

.blocks--carousel {
    --carousel-item-width: calc(
        100% - var(--peek-width) - var(--block-gap)
    ); /* переопределяется инлайн-стилем: style="--carousel-item-width: 300px" */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    /* стрелки анимируют scrollLeft сами (свой ease-out в JS) —
    scroll-behavior: smooth тут не нужен и мог бы конфликтовать
    с ручной анимацией. Свайп/колесо мыши остаются нативными. */
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.blocks--carousel::-webkit-scrollbar {
    display: none;
}

/* ширина блока = ширина видимой области минус "выглядывающий" кусок
    следующего блока справа; min-width остаётся страховкой снизу */
.blocks--carousel .blocks__item {
    flex: 0 0 auto;
    width: var(--carousel-item-width);
    max-width: var(--carousel-item-max-width);
    scroll-snap-align: start;
}

/* лёгкое "оживление" прокрутки: карточка проявляется и чуть
    увеличивается, пока въезжает в видимую область слева/справа —
    завязано на сам скролл (CSS scroll-driven animation), без JS.
    Там, где браузер не поддерживает animation-timeline, карточки
    просто остаются как есть — деградация полностью безопасна */
@supports (animation-timeline: view()) {
    .blocks--carousel .blocks__item {
        animation: carousel-pop-in linear both;
        animation-timeline: view(inline);
        animation-range: entry 0% cover 35%;
    }
}

@keyframes carousel-pop-in {
    from {
        opacity: 0.45;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ----------------------------------------------------------
    Модификатор blocks--carousel-mobile
    Наоборот: на десктопе — обычная сетка (перенос строк),
    и только на смартфоне превращается в слайдер (как
    .blocks--carousel выше). Удобно сочетать с .blocks--cols —
    их брейкпоинты не пересекаются (--cols живёт от 48em,
    слайдер-режим — только до 47.9375em)
    ---------------------------------------------------------- */
.blocks--carousel-mobile {
    flex-wrap: wrap; /* десктоп: обычный перенос строк, как у blocks--stack */
}

@media (max-width: 47.9375em) {
    .blocks--carousel-mobile {
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .blocks--carousel-mobile::-webkit-scrollbar {
        display: none;
    }

    .blocks--carousel-mobile .blocks__item {
        flex: 0 0 auto;
        width: var(
            --carousel-item-width,
            calc(100% - var(--peek-width) - var(--block-gap))
        );
        max-width: var(--carousel-item-max-width);
        scroll-snap-align: start;
    }

    @supports (animation-timeline: view()) {
        .blocks--carousel-mobile .blocks__item {
            animation: carousel-pop-in linear both;
            animation-timeline: view(inline);
            animation-range: entry 0% cover 35%;
        }
    }
}

/* ==========================================================
    Блок: carousel
    Обвязка вокруг blocks--carousel: заголовок + стрелки сверху
    ========================================================== */
.carousel__header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.carousel__title {
    padding: 0;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* по умолчанию стрелки видны — так надёжнее (работает даже если JS
    ещё не отработал/недоступен). JS сам скрывает их, когда блоки
    помещаются целиком и скролл не нужен */
.carousel__controls {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.carousel__controls.is-hidden {
    display: none;
}

.carousel__arrow {
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-radius: 50%;
    border: none;
    background: #18181b;
    color: #fff;
    font-size: clamp(1rem, calc(0.95833rem + 0.18519vw), 1.125rem);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition:
        opacity 0.2s ease,
        transform 0.15s ease;
}
.carousel__arrow:hover {
    opacity: 0.85;
    transform: scale(1.08);
}
.carousel__arrow:active:not([disabled]) {
    transform: scale(0.88);
}
.carousel__arrow[disabled] {
    opacity: 0.25;
    cursor: default;
}

/* ==========================================================
    Блок: footer
    #footer — просто .container, ограничивающий ширину секции;
    .footer-wrap внутри него — синяя карточка (фон через --section-bg,
    скругление верхних углов) с декоративной картинкой в правом
    верхнем углу. Порядок блоков задаётся через
    flex order — на десктопе логотип и меню делят одну строку
    (40%/60%), на смартфоне у них разный порядок относительно
    контактов, поэтому просто верстка друг под другом не подходит
    ========================================================== */
.footer-wrap {
    --section-bg: transparent;
    position: relative;
    isolation: isolate;
    background: var(--section-bg);
    border-radius: 24px 24px 0 0;
    overflow: hidden; /* декоративная картинка и скругление верхних
                        углов не должны вызывать горизонтальный скролл */
}

.footer-wrap__decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 45%;
    height: auto;
    aspect-ratio: 448 / 306;
    opacity: 0.25;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-gap);
    color: #fff;
}

.footer .logo {
    --logo-accent: #fff;
    --logo-text: #fff;
    max-width: 595px;
}

/* мобильно-first: по умолчанию каждый блок на всю ширину —
    это уже и есть нужная мобильная раскладка, ничего специально
    переопределять для смартфона не пришлось */
.footer > * {
    flex: 0 0 100%;
    max-width: 100%;
}

.footer__text {
    order: 1;
}
.footer__logo {
    order: 2;
}
.footer__menu {
    order: 3;
}
.footer__contacts {
    order: 4;
}
.footer__legal {
    order: 5;
}

@media (min-width: 64em) {
    /* у футера свой, более широкий порог, чем у остальной страницы —
        логотип (40%) + меню из 4 колонок (60%) не помещаются на
        ширине планшета (48em), поэтому здесь сброс в горизонталь
        происходит позже, уже на полноценном десктопе */
    .footer__logo {
    flex: 0 0 calc(40% - var(--block-gap) / 2);
    max-width: calc(40% - var(--block-gap) / 2);
    }
    .footer__menu {
    flex: 0 0 calc(60% - var(--block-gap) / 2);
    max-width: calc(60% - var(--block-gap) / 2);
    }
}

@media (min-width: 48em) and (max-width: 63.9375em) {
    /* промежуточный, планшетный вариант: логотип и контакты делят
        одну строку, меню — отдельной строкой на всю ширину под ними.
        Текст (order: 1) всё равно остаётся сверху при любой ширине */
    .footer__logo,
    .footer__contacts {
    flex: 0 0 calc(50% - var(--block-gap) / 2);
    max-width: calc(50% - var(--block-gap) / 2);
    }
}

@media (max-width: 63.9375em) {
    /* до 64em контакты идут раньше меню — порядок отличается
        от десктопного (там меню сразу после логотипа, в одной строке) */
    .footer__contacts { order: 3; }
    .footer__menu { order: 4; }
}

.footer__text p {
    margin: 0;
    /*max-width: 60ch;*/
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.footer__logo-link {
    /*display: inline-block;*/
    font-size: clamp(1.25rem, calc(1.16667rem + 0.37037vw), 1.5rem);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.footer__menu-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-gap);
}

.footer__menu-group {
    min-width: 0;
    flex: 0 0 calc(50% - var(--block-gap) / 2);
    max-width: calc(50% - var(--block-gap) / 2);
}

@media (min-width: 48em) {
    .footer__menu-group {
        flex: 0 0 calc(25% - var(--block-gap) * 3 / 4);
        max-width: calc(25% - var(--block-gap) * 3 / 4);
    }
}

.footer__menu-title {
    margin: 0 0 0.75rem;
    font-size: clamp(0.875rem, calc(0.85417rem + 0.09259vw), 0.9375rem);
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.footer__menu-list {
    display: flex;
    flex-direction: column;
    /* gap: 0.5rem; */
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__menu-list a {
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
}

.footer__menu-list a:hover { color: #fff; }

.footer__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: clamp(0.875rem, calc(0.85417rem + 0.09259vw), 0.9375rem);
}

.footer__contact-item:hover {
    color: #fff;
}

.footer__contact-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: var(--block-padding-y);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================
    Блок: promo
    Двухколоночный блок на всю ширину .container: слева форма,
    справа текст + значки. Порядок в DOM (форма → контент) сразу
    даёт нужную раскладку и на десктопе (форма слева), и на
    смартфоне (форма сверху) — разворачивать через order не нужно
    ========================================================== */
.promo {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--block-gap);
    border-radius: 24px;
    background: #edf3f7;
    padding: calc(var(--block-padding-y) * 2) var(--block-padding-x);
}

/* место под фоновую картинку — лежит позади контента (z-index),
    приглушена, чтобы не мешать читаемости формы и текста поверх */
.promo__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.promo__col {
    position: relative;
    z-index: 1;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 48em) {
    .promo__col {
        flex: 0 0 calc(50% - var(--block-gap) / 2);
        max-width: calc(50% - var(--block-gap) / 2);
    }
}

/* --- текстовый блок: идёт первым в DOM — слева на десктопе, сверху на смартфоне --- */
.promo__eyebrow {
    margin: 0 0 0.5rem;
    font-size: clamp(0.875rem, calc(0.85417rem + 0.09259vw), 0.9375rem);
    font-weight: 600;
    color: #004c86;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.promo__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.625rem, calc(1.5rem + 0.55556vw), 2rem);
    line-height: 1.2;
    font-weight: 700;
    color: #18181b;
}

.promo__desc {
    margin: 0;
    max-width: 50ch;
    color: #3f3f46;
    line-height: 1.6;
}

.promo__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: #004c86;
    color: #fff;
    font-size: clamp(1.0625rem, calc(1rem + 0.27778vw), 1.25rem);
}

.promo__badge-icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    fill: #ffb554;
}

/* --- форма: вторая в DOM — справа на десктопе, снизу на смартфоне --- */
.promo__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.promo__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.promo__field label {
    font-size: 0.875rem;
    color: #004c86;
    font-weight: 400;
}

.promo__field input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 12px;
    font: inherit;
    font-size: 1.625rem;
    background: #fff;
}

.promo__field input:focus {
    outline: 2px solid #004c86;
    outline-offset: 1px;
}

.promo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* три элемента в ряду (2 кнопки + текст) — примерно по трети
    ширины каждому, с переносом на узких экранах */
.promo__actions > * {
    flex: 1 1 0;
    min-width: 160px;
}

.promo__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(0.9375rem, calc(0.91667rem + 0.09259vw), 1rem);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.promo__button:hover {
    opacity: 0.9;
}

.promo__button--primary {
    background: #cd2d9a;
}
.promo__button--secondary {
    background: #004c86;
}

.promo__disclaimer {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #4D82AA;
}

/* ==========================================================
    Блок: consult
    Заголовок + текст + переиспользованная форма из .promo
    (.promo__form/.promo__field/.promo__button/.promo__disclaimer
    — та же разметка классов, ничего не задваивали). Отличие
    только в наборе: одна кнопка вместо двух и без второй колонки
    ========================================================== */
.consult {
    background: #EDF3F7;
    border-radius: 24px;
    padding-block: 1.25rem; /* фиксированно ~20px, отдельно от общей шкалы --block-padding-y */
    padding-inline: var(--block-padding-x);
    position: relative;
    isolation: isolate;
}
.consult .form-wrap__decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    height: auto;
    aspect-ratio: 448 / 306;
    opacity: 1;
    z-index: -1;
    --eye-color: #E0EAF0;
    pointer-events: none;
    user-select: none;
}
/* #founder — колонки .col-6 растягиваются по высоте флексом .row
    по умолчанию, но их содержимое (.row--full-mobile/.consult)
    само по себе не тянется — из-за этого правая/левая панель
    могла оказаться визуально короче другой */
#founder .col-6 {
    display: flex;
}
#founder .row--full-mobile,
#founder .consult {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.consult__title {
    color: #004C86;
    margin: 0 0 0.5rem;
    font-size: clamp(1.4375rem, calc(1.33333rem + 0.46296vw), 1.75rem);
    line-height: 1.25;
    font-weight: 700;
}

.consult__desc {
    margin: 0 0 1.5rem;
    color: #3f3f46;
    line-height: 1.6;
}

/* ==========================================================
    Блок: facts
    Тёмно-синяя секция на всю ширину (row--full + --section-bg):
    сверху текст+список слева и фото справа, снизу — 4 карточки
    со статистикой на всю ширину
    ========================================================== */
.facts {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-gap) * 2);
    padding-block-start: 20px;
    padding-block-end: 30px;
    color: #fff;
}

/* На мобильном порядок блоков не совпадает с порядком в HTML
    (фото между заголовком и текстом), поэтому вместо flex-order
    используется grid с именованными областями — так раскладка
    в каждом брейкпоинте описывается одним понятным ASCII-рисунком */
.facts__row {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "photo"
        "text"
        "list";
    gap: var(--block-gap);
}

@media (min-width: 48em) {
    .facts__row {
        grid-template-columns: 7fr 5fr;
        grid-template-areas:
            "title photo"
            "text  photo"
            "list  photo";
        align-items: center;
    }
}

.facts__title {
    grid-area: title;
    margin: 0;
    font-size: clamp(1.625rem, calc(1.5rem + 0.55556vw), 2rem);
    line-height: 44px;
    font-weight: 700;
    color: #fff;
}
.facts__title span {
    font-weight: 400;
}

.facts__text {
    grid-area: text;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.406rem;
    line-height: 30px;
}

.facts__list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    font-size: 1.125rem;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
}

.facts__photo {
    grid-area: photo;
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: cover;
}

.facts__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.facts__stat {
    flex: 1 1 calc((100% - 84px) / 4);
    display: flex;
    flex-direction: column;
    background: #9eceed;
    border-radius: var(--item-radius);
    padding: 1px 1rem;
    text-align: center;
}

.facts__stat-number {
    font-size: 36px;
    line-height: 2.75rem;
    font-weight: 700;
    color: #004c86;
}

.facts__stat-text {
    font-size: 1.125rem;
    color: #004c86;
}

/* ===== equipment ===== */
/* .blocks--cols держит фиксированные 3 в ряд на планшете
    (общее поведение сайта) — но у equipment карточки horizontal
    (blocks--row: фото+текст в строку), с заголовком+брендом
    в 3 колонки на планшете становится слишком тесно, поэтому
    здесь принудительно 2 в ряд */
@media (min-width: 48em) and (max-width: 74.9375em) {
    .blocks--equipment.blocks--cols .blocks__item {
        flex: 0 0 calc((100% - var(--gap)) / 2);
    }
}

/* ===== award ===== */
.award {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.award__documents {
    flex: 1;
    background: #004c86;
    border-radius: 24px;
    padding: 36px;
    color: #fff;
}

.award__certificate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 26px;
}

.award__certificate img {
    width: 100%;
}

.award__certificate-image,
.award__certificate-shadow {
    height: 320px;
    border-radius: 16px;
}

.award__certificate-image {
    background: url("assets/6bc85502766a8ee4.jpg") center/cover no-repeat;
}

.award__certificate-shadow {
    background: url("assets/caa8700375363049.jpg") center/cover no-repeat;
}

.award__quote-area {
    flex: 1;
    background: #004c86;
    border-radius: 24px;
    color: #fff;
    overflow: hidden;
    display: flex;
}

.award__quote {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 40px;
}

.award__quote-mark {
    flex: 0 0 85px;
}

.award__quote-mark svg {
    display: block;
    width: 85px;
    height: auto;
}

.award__quote-body {
    flex: 1;
    min-width: 0;
}

.award__quote-title {
    font-weight: 700;
    font-size: clamp(1.625rem, calc(1.54167rem + 0.37037vw), 1.875rem);
    line-height: 1.3;
    margin-top: 0;
    color: #fff;
}

.award__quote-text {
    font-size: clamp(1.625rem, calc(1.54167rem + 0.37037vw), 1.875rem);
    font-weight: 600;
    line-height: 1.4;
    margin-top: 18px;
    color: #fff;
}

.award__quote-author {
    font-size: clamp(1rem, calc(0.97917rem + 0.09259vw), 1.0625rem);
    margin-top: 32px;
    color: #fff;
    font-weight: 500;
}

.award__portrait {
    flex: 0 0 300px;
    background: url("assets/567a632e7ffa64dd.jpg") center/cover no-repeat;
}

@media (max-width: 47.9375em) {
    .award {
        flex-direction: column;
    }
    .award__quote-area {
        flex-direction: column;
    }
    .award__portrait {
        flex-basis: 220px;
    }
}

/* ===== licenses ===== */
.licenses__description {
    font-size: clamp(1rem, calc(0.95833rem + 0.18519vw), 1.125rem);
    line-height: 1.4;
    margin-top: 14px;
    color: #4d82aa;
    max-width: 900px;
}

.licenses__list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.licenses__image {
    display: block;
    width: 100%;
    object-fit: cover;
}

.license-card {
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    background: #fbeff4;
    border: 1px solid #f0d9e4;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 14px;
}

.license-card__frame {
    height: 10px;
    width: 70%;
    background: #e8c4d6;
    border-radius: 4px;
}

.license-card__image,
.license-card__shine {
    height: 6px;
    background: #eedae4;
    border-radius: 3px;
}

.license-card__shine {
    width: 85%;
}

.license-card__caption {
    margin-top: auto;
    height: 40px;
    background: #e8c4d6;
    border-radius: 6px;
}

@media (max-width: 61.9375em) {
    .licenses__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 34.375em) {
    .licenses__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== gallery ===== */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
    min-height: 420px;
    margin-top: 24px;
}

.gallery__item {
    min-width: 0;
    min-height: 0;
    grid-column: auto;
    grid-row: auto;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gallery__item--1 { grid-column: 1; grid-row: 1; background-image: url("assets/549630039317d6f6.jpg"); }
.gallery__item--2 { grid-column-start: 1; grid-row-start: 2; }
.gallery__item--3 { grid-column: span 2 / span 2; grid-row: span 2 / span 2; grid-column-start: 2; grid-row-start: 1; }
.gallery__item--4 { grid-column-start: 4; grid-row-start: 1; }
.gallery__item--5 { grid-column-start: 4; grid-row-start: 2; }
.gallery__item--6 { grid-column-start: 5; grid-row-start: 1; }
.gallery__item--7 { grid-column-start: 5; grid-row-start: 2; }
.gallery__item--8 { grid-column-start: 6; grid-row-start: 1; }
.gallery__item--9 { grid-column-start: 6; grid-row-start: 2; }

.gallery__image {
    display: block;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 61.9375em) {
    .gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: 13rem;
        min-height: 0;
    }
    .gallery__item {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* ===== consultation ===== */
.consultation__panel {
    background: #edf3f7;
    border-radius: 24px;
    padding: 44px;
    position: relative;
    display: flex;
    gap: 40px;
    align-items: center;
}

.consultation__content {
    flex: 0 0 50%;
}

.consultation__description {
    font-size: clamp(1rem, calc(0.95833rem + 0.18519vw), 1.125rem);
    line-height: 1.4;
    margin-top: 14px;
}

.consultation__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.consultation__benefits li {
    background-color: #004C86;
    border-radius: 20px;
    color: #fff;
    display: flex;
    gap: 5px;
    padding: 5px 12px;
}
.consultation__benefit {
    position: relative;
    padding-left: 18px;
    font-size: clamp(1rem, calc(0.95833rem + 0.18519vw), 1.125rem);
    color: #004c86;
    font-weight: 500;
}

.consultation__benefit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffb554;
}

.consultation__form {
    flex: 1;
    position: relative;
}

.consultation__form .promo__field,
.consultation__form .promo__actions {
    padding-block: 0.5rem;
}

.form-wrap__decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 45%;
    height: auto;
    aspect-ratio: 448 / 306;
    opacity: 1;
    --eye-color: #E0EAF0;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 61.9375em) {
    .consultation__panel {
        flex-direction: column;
        align-items: stretch;
        padding: 28px;
    }
    .consultation__content {
        flex-basis: auto;
    }
}

/* ===== articles ===== */
.article-card__tag {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #004c86;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

.article-card__tag--cataract { background: #004c86; }
.article-card__tag--laser { background: #cd2d9a; }
.article-card__tag--children { background: #21a038; }

/* ===== news ===== */
.news-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    margin-top: 34px;
}

.news-item {
    display: flex;
    gap: 22px;
    padding: 22px 0;
    border-top: 1px solid #004C86;
}

.news-item:first-child,
.news-item:nth-child(2) {
    border-top: 2px solid #004C86;
}

.news-item:nth-child(5n),
.news-item:nth-child(6n) {
    border-bottom: 2px solid #004C86;
}

.news-item__date {
    flex: 0 0 130px;
    font-weight: 700;
    font-size: clamp(1rem, calc(0.95833rem + 0.18519vw), 1.125rem);
    color: #000;
}

.news-item__title {
    font-size: clamp(1.0625rem, calc(1.02083rem + 0.18519vw), 1.1875rem);
    color: #000;
    font-weight: 500;
    line-height: 1.3;
}

@media (max-width: 47.9375em) {
    .news-list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

/* ===== contacts ===== */
.contacts__layout {
    display: flex;
    gap: 20px;
    margin-top: 34px;
    align-items: stretch;
}

.contacts__map {
    flex: 1;
    height: 440px;
    border-radius: 24px;
    background: url("assets/04fccb32555a0076.jpg") center/cover no-repeat;
}

.contacts__details {
    flex: 0 0 50%;
    padding: 0 25px;
    position: relative;
    isolation: isolate;
}

.contact-row {
    display: flex;
    gap: 26px;
    padding: 22px 0;
}

.contact-row:last-of-type {
    border-bottom: none;
}

.contact-row__label {
    flex: 0 0 220px;
    font-weight: 700;
    font-size: clamp(1.0625rem, calc(1rem + 0.27778vw), 1.25rem);
    color: #000000;
}

.contact-row__value,
.contact-row__link {
    font-size: clamp(1rem, calc(0.95833rem + 0.18519vw), 1.125rem);
}

.contact-row__value {
    line-height: 1.45;
}

.contact-row__link a {
    color: inherit;
    text-decoration: none;
}

.contact-row__link a:hover {
    text-decoration: underline;
}

.contacts__actions {
    display: flex;
    gap: 14px;
    margin-top: 20px;
}

.contact-wrap__decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 45%;
    height: auto;
    aspect-ratio: 448 / 306;
    opacity: 1;
    z-index: -1;
    --eye-color: #EDF3F7;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 61.9375em) {
    .contacts__layout {
        flex-direction: column;
    }
    .contacts__map {
        height: 280px;
    }
    .contacts__details {
        flex-basis: auto;
        padding: 28px;
    }
}

/* на узком смартфоне фиксированные 220px лейбла + текст значения
    в одну строку не помещаются и пробивают горизонтальный скролл —
    укладываем лейбл и значение друг под другом */
@media (max-width: 34.375em) {
    .contact-row {
        flex-direction: column;
        gap: 4px;
    }
    .contact-row__label {
        flex: 0 0 auto;
    }
}

/* ===== rating platforms ===== */
.rating-platforms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.rating-platform {
    background: #edf3f7;
    border-radius: 20px;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.rating-platform__logo--yandex {
    font-weight: 800;
    font-size: clamp(1.625rem, calc(1.54167rem + 0.37037vw), 1.875rem);
    color: #ff3333;
}

.rating-platform__logo--2gis {
    font-weight: 800;
    font-size: clamp(1.25rem, calc(1.16667rem + 0.37037vw), 1.5rem);
    color: #21a038;
}

.rating-platform__logo--prodoctorov {
    font-weight: 700;
    font-size: clamp(1rem, calc(0.95833rem + 0.18519vw), 1.125rem);
    color: #3981f1;
    line-height: 1.05;
}

.rating-platform__logo--sber {
    font-weight: 700;
    font-size: clamp(1rem, calc(0.97917rem + 0.09259vw), 1.0625rem);
    color: #21a038;
    line-height: 1.05;
}

.rating-platform__score {
    font-weight: 700;
    font-size: clamp(1.875rem, calc(1.75rem + 0.55556vw), 2.25rem);
    color: #004c86;
    line-height: 1;
}

.rating-platform__stars {
    color: #ffb554;
    font-size: clamp(1.0625rem, calc(1rem + 0.27778vw), 1.25rem);
}

.rating-platform__count {
    font-size: clamp(0.9375rem, calc(0.91667rem + 0.09259vw), 1rem);
    margin-top: 6px;
    color: #99b7cf;
}

@media (max-width: 61.9375em) {
    .rating-platforms {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 34.375em) {
    .rating-platforms {
        grid-template-columns: 1fr;
    }
}

.about__inner {
    display: flex;
    flex-direction: column;
    gap: var(--block-gap);
    border: 2px solid #004C86;
    border-radius: 24px;
    padding: 2rem;
}

.about__title {
    font-size: 1.25rem;
    margin: 0 0 0.5em;
}

.about__text {
    font-size: 1.25rem;
    margin: 0;
    line-height: 1.6;
}

.about__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-gap);
}

.about__links-group {
    flex: 0 0 calc(25% - var(--block-gap) * 3 / 4);
    max-width: calc(25% - var(--block-gap) * 3 / 4);
    font-size: 1.25rem;
}

@media (max-width: 47.9375em) {
    .about__links-group {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.about__links-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.about__links-list a {
    text-decoration: none;
}