/* Дополнения поверх перенесённых стилей старого сайта. */

/* === Кнопки «Позвонить» ===
   Иконка телефона — SVG через mask, поэтому красится currentColor
   (в icomoon подходящего глифа телефона нет). */
.phone-ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--phone-svg) no-repeat center / contain;
    mask: var(--phone-svg) no-repeat center / contain;
}
:root {
    --phone-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Верхняя полоса: компактная кнопка вместо простой ссылки */
.topbar__callback {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 15px;
    border-radius: 999px;
    background: #0887d0;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    box-shadow: 0 2px 6px rgba(8, 135, 208, .25);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.topbar__callback:hover {
    background: #f56b18;
    box-shadow: 0 4px 12px rgba(245, 107, 24, .3);
    transform: translateY(-1px);
}
.topbar__callback .phone-ico { font-size: 13px; }

/* Подвал: ссылка-кнопка с иконкой */
.site-footer__callback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: color .2s ease, gap .2s ease;
}
.site-footer__callback:hover { gap: 11px; }

/* Первый экран: кнопка звонка — иконка телефона слева от подписи */
.button--call {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 11px;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.button--call .phone-ico { font-size: 18px; }
.button--call:hover {
    background-color: #0887d0 !important;
    border-color: #0887d0 !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(8, 135, 208, .25);
    transform: translateY(-1px);
}

/* === Страница «Оплата»: карточки способов, шаги, блок контактов === */
.pay-grid { display: flex; flex-wrap: wrap; margin: 0 -12px 8px; }
.pay-grid > div { padding: 0 12px 24px; }
.pay-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid #ededed; border-radius: 13px;
    padding: 26px 26px 28px; box-shadow: 0 4px 15px rgba(0,0,0,.05);
    transition: box-shadow .2s;
}
.pay-card:hover { box-shadow: 0 4px 25px rgba(0,0,0,.08); }
.pay-card__icon {
    width: 64px; height: 64px; flex-shrink: 0; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eaf4fc, #dceffc); border-radius: 14px;
}
.pay-card__icon i { font-size: 30px; color: #0887d0; }
.pay-card__title { font-size: 20px; font-weight: 600; color: #1b1a1d; margin-bottom: 14px; line-height: 28px; }
.pay-card__list { list-style: none; padding: 0; margin: 0; color: #605f67; font-size: 16px; line-height: 25px; }
.pay-card__list li { position: relative; padding-left: 18px; margin-bottom: 10px; }
.pay-card__list li:last-child { margin-bottom: 0; }
.pay-card__list li::before {
    content: ""; position: absolute; left: 0; top: 10px;
    width: 6px; height: 6px; border-radius: 50%; background: #f56b18;
}

/* Порядок работы — пронумерованные шаги */
.pay-steps { counter-reset: paystep; display: flex; flex-wrap: wrap; margin: 0 -12px 8px; padding: 0; list-style: none; }
.pay-steps > li { padding: 0 12px 24px; }
.pay-steps__inner {
    height: 100%; background: #f7fafd; border: 1px solid #e6eef6;
    border-radius: 13px; padding: 22px 22px 24px;
}
.pay-steps__num {
    counter-increment: paystep; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; margin-bottom: 14px;
    background: #0887d0; color: #fff; font-weight: 700; font-size: 17px;
}
.pay-steps__num::before { content: counter(paystep); }
.pay-steps__title { font-size: 17px; font-weight: 600; color: #1b1a1d; margin-bottom: 8px; line-height: 24px; }
.pay-steps__text { color: #605f67; font-size: 15px; line-height: 23px; }

/* Блок «нужен счёт» с контактами */
.pay-cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
    background: linear-gradient(135deg, #eaf4fc, #dceffc);
    border-radius: 13px; padding: 26px 28px; margin-bottom: 8px;
}
.pay-cta__text { flex: 1 1 260px; }
.pay-cta__title { font-size: 20px; font-weight: 600; color: #1b1a1d; margin-bottom: 6px; }
.pay-cta__sub { color: #5b6b78; font-size: 16px; line-height: 24px; }
.pay-cta__contacts { display: flex; flex-direction: column; gap: 6px; }
.pay-cta__phone { font-size: 22px; font-weight: 700; color: #1b1a1d; white-space: nowrap; }
.pay-cta__phone:hover { color: #0887d0; }
.pay-cta__mail { color: #0887d0; font-weight: 600; }
.pay-cta__mail:hover { color: #f56b18; }

/* === Верхняя полоса (top bar) с контактами над шапкой === */
.topbar {
    background: #f4f7fa;
    border-bottom: 1px solid #e6ecf2;
    font-size: 14px;
    line-height: 1.4;
}
.topbar__inner {
    max-width: 1712px;
    margin: 0 auto;
    padding: 9px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.topbar__worktime { color: #6b7b88; }
.topbar__contact { display: flex; align-items: center; gap: 18px; }
.topbar__label { color: #6b7b88; }
.topbar__phone { color: #1b1a1d; font-weight: 700; white-space: nowrap; }
.topbar__phone:hover { color: #0887d0; }
.topbar__callback { color: #0887d0; font-weight: 600; white-space: nowrap; }
.topbar__callback:hover { color: #f56b18; }
/* топбар показываем только на десктопе (где показывается десктоп-хедер, ≥1340px);
   на планшете/мобиле телефон есть в бургер-меню */
@media (max-width: 1339.98px) { .topbar { display: none; } }
/* контакты перенесены в топбар — прячем блок контактов в самой шапке */
.header-bottom { display: none !important; }

/* === Закреплённый топбар при прокрутке ===
   overflow-x:clip вместо legacy overflow-x:hidden на body — clip не создаёт
   scroll-контейнер, поэтому position:sticky работает относительно окна.
   Топбар — прямой потомок высокого контейнера, поэтому липнет на всю прокрутку;
   компактный fixed-хедер (.header--sticky) сдвигается вниз на высоту топбара
   из main.js (header.style.top = topbar.offsetHeight). */
body { overflow-x: clip; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 1101; /* над фикс-хедером (1100), чтобы топбар был сверху */
}

/* === Шапка: устраняет перенос десктоп-меню на 2-ю строку ===
   Полное меню (8 пунктов + логотип + «Каталог» + телефон) занимает ~1332px,
   а легаси-переключение на бургер стоит на 1280px — на ширинах ~1280–1340
   (особенно в браузерах с видимым скроллбаром или более широкими шрифтами)
   меню было впритык и переносилось на вторую строку.
   1) держим бургер-меню, пока десктоп-навигация не помещается уверенно (<1340px); */
@media (min-width: 1280px) and (max-width: 1339.98px) {
    .header-top { display: none !important; }
    .header-top-mobile { display: flex !important; }
    .header-bottom-mobile { display: flex !important; }
}
/* 2) навигация и верхний ряд шапки никогда не переносятся на 2 строки */
.header-top__row { flex-wrap: nowrap; }
.header-nav > ul { flex-wrap: nowrap; }
.header-nav > ul > li > a { white-space: nowrap; }
/* 3) немного плотнее пункты меню — запас по ширине (было 10px; !important —
      перебиваем легаси-правило с data-v-атрибутом) */
.header-menu-main .header-nav > ul > li { padding-left: 6px !important; padding-right: 6px !important; }

/* Юрназвание в футере (современный футер site-footer) */
.site-footer__legal { font-size: 14px; margin: -8px 0 20px; line-height: 1.5; opacity: .7; }

/* Карточки сертификатов на главной — превью первой страницы документа сверху */
.cert-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
    transition: box-shadow .2s;
}
.cert-card:hover { box-shadow: 0 4px 25px rgba(0, 0, 0, .08); }
.cert-card__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    padding: 18px;
    background: #eef3f8;
    border-bottom: 1px solid #ededed;
}
.cert-card__preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
    transition: transform .2s;
}
.cert-card:hover .cert-card__preview img { transform: translateY(-2px); }
.cert-card__preview i { font-size: 60px; color: #0887d0; opacity: .85; }
.cert-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 18px 20px 20px;
}
.cert-card__title {
    font-size: 15px; font-weight: 600; color: #1b1a1d;
    line-height: 22px; margin-bottom: 12px;
}
.cert-card__link {
    margin-top: auto; color: #0887d0; font-weight: 600; font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
}
.cert-card__link:hover { color: #f56b18; }

/* Hero: новое квадратное фото прибора ТСУ. Легаси-позиционирование было под
   старую широкую картинку (сдвиг -80% влево, фикс. высота 450px) — переопределяем:
   ставим справа, по центру по вертикали, ограничиваем ширину. На мобилке hero-фото
   скрыто (класс .only desktop tablet), поэтому правки только для десктопа/планшета. */
.hero-section .container { position: relative; }
.hero-section .container .hero-image {
    left: auto !important;
    right: 2% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42%;
    max-width: 460px;
}
.hero-section .container .hero-image img {
    height: auto !important;
    width: 100%;
    max-width: 100%;
    display: block;
}

/* Списки из визуального редактора (rich text) и врезок — фирменные оранжевые
   маркеры. Целим прямые ul в .page-content (это вывод rich-text блоков) и
   списки внутри врезок; легаси-списки лежат глубже, их не задеваем. */
.page-content > ul,
.alert-block__text ul {
    list-style: none;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}
.page-content > ul > li,
.alert-block__text ul > li {
    position: relative;
    margin-bottom: 12px;
}
.page-content > ul > li:last-child,
.alert-block__text ul > li:last-child { margin-bottom: 0; }
.page-content > ul > li::before,
.alert-block__text ul > li::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F0511F;
}

/* Логотип в шапке: у нового логотипа пропорции 230x35, легаси-контейнер 125px его сжимал */
.header-logo { width: auto !important; max-width: none !important; }
.header-logo a { display: inline-block; }
.header-logo img {
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
}
@media screen and (max-width: 767px) {
    /* Логотип был уменьшен до 24px и терял читаемость. Ограничиваем шапку
       по ширине экрана, чтобы увеличенный знак не создавал горизонтальный
       скролл даже на узких телефонах. */
    html, body { overflow-x: clip; }
    .header,
    .header-top-mobile[data-v-54c986a8] { max-width: 100%; overflow-x: clip; }
    .header-top-mobile[data-v-54c986a8] {
        min-width: 0;
        padding: 16px;
    }
    .header-top-mobile[data-v-54c986a8] > * { min-width: 0; flex-shrink: 0; }
    .header-top-mobile[data-v-54c986a8] .header-logo {
        flex: 1 1 auto;
        margin: 0 12px;
        overflow: hidden;
    }
    .header-top-mobile[data-v-54c986a8] .header-logo img {
        display: block;
        height: 34px !important;
        max-width: 100% !important;
    }
    .header-mobile-menu[data-v-e4db75b0] {
        box-sizing: border-box;
        width: min(360px, 100vw);
        max-width: 100vw;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* Список документов */
.doc-list__items { list-style: none; padding: 0; margin: 0; }
.doc-list__item { margin-bottom: 12px; }
.doc-list__item a {
    display: inline-flex; align-items: center; gap: 10px;
    color: #0588D1; font-weight: 500;
}
.doc-list__item a:hover { text-decoration: underline; }
.doc-list__size { color: #979797; font-size: 13px; }

/* Аккордеон вопрос-ответ */
.faq-accordion__item { border-bottom: 1px solid #ededed; }
.faq-accordion__question {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 20px 40px 20px 0; font-size: 18px; font-weight: 600; cursor: pointer;
    position: relative; color: #1b1a1d; font-family: inherit;
}
.faq-accordion__question::after {
    content: ""; position: absolute; right: 8px; top: 50%;
    width: 10px; height: 10px; border-right: 2px solid #0588D1; border-bottom: 2px solid #0588D1;
    transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq-accordion__item.open .faq-accordion__question::after {
    transform: translateY(-30%) rotate(225deg);
}
.faq-accordion__answer { display: none; padding: 0 0 20px; color: #505355; }
.faq-accordion__item.open .faq-accordion__answer { display: block; }

/* Контакты: отделы */
.department__title { font-size: 22px; margin-bottom: 16px; color: #0588D1; }
.department__services { margin: 0 0 16px; padding-left: 20px; color: #505355; }
.department__services li { margin-bottom: 6px; }
.department__props { list-style: none; padding: 0; margin: 0; }
.department__props li { margin-bottom: 8px; }
.department__label { color: #979797; }
.department__props a { color: #0588D1; }

/* Галерея */
.gallery-block__img { width: 100%; height: auto; border-radius: 10px; }

/* Карусели старой главной без Vue: горизонтальная прокрутка */
.legacy-html .carousel, .legacy-html [class*="carousel"] { overflow-x: auto; }

/* Карточки "Наши решения" на главной: свой компонент (легаси services-card
   для этого места не годится — там нулевые отступы между иконкой и текстом) */
.solution-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ededed;
    border-radius: 13px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
    padding: 24px;
    transition: box-shadow .2s;
}
.solution-tile:hover { box-shadow: 0 4px 25px rgba(0, 0, 0, .08); }
.solution-tile__icon {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eaf4fc, #dceffc);
    border-radius: 16px;
    margin-bottom: 20px;
}
.solution-tile__icon i { font-size: 44px; color: #0588D1; }
.solution-tile__title {
    font-size: 18px; font-weight: 600; line-height: 27px;
    color: #1b1a1d; margin-bottom: 12px;
}
.solution-tile__text {
    color: #605f67; font-size: 16px; line-height: 24px;
    margin: 0 0 16px; flex-grow: 1;
}
/* Кнопка «Читать далее» на карточке: пилюля со стрелкой. Прижата к низу
   карточки, поэтому в ряду кнопки стоят на одной линии. */
.solution-tile__link {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding: 11px 24px;
    border: 1.5px solid #0588D1;
    border-radius: 100px;
    background-color: transparent;
    color: #0588D1 !important;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.solution-tile__link::after {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10h13M11 5l5 5-5 5'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10h13M11 5l5 5-5 5'/></svg>") center / contain no-repeat;
    transition: transform .2s;
}
/* Отклик только на саму кнопку, не на карточку целиком */
.solution-tile__link:hover,
.solution-tile__link:focus-visible {
    background-color: #0588D1;
    border-color: #0588D1;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(5, 136, 209, .28);
}
.solution-tile__link:hover::after { transform: translateX(3px); }
.solution-tile__link:active { transform: translateY(1px); }
.solution-tile__link:focus-visible { outline: 2px solid #0588D1; outline-offset: 3px; }

/* Обёртки списков (объекты, отзывы): на страницах они внутри .page-content
   (уже в .container), а на главной — на верхнем уровне без контейнера.
   Даём им поведение .container, а внутри .page-content сбрасываем, чтобы
   не было двойного контейнера. */
.project-tiles-wrap,
.review-tiles-wrap {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1400px) {
    .project-tiles-wrap,
    .review-tiles-wrap { max-width: 1340px; }
}
@media (min-width: 1600px) {
    .project-tiles-wrap,
    .review-tiles-wrap { max-width: 1660px; }
}
.page-content .project-tiles-wrap,
.page-content .review-tiles-wrap {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Карточки "Реализованные объекты" (главная и /nashi-obekty/) */
.project-tiles-wrap .row { margin-left: -12px; margin-right: -12px; }
.project-tiles-wrap .row > * { padding-left: 12px; padding-right: 12px; }
.project-tile {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ededed;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.project-tile:hover { transform: translateY(-5px); border-color: rgba(5, 136, 209, .35); box-shadow: 0 14px 30px rgba(0, 0, 0, .11); }
.project-tile__img { width: 100%; height: 220px; overflow: hidden; background-color: #eaf4fc; }
.project-tile__img-el { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.project-tile:hover .project-tile__img-el { transform: scale(1.05); }
.project-tile:hover .project-tile__title { color: #0588D1; }
.project-tile__body { padding: 20px 24px 24px; flex-grow: 1; display: flex; flex-direction: column; }
.project-tile__title {
    font-size: 18px; font-weight: 600; line-height: 27px;
    color: #1b1a1d; margin-bottom: 14px;
}
.project-tile__list { list-style: none; padding: 0; margin: 0; color: #605f67; font-size: 15px; line-height: 22px; }
.project-tile__list li { position: relative; padding-left: 16px; margin-bottom: 8px; }
.project-tile__list li:last-child { margin-bottom: 0; }
.project-tile__list li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background-color: #F0511F;
}

/* Отзывы (страница /reviews/) */
.review-tiles-wrap .row { margin-left: -12px; margin-right: -12px; }
.review-tiles-wrap .row > * { padding-left: 12px; padding-right: 12px; }
.review-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ededed;
    border-radius: 13px;
    padding: 28px 24px 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
    transition: box-shadow .2s;
}
.review-tile:hover { box-shadow: 0 4px 25px rgba(0, 0, 0, .08); }
.review-tile__quote {
    position: absolute; top: 8px; right: 20px;
    font-size: 64px; line-height: 1; font-weight: 700;
    color: #eaf4fc; font-family: Georgia, serif; user-select: none;
}
.review-tile__stars { font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.review-tile__star--on { color: #F0511F; }
.review-tile__star--off { color: #ededed; }
.review-tile__text {
    color: #605f67; font-size: 15px; line-height: 24px;
    margin: 0 0 20px; flex-grow: 1; position: relative; z-index: 1;
}
.review-tile__author { display: flex; align-items: center; gap: 12px; }
.review-tile__avatar {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #0588D1, #0588D1);
    color: #fff; font-size: 18px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.review-tile__name { font-size: 15px; font-weight: 600; color: #1b1a1d; }
.review-tile__role { font-size: 13px; color: #979797; }

/* Фирменная палитра и единая типографика. Правила расположены после legacy
   CSS, поэтому заменяют значения перенесённой версии сайта. */
:root {
    --brand-orange: #F0511F;
    --brand-blue: #0588D1;
    --menu-color: #606163;
}
html, body, button, input, select, textarea {
    font-family: "Roboto", Arial, sans-serif !important;
    font-weight: 400;
}

/* Пункты главной навигации — одинаковый цвет в десктопном и мобильном меню. */
.header-nav > ul > li > a,
.menu-main-mobile > ul > li > a {
    color: var(--menu-color) !important;
}
.header-nav > ul > li > a,
.menu-main-mobile > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.header-nav > ul > li > a .menu-ico,
.menu-main-mobile > ul > li > a .menu-ico {
    /* легаси прячет любые <i> внутри пунктов меню — возвращаем иконку */
    display: inline-block !important;
    flex-shrink: 0;
    width: 16px;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    color: #8d8f91;
    line-height: 1;
    text-align: center;
    opacity: .82;
    transition: color .2s ease, transform .2s ease;
}
.header-nav > ul > li > a:hover .menu-ico,
.menu-main-mobile > ul > li > a:hover .menu-ico {
    color: #606163;
    opacity: 1;
    transform: translateY(-1px);
}
@media screen and (max-width: 1279px) {
    .header-nav > ul > li > a .menu-ico,
    .menu-main-mobile > ul > li > a .menu-ico { width: 20px; font-size: 15px; }
}
@media screen and (min-width: 1280px) {
    /* В desktop-версии отделяем иконку от подписи, не меняя интервалы между
       самими пунктами навигации. */
    .header-menu-main .header-nav > ul > li > a {
        display: inline-flex !important;
        align-items: center;
        gap: 12px;
    }
    .header-menu-main .header-nav > ul > li > a .menu-ico {
        display: inline-block;
        width: 17px;
    }
}

/* Закреплённая компактная шапка: навигация всегда остаётся доступной. */
.header {
    background: #fff;
    transition: box-shadow .2s ease;
}
.header.header--sticky {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    box-shadow: 0 5px 22px rgba(27, 26, 29, .12);
}
@media screen and (min-width: 1280px) {
    .header--sticky .header-bottom[data-v-42601a3f] {
        display: none;
    }
    .header--sticky .header-top__row[data-v-42601a3f] { min-height: 64px; }
    .header--sticky .header-logo img { height: 28px !important; }
}

/* Первый экран: чёткая иерархия, контрастный CTA и преимущества. */
.hero-section[data-v-4db7ef36] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, #f7fbfe 0%, #eef8fd 100%);
}
.hero-section[data-v-4db7ef36]::after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -260px;
    top: -280px;
    border-radius: 50%;
    background: rgba(5, 136, 209, .08);
}
.hero-section .container[data-v-4db7ef36] { position: relative; z-index: 1; }
.hero-title[data-v-4db7ef36] { color: #1b1a1d; letter-spacing: -.02em; }
.hero-text[data-v-4db7ef36] { max-width: 560px !important; }
.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 0;
    margin: 28px 0 0;
    list-style: none;
    color: #606163;
    font-size: 14px;
}
.hero-benefits li { display: flex; align-items: center; gap: 7px; }
.hero-benefits i { color: var(--brand-orange); font-size: 12px; }
.hero-btn-box .button-primary {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
}
.hero-btn-box .button-secondary {
    background: #fff !important;
    border: 1px solid var(--brand-blue) !important;
    color: var(--brand-blue) !important;
}
.button {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
        box-shadow .2s ease, transform .2s ease;
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(27, 26, 29, .16);
}
.hero-btn-box .button-primary:hover {
    background-color: #d94316 !important;
    border-color: #d94316 !important;
    color: #fff !important;
}
.hero-btn-box .button-secondary:hover {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}
.button:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(27, 26, 29, .13); }

/* Каталог программного обеспечения. */
.software-new { padding: 64px 0 84px; }
.software-new__intro { max-width: 760px; margin: 0 0 42px; color: #606163; font-size: 18px; line-height: 1.6; }
.software-new__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.software-new__card {
    display: flex;
    flex-direction: column;
    min-height: 196px;
    padding: 28px;
    background: #fff;
    border: 1px solid #e5e8ea;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.software-new__card:hover { transform: translateY(-4px); border-color: rgba(5, 136, 209, .4); box-shadow: 0 12px 28px rgba(0, 0, 0, .09); }
.software-new__number { margin-bottom: 18px; color: #0588D1; font-size: 13px; }
.software-new__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 0 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eaf5fc, #dceffc);
    color: #0588D1;
}
.software-new__icon i { font-size: 26px; }
.software-new__card:hover .software-new__icon { background: #0588D1; color: #fff; }
.software-new__card:hover .software-new__icon i { transform: scale(1.06); }
.software-new__icon i { transition: transform .2s ease; }
.software-new__title { margin: 0; color: #2c2c2c; font-size: 19px; font-weight: 400; line-height: 1.35; }
.software-new__price { margin: auto 0 0; padding-top: 24px; color: #F0511F; font-size: 14px; }
.software-new--home { padding: 78px 0; background: #f7fbfe; }
.software-new--home .software-new__intro { margin-bottom: 34px; }
.software-new--home .software-new__card { min-height: 174px; padding: 24px; }
.software-new__more { margin: 32px 0 0; text-align: center; }
@media screen and (max-width: 900px) {
    .software-new { padding: 48px 0 60px; }
    .software-new--home { padding: 54px 0; }
    .software-new__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 560px) {
    .software-new { padding: 36px 0 48px; }
    .software-new__intro { font-size: 16px; }
    .software-new__grid { grid-template-columns: 1fr; gap: 14px; }
    .software-new__card { min-height: 164px; padding: 22px; }
}
@media screen and (min-width: 1280px) {
    .hero-section[data-v-4db7ef36] { padding: 82px 0 96px; }
    .hero-title[data-v-4db7ef36] { font-size: 52px; line-height: 1.12; margin-bottom: 26px; }
    .hero-text[data-v-4db7ef36] { margin-bottom: 42px; }
}

/* Новый подвал: ясная структура, контакты и полезные ссылки. */
.site-footer { background: #2C2C2C; color: #dce4e8; }
.site-footer__main {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
    gap: 48px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 64px 28px 52px;
}
.site-footer__logo { display: inline-block; margin-bottom: 22px; }
.site-footer__logo img { display: block; width: auto; height: 34px; filter: brightness(0) invert(1); }
.site-footer__brand p { max-width: 290px; margin: 0 0 20px; line-height: 1.55; }
.site-footer h2 { margin: 0 0 18px; color: #fff; font-size: 16px; font-weight: 400; }
.site-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.site-footer a { color: #dce4e8; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__column a { font-size: 14px; }
.site-footer__callback { color: #fff !important; font-size: 14px; }
.site-footer__callback::after { content: " →"; color: var(--brand-orange); }
.site-footer__contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.site-footer__phone { color: #fff !important; font-size: 23px; line-height: 1.2; }
.site-footer__time { color: #aebcc3; font-size: 13px; margin-bottom: 6px; }
.site-footer address { margin: 3px 0 0; font-style: normal; line-height: 1.45; }
.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    color: #aebcc3;
    font-size: 13px;
}
.site-footer__bottom a { color: #aebcc3; }
@media screen and (max-width: 900px) {
    .site-footer__main { grid-template-columns: repeat(2, 1fr); gap: 38px 28px; padding: 48px 20px 40px; }
    .site-footer__bottom { padding: 18px 20px; }
}
@media screen and (max-width: 560px) {
    .hero-benefits { display: block; margin-top: 22px; }
    .hero-benefits li { margin-bottom: 9px; }
    .site-footer__main { grid-template-columns: 1fr; gap: 30px; padding: 42px 16px 32px; }
    .site-footer__bottom { display: block; padding: 18px 16px; }
    .site-footer__bottom a { display: block; margin-top: 10px; }
}

/* Карта проезда на странице «Контакты» */
.contacts-map {
    position: relative;
    width: 100%;
    height: 480px;
    border: 1px solid #ededed;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
}
.contacts-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contacts-map__link {
    display: inline-block;
    margin-top: 12px;
    color: #0588D1;
    font-weight: 600;
}
@media (max-width: 767px) {
    .contacts-map { height: 320px; }
}

/* ==========================================================================
   Блоки конструктора страниц (cb-*)
   Оформление подчинено стилям сайта: те же цвета, скругления и тени,
   что у карточек услуг и блоков на странице «Оплата».
   ========================================================================== */

/* Заголовки */
.cb-heading { color: #1b1a1d; font-weight: 600; margin: 0 0 20px; }
h2.cb-heading { font-size: 30px; line-height: 40px; }
h3.cb-heading { font-size: 22px; line-height: 31px; }
h4.cb-heading { font-size: 18px; line-height: 27px; }
.cb-heading--center { text-align: center; }
@media (max-width: 767px) {
    h2.cb-heading { font-size: 24px; line-height: 32px; }
    h3.cb-heading { font-size: 20px; line-height: 28px; }
}

/* Секция */
.cb-section { margin-bottom: 40px; }
.cb-section--light,
.cb-section--blue,
.cb-section--white { padding: 32px; border-radius: 13px; }
.cb-section--light { background: #f7fafd; border: 1px solid #e6eef6; }
.cb-section--blue { background: linear-gradient(135deg, #eaf4fc, #dceffc); }
.cb-section--white { background: #fff; border: 1px solid #ededed; box-shadow: 0 4px 15px rgba(0,0,0,.05); }
.cb-section__head { margin-bottom: 24px; }
.cb-section__head--center { text-align: center; }
.cb-section__title { font-size: 30px; line-height: 40px; font-weight: 600; color: #1b1a1d; margin: 0 0 8px; }
.cb-section__sub { color: #605f67; font-size: 17px; line-height: 26px; margin: 0; }
@media (max-width: 767px) {
    .cb-section--light, .cb-section--blue, .cb-section--white { padding: 22px 18px; }
    .cb-section__title { font-size: 24px; line-height: 32px; }
}

/* Колонки */
.cb-columns { display: grid; gap: 28px; margin-bottom: 32px; }
.cb-columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-columns--2-1 { grid-template-columns: 2fr 1fr; }
.cb-columns--1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 991px) {
    .cb-columns--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .cb-columns { grid-template-columns: 1fr !important; gap: 22px; }
}

/* Отступ и разделитель */
.cb-spacer { border: 0; margin: 0; }
.cb-spacer--s { height: 16px; }
.cb-spacer--m { height: 32px; }
.cb-spacer--l { height: 56px; }
.cb-spacer--line { border-top: 1px solid #e6eef6; }

/* Изображение */
.cb-image { margin: 0 0 28px; }
.cb-image img { width: 100%; height: auto; border-radius: 13px; display: block; }
.cb-image--wide { max-width: 66%; }
.cb-image--narrow { max-width: 50%; }
.cb-image__caption { color: #8b8a91; font-size: 15px; line-height: 22px; margin-top: 10px; }
@media (max-width: 767px) { .cb-image--wide, .cb-image--narrow { max-width: 100%; } }

/* Изображение и текст */
.cb-imgtext { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 36px; }
.cb-imgtext--right .cb-imgtext__media { order: 2; }
.cb-imgtext__media img { width: 100%; height: auto; border-radius: 13px; display: block; }
.cb-imgtext__title { font-size: 22px; line-height: 31px; font-weight: 600; color: #1b1a1d; margin: 0 0 14px; }
.cb-imgtext__text { color: #605f67; font-size: 16px; line-height: 25px; }
.cb-imgtext__text p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
    .cb-imgtext { grid-template-columns: 1fr; gap: 20px; }
    .cb-imgtext--right .cb-imgtext__media { order: 0; }
}

/* Цитата */
.cb-quote {
    margin: 0 0 28px; padding: 22px 26px;
    border-left: 4px solid #0588D1; background: #f7fafd; border-radius: 0 13px 13px 0;
}
.cb-quote__text { color: #1b1a1d; font-size: 18px; line-height: 28px; font-style: italic; margin: 0; }
.cb-quote__author { color: #8b8a91; font-size: 15px; margin-top: 10px; }

/* Видео */
.cb-video { margin: 0 0 28px; }
.cb-video__frame { position: relative; padding-top: 56.25%; border-radius: 13px; overflow: hidden; }
.cb-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Кнопки */
.cb-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.cb-buttons--center { justify-content: center; }
.cb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 26px; border-radius: 100px; font-weight: 600; font-size: 15px;
    line-height: 1.2; text-decoration: none !important; border: 1.5px solid #0588D1;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.cb-btn--primary { background: #0588D1; color: #fff !important; }
.cb-btn--primary:hover { background: #0470ad; border-color: #0470ad; box-shadow: 0 6px 16px rgba(5,136,209,.28); }
.cb-btn--outline { background: transparent; color: #0588D1 !important; }
.cb-btn--outline:hover { background: #0588D1; color: #fff !important; box-shadow: 0 6px 16px rgba(5,136,209,.28); }

/* Карточки с иконками */
.cb-cards { margin-bottom: 36px; }
.cb-cards__grid { display: grid; gap: 24px; }
.cb-cards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-cards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-cards__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) {
    .cb-cards__grid--3, .cb-cards__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) { .cb-cards__grid { grid-template-columns: 1fr !important; } }
.cb-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid #ededed; border-radius: 13px;
    padding: 24px; box-shadow: 0 4px 15px rgba(0,0,0,.05);
}
.cb-card__icon {
    width: 72px; height: 72px; flex-shrink: 0; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eaf4fc, #dceffc); border-radius: 16px;
}
.cb-card__icon i { font-size: 36px; color: #0588D1; }
.cb-card__title { font-size: 18px; font-weight: 600; line-height: 26px; color: #1b1a1d; margin-bottom: 10px; }
.cb-card__text { color: #605f67; font-size: 16px; line-height: 24px; margin: 0 0 16px; flex-grow: 1; }

/* Список файлов и ссылок */
.cb-downloads { margin-bottom: 32px; }
.cb-downloads__title { font-size: 22px; line-height: 31px; font-weight: 600; color: #1b1a1d; margin: 0 0 18px; }
.cb-downloads__list { list-style: none; padding: 0; margin: 0; }
.cb-downloads__item { margin-bottom: 10px; }
.cb-downloads__item a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; background: #f7fafd; border: 1px solid #e6eef6;
    border-radius: 10px; color: #1b1a1d !important; text-decoration: none !important;
    transition: background-color .2s, border-color .2s;
}
.cb-downloads__item a:hover { background: #eaf4fc; border-color: #cfe4f5; }
.cb-downloads__ico {
    width: 20px; height: 20px; flex-shrink: 0; background-color: #0588D1;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/></svg>") center / contain no-repeat;
}
.cb-downloads__meta {
    margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 700;
    color: #0588D1; background: #eaf4fc; border-radius: 5px; padding: 3px 8px;
}

/* Шаги: сетку берём от блока «Оплата», добавляем обёртку */
.cb-steps-wrap { margin-bottom: 32px; }

/* Таблица */
.cb-table-wrap { margin-bottom: 32px; }
.cb-table-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid #e6eef6; }
.cb-table { width: 100%; border-collapse: collapse; background: #fff; }
.cb-table th, .cb-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid #e6eef6; font-size: 16px; line-height: 24px; }
.cb-table th { background: #f7fafd; font-weight: 600; color: #1b1a1d; white-space: nowrap; }
.cb-table td { color: #605f67; }
.cb-table tr:last-child td { border-bottom: 0; }

/* Слайдер */
.cb-slider { position: relative; margin-bottom: 32px; }
.cb-slider__viewport { overflow: hidden; border-radius: 13px; }
.cb-slider__track { display: flex; scroll-snap-type: x mandatory; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.cb-slider__track::-webkit-scrollbar { display: none; }
.cb-slider__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.cb-slider__slide img { width: 100%; height: auto; display: block; }
.cb-slider__slide figcaption { color: #8b8a91; font-size: 15px; padding: 10px 4px 0; }
.cb-slider__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center; z-index: 2;
    transition: background-color .2s;
}
.cb-slider__arrow:hover { background: #fff; }
.cb-slider__arrow::before {
    content: ""; width: 14px; height: 14px;
    border-top: 2px solid #1b1a1d; border-right: 2px solid #1b1a1d;
}
.cb-slider__arrow--prev { left: 12px; }
.cb-slider__arrow--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.cb-slider__arrow--next { right: 12px; }
.cb-slider__arrow--next::before { transform: rotate(45deg); margin-right: 4px; }
.cb-slider__arrow[disabled] { opacity: .35; cursor: default; }

/* Призыв к действию: сетку берём от «Оплаты» */
.cb-cta { margin-bottom: 32px; }