/* ============================================================
   VOLKI — дизайн-система (по референсу siberia-spa.ru)
   Землистая премиальная палитра, KyivType (заголовки) + Inter (текст),
   карточки r16, кнопки-пилюли r50, контейнер 1200, медленные анимации.
   ============================================================ */

/* Шрифты как у референса: Merriweather (серифные дисплеи — он у Siberia в @font-face) + Inter (текст/меню). */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- палитра (землистая, как референс) ---- */
  --cream:      #ecece8;   /* фон светлых секций */
  --cream-2:    #f4f3ef;   /* чуть светлее */
  --sage:       #8c8e77;   /* шалфейно-оливковый — вторичный */
  --olive:      #515029;   /* тёмная олива — глубокие блоки/акценты текста */
  --graphite:   #26221f;   /* почти чёрный тёплый — тёмный фон/текст */
  --graphite-2: #322d29;
  --sand:       #8f7965;   /* тёплый беж/таупе */
  --sand-2:     #b8a695;
  --accent:     #a8403b;   /* терракота — CTA (в родстве с охрой VOLKI) */
  --accent-2:   #c05a52;
  --gold:       #b78a4e;   /* тёплое золото для тонких линий/лого */
  --white:      #ffffff;
  --line:       rgba(38,34,31,.14);
  --line-light: rgba(255,255,255,.16);

  /* смысловые */
  --bg:         var(--cream);
  --bg-dark:    var(--graphite);
  --text:       #2b2723;
  --text-soft:  #6a6259;
  --text-inv:   #ecece8;
  --text-inv-soft: rgba(236,236,232,.72);

  /* ---- типографика ---- */
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --side-w: 300px; /* ширина левой панели, как у референса */

  /* модульная шкала (clamp — адаптив без медиазапросов) */
  --h1: clamp(2.6rem, 6vw, 5.4rem);
  --h2: clamp(2rem, 4.2vw, 3.4rem);
  --h3: clamp(1.35rem, 2.4vw, 1.9rem);
  --h4: clamp(1.05rem, 1.6vw, 1.25rem);
  --lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --body: 1rem;
  --small: 0.875rem;
  --eyebrow: 0.78rem;

  /* ---- геометрия ---- */
  --container: 1200px;
  --wide: 1640px;
  --gutter: clamp(20px, 5vw, 64px);
  --r-card: 16px;
  --r-lg: 24px;
  --r-sm: 10px;
  --r-pill: 50px;

  /* ---- отступы секций ---- */
  --section-y: clamp(64px, 9vw, 140px);

  /* ---- тени ---- */
  --shadow-sm: 0 4px 18px rgba(38,34,31,.08);
  --shadow-md: 0 18px 50px rgba(38,34,31,.14);
  --shadow-lg: 0 40px 90px rgba(38,34,31,.22);

  /* ---- анимации (медленные, премиальные) ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .28s;
  --t: .5s;
  --t-slow: .8s;
}

/* ---- сброс ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* Серифные дисплеи как у референса: лёгкое начертание, спокойный межстрочный */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.18; letter-spacing: 0; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

::selection { background: var(--accent); color: #fff; }

/* ---- утилиты ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wide { max-width: var(--wide); }
.section { padding-block: var(--section-y); }
.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: var(--eyebrow);
  letter-spacing: .22em; text-transform: uppercase; color: var(--sand);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.lead { font-size: var(--lead); color: var(--text-soft); line-height: 1.55; }
.muted { color: var(--text-soft); }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1.05em 2em; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  transition: transform var(--t) var(--ease-out), background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  will-change: transform;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 30px rgba(168,64,59,.32); }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(168,64,59,.4); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--graphite); color: var(--cream); border-color: var(--graphite); transform: translateY(-3px); }
.btn-ghost.inv { border-color: var(--line-light); color: var(--cream); }
.btn-ghost.inv:hover { background: var(--cream); color: var(--graphite); border-color: var(--cream); }

/* reveal-анимация при скролле */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal].d1 { transition-delay: .08s; }
[data-reveal].d2 { transition-delay: .16s; }
[data-reveal].d3 { transition-delay: .24s; }
[data-reveal].d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}