/* =============================================================================
   litedesk.ru: свои стили поверх замороженного elementor.css.

   elementor.css сгенерирован из CSS прежнего сайта и руками не правится.
   Всё, что сайту понадобилось сверх него, живёт здесь: шрифты с собственного
   домена, замены иконочных шрифтов, сбросы для кнопок, лайтбокс, форма в
   состояниях отправки, внутренние страницы (политика, заявка, 404), шапка и
   подвал (свёрстаны заново, в конце файла).
   ========================================================================== */

/* --- Шрифты -----------------------------------------------------------------
   Прежде шли с Google Fonts. Теперь свои файлы: без внешнего запроса на
   каждой странице и без передачи IP посетителя в Google. Оба семейства
   переменные (один файл на все начертания), поэтому диапазон весов.
   ⚠ Имена файлов обязаны совпадать с preload в inc/layout.php. */

@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/mulish-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/mulish-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mulish';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/mulish-italic-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Mulish';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/mulish-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Иконки -----------------------------------------------------------------
   Восемь SVG-иконок главной несли внутри себя <style>.cls-1{fill:…}</style>:
   две белым, шесть красным. Такой <style> действует на весь документ, и
   побеждало последнее правило, то есть на живом сайте ВСЕ восемь были
   красными. Здесь это записано одним правилом, как оно и выглядело. */
.cls-1 { fill: #e72b43; }

/* Инлайн-SVG вместо глифов Font Awesome: встают на место символа шрифта. */
.ld-ico { display: inline-block; height: 1em; vertical-align: -.125em; overflow: visible; }
.btn-icon { display: inline-block; font-style: normal; line-height: 1; }
.elementor-carousel-image-overlay i { font-style: normal; line-height: 1; }

/* --- Попапы -----------------------------------------------------------------
   ⚠ `.elementor-popup-modal { display: flex }` из Elementor перебивает
   `[hidden]` темы (одна специфичность, правило Elementor позже), и без этой
   строки оба попапа были бы открыты поверх страницы с первой загрузки. */
.elementor-popup-modal[hidden],
.ld-lb[hidden] { display: none !important; }

/* Второй попап (политика из подписи формы) ложится поверх первого. */
#elementor-popup-modal-357 { z-index: 10000; }

/* Крестик: теперь <button>, а тема Hello красит все кнопки розовой рамкой
   и заливкой на наведении. У Elementor это была ссылка без оформления. */
.elementor-popup-modal .dialog-close-button,
.elementor-popup-modal .dialog-close-button:hover,
.elementor-popup-modal .dialog-close-button:focus {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    /* Скрипт ставит фокус на крестик при открытии. Кольцо темы Hello
       (button:focus, 5px) у ссылки-крестика Elementor не появлялось; с
       клавиатуры рамка остаётся, см. :focus-visible ниже. */
    outline: 0;
}
.elementor-popup-modal .dialog-close-button i { font-style: normal; line-height: 1; display: inline-flex; }
/* Крестик попадает пальцем: поле 44×44 вместо 24×24 по размеру значка.
   Центр значка остаётся там же, где был (20 + 12 = 10 + 22 px от угла). */
.elementor-popup-modal .dialog-close-button {
    width: 44px;
    height: 44px;
    top: 10px;
    right: 10px;
    align-items: center;
    justify-content: center;
}
.elementor-popup-modal .dialog-close-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Выход с затуханием, как exit_animation у попапов Elementor: гаснет окно,
   затемнение исчезает после. Длительность та же, что у входа (0,5 с у формы,
   1 с у политики, правила post-369 и post-357). */
@keyframes ldFadeOut { from { opacity: 1; } to { opacity: 0; } }
.elementor-popup-modal .dialog-widget-content.ld-fadeout {
    animation-name: ldFadeOut;
    animation-fill-mode: forwards;
}
/* Гаснущее окно клики не ловит. ⚠ !important и звёздочка обязательны:
   корню попапа Elementor ставит pointer-events:all правилом с id
   (#elementor-popup-modal-369), а содержимому и крестику своими правилами. */
.elementor-popup-modal.ld-closing,
.elementor-popup-modal.ld-closing * { pointer-events: none !important; }

/* Прокрутка страницы под открытым попапом (prevent_scroll у Elementor). */
html.ld-noscroll, html.ld-noscroll body { overflow: hidden; }

/* Ссылки в тексте политики: у темы по умолчанию розовые (#c36). */
.elementor-357 .elementor-widget-text-editor a,
.ld-text a { color: var(--e-global-color-accent); }
.elementor-357 .elementor-widget-text-editor a:hover,
.ld-text a:hover { color: var(--e-global-color-bd020b8); text-decoration: underline; }

/* --- Слайдер ----------------------------------------------------------------
   Точки пагинации теперь <button> (у Swiper были span с role=button). */
.swiper-pagination-bullet,
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet:focus {
    border: 0;
    padding: 0;
    color: inherit;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
}
.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover,
.swiper-pagination-bullet-active:focus {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-pagination-bullet:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }
/* Листание: сдвиг .swiper-wrapper задаёт site.js, анимация как у Swiper (500 мс). */
.elementor-main-swiper .swiper-wrapper { transition: transform .5s ease; }
/* Промежуток между кадрами: у виджета space_between 0 на десктопе и 10 px
   на планшете и телефоне. Swiper ставил его отступом справа у кадра. */
@media (max-width: 1024px) {
    .elementor-main-swiper .swiper-slide { margin-right: 10px; }
}

/* --- Форма ------------------------------------------------------------------ */

/* Поле-ловушка для ботов. Не display:none: часть ботов такие поля
   пропускает, а увезённое за экран заполняет. */
.ld-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Пока ответ не пришёл, кнопку второй раз не нажать. */
.wpcf7-form.submitting .wpcf7-submit { opacity: .7; pointer-events: none; }

/* Сообщение об ответе на тёмном фоне попапа. На прежнем сайте текст был
   #333 от темы, то есть тёмным по тёмному; сделан светлым. Выравнивание и
   рамки цветов CF7 прежние. */
.elementor-369 .wpcf7-response-output { color: #fefefe; }
.wpcf7 form.init .wpcf7-response-output:empty,
.wpcf7-response-output:empty { display: none; }

/* --- Лайтбокс ---------------------------------------------------------------
   Замена лайтбокса Elementor для скриншотов из блока «Как работает». */
.ld-lb {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 60px;
    background: rgba(0, 0, 0, .8);             /* как .dialog-type-lightbox у Elementor */
}
.ld-lb__img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3);
}
.ld-lb__close,
.ld-lb__nav,
.ld-lb__close:hover,
.ld-lb__nav:hover,
.ld-lb__close:focus,
.ld-lb__nav:focus {
    position: absolute;
    background: none;
    border: 0;
    padding: 10px;
    color: rgba(238, 238, 238, .9);
    line-height: 1;
    border-radius: 0;
    outline: 0;
}
.ld-lb__close:hover,
.ld-lb__nav:hover { color: #fff; }
.ld-lb__close { top: 10px; right: 10px; font-size: 28px; }
.ld-lb__nav { top: 50%; transform: translateY(-50%); font-size: 26px; }
.ld-lb__nav--prev { left: 10px; }
.ld-lb__nav--prev .ld-ico { transform: scaleX(-1); }
.ld-lb__nav--next { right: 10px; }
.ld-lb__close:focus-visible,
.ld-lb__nav:focus-visible { outline: 2px solid #fff; }
@media (max-width: 767px) {
    .ld-lb { padding: 50px 10px; }
    .ld-lb__nav { top: auto; bottom: 10px; transform: none; }
}

/* --- Внутренние страницы -------------------------------------------------------
   Первый экран тёмный, с тем же фоном, что у главной. Шапка сайта лежит поверх
   его верхнего поля: отступ сверху равен её высоте (--ld-hh, раздел «Шапка»).
   ⚠ Правила для h1/h2 с двумя классами не случайно: у набора стилей Elementor
   `.elementor-kit-13 h1` и `h2` той же специфичности, что класс плюс тег, и
   простой класс им проигрывает. */
.ld-wrap {
    max-width: 1210px;
    margin: 0 auto;
    padding: 0 20px;
}
.lp-hero,
.ld-pagehead {
    padding-top: var(--ld-hh);
    background: #0c0c0c url('../img/hero-bg.jpg') center / cover no-repeat;
    color: var(--e-global-color-b5bca6c);
}

.lp-hero__in { padding-top: 40px; padding-bottom: 80px; }
.lp-crumbs { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: var(--e-global-color-cac1ee4); }
.lp-crumbs a { color: var(--e-global-color-cac1ee4); text-decoration: none; }
.lp-crumbs a:hover { color: #fff; text-decoration: underline; }
.lp-crumbs__sep { margin: 0 8px; opacity: .5; }
.lp-hero .lp-hero__title {
    max-width: 920px;
    margin: 0 0 20px;
    font-family: 'Mulish', sans-serif;
    font-size: 50px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--e-global-color-b5bca6c);
}
.lp-hero__lead { max-width: 760px; margin: 0 0 30px; font-size: 19px; line-height: 1.6; color: var(--e-global-color-cac1ee4); }
.lp-hero__meta { margin: -10px 0 24px; font-size: 14px; color: var(--e-global-color-cac1ee4); opacity: .8; }
.lp-hero__cta { margin: 0; }

/* Красная полоса с бегущей строкой LITE DESK, как под первым экраном главной. */
.lp-runline { height: 60px; background: var(--e-global-color-accent) url('../img/run-line.png') left center no-repeat; }

.ld-pagehead__in { padding-top: 40px; padding-bottom: 60px; }
.ld-pagehead .ld-pagehead__title {
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-size: 45px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--e-global-color-b5bca6c);
}
.ld-pagehead__lead { margin: 20px 0 30px; font-size: 18px; color: var(--e-global-color-cac1ee4); }
.ld-page { padding: 50px 0 70px; }
.ld-text { max-width: 860px; }
.ld-text h3 { margin: 30px 0 12px; font-family: 'Mulish', sans-serif; font-size: 22px; font-weight: 700; }
.ld-text p { line-height: 1.6; }

/* Кнопка «Оставить заявку» на внутренних страницах: цвета и тень кнопки шапки.
   a.ld-btn, а не .ld-btn: тема подчёркивает ссылки в .page-content правилом
   той же специфичности, что класс плюс тег. */
a.ld-btn,
a.ld-btn:visited {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 25px;
    text-decoration: none;
    color: var(--e-global-color-ef3b5be);
    background: var(--e-global-color-accent);
    box-shadow: 0 -3px 56px 6px rgba(231, 43, 67, .55);
    transition: box-shadow .3s, background-color .3s, color .3s;
}
a.ld-btn:hover,
a.ld-btn:focus { color: #fff; background: var(--e-global-color-bd020b8); box-shadow: 0 0 10px 0 rgba(231, 43, 67, .36); }
a.ld-btn .btn-icon { margin-left: 10px; font-size: .9em; }
/* Светлая кнопка на красном, как в блоке «Внедрение за 1 день!» главной. */
a.ld-btn--light,
a.ld-btn--light:visited { color: var(--e-global-color-bd020b8); background: var(--e-global-color-b5bca6c); box-shadow: 0 -3px 56px 6px rgba(255, 241, 243, .28); }
a.ld-btn--light:hover,
a.ld-btn--light:focus { color: var(--e-global-color-accent); background: #fff; box-shadow: 0 0 10px 0 rgba(255, 255, 255, .5); }

/* --- Блоки посадочных и статей (inc/blocks.php) ------------------------------- */
.lp-sec { padding: 70px 0; }
.lp-sec--grey { background: var(--e-global-color-ef3b5be); }
.lp-sec .lp-sec__title { margin: 0 0 30px; line-height: 1.15; }
.lp-sec__intro { max-width: 760px; margin: -10px 0 30px; font-size: 18px; line-height: 1.6; color: var(--e-global-color-secondary); }
.lp-text { max-width: 820px; }
.lp-text p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: var(--e-global-color-18dff53); }

/* Карточки с «искрой»: белые на сером, серые на белом. */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-card { padding: 28px 26px; background: var(--e-global-color-b5bca6c); border-radius: 20px; }
.lp-sec:not(.lp-sec--grey) .lp-card { background: var(--e-global-color-ef3b5be); }
.lp-card__icon { display: inline-flex; margin-bottom: 14px; font-size: 40px; color: var(--e-global-color-accent); }
.lp-card .lp-card__title { margin: 0 0 10px; font-family: 'Mulish', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--e-global-color-primary); }
.lp-card__text { margin: 0; line-height: 1.6; color: var(--e-global-color-18dff53); }

/* Шаги с контурными номерами, как «01 02 03» на главной. */
.lp-steps { margin: 0; padding: 0; list-style: none; }
.lp-steps > li.lp-step {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    margin: 0;
    padding: 26px 0;
    border-bottom: 1px solid var(--e-global-color-cac1ee4);
}
.lp-step__num {
    font-family: 'Mulish', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #0c0c0cc2;
}
.lp-step .lp-step__title { margin: 6px 0 8px; font-family: 'Mulish', sans-serif; font-size: 22px; font-weight: 700; color: var(--e-global-color-primary); }
.lp-step__text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--e-global-color-18dff53); }

/* Список с галочками. */
.lp-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; margin: 0; padding: 0; list-style: none; }
.lp-checks > li { display: flex; gap: 14px; margin: 0; padding: 0; font-size: 17px; line-height: 1.55; color: var(--e-global-color-18dff53); }
.lp-checks__icon { flex: none; margin-top: 4px; font-size: 16px; color: var(--e-global-color-accent); }

/* Вопросы и ответы: <details> раскрывается без скрипта. */
.lp-faq { max-width: 900px; border-top: 1px solid var(--e-global-color-cac1ee4); }
.lp-faq__item { border-bottom: 1px solid var(--e-global-color-cac1ee4); }
.lp-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    list-style: none;
    cursor: pointer;
    font-family: 'Mulish', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--e-global-color-primary);
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q:hover { color: var(--e-global-color-accent); }
.lp-faq__icon { flex: none; font-size: 16px; color: var(--e-global-color-accent); transition: transform .2s; }
.lp-faq__item[open] .lp-faq__icon { transform: rotate(45deg); }
.lp-faq__a p { margin: 0 0 22px; font-size: 17px; line-height: 1.65; color: var(--e-global-color-18dff53); }

/* Красная полоса с призывом. */
.lp-cta { padding: 60px 0; background: var(--e-global-color-accent); color: var(--e-global-color-7f556a5); }
.lp-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.lp-cta .lp-cta__title { margin: 0 0 12px; line-height: 1.15; color: var(--e-global-color-b5bca6c); }
.lp-cta__text p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--e-global-color-7f556a5); }
.lp-cta__btn { flex: none; margin: 0; }

/* Карточки-ссылки (перелинковка). */
/* Ровно три колонки от планшета: при auto-fit три карточки на 768 px вставали
   2 + 1, а пять карточек хаба на десктопе 4 + 1 (одна сирота в ряду). Уже
   768 px карточки в одну колонку. */
.lp-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .lp-links { gap: 16px; } }
@media (max-width: 767px) { .lp-links { grid-template-columns: minmax(0, 1fr); } }
a.lp-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 26px;
    background: var(--e-global-color-b5bca6c);
    border-radius: 20px;
    color: var(--e-global-color-primary);
    text-decoration: none;
    transition: box-shadow .3s, transform .3s;
}
.lp-sec:not(.lp-sec--grey) a.lp-link { background: var(--e-global-color-ef3b5be); }
a.lp-link:hover { color: var(--e-global-color-primary); box-shadow: 0 10px 30px rgba(12, 12, 12, .08); transform: translateY(-2px); }
.lp-link__title { font-family: 'Mulish', sans-serif; font-size: 20px; font-weight: 800; line-height: 1.3; }
.lp-link__text { flex: 1; line-height: 1.55; color: var(--e-global-color-secondary); }
.lp-link__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--e-global-color-accent); }
.lp-link__more .ld-ico { font-size: .8em; }

/* Статья. */
.lp-article { max-width: 820px; }
.lp-article .lp-article__lead { font-size: 19px; }
.lp-article p,
.lp-article li { font-size: 17px; line-height: 1.7; color: var(--e-global-color-18dff53); }
.lp-article p { margin: 0 0 18px; }
.lp-article h2 { margin: 44px 0 16px; font-size: 32px; line-height: 1.2; }
.lp-article h3 { margin: 30px 0 12px; font-family: 'Mulish', sans-serif; font-size: 22px; font-weight: 700; color: var(--e-global-color-primary); }
.lp-article ul,
.lp-article ol { margin: 0 0 20px; padding-left: 1.3em; }
.lp-article li { margin: 6px 0; padding-left: 6px; }
.lp-article li::marker { color: var(--e-global-color-accent); }
.lp-article a { color: var(--e-global-color-accent); }
/* Таблица сравнения в статье (analog-zendesk). На узком экране листается
   сама, страница вбок не едет. */
.lp-article .lp-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 0 0 24px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.lp-article .lp-table th,
.lp-article .lp-table td { padding: 12px 14px; border-bottom: 1px solid #e3e3e3; text-align: left; vertical-align: top; color: var(--e-global-color-18dff53); }
.lp-article .lp-table th { font-family: 'Mulish', sans-serif; font-weight: 700; color: var(--e-global-color-primary); border-bottom-width: 2px; }
.lp-article .lp-table td:first-child { width: 36%; font-weight: 500; }
/* Чек-лист в статье (kak-vybrat-help-desk): пустые квадраты вместо точек,
   чтобы список можно было распечатать и отмечать. */
.lp-article .lp-checklist { list-style: none; padding-left: 0; }
.lp-article .lp-checklist li { position: relative; padding-left: 34px; }
.lp-article .lp-checklist li::before { content: ''; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border: 2px solid var(--e-global-color-accent); border-radius: 4px; }

/* --- Страница заявки: карточка в оформлении попапа ----------------------------- */
.ld-pagehead--form .ld-pagehead__in { padding-bottom: 80px; }
.ld-formcard {
    max-width: 672px;
    margin: 0 auto;
    padding: 40px;
    background: #0c0c0c url('../img/popup-bg.jpg') center / cover no-repeat;
    box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
}
.ld-formcard .ld-formcard__title {
    margin: 0 0 20px;
    font-family: 'Mulish', sans-serif;
    font-size: 45px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    color: var(--e-global-color-b5bca6c);
}
.ld-formcard__lead { margin: 0 0 30px; text-align: center; color: var(--e-global-color-b5bca6c); }
.ld-formcard__back { text-align: center; }
.ld-formcard__back a { color: var(--e-global-color-bd020b8); }

/* «Главная» из темы Hello над первым экраном главной (inc/layout.php): не
   <h1>, но размер h1 темы и набора Elementor повторён точно, чтобы высота
   блока и с ней положение первого экрана не изменились. */
.page-header .ld-ghost-title {
    font-family: 'Mulish', sans-serif;
    font-size: 60px;
    font-weight: 900;
    line-height: 1.2;
    margin-block-start: .5rem;
    margin-block-end: 1rem;
}

@media (max-width: 1024px) {
    .lp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .lp-hero .lp-hero__title { font-size: 34px; }
    .lp-hero__lead { font-size: 17px; }
    .lp-hero__in { padding-top: 24px; padding-bottom: 50px; }
    .lp-sec { padding: 50px 0; }
    .lp-cards,
    .lp-checks { grid-template-columns: 1fr; }
    .lp-steps > li.lp-step { grid-template-columns: 64px 1fr; gap: 14px; }
    .lp-step__num { font-size: 44px; }
    .lp-cta__in { flex-direction: column; align-items: flex-start; }
    .lp-article h2 { font-size: 26px; }
    .ld-pagehead__in { padding-top: 24px; padding-bottom: 40px; }
    .ld-pagehead .ld-pagehead__title,
    .ld-formcard .ld-formcard__title { font-size: 33px; }
    .ld-formcard { padding: 50px 20px 40px; }
}

/* =============================================================================
   Шапка (inc/header.php)

   Своя вёрстка вместо шаблона Elementor 48. Прозрачная поверх тёмного первого
   экрана и в потоке места не занимает. Со скриптом (класс ld-js на <html>)
   закреплена: при прокрутке получает тёмный фон, вниз прячется, вверх
   возвращается (site.js). Без скрипта стоит вверху страницы и уезжает с ней.

   Высота одной переменной --ld-hh: под неё отступ первого экрана внутренних
   страниц и остановка прокрутки у якорей.

   ⚠ Селекторы вида `.ld-header a.класс` не случайно: набор стилей Elementor
   красит ссылки правилом `.elementor-kit-13 a:hover` (класс, класс, тег), а
   тема Hello красит все кнопки розовой рамкой и заливкой (`[type=button]:hover`).
   ========================================================================== */
:root {
    --ld-hh: 80px;
    --ld-accent: #e72b43;
    --ld-accent-hover: #ea4d61;
    --ld-dark: #0c0c0c;
    --ld-line: rgba(255, 255, 255, .1);
}
html { scroll-padding-top: var(--ld-hh); }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
/* Цель ссылки «Перейти к содержимому»: фокус переносится, рамка не нужна. */
#content:focus { outline: 0; }

.ld-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--ld-hh);
    color: #f4f4f4;
    font-family: 'Mulish', sans-serif;
    transition: background-color .3s, box-shadow .3s, transform .3s;
}
html.ld-js .ld-header { position: fixed; }
.ld-header.is-scrolled {
    background: rgba(12, 12, 12, .94);
    box-shadow: 0 1px 0 var(--ld-line), 0 12px 32px rgba(0, 0, 0, .28);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ld-header.is-scrolled {
        background: rgba(12, 12, 12, .8);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
    }
}
.ld-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
/* Открытое меню телефона: фон сплошной, под ним панель того же цвета. */
html.ld-menu-open .ld-header {
    background: var(--ld-dark);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.ld-menu-open,
html.ld-menu-open body { overflow: hidden; }

.ld-header__in {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    max-width: 1210px;
    margin: 0 auto;
    padding: 0 20px;
}
.ld-header__logo { flex: none; display: block; line-height: 0; }
.ld-header__logo img { display: block; width: auto; height: 50px; max-width: none; }

.ld-header a:focus-visible,
.ld-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Меню строкой (шире 991 px). */
.ld-nav {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.ld-nav__list,
.ld-nav__sublist { margin: 0; padding: 0; list-style: none; }
.ld-nav__list { display: flex; align-items: center; gap: 4px; }
/* Тема задаёт всем li поля и отступ слева. */
.ld-nav__list li { margin: 0; padding: 0; }
.ld-nav__item { position: relative; display: flex; align-items: center; }

.ld-header a.ld-nav__link {
    position: relative;
    display: block;
    padding: 10px 14px;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: #f4f4f4;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    transition: color .2s, background-color .2s;
}
.ld-header a.ld-nav__link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
/* Раздел, в котором находится страница: красная черта под пунктом. */
.ld-header a.ld-nav__link.is-active { color: #fff; }
.ld-header a.ld-nav__link.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--ld-accent);
}
/* Место справа отдано стрелке. Без скрипта стрелки нет, отступ обычный. */
html.ld-js .ld-header .ld-nav__item--sub > a.ld-nav__link { padding-right: 4px; }
html.ld-js .ld-header .ld-nav__item--sub > a.ld-nav__link.is-active::after { right: 4px; }

/* Стрелка подменю: отдельная кнопка, сам пункт ведёт на страницу раздела.
   На касание так и удобнее: тап по названию открывает раздел, по стрелке
   раскрывает список. */
.ld-header button.ld-nav__toggle,
.ld-header button.ld-nav__toggle:hover,
.ld-header button.ld-nav__toggle:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    margin: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    outline: 0;
}
.ld-header button.ld-nav__toggle:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.ld-header button.ld-nav__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Без скрипта стрелка ничего не переключает (и её aria-expanded врал бы):
   список там раскрывают наведение и фокус на пункте. */
html:not(.ld-js) .ld-header button.ld-nav__toggle { display: none; }
.ld-nav__toggle .ld-ico { transform: rotate(90deg); transition: transform .2s; }
.ld-nav__item.is-open .ld-nav__toggle .ld-ico { transform: rotate(-90deg); }

/* Выпадающий список. Открывает класс is-open (site.js: наведение мыши,
   стрелка, клавиатура). Без скрипта раскрывается наведением и фокусом. */
.ld-nav__sub {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    z-index: 2;
    width: 370px;
    padding: 8px;
    background: #141414;
    border: 1px solid var(--ld-line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
/* Мостик над списком: курсор, который идёт от пункта к списку через зазор,
   остаётся «внутри» пункта, и список не закрывается. */
.ld-nav__sub::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
}
.ld-nav__item.is-open > .ld-nav__sub,
html:not(.ld-js) .ld-nav__item--sub:hover > .ld-nav__sub,
html:not(.ld-js) .ld-nav__item--sub:focus-within > .ld-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}
.ld-header a.ld-nav__sublink {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    color: #f4f4f4;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color .2s, color .2s;
}
.ld-header a.ld-nav__sublink:hover { color: #fff; background: #1f1f21; }
.ld-nav__subtitle { font-family: 'Mulish', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ld-nav__hint { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; color: #a3a3a3; }
.ld-header a.ld-nav__sublink[aria-current] .ld-nav__subtitle { color: var(--ld-accent-hover); }
.ld-header a.ld-nav__all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    padding: 12px 14px 8px;
    border-top: 1px solid var(--ld-line);
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ld-accent-hover);
    text-decoration: none;
}
.ld-header a.ld-nav__all:hover { color: #fff; }
.ld-nav__all .ld-ico { font-size: .75em; }

/* Кнопка и почта внизу панели телефона. На десктопе кнопка в строке шапки. */
.ld-nav__extra { display: none; }
.ld-header a.ld-nav__mail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #cfcfcf;
    text-decoration: none;
    transition: color .2s;
}
.ld-header a.ld-nav__mail:hover { color: #fff; }
.ld-nav__mail .ld-ico { flex: none; font-size: 18px; color: var(--ld-accent); }

.ld-header__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
/* Кнопка «Оставить заявку» шапки: та же ld-btn, компактнее. */
a.ld-btn.ld-btn--sm,
a.ld-btn.ld-btn--sm:visited {
    padding: 11px 20px;
    font-size: 14px;
    letter-spacing: .5px;
    line-height: 22px;
    white-space: nowrap;
    box-shadow: 0 6px 24px rgba(231, 43, 67, .45);
}
a.ld-btn.ld-btn--sm:hover,
a.ld-btn.ld-btn--sm:focus { box-shadow: 0 0 10px rgba(231, 43, 67, .36); }

/* Бургер: только на узком экране и только со скриптом (без него он ничего
   бы не открыл). Три черты складываются в крестик. */
.ld-header button.ld-burger,
.ld-header button.ld-burger:hover,
.ld-header button.ld-burger:focus {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    box-shadow: none;
    outline: 0;
}
.ld-header button.ld-burger:hover { background: rgba(255, 255, 255, .12); }
.ld-header button.ld-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ld-burger__box { position: relative; display: block; width: 20px; height: 14px; }
.ld-burger__box > span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top .25s, transform .25s, opacity .2s;
}
.ld-burger__box > span:nth-child(1) { top: 0; }
.ld-burger__box > span:nth-child(2) { top: 6px; }
.ld-burger__box > span:nth-child(3) { top: 12px; }
html.ld-menu-open .ld-burger__box > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
html.ld-menu-open .ld-burger__box > span:nth-child(2) { opacity: 0; }
html.ld-menu-open .ld-burger__box > span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Узкий экран: меню уходит в панель под бургером. */
@media (max-width: 991px) {
    :root { --ld-hh: 64px; }
    .ld-header__in { gap: 12px; }
    .ld-header__logo img { height: 40px; }
    .ld-header__actions { gap: 8px; }
    .ld-header__actions a.ld-btn.ld-btn--sm {
        padding: 10px 14px;
        font-size: 13px;
        letter-spacing: .3px;
        line-height: 20px;
        box-shadow: 0 4px 18px rgba(231, 43, 67, .4);
    }
    .ld-header__actions a.ld-btn.ld-btn--sm:hover,
    .ld-header__actions a.ld-btn.ld-btn--sm:focus { box-shadow: 0 0 10px rgba(231, 43, 67, .36); }
    .ld-header__actions .btn-icon { display: none; }
    html.ld-js .ld-header button.ld-burger { display: inline-flex; }

    .ld-nav { display: none; }
    html.ld-js .ld-nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100vh - var(--ld-hh));
        height: calc(100dvh - var(--ld-hh));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 20px 40px;
        background: var(--ld-dark);
        border-top: 1px solid var(--ld-line);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .25s, transform .25s, visibility 0s linear .25s;
    }
    html.ld-menu-open .ld-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }
    .ld-nav__list { display: block; max-width: 560px; margin: 0 auto; }
    .ld-nav__item { display: block; border-bottom: 1px solid var(--ld-line); }
    .ld-header a.ld-nav__link {
        padding: 16px 2px;
        font-size: 18px;
        font-weight: 700;
        border-radius: 0;
    }
    .ld-header a.ld-nav__link:hover { color: var(--ld-accent-hover); background: none; }
    .ld-header a.ld-nav__link.is-active { color: var(--ld-accent-hover); }
    .ld-header a.ld-nav__link.is-active::after { display: none; }
    html.ld-js .ld-header .ld-nav__item--sub > a.ld-nav__link { padding-right: 2px; }
    /* Подпункты в панели видны сразу, стрелка не нужна. */
    .ld-header .ld-nav button.ld-nav__toggle { display: none; }
    /* ⚠ visibility: inherit, не visible: потомок с visible внутри скрытой
       (visibility: hidden, opacity: 0) панели остаётся кликабельным, и
       невидимые ссылки подменю перехватывали бы касания по странице. */
    .ld-nav__sub,
    .ld-nav__item.is-open > .ld-nav__sub {
        position: static;
        width: auto;
        margin: -6px 0 0;
        padding: 0 0 12px;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: inherit;
        transform: none;
        transition: none;
    }
    .ld-nav__sub::before { display: none; }
    .ld-header a.ld-nav__sublink { padding: 10px 14px; }
    .ld-header a.ld-nav__sublink:hover { background: #1a1a1a; }
    .ld-nav__subtitle { font-size: 16px; font-weight: 600; }
    .ld-header a.ld-nav__all { margin: 0; padding: 10px 14px; border-top: 0; }
    html.ld-js .ld-nav__extra {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        max-width: 560px;
        margin: 28px auto 0;
    }
}
/* Самые узкие телефоны: кнопка заявки остаётся только в панели меню, иначе
   логотип, кнопка и бургер в строку не входят. Без скрипта бургера и панели
   нет, и логотип с кнопкой помещаются: там кнопка остаётся. */
@media (max-width: 359px) {
    html.ld-js .ld-header .ld-header__actions a.ld-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    /* !important: анимации заданы и в правилах с медиазапросами выше. */
    .ld-header,
    .ld-nav,
    .ld-nav__sub,
    .ld-nav__toggle .ld-ico,
    .ld-burger__box > span { transition: none !important; }
}

/* Первый экран главной на телефоне. Прежняя шапка стояла в потоке и на
   телефоне занимала около 250 px (логотип и кнопка друг под другом, высота
   росла с шириной экрана), а первый экран поднимался под неё отступом
   -240 px. Новая шапка места в потоке не занимает, поэтому отступ пересчитан:
   блок «Главная» (8 px сверху + 72 px + 16 px снизу, inc/layout.php) минус
   131 px ставит верх первого экрана на -35 px, как было на телефоне шириной
   375 px, и одинаково на любой ширине. На десктопе и планшете прежняя шапка
   в потоке места не занимала (110 px и отступ -110 px), там всё как было. */
@media (max-width: 767px) {
    .elementor-6 .elementor-element.elementor-element-446be51 { --margin-block-start: -131px; }
}

/* =============================================================================
   Подвал (inc/footer.php)

   Своя вёрстка вместо шаблона Elementor 255, в его цветах (#110F10, линия
   #292929). Слева о продукте, реквизиты и почта, справа колонки ссылок, ниже строка с
   годами, политикой и разработчиком.
   ========================================================================== */
.ld-footer {
    background: #110f10;
    color: #b3b3b3;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
.ld-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 56px;
}
.ld-footer__logo { display: inline-block; line-height: 0; }
.ld-footer__logo img { display: block; width: auto; height: 46px; max-width: none; }
.ld-footer__about { max-width: 340px; margin: 20px 0; font-size: 15px; line-height: 1.6; color: #9f9f9f; }
/* Реквизиты правообладателя и почта (inc/footer.php). */
.ld-footer__req { max-width: 340px; margin: 0; font-size: 14px; line-height: 1.6; color: #8c8c8c; }
.ld-footer .ld-footer__req a { color: #b3b3b3; text-decoration: none; transition: color .2s; }
.ld-footer .ld-footer__req a:hover { color: #fff; }

.ld-footer__nav {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
}
.ld-footer__title {
    margin: 0 0 18px;
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
.ld-footer__list { margin: 0; padding: 0; list-style: none; }
.ld-footer__list li { margin: 0 0 12px; padding: 0; }
.ld-footer__list li:last-child { margin-bottom: 0; }
.ld-footer a.ld-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    line-height: 1.45;
    color: #b3b3b3;
    text-decoration: none;
    transition: color .2s;
}
.ld-footer a.ld-footer__link:hover,
.ld-footer a.ld-footer__link[aria-current] { color: #fff; }
.ld-footer a.ld-footer__link--all { font-weight: 500; color: var(--ld-accent-hover); }
.ld-footer a.ld-footer__link--all:hover { color: #fff; }
.ld-footer__link--all .ld-ico { font-size: .7em; }

.ld-footer__bottom { background: var(--ld-dark); border-top: 1px solid #292929; }
.ld-footer__bottom-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 32px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #8c8c8c;
}
.ld-footer .ld-footer__bottom-in a { color: #b3b3b3; text-decoration: none; transition: color .2s; }
.ld-footer .ld-footer__bottom-in a:hover { color: #fff; }

@media (max-width: 991px) {
    .ld-footer__main { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 48px; padding-bottom: 44px; }
    .ld-footer__about { max-width: 520px; }
}
@media (max-width: 599px) {
    /* «Решения» во всю ширину (длинные названия), две короткие колонки рядом. */
    .ld-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .ld-footer__col:first-child { grid-column: 1 / -1; }
    .ld-footer__bottom-in { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Галка согласия с политикой в форме заявки (inc/lead-form.php). */
.wpcf7-form .ld-consent {
    margin: 10px 0 0;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    color: #9a9a9a;
}
.wpcf7-form .ld-consent .wpcf7-form-control-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}
.wpcf7-form .ld-consent__box {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}
.wpcf7-form .ld-consent .wpcf7-form-control-wrap .ld-consent__box {
    display: block;
}
.wpcf7-form .ld-consent label {
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
}
/* Замороженное правило ThePlus (.plus-cf7-label form.wpcf7-form label)
   красит каждую подпись формы синей плашкой с отступом 20 px: у подписи
   согласия получался серый текст на синем. Подпись согласия без плашки.
   Селектор сильнее исходного (0,4,2) на один класс. */
.theplus-contact-form.plus-cf7-label form.wpcf7-form .ld-consent label {
    margin: 0;
    line-height: 1.45;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
.wpcf7-form .ld-consent .wpcf7-not-valid-tip {
    flex-basis: 100%;
}
.wpcf7-form .ld-consent__box.wpcf7-not-valid {
    outline: 2px solid #dc3232;
    outline-offset: 1px;
}

/* --- Сенсорные экраны (проверка адаптивности 02.10.2026) ---------------------
   Пальцу нужно поле не меньше 44×44 px. Ссылки подвала и крошек были высотой
   16–22 px, кнопки шапки и формы 40–42 px. Только для сенсорных устройств:
   с мышью вёрстка прежняя. */
@media (hover: none) and (pointer: coarse) {
    .ld-footer__list li { margin: 0; }
    .ld-footer a.ld-footer__link { min-height: 44px; }
    .ld-footer .ld-footer__bottom-in a { display: inline-flex; align-items: center; min-height: 44px; }
    .ld-footer .ld-footer__req a { display: inline-flex; align-items: center; min-height: 44px; }
    /* Крошки: поле нажатия выше строки, а сама строка прежней высоты. */
    .lp-crumbs a { display: inline-block; padding: 14px 0; margin: -14px 0; }
    .ld-header a.ld-nav__mail,
    .ld-header a.ld-nav__all { min-height: 44px; }
    .ld-header__logo { padding: 2px 0; }
    .ld-header__actions a.ld-btn.ld-btn--sm { min-height: 44px; display: inline-flex; align-items: center; }
    .wpcf7-form .wpcf7-text,
    .wpcf7-form .wpcf7-tel,
    .wpcf7-form .wpcf7-email,
    .wpcf7-form .wpcf7-submit { min-height: 48px; }
    /* Сильнее правила ThePlus «.theplus-contact-form .wpcf7 form input[type=submit]». */
    .theplus-contact-form .wpcf7-form input.wpcf7-submit[type="submit"] { font-size: 15px; line-height: 18px; }
}
@media (hover: none) and (pointer: coarse) and (max-width: 599px) {
    .ld-footer__bottom-in { gap: 0; }
}