/* sayty-mhero.css — мобильный первый экран /sayty/ (≤768px).
   Подключается ПОСЛЕ sayty.css и только дополняет его мобильный оверрайд.
   Десктоп не трогаем: все новые элементы там скрыты, мокап работает
   штатным движком LUMEN. Классы .lab-* оставлены от превью /sayty/lab/,
   с которого этот экран переносился, — та же кодовая база на обеих страницах.

   Что делает превью на ≤768px:
   1. В мокапе браузера крутятся РЕАЛЬНЫЕ сайты клиентов вместо выдуманной кофейни.
   2. Под мокапом — имя клиента, ниша, город и ссылка «открыть сайт».
   3. Вилка цен двумя числами: стартовая (совпадает с рекламой) и реальный чек.
   4. Строка гарантии — влезает в сгиб.
   5. Cookie-плашка сжата: на проде она 273px и закрывает единственную кнопку. */

.lab-cap, .lab-price, .lab-guar { display: none; }

@media (max-width: 768px) {

  /* ── порядок первого экрана ──────────────────────────────────
     H1 → лид → мокап+подпись → цена → кнопка → гарантия      */
  .sy-hero__h1   { order: 1; }
  .sy-hero__lead { order: 2; margin-top: 10px !important; }
  .sy-hero__right{ order: 3; margin-top: 18px !important; flex-direction: column; align-items: center; }
  .lab-price     { order: 4; }
  .sy-hero__cta  { order: 5; margin-top: 12px !important; }
  .lab-guar      { order: 6; }

  /* мокап и подпись внутри правой колонки */
  /* ширина по колонке текста, а не фиксированные 500px: на 430px мокап был
     уже заголовка и висел с полями по 40px. 100% внутри zoom-элемента уже
     считается в его системе координат — делить на zoom не нужно. */
  .sy-mock { order: 1; width: 100% !important; }
  .lab-cap { order: 2; }

  /* кадр кейса почти целиком: 1024×581 при ширине мокапа 500 → 284px,
     срезаем низ до 270, чтобы строка гарантии осталась над сгибом Safari (659) */
  .sy-browser__view { height: 270px !important; background: #0b0f1a; }

  /* ── слой с реальным сайтом ── */
  .lab-shot { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; }
  /* кадры лежат стопкой друг на друге: в потоке виден был бы только первый,
     остальные уезжали бы за нижнюю границу окна браузера (overflow:hidden) */
  .lab-shot img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    display: block; opacity: 0;
    /* уходящий кадр гаснет с задержкой — иначе между ними мелькает пустой чёрный */
    transition: opacity .4s ease .16s;
  }
  .lab-shot img.is-on { opacity: 1; transition: opacity .4s ease; z-index: 2; }

  /* метка «живой сайт» — в правом нижнем углу: слева вверху она садилась
     ровно на логотип клиента и читалась как его собственный элемент */
  .lab-live {
    position: absolute; z-index: 4; right: 9px; bottom: 9px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(10, 14, 26, .78); backdrop-filter: blur(6px);
    border: 1px solid rgba(205, 255, 79, .34);
    font: 700 11px/1 var(--font-body, system-ui), sans-serif;
    color: var(--sy-l); letter-spacing: .01em; white-space: nowrap;
  }
  .lab-live i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--sy-l);
    box-shadow: 0 0 0 0 rgba(205, 255, 79, .55); animation: labPulse 2.4s ease-out infinite;
  }
  @keyframes labPulse {
    0%   { box-shadow: 0 0 0 0 rgba(205, 255, 79, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(205, 255, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(205, 255, 79, 0); }
  }

  /* полоса загрузки в адресной строке — «перешли на следующий сайт» */
  .lab-prog {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
    background: var(--sy-l); opacity: 0; z-index: 5;
  }
  .lab-prog.is-run { animation: labLoad .62s cubic-bezier(.35, .7, .3, 1) both; }
  @keyframes labLoad {
    0%   { width: 0;    opacity: 1; }
    82%  { width: 88%;  opacity: 1; }
    100% { width: 100%; opacity: 0; }
  }
  .sy-browser__bar { position: relative; }
  .sy-browser__url { transition: opacity .2s ease; }

  /* ── курсор: обёртка ведёт (долгое плавное перемещение), стрелка нажимает
       (короткий scale). Одним элементом нельзя — transform там один, а движение
       и клик должны идти с разной длительностью и разным ускорением. ── */
  .lab-cur {
    position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
    opacity: 0;
    /* ease-out как у руки: быстро стартует, мягко доводит к кнопке */
    transition: transform 1.05s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
  }
  .lab-cur.is-on { opacity: 1; }
  .lab-cur .sy-cursor {
    position: static !important; display: block; transform: none;
    transition: transform .16s cubic-bezier(.3, 0, .2, 1);
  }
  .lab-cur.press .sy-cursor { transform: scale(.78); }

  /* отклик на нажатие — круг расходится из точки клика */
  /* сам контейнер пустой и невидимый — круг существует только в момент клика,
     иначе opacity:0 на родителе погасил бы и анимацию внутри него */
  .lab-ripple {
    position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
    width: 20px; height: 20px; margin: -10px 0 0 -10px;
  }
  .lab-ripple.go::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .92);
    animation: labRipple .58s cubic-bezier(.2, .7, .3, 1) both;
  }
  @keyframes labRipple {
    0%   { transform: scale(.45); opacity: .95; }
    100% { transform: scale(2.7);  opacity: 0; }
  }

  /* ── подпись под мокапом: кто это и куда ведёт ── */
  .lab-cap { display: block; margin-top: 11px; width: 100%; }
  .lab-cap__l {
    display: flex; align-items: baseline; gap: 7px; justify-content: center;
    text-decoration: none; color: var(--sy-txt); font-size: 13px; line-height: 1.25;
  }
  .lab-cap__l b { font-weight: 700; letter-spacing: -.01em; }
  .lab-cap__l span { color: var(--sy-mut); font-size: 12.5px; }
  .lab-cap__go {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--sy-l) !important; font-size: 12px !important; font-weight: 600; white-space: nowrap;
  }

  /* ── вилка цен: стартовая как в рекламе + реальный чек ── */
  .lab-price {
    display: flex; flex-direction: column; gap: 5px;
    margin-top: 15px; width: 100%;
  }
  .lab-price__i {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 13px; color: var(--sy-mut); line-height: 1.2;
  }
  .lab-price__i b {
    font-weight: 700; font-size: 15px; color: var(--sy-txt);
    /* ₽ нет ни в одном нашем woff2 (проверено fontTools) — символ всё равно
       рисуется системным шрифтом. Чуть уплотняем, чтобы стык не бросался. */
    letter-spacing: -.015em; font-variant-numeric: tabular-nums;
    min-width: 104px;
  }

  /* ── гарантия одной строкой ── */
  .lab-guar {
    display: block; order: 6; margin-top: 9px;
    font-size: 11.5px; white-space: nowrap; color: var(--sy-mut2); line-height: 1.35;
  }

  /* кнопка на всю ширину — палец попадает без прицеливания */
  .sy-hero__cta { width: 100%; }
  .sy-hero__cta .sy-btn--main { width: 100%; justify-content: center; }

  /* ── cookie: на проде 273px и закрывает единственную кнопку.
       Логику согласия не трогаем — только габариты. ── */
  .uq-cookie {
    padding: 12px 14px !important; border-radius: 14px !important;
    font-family: var(--font-body, system-ui), sans-serif !important;
  }
  .uq-cookie__text {
    font-size: 12.5px !important; line-height: 1.4 !important; margin: 0 0 10px !important;
  }
  .uq-cookie__row { flex-wrap: nowrap !important; gap: 8px !important; }
  .uq-cookie__btn {
    padding: 9px 10px !important; font: 600 12.5px/1 var(--font-body, system-ui), sans-serif !important;
  }
}

/* Узкие Android (360×640): при тех же размерах строка гарантии уезжала на 663
   при сгибе 640. Отбираем 26px у кадра и отступов — порядок экрана не меняется. */
@media (max-width: 374px) {
  .sy-browser__view { height: 250px !important; }
  .sy-hero__right   { margin-top: 12px !important; }
  .sy-hero__lead    { font-size: 14px !important; }
  .lab-price        { margin-top: 12px; }
  .lab-cap          { margin-top: 9px; }
  .lab-guar         { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   МОБИЛКА: сжатие полотна. Замер до правки — 21,3 экрана на 390px,
   причём три самые длинные секции шли вообще без единой картинки.
   Десктоп не трогаем ни в одном правиле ниже.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Портфолио: сразу видны Dragon + две работы, остальное по кнопке ── */
  /* Свёрнутые работы не выдёргиваем из потока рывком: они схлопываются
     по высоте и гаснут, а разворачиваются каскадом (см. .is-in-fold ниже). */
  .sy-pf__grid .sy-pf:nth-child(n+4) {
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .sy-pf__grid.is-fold .sy-pf:nth-child(n+4) {
    opacity: 0; transform: translateY(-8px) scale(.98);
    height: 0; margin: 0; padding: 0; border-width: 0;
    overflow: hidden; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, height .3s cubic-bezier(.4,0,.2,1) .04s,
                padding .3s cubic-bezier(.4,0,.2,1) .04s, margin .3s ease .04s;
  }

  .sy-more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 14px; padding: 15px 18px;
    border: 1px solid var(--sy-line); border-radius: 14px;
    background: rgba(255, 255, 255, .03); color: var(--sy-txt);
    font: 600 14px/1 var(--font-body, system-ui), sans-serif; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sy-more:active { background: rgba(255, 255, 255, .06); }
  .sy-more b { color: var(--sy-l); font-weight: 700; }
  .sy-more svg { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .sy-more.is-open svg { transform: rotate(180deg); }

  /* ── «Вы получаете»: было 4 карточки в столбик с абзацами описаний
       (1,6 экрана, ноль графики) → плитки 2×2, иконка крупная, текст один ── */
  .sy-get__grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .sy-get { padding: 15px 13px 16px !important; }
  .sy-get__d { display: none !important; }
  .sy-get__n { font-size: 11px !important; opacity: .5; }
  .sy-get__ic { width: 34px !important; height: 34px !important; margin: 9px 0 10px !important; }
  .sy-get__ic svg { width: 18px; height: 18px; }
  .sy-get__t { font-size: 14px !important; line-height: 1.25 !important; }

  /* ── Цены: у каждой карточки был список из пяти пунктов и своя кнопка.
       Список — под «что входит», кнопка остаётся только у «Хита» ── */
  .sy-pcard { padding: 18px 16px !important; }
  .sy-pcard__who { font-size: 12.5px !important; line-height: 1.35 !important; }
  .sy-pcard:not(.sy-pcard--flag) .sy-pcard__cta { display: none !important; }

  .sy-spoil {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--sy-l); font: 600 12.5px/1 var(--font-body, system-ui), sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  .sy-spoil svg { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .sy-pcard.is-open .sy-spoil svg { transform: rotate(180deg); }
}

/* Воздух между секциями: на 390px переменные упирались в нижнюю границу clamp
   и давали по 80px сверху и снизу на каждую из одиннадцати секций — 2,7 экрана
   чистых отступов, больше чем весь первый экран. Плюс 44px под каждый заголовок. */
@media (max-width: 768px) {
  /* section-y на мобилке и так был 50px — трогать его смысла нет,
     а вот 44px под каждым заголовком по всей странице стоили ~0,7 экрана */
  .sy-head { margin-bottom: 28px !important; }
  .sy-h2 { font-size: 25px !important; line-height: 1.12 !important; }
  .sy-sub { font-size: 14px !important; line-height: 1.45 !important; }
}

/* Три блока, где на мобилке шёл сплошной текст без графики.
   Режем типографику и воздух, содержание не трогаем. */
@media (max-width: 768px) {

  /* Эмо-блок перед формой — 576px одного текста */
  .sy-emo { margin-bottom: 18px !important; }
  .sy-emo__pain { gap: 8px !important; margin-bottom: 12px !important; }
  .sy-emo__x { font-size: 12.5px !important; padding: 6px 11px !important; }
  .sy-emo__turn { font-size: 14px !important; margin-bottom: 8px !important; }
  .sy-emo__head { font-size: 21px !important; margin-bottom: 10px !important; }
  .sy-emo__sub { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 14px !important; }
  .sy-emo__proof { font-size: 12.5px !important; gap: 8px !important; margin-bottom: 12px !important; }
  .sy-emo__funnel { height: 22px !important; margin-top: 14px !important; }

  /* Карточки «наш офис» и «работаем по договору» */
  .sy-real__card { padding: 16px 15px !important; }
  .sy-real__title { font-size: 16.5px !important; margin-bottom: 9px !important; }
  .sy-real__link { padding-top: 12px !important; font-size: 13px !important; }
  .sy-real__grid { gap: 11px !important; margin-top: 24px !important; }

  /* Карточки команды: портрет 13/16 давал по 204px на человека. Квадрат 1/1
     оказался хуже — подпись с именем и ролью (62px) ложится поверх фото и при
     стороне 107px закрывала само лицо. 4/5 оставляет лицо целиком видимым. */
  .sy-tm__ph { aspect-ratio: 4 / 5 !important; object-position: center 12% !important; }
  .sy-team__grid { margin-top: 22px !important; }
  .sy-team__mid { margin-top: 26px !important; }
}

@media (max-width: 768px) {
  /* Раскрытие: grid 0fr→1fr. Высота едет сама, без max-height, который
     дёргается, когда внутри догружаются картинки. */
  .sy-foldw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1); }
  .sy-foldw > * { overflow: hidden; min-height: 0; opacity: .001; transition: opacity .32s ease; }
  .sy-foldw.is-open { grid-template-rows: 1fr; }
  .sy-foldw.is-open > * { opacity: 1; transition-delay: .12s; }

  /* Работы из-под кнопки проявляются каскадом, а не выпрыгивают разом */
  .sy-pf.is-in-fold { animation: syCardIn .45s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes syCardIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }

  /* Списки в тарифах и текст сравнения — без резких скачков */
  .sy-pcard__list { display: block; margin: 0; }
  .sy-spoil { margin-bottom: 2px; }
}

@media (max-width: 768px) {
  /* Мокап качался по вертикали (syFloatY, ±8px) — из-за этого нижняя строка
     hero то влезала в сгиб Safari (639), то выходила за него (663).
     На мобилке качание не читается, а стабильная геометрия важнее. */
  .sy-mock { animation: none !important; }
}

@media (max-width: 768px) {
  /* Команда снова на виду — это лица, а не текст. Но три в ряд вместо двух:
     восемь человек в две колонки занимали 694px, в три укладываются вдвое короче. */
  .sy-team__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  /* подпись компактнее и с более коротким градиентом — не наезжает на лицо */
  .sy-tm__cap { padding: 22px 8px 8px !important; }
  .sy-tm__cap b { font-size: 11.5px !important; line-height: 1.15 !important; }
  .sy-tm__cap span { font-size: 9.5px !important; line-height: 1.2 !important; }
  .sy-tm__cap { background: linear-gradient(transparent, rgba(7,10,18,.62) 42%, rgba(7,10,18,.94)) !important; }
}