/* Start:/main/css/main.css?178895467631802*/
/* Главная страница. Разметка независима от блоков Aspro, шапка и подвал остаются шаблонными. */

/* Палитра на :root, а не на .mp: модальные окна выносятся скриптом в конец body
   и внутри .mp переменных уже не видят. */
:root {
    --mp-dark: #181818;
    --mp-dark-card: #222229;
    --mp-text: #121312;
    --mp-muted: #757575;
    --mp-muted-dark: #A3A3A3;
    --mp-grey: #F5F5F5;
    --mp-grey-2: #F0F0F0;
    --mp-border: #E2E2E2;
    --mp-border-dark: rgba(255, 255, 255, .16);
    --mp-gap: 24px;
    --mp-section: 100px;
}

.mp {
    color: var(--mp-text);
    font-size: 16px;
    line-height: 1.5;
}

.mp *, .mp-modal, .mp-modal * { box-sizing: border-box; }

/* заголовок страницы и хлебные крошки шаблона: на главной их и так нет, здесь мешают макету */
body:has(.mp) .page-top-info { display: none; }

.mp-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Секция во всю ширину окна независимо от контейнера шаблона.
   Смещение блока от края страницы и ширину полосы прокрутки подставляет main.js;
   без него секции просто останутся в границах контейнера. */
.mp-full {
    width: calc(100vw - var(--mp-sbw, 0px));
    margin-left: calc(-1 * var(--mp-off, 0px));
}

.mp-section { padding: var(--mp-section) 0; }
.mp-section--tight { padding: 72px 0; }

.mp-dark {
    background: var(--mp-dark);
    color: #fff;
}

.mp-grey-bg { background: var(--mp-grey); }

/* типографика */
.mp-eyebrow {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mp-muted);
    margin-bottom: 18px;
}

.mp-dark .mp-eyebrow { color: var(--mp-muted-dark); }

/* color: inherit — тема красит теги заголовков своим цветом, из-за чего они гаснут на тёмном фоне */
.mp-h1 {
    font-size: clamp(34px, 3.2vw, 46px);
    line-height: 1.14;
    font-weight: 500;
    text-transform: uppercase;
    color: inherit;
    margin: 0 0 24px;
}

.mp-h2 {
    font-size: clamp(27px, 2.4vw, 36px);
    line-height: 1.2;
    font-weight: 500;
    color: inherit;
    margin: 0 0 20px;
}

.mp-h3 {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
    color: inherit;
    margin: 0 0 10px;
}

.mp-lead {
    font-size: 18px;
    line-height: 1.55;
    margin: 0;
}

.mp-muted { color: var(--mp-muted); }
.mp-dark .mp-muted { color: var(--mp-muted-dark); }

/* кнопки и ссылки */

/* тема подчёркивает все ссылки правилом a:not(...), перебиваем его по специфичности */
.mp a.mp-link,
.mp a.mp-btn,
.mp a.mp-eco__card,
.mp a.mp-tasks__card,
.mp a.mp-projects__card {
    text-decoration: none;
}

.mp-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: opacity .2s, background-color .2s, color .2s;
}

.mp-btn:hover { text-decoration: none; opacity: .85; }
.mp-btn--light { background: #fff; color: var(--mp-text); }
.mp-btn--light:hover { color: var(--mp-text); }
.mp-btn--dark { background: #111; color: #fff; }
.mp-btn--dark:hover { color: #fff; }
.mp-btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.mp-btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; opacity: 1; }

.mp-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    font-size: 16px;
}

.mp-link:hover { text-decoration: none; color: inherit; }
.mp-link:hover .mp-arrow { transform: translateX(4px); }
.mp-arrow { transition: transform .2s; flex: 0 0 auto; }

/* первый экран */
.mp-hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    background: #2a2a2a url(/main/img/hero.jpg) center / cover no-repeat;
    color: #fff;
}

.mp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .35) 100%);
}

/* padding-block, а не padding: иначе затираются горизонтальные поля контейнера */
.mp-hero__inner { position: relative; width: 100%; padding-block: 120px; }
.mp-hero__text { max-width: 620px; margin: 22px 0 40px; font-size: 19px; line-height: 1.5; }
.mp-hero__btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* полоса цифр */
.mp-numbers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--mp-border-dark);
    padding: 44px 0;
}

.mp-numbers__item { padding: 0 20px; text-align: center; }
.mp-numbers__item + .mp-numbers__item { border-left: 1px solid var(--mp-border-dark); }
.mp-numbers__value { font-size: clamp(28px, 2.5vw, 42px); line-height: 1.1; font-weight: 400; white-space: nowrap; }
.mp-numbers__value sup { font-size: .55em; vertical-align: super; }
.mp-numbers__label { margin-top: 10px; font-size: 15px; color: var(--mp-muted-dark); }

/* B2B-кабинет */
.mp-cabinet { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mp-cabinet__text { max-width: 520px; margin: 20px 0 0; font-size: 18px; line-height: 1.55; }

.mp-cabinet__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
    margin: 52px 0;
}

.mp-cabinet__item { display: flex; gap: 18px; }
.mp-cabinet__icon { flex: 0 0 auto; opacity: .85; }
.mp-cabinet__btns { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }

/* Ноутбук уходит за правый край окна: блок дотягивается до края, лишнее обрезается.
   32px — правое поле контейнера, дальше половина свободного места до края окна. */
.mp-cabinet__shot {
    margin-right: calc(-1 * (32px + max(0px, (100vw - var(--mp-sbw, 0px) - 1360px) / 2)));
    overflow: hidden;
}

.mp-cabinet__shot img { display: block; width: 150%; max-width: none; height: auto; margin-left: 5%; }

/* экосистема */
.mp-eco {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mp-gap);
    margin-top: 48px;
}

.mp-eco__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    padding: 26px 24px 24px;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.mp-eco__card:hover { color: #fff; text-decoration: none; }

.mp-eco__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.mp-eco__card:hover img { transform: scale(1.04); }

.mp-eco__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .65) 45%, rgba(0, 0, 0, .88) 100%);
}

/* z-index обязателен: псевдоэлемент с затемнением идёт последним и иначе перекрывает текст */
.mp-eco__body { position: relative; z-index: 1; }
.mp-eco__title { font-size: 20px; text-transform: uppercase; margin-bottom: 10px; }
.mp-eco__desc { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .82); }

.mp-eco__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 26px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .75);
}

/* полоса логотипов брендов */
.mp-brands {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 38px 0;
}

.mp-brands img {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    max-height: 26px;
    width: auto;
    object-fit: contain;
    opacity: .9;
}
.mp-brands-link { margin-top: 22px; display: flex; justify-content: flex-end; }

/* условия */
.mp-terms {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 48px;
}

.mp-terms__item { padding: 0 28px; }
.mp-terms__item:first-child { padding-left: 0; }
.mp-terms__item + .mp-terms__item { border-left: 1px solid var(--mp-border); }
.mp-terms__num { font-size: 40px; line-height: 1; color: #D9D9D9; margin-bottom: 22px; }
.mp-terms__desc { font-size: 15px; line-height: 1.5; color: var(--mp-muted); }

/* решения для профессионалов */
.mp-solutions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 44px;
}

.mp-solutions__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    overflow: hidden;
}

.mp-solutions__head {
    background: var(--mp-grey);
    padding: 26px 24px 24px;
    border-bottom: 1px solid var(--mp-border);
    min-height: 168px;
}

.mp-solutions__head img { display: block; width: 34px; height: 34px; margin-bottom: 26px; }
.mp-solutions__title { font-size: 17px; line-height: 1.3; }
.mp-solutions__body { padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mp-solutions__desc { font-size: 15px; line-height: 1.5; margin-bottom: 22px; }
.mp-solutions__list { list-style: none; margin: 0 0 24px; padding: 0; }

.mp-solutions__list li {
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--mp-muted);
    margin: 0 0 14px;
}

/* тема вешает на пункты списка кружок-маркер через ul > li::before */
.mp-solutions__list li::before { content: none; }

.mp-solutions__list svg { flex: 0 0 auto; margin-top: 2px; }
.mp-solutions__more { margin-top: auto; }

/* товары */
.mp-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mp-gap);
    margin-top: 44px;
}

.mp-products__card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    padding: 24px;
}

.mp-products__fav {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #C5C5C5;
    line-height: 0;
}

.mp-products__pic {
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 26px 0 22px;
}

.mp-products__pic a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mp-products__pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mp-products__brand { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-muted); }

/* название товара приходит из каталога целиком, поэтому режем по двум строкам */
.mp-products__name {
    font-size: 18px;
    margin: 8px 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 52px;
}

.mp .mp-products__name a,
.mp .mp-products__pic a {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
}

/* высота под две строки, иначе карточки с длинным описанием сбивают общую линию */
.mp-products__type { font-size: 15px; color: var(--mp-muted); min-height: 46px; }

.mp-products__stock {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin: 20px 0 22px;
}

.mp-products__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--mp-muted);
}

.mp-products__price-label { font-size: 15px; }
.mp-products__price { font-size: 15px; color: var(--mp-muted); margin-top: 4px; }

.mp-products__benefit {
    margin: 18px 0;
    padding: 13px;
    border-radius: 8px;
    background: var(--mp-grey);
    text-align: center;
    font-size: 15px;
}

.mp-products__more { margin-top: auto; }

/* регистрация */
.mp-register {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
    padding: 64px;
    border-radius: 12px;
    background: var(--mp-grey);
}

.mp-register__btn { margin: 40px 0 18px; }
.mp-register__login { font-size: 15px; }
.mp-register__login a { color: inherit; text-decoration: underline; }
.mp-register__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-content: center; }
.mp-register__icon { margin-bottom: 22px; opacity: .9; }
.mp-register__desc { font-size: 15px; line-height: 1.5; color: var(--mp-muted); }

/* подбор решения */
.mp-tasks { display: grid; grid-template-columns: minmax(320px, 0.55fr) 1.45fr; gap: 48px; align-items: center; }
.mp-tasks__text { margin: 22px 0 40px; font-size: 18px; line-height: 1.55; max-width: 460px; }
.mp-tasks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.mp-tasks__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 250 / 374;
    padding: 22px;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.mp-tasks__card:hover { color: #fff; text-decoration: none; }
.mp-tasks__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mp-tasks__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .92) 100%);
}

.mp-tasks__body { position: relative; z-index: 1; }
.mp-tasks__title { font-size: 17px; margin-bottom: 6px; }
.mp-tasks__desc { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .85); }

.mp-tasks__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    padding: 7px 14px;
    border-radius: 20px;
    background: #fff;
    color: var(--mp-text);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* как начать работать */
.mp-start { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 60px; align-items: start; }
.mp-start__text { margin-top: 22px; font-size: 18px; line-height: 1.55; }

.mp-start__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
}

.mp-start__card-head { display: flex; align-items: center; gap: 22px; text-align: left; }
.mp-start__card-title { font-size: 19px; line-height: 1.35; }
.mp-start__card .mp-btn { margin: 30px 0 16px; padding: 0 24px; white-space: nowrap; }
.mp-start__card-login { font-size: 14px; }
.mp-start__card-login a { color: inherit; text-decoration: underline; }

.mp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 64px; }
.mp-steps__num { font-size: 40px; line-height: 1; color: #D9D9D9; margin-bottom: 20px; }
.mp-steps__desc { font-size: 15px; line-height: 1.5; color: var(--mp-muted); }

/* шоурумы */
.mp-showrooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-gap); margin-top: 52px; }

.mp-showrooms__card {
    background: #fff;
    color: var(--mp-text);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mp-showrooms__pic { height: 240px; }
.mp-showrooms__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-showrooms__body { padding: 28px; flex: 1 1 auto; }
.mp-showrooms__title { font-size: 20px; margin-bottom: 24px; }
.mp-showrooms__row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; font-size: 15px; line-height: 1.45; }

.mp-showrooms__ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--mp-grey);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-showrooms__foot { border-top: 1px solid var(--mp-border); padding: 22px 28px; text-align: center; }

/* проекты */
.mp-projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-gap); margin-top: 44px; }

.mp-projects__card {
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
}

.mp-projects__card:hover { color: inherit; text-decoration: none; }
.mp-projects__pic { height: 260px; overflow: hidden; }
.mp-projects__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.mp-projects__card:hover img { transform: scale(1.04); }
.mp-projects__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 24px 22px; }
.mp-projects__title { font-size: 16px; }
.mp-projects__meta { font-size: 14px; color: var(--mp-muted); margin-top: 4px; }
.mp-projects__brand { font-size: 14px; color: var(--mp-muted); white-space: nowrap; }

/* партнёры */
.mp-partners {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 56px;
    flex-wrap: wrap;
}

.mp-partners img { max-height: 62px; width: auto; }

/* отзывы */
.mp-reviews { padding: 80px 0; }

.mp-reviews__track {
    display: flex;
    gap: var(--mp-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.mp-reviews__track::-webkit-scrollbar { display: none; }

.mp-reviews__card {
    flex: 0 0 420px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    padding: 36px 34px 32px;
    display: flex;
    flex-direction: column;
}

.mp-reviews__quote { font-size: 46px; line-height: .8; color: #D9D9D9; margin-bottom: 18px; }
.mp-reviews__text { font-size: 16px; line-height: 1.55; margin-bottom: 32px; }
.mp-reviews__company { margin-top: auto; font-size: 15px; }
.mp-reviews__author { font-size: 14px; color: var(--mp-muted); margin-top: 6px; }
.mp-reviews__nav { display: flex; justify-content: flex-end; gap: 14px; margin-top: 32px; }

.mp-reviews__btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--mp-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s;
}

.mp-reviews__btn:hover { background: var(--mp-grey); }

/* финальный блок */
.mp-cta {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background: #101010 url(/main/img/cta-final.jpg) center / cover no-repeat;
    color: #fff;
}

.mp-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .25) 100%);
}

.mp-cta__inner { position: relative; width: 100%; padding-block: 110px; }
.mp-cta__text { max-width: 560px; margin: 22px 0 40px; font-size: 18px; line-height: 1.55; }

/* модальные формы */

/* Не flex-центрирование: у контейнера со скроллом центрированный блок обрезается сверху
   и «отрезанное» не прокручивается. Отступ сверху — под фиксированную шапку, её высоту
   замеряет main.js и кладёт в --mp-header-h. */
.mp-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    padding: calc(var(--mp-header-h, 79px) + 24px) 16px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mp-modal[hidden] { display: none; }
.mp-modal__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); }

.mp-modal__window {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 44px;
    background: #fff;
    border-radius: 12px;
    color: var(--mp-text);
}

.mp-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mp-muted);
    transition: background-color .2s, color .2s;
}

.mp-modal__close:hover { background: var(--mp-grey); color: var(--mp-text); }

.mp-modal__head { margin-bottom: 28px; padding-right: 40px; }
.mp-modal__title { font-size: 28px; line-height: 1.2; font-weight: 500; color: inherit; margin: 0 0 12px; }
.mp-modal__lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mp-muted); }

.mp-modal__tag {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--mp-grey);
    font-size: 14px;
}

/* класс с display перебивает атрибут hidden, поэтому скрываем явно */
.mp-modal__tag[hidden], .mp-modal__done[hidden] { display: none; }

.mp-modal__done { text-align: center; padding: 20px 0 8px; }
.mp-modal__done-title { font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.mp-modal__done-text { margin: 0 0 28px; color: var(--mp-muted); }

/* поля */
.mp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.mp-field { display: block; margin-bottom: 20px; padding: 0; border: 0; }
.mp-field__label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--mp-muted); }
.mp-field__label b { color: #c0392b; font-weight: 400; }

.mp-field__input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    background: #fff;
    color: var(--mp-text);
    font-family: inherit;
    font-size: 16px;
    transition: border-color .2s;
}

.mp-field__input:focus { outline: none; border-color: var(--mp-text); }
.mp-field__input--area { height: auto; padding: 14px 16px; line-height: 1.5; resize: vertical; }

.mp-field__error { display: none; margin-top: 6px; font-size: 13px; color: #c0392b; }
.mp-field--invalid .mp-field__input { border-color: #c0392b; }
.mp-field--invalid .mp-field__error { display: block; }

/* чекбоксы «Что нужно подобрать» */
.mp-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 4px; }
.mp-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.mp-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.mp-check__box {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mp-border);
    border-radius: 4px;
    color: transparent;
    transition: border-color .2s, background-color .2s, color .2s;
}

.mp-check input:checked + .mp-check__box { background: var(--mp-text); border-color: var(--mp-text); color: #fff; }
.mp-check input:focus-visible + .mp-check__box { border-color: var(--mp-text); }
.mp-check__text { font-size: 15px; }

.mp-form__submit { width: 100%; justify-content: center; margin-top: 4px; }
.mp-form__submit[disabled] { opacity: .6; pointer-events: none; }

.mp-form__note { margin: 16px 0 0; font-size: 13px; line-height: 1.45; color: var(--mp-muted); text-align: center; }
.mp .mp-form__note a { color: var(--mp-muted); text-decoration: underline; }

/* кнопка, оформленная как ссылка со стрелкой */
.mp-link--btn { padding: 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; }


/* ноутбуки */
@media (max-width: 1400px) {
    .mp { --mp-section: 84px; }
    .mp-solutions { gap: 16px; }
    .mp-reviews__card { flex-basis: 380px; }
}

@media (max-width: 1200px) {
    .mp-numbers { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
    .mp-numbers__item:nth-child(3n+1) { border-left: 0; }
    .mp-eco, .mp-products, .mp-projects { grid-template-columns: repeat(2, 1fr); }
    .mp-solutions, .mp-terms { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
    .mp-terms__item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
    .mp-cabinet, .mp-tasks, .mp-start, .mp-register { grid-template-columns: 1fr; gap: 44px; }
    .mp-register { padding: 44px; }
    .mp-register__items { grid-template-columns: repeat(3, 1fr); }
    .mp-showrooms { grid-template-columns: 1fr; }
    .mp-steps { grid-template-columns: repeat(2, 1fr); }
    /* в одну колонку ноутбук показываем целиком */
    .mp-cabinet__shot { margin-right: 0; }
    .mp-cabinet__shot img { width: 100%; margin-left: 0; }
    .mp-solutions__head { min-height: 150px; }
}

/* планшет */
@media (max-width: 992px) {
    .mp { --mp-section: 64px; --mp-gap: 16px; }
    .mp-section--tight { padding: 56px 0; }
    .mp-container { padding: 0 24px; }

    .mp-hero { min-height: 560px; }
    .mp-hero__inner { padding-block: 80px; }
    .mp-hero__text { font-size: 17px; margin: 18px 0 32px; }

    .mp-numbers { padding: 36px 0; }
    .mp-cabinet__list { gap: 28px 24px; margin: 40px 0; }
    .mp-cabinet__btns { gap: 24px; }

    .mp-solutions { grid-template-columns: repeat(2, 1fr); }
    .mp-terms { grid-template-columns: repeat(2, 1fr); }
    .mp-terms__item { padding: 0 20px; }
    .mp-terms__item:nth-child(3n+1) { border-left: 1px solid var(--mp-border); padding-left: 20px; }
    .mp-terms__item:nth-child(2n+1) { border-left: 0; padding-left: 0; }

    .mp-showrooms { grid-template-columns: repeat(2, 1fr); }
    .mp-tasks__grid { grid-template-columns: repeat(2, 1fr); }

    /* девять логотипов в один ряд на планшете мельчают до нечитаемого */
    .mp-brands {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-items: center;
        align-items: center;
        gap: 26px 18px;
        padding: 32px 0;
    }
    .mp-brands img { max-height: 24px; }
    .mp-reviews__card { flex-basis: 340px; padding: 30px 26px 26px; }
    .mp-cta { min-height: 460px; }
    .mp-cta__inner { padding-block: 80px; }
}

/* телефон */
@media (max-width: 767px) {
    .mp { --mp-section: 48px; }
    .mp-section--tight { padding: 40px 0; }
    .mp-container { padding: 0 16px; }

    .mp-h1 { font-size: 28px; margin-bottom: 18px; }
    .mp-h2 { font-size: 24px; margin-bottom: 16px; }
    .mp-h3 { font-size: 17px; }
    .mp-lead { font-size: 16px; }
    .mp-eyebrow { font-size: 12px; margin-bottom: 14px; }

    .mp-hero { min-height: 480px; }
    .mp-hero__inner { padding-block: 56px; }
    .mp-hero__text { font-size: 16px; margin: 16px 0 28px; }
    .mp-hero__btns { flex-direction: column; align-items: stretch; gap: 12px; }
    .mp-btn { height: 52px; justify-content: center; }

    /* формы: одна колонка, окно во всю ширину и по высоте содержимого */
    .mp-modal { padding: calc(var(--mp-header-h, 60px) + 12px) 0 24px; }
    .mp-modal__window { max-width: none; padding: 44px 20px 28px; border-radius: 0; }
    .mp-modal__title { font-size: 24px; }
    .mp-modal__close { top: 10px; right: 10px; }
    .mp-form__grid, .mp-check-grid { grid-template-columns: 1fr; }
    .mp-check-grid { gap: 14px; }

    /* полоса цифр в две колонки */
    .mp-numbers { grid-template-columns: repeat(2, 1fr); row-gap: 28px; padding: 32px 0; }
    .mp-numbers__item { padding: 0 12px; }
    .mp-numbers__item:nth-child(3n+1) { border-left: 1px solid var(--mp-border-dark); }
    .mp-numbers__item:nth-child(2n+1) { border-left: 0; }
    .mp-numbers__label { font-size: 14px; }

    .mp-cabinet__text { font-size: 16px; }
    .mp-cabinet__list { grid-template-columns: 1fr; gap: 24px; margin: 32px 0; }
    .mp-cabinet__btns { flex-direction: column; align-items: stretch; gap: 20px; }
    .mp-cabinet__btns .mp-link { justify-content: center; }
    .mp-cabinet__shot { border-radius: 12px; }

    .mp-eco { grid-template-columns: 1fr; margin-top: 32px; }
    .mp-eco__card { min-height: 260px; }

    /* логотипы брендов сеткой: в один ряд на телефоне они превращаются в точки */
    .mp-brands {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        align-items: center;
        gap: 26px 16px;
        padding: 28px 0;
    }
    .mp-brands img { max-height: 22px; }
    .mp-brands-link { justify-content: center; margin-top: 18px; }

    .mp-terms { grid-template-columns: 1fr; row-gap: 28px; margin-top: 32px; }
    .mp-terms__item { padding: 0; border-left: 0; }
    .mp-terms__item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
    .mp-terms__num { font-size: 32px; margin-bottom: 12px; }

    .mp-solutions { grid-template-columns: 1fr; margin-top: 32px; }
    .mp-solutions__head { min-height: 0; padding: 22px 20px; }
    .mp-solutions__head img { margin-bottom: 16px; }
    .mp-solutions__body { padding: 20px; }

    .mp-products { grid-template-columns: 1fr; margin-top: 32px; }
    .mp-products__type { min-height: 0; }
    .mp-products__pic { height: 240px; }

    .mp-register { padding: 28px 20px; }
    .mp-register__items { grid-template-columns: 1fr; gap: 24px; }
    .mp-register__btn { margin: 28px 0 14px; }
    .mp-register__icon { margin-bottom: 14px; }

    /* задачи прокруткой: вытянутые карточки в сетке 2x2 становятся слишком узкими */
    .mp-tasks__grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .mp-tasks__grid::-webkit-scrollbar { display: none; }
    .mp-tasks__card { flex: 0 0 68%; scroll-snap-align: start; }
    .mp-tasks__text { font-size: 16px; margin: 16px 0 28px; }

    .mp-start__card { padding: 24px 20px; }
    .mp-start__card-head { flex-direction: column; text-align: center; gap: 14px; }
    .mp-start__text { font-size: 16px; }
    .mp-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
    .mp-steps__num { font-size: 32px; margin-bottom: 12px; }

    .mp-showrooms { grid-template-columns: 1fr; margin-top: 32px; }
    .mp-showrooms__pic { height: 200px; }
    .mp-showrooms__body { padding: 22px 20px; }
    .mp-showrooms__foot { padding: 18px 20px; }

    .mp-projects { grid-template-columns: 1fr; margin-top: 32px; }
    .mp-projects__pic { height: 220px; }

    .mp-partners { gap: 28px; margin-top: 32px; justify-content: space-around; }
    .mp-partners img { max-height: 44px; }

    .mp-reviews { padding: 48px 0; }
    .mp-reviews__card { flex-basis: 86%; padding: 26px 22px 24px; }
    .mp-reviews__text { font-size: 15px; margin-bottom: 24px; }
    .mp-reviews__nav { justify-content: center; margin-top: 24px; }

    .mp-cta { min-height: 380px; }
    .mp-cta__inner { padding-block: 56px; }
    .mp-cta__text { font-size: 16px; margin: 16px 0 28px; }
}

/* узкие телефоны */
@media (max-width: 480px) {
    .mp-h1 { font-size: 25px; }
    .mp-h2 { font-size: 22px; }
    .mp-numbers__value { font-size: 26px; }
    .mp-brands { grid-template-columns: repeat(2, 1fr); }
    .mp-tasks__card { flex-basis: 78%; }
    .mp-reviews__card { flex-basis: 90%; }
    .mp-products__pic { height: 200px; }
}

/* End */
/* /main/css/main.css?178895467631802 */