/* ============================================================
   /razrabotka/ — планшетная/мобильная адаптация (desktop-first overrides).
   Брейкпоинты: 1200 / 1024 / 768 / 480. Подключается после razrabotka.css.
   Многие секции — full-bleed с padding ...max(140px, calc((100vw-1160px)/2)):
   на узких экранах эти 140px съедают экран — переопределяем на маленькие поля.
   ============================================================ */

/* ===== ≤1200px — боковые поля для центрированных контейнеров (1160) ===== */
@media (max-width: 1200px) {
    .raz-niches__container,
    .raz-forecast__container,
    .raz-fishes__container,
    .raz-fishes-cards__container,
    .raz-how__inner,
    .raz-founder__inner {
        padding-left: 32px; padding-right: 32px; box-sizing: border-box;
    }
    .raz-vreview__inner,
    .raz-reviews-hdr__inner {
        width: auto; max-width: 1160px;
        padding-left: 32px; padding-right: 32px; box-sizing: border-box;
    }
    .raz-stages__container { padding-left: 32px; padding-right: 32px; }
    .raz-caps__top { padding-left: 32px; padding-right: 32px; }
}

/* ===================== ≤1200px — ПЛАНШЕТ (стек) =====================
   Контент рассчитан на 1160px; ниже десктопные раскладки (особенно абсолютные —
   hero, карточки «Качество», telegram) теснятся и игнорируют отступы, поэтому
   переводим в поток уже с 1200px (совпадает с брейкпоинтом бургера в шапке). */
@media (max-width: 1200px) {
    /* — боковые поля для full-bleed контейнеров (140px → 28px) — */
    .raz-hero__inner,
    .raz-niches__container, .raz-forecast__container, .raz-fishes__container,
    .raz-fishes-cards__container, .raz-how__inner, .raz-founder__inner,
    .raz-mobile__inner, .raz-int__top, .raz-marketing__header-inner,
    .raz-quality__hdr, .raz-easy__hdr, .raz-easy__inner {
        padding-left: 28px; padding-right: 28px; box-sizing: border-box;
    }
    .raz-vreview__inner, .raz-reviews-hdr__inner {
        width: auto; padding-left: 28px; padding-right: 28px; box-sizing: border-box;
    }
    .raz-stages__container { padding: 0 28px; }
    .raz-caps__top { padding-left: 28px; padding-right: 28px; }
    /* left-only full-bleed paddings (слайдеры — трек уходит вправо для прокрутки) */
    .raz-written, .raz-social, .raz-nda__header,
    .raz-marketing__track {
        padding-left: 28px;
    }
    /* Блоки без полей / только с левым — даём поля с обеих сторон, как у остальных.
       Для блоков-карточек поля на контейнере = карточки отступают от краёв и
       «плавают», а не прилеплены к экрану. */
    .raz-feat__grid,
    .raz-quality__cards,
    .raz-pricing__title, .raz-pricing__viewport,
    .raz-package__header, .raz-package__items {
        padding-left: 28px; padding-right: 28px; box-sizing: border-box;
    }
    .raz-telegram { max-width: none; }

    /* — HERO: колонки в стек, слайдер на всю ширину — */
    .raz-hero__inner { flex-direction: column; min-height: 0; padding-top: 100px; gap: 32px; }
    .raz-hero__content { width: 100%; margin-right: 0; }
    .raz-hero__title { font-size: 32px; line-height: 1.15; }
    /* ширину слайдов задаёт JS (динамически = ширине clip); высота остаётся десктопной */
    .raz-hero__slider-wrap, .raz-hero__slider-clip { width: 100%; max-width: 100%; }
    .raz-hero__stats { transform: scale(0.85); transform-origin: top right; }

    /* — FEAT: 3 колонки → 1 — */
    .raz-feat__grid { grid-template-columns: 1fr; }
    /* Карточка с телефоном: телефон-мокап позиционирован абсолютно (top:116,
       высота ~244 → низ на ~360px). При высоте карточки по тексту он обрезался
       снизу. Задаём мин-высоту, чтобы мокап помещался целиком, и держим
       описание слева, чтобы оно не залезало под телефон. */
    .raz-feat__card--3 { min-height: 392px; }
    .raz-feat__card--3 .raz-feat__text { max-width: 165px; }

    /* — PORT (портфолио-слайдер): карточка по ширине экрана, контент в стек
         (заголовок/кнопки сверху, видео снизу — вместо абсолютного справа) — */
    .raz-port__header { width: auto; flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 28px; padding-right: 28px; }
    .raz-port__slider-wrap { width: 100%; }
    .raz-port__track { padding: 0 28px; }
    .raz-port__card {
        width: calc(100vw - 56px);
        height: auto;
        flex-direction: column;
    }
    .raz-port__left { width: 100%; padding: 32px 28px; }
    .raz-port__niche { font-size: 28px; }
    .raz-port__metric-val { font-size: 40px; }
    .raz-port__metric-avg { font-size: 26px; }
    .raz-port__right {
        position: static;
        top: auto; left: auto;
        width: 100%; height: auto;
        border-radius: 12px;
        overflow: hidden;
        margin: 16px 0 18px;   /* видео между «728 млн» и кнопками, как в оригинале */
    }
    .raz-port__video,
    .raz-port__screen { height: auto; aspect-ratio: 657 / 373; }
    .raz-port__vkframe { height: auto; aspect-ratio: 657 / 373; }
    .raz-port__btns { flex-wrap: wrap; }

    /* — HOW: картинка слайда (композит «МЫ»/«КЛИЕНТ», 1708×941) на узком
         контейнере при фикс-высоте 270px и object-fit:cover обрезалась по бокам.
         Показываем её целиком по своим пропорциям (высота по контенту). — */
    .raz-how__slide-img { height: auto; }
    .raz-how__slide-img img { height: auto; }

    /* — CALC (форма-калькулятор): арт + панель → стек — */
    .raz-calc__wrap { flex-direction: column; padding-left: 28px; padding-right: 28px; box-sizing: border-box; }
    .raz-calc__art-col { width: 100%; min-width: 0; }
    /* Воин — портрет (1680×2099). Низкий бокс 280px + cover обрезал его до
       полоски. Задаём пропорции картинки, чтобы он показывался целиком. */
    .raz-calc__art { width: 100%; height: auto; aspect-ratio: 1680 / 2099; background-size: cover; background-position: center; }
    .raz-calc__panel { padding: 28px; }
    .raz-calc__title { font-size: 28px; }

    /* — HOW: левая карточка + правый слайдер → стек — */
    .raz-how__row { flex-direction: column; }
    .raz-how__left { width: 100%; min-width: 0; }
    .raz-how__right { width: 100%; }
    .raz-how__step2 { padding-left: 0; }
    /* Две фичи «Шага 2» на узких экранах — в столбик (а не два тесных столбца) */
    .raz-how__features { flex-direction: column; }

    /* — NICHES: верх в стек, сетка тегов 1 колонка — */
    .raz-niches__top { flex-direction: column; }
    .raz-niches__arrow { display: none; }
    .raz-niches__grid { grid-template-columns: 1fr; }
    .raz-niches__title { font-size: 32px; line-height: 1.2; }

    /* — FORECAST: 2 колонки → стек — */
    .raz-forecast__container { flex-direction: column; }
    .raz-forecast__left { width: 100%; }
    /* flex:none сбрасывает базовый flex:1 (flex-basis:0), иначе в колоночном
       флексе блок схлопывается в height:0 и картинка не видна. */
    .raz-forecast__right { flex: none; width: 100%; height: 320px; background-size: cover; background-position: center; }

    /* — FISHES: 2 колонки → стек — */
    .raz-fishes__cards { flex-direction: column; }
    .raz-fishes__left { width: 100%; height: auto; }
    .raz-fishes__right { width: 100%; height: auto; }
    .raz-fishes__video { width: 100%; height: auto; }
    .raz-fishes-cards__row { flex-direction: column; gap: 30px; }
    .raz-fishes-cards__col { width: 100%; }
    .raz-fishes-cards__img,
    .raz-fishes-cards__video-wrap { width: 100%; height: auto; }
    .raz-fishes-cards__video-wrap { aspect-ratio: 570 / 400; height: auto; }

    /* — STAGES: панель из 2 колонок → стек — */
    .raz-stages__tab { font-size: 13px; height: auto; padding: 12px 6px; }
    .raz-stages__panel { flex-direction: column; }
    .raz-stages__left { width: 100%; min-height: 0; }
    .raz-stages__right { min-height: 300px; }

    /* — MOBILE / INT: 2 колонки → стек — */
    .raz-mobile__inner { flex-direction: column; }
    .raz-mobile__left, .raz-mobile__right { width: 100%; }
    .raz-int__top { flex-direction: column; align-items: flex-start; gap: 16px; }

    /* — QUALITY: абсолютные карточки 2×2 → поток (стек) — */
    .raz-quality__hdr { height: auto; }
    .raz-quality__hdr-title { white-space: normal; }
    .raz-quality__cards { height: auto; max-width: none; }
    .raz-quality__card {
        position: static;
        width: 100%; max-width: 560px;
        margin: 0 auto 36px;
    }
    /* Пропорции бокса картинки как в оригинале (Tilda: 320×190 ≈ 1.68) + cover:
       обрезаются фиолетовые поля сверху/снизу, контент (документ/скриншот)
       заполняет кадр и не выглядит мелким. Было height:auto → 4:3 с большими полями. */
    .raz-quality__card-img { width: 100%; height: auto; aspect-ratio: 320 / 190; object-fit: cover; object-position: top center; }

    /* — EASY: заголовок без nowrap, карточки в стек — */
    .raz-easy__hdr { height: auto; }
    .raz-easy__hdr-title { white-space: normal; }
    .raz-easy__inner { flex-direction: column; height: auto; gap: 28px; }
    .raz-easy__card { width: 100%; }
    .raz-easy__card-img { width: 100%; }

    /* — REVIEWS HDR / VIDEO REVIEW: в стек — */
    .raz-reviews-hdr { height: auto; padding: 24px 0; }
    .raz-reviews-hdr__inner { height: auto; flex-direction: column; align-items: flex-start; gap: 16px; }
    .raz-vreview__inner { flex-direction: column; }
    /* Видео — горизонтальный формат (как в оригинале), а не высокое */
    .raz-vreview__photo-wrap { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .raz-vreview__content { height: auto; min-height: 0; padding: 28px 24px; }
    .raz-vreview__label,
    .raz-vreview__quote { width: auto; max-width: 100%; }
    /* Шрифты компактнее, как в оригинале */
    .raz-vreview__label { font-size: 22px; }
    .raz-vreview__quote { font-size: 15px; margin-top: 18px; }
    /* Автор — в поток под цитатой (был absolute bottom и наезжал на длинную цитату) */
    .raz-vreview__author-row { position: static; left: auto; bottom: auto; margin-top: 20px; }
    .raz-vreview__author { font-size: 13px; }
    /* Кавычка-иконка — вверх к бейджу, а не по центру */
    .raz-vreview__quote-icon { top: 96px; right: 24px; width: 44px; height: 44px; }

    /* — td-clients (выводится на razrabotka): логотипы 8 → 4 — */
    .td-clients__header { flex-direction: column; gap: 20px; }
    .td-clients__logos { grid-template-columns: repeat(4, 1fr); }
    /* Логотип — резиновый, вписывается в ячейку с отступом (фикс. 146px шире
       узкой ячейки на 4 колонки и обрезал бы сетку). */
    .td-clients__logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px 10px; box-sizing: border-box; }

    /* — TELEGRAM CTA: гаттеры (вместо обнуления) — */
    .raz-telegram { padding-left: 28px; padding-right: 28px; }

    /* — PRICING: горизонтальный свайп-слайдер (как слайдеры на главной): трек
       на transform внутри viewport с overflow:hidden, drag мышкой с инерцией. — */
    .raz-pricing__viewport { overflow: hidden; cursor: grab; }
    .raz-pricing__viewport.is-dragging { cursor: grabbing; }
    .raz-pricing__viewport.is-dragging a { pointer-events: none; }
    .raz-pricing__cards {
        flex-direction: row; flex-wrap: nowrap; align-items: stretch;
        gap: 16px; padding: 0; will-change: transform;
    }
    .raz-pricing__viewport.is-dragging .raz-pricing__cards { user-select: none; }
    .raz-pricing__card { flex: 0 0 86vw; width: auto; max-width: 360px; height: auto; }
    /* стрелки слайдера тарифов — как в оригинале (сверху, под заголовком) */
    .raz-pricing__nav { display: flex; padding-left: 16px; margin: 0 0 20px; }
    /* «Срок разработки» отделяем от списка (на мобильном фикс. высоты нет, и
       прижатый margin-top:auto не работал). */
    .raz-pricing__card-footer { margin-top: 22px; }

    /* — PACKAGE «связка сайтов»: на планшете 2 колонки (как в оригинале):
       слева квиз + лид-магнит, справа «Главный лендинг», материалы — рядом ниже.
       На телефоне (≤600) — одиночный стек (см. ниже). — */
    .raz-package__items { flex-wrap: wrap; padding-right: 28px; gap: 50px 30px; align-items: flex-start; }
    .raz-package__left { width: auto; flex: 0 0 40%; gap: 50px; }
    .raz-package__center { width: auto; flex: 1 1 0; min-width: 0; }
    /* материалы PDF — на всю ширину под основными колонками, в ряд */
    .raz-package__right { width: 100%; flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; gap: 24px 30px; }
    .raz-package__right-header { flex: 0 0 100%; margin-bottom: 0; }
    .raz-package__right-item { flex: 1 1 200px; }
    .raz-package__right-item + .raz-package__right-item { margin-top: 0; }
    /* картинки колонок — резиновые, чтобы помещались в 2 колонки */
    .raz-package__left .raz-package__item-img { width: 100%; height: auto; aspect-ratio: 266 / 184; }
    .raz-package__center-img { width: 100%; height: auto; aspect-ratio: 434 / 800; }
    .raz-package__item-img--wide { width: 100%; height: auto; aspect-ratio: 340 / 184; }
    .raz-package__subtitle { white-space: normal; }
    .raz-package__title { max-width: none; }
    .raz-package__copies { padding-left: 28px; padding-right: 28px; }
    .raz-package__copies-cards { flex-wrap: wrap; }

    /* — MARKETING: шапка в стек, разделитель убрать — */
    .raz-marketing__header-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .raz-marketing__separator { display: none; }

    /* — FOUNDER: 2 колонки → 1 — */
    .raz-founder { padding: 60px 0; }
    .raz-founder__inner { grid-template-columns: 1fr; gap: 36px; }
    .raz-founder__title { font-size: 40px; }

    /* убавляем самые крупные заголовки */
    .raz-niches__title, .raz-stages__title, .raz-caps__title,
    .raz-mobile__title, .raz-int__title, .raz-quality__hdr-title,
    .raz-easy__hdr-title, .raz-pricing__title, .raz-package__title,
    .raz-marketing__title, .raz-forecast__title, .raz-fishes__title,
    .raz-port__title, .raz-how__step-title, .td-clients__title,
    .raz-how__heading, .raz-vreview__label, .raz-reviews-hdr__title { font-size: 30px; line-height: 1.2; letter-spacing: -0.5px; }
}

/* ===================== ≤600px — телефоны: PACKAGE в один столбец ===================== */
@media (max-width: 600px) {
    .raz-package__items { flex-direction: column; flex-wrap: nowrap; gap: 40px; }
    .raz-package__left, .raz-package__center, .raz-package__right { flex: none; width: 100%; }
    .raz-package__left { gap: 40px; }
    .raz-package__right { flex-direction: column; }
    .raz-package__right-item + .raz-package__right-item { margin-top: 40px; }
}

/* ===================== ≤768px — МОБИЛЬНЫЙ ===================== */
@media (max-width: 768px) {
    /* боковые поля поменьше */
    .raz-hero__inner,
    .raz-niches__container, .raz-forecast__container, .raz-fishes__container,
    .raz-fishes-cards__container, .raz-how__inner, .raz-founder__inner,
    .raz-mobile__inner, .raz-int__top, .raz-marketing__header-inner,
    .raz-quality__hdr, .raz-easy__hdr, .raz-easy__inner,
    .raz-vreview__inner, .raz-reviews-hdr__inner { padding-left: 16px; padding-right: 16px; }
    .raz-stages__container { padding: 0 16px; }
    /* Блок ниш — боковые поля больше, как в оригинале (~40px) */
    .raz-niches__container { padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
    .raz-caps__top { padding-left: 16px; padding-right: 16px; }
    /* слайдеры — трек уходит вправо для прокрутки, поле только слева */
    .raz-written, .raz-social, .raz-nda__header,
    .raz-marketing__track { padding-left: 16px; }
    /* блоки без полей / только с левым — даём поля с обеих сторон (карточки «плавают») */
    .raz-feat__grid,
    .raz-quality__cards,
    .raz-pricing__title, .raz-pricing__viewport,
    .raz-package__header, .raz-package__items { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }

    /* Карточка «материалы»: мокапы как в оригинале (Tilda) — две карточки под
       наклоном со скруглением, чёрная правее/выше оранжевой. Углы поворота
       взяты из исходного кода Tilda: оранжевая rotate(326deg)=−34°,
       чёрная rotate(352deg)=−8°. Текст держим уже, чтобы не перекрывался. */
    .raz-feat__card--5 { min-height: 300px; }
    .raz-feat__card--5 .raz-feat__text { max-width: 150px; }
    .raz-feat__card--5 .raz-feat__cards-img { border-radius: 15px; }
    .raz-feat__card--5 .raz-feat__cards-img--1 {
        width: 125px; height: 125px; right: 92px; bottom: 36px; transform: rotate(-34deg);
    }
    .raz-feat__card--5 .raz-feat__cards-img--2 {
        width: 125px; height: 125px; right: 24px; bottom: 20px; transform: rotate(-8deg);
    }

    /* hero мельче */
    .raz-hero__title { font-size: 28px; }
    .raz-hero__btn { width: 100%; }
    /* Текстовую колонку ограничиваем и центрируем — как в оригинале (Tilda
       центрирует контент фикс. ширины). Отступы по краям получаются ~56px на
       430px и плавно уменьшаются на узких экранах. Слайдер остаётся шире. */
    .raz-hero__inner { align-items: center; }
    .raz-hero__content { max-width: 320px; }
    /* Слайдер-карточку сужаем и центрируем, чтобы по бокам были отступы как в
       оригинале (карточка отступает от краёв ~45px на 430px, плавно меньше на
       узких экранах). */
    .raz-hero__slider-wrap { max-width: 340px; }
    /* Слайд: высота по контенту. Скриншот сайта показываем целиком (натуральные
       пропорции 750×480), а тёмную панель статистики выносим ОТДЕЛЬНЫМ блоком ПОД
       скриншот (как в оригинале), а не оверлеем поверх него. */
    .raz-hero__slider-clip { height: auto; }
    .raz-hero__slide { height: auto; display: flex; flex-direction: column; }
    .raz-hero__slide-img { height: auto; }
    .raz-hero__stats {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        border-radius: 0;
        padding: 22px 24px 24px;
    }
    .raz-hero__stats-col-l { flex: 0 0 auto; }   /* 5,9% и 2% группируются слева */
    .raz-hero__stats-desc { margin-bottom: 14px; }

    /* PORT: поля поменьше, кнопки на всю ширину */
    .raz-port__header { padding-left: 16px; padding-right: 16px; }
    .raz-port__track { padding: 0 16px; }
    .raz-port__card { width: calc(100vw - 32px); }
    .raz-port__left { padding: 28px 20px; }
    .raz-port__niche { font-size: 24px; }
    /* column-reverse: «Читать кейс» сверху, «Рассчитать стоимость» снизу — как в оригинале */
    .raz-port__btns { flex-direction: column-reverse; align-items: stretch; }
    .raz-port__btn-calc, .raz-port__btn-case { width: 100%; }

    /* слайдер-карточки под телефон */
    .td-wr-card { flex: 0 0 86vw; max-width: 420px; }
    .td-wr-card__layout { flex-direction: column; }
    .td-sc-card { flex: 0 0 86vw; max-width: 420px; }
    .raz-marketing__card { width: 80vw; max-width: 360px; }
    .raz-easy__card { max-width: none; }

    /* кнопки на всю ширину */
    .raz-forecast__btn, .raz-fishes__btn, .raz-niches__more-btn,
    .raz-niches__full-link, .raz-stages__btn { width: 100%; box-sizing: border-box; }

    /* заголовки секций ещё чуть меньше */
    .raz-niches__title, .raz-stages__title, .raz-caps__title,
    .raz-quality__hdr-title, .raz-easy__hdr-title, .raz-pricing__title,
    .raz-package__title, .raz-marketing__title, .raz-forecast__title,
    .raz-fishes__title, .raz-how__heading,
    .raz-port__title, .raz-how__step-title { font-size: 26px; }

    /* td-clients — логотипы 4 в ряд (как в оригинале) */
    .td-clients__logos { grid-template-columns: repeat(4, 1fr); }

    /* STAGES: 4 вкладки → 2 ряда (иначе текст не влезает) */
    .raz-stages__nav { flex-wrap: wrap; gap: 6px; }
    .raz-stages__tab { flex: 1 1 45%; border-radius: 12px !important; }

    /* TELEGRAM: абсолютная раскладка карточки → поток; декор-телефоны убрать */
    .raz-telegram { padding-left: 16px; padding-right: 16px; }
    .raz-telegram__card { height: auto; padding: 32px 22px; }
    .raz-telegram__title,
    .raz-telegram__desc,
    .raz-telegram__btn {
        position: static;
        left: auto; top: auto;
        width: auto;
    }
    .raz-telegram__title { font-size: 26px; margin-bottom: 14px; }
    .raz-telegram__desc { margin-bottom: 22px; }
    .raz-telegram__btn { width: 100%; }
    .raz-telegram__phone--1,
    .raz-telegram__phone--2 { display: none; }
}

/* ===================== ≤480px — УЗКИЙ ТЕЛЕФОН ===================== */
@media (max-width: 480px) {
    .raz-hero__title { font-size: 24px; line-height: 1.2; }
    /* (масштабирование статистики убрано — на мобильном она в потоке под скриншотом) */

    .raz-niches__title, .raz-stages__title, .raz-caps__title,
    .raz-quality__hdr-title, .raz-easy__hdr-title, .raz-pricing__title,
    .raz-package__title, .raz-marketing__title, .raz-forecast__title,
    .raz-fishes__title, .raz-how__heading,
    .raz-reviews-hdr__title { font-size: 23px; }
    .raz-vreview__label { font-size: 22px; }

    .raz-stages__tab { font-size: 11px; }

    .td-clients__logos { grid-template-columns: repeat(4, 1fr); }
    .td-wr-card, .td-sc-card { flex-basis: 90vw; }
    .raz-marketing__card { width: 86vw; }
}

/* ===== FOUNDER «Кто гарантирует результат» — раскладка по брейкпоинтам Tilda =====
   В оригинале это центрированная колонка фикс. ширины (артборды 640/480/320),
   поэтому боковые поля растут с шириной экрана. Размеры шрифтов тоже ступенчатые.
   Размещено в конце файла, чтобы переопределять общие правила выше. */
@media (max-width: 959px) {
    .raz-founder__content { max-width: 620px; margin-left: auto; margin-right: auto; }
    .raz-founder__title { font-size: 42px; line-height: 1.1; margin-bottom: 18px; }
    .raz-founder__lead { font-size: 20px; line-height: 1.35; margin-bottom: 22px; }
    .raz-founder__text { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
}
@media (max-width: 639px) {
    .raz-founder__content { max-width: 460px; }
    .raz-founder__title { font-size: 40px; }
    .raz-founder__lead { font-size: 19px; }
}
@media (max-width: 479px) {
    .raz-founder__content { max-width: 308px; }
    .raz-founder__title { font-size: 28px; margin-bottom: 12px; }
    .raz-founder__lead { font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
    .raz-founder__text { font-size: 12px; line-height: 1.55; margin-bottom: 8px; }
}