.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
/* Montserrat — основной шрифт сайта (Medium / SemiBold / Bold / Black) */

@font-face {
    font-family: "Montserrat";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../themes/ecomir/assets/fonts/Montserrat/Montserrat-Medium.woff") format("woff"),
         url("../themes/ecomir/assets/fonts/Montserrat/Montserrat-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Montserrat";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../themes/ecomir/assets/fonts/Montserrat/Montserrat-SemiBold.woff") format("woff"),
         url("../themes/ecomir/assets/fonts/Montserrat/Montserrat-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: "Montserrat";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../themes/ecomir/assets/fonts/Montserrat/Montserrat-Bold.woff") format("woff"),
         url("../themes/ecomir/assets/fonts/Montserrat/Montserrat-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "Montserrat";
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url("../themes/ecomir/assets/fonts/Montserrat/Montserrat-Black.woff") format("woff"),
         url("../themes/ecomir/assets/fonts/Montserrat/Montserrat-Black.ttf") format("truetype");
}

/* ==========================================================================
   Базовая дизайн-система сайта (по макету home.psd)
   Токены, сброс, контейнер, кнопки, типографика.
   Стили конкретных секций — в assets/css/blocks/*.css
   ========================================================================== */

:root {
    /* Цвета */
    --green: #009800;
    --green-dark: #008100;
    --ink: #000000;
    --title: #2d2d2d;
    --body: #2d2d2d;
    --eyebrow: #3f3f3f;
    --muted: #525252;
    --border: #d9d9d9;
    --white: #ffffff;
    --footer-bg: #010d17;
    --footer-muted: #91aabb;

    /* Сетка макета: холст 1920, контейнер 1160 */
    --container: 1160px;
    --radius-btn: 32px;

    --font-sans: "Montserrat", Arial, sans-serif;
}

/* ---------- Сброс ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--body);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

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

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

p,
h1,
h2,
h3,
h4 {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

button {
    font: inherit;
    color: inherit;
}

/* ---------- Контейнер ---------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    box-sizing: border-box;
}

@media (max-width: 1224px) {
    .container {
        padding-inline: 32px;
    }
}

@media (max-width: 640px) {
    .container {
        padding-inline: 20px;
    }
}

/* ---------- Типографика ---------- */

.eyebrow {
    color: var(--eyebrow);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.h2 {
    color: var(--ink);
    font-size: 39px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.5px;
}

.h2--black {
    font-size: 47px;
    font-weight: 900;
    line-height: 45px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.accent {
    color: var(--green);
}

/* ---------- Кнопки ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 63px;
    padding: 0 34px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--green);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
    background: var(--green-dark);
    color: var(--white);
}

.btn:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

.btn--header {
    height: 57px;
    padding: 0 20px;
    font-size: 17px;
}

/* Вторичная кнопка на тёмном фоне (тарифы 1 и 2 в макете — outline) */
.btn--light-outline {
    border: 1px solid var(--white);
    background: transparent;
    color: var(--white);
}

.btn--light-outline:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
}

.btn__arrow {
    font-weight: 700;
}

@media (max-width: 640px) {
    .h2 {
        font-size: 28px;
    }

    .h2--black {
        font-size: 32px;
        line-height: 34px;
    }
}

/* ---------- Служебное ---------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Секция «Защитные конструкции от БПЛА» (в макете — .bpla)
   ========================================================================== */

.block-bpla {
    min-height: 570px;
    padding: 60px 0 0;
    background: var(--white) url("../themes/ecomir/assets/images/design/bpla-bg.webp") center / cover no-repeat;
}

.block-bpla__title {
    margin-top: 43px;
}

.block-bpla__text {
    max-width: 430px;
    margin-top: 52px;
    font-size: 19px;
}

.block-bpla__note {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-top: 41px;
    color: var(--green);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.block-bpla__note img {
    flex: 0 0 auto;
    width: 61px;
    height: 67px;
}

@media (max-width: 1024px) {
    .block-bpla {
        min-height: 0;
        padding-bottom: 50px;
    }
}

@media (max-width: 640px) {
    .block-bpla__title {
        font-size: 28px;
        line-height: 32px;
    }

    .block-bpla__text {
        margin-top: 24px;
    }

    .block-bpla__note {
        margin-top: 24px;
        font-size: 17px;
    }
}

/* ==========================================================================
   Секция «Форма расчёта» (blocks/calc.block; в макете — .calc)
   Полоса с фоновым артворком form-bg.webp, заголовок и форма 706px:
   сетка 344x344 с зазором 18/9, поля 48px (textarea 81px), кнопка 214x56.
   Метрики — из макета (design/css/style.css, раздел CALC FORM).
   ========================================================================== */

.block-calc {
    min-height: 521px;
    padding: 24px 0 48px;
    background: var(--white) url("../themes/ecomir/assets/images/design/form-bg.webp") center / cover no-repeat;
}

.block-calc__title {
    margin-top: 26px;
    font-size: 37px;
}

.block-calc__text {
    margin-top: 21px;
    color: #484848;
    font-size: 19px;
}

.block-calc__form {
    margin-top: 20px;
    width: 706px;
    max-width: 100%;
}

.block-calc__grid {
    display: grid;
    grid-template-columns: 344px 344px;
    gap: 9px 18px;
}

.block-calc__input {
    height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #232323;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
}

.block-calc__input::placeholder {
    color: #8a8a8a;
}

.block-calc__input:focus {
    outline: none;
    border-color: var(--green);
}

.block-calc__textarea {
    height: 81px;
    padding: 12px 16px;
    align-self: start;
    resize: none;
}

.block-calc__file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    color: #484848;
    font-size: 14px;
}

.block-calc__file-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.block-calc__file-label input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.block-calc__file img {
    width: 22px;
    height: 16px;
}

/* Имя выбранного файла: пока вложения нет — блок не занимает места */
.block-calc__file-name {
    max-width: 340px;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block-calc__file-name:empty {
    display: none;
}

.block-calc__file-clear {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.block-calc__file-clear:hover {
    color: var(--green);
}

.block-calc__file-clear[hidden] {
    display: none;
}

.block-calc__submit {
    display: flex;
    width: 214px;
    height: 56px;
    margin-top: 16px;
    padding: 0;
}

/* Пока файл загружается, отправку блокируем */
.block-calc__submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Галочка согласия: разметка — общий сниппет snippets/agreement.htm.
   Вид чекбокса (25x25, обводка #646464) задаёт assets/css/snippets/agreement.css,
   внутри блока подгоняем только подпись.
   -------------------------------------------------------------------------- */

.block-calc .snippet-agreement {
    align-items: center;
    margin-top: 14px;
    color: #484848;
    font-size: 16px;
}

@media (max-width: 1024px) {
    .block-calc {
        min-height: 0;
        padding-bottom: 50px;
        /* Артворк поджимается по ширине, и текст с полями уходит на пёстрый снимок —
           прикрываем его белой вуалью (остальные свойства фона общие для слоёв) */
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
            url("../themes/ecomir/assets/images/design/form-bg.webp");
    }

    .block-calc__form {
        width: 100%;
    }

    .block-calc__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .block-calc__grid {
        grid-template-columns: 1fr;
    }

    .block-calc__title {
        font-size: 28px;
        line-height: 32px;
    }
}

/* ==========================================================================
   Частые вопросы (blocks/faq.block)
   Одноколоночный список: карточка с бордером #d9d9d9 радиусом 8px, строка
   вопроса минимум 48px (17.5px), шеврон справа. Раскрытие — нативный details.
   Ответ приходит размеченным HTML (абзацы, подзаголовки h4, выделения strong).
   ========================================================================== */

.block-faq {
    padding: 40px 0 79px;
}

.block-faq__title {
    margin-top: 24px;
    font-size: 36px;
}

.block-faq__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 31px;
}

.block-faq__item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
}

.block-faq__q {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 34px 6px 30px;
    color: var(--ink);
    font-size: 17.5px;
    cursor: pointer;
    list-style: none;
}

.block-faq__q::-webkit-details-marker {
    display: none;
}

.block-faq__q::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.block-faq__item[open] .block-faq__q::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}

.block-faq__a {
    /* Длинный ответ читается узкой колонкой, ширина карточки при этом полная */
    max-width: 820px;
    padding: 0 34px 0 30px;
    color: var(--body);
    font-size: 16px;
    line-height: 1.5;
}

.block-faq__a:not(:empty) {
    padding-bottom: 18px;
}

.block-faq__a p {
    margin-bottom: 12px;
}

.block-faq__a p:last-child {
    margin-bottom: 0;
}

.block-faq__a h4 {
    margin: 20px 0 10px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .block-faq__title {
        font-size: 28px;
        line-height: 32px;
    }

    .block-faq__q {
        padding-right: 40px;
    }
}

/* ==========================================================================
   Первый экран (blocks/hero.block)
   Метрики — из макета: полоса 805px с фоном 1920x805, надзаголовок 17/500 капсом,
   H1 57/900 с интерлиньяжем 69px и зелёной третьей строкой, абзац 19/500
   (max-width 360), кнопка 363x63, примечание с иконкой 45x48.

   Шапка сайта в блок не входит: assets/css/zones/header.css держит её абсолютом
   поверх первого экрана. Поэтому .block-hero__inner резервирует её высоту
   переменной --hh, которую на лету пишет assets/js/theme.js (offsetHeight шапки),
   а .block-hero__content добавляет 17px зазора — как в макете. Фолбэк 135px
   равен высоте шапки на макете (26px padding-top + логотип 314x109).
   ========================================================================== */

.block-hero {
    position: relative;
    height: 805px;
    overflow: hidden;
}

.block-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.block-hero__inner {
    position: relative;
    padding-top: var(--hh, 135px);
}

.block-hero__content {
    padding-top: 17px;
}

.block-hero__eyebrow {
    max-width: 400px;
    letter-spacing: 1.5px;
}

.block-hero__title {
    margin-top: 58px;
    color: var(--title);
    font-size: 57px;
    font-weight: 900;
    line-height: 69px;
    letter-spacing: -0.5px;
}

.block-hero__lead {
    max-width: 360px;
    margin-top: 38px;
    font-size: 19px;
}

.block-hero__btn {
    width: 363px;
    margin-top: 43px;
    padding: 0;
}

.block-hero__note {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 36px;
    color: #232323;
    font-size: 19px;
    line-height: 1.3;
}

.block-hero__note img {
    width: 45px;
    height: 48px;
}



@media (max-width: 1024px) {
    .block-hero {
        height: auto;
        padding-bottom: 60px;
    }



    .block-hero__title {
        margin-top: 40px;
        font-size: 46px;
        line-height: 56px;
    }

    .block-hero__btn {
        width: auto;
        padding: 0 34px;
    }

    /* В адаптиве фон первого экрана обрезается по ширине и текст попадает
       на пёстрый снимок — мягкая белая тень держит читаемость */
    .block-hero__eyebrow,
    .block-hero__title,
    .block-hero__lead,
    .block-hero__note {
        text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 5px rgba(255, 255, 255, 0.85);
    }
}

@media (max-width: 640px) {


    .block-hero__title {
        font-size: 34px;
        line-height: 42px;
    }

    .block-hero__lead,
    .block-hero__note {
        font-size: 16px;
    }

    .block-hero__note {
        align-items: flex-start;
    }

    .block-hero__note img {
        width: 34px;
        height: 36px;
    }

    .block-hero__btn {
        width: auto;
        padding: 0 24px;
        font-size: 15px;
    }
}

/* На самых узких экранах надпись кнопки не переносится — уменьшаем кегль */

@media (max-width: 360px) {
    .block-hero__btn {
        font-size: 13px;
    }
}

/* ==========================================================================
   Секция «Ваши проблемы» (block-problems)
   Метрики перенесены из макета: design/css/style.css (PROBLEMS)
   ========================================================================== */

.block-problems {
    padding: 95px 0 61px;
}

.block-problems__head {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.block-problems__title {
    margin-top: 35px;
}

.block-problems__note {
    flex: 0 0 209px;
    margin: 5px 0 0 auto;
    padding-left: 16px;
    border-left: 2px solid #cfcfcf;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

.block-problems__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 23px;
    list-style: none;
}

.block-problems__media {
    display: flex;
    align-items: flex-end;
    height: 248px;
}

.block-problems__card-title {
    margin-top: 22px;
    color: var(--ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.38;
}

.block-problems__card-text {
    margin-top: 14px;
    font-size: 18px;
}

@media (max-width: 1024px) {
    .block-problems__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .block-problems__head {
        flex-direction: column;
        gap: 16px;
    }

    .block-problems__title {
        margin-top: 20px;
    }

    .block-problems__note {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
    }

    .block-problems__list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Секция «Этапы работ» (в макете — .stages / .stage)
   ========================================================================== */

.block-stages {
    padding: 31px 0 89px;
}

.block-stages__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
}

.block-stages__item {
    min-height: 419px;
    padding: 201px 39px 16px;
    border-radius: 16px;
    /* Артворк 370x419 рассчитан на карточку 371x419, но при двух колонках карточка
       шире — 100% 100% растягивал фон. cover держит пропорцию; позиция left top,
       потому что в левом верхнем углу запечена иконка этапа. */
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--white);
}

.block-stages__item:nth-child(1) {
    background-image: url("../themes/ecomir/assets/images/design/stage-design.webp");
}

.block-stages__item:nth-child(2) {
    background-image: url("../themes/ecomir/assets/images/design/stage-make.webp");
}

.block-stages__item:nth-child(3) {
    background-image: url("../themes/ecomir/assets/images/design/stage-mount.webp");
}

.block-stages__num {
    display: block;
    color: var(--green);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.block-stages__title {
    margin-top: 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.block-stages__text {
    font-size: 16px;
    line-height: 1.42;
}

.block-stages__btn {
    width: 363px;
    margin-top: 30px;
    padding: 0;
}

@media (max-width: 1024px) {
    .block-stages__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .block-stages__btn {
        width: auto;
        padding: 0 34px;
    }
}

@media (max-width: 640px) {
    .block-stages__list {
        grid-template-columns: 1fr;
    }

    .block-stages__btn {
        width: auto;
        padding: 0 24px;
        font-size: 15px;
    }
}

/* На самых узких экранах надпись кнопки не переносится — уменьшаем кегль */

@media (max-width: 360px) {
    .block-stages__btn {
        font-size: 13px;
    }
}

/* ==========================================================================
   Секция «Как мы работаем» (block-steps)
   Метрики перенесены из макета: design/css/style.css (STEPS)
   ========================================================================== */

.block-steps {
    min-height: 416px;
    padding: 70px 0 62px;
    background: #eaf4fb url("../themes/ecomir/assets/images/design/steps-bg.webp") center / cover no-repeat;
}

.block-steps__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* В макете блок заголовка упирается в первый шаг с зазором 25px */
    gap: 25px;
}

/* Ширина по содержимому: в макете колонка заголовка 248px, а не 260px,
   иначе ряд шагов не помещается в контейнер */

.block-steps__head {
    flex: 0 0 auto;
    max-width: 260px;
}

.block-steps__title {
    margin-top: 45px;
    font-size: 34px;
    line-height: 34px;
}

.block-steps__note {
    margin-top: 68px;
    color: #393939;
    font-size: 18px;
    font-weight: 600;
}

.block-steps__list {
    display: flex;
    align-items: flex-start;
    padding-top: 138px;
    list-style: none;
    /* Сжимаемся, а не вылезаем за контейнер, если подписи удлинят */
    flex: 0 1 auto;
    min-width: 0;
}

.block-steps__item {
    flex: 0 1 auto;
}

.block-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 61px;
    height: 61px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    color: #393939;
    font-size: 30px;
    font-weight: 700;
}

.block-steps__text {
    margin-top: 4px;
    color: #232323;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.block-steps__arrow {
    /* В макете стрелки стоят почти вплотную к подписям: при отступах 22px
       ряд выходил за контейнер на 144px, подписи переносились лишний раз */
    margin: 20px 4px 0;
    color: #232323;
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 1024px) {
    .block-steps__inner {
        flex-direction: column;
    }

    .block-steps__head {
        flex: 0 0 auto;
    }

    .block-steps__list {
        flex-wrap: wrap;
        /* Стрелки в переносе скрыты, поэтому колонкам нужен свой зазор */
        gap: 24px;
        padding-top: 40px;
    }

    /* В переносе стрелки оказываются в начале строк и мешают — прячем */
    .block-steps__arrow {
        display: none;
    }
}

@media (max-width: 640px) {
    .block-steps__title {
        font-size: 28px;
    }

    .block-steps__list {
        padding-top: 24px;
        /* На мобильном шаги идут в одну колонку — по строке на шаг */
        flex-direction: column;
    }

    /* В колонке номер и подпись встают в одну строку */
    .block-steps__item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .block-steps__num {
        flex: 0 0 auto;
    }

    .block-steps__text {
        margin-top: 0;
    }
}

/* ==========================================================================
   Секция «Услуги» — тарифы (block-tariffs)
   Метрики перенесены из макета: design/css/style.css (SERVICES / TARIFFS)
   ========================================================================== */

.block-tariffs {
    padding: 77px 0 51px;
}

.block-tariffs__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.block-tariffs__title {
    margin-top: 28px;
}

.block-tariffs__note {
    /* В макете рядом с нотой горизонтальная «Линия 2» — ошибка дизайнера:
       у остальных блоков (например, «Проблемы») линия вертикальная */
    margin: 50px 2px 0 auto;
    padding-left: 16px;
    border-left: 2px solid #3f3f3f;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.block-tariffs__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 39px;
    list-style: none;
}

.block-tariffs__item {
    position: relative;
    min-height: 530px;
    padding: 103px 20px 0;
    border-radius: 16px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: var(--white);
}

.block-tariffs__item--econom {
    background-image: url("../themes/ecomir/assets/images/design/card-econom.webp");
}

.block-tariffs__item--base {
    background-image: url("../themes/ecomir/assets/images/design/card-base.webp");
}

.block-tariffs__item--turnkey {
    background-image: url("../themes/ecomir/assets/images/design/card-turnkey.webp");
}

.block-tariffs__badge {
    position: absolute;
    top: 40px;
    left: 17px;
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 24px;
    border-radius: 19px;
    background: var(--white);
    color: #0a0a0a;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.block-tariffs__badge--group {
    padding: 0;
    background: var(--green);
}

.block-tariffs__badge-label {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 21px;
    border-radius: 19px;
    background: var(--white);
    color: #0a0a0a;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.block-tariffs__badge-extra {
    padding: 0 20px 0 18px;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
}

.block-tariffs__item-title {
    margin-left: 42px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

.block-tariffs__features {
    margin: 18px 0 0;
    list-style: none;
}

.block-tariffs__feature {
    position: relative;
    min-height: 24px;
    padding-left: 41px;
    font-size: 16px;
    line-height: 1.4;
}

.block-tariffs__feature + .block-tariffs__feature {
    margin-top: 11.5px;
}

.block-tariffs__feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url("../themes/ecomir/assets/images/design/check-off.webp") center / 24px 24px no-repeat;
}

.block-tariffs__feature--on::before {
    background-image: url("../themes/ecomir/assets/images/design/check-on.webp");
}

.block-tariffs__price {
    margin: 20px 0 0 11px;
    font-size: 20px;
    font-weight: 700;
}

.block-tariffs__btn {
    position: absolute;
    left: 50%;
    bottom: 43px;
    width: 214px;
    height: 57px;
    padding: 0;
    font-size: 17px;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .block-tariffs__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .block-tariffs__note {
        margin-right: 0;
    }
}

@media (max-width: 640px) {
    .block-tariffs__head {
        flex-direction: column;
        gap: 16px;
    }

    .block-tariffs__title {
        margin-top: 20px;
    }

    .block-tariffs__note {
        margin: 0;
    }

    .block-tariffs__list {
        grid-template-columns: 1fr;
    }

    .block-tariffs__item {
        padding-top: 80px;
    }

    .block-tariffs__item-title,
    .block-tariffs__price {
        margin-left: 0;
    }
}

/* ==========================================================================
   Секция «Почему выбирают нас» (blocks/why.block; в макете — .why)
   Фото 458x335 с радиусом 8 слева, справа надзаголовок, H2 36/700 и сетка
   из четырёх колонок по содержимому (max-content) с разбросом по ширине.
   Метрики — из макета (design/css/style.css, раздел WHY).
   ========================================================================== */

.block-why {
    padding: 0 0 81px;
}

.block-why__inner {
    display: flex;
    gap: 28px;
}

.block-why__photo {
    flex: 0 0 458px;
    width: 458px;
    height: 335px;
    border-radius: 8px;
    /* Файл ровно 458x335; cover защищает от растяжения на узких экранах,
       где max-width из базовых стилей сужает картинку. */
    object-fit: cover;
}

.block-why__content {
    padding-top: 4px;
}

.block-why__title {
    margin-top: 52px;
    font-size: 36px;
}

.block-why__stats {
    /* Ресет темы не гасит маркеры списка (в макете list-style: none) */
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: 28px;
    margin-top: 36px;
}

.block-why__num {
    color: var(--ink);
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
}

.block-why__label {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.35;
}

.block-why__note {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.35;
    color: var(--muted);
    /* «Пакет 3 «Под ключ»» в макете — одной строкой: перенос внутри «Пакет 3» недопустим */
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .block-why__inner {
        flex-direction: column;
        gap: 32px;
    }

    .block-why__photo {
        flex: none;
    }

    .block-why__stats {
        grid-template-columns: repeat(2, 1fr);
        justify-content: start;
    }
}

@media (max-width: 640px) {
    /* Статистика остаётся минимум в две колонки — в одну не разъезжается */
    .block-why__stats {
        gap: 20px;
    }

    /* Нота не переносится («Пакет 3 «Под ключ»»), поэтому кегль меньше,
       иначе строка не влезает в половину экрана */
    .block-why__note {
        font-size: 14px;
    }

    .block-why__title {
        font-size: 28px;
        line-height: 32px;
    }
}

@media (max-width: 360px) {
    .block-why__note {
        font-size: 12px;
    }
}

/* ==========================================================================
   Секция «Выполненные работы» (в макете — .works / .section-head--works)
   Карусель кейсов — Splide 4 (assets/vendor/splide), настройки в assets/js/blocks/works.js:
   perPage 3 / 2 / 1, зазор 24px — как в макете.
   ========================================================================== */

.block-works {
    padding: 0 0 110px;
}

/* Шапка раздела: в макете .section-head */

.block-works__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

/* В макете у .section-head--works .h2 отступ меньше общего 28px */

.block-works__title {
    margin-top: 16px;
}

.block-works__nav {
    display: flex;
    gap: 17px;
    margin-top: 24px;
}

.block-works__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f8f4f2;
    color: #2b2b2b;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Состояние наведения в макете не нарисовано — затемняем собственный фон кнопки */

.block-works__arrow:hover:not(:disabled) {
    background: #eee7e3;
}

.block-works__arrow:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

/* Кейсов не больше, чем помещается в ряд — листать нечего */

.block-works__arrow:disabled {
    cursor: default;
}

/* Отступ задаём слайдеру: у .splide__list библиотека обнуляет margin через !important */

.block-works__slider {
    margin-top: 59px;
}

/* Библиотека прячет слайдер до инициализации: без JS показываем карточки статично */

.block-works__slider:not(.is-initialized) {
    visibility: visible;
}

.block-works__slider:not(.is-initialized) .splide__slide {
    width: calc(100% / 3);
}

.block-works__slider:not(.is-initialized) .splide__slide + .splide__slide {
    padding-left: 24px;
}

.block-works__photo {
    /* В композитах запечён текст «До/После» по краям — обрезать нельзя,
       поэтому пропорцию сохраняем, а не вписываем в фиксированную высоту */
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.block-works__item-title {
    margin-top: 24px;
    color: var(--ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
}

.block-works__item-meta {
    margin-top: 15px;
    font-size: 18px;
    color: #232323;
}

@media (max-width: 1024px) {
    .block-works__slider:not(.is-initialized) .splide__slide {
        width: calc(100% / 2);
    }
}

@media (max-width: 640px) {
    .block-works__head {
        flex-direction: column;
        gap: 16px;
    }

    .block-works__title {
        margin-top: 20px;
    }

    .block-works__slider:not(.is-initialized) .splide__slide {
        width: 100%;
    }
}

/* Модалка с текстом согласия (partials/dialogs/agreement.htm).
   Внутри — content/agreement.htm с классом .prose (типографика в elements/prose.css),
   здесь только размеры под ширину окна и кнопки подвала. */

.dialog-agreement {
    container-type: inline-size;
}

.dialog-agreement .prose {
    font-size: 14px;
}

.dialog-agreement .prose h1 {
    font-size: 22px;
    /* Заголовок не должен наезжать на крестик закрытия */
    padding-right: 40px;
}

.dialog-agreement .prose h2 {
    font-size: 18px;
}

.dialog-agreement footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.dialog-agreement footer .btn {
    width: auto;
    padding: 0 24px;
}

/* Отказ — контурная кнопка: белая обводка btn--light-outline здесь не видна */
.dialog-agreement .secondary {
    border: 1px solid var(--border);
    background: none;
    color: var(--ink);
}

.dialog-agreement .secondary:hover {
    border-color: var(--ink);
    background: none;
    color: var(--ink);
}

.dialog-backcall {
    container-type: inline-size;
    border-radius: 0;
}

.dialog-backcall .logo {
    margin: 16px 0;
    text-align: center;
}

.dialog-backcall .logo img {
    height: 80px;
}

.dialog-backcall p {
    text-align: center;
    font-size: 14px;
}

.dialog-backcall p a {
    text-decoration: none;
}

.dialog-backcall p a:hover {
    text-decoration: underline;
}

.dialog-backcall h2 {
    font-size: 18px;
    text-align: center;
    color: var(--ink);
}

.dialog-backcall label {
    display: block;
    font-size: 14px;
}

.dialog-backcall input[type="text"],
.dialog-backcall textarea {
    width: 100%;
    margin-bottom: 16px;
}

.dialog-backcall textarea {
    resize: vertical;
}

.dialog-backcall textarea,
.dialog-backcall input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 16px;
}

.dialog-backcall .snippet-agreement {
    margin: 16px 0;
}

.dialog-backcall .modal-button {
    display: block;
    height: 48px;
    margin: 16px auto;
    padding: 0 24px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--green);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.dialog-backcall .modal-button:hover {
    background: var(--green-dark);
}

#BackcallForm_forms_flash {
    display: none;
}

/* Модальные окна темы (<dialog>).
   Pico CSS из проекта убран, поэтому базовую рамку модалки и подложку
   задаём сами: ширину, отступы, скругление, затемнение фона, блокировку скролла. */

dialog {
    width: min(100vw - 40px, 520px);
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--body);
    font-family: var(--font-sans);
}

dialog::backdrop {
    background: rgba(1, 13, 23, 0.6);
}

dialog > article {
    position: relative;
    width: 100%;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 32px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 20px 60px rgba(1, 13, 23, 0.25);
}

/* Кнопка закрытия — <a class="close"> из partials/dialogs/*.htm */
dialog .close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

dialog .close::before,
dialog .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
}

dialog .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

dialog .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

dialog .close:hover::before,
dialog .close:hover::after {
    background: var(--green);
}

body:has(dialog[open]) {
    overflow: hidden;
}

@media (max-width: 640px) {
    dialog {
        width: min(100vw - 20px, 520px);
    }

    dialog > article {
        padding: 24px 20px;
    }
}

/* Мобильное меню (открывается по .mobiletoggle) */

.dialog-menu {
    container-type: inline-size;
    text-align: center;
}

.dialog-menu__list {
    margin: 0;
    list-style: none;
}

.dialog-menu__list li + li {
    margin-top: 14px;
}

.dialog-menu__list a {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.dialog-menu__list a:hover {
    color: var(--green);
}

/* Квиз-диалог из двух шагов.
   Метрики и палитра сняты с макетов «квиз окно 1/2»: окно 600px со скруглением
   29px, бейдж-пилюля с синим текстом, шаг 1 — карточки услуг (выбранная с синей
   рамкой и зелёной галочкой), шаг 2 — поля с иконками и зелёная кнопка 63px. */

.dialog-quiz {
    width: min(100vw - 40px, 600px);
}

.dialog-quiz > article {
    --quiz-pad: 34px;
    padding: 30px var(--quiz-pad) 0;
    border-radius: 29px;
    background: #f8fbfe;
    /* по горизонтали обрезаем декорации, по вертикали оставляем прокрутку:
       на низких окнах второй шаг выше вьюпорта */
    overflow-x: hidden;
    overflow-y: auto;
}

.quiz__step[hidden] {
    display: none;
}

/* ---------- Бейдж шага ---------- */

.quiz__badge {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
    background: #d5e9fc;
    color: #002eb5;
    font-size: 14px;
    font-weight: 500;
}

/* ---------- Заголовок и подзаголовок ---------- */

.quiz__title {
    margin-top: 14px;
    color: #363636;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.04;
}

.quiz__text {
    margin-top: 18px;
    color: #545252;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.48;
}

/* ---------- Шаг 1: карточки услуг ---------- */

.quiz__options {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 30px;
}

.quiz__option {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    min-height: 117px;
    padding: 14px 19px 14px 20px;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    background: #f7fafe;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.quiz__option:hover {
    border-color: #bfd4ea;
}

.quiz__option.is-active {
    border-color: #4c94fa;
    background: #eaf5fe;
}

.quiz__option-icon {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.quiz__option-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.quiz__option-title {
    color: #363636;
    font-size: 19px;
    font-weight: 700;
}

.quiz__option-text {
    max-width: 260px;
    color: #545252;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
}

/* Индикатор справа: у выбранной карточки — зелёная галочка, у остальных — шеврон */
.quiz__option-mark {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border-radius: 50%;
}

.quiz__option-mark::before,
.quiz__option-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    background: #a9b6c6;
    border-radius: 2px;
}

/* шеврон «>» */
.quiz__option-mark::before {
    right: 13px;
    width: 8px;
    height: 2px;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: right center;
}

.quiz__option-mark::after {
    right: 13px;
    width: 8px;
    height: 2px;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: right center;
}

/* галочка выбранной карточки — артворк из макета */
.quiz__option.is-active .quiz__option-mark {
    background: url("../themes/ecomir/assets/images/design/quiz-check.webp") center / 34px 34px no-repeat;
}

.quiz__option.is-active .quiz__option-mark::before,
.quiz__option.is-active .quiz__option-mark::after {
    display: none;
}

/* ---------- Кнопка «Далее» ---------- */

.quiz__next {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

.quiz__next-btn {
    padding: 0;
    border: 0;
    background: none;
    color: #363636;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.18s ease;
}

.quiz__next-btn:hover {
    color: var(--green);
}

/* ---------- Шаг 2: поля и кнопка ---------- */

.quiz__form {
    margin-top: 30px;
}

.quiz__field {
    display: flex;
    align-items: center;
    gap: 17px;
    height: 66px;
    padding: 0 24px 0 20px;
    border: 1px solid #d7e1ed;
    border-radius: 14px;
    background: #f8fbfe;
    cursor: text;
}

.quiz__field + .quiz__field {
    margin-top: 23px;
}

.quiz__field:focus-within {
    border-color: #4c94fa;
}

.quiz__field-icon {
    flex: 0 0 auto;
    width: auto;
    height: 24px;
    object-fit: contain;
}

.quiz__field-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: #363636;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
}

.quiz__field-input::placeholder {
    color: #a7a8ac;
}

.quiz__field-input:focus {
    outline: none;
}

.quiz__field-req {
    flex: 0 0 auto;
    color: #ee2827;
    font-size: 14.5px;
    font-weight: 500;
}

.quiz__submit {
    width: 100%;
    height: 63px;
    margin-top: 48px;
    padding: 0;
    font-size: 16px;
    text-transform: uppercase;
}

/* Галочка согласия: разметка — snippets/agreement.htm */
.quiz__form .snippet-agreement {
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    color: #484848;
    font-size: 16px;
}

/* ---------- Подпись про безопасность ---------- */

.quiz__note {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 34px;
    color: #949496;
    font-size: 11.5px;
    line-height: 1.3;
}

.quiz__note img {
    flex: 0 0 auto;
    width: auto;
    height: 25px;
    object-fit: contain;
}

/* ---------- Затухающие фото внизу окна (из макетов) ---------- */

.quiz__deco {
    position: absolute;
    left: calc(-1 * var(--quiz-pad));
    right: calc(-1 * var(--quiz-pad));
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.quiz__deco--1 {
    height: 145px;
    background-image: url("../themes/ecomir/assets/images/design/quiz-deco-1.webp");
}

.quiz__deco--2 {
    height: 186px;
    background-image: url("../themes/ecomir/assets/images/design/quiz-deco-2.webp");
}

/* Контент шага — поверх декораций */
.quiz__step {
    position: relative;
    z-index: 1;
    padding-bottom: var(--quiz-pad);
}

@media (max-width: 640px) {
    .dialog-quiz > article {
        --quiz-pad: 20px;
        padding: 24px var(--quiz-pad) 0;
        border-radius: 22px;
    }

    .quiz__title {
        font-size: 32px;
    }

    .quiz__option {
        gap: 16px;
        min-height: 96px;
        padding: 12px;
    }

    .quiz__option-icon {
        width: 64px;
        height: 64px;
    }

    .quiz__option-text {
        max-width: none;
    }

    .quiz__field {
        height: 58px;
        padding: 0 16px;
    }

    .quiz__submit {
        /* Надпись кнопки не переносится, поэтому на мобильном кегль меньше */
        margin-top: 28px;
        font-size: 14px;
    }

    .quiz__form .snippet-agreement {
        margin-top: 24px;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .quiz__submit {
        font-size: 12px;
    }
}

/* Проза: юридические тексты (content/privacy.htm, content/agreement.htm)
   и любые другие длинные документы. Класс ставит сам контент, поэтому
   типографика одинаковая и на страницах, и в модалке согласия. */

.prose h1 {
    margin-bottom: 1.1em;
    padding-right: 8px;
}

.prose h2 {
    margin: 1.7em 0 0.6em;
    color: var(--ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.prose p {
    margin-bottom: 1em;
}

.prose p:last-child {
    margin-bottom: 0;
}

.el-wrapper {
    margin: 0 auto;
    overflow: hidden;
}

/* Обвязка макета: колонка на всю высоту + защита от горизонтального скролла
   (секции с фоном во всю ширину выходят за границы контейнера). */

body.layout-default {
    overflow-x: hidden;
}

body.layout-default > .el-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.layout-default .flash-message {
    top: 50%;
    font-size: 20px;
}

/* Якорные переходы из меню: шапка фиксированная и иначе закрывает начало секции.
   Отступ равен высоте шапки (--hh пишет assets/js/theme.js) плюс небольшой зазор. */

body.layout-default section[id] {
    scroll-margin-top: calc(var(--hh, 135px) + 8px);
}

/* Сообщения форм (MagicForms кладёт их в #Backcall_forms_flash): успех и причина
   отказа. Показываем поверх страницы, как флеш Snowboard, — у открытого квиза
   или калькулятора другое место просто не попадёт в поле зрения. */

#Backcall_forms_flash:not(:empty) {
    position: fixed;
    z-index: 1200;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 40px));
}

#Backcall_forms_flash .alert {
    padding: 20px 24px;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 12px 40px rgba(1, 13, 23, 0.22);
    color: var(--body);
    font-size: 17px;
    line-height: 1.4;
}

#Backcall_forms_flash .alert-danger {
    border-left: 4px solid #ee2827;
}

#Backcall_forms_flash .alert-success {
    border-left: 4px solid var(--green);
}

#Backcall_forms_flash .alert h4 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
}

#Backcall_forms_flash .alert ul {
    margin: 0;
    padding-left: 20px;
}

/* Сообщение внутри диалога: показываем на месте, перед полями формы.
   Диалог лежит в топовом слое браузера, поэтому фиксированная плашка
   под ним не видна — текст переносится сюда скриптом theme.js. */
dialog .zone-flash__dialog {
    margin-bottom: 16px;
}

dialog .alert {
    padding: 16px 20px;
    border-radius: 12px;
    border-left: 4px solid #ee2827;
    background: #fdf2f2;
    color: var(--body);
    font-size: 16px;
    line-height: 1.4;
}

dialog .alert h4 {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 700;
}

dialog .alert ul {
    margin: 0;
    padding-left: 20px;
}

/* Служебные страницы: 404, 500 и страницы с юридическими текстами.
   Верхний отступ учитывает плавающую шапку — на этих страницах нет
   первого экрана, поэтому шапка лежит поверх контента.
   Типографика текстов — elements/prose.css (класс .prose в content-файлах). */

.page-message,
.page-prose {
    padding-top: calc(var(--hh, 135px) + 60px);
    padding-bottom: 140px;
}

.page-message__title {
    margin-top: 33px;
}

.page-message__text {
    max-width: 620px;
    margin-top: 24px;
    color: var(--body);
}

.page-message__cta {
    margin-top: 32px;
}

/* Длинный юридический текст читается узкой колонкой */

.page-prose .container {
    max-width: 800px;
}

@media (max-width: 1024px) {
    .page-message,
    .page-prose {
        padding-top: calc(var(--hh, 79px) + 40px);
        padding-bottom: 90px;
    }
}

@media (max-width: 640px) {
    .page-message,
    .page-prose {
        padding-top: calc(var(--hh, 73px) + 32px);
        padding-bottom: 64px;
    }

    .page-message__title {
        margin-top: 20px;
    }
}

/* Галочка согласия на обработку персональных данных — общая для форм.
   Вид чекбокса задаём сами: нативный на светлом фоне сливается с ним
   (белое на белом). Метрики из макетов (квиз окно 2.psd, home.psd):
   25x25, обводка #646464, радиус 4, белая заливка, отмеченная — зелёная.
   Размеры и цвет подписи контекстные: в форме расчёта — blocks/calc.css. */

.snippet-agreement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.snippet-agreement input {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    margin: 0;
    border: 1px solid #646464;
    border-radius: 4px;
    background: var(--white);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.snippet-agreement input:checked {
    /* Галочка из макета — 24x24, кладём на зелёную заливку квадрата */
    border-color: var(--green);
    background: var(--green) url("../themes/ecomir/assets/images/design/check-on.webp") center / 24px 24px no-repeat;
}

.snippet-agreement input:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Подпись — ссылка на текст согласия; в макете она подчёркнута */

.snippet-agreement .link {
    text-decoration: underline;
}

/* Соцсети (partials/snippets/socials.htm): ряд значков из assets/images/snippets/socials.
   Размер задаём явно: у SVG нет собственных размеров, а базовый сброс темы
   ставит img { height: auto }. Контекст может переопределить — например,
   подвал в assets/css/zones/footer.css. */

.snippet-socials {
    display: flex;
    gap: 8px;
}

.snippet-socials a {
    display: block;
    line-height: 0;
}

.snippet-socials img {
    display: block;
    width: auto;
    height: 45px;
}

/* Подвал: логотип, контакты, мессенджеры, документы. */

.zone-footer {
    padding: 33px 0 194px;
    background: var(--footer-bg);
    color: var(--white);
}

.zone-footer__inner {
    display: grid;
    grid-template-columns: 236px 377px 271px 1fr;
    align-items: start;
}

.zone-footer__logo img {
    width: 176px;
    height: 134px;
}

.zone-footer__contacts {
    font-style: normal;
    font-size: 16px;
    line-height: 1.35;
}

.zone-footer__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.zone-footer__row + .zone-footer__row {
    margin-top: 14px;
}

.zone-footer__row img {
    flex: 0 0 auto;
    margin-top: 4px;
}

.zone-footer__phone {
    display: block;
    font-size: 19px;
    font-weight: 700;
}

.zone-footer__callback {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: var(--footer-muted);
}

/* «Мы в мессенджерах»: сам список значков — в сниппете socials */

.zone-footer__label {
    font-size: 16px;
}

.zone-footer .snippet-socials {
    margin-top: 11px;
}

.zone-footer__link:hover,
.zone-footer__callback:hover,
.zone-footer__doc:hover {
    color: var(--green);
}

.zone-footer__doc {
    display: block;
    font-size: 14px;
    color: var(--footer-muted);
    text-decoration: underline;
}

.zone-footer__doc + .zone-footer__doc {
    margin-top: 11px;
}

.zone-footer__copy {
    margin-top: 56px;
    font-size: 14px;
    color: var(--footer-muted);
}

@media (max-width: 1224px) {
    .zone-footer__inner {
        grid-template-columns: 200px 1fr 240px;
        gap: 24px;
    }

    .zone-footer__docs {
        grid-column: 1 / -1;
    }

    .zone-footer__copy {
        margin-top: 24px;
    }
}

@media (max-width: 700px) {
    .zone-footer {
        padding-bottom: 60px;
    }

    .zone-footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .zone-footer__logo img {
        width: 142px;
        height: auto;
    }
}

/* Шапка сайта: логотип, меню, контакты, кнопка. Плавающая — при прокрутке
   остаётся на экране. Позиция fixed, а не sticky: первый экран рассчитан на то,
   что шапка лежит поверх него, а не занимает место в потоке — высоту отступа
   резервирует переменная --hh (её пишет assets/js/theme.js). */

.zone-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding-top: 26px;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Состояние при прокрутке — класс ставит theme.js (шапка больше не лежит
   на светлом фото первого экрана, поэтому получает фон и мягкую тень) */

.zone-header.compact {
    background: var(--white);
    box-shadow: 0 6px 24px rgba(1, 13, 23, 0.08);
}

.zone-header__row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.zone-header__logo {
    flex: 0 0 auto;
}

.zone-header__logo img {
    width: 260px;
    height: auto;
}

.zone-header__nav {
    flex: 0 1 auto;
    margin: 25px auto 0;
}

.zone-header__nav ul {
    display: flex;
    gap: 18px;
    list-style: none;
}

.zone-header__nav li {
    white-space: nowrap;
}

.zone-header__nav a {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    transition: color 0.2s ease;
}

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

.zone-header__contacts {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin-top: 19px;
    text-align: right;
}

.zone-header__phone {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
}

.zone-header__callback {
    font-size: 14px;
    color: var(--muted);
}

.zone-header__callback:hover {
    color: var(--green);
}

.zone-header__cta {
    flex: 0 0 auto;
    margin-top: 13px;
}

/* Бургер — только на узких экранах */

.zone-header__burger {
    display: none;
    width: 28px;
    padding: 6px 0;
    margin: 12px 0 0 auto;
    cursor: pointer;
}

.zone-header__burger span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: var(--ink);
    border-radius: 1px;
}

/* В диапазоне 1025–1240 контейнер уже ужимается, а меню ещё видно —
   без этих размеров строка шапки вылезала за вьюпорт. */
@media (max-width: 1240px) {
    .zone-header__row {
        gap: 16px;
    }

    .zone-header__logo img {
        width: 200px;
    }

    .zone-header__nav ul {
        gap: 12px;
    }

    .zone-header__phone {
        font-size: 17px;
    }

    .zone-header__cta {
        height: 50px;
        padding: 0 16px;
        font-size: 15px;
    }
}

/* Ниже 1100 меню уходит в диалог (иначе строка не влезает даже ужатой),
   шапка обязана оставаться в одну строку: от её высоты зависит
   зарезервированный отступ первого экрана (--hh). */
@media (max-width: 1100px) {
    .zone-header {
        padding-top: 16px;
    }

    .zone-header__row {
        flex-wrap: nowrap;
        row-gap: 0;
        /* Меню скрыто — логотип слева, телефон, кнопка и бургер по центру строки справа */
        align-items: center;
    }

    .zone-header__logo img {
        width: 141px;
    }

    .zone-header__nav {
        display: none;
    }

    /* margin-left уводит вправо всю группу: телефон, кнопка, бургер */
    .zone-header__contacts {
        margin: 0 0 0 auto;
    }

    .zone-header__cta {
        margin-top: 0;
    }

    .zone-header__burger {
        display: block;
        order: 9;
        margin: 0;
    }
}

@media (max-width: 700px) {
    .zone-header__contacts {
        display: none;
    }

    .zone-header__logo img {
        width: 124px;
    }

    .zone-header__cta {
        margin-left: auto;
    }
}

@media (max-width: 640px) {
    .zone-header__cta {
        height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .zone-header__logo img {
        width: 108px;
    }

    .zone-header__cta {
        padding: 0 12px;
        font-size: 13px;
    }
}

.zone-main {
    flex: 1;
}
.zone-main__container {
    display: block;
}

.zone-main__content {
    width: 100%;
}

.zone-main__sidebar {
    display: none;
}