:root {
    --color-black: #081A32;
    --color-red: #D7171F;

    /* Вертикальный ритм страницы.
       Расстояния между секциями задавались в каждом блоке отдельно и разъехались:
       на 1440 подряд шли 120 / 100 / 94 / 120 / 160, на мобильном 80 / 100 / 94 / 64.
       Глазами это читается как «отступы гуляют», а править их приходилось руками
       в каждой секции. Теперь значение одно на всю страницу — меняется здесь и
       сразу везде.

       --section-gap       — между соседними секциями;
       --section-inner-gap — внутри секции: до кнопки под контентом. */
    --section-gap: 120px;
    --section-inner-gap: 68px;
}

@media screen and (max-width: 960px) {
    :root {
        --section-gap: 100px;
        --section-inner-gap: 48px;
    }
}

@media screen and (max-width: 720px) {
    :root {
        --section-gap: 80px;
        --section-inner-gap: 40px;
    }
}

* {
    box-sizing: border-box;
}

main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    color: #081A32;
    font-weight: 400;
}

.first-screen {
    position: relative;
}

.first-screen__bg {
    position: absolute;
    z-index: -1;

    justify-self: center;
    max-height: 1500px;
    width: 100vw;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    align-content: center;
}

h2 {
    font-weight: 600;
    font-size: 80px;
}

h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 110%;
}

.main__background {
    overflow: visible;
    display: inline-block;
    position: absolute;

    width: 100vw;

    z-index: -10;
}

.main__background.bg-blue {
    left: -140px;
    top: 150px;
}

.main__background.bg-red {
    top: 13px;
    right: -242px;
}

.container {
    display: flex;
    flex-direction: column;
    
    align-items: center;
    text-align: center;
    max-width: 1280px;
    width: 100%;
}

h1 {
    margin-top: 211px;
    text-align: center;
    font-weight: 600;
    font-size: 80px;
}

main > .container > p {
    margin-top: 30px;
    font-size: 24px;
}

/* И ссылка, и <button>: когда вести некуда, кнопка первого экрана открывает
   попап заявки и выводится тегом button — по селектору `> a` отступ молча
   пропал бы и кнопка прилипла к подзаголовку. Так же сделано на услуге
   (new_service.css, .service-hero .first-screen > button). */
main > .container > a,
main > .container > button {
    margin-top: 40px;
    align-self: center;
}

/* Кнопка-обёртка: геометрия остаётся на внутреннем .button-dark /
   .button-red, а собственные рамку и поля браузера надо снять — иначе
   вокруг капсулы появляется серая обводка. */
button:has(> .button-dark),
button:has(> .button-red) {
    padding: 0;
    border: 0;
    background: none;
    text-align: inherit;
}

/* Тот же сброс, когда класс висит прямо на кнопке (баннер «Хотите похожий
   проект?»): поля и фон задаёт .button-red, лишняя рамка — нет. */
button.button-red,
button.button-dark {
    border: 0;
}

.button-dark {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    gap: 16px;

    background: #081A32;
    color: #FFFFFF;

    padding: 20px 24px 20px 24px;

    border-radius: 32px;

    transition:
        color 0.2s ease,
        background 0.2s ease;

    svg path {
        transition: fill 0.2s ease;
    }
}

.button-dark:hover {
    background: #ecf1f6;
    color: #081A32;

    svg path {
        fill: #081A32;
    }
}

.services {
    margin-top: var(--section-gap);
}

.services__tabs {
    display: flex;
    flex-direction: row;
    
    gap: 12px;
}

.services__tab {
    width: fit-content;
    background: #ECF1F6;
    
    padding: 14px 24px;
    border-radius: 32px;

    transition: transform 0.2s ease;
}

.services__tab:hover {
    transform: translateY(-3px);
}

.services__tab.selected {
    background: #D7171F;
    color: #FFFFFF;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-2 {
    gap: 24px;
}

.services__grid {
    display: none;

    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 340px 340px;

    gap: 28px;
    margin-top: 40px;
}

.services__grid.active {
    display: grid;
}

.services__card:first-child {
    grid-column: 1 / 3;
}

.services__card {
    position: relative;
    overflow: hidden;
    z-index: 0;

    text-align: start;
    background: #ECF1F6;
    padding: 32px;

    border-radius: 32px;

    font-size: 18px;
    gap: 12px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s;
}

/* Фирменная «улитка» в углу карточки: до наведения --mark пустая и знак не
   виден, на ховере подставляется картинка и проступает. Один в один как
   .slider-content-block в исходной вёрстке (src/css/home.css). */
.services__card::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: 30px;
    z-index: -1;

    width: 280px;
    height: 280px;

    background: var(--mark) no-repeat center / contain;
    opacity: .12;
    filter: saturate(0);

    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}

@media (hover: hover) {
    .services__card:hover {
        background: linear-gradient(112deg, #D7171F 0%, #FA757A 100%);
        color: #FFFFFF;
        box-shadow: 0 12px 34px rgba(215, 23, 31, .33);

        --mark: url('../img/slider-content-bg-img.png');
    }

    .services__card:hover::after {
        opacity: .28;
        filter: none;
        transform: translate(6px, 6px) scale(1.05);
    }

    .services__card:hover .services__card_footer img {
        filter: brightness(0) invert(1);
    }

    /* кнопка внутри карточки инвертируется, иначе красная на красном сливается */
    .services__card:hover .button-red {
        background: #FFFFFF;
        color: #D7171F;
    }

    .services__card:hover .button-red svg path {
        fill: #D7171F;
    }
}

/* Ховер с фоновой картинкой (референс — Ready code): карточка темнеет и
   показывает фото, если для неё в ACF залито hover_image. Без картинки —
   карточка просто ведёт себя как обычный .services__card:hover выше. */
.services__card-hover-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-size: cover;
    background-position: center;

    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.services__card-hover-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 26, 50, 0.72);
}

.services__card.has-hover-image > :not(.services__card-hover-bg) {
    position: relative;
    z-index: 1;
}

@media (hover: hover) {
    .services__card.has-hover-image:hover {
        color: #FFFFFF;
    }

    .services__card.has-hover-image:hover .services__card-hover-bg {
        opacity: 1;
        transform: scale(1);
    }

    .services__card.has-hover-image:hover .services__card_footer img {
        filter: brightness(0) invert(1);
    }
}

.services__card-heading {
    font-weight: 500;
    font-size: 32px;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.services__card_footer {
    justify-content: space-between;

    margin-top: auto;

    img {
        width: 48px;
        height: 48px;
    }
}

/* Подвал карточки в каталоге услуг: вместо иконки-фильтра слева стоит колонка
   «срок + цена». На Главной этих полей у карточки нет, поэтому модификатор, а
   не правка общего .services__card_footer — иначе иконка на Главной уедет вниз. */
.services__card_footer--meta {
    align-items: flex-end;
    gap: 16px;
}

/* flex-end прижимает ссылку к её содержимому, и на мобильном палец получает
   38px вместо 48 у той же кнопки на Главной. Область нажатия отращиваем вверх:
   сама кнопка остаётся на месте, у нижнего края карточки. */
.services__card_footer--meta > a {
    display: flex;
    align-items: flex-end;
    min-height: 48px;
}

.services__card-meta {
    gap: 10px;
}

/* Срок и цена стоят в двух местах, потому что так в двух макетах.

   --footer (каталог, узел 1505:13112): колонкой в подвале слева от кнопки,
   срок приглушён, цена 26px — это то, за чем на карточку каталога приходят,
   и по кеглю она вторая после заголовка.

   --text (Главная, узел 1416:6749): сразу под описанием, обе строки 18px тем же
   тёмным цветом, что и описание, цена полужирная. Цвет здесь не задаётся
   намеренно — карточка на ховере краснеет и красит текст в белый сама. */
.services__card-meta--footer .services__card-duration {
    color: rgba(8, 26, 50, 0.6);
}

.services__card-meta--footer .services__card-price {
    font-size: 26px;
    line-height: 120%;
    font-weight: 600;
}

.services__card-meta--text {
    gap: 12px;
    margin-top: 12px;
}

.services__card-meta--text .services__card-price {
    font-weight: 700;
}

@media (hover: hover) {
    /* На ховере карточка краснеет — приглушённый синий по ней не читается. */
    .services__card:hover .services__card-meta--footer .services__card-duration {
        color: rgba(255, 255, 255, 0.82);
    }
}

.button-red {
    display: flex;
    flex-direction: row;

    align-items: center;
    width: fit-content;

    padding: 20px 24px;
    border-radius: 32px;
    gap: 16px;

    color: #FFFFFF;
    background: #D7171F;

    transition:
        color 0.2s ease,
        background 0.2s ease;

    svg path {
        transition: fill 0.2s ease;
    }
}

.button-red:hover {
    background: #FFFFFF;
    color: #D7171F;

    svg path {
        fill: #D7171F;
    }
}

.cases {
    margin-top: var(--section-gap);
}

.tabs {
    display: flex;
    flex-direction: row;

    position: sticky;
    top: 100px;
    
    gap: 12px;

    z-index: 3;
}

.cases .tabs + div {
    margin-top: 68px;
}

.cases .tabs {
    margin-top: 48px;
}

.extra-services .tabs {
    margin-top: 80px;
}   

.extra-services .tabs + * {
    margin-top: 40px;
}

/* 18/20 при отступах 14 и 24 даёт кнопку ровно 48px и ширины из макета
   («Сайты» 100, «CRM» 86, «Интеграции» 146). Наследуемые 16px давали 49px
   и вкладки уже на 6–13px. Размер один и тот же на Главной и в каталоге —
   в макете обеих страниц вкладка одинаковая. */
.tab {
    width: fit-content;
    background: #ECF1F6;

    padding: 14px 24px;
    border-radius: 32px;

    font-size: 18px;
    line-height: 20px;

    transition: transform 0.2s ease;
}

/* Обводки у невыбранной вкладки нет ни в макете (узел 1505:13083 — strokes
   пустые), ни в вёрстке: там все кнопки ровно 48px. Своя рамка в 1px не только
   лишняя по дизайну, но и делала полосу на 2px выше — .tabs растягивает всех
   по самому высокому, поэтому разъезжались и выбранная вкладка тоже. */

.tab:hover {
    transform: translateY(-3px);
}

.tab.selected {
    background: #D7171F;
    color: #FFFFFF;
}

.tabs-container [tab-target]:not(.active) {
    display: none;
}

.cases__card {
    position: relative;
    overflow: hidden;
    display:grid;
    grid-template-columns: 45% 55%;

    background: #ECF1F6;
    max-width: 100%;
    /* было height: 530px — при длинном заголовке содержимое не помещалось,
       и overflow: hidden срезал низ вместе с отступом под кнопкой «Смотреть кейс» */
    min-height: 530px;

    border-radius: 32px;
}

.cases__info {
    margin: 64px 83px 64px 32px;
    color: #081A32;
    align-items: start;
}

/* оверлей-ссылка нужна только там, где спрятана кнопка «Смотреть кейс» (≤960px) */
.cases__card-link {
    display: none;
}

.space-between {
    justify-content: space-between;
}

.cases__info > .card-heading {
    line-height: 120%;
    text-overflow: ellipsis;
}

.card-heading { 
    text-align: start;

    font-weight: 600;
    font-size: 32px;
    overflow: hidden;
}
   
.gap-40 {
    gap: 40px;
}

.cases__card-image-wrapper {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    position: relative;

    background-size: 150% 150%;
    background-position: center;
}

/* Правило для .cases__card_image живёт ниже, в блоке карточки кейса (~1550):
   раньше их было два, и нижнее с object-fit: contain перебивало это. */

.cases__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    width: 100%;

    text-align: start;
    font-size: 18px;

    row-gap: 30px;
}

.cases__info-grid-header {
    margin-bottom: 10px;
}

.cases__info-grid-element {
    font-weight: 600;
}

.button_white {
    background: #FFFFFF;
    color: #D7171F;

    padding: 20px 24px;
    gap: 16px;

    border-radius: 32px;

    align-items: center;

    transition:
        color 0.2s ease,
        background 0.2s ease;

    svg path {
        transition: fill 0.2s ease;
    }
}

.button_white:hover {
    color: #FFFFFF;
    background: #D7171F;

    svg path {
        fill: #FFFFFF;
    }
}

section.cases {
    margin-bottom: var(--section-gap);
    border-radius: 0 16px;
}

.cases__view-all-button {
    margin-top: var(--section-inner-gap);
}

.want-same-project { 
    position: relative;
    height: 690px;

    color: #FFFFFF;
    background: linear-gradient(#081A32, #131E2D);

    font-size: 24px;
}

/* Текстура выводится в разметке после .container и без z-index ложилась поверх
   белых «зубцов» — они переставали быть чисто белыми и давали на стыке полосу
   #FEFEFE высотой 43 px. Раскладываем слои явно: фон, зубцы, контент. */
.want-same-project__bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/want_same_project.png');
}

.want-same-project::before {
    content: '';
    position: absolute;
    z-index: 1;
    /* Без top привязка держалась на дефолтном flex-start секции: любой
       justify-content увёл бы белую полосу в середину баннера. */
    top: 0;

    width: 100%;
    height: 50px;

    background: #FFFFFF;

    border-radius: 0 0 16px 16px;
}

.want-same-project::after {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 0;

    width: 100%;
    height: 50px;

    background: #FFFFFF;

    border-radius:16px 16px 0 0;
}

.want-same-project > .container  {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 840px;
    justify-content: center;
    gap: 48px;

    line-height: 1.1;
}

.want-same-project > .container > a {
    font-size: 18px;
}

.facts {
    position: relative;
    margin-top: var(--section-gap);
}

.facts > .container {
    position: relative;
}

.facts__heading {
    color: #D7171F;
    font-size: 227px;

    margin-bottom: -40px;

    /* Как на боевом сайте (.why__title): заголовок уезжает вверх трансформом.
       Здесь анимировался margin — это дёргало раскладку соседних блоков, а hover
       висел на самом заголовке, из-за чего он убегал из-под курсора и анимация
       переключалась туда-обратно. Теперь наведение считается по всему блоку. */
    transition: transform 1s ease-in-out;
}

.facts:hover .facts__heading {
    transform: translateY(-90px);
}

/* На узких экранах не двигаем: курсора там нет, а :hover после тапа залипает. */
@media screen and (max-width: 760px) {
    .facts:hover .facts__heading {
        transform: none;
    }
}

.facts__grid {
    position: relative;
    display: grid;

    width: 100%;
    max-height: 588px;
    height: 100%;

    /* minmax(0, 1fr) вместо 1fr: обычный 1fr не сжимается ниже своего содержимого,
       и карточки раздували сетку шире экрана */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;

    gap: 28px;
}

.facts__card {
    background: #ECF1F699;

    height: 280px;
    width: 100%;

    padding: 24px;
    border-radius: 32px;

    text-align: start;

    backdrop-filter: blur(8px);
}

.facts__card-heading {
    line-height: 130%;
    font-size: 18px;
    font-weight: 600;

    max-width: 60%;
}

.facts__card-cert {
    cursor: pointer;
    color: #D7171F;
}

.facts__card-footer {
    align-items: center;
    font-size: 18px;
    font-weight: 600;

    * {
        align-items: center;
    }
}

.facts__card-badge {
    color: #FFFFFF;
    background: #D7171F;

    border-radius: 32px;
    padding: 6px 12px;

    font-size: 16px;

    width: fit-content;
}

.facts__numbers {
    margin-top: 139px;

    text-align: start;
    color: #081A32;
    font-size: 32px;
    font-weight: 600;

    height: 318px;
}

.facts__numbers-50 {
    color: #D7171F;
    font-size: 200px;
    font-weight: 600;
}

.facts__numbers-plus {
    font-size: 80px;
    height: 100%;
    vertical-align: top;
}

.facts__container-left {
    max-width: 318px;
    width: 100%;
    height: 100%;
}

.facts__container-right {
    max-width: 626px;
    height: 100%;
}

.facts__numbers-card {
    font-size: 18px;
    font-weight: 400;
    background: #ECF1F6;

    align-items: center;

    padding: 32px;
    border-radius: 32px;
    
    width: 299px;
}

.facts__numbers-card > p {
    max-width: 120px;
}

.facts__numbers-card-num {
    font-size: 52px;
    font-weight: 600;
    color: var(--color-red);
}

.facts__galery {
    width: 100%;
    margin-top: 120px;

    height: 360px;
}

.facts__galery .swiper-slide {
    width: 500px;
}

.about {
    margin-top: var(--section-gap);
    border-radius: 32px;

    background-color: #0D4DA1;
    position: relative;

    overflow: hidden;
}

.about > .container {
    color: #FFFFFF;

    padding: 137px 0 92px 0;
    z-index: 1;
}

.about h2 {
    max-width: 844px;
}

.about__background {
    display: block;
    position: absolute;

    bottom: -180px;
}

.about__wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    margin: 110px 0 58px 0; 

    gap: 28px;

}

/* Раньше две последние карточки растягивались на span 3 — это подпирало сетку
   из пяти рыб. Плиток теперь шесть, ряды ровные по три. */
.about__wrapper:has(.about__card:nth-child(5):last-child) .about__card:nth-last-child(-n+2) {
    grid-column: span 3;
}

.about__card {
    grid-column: span 2;

    display: flex;
    flex-direction: column;
    justify-content: start;

    width: 100%;
    /* было height: 382px — при разной длине текста низ плитки срезался
       родительским overflow: hidden */
    min-height: 382px;

    padding: 32px;
    border-radius: 32px;

    background-color: rgba(8, 26, 50, 0.6);
    backdrop-filter: blur(10px);

    text-align: start;
    line-height: 120%;
}

.about__card h3 {
    margin-bottom: 12px;

    font-size: 32px;
    font-weight: 600;
    line-height: 110%;
}

.about__card-badge {
    width: fit-content;
    margin-top: auto;

    padding: 6px 12px;
    border-radius: 32px;

    background-color: #D7171F;
}

.reviews {
    background-color: #FFFFFF;
    margin: var(--section-gap) 0;
}

/* Высота была жёсткой (585px у контейнера + height: 100% у карточки).
   Отзывы в CPT разной длины, и на 1440px это давало два дефекта сразу:
   короткий отзыв (439px) оставлял под собой 146px пустоты, а длинный (635px)
   вылезал за контейнер и обрезался на 50px — у .swiper стоит overflow: hidden,
   так что у отзыва пропадал хвост текста. Теперь 585px — минимум карточки
   (тот же вид, что задуман, пока текст помещается), а длинный отзыв
   растягивает карточку. Контейнер идёт следом: autoHeight у Swiper ставит
   высоту .swiper-wrapper по активному слайду. */
.reviews__swiper {
    width: 100%;
    height: auto;
    margin-top: 68px;
}

.reviews__card {
    display: grid;

    grid-template-columns: 259px auto;
    grid-template-rows: auto 1fr auto;
    column-gap: 109px;

    width: 100%;
    min-height: 585px;
    max-width: 1280px;

    padding: 92px 68px;

    border: 1px solid #D8DFE5;
    border-radius: 32px;

    text-align: start;
}

.reviews__card h3 {
    font-weight: 600;
    font-size: 32px;
}

.reviews__card-text {
    margin-top: 16px;
    font-size: 18px;
    line-height: 130%;
}

/* Ограничения размера здесь не было вовсе, а `thumb-review` режет логотип в
   квадрат 449×449 — картинка рисовалась в натуральную величину в колонке,
   объявленной как 259 px: вылезала за левую рамку карточки на 26 px и тянула
   слайд с 585 до 635, отчего секция прыгала при листании. Мобильная версия
   ниже давно сделана правильно, повторяем её логику на десктопе. */
.reviews__card-img {
    grid-column: 1;
    grid-row: span 3;

    justify-self: center;
    align-self: center;

    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
}

.reviews__swiper-button-prev,
.blog__swiper-button-prev {
    transform: scaleX(-1);
    margin-right: 8px;
}

.reviews__swiper-button-prev,
.reviews__swiper-button-next,
.blog__swiper-button-prev,
.blog__swiper-button-next {
    display: flex;
    justify-content: center;

    width: 60px;
    height: 60px;

    cursor: pointer;

    background-color: #ECF1F6;
    border-radius: 50%;

    img {
        width: 7px;
        height: 100%;
    }
}

.swiper-button-disabled {
    background-color: rgba(0,0,0,0);
    border: 1px solid #D8DFE5;
    filter: contrast(5%) opacity(50%);
}

.logo-marquee {
    width: 100%;
    /* лента идёт между отзывами и доп. услугами — шаг тот же, что у секций */
    margin-bottom: var(--section-gap);

    .swiper-slide {
        width: 218px;
    }
}

.extra-services .tabs-container {
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.extra__card {
    position: relative;
    overflow: hidden;
    z-index: 0;

    height: 340px;

    text-align: start;
    line-height: 120%;
    font-size: 18px;

    padding: 32px;
    border-radius: 32px;

    background: #ECF1F6;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s;

    h3 {
        margin-bottom: 12px;
    }
}

.extra__card::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: 30px;
    z-index: -1;

    width: 280px;
    height: 280px;

    background: var(--mark) no-repeat center / contain;
    opacity: .12;
    filter: saturate(0);

    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}

/* Тот же ховер, что у карточек услуг на первом экране */
@media (hover: hover) {
    .extra__card:hover {
        background: linear-gradient(112deg, #D7171F 0%, #FA757A 100%);
        color: #FFFFFF;
        box-shadow: 0 12px 34px rgba(215, 23, 31, .33);

        --mark: url('../img/slider-content-bg-img.png');
    }

    .extra__card:hover::after {
        opacity: .28;
        filter: none;
        transform: translate(6px, 6px) scale(1.05);
    }

    .extra__card:hover .extra__card-footer > img {
        filter: brightness(0) invert(1);
    }
}

.extra__card-footer {
    margin-top: auto;
}

.blog {
    margin-top: var(--section-gap);
    /* подвал приносит свои 100px сверху — вместе получается такой же зазор,
       как между остальными секциями страницы */
    margin-bottom: 60px;
}

/* Заголовок по центру, как у всех секций страницы, стрелки остаются справа.
   Сетка 1fr auto 1fr: пустая колонка слева уравновешивает навигацию справа,
   поэтому «Блог» встаёт ровно по центру контейнера. */
.blog__head {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 80px;
}

.blog__head h2 {
    grid-column: 2;
}

.blog__nav {
    grid-column: 3;
    justify-self: end;
}

.blog h2 {
    margin-bottom: 0;
}

/* Слайдер режется по краям .container — это ожидаемо, слайд уезжает под край. */
.blog__swiper {
    width: 100%;
    overflow: hidden;
}

/* height: auto вместо дефолтного растягивания — карточки в ряду тянутся
   по самой высокой, а не по фиксированной высоте блока. */
.blog__swiper .swiper-slide {
    height: auto;
}

.blog__view-all-button {
    margin-top: 68px;
}

.tag-red {
    color: #FFFFFF;
    background-color: #D7171F;

    padding: 6px 12px;
    border-radius: 32px;
}

.blog__posts-card {
    text-align: start;
    max-width: 408px;
    width: 100%;

    background-color: #ECF1F6;

    padding: 32px;
    border-radius: 32px;
}

/* 39 px считались под вёрстку без анонса — заголовок стоял прямо над
   картинкой. С анонсом (у него свой margin-top: 12px) между заголовком и
   текстом набегал 51 px, а после текста не оставалось ничего: анонс визуально
   отрывался от заголовка и прилипал к картинке. В макете шаг ~19 px. */
.blog__posts-card h3 {
    margin-bottom: 7px;
}

.blog__posts-card-img {
    margin-top: auto;

    display: block;
    width: 100%;

    border-radius: 32px;
    overflow: hidden;
}

.blog__posts-card-head {
    margin-bottom: 16px;
}

.free-demo {
    position: relative;

    background: linear-gradient(#081A32, #081A32);
    color: #FFFFFF;

    padding: 212px 0;

    margin-bottom: -40px;
    margin-top: 140px;
}

.free-demo > .container {
    max-width: 844px;
    z-index: 1;
}

.free-demo__bg {
    position: absolute;
    bottom: 0;
}

.free-demo h2 {
    margin-bottom: 24px;
}

.free-demo p {
    font-size: 24px;
    line-height: 120%;

    margin-bottom: 48px
}

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

    .about > .container {
        padding: 0 20px;
    }

    .about h2 {
        margin-top: 120px;
    }

    .about { 
        padding-bottom: 80px;
    }

    .facts__heading {
        font-size: 200px;
    }

    .reviews__swiper {
        max-width: 960px;
    }

    /* см. комментарий у .reviews__card выше: было height у контейнера */
    .reviews__card {
        min-height: 620px;
    }

    .extra-services .tabs-container {
        padding: 0;
    }

    .extra__card h3 {
        font-size: 26px;
    }

    .extra__card p {
        font-size: 16px;
    }
}

@media screen and (max-width: 960px) {
    .facts__heading {
        font-size: 156px;
    }

    .facts__card > div:nth-child(1) {
        flex-direction: column;
    }

    .facts__card-heading {
        display: inline;
        width: 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .facts__numbers-50 {
        font-size: 180px;
    }

    .facts__numbers-card {
        width: 280px;
        justify-content: center;
        gap: 24px;

        text-align: center;
        padding: 28px 12px;
    }

    .facts__container-right {
        padding-left: 32px;
    }
    
    .about__wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .about__card {
        grid-column: span 1;
        height: 320px;
    }

    .about__card:nth-last-child(2) {
        grid-column: span 1;
    }

    .about__card:last-child {
        grid-column: span 2;
    }

    .extra__card h3 {
        font-size: 24px;
    }

    .extra__card p {
        font-size: 16px;
    }

    .extra__card img {
        max-width: 48px;
    }

    .extra__card .button_white {
        padding: 14px 18px;
    }

    .blog__posts-card {
        h3 {
            font-size: 24px;
        }

        .tag-red {
            font-size: 14px;
        }
    }
}

@media screen and (max-width: 720px) {
    .services__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .services__card {
        font-size: 16px;
    }

    .services__card:first-child {
        grid-column: span 1;
    }

    h3 {
        font-size: 26px;
    }

    .card-heading {
        font-size: 26px;
    }

    .cases .tabs-container {
        width: 100%;
    }
}

@media screen and (max-width: 540px) {
    h1 {
        font-size: 42px;
    }

    .main__background.bg-blue {
        top: 80px;
        transform: scale(2);
    }

    .main__background.bg-red {
        transform: scale(2);
    }

    .tabs {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;

        font-size: 14px;
    }

    .card-heading,
    h3 {
        font-size: 26px;
    }

    .services__card_footer  {
        margin-top: 24px;
    }

    .services__card .button-red {
        padding: 14px 18px;
    }

    .services__card img {
        max-width: 32px;
    }

    .cases__card {
        position: relative;
        grid-template-columns: 1fr;
    }

    .cases__info {
        z-index: 1;
        margin: 0;

        padding: 16px;

        justify-content: start;
        gap: 24px;
    }

    h2 {
        font-size: 48px;   
    }

    .want-same-project p {
        font-size: 20px;
    }

    .facts__heading {
        /* 142px не влезали в узкий экран — «Факты о нас» обрезало правым краем.
           Привязка к ширине окна: на широких экранах размер прежний. */
        font-size: min(142px, 21vw);
    }

}

.cases__card {
    margin-bottom: 40px;
}

.facts {
    position: relative;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.marquee {
    align-self: start;
    overflow: hidden;
    position: relative;

    width: 100%;

    display: flex;
}

.marquee-swap,
.marquee-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;

    left: 0;

    animation-name: marquee;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.facts__galery-marquee {
    gap: 40px;
}

.facts__slider-element:last-child {
    margin-right: 40px;
}

.logo-marquee__wrapper {
    gap: 40px;

    /* Была пара 20s / 45s: 20s по умолчанию и 45s по .is-focused (лента видна
       хотя бы наполовину) или по :hover. Убрано — подробности в комментарии к
       удалённой initLogoMarqueeFocus() в new_home.php: переключение duration
       давало прыжок ленты назад на 934px в момент появления в кадре, а
       :hover-правило не могло сработать в принципе. 45s — та скорость, которую
       человек и так видел, ~63px/с на десктопе. */
    animation-duration: 45s;
}

.logo-marquee__wrapper .swiper-slide:last-child {
    margin-right: 40px;
}

.blog__posts-card-anchor {
    display: block;
    height: 100%;
}

/* Анонс под заголовком карточки — по макету. Ровно три строки: заголовки у
   постов разной длины, и без ограничения карточки в ряду разъезжались бы. */
.blog__posts-card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    margin-top: 12px;
    /* Обложка прижата к низу карточки через margin-top: auto. У поста с длинным
       заголовком свободного места не остаётся, auto схлопывается в ноль — и
       анонс упирается прямо в картинку. Минимальный зазор задаём на том, что
       стоит перед обложкой; в невысоких карточках его поглощает тот же auto. */
    margin-bottom: 20px;

    font-size: 16px;
    line-height: 140%;
    color: #4B5A6B;
}

/* То же самое, когда анонса нет вовсе и перед обложкой стоит заголовок. */
.blog__posts-card h3:has(+ .blog__posts-img-wrapper) {
    margin-bottom: 20px;
}

.blog__posts-img-wrapper {
    position: relative;
    width: 100%;
    /* height: 100% отдавала рамке весь остаток карточки, поэтому у поста с длинным
       заголовком картинка выходила заметно ниже и формат отличался от соседних.
       Фиксируем пропорцию — рамки одинаковые, разница заголовков уходит в отступ. */
    aspect-ratio: 320 / 207;
    height: auto;
    flex: none;
    margin-top: auto;

    border-radius: 32px;
    background-size: 150% 150%;
    background-position: center;

    overflow: hidden;
}

.blog__posts-blur {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    width: 100%;
    height: 100%;

    backdrop-filter: blur(15px) saturate(50%);
}

.blog__posts-card {
    height: 100%;
}

.blog__posts-hero {
    display: block;

    /* было contain: картинка вписывалась в рамку с полями по краям */
    object-fit: cover;
    height: 100%;
    width: 100%;

    border-radius: 32px;
    justify-self: center;
    position: relative;

    z-index: 1;
}

.reviews__card-controls {
    border-top: 1px solid #ECF1F6;
    padding-top: 24px;
}

/* Отступ задаётся с обеих сторон. Раньше здесь стоял только padding-left, а
   padding-right приходил (или не приходил) из блока ≤1280: на 1281–1380 контейнер
   выходил `0 0 0 56px` — справа контент упирался в край, на 961–1280 `0 20px 0 50px`.
   Из-за этого центрированные заголовки секций не совпадали с центром страницы. */
@media screen and (max-width: 1380px) and (min-width: 769px) {
    .about > .container,
    .container {
        padding-left: 56px;
        padding-right: 56px;
    }
}

@media screen and (max-width: 1280px) and (min-width: 721px) {
    .about > .container,
    .container {
        padding-left: 50px;
        padding-right: 50px;
    }

    .card-heading {
        font-size: 26px;
    }

    .services__card {
        font-size: 16px;
    }

    .services__card:first-child {
        grid-column: span 1;
    }

    .services__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .cases__info {
        margin: 0;
        padding: 32px;
    }

    .facts__numbers {
        margin-top: 64px;
        flex-direction: column;
        height: fit-content;
    }

    .facts__container-right  {
        margin-top: 32px;
    }

    .facts__container-right > p {
        margin-top: 12px;
    }

    .facts__galery {
        margin-top: 64px;
        height: 220px;
    }
}

/* Две колонки блока с цифрами занимают ~944px и спокойно помещаются вплоть до 1000px.
   Правило выше складывало их в одну колонку уже на 1280 — на ноутбучном десктопе
   «50+ проектов» оказывалось над карточками, а не слева от них. */
@media screen and (max-width: 1280px) and (min-width: 1001px) {
    .facts__numbers {
        flex-direction: row;
        height: 318px;
    }

    .facts__container-right {
        margin-top: 0;
    }
}

@media screen and (max-width: 960px) {
    .about > .container,
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .facts__grid {
        gap: 16px;
    }

    h1 {
        font-size: 42px;
    }

    /* Sticky снимаем: на узком экране плашка табов залипает и висит поверх
       заголовка секции и текста карточки. В исходной вёрстке табы не липкие
       вообще (#sliderTabs — position: relative, fixed навешивает JS только на
       десктопе), а на ≤768 раскладываются сеткой в две колонки —
       adaptive.css, .slider-tabs. */
    .tabs {
        position: static;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tabs .tab {
        width: 100%;
        text-align: center;
    }

    /* нечётный последний таб занимает обе колонки и встаёт по центру
       (услуги — 5 табов, кейсы — 4, доп. услуги — 2) */
    .tabs .tab:last-child:nth-child(odd) {
        grid-column: span 2;
        justify-self: center;
        width: fit-content;
    }

    .services__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        gap: 16px;
    }

    .services__card,
    .services__card:first-child {
        grid-column: span 1;
        height: min-content;

        padding: 20px;

        p {
            font-size: 16px;
        }
    }

    .cases__card {
        grid-template-columns: 1fr;
        grid-template-rows: max-content 320px;

        height: fit-content;
    }

    .cases__card .card-heading {
        margin-bottom: 12px;
    }

    .desktop-only {
        display: none;
    }

    /* кнопка «Смотреть кейс» здесь скрыта — кликабельной становится вся карточка */
    .cases__card-link {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .cases__info-grid {
        row-gap: 16px;
    }

    .cases__info {
        margin: 0;
        padding: 32px;
    }

    .facts__galery {
        margin-top: 80px;
        height: 150px;
    }

    .facts__numbers {
        margin-top: 80px;
        flex-direction: column;
        height: fit-content;

        gap: 32px;
    }

    .facts__numbers-strong {
        font-size: 26px;
    }

    .facts__numbers-cards {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 12px;
    }

    .facts__numbers-card {
        width: 100%;
    }

    .facts__container-right {
        padding-left: 0;
    }

    .facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: unset;
    }

    /* Иначе содержимое карточки (строка «иконка + заголовок») задаёт колонке
       минимальную ширину, и правая карточка уезжает за край экрана. */
    .facts__card {
        min-width: 0;
    }

    .facts__card > .flex-row {
        flex-wrap: wrap;
        min-width: 0;
    }

    .facts__card-cert {
        font-size: 14px;
    }

    .facts__card-footer {
        gap: 24px;
    }

    h2 {
        font-size: 38px;
    }

    .about__card {
        grid-column: span 2;

        height: fit-content;
    }

    .about__card:nth-last-child(2) {
        grid-column: span 2;
    }

    .about__card-badge {
        margin-top: 12px;
    }

    .about__card h3 {
        font-size: 26px;
    }
    
    .about h2 {
        padding: 0 32px;
        margin-top: 64px;
    }

    .about__wrapper {
        grid-template-columns: 1fr;
        margin-top: 64px;

        gap: 12px;
    }

    .reviews__card {
        grid-template-columns: 1fr 1fr;
        padding: 32px;

        column-gap: 12px;
    }

    .reviews__card-img {
        grid-column: span 1;
        grid-row: span 1;

        width: 100%;
        object-fit: contain;
    }

    .reviews__card h3 {
        font-size: 26px;

        grid-column: 2;
        grid-row: 1;

        text-align: center;
    }

    .reviews__card-text {
        margin-top: 32px;
        grid-row: 2;
        grid-column: span 2;
    }

    .reviews__card-controls {
        grid-row: 3;
        grid-column: span 2;
    }

    .logo-marquee {
        height: 48px;
    }

    .logo-marquee__wrapper {
        height: 100%;
    }

    .logo-marquee .swiper-slide {
        height: 100%;
        width: 160px;
        object-fit: contain;
    }

    .extra-services .tabs-container {
        padding: 0;
        grid-template-columns: 1fr 1fr;
    }
}

.cases__card-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    background-size: 150% 150%;
    background-position: center;
}

.cases__card-img-blur {
    position: absolute;

    width: 100%;
    height: 100%;

    z-index: 0;

    backdrop-filter: blur(15px);
}

.cases__card_image {
    position: relative;

    height: 100%;
    width: 100%;
    /* было contain: картинка вписывалась в рамку целиком и оставляла поля по краям */
    object-fit: cover;

    z-index: 1;

    /* Те же параметры, что у зума картинок в Блоге (blog.css, .blog__item-img-small) */
    transition: transform 0.4s ease;
}

/* Базовый zoom обложки — работает всегда, даже если для кейса не залито
   hover_image (тогда это единственная hover-реакция карточки). */
@media (hover: hover) {
    .cases__card:hover .cases__card_image {
        transform: scale(1.1);
    }
}

/* Подмена изображения кейса при наведении. Второй кадр лежит поверх обложки
   и проявляется по opacity — так не дёргается раскладка и картинка не мигает.
   Только там, где курсор есть: на тач-экранах :hover залипает после тапа. */
@media (hover: hover) {
    .cases__card_image--hover {
        position: absolute;
        top: 0;
        left: 0;

        opacity: 0;
        transition: opacity 0.35s ease;

        z-index: 2;
    }

    .cases__card:hover .cases__card_image--hover {
        opacity: 1;
    }
}

@media screen and (max-width: 720px) {
    .extra-services .tabs-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .extra__card {
        height: fit-content;
    }

    .extra__card-footer {
        margin-top: 48px;
    }

    /* На узком экране колонки 1fr auto 1fr не помещаются: стрелки продавливают
       свою колонку и заголовок съезжает влево. Раскладываем в две строки —
       заголовок по центру, стрелки под ним. */
    .blog__head {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 24px;

        margin-bottom: 40px;
    }

    .blog__head h2,
    .blog__nav {
        grid-column: 1;
        justify-self: center;
    }

    .blog__posts-card {
        max-width: 720px;
        /* высота приходит от слайда: карточки в ряду и так выравниваются по самой высокой */
        height: 100%;

        padding: 24px;
        border-radius: 24px;
    }

    .blog__posts-card-heading {
        margin-bottom: 20px;
    }

    .free-demo {
        padding: 80px 0 120px 0;
    }

    .services__card {
        padding: 20px;
        border-radius: 20px;
    }

    /* top больше не нужен — на мобильном табы не sticky (см. блок ≤960) */
}

@media screen and (max-width: 540px) {
    h1 {
        margin-top: 100px;
    }

}


/* Планшет: карточки услуг в две колонки, а не в одну длинную ленту.
   Блок ≤960 выше складывал сетку сразу в одну колонку — правило ≤720 с двумя
   колонками стояло раньше по файлу и было мёртвым. В исходной вёрстке
   (home.css, .slider-content) переход в одну колонку происходит только на ≤640. */
@media screen and (max-width: 960px) and (min-width: 641px) {
    .services__grid {
        grid-template-columns: 1fr 1fr;
    }

    .services__card:first-child {
        grid-column: span 2;
    }
}

/* Самая узкая ступень. В теме её не было вообще — адаптив заканчивался на 540px,
   поэтому на iPhone SE/8 заголовок первого экрана оставался 42px и переносился
   на четыре строки. В исходной вёрстке для этой ширины есть отдельный проход
   (adaptive.css, @media max-width: 390px): .screen__title → 32px. */
@media screen and (max-width: 390px) {
    h1 {
        font-size: 32px;
    }

    /* .adts__title в вёрстке на этой ширине тоже уходит на 32px — иначе
       заголовки секций спорят по весу с заголовком первого экрана. */
    h2 {
        font-size: 32px;
    }

    /* .slider-content-btn: 38px и подпись 14px. Кнопка «Заказать» в карточке
       услуги — тот же элемент, только под другим классом. */
    .services__card_footer .button-red {
        height: 38px;
        padding: 0 16px;
        font-size: 14px;
    }
}

/* .swiper-slide__feedback-btn в adaptive.css на ≤540 растягивается во всю
   ширину карточки — у нас это «Читать весь отзыв». Правило в конце файла,
   потому что выше .button-red жёстко ставит width: fit-content. */
@media screen and (max-width: 540px) {
    /* низ карточки — flex-строка со space-between, поэтому одной ширины кнопке
       мало: она всё равно ужимается соседними стрелками. Раскладываем в столбик. */
    .reviews__card-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .reviews__popup-trigger {
        width: 100%;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Мобильная версия: блоки, которые на anit-b24.ru уже есть и уже
   адаптированы. Ниже перенесены их реализации, а не придуманы свои —
   у каждого блока указан источник и брейкпоинт оригинала.
   Секция идёт последней в файле, потому что перебивает более ранние
   объявления 960/720/540 (в этом файле они встречаются дважды).
   ───────────────────────────────────────────────────────────────────────── */

/* «Факты о нас» — .why__items на текущей Главной (@media ≤760).
   Там это не сетка, а один ряд с горизонтальным скроллом: карточка 264×280,
   следующая выглядывает из-за края и сама подсказывает, что ряд листается.
   У нас на этой ширине была сетка 2×3 — шесть карточек в столбик на три
   экрана. */
@media screen and (max-width: 760px) {
    /* В проде на этой ширине .why__title — 58px в одну строку, ряд карточек
       начинается под ним (margin-top: 32px). У нас заголовок оставался
       min(142px, 21vw) ≈ 82px, ломался на две строки, а базовый
       margin-bottom: -40px затягивал карточки поверх второй строки — «нас»
       уезжало под первую плитку. */
    .facts__heading {
        /* 58px — как .why__title в проде. Но на 360px внутренняя ширина
           контейнера всего 320px, а строке при 58px нужно 325 — заголовок
           уходил на две строки. Ниже 387px кегль подтягивается по окну. */
        font-size: min(58px, 15vw);
        margin-bottom: 32px;
    }

    .facts__grid {
        display: flex;
        flex-wrap: nowrap;

        /* сетка на этой ширине больше не используется: гасим её параметры,
           иначе grid-template-* продолжают спорить с flex-раскладкой */
        grid-template-columns: none;
        grid-template-rows: none;
        max-height: unset;

        overflow-x: auto;
        scroll-behavior: smooth;
        /* proximity, а не mandatory: при мелком движении пальцем ряд не
           дёргает обратно к началу карточки */
        scroll-snap-type: x proximity;

        gap: 16px;
    }

    /* полосу прокрутки прод прячет — ряд листается пальцем, а не бегунком */
    .facts__grid::-webkit-scrollbar {
        display: none;
    }

    .facts__card {
        flex: 0 0 auto;

        width: 264px;
        height: 280px;

        scroll-snap-align: start;
    }

    /* .why__item-wrapper в проде на ≤750 — column-reverse: логотип сверху,
       подпись под ним. Порядок в разметке (заголовок, картинка) тот же, что
       у нас, поэтому переворот даёт ровно прод-раскладку.
       Селектор именно такой, как в блоке ≤960 выше: там уже стоит
       `.facts__card > div:nth-child(1) { flex-direction: column }` со
       специфичностью (0,2,1), и `.facts__card > .flex-row` (0,2,0) её не
       перебивает — правило молча не применялось бы. */
    .facts__card > div:nth-child(1) {
        flex-direction: column-reverse;
        justify-content: start;
        align-items: start;
        gap: 16px;
    }

    /* max-width: 60% рассчитан на широкую плитку — в 264px подпись из-за него
       рвётся по слогам. Логотип теперь над текстом, ужимать больше незачем. */
    .facts__card-heading {
        max-width: 100%;
        font-size: 16px;
    }

    /* .why__download-wrapper в проде на этой ширине скрыт: в 264px подпись
       «Скачать сертификат» не встаёт рядом с бейджем и ломает низ карточки.
       Сертификаты остаются доступны с планшета и десктопа. */
    .facts__card-footer > .flex-row {
        display: none;
    }
}

/* «Работаем с проектами прозрачно и честно» — это тот же блок, что
   .opportunities__item на /box-version/ (@media ≤740): плитка 24px паддинга,
   заголовок 21px, текст 16px, бейдж внизу. Там карточка ровно 268px, у нас
   от базового min-height: 382px выходило под 600 — полтора экрана на плитку.
   Брейкпоинт 760, а не прод-740: на проде эти блоки лежат на разных
   страницах, и разнобой 740/750/760 никак не виден. У нас они на одной
   Главной, и в полосе 741–760 получалось, что «Факты» и «Кейсы» уже
   мобильные, а эта секция — ещё нет. */
@media screen and (max-width: 760px) {
    .about__wrapper {
        gap: 16px;
    }

    .about__card {
        /* min-height вместо жёсткой высоты: тексты карточек у нас длиннее
           коробочных, при height: 268px нижние строки срезало бы
           родительским overflow: hidden у .about */
        min-height: 268px;
        height: auto;

        padding: 24px;
        justify-content: space-between;
    }

    .about__card h3 {
        margin-bottom: 8px;
        font-size: 21px;
    }

    .about__card p {
        font-size: 16px;
        line-height: 120%;
    }
}

/* Отзывы — .reviews__mobile на текущей Главной (@media ≤750).
   Там карточка перестаёт быть двухколоночной: логотип 216×216 сверху,
   под ним название, потом текст. У нас логотип и название стояли в двух
   колонках грида и не совпадали по центру — у «Новоторга» логотип высокий,
   и название уезжало вверх относительно него. Стопка эту проблему снимает
   вместе с самой раскладкой.
   Брейкпоинт 760 вместо прод-750 — по той же причине, что и у секции выше:
   все мобильные блоки Главной должны переключаться на одной ширине. */
@media screen and (max-width: 760px) {
    .reviews__card {
        display: flex;
        flex-direction: column;
        align-items: start;

        /* на телефоне карточка идёт строго по содержимому: min-height 585/620
           из десктопных правил здесь дал бы пустой хвост под коротким отзывом */
        min-height: 0;
        height: auto;
        padding: 24px;
    }

    .reviews__card-img {
        width: 216px;
        /* в проде логотипы квадратные и коробка 216×216 сидит по картинке.
           У нас в CPT лежат широкие лого (Вилки-Палки, Новоторг), и в
           квадратной коробке над и под ними оставалось по ~80px пустоты.
           Высота по содержимому, 216px — только потолок. */
        height: auto;
        max-height: 216px;

        /* логотипы разных пропорций — вписываем, а не растягиваем */
        object-fit: contain;
        object-position: left center;

        align-self: start;
    }

    .reviews__card h3 {
        margin-top: 32px;
        font-size: 24px;
        text-align: start;
    }

    .reviews__card-text {
        margin-top: 16px;
        font-size: 16px;
    }

    .reviews__card-controls {
        width: 100%;
        margin-top: 32px;

        flex-direction: column;
        align-items: stretch;
    }

    .reviews__popup-trigger {
        width: 100%;
        justify-content: center;
    }

    /* Стрелки убираем: свайп у Swiper включён (effect: fade, allowTouchMove
       по умолчанию), а пара кружков рядом с красной кнопкой — это ровно то,
       что выглядело мусором. На текущей Главной их на мобильном тоже нет. */
    .reviews__swiper-button-prev,
    .reviews__swiper-button-next {
        display: none;
    }
}

/* Кейсы — компактная карточка «изображение + название», как на readycode.ru
   (там 361×339: обложка ~280px и подпись под ней) и как устроена карточка
   на нашем же архиве /cases/. У нас на мобильном сверху лежал блок с
   четырьмя полями (Тип проекта / Отрасль / Платформа / Сроки) и только под
   ним картинка — карточка занимала весь экран. Четыре поля оставляем
   десктопу, на телефоне — обложка и название. */
@media screen and (max-width: 760px) {
    .cases__card {
        grid-template-columns: 1fr;
        /* обложка первой, подпись под ней */
        grid-template-rows: 280px max-content;

        min-height: 0;
        height: auto;
        margin-bottom: 24px;

        /* карточка = картинка плюс подпись на белом, без серой плашки:
           именно она добавляла 32px паддинга со всех сторон */
        background: transparent;
        border-radius: 0;
        overflow: visible;
    }

    .cases__card-img-wrapper {
        grid-row: 1;

        border-radius: 32px;
        overflow: hidden;
    }

    .cases__info {
        grid-row: 2;

        margin: 0;
        padding: 12px 0 0 0;
        gap: 0;
    }

    .cases__info-grid {
        display: none;
    }

    .cases__card .card-heading {
        margin-bottom: 0;
        font-size: 18px;
        line-height: 130%;
    }

    .tabs-container.gap-40 {
        gap: 24px;
    }
}

/* Заголовок «Факты о нас» на планшете и небольшом десктопе.
   Кегль был задан ступеньками в пикселях (227 → 200 на ≤1280 → 156 на ≤960),
   и в полосе 768–1279 строка перестала помещаться: заголовок ломался на две,
   слово «нас» проваливалось в зазор между карточками первого ряда и снизу
   срезалось ими. Нахлёст карточек на заголовок сам по себе задуман
   (`margin-bottom: -40px`, на боевом сайте так же), но он рассчитан на одну
   строку.
   Строка «Факты о нас» занимает 5.6 кегля по ширине — замерено в браузере.
   Доступная ширина под заголовок — 89.6–92.5% окна (замерено на 13 ширинах),
   самая жёсткая точка 1340px; отсюда 15.2vw с запасом.
   Потолок 220px, а не исходные 227: при 227 строке нужно ровно 1272px, а
   контейнер на широких экранах — ровно 1272px. Ноль запаса, и любая мелочь
   (подгрузка шрифта, округление) роняет заголовок на вторую строку. Разница
   в 3% на глаз не видна, зато перенос исключён.
   min-width: 761px, чтобы не спорить с мобильным правилом (58px) выше. */
@media screen and (min-width: 761px) {
    .facts__heading {
        font-size: min(220px, 15.2vw);
    }
}

/* Пагинация отзывов.
   На мобильном стрелки скрыты (правило ниже по ≤760 — так же, как в
   .reviews__mobile на боевом сайте), и до этого ничто не подсказывало, что
   отзывов семь, а не один: слайдер листается свайпом, но аффорданса нет.
   Точки решают именно это. На десктопе стрелки на месте, точки там были бы
   вторым органом управления тем же слайдером — прячем. */
.reviews__pagination {
    display: none;
}

@media screen and (max-width: 760px) {
    .reviews__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;

        margin-top: 24px;
    }

    /* Точка — 8px, но кликабельная зона 24×24: палец в 8px не попадает.
       Прозрачный padding даёт цель нужного размера, не меняя вид. */
    .reviews__pagination .swiper-pagination-bullet {
        width: 24px;
        height: 24px;
        padding: 8px;
        box-sizing: border-box;
        background-clip: content-box;

        border-radius: 50%;
        background-color: #D8DFE5;
        opacity: 1;

        cursor: pointer;
        transition: background-color .2s ease;
    }

    .reviews__pagination .swiper-pagination-bullet-active {
        background-color: var(--red, #D7171F);
    }
}

/* Уважение к системной настройке «уменьшить движение» (iOS, Android, Windows,
   macOS). До этого во всей теме не было ни одного prefers-reduced-motion —
   проверено гREPом по 21 CSS-файлу. Обе бегущие ленты Главной крутятся
   бесконечно и остановить их было нечем: для человека с вестибулярной
   чувствительностью это не украшение, а препятствие на странице, по которой
   он принимает решение. Останавливаем ленты и глушим плавный скролл;
   ховеры и переходы кнопок не трогаем — они короткие и запускаются
   самим человеком. */
@media (prefers-reduced-motion: reduce) {
    .marquee-wrapper,
    .marquee-swap {
        animation: none;
    }

    /* Без анимации вторая копия ленты просто дублирует первую встык —
       показываем одну. */
    .marquee .marquee-swap {
        display: none;
    }

    html {
        scroll-behavior: auto;
    }
}