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

:root {
  /* ---- ПАЛИТРА: тёплая (изначальная) ---- */
  --c-bg:        #F7F5F1;   /* тёплый off-white */
  --c-bg-soft:   #EBE7DD;   /* мягкий бежевый для блоков */
  --c-ink:       #141821;   /* почти-чёрный графит */
  --c-ink-2:     #2A2F3A;   /* приглушённый текст */
  --c-muted:     #6B6F78;   /* подписи */
  --c-line:      #DDD8CC;   /* разделители на светлом */
  --c-line-strong: #C9C3B3; /* более заметная линия */
  --c-line-dark: rgba(255,255,255,.12);

  --c-accent:    #E85D2F;   /* янтарь — CTA, цены, акценты */
  --c-accent-hi: #FF7548;   /* hover-вариант */
  --c-accent-soft: rgba(232,93,47,.10);
  --c-info:      #1E3A5F;   /* синий — доверие, цифры */
  --c-success:   #2C7A4D;   /* галки, подтверждения */
  --c-danger:    #C1322B;
  --c-warn:      #E85D2F;

  /* ---- ТИПОГРАФИКА ---- */
  --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;

  /* модульная шкала кеглей */
  --fs-xs:  0.8125rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --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);

  /* ---- ОТСТУПЫ ---- */
  --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;

  /* ---- ОФОРМЛЕНИЕ: скруглённое (изначальное) ---- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(20,24,33,.06), 0 2px 4px rgba(20,24,33,.04);
  --shadow:    0 4px 12px rgba(20,24,33,.08), 0 12px 32px rgba(20,24,33,.06);
  --shadow-lg: 0 20px 60px rgba(20,24,33,.18);

  --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;
}