/* Основа: сброс, текст, колонка, картинки, кнопки, поля, анимации. Значения — только из tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-16)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;              /* длинное слово или ссылка переносится, а не вылезает */
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); line-height: var(--lh-head); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-family: var(--font); font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
figure, blockquote { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Картинки: никогда не шире блока, не растягиваются; у фото — свои пропорции через aspect-ratio */
img, svg, video { display: block; max-width: 100%; height: auto; }
.media { width: 100%; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; border-radius: var(--r); background: var(--surface-2); }

/* Колонка: на любом экране по центру, поля по краям — без пустой полосы с одной стороны */
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-alt { background: var(--surface-2); }
.prose { max-width: var(--maxw-text); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.lead { font-size: var(--fs-18); color: var(--ink-soft); }
.eyebrow { font-size: var(--fs-14); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--ink-soft); }

/* Сетка карточек: сама решает, сколько колонок помещается (на телефоне — одна) */
.grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr)); }

/* Кнопки: не меньше 44px, текст переносится, а не вылезает */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: var(--sp-3) var(--sp-6); border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font: 600 var(--fs-16)/1.2 var(--font); text-decoration: none; text-align: center;
  cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.btn:hover { color: var(--accent-ink); background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Поля: шрифт 16px — телефон не увеличивает страницу при вводе */
.form, .field { max-width: var(--maxw-form); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-14); font-weight: 600; }
.input {
  width: 100%; min-height: var(--tap); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: 400 var(--fs-16)/1.4 var(--font);
}
textarea.input { min-height: 120px; resize: vertical; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Появление при прокрутке (js/site.js): только если работает JS и человек не просил «меньше движения» */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.lift { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

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