/* ============================================================
   VELORA — мобильный слой
   Подключается ПОСЛЕ style.css / auth.css и только дополняет их.

   Границы:
     ≤ 1024px  планшеты
     ≤  620px  телефоны — основная мобильная вёрстка
     ≤  380px  компактные телефоны (iPhone SE, старые Android)
     pointer:coarse          любой сенсорный экран, независимо от ширины
     landscape + низкий экран  телефон боком
   ============================================================ */

/* ---------- 1. База: вырезы и якоря ---------- */
:root{
  /* отступы под вырез и домашнюю полоску; на обычных экранах равны нулю */
  --sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);
}

html{
  /* Safari увеличивает шрифт при повороте — запрещаем */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}

/* в первом экране плавающая кнопка связи ложилась поверх «Попробовать»:
   на телефоне и в горизонтальной ориентации прячем её до прокрутки */
.fab{transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.3,1)}
.fab.is-away{opacity:0;transform:translateY(14px) scale(.85);pointer-events:none}

@media (max-width:1024px){
  /* переход по якорю не должен заезжать под липкую шапку */
  section[id]{scroll-margin-top:calc(var(--h) + 12px)}
  /* серая вспышка по тапу мешает — у элементов есть свои состояния */
  a,button,label,summary{-webkit-tap-highlight-color:transparent}
}

/* ---------- 2. Сенсорные экраны ---------- */
/* hover на тач-устройстве залипает после тапа: подъёмы и сдвиги убираем,
   оставляя только смену цвета и обводки */
@media (hover:none),(pointer:coarse){
  .btn:hover,.pcard:hover,.mod:hover,.plan:hover,.modcard:hover,
  .trk:hover,.aopt:hover,.popt:hover,.pplan:hover,.pmod:hover,
  .pmore:hover{transform:none}
  .btn:active{transform:scale(.985)}

  /* пальцем нужно не меньше ~44px — добираем невидимой зоной нажатия */
  .burger,.brand__dots{position:relative}
  .burger::after,.brand__dots::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;
  }
  .geochip,.lang__btn,.dnav__i,.dnav__s{min-height:38px}
  .track__link,.alink,.askip{min-height:34px;display:inline-flex;align-items:center}
  /* ссылки внутри абзаца нельзя растягивать — даём запас по вертикали */
  .auth__legal a,.foot__note a{padding-block:6px}
  .qa__q{min-height:52px}
  .pay{min-width:34px;min-height:34px}
}

/* ---------- 2б. Мобильное меню ---------- */
/* Было: панель высотой по содержимому, под ней просвечивал и прокручивался
   первый экран. Теперь меню занимает весь экран под шапкой, а страница
   под ним зафиксирована. */
@media (max-width:900px){
  .nav.is-open{
    /* высоту задаём явно: dvh учитывает адресную строку мобильного браузера */
    top:var(--h);height:calc(100dvh - var(--h));max-height:none;
    overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
    background:#0b0e0b;z-index:55;
  }
  body.nav-open{overflow:hidden}
  /* плавающая кнопка связи не должна висеть поверх открытого меню */
  body.nav-open .fab{opacity:0;pointer-events:none}
}

/* ---------- 3. Планшеты ---------- */
@media (max-width:1024px) and (min-width:621px){
  .pplans{grid-template-columns:1fr 1fr}
  .pplans > .pplan:last-child{grid-column:1 / -1}
  .popts{grid-template-columns:1fr 1fr}
}

/* ============================================================
   4. ТЕЛЕФОНЫ (≤620px)
   ============================================================ */
@media (max-width:620px){

  /* --- 4.1 Каркас --- */
  :root{--h:62px}
  .hdr.is-stuck{height:56px}
  .wrap{padding-left:max(16px,var(--sa-l));padding-right:max(16px,var(--sa-r))}
  .sec{padding:clamp(40px,11vw,64px) 0}

  /* --- 4.2 Типографика: заголовки уходили в пять строк --- */
  .hero__title{font-size:clamp(27px,8.4vw,38px);line-height:1.1;letter-spacing:-.02em}
  .h2{font-size:clamp(23px,6.6vw,30px);line-height:1.15}
  .lead{font-size:15px;line-height:1.5;margin-bottom:28px}

  /* --- 4.3 Шапка --- */
  .logo--img img{height:28px}

  /* --- 4.4 Первый экран --- */
  /* 100vh на мобиле считается без адресной строки и обрезает кнопки */
  .hero{min-height:auto;padding:calc(var(--h) + 34px) 0 54px}
  .hero__sub{font-size:14px;line-height:1.55}
  /* кнопки одной ширины в столбик — удобнее попадать большим пальцем */
  .hero__cta{flex-direction:column;align-items:stretch;gap:10px;max-width:264px;margin:0 auto}
  .hero__cta .btn{width:100%;--pad:14px 20px}

  /* --- 4.5 Кнопка связи: меньше и выше домашней полоски --- */
  .fab{right:max(14px,var(--sa-r));bottom:calc(14px + var(--sa-b));gap:8px}
  .fab__b{width:50px;height:50px}
  .fab__i{width:42px;height:42px}
  .fab__i svg{width:19px;height:19px}
  .fab__i--sup img{width:34px;height:34px}

  /* --- 4.6 Иллюстрации модулей: текст был 7–9px, нечитаемо --- */
  .tl,.tl__p,.scan__out,.mod__st,.winbar em,.px-set li{font-size:11px;line-height:1.45}
  .tl__t,.winbar b,.code__bar em{font-size:10.5px}
  .scan__list b{font-size:11px}
  .scan__list u{font-size:10px}
  .api__code{font-size:10.5px;line-height:1.5}
  .brand__cap{font-size:10.5px}
  .svc__now{font-size:10px}
  .mod__t{font-size:19px}
  .mod__p{font-size:12.5px}
  /* подписи и бейджи шли по 8,5–9,5px — на телефоне это уже нечитаемо.
     Метки оси графика (.dchart__x) не трогаем: их восемь в ряд, они рассыплются. */
  .dmini em,.dmini i,.dkpi i,.px-set b,.promo__lb,
  .step__time,.step__more-t,.modcard__tag,.pbadge,
  .tick__lb,.plan__badge,.plans__pay-lb,.foot__pay-lb{font-size:10.5px}

  /* --- 4.6б Шапка окна MCP-агента --- */
  /* «Агент подключён» и «5 сервисов · 1 команда» не помещались в строку
     и ломались на два ряда, раздувая полосу вдвое */
  .fut__meta{display:none}
  .fut__who{white-space:nowrap}
  .fut__dots{padding-right:10px}

  /* --- 4.6б2 Карточки метрик --- */
  /* «Заблокированные» — одно длинное слово: при двух колонках оно не влезало
     и заезжало под иконку в углу. Разрешаем переносить и ужимаем иконку. */
  .dkpi em{overflow-wrap:anywhere;padding-right:24px;line-height:1.3}
  .dkpi__i{width:20px;height:20px;right:9px;top:9px;border-radius:6px}
  .dkpi__i svg{width:11px;height:11px}
  .dmini em,.dmini i{overflow-wrap:anywhere}

  /* --- 4.6в Меню демо-панели прокручивается вбок --- */
  /* без подсказки не видно, что за краем есть ещё пункты */
  .dash__side{position:relative;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .dash__side > *{scroll-snap-align:start}
  .dash__body{position:relative}
  .dash__body::before{
    content:"";position:absolute;top:0;right:0;width:34px;height:46px;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,transparent,#090b09 75%);
  }

  /* --- 4.7 Трекеры --- */
  .trk{padding:16px}

  /* --- 4.8 Страница авторизации --- */
  /* поля формы: 16px — порог, ниже которого iOS зумит страницу при фокусе */
  .ainp,.acode__i,.apass .ainp{font-size:16px}
  .auth__card{max-width:100%}
  .awel{margin-bottom:14px}

  /* --- 4.9 Мелочи --- */
  .tick__i{font-size:14px;padding:0 18px}
  .about__stats{gap:22px 10px}
  .step__p{font-size:13.5px}
}

/* ---------- 4б. Футер авторизации ---------- */
/* Прибитый к низу копирайт ложился поверх формы и на узком экране,
   и в горизонтальной ориентации. Отправляем его в конец страницы. */
@media (max-width:620px),(max-height:620px) and (orientation:landscape){
  .auth__bottom{
    position:static;justify-content:center;
    padding:22px 16px calc(18px + var(--sa-b));
    padding-right:calc(16px + 64px);
  }
  .auth__main{padding:10px 16px 28px}
  .authpage .fab{bottom:calc(14px + var(--sa-b))}
}

/* ---------- 5. Компактные телефоны ---------- */
@media (max-width:380px){
  .wrap{padding-left:max(14px,var(--sa-l));padding-right:max(14px,var(--sa-r))}
  .hero__title{font-size:26px}
  .h2{font-size:22px}
  .lead,.hero__sub{font-size:13.5px}
  .btn{--pad:13px 16px;font-size:12.5px}
  .btn--sm{--pad:9px 12px;font-size:11px}
  .logo--img img{height:26px}
  .fab__b{width:46px;height:46px}
  /* в меню экосистемы бейдж «Вы здесь» ужимал описание текущего сервиса,
     и строка обрезалась на самых узких экранах */
  .svc__desc{min-width:0;overflow-wrap:anywhere}
  .svc__now{padding:2px 6px;letter-spacing:.03em}
  .tick__i{font-size:13px;padding:0 14px}
}

/* ---------- 6. Телефон боком ---------- */
/* по высоте места мало: убираем крупные вертикальные отступы */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:calc(var(--h) + 20px) 0 32px}
  .sec{padding:34px 0}
  .lead{margin-bottom:22px}
  .hero__cta{flex-direction:row;max-width:none}
  .hero__cta .btn{width:auto}
  .fab{bottom:calc(10px + var(--sa-b))}
}