/* ==============================================
   РЕДИЗАЙН ГЛАВНОЙ (ТЕСТ) — блок ИНТРО
   Точка отсчёта пропорций — 2560px (одобренный 2K): выше ~1700px
   текст и картинка сжимаются строго вместе. Ниже ~1700px текст
   «стоп-масштаб»: держится на читаемых размерах (полы clamp),
   а не мельчает; простор пустот компенсирует фиксированную шапку.
   701-1280px — короткий баннер: центрированный компактный кластер.
   Единственный структурный брейк ~700px — мобильный свайп-список.
   ============================================== */

section.section--intro {
    position: relative;
    margin-top: 0;
    min-height: 0;
    z-index: 0;
}

/* Фон-картинка в потоке: сама задаёт высоту секции на любой ширине */
.intro--bg {
    position: relative;
    /* Тянем картинку под прозрачную фиксированную шапку (без полосы) */
    margin-top: calc(-1 * clamp(70px, 9vw, 100px));
    z-index: 0;
}

.intro--bg picture {
    display: block;
    line-height: 0;
}

.intro--bg picture img {
    display: block;
    width: 100%;
    height: auto;
}

/* Оверлей: абсолют поверх картинки, контент — центрированная колонка.
   ТОЧКА ОТСЧЁТА ПРОПОРЦИЙ = 2560px (2K-вид, который одобрен пользователем).
   Коэффициент = размер на 2K / 2560, поэтому на любой ширине ниже 2560
   текст, отступы и стата масштабируются ровно как картинка —
   никаких «потолков», держащих кластер фиксированным.
   Потолки включены только выше ~5120px (защита 4K/5K).
   Скачка на 1700px больше нет: вертикаль задаётся одним правилом ≥1101px. */
.intro--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: clamp(14px, 2.5vw, 48px);
}

.intro--tag-mobile {
    display: none;
}

.intro--overlay-tag {
    display: block;
    color: #ffffff;
    font-size: clamp(17px, 1.01565vw, 26px);
    font-weight: 300;
    line-height: 1.3;
    white-space: normal;
    margin-bottom: clamp(8px, 0.5475vw, 14px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.intro--overlay-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(10px, 0.78vw, 20px);
}

.intro--overlay-divider img {
    display: block;
    width: clamp(42px, 2.58vw, 66px) !important;
    height: clamp(30px, 1.8vw, 46px) !important;
    max-width: none !important;
}

.intro--overlay-divider::before,
.intro--overlay-divider::after {
    content: "";
    height: clamp(2px, 0.195vw, 10px);
    background: #ffffff;
    border-radius: 4px;
}

.intro--overlay-divider::before {
    width: clamp(52px, 3.5175vw, 90px);
    margin-right: clamp(11px, 0.78vw, 20px);
}

.intro--overlay-divider::after {
    width: clamp(52px, 3.5175vw, 90px);
    margin-left: clamp(11px, 0.78vw, 20px);
}

.intro--overlay h1 {
    color: #ffffff;
    font-size: clamp(50px, 3.046875vw, 78px);
    font-weight: 700;
    line-height: 1.12;
    margin: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* h1: жёсткие строки, перенос не «плавает».
   3 строки (2K и выше): «Выводите товары в ТОП» / «при помощи бартера»
   / «с микроблогерами» */
.intro--overlay h1 .h1-u1 { display: block; }
.intro--overlay h1 .h1-u2,
.intro--overlay h1 .h1-u3 { display: inline; }
.intro--overlay h1 .h1-u4 { display: block; }
.intro--overlay h1 .h1-mobile { display: none; }

.intro--overlay-sub {
    color: #ffffff;
    font-size: clamp(18px, 1.01565vw, 26px);
    font-weight: 300;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
    margin: clamp(12px, 1.01565vw, 26px) 0 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.intro--overlay-btn {
    display: inline-block;
    background: #ffffff;
    color: #4a5a65;
    font-weight: 600;
    font-size: clamp(18px, 1.3281vw, 34px);
    line-height: 1.1;
    padding: clamp(13px, 0.9375vw, 24px) clamp(27px, 2.109375vw, 54px);
    border-radius: clamp(12px, 0.54675vw, 14px);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    margin-top: clamp(14px, 1.3281vw, 34px);
}

.intro--overlay-btn:hover {
    background: #4a5a65;
    color: #ffffff;
}

.intro--stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(28px, 2.5vw, 64px);
    margin-top: clamp(16px, 1.40625vw, 36px);
}

.intro--stat {
    text-align: center;
}

.intro--stat p {
    margin: 0;
    color: #ffffff;
    font-size: clamp(14px, 0.85935vw, 22px);
    font-weight: 300;
    line-height: 1.3;
    white-space: normal;
}

.intro--stat b {
    display: block;
    margin-top: clamp(3px, 0.234375vw, 6px);
    color: #ffffff;
    font-size: clamp(28px, 1.718775vw, 44px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Средняя зона (1281-1383px, УТП в 2 строки): картинка здесь ещё низкая
   для «комфортных полов» десктопа — кластер уменьшен (h1 44 вместо 50),
   а pad имеет порог max(формула; 214px): 100px шапки + зазор, тег всегда
   ниже шапки. От ~1364px порог перестаёт работать, позиция плавно уходит
   в общую формулу всплытия (те же -120px + 24.5vw). */
@media screen and (min-width: 1281px) and (max-width: 1383px) {
    .intro--overlay {
        justify-content: flex-start;
        padding: max(calc(-120px + 24.5vw), 214px) clamp(14px, 2.5vw, 48px) 0;
    }

    .intro--overlay-tag {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .intro--overlay-divider {
        margin-bottom: 8px;
    }

    .intro--overlay-divider img {
        width: 32px !important;
        height: 22px !important;
    }

    .intro--overlay-divider::before,
    .intro--overlay-divider::after {
        width: 40px;
        height: 2px;
        margin: 0 9px;
    }

    .intro--overlay h1 {
        font-size: 44px;
    }

    .intro--overlay-sub {
        font-size: 16px;
        margin-top: 10px;
    }

    .intro--overlay-btn {
        font-size: 18px;
        padding: 11px 24px;
        border-radius: 11px;
        margin-top: 15px;
    }

    .intro--stats {
        gap: 24px;
        margin-top: 14px;
    }

    .intro--stat p {
        font-size: 13px;
    }

    .intro--stat b {
        font-size: 26px;
        margin-top: 3px;
    }
}

/* Комфортные ноутбуки (1384-1600px, УТП в 2 строки): блок сдвинут вниз так,
   чтобы пустота сверху (от нижней кромки шапки ~100px до тега) равнялась
   пустоте снизу (от статы до низа картинки). Кластер ~342px, картинка
   0.4914W -> pad = (0.4914W + 200 - 342)/2 = 0.2457W - 71 ≈ -120px + 24.5vw */
@media screen and (min-width: 1384px) and (max-width: 1600px) {
    .intro--overlay {
        justify-content: flex-start;
        padding: calc(-120px + 24.5vw) clamp(14px, 2.5vw, 48px) 0;
    }
}

/* 1401-1600: картинка уже высокая, есть запас — укрупняем весь кластер
   на 10% (сейчас были «полы» комфорта). pad пересчитан для того же
   равенства пустот: кластер ~466px -> pad = 0.2457W - 132 */
@media screen and (min-width: 1401px) and (max-width: 1600px) {
    .intro--overlay {
        padding: calc(-132px + 24.5vw) clamp(14px, 2.5vw, 48px) 0;
    }

    .intro--overlay-tag {
        font-size: 19px;
        margin-bottom: 9px;
    }

    .intro--overlay-divider {
        margin-bottom: 13px;
    }

    .intro--overlay-divider img {
        width: 46px !important;
        height: 33px !important;
    }

    .intro--overlay-divider::before,
    .intro--overlay-divider::after {
        width: 62px;
        margin: 0 13px;
    }

    .intro--overlay h1 {
        font-size: 55px;
    }

    .intro--overlay-sub {
        font-size: 20px;
        margin-top: 17px;
    }

    .intro--overlay-btn {
        font-size: 23px;
        padding: 16px 37px;
        border-radius: 13px;
        margin-top: 23px;
    }

    .intro--stats {
        gap: clamp(32px, 2.75vw, 44px);
        margin-top: 24px;
    }

    .intro--stat p {
        font-size: 15px;
    }

    .intro--stat b {
        font-size: 31px;
        margin-top: 4px;
    }
}

/* Свыше 1600 — УТП в 3 строки, простор как на 2K: компенсация шапки
   (95px) + 8.6% ширины */
@media screen and (min-width: 1601px) {
    .intro--overlay {
        justify-content: flex-start;
        padding: calc(95px + 8.6vw) clamp(14px, 2.5vw, 48px) 0;
    }
}

/* Уже на узких десктопах заглавие-УТП складываем в 2 строки:
   «Выводите товары в ТОП при помощи» / «бартера с микроблогерами»
   (u1+u2 в строку, u3 — началом второй строки, u4 следом за ним) */
@media screen and (min-width: 701px) and (max-width: 1600px) {
    .intro--overlay h1 .h1-u1,
    .intro--overlay h1 .h1-u2 { display: inline; }
    .intro--overlay h1 .h1-u3 { display: block; }
    .intro--overlay h1 .h1-u4 { display: inline; }
}

/* Планшетная зона (701-1280px): широкий баннер самый «низкий» —
   центрированный компактный кластер, чтобы не наезжал на край картинки */
@media screen and (min-width: 701px) and (max-width: 1280px) {
    .intro--overlay {
        justify-content: flex-start;
        padding-top: calc(17.1vw - 5px);
    }

    .intro--overlay-tag {
        font-size: clamp(18px, 2.54vw, 25px);
        margin-bottom: 20px;
    }

    .intro--overlay-divider {
        margin-bottom: 20px;
    }

    .intro--overlay-divider img {
        width: clamp(33px, 3.37vw, 54px) !important;
        height: clamp(24px, 2.39vw, 36px) !important;
    }

    .intro--overlay-divider::before,
    .intro--overlay-divider::after {
        width: clamp(33px, 4.72vw, 69px);
        margin: 0 clamp(10px, 1.46vw, 24px);
    }

    .intro--overlay h1 {
        font-size: clamp(26px, 4.34vw, 56px);
        line-height: 1.15;
    }

    .intro--overlay-sub {
        font-size: clamp(16px, 1.94vw, 24px);
        margin-top: 26px;
    }

    .intro--overlay-btn {
        font-size: clamp(18px, 2.39vw, 26px);
        line-height: 1.2;
        padding: 14px 24px;
        margin-top: 32px;
    }

    .intro--stats {
        gap: 43px;
        margin-top: 32px;
    }

    .intro--stat p {
        font-size: clamp(15px, 1.79vw, 21px);
    }

    .intro--stat b {
        font-size: clamp(21px, 3.14vw, 39px);
        margin-top: 9px;
    }
}

/* Десктопные стикеры — под картинкой, масштабируются плавно */
.section--intro > .intro--stickers {
    position: static;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(16px, 2.4vw, 30px);
    margin: clamp(28px, 5%, 72px) auto clamp(40px, 6%, 90px);
    max-width: min(1160px, 92%);
}

.section--intro > .intro--stickers .sticker {
    width: min(300px, 30vw);
    min-height: auto;
    box-sizing: border-box;
}

.section--intro > .intro--stickers .sticker--title {
    font-size: clamp(16px, 1.9vw, 26px);
}

.section--intro > .intro--stickers .sticker p {
    font-size: clamp(12px, 1.2vw, 16px);
    line-height: 1.5;
    white-space: normal;
    margin-top: clamp(10px, 1.2vw, 20px);
}

/* Мобильный блок (свайп-стикеры) скрыт по умолчанию */
.section--intro .container,
.section--intro .intro--img,
.section--intro .intro--stickers.mobile {
    display: none;
}

@media screen and (min-width: 701px) and (max-width: 1150px) {
    .intro--overlay {
        padding-top: calc(17.1vw + 35px);
    }

    .intro--overlay-tag {
        font-size: clamp(15px, 2.16vw, 21px);
        margin-bottom: 17px;
    }

    .intro--overlay-divider {
        margin-bottom: 17px;
    }

    .intro--overlay-divider::before,
    .intro--overlay-divider::after {
        margin: 0 clamp(9px, 1.24vw, 20px);
    }

    .intro--overlay h1 {
        font-size: clamp(22px, 3.69vw, 48px);
    }

    .intro--overlay-sub {
        font-size: clamp(14px, 1.65vw, 20px);
        margin-top: 22px;
    }

    .intro--overlay-btn {
        font-size: clamp(15px, 2.03vw, 22px);
        padding: 12px 20px;
        margin-top: 27px;
    }

    .intro--stats {
        gap: 37px;
        margin-top: 27px;
    }

    .intro--stat p {
        font-size: clamp(13px, 1.52vw, 18px);
    }

    .intro--stat b {
        font-size: clamp(18px, 2.67vw, 33px);
        margin-top: 8px;
    }
}

@media screen and (min-width: 701px) and (max-width: 960px) {
    .intro--overlay {
        padding-top: calc(17.1vw + 75px);
    }

    .intro--overlay-tag {
        font-size: clamp(22px, 2.58vw, 31px);
    }

    .intro--overlay h1 {
        font-size: clamp(35px, 5.76vw, 74px);
    }

    .intro--overlay h1 .h1-u1 { display: block; }
    .intro--overlay h1 .h1-u2,
    .intro--overlay h1 .h1-u3 { display: inline; }
    .intro--overlay h1 .h1-u4 { display: block; }

    .intro--overlay-sub {
        font-size: clamp(22px, 2.58vw, 31px);
    }

    .intro--overlay-btn {
        font-size: clamp(24px, 3.17vw, 35px);
    }

    .intro--stat p {
        font-size: clamp(20px, 2.38vw, 28px);
    }

    .intro--stat b {
        font-size: clamp(28px, 4.16vw, 52px);
    }
}

/* Единственный структурный брейк: десктоп-карточки -> свайп-список */
@media screen and (max-width: 700px) {
    .section--intro > .intro--stickers {
        display: none;
    }

    .intro--overlay {
        justify-content: flex-start;
        padding-top: clamp(90px, 28vw, 195px);
    }

    .section--intro .container {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .section--intro .section__inner {
        display: block;
    }

    .section--intro .intro--img {
        display: block;
        margin-top: clamp(16px, 4vw, 28px);
    }

    /* Мобильные размеры текста (не даём «комфортным» полам десктопа
       раздуть кластер на портретном баннере) */
    .intro--overlay-tag {
        font-size: clamp(12px, 3vw, 21px);
        margin-bottom: clamp(12px, 3vw, 21px);
    }

    .intro--overlay-divider {
        margin-bottom: clamp(6px, 1.43vw, 10px);
    }

    .intro--overlay-divider::before,
    .intro--overlay-divider::after {
        margin: 0 clamp(6px, 1.57vw, 11px);
    }

    .intro--overlay h1 {
        font-size: clamp(21px, 5.14vw, 36px);
        line-height: 1.15;
    }

    .intro--overlay-sub {
        font-size: clamp(12px, 3vw, 21px);
        margin-top: clamp(15px, 3.71vw, 26px);
    }

    .intro--overlay-btn {
        font-size: clamp(12px, 3vw, 21px);
        padding: clamp(9px, 2.29vw, 16px) clamp(19px, 4.71vw, 33px);
        margin-top: clamp(18px, 4.43vw, 31px);
    }

    .intro--stats {
        gap: clamp(27px, 6.71vw, 47px);
        margin-top: clamp(18px, 4.43vw, 31px);
    }

    .intro--stat p {
        font-size: clamp(10px, 2.57vw, 18px);
    }

    .intro--stat b {
        font-size: clamp(17px, 4.29vw, 30px);
        margin-top: clamp(3px, 0.86vw, 6px);
    }

    .section--intro .intro--stickers.mobile {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: clamp(10px, 3vw, 16px);
        margin: 0;
        padding: 8px clamp(12px, 4vw, 20px) 18px;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .section--intro .intro--stickers.mobile::-webkit-scrollbar {
        display: none;
    }

    .section--intro .intro--stickers.mobile article.sticker {
        flex: 0 0 clamp(210px, 62vw, 290px);
    }

    .section--intro .intro--img .mobile--swipers {
        display: flex;
        justify-content: center;
        padding: 0 clamp(12px, 4vw, 20px);
    }
}

@media screen and (max-width: 600px) {
    .intro--overlay {
        padding-top: clamp(130px, calc(28vw + 40px), 235px);
    }

    .intro--tag-desktop {
        display: none;
    }

    .intro--tag-mobile {
        display: inline;
    }

    .intro--overlay h1 .h1-desktop {
        display: none;
    }

    .intro--overlay h1 .h1-mobile {
        display: inline;
    }

    .intro--overlay-tag {
        font-size: clamp(16px, 3.9vw, 27px);
    }

    .intro--overlay h1 {
        font-size: clamp(32px, 8.02vw, 56px);
    }

    .intro--overlay-sub {
        font-size: clamp(16px, 3.9vw, 27px);
    }

    .intro--overlay-btn {
        font-size: clamp(19px, 4.68vw, 32px);
        padding: clamp(11px, 2.75vw, 19px) clamp(23px, 5.65vw, 40px);
    }

    .intro--stat p {
        font-size: clamp(13px, 3.34vw, 23px);
    }

    .intro--stat b {
        font-size: clamp(22px, 5.58vw, 39px);
    }
}

@media screen and (max-width: 500px) {
    .intro--overlay {
        padding-top: clamp(140px, calc(28vw + 52px), 240px);
    }
}

@media screen and (max-width: 400px) {
    .intro--overlay {
        padding-top: clamp(130px, calc(28vw + 60px), 200px);
    }
}

@media screen and (max-width: 350px) {
    .intro--overlay-tag {
        font-size: 14px;
    }

    .intro--overlay h1 {
        font-size: 29px;
    }

    .intro--overlay-sub {
        font-size: 14px;
    }

    .intro--overlay-btn {
        font-size: 17px;
    }

    .intro--stat p {
        font-size: 12px;
    }

    .intro--stat b {
        font-size: 20px;
    }
}