/* ============================================================
   RESPONSIVE — брейкпоинты 1200 / 960 / 640 / 480 / 320
   ============================================================ */

@media (max-width: 1199px) {
  :root { --h1-size: 56px; --h2-size: 44px; --container: 960px; --gutter-desktop: 40px; }
  .header__nav { display: none; }
  .burger { display: inline-flex; }
  .header__cta .btn--secondary { display: none; }
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .pcard--offset1, .pcard--offset2, .pcard--offset3 { margin-top: 0; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  /* слайдер остаётся 2-up вплоть до 960px (базовый calc) */
  /* мозаика: чуть у́же главная колонка на планшетном контейнере */
  .hero-mosaic { grid-template-columns: 1.35fr 1fr 1fr; }
  .problems .obj--spiral { width: 168px; top: -50px; left: -46px; }
  .problems .obj--plisse { width: 148px; top: -48px; right: -40px; }
  /* ладонь меньше в узком контейнере (не наезжает на текст отзывов) */
  .island .obj--ladon { width: 330px; right: 16px; top: 8px; }
  /* трубка: на ≤1199 форма занимает почти весь контейнер — свободной зоны слева нет, скрываем */
  .cta .obj--trubka { display: none; }
}

@media (max-width: 959px) {
  :root { --h1-size: 44px; --h1-lh: 1.12; --h2-size: 36px; --h2-lh: 1.12; --h3-size: 32px; --h3-lh: 36px; }

  /* МОБАЙЛ/ПЛАНШЕТ: стековый sticky-скролл ВКЛЮЧЁН — как на десктопе (эффект
     перелистывания секций). Механику задают базовый .stack (sections.css: position:sticky,
     GPU-слой translateZ) и JS (layoutSticky пишет inline top: 0 для секций ≤ вьюпорта,
     отрицательный для высоких — липнет низ). Секции ВСТЫК, без margin: возрастающий
     z-index перекрывает предыдущую, язычок ложится поверх фона предыдущей секции.
     Отключается только при prefers-reduced-motion (sections.css @media reduce). */

  /* Первый экран занимает весь ВИДИМЫЙ вьюпорт (dvh — с учётом адресной строки),
     плюс клиренс: язычок «Подход» следующей секции уходит на 86px ниже фолда
     (высота язычка 46 + overlap следующей секции --r-card 40). Так вторая секция
     не выглядывает ни телом, ни язычком. Фолбэк 100vh для старых браузеров.
     Контент центрируется по вертикали (base: display:flex; align-items:center) —
     на маленьких экранах не обрезается (min-height, а не height: при высоком
     контенте герой растёт). */
  .hero { min-height: calc(100vh + 86px); min-height: calc(100dvh + 86px); padding: 120px 0 100px; }
  /* мозаика в 2 колонки: главная плашка сверху во всю ширину */
  .hero-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; max-width: 100%; }
  .m-main   { grid-column: 1 / 3; grid-row: 1; padding: 34px 30px 32px; }
  .m-award, .m-svc { grid-column: 1 / 3; grid-row: 2; }
  .m-fact--b { grid-column: 1; grid-row: 3; }
  .m-fact--c { grid-column: 2; grid-row: 3; }
  .obj--kubok { width: 118px; top: -40px; right: -18px; }
  /* карусель услуг во всю ширину: арт чуть меньше, клиренс текста уже */
  .m-svc { min-height: 184px; }
  .m-svc__art { width: 132px; height: 158px; top: -38px; right: -14px; }
  .m-svc__slide { padding: 46px 118px 48px 30px; }
  .obj--koltsa { width: 104px; bottom: -34px; right: -24px; }
  .cta__head { grid-template-columns: 1fr; }
  .checks { grid-template-columns: repeat(2, 1fr); }
  /* слайдер — 1 отзыв на экран на планшете и ниже */
  .review { flex: 0 0 100%; }
  .cta .obj--trubka { display: none; }
  .svc-krug { width: 460px; right: -170px; top: 40px; }
  /* планшет: ладонь скрыта — пустой зоны справа от текста уже нет, чтобы не наезжать */
  .island .obj--ladon { display: none; }
}

@media (max-width: 639px) {
  :root { --h1-size: 36px; --h1-lh: 1.14; --h2-size: 30px; --h2-lh: 1.14; --gutter-desktop: 20px; }

  /* ЯЗЫЧОК-ПАПКА: единый силуэт на мобиле (фикс шва и «хвостика»).
     Причина дефекта: на десктопе левый край язычка = левый край КОНТЕНТ-колонки
     (gutter 60px), он далеко от скруглённого ВЕРХ-ЛЕВОГО угла панели (radius
     --r-card 40px у самого края экрана, x0) — угол язычком не задет и не виден.
     На мобиле gutter падает до 20/16px < 40px: дуга скруглённого угла панели
     заезжает ПОД и ЛЕВЕЕ язычка и оголяет подложку страницы (--page-bg) — до 24px
     по замеру у левого края. Это и есть «белая щель между язычком и секцией», и
     «хвостик» слева. Фикс без замазок: язычок сажаем на самый край панели (left:0),
     а ВЕРХ-ЛЕВЫЙ угол секции делаем прямым (radius 0) — оголять больше нечего.
     Скругление верх-левого угла общего силуэта даёт сам язычок; его левая грань
     продолжается левой гранью секции одной сплошной вертикалью — как на десктопе.
     ВЕРХ-ПРАВЫЙ угол секции остаётся скруглён: сквозь него в sticky-стеке видна
     предыдущая секция (эффект перелистывания сохранён). */
  .fold-tab { left: 0; }
  .stack { border-top-left-radius: 0; }

  /* H1 главной на мобиле — в 2 строки: «Приводим клиентов,» / «а не клики».
     Спаны — inline (лесенка выключена), принудительный перенос перед 3-м спаном,
     кегль подобран, чтобы длинная строка помещалась на 360-430px. */
  .hero__title { font-size: clamp(26px, 8vw, 36px); }
  .hero__title .line { display: inline; }
  .hero__title .line--indent { margin-left: 0; }
  .hero__title .line:nth-child(3)::before { content: "\A"; white-space: pre; }
  .hero__sub { font-size: var(--text-md); line-height: var(--text-md-lh); }
  /* мозаика в 1 колонку */
  .hero-mosaic { grid-template-columns: 1fr; }
  .m-main, .m-award, .m-svc, .m-fact--b, .m-fact--c { grid-column: 1; grid-row: auto; }
  /* карусель услуг на телефоне: арт компактнее, навигация по нижней кромке */
  .m-svc { min-height: 176px; }
  .m-svc__art { width: 116px; height: 140px; top: -34px; right: -8px; }
  .m-svc__slide { padding: 44px 96px 46px 26px; }
  .m-svc__eyebrow { left: 26px; top: 20px; }
  .m-svc__nav { left: 26px; right: 26px; bottom: 16px; }
  .m-svc__dot.is-active { width: 16px; }
  .obj--kursor { display: none; }
  .obj--koltsa { width: 92px; bottom: -30px; right: -16px; }
  .problem-grid { grid-template-columns: 1fr; }
  /* карточки: убираем растянутую пустоту (в 1 колонку min-height 340 давал большую пустую зону,
     особенно у фиолетовой лид-карточки с выключкой контента вниз) */
  .pcard { min-height: auto; }
  .pcard--grad { justify-content: flex-start; }
  /* крупные декоры проблем убираем на мобиле, иконки карточек оставляем меньше */
  .problems .obj--spiral, .problems .obj--plisse { display: none; }
  /* иконка-плашка выше и правее — гарантированно НАД заголовком, не наезжает на текст
     (запас на «дыхание» ±8px: иконка -28..30, заголовок стартует с 50px) */
  .pcard--obj { padding-top: 50px; }
  .pcard--obj .obj--ic { width: 58px; top: -28px; left: 10px; }
  .svc-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .obj--case { width: 92px; top: -12px; right: -4px; margin-top: 0; }
  .steps { grid-template-columns: 1fr; }
  /* круг — только лёгкий «выглядывающий» угол справа-сверху, не залезает на заголовок */
  .svc-krug { width: 300px; right: -210px; top: 8px; }
  .price-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .form { padding: 24px 20px; }
  .form .obj--chat { width: 84px; top: -32px; right: -8px; }
  .cta .obj--trubka { display: none; }
  .island .obj--ladon { display: none; }
  .review { padding: 26px 24px; }
  .faq__q { font-size: var(--text-lg); }
  .section-head__sub, .cta__note { font-size: var(--text-md); }
  .marquee__item { font-size: var(--text-md); padding: 0 18px; }
}

@media (max-width: 479px) {
  :root { --h1-size: 32px; --h1-lh: 1.15; }
  .hero { padding: 120px 0 96px; }
  .m-main { padding: 28px 22px 28px; }
  .header__cta .btn--primary { display: none; }
  .cookie { border-radius: var(--r-md); flex-direction: column; align-items: stretch; text-align: center; }
}

/* узкие Android среднего класса (360px и ниже) — ТЗ 5.2 */
@media (max-width: 360px) {
  :root { --h1-size: 29px; --h2-size: 27px; --gutter-desktop: 16px; --gutter-mobile: 16px; }
  .hero { padding: 118px 0 92px; }
  /* язычок-папка не шире половины экрана, без переноса в 2 строки, шрифт не ниже 13px */
  .fold-tab { max-width: 62vw; padding: 0 16px; font-size: 13px; height: 42px; }
  .fold-tab::after { right: -20px; width: 20px; height: 20px;
    -webkit-mask: radial-gradient(circle 20px at 100% 0, transparent 99%, #000 100%);
            mask: radial-gradient(circle 20px at 100% 0, transparent 99%, #000 100%); }
  .btn { padding: 15px 20px; }
}