/* ===========================
   Mobile hotfix v5 — anti-overlap & layout sync
   =========================== */

/* динамическая высота шапки (исп-ся вашим скриптом) + якорные отступы */
:root{ --hdr: 64px; }
section, [id]{ scroll-margin-top: calc(var(--hdr) + 12px); }

/* --- Хедер в две строки без наложений --- */
@media (max-width: 860px){
  header { padding-bottom: 6px; margin-bottom: 6px; }  /* буфер под меню */

  /* контейнер шапки больше не фиксирован по высоте */
  header .bar{
    height:auto;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    row-gap:8px; padding-block:6px;
  }
  header .bar > *{ min-width:0; } /* чтобы элементы могли сжиматься */

  /* порядок: 1) логотип+бренд, 2) язык, 3) навигация целиком во вторую строку */
  header .bar > .row:first-child{ order:1; }
  header .bar > .row:last-child{ order:2; margin-left:auto; }
  header .bar nav{
    order:3; flex:1 1 100%;
    display:flex; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 0 4px;
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
  }
  header .bar nav::-webkit-scrollbar{ display:none; }
}

/* --- Брендинг ужимается, бейдж прячем --- */
header .bar > .row:first-child strong{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:48vw;
  font-size: clamp(.92rem, 2.8vw, 1rem);
  line-height:1.1;
}
@media (max-width:520px){
  .hidden-sm,
  header .bar > .row:first-child .badge{ display:none !important; }
  .logo{ width:32px; height:32px; border-radius:10px; }
  header .bar > .row:first-child strong{ max-width:60vw; }
}

/* --- Языковой селектор не толкает бренд --- */
#lang-switch{
  min-width:92px; max-width:42vw;
  text-overflow:ellipsis; overflow:hidden;
}
@media (max-width:360px){
  #lang-switch{ max-width:38vw; padding:8px 28px 8px 10px !important; }
}

/* --- «Пилюля» в hero никогда не наезжает --- */
.pill{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px){
  .pill{ white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
}

/* --- Заголовок в hero — ещё компактнее на сверхузких --- */
@media (max-width:380px){
  .hero h1{ font-size: clamp(22px, 6.8vw, 44px); line-height:1.12; margin-top:6px; }
}

/* --- Подстраховка: запрещаем нежелательные переносы жирных заголовков --- */
strong{ word-break:normal; hyphens:none; }


/* ===========================
   Mobile hotfix v4 — anti-overlap
   =========================== */

/* динамическая высота шапки по умолчанию */
:root{ --hdr: 64px; }

/* когда шапка занимает 2 строки — даём нижний буфер */
@media (max-width: 860px){
  header{ margin-bottom:12px; }
}

/* якорные секции не прячутся под шапкой */
section,
[id] { scroll-margin-top: calc(var(--hdr) + 12px); }

/* левый блок бренда ужимается и не ломает поток */
header .bar > .row:first-child{ min-width:0; flex:1 1 auto; }
header .bar > .row:first-child strong{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:48vw;
}

/* навигация во вторую строку — без наложений, со скроллом */
@media (max-width: 860px){
  header .bar{ flex-wrap:wrap; row-gap:8px; }
  header .bar nav{
    order:3; flex:1 1 100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  header .bar nav::-webkit-scrollbar{ display:none; }
  header .bar > .row:last-child{ order:2; margin-left:auto; }
}

/* «пилюля» в hero не наезжает и переносится */
.pill{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px){
  .pill{ white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
}

/* ещё компактнее заголовок на сверхузких как на скрине */
@media (max-width:380px){
  .hero h1{ font-size: clamp(22px, 6.8vw, 44px); line-height:1.12; margin-top:6px; }
}

/* ===========================
   Мобильные улучшения v2
   (поверх вашего CSS, ничего не ломает)
   =========================== */

/* A. Навбар: горизонтальный скролл + снап на мобилках */
.nav-scroll{
  display:flex; gap:8px; align-items:center;
}
@media (max-width: 860px){
  .nav-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
    padding-block:6px;
  }
  .nav-scroll::-webkit-scrollbar{ display:none; }
  .nav-scroll a{ white-space:nowrap; }
}

/* B. Шапка: компактнее и устойчивее к зуму */
@media (max-width: 420px){
  header .bar{ height:56px; }
  .logo{ width:32px;height:32px;border-radius:10px; }
  header strong{ font-size:.95rem; }
}

/* C. «Пилюля» в hero — не наезжает и переносится */
.pill{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width: 560px){
  .pill{
    white-space:normal;
    line-height:1.35;
    word-break:keep-all;
    overflow-wrap:anywhere;
  }
}

/* D. Типографика hero: агрессивнее ужимаем на малых ширинах */
.hero h1{
  /* было clamp(32px, 4.8vw, 52px) — на узких экранах всё ещё крупно */
  font-size: clamp(24px, 6.4vw, 48px);
  line-height:1.12;
  letter-spacing:-0.2px;
  margin-top:8px;
}
.hero .subtitle{
  font-size: clamp(14px, 3.9vw, 17px);
  line-height:1.5;
  margin-top:8px;
}

/* E. CTA-кнопки: 100% ширина, равная высота, крупный таргет */
#download{ row-gap:10px; }
#download .btn{
  min-height:48px;
  flex:1 1 100%;
  width:100%;
  border-radius:14px;
}
#download .btn svg{ width:18px;height:18px; }
@media (min-width: 560px) and (max-width: 960px){
  /* на средних можно два в ряд */
  #download .btn{ flex:1 1 calc(50% - 6px); width:auto; }
  #download .btn.btn-ghost{ flex-basis:100%; }
}

/* F. Кликабельность: гасим «липкий» тап-хайлайт и расширяем hit-area */
a, button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.btn{ position:relative; }
.btn::after{
  /* невидимая подушка вокруг текста — удобнее пальцем */
  content:""; position:absolute; inset:-6px; border-radius:16px;
}

/* G. Карточки и мок-окна — плотнее на телефонах */
@media (max-width: 640px){
  .card-body{ padding:16px; }
  .shot .content{ padding:14px; }
  .skeleton.lg{ height:26px; }
  .skeleton.md{ height:12px; }
  .skeleton.box{ height:136px; }
}

/* H. Заголовки с inline-style: принудительный responsive без трогания HTML */
h2[style*="font-size"]{ font-size: clamp(20px, 5vw, 28px) !important; }
h3[style*="font-size"]{ font-size: clamp(18px, 4.4vw, 24px) !important; }

/* I. Языковой селектор — не прыгает и не вылазит за край */
#lang-switch{
  min-width:92px;
  max-width:40vw;
  text-overflow:ellipsis;
  overflow:hidden;
}
@media (max-width: 420px){
  #lang-switch{ padding:8px 28px 8px 10px !important; font-size:.85rem; }
}

/* J. Безопасные зоны (notch/динамик) и «липкий» header */
:root{
  /* базовые поля уже есть; добавим нижнюю safe-area для CTA */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
section:last-of-type .card{ margin-bottom: calc(8px + var(--safe-bottom)); }

/* K. Микродетали: аккуратные тени и границы на ретина */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
  .card, .shot, header{ border-color: rgba(255,255,255,.09); }
  .btn-outline{ border-color: rgba(255,255,255,.12); }
}

/* L. Навигация/футер: компактные интервалы и переносы */
footer nav a{ white-space:nowrap; }
@media (max-width: 560px){
  footer nav{ gap:10px !important; }
  footer nav a{ font-size:.86rem; }
}


/* ===========================
   Mobile hotfix v3 — header/brand/pill
   (добавить ПОВЕРХ текущих стилей)
   =========================== */

/* 1) Шапка: раскладываем в 2 строки и задаём порядок блоков */
@media (max-width: 860px){
  header .bar{
    display:flex; flex-wrap:wrap;
    align-items:center; justify-content:space-between;
    row-gap:8px; padding-block:6px;
  }
  /* nav уходит на вторую строку на всю ширину с горизонтальным скроллом */
  header .bar nav{
    order:3; flex: 1 1 100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
  }
  header .bar nav::-webkit-scrollbar{ display:none; }

  /* блок с селектором языка остаётся справа на первой строке */
  header .bar > .row:last-child{ order:2; margin-left:auto; }

  /* блок логотипа всегда первый */
  header .bar > .row:first-child{ order:1; min-width:0; }
}

/* 2) Брендинг: не ломать на слова, сжиматься и обрезаться эллипсисом */
header .bar > .row:first-child strong{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width: 48vw;            /* чтобы не съедал всё место */
  font-size: clamp(.92rem, 2.8vw, 1rem);
  line-height:1.1;
  flex:1 1 auto; min-width:0;
}
@media (max-width:420px){
  header .bar > .row:first-child .badge{ display:none; } /* убираем второстепенный бейдж */
  header .bar{ height:auto; }                             /* высота растёт под контент */
  .logo{ width:32px; height:32px; border-radius:10px; }
}

/* 3) Меню: защищаем от переносов и растягиваем hit-area */
header nav a{
  white-space:nowrap;
  padding:10px 12px;          /* удобный тап-таргет */
  display:inline-flex; align-items:center;
}

/* 4) Языковой переключатель: не «вылезает» и не толкает бренд */
#lang-switch{
  max-width:42vw; min-width:92px;
  text-overflow:ellipsis; overflow:hidden;
}
@media (max-width:360px){
  #lang-switch{ max-width:38vw; padding:8px 28px 8px 10px !important; }
}

/* 5) Hero-пилюля: всегда умещается и переносится в 2 строки */
.pill{
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:560px){
  .pill{ white-space:normal; line-height:1.35; overflow-wrap:anywhere; }
}

/* 6) Заголовок в hero: ещё на шаг компактнее на очень узких */
@media (max-width:380px){
  .hero h1{ font-size: clamp(22px, 6.8vw, 44px); line-height:1.12; margin-top:6px; }
  .hero .subtitle{ font-size: .98rem; }
}

/* 7) Подстраховка: не допускаем «вертикального» развала strong нигде */
strong{ word-break:normal; hyphens:none; }



/* -------------------------------------------------------
   PicoDock – Mobile Optimizations (iOS & Android)
   Ничего не удаляет, только дополняет/переопределяет
   ------------------------------------------------------- */

/* 0) Базовые совместимости мобильных браузеров */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  /* safe-area для iPhone с «чёлкой» */
  padding-top: env(safe-area-inset-top);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a, button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}

/* 1) Контейнер и шапка */
.container {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
header {
  top: env(safe-area-inset-top);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
header .row { height: 60px; }

/* 2) Типографика с адаптивной шкалой */
.hero h1 {
  /* -5%: от 26.6px до 53.2px, средняя 5.89vw */
  font-size: clamp(26.6px, 5.89vw, 53.2px);
  line-height: 1.15;
  margin-top: 12px;
}

/* Переопределяем инлайн-размеры заголовков через !important,
   чтобы не править HTML и не нарушить структуру. */
h2[style*="font-size"] { font-size: clamp(20px, 5.0vw, 28px) !important; }
h3[style*="font-size"] { font-size: clamp(18px, 4.6vw, 24px) !important; }

/* 3) Кнопки/бейджи: удобство касания */
.btn {
  min-height: 44px;           /* минимальный тап-таргет Apple */
  padding: 12px 14px;
}
.btn svg { width: 16px; height: 16px; }
.badge { font-size: .78rem; padding: .22rem .48rem; }

/* 4) Сетки и карточки на малых экранах */
@media (max-width: 960px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .row { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  /* кнопки в HERO — в столбик, на всю ширину */
  #download .btn { flex: 1 1 100%; width: 100%; }
  .card-body { padding: 16px; }
  .shot .content { padding: 14px; }
}

/* 5) «Макет-скриншот»: компактнее на телефонах */
.skeleton.lg { height: 28px; }
.skeleton.md { height: 14px; }
.skeleton.box { height: 140px; }
.skeleton.row div { height: 56px; }

/* 6) Иконки/логотип в шапке — меньше на узких */
@media (max-width: 430px) {
  .logo { width: 32px; height: 32px; border-radius: 10px; }
  nav a { margin: 0 10px; }
}

/* 7) Супер-узкие устройства (Android 360px и ниже, iPhone SE/5) */
@media (max-width: 360px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .badge { font-size: .72rem; }
  .btn { padding: 11px 12px; }
  .skeleton.box { height: 120px; }
}

/* 8) Минимальная поддержка 320px ширины */
@media (max-width: 320px) {
  .hero h1 { font-size: 24px; } /* дополнительно страхуемся */
  #download .btn { padding: 10px 12px; }
}

/* 9) Footer – перенос ссылок и выравнивание */
footer .container > .row { gap: 12px; }
footer nav a {
  display: inline-block;
  margin: 4px 8px 0 0;
  line-height: 1.4;
}

/* 10) Доступность: пользователь просит меньше анимаций */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 11) iOS Safari баг с position:sticky + blur: добавим «прослойку» */
@supports (-webkit-backdrop-filter: blur(0)) {
  header { background-color: rgba(11,18,32,.55); }
}

/* 12) Градиентный фон-акцент: мягче на телефонах, меньше блюр */
@media (max-width: 600px) {
  .bg-accent::before {
    width: 820px; height: 280px; top: -90px; filter: blur(56px); opacity:.3;
  }
}

/* 13) Мелкие правки читаемости */
.text-lg { font-size: 1.02rem; }
.text-sm { font-size: .88rem; }
.text-xs { font-size: .76rem; }
.muted { line-height: 1.5; }

/* 14) Поля ввода в форме лида — 100% ширины на телефонах */
@media (max-width: 640px) {
  #lead-form { gap: 8px !important; }
  #lead-form input { width: 100% !important; min-width: 0 !important; }
  #lead-form .btn { width: 100%; }
}

/* 15) Усиление границ на ретина-экранах (чёткие hairline) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card, .shot, header, footer, details { border-color: rgba(255,255,255,.08); }
}

/* ===== Language switcher ===== */
.lang { display:flex; align-items:center; gap:8px; }
.lang .globe { width:18px; height:18px; color:#94a3b8; }
.lang-select{
  appearance:none;
  background:#0b1325;
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
  font-weight:600;
  min-height:40px;
}
@media (max-width:640px){ .lang-select{ padding:10px 12px; width:auto; } }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* === FIX: показываем меню на мобилках (раньше .hidden-sm его прятал) === */
@media (max-width: 860px){
  /* шапка может занимать 2 строки */
  header .bar{
    height:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    row-gap:8px;
    padding-block:6px;
  }

  /* именно nav.hidden-sm делаем видимым */
  header .bar nav.hidden-sm{
    display:flex !important;          /* перебиваем скрытие */
    order:3;                          /* во вторую строку */
    flex:1 1 100%;
    gap:8px;

    overflow-x:auto;                  /* горизонтальная прокрутка */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 0 4px;
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
  }
  header .bar nav.hidden-sm::-webkit-scrollbar{ display:none; }

  /* кликабельные, не переносятся */
  header .bar nav.hidden-sm a{
    white-space:nowrap;
    padding:10px 12px;
  }

  /* левый блок бренда не расширяется сверх меры */
  header .bar > .row:first-child{
    min-width:0;
    flex:1 1 auto;
  }
  header .bar > .row:first-child strong{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:48vw;
  }
}

/* === MOBILE: stacked header без наложений на hero === */
@media (max-width: 860px){
  /* шапка может расти по контенту, строки не фиксируем */
  header .bar{ height:auto; padding-bottom:6px; }
  header .row{ height:auto; min-height:44px; } /* перебиваем старое height:60px */

  /* меню целиком во 2-ю строку со скроллом (как и раньше) */
  header .bar nav{
    order:3; flex:1 1 100%;
    display:flex; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 0 4px;
  }
  header .bar nav::-webkit-scrollbar{ display:none; }
  header .bar > .row:last-child{ order:2; margin-left:auto; }

  /* самое главное: отодвигаем контент на реальную высоту шапки */
  main{ padding-top: calc(var(--hdr) + 6px); }
  /* если отступ нужен только у первого блока, вместо строки выше можно:
     .hero{ margin-top: calc(var(--hdr) + 6px); } */
}

/* бренд не расползается на узких */
@media (max-width: 860px){
  header .bar > .row:first-child{
    min-width:0; flex:1 1 auto;
  }
  header .bar > .row:first-child strong{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48vw;
  }
}

/* ====== Mobile v6: header wrap + language label align ====== */

/* 2-строчная шапка на мобилке без наложений; навигация видна вся */
@media (max-width: 860px){
  header .bar{
    height:auto; display:flex; flex-wrap:wrap;
    align-items:center; justify-content:space-between;
    row-gap:8px; padding-block:6px;
  }
  /* nav во вторую строку и ПЕРЕНОС строк вместо горизонтального скролла */
  header .bar nav{
    order:3; flex:1 1 100%;
    display:flex !important; flex-wrap:wrap;
    gap:8px 10px; overflow:visible; padding:4px 0 0;
    mask-image:none;
  }
  header .bar nav a{ white-space:nowrap; }

  /* блок с языком остаётся справа в первой строке и ровно по базовой линии */
  header .bar > .row:last-child{ order:2; margin-left:auto; align-self:center; }

  /* перебиваем случайную фикс-высоту рядов от прежних патчей */
  header .row{ height:auto; min-height:44px; }
}

/* Подпись «Язык:» рядом с селектором */
.lang-label{
  color:var(--muted); font-weight:600; font-size:.9rem; line-height:1;
  white-space:nowrap;
}

/* Селектор языка: вертикальное выравнивание и стабильная ширина на узких */
.lang-select{
  padding:8px 34px 8px 12px; display:inline-flex; align-items:center;
  vertical-align:middle; max-width:42vw; text-overflow:ellipsis; overflow:hidden;
}
@media (max-width: 360px){
  .lang-select{ max-width:38vw; padding:8px 28px 8px 10px; }
}

/* Брендинг не расползается */
header .bar > .row:first-child{ min-width:0; flex:1 1 auto; }
header .bar > .row:first-child strong{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48vw;
}
@media (max-width:520px){
  .logo{ width:32px; height:32px; border-radius:10px; }
  header .bar > .row:first-child strong{ max-width:60vw; }
}

/* === Language label on top (desktop + mobile) === */
.lang{
  display:flex;                /* переопределяем "row" */
  flex-direction:column;       /* текст сверху, селектор снизу */
  align-items:flex-start;      /* выравнивание по левому краю блока */
  gap:4px;                     /* вертикальный зазор между подписью и select */
}

.lang-label{
  display:block;
  color:var(--muted);
  font-weight:600;
  font-size:.9rem;
  line-height:1.1;
  /* опционально чуть скруглим визуально отступ */
  padding-left:2px;
}

/* селектор остаётся компактным и не прыгает */
.lang-select{
  padding:8px 34px 8px 12px;
  max-width:42vw;
  text-overflow:ellipsis;
  overflow:hidden;
}
@media (max-width:360px){
  .lang-select{ max-width:38vw; padding:8px 28px 8px 10px; }
}

/* ===== Desktop: центр меню, язык справа ===== */
@media (min-width: 861px){
  header .bar{
    display:grid;                     /* вместо flex */
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    height:64px;                      /* сохраняем высоту */
  }

  /* левый блок (логотип+бренд) */
  header .bar > .row:first-child{
    grid-column:1; justify-self:start;
  }

  /* навигация по центру независимо от ширины языка/бренда */
  header .bar nav{
    grid-column:2; justify-self:center;
  }
  .nav-scroll{ justify-content:center; } /* группируем ссылки внутри */

  /* блок выбора языка у правого края */
  header .bar > .row:last-child{
    grid-column:3; justify-self:end;
  }
}


/* ===== Mobile v7 — меню над героем, язык рядом с логотипом ===== */
@media (max-width: 860px){
  /* небольшой нижний буфер у шапки, чтобы меню не «липло» к HERO */
  header{ padding-bottom:10px; margin-bottom:10px; }

  /* первая строка: бренд слева, язык справа; вторая — меню на всю ширину */
  header .bar{
    height:auto;
    display:grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand . lang"
      "nav   nav nav";
    align-items:center;
    column-gap:12px;
    row-gap:8px;
    padding-block:6px;
  }

  /* 1) Бренд (логотип + название) — слева */
  header .bar > .row:first-child{
    grid-area: brand;
    min-width:0;                 /* можно сжимать */
  }
  header .bar > .row:first-child strong{
    max-width:58vw;              /* чтобы оставалось место языку */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* 2) Язык — справа от бренда, в той же строке */
  header .bar > .row:last-child{
    grid-area: lang;
    justify-self:end;
    align-self:center;           /* ровно по базовой линии */
  }
  #lang-switch{
    min-width:92px;
    max-width:36vw;              /* узких экранов хватит, не толкает бренд */
    padding:8px 28px 8px 10px !important;
    text-overflow:ellipsis; overflow:hidden;
  }

  /* 3) Меню — целиком во вторую строку, без наложений, можно скроллить по оси X */
  header .bar nav{
    grid-area: nav;
    display:flex !important; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 0 0;             /* чуть вверх, чтобы визуально «выше» */
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
  }
  header .bar nav::-webkit-scrollbar{ display:none; }

  /* высоты рядов не фиксируем, чтобы шапка свободно росла */
  header .row{ height:auto; min-height:44px; }
}

/* ===== Desktop: меню по центру, язык справа (остается из прошлой правки) ===== */
@media (min-width: 861px){
  header .bar{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    height:64px;
  }
  header .bar > .row:first-child{ grid-column:1; justify-self:start; }
  header .bar nav{ grid-column:2; justify-self:center; }
  .nav-scroll{ justify-content:center; }
  header .bar > .row:last-child{ grid-column:3; justify-self:end; }
}

/* Разделитель снизу — под всем содержимым хедера (и меню тоже) */
header{ border-bottom:0; }
header .bar::after{
  content:"";
  display:block;
  height:1px;
  background:var(--line);
  margin-top:6px;        /* небольшой отступ от меню */
}

/* Мобилка: бренд + язык в первой строке, меню — на всю вторую строку.
   Хедер автоматически занимает 2 строки и ничего не наезжает. */
@media (max-width: 860px){
  header .bar{
    height:auto !important;              /* гарантируем, что нет фикс. 64px */
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "brand . lang"
      "nav   nav nav";
    column-gap:12px;
    row-gap:8px;
    padding-block:6px;
  }

  /* бренд слева */
  header .bar > .row:first-child{
    grid-area:brand;
    min-width:0;
  }
  header .bar > .row:first-child strong{
    max-width:58vw;                      /* чтобы не выталкивал селектор языка */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* язык справа */
  header .bar > .row:last-child{
    grid-area:lang;
    justify-self:end; align-self:center;
  }
  #lang-switch{
    min-width:92px;
    max-width:36vw;
    padding:8px 28px 8px 10px !important;
    text-overflow:ellipsis; overflow:hidden;
  }

  /* меню во вторую строку, со скроллом по X при необходимости */
  header .bar nav{
    grid-area:nav;
    display:flex !important;
    gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-top:2px;
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
  }
  header .bar nav::-webkit-scrollbar{ display:none; }

  /* строки внутри барa без фиксированной высоты */
  header .row{ height:auto; min-height:44px; }
}

/* ==========================================================================
   PicoDock — Mobile Responsive Layer (clean, production-ready)
   - Полная замена прежних mobile-hotfix блоков
   - Без изменения HTML. Только переопределения и адаптив.
   ========================================================================== */

/* ---- Базовые переменные и безопасные зоны ---- */
:root{
  --hdr: 64px;                                  /* высота шапки, обновляется вашим JS */
  --safe-bottom: env(safe-area-inset-bottom,0); /* нижняя safe-area для телефонов */
}

/* якорные секции не прячутся под sticky-header */
[id], section{ scroll-margin-top: calc(var(--hdr) + 12px); }

/* UX мелочи для мобильных */
a, button{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
strong{ word-break: normal; hyphens: none; }

/* четкие hairline-границы на ретина */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
  .card, .shot, header, footer, details { border-color: rgba(255,255,255,.08); }
}

/* предпочитаем меньше анимаций, если так просит ОС */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ========================================================================== */
/* ================     МОБИЛЬНАЯ ВЕРСТКА (≤ 860px)      ==================== */
/* ========================================================================== */
@media (max-width: 860px){

  /* ---- Шапка: 2 строки, ничего не налезает ---- */
  header{ padding-bottom:10px; margin-bottom:10px; } /* легкий буфер под меню */

  /* главный контейнер шапки растягивается под контент */
  header .bar{
    height:auto !important;                 /* переопределяем desktop height */
    min-height:64px;
    display:grid !important;
    grid-template-columns: auto 1fr auto;   /* бренд | свободное | язык */
    grid-template-rows: auto auto;          /* первая строка | меню */
    grid-template-areas:
      "brand . lang"
      "nav   nav nav";
    column-gap:12px;
    row-gap:8px;
    align-items:center;
    padding-block:6px;
  }

  /* Блок бренда слева */
  header .bar > .row:first-child{
    grid-area: brand;
    min-width:0;                             /* можно сжимать */
  }
  header .bar > .row:first-child strong{
    flex:1 1 auto; min-width:0;
    max-width:58vw;                          /* чтобы не выталкивал язык */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size: clamp(.92rem, 2.8vw, 1rem); line-height:1.1;
  }
  /* второстепенный бейдж у бренда прячем на узких */
  header .bar > .row:first-child .badge{ display:none !important; }
  .logo{ width:32px; height:32px; border-radius:10px; }

  /* Языковой селектор справа на первой строке */
  header .bar > .row:last-child{
    grid-area: lang;
    justify-self:end; align-self:center;
  }
  #lang-switch{
    min-width:92px; max-width:36vw;
    padding:8px 28px 8px 10px !important;
    text-overflow:ellipsis; overflow:hidden;
  }

  /* Меню — целиком во вторую строку; горизонтальный скролл при нехватке места */
  header .bar nav{
    grid-area: nav;
    display:flex !important; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 0 0;
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
  }
  header .bar nav::-webkit-scrollbar{ display:none; }
  header .bar nav a{
    white-space:nowrap;
    padding:10px 12px;                       /* удобный тап-таргет */
    display:inline-flex; align-items:center;
  }
  /* Если навигация была скрыта .hidden-sm — явно делаем её видимой */
  header .bar nav.hidden-sm{ display:flex !important; }

  /* внутренние .row в шапке без фиксированной высоты */
  header .row{ height:auto; min-height:44px; }

  /* ---- HERO ---- */
  .pill{
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* допускаем перенос пилюли на очень узких */
  @media (max-width:560px){
    .pill{ white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
  }
  .hero h1{
    font-size: clamp(24px, 6.4vw, 44px);
    line-height:1.12; margin-top:8px;
  }
  .hero .subtitle{
    font-size: clamp(14px, 3.9vw, 17px);
    line-height:1.45;
  }

  /* CTA-кнопки — в колонку и на всю ширину */
  #download{ row-gap:10px; }
  #download .btn{
    width:100%; min-height:48px; border-radius:14px;
  }

  /* ---- Сетки, карточки, мок-окна ---- */
  .grid-2, .grid-3{ grid-template-columns: 1fr !important; }
  .card-body{ padding:16px; }
  .shot .content{ padding:14px; }
  .skeleton.lg{ height:26px; }
  .skeleton.md{ height:12px; }
  .skeleton.box{ height:136px; }

  /* ---- Футер ---- */
  footer nav{ gap:10px !important; }
  footer nav a{ font-size:.86rem; white-space:nowrap; }

  /* нижний safe-отступ для последней карточки/CTA */
  section:last-of-type .card{ margin-bottom: calc(8px + var(--safe-bottom)); }
}

/* ========================================================================== */
/* ===== Дополнительные узкие брейкпоинты (точная подгонка типографики) ===== */
/* ========================================================================== */

@media (max-width: 420px){
  header strong{ font-size:.95rem; }
}

@media (max-width: 380px){
  .hero h1{ font-size: clamp(22px, 6.8vw, 42px); margin-top:6px; }
}

@media (max-width: 360px){
  /* компактный контейнер и селектор языка */
  .container{ padding-left:12px; padding-right:12px; }
  #lang-switch{ max-width:38vw; padding:8px 24px 8px 10px !important; }
}

@media (max-width: 320px){
  .hero h1{ font-size:22px; }
}

/* ========================================================================== */
/* ====================   ПРАВКИ ДЛЯ СРЕДНИХ ШИРИН (≤960px)  ================= */
/* ========================================================================== */

@media (min-width: 560px) and (max-width: 960px){
  /* две кнопки в ряд, «призрак» — на всю ширину */
  #download .btn{ flex:1 1 calc(50% - 6px); width:auto; }
  #download .btn.btn-ghost{ flex-basis:100%; }
}

/* ========================================================================== */
/* ====================  ДЕСКТОПНОЕ ВЫРАВНИВАНИЕ (≥861px)  =================== */
/* ========================================================================== */

@media (min-width: 861px){
  /* центрируем меню независимо от ширины блоков по краям */
  header .bar{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    height:64px;                      /* штатная высота на десктопе */
  }
  header .bar > .row:first-child{ grid-column:1; justify-self:start; }
  header .bar nav{ grid-column:2; justify-self:center; }
  header .bar > .row:last-child{ grid-column:3; justify-self:end; }
}

/* =========================================================
   Mobile top-gap fix — убираем пустое место под шапкой
   (добавить последним в CSS, чтобы перебить старые стили)
   ========================================================= */

@media (max-width: 860px){
  /* 1) Шапка остаётся липкой, но без лишнего буфера снизу */
  header{ padding-bottom:4px !important; margin-bottom:0 !important; }

  /* 2) Никаких искусственных отступов у основного контента */
  main{ padding-top:0 !important; }

  /* 3) Первый блок страницы (hero) — компактный верхний отступ */
  section:first-of-type,
  .hero{ padding-top:12px !important; }

  /* 4) Если рисуешь разделительную линию через ::after — без дополнительного зазора */
  header .bar::after{ margin-top:0 !important; }
}

/* 5) Сохраняем корректный якорный сдвиг под реальную высоту шапки */
:root{ --hdr: 64px; }
section, [id]{ scroll-margin-top: calc(var(--hdr) + 12px); }

/* 6) (Опционально) Убираем «резинку» сверху, чтобы при дотягивании к верхушке
      не появлялось пустое поле прокрутки на некоторых Android-браузерах. */
html, body{ overscroll-behavior-y: contain; }

/* === Header brand: one-line fix on mobile =================== */
/* Не даём первой строке шапки (logo + название) переноситься */
@media (max-width: 960px){
  /* отменяем wrap только внутри шапки */
  header .bar > .row{ flex-wrap: nowrap !important; }

  /* конкретно строка с логотипом и названием */
  header .bar > .row:first-child{
    align-items: center;
    gap: 12px;
    min-width: 0;                 /* разрешаем сжиматься контейнеру */
  }
  header .bar > .row:first-child > *{ flex: 0 0 auto; } /* логотип/бейдж — фикс. ширины */

  /* название ужимается и обрезается троеточием, оставаясь в ОДНУ линию */
  header .bar > .row:first-child strong{
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;              /* можно 58–60vw, чтобы не толкать селектор языка */
  }

  /* чтобы точно уместиться — прячем второстепенный бейдж на узких */
  @media (max-width: 520px){
    header .bar > .row:first-child .badge{ display: none !important; }
  }
}

/* === Brand fits on one line without truncation (mobile) === */
@media (max-width: 430px){
  /* название уменьшается плавно и получает больше места */
  header .bar > .row:first-child strong{
    font-size: clamp(.84rem, 4.8vw, .98rem);
    max-width: 64vw;                 /* было 58–60vw */
    letter-spacing: -.1px;
  }
  /* язык компактнее, чтобы не толкал бренд */
  #lang-switch{
    max-width: 32vw;                 /* было 36–42vw */
    padding: 6px 24px 6px 10px !important;
  }
  .logo{ width:30px; height:30px; }  /* немного меньше, чтобы освободить пиксели */
}

@media (max-width: 360px){
  /* ещё шаг ужатия на сверхузких */
  header .bar > .row:first-child strong{
    font-size: clamp(.80rem, 5.2vw, .96rem);
    max-width: 66vw;
  }
  #lang-switch{ max-width: 30vw; }
}

/* === Brand: no trimming, always one line (mobile) === */
@media (max-width: 860px){
  /* бренд получает всю левую часть, язык — авто-ширина справа */
  header .bar{
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand lang"
      "nav   nav" !important;
  }

  /* не переносим строку внутри блока бренда */
  header .bar > .row:first-child{ flex-wrap: nowrap !important; min-width: 0; }

  /* НИЧЕГО не обрезаем, только ужимаем шрифт, чтобы влезло */
  header .bar > .row:first-child strong{
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap;        /* одна строка */
    overflow: visible;          /* без скрытия */
    text-overflow: clip;        /* без троеточия */
    max-width: none;            /* убираем лимит ширины */
    font-size: clamp(.82rem, 4.6vw, 1rem); /* авто-подгон */
    letter-spacing: -.1px;
    line-height: 1.1;
  }

  /* чуть меньше логотип и селектор, чтобы освободить пиксели под бренд */
  .logo{ width:30px; height:30px; }

  #lang-switch{
    min-width:80px;             /* было 92px */
    max-width: 30vw;            /* было 36–42vw */
    padding: 6px 22px 6px 10px !important;
    text-overflow: clip; overflow: hidden;  /* внутри select'а — без «…» */
  }
}

/* сверхузкие — ещё шаг подгонки шрифта бренда */
@media (max-width: 360px){
  header .bar > .row:first-child strong{
    font-size: clamp(.78rem, 5.2vw, .96rem);
  }
  #lang-switch{ min-width:72px; max-width:28vw; }
}

/* ===== Terms/TOS modal ===== */
.tos-modal{ position:fixed; inset:0; z-index:1000; display:none; }
.tos-modal.show{ display:block; }
.tos-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.tos-dialog{
  position:relative; z-index:1;
  margin: min(8vh, 56px) auto;
  max-width: 720px;
  background: color-mix(in oklab, var(--surface) 96%, transparent);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 20px;
}
.tos-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.tos-body{ color:var(--text); line-height:1.45; }
.tos-body a{ color:var(--brand-2); text-decoration:underline; }
.tos-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
@media (max-width:560px){
  .tos-dialog{ margin: auto 12px; }
  .tos-actions{ flex-wrap:wrap; }
  .tos-actions .btn{ flex:1 1 100%; }
}

/* ===== Terms/TOS modal — полноэкранно и поверх всего ===== */
.tos-modal{
  position: fixed;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  z-index: 2147483647;      /* выше любых z-index на странице */
  display: none;
  width: 100vw;
  height: 100dvh;           /* корректная высота на мобилках */
}

/* показываем модалку */
.tos-modal.show{ display:block; }

/* фон-подложка */
.tos-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* окно */
.tos-dialog{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 720px);
  max-height: min(86dvh, 640px);
  overflow:auto;

  background: color-mix(in oklab, var(--surface) 96%, transparent);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* шапка/кнопки */
.tos-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.tos-body{ color:var(--text); line-height:1.45; }
.tos-body a{ color:var(--brand-2); text-decoration:underline; }
.tos-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }

/* блокируем фон при открытой модалке */
html.tos-locked, body.tos-locked{ overflow:hidden !important; }

/* мобильные правки */
@media (max-width:560px){
  .tos-dialog{ width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .tos-actions{ flex-wrap:wrap; }
  .tos-actions .btn{ flex:1 1 100%; }
}