/* ---------- ОКБ «Тяжёлая Логика»: мобильный слой ----------

   Подключается последним, поэтому спорные места решаются в его пользу.
   Здесь только то, что касается телефонов и планшетов: касания вместо
   курсора, вырезы и «домашняя полоса» iPhone, адресная строка Safari,
   которая съедает 100vh, и вес анимаций на слабых GPU.

   Проверено на ширинах 320 / 375 / 414 / 768 px, в Safari (iOS) и
   Chrome (Android). Внешних файлов не тянет — как и весь остальной сайт. */


/* ---------- 1. Базовое поведение ---------- */

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

body {
  /* Горизонтальную качку отключаем, вертикальную (pull-to-refresh) оставляем. */
  overscroll-behavior-x: none;
}

/* Ни один элемент не должен уметь раздвинуть страницу вбок. clip, а не
   hidden: hidden на body ломает position: sticky внутри. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* Быстрый отклик на тап: без этого iOS ждёт 300 мс, не двойной ли это тап. */
a, button, input, select, textarea, label,
[role="button"], .w-dropdown-toggle, .hamburger-menu-mobile {
  touch-action: manipulation;
}

/* Серый прямоугольник Android поверх ссылок убираем, но взамен даём
   собственный отклик — иначе непонятно, засчиталось ли нажатие. */
@media (hover: none) and (pointer: coarse) {
  a, button, .w-dropdown-toggle, .hamburger-menu-mobile, .okb-switch {
    -webkit-tap-highlight-color: transparent;
  }
  .button-primary:active, .okb-button-ghost:active,
  .app-link:active, .post-item-readmore:active,
  .social-link:active, .okb-switch:active {
    transform: scale(.97);
    transition: transform .08s;
  }
  .accordion-header:active { opacity: .75; }

  /* Подсказки к иконкам стека висели на :hover — на телефоне они
     вспыхивали после тапа и не гасли. Имя узла показываем текстом. */
  .app-link[data-app]:after, .app-link[data-app]:hover:after { display: none; }
}

/* Пальцем в ссылку размером 20 px не попасть: минимум 44 px по Apple HIG.
   Ссылки внутри абзаца сюда не входят: им нельзя менять display, иначе
   строка рвётся в середине предложения. */
@media screen and (max-width: 767px) {
  .list-link-text, .menu-mobile-item-link, .social-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .list-link-item { margin-bottom: 0; }
  .footer-social-icon { grid-column-gap: 14px; }
  /* Ссылке в тексте увеличиваем только область промаха по вертикали. */
  .copyright-link { padding: 6px 0; }
}


/* ---------- 2. Вырезы, «чёлка» и домашняя полоса ---------- */

/* Шапка, подвал и всё, что прижато к краям, отступает на величину
   безопасной зоны. На телефонах без выреза env() равен нулю. */
.header-container,
.footer-bottom,
.section-footer-top,
.section-footer-middle {
  padding-left: max(15px, env(safe-area-inset-left));
  padding-right: max(15px, env(safe-area-inset-right));
}

.main-footer { padding-bottom: env(safe-area-inset-bottom); }

/* Выдвижное меню: 100vh в Safari выше видимой области, низ списка
   уезжал под панель браузера. dvh считает по фактической высоте. */
.header-mobile { height: 100vh; height: 100dvh; }
.header-mobile-inner {
  height: 100vh; height: 100dvh;
  padding-top: max(30px, env(safe-area-inset-top));
  padding-bottom: max(30px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* прокрутка меню не тянет за собой страницу */
}


/* ---------- 3. Выдвижное меню: затемнение и закрытие ---------- */

/* z-index 998, а не 999: шапка шаблона — это отдельный слой (999), и внутри
   неё лежит само выдвижное меню. Затемнение с большим номером ложилось
   поверх меню и размывало его вместе со страницей. Размытие убрано совсем:
   на телефоне оно дорогое и читаемости не добавляло. */
.okb-menu-scrim {
  position: fixed; inset: 0; z-index: 998;
  background-color: rgba(4, 4, 10, .72);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
html.okb-menu-open .okb-menu-scrim { opacity: 1; visibility: visible; }
/* Пока меню открыто, страница под ним не прокручивается. */
html.okb-menu-open, html.okb-menu-open body { overflow: hidden; }

/* Логотип в шапке меню занимает всю ширину и подлезал под крестик:
   ограничиваем его шириной колонки и уменьшаем кегль — в меню он
   вспомогательный, крупная надпись там не нужна. */
.header-mobile-branding { padding-right: 52px; }
.header-mobile .header-logo, .header-mobile .link-logo { max-width: 100%; }
.header-mobile .text-logo { font-size: 18px; line-height: 1.25; }

.okb-menu-close {
  position: absolute; top: max(18px, env(safe-area-inset-top)); right: 14px;
  width: 44px; height: 44px; padding: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color--border-color-white-0-1);
  border-radius: 12px; background: none; color: #fff; cursor: pointer;
}
.okb-menu-close:before, .okb-menu-close:after {
  content: ""; position: absolute; width: 16px; height: 1.5px; background-color: currentColor;
}
.okb-menu-close:before { transform: rotate(45deg); }
.okb-menu-close:after { transform: rotate(-45deg); }


/* ---------- 4. Кнопка действия на телефоне ---------- */
/* Была панель во всю ширину с подписью в две строки. По итогам просмотра
   она перекрывала текст и путалась с содержимым, поэтому осталась одна
   кнопка в углу: она уезжает вниз, когда листают от себя, и возвращается,
   когда листают обратно. Возле подвала, где своя такая же кнопка, прячется. */

.okb-mobile-bar {
  position: fixed; right: 14px; left: auto;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 9995;                     /* выше донесений режима СОЮЗ */
  display: none;
  transform: translateY(180%); transition: transform .28s ease;
}
.okb-mobile-bar.is-on { transform: translateY(0); }
.okb-mobile-bar.is-hidden { transform: translateY(180%); }
.okb-mobile-bar .button-primary {
  line-height: 48px; padding-left: 22px; padding-right: 22px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
/* Подпись держим в одну строку: в режиме СОЮЗ она длиннее
   («вызвать инженерную бригаду») и иначе разваливает кнопку на две. */
.okb-mobile-bar .button-text { white-space: nowrap; }

@media screen and (max-width: 767px) {
  .okb-mobile-bar { display: block; }
  /* чтобы кнопка не легла на копирайт в самом низу */
  .footer-bottom { padding-bottom: 84px; }
}
/* Пока меню открыто, кнопка не мешает. */
html.okb-menu-open .okb-mobile-bar { transform: translateY(180%); }


/* ---------- 4а. Кнопка «наверх» ---------- */
/* Страница длинная; на телефоне подниматься к меню пальцем — отдельное
   упражнение. Кнопка появляется после первого экрана с небольшим запасом. */

.okb-totop {
  position: fixed; right: 14px; z-index: 9994;
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color--border-color-white-0-2);
  border-radius: 50%; cursor: pointer;
  background-color: rgba(12, 12, 22, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--_color---base-color--white);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, border-color .2s;
}
.okb-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.okb-totop:hover, .okb-totop:focus-visible { border-color: var(--_color---theme-color--secondary); }
.okb-totop svg { width: 20px; height: 20px; }

/* На телефоне под ней стоит кнопка «запросить демо» — поднимаем над ней. */
@media screen and (max-width: 767px) {
  .okb-totop { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media screen and (min-width: 768px) {
  .okb-totop { right: 24px; bottom: 24px; }
}


/* ---------- 4б. Карточка «поставить на домашний экран» ---------- */
/* Android сам предлагает установить сайт как приложение — из-за манифеста.
   Показываем своё объяснение вместо молчаливой кнопки браузера: человек
   должен понимать, что ставит ярлык, а не программу. */

.okb-install {
  position: fixed; left: 12px; right: 12px; z-index: 9996;
  bottom: calc(12px + env(safe-area-inset-bottom));
  padding: 18px 20px;
  border: 1px solid var(--border-color--border-color-white-0-2);
  border-radius: var(--border-radius--broder-radius-14px);
  background-color: rgba(12, 12, 22, .97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  transform: translateY(140%); transition: transform .3s ease;
}
.okb-install.is-on { transform: translateY(0); }
.okb-install-title {
  color: var(--_color---base-color--white); font-size: 16px;
  font-weight: var(--_fonts---fonts-weight--medium); margin-bottom: 8px;
}
.okb-install-text { font-size: 13.5px; line-height: 155%; opacity: .72; }
.okb-install-actions { display: flex; grid-column-gap: 10px; margin-top: 16px; }
.okb-install-actions .button-primary { flex: 1; line-height: 44px; padding: 0 16px; }
.okb-install-no {
  flex: none; padding: 0 18px; line-height: 44px;
  border: 1px solid var(--border-color--border-color-white-0-2);
  border-radius: var(--border-radius--broder-radius-12px);
  background: none; color: var(--_color---base-color--white);
  font-family: inherit; font-size: 15px; cursor: pointer;
}
@media screen and (min-width: 768px) {
  .okb-install { left: auto; right: 20px; width: 380px; }
}


/* ---------- 5. Экономия батареи и кадров ---------- */

@media screen and (max-width: 767px) {
  /* Полупрозрачные пятна с большим blur — самое дорогое, что есть на
     странице, и на телефоне их всё равно почти не видно. */
  .circle-blur, .glowing-round-blur, .glowing-round-blur-wrap { display: none; }
  .glowing-rotate-wrap { opacity: .5; }

  /* Декоративные «частицы» из шаблона на узком экране только грузят сеть. */
  .particles-left-top, .particles-right-top,
  .particles-left-top-1, .particles-right-top-1 { display: none; }

  /* Дождевые капли в разделителе шапки уезжали за правый край. */
  .header-divider { overflow: hidden; }
}

/* Уважаем системную настройку «уменьшить движение»: она есть и в iOS,
   и в Android, и людей, которым от анимаций плохо, она реально бережёт. */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .okb-mobile-bar { transition: none; }
}


/* ---------- 6. Мелкие правки вёрстки на узких экранах ---------- */

@media screen and (max-width: 767px) {
  /* Кнопки первого экрана: в столбик и на всю ширину — пальцем удобнее. */
  .okb-hero-actions { flex-direction: column; align-items: stretch; }
  .okb-hero-actions .button-primary, .okb-hero-actions .okb-button-ghost { width: 100%; }

  /* Тарифная карточка: цена и подпись не должны разъезжаться. */
  .pricing-item-price { flex-wrap: wrap; }

  /* Длинные технические строки (RTX 5060 Ti 16 ГБ · 32 ГБ ОЗУ · NVMe 1 ТБ)
     переносим по словам, а не за край экрана. */
  .pricing-item-list div, .feature-description, .okb-scheme-text span {
    overflow-wrap: anywhere;
  }

  .okb-hub-cta .button-primary { width: 100%; }
}

@media screen and (max-width: 479px) {
  .heading-page-title { font-size: 34px; }
  .section-heading { font-size: 26px; }
  .okb-hero-note { font-size: 14px; }
}

/* Планшет в альбомной ориентации и складные телефоны: раскладка в две
   колонки помещается, но поля шаблона рассчитаны на десктоп. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .container, .container-lg { padding-left: 24px; padding-right: 24px; }
}


/* ---------- 7. Надзаголовок секции на узком экране ---------- */
/* .main-title + .sub-title лежат в одной строке inline-flex с nowrap.
   На 360 px строка длиннее экрана, и хвост уезжает за край — особенно
   в режиме СОЮЗ, где текст ещё и прописными с разрядкой. */
@media screen and (max-width: 600px) {
  .section-sub-title-inner {
    max-width: 100%; flex-wrap: wrap; justify-content: center;
    grid-row-gap: 4px; text-align: center;
  }
  .main-title, .sub-title { white-space: normal; }
  .sub-title { margin-left: 12px; }
}
@media screen and (max-width: 380px) {
  .sub-title { margin-left: 0; }
}