/* =========================================================================
   3L · site · sections.css
   -------------------------------------------------------------------------
   Стили секций лендинга в порядке появления.
   База, утилиты, кнопки — в main.css.
   ========================================================================= */


/* =========================================================================
   0. STICKY SITE-NAV · home + nav, виден после прохода hero (v1.3)
   -------------------------------------------------------------------------
   Hero уже несёт свой `.cover-top` — этот fixed-nav появляется только когда
   `#top` уходит из viewport (через IO в reveal.js → .is-visible).
   Backdrop-blur даёт editorial-плашку и читается на любой секции (dark/cream).
   ========================================================================= */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-3) var(--gutter);
  background: rgba(14, 16, 18, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity var(--dur-base) var(--ease-default),
              transform var(--dur-base) var(--ease-default);
}
.site-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--container-wide);
  margin: 0 auto;
}
.site-nav-mark {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  line-height: 0;
  transition: opacity var(--dur-fast) var(--ease-default);
}
.site-nav-mark:hover { opacity: 0.7; }
.site-nav-mark .mark {
  width: 32px;
  height: 32px;
  display: block;
}
.site-nav-links {
  display: flex;
  gap: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
}
.site-nav-links a {
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-default);
}
.site-nav-links a:hover { color: var(--color-accent); }
.site-nav-cta {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-fast) var(--ease-default);
}
.site-nav-cta span { color: var(--color-accent); }
.site-nav-cta:hover { color: var(--color-accent); }

@media (max-width: 1240px) {
  .site-nav-links { gap: var(--space-4); }
}
@media (max-width: 960px) {
  .site-nav-links { gap: var(--space-3); font-size: var(--fs-caption); }
}
@media (max-width: 840px) {
  /* ТЗ п.2: на мобилке закреп уезжает ВНИЗ (появляется со 2-го экрана через .is-visible),
     CTA оформлена заметной acid-кнопкой — основной тап-таргет. */
  .site-nav {
    top: auto; bottom: 0;
    padding: var(--space-3) var(--gutter);
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transform: translateY(12px);
  }
  .site-nav-links { display: none; }
  .site-nav-inner { gap: var(--space-4); }
  .site-nav-cta {
    flex: 1;
    justify-content: center;
    background: var(--color-accent);
    color: #0E1012;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-body-s);
  }
  .site-nav-cta span { color: #0E1012; }
  /* запас снизу, чтобы плашка не перекрывала конец футера */
  .site-footer { padding-bottom: calc(var(--space-7) + 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav { transform: none; transition: opacity 0ms; }
}


/* =========================================================================
   1. HERO · первый экран
   ========================================================================= */
.cover {
  min-height: 100vh;
  padding: var(--space-7) var(--gutter);
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Колонка строго в ширину контейнера: без этого неявная auto-колонка
     растягивалась до max-content заголовка (22ch ≈ 533px) и вылезала за
     .cover, а overflow:hidden срезал строки справа. minmax(0,1fr) заставляет
     контент переноситься по доступной ширине. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  background: var(--color-base);
  position: relative;
  overflow: hidden;
}
.cover::after {
  /* мягкий acid-lime блик — глубина без декоративности */
  content: "";
  position: absolute;
  right: -20vw; bottom: -30vh;
  width: 80vw; height: 80vw;
  background: radial-gradient(circle at center, rgba(200,255,61,0.10), transparent 60%);
  pointer-events: none;
}

/* Top nav */
.cover-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--container-wide); margin: 0 auto; width: 100%;
  position: relative; z-index: 2;
}
.cover-mark {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  line-height: 0;
}
.cover-mark .mark {
  width: 48px;
  height: 48px;
  display: block;
}

/* Hero cinematic intro (v1.6) ============================================
   Запускается reveal.js → heroIntro(). Управление через классы на .cover:
     .has-intro            — стартовый стейт: hero-content (nav, body, bottom)
                             скрыт opacity 0; overlay видим; mark--intro hidden.
     .is-intro-phase-1     — wordmark «3L agency» letter-stagger fade-in.
     .is-intro-phase-2     — 4 lime-L клона разлетаются в углы seal-box.
     .is-intro-phase-3     — clones cross-fade в mark (seal-state center).
                             agency fades out, mark--intro появляется и
                             все 4 угла (TL/TR/BR/BL) — currentColor (white).
     .is-intro-phase-4     — FLIP: mark едет в nav-позицию (top-left).
                             Параллельно: hero-content opacity 0→1.
     .is-intro-phase-5     — BR-уголки летят в BL, fade out, BL → lime + pulse.
     .is-intro-landed      — финал, классы фаз снимаются. Идентично статике.
   Reduced-motion: сразу landed, overlay display:none, без таймингов.       */

/* Overlay живёт поверх hero. На время интро видим всё, после фазы 4 — display:none. */
.hero-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  will-change: opacity;
}
.cover.is-intro-landed .hero-intro,
.cover:not(.has-intro) .hero-intro { display: none; }

.hero-intro-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 116px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.hero-intro-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.22em);
  transition:
    opacity 700ms var(--ease-enter),
    transform 700ms var(--ease-enter),
    color 300ms var(--ease-default);
  transition-delay: calc(var(--li, 0) * 95ms);
  will-change: opacity, transform;
}
.hero-intro-letter--L {
  color: var(--color-accent);
  display: inline-flex;
  align-items: baseline;
}
/* L-глиф в wordmark — SVG bracket-shape (BL-orientation). Выглядит как L
   в контексте «3 ⌐ Agency», но геометрически = bracket нашего знака. */
.hero-intro-L-glyph {
  display: inline-block;
  height: 0.72em;
  width: 0.72em;
  fill: currentColor;
  vertical-align: -0.06em;
  margin-right: 0.05em;
  /* SVG inline-block: явно фиксируем transform-origin в center CSS box,
     чтобы animate scale + translate был относительно центра элемента. */
  transform-origin: 50% 50%;
}
.cover.is-intro-phase-1 .hero-intro-letter,
.cover.is-intro-phase-2 .hero-intro-letter,
.cover.is-intro-phase-3 .hero-intro-letter {
  opacity: 1;
  transform: none;
}
/* Wordmark-L НЕ гаснет в Phase 2 — она сама летит в BL-угол через WAAPI.
   В Phase 3: ИНСТАНТНО скрывается. Эстафета передаётся mark-corner--bl
   (lime по умолчанию, см. mark-accent), который с того же момента инстантно
   visible. С этого момента BL = тот же SVG rect что и TL/TR/BR — Phase 3
   красит ВСЕ 4 угла lime→white через единый mark-accent fill transition,
   синхронно с opacity cross-fade клонов TL/TR/BR. Все 4 = один объект. */
.cover.is-intro-phase-3 .hero-intro-letter--L,
.cover.is-intro-phase-4 .hero-intro-letter--L,
.cover.is-intro-phase-5 .hero-intro-letter--L {
  opacity: 0;
  transition: opacity 0ms;
}
/* В Phase 2 параллельно с L-копиями: «3» едет в центр + увеличивается,
   «Agency» гаснет. Wordmark «L» (SVG) тоже гаснет (см. правило выше).
   В Phase 3 mark-3-glyph cross-fade'ит «3» letter под собой.
   --3-to-center задаётся JS (расстояние от центра «3» до vw/2 в пикселях). */
.hero-intro-agency {
  display: inline-flex;
  transition: opacity 700ms var(--ease-default);
}
.cover.is-intro-phase-2 .hero-intro-agency,
.cover.is-intro-phase-3 .hero-intro-agency,
.cover.is-intro-phase-4 .hero-intro-agency,
.cover.is-intro-phase-5 .hero-intro-agency { opacity: 0; }

/* «3» letter едет в центр (полный путь --3-to-center) ПАРАЛЛЕЛЬНО с mark-3
   group: за 1100ms одновременно с разлётом lime-уголков. Opacity гаснет
   за 700ms — к концу пути letter полностью невидим, на центре виден только
   rect-glyph (mark-3). Cross-fade происходит непрерывно во время движения,
   а не точкой в halfway — два глифа едут «в обнимку», typography плавно
   уступает rect-glyph'у. */
.cover.is-intro-phase-2 .hero-intro-letter--3,
.cover.is-intro-phase-3 .hero-intro-letter--3,
.cover.is-intro-phase-4 .hero-intro-letter--3,
.cover.is-intro-phase-5 .hero-intro-letter--3 {
  opacity: 0;
  transform: translateX(var(--3-to-center, 0px)) scale(1);
  transition:
    transform 1100ms var(--ease-enter),
    opacity 700ms var(--ease-default);
}

/* L-клоны: SVG bracket-shapes идентичные mark--intro brackets. Каждый
   pre-rotated в свою ориентацию (TL/TR/BR/BL). Стартуют невидимыми на
   позиции wordmark-L, разлетаются в углы seal-box, при landing идеально
   накладываются на SVG mark--intro brackets — seamless cross-fade. */
.hero-intro-Lclone {
  position: absolute;
  fill: var(--color-accent);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, fill;
  /* JS выставит left/top + width/height + transform. */
}

/* Mark SVG в hero — стартует невидимым контейнером; дети управляются
   индивидуально per-phase. Container становится visible в Phase 2 в seal-state,
   и тогда mark-three (rect-3-glyph) fade'ится in mid-journey «3» letter.
   `will-change: transform` НАМЕРЕННО убран: на десктопе sealScale ~7.5× при
   nav-size 48px → 360px seal. С `will-change: transform` браузер растеризует
   SVG ОДИН РАЗ в начальном 48×48 и масштабирует bitmap = pixel blur. Без
   will-change браузер re-rasterизует на каждом кадре — чёткие SVG-векторы. */
.cover-mark .mark--intro {
  opacity: 0;
  transform-origin: top left;
  will-change: opacity;
}

/* Safari-only GPU-layer hint (UA-detect через JS, см. reveal.js).
   Цель: уменьшить blur в seal-state, когда Safari растеризует SVG в исходные
   48×48 и bilinear-апскейлит до ~360px. Принудительный GPU-layer может
   спровоцировать Safari ре-рендерить SVG как vector каждый кадр.
   В Chrome правило не активно (класс .is-safari-mark не добавлен) — поэтому
   ранее зафиксированный Chrome blur от will-change: transform не возвращается. */
.cover-mark.is-safari-mark .mark--intro {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}
/* Phase 2 + 3: container visible at seal-state. Дети контролируют opacity отдельно. */
.cover.is-intro-phase-2 .cover-mark .mark--intro,
.cover.is-intro-phase-3 .cover-mark .mark--intro {
  opacity: 1;
  transform: var(--mark-intro-transform, none);
  transition: opacity 300ms var(--ease-enter);
}
/* Phase 4: FLIP-полёт в nav-позицию (плавно, 1100ms). */
.cover.is-intro-phase-4 .cover-mark .mark--intro {
  opacity: 1;
  transform: none;
  transition: transform 1100ms var(--ease-enter);
}
.cover.is-intro-phase-5 .cover-mark .mark--intro,
.cover.is-intro-landed .cover-mark .mark--intro {
  opacity: 1;
  transform: none;
}

/* mark-three (5 rect-палок 3-glyph): fade-in СРАЗУ в начале Phase 2,
   синхронно с движением «3» letter. Оба видны во время пути, к концу
   пути letter уже невидим — остаётся только rect-glyph в центре. */
.cover-mark .mark--intro .mark-three {
  opacity: 0;
  transition: opacity 700ms var(--ease-enter);
}
.cover.is-intro-phase-2 .cover-mark .mark--intro .mark-three {
  opacity: 1;
  transition-delay: 0ms;
}
.cover.is-intro-phase-3 .cover-mark .mark--intro .mark-three,
.cover.is-intro-phase-4 .cover-mark .mark--intro .mark-three,
.cover.is-intro-phase-5 .cover-mark .mark--intro .mark-three,
.cover.is-intro-landed .cover-mark .mark--intro .mark-three {
  opacity: 1;
}

/* mark-three-group (wrapper для 5 rects): стартует НА позиции «3» letter
   (translateX -3-to-center) с размером «3» letter (scale start-scale из JS),
   едет в центр + увеличивается до scale 1 — параллельно с «3» letter.
   К концу пути letter невидим, rect-glyph занял его место в полный размер. */
.cover-mark .mark--intro .mark-three-group {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: translateX(calc(var(--3-to-center, 0px) * -1)) scale(var(--mark-three-start-scale, 0.6));
  transition: transform 1100ms var(--ease-enter);
}
.cover.is-intro-phase-2 .cover-mark .mark--intro .mark-three-group {
  transform: translateX(0) scale(1);
  transition-delay: 0ms;
}
.cover.is-intro-phase-3 .cover-mark .mark--intro .mark-three-group,
.cover.is-intro-phase-4 .cover-mark .mark--intro .mark-three-group,
.cover.is-intro-phase-5 .cover-mark .mark--intro .mark-three-group,
.cover.is-intro-landed .cover-mark .mark--intro .mark-three-group {
  transform: translateX(0);
}

/* Все 4 угла знака (v1.6.12 — unified fill transition):
   До Phase 3: opacity 0 (не виден). Lime mark-corner color по умолчанию
   (CSS overrides parent group fill).
   В Phase 3 trigger: opacity 1 ИНСТАНТНО (без transition); fill lime →
   currentColor (white) через 900ms transition. Это работает идентично для
   ВСЕХ 4 углов — single-layer fill interpolation, без alpha cross-fade'а.
   Параллельно: clones (TL/TR/BR lime) instant hidden через WAAPI duration 0
   (см. reveal.js), wordmark-L instant hidden через CSS. Результат — visual
   handoff lime → white идентичный для всех 4 углов как единый объект. */
.cover-mark .mark--intro .mark-corner--tl,
.cover-mark .mark--intro .mark-corner--tr,
.cover-mark .mark--intro .mark-corner--br,
.cover-mark .mark--intro .mark-corner--bl {
  opacity: 0;
  fill: #C8FF3D;
  transition: fill 900ms var(--ease-enter), opacity 0ms;
}
.cover.is-intro-phase-3 .cover-mark .mark--intro .mark-corner--tl,
.cover.is-intro-phase-3 .cover-mark .mark--intro .mark-corner--tr,
.cover.is-intro-phase-3 .cover-mark .mark--intro .mark-corner--br,
.cover.is-intro-phase-3 .cover-mark .mark--intro .mark-corner--bl,
.cover.is-intro-phase-4 .cover-mark .mark--intro .mark-corner--tl,
.cover.is-intro-phase-4 .cover-mark .mark--intro .mark-corner--tr,
.cover.is-intro-phase-4 .cover-mark .mark--intro .mark-corner--br,
.cover.is-intro-phase-4 .cover-mark .mark--intro .mark-corner--bl,
.cover.is-intro-phase-5 .cover-mark .mark--intro .mark-corner--tl,
.cover.is-intro-phase-5 .cover-mark .mark--intro .mark-corner--tr,
.cover.is-intro-phase-5 .cover-mark .mark--intro .mark-corner--br,
.cover.is-intro-phase-5 .cover-mark .mark--intro .mark-corner--bl,
.cover.is-intro-landed .cover-mark .mark--intro .mark-corner--tl,
.cover.is-intro-landed .cover-mark .mark--intro .mark-corner--tr,
.cover.is-intro-landed .cover-mark .mark--intro .mark-corner--br,
.cover.is-intro-landed .cover-mark .mark--intro .mark-corner--bl {
  opacity: 1;
  fill: currentColor;
}

/* Phase 5: BL fill вернуть в lime — синхронно с BR→BL handoff (delay 500ms,
   duration 400ms). Pulse 2.0× запускается параллельно. */
.cover.is-intro-phase-5 .cover-mark .mark--intro .mark-corner--bl,
.cover.is-intro-landed .cover-mark .mark--intro .mark-corner--bl {
  fill: #C8FF3D;
  transition: fill 400ms var(--ease-enter) 500ms, opacity 0ms;
}

.mark--intro .mark-br-group {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Финальный pulse: scale 2.0. Задержка 550ms = одновременно с lime-вспышкой.
   Запускается ТОЛЬКО в phase-5; к моменту landed pulse уже отыгран. */
.cover.is-intro-phase-5 .mark--intro .mark-corner--bl {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: mark-intro-pulse 680ms cubic-bezier(0.34, 1.4, 0.5, 1) 550ms 1 both;
}
@keyframes mark-intro-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(2.0); }
  100% { transform: scale(1); }
}

/* Hero-content (nav, CTA, h1-блок, bottom): скрыт во время phases 1–3,
   проявляется параллельно с FLIP в phase 4. Сам .cover-mark остаётся
   видимым контейнером — внутри mark--intro анимируется отдельно. */
.cover.has-intro .cover-nav,
.cover.has-intro .cover-cta-top,
.cover.has-intro .cover-body,
.cover.has-intro .cover-bottom {
  opacity: 0;
}
.cover.is-intro-revealing .cover-nav,
.cover.is-intro-revealing .cover-cta-top,
.cover.is-intro-revealing .cover-body,
.cover.is-intro-revealing .cover-bottom,
.cover.is-intro-landed .cover-nav,
.cover.is-intro-landed .cover-cta-top,
.cover.is-intro-landed .cover-body,
.cover.is-intro-landed .cover-bottom {
  opacity: 1;
  transition: opacity 900ms var(--ease-enter);
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro { display: none; }
  .cover-mark .mark--intro {
    opacity: 1;
    transition: none;
    will-change: auto;
  }
  .cover-mark .mark-corner--bl { animation: none; }
  .cover.has-intro .cover-nav,
  .cover.has-intro .cover-cta-top,
  .cover.has-intro .cover-body,
  .cover.has-intro .cover-bottom { opacity: 1; }
}
.cover-nav {
  display: flex; gap: var(--space-5);
  font-family: var(--font-body); font-size: var(--fs-body-s);
}
@media (max-width: 1240px) {
  .cover-nav { gap: var(--space-4); }
}
@media (max-width: 1080px) {
  .cover-nav { gap: var(--space-3); font-size: var(--fs-caption); }
}
.cover-nav a {
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-default);
}
.cover-nav a:hover { color: var(--color-accent); }
.cover-cta-top {
  font-family: var(--font-body); font-size: var(--fs-body-s);
  color: var(--color-text);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--dur-fast) var(--ease-default);
}
.cover-cta-top .arrow {
  display: inline-block;
  color: var(--color-accent);
  transition: transform var(--dur-fast) var(--ease-default);
}
.cover-cta-top:hover { color: var(--color-accent); }
.cover-cta-top:hover .arrow { transform: translate(2px, -2px); }

/* Body */
.cover-body {
  max-width: var(--container-wide); margin: 0 auto; width: 100%; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.cover-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.cover-title {
  font-family: var(--font-display);
  /* Свой clamp вместо --fs-display (floor 64px): на телефоне самое длинное
     слово «Маркетинговое» при 64px ≈ 468px — шире вьюпорта, а .cover имеет
     overflow:hidden, поэтому слово срезалось справа без шанса доскроллить.
     Floor 38px → слово ≤ ~280px, влезает на экранах от 320px. Desktop не
     меняется: при ширине ≥~420px размер задаёт 9vw, ровно как раньше. */
  font-size: clamp(38px, 9vw, 144px);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-width: 22ch;
  overflow-wrap: break-word; /* страховка от клипа на ультра-узких (≤320px) */
}
.cover-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}

/* Letter-by-letter (per-word) reveal hero h1 (Фаза 7).
   clip-path slides левый край вправо — typewriter без caret.
   Стаггер на --word-idx, em-слово получает +200ms (акцент). */
.cover-title .word {
  display: inline-block;
  overflow-wrap: break-word; /* inline-block: перенос внутри длинного слова на узких экранах */
  clip-path: inset(0 110% 0 -0.05em);
  transition: clip-path 500ms var(--ease-enter);
  transition-delay: calc(var(--word-idx, 0) * 120ms);
  will-change: clip-path;
}
.cover-title .word--em {
  transition-delay: calc(var(--word-idx, 3) * 120ms + 200ms);
}
.cover-body.is-visible .cover-title .word {
  clip-path: inset(0 -0.05em 0 -0.05em);
}
@media (prefers-reduced-motion: reduce) {
  .cover-title .word {
    clip-path: none;
    opacity: 0;
    transition: opacity 200ms linear;
    transition-delay: calc(var(--word-idx, 0) * 60ms);
    will-change: auto;
  }
  .cover-title .word--em {
    transition-delay: calc(var(--word-idx, 3) * 60ms + 60ms);
  }
  .cover-body.is-visible .cover-title .word { opacity: 1; }
}

.cover-sub {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  max-width: 38ch;
  line-height: 1.4;
}

/* CTA-кнопки в герое — над бегущей строкой (ТЗ п.1). Увеличены (.btn--lg). */
.cover-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cover-ctas--hero { margin-top: var(--space-6); margin-bottom: var(--space-2); }

/* Bottom */
.cover-bottom {
  display: flex; align-items: end; justify-content: flex-start;
  gap: var(--space-5);
  max-width: var(--container-wide); margin: 0 auto; width: 100%;
  position: relative; z-index: 1;
}
.cover-tag {
  font-family: var(--font-body); font-size: var(--fs-caption);
  color: var(--color-text-muted); text-align: left;
}
.cover-tag b {
  display: block;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  margin-bottom: 4px;
}

@media (max-width: 960px) {
  .cover-nav { display: none; }
}
@media (max-width: 640px) {
  .cover-bottom { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .cover-tag { text-align: left; }
  /* На мобилке hero-кнопки — в столбик, во всю ширину (удобный тап-таргет) */
  .cover-ctas--hero { flex-direction: column; align-items: stretch; }
  .cover-ctas--hero .btn { justify-content: center; }
}


/* =========================================================================
   1.5 MISSION · display-разворот после Hero (v1.2)
   -------------------------------------------------------------------------
   Dark base. Min-height ~70vh, центр по вертикали. Display ниже hero
   (--fs-h1 вместо --fs-display) — не тянет на второй H1, читается как
   акцент. Subline muted, max-width 60ch. Reveal — word-by-word clip-path
   на title (рифмуется с hero-typewriter). italic-em «любовь к продукту»
   живёт в Instrument Serif italic, без lime — здесь не сигнал, а
   акцентный фрагмент.
   ========================================================================= */
.mission {
  background: var(--color-base);
  min-height: 70vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* ТЗ п.3: aperture corner-signature — сдержанный знак идентичности в углу */
.mission-signature {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-6);
  width: clamp(72px, 9vw, 132px);
  height: clamp(72px, 9vw, 132px);
  color: var(--color-text);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 640px) {
  .mission-signature { width: 64px; height: 64px; bottom: var(--space-5); opacity: 0.1; }
}
.mission-body {
  max-width: 100%;
}
.mission-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  max-width: 22ch;
  text-wrap: balance;
}
.mission-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.mission-title .word {
  display: inline-block;
  clip-path: inset(0 110% 0 -0.05em);
  transition: clip-path 500ms var(--ease-enter);
  transition-delay: calc(var(--word-idx, 0) * 90ms);
  will-change: clip-path;
}
.mission-body.is-visible .mission-title .word {
  clip-path: inset(0 -0.05em 0 -0.05em);
}
@media (prefers-reduced-motion: reduce) {
  .mission-title .word {
    clip-path: none;
    opacity: 0;
    transition: opacity 200ms linear;
    transition-delay: calc(var(--word-idx, 0) * 50ms);
    will-change: auto;
  }
  .mission-body.is-visible .mission-title .word { opacity: 1; }
}
.mission-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  max-width: 56ch;
}
@media (max-width: 640px) {
  .mission { min-height: auto; }
  .mission-body { max-width: 100%; }
}
/* На узких телефонах (≤400px) чуть уменьшаем mission-title: при floor 48px
   связка «и коммерчески» (≈343px) шире вьюпорта и давала горизонт. скролл
   страницы. На планшетах/десктопе (≥401px) размер не меняется. */
@media (max-width: 400px) {
  .mission-title { font-size: clamp(34px, 11vw, 44px); }
}


/* =========================================================================
   2. MANIFESTO · editorial-разворот
   ========================================================================= */
.manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 960px) {
  .manifesto { grid-template-columns: 1fr; gap: var(--space-5); }
}
.manifesto-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-invert-muted);
  margin-bottom: var(--space-3);
}
.manifesto-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.manifesto-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.manifesto-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  max-width: 50ch;
}
.manifesto-text p + p { margin-top: var(--space-3); }

/* Pull-quote, размещённый как 3-я строка manifesto-grid — спан обеих колонок,
   центрирован под title+body. v1.4 graphics-layer: editorial italic statement
   без брэкетов, inline-bold для emphasis. */
.manifesto > .pull-quote { grid-column: 1 / -1; margin-top: var(--space-6); }


/* =========================================================================
   PULL-QUOTE · v1.4 graphics-layer, общая утилита
   Centered Instrument Serif italic. Inline <strong> даёт ритм (без цвета —
   цвет лимит ломает editorial). Не оборачиваем в brackets — они
   зарезервированы за знаком aperture.
   ========================================================================= */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.4;
  letter-spacing: var(--ls-heading);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
  color: inherit;
}
.pull-quote strong {
  font-style: italic;
  font-weight: var(--fw-semibold);
}


/* =========================================================================
   2.5 QUOTE-FULL · Jacquemus-разворот, один объект на полосу
   Cream-полоса между Manifesto и What. Цитата живёт здесь как
   самостоятельный объект — не повторяется внутри Manifesto.
   ========================================================================= */
.quote-full {
  /* фон/цвет/паддинг приходят от .section.section--invert */
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-full-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  max-width: 22ch;
  text-align: center;
  text-wrap: balance;
  position: relative;
}
.quote-full-body em {
  font-style: italic;
  font-weight: var(--fw-regular);
  /* без color override — наследует black на cream, как fit-text em */
}
.quote-full-year {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: 0.18em;
  letter-spacing: var(--ls-eyebrow);
  vertical-align: super;
  margin-left: 0.2em;
  color: var(--color-text-invert-muted);
}
@media (max-width: 640px) {
  .quote-full {
    min-height: 70vh;
    padding: var(--space-8) var(--gutter);
  }
  .quote-full-body { max-width: 16ch; }
}


/* =========================================================================
   2.75 MARQUEE · auto-scroll ticker, разделитель cream → dark
   Continuous-loop trick: две одинаковые группы текста, transform 0 → -50%.
   Единственный (вместе с loader-heartbeat) infinite-loop в системе —
   разрешён в v1.2-motion.md, использует --ease-linear.
   ========================================================================= */
.marquee {
  background: var(--color-base);
  color: var(--color-text-muted);
  height: 48px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--color-base-soft);
  border-bottom: 1px solid var(--color-base-soft);
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  animation: marquee 60s var(--ease-linear) infinite;
  will-change: transform;
}
.marquee-group {
  flex-shrink: 0;
  padding-right: 0; /* groups stick together — no gap-jump в loop */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; transform: translateX(0); }
  /* первая группа остаётся видимой — статичная eyebrow-полоса */
}

/* Marquee 2 (v1.2) · industries — cream-полоса как разделитель dark→cream.
   Reverse direction + slower (80s vs 60s) — другой ритм, не дублирует. */
.marquee--2 {
  background: var(--color-surface);
  color: var(--color-text-invert-muted);
  border-top-color: var(--color-line-invert);
  border-bottom-color: var(--color-line-invert);
}
.marquee-track--reverse {
  animation: marquee-reverse 80s var(--ease-linear) infinite;
}
@keyframes marquee-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track--reverse { animation: none; transform: translateX(0); }
}


/* =========================================================================
   3. WHAT WE DO · 7 дисциплин · editorial-каталог
   ========================================================================= */
.what {
  background: var(--color-base);
}
.what-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.what-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.what-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.what-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.disciplines {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-line);
}
.discipline {
  display: grid;
  grid-template-columns: 80px minmax(280px, 440px) minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line);
  align-items: baseline;
  transition: border-color var(--dur-base) var(--ease-default);
}
.discipline-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-default);
}
.discipline-name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  min-width: 0;
  overflow-wrap: break-word;
  transition: letter-spacing var(--dur-base) var(--ease-default);
}
.discipline-name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.discipline-body {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 56ch;
}
.discipline:hover { border-bottom-color: var(--color-accent); }
.discipline:hover .discipline-num { color: var(--color-accent); }
.discipline:hover .discipline-name em { color: var(--color-accent); }
/* Letter-spacing breath на hover-устройствах (Фаза 8) */
@media (hover: hover) {
  .discipline:hover .discipline-name {
    letter-spacing: calc(var(--ls-heading) + 0.02em);
  }
}

@media (max-width: 960px) {
  .discipline {
    grid-template-columns: 56px 1fr;
    gap: var(--space-3) var(--space-4);
  }
  .discipline-body { grid-column: 1 / -1; padding-left: calc(56px + var(--space-4)); }
  .discipline-name { font-size: var(--fs-h3); }
}
@media (max-width: 640px) {
  .discipline { grid-template-columns: 1fr; }
  .discipline-body { padding-left: 0; }
}


/* =========================================================================
   4. HOW WE WORK · 5L · SVG-арка (Phase 6, v1.0)
   -------------------------------------------------------------------------
   Cream-секция. Вместо плоского 5-колоночного stepper'а — SVG-диаграмма
   через 5 anchor-точек: Look (низ-лево) → Learn → Lead (центр) → Launch →
   Love (acid-lime пик-справа). Кривая «рисуется» single-shot при попадании
   секции в viewport, точки появляются staggered. На ≤640 — SVG скрыт,
   список разворачивается вертикально с lime-line + dot'ами как ::before.
   ========================================================================= */
.how-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.how-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.how-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.how-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-invert-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

/* --- Диаграмма-обёртка: SVG-арка + grid-сетка step-карточек -------------- */
.how-diagram {
  position: relative;
  /* Локальный delay-knob для path и dots. На .is-visible — обнуляется,
     даём элементам отыграть синхронно. */
  --arc-dur: 1.4s;
}

/* SVG лежит горизонтальной полосой между step-name и step-caption.
   Высота полосы фиксируется через aspect-ratio контейнера (см. ниже). */
.how-arc-svg {
  display: block;
  width: 100%;
  /* viewBox 1000×110, растягиваем под ширину контейнера без сохранения
     соотношения — для отзывчивой dimensional-арки. Высота как у viewBox
     при идеальной ширине 1000 — даём 110px floor через aspect-ratio. */
  aspect-ratio: 1000 / 110;
  /* На cream lime даёт ≈1.04:1 (WCAG fail) — линия и не-peak точки сидят
     на --color-text-invert (≈18:1). Peak (Love) переопределён как lime
     отдельным fill в .how-arc-dot--peak — это единственный lime-сигнал
     дуги, остальное dark для читаемости. */
  color: var(--color-text-invert);
  margin: var(--space-5) 0 var(--space-5);
  overflow: visible; /* dot r=6 у Love выходит за viewBox по top edge */
}

.how-arc-path {
  /* path total length ≈ 805 в user units; даём запас 900 чтобы кривая
     гарантированно дочерчивалась до Love-точки (cx=900). pathLength
     атрибут не используем — Chrome не уважает его для CSS dasharray. */
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset var(--arc-dur) var(--ease-enter);
}

.how-arc-dot {
  fill: var(--color-text-invert);
  opacity: 0;
  transition: opacity 320ms var(--ease-enter);
}
.how-arc-dot--peak {
  fill: var(--color-accent);
  /* Lime акцент Love. Ring effect через filter — лёгкий glow без
     bloom-перебора. */
  filter: drop-shadow(0 0 4px rgb(200 255 61 / 0.45));
  /* v1.4 motion-акценты: peak-dot пульсирует один раз после того, как
     линия дочертилась (delay = --arc-dur). Не infinite — editorial-сигнал
     достижения Love, а не пульс жизни. transform-box: fill-box чтобы
     scale брал центром cx/cy, а не SVG-root. */
  transform-box: fill-box;
  transform-origin: center;
}
.how-diagram.is-visible .how-arc-dot--peak {
  animation: peak-pulse-once 900ms var(--ease-enter) calc(var(--arc-dur) + 80ms) 1 both;
}
@keyframes peak-pulse-once {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 4px rgb(200 255 61 / 0.45)); }
  35%  { transform: scale(2.2); filter: drop-shadow(0 0 18px rgb(200 255 61 / 0.95)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 4px rgb(200 255 61 / 0.45)); }
}

/* Sonar-ring вокруг peak-dot: расширяется от 6 до ~36 r-units с
   одновременным fade-out. Два ring'а со сдвигом дают double-ripple —
   явный editorial-сигнал «достижения Love». */
.how-arc-peak-ring {
  stroke: var(--color-accent);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.how-diagram.is-visible .how-arc-peak-ring {
  animation: peak-ring-expand 1500ms var(--ease-enter) calc(var(--arc-dur) + 80ms) 1 forwards;
}
.how-diagram.is-visible .how-arc-peak-ring--2 {
  animation-delay: calc(var(--arc-dur) + 460ms);
}
@keyframes peak-ring-expand {
  0%   { transform: scale(1); opacity: 0.95; stroke-width: 2; }
  100% { transform: scale(6); opacity: 0;    stroke-width: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .how-diagram.is-visible .how-arc-dot--peak,
  .how-diagram.is-visible .how-arc-peak-ring { animation: none; }
}

/* Display-watermark · v1.4 graphics-layer, единственный экземпляр на сайт.
   Гигантская 5L italic как watermark-фон под аркой. currentColor (на cream
   = near-black --color-text-invert) с очень низкой opacity — не доминирует,
   но даёт типографизацию смысла арки. aria-hidden — декорация. */
.display-watermark {
  position: absolute;
  left: var(--space-4);
  top: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(180px, 28vw, 320px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: currentColor;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.how-arc-svg,
.steps--arc { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .display-watermark {
    font-size: 120px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    opacity: 0.05;
  }
}

.how-diagram.is-visible .how-arc-path {
  stroke-dashoffset: 0;
}
.how-diagram.is-visible .how-arc-dot                  { opacity: 1; }
.how-diagram.is-visible .how-arc-dot:nth-of-type(1)   { transition-delay: 200ms; }
.how-diagram.is-visible .how-arc-dot:nth-of-type(2)   { transition-delay: 540ms; }
.how-diagram.is-visible .how-arc-dot:nth-of-type(3)   { transition-delay: 820ms; }
.how-diagram.is-visible .how-arc-dot:nth-of-type(4)   { transition-delay: 1100ms; }
.how-diagram.is-visible .how-arc-dot:nth-of-type(5)   { transition-delay: 1380ms; }

/* --- Сетка под аркой: 5 колонок (name uppercase + caption italic + body) -- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps--arc {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}
.step {
  display: flex;
  flex-direction: column;
}
.step-name {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1;
  margin: 0;
  /* Love italic em крупнее uppercase соседей и расширяет line-box.
     Фиксируем box-height по em-size и выравниваем по низу — baseline
     у всех пяти step-name на одной линии, caption ниже не съезжает. */
  min-height: clamp(28px, 2.2vw, 38px);
  display: flex;
  align-items: flex-end;
}
.step-name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: var(--ls-heading);
  font-size: clamp(28px, 2.2vw, 38px);
  /* italic-em «Love» поднят над baseline, чтобы визуально сидеть на той же
     line height, что и uppercase-метки соседних шагов. */
  vertical-align: -0.04em;
  color: var(--color-text-invert);
}
.step-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-l);
  color: var(--color-text-invert-muted);
  margin: var(--space-3) 0 var(--space-4);
}
.step-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-invert-muted);
  margin: 0;
}

/* Reveal: тонкий fade-up каждого .step в свою колонку. Поверх него — арка
   рисуется через transitions. */
.step[data-reveal]            { transition-delay: calc(var(--idx, 0) * 80ms); }

/* === Mobile / narrow ====================================================== */
@media (max-width: 1100px) {
  /* На промежуточной ширине арка ещё работает горизонтально, но карточки
     дышат шире — даём чуть больше gap, чтобы text не пересекал колонки. */
  .steps--arc { gap: var(--space-4); }
  .step-body  { font-size: var(--fs-body-s); }
}

@media (max-width: 640px) {
  /* SVG-арку убираем — на узком экране заменяем её на вертикальную
     линию с dot-маркерами слева от каждого шага. */
  .how-arc-svg { display: none; }

  .how-diagram { padding-left: var(--space-5); }

  .steps--arc {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }

  .step {
    position: relative;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-line-invert);
  }
  .step:first-child { border-top: none; padding-top: 0; }

  /* Dot слева от каждого шага. */
  .step::before {
    content: "";
    position: absolute;
    left: calc(var(--space-5) * -1);
    top: calc(var(--space-5) + 6px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-text-invert);
    z-index: 1;
  }
  .step:first-child::before { top: 6px; }
  .step--peak::before {
    background: var(--color-accent);
    width: 13px;
    height: 13px;
    left: calc(var(--space-5) * -1 - 2px);
    box-shadow: 0 0 8px rgb(200 255 61 / 0.5);
  }
  /* Линия-сегмент от dot текущего шага до dot следующего. Каждый сегмент
     живёт на ::after своего .step → линия гарантированно заканчивается
     у peak-dot (нет хвоста за финальной точкой, как было с общим ::before
     на родителе). Цвет dark на cream (lime даёт 1.04:1 — нечитаемо). */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--space-5) * -1 + 3.5px);
    top: calc(var(--space-5) + 10.5px);
    height: 100%;
    width: 2px;
    background: var(--color-text-invert);
    opacity: 0.22;
  }
  /* First-child: padding-top:0 → центр dot на 10.5px (не +space-5).
     И height растягиваем до центра следующего dot. */
  .step:first-child::after {
    top: 10.5px;
    height: calc(100% + var(--space-5));
  }
  /* Сегмент перед peak — лёгкий lime-нагрев как сигнал достижения Love. */
  .step:nth-last-child(2)::after {
    background: linear-gradient(
      to bottom,
      var(--color-text-invert) 0%,
      var(--color-accent) 100%
    );
    opacity: 0.42;
  }

  .step-name    { font-size: var(--fs-h4); }
  .step-name em { font-size: var(--fs-h3); }
  .step-caption { font-size: var(--fs-body); margin: var(--space-2) 0 var(--space-3); }
  .step-body    { font-size: var(--fs-body); }
}

/* === Reduced motion ======================================================= */
@media (prefers-reduced-motion: reduce) {
  .how-arc-path {
    transition: none;
    stroke-dashoffset: 0;
  }
  .how-arc-dot {
    transition: none;
    opacity: 1;
  }
  .how-diagram.is-visible .how-arc-dot:nth-of-type(n) { transition-delay: 0s; }
}


/* =========================================================================
   4.5 AI · 10 пунктов · editorial-листинг (dark) · v1.2
   -------------------------------------------------------------------------
   Между How и Services. Без описаний — каждая строка = lime-bullet +
   name. Так читается как «инвентарь» рутины, а не «каталог фич». 2-col
   grid на desktop, 1-col на mobile. Bullet — 6×6 square (рифмуется с
   квадратными углами aperture-знака), lime, точно по baseline name.
   ========================================================================= */
.ai {
  background: var(--color-base);
}
.ai-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.ai-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.ai-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.ai-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.ai-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-7);
  border-top: 1px solid var(--color-line);
}
.ai-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--dur-base) var(--ease-default);
}
.ai-bullet {
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  display: inline-block;
  /* baseline-align с 22px body-l текстом — поднимаем bullet до x-height */
  transform: translateY(-2px);
  /* anchor для pulse-анимации: translateY сохраняется, scale накладывается */
  transform-origin: center;
  will-change: transform, box-shadow;
}
.ai-name {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* «AI activity light» — рандомная пульсация одной точки за раз.
   Стартует через JS-шедулер, когда секция в viewport. Читается как
   индикатор работающего сервера: «AI крутится в операционке прямо сейчас». */
@keyframes ai-pulse {
  0%   { transform: translateY(-2px) scale(1);   box-shadow: 0 0 0    0   rgb(200 255 61 / 0); }
  35%  { transform: translateY(-2px) scale(1.6); box-shadow: 0 0 14px 2px rgb(200 255 61 / 0.65); }
  100% { transform: translateY(-2px) scale(1);   box-shadow: 0 0 0    0   rgb(200 255 61 / 0); }
}
.ai-bullet.is-pulsing {
  animation: ai-pulse 900ms var(--ease-default) both;
}
/* hover на строку → её точка пульсирует, пока курсор там */
.ai-item:hover .ai-bullet {
  animation: ai-pulse 1400ms var(--ease-default) infinite;
}

@media (max-width: 640px) {
  .ai-list { grid-template-columns: 1fr; column-gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-bullet.is-pulsing,
  .ai-item:hover .ai-bullet {
    animation: none;
  }
}


/* =========================================================================
   5. SERVICES · 5 форматов · editorial-rows
   -------------------------------------------------------------------------
   Тёмная секция. Отличается и от .disciplines (3-col), и от .steps
   (горизонтальный stepper): 4-колоночная строка num · head · body · arrow.
   В head — service-name + service-meta (формат стоимости). Arrow — CTA-
   сигнал, на hover зажигается acid-lime и сдвигается вверх-вправо.
   ========================================================================= */
.services {
  background: var(--color-base);
}
.services-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.services-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.services-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.services-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-line);
}
/* Сноска под списком услуг: «Любой формат можно взять отдельно».
   Editorial-italic, не давит на CTA, держится у левого края контента. */
.services-note {
  margin: var(--space-6) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 56ch;
}
.services-note em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text);
}
/* ТЗ п.13: выделение ключевых слов в services-note (на тёмном фоне) */
.hl-acid { color: var(--color-accent); font-size: 1.18em; }
/* ТЗ п.8/9/6: услуги списком — каждая с зелёной точки */
.service-bullets {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.service-bullets li {
  position: relative; padding-left: 20px;
}
.service-bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
}
/* ТЗ п.6/7: «Подробнее об услуге» и мелкий шрифт под заголовками — скрыты */
.service-cta-alt { display: none; }
.service-meta { display: none; }
/* служебная утилита неразрывности (ТЗ п.5) */
.nowrap { white-space: nowrap; }
.service-row {
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--dur-base) var(--ease-default);
}
/* Native <details>/<summary> вместо телеграм-ссылки. Сводка несёт grid-layout
   (num + head + body + arrow). При раскрытии — spec-блок + Telegram-CTA.
   Убираем дефолтную disclosure-стрелку браузера: свой "+" в .service-arrow. */
.service-details {
  /* details сам — block; стилизуем внутренние summary/detail. */
}
.service-summary {
  display: grid;
  grid-template-columns: 80px 320px 1fr 60px;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
  color: inherit;
}
.service-summary::-webkit-details-marker { display: none; }
.service-summary::marker { content: ""; }
.service-summary:focus { outline: none; }
.service-summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.service-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-default);
}
.service-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.service-name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  transition: letter-spacing var(--dur-base) var(--ease-default);
}
.service-name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  transition: color var(--dur-base) var(--ease-default);
}
/* Bilingual hybrid: вторичный EN-лейбл инлайн рядом с RU-названием.
   Меньше, muted, без uppercase — чтобы не спорил с display-RU. */
.service-name-en {
  font-family: var(--font-body);
  font-size: 0.52em;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-left: 0.25em;
  white-space: nowrap;
  vertical-align: 0.18em;
}
.service-meta {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.service-body {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 56ch;
}
.service-arrow {
  justify-self: end;
  align-self: center;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-default),
              transform var(--dur-base) var(--ease-default);
}
/* Hover + keyboard-focus подсвечивают строку одинаково. */
.service-row:hover,
.service-row:focus-within { border-bottom-color: var(--color-accent); }
.service-row:hover .service-num,
.service-row:focus-within .service-num { color: var(--color-accent); }
.service-row:hover .service-name em,
.service-row:focus-within .service-name em { color: var(--color-accent); }
.service-row:hover .service-arrow,
.service-row:focus-within .service-arrow {
  color: var(--color-accent);
}
/* Раскрытое состояние: «+» → «×» (поворот на 45°), lime-цвет. */
.service-details[open] > .service-summary .service-arrow {
  color: var(--color-accent);
  transform: rotate(45deg);
}
.service-details[open] > .service-summary .service-num,
.service-details[open] > .service-summary .service-name em {
  color: var(--color-accent);
}
/* Letter-spacing breath на hover-устройствах (Фаза 8) */
@media (hover: hover) {
  .service-row:hover .service-name,
  .service-row:focus-within .service-name {
    letter-spacing: calc(var(--ls-heading) + 0.02em);
  }
}

/* Expandable spec-блок. Editorial: 2-кол dl (term + def), CTA в конце.
   Левый отступ выравнивает spec под service-head (после num + gap). */
.service-detail {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-5);
  padding: 0 0 var(--space-6);
}
/* FAQ переиспользует .service-details, но ответ — простой <p> без grid-column:2,
   поэтому в 2-колоночном гриде он падал в 80px-жёлоб (одно слово в строку).
   В FAQ делаем контент обычным блоком на полную ширину с читаемой мерой. */
.faq .service-detail {
  display: block;
  padding: 0 0 var(--space-6);
}
.faq .service-detail p {
  max-width: 70ch;
  margin: 0;
}
/* ТЗ п.21: чиним вёрстку FAQ-summary — вопрос на всю ширину (без num/body он
   падал в 80px-жёлоб общего грида услуг) + полосочки-разделители между вопросами. */
.faq .service-summary {
  grid-template-columns: 1fr 60px;
  gap: var(--space-4);
  align-items: center;
}
.faq-list { border-top: 1px solid var(--color-line); }
.faq-row { border-bottom: 1px solid var(--color-line); }
.faq-row .service-summary { padding: var(--space-4) 0; }
/* ТЗ п.19: меньше воздуха перед следующим блоком */
.faq { padding-bottom: var(--space-7); }
.service-spec {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.service-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
  align-items: baseline;
}
.service-spec-row:first-child { border-top: 0; padding-top: 0; }
.service-spec dt {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.service-spec dd {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0;
  max-width: 60ch;
}
.service-cta {
  grid-column: 2;
  margin-top: var(--space-5);
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-default),
              color var(--dur-fast) var(--ease-default);
}
.service-cta span {
  color: var(--color-accent);
  transition: transform var(--dur-fast) var(--ease-default);
}
.service-cta:hover {
  background: var(--color-accent);
  color: var(--color-text-invert);
}
.service-cta:hover span {
  color: var(--color-text-invert);
  transform: translate(2px, -2px);
}

.service-cta-alt {
  grid-column: 2;
  margin-top: var(--space-3);
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-default);
  padding: 6px 4px;
  min-height: 24px;
}
.service-cta-alt:hover {
  color: var(--color-accent);
}
.service-cta-alt span {
  font-size: 11px;
  color: var(--color-accent);
}

@media (max-width: 1100px) {
  .service-summary {
    grid-template-columns: 56px 1fr 56px;
    gap: var(--space-3) var(--space-4);
  }
  /* Явная привязка к ячейкам: иначе body со `grid-column: 1 / -1` сдвигает
     auto-курсор на новую строку и стрелка падает в row 3, col 1. */
  .service-num { grid-column: 1; grid-row: 1; }
  .service-head { grid-column: 2; grid-row: 1; }
  .service-arrow { grid-column: 3; grid-row: 1; font-size: 24px; }
  .service-body {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: calc(56px + var(--space-4));
  }
  .service-name { font-size: var(--fs-h3); }
  .service-detail {
    grid-template-columns: 56px 1fr;
    gap: var(--space-3) var(--space-4);
  }
  .service-spec,
  .service-cta { grid-column: 2; }
}
@media (max-width: 640px) {
  .service-summary {
    grid-template-columns: 1fr 32px;
    gap: var(--space-3);
  }
  .service-num { grid-column: 1; grid-row: 1; }
  .service-head { grid-column: 1; grid-row: 2; }
  .service-arrow { grid-column: 2; grid-row: 1; font-size: 22px; }
  .service-body { grid-column: 1 / -1; grid-row: 3; padding-left: 0; }
  .service-detail { grid-template-columns: 1fr; gap: var(--space-3); }
  .service-spec,
  .service-cta { grid-column: 1; }
  .service-spec-row { grid-template-columns: 1fr; gap: var(--space-1); }
}


/* =========================================================================
   5.5 COMPETITIVE · конкурентная карта (dark) · v1.2 · PDF-08
   -------------------------------------------------------------------------
   5-col grid на desktop, 3L по центру с lime-frame и lime tag «Growth
   Partner». Strength = white, weakness = muted. Для 3L weakness
   заменена на tag (lime, uppercase eyebrow-стиль). Высота колонок
   выравнена — align-items: stretch + min-height для весовой плашки.
   ========================================================================= */
.competitive {
  background: var(--color-base);
  /* v1.4: карточки заезжают с +64px translateX — clip не пускает их
     наружу viewport, иначе появляется horizontal scrollbar до reveal. */
  overflow-x: clip;
}
.competitive-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.competitive-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.competitive-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.competitive-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.competitive-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}
/* v1.4 motion-акценты: 5 карточек выезжают ИЗ-ЗА правого края viewport,
   проходят весь путь до своих cell-позиций. Stagger 220ms × idx даёт
   конвейерный ритм: 01 первая (приезжает с самого правого края к крайне
   левой cell, дольше всех в движении), 05 последняя (короче путь).
   `.competitive` имеет overflow-x: clip — карточки не создают horizontal
   scroll, когда стоят за правым краем.

   ВАЖНО: .competitive-col имеет собственный `transition: border-color ...`
   shorthand, который сбрасывает transition-delay в 0 и не включает
   opacity/transform. Поэтому здесь явно прописываем полный transition
   и восстанавливаем transition-delay по --idx. */
.competitive-grid > [data-reveal] {
  --motion-stagger: 220ms;
  transform: translateX(110vw);
  opacity: 1; /* opacity не fade, чтобы виден был сам conveyor — карточка едет, а не появляется */
  transition: transform 1100ms var(--ease-enter),
              border-color var(--dur-base) var(--ease-default);
  transition-delay: calc(var(--idx, 0) * var(--motion-stagger));
}
.competitive-grid > [data-reveal].is-visible {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .competitive-grid > [data-reveal] { transform: none; transition-delay: 0s; }
}
/* На mobile (1 колонка) карточки идут друг под другом — конвейерный
   эффект теряет смысл, возвращаемся к стандартному translateY. */
@media (max-width: 640px) {
  .competitive-grid > [data-reveal] {
    transform: translateY(var(--motion-distance-md));
    --motion-stagger: 80ms;
  }
}
.competitive-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-line);
  min-height: 280px;
  transition: border-color var(--dur-base) var(--ease-default);
}
.competitive-col:hover { border-color: var(--color-text-muted); }
.competitive-col--us {
  border-color: var(--color-accent);
  /* лёгкое свечение, чтобы 3L-плашка читалась как «фокус» */
  box-shadow: 0 0 0 1px var(--color-accent) inset, 0 0 24px rgb(200 255 61 / 0.08);
}
.competitive-col--us:hover { border-color: var(--color-accent); }
.competitive-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-text-muted);
}
.competitive-col--us .competitive-num { color: var(--color-accent); }
.competitive-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
.competitive-strength {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: auto 0 0;
}
.competitive-strength em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.competitive-weakness {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
}
.competitive-tag {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.competitive-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4;
  letter-spacing: var(--ls-heading);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 36ch;
  margin: var(--space-7) auto 0;
  text-wrap: balance;
}
.competitive-tagline em {
  font-style: italic;
  color: var(--color-text);
}

@media (max-width: 1100px) {
  /* 3-col: 01 / 02 / 03 → 04 / 05. Числовой порядок 01→05 сохраняем
     на всех ширинах — нумерация на карточках видна, перестановка ломала
     бы счёт. 3L подсвечена lime-бордером и box-shadow, этого хватает
     как визуального якоря. */
  .competitive-grid { grid-template-columns: repeat(3, 1fr); }
  .competitive-col { min-height: 220px; }
}
@media (max-width: 640px) {
  .competitive-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .competitive-col { min-height: auto; }
}


/* =========================================================================
   6. FIT · кому подходим / кому не подходим · симметричный двухколонник
   -------------------------------------------------------------------------
   Cream-секция. Отличается от .disciplines (3-col) / .steps (5-col stepper) /
   .services (4-col с arrow): два симметричных editorial-столбца, разделённых
   acid-lime вертикальной линией. Сверху каждой колонки — glyph (✓/✗) + title.
   В каждом item — serif italic num + body. Em-акценты в левой колонке —
   acid-lime, в правой — без цвета (muted text-invert).
   Итог секции — фильтр-цитата serif italic, отбита крупным spacing сверху.
   ========================================================================= */
.fit-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.fit-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.fit-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.fit-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-invert-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-invert);
  position: relative;
}
/* вертикальный разделитель между колонками — acid-lime, полная opacity,
   width 2px чтобы lime читался на cream (на 1px + 0.4 был невидим). */
.fit-grid::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--color-accent);
}
/* Single-column вариант (без «Не подходим»): одна колонка центрированно,
   без вертикального lime-divider. */
.fit-grid--single {
  grid-template-columns: minmax(0, 56ch);
  justify-content: center;
}
.fit-grid--single::before { display: none; }

.fit-col-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.fit-glyph {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  font-weight: var(--fw-semibold);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
/* Yes-glyph = lime-chip (заливка lime, glyph dark). На cream lime как
   тонкий цвет не читается — даём ему массу через chip-fill. */
.fit-col--yes .fit-glyph {
  background: var(--color-accent);
  color: #0E1012;
}
/* No-glyph = тонкий outline, без заливки (muted-ergonomic). */
.fit-col--no .fit-glyph {
  background: transparent;
  color: var(--color-text-invert-muted);
  border: 1px solid var(--color-line-invert);
}
.fit-col-title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-invert);
}

.fit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fit-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line-invert);
  align-items: baseline;
}
.fit-item:first-child { border-top: none; padding-top: 0; }
.fit-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-text-invert-muted);
}
.fit-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-invert);
  max-width: 36ch;
}
/* italic-em: в левой колонке загорается acid-lime, в правой — наследует */
.fit-col--yes .fit-text em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-text-invert);
}
.fit-col--no .fit-text em {
  font-style: normal;
}

.fit-quote {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-invert);
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.fit-quote em {
  /* цитата уже serif italic — em выделяем тонкой acid-lime подчёркивающей линией,
     цвет текста наследуем (чтобы glyph не «пёстрил») */
  font-style: italic;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 88%;
  padding: 0 2px;
}

@media (max-width: 960px) {
  .fit-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .fit-grid::before { display: none; }
  .fit-col--no { padding-top: var(--space-5); border-top: 1px solid var(--color-line-invert); }
  .fit-title { font-size: var(--fs-h2); }
  .fit-quote { font-size: var(--fs-h3); margin-top: var(--space-7); }
}
@media (max-width: 640px) {
  .fit-item { grid-template-columns: 40px 1fr; gap: var(--space-3); }
  .fit-text { font-size: var(--fs-body); }
  .fit-quote { text-align: left; max-width: none; }
}


/* -------------------------------------------------------------------------
   PILOTS · Pilot Slots 2026 (v1.2, replaces «results» typographic block)
   Editorial-rows: 3 слота по сегментам. Слот = head (eyebrow + name + status)
   + 3 spec-row + mailto-CTA. Хайрлайны сверху каждого слота, dark surface.
   ------------------------------------------------------------------------- */
.pilots {
  background: var(--color-base);
}
.pilots-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.pilots-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.pilots-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.pilots-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.pilots-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.pilot-slot {
  display: grid;
  grid-template-columns: 320px 1fr 220px;
  gap: var(--space-6);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-line);
  align-items: start;
}
.pilot-slot:last-child {
  border-bottom: 1px solid var(--color-line);
}
.pilot-slot-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pilot-slot-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}
.pilot-slot-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin: 0;
}
.pilot-slot-status {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.pilot-slot-spec {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.pilot-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
  align-items: baseline;
}
.pilot-spec-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.pilot-slot-spec dt {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.pilot-slot-spec dd {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0;
  max-width: 60ch;
}
.pilot-slot-cta {
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-default),
              color var(--dur-fast) var(--ease-default);
}
.pilot-slot-cta span {
  color: var(--color-accent);
  transition: transform var(--dur-fast) var(--ease-default);
}
.pilot-slot-cta:hover {
  background: var(--color-accent);
  color: var(--color-text-invert);
}
.pilot-slot-cta:hover span {
  color: var(--color-text-invert);
  transform: translate(2px, -2px);
}

.pilots-note {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--color-text-muted);
  margin: var(--space-7) 0 0;
  max-width: 56ch;
}

@media (max-width: 1100px) {
  .pilot-slot {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .pilot-slot-cta { justify-self: start; }
}
@media (max-width: 640px) {
  .pilots-title { font-size: var(--fs-h2); }
  .pilot-spec-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}


/* =========================================================================
   7.5 VALUES · 4 ценности (cream rhyme c Team) · v1.2
   -------------------------------------------------------------------------
   Editorial-grid 4-col на desktop, 2×2 на ≤1100, 1-col на ≤640. Без
   border-карточек: тонкие хайрлайны сверху и слева для tab-разделения.
   italic-num + display-name + body. Em-акценты — petrol blue (cream
   surface, lime недостаточный контраст 1.04:1).
   ========================================================================= */
.values-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.values-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.values-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.values-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-invert-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.values-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line-invert);
}
.value {
  padding: var(--space-5) var(--space-4) var(--space-5) 0;
  border-left: 1px solid var(--color-line-invert);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.value:first-child {
  border-left: none;
  padding-left: 0;
}
.value:not(:first-child) {
  padding-left: var(--space-4);
}
.value-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-text-invert-muted);
}
.value-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
.value-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-invert-muted);
  margin: 0;
}
.value-body em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent-deep);
}

@media (max-width: 1100px) {
  .values-list {
    grid-template-columns: 1fr 1fr;
  }
  .value:nth-child(2) {
    border-left: 1px solid var(--color-line-invert);
  }
  .value:nth-child(3) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-line-invert);
    padding-top: var(--space-5);
  }
  .value:nth-child(4) {
    border-top: 1px solid var(--color-line-invert);
    padding-top: var(--space-5);
  }
}
@media (max-width: 640px) {
  .values-list { grid-template-columns: 1fr; }
  .value {
    border-left: none !important;
    padding: var(--space-5) 0 !important;
    border-top: 1px solid var(--color-line-invert);
  }
  .value:first-child { border-top: none; padding-top: 0 !important; }
}


/* =========================================================================
   8. TEAM · 5 ролей-функций (editorial-grid, cream)
   -------------------------------------------------------------------------
   5-колоночный grid функций (не людей). Без порядковых номеров — отличие
   от disciplines/services/steps (там 01-07/01-05). Без horizontal acid-lime
   line сверху (отличие от .steps) — вертикальные тонкие borders между
   колонками. Hover — petrol-blue color shift на name+caption (рифма с
   AI/analytics deep-accent), без translate и без border-feedback.
   ========================================================================= */
.team-head {
  max-width: 60ch;
  margin-bottom: var(--space-9);
}
.team-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-invert);
}
.team-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-invert);
}
.team-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: 1.45;
  color: var(--color-text-invert-muted);
  margin-top: var(--space-5);
  max-width: 56ch;
}

.team-roles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--color-line-invert);
}
.team-role {
  padding: var(--space-5) var(--space-4);
  border-left: 1px solid var(--color-line-invert);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: background-color var(--dur-fast) var(--ease-default);
}
.team-role:first-child {
  border-left: none;
  padding-left: 0;
}
.team-role:last-child {
  padding-right: 0;
}
.team-role-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-text-invert);
  margin: 0;
  transition: color var(--dur-fast) var(--ease-default),
              letter-spacing var(--dur-base) var(--ease-default);
}
.team-role-name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-invert);
}
.team-role-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-l);
  line-height: 1.2;
  color: var(--color-text-invert-muted);
  margin: 0;
  transition: color var(--dur-fast) var(--ease-default);
}
.team-role-caption em {
  font-style: italic;
}
.team-role-body {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: 1.55;
  color: var(--color-text-invert);
  margin: 0;
}

/* hover — petrol-blue color shift на name + caption (рифма с deep-accent
   из палитры, выделенной под AI/аналитику; на cream высокий контраст,
   acid-lime на cream был бы пёстрым). */
.team-role:hover .team-role-name,
.team-role:hover .team-role-caption,
.team-role:focus-within .team-role-name,
.team-role:focus-within .team-role-caption {
  color: var(--color-accent-deep);
}
/* Letter-spacing breath на hover-устройствах (Фаза 8) */
@media (hover: hover) {
  .team-role:hover .team-role-name,
  .team-role:focus-within .team-role-name {
    letter-spacing: calc(-0.01em + 0.02em);
  }
}

@media (max-width: 1100px) {
  .team-roles {
    grid-template-columns: repeat(2, 1fr);
    border-top: none;
  }
  .team-role {
    border-left: none;
    border-top: 1px solid var(--color-line-invert);
    padding: var(--space-5) 0;
  }
  .team-role:nth-child(odd) {
    padding-right: var(--space-4);
    border-right: 1px solid var(--color-line-invert);
  }
  .team-role:nth-child(even) {
    padding-left: var(--space-4);
  }
  .team-role:nth-child(5) {
    grid-column: 1 / -1;
    padding-right: 0;
    padding-left: 0;
    border-right: none;
  }
}
@media (max-width: 640px) {
  .team-title { font-size: var(--fs-h2); }
  .team-head { margin-bottom: var(--space-7); }
  .team-roles {
    grid-template-columns: 1fr;
  }
  .team-role,
  .team-role:nth-child(odd),
  .team-role:nth-child(even),
  .team-role:nth-child(5) {
    padding: var(--space-5) 0;
    border-right: none;
    grid-column: auto;
  }
  .team-role-name { font-size: var(--fs-h4); }
  .team-role-caption { font-size: var(--fs-body); }
}


/* =========================================================================
   9. CONTACTS · разговор начинается (asymmetric 2-col, dark)
   -------------------------------------------------------------------------
   Финальная секция. Седьмой list-pattern, не повторяет ни один предыдущий:
   asymmetric двухколонник 1.2fr / 1fr. Слева copy-блок (eyebrow + title +
   lede + CTA-кнопка), справа — channel-list (3 строки label/value).
   Acid-lime border-top на grid — финальный визуальный мостик к hero
   (там тоже acid-lime, radial bloom). Italic-em «помочь» — serif italic
   acid-lime (рифма с what-/services-title em).
   Hover на channel-value — acid-lime color shift, без translate
   (рифма с .cover-nav hover, чисто типографический сигнал).
   ========================================================================= */
.contacts-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-7);
  align-items: start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-accent);
}

.contacts-copy {
  display: flex;
  flex-direction: column;
}
.contacts-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  max-width: 22ch;
}
.contacts-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.contacts-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  max-width: 48ch;
}
.contacts-cta {
  margin-top: var(--space-7);
}
.contacts-cta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-default);
}
.contacts-cta .btn--primary:hover .contacts-cta-arrow {
  transform: translate(3px, -3px);
}


/* Bilingual explainer над формой (v1.2.1) — EN-claim + RU-дополнение.
   Bilingual editorial из source-of-truth: EN сверху как brand-label, RU
   как длинное объяснение. Без border-карточки — типографический блок,
   разделитель — тонкий хайрлайн сверху. */
.contacts-form-explainer {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 36rem;
}
.contacts-form-explainer-en {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contacts-form-explainer-en span:last-child {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}
.contacts-form-explainer-ru {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 50ch;
}

/* Brief-форма (v1.2) — short-brief альтернатива Telegram. Без backend:
   submit → mailto-prефилл на hello@3l.agency. Inputs — без border-box,
   подчёркивание снизу (editorial). Focus-ring через accent-color на
   bottom-border. Выше — .contacts-form-explainer (новый bilingual блок). */
.contacts-form {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 36rem;
}
.contacts-form-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
/* ТЗ п.14: в audit-блоке «ПОЛУЧИТЬ РАЗБОР ЗА 24 ЧАСА» — аккуратное окошко (lime-pill на тёмном) */
#audit-form .contacts-form-eyebrow {
  display: inline-block;
  align-self: flex-start;
  color: var(--color-accent);
  border: 1px solid rgba(200, 255, 61, 0.4);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  margin-bottom: var(--space-2);
}
.contacts-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: text;
}
.contacts-form-field:has(.contacts-form-input--select) {
  cursor: pointer;
}
.contacts-form-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-default);
}
.contacts-form-input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-3) 0;
  outline: none;
  resize: none;
  transition: border-color var(--dur-fast) var(--ease-default);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.contacts-form-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}
.contacts-form-input::-webkit-input-placeholder { color: var(--color-text-muted); opacity: 0.7; }
/* Hover на любой части label (label + placeholder + linе) — bottom-border
   подсвечивается, label-text становится светлее. Даёт явный visual cue,
   что вся область кликабельна (а не только нижняя линия). */
.contacts-form-field:hover .contacts-form-input {
  border-bottom-color: var(--color-text-muted);
}
.contacts-form-field:hover .contacts-form-label {
  color: var(--color-text);
}
.contacts-form-input:focus {
  border-bottom-color: var(--color-accent);
}
.contacts-form-input:focus-visible {
  border-bottom-color: var(--color-accent);
  outline: none;
}
.contacts-form-input--select {
  /* стандартная стрелка select — заменяем кастомной chevron через SVG
     background. На dark — текстовый цвет, на focus — lime. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A8E94' stroke-width='1.5'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 8px;
  padding-right: 24px;
}
.contacts-form-input--select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23C8FF3D' stroke-width='1.5'><path d='M1 1.5l5 5 5-5'/></svg>");
}
/* Согласия — 152-ФЗ + 38-ФЗ. Под select'ом, перед submit-кнопкой. */
.contacts-form-consent {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.contacts-form-consent-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  cursor: pointer;
}
.contacts-form-consent-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-text);
  cursor: pointer;
}
.contacts-form-consent-row a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-line);
  transition: text-decoration-color var(--dur-fast) var(--ease-default);
}
.contacts-form-consent-row a:hover {
  text-decoration-color: var(--color-text);
}

.contacts-form-submit {
  align-self: flex-start;
  margin-top: var(--space-2);
}
.contacts-form-submit span {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-default);
}
.contacts-form-submit:hover span {
  transform: translate(2px, -2px);
}
.contacts-form-note {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 50ch;
  line-height: 1.45;
}


.contacts-channels {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line);
  align-items: baseline;
}
.contact-row:first-child {
  padding-top: 0;
}
.contact-row:last-child {
  border-bottom: none;
}
.contact-label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.contact-value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-default);
}
a.contact-value:hover {
  color: var(--color-accent);
}
.contact-row--static .contact-value {
  color: var(--color-text-muted);
}

@media (max-width: 960px) {
  .contacts-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .contacts-title { font-size: var(--fs-h2); }
  .contact-row { grid-template-columns: 140px 1fr; }
}
@media (max-width: 640px) {
  .contact-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4) 0;
  }
  .contact-value { font-size: var(--fs-h4); }
}


/* =========================================================================
   FOOTER · финальная плашка, editorial-asymmetric (dark)
   -------------------------------------------------------------------------
   Не повторяет ни один list-pattern (8-я композиция):
   - 3 горизонтальных «полосы»: brand · claim · meta, разделённые space.
   - Большой типографический mark 3L× — эхо hero-mark, замыкает страницу.
   - Claim рифмуется с hero-title (italic em serif italic acid-lime).
   - Footer-nav — повтор top-nav, без hover-translate, только color shift.
   Сепаратор сверху — тонкая линия от contacts (не acid-lime — он уже на
   contacts-grid border-top, два acid-lime подряд были бы перебором).
   ========================================================================= */
.site-footer {
  background: var(--color-base);
  padding: var(--space-8) var(--gutter) var(--space-6);
  border-top: 1px solid var(--color-line);
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.footer-brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer-mark {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  line-height: 0;
}
.footer-mark .mark {
  width: var(--fs-h1);
  height: var(--fs-h1);
  display: block;
}
.footer-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-l);
  color: var(--color-text-muted);
}

.footer-claim {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  max-width: 32ch;
  color: var(--color-text);
}
.footer-claim em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.footer-copy {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.footer-nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-default);
}
.footer-nav a:hover {
  color: var(--color-accent);
}
.author-sign {
  font-size: 12px;
  opacity: 0.6;
  text-align: center;
  color: inherit;
  user-select: text;
  margin: 0;
  padding-top: var(--space-4);
}
.author-sign--micro {
  font-size: 11px;
  opacity: 0.45;
}

@media (max-width: 960px) {
  .footer-claim { font-size: var(--fs-h4); }
}
@media (max-width: 640px) {
  .site-footer {
    padding: var(--space-7) var(--gutter) var(--space-5);
  }
  .footer-inner { gap: var(--space-6); }
  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .footer-nav { gap: var(--space-4); }
}


/* =========================================================================
   REBUILD 2026-06-24 · новые компоненты 8-экранного funnel
   -------------------------------------------------------------------------
   Аддитивный слой к существующей дизайн-системе. Никакого нового визуального
   языка — только токены, хайрлайны, lime-сигнал. Старые orphan-правила
   (.mission-sub, .what, .ai-list, .competitive, .fit, .values, .team,
   .pilots-*) оставлены нетронутыми и безвредны.
   ========================================================================= */

/* --- Hero: блок тегов услуг (бегущая строка) -------------------------------
   Editorial-метки одной строкой, бесшовный авто-скролл по кругу. Ширина = по
   тексту (колонка контента), не во весь экран.
   Seamless-паттерн: .cover-tags — flex-контейнер, внутри ДВЕ идентичные группы,
   каждая min-width:100% (всегда заполняет контейнер) и flex-shrink:0. Обе едут
   одной анимацией translateX 0 → -100% (от своей ширины). Когда группа 1 уходит
   влево на свою ширину, группа 2 встаёт ровно на её место → петля без шва и без
   пустоты при ЛЮБОЙ ширине контейнера (прежний баг: 1 копия была у́же экрана). */
.cover-tags {
  margin-top: var(--space-5);
  width: 100%;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cover-tags__group {
  flex: 0 0 auto;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: cover-tags-scroll 38s linear infinite;
}
.cover-tags:hover .cover-tags__group,
.cover-tags:focus-within .cover-tags__group { animation-play-state: paused; }
.cover-tags__group li {
  white-space: nowrap;
  padding-inline-end: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-default);
}
.cover-tags__group li:hover { color: var(--color-text); }
@keyframes cover-tags-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cover-tags__group { animation: none; }
}
@media (max-width: 640px) {
  .cover-tags__group li { font-size: var(--fs-caption); padding-inline-end: var(--space-5); }
  .cover-tags__group { animation-duration: 26s; }
}

/* --- Mission+Manifesto: слитый блок ----------------------------------------
   mission-emphasis = курсивная подводка (serif italic, отдельная строка, НЕ
   внутри потокового body — см. feedback italic-serif-not-in-body).
   mission-text = два manifesto-абзаца. */
.mission-emphasis {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin-top: var(--space-5);
  max-width: 40ch;
}
.mission-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  max-width: 56ch;
}
.mission-text p + p { margin-top: var(--space-3); }

/* --- Services: список рекламных площадок внутри dd ------------------------- */
.service-platforms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.service-platforms li {
  position: relative;
  padding-left: var(--space-4);
}
.service-platforms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

/* --- AUDIT · лид-магнит за 24 часа (dark base) -----------------------------
   asymmetric двухколонник как .contacts-grid, но с lime border-top. Форма
   справа переиспользует .contacts-form-* (нативно dark). */
.audit {
  background: var(--color-base);
}
.audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-accent);
}
.audit-copy {
  display: flex;
  flex-direction: column;
}
.audit-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  max-width: 18ch;
}
.audit-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.audit-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  max-width: 48ch;
}
.audit-gains {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 48ch;
}
.audit-gains li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}
.audit-gains li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
}
/* Форма в audit переиспользует .contacts-form визуально; убираем верхний
   hairline (он нужен только в .contacts, где форма идёт после CTA). */
#audit-form {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  max-width: none;
}
@media (max-width: 960px) {
  .audit-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .audit-title { font-size: var(--fs-h2); max-width: none; }
}

/* --- CASES · визуальный слот под материалы --------------------------------
   Плейсхолдер 16:9 в head-колонке слота. Тонкая dashed-рамка = «сюда придёт
   скриншот/видео». Не декоративная графика — служебный слот. */
.case-visual {
  margin: var(--space-2) 0 0;
  aspect-ratio: 16 / 10;
  width: 100%;
  border: 1px dashed var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-base-soft);
}
.case-visual-note {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3);
}
.pilots-note a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 960px) {
  /* в одноколоночном слоте на mobile визуал не должен раздуваться */
  .case-visual { max-width: 420px; }
}