/* Главная — единственная страница с белым базовым фоном (все остальные — F5F5F5 из main.css). */
body {
    background: var(--Base-White, #FFF);
}

.hero-block {
    height: 100svh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-block > picture {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.hero-block > picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media (max-width: 989px) {
    .hero-block {
        height: unset;
        aspect-ratio: 360 / 428;
    }
}

.hero-block .block-content {
    /* hero растягивается на всю ширину — снимаем общий max-width: 1280px из main.css,
       контент внутри масштабируется по vw на больших экранах */
    max-width: none;
    padding: 0 20px 30px;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

.hero-block .block-content h1 {
    color: var(--Base-White, #FFF);
    font-size: 45px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px; /* 84.444% */
    width: 963px;
    /* span идёт в разметке после текста, но визуально показывается строкой выше */
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

.hero-block .block-content h1 span {
    color: var(--Base-White, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.hero-block .block-content img {
    position: absolute;
    width: 122px;
    right: 200px;
    bottom: 100px;
}

/* 990–1279px: заголовок плавно уменьшается от десктопных размеров (45/16px при 1280)
   до мобильных (34/14px при 990), чтобы стык с мобильной версией был бесшовным */
@media (min-width: 990px) and (max-width: 1279px) {
    .hero-block .block-content h1 {
        font-size: clamp(34px, calc(3.7931vw - 3.5517px), 45px);
    }

    .hero-block .block-content h1 span {
        font-size: clamp(14px, calc(0.6897vw + 7.1724px), 16px);
        line-height: calc(0.6897vw + 11.1724px); /* 18px при 990 → 20px (≈normal) при 1280 */
    }

    /* кнопка «В каталог» масштабируется целиком, как h1:
       padding 16px 40px → 10px 26px, font-size 24px → 18px, line-height 20px → 17px (при 990) */
    .hero-block .block-content .btn-m {
        padding: clamp(10px, calc(2.069vw - 10.4828px), 16px) clamp(26px, calc(4.8276vw - 21.7241px), 40px);
        font-size: clamp(18px, calc(2.069vw - 2.4828px), 24px);
        line-height: clamp(17px, calc(1.0345vw + 6.7586px), 20px);
    }

    /* вектор-стрелка следует за кнопкой (правее и ниже по мере сжатия):
       width 122→100px, right 200→159px, bottom 100→65px (при 990) */
    .hero-block .block-content img {
        width: clamp(100px, calc(7.5862vw + 24.8966px), 122px);
        right: clamp(159px, calc(14.1379vw + 19.0345px), 200px);
        bottom: clamp(65px, calc(12.069vw - 54.4828px), 100px);
    }
}

/* ≥1280px: «футер hero» равномерно растёт вместе с экраном.
   1280px — точка отсчёта (значения совпадают с базовым дизайном),
   выше всё растёт по vw, но на ~15% медленнее (slope ×0.85, intercept подобран
   так, чтобы при 1280px значение совпадало с базовым — стык без скачка). */
@media (min-width: 1280px) {
    .hero-block .block-content {
        /* боковой padding растёт 20px@1280 → 90px@1920, затем фиксируется на 90px */
        padding-right: clamp(20px, calc(10.9375vw - 120px), 90px);
        padding-left: clamp(20px, calc(10.9375vw - 120px), 90px);
        padding-bottom: calc(1.9922vw + 4.4998px); /* 30px при 1280 */
    }

    .hero-block .block-content h1 {
        font-size: calc(2.9883vw + 6.7498px);   /* 45px при 1280 */
        line-height: calc(2.5235vw + 5.6992px); /* 38px при 1280 */
        width: calc(63.9492vw + 144.4502px);    /* 963px при 1280 */
    }

    .hero-block .block-content h1 span {
        font-size: calc(1.0625vw + 2.4px); /* 16px при 1280 */
    }

    .hero-block .block-content .btn-m {
        padding: calc(1.0625vw + 2.4px) calc(2.6563vw + 5.9994px); /* 16px 40px при 1280 */
        font-size: calc(1.5938vw + 3.5994px);   /* 24px при 1280 */
        line-height: calc(1.3281vw + 3.0003px); /* 20px при 1280 */
    }

    .hero-block .block-content img {
        width: calc(8.1016vw + 18.2995px);  /* 122px при 1280 */
        right: calc(13.2813vw + 29.9994px); /* 200px при 1280 */
        bottom: calc(6.6406vw + 15.0003px); /* 100px при 1280 */
    }
}

@media (max-width: 989px) {
    .hero-block .block-content {
        flex: 1 0 0;
        padding: 10px 20px 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-block .block-content h1 {
        width: 272px;
        color: #383838;
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 92.308% */
    }

    .hero-block .block-content h1 span {
        display: none;
    }

    .hero-block .block-content .btn {
        width: 100%;
    }

    .hero-block .block-content img {
        display: none;
    }
}

.features-block .block-content {
    padding: 30px 20px 60px;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    justify-content: space-between;
}

.features-block .block-content .item {
    display: flex;
    padding: 4px 12px;
    align-items: center;
    gap: 6px;
    flex-grow: 1;
    border-radius: 10px;
    background: var(--Gray-50, #F4F4F4);
}

.features-block .block-content .item img {
    width: 80px;
}

@media (max-width: 1439px) {
    .features-block .block-content {
        padding: 20px 20px 40px;
    }

    .features-block .block-content {
        gap: 6px;
    }

    .features-block .block-content .item {
        padding: 4px;
        gap: 4px;
    }

    .features-block .block-content .item img {
        width: 66px;
    }
}

@media (max-width: 989px) {
    .features-block .block-content .item {
        padding: 6px 4px;
    }

    .features-block .block-content .item img {
        width: 48px;
    }
}

@media (max-width: 920px) {
    .features-block .block-content .item:nth-child(5) {
        display: none;
    }
}

@media (max-width: 805px) {
    .features-block .block-content .item:nth-child(4) {
        display: none;
    }
}

@media (max-width: 565px) {
    .features-block .block-content .item:nth-child(2) {
        display: none;
    }
}

.reviews-block {
    background: var(--Gray-50, #F4F4F4);
}

.reviews-block .block-content {
    padding: 40px 20px;
}

.reviews-block .title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.reviews-block .title-container .text-body {
    color: var(--Text-Secondary, #8B8B8B);
    width: 450px;
    text-align: center;
}

/* --- reviews slider (Swiper) --- */
.reviews-block .reviews-nav {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    gap: 12px;
}

/* вынимаем дефолтные стрелки Swiper из абсолютного позиционирования
   внутри слайдера в обычный flex-ряд справа сверху */
.reviews-block .reviews-nav .swiper-button-prev,
.reviews-block .reviews-nav .swiper-button-next {
    position: static;
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: var(--Surface-White, #FFF);
}

.reviews-block .reviews-nav svg {
    width: 9px;
    height: 17px;
    flex-shrink: 0;
}

/* отключаем стандартные стрелки-иконки Swiper (::after) — рисуем свои */
.reviews-block .reviews-nav .swiper-button-prev::after,
.reviews-block .reviews-nav .swiper-button-next::after {
    content: none;
}

.reviews-block .reviews-slider {
    width: 100%;
    overflow: hidden;
    /* правый край слайдера растворяется «в туман» — следующий слайд
       плавно уходит в прозрачность */
    -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%);
    mask-image: linear-gradient(to right, #000 70%, transparent 100%);
    transition: -webkit-mask-image 0.3s ease, mask-image 0.3s ease;
}

/* долистали до последнего слайда — убираем туман, чтобы он был виден целиком */
.reviews-block .reviews-slider.reviews-slider--end {
    -webkit-mask-image: linear-gradient(to right, #000 100%, transparent 100%);
    mask-image: linear-gradient(to right, #000 100%, transparent 100%);
}

.reviews-block .reviews-slide {
    width: 659px;
}

.reviews-block .reviews-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.reviews-block .accordion {
    display: none;
}

@media (max-width: 989px) {
    .reviews-block .reviews-nav {
        display: none;
    }

    .reviews-block .block-content {
        gap: 22px;
    }

    .reviews-block .reviews-slider {
        display: none;
    }

    .reviews-block .font-section-title {
        text-align: center;
    }

    .reviews-block .title-container .text-body {
        width: 320px;
    }

    .reviews-block .accordion {
        display: flex;
        flex-direction: column;
        gap: 22px;
        max-width: 450px;
    }

    .reviews-block .accordion-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .reviews-block .accordion-content img {
        width: 100%;
        height: auto;
        background: var(--Base-White, #fff);
        border-radius: 6px;
    }

    /* свёрнутые отзывы скрыты и не занимают место */
    .reviews-block .accordion-content img.is-hidden {
        display: none;
    }

    /* появление новой порции отзывов: плавно проявляются и подъезжают снизу */
    .reviews-block .accordion-content img.is-revealing {
        animation: review-reveal 0.4s ease both;
    }

    /* кнопку прячем, когда показаны все отзывы */
    .reviews-block .accordion .accordion-more.is-hidden {
        display: none;
    }
}

@keyframes review-reveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.choice-block .block-content {
    padding: 39px 20px 34px;
    flex-direction: row;
    align-items: flex-start;
    gap: 107px;
}

.choice-block .column {
    display: flex;
    width: 333px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.choice-block .column a {
    border-bottom: 1px solid var(--Brand-Primary-light, #D4B46B);
}

.choice-block .content {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex: 1 0 0;
}

.choice-block .content .item {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.choice-block .content .item img {
    width: 100%;
    border-radius: 4px;
}

.choice-block .content .catalog-caption {
    max-width: 313px;
}

.choice-block .content .catalog-caption a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

@media (max-width: 1439px) {
    .choice-block .block-content {
        padding: 66px 20px 40px;
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 989px) {
    .choice-block .block-content {
        padding: 30px 20px 0;
    }

    .choice-block .content {
        flex-direction: column;
        gap: 20px;
        align-self: center;
    }

    .choice-block .content .item {
        max-width: 450px;
    }
}

.services-block .block-content {
    padding: 40px 20px 80px;
    align-items: flex-start;
    gap: 40px;
}

.services-block .font-section-title {
    width: 559px;
}

.services-block .content {
    display: flex;
    width: 100%;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
    gap: 52px 15px;
    flex-wrap: wrap;
}

.services-block .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}

.services-block .item:nth-child(1),
.services-block .item:nth-child(4) {
    width: 304px;
}

.services-block .item:nth-child(2),
.services-block .item:nth-child(5) {
    width: 337px;
}

.services-block .item:nth-child(3),
.services-block .item:nth-child(6) {
    width: 423px;
}

.services-block .item .text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.services-block .item img {
    width: 60px;
}

@media (max-width: 1439px) {
    .services-block .block-content {
        padding: 40px 20px;
        gap: 20px;
    }

    .services-block .font-section-title {
        width: 441px;
    }

    .services-block .content {
        gap: 30px 15px;
    }

    .services-block .item:nth-child(1),
    .services-block .item:nth-child(3) {
        width: 352px;
    }

    .services-block .item:nth-child(2),
    .services-block .item:nth-child(5) {
        width: 275px;
    }

    .services-block .item:nth-child(4),
    .services-block .item:nth-child(6) {
        width: 230px;
    }

    .services-block .item:nth-child(1) {
        order: 1;
    }

    .services-block .item:nth-child(2) {
        order: 2;
    }

    .services-block .item:nth-child(3) {
        order: 4;
    }

    .services-block .item:nth-child(4) {
        order: 3;
    }

    .services-block .item:nth-child(5) {
        order: 5;
    }

    .services-block .item:nth-child(6) {
        order: 6;
    }

    .services-block .item img {
        width: 50px;
    }
}

@media (max-width: 989px) {
    .services-block .block-content {
        gap: 30px;
        align-items: center;
    }

    .services-block .block-content .font-section-title {
        width: 320px;
        text-align: center;
    }

    .services-block .content {
        gap: 30px;
        max-width: 450px;
    }

    .services-block .item {
        width: calc((100% - 30px) / 2) !important;
        align-items: center;
    }

    .services-block .item img {
        width: 60px;
    }

    .services-block .font-section-body {
        display: none;
    }

    .services-block .item .text-container {
        align-items: center;
    }

    .services-block .font-service-title {
        text-align: center;
        max-width: 145px;
    }

    .services-block .item:nth-child(1) {
        order: 1;
    }

    .services-block .item:nth-child(2) {
        order: 3;
    }

    .services-block .item:nth-child(3) {
        order: 4;
    }

    .services-block .item:nth-child(4) {
        order: 2;
    }

    .services-block .item:nth-child(5) {
        order: 5;
    }

    .services-block .item:nth-child(6) {
        order: 6;
    }
}