/* Главная 2026 — макет Figma "✅ Main — Desktop 1440" (node 217:7736) */

.m26 {
    font-family: GothamPro, sans-serif;
    color: #1a1a1a;
}

.m26__cover {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 110px;
}

.m26__eyebrow {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: #f79900;
}

.m26__title {
    margin: 12px 0 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
}

/* (hero) */
.m26-hero {
    background: #f79900;
    color: #fff;
    overflow: hidden;
}

/* .wrapper__content компенсирует только верхнюю строку шапки (82px),
   строка меню (55px) выезжает поверх контента — сдвигаем баннер под неё */
@media screen and (min-width: 1200px) {
    .m26-hero {
        padding-top: 56px;
    }
}

.m26-hero__cover {
    display: flex;
    flex-direction: column;
    min-height: 720px;
    padding-top: 64px;
    padding-bottom: 40px;
}

.m26-hero__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 67px;
    flex: 1 0 auto;
}

.m26-hero__text {
    width: 533px;
    max-width: 100%;
    margin-top: 69px;
}

.m26-hero__title {
    margin: 0;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.m26-hero__descr {
    margin: 16px 0 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
}

.m26-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-top: 32px;
    padding: 8px 16px;
    border-radius: 12px;
    background: #fff;
    color: #f79900;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    transition: background-color .2s ease;
}

.m26-hero__btn:hover {
    background: #fef2e0;
    color: #f79900;
}

.m26-hero__image {
    position: relative;
    flex: 0 0 auto;
    width: 710px;
    height: 490px;
    margin-right: -90px;
    overflow: hidden;
}

.m26-hero__image img {
    position: absolute;
    top: -7.57%;
    left: 0;
    width: 100%;
    height: 125.96%;
    max-width: none;
    object-fit: contain;
}

.m26-hero__points {
    display: flex;
    justify-content: center;
    gap: 32px;
    width: 100%;
    max-width: 1009px;
    margin: 40px auto 0;
}

.m26-hero__point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 315px;
}

.m26-hero__point-logo {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/* размеры задаются атрибутами width/height по макету, здесь только защита от искажения */
.m26-hero__point-logo img {
    object-fit: contain;
}

.m26-hero__point-text {
    font-size: 13px;
    line-height: 1.2;
}

/* (products) */
.m26-products {
    background: #fff;
}

/* белые секции идут подряд: отступ между блоками задаёт только верхний padding,
   чтобы зазор везде был 128px, как между баннером и «Что входит в платформу» */
.m26-products__cover {
    padding-top: 128px;
}

.m26-products__list {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 32px;
}

.m26-card {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    min-height: 365px;
    padding: 24px;
    border: 1px solid #efe9e0;
    border-radius: 12px;
    background: #fef8f4;
    overflow: hidden;
}

/* свечение из макета (состояние Hover), центр — правый нижний угол карточки.
   Только у продуктов: их карточки кликабельны, преимущества — статичные */
.m26-products .m26-card:after {
    content: "";
    position: absolute;
    right: -195px;
    bottom: -102px;
    width: 442px;
    height: 442px;
    background: url(../../images/content/main_2026/card-light.svg) no-repeat center / contain;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 0;
}

.m26-products .m26-card:hover:after {
    opacity: 1;
}

.m26-card__icon,
.m26-card__content {
    position: relative;
    z-index: 1;
}

.m26-card__icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ffeddb;
}

.m26-card__icon img {
    width: 24px;
    height: 24px;
}

.m26-card__content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: space-between;
}

.m26-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m26-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: -0.72px;
}

.m26-card__chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 2px 8px;
    border-radius: 12px;
    background: #f79900;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.m26-card__descr {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.4;
}

.m26-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    color: #f79900;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

.m26-card__more img {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.m26-card__more:hover {
    color: #f79900;
}

.m26-card__more:hover img {
    transform: translateX(4px);
}

/* (cabinet) */
.m26-cabinet__cover {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-top: 128px;
    background: #fff;
}

.m26-cabinet__text {
    flex: 0 0 494px;
    width: 494px;
}

.m26-cabinet__descr {
    margin: 16px 0 0;
    font-size: 20px;
    line-height: 1.4;
}

.m26-steps {
    position: relative;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

/* пунктирный коннектор между номерами шагов */
.m26-steps:before {
    content: "";
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 23px;
    width: 2px;
    background: repeating-linear-gradient(#ffe8d1 0 8px, transparent 8px 16px);
}

.m26-steps__item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.m26-steps__item + .m26-steps__item {
    margin-top: 40px;
}

.m26-steps__num {
    position: relative;
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff2e5;
    color: #ff7a1f;
    font-size: 18px;
    font-weight: 500;
}

.m26-steps__title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

.m26-steps__descr {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.4;
}

/* .wrapper в styles.css имеет overflow: hidden — он делает себя контейнером прокрутки
   и ломает sticky. clip обрезает так же, но контейнер прокрутки не создаёт.
   Файл подключается только на главной, другие страницы не затронуты */
.wrapper {
    overflow: clip;
}

/* картинка залипает по центру экрана, пока текст рядом продолжает скроллиться */
.m26-cabinet__image {
    position: sticky;
    top: max(154px, calc(50vh - 228px));
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 456px;
    border: 1px solid #efe9e0;
    border-radius: 8px;
    background: rgba(247, 153, 0, .04);
    overflow: hidden;
}

.m26-cabinet__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* (advantages) */
.m26-advantages__cover {
    padding-top: 128px;
    background: #fff;
}

.m26-advantages__list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
}

.m26-card--wide {
    flex: 1 1 calc(50% - 12px);
    min-height: 0;
}

/* (logos) */
.m26-logos__head {
    padding-top: 128px;
}

/* лента идёт от края до края экрана, обрезаясь с обеих сторон */
.m26-logos__marquee {
    margin-top: 40px;
    overflow: hidden;
}

.m26-logos__track {
    display: flex;
    width: max-content;
    animation: m26-logos-scroll 60s linear infinite;
}

.m26-logos__group {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
}

.m26-logos__logo {
    flex: 0 0 auto;
    width: 165px;
    height: 66px;
    object-fit: contain;
    /* логотипы клиентов монохромные, по наведению цветные — как в старой карусели (.our-clients a) */
    filter: grayscale(1);
    transition: filter .2s ease;
}

.m26-logos__logo:hover {
    filter: none;
}

/* сдвиг ровно на одну копию списка — стык незаметен */
@keyframes m26-logos-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .m26-logos__track {
        animation: none;
    }
}

/* (reviews) */
.m26-reviews__cover {
    padding-top: 128px;
    padding-bottom: 128px;
    background: #fff;
}

.m26-reviews__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.m26-reviews__header-row .m26__title {
    margin: 0;
}

.m26-reviews__arrows {
    display: flex;
    gap: 16px;
}

.m26-reviews__arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50px;
    background: #fef8f4 url(../../images/content/main_2026/review-arrow.svg) no-repeat center / 24px 24px;
    cursor: pointer;
    transition: background-color .2s ease;
}

/* Hover из макета: #fef8f4 под слоем rgba(247, 153, 0, .08) */
.m26-reviews__arrow:hover {
    background-color: #fef0e0;
}

.m26-reviews__arrow--prev {
    transform: rotate(180deg);
}

.m26-reviews__arrow.slick-disabled {
    opacity: .5;
    cursor: default;
}

.m26-reviews__slider {
    margin: 32px -12px 0;
}

.m26-reviews__slider .slick-track {
    display: flex;
}

.m26-reviews__slider .slick-slide {
    display: flex;
    height: auto;
    padding: 0 12px;
}


.m26-reviews__slide {
    display: flex !important;
    height: 100%;
}

.m26-review {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 24px;
    border: 1px solid #efe9e0;
    border-radius: 12px;
    background: #fef8f4;
    color: #1a1a1a;
    text-decoration: none;
}

.m26-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m26-review__logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.m26-review__stars {
    width: 88px;
    height: 16px;
}

.m26-review__text {
    flex: 1 0 auto;
    font-size: 16px;
    line-height: 1.4;
}

.m26-review__author {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.m26-reviews__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    height: 40px;
    margin: 40px auto 0;
    padding: 8px 16px;
    border: 1px solid #f79900;
    border-radius: 12px;
    background: #fff;
    color: #f79900;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.m26-reviews__all:hover {
    border-color: #f79900;
    background: #f79900;
    color: #fff;
}

.m26-reviews__all img {
    width: 16px;
    height: 16px;
    transition: filter .2s ease;
}

.m26-reviews__all:hover img {
    filter: brightness(0) invert(1);
}

/* (cta) */
.m26-cta {
    background: #f79900;
    color: #fff;
    overflow: hidden;
}

.m26-cta__cover {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 336px;
    padding: 80px 112px;
}

.m26-cta__content {
    width: 803px;
    max-width: 100%;
}

.m26-cta__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.m26-cta__descr {
    max-width: 649px;
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 1.4;
    color: #fefefe;
}

.m26-cta__btn {
    margin-top: 36px;
}

.m26-cta__image {
    position: absolute;
    right: 86px;
    bottom: 0;
    width: 460px;
    pointer-events: none;
}

.m26-cta__image img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1280px) {
    .m26__cover {
        padding: 0 40px;
    }

    .m26-hero__image {
        width: 55%;
        height: auto;
        aspect-ratio: 710 / 490;
        margin-right: -40px;
    }

    .m26-hero__body {
        gap: 32px;
    }

    .m26-cabinet__text {
        flex-basis: 42%;
        width: 42%;
    }

    .m26-logos__head {
        padding-top: 128px;
    }

    .m26-cta__cover {
        padding: 80px 40px;
    }

    .m26-cta__image {
        right: 20px;
        width: 360px;
    }
}

@media screen and (max-width: 1024px) {
    .m26-hero__title {
        font-size: 48px;
    }

    .m26-hero__points {
        flex-wrap: wrap;
    }

    .m26-products__list {
        flex-wrap: wrap;
    }

    .m26-card {
        flex: 1 1 calc(50% - 12px);
    }

    .m26-cabinet__cover {
        flex-direction: column;
    }

    .m26-cabinet__text {
        flex-basis: auto;
        width: 100%;
    }

    .m26-cabinet__image {
        width: 100%;
        height: auto;
        aspect-ratio: 702 / 456;
    }

    .m26-cta__content {
        width: 100%;
    }

    .m26-cta__image {
        position: static;
        width: 100%;
        max-width: 320px;
        margin: 24px auto -80px;
    }

    .m26-cta__cover {
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    /* мобильный макет Figma «Main — Mobile 375» (232:9470) */
    .m26__cover {
        padding: 0 16px;
    }

    .m26__eyebrow {
        font-size: 12px;
    }

    .m26__title {
        font-size: 24px;
    }

    .m26-hero__cover {
        min-height: 0;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* в мобильном макете картинка идёт под текстом, кнопки в баннере нет */
    .m26-hero__body {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .m26-hero__text {
        width: 100%;
        margin-top: 0;
    }

    .m26-hero__title {
        font-size: 32px;
    }

    .m26-hero__descr {
        font-size: 16px;
    }

    /* на мобильном кнопка баннера закреплена у нижнего края экрана,
       слоем ниже виджета поддержки Битрикс24 (z-index 10150) */
    .m26-hero .m26-hero__btn {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 24px;
        z-index: 900;
        box-shadow: 0 4px 16px rgba(26, 26, 26, .16);
    }

    /* поднимаем виджет поддержки над закреплённой кнопкой: 24px (отступ кнопки) + 40px (её высота) + 24px зазор */
    .b24-widget-button-wrapper {
        right: 16px !important;
        bottom: 88px !important;
    }

    .m26-hero__image {
        width: calc(100% + 51px);
        height: auto;
        margin: 0 -51px 0 0;
        aspect-ratio: 394 / 279;
    }

    .m26-hero__points {
        flex-direction: column;
        gap: 32px;
        margin-top: 48px;
    }

    .m26-hero__point {
        width: 100%;
    }

    /* по макету: стык цветного баннера и белого блока — 64, между белыми блоками — 96 */
    .m26-products__cover {
        padding-top: 64px;
    }

    .m26-cabinet__cover,
    .m26-advantages__cover,
    .m26-reviews__cover,
    .m26-logos__head {
        padding-top: 96px;
    }

    .m26-reviews__cover {
        padding-bottom: 48px;
    }

    .m26-card {
        flex: 1 1 100%;
        min-height: 0;
    }

    .m26-card__title {
        font-size: 18px;
        letter-spacing: -0.54px;
    }

    .m26-card__descr {
        font-size: 15px;
    }

    .m26-card__more {
        margin-top: 32px;
    }

    /* по мобильному макету пунктир обрывается на плашке последнего шага, а не тянется
       до конца его описания — рисуем коннектор от каждого номера, кроме последнего */
    .m26-steps:before {
        content: none;
    }

    .m26-steps__item {
        position: relative;
    }

    .m26-steps__item + .m26-steps__item {
        margin-top: 32px;
    }

    /* от низа плашки (48px) до верха следующей: −32px — это margin между шагами */
    .m26-steps__item:not(:last-child):after {
        content: "";
        position: absolute;
        top: 48px;
        bottom: -32px;
        left: 23px;
        width: 2px;
        background: repeating-linear-gradient(#ffe8d1 0 8px, transparent 8px 16px);
    }

    .m26-cabinet__descr {
        font-size: 16px;
    }

    /* в мобильном макете мокап кабинета выше и обрезан по правому краю */
    .m26-cabinet__image {
        position: static;
        aspect-ratio: 343 / 359;
    }

    .m26-cabinet__image img {
        object-position: left center;
    }

    /* листание отзывов свайпом, стрелки скрыты, следующая карточка выглядывает справа */
    .m26-reviews__arrows {
        display: none;
    }

    /* карточка 320 по макету: 375 − 32 (поля cover) + 24 (отрицательный margin слайдера)
       − 23 (этот padding) − 24 (поля слайда) = 320; остаток — «выглядывающий» край следующей */
    .m26-reviews__slider .slick-list {
        padding-right: 23px;
    }

    .m26-reviews__header-row {
        margin-top: 12px;
    }

    .m26-reviews__all {
        width: 100%;
    }

    .m26-cta__cover {
        min-height: 0;
        padding: 48px 16px 0;
    }

    .m26-cta__title {
        font-size: 24px;
    }

    .m26-cta__descr {
        font-size: 16px;
    }

    .m26-cta__btn {
        display: flex;
        width: 100%;
    }

    /* низ картинки уходит под край блока — по мобильному макету обрезка мельче десктопной */
    .m26-cta__image {
        margin-bottom: 0;
    }
}