/* ════════════════════════════════════════════════════════════════════
   CHIPOK Tuning — Landing Design System
   ════════════════════════════════════════════════════════════════════
   Единая система типографики и цветов для всех публичных страниц
   сайта chipoktuning.com. Меняешь значения здесь — меняется ВЕЗДЕ.

   ВАЖНО: не влияет на SEO — только визуальный стиль. Структура DOM
   (H1/H2/H3/meta/canonical) не трогается.

   Подключается через <link rel="stylesheet"> ПОСЛЕ Google Fonts
   и ДО локальных <style>-блоков страницы. Локальные стили могут
   переопределять переменные через :root внутри своего <style>.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Цвета бренда ─────────────────────────────────────── */
  --ds-red:        #cc0000;
  --ds-red-dark:   #a30000;
  --ds-red-soft:   rgba(204, 0, 0, 0.08);
  --ds-green:      #16a34a;
  --ds-green-soft: rgba(34, 197, 94, 0.10);
  --ds-dark:       #18181b;
  --ds-text:       #18181b;
  --ds-text-muted: #6b7280;
  --ds-line:       #e5e7eb;
  --ds-bg:         #ffffff;
  --ds-bg-soft:    #fafbfc;

  /* ─── Типографика: размеры ─────────────────────────────── */
  --ds-fs-h1:      clamp(30px, 4.5vw, 48px);
  --ds-fs-h2:      clamp(26px, 3vw, 36px);
  --ds-fs-h3:      20px;
  --ds-fs-lead:    18px;     /* Параграф под H1 (hero-lead) */
  --ds-fs-intro:   16px;     /* Параграф под H2 секции */
  --ds-fs-body:    15px;
  --ds-fs-caption: 13px;
  --ds-fs-small:   12px;

  /* ─── Типографика: толщина ──────────────────────────────────
     Максимальный bold на сайте = 700. Никогда не использовать 800/900. */
  --ds-fw-h1:      700;
  --ds-fw-h2:      700;
  --ds-fw-h3:      700;
  --ds-fw-lead:    400;
  --ds-fw-intro:   400;
  --ds-fw-body:    400;
  --ds-fw-semi:    600;
  --ds-fw-bold:    700;

  /* ─── Типографика: межбуквенный ─────────────────────────── */
  --ds-ls-h1:      -0.5px;
  --ds-ls-h2:      -0.3px;
  --ds-ls-h3:      -0.2px;
  --ds-ls-body:    0;
  --ds-ls-caps:    1.4px;    /* для UPPERCASE eyebrow-меток */

  /* ─── Типографика: line-height ─────────────────────────── */
  --ds-lh-h1:      1.15;
  --ds-lh-h2:      1.25;
  --ds-lh-h3:      1.35;
  --ds-lh-lead:    1.55;
  --ds-lh-body:    1.6;

  /* ─── Радиусы ──────────────────────────────────────────── */
  --ds-r-sm:       8px;
  --ds-r-md:       12px;
  --ds-r-lg:       16px;
  --ds-r-pill:     999px;

  /* ─── Spacing ──────────────────────────────────────────── */
  --ds-section-py: 96px;          /* desktop top/bottom padding секций */
  --ds-section-py-mobile: 64px;
  --ds-container-max: 1180px;
  --ds-card-max:   1000px;        /* размер калькуляторов / форм */

  /* ─── Navbar / Logo ──────────────────────────────────────
     Меняешь здесь — меняется во всех 15 файлах одновременно. */
  --ds-nav-logo-icon-size:   44px;
  --ds-nav-logo-gap:         4px;     /* отступ между иконкой и текстом */
  --ds-nav-logo-name-size:   20px;
  --ds-nav-logo-sub-size:    20px;
  --ds-nav-logo-weight:      700;
  --ds-nav-logo-name-color:  #111111;
  --ds-nav-logo-sub-color:   var(--ds-red);
  --ds-nav-logo-name-spacing: 0.2px;  /* CHIPOK (верх): + шире, − уже */
  --ds-nav-logo-sub-spacing:  0;      /* TUNING (низ): + шире, − уже */
  --ds-nav-logo-line-gap:    1px;     /* вертикальный отступ TUNING под CHIPOK */
  --ds-nav-link-size:        16px;
  --ds-nav-link-weight:      600;
  --ds-nav-link-color:       #4b5563;

  /* Footer logo — те же размеры/spacing/weight что и nav, другие цвета (на тёмном фоне) */
  --ds-footer-logo-name-color: #fafafa;
  --ds-footer-logo-sub-color:  #ef4444;
}

/* ════════════════════════════════════════════════════════════════════
   Override-селекторы для существующих классов на лендингах
   Перечисляем ВСЕ замеченные при аудите H1/H2/H3 классы, чтобы
   они автоматически унифицировались, не требуя правки каждой страницы.
   ════════════════════════════════════════════════════════════════════ */

/* ── H1 — все варианты hero-заголовков ──────────────────────── */
/* Локальные <style> на каждой странице НЕ должны переопределять эти
   свойства. Если поменять значения нужно — менять переменную, а не
   локальный класс. */
.hero h1,
.hero-left h1,
.about-hero h1,
.blog-hero h1,
.pricing-hero h1,
.pc-hero h1,
.seo-pre h1,
.post-h1,
.page-title {
  font-size: var(--ds-fs-h1);
  font-weight: var(--ds-fw-h1);
  letter-spacing: var(--ds-ls-h1);
  line-height: var(--ds-lh-h1);
  /* Градиент-текст: тёмно-серый, не чисто-чёрный (как на главной).
     color: используется как fallback для браузеров без background-clip:text */
  color: #18181b;
  background: linear-gradient(135deg, #111 55%, #374151);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Lead-параграф под H1 ───────────────────────────────────── */
.hero p.lead,
.hero-lead,
.about-hero-lead,
.blog-hero-desc,
.pricing-hero-desc,
.pc-hero-lead,
.post-lead,
.page-sub,
.seo-intro {
  font-size: var(--ds-fs-lead);
  font-weight: var(--ds-fw-lead);
  line-height: var(--ds-lh-lead);
}

/* ── H2 — все варианты section-заголовков ───────────────────── */
.section-title h2,
.section-title,
.sec-h,
.srv-title,
.hiw-title,
.rck-title,
.ro-title,
.promo h2,
.pc-heading,
.calc-title,
.why-head h2,
.hiw-head h2,
.brands-catalog-title,
.brands-flat-title,
.ecu-block-title,
.ecu-svc-d-list-title,
.ecu-svc-d-allsvc-title,
.seo-deep-h2,
.tool-head h2,
.faq-section h2,
.cta-bottom h2,
.related-title,
.seo-content h2 {
  font-size: var(--ds-fs-h2);
  font-weight: var(--ds-fw-h2);
  letter-spacing: var(--ds-ls-h2);
  line-height: var(--ds-lh-h2);
  color: #18181b;
  background: linear-gradient(135deg, #111 55%, #374151);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Исключения — заголовки на тёмном фоне (CTA, promo) → белый, без градиента */
.promo h2,
.cta-bottom h2 {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ── H3 — все варианты card/block-заголовков ────────────────── */
.adv-card h3,
.srv-card h3,
.feat-card h3,
.rck-step-title,
.why-title,
.hiw-card h3,
.tool-card-title,
.ecu-svc-card-name,
.ecu-option-card-name,
.related-card-title,
.brand-group h3,
.faq-q-h,
.seo-faq-q-h,
.ecu-faq-q-h,
.blog-card-title,
.bento-card-title {
  font-size: var(--ds-fs-h3);
  font-weight: var(--ds-fw-h3);
  letter-spacing: var(--ds-ls-h3);
  line-height: var(--ds-lh-h3);
  color: #18181b;
  background: linear-gradient(135deg, #111 55%, #374151);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Большие декоративные цифры шагов (How it works) ─────────── */
/* Унифицированный размер на всех страницах: index.html (.rck-num),
   checksum.html (.hiw-num), CVN-лендинг (.hiw-num) и т.д. */
.rck-num,
.hiw-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  color: #d1d5db;
  margin-bottom: 18px;
  display: block;
  font-variant-numeric: tabular-nums;
}

/* ── Body-параграфы / описания / FAQ-ответы / card-desc ─────── */
.faq-a,
.faq-section .faq-a,
.section-sub,
.rck-step-desc,
.rck-sub,
.why-desc,
.adv-card p,
.srv-card p,
.pc-hero-desc,
.hiw-head p,
.hiw-card p,
.seo-content p,
.seo-content ul li {
  font-size: var(--ds-fs-body);
  font-weight: var(--ds-fw-body);
  line-height: var(--ds-lh-body);
  color: var(--ds-text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   Navbar — единый стиль на всех 15 страницах сайта.
   Локальные <style>-блоки на каждой странице переопределяют этот стиль,
   поэтому используем !important — иначе каждая страница своё.
   Меняешь переменные --ds-nav-* выше — пересчитывается везде.
   ════════════════════════════════════════════════════════════════════ */

.nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-nav-logo-gap) !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}
.nav-logo svg {
  width: var(--ds-nav-logo-icon-size) !important;
  height: var(--ds-nav-logo-icon-size) !important;
  flex-shrink: 0 !important;
}
.nav-logo-name {
  font-size: var(--ds-nav-logo-name-size) !important;
  font-weight: var(--ds-nav-logo-weight) !important;
  color: var(--ds-nav-logo-name-color) !important;
  letter-spacing: var(--ds-nav-logo-name-spacing) !important;
  line-height: 1 !important;
}
.nav-logo-sub {
  font-size: var(--ds-nav-logo-sub-size) !important;
  font-weight: var(--ds-nav-logo-weight) !important;
  color: var(--ds-nav-logo-sub-color) !important;
  letter-spacing: var(--ds-nav-logo-sub-spacing) !important;
  line-height: 1 !important;
  margin-top: var(--ds-nav-logo-line-gap) !important;
}
.nav-links a {
  font-size: var(--ds-nav-link-size) !important;
  font-weight: var(--ds-nav-link-weight) !important;
  color: var(--ds-nav-link-color) !important;
}
.nav-links a.nav-active,
.nav-links li.has-submenu:has(.nav-active) > a {
  color: #111 !important;
  font-weight: 700 !important;
  position: relative;
}
/* Подчёркивание под активной ссылкой + под родительским пунктом submenu */
.nav-links a.nav-active::after,
.nav-links li.has-submenu:has(.nav-active) > a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px;
  background: #f02429;
  border-radius: 999px;
  pointer-events: none;
}

/* Submenu items — текст всегда в одну строку (иначе "Поддерживаемые опции" заворачивается) */
.nav-submenu li a {
  white-space: nowrap !important;
}

/* ════════════════════════════════════════════════════════════════════
   Брендовый акцент — красное выделение ключевого слова в H1/H2/H3.
   Используется как `<h1>… <span class="accent">Слово</span></h1>`.
   Селектор ограничен заголовками — чтобы не цепляло другие `.accent`
   классы (например, .hf-row.accent — фон строки таблицы).
   ВАЖНО: на лендингах H1 имеет `-webkit-text-fill-color: transparent`
   (для градиент-текста), нужно перебить иначе .accent тоже невидимый.
   ════════════════════════════════════════════════════════════════════ */
h1 .accent,
h2 .accent,
h3 .accent {
  color: #cc0000 !important;
  -webkit-text-fill-color: #cc0000 !important;     /* перебиваем gradient-text родителя */
  background: none !important;                      /* убираем gradient-bg родителя */
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  font-weight: 700 !important;
}

/* Мобильные брейкпоинты для лого — иконка чуть меньше, текст компактнее */
@media (max-width: 900px) {
  :root {
    --ds-nav-logo-icon-size: 36px;
    --ds-nav-logo-name-size: 17px;
    --ds-nav-logo-sub-size:  17px;
  }
  /* На мобиле логотип прижимается влево, остальные элементы навбара уходят вправо */
  .nav-logo { margin-right: auto !important; }
}
@media (max-width: 480px) {
  :root {
    --ds-nav-logo-icon-size: 32px;
    --ds-nav-logo-name-size: 15px;
    --ds-nav-logo-sub-size:  15px;
  }
}

/* Footer logo — единый стиль на всех страницах (те же переменные что и nav, кроме цветов) */
.footer-logo {
  gap: var(--ds-nav-logo-gap) !important;
}
.footer-logo svg {
  width: var(--ds-nav-logo-icon-size) !important;
  height: var(--ds-nav-logo-icon-size) !important;
  flex-shrink: 0 !important;
}
.footer-logo-name {
  font-size: var(--ds-nav-logo-name-size) !important;
  font-weight: var(--ds-nav-logo-weight) !important;
  color: var(--ds-footer-logo-name-color) !important;
  letter-spacing: var(--ds-nav-logo-name-spacing) !important;
  line-height: 1 !important;
  text-transform: none !important;
}
.footer-logo-sub {
  font-size: var(--ds-nav-logo-sub-size) !important;
  font-weight: var(--ds-nav-logo-weight) !important;
  color: var(--ds-footer-logo-sub-color) !important;
  letter-spacing: var(--ds-nav-logo-sub-spacing) !important;
  line-height: 1 !important;
  margin-top: var(--ds-nav-logo-line-gap) !important;
  text-transform: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   Подсказки (применяются при отсутствии локального override):
   - Use <span class="ds-eyebrow"> для UPPERCASE eyebrow-меток
     (раньше использовались <h2>/<h3> с UPPERCASE — это плохо для SEO)
   ════════════════════════════════════════════════════════════════════ */
.ds-eyebrow {
  display: inline-block;
  font-size: var(--ds-fs-caption);
  font-weight: var(--ds-fw-h3);
  letter-spacing: var(--ds-ls-caps);
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

/* ════════════════════════════════════════════════════════════
   MOBILE NAV MENU — единый стандарт для всех лендинг-страниц.
   Используется <details>/<summary> для accordion-групп.
   Подключается через class="nav-mobile-menu" на overlay-элементе.
   ════════════════════════════════════════════════════════════ */

.nav-mobile-links { display: flex; flex-direction: column; gap: 2px; }
.nav-mobile-links a {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  padding: 14px 16px;
  border-radius: 12px;
  transition: background .12s, color .12s;
  display: block;
}
.nav-mobile-links a:hover { background: rgba(0,0,0,0.04); }
.nav-mobile-links a.nav-active { color: #f02429; }
.nav-mobile-sep { height: 1px; background: rgba(0,0,0,0.07); margin: 16px 0; }
.nav-mobile-btns { display: flex; flex-direction: column; gap: 10px; }
.nav-mobile-btns .btn-nav-ghost,
.nav-mobile-btns .btn-nav-red {
  height: 52px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  width: 100%;
  justify-content: center;
}

/* Accordion-группа: <details><summary>Услуги ▾</summary>...</details> */
.nav-mobile-group {
  display: block;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
.nav-mobile-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  transition: background .12s, color .12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-mobile-group > summary::-webkit-details-marker { display: none; }
.nav-mobile-group > summary:hover { background: rgba(0,0,0,0.04); }
.nav-mobile-group > summary .chev {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform .2s ease;
}
.nav-mobile-group[open] > summary .chev { transform: rotate(180deg); }
.nav-mobile-group[open] > summary { color: #f02429; }
.nav-mobile-group > .nav-mobile-group-items {
  display: flex; flex-direction: column;
  padding: 4px 0 8px;
}
.nav-mobile-group > .nav-mobile-group-items a {
  padding-left: 32px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #374151;
}
.nav-mobile-group > .nav-mobile-group-items a:hover { color: #f02429; }

/* «Soon»-пункты внутри группы — приглушены, некликабельны */
.nav-mobile-soon {
  padding: 10px 12px;
  color: #9ca3af;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-mobile-soon em {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #9ca3af;
  background: #f9fafb;
  font-style: normal;
}

/* ════════════════════════════════════════════════════════════════════
   Машинка-анимация вокруг hero CTA-кнопки "Зарегистрироваться" (.btn-hero).
   Бренд CHIPOK = автотюнинг, машинка по периметру → тематическое внимание.
   Цикл 4 секунды, поворачивается на углах. Уважает prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */
.btn-hero {
  position: relative;
  overflow: visible !important;
}
/* Машинка приподнята НАД кнопкой — едет в воздухе по верхнему краю */
.btn-hero::after {
  content: '🚗';
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: absolute;
  top: -14px; left: -10%;                  /* приподнята на 14px над краем */
  transform: translate(-50%, -50%) scaleX(-1);
  opacity: 0;
  animation: chipok-drive-pass 24s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
/* Дым позади машинки (отдельный псевдо-элемент, своя анимация со смещением) */
.btn-hero::before {
  content: '💨';
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: -14px; left: -10%;                  /* на той же высоте что и машинка */
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: chipok-smoke-pass 24s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  filter: blur(0.3px);
}
@keyframes chipok-drive-pass {
  /* L→R: ОДНО непрерывное движение, никаких промежуточных остановок */
  0%   { left: -10%;  opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
  3%   { left: -10%;  opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
  5%   { left: -5%;   opacity: 1; transform: translate(-50%, -50%) scaleX(-1); }
  23%  { left: 105%;  opacity: 1; transform: translate(-50%, -50%) scaleX(-1); }
  25%  { left: 110%;  opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
  /* Большая пауза */
  60%  { left: 110%;  opacity: 0; transform: translate(-50%, -50%); }
  /* R→L: ОДНО непрерывное движение */
  62%  { left: 105%;  opacity: 1; transform: translate(-50%, -50%); }
  80%  { left: -5%;   opacity: 1; transform: translate(-50%, -50%); }
  82%  { left: -10%;  opacity: 0; transform: translate(-50%, -50%); }
  100% { left: -10%;  opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
}
@keyframes chipok-smoke-pass {
  /* Дым тем же путём, смещён на ~8% назад */
  0%   { left: -18%;  opacity: 0; transform: translate(-50%, -50%); }
  3%   { left: -18%;  opacity: 0; transform: translate(-50%, -50%); }
  5%   { left: -13%;  opacity: 0.7; transform: translate(-50%, -50%); }
  23%  { left: 97%;   opacity: 0.7; transform: translate(-50%, -50%); }
  25%  { left: 102%;  opacity: 0; transform: translate(-50%, -50%); }
  /* Пауза */
  60%  { left: 118%;  opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
  /* R→L */
  62%  { left: 113%;  opacity: 0.7; transform: translate(-50%, -50%) scaleX(-1); }
  80%  { left: 3%;    opacity: 0.7; transform: translate(-50%, -50%) scaleX(-1); }
  82%  { left: -2%;   opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
  100% { left: -18%;  opacity: 0; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-hero::after { animation: none; display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER — единые отступы для всех лендингов.
   Раньше в каждой странице был padding: 88px 48px 40px + margin: 0 auto 56px,
   что давало растянутый «воздушный» футер. Жмём всё ближе к контенту.
   !important нужен потому что page-local <style> приходит после этого файла.
   ════════════════════════════════════════════════════════════════════ */
footer {
  padding: 48px 48px 24px !important;
}
.footer-grid {
  margin-bottom: 28px !important;
}
.footer-bottom {
  padding-top: 18px !important;
}
.footer-trust-grid {
  margin-bottom: 20px !important;
}
@media (max-width: 900px) {
  footer {
    padding: 36px 24px 20px !important;
  }
  .footer-grid {
    margin-bottom: 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   NAVBAR BUTTONS — canonical .btn-nav-ghost / .btn-nav-red
   Раньше 10 лендингов имели свои копии этих стилей, разъезжавшиеся со
   временем (на index.html была 34px вместо 38px). Теперь — один источник.
   Mobile-варианты (.nav-mobile-btns ...) определены выше, не пересекаются.
   ════════════════════════════════════════════════════════════════════ */
.btn-nav-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  font-size: 15px;
  font-weight: 700;
  color: #374151;
  background: transparent;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.btn-nav-ghost:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111;
}
.btn-nav-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--red, var(--ds-red, #cc0000));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 12px rgba(204, 0, 0, 0.25);
  transition: background .15s, box-shadow .15s, transform .1s;
  text-decoration: none;
}
.btn-nav-red:hover {
  background: var(--red-dark, var(--ds-red-dark, #a30000));
  box-shadow: 0 4px 20px rgba(204, 0, 0, 0.35);
  transform: translateY(-1px);
  color: #fff;
}