/* ============================================================
   its9it // ecom — демонстрационный стенд аналитики обращений
   base.css — дизайн-токены, сброс, шапка, подвал, контейнер

   Палитра — фирменный брендбук its9it (цвета сверены с its9it.ru):
     purple #1C18A0 (основной) · virid #0BE9B3 (бирюзовый акцент)
     gray #667085 · dark grey #101828 · black #101010 · white #fff
   Правила контраста:
     на purple/black/gray фоне → белый текст
     на white фоне → чёрный текст, purple акценты
     на сером фоне → бирюзовые (virid) акценты
   ============================================================ */

:root {
  /* --- БРЕНД --- */
  --purple:      #1C18A0;
  --purple-700:  #14107A;   /* темнее — hover/градиент */
  --purple-300:  #7774C6;
  --purple-200:  #A4A3D9;
  --purple-100:  #D5D4EF;
  --purple-50:   #EEEDF9;

  --virid:       #0BE9B3;
  --virid-400:   #3CEDC2;
  --virid-100:   #C2F8EA;
  --virid-50:    #F2FBF8;

  /* --- серая шкала (untitled-ui, сверена с its9it.ru) --- */
  --gray-900: #101828;
  --gray-800: #1D2939;
  --gray-700: #344054;
  --gray-600: #475467;
  --gray-500: #667085;
  --gray-400: #98A2B3;
  --gray-300: #D0D5DD;
  --gray-200: #EAECF0;
  --gray-100: #F2F4F7;
  --gray-50:  #F9FAFB;
  --black:    #101010;
  --white:    #FFFFFF;

  /* --- семантика --- */
  --success: #06B88C;   /* virid-dark, читаемый на белом */
  --V2:      #F04438;   /* фирменный красный its9it */
  --error:   #F04438;

  /* --- алиасы под существующую разметку (точки перекраса) --- */
  --accent:        var(--purple);
  --accent-hover:  var(--purple-700);
  --accent-active: var(--virid);
  --accent-light:  var(--purple-100);
  --bg-blue:       var(--gray-900);   /* тёмный фон футера */

  --FF-Black:       #1D2939;
  --FF-Black-light: #344054;
  --FF-D-Grey:      #667085;
  --FF-L-Grey:      #D0D5DD;
  --FF-SL-Grey:     #F9FAFB;

  --F-main:  "Montserrat", system-ui, -apple-system, Arial, sans-serif;
  --F-title: "Montserrat", system-ui, -apple-system, Arial, sans-serif;

  --content-max: 1180px;
  --padding: 2rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--F-main);
  color: var(--FF-Black);
  background: var(--FF-SL-Grey);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--padding);
  padding-right: var(--padding);
}

/* ---------------- HEADER ---------------- */
.header {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; z-index: 50;
}
.header-content {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.header__logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.header__logo img { width: 32px; height: 32px; border-radius: 8px; }
.header__logo .logo-word {
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: var(--gray-900);
}
.header__logo .logo-word .tag { color: var(--purple); }
.header__right { display: flex; align-items: center; gap: 24px; }
.header-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.header-menu a {
  display: inline-block; padding: 8px 14px; border-radius: 8px;
  text-decoration: none; font-size: .875rem; font-weight: 600;
  color: var(--gray-600); transition: all .15s;
}
.header-menu a:hover { background: var(--gray-100); color: var(--purple); }
.header-menu li.active a { background: var(--purple-50); color: var(--purple); }
.header-demo-badge {
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--purple); background: var(--purple-50);
  border: 1px solid var(--purple-100); padding: 4px 10px; border-radius: 20px;
}

/* ---------------- FOOTER ---------------- */
.footer { background: var(--gray-900); color: rgba(255,255,255,.85); margin-top: 48px; }
.footer-content {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px;
}
.footer-logo { display: inline-flex; align-items: center; gap: 10px; }
.footer-logo img { width: 28px; height: 28px; border-radius: 7px; }
.footer-logo .logo-word { font-size: 1rem; font-weight: 800; color: #fff; }
.footer-logo .logo-word .tag { color: var(--virid); }
.footer-copyright { font-size: .8125rem; color: rgba(255,255,255,.65); max-width: 640px; }

@media (max-width: 1100px) { :root { --padding: 1.3rem; } }
@media (max-width: 720px) {
  .header-menu { gap: 0; }
  .header-menu a { padding: 8px 10px; }
  .footer-content { flex-direction: column; align-items: flex-start; }
}