/* Шапка сайта — по макету Figma «Navbar» (NavbarR.svg, 23.10.2026): тёмная строка 52u на отступе 37.5u, логотип с 94, меню Roboto 24 через 160 от логотипа,
   «Войти» с иконкой, кнопка «Купить eSIM» 194 × 52 до 1822. Подключается на всех страницах (base.html) после app.css, до стилей страниц:
   на главной, в каталоге и на странице страны шапка прозрачная поверх тёмного hero (липкая, при прокрутке — плашка), на остальных —
   сплошная плашка #121730 (`site-header-solid`); на странице страны без кнопки (`site-header-nobtn`, NavbarRR.svg). Здесь же шрифт Roboto
   и общие переменные макета (--u = ширина окна / 1920, app.js уточняет по clientWidth). Планшет и телефон — своя раскладка ниже. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/roboto-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/roboto-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/roboto-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/roboto-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/roboto-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/roboto-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/roboto-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/roboto-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/roboto-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/roboto-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

html { overflow-y: scroll; } /* полоса прокрутки всегда: clientWidth не меняется после загрузки — иначе масштаб --u «прыгает» (см. base.html) */
html:has(body.app-mode) { overflow-y: auto; } /* в мини-приложении Telegram — как обычно */
:root {
  --u: min(calc(100vw / 1920), 1px);
  --hm-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --hm-arial: Arial, "Helvetica Neue", Helvetica, var(--hm-font);
  --hm-mint: #51d8a2;
  --hm-navy: #121730;
  --hm-ink: #1c1c1c;
  --hm-page: #191a23;
  --hm-light: #e3edf5;
}

/* --- шапка на главной: прозрачная поверх тёмного hero, строка 52u на отступе 37.5u, контейнер 1729u --- */
.site-header-home { position: sticky; top: calc(24 * var(--u)); z-index: 30; background: transparent; border: 0; backdrop-filter: none; margin-top: calc(37.5 * var(--u)); margin-bottom: calc(-89.5 * var(--u)); font-family: var(--hm-font); } /* -89.5 = -(37.5 + 52): холст начинается с верха страницы; липкая — как раньше */
.site-header-home::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-24 * var(--u)); bottom: calc(-24 * var(--u)); background: rgba(18, 23, 48, .94); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s; z-index: -1; pointer-events: none; }
.site-header-home.is-stuck::before { opacity: 1; } /* плашка под прокрученной шапкой (100u); сама строка при прокрутке не меняется — те же размеры и места, что наверху */
.site-header-home .container { max-width: none; padding: 0 calc(98 * var(--u)) 0 calc(93.5 * var(--u)); height: calc(52 * var(--u)); gap: 0; } /* NavbarR.svg: логотип с 94, кнопка до 1822 (кадр макета 1917) */
.site-header-home .logo { font-size: calc(32 * var(--u)); font-weight: 800; letter-spacing: 0; color: #fff; gap: 0; line-height: 1.5; }
.site-header-home .logo span { color: #34d399; margin: 0 .25em; } /* «E» через 36.5 между «sim» (Navbar.svg) */
.site-header-home .nav { margin-left: calc(163 * var(--u)); gap: calc(49 * var(--u)); } /* NavbarR.svg: «Тарифы» с 395.6, между пунктами ≈ 51.5 по глифам */
.site-header-home .nav a { color: #fff; font-weight: 400; font-size: calc(24 * var(--u)); line-height: 1.5; white-space: nowrap; }
.site-header-home .nav a:hover { color: var(--hm-mint); }
.site-header-home .nav-actions { margin-left: auto; padding-left: calc(48 * var(--u)); gap: calc(40 * var(--u)); } /* не ближе 48u к меню; «Войти» → кнопка — 92 (Navbar.svg) */
.site-header-home .nav-actions .btn-ghost, .site-header-home .nav-actions .btn-outline { padding: 0; font-size: calc(24 * var(--u)); font-weight: 700; color: #fff; background: none; line-height: 1.5; margin: 0; gap: calc(20.5 * var(--u)); } /* Navbar.svg: «Войти» Bold 24, иконка 31 через 22.7 по глифам */
.site-header-home .nav-actions .btn-ghost::before { content: ""; width: calc(31 * var(--u)); height: calc(31 * var(--u)); background: currentColor; -webkit-mask: url(/static/img/home/icon-user.svg) center / contain no-repeat; mask: url(/static/img/home/icon-user.svg) center / contain no-repeat; }
.site-header-home .nav-actions .btn-outline { border: 0; }
.site-header-home .nav-actions .btn-primary { margin-left: calc(49 * var(--u)); } /* «Войти» с 1469.7, кнопка с 1628 (NavbarR.svg) */
.site-header-home .nav-actions .btn-outline ~ .btn-primary { margin-left: calc(16 * var(--u)); } /* админу (Мои eSIM + Админка) — теснее, чтобы меню влезло в 1920 */
.site-header-home .container:has(.btn-outline) .nav { margin-left: calc(100 * var(--u)); } /* и меню ближе к логотипу — иначе кнопка вылезает за 1822 */
.site-header-home .nav-actions .btn-outline::before { content: none; }
.site-header-home .nav-actions .btn-ghost:hover, .site-header-home .nav-actions .btn-outline:hover { color: var(--hm-mint); background: none; }
.site-header-home .nav-actions .btn-primary { width: calc(194 * var(--u)); height: calc(52 * var(--u)); padding: 0; font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.5; background: var(--hm-mint); color: #191a23; } /* 194 × 52, скругление 26, текст #191a23 (Navbar.svg) */
.site-header-home .nav-actions .btn-primary { transition: background .2s, box-shadow .2s, transform .2s; }
.site-header-home .nav-actions .btn-primary:hover { background: #3fcf95; box-shadow: 0 0 0 calc(1 * var(--u)) var(--hm-mint), 0 18px 40px rgba(81, 216, 162, .22); transform: translateY(calc(-2 * var(--u))); } /* «загорается», как карточки типов */
.site-header-home .burger { color: #fff; border-color: rgba(255, 255, 255, .35); }
.site-header-home .mobile-nav { background: #121730; border-top-color: rgba(255, 255, 255, .12); }
.site-header-home .mobile-nav a { color: #fff; border-bottom-color: rgba(255, 255, 255, .12); }
/* страницы без тёмного hero (FAQ, поддержка, оформление, кабинет…): та же строка на сплошной плашке 100u, контент начинается под ней */
.site-header-solid { top: 0; margin: 0; padding: calc(24 * var(--u)) 0; background: #121730; }
.site-header-solid::before { display: none; }
/* страница страны (NavbarRR.svg): без «Купить eSIM» — «Войти» у правого края */
.site-header-nobtn .nav-actions .btn-primary { display: none; }
:root { --header-h: calc(100 * var(--u)); } /* высота плашки — для липких панелей и прокрутки к якорям (app.css) */

/* ================= планшет и телефон (< 1024) ================= */
@media (max-width: 1023.98px) {
  :root { --header-h: 56px; }
  .site-header-home { top: 0; margin: 0; padding: .6rem 0; background: rgba(18, 23, 48, .94); backdrop-filter: blur(8px); }
  .site-header-home::before { display: none; }
  .site-header-home .container { padding: 0 1rem; height: auto; }
  .site-header-home .logo { font-size: 1.5rem; }
  .site-header-home .nav-actions .btn-primary { width: auto; height: auto; padding: .5rem .9rem; font-size: .95rem; margin-right: .5rem; }
  .site-header-home .burger { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; font-size: 0; color: transparent; background: url(/static/img/home/menu.png) center / 24px 24px no-repeat; } /* иконка меню — PNG дизайнера (menu-03, 48 × 48 = 24 в 2x) на планшете и телефоне */
}
@media (max-width: 639.98px) {
  :root { --header-h: 67px; }
  /* шапка: логотип 24, кнопка 122 × 33 / 15.2, бургер — голая иконка 24 */
  .site-header-home { padding: 0; }
  .site-header-home .container { height: 67px; padding: 0 20px; }
  .site-header-home .logo { position: relative; top: -2px; font-size: 24px; line-height: 28px; } /* макет: логотип на 17.66 при кнопке на 17 — чуть выше середины строки */
  .site-header-home .nav-actions { padding-left: 0; gap: 0; }
  .site-header-home .nav-actions .btn-primary { width: 122px; height: 33px; padding: 0; margin: 0 23px 0 0; font-size: 15.2px; line-height: 33px; }
  .site-header-home .burger { position: relative; top: .5px; } /* иконка 24 × 24 на 346/22 — PNG из общего правила планшета выше */
}