/* ============================================================
   БЕЛЫЙ КИТ — база: reset, типографика, сетка, утилиты
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Иерархия строится весом и кеглем — гарнитура одна */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.028em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.015em; }

p { margin: 0 0 1em; max-width: 74ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--accent-ink); }

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

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 0; }

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* --- Сетка ------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

.grid { display: grid; gap: var(--gap); }
.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-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* --- Заголовок секции --------------------------------------
   Без надзаголовков-лейблов: заголовок держит себя сам.       */
.section-head { max-width: 720px; margin-bottom: clamp(30px, 3.6vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { font-size: var(--fs-lead); color: var(--ink-2); margin-bottom: 0; }
.section-head--wide { max-width: none; }

/* Заголовок секции с действием справа */
.section-head--split {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.section-head--split > div { max-width: 720px; }

/* --- Утилиты ------------------------------------------------ */
.muted  { color: var(--ink-2); }
.tiny   { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.small  { font-size: var(--fs-sm); }
.lead   { font-size: var(--fs-lead); color: var(--ink-2); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.accent { color: var(--accent); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Цифры всегда табличные — суммы и сроки не должны прыгать */
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Доступность и тач
   ------------------------------------------------------------ */
a, button, summary, label, select, [role="button"], [role="tab"] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(61, 92, 255, .14);
}
input, textarea { cursor: text; }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .55; }

@media (pointer: coarse) {
  .btn, .msg-btn, .pill, .mobile-bar a, .fab__list a, .burger { min-height: 44px; }
  .msg-btn, .fab__list a { min-width: 44px; width: 44px; height: 44px; }
  .pill { padding-block: 11px; }
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 12px 20px; border-radius: var(--r-control);
  background: var(--accent); color: #fff; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* Движение: один оркестрованный момент — отрисовка коридора.
   Секции не выезжают при скролле. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}