/* ==========================================================================
   ЭлитСтом — base.css · дизайн-система v2 (премиум, контраст, глубина)
   Тёплая латте-гамма + espresso-якорь. Cormorant (display) + Inter (текст).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Палитра */
  --bg:        #FAF6F0;   /* тёплый ivory фон */
  --surface:   #FFFFFF;   /* карточки */
  --surface-2: #F4EEE5;   /* мягкий беж для секций-передышек */
  --surface-3: #F8FBF7;   /* свежая светлая подложка */
  --text:      #2E2722;   /* тёмный тёплый графит */
  --text-2:    #5A4E44;   /* вторичный (затемнён для контраста) */
  --accent:    #B08D5B;   /* золото-латте — фирменный (насыщеннее, для контраста) */
  --accent-dk: #8A6A43;   /* тёмное золото (текст-акцент, hover) */
  --accent-sf: #EFE4D5;
  --btn-gold:    #AF9577;   /* кнопки — фирменный тон с основного сайта */
  --btn-gold-dk: #9C8264;
  --btn-ink:     #FFFFFF;   /* мягкий фон-акцент */
  --mint:       #DCEBE4;
  --mint-dk:    #497A67;
  --gold-br:   #CBA876;   /* «горящее» золото на тёмном */
  --espresso:  #241A14;   /* ГЛУБОКИЙ тёмный якорь */
  --espresso-2:#322419;   /* чуть светлее, для слоёв на тёмном */
  --coffee:    #4A3C33;   /* кофейный (тёмные плашки средней глубины) */
  --cream:     #F4ECE0;   /* текст на espresso */
  --success:   #5FA67C;
  --border:    rgba(74,60,51,.14);   /* тёплый разделитель */
  --border-dk: rgba(244,236,224,.16); /* разделитель на тёмном */

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

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* Радиусы — сдержанные (премиум, не «пузыри») */
  --r-sm: 6px; --r-md: 8px; --r-lg: 8px; --r-pill: 999px;

  /* Тени — глубина тоном, мягкие тёплые */
  --shadow:    0 1px 2px rgba(36,26,20,.05), 0 22px 50px -26px rgba(36,26,20,.22);
  --shadow-lg: 0 2px 6px rgba(36,26,20,.06), 0 40px 80px -30px rgba(36,26,20,.30);

  /* единая сетка: 1480 содержимого + поля по краям — так все блоки, шапка
     и подвал начинаются и заканчиваются на одной линии */
  --pad-x: clamp(20px, 4.7vw, 76px);
  --container: calc(1480px + 2 * var(--pad-x));
  --measure: 760px;             /* комфортная ширина для длинного текста */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-text); font-weight: 400;
  color: var(--text); background: var(--bg);
  line-height: 1.6; font-size: 18px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-sf); color: var(--text); }
input, textarea { caret-color: var(--accent-dk); }
img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* Типографика */
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); letter-spacing: -.005em; }
h1 { font-size: clamp(34px, 3.4vw, 55px); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: clamp(30px, 3.2vw, 50px); font-weight: 700; line-height: 1.08; }
h3 { font-size: clamp(21px, 1.9vw, 27px); font-weight: 700; line-height: 1.2; }
h4 { font-size: clamp(20px, 1.7vw, 23px); font-weight: 600; line-height: 1.25; }
p { color: var(--text); }
strong { font-weight: 600; }

/* Контейнер и секции */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--pad-x); }

/* доступно скринридеру, скрыто визуально */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
section { padding-block: clamp(56px, 6.5vw, 104px); }
.section--soft  { background: var(--surface-2); }
.section--accent{ background: var(--accent-sf); }
.section--dark  { background: var(--espresso); color: var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(244,236,224,.82); }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-text); font-size: 12.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #6B5440;
  margin-bottom: var(--sp-5);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.section--dark .eyebrow { color: var(--gold-br); }
.section--dark .eyebrow::before { background: var(--gold-br); }

/* Лиды и утилиты */
.lead { font-size: clamp(19px, 1.5vw, 24px); color: var(--text); line-height: 1.55; font-weight: 400; }
.muted { color: var(--text-2); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.tag {
  display: inline-block; font-size: 13px; font-weight: 500; color: var(--accent-dk);
  background: var(--accent-sf); padding: 6px 14px; border-radius: var(--r-pill);
}
/* Акцентные числа (Cormorant золотом) */
.num { font-family: var(--font-head); font-weight: 500; color: var(--accent-dk); line-height: 1; }
.section--dark .num { color: var(--gold-br); }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-text); font-size: 15.5px; font-weight: 500; letter-spacing: .01em;
  padding: 16px 32px; border-radius: var(--r-pill); border: 1px solid var(--espresso);
  background: var(--espresso); color: var(--cream); cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.btn:active { transform: scale(.97); transition-duration: .12s; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: transparent; border-color: var(--espresso); color: var(--text); transform: translateY(-2px); }
.btn--gold { background: var(--btn-gold); border-color: var(--btn-gold); color: var(--btn-ink); }
.btn--gold:hover { background: var(--btn-gold-dk); border-color: var(--btn-gold-dk); color: var(--btn-ink); }
.btn--light { background: var(--cream); border-color: var(--cream); color: var(--espresso); }
.btn--light:hover { background: var(--gold-br); border-color: var(--gold-br); color: var(--espresso); }
.btn--lg { padding: 18px 40px; font-size: 16px; }
.btn--xl { padding: 21px 48px; font-size: 17.5px; font-weight: 600; }
.btn--block { display: flex; width: 100%; }

/* Сетки */
.grid { display: grid; gap: var(--sp-5); }
.grid > * { min-width: 0; }   /* колонка не раздувается содержимым */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Reveal-on-scroll — скрываем ТОЛЬКО если JS активен (html.js), иначе контент виден всегда */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .reveal .lic__rule, html.js .reveal.is-in .lic__rule { transform: none; transition: none; }
  /* Движение выключаем везде, но не трогаем смену цвета/тени — она помогает считывать состояние */
  .btn, .btn:hover, .btn:active,
  .svc-card, .svc-card:hover, .svc-card__media img, .svc-card:hover .svc-card__media img,
  .feat, .feat:hover, .feat::after, .feat:hover::after,
  .quiz__opt, .quiz__opt:hover,
  .modal__box { transition-property: background-color, border-color, color, box-shadow, opacity !important; transform: none !important; }
}

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