/* ============================================================================
   MINGLEE — Section styles. Consumes tokens.css only.
   Order: header · hero · services · about · pricing · results · contact
          · footer · motion · responsive
   ============================================================================ */

:where(section[id], [id].hero) { scroll-margin-top: 92px; }

/* ============================ HEADER ===================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: background-color var(--motion-duration-component) var(--motion-ease-standard),
              box-shadow var(--motion-duration-component) var(--motion-ease-standard),
              border-color var(--motion-duration-component) var(--motion-ease-standard);
  background: var(--header-plate-bg);
  border-bottom: 1px solid var(--header-plate-border);
}
/* Full-bleed dark band; the inner track still aligns with the hero and footer. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  min-height: 64px;
  margin-top: var(--header-plate-inset);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Nothing left for the scroll handler to change; the class stays on the
   element because the same script drives it on every case page. */
.site-header.is-scrolled { border-bottom-color: transparent; }

/* flex:none — otherwise the row squeezes the logo down to ~95px at 1024. */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; flex: none; }
.brand__mark { width: 42px; height: 42px; color: var(--color-ink); flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__monogram {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: none;
}
/* Размер задаётся высотой, а не шириной: знак из футера квадратный, и при
   фиксированной ширине он раздувал шапку до 173px. По высоте правило
   переживает смену файла на любое соотношение сторон. */
.brand__logo {
  display: block;
  height: 44px;
  width: auto;
  filter: var(--header-logo-filter);
}
/* Горизонтальный светлый логотип шапки: цветной, поэтому без фильтра
   .brand__logo. Размер по высоте, ширина следует пропорциям файла. */
.brand__wordmark {
  display: block;
  height: 30px;
  width: auto;
  flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text strong {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-heading);
}
.brand__text small {
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-top: 0.28em;
}
.site-header .brand__text strong { color: var(--color-on-dark); }
.site-header .brand__text small { color: var(--color-on-dark-soft); }

.nav { margin-inline: auto; }
.nav__list { display: flex; gap: clamp(1rem, 1.8vw, 2.1rem); }
.nav__list a {
  position: relative;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  padding-block: 0.4rem;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
}
.nav__list a:hover::after, .nav__list a:focus-visible::after { transform: scaleX(1); }

/* Контурная, хотя в разметке это btn--primary: залитая кнопка на первом
   экране одна — «Начать сейчас», и шапка не должна с ней спорить.
   Заливается на наведении, подтверждая, что действие то же. */
.site-header__cta {
  flex: none;
  --btn-bg: var(--color-lime);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-lime);
  min-height: var(--btn-height-sm);
  padding-inline: 1.3rem;
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
  --btn-bg: var(--color-on-dark);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-on-dark);
}
/* Пункты меню не переносятся внутри себя: подпись кнопки стала длиннее из-за
   широкого трека, и «Обо мне» ломалось на две строки. */
.nav__list a { white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  place-items: center;
}
.nav-toggle__box { position: relative; width: 22px; height: 14px; display: block; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: var(--color-heading);
  border-radius: 2px;
  transition: transform var(--motion-duration-state) var(--motion-ease-standard), opacity var(--motion-duration-micro) linear;
}
.nav-toggle__bar { top: 50%; transform: translateY(-50%); }
.nav-toggle__bar::before { content: ""; top: -6px; }
.nav-toggle__bar::after { content: ""; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  position: absolute;
  inset: 100% 0 auto;
  z-index: -1;
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: var(--container-pad);
  display: grid;
  gap: 1.2rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.85rem);
  visibility: hidden;
  transition:
    opacity var(--motion-duration-state) var(--motion-ease-standard),
    transform var(--motion-duration-component) var(--motion-ease-standard),
    visibility 0s linear var(--motion-duration-component);
}
.mobile-nav[hidden] { display: grid; }
.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity var(--motion-duration-state) var(--motion-ease-standard),
    transform var(--motion-duration-component) var(--motion-ease-standard);
}
/* Drawer CTA is the mobile stand-in for the header button — same height. */
.mobile-nav .btn { min-height: var(--btn-height); }
.mobile-nav__list { display: grid; gap: 0.3rem; }
.mobile-nav__list a {
  display: block;
  padding: 0.85rem 0.4rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-line);
}

/* ============================= HERO ===================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(720px, 100vh, 1060px);
  /* Clears the floating plate with room to spare — the headline must not
     crowd the header the way it did at a flat 84px. */
  padding-top: clamp(124px, 14vh, 168px);
  overflow: hidden;
  background: var(--color-dark-deep);
  color: var(--color-on-dark);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  filter: var(--hero-bg-grade);
}
.hero__scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(100% - var(--section-py)),
      var(--color-bg) 100%
    ),
    var(--hero-scrim);
}
.hero__man {
  position: absolute;
  right: clamp(48px, 11vw, 180px);
  bottom: 0;
  height: clamp(600px, 98%, 1040px);
  width: auto;
  z-index: -1;
  object-fit: contain;
  object-position: bottom center;
  filter: var(--hero-man-grade) var(--hero-man-shadow);
  pointer-events: none;
}
.hero__watermark {
  position: absolute;
  right: clamp(-1rem, 2vw, 3rem);
  top: 40%;
  z-index: -1;
  font-size: clamp(3rem, 9vw, 8rem);
  color: rgba(255,255,255,.06);
  letter-spacing: 0.02em;
  transform: rotate(90deg);
  transform-origin: right center;
  pointer-events: none;
  user-select: none;
}

.hero__grid {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  /* Width comes from the shared plate rule in the header block — do not set
     it here, or the H1 drops off the logo's axis below 1500px. */
}
.hero__content {
  max-width: 43rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--hero-content-pad-block);
}
.hero__title {
    font-family: var(--font-hero);
    font-size: var(--hero-title-size);
    font-weight: 400;
    font-synthesis: none;
    line-height: var(--hero-title-lh);
    letter-spacing: var(--hero-title-track);
    color: var(--color-on-dark);
  }
/* The face is upright; the existing lean stays a layout gesture rather than
   a synthesized italic style. */
.hero__title-line {
  display: block;
  white-space: nowrap;
  transform-origin: left bottom;
}
.hero__title-br { display: none; }
/* Наклон убран: это был синтетический курсив, а строкой выше стоит
   font-synthesis: none — правило и приём противоречили друг другу. */
/* Solid colour first: it is what ships if background-clip:text is unavailable,
   and the line must never render as invisible text. */
.hero__title-line--accent {
  color: var(--hero-title-grad-from);
  filter: var(--hero-title-glow);
  /* background-clip: text красит только внутри бокса, а выносные элементы
     Ampero из него выходят. Поле даёт градиенту запас, отрицательный отступ
     возвращает строку на место: раскладка не меняется, буквы не срезаются. */
  padding-block: 0.1em 0.06em;
  margin-block: -0.1em -0.06em;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero__title-line--accent {
    background-image: linear-gradient(
      98deg,
      var(--hero-title-grad-from) 0%,
      var(--hero-title-grad-to) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.hero__eyebrow {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  margin-top: 1.5rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}
.hero__eyebrow span { display: inline-flex; align-items: center; }
.hero__eyebrow span:not(:first-child)::before {
  content: "";
  width: 7px; height: 7px;
  margin-right: 1.1rem;
  background: var(--color-lime);
  border-radius: 50%;
}
.hero__lead {
  margin-top: var(--hero-title-lead-gap);
  max-width: var(--hero-lead-measure);
  font-size: var(--hero-lead-size);
  line-height: var(--hero-lead-lh);
  font-weight: 400;
  color: var(--color-on-dark);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  gap: var(--hero-actions-gap);
  margin-top: var(--hero-lead-actions-gap);
}
/* Высоту и поля задаёт общая система кнопок — здесь только то, что
   специфично для героя: матовая подложка под контурной, иначе рамка
   теряется на бетоне. */
.hero__actions .btn--ghost {
  --btn-bg: var(--hero-ghost-btn-bg);
  --btn-fg: var(--color-on-dark);
  --btn-line: rgba(255,255,255,.46);
  backdrop-filter: var(--hero-ghost-btn-blur);
  -webkit-backdrop-filter: var(--hero-ghost-btn-blur);
}
.hero__actions .btn--ghost:hover,
.hero__actions .btn--ghost:focus-visible {
  --btn-bg: var(--color-on-dark);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-on-dark);
}
.hero__actions .btn--primary {
  --btn-bg: var(--color-lime);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-lime);
}
.hero__actions .btn--primary:hover,
.hero__actions .btn--primary:focus-visible {
  --btn-bg: var(--color-on-dark);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-on-dark);
}

.hero__badge {
  position: absolute;
  top: auto;
  bottom: clamp(150px, 14vh, 200px);
  right: clamp(20px, 3vw, 48px);
  width: clamp(96px, 10vw, 148px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  z-index: 2;
}
.hero__badge::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--hero-badge-bg);
  border: 1px solid var(--hero-badge-border);
  box-shadow: var(--hero-badge-shadow);
}
.hero__badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 30s linear infinite;
}
.hero__badge-ring text {
    font-family: var(--font-body);
    font-size: var(--hero-badge-ring-size);
    font-weight: 700;
    letter-spacing: 1.5px;
    fill: var(--color-heading);
  }
.hero__badge-mark { position: relative; width: 58%; }
.hero__badge-mark img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: var(--hero-badge-logo-shadow);
}

/* =========================== SERVICES =================================== */
.services,
.pricing,
.contact,
.about { background: var(--color-bg); }
.results { background: var(--color-section-alt); }

.services > .container {
  position: relative;
  z-index: 1;
}

/* Одно число ведёт боковое раскрытие ячейки на широком экране: ширину кадра и
   его непрозрачность. Регистрируем его, иначе кастомное свойство не
   анимируется — и переход получился бы ступенькой вместо разворота. */
@property --open {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.services__grid {
  --service-grid-gap: 30px;
  display: grid;
  gap: var(--service-grid-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service {
  --open: 0;
  display: grid;
  overflow: hidden;
  background: var(--service-card-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition:
    background-color var(--motion-duration-component) var(--motion-ease-standard),
    border-color var(--motion-duration-component) var(--motion-ease-standard);
}
.service.is-open { --open: 1; }

/* ---- шапка: единственный орган управления ------------------------------ */
/* Кнопка занимает всю ширину ячейки, а не только надпись: на телефоне целью
   тапа обязана быть полоса, а не 12 знаков заголовка. */
.service__head { margin: 0; }
.service__toggle {
  display: grid;
  grid-template-columns: var(--service-index-width) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--service-head-gap);
  width: 100%;
  min-height: var(--service-head-min-height);
  padding: var(--service-head-pad-y) var(--service-head-pad-x);
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.service__index {
  font-family: var(--font-display);
  font-size: var(--service-index-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--service-index-idle);
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-duration-state) var(--motion-ease-standard);
}
.service.is-open .service__index { color: var(--service-index-open); }
.service__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.55vw, 1.55rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-heading);
  transition: color var(--motion-duration-state) var(--motion-ease-standard);
}
.service__caret {
  width: var(--service-caret-size);
  height: var(--service-caret-size);
  color: var(--color-on-dark-soft);
  transition:
    transform var(--motion-duration-state) var(--motion-ease-standard),
    color var(--motion-duration-state) var(--motion-ease-standard);
}
.service.is-open .service__caret {
  transform: rotate(180deg);
  color: var(--color-heading);
}
.service__toggle:focus-visible {
  outline: 2px solid var(--color-aqua);
  outline-offset: -4px;
  border-radius: var(--radius-lg);
}

/* ---- тело ------------------------------------------------------------- */
.service__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service__text {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  line-height: 1.62;
}
/* Действие идёт сразу за абзацем, а не прижимается к низу карточки:
   так оно читается как продолжение текста, а не как отдельная полка. */
.service__action {
  margin-top: 1.15rem;
  --btn-bg: var(--color-on-dark);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-on-dark);
}
.service__action:hover,
.service__action:focus-visible {
  --btn-bg: var(--color-lime);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-lime);
}

/* ======================= форматы: узкая ось (<=1080) ==================== */
/* Вертикальный аккордеон. Открыта одна карточка; остальные свёрнуты до
   шапки, и высота панели ведётся через grid-template-rows 0fr -> 1fr —
   без max-height, поэтому анимация не зависит от угаданной высоты. */
@media (max-width: 1080px) {
  .services__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }
  .service { grid-template-rows: auto 1fr; }
  .service.is-open {
    background: var(--service-card-bg-open);
    border-color: color-mix(in srgb, var(--color-on-dark) 22%, transparent);
  }
  .service__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--motion-duration-component) var(--motion-ease-standard);
  }
  .service.is-open .service__panel { grid-template-rows: 1fr; }
  /* Ровно один ребёнок на схлопывающуюся строку: с двумя вторая уходит в
     неявный auto-ряд и карточка не закрывается до конца. Обрезание живёт
     здесь же, а внутренние поля — ниже, иначе они схлопываются вместе с
     высотой и текст выползает из закрытой карточки. */
  .service__panel-inner { min-height: 0; overflow: hidden; }

  .service__media {
    display: block;
    aspect-ratio: var(--service-media-ratio);
    margin: 0;
  }
  .service__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .service__body { padding: var(--service-panel-pad); }
  /* Лайм во всю ширину панели: на телефоне это единственное действие
     в раскрытой карточке, и оно обязано читаться как основное. */
  .service__action {
    --btn-bg: var(--color-lime);
    --btn-line: var(--color-lime);
    display: flex;
    width: 100%;
    min-height: var(--btn-height);
    justify-content: space-between;
    margin-top: 1.35rem;
  }
  .service__action .btn__arrow { height: calc(var(--btn-height) - var(--btn-border-width) * 2); }
  .service__action:hover,
  .service__action:focus-visible {
    --btn-bg: var(--color-on-dark);
    --btn-line: var(--color-on-dark);
  }
}

@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .service__panel { transition: none; }
}

/* ======================= форматы: широкая ось (>=1081) ================== */
/* Боковой разворот. Обёртка панели растворяется через display: contents,
   и кадр с текстом становятся ячейками той же сетки, что и шапка: левая
   колонка кадра растёт от нуля до половины ячейки. */
@media (min-width: 1081px) {
  .services__grid {
    grid-template-columns: 2.21fr 1fr 1fr;
    container-type: inline-size;
  }
  .service {
    grid-template-columns: calc(var(--open) * 50%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .service__panel,
  .service__panel-inner { display: contents; }
  .service__head  { grid-column: 2; grid-row: 1; }
  .service__body  { grid-column: 2; grid-row: 2; }
  .service__media {
    display: block;
    grid-column: 1;
    grid-row: 1 / -1;
    position: relative;
    min-width: 0;
    margin: 0;
    opacity: var(--open);
  }
  /* Кадр заполняет высоту ячейки, но не задаёт её: иначе высоту диктует
     пропорция картинки и ряд поедет при любой другой фотографии. */
  .service__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Номер и шеврон — навигация по свёрнутому списку. На широком экране
     свёрнутых карточек нет: все три видны целиком, и обе метки лишние. */
  .service__index,
  .service__caret { display: none; }
  .service__toggle {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: clamp(1.5rem, 2.2vw, 1.85rem) clamp(1.5rem, 2.2vw, 1.85rem) 0;
  }
  .service__body {
    padding: 0.75rem clamp(1.5rem, 2.2vw, 1.85rem) clamp(1.5rem, 2.2vw, 1.85rem);
  }
  /* Ширина текста фиксирована в единицах свёрнутой ячейки: сетка
     перераспределяет колонки, но перенос строк меняться не должен. */
  .service__toggle,
  .service__body {
    width: calc((100cqw - var(--service-grid-gap) - var(--service-grid-gap)) / 4.21);
  }
  /* Наведение и фокус раскрывают ячейку, как раньше; клик по шапке
     закрепляет её и даёт клавиатуре ту же возможность. */
  .service:hover,
  .service:focus-within { --open: 1; }
  .service:hover,
  .service:focus-within,
  .service.is-open { background: var(--color-card-light); }
  .service:hover,
  .service:focus-within { border-color: var(--color-primary-deep); }
  .service:hover .service__name,
  .service:focus-within .service__name,
  .service.is-open .service__name { color: var(--color-card-light-text); }
  .service:hover .service__text,
  .service:focus-within .service__text,
  .service.is-open .service__text { color: var(--color-card-light-muted); }
  .service:hover .service__action,
  .service:focus-within .service__action,
  .service.is-open .service__action {
    --btn-bg: var(--color-ink);
    --btn-fg: var(--color-on-dark);
    --btn-line: var(--color-ink);
  }
  .service .service__action:hover,
  .service .service__action:focus-visible {
    --btn-bg: var(--color-lime);
    --btn-fg: var(--color-ink);
    --btn-line: var(--color-lime);
  }
  /* Пока курсор держит соседний формат, закреплённая ячейка отдаёт светлое
     состояние: одновременно светлых быть не должно. */
  .services__grid:has(> .service:hover) > .service.is-open:not(:hover),
  .services__grid:has(> .service:focus-within) > .service.is-open:not(:focus-within) {
    --open: 0;
    background: var(--service-card-bg);
    border-color: var(--color-line);
  }
  .services__grid:has(> .service:hover) > .service.is-open:not(:hover) .service__name,
  .services__grid:has(> .service:focus-within) > .service.is-open:not(:focus-within) .service__name {
    color: var(--color-heading);
  }
  .services__grid:has(> .service:hover) > .service.is-open:not(:hover) .service__text,
  .services__grid:has(> .service:focus-within) > .service.is-open:not(:focus-within) .service__text {
    color: var(--color-text-soft);
  }
  .services__grid:has(> .service:hover) > .service.is-open:not(:hover) .service__action,
  .services__grid:has(> .service:focus-within) > .service.is-open:not(:focus-within) .service__action {
    --btn-bg: var(--color-on-dark);
    --btn-fg: var(--color-ink);
    --btn-line: var(--color-on-dark);
  }
}

/* ============================ ABOUT ===================================== */
/* Композиционная идея: фигура — центральная масса, заголовок физически заходит
   под неё слева, метод расходится вправо. Три бывшие независимые колонки
   заменены одной сеткой с наложением слоёв. */
.about { overflow: hidden; }
.about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.6vw, 1.5rem);
  align-items: start;
}

/* ---- слой 1: заголовок ------------------------------------------------- */
.about__intro {
  grid-column: 1 / 9;
  grid-row: 1;
  z-index: 1;
  min-width: 0;
}
.about__title {
  /* Строки — блоки, чтобы каждую можно было маскировать по отдельности.
     Кегль заметно крупнее общего --section-title-size: заголовок обязан
     физически дотянуться до фигуры, иначе пересечения просто нет. */
  display: grid;
  justify-items: start;
  margin-top: 0.6rem;
}
.about__line { display: block; }
/* Кегль общий, как у всех H2 на сайте. До фигуры заголовок дотягивается
   длиной строки, а не размером: разбитая на две строки фраза в 29 знаков
   физически не достаёт до корпуса, поэтому она идёт одной строкой, которую
   перебивает голова. Ниже 1200px строка переносится обычным образом. */
@media (min-width: 1200px) {
  .about__line { white-space: nowrap; }
}

/* ---- слой 2: фигура ---------------------------------------------------- */
/* Кадр режется контейнером по бедро: в полный рост голова мелкая и человек
   перестаёт быть доминантой. Обрезка жёсткая, без растворения — это
   controlled geometry, а не мягкий градиент. */
.about__figure {
  grid-column: 5 / 10;
  grid-row: 1 / 4;
  position: relative;
  z-index: 2;
  align-self: start;
  margin-top: clamp(1rem, 3vw, 3rem);
  aspect-ratio: 541 / 1000;
  overflow: hidden;
  pointer-events: none;
  /* Жёсткий рез по ногам читается как обрезанная фотография. На плоском
     тёмном фоне это лечится растворением: последние 18% кадра уходят в
     прозрачность, и фигура выходит из фона, а не лежит на нём вырезкой. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%,
      rgba(0, 0, 0, 0.88) 62%, rgba(0, 0, 0, 0.55) 74%,
      rgba(0, 0, 0, 0.22) 85%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 48%,
      rgba(0, 0, 0, 0.88) 62%, rgba(0, 0, 0, 0.55) 74%,
      rgba(0, 0, 0, 0.22) 85%, transparent 96%);
}
.about__cut {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}
/* ---- слой 3: лид, число, CTA ------------------------------------------ */
.about__body {
  grid-column: 1 / 5;
  grid-row: 2;
  z-index: 3;
  min-width: 0;
  margin-top: clamp(1.4rem, 3vw, 2.6rem);
}
.about__lead {
  color: var(--color-text-soft);
  font-size: var(--wp--preset--font-size--large);
}
.about__stat {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.about__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 5.4vw, 5.4rem);
  line-height: 0.82;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}
.about__stat-cap {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--color-text-soft);
}
.about__cta { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ---- слой 4: принципы -------------------------------------------------- */
.about__approach {
  grid-column: 10 / 13;
  grid-row: 1 / 4;
  z-index: 3;
  min-width: 0;
  padding-top: clamp(5rem, 12vw, 11rem);
}
.about__approach-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 2.3vw, 2.35rem);
  line-height: var(--lh-tight);
  letter-spacing: 0.04em;
  color: var(--color-heading);
  padding-bottom: 0.9rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-line);
}
.approach-list { display: grid; gap: clamp(1.4rem, 2.6vw, 2.2rem); margin-top: 1.5rem; }
.approach { display: flex; gap: 0.9rem; align-items: flex-start; }
/* Ступенчатый сдвиг влево ведёт группу к фигуре и превращает список в
   композицию вокруг центральной массы, а не в обычный feature list. Приём
   живёт только там, где фигура действительно стоит рядом: без этого условия он просто
   выталкивает вторую и третью строки за левый край экрана. */
@media (min-width: 1101px) {
  .approach:nth-child(2) { transform: translateX(-0.9rem); }
  .approach:nth-child(3) { transform: translateX(-1.8rem); }
}
.approach__text { min-width: 0; }
.approach__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-top: 0.55rem;
  color: var(--color-text-soft);
  /* Motion Club: движение на ховере — это brand expression, не декор. */
  transition:
    color var(--motion-duration-state) var(--motion-ease-standard),
    transform var(--motion-duration-state) var(--motion-ease-standard);
}
.approach__icon svg { width: 26px; height: 26px; }
.approach__title {
  font-size: clamp(1.5rem, 1.75vw, 1.8rem);
  line-height: 1.02;
  letter-spacing: 0.045em;
  margin-bottom: 0.4rem;
  transition: color var(--motion-duration-state) var(--motion-ease-standard);
}
.approach p { color: var(--color-text-soft); font-size: 0.95rem; }
/* Аква, а не лайм: лайм в системе означает «здесь действие», а принципы не
   кликабельны — иначе размывается единственный сигнал приоритета. */
.approach:is(:hover, :focus-within) .approach__icon {
  color: var(--color-turquoise);
  transform: rotate(-8deg) scale(1.06);
}
.approach:is(:hover, :focus-within) .approach__title { color: var(--color-turquoise); }

@media (prefers-reduced-motion: reduce) {
  .approach:is(:hover, :focus-within) .approach__icon { transform: none; }
}

/* ---- планшет: фигура уходит вправо, принципы под текст ----------------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .about__intro { grid-column: 1 / 8; }
  .about__figure { grid-column: 7 / 13; grid-row: 1 / 3; }
  .about__body { grid-column: 1 / 7; grid-row: 2; }
  .about__approach {
    grid-column: 1 / 13;
    grid-row: 3;
    padding-top: clamp(2rem, 5vw, 3rem);
  }
  .approach-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 2.4vw, 2rem);
  }
}

/* ---- узкие экраны: идея переводится, а не схлопывается ----------------- */
/* Пересечение сохраняется: фигура наезжает на заголовок отрицательным
   отступом, порядок повествования — кто он, чем доказан, как работает.
   Порог 900px, а не 720: между ними колонки уже настолько узкие, что
   заголовок перестаёт дотягиваться до фигуры и приём разваливается. */
@media (max-width: 900px) {
  .about__grid { display: block; }
  .about__title { margin-top: 0.4rem; }
  .about__line:nth-child(2) { white-space: normal; }
  .about__figure {
    width: min(88%, 420px);
    margin: -8% 0 0 auto;
    aspect-ratio: 541 / 820;
  }
  .about__body { margin-top: -6%; position: relative; z-index: 3; }
  .about__approach { padding-top: 2.5rem; }
  .approach-list { grid-template-columns: minmax(0, 1fr); }
}

/* =========================== PRICING ==================================== */
/* Арки сознательно выходят за границы секции и заходят на соседние: это
   графический элемент сцены, а не декор внутри коробки. Горизонталь уже
   закрыта на уровне страницы через body { overflow-x: clip }, поэтому
   локальный overflow: hidden только резал их по вертикали.
   z-index поднимает секцию над следующей, иначе её фон закрасил бы арки. */
.pricing { position: relative; z-index: 2; }
.pricing__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.6rem);
}
.pricing__note { max-width: 34ch; color: var(--color-text-soft); font-size: var(--wp--preset--font-size--large); }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: center;
}
.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: clamp(1.6rem, 2.4vw, 2.4rem);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--price-card-shadow);
    transition:
      border-color var(--motion-duration-state) var(--motion-ease-standard),
      box-shadow var(--motion-duration-state) var(--motion-ease-standard),
      background-color var(--motion-duration-state) var(--motion-ease-standard);
  }
.price-card--featured {
    background: var(--color-card-light);
    border-color: var(--price-card-featured-border);
    color: var(--color-ink);
    padding-block: clamp(2.2rem, 3vw, 3.2rem);
    box-shadow: var(--price-card-featured-shadow);
  }
.price-card:hover,
.price-card:focus-within {
    border-color: var(--price-card-hover-border);
    box-shadow: var(--price-card-hover-shadow);
}
.price-card--featured:hover,
.price-card--featured:focus-within {
    border-color: var(--price-card-featured-hover-border);
    box-shadow: var(--price-card-featured-hover-shadow);
}
.price-card__badge {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--color-lime);
  color: var(--color-ink);
  padding: var(--price-card-badge-padding);
    border-radius: var(--radius-pill);
    font-size: var(--price-card-badge-font-size);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--motion-duration-state) var(--motion-ease-standard);
  }
.price-card:hover .price-card__badge,
.price-card:focus-within .price-card__badge {
    background: var(--price-card-badge-hover-bg);
}
.price-card__name { font-size: var(--wp--preset--font-size--x-large); font-weight: 600; }
/* Полоса интенсивности: доля от максимальных 12 тренировок. Сравнить
   тарифы теперь можно одним взглядом по длине, не читая три списка. */
.price-card__meter {
  display: block;
  height: 3px;
  margin-bottom: 0.6rem;
  background: var(--color-line);
  border-radius: 2px;
  overflow: hidden;
}
.price-card__meter::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--sessions) / 12 * 100%);
  background: var(--color-aqua);
}
.price-card--featured .price-card__meter { background: rgba(0, 26, 22, 0.18); }
.price-card--featured .price-card__meter::before { background: var(--wp--preset--color--aqua-deep); }

.price-card__meta {
  margin-top: 0.25rem;
  font-size: var(--price-card-meta-font-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
}
.price-card--featured .price-card__meta { color: color-mix(in srgb, var(--color-ink) 72%, transparent); }
.price-card--featured .price-card__name { color: var(--color-ink); }
.price-card__price { display: flex; align-items: baseline; gap: 0.35rem; }
.price-card__amount { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: var(--color-heading); line-height: 1; }
.price-card--featured .price-card__amount { color: var(--color-ink); }
.price-card__cur { font-family: var(--font-display); font-size: var(--price-card-currency-font-size); color: var(--color-text-soft); }
.price-card--featured .price-card__cur { color: color-mix(in srgb, var(--color-ink) 72%, transparent); }
.price-card__list { display: grid; gap: 0.75rem; flex: 1; }
.price-card__list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--color-text); font-size: var(--price-card-list-font-size); }
.price-card__list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-primary-deep); }
.price-card--featured .price-card__list li { color: color-mix(in srgb, var(--color-ink) 88%, transparent); }
.price-card--featured .price-card__list svg { color: var(--color-ink); }
.price-card .btn {
  --btn-bg: var(--color-on-dark);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-on-dark);
}
.price-card--featured .btn {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-on-dark);
  --btn-line: var(--color-ink);
}
.price-card .btn:hover,
.price-card .btn:focus-visible {
  --btn-bg: var(--color-lime);
  --btn-fg: var(--color-ink);
  --btn-line: var(--color-lime);
}
.pricing__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(178px, 16vw, 246px);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.pricing__aside { position: relative; align-self: stretch; display: flex; align-items: center; }
.pricing__pitch {
  position: relative;
  z-index: 2;
  max-width: 11ch;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--color-heading);
}
.pricing__pitch-bar {
  display: block;
  width: 52px; height: 4px;
  margin-bottom: 1.1rem;
  background: var(--color-lime);
  border-radius: 2px;
}
.pricing__arcs {
  position: absolute;
  top: 50%; left: 36%;
  width: clamp(340px, 32vw, 520px);
  aspect-ratio: 480 / 760;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.pricing__arcs svg { width: 100%; height: 100%; overflow: visible; }
.pricing__arcs .arc { opacity: 0.28; }
.pricing__arcs .arc--flow { stroke-dasharray: 70 1820; }
@media (prefers-reduced-motion: no-preference) {
  .pricing__arcs .arc { animation: arcPulse 3.4s var(--motion-ease-standard) infinite; }
  .pricing__arcs .arc:nth-child(2) { animation-delay: 0.45s; }
  .pricing__arcs .arc:nth-child(3) { animation-delay: 0.9s; }
  .pricing__arcs .arc:nth-child(4) { animation-delay: 1.35s; }
  .pricing__arcs .arc:nth-child(5) { animation-delay: 1.8s; }
  .pricing__arcs .arc--flow { animation: arcPulse 3.4s var(--motion-ease-standard) infinite, arcFlow 4.6s linear infinite; }
}
@keyframes arcPulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.82; } }
@keyframes arcFlow { to { stroke-dashoffset: -1890; } }

/* =========================== RESULTS ==================================== */
.results {
  background: var(--results-bg);
  overflow: hidden;
}
.results__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem 3rem;
  max-width: none;
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
}
.results__head > div:first-child { min-width: 0; }
.results .eyebrow {
  color: var(--results-accent);
  letter-spacing: 0.14em;
}
.results .eyebrow::before { background: var(--results-accent); }
.results .section-title {
  max-width: none;
  margin-top: 1.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.results__nav { display: flex; flex: none; gap: 0.65rem; padding-bottom: 0.15rem; }
.results__arrow {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid var(--results-card-line);
  border-radius: 50%;
  background: transparent;
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard);
}
.results__arrow svg { width: 19px; height: 19px; }
.results__arrow:hover,
.results__arrow:focus-visible {
  background: var(--color-lime);
  color: var(--color-ink);
  border-color: var(--color-lime);
}
.results__arrow:disabled {
  opacity: 0.38;
  background: transparent;
  color: var(--color-on-dark-soft);
  border-color: var(--results-card-line);
  cursor: default;
}

.results__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 0;
  padding-bottom: 0.15rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.results__viewport::-webkit-scrollbar { display: none; }
.results__track { display: flex; width: 100%; align-items: stretch; gap: var(--results-gap); }
/* Оболочка карточки снята: рамка с радиусом и фоном весила больше содержимого,
   и взгляд считывал ряд одинаковых прямоугольников вместо ряда результатов.
   Группу держит близость, кадр и число ложатся прямо на сцену секции. */
.result-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 calc((100% - 2 * var(--results-gap)) / 3);
  min-width: 0;
  /* Высота больше не фиксируется числом: кадр квадратный, а карточки в
     flex-строке и так растягиваются до самой высокой. Одно магическое
     значение меньше. */
  height: auto;
  display: flex;
  flex-direction: column;
  /* Карточки вне кадра гаснут — прокрутка получает «фокус чтения» вместо
     равномерной ленты. Движение направленное и без отскока. */
  opacity: 0.34;
  transition:
    opacity var(--motion-duration-component) var(--motion-ease-standard),
    transform var(--motion-duration-component) var(--motion-ease-standard);
}
.result-card.is-in { opacity: 1; }
.result-card__media {
  /* Квадрат, а не горизонтальная полоса: на широком окне вертикальные
     исходники обрезались по торсу и лица в кадр не попадали. */
  flex: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--results-card-radius);
}
.result-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform var(--motion-duration-section) var(--motion-ease-standard);
}
.result-card.is-in .result-card__media img { transform: scale(1); }
.result-card__body {
  min-height: 0;
  padding: 1.25rem 0 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
}
/* Число — единственное, что переживает squint-тест, и именно оно несёт функцию
   секции. Внутри рамки оно уже доминировало, но до масштаба секции не доходило. */
.result-card__metric {
  order: 1;
  margin: 0;
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 3.1vw, 3.1rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.result-card__context {
  order: 2;
  margin: 0.7rem 0 0;
  color: var(--color-on-dark);
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 34ch;
  font-variant-numeric: tabular-nums;
}
.result-card__quote {
  order: 3;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.7rem 0 0;
  color: var(--results-card-muted);
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.5;
  max-width: 34ch;
}
/* Имя ушло вниз: порядок чтения стал «что произошло → как ощущается → с кем».
   Раньше первым шло имя, то есть самое слабое из трёх. */
.result-card__meta {
  order: 4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--results-card-line);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.result-card__name { color: var(--results-card-muted); }
.result-card__time { color: var(--results-accent); white-space: nowrap; }

/* ---- шкала сроков вместо точек ---------------------------------------- */
/* Деления подписаны реальными сроками из data-weeks. Навигация перестаёт быть
   безликой и становится частью смысла — прогресс во времени. Шаг равномерный:
   это степпер с осмысленными подписями, а не пропорциональная ось. */
.results__rail {
  position: relative;
  display: flex;
  margin-top: clamp(1.8rem, 3.4vw, 2.75rem);
  border-top: 1px solid var(--results-card-line);
}
.results__rail button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0 0.2rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--results-card-muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--motion-duration-state) var(--motion-ease-standard);
}
.results__rail button::before {
  content: "";
  width: 1px;
  height: 10px;
  background: var(--results-card-line);
  transition:
    height var(--motion-duration-state) var(--motion-ease-standard),
    width var(--motion-duration-state) var(--motion-ease-standard),
    background-color var(--motion-duration-state) var(--motion-ease-standard);
}
.results__rail button:hover,
.results__rail button:focus-visible { color: var(--color-on-dark); }
/* Деления кликабельны, то есть это действие — а действие в системе несёт
   лайм. Аква осталась бы правильной для некликабельной подписи. */
.results__rail button:hover::before,
.results__rail button:focus-visible::before { height: 14px; background: var(--color-lime); }
.results__rail button[aria-selected="true"] { color: var(--color-lime); }
.results__rail button[aria-selected="true"]::before {
  height: 18px;
  width: 2px;
  background: var(--color-lime);
}

@media (prefers-reduced-motion: reduce) {
  .result-card { opacity: 1; }
  .result-card__media img { transform: none; }
}

/* =========================== CONTACT ==================================== */
.contact__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr 0.85fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
.contact__lead { margin-top: 1.3rem; color: var(--color-text-soft); font-size: var(--wp--preset--font-size--large); max-width: 34ch; }
.contact__badge {
  position: relative;
  display: grid; place-items: center;
  width: clamp(128px, 11vw, 168px);
  aspect-ratio: 1;
  margin-top: 2.5rem;
}
.contact__badge-ring { width: 100%; height: 100%; animation: spin 30s linear infinite; }
.contact__badge-ring text { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; fill: var(--color-heading); }
.contact__badge-arrow {
  position: absolute;
  width: 40%; height: 40%;
  padding: 0;
  color: var(--color-ink);
  background: var(--color-lime);
  border-radius: 50%;
  padding: 12%;
  box-sizing: border-box;
}

.contact__form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--motion-duration-state) var(--motion-ease-standard),
    box-shadow var(--motion-duration-state) var(--motion-ease-standard);
}
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  transition: color var(--motion-duration-state) var(--motion-ease-standard);
}
.field__hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-text-soft); opacity: 0.75; }
.field input, .field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
  transition: border-color var(--motion-duration-state) var(--motion-ease-standard), box-shadow var(--motion-duration-state) var(--motion-ease-standard);
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-soft); opacity: 0.7; }
/* При фокусе складывались три подсветки сразу: кольцо box-shadow на поле,
   поверх него outline 3px, и ещё кольцо на всей карточке формы через
   :focus-within. Оставляем один сигнал — границу самого поля. Кольцо для
   клавиатуры живёт ниже, в :focus-visible, и только там оно и нужно. */
.field input:focus, .field textarea:focus {
  border-color: var(--color-primary);
}
.field:focus-within label { color: var(--color-primary-deep); }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.field--error input, .field--error textarea { border-color: var(--color-danger); }
.contact-form__note { margin-top: 0.6rem; font-size: 0.78rem; color: var(--color-text-soft); }
.contact-form__success {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-aqua) 22%, var(--color-surface));
  border: 1px solid var(--color-aqua);
  color: var(--color-primary-deep);
  font-weight: 600;
}

.contact__list { display: grid; gap: 0.2rem; }
.contact-item { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--color-line); }
.contact-item:last-child { border-bottom: none; }
.contact-item__icon { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-alt); color: var(--color-primary-deep); }
.contact-item__icon svg { width: 24px; height: 24px; }
.contact-item__title { font-weight: 700; color: var(--color-heading); }
.contact-item__title a:hover { color: var(--color-primary-deep); }
.contact-item__sub { color: var(--color-text-soft); font-size: 0.9rem; }

/* ============================ FOOTER ==================================== */
.footer { background: var(--footer-bg); color: var(--color-on-dark); border-top: 1px solid var(--color-line); }
.footer__inner {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3rem, 5vw, 5.5rem) clamp(2rem, 4vw, 3rem);
}
.brand--light .brand__mark { color: var(--color-on-dark); }
.brand--light .brand__text strong { color: var(--color-on-dark); }
.brand--light .brand__text small { color: var(--color-on-dark-soft); }
.footer__brand-link {
  display: inline-flex;
  align-items: center;
}
.footer__logo {
  width: clamp(96px, 8vw, 120px);
  height: auto;
}
.footer__lead {
  max-width: 31ch;
  margin-top: 1.4rem;
  color: var(--color-on-dark);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.45;
}
.footer__copy { margin-top: 1.4rem; color: var(--color-on-dark-soft); font-size: 0.85rem; line-height: 1.5; }
.footer__content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.3rem, 3vw, 2.4rem);
}
.footer__section {
  min-width: 0;
  padding-top: clamp(0.9rem, 1.3vw, 1.25rem);
  border-top: 1px solid var(--color-on-dark-line);
}
.footer__label {
  margin-bottom: 1.15rem;
  color: var(--color-primary);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__links,
.footer__nav ul {
  display: grid;
  gap: 0.72rem;
}
.footer__links,
.footer__cta p {
  color: var(--color-on-dark-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}
.footer__links a,
.footer__nav a,
.footer__top {
  color: var(--color-on-dark-soft);
  transition: color var(--motion-duration-state) var(--motion-ease-standard);
}
.footer__nav a {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer__links a:hover,
.footer__nav a:hover { color: var(--color-on-dark); }
.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.footer__cta .btn { padding-inline: 1.3rem; }
.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--color-on-dark-line);
}
.footer__social { display: flex; gap: 0.6rem; }
.footer__social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--color-on-dark-line);
  border-radius: 50%;
  color: var(--color-on-dark);
  transition: background-color var(--motion-duration-state) var(--motion-ease-standard), color var(--motion-duration-state) var(--motion-ease-standard), border-color var(--motion-duration-state) var(--motion-ease-standard);
}
.footer__social svg { width: 20px; height: 20px; }
.footer__social a:hover { background: var(--color-primary); color: var(--color-ink); border-color: var(--color-primary); }
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer__top:hover { color: var(--color-on-dark); }

/* ============================ MOTION ==================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes motionContactSuccess {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to { clip-path: inset(0); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .contact-form__success:not([hidden]) {
    animation: motionContactSuccess 360ms var(--motion-ease-standard) both;
  }

  /* Единственный авторский жест секции: строка форматов — это три полосы, и
     полосу забирает тот формат, на который смотрят. Наведение
     перераспределяет саму сетку, а текстовый трек остаётся стабильным, пока
     кадр тянется за новой шириной. Отсюда и ощущение, что ячейка не
     «увеличилась», а получила место.
     Только с 1081px: ниже ведущая ячейка и так занимает всю строку.
     При prefers-reduced-motion этого блока нет вовсе — ширины остаются
     фиксированными, а отклик на наведение несут подложка и рамка, которые
     живут в основном правиле. */
  @media (min-width: 1081px) {
    .services__grid {
      transition: grid-template-columns var(--motion-duration-component) var(--motion-ease-standard);
    }
    /* Высота ряда зафиксирована, иначе жест трясёт всю страницу: при смене
       ширины абзац переливается на другое число строк, и ряд прыгал на 24px
       при каждом наведении — вместе со всем, что ниже секции. Замеренный
       максимум по трём состояниям на 1081–1600px — 344px; берём с запасом.
       Тот же приём, что держит карточки результатов (--results-card-height). */
    .service {
      min-height: var(--service-row-height);
      transition:
        --open var(--motion-duration-component) var(--motion-ease-standard),
        background-color var(--motion-duration-component) var(--motion-ease-standard),
        border-color var(--motion-duration-component) var(--motion-ease-standard);
    }
    /* Полосу забирает ячейка под курсором. Кто именно раскрыт — решают
       правила --open в основном блоке; здесь только ширины колонок. */
    .services__grid:has(> .service:nth-child(2):is(:hover, :focus-within)) {
      grid-template-columns: 1fr 2.21fr 1fr;
    }
    .services__grid:has(> .service:nth-child(3):is(:hover, :focus-within)) {
      grid-template-columns: 1fr 1fr 2.21fr;
    }
    /* Пока курсора в строке нет, полосу держит ячейка, закреплённая кликом
       или тапом: клавиатура и мышь приводят секцию в одно и то же состояние. */
    .services__grid:not(:has(> .service:is(:hover, :focus-within))):has(> .service:nth-child(2).is-open) {
      grid-template-columns: 1fr 2.21fr 1fr;
    }
    .services__grid:not(:has(> .service:is(:hover, :focus-within))):has(> .service:nth-child(3).is-open) {
      grid-template-columns: 1fr 1fr 2.21fr;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__badge-ring,
  .contact__badge-ring,
  .pricing__arcs .arc,
  .contact-form__success { animation: none; }
}

/* ========================== RESPONSIVE ================================== */
@media (max-width: 1080px) {
  /* Как в лайве: рассказ уходит на всю ширину, фото и принципы встают парой. */
  .about__grid { grid-template-columns: 1fr 1fr; }
  .about__intro { grid-column: 1 / -1; }
  /* Ниже 1080 ведущая ячейка на 2.21fr становится слишком узкой для своего
     кегля: она уходит в отдельную строку на всю ширину, а два компактных
     формата встают под ней парой. Тот же приём, что у .about__intro. */
  .pricing__body { grid-template-columns: 1fr; }
  .pricing__aside { display: none; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .contact__intro { grid-column: 1 / -1; display: flex; flex-direction: column; }
  .contact__badge { display: none; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Between the nav breakpoint and ~1200 the plate runs out of room: the logo no
   longer shrinks, so the nav and the CTA have to give the space back instead
   of pushing the button past the plate edge. */
@media (max-width: 1200px) {
  .site-header__inner { gap: 0.7rem; }
  .nav__list { gap: clamp(0.7rem, 1.3vw, 1.2rem); }
  .nav__list a { font-size: 0.82rem; letter-spacing: 0.04em; }
  .site-header__cta { padding-inline: 0.8rem; letter-spacing: 0.1em; }
}

@media (max-width: 980px) {
  .nav, .site-header__cta { display: none; }
  .nav-toggle { display: grid; margin-left: auto; }
  /* The drawer is anchored to the bottom edge of the header, so below the
     nav breakpoint the plate goes back to a flat band it can hang off. */
  .site-header {
    background: var(--header-plate-bg);
    border-bottom-color: var(--header-plate-border);
  }
  .container--wide { width: 100%; }
  .site-header__inner {
    margin-top: 0;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-toggle {
    border-color: var(--header-plate-border);
    background: transparent;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after { background: var(--color-on-dark); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
  .mobile-nav {
    background: var(--color-dark-deep);
    border-top-color: var(--header-plate-border);
  }
  .mobile-nav__list a {
    color: var(--color-on-dark);
    border-bottom-color: var(--color-on-dark-line);
  }
  .mobile-nav .btn--primary {
    --btn-bg: var(--color-lime);
    --btn-fg: var(--color-ink);
    --btn-line: var(--color-lime);
  }
}

@media (max-width: 1100px) {
  .results .result-card { flex-basis: calc((100% - var(--results-gap)) / 2); }
}

@media (min-width: 1101px) {
  /* Keep the measuring box equal to the visible content track. Every card
     keeps the same basis; two full cards and a visible preview remain in
     the viewport while the track remains scroll-snap. */
  .results__viewport {
    width: calc(100% - 2 * var(--container-pad));
    max-width: calc(var(--container) - 2 * var(--container-pad));
    padding-inline: 0;
  }
  .results .result-card {
    flex-basis: calc((100% - 2 * var(--results-gap)) / 2.5);
  }
}

@media (max-width: 860px) {
  /* Одна колонка появляется там же, где у тарифов: соседние секции
     перестраиваются на одной и той же ширине, а не вразнобой. */
  .pricing__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .price-card--featured { order: -1; }
  .hero__watermark { display: none; }
  .result-card { flex-basis: calc((100% - var(--results-gap)) / 2); }
}

@media (max-width: 760px) {
  .contact__grid { grid-template-columns: 1fr; }
  .hero__badge { width: 92px; top: auto; bottom: 108px; }
  /* Фигура занимает нижний ярус и уходит за правый борт: обрезанный кадр
     читается как движение из полосы, а не как наклейка по центру. Ширина
     в процентах от героя, а не от вьюпорта — так она не скачет от полосы
     прокрутки. */
  .hero__man {
    height: auto;
    width: var(--hero-man-width-mobile);
    right: var(--hero-man-offset-mobile);
    bottom: var(--hero-man-bottom-mobile);
    opacity: 0.96;
  }
  .hero__scrim {
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(100% - var(--section-py)),
        var(--color-bg) 100%
      ),
      var(--hero-scrim-mobile);
  }
  .footer__content { grid-template-columns: 1fr; }
  .footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .results__head {
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  .results .section-title {
    max-width: none;
    margin-top: 1.1rem;
  }
  /* Высота не фиксируется: текст карточки на узком экране длиннее, и в 520px
     цитата уезжала под строку с именем. Ровный ряд держит stretch у трека. */
  .results .result-card { flex-basis: 88%; }
  .results__nav { display: none; }
}

@media (max-width: 560px) {
  .about__title { font-size: clamp(2.35rem, 11vw, 3.6rem); }
  .about__lead { margin-top: var(--wp--preset--spacing--50); }
  /* Пропорция снята с референса: 1780×853, то есть 2.087 ширины. Высота идёт
     от ширины, а не от вьюпорта — иначе на длинном экране герой растягивается,
     фигура уезжает вниз и композиция перестаёт совпадать с макетом. */
  .hero {
    min-height: clamp(720px, 208vw, 900px);
    padding-top: 104px;
  }
  .hero__grid {
    align-items: flex-start;
    flex: 0 0 auto;
  }
  .hero__content {
    max-width: 100%;
    padding-block: var(--hero-content-pad-block-mobile) var(--wp--preset--spacing--20);
  }
  .hero__lead {
    margin-top: var(--hero-title-lead-gap-mobile);
    max-width: 32ch;
    font-size: 1rem;
  }
  /* Кнопки во всю ширину колонки: на телефоне два прямоугольника в столбик
     держат одну ось с заголовком. */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--hero-lead-actions-gap-mobile);
    gap: var(--hero-actions-gap-mobile);
  }
  .result-card { flex-basis: 88%; }
  .hero__badge {
    display: grid;
    width: 86px;
    right: 1rem;
    bottom: 1rem;
  }
  .results__nav { display: none; }
  .footer__inner { gap: 2rem; }
}

/* ---- Герой на телефоне: одна ось, два уровня действия ------------------ */
/* Заголовок ломается на четыре строки — в этом кегле фраза и должна
   занимать верх экрана, а не тянуться одной строкой в мелком размере.
   Ширина строки перестаёт удерживаться, поэтому nowrap снимается. */
@media (max-width: 700px) {
  /* Заголовок идёт столбиком по слову: кегль подобран так, что вторая строка
     фразы физически не помещается рядом с первой. balance здесь вреден — он
     выравнивает длины строк и тем самым склеивает слова обратно. */
  /* Интерлиньяж остаётся общим 1.02: у Ampero глифы выходят за строчный бокс
     на 0.085em, и всё, что плотнее ~1.005, срезает верхушки букв у строки с
     background-clip: text — градиенту просто нечем их закрасить. Столбик
     ужимается кеглем, а не межстрочным. */
  .hero__title { font-size: var(--hero-title-size-mobile); }
  .hero__title-line {
    white-space: normal;
    text-wrap: wrap;
  }
  /* Перенос по слову закреплён разметкой, а не подобранным кеглем: иначе
     строка ломается или склеивается от пары пикселей ширины. Перед каждым
     <br> стоит пробел — выше 700px он выключен, и слова снова в строку. */
  .hero__title-br { display: block; }
  /* Замер референса: абзац кончается на 55% ширины, и дальше начинается
     фигура. На 28ch строка доезжала до 74% и ложилась бегуну на лицо. */
  .hero__lead { max-width: 21ch; }
  /* Действия перестают быть парой равных. Основное остаётся кнопкой по
     содержимому, вторичное сжимается до текстовой ссылки с подчёркиванием:
     на узком экране два одинаковых прямоугольника подряд стирают приоритет,
     который весь герой и выстраивает. */
  /* Одна колонка по самой широкой подписи: обе кнопки получают ровно её
     ширину, поэтому «Смотреть программы» не оказывается шире «Начать сейчас».
     Через flex этого не добиться — там ширину диктует содержимое каждой. */
  .hero__actions {
    display: grid;
    grid-template-columns: minmax(var(--hero-cta-min-width), max-content);
    justify-content: start;
    gap: var(--wp--preset--spacing--40);
  }
  /* Поле кнопки сужено: в референсе пара занимает 45% ширины, и именно этот
     запас справа отдан фигуре. На 1.65rem подпись «Смотреть программы»
     разгоняла колонку до 60% и упиралась в голову бегуна. */
  .hero__actions .btn {
    width: 100%;
    padding-inline: var(--hero-cta-pad-x);
  }
  .hero__actions .btn:has(.btn__arrow) { padding-right: 0; }
  .hero__actions .btn .btn__arrow { margin-left: var(--hero-cta-pad-x); }
  /* Кнопка меряется пальцем, а не экраном: 44px — порог касания, и всё, что
     выше, кнопка забирает у заголовка. Отсюда обычная высота вместо --lg и
     ширина по содержимому с нижней границей, а не во весь столбец. */
  .hero__actions .btn--primary {
    min-height: var(--btn-height);
    justify-content: flex-start;
  }
  .hero__actions .btn--primary .btn__arrow {
    height: calc(var(--btn-height) - var(--btn-border-width) * 2);
    margin-left: auto;
  }
  /* Вторичное действие — контурная кнопка той же высоты и ширины, что и
     основная: они читаются парой, а приоритет держит заливка, а не размер. */
  .hero__actions .btn--ghost {
    min-height: var(--btn-height);
    justify-content: center;
  }
}

/* Ниже 430px фигура забирает слишком много воздуха под кнопками: она
   отступает к краю и теряет насыщенность, чтобы текст оставался первым. */
@media (max-width: 430px) {
  /* Посадка снята с референса: голова приходится на 74% ширины и на уровень
     абзаца, ступни — на 84% высоты героя. Кнопки кончаются на 56%, поэтому
     лицо больше ничем не перекрыто. */
  .hero__man {
    width: 104%;
    right: -44%;
    opacity: 0.94;
  }
}