/* =========================================================
   BASE: переменные, сброс, типографика, утилиты
   ========================================================= */

:root {
  /* ---- ПАЛИТРА: индустриальный навигатор + графит ---- */
  --c-bg:        #F4F5F7;   /* холодный светло-серый — сталь без синевы */
  --c-bg-soft:   #FFFFFF;   /* белый для контрастных секций */
  --c-ink:       #0B1220;   /* глубокий ink — почти чёрный с тёплым подтоном */
  --c-ink-2:     #334155;   /* slate-700 — основной текст */
  --c-muted:     #64748B;   /* slate-500 — подписи */
  --c-line:      #E2E8F0;   /* slate-200 — разделители */
  --c-line-strong: #CBD5E1; /* slate-300 — более заметная линия */
  --c-line-dark: rgba(255,255,255,.10);

  --c-accent:    #1E40AF;   /* индустриальный navy (был жгуче-оранжевый) */
  --c-accent-hi: #1D4ED8;   /* hover на navy */
  --c-accent-soft: rgba(30,64,175,.10);
  --c-info:      #0EA5E9;   /* холодный голубой для второстепенных меток */
  --c-success:   #15803D;   /* deeper зелёный — без «эко»-вайба */
  --c-danger:    #DC2626;
  --c-warn:      #EA580C;   /* сохраняем оранжевый как «срочно/24-7/тревога» */

  /* ---- ТИПОГРАФИКА ---- */
  --f-display: 'Bricolage Grotesque', 'Manrope', system-ui, -apple-system, sans-serif;
  --f-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* модульная шкала кеглей (clamp = от мобайла до десктопа без media-queries) */
  --fs-xs:  0.8125rem;   /* 13px */
  --fs-sm:  0.875rem;    /* 14px */
  --fs-md:  1rem;        /* 16px */
  --fs-lg:  1.125rem;    /* 18px */
  --fs-xl:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-4xl: clamp(2.4rem, 1.6rem + 3.5vw, 4.25rem);    /* H1 hero */

  /* ---- ОТСТУПЫ ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --sp-10: 6rem;

  /* ---- ОФОРМЛЕНИЕ: угловатее, без «AI-карточек» ---- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;
  --radius-xl: 10px;       /* для крупных hero-блоков */

  /* Резкие тени без размытого «soft glow» */
  --shadow-sm: 0 1px 0 rgba(11,18,32,.04), 0 1px 2px rgba(11,18,32,.06);
  --shadow:    0 1px 0 rgba(11,18,32,.04), 0 4px 8px rgba(11,18,32,.06), 0 12px 24px rgba(11,18,32,.04);
  --shadow-lg: 0 1px 0 rgba(11,18,32,.06), 0 24px 48px rgba(11,18,32,.14);

  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 250ms cubic-bezier(.4,0,.2,1);
  --t-slow: 450ms cubic-bezier(.4,0,.2,1);

  --container: 1240px;
  --header-h: 76px;
}

/* =========================================================
   СБРОС
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  /* Запрещаем горизонтальный скролл на всём документе */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  /* Подстраховка от горизонтального скролла */
  overflow-x: hidden;
  /* На iPhone с челкой/островом учитываем безопасные зоны */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* лёгкий вертикальный градиент для глубины */
  background-image:
    radial-gradient(circle at 0% 0%, rgba(232,93,47,.04) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(30,58,95,.04) 0%, transparent 50%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  color: var(--c-ink);
  /* вариативная ось opsz у Bricolage делает буквы интереснее на крупном кегле */
  font-variation-settings: 'opsz' 96;
}

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--c-ink);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-accent); }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* фокусные стили для доступности — везде одинаковые */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   УТИЛИТЫ
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
@media (max-width: 640px) {
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  background: var(--c-ink);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  z-index: 1000;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Атрибут hidden должен скрывать даже flex/grid-элементы */
[hidden] { display: none !important; }