/* Базовый слой: сброс, типографика, сетка, общие компоненты.
   Радиусов и теней в проекте нет — это решение бренда, а не упущение. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Страница по горизонтали не скроллится никогда — требование брифа.
     clip вместо hidden: не ломает position: sticky у шапки. */
  overflow-x: clip;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0;
  letter-spacing: -0.03em;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--scarlet-light); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--scarlet); }

img { max-width: 100%; display: block; }

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

/* --- Сетка --- */

.page { background: var(--bg); }

.wrap {
  width: 100%;
  /* Контент ровно 1160 (как в макете), поля 40 идут сверх него, а не внутрь. */
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (max-width: 767px) {
  /* max() — на телефонах с вырезом поле не уже безопасной зоны экрана */
  .wrap {
    padding-left: max(var(--gutter-mobile), env(safe-area-inset-left));
    padding-right: max(var(--gutter-mobile), env(safe-area-inset-right));
  }
}

.section { padding-top: 64px; padding-bottom: 64px; }
.section--tight { padding-top: 48px; padding-bottom: 48px; }
.section--light { background: var(--bg-light); color: var(--ink-dark); }
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: var(--ink-dark); }

/* --- Типографическая шкала --- */

.t-hero { font-family: var(--font-head); font-size: 64px; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; }
.t-h1 { font-family: var(--font-head); font-size: 42px; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
.t-h2 { font-family: var(--font-head); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
.t-h3 { font-family: var(--font-head); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.t-h4 { font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.t-num { font-family: var(--font-head); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.t-lead { font-size: 17px; line-height: 1.6; }
.t-small { font-size: 15px; line-height: 1.55; }
.t-caption { font-size: 14px; line-height: 1.55; }
.t-over {
  font-family: var(--font-mono); font-size: 13px; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.t-meta { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }

.ink-200 { color: var(--ink-200); }
.ink-400 { color: var(--ink-400); }
.ink-500 { color: var(--ink-500); }
.ink-dark-600 { color: var(--ink-dark-600); }
.scarlet { color: var(--scarlet); }

@media (max-width: 767px) {
  .t-hero { font-size: 34px; letter-spacing: -0.03em; }
  .t-h1 { font-size: 28px; }
  .t-h2 { font-size: 24px; }
  .t-num { font-size: 34px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section--tight { padding-top: 44px; padding-bottom: 44px; }
}

/* --- Кнопки --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 30px;
  border: 0; border-radius: 0;
  font-weight: 600; font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn--primary { background: var(--scarlet); color: #FFFFFF; }
.btn--primary:hover { background: var(--scarlet-hover); color: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--light { background: var(--ink-dark); color: #FFFFFF; }
.btn--light:hover { background: #000000; color: #FFFFFF; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--disabled); color: var(--ink-600); cursor: not-allowed; }

@media (max-width: 767px) {
  .btn { width: 100%; height: 52px; padding: 0 24px; font-size: 16px; }
  .btn--inline { width: auto; }
}

/* --- Карточки и плашки --- */

.card { background: var(--surface); border: 1px solid var(--border); padding: 32px; }
.card--light { background: var(--surface-light); border-color: var(--border-light); }
.note { border-left: 3px solid var(--border-strong); background: var(--surface-alt); padding: 18px 20px; }
.note--info { border-left-color: var(--cyan); background: var(--info-bg); }
.note--error { border-left-color: var(--scarlet); background: var(--error-bg); }
.note--warn { border-left-color: var(--scarlet); background: var(--warn-bg); }

@media (max-width: 767px) {
  .card { padding: 20px; }
}