/* =============================================================================
   Пансіонат «Століття» — дизайн-система

   Требования продиктованы аудиторией, а не вкусом. Решение принимают люди
   40–60 лет, часто в стрессе, значительная часть посетителей — 65+.
   Отсюда: базовый кегль 18px, кнопки от 48px, контраст не ниже WCAG AA,
   один смысловой акцент на экран.

   Палитра тёплая и природная — приглушённый зелёный отсылает к сосновой
   зоне Ворзеля, тёплая терракота работает как призыв к действию.
   Никакого «больничного» синего и никакого агрессивного красного:
   в этой нише они читаются как тревога.
============================================================================= */

/* -------------------------------------------------------------- Переменные */
:root {
    /* Цвет */
    --bg:            #FBFAF7;
    --surface:       #FFFFFF;
    --surface-alt:   #F4F2EC;
    --ink:           #1F2421;
    --ink-soft:      #5A625C;
    --ink-muted:     #838B84;

    --primary:       #2F6B4F;
    --primary-dark:  #245741;
    --primary-soft:  #E9F1EB;
    --primary-line:  #C5DACC;

    --accent:        #A85A1E;
    --accent-dark:   #8E4A15;
    --accent-soft:   #FAF0E6;

    --border:        #E4E0D8;
    --border-strong: #CFC9BC;

    --success:       #2F6B4F;
    --error:         #A3341F;

    /* Типографика: размеры плавно тянутся между 360px и 1440px.
       Шрифт системный — он уже есть на устройстве, рисуется мгновенно
       и не даёт скачка вёрстки при загрузке. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --fs-xs:   0.875rem;
    --fs-sm:   1rem;
    --fs-base: 1.125rem;
    --fs-md:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
    --fs-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --fs-xl:   clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
    --fs-2xl:  clamp(1.875rem, 1.4rem + 2.1vw, 3rem);
    --fs-3xl:  clamp(2.125rem, 1.5rem + 2.9vw, 3.75rem);

    /* Ритм.
       Шкала сжата примерно на пятую часть: воздуха на странице было столько,
       что до цен и формы приходилось долго листать, а на телефоне каждый
       экран показывал полтора блока. Мелкие значения не трогаем — они держат
       читаемость строк, ужимаем крупные, которыми разделены секции. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.75rem;
    --sp-7: 2.375rem;
    --sp-8: 3rem;
    --sp-9: 4.5rem;
    --section: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;
    --radius-full: 999px;

    /* Тени мягкие и тёплые — холодные серые выглядят дёшево */
    --shadow-sm: 0 1px 2px rgba(31, 36, 33, .05), 0 2px 6px rgba(31, 36, 33, .04);
    --shadow:    0 2px 6px rgba(31, 36, 33, .06), 0 10px 24px rgba(31, 36, 33, .07);
    --shadow-lg: 0 4px 12px rgba(31, 36, 33, .08), 0 20px 48px rgba(31, 36, 33, .10);

    --container: 1240px;
    --container-narrow: 760px;

    --header-h: 72px;
    /* Высота нижней панели на телефоне. Одно значение на всех, кто от неё
       отталкивается: отступ страницы и кнопка мессенджеров */
    --sticky-h: 64px;
    --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------- Сброс */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    /* Страховка от горизонтального смещения на телефоне.
       Две записи подряд намеренно: clip понимают не все браузеры, и там,
       где его нет, срабатывает hidden. Оба значения стоят именно на корне,
       а не на body: с корня они уходят на область просмотра, и липкая
       шапка продолжает работать. На body такое же правило превратило бы
       сам body в прокручиваемый контейнер и шапку бы сломало. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* Здесь намеренно нет overflow-x. Пока корень был visible, значение
       с body всплывало на область просмотра и работало. Как только на html
       появился clip, body сам стал прокручиваемым контейнером, и липкая
       шапка начала «прилипать» к нему, а не к экрану, то есть переставала
       прилипать вовсе. Обрезкой по горизонтали занимается только html. */
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
    color: var(--primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
a:hover { color: var(--primary-dark); }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* -------------------------------------------------------------- Раскладка */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--sp-6); } }

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--alt { background: var(--surface-alt); }
.section--surface { background: var(--surface); }
.section--primary { background: var(--primary); color: #fff; }
.section--primary h2, .section--primary h3 { color: #fff; }

.skip-link {
    position: absolute; left: -9999px;
    padding: var(--sp-3) var(--sp-5);
    background: var(--primary); color: #fff;
    z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

/* ------------------------------------------------------------ Типографика */
h1, .h1 {
    font-size: var(--fs-3xl);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h2, .h2 {
    font-size: var(--fs-2xl);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
h3, .h3 {
    font-size: var(--fs-lg);
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -0.01em;
}
h4, .h4 { font-size: var(--fs-md); line-height: 1.35; font-weight: 650; }

.lead {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 68ch;
}

.section-head { margin-bottom: var(--sp-7); max-width: 72ch; }
.section-head > * + * { margin-top: var(--sp-4); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.tiny  { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------- Кнопки */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 52px;
    padding: var(--sp-3) var(--sp-6);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; box-shadow: var(--shadow); }

.btn--secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink);
}
.btn--secondary:hover { border-color: var(--primary); color: var(--primary); }

.btn--green {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn--green:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

.btn--lg { min-height: 60px; padding-inline: var(--sp-7); font-size: var(--fs-base); }
.btn--sm { min-height: 44px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------------------------------------------------------------- Шапка */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 250, 247, .88);
    backdrop-filter: saturate(1.7) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
/* Граница и тень появляются только после прокрутки: у самого верха страницы
   шапка не должна отрезать себя от героя */
.header.is-stuck {
    border-bottom-color: var(--border);
    box-shadow: 0 2px 20px rgba(31, 36, 33, .06);
    background: rgba(251, 250, 247, .95);
}

.header__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--header-h);
}

.header__logo { display: block; flex-shrink: 0; line-height: 0; }
.header__logo img {
    width: auto;
    height: 48px;
    display: block;
}
@media (min-width: 1024px) { .header__logo img { height: 54px; } }
/* На узких экранах логотип уменьшается, но остаётся целиком:
   узнаваемость знака важнее пары освободившихся пикселей */
@media (max-width: 420px) { .header__logo img { height: 40px; } }

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    flex-shrink: 0;
}

/* Телефон: главный элемент после логотипа */
.header__phone {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.header__phone:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); color: var(--ink); }
.header__phone-ico {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}
.header__phone-num  { display: block; font-size: 1rem; font-weight: 700; line-height: 1.15; }
.header__phone-note { display: block; font-size: .68rem; color: var(--ink-muted); line-height: 1.2; }
@media (min-width: 900px) { .header__phone { display: inline-flex; } }

/* Класс header__cta оставлен намеренно: разметки под него больше нет
   (см. комментарий в partials/header.php), но правило страхует случай,
   если кнопку вернут в шапку не разобравшись — строка туда не помещается
   ни в одном языке. */
.header__cta { display: none; }

/* ------------------------------------------------------------------ Меню */
/* Строка в шапке не сжимается: логотип, пять пунктов меню, переключатель
   языка, телефон и кнопка занимают ровно столько, сколько занимает их текст.
   Замеры при ширине контейнера 1184: логотип 124 + меню 581 + правая
   группа 301 и отступы 36 — это 1042, и меню помещается только с 1200.
   На 1024 оно требовало 1026 при доступных 968, и страница получала
   горизонтальную прокрутку. Поэтому до 1200 работает бургер: мобильное
   меню содержит те же пункты, язык, телефон и кнопку. */
.nav { display: none; }
@media (min-width: 1200px) {
    .nav { display: flex; align-items: center; gap: 2px; margin-left: var(--sp-5); }
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Боковые отступы урезаны с 12 до 8: пять пунктов дают 20 пикселей,
       которых не хватало строке с кнопкой. Вертикальные не тронуты —
       высота нажимаемой области важнее */
    padding: 9px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 550;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.nav__link:hover { background: var(--primary-soft); color: var(--primary-dark); }
.nav__link[aria-current="page"] { color: var(--primary); font-weight: 700; }
/* Стрелка вниз у пунктов с подразделами.
   Полупрозрачная и восемнадцатипиксельная она сливалась с текстом, и по меню
   не читалось, что за пунктом что-то есть. Теперь она в цвете акцента,
   без прозрачности и с собственным отступом */
/* Стрелка у пунктов с подменю. Никаких подложек: нужна именно стрелка,
   поэтому она крупная, тёмная и с толстым штрихом. Тонкая светлая галочка
   рядом с текстом взгляд не ловит, а кружок вокруг неё превращался
   в непонятный овал */
.nav__link--has-drop { padding-right: 8px; }
.nav__link--has-drop svg {
    width: 18px; height: 18px;
    /* Иначе при нехватке места во flex-строке стрелка сжимается вместо того,
       чтобы строка честно упёрлась в границу: две стрелки из пяти пунктов
       становились уже остальных, и меню выглядело неровным */
    flex-shrink: 0;
    margin-left: 3px;
    color: var(--ink-soft);
    transition: transform var(--transition), color var(--transition);
}
.nav__link--has-drop:hover svg,
.nav__group[data-open] > .nav__link svg { color: var(--primary); }
.nav__group[data-open] > .nav__link svg { transform: rotate(180deg); }

.nav__group { position: static; }

/* Выпадающий список для группы «Про пансіонат» */
.nav__group > .nav__drop {
    position: absolute;
    top: calc(var(--header-h) - 6px);
    min-width: 260px;
    padding: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.nav__group[data-open] > .nav__drop { opacity: 1; visibility: visible; transform: none; }
.nav__drop a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    font-size: .95rem;
}
.nav__drop a svg { color: var(--primary); opacity: .75; flex-shrink: 0; }
.nav__drop a:hover { background: var(--primary-soft); color: var(--primary-dark); }
.nav__drop a[aria-current="page"] { color: var(--primary); font-weight: 650; }

/* Широкое меню услуг: семнадцать пунктов простым списком не читаются,
   поэтому раскладываем по категориям в три колонки */
.mega {
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    top: calc(var(--header-h) - 6px);
    max-width: var(--container);
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}
.nav__group[data-open] > .mega { opacity: 1; visibility: visible; transform: none; }

.mega__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-6);
}
.mega__title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}
.mega__col ul { display: grid; gap: 1px; }
.mega__col a {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: 8px var(--sp-2);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    font-size: .92rem;
    line-height: 1.3;
    transition: background var(--transition), color var(--transition);
}
.mega__col a:hover { background: var(--primary-soft); color: var(--primary-dark); }
.mega__col a small {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    color: var(--ink-muted);
    font-weight: 500;
}
/* В меню дуги нет: на 34 пикселях она превращается в грязь.
   Остаётся то же кольцо, чтобы приём читался как единый */
.mega__ico { width: 34px; height: 34px; }
.mega__col a:hover .mega__ico { border-color: var(--primary); }

.mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
}
.mega__foot a { font-weight: 650; text-decoration: none; font-size: .95rem; }

/* Переключатель языка */
.lang {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-alt);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.lang a {
    padding: 5px 11px;
    border-radius: var(--radius-full);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.lang a[aria-current="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.lang a:not([aria-current]):hover { color: var(--primary); }

/* На телефоне переключатель живёт в меню, а не в шапке: там его место
   нужнее номеру телефона и кнопке меню */
.header__lang { display: none; }
@media (min-width: 700px) { .header__lang { display: block; } }

/* Бургер */
/* Кнопка меню.
   Полоски позиционируются абсолютно от центра кнопки: при раскладке потоком
   они складывались не в крестик, а в галочку, потому что вращались вокруг
   собственных центров на разной высоте */
.burger {
    position: relative;
    width: 42px; height: 42px;
    padding: 0;
    background: var(--surface-alt);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition);
}
.burger:hover { background: var(--primary-soft); }
/* Бургер исчезает там же, где появляется меню в строке, — иначе на планшете
   в альбомной ориентации не осталось бы ни того, ни другого */
@media (min-width: 1200px) { .burger { display: none; } }
.burger span {
    position: absolute;
    left: 50%; top: 50%;
    width: 18px; height: 2px;
    margin: -1px 0 0 -9px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 140ms;
}
.burger span:nth-child(1) { transform: translateY(-5.5px); }
.burger span:nth-child(3) { transform: translateY(5.5px); }
.burger[aria-expanded="true"] { background: var(--primary-soft); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* Мобильное меню */
.mobile-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 99;
    padding: var(--sp-5) var(--sp-4) var(--sp-8);
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 300ms cubic-bezier(.22,.61,.36,1), visibility 300ms;
}
.mobile-nav.is-open { transform: none; visibility: visible; }
/* Пункты меню. Кнопки внизу панели под это правило попадать не должны:
   display:block ломал им выравнивание, и телефонная иконка наезжала на текст */
.mobile-nav a:not(.btn) {
    display: block;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: 1.06rem;
    font-weight: 550;
    color: var(--ink);
    text-decoration: none;
}
.mobile-nav a:not(.btn):hover { color: var(--primary); }
.mobile-nav .btn { text-decoration: none; }

/* Переключатель языка внутри панели: возвращаем ему собственный вид,
   иначе он наследует оформление пунктов меню и растягивается на строку */
.mobile-nav__lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: .92rem;
    color: var(--ink-soft);
}
.mobile-nav__lang .lang a {
    display: inline-block;
    padding: 6px 14px;
    border-bottom: 0;
    font-size: .82rem;
}

.mobile-nav__group { border-bottom: 1px solid var(--border); }
.mobile-nav__group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    font-size: 1.06rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group summary svg { transition: transform var(--transition); color: var(--primary); }
.mobile-nav__group[open] summary svg { transform: rotate(180deg); }
.mobile-nav__group a { padding-left: var(--sp-4); font-size: 1rem; font-weight: 500; }
.mobile-nav__group a:last-of-type { border-bottom: 0; }

.mobile-nav__title {
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-1);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}
.mobile-nav__foot { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
/* Запрет прокрутки, пока открыто меню или всплывающее окно.

   Замок висит на корне, а не на body. Причина та же, что и с обрезкой
   по горизонтали: overflow на body превращает сам body в прокручиваемый
   контейнер, и липкая шапка начинает считать своим верхом его, а не экран.
   Если открыть меню из середины страницы, шапка при этом просто исчезала:
   её «верх» оставался далеко вверху документа. */
html.is-locked { overflow-y: hidden; }

/* ----------------------------------------------------------------- Герой */
.hero {
    position: relative;
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
    background: linear-gradient(170deg, var(--primary-soft) 0%, var(--bg) 62%);
    overflow: hidden;
}
.hero__grid {
    display: grid;
    gap: var(--sp-7);
    align-items: center;
}
@media (min-width: 1024px) {
    .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); }
}
.hero__body > * + * { margin-top: var(--sp-5); }
.hero h1 { max-width: 16ch; }
/* Номер и режим работы: на широком экране в строку, на телефоне столбиком.
   Иначе «Цілодобово, без вихідних» переносится по словам и разрывает
   сам номер, а он здесь главное */
.hero__phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.hero__phone a {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--fs-md); font-weight: 700;
    color: var(--ink); text-decoration: none;
}
.hero__phone a:hover { color: var(--accent); }
.hero__phone span { font-weight: 400; }
@media (max-width: 559px) { .hero__phone { flex-direction: column; align-items: flex-start; } }
.hero__sub { font-size: var(--fs-md); color: var(--ink-soft); max-width: 52ch; }

.hero__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 3;
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero__badge {
    position: absolute;
    left: var(--sp-4); bottom: var(--sp-4);
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: var(--fs-xs);
    max-width: calc(100% - var(--sp-8));
}
.hero__badge strong { display: block; font-size: var(--fs-sm); }

/* Строка доверия */
.trust {
    display: grid;
    gap: var(--sp-3);
    padding: 0;
}
@media (min-width: 560px) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 550;
    color: var(--ink-soft);
    line-height: 1.4;
}
.trust__item svg { flex-shrink: 0; color: var(--primary); margin-top: 2px; }

/* ---------------------------------------------------------------- Сетки */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.split--wide-left { }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.2fr .8fr; } }

/* -------------------------------------------------------------- Карточки */
.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Кликабельная карточка — это ссылка, обёрнутая вокруг заголовка, описания
   и цены. Без этой строки браузер подчёркивает всё содержимое разом:
   описание номера превращается в сплошное полотно ссылки и читается тяжело.
   Роль ссылки берут на себя заголовок, стрелка и подъём карточки при
   наведении, поэтому подчёркивание здесь ничего не сообщает. */
.card--link { text-decoration: none; }
.card--link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--primary-line);
}
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.card__media picture { display: block; width: 100%; height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 400ms ease; }
.card--link:hover .card__media img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1; }
.card__title { font-size: var(--fs-md); font-weight: 650; line-height: 1.3; color: var(--ink); }
.card--link:hover .card__title { color: var(--primary); }
.card__text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }
.card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3);
    font-size: var(--fs-xs);
}
.card__price { font-weight: 700; color: var(--accent); font-size: var(--fs-sm); }
.card__arrow { color: var(--primary); font-weight: 650; }

/* Карточка ситуации — крупная, кликабельная целиком */
.situation {
    position: relative;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all var(--transition);
}
.situation:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-3px); }
/* Оформление иконок.

   Раньше под каждой иконкой лежал одинаковый светло-зелёный квадрат.
   Такой приём стоит в половине шаблонов, и страница из-за него выглядит
   собранной по образцу. Вместо заливки тонкое кольцо и одна дуга акцентного
   цвета: деталь незаметная по отдельности, но узнаваемая на всей странице.
   При наведении дуга проворачивается — движение подсказывает, что карточка
   кликабельна, без единого лишнего слова. */
.icon-ring,
.situation__icon,
.benefit__icon,
.mega__ico {
    position: relative;
    display: grid; place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--primary);
    transition: border-color var(--transition), color var(--transition);
}
.icon-ring::after,
.situation__icon::after,
.benefit__icon::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: var(--accent);
    transform: rotate(-40deg);
    transition: transform 520ms cubic-bezier(.22, .61, .36, 1);
}
.situation:hover .situation__icon::after,
.benefit:hover .benefit__icon::after,
.card--link:hover .icon-ring::after { transform: rotate(120deg); }

.situation__icon { width: 52px; height: 52px; }
.situation:hover .situation__icon { border-color: var(--primary); }
.situation__title { font-size: var(--fs-md); font-weight: 650; color: var(--ink); line-height: 1.3; }
.situation:hover .situation__title { color: var(--primary); }
.situation__text { font-size: var(--fs-sm); color: var(--ink-soft); }
.situation__more { margin-top: auto; font-size: var(--fs-xs); font-weight: 650; color: var(--accent); }

/* --------------------------------------------------------- Преимущества */
.benefit {
    display: flex; gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.benefit__icon { width: 48px; height: 48px; color: var(--accent); }
.benefit:hover .benefit__icon { border-color: var(--accent); }
.benefit__title { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-1); }
.benefit__text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }

/* -------------------------------------------------------------- Тарифы */
.plans { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .plans { grid-template-columns: repeat(4, 1fr); } }

.plan {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--sp-6) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
}
.plan:hover { box-shadow: var(--shadow); border-color: var(--primary-line); }
.plan--popular {
    border-color: var(--accent);
    border-width: 2px;
    box-shadow: var(--shadow);
}
.plan__flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    padding: 5px var(--sp-4);
    background: var(--accent); color: #fff;
    border-radius: var(--radius-full);
    font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.plan__name { font-size: var(--fs-lg); font-weight: 700; }
.plan__beds { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: var(--sp-1); }
.plan__price {
    margin-top: var(--sp-4);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    font-weight: 750; line-height: 1;
    color: var(--ink); letter-spacing: -.02em;
}
.plan__price span { font-size: var(--fs-sm); font-weight: 550; color: var(--ink-soft); letter-spacing: 0; }
.plan__year {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--primary);
    font-weight: 600;
}
/* Условие скидки отдельной строкой: раньше оно склеивалось с суммой
   и читалось как «205 200 грн/рікПри оплаті за рік» */
.plan__discount {
    display: block;
    margin-top: 2px;
    color: var(--ink-muted);
    font-weight: 500;
}
.plan__summary { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-soft); }
.plan__list { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); }
.plan__list li {
    display: flex; gap: var(--sp-2);
    font-size: var(--fs-sm); line-height: 1.45;
}
.plan__list li::before {
    content: ""; flex-shrink: 0;
    width: 18px; height: 18px; margin-top: 4px;
    background: var(--primary-soft);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F6B4F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
.plan__excludes { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--border-strong); }
.plan__excludes-title { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-muted); margin-bottom: var(--sp-2); }
.plan__excludes li {
    display: flex; gap: var(--sp-2);
    font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.45;
}
.plan__excludes li::before { content: "—"; flex-shrink: 0; }
.plan__cta { margin-top: var(--sp-5); }

/* ------------------------------------------------------------ Калькулятор */
.quiz {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.quiz__head {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    background: var(--primary);
    color: #fff;
}
.quiz__head h2 { color: #fff; font-size: var(--fs-xl); }
.quiz__head p { margin-top: var(--sp-2); color: rgba(255,255,255,.86); font-size: var(--fs-sm); }
.quiz__progress { margin-top: var(--sp-4); }
.quiz__bar { height: 6px; background: rgba(255,255,255,.22); border-radius: var(--radius-full); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; background: #fff; border-radius: inherit; transition: width 300ms ease; width: 25%; }
.quiz__step-label { margin-top: var(--sp-2); font-size: var(--fs-xs); color: rgba(255,255,255,.8); }

.quiz__body { padding: var(--sp-6) var(--sp-5); }
.quiz__step { display: none; }
.quiz__step.is-active { display: block; animation: fade-in 260ms ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.quiz__q { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-5); line-height: 1.3; }
.quiz__options { display: grid; gap: var(--sp-3); }
.quiz__option {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%; min-height: 60px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-sm); font-weight: 550;
    text-align: left; cursor: pointer;
    transition: all var(--transition);
}
.quiz__option:hover { border-color: var(--primary); background: var(--primary-soft); }
.quiz__option.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.quiz__option::before {
    content: ""; flex-shrink: 0;
    width: 22px; height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    transition: all var(--transition);
}
.quiz__option.is-selected::before {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 4px var(--surface);
}
.quiz__nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); }

.quiz__result { display: none; }
.quiz__result.is-active { display: block; animation: fade-in 300ms ease; }
.quiz__amount {
    padding: var(--sp-6) var(--sp-5);
    background: var(--primary-soft);
    border-radius: var(--radius);
    text-align: center;
}
.quiz__amount-label { font-size: var(--fs-sm); color: var(--ink-soft); }
.quiz__amount-value {
    margin-top: var(--sp-2);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    font-weight: 750; line-height: 1.1; color: var(--primary-dark);
    letter-spacing: -.02em;
}
.quiz__amount-unit { font-size: var(--fs-sm); font-weight: 550; color: var(--ink-soft); }
.quiz__note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }

/* ---------------------------------------------------------------- Формы */
.form { display: grid; gap: var(--sp-4); }
.form__field { display: grid; gap: var(--sp-2); }
.form__label { font-size: var(--fs-sm); font-weight: 600; }
.form__label span { color: var(--error); }

.form__input, .form__textarea {
    width: 100%;
    min-height: 54px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form__input:focus, .form__textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.form__input.is-invalid, .form__textarea.is-invalid { border-color: var(--error); }
.form__textarea { min-height: 110px; resize: vertical; padding-top: var(--sp-3); }
.form__error { font-size: var(--fs-xs); color: var(--error); }
.form__consent { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.45; }

/* Ловушка для ботов: скрыта визуально, но не через display:none —
   часть ботов игнорирует поля, скрытые этим способом */
.form__trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

.form__message {
    display: none;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
}
.form__message.is-visible { display: block; animation: fade-in 240ms ease; }
.form__message--ok { background: var(--primary-soft); border: 1px solid var(--primary-line); }
.form__message--ok strong { display: block; color: var(--primary-dark); margin-bottom: var(--sp-1); }
.form__message--error { background: #FCF0EE; border: 1px solid #EDC8C1; }
.form__message--error strong { display: block; color: var(--error); margin-bottom: var(--sp-1); }

.btn.is-loading { opacity: .7; pointer-events: none; }

/* Блок формы на цветной подложке */
.form-block {
    display: grid; gap: var(--sp-6);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
@media (min-width: 900px) { .form-block { grid-template-columns: 1fr 1fr; padding: var(--sp-7); gap: var(--sp-8); } }
.form-block--compact { max-width: 560px; }

/* ------------------------------------------------------------------ FAQ */
.faq { display: grid; gap: var(--sp-3); }
.faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition);
}
.faq__item[open] { border-color: var(--primary-line); }
.faq__q {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-md); font-weight: 650;
    cursor: pointer; list-style: none;
    line-height: 1.35;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--primary); }
.faq__q::after {
    content: ""; flex-shrink: 0;
    width: 24px; height: 24px; margin-top: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232F6B4F' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    transition: transform var(--transition);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-soft); font-size: var(--fs-sm); }
.faq__a p + p { margin-top: var(--sp-3); }

/* --------------------------------------------------------------- Отзывы */
.review {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.review__stars { display: flex; gap: 2px; color: #D9A441; }
.review__text { font-size: var(--fs-sm); line-height: 1.6; }
.review__meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.review__avatar {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary-dark);
    font-weight: 700; flex-shrink: 0;
}
.review__author { font-weight: 650; font-size: var(--fs-sm); }
.review__role { font-size: var(--fs-xs); color: var(--ink-muted); }
.review__verified {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); color: var(--primary); font-weight: 600;
}

/* -------------------------------------------------------------- Галерея */
.gallery-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-alt);
    cursor: zoom-in;
    border: 0; padding: 0;
}
.gallery-item picture,
.gallery-item > span {
    display: block;
    width: 100%;
    height: 100%;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 400ms ease;
}
.gallery-item:hover img { transform: scale(1.06); }

/* Просмотр фото */
.lightbox {
    position: fixed; inset: 0; z-index: 300;
    display: none;
    align-items: center; justify-content: center;
    padding: var(--sp-4);
    background: rgba(20, 24, 21, .93);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox__close, .lightbox__prev, .lightbox__next {
    position: absolute;
    display: grid; place-items: center;
    width: 52px; height: 52px;
    background: rgba(255,255,255,.14);
    border: 0; border-radius: 50%;
    color: #fff; cursor: pointer;
    transition: background var(--transition);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,.28); }
.lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lightbox__prev  { left: var(--sp-4);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--sp-4); top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------- Текстовый блок */
.prose { max-width: 72ch; font-size: var(--fs-base); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-xl); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-lg); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { line-height: 1.7; }
/* Маркер ставим абсолютом, а не флексом.
   При display:flex жирный подзаголовок внутри пункта становился отдельной
   колонкой, и текст рядом с ним вёрстка ломала на узкий столбик */
.prose ul, .prose ol { display: grid; gap: var(--sp-2); padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 34px; line-height: 1.6; }
.prose ul li::before {
    content: ""; position: absolute; left: 0; top: 5px;
    width: 20px; height: 20px;
    background: var(--primary-soft); border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F6B4F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 38px; counter-increment: n; line-height: 1.6; }
.prose ol li::before {
    content: counter(n); position: absolute; left: 0; top: 2px;
    display: grid; place-items: center;
    width: 26px; height: 26px;
    background: var(--primary); color: #fff;
    border-radius: 50%; font-size: .8rem; font-weight: 700;
}
.prose img { border-radius: var(--radius); margin-block: var(--sp-5); }
.prose blockquote {
    padding: var(--sp-4) var(--sp-5);
    border-left: 4px solid var(--primary);
    background: var(--primary-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: var(--fs-md);
}
/* Выноска. Живёт и внутри текста статьи, и отдельным блоком на странице */
.note {
    padding: var(--sp-4) var(--sp-5);
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
}
/* Длинная ссылка или адрес без пробелов не должны растягивать страницу:
   в статьях, приехавших со старого сайта, такое встречается */
.prose { overflow-wrap: anywhere; }
/* Широкая таблица прокручивается внутри себя, а не тащит за собой всю страницу */
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: var(--sp-3); border: 1px solid var(--border); text-align: left; }
.prose th { background: var(--surface-alt); font-weight: 650; }
.prose a { font-weight: 550; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Блок «Коротко» — выжимка, которую охотнее всего цитирует ИИ-поиск */
.summary-box {
    padding: var(--sp-5);
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    border-radius: var(--radius);
}
.summary-box__title {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--primary-dark);
    margin-bottom: var(--sp-3);
}
.summary-box p { font-size: var(--fs-sm); line-height: 1.6; }

/* ------------------------------------------------------------ Крошки */
.crumbs { padding-block: var(--sp-4); font-size: var(--fs-xs); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-muted); }
.crumbs li:not(:last-child)::after { content: "/"; color: var(--border-strong); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }

/* На телефоне цепочка идёт одной строкой и прокручивается пальцем.
   Перенос на две-три строки съедал первый экран ради служебной навигации,
   а она нужна не всем и не всегда. Полоса прокрутки скрыта: край строки
   и так подсказывает, что её можно сдвинуть. */
@media (max-width: 767px) {
    .crumbs ol {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Отступы контейнера повторяем здесь, чтобы строка прокручивалась
           от края до края, а не обрывалась внутри полей */
        margin-inline: calc(var(--sp-4) * -1);
        padding-inline: var(--sp-4);
        scroll-padding-inline: var(--sp-4);
    }
    .crumbs ol::-webkit-scrollbar { display: none; }
    .crumbs li { flex-shrink: 0; white-space: nowrap; }
}

/* ---------------------------------------------------------- Страница */
.page-head {
    position: relative;
    isolation: isolate;
    padding-block: var(--sp-7) var(--sp-8);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.page-head > .container > * + * { margin-top: var(--sp-4); }
/* Текст не заходит в правую половину, где лежит снимок */
.page-head h1, .page-head .lead { max-width: 60ch; }

/* Снимок подложкой. Адрес картинки приходит из переменной --page-hero,
   её проставляет макет по теме страницы.

   Контраст держим не прозрачностью, а маской: слева, где лежит заголовок,
   снимок сходит на нет полностью, справа виден почти в полную силу.
   Так фотография читается как фотография, а не как еле заметное пятно,
   и при этом ни один заголовок не оказывается на пёстром фоне. */
.page-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--page-hero, none);
    background-size: cover;
    background-position: center 42%;
    opacity: .55;
    -webkit-mask-image: linear-gradient(102deg, transparent 30%, rgba(0,0,0,.55) 58%, #000 82%);
            mask-image: linear-gradient(102deg, transparent 30%, rgba(0,0,0,.55) 58%, #000 82%);
}
/* Мягкая растушёвка к нижнему краю, чтобы снимок не обрывался линией */
.page-head::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 55%, var(--surface) 100%);
}
@media (max-width: 767px) {
    /* На узком экране текст занимает всю ширину, поэтому снимок уводим
       по диагонали: у заголовка его нет совсем, к правому нижнему углу
       он выходит почти в полную силу. Гасить фотографию целиком незачем,
       от неё тогда остаётся серое пятно вместо живого места */
    .page-head::before {
        opacity: .5;
        -webkit-mask-image: linear-gradient(158deg, transparent 22%, rgba(0,0,0,.45) 56%, #000 92%);
                mask-image: linear-gradient(158deg, transparent 22%, rgba(0,0,0,.45) 56%, #000 92%);
    }
}

/* Шапка с видео вместо снимка — на контактах.

   Съёмка та же, что на первом экране главной, поэтому разметка и скрипт
   переиспользуются целиком (.hero__video, .hero__scrim). Отличий два.
   Первое: блок выше обычной шапки, иначе от видео остаётся полоска
   в двести пикселей и живой картинки не получается. Второе: вуаль здесь
   белая, у .page-head фон --surface, а не --bg, и градиент от бежевого
   дал бы заметную полосу слева от заголовка. */
.page-head--video {
    padding-block: var(--sp-8) var(--sp-9);
}
/* Видео ложится поверх фотоподложки: у ::before z-index -1, и без этого
   снимок закрыл бы съёмку. Порядок отрисовки при равном z-index даёт
   нужную стопку — ::before, затем видео, затем вуаль и нижняя растушёвка */
.page-head--video .hero__video { z-index: -1; }
/* Когда съёмка пошла, фотография под ней не нужна: два слоя друг на друге
   дают мутное пятно. Если :has() не поддерживается, останутся оба —
   заметно, но не сломано */
.page-head--video::before { transition: opacity 900ms ease; }
.page-head--video:has(video.is-playing)::before { opacity: 0; }
.page-head--video .hero__scrim {
    background: linear-gradient(100deg,
        var(--surface) 0%,
        rgba(255,255,255,.93) 38%,
        rgba(255,255,255,.58) 62%,
        rgba(255,255,255,.28) 100%);
}
@media (max-width: 899px) {
    /* На узком экране текст лежит поверх видео во всю ширину, поэтому
       вуаль вертикальная: плотная у заголовка и расступается ниже */
    .page-head--video .hero__scrim {
        background: linear-gradient(180deg,
            rgba(255,255,255,.93) 0%,
            rgba(255,255,255,.87) 34%,
            rgba(255,255,255,.62) 70%,
            rgba(255,255,255,.74) 100%);
    }
    .page-head--video .hero__video video.is-playing { opacity: .7; }
}

/* Оглавление и боковая колонка */
.with-aside { display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) { .with-aside { grid-template-columns: minmax(0,1fr) 340px; gap: var(--sp-8); align-items: start; } }
.aside { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) { .aside { position: sticky; top: calc(var(--header-h) + var(--sp-5)); } }
/* Ниже 1024 колонка уходит под текст. Форма во всю ширину экрана читается
   как отдельная секция и рвёт ритм страницы, поэтому держим её узкой */
@media (max-width: 1023px) {
    .aside { width: 100%; max-width: 34rem; margin-inline: auto; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .aside { grid-template-columns: 1fr 1fr; max-width: 52rem; align-items: start; }
}
.aside__card {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.aside__title { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--sp-3); }

/* ------------------------------------------------------- Липкая панель */
.sticky-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(31,36,33,.08);
    padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1024px) { .sticky-bar { display: none; } }
.sticky-bar a, .sticky-bar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: 60px; padding: var(--sp-2);
    background: none; border: 0; border-right: 1px solid var(--border);
    font-size: .72rem; font-weight: 600;
    color: var(--ink); text-decoration: none; cursor: pointer;
    text-align: center; line-height: 1.15;
}
.sticky-bar > *:last-child { border-right: 0; }
.sticky-bar svg { color: var(--primary); }
.sticky-bar .is-accent { background: var(--accent); color: #fff; }
.sticky-bar .is-accent svg { color: #fff; }
/* Подпись в одну строку. Двухстрочная надпись растягивала панель,
   и кнопка мессенджеров наезжала на неё сверху */
.sticky-bar span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 359px) { .sticky-bar a, .sticky-bar button { font-size: .66rem; } }
@media (max-width: 1023px) { body { padding-bottom: var(--sticky-h); } }

/* --------------------------------------------------------- Мессенджеры */
.messengers {
    position: fixed;
    right: var(--sp-3);
    bottom: calc(var(--sticky-h) + var(--sp-2));
    z-index: 91;
    display: grid;
    justify-items: end;
    gap: var(--sp-2);
    /* Ловим нажатия только сами кнопки. Пустое место столбика,
       особенно когда список раскрыт, перехватывать их не должно */
    pointer-events: none;
}
.messengers > * { pointer-events: auto; }
@media (min-width: 1024px) { .messengers { bottom: var(--sp-6); } }

.messengers__list {
    display: grid;
    gap: var(--sp-2);
    justify-items: end;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 240ms ease, transform 240ms cubic-bezier(.22,.61,.36,1), visibility 240ms;
}
.messengers.is-open .messengers__list { opacity: 1; visibility: visible; transform: none; }

/* Кнопки выезжают по очереди: так видно, что их несколько */
.messengers__list li { transform: translateX(10px); opacity: 0; transition: all 220ms cubic-bezier(.22,.61,.36,1); }
.messengers.is-open .messengers__list li { transform: none; opacity: 1; }
.messengers.is-open .messengers__list li:nth-child(1) { transition-delay: 40ms; }
.messengers.is-open .messengers__list li:nth-child(2) { transition-delay: 90ms; }
.messengers.is-open .messengers__list li:nth-child(3) { transition-delay: 140ms; }

/* Цвет берётся из переменной --brand, заданной на самой ссылке.
   Узнаваемый цвет мессенджера решает больше, чем подпись. */
.messengers__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: 50px;
    padding: 0 var(--sp-4) 0 14px;
    border-radius: var(--radius-full);
    background: var(--brand, var(--primary));
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 650;
    box-shadow: 0 6px 18px rgba(31, 36, 33, .18);
    transition: transform 200ms cubic-bezier(.22,.61,.36,1), box-shadow 200ms ease;
}
.messengers__item:hover {
    color: #fff;
    transform: translateX(-3px);
    box-shadow: 0 10px 26px rgba(31, 36, 33, .26);
}
.messengers__label { white-space: nowrap; }

.messengers__toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(47, 107, 79, .35);
    transition: transform 220ms cubic-bezier(.22,.61,.36,1), background 200ms ease, opacity 200ms ease;
}
.messengers__toggle:hover { transform: scale(1.06); }

/* На телефоне кнопка меньше и полупрозрачная, пока к ней не притронулись.
   Она висит поверх карточек, и в прежнем размере палец попадал в неё
   вместо кнопки «Детальніше» под ней. Прозрачной её видно, но она
   не спорит с содержимым; при касании становится обычной. */
@media (max-width: 1023px) {
    .messengers__toggle {
        width: 46px; height: 46px;
        opacity: .72;
        box-shadow: 0 4px 12px rgba(47, 107, 79, .28);
    }
    .messengers__toggle:active,
    .messengers.is-open .messengers__toggle { opacity: 1; }
    .messengers__toggle svg { width: 20px; height: 20px; }
}
.messengers.is-open .messengers__toggle { background: var(--ink); }

.messengers__toggle-icon {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition: opacity 200ms ease, transform 260ms cubic-bezier(.22,.61,.36,1);
}
.messengers__toggle-icon--close { opacity: 0; transform: rotate(-90deg) scale(.7); }
.messengers.is-open .messengers__toggle-icon--chat  { opacity: 0; transform: rotate(90deg) scale(.7); }
.messengers.is-open .messengers__toggle-icon--close { opacity: 1; transform: none; }

/* Расходящееся кольцо: замечается боковым зрением, не мешая чтению */
.messengers__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--primary);
    animation: pulse-ring 2.6s ease-out infinite;
    pointer-events: none;
}
.messengers.is-open .messengers__pulse { display: none; }

.messengers__list {
    display: grid; gap: var(--sp-2);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all var(--transition);
}
.messengers.is-open .messengers__list { opacity: 1; visibility: visible; transform: none; }

/* ---------------------------------------------------------------- Попап */
.popup {
    position: fixed; inset: 0; z-index: 250;
    display: none; align-items: center; justify-content: center;
    padding: var(--sp-4);
    background: rgba(20,24,21,.6);
    backdrop-filter: blur(3px);
    /* Единицы dvh считают высоту от того, что реально видно. Если человек
       всё же откроет клавиатуру, нажав на поле, окно ужмётся под остаток
       экрана вместо того, чтобы наполовину уехать под неё */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}
.popup.is-open { display: flex; animation: fade-in 200ms ease; }
.popup__box {
    position: relative;
    width: 100%; max-width: 480px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    /* Окно получает фокус программно, поэтому рамку вокруг него не рисуем:
       она появлялась бы у всех, хотя нужна только тем, кто ходит клавишами.
       Для них подсветка останется на кнопке и полях внутри */
    outline: none;
    padding: var(--sp-6);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.popup__close {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    display: grid; place-items: center;
    width: 44px; height: 44px;
    background: var(--surface-alt); border: 0; border-radius: 50%;
    cursor: pointer; color: var(--ink-soft);
}
.popup__close:hover { background: var(--border); color: var(--ink); }
.popup__title { font-size: var(--fs-lg); font-weight: 700; padding-right: var(--sp-6); }
.popup__text { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.popup__form { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------- Футер */
.footer { background: #232A25; color: #C9D2CB; padding-block: var(--sp-8) var(--sp-6); }
.footer a { color: #C9D2CB; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 700px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-7); } }
.footer__title { color: #fff; font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-4); }
.footer__list { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.footer__logo { display: block; line-height: 0; }
.footer__logo img { width: auto; height: 62px; display: block; }
.footer__about { margin-top: var(--sp-4); font-size: var(--fs-sm); line-height: 1.6; color: #9FAAA2; }
.footer__phone { display: block; font-size: var(--fs-md); font-weight: 700; color: #fff; margin-bottom: var(--sp-2); }
.footer__bottom {
    margin-top: var(--sp-7); padding-top: var(--sp-5);
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; flex-wrap: wrap; gap: var(--sp-4);
    justify-content: space-between;
    font-size: var(--fs-xs); color: #8B958D;
}

/* --------------------------------------------------------------- Прочее */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); }
.pagination a, .pagination span {
    display: grid; place-items: center;
    min-width: 48px; height: 48px; padding-inline: var(--sp-3);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 600; text-decoration: none; color: var(--ink);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .is-current { background: var(--primary); border-color: var(--primary); color: #fff; }

.tag {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 5px var(--sp-3);
    background: var(--primary-soft); color: var(--primary-dark);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs); font-weight: 600;
}
.tag--accent { background: var(--accent-soft); color: var(--accent-dark); }

.stat { text-align: center; }
.stat__value { font-size: var(--fs-2xl); font-weight: 750; color: var(--primary); line-height: 1; letter-spacing: -.02em; }
.stat__label { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); }

/* Отступ сверху под кружок с номером, который свисает за край карточки */
.steps { display: grid; gap: var(--sp-5); padding-top: 20px; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
    position: relative;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    counter-increment: step;
}
.step::before {
    content: counter(step);
    position: absolute; top: -20px; left: var(--sp-5);
    display: grid; place-items: center;
    width: 40px; height: 40px;
    background: var(--accent); color: #fff;
    border-radius: 50%; font-weight: 750; font-size: var(--fs-md);
    box-shadow: var(--shadow-sm);
}
.step__title { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--sp-2); }
.step__text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }

.day-list { display: grid; gap: 0; }
.day-list li {
    display: grid; grid-template-columns: 84px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}
.day-list li:last-child { border-bottom: 0; }
.day-list b { color: var(--primary); font-variant-numeric: tabular-nums; }

.empty-state {
    padding: var(--sp-7) var(--sp-5);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    text-align: center;
    color: var(--ink-soft);
}

.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }

.contact-line { display: flex; align-items: flex-start; gap: var(--sp-3); }
.contact-line__icon { color: var(--primary); flex-shrink: 0; margin-top: 3px; }
.contact-line__label { font-size: var(--fs-xs); color: var(--ink-muted); }
.contact-line__value { font-size: var(--fs-md); font-weight: 650; color: var(--ink); text-decoration: none; }
a.contact-line__value:hover { color: var(--accent); }

/* Утилиты */
.stack     { display: grid; gap: var(--sp-4); }
.stack--sm { display: grid; gap: var(--sp-2); }
.stack--lg { display: grid; gap: var(--sp-6); }
.center    { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.hidden { display: none !important; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

@media print {
    .header, .footer, .sticky-bar, .messengers, .popup, .quiz { display: none !important; }
    body { padding-bottom: 0; font-size: 12pt; }
}

/* =============================================================================
   Живые элементы оформления

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

/* Мягкие пятна на фоне героя вместо плоской заливки.
   Медленный дрейф оживляет первый экран, но взгляд не цепляет. */
.hero { position: relative; isolation: isolate; }
.hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    z-index: -1;
    pointer-events: none;
    animation: drift 22s ease-in-out infinite;
}
.hero__blob--1 { width: 420px; height: 420px; top: -120px;  left: -100px; background: #BEE0CC; }
.hero__blob--2 { width: 340px; height: 340px; bottom: -140px; right: 8%;  background: #F3DDC4; animation-delay: -8s; }
.hero__blob--3 { width: 260px; height: 260px; top: 34%; left: 42%; background: #D9E9DE; animation-delay: -15s; opacity: .35; }

/* Видео с территорией фоном первого экрана.
   Поверх обязательно лежит светлая вуаль: заголовок и телефон на голой
   съёмке читаются плохо, а первый экран должен работать на человека,
   который ищет номер, а не любуется картинкой. */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}
.hero__video video {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 40%;
    opacity: 0;
    transition: opacity 900ms ease;
}
.hero__video video.is-playing { opacity: .5; }

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(100deg, var(--bg) 0%, rgba(251,250,247,.92) 38%, rgba(251,250,247,.55) 62%, rgba(251,250,247,.25) 100%);
}
@media (max-width: 899px) {
    /* На телефоне текст лежит поверх видео во всю ширину, поэтому вуаль
       здесь вертикальная. Плотная она только в верхней части, где заголовок
       и подзаголовок: ниже, под кнопками и телефоном, вуаль расступается
       и съёмка видна почти в полную силу. Так видео перестаёт быть
       еле заметным пятном, а читаемость текста не страдает. */
    .hero__scrim {
        background: linear-gradient(180deg,
            rgba(251,250,247,.90) 0%,
            rgba(251,250,247,.84) 30%,
            rgba(251,250,247,.56) 66%,
            rgba(251,250,247,.68) 100%);
    }
    .hero__video video.is-playing { opacity: .72; }
}

/* Тонкая сетка на фоне: даёт ощущение продуманного макета,
   а не пустого белого поля */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    opacity: .5;
    pointer-events: none;
}

/* Фотография в герое: срезанный угол и подпись поверх */
.hero__media {
    border-radius: var(--radius-lg);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
}

/* Бегущая строка с фактами. Даёт движение и заодно проговаривает
   те аргументы, до которых посетитель может не долистать. */
.ticker {
    overflow: hidden;
    padding-block: var(--sp-4);
    background: var(--primary);
    color: #fff;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
    display: flex;
    width: max-content;
    animation: marquee 44s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-inline: var(--sp-6);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}
.ticker__item svg { opacity: .7; flex-shrink: 0; }
.ticker__item::after {
    content: "";
    width: 5px; height: 5px;
    margin-left: var(--sp-6);
    border-radius: 50%;
    background: rgba(255,255,255,.4);
}
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* Карточка со срезанным углом: мелочь, но уводит от вида готовой темы */
.card--cut {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

/* Номер шага крупной цифрой на фоне: приём из печатной вёрстки.
   Карточку намеренно не режем по краям: overflow:hidden срезал бы кружок
   с номером, который по замыслу наполовину выходит за верхнюю границу.
   Поэтому крупную цифру держим внутри границ размерами, а не обрезкой */
.step::after {
    content: counter(step);
    position: absolute;
    right: 14px; bottom: -4px;
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-soft);
    z-index: 0;
    pointer-events: none;
}
.step > * { position: relative; z-index: 1; }

/* Цифры-факты */
.facts { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact {
    position: relative;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.fact::before {
    content: "";
    position: absolute;
    left: 0; top: var(--sp-5); bottom: var(--sp-5);
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--accent);
}
.fact__value {
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--primary);
}
.fact__value span { font-size: .5em; font-weight: 650; }
.fact__label { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.45; }

/* Фотография с рамкой-смещением: объём без тяжёлых теней */
.framed { position: relative; }
.framed::before {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 2px solid var(--primary-line);
    border-radius: var(--radius-lg);
    z-index: -1;
}
.framed > * { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 767px) { .framed::before { inset: 12px -12px -12px 12px; } }

/* Цитата-выноска в тексте */
.pullquote {
    position: relative;
    margin-block: var(--sp-6);
    padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-8);
    background: var(--surface-alt);
    border-radius: var(--radius);
    font-size: var(--fs-md);
    line-height: 1.5;
}
.pullquote::before {
    content: "";
    position: absolute;
    left: var(--sp-4); top: var(--sp-4);
    width: 26px; height: 26px;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v8a4 4 0 0 1-4 4'/%3E%3Cpath d='M20 11h-4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v8a4 4 0 0 1-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v8a4 4 0 0 1-4 4'/%3E%3Cpath d='M20 11h-4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v8a4 4 0 0 1-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Заголовок с надписью-меткой сбоку */
.section-head--marked { position: relative; padding-left: var(--sp-5); }
.section-head--marked::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(var(--primary), var(--accent));
}

/* Скелетон, пока грузится фотография */
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%) 0 0 / 240% 100%;
    animation: shimmer 1.6s linear infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms;
}
.gallery-item.is-loading::after { opacity: 1; }

/* Соцсети в подвале */
.socials { margin-top: var(--sp-5); }
.socials__title {
    font-size: var(--fs-xs);
    color: #8B958D;
    margin-bottom: var(--sp-3);
}
.socials ul { display: flex; gap: var(--sp-2); }
.socials a {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #C9D2CB;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.socials a:hover {
    background: rgba(255,255,255,.16);
    color: #fff;
    transform: translateY(-2px);
}