/* ════════════════════════════════════════════════════════════════════
   Каркас страницы: контейнер, секции, шапки секций, базовые сетки.
   Макет нарисован в 1440px; здесь он превращается в текучий, но
   пропорции и вертикальный ритм макета сохраняются на десктопе.
   ════════════════════════════════════════════════════════════════════ */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: clip; /* держит декоративные ореолы внутри страницы */
}

/* Единая ширина контента: 1240px по центру + текучие поля. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-py);
  border-top: 1px solid var(--c-line);
}
.section--flush { border-top: 0; }

/* Шапка секции: надзаголовок-«индекс» + крупный заголовок. */
.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-9);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-dim);
}
.eyebrow--accent   { color: var(--c-accent); }
.eyebrow--accent-2 { color: var(--c-accent-2); }

/* Маркер перед надзаголовком: либо штрих, либо вращающееся кольцо. */
.eyebrow__dash {
  flex-shrink: 0;
  width: 28px;
  height: 1px;
  background: currentColor;
}
.eyebrow__ring {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: 1.5px dashed currentColor;
  border-radius: 50%;
}
.eyebrow__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  color: var(--c-text);
  text-wrap: balance;
}

.section__lead {
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--c-muted);
}

/* ── Сетки ─────────────────────────────────────────────────────────── */
/* auto-fit + minmax: колонки схлопываются сами, без каскада брейкпоинтов. */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

/* Ровно две колонки там, где схлопывание по ширине ломает смысл пары
   (сравнение «слева/справа»). Переключается одним брейкпоинтом. */
.grid--pair { grid-template-columns: 1fr; gap: var(--grid-gap-lg); }
@media (min-width: 860px) {
  .grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ── Декоративные слои секций ──────────────────────────────────────── */

/* Точечная сетка, медленно дрейфующая под заголовком. */
.bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(236, 240, 238, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 20%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 80% at 30% 20%, #000 0%, transparent 100%);
  pointer-events: none;
}

/* Цветной ореол. Позиция и цвет задаются инлайново на месте применения. */
.bg-halo {
  position: absolute;
  background: radial-gradient(ellipse at center, var(--halo, transparent), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Поднимает контент над декоративными слоями. */
.layer { position: relative; z-index: 1; }