/* ============================================================
   AI CJM — Redesign tokens (светлая система, 2026-06)
   Источник правды для НОВОГО дизайна (светлая премиум-база,
   акцент — глубокий royal-синий, острые углы, шрифт Inter).
   Старый styles/tokens.css оставлен для ещё не перенесённых страниц.
   Подключать на новых страницах: <link rel="stylesheet" href="/styles/redesign.css">
============================================================ */

:root{
  /* --- Поверхности (светлая премиум-база) --- */
  --bg:        #ffffff;   /* основной фон страницы */
  --bg-1:      #f4f7fb;   /* чередующиеся секции, холодный светло-серый */
  --bg-card:   #ffffff;   /* карточки (на рамке --line) */
  --bg-mock:   #f4f7fb;   /* мокапы/инпуты */
  --bg-blue:   #0b1f4d;   /* глубокая синяя панель (hero-right, акцентные блоки) */

  /* --- Линии --- */
  --line:      #e3e8f0;   /* видимые разделители, рамки карточек */
  --line-soft: #eef1f6;   /* мягкие границы секций */
  --line-input:#cdd5e2;   /* рамка полей формы */

  /* --- Текст --- */
  --ink:       #0f172a;   /* основной текст (глубокий slate с синим подтоном) */
  --ink-2:     #566075;   /* вторичный текст, описания */
  --ink-3:     #8089a0;   /* приглушённый: подписи, мета */

  /* --- Акцент (премиальный royal-синий) --- */
  --accent:        #1D4ED8;   /* основной: кнопки, активные ссылки */
  --accent-bright: #2563EB;   /* яркий: акцентное слово в заголовке, заголовки кейсов */
  --accent-ink:    #1A43BC;   /* hover/pressed */
  --orange: var(--accent);    /* alias для includes.js (подсветка активной ссылки) */

  /* --- Типографика --- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Радиусы: ОСТРЫЕ УГЛЫ, скруглений нет --- */
  --r: 0;

  /* --- Ритм --- */
  --pad-x:      clamp(32px, 6vw, 104px);
  --section-py: 56px;
}

/* ============================================================
   Единый хедер (components/_header.html) — одинаков на всех страницах
============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px var(--pad-x);
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-sans);
}
.site-header .sh-right{ display:flex; align-items:center; gap:30px; }
.site-header .sh-cta{
  background:var(--accent); color:#fff; font-size:14px; font-weight:600;
  padding:11px 22px; text-decoration:none; transition:background .15s ease;
}
.site-header .sh-cta:hover{ background:var(--accent-ink); }
.site-header .sh-wm{
  display:flex; align-items:center; gap:9px;
  font-weight:600; font-size:18px; letter-spacing:.03em;
  color:var(--ink); text-decoration:none;
}
.site-header .sh-mark{
  flex:none; display:block; width:30px; height:30px;
  background:linear-gradient(140deg, #2563EB 0%, #1D4ED8 55%, #0b2a8a 100%);
  -webkit-mask:url(/assets/logo-dna.png) center / contain no-repeat;
  mask:url(/assets/logo-dna.png) center / contain no-repeat;
}
.site-header .sh-nav{ display:flex; gap:28px; }
.site-header .sh-nav a{
  font-size:14px; color:var(--ink-2); text-decoration:none;
  transition:color .15s ease;
}
.site-header .sh-nav a:hover{ color:var(--ink); }

/* Бургер: виден только на мобиле (≤680px), на десктопе скрыт */
.site-header .sh-burger{ display:none; }

@media (max-width:680px){
  .site-header .sh-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:0; flex:none;
    background:var(--bg); border:1px solid var(--line); cursor:pointer;
  }
  .site-header .sh-burger span{
    display:block; width:18px; height:2px; margin:0 auto; background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }
  .site-header[data-open="true"] .sh-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header[data-open="true"] .sh-burger span:nth-child(2){ opacity:0; }
  .site-header[data-open="true"] .sh-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Навигация превращается в выпадающую панель под хедером */
  .site-header .sh-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .site-header[data-open="true"] .sh-nav{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
  }
  .site-header .sh-nav a{
    padding:15px var(--pad-x); font-size:15px;
    border-top:1px solid var(--line-soft);
  }
}

/* ============================================================
   База + первичная кнопка (.btn) — глобально, для всех страниц.
   Извлечено из инлайн-<style> index.html без изменения значений.
============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink-2);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}

.btn{background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:16px 30px;border:none;border-radius:0;display:inline-flex;gap:10px;align-items:center;cursor:pointer;text-decoration:none;transition:background .15s ease}
.btn:hover{background:var(--accent-ink)}
.btn .arr{font-size:17px;line-height:1}