/* ================================================================== */
/*  CRM.exe - лендинг. Только то, чего нет в дизайн-системе:           */
/*  сброс, чипы формы, мобильный бургер (в прототипе не реализован).   */
/* ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* инлайновые display из прототипа перебивают атрибут hidden - гасим явно */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
/* Плавный скролл оставлен включённым и при prefers-reduced-motion:
   сознательное решение владельца (2026-09-08). Ослабляем только
   ховер-анимации. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

a { color: var(--brand-hot); text-decoration: none; }
a:hover { color: var(--accent); }

.nav-link { color: var(--text-soft); transition: color var(--dur-fast) var(--ease); }
.nav-link:hover { color: var(--text); }

.foot-link { color: var(--text-dim); transition: color var(--dur-fast) var(--ease); }
.foot-link:hover { color: var(--text); }

/* --- чипы выбора системы (из логики прототипа) --- */
.chip {
  padding: 9px 16px;
  font-family: var(--font);
  font-size: 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
  color: var(--text-soft);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border-2);
}
.chip:hover { border-color: rgba(80, 120, 255, .5); color: var(--text); }
.chip[aria-pressed="true"] {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

/* --- логотип вендора: показывается, только если файл есть --- */
.sys-logo { width: 136px; height: 52px; object-fit: contain; }

/* --- бургер (мобильная навигация) --- */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger span::before { transform: translateY(-5px); }
.burger span::after  { transform: translateY(3.5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0 !important;
    padding: 8px 24px 20px;
    background: rgba(2, 4, 11, .96);
    backdrop-filter: var(--blur-glass);
    border-bottom: 1px solid var(--border);
  }
  .site-nav[hidden] { display: none; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 16px; }
  .header-cta { display: none; }
}
@media (min-width: 901px) {
  .site-nav[hidden] { display: flex !important; }
}

/* --- секция-заявка: подтверждение --- */
.form-note { min-height: 1em; }
.form-error { color: var(--danger); font-size: 13px; margin: 0; }

/* --- лого-локап в шапке ---------------------------------------------
   Знак и подпись крупнее хэндоффа, `.exe` перекрашен: в прототипе он был
   --text-faint, контраст к фону 3.17, сливался.

   Выравнивание: знак и вордмарк по центру (как в хэндоффе), а подпись
   опущена так, чтобы её базовая линия совпала с нижней линией «unexis».
   Смещение измерено в браузере для Inter при заданных размерах:
   3.5px при подписи 16px и 3px при 14.5px. Меняете размеры - меряйте
   заново, число к ним привязано. Разделитель вынесен отдельным
   элементом, иначе он опускался бы вместе с текстом. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  min-width: 0;
}
.brand-mark { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.brand-word { height: 19px; width: auto; flex-shrink: 0; }

.brand-divider {
  width: 1px;
  height: 20px;
  background: var(--border-2);
  flex-shrink: 0;
  margin-left: 6px;
}

.brand-sub {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  transform: translateY(3.5px);
}
.brand-sub-ext { color: var(--brand-hot); }

@media (max-width: 420px) {
  .brand { gap: 9px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-word { height: 17px; }
  .brand-divider { height: 18px; margin-left: 4px; }
  .brand-sub { font-size: 14.5px; transform: translateY(3px); }
}