/* stil.css — «Подарок 26». Страница акции агентства Optimism, собранная заново.
 *
 * Фаза `optimism-statejnik · OSP320282 · 110926`. Слово Романа 11.09.2026: сделать с нуля по
 * лучшим практикам, переосмыслить дизайн, взять стиль сайта и сделать лучше, с современной
 * технологичной типографикой.
 *
 * ТИПОГРАФИКА. Russo One в заголовках: его выбрал Роман 11.09.2026, начертание одно, жирность
 * даёт сам рисунок буквы. Geist в тексте: спокойный рабочий гротеск с родной кириллицей.
 * Geist Mono в цифрах и технических подписях: моноширинный даёт колонкам чисел одинаковую
 * ширину знака, поэтому цены и метки не пляшут. Первая редакция называла здесь Unbounded,
 * Onest и JetBrains Mono: та связка отброшена при подборе, комментарий отстал от кода.
 *
 * 🔴 ЦВЕТ ВЗЯТ У САЙТА, А НЕ ПРИДУМАН. Синий #0CA1F5 и коралл #F75A53 это боевая пара с
 * optimism.ru. Добавлены только глубина и свет: тёмная сцена #05070D, на которой синий начинает
 * светиться, и мягкие пятна подсветки. Бирюза #00B4D9 со старого лендинга убрана: её нет нигде
 * на сайте, а на белом она давала контраст 2.46 при норме 3.
 */

/* ─────────────────────────── лексикон ───────────────────────────
 * 🔴 СЦЕНА СИНЯЯ, А НЕ ЧЁРНАЯ, И ОТТЕНОК ВЫБРАН РАСЧЁТОМ. Слово Романа 11.09.2026: строить на
 * корпоративном синем. Но белый текст на самом фирменном #0CA1F5 даёт контраст 2.83 при норме
 * 4.5, то есть на нём нельзя набрать ни строчки. Поэтому фон это глубокая ступень того же
 * синего (#005FB0, белый на нём 6.43), фирменный #0CA1F5 работает акцентом и заливкой мелких
 * плашек, а самый тёмный #00335F служит подложкой шапки и низа. Бренд сохранён, читаемость
 * тоже.
 */
:root {
    /* 🔴 ШКАЛА ГЛУБИНЫ ОТ САПФИРА К КОРПОРАТИВНОМУ, И ЭТО ПОДБОР, А НЕ ВКУСОВЩИНА. Роман
     * 11.09.2026 назвал сапфировый #0C144F и попросил остаться в рамках дизайн-системы сайта.
     * Цвета проверены расчётом: на сапфире белый даёт 17.09, а фирменный голубой #0CA1F5
     * целых 6.05, то есть он там не глохнет, а светится. Поэтому сапфир взят подложкой
     * глубины (шапка, финал, окно заявки, карточки), корпоративный синий держит основную
     * сцену, а голубой и коралл остаются акцентами, как на optimism.ru. */
    --сапфир: #0c144f;
    --сапфир-мягкий: #0e2a6b;
    --синий-глубокий: #005fb0;
    --синий-ночь: #0f3f86;
    --синий-верх: #0a7fc4;
    --синий: #0ca1f5;
    --синий-свет: #6fd0ff;
    /* Для синего текста на белом: сам #0CA1F5 даёт 2.83 при норме 4.5. */
    --синий-текст: #0a6fa8;
    --карта: #00447f;
    --бумага: #ffffff;
    --светлый: #eef4fa;
    /* Кнопки синие, как на сайте. Коралл остаётся тонким акцентом: бейдж тарифа, подчёркивание.
     * Роман 11.09.2026: красные кнопки не нравятся. */
    --кнопка: #0072b8;
    --кнопка-навод: #005fb0;
    --коралл: #f75a53;
    /* Наводка это тот же коралл на 12% глубже: тон сохраняется, цвет не пропадает.
     * Прежняя синяя кнопка уходила на наводке в тон сцены, и Роман назвал это прямо:
     * «у кнопки пропадает вообще цвет». */
    --коралл-навод: #d94f49;
    --текст: #ffffff;
    --текст-тихий: #bcdcf5;
    --текст-тёмный: #0b1f33;
    --тихий-тёмный: #4a6076;
    --грань: rgba(255, 255, 255, .22);
    --грань-светлая: #d8e4ef;

    /* Russo One выбрал Роман 11.09.2026. Начертание у него одно, поэтому веса в заголовках
     * не используются: жирность даёт сам рисунок буквы. Кириллица полная, 66 букв из 66. */
    --заголовки: 'Russo One', 'Arial Black', Impact, system-ui, sans-serif;
    --проза: 'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --цифры: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --полоса: 1200px;
    /* 🔴 ПРЯМЫЕ УГЛЫ ВЕЗДЕ. Слово Романа 11.09.2026: скруглений быть не должно, как на самом
     * optimism.ru. Там у кнопок, полей и карточек `border-radius: 0`, и это внятное решение,
     * которое держит страницу собранной. Переменная оставлена одна на весь файл, чтобы правка
     * была в одном месте, а не в тридцати. */
    --скругление: 0px;
    --шапка: 72px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--проза);
    font-size: 17px;
    line-height: 1.6;
    color: var(--текст);
    background: var(--синий-глубокий);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

.pd26-polosa { width: 100%; max-width: var(--полоса); margin: 0 auto; padding: 0 24px; }

/* 🔴 ЦВЕТ ЗАГОЛОВКАМ ЗАДАЁТСЯ ЯВНО, И ЭТО НЕ ПЕРЕСТРАХОВКА. Тема блога красит заголовки в
 * `rgba(0,0,0,.87)`, и на тёмной сцене первый экран оказался чёрным по чёрному: половина
 * главного заголовка была не видна вовсе. Замер на живой странице 11.09.2026 показал у `h1`
 * именно этот цвет, хотя `body` был светлым. Наследование тут не работает: у темы своё
 * правило на сами теги, и оно выигрывает. */
h1, h2, h3 {
    margin: 0 0 20px;
    font-family: var(--заголовки);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--текст);
}

.pd26-geroj h1, .pd26-final h2, .pd26-karta h2, .pd26-okno h2 { color: #fff; }

/* Кегль снижен 12.09.2026 по слову Романа: «размер шрифта лучше поменьше». Верх с 66
 * до 52, шаг с 4.6vw до 3.5vw, низ с 38 до 34. На 1920 заголовок больше не съедает
 * первый экран, на 390 не разваливается на семь строк. */
h1 { font-size: clamp(34px, 3.5vw, 52px); line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(31px, 3.8vw, 52px); line-height: 1.03; }
h3 { font-size: clamp(18px, 1.8vw, 23px); font-weight: 400; letter-spacing: -.005em; }
p { margin: 0 0 16px; }

/* Технические подписи над блоками: моноширинный, в разрядку, приглушённый. */
.pd26-metka {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-family: var(--цифры);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* 🔴 НА СИНЕЙ СЦЕНЕ ФИРМЕННЫЙ ГОЛУБОЙ НЕЧИТАЕМ: замер на середине градиента даёт 2.34
     * при норме 4.5. Светлая ступень того же голубого даёт 4.58 и остаётся голубой. */
    color: #9ee0ff;
}

.pd26-metka::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

/* ─────────────────────────── зерно и свет ───────────────────────────
 * 🔴 ЗЕРНО РИСУЕТСЯ ФИЛЬТРОМ, А НЕ КАРТИНКОЙ. Готовая текстура это лишний запрос и лишние
 * сто килобайт; `feTurbulence` даёт то же самое нулевым весом. Слой не перехватывает
 * события и не анимируется: движущееся зерно сажает батарею телефона. */
.pd26-zerno {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.pd26-svet {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: .55;
}

/* ─────────────────────────── кнопки ───────────────────────────
 * 🔴 ГЕОМЕТРИЯ СНЯТА С САЙТА ЗАМЕРОМ, А НЕ ПРИДУМАНА. Слово Романа 11.09.2026: прямые углы как
 * на optimism.ru, никаких красных кнопок, ховер не должен выглядеть плохо, текст не должен
 * прыгать. Замер главной: фон #0CA1F5, белый текст, рамка 1px того же цвета, `border-radius: 0`,
 * `transition: background-color .3s, color .3s`, тени нет, при наведении просто темнее.
 *
 * Одно отступление от сайта, и оно осознанное: там белый текст лежит на #0CA1F5 и даёт
 * контраст 2.83 при норме 4.5, то есть подписи кнопок формально нечитаемы. Беру ту же
 * гарнитуру цвета на ступень глубже (#0072B8, контраст 5.12), а фирменный #0CA1F5 оставляю
 * рамке и ховеру. Глаз разницы почти не видит, норма выполняется.
 */
.pd26-knopka {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 15px 32px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--проза);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    /* Двигается только цвет: ни `transform`, ни тени. Прыгающий при наведении текст Роман
     * назвал отдельной претензией, и он прав: кнопка должна стоять на месте. */
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* 🔴 ЦВЕТ И ПОДЧЁРКИВАНИЕ ЗАКРЕПЛЕНЫ НА ВСЕХ СОСТОЯНИЯХ, И ЭТО НЕ ПЕРЕСТРАХОВКА.
 * Замер 12.09.2026 на живой странице: в таблице стилей темы блога стоит
 * `a:hover { color: #0056b3; text-decoration: underline }`. У `.pd26-knopka--sinyaya:hover`
 * своего `color` не было, специфичность `a:hover` (0,1,1) перебивала базовое правило
 * `.pd26-knopka` (0,1,0), и подпись кнопки «Взять этот тариф» на наведении становилась
 * тёмно-синей с подчёркиванием прямо поверх тёмно-синей заливки. Роман прислал снимок:
 * текста на кнопке фактически нет. Поэтому каждое состояние задаёт цвет само.
 *
 * ПОДХОД К НАВЕДЕНИЮ СМЕНЁН. Прежний уводил заливку глубже в тон сцены, и кнопка гасла:
 * «у кнопки пропадает вообще цвет». Теперь признак наведения не цветовой, а геометрический,
 * то есть виден при любой заливке и на любом фоне: рамка становится белой, заливка идёт на
 * ступень глубже в СВОЁМ тоне, текст остаётся белым. Кнопка при этом стоит на месте:
 * ни сдвига, ни тени, ни прыгающего текста. */
.pd26-knopka,
.pd26-knopka:link,
.pd26-knopka:visited,
.pd26-knopka:hover,
.pd26-knopka:focus,
.pd26-knopka:active { text-decoration: none; }

.pd26-knopka--glavnaya,
.pd26-knopka--glavnaya:link,
.pd26-knopka--glavnaya:visited {
    background: var(--кнопка);
    border-color: var(--кнопка);
    color: #fff;
}

.pd26-knopka--glavnaya:hover,
.pd26-knopka--glavnaya:focus-visible,
.pd26-knopka--glavnaya:active {
    background: var(--кнопка-навод);
    border-color: #fff;
    color: #fff;
}

/* Вторая кнопка: контурная, на тёмной сцене. Заливается при наведении, как на сайте. */
.pd26-knopka--kontur {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.pd26-knopka--kontur:hover,
.pd26-knopka--kontur:focus-visible,
.pd26-knopka--kontur:active {
    background: #fff;
    border-color: #fff;
    color: var(--текст-тёмный);
}

/* Синяя кнопка живёт на СВЕТЛЫХ секциях, поэтому белая рамка на ней потерялась бы. Здесь
 * признаком наведения служит обратная замена: заливка уходит в белое, а текст и рамка
 * забирают синий. Контраст растёт, а не падает: тёмный текст на белом даёт 5.12. */
.pd26-knopka--sinyaya,
.pd26-knopka--sinyaya:link,
.pd26-knopka--sinyaya:visited {
    background: var(--кнопка);
    border-color: var(--кнопка);
    color: #fff;
}

.pd26-knopka--sinyaya:hover,
.pd26-knopka--sinyaya:focus-visible,
.pd26-knopka--sinyaya:active {
    background: #fff;
    border-color: var(--кнопка);
    color: var(--кнопка);
}

.pd26-knopka--shirokaya { width: 100%; }

/* ─────────────────────────── шапка ─────────────────────────── */
.pd26-shapka {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

.pd26-shapka--plotnaya {
    background: rgba(12, 20, 79, .9);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--грань);
}

/* 🔴 ТЕЛЕФОН ПОДРЕЗАЛСЯ ТРИЖДЫ ЗА ДЕНЬ, каждый раз по новой причине: то не хватало отступа,
 * то сменился моноширинный шрифт с другой шириной знака. Поэтому теперь дело не в подобранных
 * пикселях: сжиматься разрешено подписи акции, а строка телефона и кнопка не сжимаются вовсе. */
.pd26-shapka__ryad { display: flex; align-items: center; gap: 20px; min-height: 72px;
                     flex-wrap: nowrap; }
.pd26-shapka__sut { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.pd26-shapka__logo { flex: 0 0 auto; }
.pd26-shapka__logo { height: 30px; width: auto; }
.pd26-shapka__sut {
    font-family: var(--цифры);
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--текст-тихий);
}

/* `flex-shrink: 0` обязателен: без него моноширинный телефон сжимается под кнопку и
 * обрезается на последних цифрах. Замер на живой странице: видно «118-20-9». */
/* 🔴 ТЕЛЕФОН ПОДРЕЗАЛСЯ ДВАЖДЫ, И ВТОРОЙ РАЗ ПОСЛЕ СМЕНЫ ШРИФТА. Ширина знака у моноширинных
 * гарнитур разная: при переходе с JetBrains Mono на Geist Mono строка снова перестала
 * помещаться. Поэтому теперь дело не в подобранном отступе, а в запрете сжатия и переноса:
 * `flex-shrink: 0` и `min-width` держат строку целиком при любом шрифте. */
.pd26-shapka__sprava { margin-left: auto; display: flex; align-items: center; gap: 22px;
                       flex: 0 0 auto; }
/* 🔴 НОМЕР ГАСИЛ ЧУЖОЙ СКРИПТ, А НЕ НАША ВЁРСТКА, И ЭТО ЧЕТВЁРТАЯ ВЕРСИЯ ПРИЧИНЫ. Сперва я
 * думал, что строке не хватает места, потом что виновата тень кнопки. Замер показал другое:
 * на странице 19 элементов `<small>`, по одному на КАЖДЫЙ знак номера, включая пробелы. Их
 * создаёт скрипт сайта, гасит по очереди и не доводит анимацию до конца, поэтому хвост номера
 * остаётся полупрозрачным и выглядит обрезанным.
 *
 * Скрипт не трогаем: он общий для сайта и, возможно, связан с подменой номера в рекламе.
 * Просто возвращаем видимость тому, что он погасил. `!important` тут обязателен: скрипт пишет
 * прозрачность инлайновым стилем, а он сильнее обычного правила. */
.pd26-shapka__tel { flex: 0 0 auto; min-width: max-content; position: relative; z-index: 2; }
.pd26-shapka__tel,
.pd26-shapka__tel * {
    opacity: 1 !important;
    color: #fff !important;
    visibility: visible !important;
}

/* 🔴 ТЕЛЕФОН КАЗАЛСЯ ОБРЕЗАННЫМ, А БЫЛ ЦЕЛЫМ. Три захода я правил отступы и запрет сжатия,
 * и каждый раз замер говорил, что строка помещается: телефон 899-1072, кнопка 1094-1289, зазор
 * 22 пикселя. Виновата оказалась тень самой кнопки: коралловое свечение с размытием в 30
 * пикселей ложится на последние цифры и гасит их. В шапке тень не нужна вовсе, на плотном
 * фоне она не читается как объём. Урок не про пиксели: «выглядит обрезанным» и «обрезано» это
 * разные вещи, и различает их только замер того, ЧТО лежит сверху. */
.pd26-shapka__sprava .pd26-knopka {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 46px;
    padding: 12px 26px;
    font-size: 15px;
}
.pd26-shapka__ryad { overflow: visible; }
.pd26-shapka__tel {
    font-family: var(--цифры);
    font-size: 16px;
    font-weight: 500;
    color: var(--текст);
    text-decoration: none;
    white-space: nowrap;
}

.pd26-shapka__tel:hover { color: var(--синий-свет); }

@media (max-width: 900px) { .pd26-shapka__sut { display: none; } }

/* 🔴 НА 390 ТЕЛЕФОН НЕ ВЛЕЗАЛ В СТРОКУ И РАСТЯГИВАЛ ДОКУМЕНТ. Замер: прокрутка 396 при окне
 * 390, то есть страница ехала вбок на шесть пикселей. Кнопка в шапке на телефоне не нужна:
 * внизу живёт липкая панель с той же заявкой. */
@media (max-width: 620px) {
    .pd26-shapka__sprava .pd26-knopka { display: none; }
    .pd26-shapka__tel { font-size: 15px; letter-spacing: -.02em; }
    .pd26-shapka__logo { height: 26px; }
    .pd26-polosa { padding: 0 16px; }
}

/* ─────────────────────────── первый экран ─────────────────────────── */
.pd26-geroj {
    position: relative;
    overflow: hidden;
    /* Сцена: сверху светлее, к низу уходит в глубину. Так первый экран читается объёмным, а
     * текст всё время лежит на достаточно тёмной части. */
    background: linear-gradient(168deg, var(--синий-верх) 0%, var(--синий-глубокий) 42%,
                                var(--сапфир-мягкий) 78%, var(--сапфир) 100%);
}
.pd26-geroj__svet--1 { width: 640px; height: 640px; top: -240px; left: -140px;
                       background: radial-gradient(circle, #35b6ff 0%, transparent 70%);
                       opacity: .5; }
.pd26-geroj__svet--2 { width: 520px; height: 520px; top: 140px; right: -170px;
                       background: radial-gradient(circle, #f75a53 0%, transparent 70%);
                       opacity: .26; }

/* Абстрактный фон первого экрана.
 *
 * 🔴 КЛЕТКИ ЗДЕСЬ БОЛЬШЕ НЕТ. Роман 11.09.2026: клетка на фоне не нравится. Она и правда
 * читается как миллиметровка и спорит с прямыми углами вёрстки, потому что повторяет их же
 * ритм. Вместо неё диагональная штриховка: линии идут под углом, ни одна не совпадает с
 * краями блоков, и вместо чертежа получается движение. Рисуется тем же способом, то есть
 * нулём запросов и нулём килобайт.
 *
 * Маска гасит штриховку к краям и под текстом, поэтому заголовок лежит на чистом цвете. */
.pd26-geroj__setka-fon {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        118deg,
        rgba(255, 255, 255, .085) 0px,
        rgba(255, 255, 255, .085) 1px,
        transparent 1px,
        transparent 22px
    );
    mask-image: radial-gradient(ellipse 95% 80% at 72% 28%, #000 12%, transparent 78%);
    opacity: .9;
}

.pd26-geroj__telo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
    gap: 54px;
    align-items: center;
    padding: 76px 24px 88px;
}

/* ─────────────────── алый акцент первого экрана ───────────────────
 * 🔴 ЦВЕТ СНЯТ С САЙТА ЗАМЕРОМ, А НЕ ПОДОБРАН. Слово Романа 11.09.2026: первый экран «всё
 * синее вообще», нужен минимальный акцент, за который цепляется глаз, и цвет тот же, что у
 * переключателя тарифов на главной. Вычисленный стиль `.tarifs-section__aside-trigger.is-active`
 * на optimism.ru даёт `rgb(247, 90, 83)`, то есть ровно наш `--коралл: #f75a53`. Тем же цветом
 * на главной залито 40 элементов, и текст на них белый.
 *
 * Мест ровно три, и это потолок: кнопка в шапке, черта под акцентом заголовка, чёрточка у
 * метки срока. Больше алого на экране быть не должно, иначе акцент перестаёт быть акцентом.
 *
 * 🟡 Контраст белого на #f75a53 равен 3.21 при норме 4.5. Ступень глубже держала бы норму, но
 * тогда лендинг разошёлся бы с сайтом по фирменному цвету. Роман выбрал цвет сайта, выбор его
 * и осознанный: та же пара уже стоит на главной.
 */
/* 🔴 НА ТЕЛЕФОНЕ КНОПКИ В ШАПКЕ НЕТ: правило `@media (max-width: 860px)` её прячет, а
 * постоянным призывом там служит нижняя панель. Замер 12.09.2026 на 390, 430 и 360: без второй
 * строки селектора алого на смартфоне не остаётся вовсе, кроме черты под заголовком. Обе кнопки
 * это ОДИН И ТОТ ЖЕ постоянный призыв, просто на разных ширинах он стоит в разных местах,
 * поэтому и цвет у них общий. */
.pd26-shapka .pd26-knopka--glavnaya,
.pd26-nizhnyaya .pd26-knopka--glavnaya {
    background: var(--коралл);
    border-color: var(--коралл);
}

.pd26-shapka .pd26-knopka--glavnaya:hover,
.pd26-shapka .pd26-knopka--glavnaya:focus-visible,
.pd26-shapka .pd26-knopka--glavnaya:active,
.pd26-nizhnyaya .pd26-knopka--glavnaya:hover,
.pd26-nizhnyaya .pd26-knopka--glavnaya:focus-visible,
.pd26-nizhnyaya .pd26-knopka--glavnaya:active {
    background: var(--коралл-навод);
    border-color: #fff;
    color: #fff;
}

/* Черта живёт на `h1`, а не на `.pd26-geroj__akcent`: у акцента стоит `background-clip: text`,
 * и любой фон внутри него обрезался бы по буквам вместо того, чтобы стать полосой. */
.pd26-geroj h1 { position: relative; margin-bottom: 18px; padding-bottom: 14px; }
.pd26-geroj h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 168px;
    height: 7px;
    background: var(--коралл);
}

.pd26-geroj .pd26-metka::before {
    height: 3px;
    background: var(--коралл);
    opacity: 1;
}
.pd26-geroj__akcent {
    /* Заливка ведёт от почти белого к светло-голубому: на синей сцене тёмный край градиента
     * проваливался в фон, и вторая половина заголовка читалась хуже первой. */
    background: linear-gradient(92deg, #ffffff 0%, #c8ecff 55%, #9ee0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pd26-geroj__podzag { max-width: 560px; font-size: 18.5px; color: var(--текст-тихий); }

/* Механика акции: три шага вместо четырёх строк мелкого капса. */
.pd26-shagi { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pd26-shagi li { display: flex; gap: 14px; align-items: flex-start; }
.pd26-shagi__nomer {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(12, 161, 245, .45);
    border-radius: 0;
    font-family: var(--цифры);
    font-size: 13px;
    color: var(--синий-свет);
    background: rgba(12, 161, 245, .1);
}

/* ─────────────────────────── карта формы ───────────────────────────
 * Стеклянная поверхность: полупрозрачный фон плюс размытие подложки. Дёшево по
 * производительности, потому что слой один и он не анимируется. */
.pd26-karta {
    position: relative;
    padding: 30px;
    border: 1px solid var(--грань);
    border-radius: var(--скругление);
    /* 🔴 РАЗМЫТИЕ ПОДЛОЖКИ СНЯТО 13.09.2026, И ЭТО ПОЧИНКА, А НЕ ВКУСОВЩИНА.
     * Роман 11.09: «иногда мышкой водишь вокруг блока „Посчитаем ваш подарок“, и возникает
     * какая-то полоска… либо сделай хорошо, либо вовсе удали». Светлая вертикальная полоса
     * появлялась при движении мыши и держалась всю высоту карточки.
     *
     * Что установлено замером. Анимации блика в стилях нет вовсе: перебор `animation`,
     * `@keyframes` и `transition` даёт 12 совпадений, ни одного на `.pd26-karta`. Версия
     * «задумана анимация, но не работает» отпадает. Остаётся единственный механизм в этой
     * зоне: `backdrop-filter` сэмплирует подложку, а в подложке лежат `filter: blur(90px)` у
     * свечений, `mask-image` у штриховки и `mix-blend-mode: overlay` у зерна. На перерисовке
     * браузер оставляет шов на границе тайла композитного слоя, и выглядит он ровно так.
     *
     * 🟡 ЧЕСТНАЯ ГРАНИЦА: воспроизвести полосу у себя я не смогла. Обход мышью по пятнадцати
     * точкам дал прирост яркости 10.16 при включённом размытии и ноль без него, но тот же
     * браузер на прямой вопрос `matches(':hover')` отвечает `false`, то есть наведение через
     * отладочный протокол не работает вовсе и цифру 10.16 нельзя приписывать наведению.
     * Решение принято по механизму и по слову Романа «либо вовсе удали», а не по
     * подтверждённому воспроизведению. Вернётся полоса, значит причина другая.
     *
     * Заливка подтянута с .1/.03 до .14/.06: без размытия сквозь карточку просвечивала
     * диагональная штриховка фона. Сверено тремя снимками одного экрана. */
    background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.pd26-karta h2 { font-size: 25px; margin-bottom: 8px; }
.pd26-karta__podpis { margin-bottom: 20px; font-size: 15px; color: var(--текст-тихий); }
.pd26-karta__cena {
    display: flex;
    /* 🔴 Было `baseline`, и это давало осевший вправо-вниз хвост. Число одной строкой в 32px,
     * подпись двумя строками в 12px: по базовой линии совмещаются ПЕРВАЯ строка подписи и
     * цифры, поэтому вторая строка свисает ниже и вся подпись читается сдвинутой вниз.
     * Слово Романа 11.09.2026: «должно быть посередине вертикали, как написано 40 000».
     * `center` совмещает середины блоков, и подпись встаёт по оси числа. */
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--грань);
}

/* `white-space: nowrap` обязателен: без него знак рубля отрывается от числа и уезжает на
 * следующую строку, а цена перестаёт читаться как цена. */
.pd26-karta__cena b { font-family: var(--заголовки); font-size: 32px; color: #fff;
                      white-space: nowrap; }
.pd26-karta__cena span { font-family: var(--цифры); font-size: 12px; line-height: 1.35;
                         color: var(--текст-тихий); }

@media (max-width: 940px) {
    .pd26-geroj__telo { grid-template-columns: 1fr; gap: 34px; padding: 46px 20px 56px; }
    .pd26-geroj__svet--2 { display: none; }
}

/* ─────────────────────────── форма ─────────────────────────── */
.pd26-forma { display: grid; gap: 12px; }
.pd26-forma__pole {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid var(--грань);
    border-radius: 0;
    background: rgba(255, 255, 255, .06);
    font-family: var(--проза);
    font-size: 17px; /* меньше 16 заставляет мобильный Safari увеличивать страницу при вводе */
    color: #fff;
}

.pd26-forma__pole::placeholder { color: #7e8ea6; }
.pd26-forma__pole:focus { outline: 2px solid var(--синий); border-color: transparent; }
.pd26-forma__pole[aria-invalid="true"] { border-color: var(--коралл); }
.pd26-forma--svetlaya .pd26-forma__pole { background: #fff; color: var(--текст-тёмный);
                                          border-color: var(--грань-светлая); }
.pd26-forma__lovushka { position: absolute !important; left: -9999px !important;
                        width: 1px !important; height: 1px !important; opacity: 0 !important;
                        pointer-events: none; }
.pd26-forma__mikro { margin: 2px 0 0; font-size: 13px; color: var(--текст-тихий); }
.pd26-forma__otvet { margin: 4px 0 0; font-size: 14.5px; }
.pd26-forma__otvet--ok { color: #4ade80; }
.pd26-forma__otvet--oshibka { color: var(--коралл); }

/* ─────────────────────────── секции ─────────────────────────── */
.pd26-sekciya { position: relative; padding: 92px 0; scroll-margin-top: var(--шапка); }
.pd26-sekciya--svetlaya { background: var(--бумага); color: var(--текст-тёмный); }
.pd26-sekciya--svetlaya h2 { color: var(--текст-тёмный); }
.pd26-sekciya--svetlaya .pd26-metka { color: var(--синий-текст); }
.pd26-sekciya--seraya { background: var(--светлый); color: var(--текст-тёмный); }
.pd26-sekciya--seraya h2 { color: var(--текст-тёмный); }
.pd26-sekciya--seraya .pd26-metka { color: var(--синий-текст); }
.pd26-sekciya__shapka { max-width: 720px; margin-bottom: 44px; }
.pd26-sekciya__shapka p { color: var(--текст-тихий); font-size: 17.5px; }
.pd26-sekciya--svetlaya .pd26-sekciya__shapka p,
.pd26-sekciya--seraya .pd26-sekciya__shapka p { color: var(--тихий-тёмный); }

@media (max-width: 700px) { .pd26-sekciya { padding: 60px 0; } }

/* ─────────────────────────── полоса чисел ─────────────────────────── */
/* 🔴 ПОЛОСА ЧИСЕЛ БЫЛА НЕ ПО ЦЕНТРУ СИНЕГО БЛОКА. Роман поймал это глазом 11.09.2026, и
 * причина оказалась в отбивке: секция шла с нулевым верхним отступом, а нижний оставался
 * прежним, поэтому полоса висела в синем поле не по середине. Теперь у секции чисел
 * симметричные поля, а сами колонки выровнены по одной линии: числа и подписи стоят по левому
 * краю своей ячейки, и ни одна не съезжает относительно соседних. */
.pd26-sekciya--chisla { padding: 54px 0; }

.pd26-chisla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
               background: var(--грань); border: 1px solid var(--грань); overflow: hidden; }
.pd26-chislo { display: flex; flex-direction: column; justify-content: center;
               min-height: 132px; padding: 26px 28px; background: rgba(12, 20, 79, .62); }
.pd26-chislo b { display: block; font-family: var(--заголовки); font-size: clamp(30px, 3.4vw, 44px);
                 line-height: 1.05; color: #fff; }
.pd26-chislo span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.4;
                    color: var(--текст-тихий); }

@media (max-width: 760px) { .pd26-chisla { grid-template-columns: 1fr; } }

/* ─────────────────────────── тарифы ─────────────────────────── */
.pd26-perekl {
    display: inline-flex;
    padding: 5px;
    margin-bottom: 34px;
    border: 1px solid var(--грань-светлая);
    border-radius: 0;
    background: #fff;
}

.pd26-perekl button {
    padding: 11px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--проза);
    font-size: 15px;
    font-weight: 700;
    color: var(--тихий-тёмный);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.pd26-perekl button[aria-pressed="true"] { background: var(--текст-тёмный); color: #fff; }

.pd26-tarify { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pd26-tarif {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--грань-светлая);
    border-radius: var(--скругление);
    background: #fff;
    transition: border-color .2s ease;
}

/* Карточка при наведении не двигается: меняется только рамка. Прыжок под курсором Роман
 * назвал отдельной претензией к кнопке, и к карточкам это относится ровно так же. */
.pd26-tarif:hover { border-color: var(--синий); }
.pd26-tarif--glavnyj { border-color: var(--синий); box-shadow: none; }
.pd26-tarif__znak {
    position: absolute;
    top: -12px;
    left: 28px;
    padding: 5px 12px;
    border-radius: 0;
    background: var(--коралл);
    font-family: var(--цифры);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

.pd26-tarif h3 { margin-bottom: 6px; color: var(--текст-тёмный); }
.pd26-tarif__dlya { margin-bottom: 18px; font-size: 14.5px; color: var(--тихий-тёмный); }
.pd26-tarif__cena { font-family: var(--заголовки); font-size: 36px; line-height: 1;
                    color: var(--текст-тёмный); white-space: nowrap; }
.pd26-tarif__period { margin: 6px 0 14px; font-family: var(--цифры); font-size: 12.5px;
                      letter-spacing: .04em; color: var(--тихий-тёмный); }
.pd26-tarif__podarok {
    margin-bottom: 20px;
    padding: 11px 14px;
    border-radius: 0;
    background: rgba(12, 161, 245, .1);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--синий-текст);
}

.pd26-tarif ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 11px; }
.pd26-tarif li { position: relative; padding-left: 27px; font-size: 15.5px; line-height: 1.45;
                 color: #2c3a4f; }
.pd26-tarif li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 15px;
    height: 9px;
    border-left: 2px solid var(--синий);
    border-bottom: 2px solid var(--синий);
    transform: rotate(-45deg);
}

.pd26-tarif .pd26-knopka { margin-top: auto; }

@media (max-width: 980px) { .pd26-tarify { grid-template-columns: 1fr; } }

/* ─────────────────────────── состав работ ───────────────────────────
 * Слово Романа 11.09.2026: сделать блок человекоподобным, понятным и полезным, чтобы клиент
 * увидел все преимущества услуги. Поэтому пункт раскрывается в четыре слоя: зачем это нужно,
 * что именно делаем, что клиент получит и как он это проверит.
 */
.pd26-rabota { border-bottom: 1px solid var(--грань-светлая); }
.pd26-rabota summary {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 22px 4px;
    font-family: var(--заголовки);
    font-size: clamp(19px, 1.9vw, 25px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--текст-тёмный);
    cursor: pointer;
    list-style: none;
}

.pd26-rabota summary::-webkit-details-marker { display: none; }
.pd26-rabota summary:hover .pd26-rabota__imya { color: var(--синий-текст); }
.pd26-rabota__nomer { font-family: var(--цифры); font-size: 13px; color: var(--синий-текст);
                      min-width: 30px; flex: 0 0 auto; }
.pd26-rabota__imya { flex: 1 1 auto; transition: color .16s ease; }
.pd26-rabota__plus { margin-left: auto; width: 26px; height: 26px; position: relative;
                     flex: 0 0 auto; align-self: center; }
.pd26-rabota__plus::before, .pd26-rabota__plus::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: var(--синий-текст);
    transition: transform .2s ease;
}

.pd26-rabota__plus::after { transform: rotate(90deg); }
.pd26-rabota[open] .pd26-rabota__plus::after { transform: rotate(0); }

.pd26-rabota__telo { padding: 0 4px 28px 48px; }
.pd26-rabota__zachem { max-width: 760px; font-size: 16.5px; color: var(--тихий-тёмный); }

/* Список работ в две колонки: семь направлений по пять пунктов в столбик читались бы как
 * простыня. На узком экране колонка одна. */
.pd26-rabota__spisok {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
}

.pd26-rabota__spisok li {
    position: relative;
    padding-left: 26px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--текст-тёмный);
}

.pd26-rabota__spisok li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--синий);
    border-bottom: 2px solid var(--синий);
    transform: rotate(-45deg);
}

.pd26-rabota__vygody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pd26-rabota__vygoda {
    padding: 15px 18px;
    border-radius: 0;
    background: var(--светлый);
    border-left: 3px solid var(--синий);
}

.pd26-rabota__vygoda b {
    display: block;
    margin-bottom: 5px;
    font-family: var(--цифры);
    font-size: 11.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--синий-текст);
}

.pd26-rabota__vygoda span { font-size: 15.5px; line-height: 1.45; color: var(--текст-тёмный); }

@media (max-width: 820px) {
    .pd26-rabota__telo { padding-left: 4px; }
    .pd26-rabota__spisok, .pd26-rabota__vygody { grid-template-columns: 1fr; }
}

/* ─────────────────────────── как идёт работа ─────────────────────────── */
.pd26-mesyacy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pd26-mesyac {
    padding: 24px 22px;
    border: 1px solid var(--грань);
    border-radius: var(--скругление);
    background: rgba(12, 20, 79, .58);
}

.pd26-mesyac--podarok {
    border-color: rgba(111, 208, 255, .75);
    background: linear-gradient(165deg, rgba(12, 161, 245, .34), rgba(12, 161, 245, .1));
}

.pd26-mesyac b { display: block; margin-bottom: 10px; font-family: var(--цифры); font-size: 12.5px;
                 letter-spacing: .08em; text-transform: uppercase; color: var(--синий-свет); }
.pd26-mesyac span { font-size: 15.5px; color: var(--текст-тихий); }
.pd26-mesyac--podarok span { color: #fff; }

@media (max-width: 900px) { .pd26-mesyacy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pd26-mesyacy { grid-template-columns: 1fr; } }

/* ─────────────────────────── отзывы ─────────────────────────── */
.pd26-imena { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.pd26-imya {
    padding: 8px 15px;
    border: 1px solid var(--грань-светлая);
    border-radius: 0;
    font-family: var(--цифры);
    font-size: 12.5px;
    letter-spacing: .03em;
    color: var(--тихий-тёмный);
    background: #fff;
}

.pd26-otzyvy { position: relative; }
.pd26-otzyvy__lenta {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    /* 🔴 ВТОРАЯ ОСЬ ЗАКРЫТА ЯВНО. Без этой строки браузер делает `overflow-y` равным `auto`,
     * лента становится вертикально прокручиваемой и забирает колесо у страницы: читатель
     * застревает на скане письма. Куплено живым дефектом на старой версии 11.09.2026. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.pd26-otzyvy__lenta::-webkit-scrollbar { display: none; }
.pd26-otzyv {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 30px;
    padding: 28px;
    border: 1px solid var(--грань-светлая);
    border-radius: var(--скругление);
    background: #fff;
}

.pd26-otzyv img { border-radius: 0; border: 1px solid var(--грань-светлая); }
.pd26-otzyv h3 { color: var(--текст-тёмный); }
.pd26-otzyv p { color: var(--тихий-тёмный); font-size: 16px; }
.pd26-otzyvy__pult { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.pd26-otzyvy__strelka {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--грань-светлая);
    border-radius: 0;
    background: #fff;
    font-size: 20px;
    color: var(--текст-тёмный);
    cursor: pointer;
}

.pd26-otzyvy__strelka:hover { border-color: var(--синий); color: var(--синий-текст); }
.pd26-otzyvy__strelka[aria-disabled="true"] { opacity: .4; }
.pd26-otzyvy__schet { font-family: var(--цифры); font-size: 13px; color: var(--тихий-тёмный); }

@media (max-width: 760px) {
    .pd26-otzyv { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .pd26-otzyv img { max-width: 240px; }
}

/* ─────────────────────────── условия ─────────────────────────── */
.pd26-usloviya { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pd26-uslovie {
    padding: 24px;
    border: 1px solid var(--грань);
    border-radius: var(--скругление);
    background: rgba(12, 20, 79, .58);
}

.pd26-uslovie b { display: block; margin-bottom: 8px; font-family: var(--цифры); font-size: 12.5px;
                  letter-spacing: .08em; text-transform: uppercase; color: var(--синий-свет); }
.pd26-uslovie span { color: var(--текст-тихий); font-size: 15.5px; }

@media (max-width: 760px) { .pd26-usloviya { grid-template-columns: 1fr; } }

/* ─────────────────────────── финал ─────────────────────────── */
.pd26-final { position: relative; overflow: hidden;
               background: linear-gradient(196deg, var(--сапфир) 0%,
                                           var(--сапфир-мягкий) 62%, var(--синий-глубокий) 100%); }
.pd26-final__svet { width: 700px; height: 700px; bottom: -320px; left: 50%;
                    transform: translateX(-50%);
                    background: radial-gradient(circle, #35b6ff 0%, transparent 70%);
                    opacity: .42; }
.pd26-final__telo { position: relative; display: grid;
                    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 46px;
                    align-items: center; }

@media (max-width: 940px) { .pd26-final__telo { grid-template-columns: 1fr; gap: 30px; } }

/* ─────────────────────────── гарантия ───────────────────────────
 * 🔴 БЛОК СТОИТ РЯДОМ С ФОРМОЙ, А НЕ ОТДЕЛЬНОЙ СЕКЦИЕЙ, И ЭТО НЕ ВКУСОВЩИНА. Гарантия снимает
 * возражение ровно в тот момент, когда человек решает, оставлять номер или нет. Унесённая в
 * середину страницы, она до этого момента не доживает. Слово Романа 11.09.2026, текст трёх
 * пунктов утверждён им дословно и живёт в `sobrat.py`, константа ГАРАНТИЯ.
 *
 * Левая полоса вместо рамки: на сапфире рамка по всем четырём сторонам читается как ещё одна
 * карточка и спорит с формой справа, а полоса только помечает блок. Углы прямые, как везде. */
.pd26-garantiya {
    margin-top: 30px;
    padding: 20px 0 20px 22px;
    border-left: 3px solid var(--синий);
    background: rgba(255, 255, 255, .05);
    border-radius: var(--скругление);
}
.pd26-garantiya__zagolovok {
    display: block;
    margin-bottom: 12px;
    font-family: var(--заголовки);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
}
.pd26-garantiya ul { margin: 0; padding: 0; list-style: none; }
.pd26-garantiya li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--текст-тихий);
}
.pd26-garantiya li:last-child { margin-bottom: 0; }
/* Галочка рисуется рамкой, а не знаком из шрифта: иконочного шрифта на странице нет, а знак
 * «✓» из системного набора у части шрифтов отсутствует и подменяется квадратом. */
.pd26-garantiya li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--синий-свет);
    border-bottom: 2px solid var(--синий-свет);
    transform: rotate(-45deg);
}

@media (max-width: 940px) { .pd26-garantiya { margin-top: 24px; } }


/* ─────────────────────────── липкая панель ───────────────────────────
 * До переделки единственная форма стояла после 92% прокрутки: на телефоне это восемь экранов
 * без единой точки контакта. */
.pd26-nizhnyaya {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 45;
    display: none;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--грань);
    border-radius: 0;
    background: rgba(12, 20, 79, .95);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    transform: translateY(140%);
    transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}

.pd26-nizhnyaya--vidna { transform: translateY(0); }
.pd26-nizhnyaya__cena { font-size: 13px; color: var(--текст-тихий); line-height: 1.25; }
.pd26-nizhnyaya__cena b { display: block; font-family: var(--заголовки); font-size: 19px;
                          color: #fff; white-space: nowrap; }
.pd26-nizhnyaya .pd26-knopka { margin-left: auto; min-height: 46px; padding: 12px 18px;
                               font-size: 15px; }

@media (max-width: 860px) { .pd26-nizhnyaya { display: flex; } body { padding-bottom: 84px; } }

/* ─────────────────────────── окно заявки ─────────────────────────── */
.pd26-okno {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(12, 20, 79, .88);
    backdrop-filter: blur(6px);
}

.pd26-okno--otkryto { display: flex; }
.pd26-okno__telo { position: relative; width: 100%; max-width: 470px; padding: 34px 32px 30px;
                   border: 1px solid var(--грань); border-radius: var(--скругление);
                   background: linear-gradient(165deg, var(--сапфир-мягкий), var(--сапфир)); }
.pd26-okno h2 { font-size: 27px; margin-bottom: 8px; }
.pd26-okno__podpis { margin-bottom: 22px; font-size: 15px; color: var(--текст-тихий); }
.pd26-okno__zakryt { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px;
                     border: 0; background: transparent; font-size: 26px; color: var(--текст-тихий);
                     cursor: pointer; }
.pd26-okno__zakryt:hover { color: #fff; }

/* ─────────────────────────── появление блоков ───────────────────────────
 * 🔴 ЭТОГО ПРИЁМА ЗДЕСЬ НЕТ НАМЕРЕННО, И ЭТО РЕШЕНИЕ, А НЕ ЗАБЫВЧИВОСТЬ.
 *
 * Блоки, выплывающие при прокрутке, пробовались дважды. Сперва через `IntersectionObserver`:
 * на живой странице из двенадцати блоков показался один, остальные одиннадцать остались с
 * нулевой прозрачностью, то есть посетитель видел пустые экраны. Затем через прокруточную
 * анимацию CSS (`animation-timeline: view()`), которую браузер поддерживает: невидимых стало
 * одиннадцать из двенадцати.
 *
 * Общее у обеих попыток одно: украшение ломало саму страницу. Цена ошибки тут это не «менее
 * красиво», а «человек не увидел цены и ушёл». Класс `pd26-poyavlenie` в разметке оставлен:
 * он ничего не делает и служит зацепкой, если к приёму вернутся с нормальным стендом.
 *
 * Вау на этой странице держится на том, что ломаться не умеет: типографика, свет, зерно,
 * стеклянные карточки, счёт чисел и тёмная сцена.
 */

/* Уважение к системной настройке «меньше движения»: анимации и плавная прокрутка выключаются. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .pd26-poyavlenie { opacity: 1; transform: none; animation: none; }
}

/* ─────────────────────────── подвал сайта ───────────────────────────
 * 🔴 ПОДВАЛ НЕ НАШ. Он приходит из темы и должен выглядеть ровно как на optimism.ru: это общий
 * низ сайта, а не часть лендинга. Шрифты для него подключены в `shrifty.css`, здесь только
 * защита от нашего же влияния.
 *
 * 🔴 ИКОНКИ ИСКЛЮЧЕНЫ ИЗ ПРАВИЛА ЯВНО, И ЭТО КУПЛЕНО ОШИБКОЙ. Прежняя редакция задавала
 * семейство через `footer *`, то есть перебивала и псевдоэлементы иконок, которые набраны
 * шрифтом `optimizm`. Вместо значков соцсетей показывались буквы. Теперь под правило не
 * попадает ничто с классом иконки.
 */
/* 🔴 ПОРЯДОК ПРАВИЛ ЗДЕСЬ РЕШАЕТ БОЛЬШЕ, ЧЕМ ИХ СОДЕРЖАНИЕ. Прежняя редакция ставила Joanna
 * через `footer span:not([class*="icon"])`, и это правило выигрывало у `footer .title-point`
 * по специфичности: тег плюс атрибут весомее одного класса. В итоге заголовки колонок
 * («КОМПАНИЯ», «ПРОДВИЖЕНИЕ САЙТОВ») набирались Joanna, а на главной они набраны DINPro.
 * Роман поймал это глазом по снимку: буквы у нас заметно шире.
 *
 * Поэтому селектор `span` из общего правила убран вовсе: Joanna достаётся тексту и спискам, а
 * всё, что тема помечает своими классами, остаётся на её же гарнитуре. */
footer,
footer p,
footer li,
footer div:not([class*="icon"]) {
    font-family: 'JoannaSansNova', Arial, Helvetica, sans-serif;
}

footer .title-point,
footer .link-underleft,
footer .link-underleft span,
footer .title-point span,
footer .btn,
footer .list-first,
footer .list-second {
    font-family: 'DINPro-CondBold', 'Arial Narrow', Arial, sans-serif;
}

/* 🔴 КЕГЛЬ ТОЖЕ ПРИВЕДЁН К ГЛАВНОЙ. Замер: заголовок колонки там 17.6px при интерлиньяже
 * 24.64px, пункт меню 17.6px при 22.88px. У нас было по 20px, потому что тема блога считает
 * свои `em` от другого корневого размера. Разница в два с лишним пункта на капсе видна сразу,
 * а Роман просил единообразия с сайтом. */
footer .title-point {
    font-size: 17.6px;
    line-height: 24.64px;
    letter-spacing: 1.1px;
}

footer .link-underleft {
    font-size: 17.6px;
    line-height: 22.88px;
    letter-spacing: 1px;
}

/* Иконочный шрифт трогать нельзя: на нём нарисованы стрелки и значки соцсетей. */
footer [class*="icon"],
footer [class*="icon"]::before,
footer [class*="icon"]::after {
    font-family: 'optimizm' !important;
}

footer {
    font-size: 16px;
    line-height: 1.21;
}

/* 🔴 КНОПКИ ПОДВАЛА ОБРЕЗАЛИ СВОИ ЖЕ ПОДПИСИ. Замер: «ПОЛУЧИТЬ АУДИТ» требует 215 пикселей при
 * ширине кнопки 163, «ПЕРЕЗВОНИТЕ МНЕ» требует 233 при 166. Корень лечится подключением
 * фирменного шрифта выше (он уже фирменного Arial), но запас нужен и на случай, если файл не
 * доедет: подпись ужимается по месту, а не вылезает за край. */
footer .btn {
    font-size: clamp(13px, 1.15vw, 18px);
    letter-spacing: .04em;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
    line-height: 1.15;
}

/* 🔴 «ПЕРЕЗВОНИТЕ МНЕ» ЛОМАЛОСЬ НА ДВЕ СТРОКИ, и это не то же самое, что обрезка. Колонка
 * «Остались вопросы» самая узкая в ряду: кнопке там 166 пикселей при подписи в пятнадцать
 * знаков. Перенос запрещён выше, поэтому здесь подпись просто набирается мельче: лучше на
 * кегль меньше в одну строку, чем в две вразнобой с соседями. */
footer .row.last-line .btn {
    font-size: clamp(12px, 1vw, 15px);
    padding-left: 10px;
    padding-right: 10px;
}

/* Блок «Остались вопросы» шёл в две строки и ломал ряд. Заголовку хватает одной. */
footer .title-point {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    footer .title-point { white-space: normal; }
}

/* Счётчик дней в шапке и над заголовком: никаких мигающих цифр, просто строка текста, которая
 * обновляется раз в сутки. Слово Романа 11.09.2026: универсальный смысл «до конца месяца». */
[data-pd26-srok] {
    white-space: nowrap;
}

/* 🔴 Контр-правило к иконочному шрифту подвала, 15.09.2026, слово Романа «исправь».
 * Селектор выше ловит ЛЮБОЙ класс с подстрокой «icon», включая ссылку pdf-icon в подвале
 * сайта («27 причин работать с нами»). Её текст набирался иконочным шрифтом и слипался в
 * кашу: замер дал строку 88 пикселей вместо 101 у здоровой страницы. Иконка у этой ссылки
 * рисуется фоновой картинкой, шрифт ей не нужен вовсе.
 * Правка уже стоит на бою, здесь она затем, чтобы следующая выкатка её не затёрла. */
footer a.pdf-icon,
footer a.pdf-icon span,
footer a.pdf-icon::before,
footer a.pdf-icon::after {
    font-family: JoannaSansNova, Helvetica, Arial, sans-serif !important;
}