/* fix-mobile-hierarchy.css — иерархия текста, разделение блоков, центрирование первого экрана
   и блока «Как работаем» на телефоне (08.11, по правкам владельца).
   Только ≤767px. Ничего не удаляет — переопределяет размеры/цвета/отступы/начертание. Подключать ПОСЛЕ mobile-*.css. */

@media (max-width:767px){

  /* ======== 1. ПЕРВЫЙ ЭКРАН — текст по центру ======== */
  .hero .intro{display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero .intro__title{width:auto}
  /* монетка между заголовком и подзаголовком убрана — создавала визуальный шум */
  .hero .intro__coin{display:none}
  .hero .intro__lead{text-align:center;max-width:300px;margin-top:14px}
  /* кнопка: по содержимому, не во всю ширину; gap — зазор между текстом и иконкой */
  .hero .intro__cta{width:auto;max-width:300px;margin-top:26px;padding:0 10px 0 26px;gap:14px}
  .hero .intro__cta .btn__text{flex:0 1 auto;max-width:210px}
  .hero .intro__note{text-align:center}

  /* ======== 2. ИЕРАРХИЯ ТЕКСТА — заметный шаг между уровнями ======== */

  /* L1 — заголовки секций (яркие, крупные) */
  .intro__title{font-size:44px;line-height:1.02}
  .dirs__title,.cases__title,.final__title{font-size:36px;line-height:1.05;letter-spacing:-.2px}
  .proc__title{font-size:40px;line-height:1.04;letter-spacing:-.2px}  /* «Как работаем» — чуть крупнее */

  /* L3 — заголовки карточек и этапов: ярко-белые, но заметно мельче заголовка секции */
  .benefit__title,.svc__title,.case__title{color:#fff}
  .step__title{color:#fff;font-size:20px;line-height:24px}

  /* ======== ОПИСАНИЯ / ТЕКСТ — ВЕЗДЕ тонкое начертание (Inter 300) и прозрачность 50% ======== */
  .intro__lead,.intro__note,
  .dirs__lead,.cases__lead,.proc__lead,.final__lead,
  .benefit__text,.svc__value,.svc__list li,
  .case__res p,.step__text,.proc__foot-t{
    font-weight:300;color:rgba(255,255,255,.5)}
  /* benefit__text цвет перебивался более специфичным правилом mobile-top — гасим на той же специфичности */
  .benefits li:nth-child(n) .benefit__text{font-weight:300;color:rgba(255,255,255,.5)}

  /* размеры описаний: короткие подзаголовки секций — 17, тело/деки — 15, мелочь — 14 */
  .intro__lead,.dirs__lead,.cases__lead,.proc__lead{font-size:17px;line-height:1.5;margin-top:14px}
  .final__lead{font-size:15px;line-height:1.5;margin-top:14px}  /* длинный абзац — как тело, а не крупный лид */
  .benefit__text,.svc__value,.proc__foot-t{font-size:15px;line-height:1.5}
  .svc__list li,.case__res p,.step__text{font-size:14px;line-height:1.5}

  /* микроподписи — тоже тоньше и приглушены */
  .cmeta__niche,.case__res-l,.field__lbl,.cases__pick-t{font-weight:300;color:rgba(255,255,255,.5)}

  /* ======== 3. БЛОК «КАК РАБОТАЕМ» — левая колонка по центру ======== */
  .proc__side{text-align:center}
  .proc__lead{margin-left:auto;margin-right:auto;max-width:320px}
  .proc__lead{color:#fff}  /* подзаголовок «Как работаем» — белый (08.11) */
  .proc__foot-t{text-align:center}
  .proc__foot .btn--lg{width:auto;max-width:300px;padding:0 10px 0 26px;gap:14px}
  .proc__foot .btn--lg .btn__text{flex:0 1 auto;max-width:210px;text-align:center}

  /* ======== 5. 3D-ИКОНКИ НАПРАВЛЕНИЙ — вдвое мельче, свечение тише ========
     USE_FX=false → иконка это картинка .svc__img 180x149; на мобилке была в полный размер.
     Масштабируем весь блок иконки (картинка+halo+плитка) ×0.5 от левого-верха; дублируем на :hover,
     иначе тап по карточке (псевдо-hover на тач) сбрасывал transform и иконка подпрыгивала в полный размер. */
  .svc__icon,.svc:hover .svc__icon{transform:scale(.5);transform-origin:left top;top:-30px;left:0}
  .svc__halo,.svc:hover .svc__halo{opacity:.26}  /* ярое свечение первой (и прочих) приглушено */
  /* иконка уменьшилась, а .svc__top держал высоту 90px → провал до заголовка; ужимаем */
  .svc__top{height:48px}

  /* ======== 4. РАЗДЕЛЕНИЕ БЛОКОВ — тонкая линия сверху + воздух ======== */
  .dirs,.cases,.proc,.final{position:relative}
  .dirs::before,.cases::before,.proc::before,.final::before{
    content:"";position:absolute;left:16px;right:16px;top:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent 4%,rgba(255,255,255,.22) 50%,transparent 96%)}
  .dirs,.cases,.proc,.final{padding-top:54px}
}

/* ======== КЕЙСЫ: без тёмного прямоугольника-подложки под девайсами (моб./планшет <1280) ========
   На ПК (fix-pk-cases.css, min-width:1280) плашку уже убрали — девайсы стоят прямо на стекле карточки.
   Ниже 1280 оставалась тёмная плитка .case__media (градиент + рамка ::after), мокап «рос снизу» и обрезался её краем.
   Повторяем ПК-поведение: фон плитки и рамку убираем, композицию ужимаем так, чтобы окно+телефон влезли целиком. */
@media (max-width:1279px){
  .case .case__media,.case:nth-child(3n+2) .case__media,.case:nth-child(3n) .case__media{background:none}
  .case .case__media::after{display:none}
  /* окно слева сверху, телефон заходит справа снизу — всё внутри сцены, ничего не режется */
  .cases__grid .case .mk--desk.has-phone .mk-win{left:4cqw;top:5cqw;width:76cqw}
  .cases__grid .case .mk--desk:not(.has-phone) .mk-win{left:7cqw;top:4.5cqw;width:86cqw}
  .cases__grid .case .mk-phone--side{right:4cqw;top:15cqw;width:22cqw;--pw:22cqw}
  .cases__grid .case .mk--phones .mk-phone--front{left:50%;top:6cqw;width:33cqw;margin-left:-24cqw;--pw:33cqw}
  .cases__grid .case .mk--phones .mk-phone--back{left:50%;top:13cqw;width:29cqw;margin-left:5cqw;--pw:29cqw}
  /* скругление телефона пропорционально ширине --pw (как на ПК) */
  .cases__grid .case .mk-phone{padding:calc(var(--pw) * .04);border-radius:calc(var(--pw) * .2)}
  .cases__grid .case .mk-phone__scr{border-radius:calc(var(--pw) * .16)}
  .cases__grid .case .mk-phone__isl{top:calc(var(--pw) * .078);height:calc(var(--pw) * .07)}
}