/*
 * Главная основного сайта. Контрольные ширины макета: 1920, 1440, 990, 375.
 * Отступы между секциями: --w-gap-l / -m / -s — три ступени из макета 1920
 * (140 / 100 / 80), на 1440 все 80, на 990 и мобильном — 60.
 */

:root {
    --w-gap-l: 140px;
    --w-gap-m: 100px;
    --w-gap-s: 80px;
    --w-title: 60px;
    --w-glass: rgba(34, 34, 34, .51);
}

@media (max-width: 1919px) {
    :root { --w-gap-l: 80px; --w-gap-m: 80px; --w-gap-s: 80px; --w-title: 48px; }
}

@media (max-width: 1439px) {
    :root { --w-gap-l: 60px; --w-gap-m: 60px; --w-gap-s: 60px; --w-title: 40px; }
}

@media (max-width: 989px) {
    :root { --w-title: 32px; }
}

.w-title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-section { margin-top: var(--w-gap-l); }
.w-section--m { margin-top: var(--w-gap-m); }
.w-section--s { margin-top: var(--w-gap-s); }
.w-section--last { margin-bottom: var(--w-gap-s); }

/* =====================================================================
   Hero
   ===================================================================== */

/* Первый экран — во всю высоту окна. Нижняя граница из макета (820 на 1920)
   остаётся минимумом: на низком окне заголовок с кнопкой не налезут
   на плашки. svh — чтобы на телефоне не прыгало с адресной строкой. */
.w-hero {
    position: relative;
    height: 100svh;
    min-height: 820px;
    overflow: hidden;
    color: #fff;
}

.w-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Кадр макета: видна нижняя часть картинки, дом по центру. */
    object-position: 50% 86%;
}

.w-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 18.564%, rgba(0, 0, 0, 0) 75.711%, rgba(0, 0, 0, .35) 100%);
}

.w-hero .w-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Две плашки над домом; зелёная на 5px заходит на стеклянную — так в макете. */
.w-hero__badges {
    position: absolute;
    left: 51.1%;
    /* В долях высоты, а не в px: при экране выше макета дом уезжает вниз,
       и плашки должны ехать вместе с ним (248/820 на 1920). */
    top: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.w-hero__badge {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    border: 1px solid;
    border-radius: 48px;
    font-family: var(--w-font-display);
    font-size: 28px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

.w-hero__badge--glass {
    border-color: #7e7e7e;
    background: rgba(17, 17, 17, .45);
    -webkit-backdrop-filter: blur(17px);
    backdrop-filter: blur(17px);
}

.w-hero__badge--green {
    margin-top: -5px;
    border-color: var(--w-green);
    background: var(--w-green);
}

.w-hero__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-top: auto;
    padding-bottom: 24px;
}

.w-hero__title {
    max-width: 811px;
    margin: 0;
    font-family: var(--w-font-display);
    font-size: 100px;
    font-weight: 400;
    line-height: .84;
    text-transform: uppercase;
}

/* Заголовок в две строки: «Дома из СИП-панелей» / «под ключ в <городе>». Ширину задаёт перенос,
   а не max-width — иначе строки ломались по ширине в три. На мобильном
   перенос свой, по ширине экрана. */
.w-hero__title { max-width: none; }

.w-hero__button {
    flex: none;
    width: 237px;
    height: 91px;
    padding: 0;
}

@media (max-width: 1919px) {
    .w-hero { min-height: 742px; }
    .w-hero__badges { left: 50.1%; top: 40.7%; }
    .w-hero__badge { height: 37px; font-size: 22px; }
    .w-hero__bottom { padding-bottom: 18px; }
    .w-hero__title { font-size: 72px; }
    .w-hero__button { width: 210px; height: 80px; font-size: 24px; }
}

@media (max-width: 1439px) {
    .w-hero { min-height: 566px; }
    .w-hero__badges { left: 49.5%; top: 44%; }
    .w-hero__badge { height: 33px; padding: 0 10px; font-size: 18px; }
    .w-hero__badge--green { height: 25px; }
    .w-hero__bottom { padding-bottom: 20px; }
    .w-hero__title { font-size: 54px; }
    .w-hero__button { width: 190px; height: 66px; font-size: 22px; }
}

@media (max-width: 989px) {
    .w-hero__img { object-position: 71% 50%; }
    .w-hero__badges { left: calc(50% + 8px); top: 40.6%; }
    .w-hero__bottom { flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 16px; }
    .w-hero__title { font-size: 46px; }
    .w-hero__br { display: none; }
    .w-hero__button { width: 100%; height: 50px; font-size: 22px; }
}

/* =====================================================================
   Популярные проекты
   ===================================================================== */

.w-popular { margin-top: var(--w-gap-m); }

.w-popular__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 16px;
    margin-top: 54px;
}

.w-popular__all {
    display: table;
    margin: 45px auto 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--w-green);
    color: #2a2a2a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}


/* Карточка на главной крупнее каталожной: размеры из макета 1920. */
.w-card--lg {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    color: #0a0a0a;
}

.w-card--wide { grid-column: 1 / -1; }

.w-card--lg .w-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 872 / 484;
    object-fit: cover;
    background: #e9e9e9;
}

.w-card--lg.w-card--wide .w-card__img { aspect-ratio: 2 / 1; }

.w-card--lg .w-card__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 20px;
}

.w-card--lg .w-card__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.w-card--lg .w-card__price { color: var(--w-green); }

.w-card--lg .w-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 22px;
}

.w-card--lg .w-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #e9e9e9;
    color: #535353;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.w-card--lg .w-card__chip--area {
    border-color: #50ae85;
    background: #def2e9;
    color: #136e47;
    font-weight: 700;
}

.w-card--lg .w-card__chip sup {
    font-size: .645em;
    line-height: 0;
    vertical-align: .35em;
}

.w-card--lg .w-card__btn {
    margin: 0 22px;
    height: 72px;
    padding: 0;
    border-radius: 8px;
    font-size: 32px;
}

@media (max-width: 1919px) {
    .w-popular__grid { gap: 24px 16px; margin-top: 44px; }
    .w-card--lg .w-card__body { gap: 24px; padding-top: 18px; }
    .w-card--lg .w-card__head { font-size: 30px; }
    .w-card--lg .w-card__chip { font-size: 20px; }
    .w-card--lg .w-card__btn { height: 64px; font-size: 28px; }
}

@media (max-width: 1439px) {
    .w-popular__grid { gap: 20px 16px; margin-top: 36px; }
    .w-popular__all { margin-top: 36px; font-size: 16px; }
    .w-card--lg .w-card__body { gap: 20px; padding-top: 16px; }
    .w-card--lg .w-card__head { padding: 0 16px; font-size: 24px; }
    .w-card--lg .w-card__chips { gap: 10px; padding: 0 16px; }
    .w-card--lg .w-card__chip { font-size: 16px; }
    .w-card--lg .w-card__btn { margin: 0 16px; height: 56px; font-size: 24px; }
}

@media (max-width: 989px) {
    .w-popular { margin-top: 40px; }
    .w-popular__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
    .w-popular__all { margin-top: 30px; font-size: 14px; }
    .w-card--lg { padding-bottom: 20px; }
    .w-card--lg .w-card__img, .w-card--lg.w-card--wide .w-card__img { aspect-ratio: 347 / 190; }
    .w-card--lg .w-card__body { gap: 22px; padding-top: 12px; }
    .w-card--lg .w-card__head { padding: 0 12px; font-size: 22px; }
    .w-card--lg .w-card__chips { gap: 8px; padding: 0 12px; }
    .w-card--lg .w-card__chip { font-size: 14px; }
    .w-card--lg .w-card__btn { margin: 0 12px; height: 54px; font-size: 22px; }
}


/* =====================================================================
   О чём нужно подумать / Как мы помогаем
   ===================================================================== */

.w-help { margin-top: var(--w-gap-l); }

.w-help__panel {
    position: relative;
    height: 924px;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
}

/* На десктопе видна одна панель — какая, решает тумблер. */
.w-help__panel--solutions { display: none; }
.w-help.is-on .w-help__panel--problems { display: none; }
.w-help.is-on .w-help__panel--solutions { display: block; }

.w-help__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* «Выключенное» состояние в макете — чёрно-белое затемнённое фото:
   помощь «включает свет». Фильтр на том же файле, а не отдельная
   картинка: ч/б-версия в макете была 1024px и мылилась на 1760. */
.w-help__panel--problems .w-help__bg { filter: grayscale(1) brightness(.62); }

.w-help__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .54) 0%, rgba(0, 0, 0, 0) 69.231%);
}

.w-help__title {
    position: absolute;
    left: 50%;
    top: 64px;
    width: 628px;
    margin: 0;
    transform: translateX(-50%);
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.w-help__accent { color: #a4ffb8; }

/* Тумблер с подписью и стрелкой — по центру фото. */
.w-help__control {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 442px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
}

/* Тумблер — по SVG из макета (Frame 427320878): салатовая обводка,
   полупрозрачная зелёная подложка с блюром, салатовый круг 38px. */
.w-switch {
    position: relative;
    width: 91px;
    height: 50px;
    padding: 0;
    border: 1px solid #a4ffb8;
    border-radius: 25px;
    background: rgba(94, 222, 173, .22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.w-switch__knob {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #a4ffb8;
    transition: transform .2s ease;
}

.w-switch.is-on .w-switch__knob { transform: translateX(41px); }

.w-help__caption {
    font-family: 'Caveat', cursive;
    font-size: 32px;
    line-height: 1;
    white-space: nowrap;
}

/* Стрелка — между тумблером и подписью, правее центра на 75px: так в макете
   (тумблер 634..725, стрелка 955..999 при центре 880). */
.w-help__arrow {
    position: absolute;
    left: calc(50% + 75px);
    top: 15px;
    width: 44px;
    height: auto;
    transform: rotate(-5.26deg);
}

/* Список карточек не участвует в раскладке: позиции — у самих карточек. */
.w-help__cards { display: contents; margin: 0; padding: 0; list-style: none; }

.w-help__card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: clamp(360px, 23.5%, 439px);
    padding: 16px;
    border: 1px solid #797979;
    border-radius: 10px;
    background: var(--w-glass);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.w-help__card--solution { background: rgba(100, 100, 100, .51); }

.w-help__icon { display: block; width: 33px; height: 33px; margin-bottom: 4px; }

.w-help__card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.w-help__card-text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

/* Шесть карточек: две колонки по три, со сдвигами как в макете 1920. */
.w-help__card:nth-child(1) { left: 15.2%; top: 25.2%; }
.w-help__card:nth-child(2) { left: 58.9%; top: 26.3%; }
.w-help__card:nth-child(3) { left: 14%;   top: 48.7%; }
.w-help__card:nth-child(4) { left: 62.5%; top: 48.9%; }
.w-help__card:nth-child(5) { left: 17.4%; top: 74.6%; }
.w-help__card:nth-child(6) { left: 56.1%; top: 71.1%; }

@media (max-width: 1919px) {
    /* На 1440 секция на всю ширину окна, без скруглений. */
    .w-help__panel { height: 826px; margin: 0 calc(-1 * var(--w-gutter)); border-radius: 0; }
    .w-help__title { top: 54px; width: 520px; }
    .w-help__control { top: 368px; }
    .w-help__card { width: clamp(340px, 30%, 439px); }
    .w-help__card:nth-child(1) { left: 5%;  top: 23%; }
    .w-help__card:nth-child(2) { left: 61%; top: 23%; }
    .w-help__card:nth-child(3) { left: 3%;  top: 46%; }
    .w-help__card:nth-child(4) { left: 66%; top: 46%; }
    .w-help__card:nth-child(5) { left: 8%;  top: 70%; }
    .w-help__card:nth-child(6) { left: 58%; top: 69%; }
}

@media (max-width: 1439px) {
    .w-help__panel { height: 782px; }
    .w-help__title { top: 68px; width: 420px; }
    .w-help__control { top: 368px; }
    .w-help__caption { font-size: 20px; }
    .w-help__arrow { width: 36px; left: calc(50% + 66px); top: 18px; }
    .w-help__card { width: 37.5%; padding: 14px; }
    .w-help__card-title { font-size: 16px; }
    .w-help__card-text { font-size: 14px; }
    .w-help__card:nth-child(1) { left: 3%;   top: 22%; }
    .w-help__card:nth-child(2) { left: 59%;  top: 22%; }
    .w-help__card:nth-child(3) { left: 4.6%; top: 48%; }
    .w-help__card:nth-child(4) { left: 61%;  top: 49%; }
    .w-help__card:nth-child(5) { left: 6%;   top: 74%; }
    .w-help__card:nth-child(6) { left: 57%;  top: 73%; }
}

@media (max-width: 989px) {
    /* Тумблера в макете нет: обе панели подряд, карточки списком. */
    .w-help__panel,
    .w-help.is-on .w-help__panel--problems,
    .w-help__panel--solutions {
        display: block;
        height: auto;
        margin: 0 calc(-1 * var(--w-gutter));
        padding: 42px 14px 30px;
    }

    .w-help__panel--solutions::before { background: linear-gradient(180deg, rgba(0, 0, 0, .54) 0%, rgba(0, 0, 0, 0) 56%); }
    .w-help__title { position: relative; left: 0; top: 0; width: auto; max-width: 326px; margin: 0 auto 36px; transform: none; }
    .w-help__control { display: none; }
    .w-help__card { position: relative; left: auto !important; top: auto !important; width: 100%; padding: 16px; }
    .w-help__card + .w-help__card { margin-top: 10px; }

    /* Порядок решений на мобильном — из макета 375. */
    .w-help__cards { display: flex; flex-direction: column; }
    .w-help__card--solution:nth-child(1) { order: 1; }
    .w-help__card--solution:nth-child(3) { order: 2; }
    .w-help__card--solution:nth-child(5) { order: 3; }
    .w-help__card--solution:nth-child(2) { order: 4; }
    .w-help__card--solution:nth-child(4) { order: 5; }
    .w-help__card--solution:nth-child(6) { order: 6; }
}

/* =====================================================================
   100+ семей
   ===================================================================== */

.w-families {
    padding: 70px 102px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.w-families__lead {
    max-width: 509px;
    margin: 30px auto 0;
    color: #6e6e6e;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.w-families__lead b { color: var(--w-ink); font-weight: 700; }

.w-families__grid {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1320px;
    margin: 60px auto 0;
}

.w-families__divider { width: 1px; background: #d9d9d9; }

.w-families__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 302px;
}

.w-families__item:nth-of-type(2) { width: 256px; }
.w-families__item:nth-of-type(3) { width: 238px; }

.w-families__icon { display: block; width: 110px; height: 110px; margin: -20px 0 -8px; }

.w-families__item-title {
    max-width: 230px;
    margin: 0;
    color: var(--w-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.w-families__item:first-child .w-families__item-title { max-width: 190px; }

.w-families__item-text {
    margin: -6px 0 0;
    color: #6e6e6e;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

@media (max-width: 1919px) {
    .w-families { padding: 50px 80px; }
    .w-families__lead { font-size: 18px; }
    .w-families__grid { margin-top: 44px; }
    .w-families__item-title { font-size: 18px; }
    .w-families__item-text { font-size: 16px; }
}

@media (max-width: 1439px) {
    .w-families { padding: 40px 30px; }
    .w-families__lead { font-size: 16px; margin-top: 20px; }
    .w-families__grid { margin-top: 36px; }
    .w-families__item { width: 30%; }
    .w-families__item:nth-of-type(2), .w-families__item:nth-of-type(3) { width: 30%; }
    .w-families__item-title { font-size: 16px; }
    .w-families__item-text { font-size: 14px; }
}

@media (max-width: 989px) {
    .w-families { padding: 40px 14px 30px; }
    .w-families .w-title { font-size: 38px; }
    .w-families__lead { font-size: 14px; }
    .w-families__grid { flex-direction: column; align-items: center; gap: 30px; margin-top: 50px; }
    .w-families__divider { width: 100%; height: 1px; }
    .w-families__item, .w-families__item:nth-of-type(2), .w-families__item:nth-of-type(3) { width: 100%; }
    .w-families__item-title { font-size: 18px; }
    .w-families__item-text { max-width: 261px; font-size: 14px; }
}

/* =====================================================================
   5 шагов
   ===================================================================== */

.w-steps__list {
    display: flex;
    gap: 18px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}

.w-steps__item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding: 46px 20px;
    border-radius: 10px;
    color: #004528;
    text-align: center;
}

.w-steps__item:nth-child(1) { background: #ecf7f2; }
.w-steps__item:nth-child(2) { background: #ddf8ec; }
.w-steps__item:nth-child(3) { background: #bbeed8; }
.w-steps__item:nth-child(4) { background: #4fa580; color: #fff; }
.w-steps__item:nth-child(5) { background: #2f6d52; color: #fff; }

.w-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--w-green);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.w-steps__item:nth-child(4) .w-steps__num { background: #fff; color: #4fa580; }
.w-steps__item:nth-child(5) .w-steps__num { background: #fff; color: #2f6d52; }

.w-steps__item-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.w-steps__item-text {
    margin: -18px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

@media (max-width: 1919px) {
    .w-steps__list { gap: 14px; margin-top: 40px; }
    .w-steps__item { gap: 22px; padding: 36px 16px; }
    .w-steps__item-title { font-size: 18px; }
    .w-steps__item-text { margin-top: -14px; font-size: 14px; }
}

@media (max-width: 1439px) {
    /* 990: три карточки в первой строке, две — во второй, как в макете. */
    .w-steps__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 30px; }
    .w-steps__item { grid-column: span 2; padding: 30px 16px; }
    .w-steps__item:nth-child(4), .w-steps__item:nth-child(5) { grid-column: span 3; }
}

@media (max-width: 989px) {
    .w-steps__list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
    .w-steps__item { justify-content: center; min-height: 230px; padding: 20px; }
    .w-steps__item:nth-child(4), .w-steps__item:nth-child(5) { min-height: 218px; }
    .w-steps__item-title { max-width: 249px; font-size: 20px; }
    .w-steps__item-text { margin-top: -16px; font-size: 14px; }
}

/* =====================================================================
   Сделайте первый шаг
   ===================================================================== */

.w-first-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 566px;
    margin: 0 10px;
    padding-top: 79px;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.w-first-step__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
}

.w-first-step::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .2);
}

.w-first-step > :not(.w-first-step__bg) { position: relative; z-index: 2; }

.w-first-step__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.w-first-step__sub {
    max-width: 516px;
    margin: 22px 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.w-first-step__card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 428px;
    margin-top: 60px;
    padding: 40px 26px;
    border: 1px solid #b7b7b7;
    border-radius: 10px;
    background: #f3f2f2;
    color: #212121;
}

.w-first-step__text {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.w-first-step__btn { height: 60px; padding: 0; font-size: 26px; }

@media (max-width: 1919px) {
    .w-first-step { height: 534px; margin: 0; padding-top: 64px; }
    .w-first-step__card { width: 400px; margin-top: 50px; padding: 34px 24px; }
    .w-first-step__text { font-size: 22px; }
}

@media (max-width: 1439px) {
    .w-first-step { height: 422px; padding-top: 50px; }
    .w-first-step__sub { margin-top: 16px; font-size: 16px; }
    .w-first-step__card { width: 360px; margin-top: 34px; padding: 30px 20px; gap: 18px; }
    .w-first-step__text { font-size: 18px; }
    .w-first-step__btn { height: 52px; font-size: 22px; }
}

@media (max-width: 989px) {
    .w-first-step { height: 350px; margin: 0 calc(-1 * var(--w-gutter)); padding: 44px 14px 0; border-radius: 0; }
    .w-first-step__title { font-size: 42px; }
    .w-first-step__sub { margin-top: 16px; font-size: 18px; }
    .w-first-step__card { width: 100%; max-width: 347px; margin-top: 24px; padding: 26px 20px; gap: 22px; }
    .w-first-step__text { font-size: 14px; }
}

/* =====================================================================
   Мы понимаем
   ===================================================================== */

.w-understand {
    position: relative;
    padding: 70px 102px;
    border-radius: 10px;
    overflow: hidden;
    background: #282828;
    color: #fff;
    text-align: center;
}

.w-understand__texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34;
    mix-blend-mode: color-burn;
    pointer-events: none;
}

.w-understand > :not(.w-understand__texture) { position: relative; }

.w-understand__title {
    max-width: 714px;
    margin: 0 auto;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.w-understand__accent { color: #28b879; }

.w-understand__lead {
    max-width: 644px;
    margin: 30px auto 0;
    color: rgba(255, 255, 255, .83);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.w-understand__cards {
    display: flex;
    gap: 20px;
    margin-top: 70px;
}

.w-understand__card {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    height: 304px;
    padding: 46px 24px;
    border-radius: 10px;
    background: #fff;
    color: var(--w-ink);
}

.w-understand__card--accent { background: var(--w-green); color: #fff; }

.w-understand__icon { display: block; width: 60px; height: 60px; }

.w-understand__card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.w-understand__card-text {
    margin: -12px 0 0;
    color: #6e6e6e;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
}

.w-understand__card--accent .w-understand__card-text { color: #fff; }

@media (max-width: 1919px) {
    .w-understand { padding: 50px 80px; }
    .w-understand__lead { font-size: 16px; }
    .w-understand__cards { margin-top: 50px; }
    .w-understand__card { height: 270px; padding: 36px 20px; }
    .w-understand__card-title { font-size: 18px; }
}

@media (max-width: 1439px) {
    .w-understand { padding: 40px 30px; }
    .w-understand__cards { gap: 14px; margin-top: 36px; }
    .w-understand__card { height: 260px; padding: 30px 16px; gap: 18px; }
    .w-understand__icon { width: 50px; height: 50px; }
    .w-understand__card-title { font-size: 16px; }
    .w-understand__card-text { font-size: 14px; }
}

@media (max-width: 989px) {
    .w-understand { margin: 0 calc(-1 * var(--w-gutter)); padding: 40px 14px 30px; border-radius: 0; }
    .w-understand__lead { margin-top: 24px; font-size: 14px; }
    .w-understand__cards { flex-direction: column; gap: 16px; margin-top: 30px; }
    .w-understand__card { height: 251px; padding: 24px 20px; gap: 20px; }
    .w-understand__card-title { font-size: 20px; }
}

/* =====================================================================
   Главное — начать
   ===================================================================== */

.w-catalog-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 549px;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.w-catalog-cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

.w-catalog-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
}

.w-catalog-cta__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 660px;
}

.w-catalog-cta__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.w-catalog-cta__btn { width: 350px; height: 80px; padding: 0; font-size: 26px; }

@media (max-width: 1919px) {
    .w-catalog-cta { height: 443px; }
    .w-catalog-cta__content { gap: 32px; width: 600px; }
    .w-catalog-cta__btn { width: 300px; height: 70px; }
}

@media (max-width: 1439px) {
    .w-catalog-cta { height: 367px; }
    .w-catalog-cta__content { gap: 26px; width: 520px; }
    .w-catalog-cta__btn { width: 260px; height: 60px; font-size: 22px; }
}

@media (max-width: 989px) {
    .w-catalog-cta { height: 285px; margin: 0 calc(-1 * var(--w-gutter)); border-radius: 0; }
    .w-section--last { margin-bottom: 0; }
    .w-catalog-cta__content { gap: 30px; width: 100%; max-width: 347px; }
    .w-catalog-cta__title { font-size: 34px; }
    .w-catalog-cta__btn { width: 100%; height: 52px; }
}

/* =====================================================================
   Ховеры главной. Кнопки наследуют .w-button из layout.css.
   ===================================================================== */

.w-popular__all,
.w-switch,
.w-switch__knob {
    transition: color var(--w-ease), border-color var(--w-ease), background-color var(--w-ease),
        box-shadow var(--w-ease);
}

/* Ручка тумблера едет по своему правилу выше (transform .2s) — оно остаётся. */
.w-switch__knob { transition: transform .2s ease, box-shadow var(--w-ease); }

@media (hover: hover) {
    /* «Смотреть все»: текст и подчёркивание уходят в зелёный. */
    .w-popular__all:hover { color: var(--w-green); }

    /* Тумблер помощи: подсветка стекла и мягкое свечение ручки. */
    .w-switch:hover {
        border-color: #c9ffd6;
        background: rgba(94, 222, 173, .34);
    }

    .w-switch:hover .w-switch__knob { box-shadow: 0 0 0 4px rgba(164, 255, 184, .35); }
}

/* «Популярные» карточками каталога v2: широкая — на всю строку, ровный шаг сетки. */
.w-popular__item--wide { grid-column: 1 / -1; }
.w-popular__grid:has(.w-popular__item) { gap: 16px; }

/* ===== Правки главной 19.10.2026 (Катя) ===== */

/* Тумблер «включить нашу помощь» заметнее: крупнее, пульсирует, подпись ярче. */
.w-switch { width: 116px; height: 62px; border-radius: 31px; border-width: 2px; }
.w-switch__knob { top: 5px; left: 5px; width: 48px; height: 48px; box-shadow: 0 0 0 0 rgba(164, 255, 184, .7); animation: w-switch-pulse 1.8s infinite; }
.w-switch.is-on .w-switch__knob { transform: translateX(54px); animation: none; }
.w-help__caption { padding: 4px 16px 6px; border-radius: 20px; background: rgba(0, 0, 0, .6); color: #a4ffb8; font-size: 34px; }
.w-help__arrow { left: calc(50% + 90px); top: 20px; width: 52px; }
@keyframes w-switch-pulse {
    70% { box-shadow: 0 0 0 16px rgba(164, 255, 184, 0); }
    100% { box-shadow: 0 0 0 0 rgba(164, 255, 184, 0); }
}
@media (prefers-reduced-motion: reduce) { .w-switch__knob { animation: none; } }

/* Встреча в офисе: четыре карточки, кнопка записи и адрес. */
.w-understand--meeting .w-understand__card { height: auto; min-height: 280px; }
.w-understand__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }
/* Кнопка-пилюля, как на остальном сайте (layout-v2.css .w-button--pill): Manrope, белый кружок со стрелкой у края. */
.w-understand__btn,
.w-catalog-cta .w-catalog-cta__btn {
    display: inline-flex; align-items: center; gap: 18px; width: auto; height: 56px; padding: 0 6px 0 26px;
    border-radius: 40px; background: var(--w-green); color: #fff;
    font: 500 17px var(--w-font); letter-spacing: 0; text-transform: none;
}
.w-understand__btn::after,
.w-catalog-cta .w-catalog-cta__btn::after {
    content: ''; flex: none; width: 44px; height: 44px; border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D6047' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
    transition: transform .2s;
}
.w-understand__btn:hover::after,
.w-catalog-cta .w-catalog-cta__btn:hover::after { transform: translateX(3px); }
.w-understand__address { margin: 0; color: rgba(255, 255, 255, .75); font-size: 15px; }
@media (max-width: 989px) {
    .w-understand--meeting .w-understand__card { flex: none; min-height: 0; height: auto; }
}

/* «Главное — начать»: интерьер, текст слева на затемнении — читается. */
.w-catalog-cta { justify-content: flex-start; text-align: left; }
.w-catalog-cta picture { position: absolute; inset: 0; z-index: 0; }
.w-catalog-cta::before { z-index: 1; }
.w-catalog-cta__content { z-index: 2; }
.w-catalog-cta::before { background: linear-gradient(90deg, rgba(10, 20, 15, .82) 0%, rgba(10, 20, 15, .6) 38%, rgba(10, 20, 15, 0) 70%); }
.w-catalog-cta__content { align-items: flex-start; margin-left: 60px; }
.w-catalog-cta__title { text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.w-catalog-cta__sub { margin: -16px 0 0; max-width: 460px; color: rgba(255, 255, 255, .9); font-size: 18px; line-height: 1.4; }
@media (max-width: 989px) {
    .w-catalog-cta { align-items: flex-end; height: 420px; }
    .w-catalog-cta::before { background: linear-gradient(0deg, rgba(10, 20, 15, .85) 0%, rgba(10, 20, 15, .55) 50%, rgba(10, 20, 15, 0) 85%); }
    .w-catalog-cta__content { margin: 0 16px 24px; }
    .w-catalog-cta__sub { font-size: 15px; margin-top: -10px; }
}

/* «Строительство дома — серьёзное решение»: на телефоне — перенос после тире, чтобы строки не ехали (20.10). */
.w-understand__br-m { display: none; }
@media (max-width: 767px) {
    .w-understand__br-m { display: inline; }
}
/* На компьютере «Строительство дома — серьёзное решение.» — одной строкой, «Начнём со встречи» — второй. */
.w-understand--meeting .w-understand__title { max-width: 1040px; }

/* Новые баннеры главной на пробу (?hero=a / ?hero=b, 20.10). Правки Насти: дом выше —
   картинка на 18% выше блока и прижата низом, так из-под шапки уходит небо, а не дом;
   внизу под заголовком затемнение; плашки крупнее и на правом скате крыши. */
.w-hero--a::after,
.w-hero--b::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .62) 100%); }
@media (min-width: 990px) {
    .w-hero--a .w-hero__img,
    .w-hero--b .w-hero__img { top: -18%; height: 118%; object-position: 50% 100%; }
    .w-hero--a .w-hero__badges,
    .w-hero--b .w-hero__badges { left: 73%; top: 31%; }
    .w-hero--a .w-hero__badge,
    .w-hero--b .w-hero__badge { height: 46px; padding: 0 16px; font-size: 30px; }
}
@media (max-width: 989px) {
    .w-hero--a .w-hero__img,
    .w-hero--b .w-hero__img { object-position: 50% 50%; }
}

/* H1 главного экрана меняется плавно с шириной окна (Настя 20.10), без скачков 100 → 72 → 54 на брейкпоинтах:
   5,2vw = 100px на 1920, ~75 на 1440, ~67 на 1280. На телефоне — от ширины экрана. */
@media (min-width: 990px) {
    .w-hero__title { font-size: clamp(54px, 5.2vw, 130px); }
}
@media (max-width: 989px) {
    .w-hero__title { font-size: clamp(40px, 11.6vw, 72px); }
}
/* «Санкт-Петербурге» не рвётся по дефису (Настя 20.10): город целиком переносится на свою строку. */
.w-hero__city { white-space: nowrap; }
/* Телефон: плашки крупнее и над коньком, в небе, а не поверх фронтона (Настя 20.10). */
@media (max-width: 989px) {
    .w-hero--a .w-hero__badges,
    .w-hero--b .w-hero__badges { left: 50%; top: 22%; }
    .w-hero--a .w-hero__badge,
    .w-hero--b .w-hero__badge { height: 42px; padding: 0 16px; font-size: 27px; }
    .w-hero--a .w-hero__badge--green,
    .w-hero--b .w-hero__badge--green { height: 38px; }
}
/* Телефон: дом выше и ближе к центру — картинка на 14% выше блока и прижата низом, лишнее небо уходит под шапку. */
@media (max-width: 989px) {
    .w-hero--a .w-hero__img,
    .w-hero--b .w-hero__img { top: -14%; height: 114%; object-position: 50% 100%; }
    .w-hero--a .w-hero__badges,
    .w-hero--b .w-hero__badges { top: 15%; }
}