/* ============================================================
   BigTraffic — компоненты
   Строятся только на переменных из tokens.css.
   Эти классы переиспользуются на всех страницах сайта.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}

/* --- Сетка --- */
.container {
  max-width: min(var(--container-max), 100vw);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
@media (max-width: 640px) {
  .container { padding-left: var(--container-pad-sm); padding-right: var(--container-pad-sm); }
}
@media (min-width: 640px) and (max-width: 1024px) {
  .container { padding-left: var(--container-pad-md); padding-right: var(--container-pad-md); }
}

/* --- Типографика --- */
.h1 {
  font-family: var(--font-display);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size-sm);
  line-height: var(--h1-lh-sm);
  letter-spacing: var(--h1-tracking);
  max-width: var(--measure-h1);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .h1 { font-size: var(--h1-size); line-height: var(--h1-lh); }
}
.text-primary { color: var(--c-primary); }

.lead {
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--c-ink-muted);
  max-width: var(--measure-text);
  margin-inline: auto;
}

/* Отдельные страницы начинаются сразу под фиксированной шапкой.
   На главной этот отступ даёт первый экран, здесь его брать неоткуда. */
.tech-body { padding-top: var(--header-h); }

/* --- Шапка --- */
/* Системный слой. Типографику задаём явно: страницы блога и кейсов меняют
   шрифт и межстрочный интервал у body, и без этого шапка на них выглядела иначе. */
.site-header, .site-footer {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  letter-spacing: normal;
}

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--c-header-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid rgba(227, 231, 237, .6);
}
.site-header .inner {
  /* Замер с боевого сайта: шапка живёт в своём контейнере 1200px с полями 16px,
     а не в широких полях страницы. Иначе логотип уезжает вправо, а кнопка
     вылезает за поле — правый и левый край шапки перестают совпадать. */
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  height: var(--header-h);
  display: flex; align-items: center;
}
.site-logo svg { height: 40px; width: auto; display: block; }

/* Свободное место стоит ПЕРЕД меню: меню, контакты и кнопка едут вправо одной
   группой — так же, как на боевом сайте. */
.main-nav { display: flex; align-items: center; margin-left: auto; }
.main-nav a {
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  color: var(--c-ink); text-decoration: none;
  padding: 10px 20px; border-radius: var(--radius-sm);
  white-space: nowrap; transition: color var(--transition), background var(--transition);
}
.main-nav a:hover { color: var(--c-primary); background: var(--c-primary-soft); }
/* Раскрывающееся меню услуг. Открывается по клику, а не по наведению:
   на телефоне наведения нет, а пункт «Услуги» сам по себе никуда не ведёт. */
.nav-drop { position: relative; }
.nav-drop-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: var(--text-sm); line-height: var(--text-sm-lh);
  color: var(--c-ink); font-weight: 500; background: none; border: 0; cursor: pointer;   /* тот же вес, что у соседних пунктов — иначе «Услуги» выглядит серее (15.10.2026) */
  padding: 10px 20px; border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.nav-drop-toggle:hover, .nav-drop-toggle[aria-expanded="true"] { color: var(--c-primary); background: var(--c-primary-soft); }
/* галочка — иконка, а не текстовый символ: тот съезжал вниз относительно строки */
.nav-caret { width: 14px; height: 14px; color: var(--c-ink); transition: transform var(--transition); }
.nav-drop-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); color: var(--c-primary); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 280px; padding: var(--space-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.nav-drop-menu[hidden] { display: none; }
.nav-drop-menu a {
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  color: var(--c-ink-soft); white-space: normal;
}
.nav-drop-menu a:hover { color: var(--c-primary); background: var(--c-primary-soft); }

/* Пункты не переносятся — ширина меню подстраивается под самый длинный */
.nav-drop-menu a { white-space: nowrap; }
.nav-drop-toggle { white-space: nowrap; }
/* Шесть пунктов в шапке: поля пунктов плотнее, чем на боевом сайте */
.main-nav a, .nav-drop-toggle { padding: 10px 8px; }
/* Первый пункт меню — бесплатный аудит, входной оффер сайта */
.main-nav .nav-accent { color: var(--c-primary); font-weight: 700; }
/* Широкое меню в колонки: отрасли, зарубежные рынки. Привязано к правому краю
   навигации, а не к своему пункту — иначе уходит за экран. */
.main-nav { position: relative; }
.nav-drop:has(.nav-drop-menu--wide) { position: static; }
.nav-drop-menu--wide { left: auto; right: 0; display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 20px; padding: 14px 18px 12px; }
.nav-drop-menu--wide[hidden] { display: none; }
.nav-col { display: flex; flex-direction: column; gap: 2px; }
.nav-col-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .7px; color: var(--c-ink-muted); font-weight: 700; padding: 6px 14px 4px; }
.nav-drop-menu em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--c-hot); background: var(--c-hot-soft); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.nav-drop-menu .nav-drop-accent { color: var(--c-hot); font-weight: 700; }
/* Мини-баннер услуги внутри широкого меню (зарубежные рынки) */
.nav-drop-menu--global { grid-template-columns: max-content max-content 300px; align-items: start; }
.main-nav .nav-drop-banner {
  display: flex; flex-direction: column; gap: 8px; align-self: stretch;
  padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--c-primary); color: #fff; white-space: normal;
}
.main-nav .nav-drop-banner:hover { background: var(--c-primary-deep); color: #fff; }
.nav-drop-banner-title { font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.nav-drop-banner-text { font-size: 12.5px; line-height: 1.45; opacity: .9; }
.nav-drop-banner-link { margin-top: auto; font-size: var(--text-sm); font-weight: 700; }
/* последнее меню у правого края раскрывается влево */
.main-nav > .nav-drop:last-child .nav-drop-menu { left: auto; right: 0; }
.mobile-menu .mobile-menu-accent { color: var(--c-hot); font-weight: 700; }
/* Шапка в полях контейнера страницы: логотип по левому краю содержимого, кнопка — по правому
   (замечание Андрея 14.10.2026). Ниже 1200px полей столько, сколько оставляет меню. */
@media (min-width: 1241px) {
  .site-header .container.inner {
    max-width: none;
    padding-left: calc((100vw - var(--container-max)) / 2 + var(--container-pad));
    padding-right: calc((100vw - var(--container-max)) / 2 + var(--container-pad));
  }
}
/* Чтобы шапка помещалась в поля страницы на любой ширине: меню компактное.
   Подпись кнопки полная («Бесплатный SEO-GEO аудит»), короткая — только до 1000px. */
.main-nav a, .nav-drop-toggle { padding: 10px 9px; font-size: 13px; }   /* воздух между пунктами (15.10.2026) */
.header-right .btn .btn-short { display: none; }
.site-header .header-right .btn { margin-left: 8px; }
/* Телефон в шапке — иконкой: с номером четыре пункта меню и кнопка не помещаются в поля страницы.
   Номер — в подвале и в мобильном меню. */
.header-phone-num { display: none; }
.site-header .header-phone { margin-left: 8px; padding: 6px; }
.site-header .header-divider { display: none; }
/* Контакты в шапке компактнее: зазоры меньше, чем на боевом сайте, иначе шесть пунктов не входят */
.site-header .header-right { margin-left: 12px; }
.site-header .header-right .header-phone { margin-left: 12px; }
.site-header .header-right .btn { margin-left: 16px; }
/* На средних экранах убираем ссылку Telegram — телефон и кнопка остаются */

.header-right { margin-left: var(--header-gap); display: flex; align-items: center; gap: 0; }
.header-right .header-phone { margin-left: var(--header-gap); }
.header-right .header-tg { margin-left: var(--header-gap-sm); }
.header-right .btn { margin-left: var(--header-gap-lg); }
/* Кнопка в шапке меньше и легче обычной — замер с сайта */
.header-right .btn-sm {
  font-size: var(--header-btn-size); font-weight: 400; line-height: 1.4;
  padding: 8px var(--space-4); border-radius: 14px;
}
.header-phone {
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  color: var(--c-ink); text-decoration: none; white-space: nowrap;
}
.header-tg {
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  color: var(--c-primary); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
/* --- Кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-weight: 600;
  border-radius: var(--radius-lg); border: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-primary {
  background: var(--c-primary); color: var(--c-surface);
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  padding: var(--space-4);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-hover); }

.btn-secondary {
  background: var(--c-surface); color: var(--c-primary);
  border: 2px solid var(--c-primary);
  /* той же высоты, что основная кнопка: тот же кегль, рамка вычтена из полей (14.10.2026) */
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  padding: calc(var(--space-4) - 2px) var(--space-8);
}
.btn-secondary:hover { background: var(--c-primary-soft); }

/* Компактная кнопка для шапки */
.btn-sm {
  background: var(--c-primary); color: var(--c-surface);
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  padding: 10px var(--space-6);
  box-shadow: 0 0 14px rgba(41, 130, 255, .35);
}
.btn-sm:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(41, 130, 255, .5); }

/* --- Бейдж-пилюля --- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--c-primary-soft); color: var(--c-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); line-height: var(--text-sm-lh); font-weight: 500;
}
.badge svg { width: 16px; height: 16px; }

/* --- Плашка-факт --- */
.chip {
  display: inline-flex; align-items: flex-start; gap: var(--space-2);
  text-align: left;
  background: var(--c-surface-glass);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); line-height: var(--text-sm-lh); font-weight: 500;
}
.chip .emoji { font-size: 16px; line-height: var(--text-sm-lh); flex-shrink: 0; }

/* --- Секция «первый экран» --- */
.hero { padding-top: var(--header-h); background: var(--grad-hero); }
/* Только вертикальные поля: горизонтальные приходят от .container.
   Сокращённая запись padding их обнуляла, и длинные плашки первого экрана
   растягивались во всю ширину окна вместо ширины контента. */
.hero .inner { padding-top: var(--space-16); padding-bottom: var(--space-16); text-align: center; }
@media (max-width: 768px) { .hero .inner { padding-top: var(--space-12); padding-bottom: var(--space-12); } }

.hero .badge { margin-bottom: var(--space-4); }
.hero .h1 { margin-bottom: var(--space-4); }
.hero .lead { margin-bottom: var(--space-6); }
.hero .chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3); margin-bottom: var(--space-6);
}
.hero .cta-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4);
}


/* Длинные надписи на кнопках на узком экране переносим — иначе кнопка
   вылезает за экран и тянет за собой всю страницу. */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; }
}

/* --- Мобильное меню --- */
.nav-burger {
  display: none; margin-left: auto;
  width: 40px; height: 40px; padding: 10px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.nav-burger span { display: block; height: 2px; background: var(--c-ink); border-radius: 2px; transition: var(--transition); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--container-pad-sm) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-1);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  padding: 12px 8px; border-radius: var(--radius-sm);
  font-size: var(--text-base); color: var(--c-ink); text-decoration: none;
}
.mobile-menu a:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.mobile-menu-group { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid var(--c-border); }
.mobile-menu-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .7px; color: var(--c-ink-muted); font-weight: 700; padding: 8px; }
.mobile-menu-group a { padding-left: 20px; color: var(--c-ink-soft); }
.mobile-menu-phone { font-weight: 700; color: var(--c-primary) !important; }

/* ---- Адаптив шапки: полное меню живёт до 860px, ниже — бургер ----
   Ступени: 1300 — телефон только иконкой; 1200 — короче подпись кнопки и
   плотнее пункты; 1000 — меньше логотип; 860 — бургер. Telegram в шапке нет:
   он в подвале и в окне заявки. */
@media (max-width: 1300px) {
  /* широкие меню — в две колонки, баннер под ними */
  .nav-drop-menu--wide, .nav-drop-menu--global { grid-template-columns: repeat(2, max-content); }
  .main-nav .nav-drop-banner { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 1000px) {
  .site-logo svg { width: 150px; height: auto; }
  .header-right .btn .btn-full { display: none; }
  .header-right .btn .btn-short { display: inline; }
  .main-nav a, .nav-drop-toggle { padding: 10px 5px; }
  .site-header .container.inner { padding-left: var(--space-3); padding-right: var(--space-3); }
}
/* На узких экранах в шапке остаются логотип, кнопка и бургер — остальное в меню.
   Поля и размеры ужимаем, иначе шапка не влезает в 375px и тянет за собой всю страницу. */
@media (max-width: 860px) {
  .main-nav { display: none; }
  /* порядок на узком экране: логотип — свободное место — кнопка — бургер у правого края */
  .nav-burger { display: flex; order: 3; margin-left: var(--space-2); }
  .header-right { margin-left: auto; }
  .site-header .container.inner { padding-left: var(--space-4); padding-right: var(--space-4); gap: var(--space-2); }
  .site-logo svg { width: 150px; height: auto; }
  .header-phone { display: none; }
  .header-right .btn { font-size: var(--text-xs); padding: 9px 12px; white-space: nowrap; }
}

/* <picture> оборачивает картинки ради WebP — из раскладки его убираем,
   чтобы правила вида «.case-logo img» работали как раньше */
picture { display: contents; }

/* Разделитель и телефон с иконкой — замер с боевого сайта:
   линия 1×18px цветом фирменного синего с прозрачностью 20%. */
.header-divider {
  width: 1px; height: 18px;
  background: rgba(41, 130, 255, .2);
  flex: 0 0 auto;
}
.header-phone { display: inline-flex; align-items: center; gap: 6px; }
.header-phone svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Мобильные правила идут последними: новые правила шапки выше по файлу
   иначе перебивают старые скрытия. На узком экране в шапке остаются
   логотип, бургер и кнопка — телефон, разделитель и Telegram убираются. */
@media (max-width: 768px) {
  .header-divider { display: none; }
  .header-right .header-phone { display: none; }
}
@media (max-width: 640px) {
  .header-right .header-tg { display: none; }
  .header-right .btn,
  .header-right .btn-sm {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    padding: 9px 12px;
  }
}
/* Самые узкие телефоны: кнопка плотнее, чтобы шапка не вылезала за экран */
@media (max-width: 400px) {
  .site-logo svg { width: 124px; }
  .site-header .header-right .btn { margin-left: var(--space-2); padding: 9px 9px; }
  .site-header .nav-burger { margin-left: 4px; }
}

/* Кнопка без действия: кейс без подробного разбора. Вид кнопки, но не ссылка. */
.btn-disabled { opacity: .45; pointer-events: none; cursor: default; }

/* Переключатель служебных вариантов страниц (/_style/, /_variant/) — только для сравнения */
.style-switch {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: #1a1a1a; color: #fff; border-radius: 999px; padding: 10px 18px;
  font-family: var(--font-text); font-size: 13px; max-width: 92vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.style-switch a { color: #fff; text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
.style-switch a:hover { opacity: 1; }
.style-switch b { font-weight: 600; }
@media (max-width: 640px) { .style-switch { font-size: 11px; padding: 8px 12px; gap: 8px; } }

/* --- перенесено из темы-заплатки 21.09.2026: действующий вид сайта --- */
/* «:root» в селекторе сохраняет прежний вес правила (раньше его давал класс темы на body) */
:root .btn-sm { box-shadow: 0 0 14px rgba(15, 110, 110, .35); }
:root .btn-sm:hover { box-shadow: 0 0 20px rgba(15, 110, 110, .5); }
:root .btn-primary { background: linear-gradient(135deg, #0C5F5F, #15877F); box-shadow: 0 0 20px rgba(15, 110, 110, .35); }
:root .btn-primary:hover { box-shadow: 0 0 26px rgba(15, 110, 110, .5); }
:root .header-divider { background: rgba(15, 110, 110, .2); }
:root .site-logo linearGradient stop:first-child { stop-color: #0C5F5F; }
:root .site-logo linearGradient stop:last-child { stop-color: #15877F; }
:root .site-logo svg path[fill^="#"] { fill: #0F6E6E; }
:root .main-nav a { font-weight: 500; }
:root .badge { font-weight: 600; }
:root .badge { color: #E85F12; background: rgba(255, 122, 46, .12); }
:root .badge svg { color: #FF7A2E; }

/* Плашка о cookie (content/partials/cookie-consent.html): внизу экрана, под модальной формой (z 100) */
.cookie-consent {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 70;
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  font-family: var(--font-text); font-size: var(--text-sm); line-height: var(--text-sm-lh);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__text { margin: 0; flex: 1; }
.cookie-consent__text a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.cookie-consent__actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.cookie-consent__ok { min-height: 44px; padding: 0 var(--space-6); }
.cookie-consent__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--c-ink-muted); cursor: pointer;
}
.cookie-consent__close:hover { color: var(--c-ink); background: var(--c-primary-soft); }