/* ============================================================
   Лев Зуев — портфолио · стили
   Тема: «Сигнал» — две палитры на одних токенах.
     :root                 — «Сигнал · Бумага» (светлая, дефолт)
     [data-theme="dark"]   — «Сигнал» (тёмный премиум, принятый дизайн)
   Шрифты: Golos Text (дисплей, 400–900) + Manrope (текст, 300–800)
   Акцент в обеих темах: #ff4d2e (в светлой для ТЕКСТА — --accent-ink,
   затемнённый до WCAG AA; заливки остаются #ff4d2e).
   ============================================================ */

/* ── Токены — светлая «Сигнал · Бумага» (дефолт) ─────────── */
:root {
  color-scheme: light;

  /* Цвета */
  --bg:            #f3f0e9;                  /* тёплая бумага, не стерильный #fff */
  --bg-rgb:        243, 240, 233;
  --surface:       #ebe7dd;                  /* карточки/ховеры — бумага глубже */
  --surface-hi:    #e3ded2;
  --text:          #161513;                  /* графитовые чернила (≈16:1) */
  --text-dim:      #5d574f;                  /* основной текст (≈6.3:1, AA) */
  --text-mid:      #423d36;                  /* усиленный текст (≈9.4:1) */
  --accent:        #ff4d2e;                  /* заливки: кнопки, marquee, линии */
  --accent-rgb:    255, 77, 46;
  --accent-ink:    #c93214;                  /* акцент-КАК-ТЕКСТ на бумаге (≈4.7:1, AA) */
  --accent-dim:    rgba(201, 50, 20, 0.10);
  --on-accent:     #111111;                  /* текст на акцентной заливке (≈5.7:1) */
  --flash:         #ffffff;                  /* блик «живых» диаграмм (волна вафли,
                                                импульс-заявка); поверх акцента —
                                                одинаков в обеих темах */
  --border:        rgba(22, 21, 19, 0.12);
  --border-md:     rgba(22, 21, 19, 0.18);
  --border-strong: rgba(22, 21, 19, 0.34);

  /* Поверхностные детали */
  --pattern-line:  rgba(22, 21, 19, 0.07);   /* штриховка пустых кейс-слотов */
  --pattern-soft:  rgba(22, 21, 19, 0.05);
  --chip-border:   rgba(22, 21, 19, 0.22);   /* пилюля «Кейс скоро здесь» */
  --grain-opacity: 0.05;                     /* зерно на бумаге чуть плотнее */
  --meta-num-opacity: 0.07;                  /* водяная «16» в hero */
  --nav-shadow:
    0 18px 44px -22px rgba(22, 21, 19, 0.28),
    0 2px 10px -6px rgba(22, 21, 19, 0.10);  /* отрыв пилюли от бумаги */

  /* Типографика */
  --ff-display: 'Golos Text', system-ui, sans-serif;
  --ff-body:    'Manrope', system-ui, -apple-system, sans-serif;

  /* Физика */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Сетка + воздух */
  --maxw:   1280px;
  --pad:    clamp(24px, 6vw, 104px);
  --space-section: clamp(104px, 15vw, 208px);
  --radius: 12px;

  /* Мини-Clawd: родные цвета маскота — терракота корпуса и чёрные
     глаза (решение владельца 2026-07-03, перенесено из services.css
     2026-07-04). Токены темонезависимые — Clawd одинаков в обеих темах. */
  --clawd:     #dd775b;
  --clawd-eye: #000000;

  /* Чат-виджет Clawd (.cw-*): отрыв панели от бумаги + вуаль на мобиле */
  --cw-shadow:
    0 28px 72px -28px rgba(22, 21, 19, 0.38),
    0 6px 20px -10px rgba(22, 21, 19, 0.16);
  --cw-scrim: rgba(22, 21, 19, 0.32);
}

/* ── Токены — тёмный «Сигнал» (принятый дизайн, 1:1) ─────── */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #111111;
  --bg-rgb:        17, 17, 17;
  --surface:       #181818;
  --surface-hi:    #222222;
  --text:          #e8e6e3;
  --text-dim:      #6a6a6a;
  --text-mid:      #9a9a9a;
  --accent:        #ff4d2e;
  --accent-ink:    #ff4d2e;                  /* на графите акцент читается сам */
  --accent-dim:    rgba(255, 77, 46, 0.12);
  --on-accent:     #111111;
  --border:        rgba(232, 230, 227, 0.07);
  --border-md:     rgba(232, 230, 227, 0.13);
  --border-strong: rgba(232, 230, 227, 0.26);

  --pattern-line:  rgba(232, 230, 227, 0.045);
  --pattern-soft:  rgba(232, 230, 227, 0.04);
  --chip-border:   rgba(232, 230, 227, 0.16);
  --grain-opacity: 0.03;
  --meta-num-opacity: 0.04;
  --nav-shadow:    none;

  --cw-shadow:
    0 28px 72px -24px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(232, 230, 227, 0.04);
  --cw-scrim: rgba(0, 0, 0, 0.5);
}

/* ── Плавная смена темы ────────────────────────────────────
   Класс .theme-anim вешается JS ТОЛЬКО на время переключения
   (≈0.5s) — при первичной загрузке переходов нет. Только
   цветовые свойства: transform/opacity не трогаем (GSAP). */
.theme-anim,
.theme-anim *,
.theme-anim *::before,
.theme-anim *::after {
  transition:
    background-color 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    outline-color 0.45s ease,
    box-shadow 0.45s ease,
    fill 0.45s ease,
    stroke 0.45s ease;
}
.theme-anim .grain { transition: opacity 0.45s ease; }

/* ── Ресет ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* smooth-scroll.js активен (десктоп): нативный CSS-smooth выключен, иначе
   браузер анимирует каждый кадровый scrollTo глайда и скролл «плывёт» */
html.has-smooth-scroll { scroll-behavior: auto; }
body   { overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
a      { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ol, ul { list-style: none; }

/* ── База ────────────────────────────────────────────────── */
html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

/* ── Зерно (тонкий noise-оверлей, фиксированный, GPU-safe) ── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
}

/* ── Skip-link ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: var(--on-accent);
  padding: 8px 16px;
  border-radius: 6px;
}
.skip-link:focus { top: 16px; }

/* ── Прелоадер ───────────────────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 64px);
  /* По умолчанию видим; JS сразу прячет если уже показывали */
}

/* Если prелоадер уже показан (класс добавлен inline-скриптом) */
.skip-preloader .preloader { display: none; }

.preloader__name {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Маски для mask-reveal слов */
.preloader__line {
  display: block;
  overflow: hidden;
  line-height: 0.88;
}

.preloader__word {
  display: block;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(72px, 14vw, 210px);
  letter-spacing: -0.04em;
  color: var(--text);
  /* GSAP устанавливает yPercent:110 до появления; visibility управляет через .js */
}

/* Editorial-диагональ: вторая строка (ЗУЕВ) — к правому краю */
.preloader__line:last-child {
  text-align: right;
}

.preloader__count {
  font-family: var(--ff-body);
  font-size: clamp(12px, 1.3vw, 18px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  align-self: flex-end;
}

/* ── Навигация — плавающая таблетка ─────────────────────── */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 90;
  transform: translateX(-50%) translateY(-12px);
  opacity: 0;
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);

  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(var(--bg-rgb), 0.76);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 7px 7px 7px 18px;
  width: max-content;
  max-width: calc(100vw - 28px);
  box-shadow: var(--nav-shadow);
}

.nav.is-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Логотип */
.nav__logo {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
  flex-shrink: 0;
  margin-right: 4px;
}
.nav__dot { color: var(--accent-ink); }

/* Ссылки */
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
}
.nav__links a {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  padding: 6px 11px;
  border-radius: 100px;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.nav__links a:hover { color: var(--text); background: var(--border); }
.nav__links a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Правая группа: переключатель языка + CTA */
.nav__right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

/* Переключатель RU/EN */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 5px 11px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.lang:hover { border-color: var(--border-strong); color: var(--text); }
.lang__opt { transition: color 0.2s; }
.lang__opt.is-active { color: var(--text); }
.lang__sep { color: var(--border-strong); }

/* Переключатель темы (солнце/луна) — тот же язык, что и .lang */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border: 1px solid var(--border-md);
  border-radius: 100px;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}
.theme-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.theme-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
}
/* Иконка показывает ЦЕЛЬ: на светлой — луна, на тёмной — солнце */
html[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
html:not([data-theme="dark"]) .theme-toggle .theme-toggle__sun { display: none; }

/* CTA-кнопка в nav */
.nav__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 100px;
  padding: 7px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.18s, transform 0.15s;
}
.nav__cta:hover  { opacity: 0.85; }
.nav__cta:active { transform: scale(0.97); }
.nav__cta:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* На узких экранах скрываем только ссылки навигации; lang-переключатель остаётся */
@media (max-width: 680px) {
  .nav { padding: 7px 7px 7px 16px; }
  .nav__links { display: none; }
}

/* ── Кнопки ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 8px;
  padding: 13px 24px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.18s, transform 0.15s;
}
.btn-primary:hover  { opacity: 0.85; }
.btn-primary:active { transform: scale(0.975); }
.btn-primary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.btn-primary--lg {
  font-size: 16px;
  padding: 16px 34px;
  border-radius: 10px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mid);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  padding: 12px 22px;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s, transform 0.15s;
}
.btn-ghost:hover  { color: var(--text); border-color: var(--border-strong); }
.btn-ghost:active { transform: scale(0.975); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* ── Маска для строк заголовков (.line / .line__inner) ───── */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;  /* пространство под дескендерами (у, р, g, y, p) */
  margin-bottom: -0.12em;  /* компенсация: не сдвигает соседей */
}
.line__inner {
  display: block;
  will-change: transform;
}
.line--accent .line__inner { color: var(--accent-ink); }

/* JS: скрываем line__inner до инициализации GSAP (prevent FOUC) */
.js .hero__headline .line__inner,
.js .contact__title .line__inner { visibility: hidden; }
.js.anim-ready .hero__headline .line__inner,
.js.anim-ready .contact__title .line__inner { visibility: visible; }

/* No-JS: всё видимо сразу */
.no-js .hero__headline .line__inner,
.no-js .contact__title .line__inner { visibility: visible; }

/* ── Utility: display-заголовок ─────────────────────────── */
.h-display {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.93;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* ── Utility: kicker (малая метка секции) ─────────────────── */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: clamp(34px, 5vw, 58px);
}
.section-kicker::after {
  content: '';
  display: block;
  width: clamp(24px, 4vw, 44px);
  height: 1px;
  background: currentColor; /* = --accent-ink; в тёмной теме — тот же #ff4d2e */
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── Scroll reveal (стартовое состояние управляется JS/GSAP) ── */
/* Прогрессивное скрытие: только при наличии .js — без JS всё видно */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* No-JS: сразу видно */
.no-js .reveal { opacity: 1; transform: none; }

/* ── Секции (контент-контейнер) ──────────────────────────── */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-section) var(--pad);
}

/* ══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 var(--pad);
  padding-top: clamp(100px, 14vw, 140px);
  position: relative;
  overflow: hidden;
}

/* Мягкое свечение акцента снизу-слева */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at -5% 108%, rgba(var(--accent-rgb), 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 105% 0%, rgba(var(--accent-rgb), 0.025) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Основной контент */
.hero__body {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding-bottom: clamp(40px, 5vw, 64px);
}

@media (min-width: 900px) {
  .hero__body {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 0 clamp(36px, 5vw, 72px);
    align-items: stretch;
  }
}

.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Эйбрау (метка над заголовком) */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: clamp(28px, 5vw, 52px);
}
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor; /* = --accent-ink */
  flex-shrink: 0;
}

/* Главный заголовок */
.hero__headline {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(68px, 11.5vw, 176px);
  line-height: 0.90;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: clamp(24px, 3.5vw, 44px);
}

/* Строка роли */
.hero__role {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 26px);
  line-height: 1.4;
  color: var(--text-dim);
  margin-bottom: clamp(14px, 2vw, 22px);
}
.hero__role em {
  font-style: normal;
  color: var(--text);
}

/* Под-текст */
.hero__sub {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.72;
  color: var(--text-dim);
  max-width: 500px;
  margin-bottom: clamp(32px, 5vw, 52px);
}

/* CTA-ряд */
.hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Правая мета-колонка (только десктоп) ─────────────────── */
.hero__meta {
  display: none;
}
@media (min-width: 900px) {
  .hero__meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-left: 1px solid var(--border);
    padding-left: clamp(20px, 2vw, 32px);
    padding-bottom: clamp(32px, 4vw, 56px);
  }
}

/* Большая декоративная цифра «16» */
.hero__meta-num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(72px, 9vw, 132px);
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--text);
  opacity: var(--meta-num-opacity);
  margin-bottom: auto;
  padding-bottom: 24px;
  user-select: none;
}

/* Факты */
.hero__meta-facts {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.hero__meta-fact {
  border-top: 1px solid var(--border);
  padding: 11px 0;
}
.hero__meta-fact dt {
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.hero__meta-fact dd {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ── Нижняя статус-полоса ─────────────────────────────────── */
.hero__strip {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding: 24px 0 clamp(32px, 4.5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__strip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__strip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 2.8s ease-in-out infinite;
}
.hero__strip-tags {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.5;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

/* ══════════════════════════════════════════════════════════════
   БЕГУЩАЯ СТРОКА
═══════════════════════════════════════════════════════════════ */
.marquee {
  overflow: hidden;
  border-top:    2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  padding: clamp(12px, 2vw, 20px) 0;
  background: var(--accent);
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  animation: marquee-scroll 32s linear infinite;
}
/* hidden-атрибут (RU/EN-переключение треков) сильнее display выше */
.marquee__track[hidden] { display: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(18px, 3.2vw, 42px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--on-accent);
}
.marquee__group > span { padding: 0 0.45rem; }
.marquee__sep { opacity: 0.4; padding: 0 0.2rem !important; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════
   УСЛУГИ
═══════════════════════════════════════════════════════════════ */
/* Владелец раздражается на случайное выделение текста при клике/драге
   по плотной сетке карточек — выделение отключено ТОЛЬКО в этой секции. */
#services {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.svc-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(60px, 9vw, 112px);
}
@media (max-width: 760px) {
  .svc-header { grid-template-columns: 1fr; gap: 20px; }
}

.svc-header__note {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 44ch;
}

/* Бенто-сетка: хайрлайн-зазоры в языке .value-grid/.facts (1px gap на фоне
   var(--border-md)). Асимметрия НАМЕРЕННАЯ: флагманы 01/02 крупнее и стоят
   вперехлёст друг с другом (02 смещён на строку вниз, не зеркалит 01) —
   ступенька, а не симметричная пара квадратов. Ровно 6 ячеек под 6 услуг,
   пустых клеток нет.
   Радиусы углов сетки навешены на конкретные угловые карточки (а не через
   overflow:hidden на контейнере) — иначе hover-lift верхнего ряда обрезался
   бы маской контейнера. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a f f"
    "a a b b"
    "c c b b"
    "d d e e";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
}
.svc-card:nth-child(1) { grid-area: a; }
.svc-card:nth-child(2) { grid-area: b; }
.svc-card:nth-child(3) { grid-area: c; }
.svc-card:nth-child(4) { grid-area: d; }
.svc-card:nth-child(5) { grid-area: e; }
.svc-card:nth-child(6) { grid-area: f; }

/* Угловые радиусы сетки — карточка-01 всегда левый верхний угол во всех
   раскладках, поэтому задаётся без медиа-условия */
.svc-card:nth-child(1) { border-top-left-radius: var(--radius); }
.svc-card:nth-child(6) { border-top-right-radius: var(--radius); }
.svc-card:nth-child(4) { border-bottom-left-radius: var(--radius); }
.svc-card:nth-child(5) { border-bottom-right-radius: var(--radius); }

@media (max-width: 860px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b b"
      "f c"
      "d e";
  }
  /* На двух колонках карточка-01 занимает всю верхнюю строку — оба
     верхних угла её */
  .svc-card:nth-child(6) { border-top-right-radius: 0; }
  .svc-card:nth-child(1) { border-top-right-radius: var(--radius); }
}
@media (max-width: 540px) {
  .svc-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  /* Сброс через те же :nth-child-селекторы (равная специфичность к
     правилам, что назначают grid-area — иначе .svc-card{grid-area:auto}
     проигрывает каскад и карточки остаются в старом порядке спанов */
  .svc-card:nth-child(1),
  .svc-card:nth-child(2),
  .svc-card:nth-child(3),
  .svc-card:nth-child(4),
  .svc-card:nth-child(5),
  .svc-card:nth-child(6) { grid-area: auto; }
  /* В одну колонку последняя по DOM-порядку карточка (06) — низ стопки */
  .svc-card:nth-child(4),
  .svc-card:nth-child(5) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .svc-card:nth-child(6) { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
}

.svc-card {
  /* Контент течёт СВЕРХУ вниз (номер-водяной знак в углу, заголовок и
     описание — под ним), а не прижат к низу: так у каждой карточки
     гарантированно пустует нижняя часть, если min-height больше контента.
     Это не только держит воздух под флагманами, но и даёт маскоту чистую
     кромку — он ходит подошвами по ВЕРХНЕЙ границе опоры, тело тянется
     вверх, и если опора — низ карточки-01, там не должно быть текста. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  padding: clamp(48px, 5.4vw, 60px) clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px);
  min-height: clamp(168px, 15vw, 216px);
  transition: transform 0.45s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
@media (max-width: 540px) {
  .svc-card { min-height: 0; }
}

/* Флагманы: ИИ-агенты (01) и Мультиагентные системы (02) — крупнее, своя
   поверхность (var(--surface) вместо var(--bg)) и лёгкая диагональная
   штриховка var(--pattern-line), уже используемая в .case__media — не
   новая декорация, а переиспользование языка сайта. min-height ощутимо
   больше содержимого — карточка-01 служит опорой маскота (mascot-site.js),
   запас снизу обязателен. */
.svc-card--flag {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
  padding-top: clamp(60px, 6.6vw, 80px);
  min-height: clamp(320px, 27vw, 452px);
  gap: 14px;
}
@media (max-width: 860px) {
  .svc-card--flag { min-height: clamp(220px, 24vw, 280px); }
}

/* Живой ховер: чернильная заливка от номера в углу + сдержанный lift.
   Без теней-свечений — только точная 1px акцентная кромка (inset). */
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-dim);
  transform: scale(0);
  transform-origin: top left;
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}
.svc-card:hover::before { transform: scale(1); }
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.svc-num {
  position: absolute;
  top: clamp(16px, 2vw, 22px);
  left: clamp(18px, 2.2vw, 26px);
  z-index: 1;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  opacity: 0.7;
  transition: opacity 0.3s;
}
.svc-card--flag .svc-num { font-size: 12px; opacity: 1; }
.svc-card:hover .svc-num { opacity: 1; }

.svc-name {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 23px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
.svc-card--flag .svc-name {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.03em;
}

.svc-desc {
  position: relative;
  z-index: 1;
  font-family: var(--ff-body);
  font-size: clamp(12.5px, 1.15vw, 14px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 40ch;
}
.svc-card--flag .svc-desc {
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.7;
  max-width: 46ch;
}

/* ── Карточки-ссылки (01 → services/ai-agents, 05 → mobile-apps) ──
   Растянутая ссылка: <a.svc-link> в заголовке, её ::after покрывает
   всю карточку — кликабельна вся площадь, в tab-порядке один якорь.
   Низ карточки-01 остаётся чистым (опора маскота — текст туда нельзя),
   поэтому индикатор «Подробнее ↗» живёт в правом верхнем углу. */
.svc-card--link { cursor: pointer; }
/* У карточек-ссылок заголовок и текст — static: containing block для
   растянутого ::after — сама карточка (она position:relative), иначе
   ссылка покрыла бы только строку заголовка. Чернильная заливка ховера
   (10%-я вуаль ::before) ложится ПОВЕРХ такого текста — на глаз
   неотличимо от остальных карточек. */
.svc-card--link .svc-name,
.svc-card--link .svc-desc { position: static; }
/* Текст и метки не перехватывают клик (выделение в #services и так
   выключено): попадание проваливается в растянутый ::after ссылки —
   кликабельна действительно ВСЯ площадь, включая слова. */
.svc-card--link .svc-desc,
.svc-card--link .svc-num,
.svc-card--link .svc-go { pointer-events: none; }
.svc-link { color: inherit; }
.svc-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Фокус-кольцо — на всей карточке (через ::after), не на слове */
.svc-link:focus-visible { outline: none; }
.svc-link:focus-visible::after {
  outline: 2px solid var(--accent-ink);
  outline-offset: -3px;
}

.svc-go {
  position: absolute;
  top: clamp(16px, 2vw, 22px);
  right: clamp(18px, 2.2vw, 26px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0.65;
  white-space: nowrap;
  transition: opacity 0.3s, transform 0.35s var(--ease-out);
}
.svc-card--link:hover .svc-go {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* ── Пиксельная стрелка (единый компонент вместо «↗»/«→»/«←») ──
   Эстетика маскота Clawd: ступенчатые «пиксели» на crispEdges,
   цвет — currentColor (наследует от контекста, работает в обеих
   темах). Хвостовые пиксели .px-t дорисовываются на ховер —
   стрелка будто «выстреливает» по диагонали. */
.px-arr {
  display: block;
  flex-shrink: 0;
}
.px-arr .px-t {
  opacity: 0;
  transition: opacity 0.22s var(--ease-out);
}
.svc-card--link:hover .px-t { opacity: 1; }
.svc-card--link:hover .px-t1 { transition-delay: 0.05s; }
.svc-card--link:hover .px-t2 { transition-delay: 0.13s; }
@media (prefers-reduced-motion: reduce) {
  .px-arr .px-t { opacity: 1; transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   МУЛЬТИАГЕНТНЫЕ СИСТЕМЫ
═══════════════════════════════════════════════════════════════ */
.systems__head {
  /* h2 — полная ширина, lead — прижат вправо (editorial-асимметрия) */
  margin-bottom: clamp(66px, 10vw, 116px);
}

/* Промежуток между h2 и лидом внутри systems__head */
.systems__head .h-display {
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* На мобильных допускаем переносы по правилам языка */
@media (max-width: 760px) {
  .systems__head .h-display { hyphens: auto; }
}

.systems__lead {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.72;
  color: var(--text-dim);
  max-width: 46ch;
  margin-left: auto; /* прижать вправо — отзеркалить h2 */
}
@media (max-width: 760px) {
  .systems__lead { margin-left: 0; }
}

/* Лестница уровней сложности — бенто-сетка в языке .svc-grid/.value-grid:
   хайрлайн-зазоры (gap:1px на фоне var(--border-md)), разноразмерные
   ячейки, номера уровней водяным знаком в углу (.ladder-level, приём
   как у .svc-num). Два входных уровня — рядом наверху (1 шире 2,
   асимметрия намеренная, как у флагманов услуг); флагманская ячейка
   «системы под ключ» — во всю ширину внизу, крупнее и со штриховкой
   var(--pattern-line) — вершина лестницы. DOM-порядок 1→2→3 совпадает
   с визуальным (строка 1 → строка 2), tab-порядок не ломается. */
.ladder {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-areas:
    "a b"
    "c c";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  margin-bottom: clamp(72px, 11vw, 120px);
}
.ladder-cell:nth-child(1) { grid-area: a; border-top-left-radius: var(--radius); }
.ladder-cell:nth-child(2) { grid-area: b; border-top-right-radius: var(--radius); }
.ladder-cell:nth-child(3) {
  grid-area: c;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

@media (max-width: 680px) {
  .ladder {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c";
  }
  /* В одну колонку уровень 1 занимает всю верхнюю строку — оба верхних
     угла его; уровень 2 (был top-right) — угол сбрасываем */
  .ladder-cell:nth-child(1) { border-top-right-radius: var(--radius); }
  .ladder-cell:nth-child(2) { border-top-right-radius: 0; }
}

.ladder-cell {
  /* Контент течёт СВЕРХУ вниз (номер-водяной знак в углу, заголовок и
     описание — под ним) — тот же приём, что в .svc-card: гарантирует
     чистую верхнюю кромку для опоры маскота и воздух под коротким
     контентом. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  padding: clamp(46px, 5.2vw, 58px) clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 28px);
  min-height: clamp(196px, 17vw, 240px);
  transition: transform 0.45s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
@media (max-width: 540px) {
  .ladder-cell { min-height: 0; }
}

/* Флагман — «Мультиагентные системы под ключ»: своя поверхность
   (var(--surface)) и диагональная штриховка, как .svc-card--flag —
   тот же визуальный язык, не новая декорация. */
.ladder-cell--flag {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
  padding-top: clamp(56px, 6.2vw, 74px);
  min-height: clamp(260px, 20vw, 340px);
  gap: 14px;
}

/* Живой ховер: чернильная заливка + сдержанный lift — идентично .svc-card */
.ladder-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-dim);
  transform: scale(0);
  transform-origin: top left;
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}
.ladder-cell:hover::before { transform: scale(1); }
.ladder-cell:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Номер уровня — водяной знак в углу (приём .svc-num) */
.ladder-level {
  position: absolute;
  top: clamp(16px, 2vw, 22px);
  left: clamp(18px, 2.2vw, 26px);
  z-index: 1;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.ladder-cell--flag .ladder-level { font-size: 11px; opacity: 1; }
.ladder-cell:hover .ladder-level { opacity: 1; }

.ladder-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ladder-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
.ladder-cell--flag .ladder-name {
  font-weight: 800;
  font-size: clamp(27px, 3.2vw, 42px);
  letter-spacing: -0.03em;
}

.ladder-tier {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ladder-desc {
  position: relative;
  z-index: 1;
  font-family: var(--ff-body);
  font-size: clamp(12.5px, 1.15vw, 14px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 40ch;
}
.ladder-cell--flag .ladder-desc {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.7;
  max-width: 48ch;
}

/* ── Ценность для бизнеса ─────────────────────────────────── */
.value { margin-top: 0; }

.value__head {
  margin-bottom: clamp(36px, 5vw, 56px);
}
.value__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--text);
  margin-bottom: 12px;
}
.value__lead {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.35vw, 16px);
  color: var(--text-dim);
  max-width: 52ch;
  line-height: 1.65;
}

/* ── Сцена «ИИ-отдел за работой» (центрпис перед выгодами) ──
   Пять мини-Clawd'ов за рабочими станциями: головы выглядывают
   из-за мониторов, клешни на клавиатурах, экраны живут (код /
   график / схема оркестратора). Разметка = финальный постер
   (no-js и reduced-motion видят статичную сцену), хореография —
   script.js §6e (initAgentOffice). Цвета — только токены (обе
   темы). Рамка контейнера = «комната»: её нижняя грань — пол,
   на который встают ножки столов; ВЕРХНЯЯ грань — опора маскота
   (mascot-site.js ANCHOR_DEFS '.office'). padding-bottom: 0 —
   не добавлять, иначе столы повиснут над полом. */
.office {
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  background-color: var(--surface);
  overflow: hidden;
  padding: clamp(16px, 2.4vw, 26px) clamp(16px, 3vw, 44px) 0;
  margin-bottom: clamp(26px, 4vw, 40px);
}

.office__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(10px, 1.6vw, 18px);
}
.office-cap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* статусная точка «отдел в сети» */
.office-cap::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.office-clock { width: clamp(26px, 3vw, 34px); height: auto; flex: none; }
.ofc-clock-face { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.ofc-clock-hand { fill: var(--text); }
.ofc-clock-dot  { fill: var(--accent); }

.office__row {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.8vw, 24px);
}
.office-desk { flex: 1 1 0; min-width: 0; height: auto; }
/* оркестратор в центре чуть крупнее — иерархия штата */
.office-desk--lead { flex-grow: 1.22; }

/* мебель — чернила; экран — «стекло» из чернил, строки — бумага
   (в тёмной теме токены сами инвертируют: светлый экран, тёмный код) */
.ofc-ink    { fill: var(--text); }
.ofc-pot    { fill: var(--text); }
.ofc-key    { fill: var(--text); fill-opacity: 0.82; }
.ofc-screen { fill: var(--text); }
.ofc-halo   { fill: var(--accent); opacity: 0.08; }
.ofc-line   { fill: var(--bg); opacity: 0.7; }
.ofc-line--accent { fill: var(--accent); opacity: 0.95; }
.ofc-cursor { fill: var(--accent); }
.ofc-abase  { fill: var(--bg); opacity: 0.3; }
.ofc-bar    { fill: var(--bg); opacity: 0.55; }
.ofc-bar--accent { fill: var(--accent); opacity: 0.9; }
.ofc-wire   { fill: var(--bg); opacity: 0.45; }
.ofc-node   { fill: var(--bg); opacity: 0.85; }
.ofc-node--root { fill: var(--accent); opacity: 1; }
.ofc-dot    { fill: var(--accent); }
.ofc-note   { fill: var(--accent); opacity: 0.7; }
.ofc-paper  { fill: var(--text); opacity: 0.35; }
.ofc-leaf   { fill: var(--text); opacity: 0.45; }
.ofc-mug    { fill: var(--accent); opacity: 0.85; }
/* мини-Clawd — токены маскота (как .vsc-clawd / .mini-clawd) */
.office .mc-fill { fill: var(--clawd); }
.office .mc-eye  { fill: var(--clawd-eye); }

/* Адаптив: штат достойно сокращается — 5 → 4 → 3 станции.
   script.js §6e анимирует и скрытые (display:none не рисуется —
   стоимость нулевая, зато resize обратно ничего не ломает). */
@media (max-width: 860px) {
  .office-desk:nth-child(5) { display: none; }
}
@media (max-width: 560px) {
  .office-desk:nth-child(4) { display: none; }
}

/* Продающая бенто-сетка выгод: 4 разноразмерные ячейки с честными
   диаграммами (арифметика календаря · структура процесса · штат vs
   нагрузка · единый стандарт). Язык — как .svc-grid/.ladder: хайрлайн-
   зазоры 1px на var(--border-md), асимметрия по диагонали (флагман-вафля
   слева сверху, широкий график справа снизу), у флагмана своя поверхность,
   у ячейки качества — штриховка. Ховер — только смена фона (ячейки не
   кликабельны, lift не нужен), поэтому overflow:hidden на контейнере
   безопасен и режет углы сам. */
.value-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas:
    "a a a b b"
    "d d c c c";
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.value-item--hours    { grid-area: a; }
.value-item--speed    { grid-area: b; }
.value-item--standard { grid-area: d; }
.value-item--scale    { grid-area: c; }

@media (max-width: 900px) {
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b d"
      "c c";
  }
}
@media (max-width: 640px) {
  .value-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "d" "c";
  }
}

.value-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background-color: var(--bg);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 30px) clamp(26px, 3.2vw, 38px);
  transition: background-color 0.35s var(--ease-out);
}
.value-item:hover { background-color: var(--surface); }

/* Флагман-вафля — своя поверхность (как .svc-card--flag; без штриховки:
   вафля сама — текстура) */
.value-item--hours { background-color: var(--surface); }
.value-item--hours:hover { background-color: var(--surface-hi); }

/* Ячейка качества — диагональная штриховка флагманов (переиспользование
   языка сайта, не новая декорация). Сосед по нижней строке («Масштаб») —
   двумирный сплит с SVG-сценами, объективно выше по контенту; grid
   стретчит эту ячейку до его высоты. justify-content: space-between
   раздаёт лишний воздух РАВНОМЕРНО между заголовком/пилюлями/подписью
   (gap остаётся минимумом рифмы), а не одной проплешиной под текстом —
   штриховка читается как ровная фактура, а не «дыра». */
.value-item--standard {
  justify-content: space-between;
  background-image: repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px);
  background-color: var(--surface);
}
.value-item--standard:hover { background-color: var(--surface-hi); }

/* Клиренс маскота (только десктоп, где он живёт): нижняя кромка ячейки-2
   («Скорость ответа») — опора границы строки 1; низ сетки — опора нижнего
   ряда. Под контентом этих ячеек держим ≥56px воздуха. */
@media (min-width: 768px) {
  .value-item--speed,
  .value-item--standard,
  .value-item--scale { padding-bottom: clamp(56px, 6vw, 72px); }
}
/* «Масштаб» и так самая высокая ячейка нижней строки (задаёт высоту всего
   ряда) — её нижний клиренс можно чуть подрезать (минимум 56px клиренса
   маскота сохранён) без ущерба патрулю мини-Clawd'а, это уменьшает
   дисбаланс с соседкой «Качество» */
@media (min-width: 768px) {
  .value-item--scale { padding-bottom: clamp(56px, 4vw, 60px); }
}

.value-kicker {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0.85;
}

.value-panel__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 27px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text);
}

.value-cap {
  font-family: var(--ff-body);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
}

/* — Ячейка «Часы недели»: счётчик + вафля 7×24 — */
.vh-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.vh-stat__num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(56px, 6.5vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  min-width: 1.9em; /* счётчик 0→128 не дёргает раскладку */
}
.vh-stat__label {
  font-family: var(--ff-body);
  font-size: clamp(12.5px, 1.2vw, 14.5px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-mid);
  max-width: 24ch;
}

.vh-plot {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.vh-axis {
  align-self: flex-end;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.75;
}
.vh-week { width: 100%; height: auto; display: block; }
.vh-cell-base  { fill: var(--text); fill-opacity: 0.07; }
.vh-cell-agent { fill: var(--accent); }
.vh-cell-human { fill: var(--text); fill-opacity: 0.3; }
/* Подложка под клетками смены человека — цвет фона ячейки (следует
   за ховером, чтобы не оставался «отпечаток» старого фона) */
.vh-blank { fill: var(--surface); transition: fill 0.35s var(--ease-out); }
.value-item--hours:hover .vh-blank { fill: var(--surface-hi); }

.vh-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.vh-legend__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: clamp(12px, 1.15vw, 13.5px);
  line-height: 1.5;
  color: var(--text-dim);
}
.vh-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.vh-swatch--human { background: var(--text); opacity: 0.3; }
.vh-swatch--agent { background: var(--accent); }

/* — Ячейка «Скорость ответа»: два трека шагов — */
.spd {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  margin-top: 4px;
}
.spd-track__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.spd-track__name {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.spd-track__tag {
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 3px 9px;
  white-space: nowrap;
}
.spd-track--agent .spd-track__tag {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}
.spd-flow { position: relative; }
/* Рельса ручного трека — пунктир (ожидание между шагами) */
.spd-rail {
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom, var(--border-strong) 0 4px, transparent 4px 9px);
}
/* Рельса агента — сплошной акцент (один шаг, без ожиданий) */
.spd-flow--agent .spd-rail {
  left: 2.5px;
  width: 2px;
  background-image: none;
  background-color: var(--accent);
}
.spd-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.spd-step {
  position: relative;
  padding-left: 20px;
  font-family: var(--ff-body);
  font-size: clamp(12.5px, 1.15vw, 13.5px);
  line-height: 1.35;
  color: var(--text-dim);
}
.spd-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
.spd-flow--agent .spd-step::before { background: var(--accent); }
.spd-step--hit { color: var(--text); font-weight: 600; }

/* — Ячейка «Масштаб» (v2): «одна нагрузка — два мира» —
   Два зеркальных мини-мира с одинаковыми колонками нагрузки: слева
   штат пиксельных человечков копится изотайпом (1·2·3·4), справа те же
   колонки закрывает один мини-Clawd на ровной акцентной линии. Раздел
   миров — хайрлайн в языке сетки. Разметка SVG = финальный кадр. */
.vsc {
  width: 100%;
  max-width: 680px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.vsc-world { min-width: 0; }
.vsc-world--people { padding-right: clamp(14px, 2vw, 26px); }
.vsc-world--agent {
  padding-left: clamp(14px, 2vw, 26px);
  border-left: 1px solid var(--border-md);
}
/* Узко (мобайл): миры друг под другом, раздел — горизонтальный хайрлайн */
@media (max-width: 640px) {
  .vsc { grid-template-columns: 1fr; }
  .vsc-world--people { padding-right: 0; padding-bottom: 20px; }
  .vsc-world--agent {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid var(--border-md);
  }
}
.vsc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.vsc-name {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.vsc-tag {
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 3px 9px;
  white-space: nowrap;
}
.vsc-tag--accent {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}
.vsc-scene { width: 100%; height: auto; display: block; }
.vsc-axis {
  font-family: var(--ff-body);
  font-size: 8.5px;
  font-weight: 600;
  fill: var(--text-dim);
  opacity: 0.75;
  letter-spacing: 0.06em;
}
.vsc-base { stroke: var(--border-strong); stroke-width: 1; }
/* Колонки нагрузки — нейтральные (нагрузка одна на оба мира);
   базовая плотность 0.12, ambient-«дыхание» гоняет её до 0.22 */
.vsc-bar { fill: var(--text); fill-opacity: 0.12; }
.vsc-person rect { fill: var(--text-mid); }
.vsc-line {
  stroke: var(--accent);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
}
/* Мини-Clawd — токены маскота (как .mini-clawd на services/) */
.vsc-clawd { pointer-events: none; }
.vsc-clawd .mc-fill { fill: var(--clawd); }
.vsc-clawd .mc-eye  { fill: var(--clawd-eye); }

/* — Ячейка «Качество»: пилюли — */
.vq-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.vq-pill {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mid);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 7px 13px;
  white-space: nowrap;
}

/* — Живые петли диаграмм (элементы создаёт script.js §6d ПОСЛЕ
     одноразовой отрисовки; no-js и reduced-motion их не имеют вовсе).
     Всё декоративное: pointer-events нет, цвета — токены, анимация
     GSAP — только transform/opacity/attr, на паузе вне вьюпорта. — */

/* блик-волна «агент работает сейчас» по клеткам вафли */
.vh-wave rect {
  fill: var(--flash);
  opacity: 0;
  pointer-events: none;
}

/* импульс-«заявка» на рельсе агента: световой штрих с хвостом;
   рельса клипует его на своих границах — появление/уход без прыжка */
.spd-flow--agent .spd-rail { overflow: hidden; }
.spd-pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 16px;
  background: linear-gradient(to top, var(--flash) 45%, transparent);
  transform: translateY(-20px); /* спрятан над клипом до первого тика GSAP */
  pointer-events: none;
}

/* медленная точка-заявка на ручной цепочке (застревает на шагах) */
.spd-crawl {
  position: absolute;
  left: -1px; /* центр на рельсе: left 3px + 0.5px − 4.5px */
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-mid);
  opacity: 0;
  pointer-events: none;
}

/* — Честная сноска под сеткой — */
.value__foot {
  margin-top: 18px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* ── Мостик глубина → широта ──────────────────────────────── */
.systems__bridge {
  margin-top: clamp(66px, 10vw, 104px);
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--accent);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--text-mid);
  max-width: 48ch;
}

/* ── Мини-CTA внутри секции систем ───────────────────────── */
.systems__cta {
  margin-top: clamp(44px, 6.5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.systems__cta p {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--text-mid);
  max-width: 32ch;
}

/* ── Оффер: универсальный питч (между блоком выгод и мостиком) ─────
   Карточка сознательно компактная (см. комментарий в index.html у
   #offer) — держим клиренс до мостика/CTA небольшим ради опор маскота.
   Фон — та же диагональная штриховка флагманов (.svc-card--flag,
   .value-item--standard) — переиспользование языка сайта, не новая
   декорация. */
.offer { margin-top: clamp(56px, 7vw, 88px); }

.offer__card {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--pattern-line) 22px 23px),
    var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  padding: clamp(32px, 4.5vw, 48px) clamp(26px, 4vw, 48px);
}
/* Клиренс маскота (только десктоп, где он живёт): нижняя кромка карточки —
   опора цепочки (ANCHOR_DEFS в mascot-site.js), под CTA-строкой держим
   ≥56px воздуха — та же норма, что у ячеек .value-item выше. */
@media (min-width: 768px) {
  .offer__card { padding-bottom: 56px; }
}

.offer__pain {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.3;
  color: var(--text);
  max-width: 34ch;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

.offer__body {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 70ch;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* Финальная строка — тот же язык «акцентного пулл-квота», что и
   .systems__bridge / .solo-cap (border-left + акцент), чуть крупнее и
   плотнее по весу — здесь это главный удар оффера. */
.offer__final {
  padding-left: clamp(14px, 1.8vw, 20px);
  border-left: 2px solid var(--accent);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.3;
  color: var(--text);
  max-width: 54ch;
  margin-bottom: clamp(20px, 2.6vw, 28px);
}

.offer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.offer__foot {
  font-family: var(--ff-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  opacity: 0.85;
  max-width: 42ch;
}

/* ══════════════════════════════════════════════════════════════
   ПРОЕКТЫ / КЕЙСЫ
═══════════════════════════════════════════════════════════════ */
.work__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(60px, 9vw, 96px);
}
@media (max-width: 760px) {
  .work__head { grid-template-columns: 1fr; gap: 20px; }
}

.work__note {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 38ch;
}

/* Сетка кейсов */
.cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
@media (max-width: 680px) {
  .cases { grid-template-columns: 1fr; }
}

.case { display: flex; flex-direction: column; }
.case--wide { grid-column: 1 / -1; }

.case__media {
  position: relative;
  aspect-ratio: 16 / 10;   /* медиа-слот 16:10 */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  transition:
    border-color 0.4s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.case:hover .case__media {
  border-color: var(--border-strong);
  transform: translateY(-5px);
}

/* Вариации фоновых паттернов для пустых слотов */
.case__media {
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0 18px,
      var(--pattern-line) 18px 19px  /* чуть заметнее */
    );
}
.case__media--b {
  background-image: none;
  background: radial-gradient(ellipse 110% 110% at 15% 10%, rgba(var(--accent-rgb), 0.1) 0%, transparent 55%), var(--surface);
}
.case__media--c {
  background-image: none;
  background: linear-gradient(135deg, var(--pattern-soft) 0%, transparent 60%), var(--surface);
}

/* Заглушка-номер в центре медиа-слота */
.case__placeholder {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.05em;
  color: var(--text);
  opacity: 0.15;          /* было 0.06 — теперь читаемо */
  user-select: none;
}

/* Подпись «Кейс скоро здесь» в нижней части слота */
.case__soon {
  position: absolute;
  bottom: clamp(14px, 2vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.55;
  border: 1px solid var(--chip-border);
  border-radius: 100px;
  padding: 5px 14px;
  pointer-events: none;
  user-select: none;
}

.case__body { padding-top: clamp(16px, 2.4vw, 24px); }

.case__tag {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 8px;
}
.case__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 8px;
}
.case__desc {
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 52ch;
}

/* ══════════════════════════════════════════════════════════════
   ПОЛНЫЙ ЦИКЛ — компактная секция-заявление между «Проектами» и
   «Обо мне»: одна цепочка этапов Идея → Дизайн → Код → Запуск,
   пиксельные стрелки-коннекторы (.px-arr--right, тот же язык, что
   и «Подробнее ↗» в карточках услуг). Padding вдвое компактнее
   обычной секции — это лаконичная полоса-заявление, не полноценный
   тематический блок.
═══════════════════════════════════════════════════════════════ */
.solo {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.solo__title {
  margin-bottom: clamp(48px, 7vw, 84px);
}

.solo-chain {
  display: flex;
  align-items: stretch;
}
@media (max-width: 760px) {
  .solo-chain { flex-direction: column; }
}

.solo-stage {
  flex: 1 1 0;
  min-width: 0;
  padding-top: clamp(20px, 2.2vw, 26px);
  border-top: 2px solid var(--border-md);
  transition: border-color 0.4s var(--ease-out);
}
.solo-stage:hover { border-top-color: var(--accent); }
@media (max-width: 760px) {
  .solo-stage {
    padding: clamp(18px, 4vw, 22px) 0;
    border-top: none;
    border-bottom: 1px solid var(--border-md);
  }
  .solo-stage:hover { border-top-color: transparent; }
  .solo-stage:last-child { border-bottom: none; }
}

.solo-stage__num {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  opacity: 0.7;
  margin-bottom: 10px;
}

.solo-stage__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(19px, 1.9vw, 24px);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 6px;
}

.solo-stage__desc {
  font-family: var(--ff-body);
  font-size: clamp(12.5px, 1.15vw, 14px);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 26ch;
}

/* Пиксельная стрелка-коннектор между этапами (та же эстетика, что
   и .px-arr «Подробнее ↗», но горизонтальная и статичная — просто
   разделитель цепочки, без ховер-состояния) */
.solo-arrow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(28px, 3.4vw, 46px);
  padding-top: clamp(22px, 2.4vw, 28px); /* выровнять по номеру этапа */
  color: var(--text-dim);
  opacity: 0.5;
}
@media (max-width: 760px) {
  .solo-arrow {
    width: auto;
    padding: 2px 0;
    transform: rotate(90deg);
  }
}

.solo-cap {
  margin-top: clamp(44px, 6.5vw, 76px);
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--accent);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--text-mid);
  max-width: 50ch;
}

/* ══════════════════════════════════════════════════════════════
   ОБО МНЕ
═══════════════════════════════════════════════════════════════ */
.about__statement {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 22ch;
  margin-bottom: clamp(40px, 6.5vw, 68px);
}

.about__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
  max-width: 72ch;
  /* Лёгкая асимметрия: текст сдвинут вправо */
  margin-left: auto;
  margin-bottom: clamp(60px, 9vw, 96px);
}
.about__cols p {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.72;
  color: var(--text-dim);
}
@media (max-width: 680px) {
  .about__cols { grid-template-columns: 1fr; margin-left: 0; }
}

/* Факты */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-md);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 720px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .facts { grid-template-columns: 1fr; }
}

.fact-item {
  background: var(--bg);
  padding: clamp(16px, 2.2vw, 24px);
  transition: background 0.3s;
}
.fact-item:hover { background: var(--surface); }
.fact-item dt {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.fact-item dd {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════
   КОНТАКТ
═══════════════════════════════════════════════════════════════ */
.contact {
  padding-top: clamp(128px, 19vw, 256px);
  padding-bottom: clamp(104px, 15vw, 176px);
}

.contact__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(52px, 9vw, 136px);
  line-height: 0.90;
  letter-spacing: -0.04em;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.contact__sub {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 48ch;
  margin-bottom: clamp(34px, 5vw, 52px);
}

.contact__hint {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  margin-top: 16px;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════
   ФУТЕР
═══════════════════════════════════════════════════════════════ */
.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 3vw, 40px) var(--pad);
  border-top: 1px solid var(--border-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

/* Клиренс от плавающей кнопки чата .cw-fab (fixed right:20px, 58px шириной
   → занимает до 78px от края вьюпорта): QA 2026-07-08 — на вьюпортах
   561–1300px --pad (6vw) меньше 78px, футер наезжал на мордочку (на 1280px
   зазор был ~1px, у́же — внахлёст до ~40px). Правая кромка получает
   отдельный минимум с запасом; левая не трогается — асимметрия узкая и
   ниже 561px не применяется (там футер уже в колонку, .cw-fab там 14px). */
@media (min-width: 561px) {
  .footer { padding-right: max(var(--pad), 108px); }
}

.footer__copy {
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--text-dim);
}

.footer__tg {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  position: relative;
  transition: color 0.2s;
}
.footer__tg::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.footer__tg:hover { color: var(--text); }
.footer__tg:hover::after { transform: scaleX(1); }

/* Водяной знак-подпись: было opacity:0.5 → фактический контраст ≈2.2:1
   (светлая) / ≈1.7:1 (тёмная) — почти нечитаемо. Держим интонацию
   «шёпота», но поднимаем до ≥3:1 в обеих темах (замерено). В тёмной
   теме --text-dim сам по себе даёт только ≈3.5:1 при opacity:1 — запаса
   под приглушение мало, поэтому там берём --text-mid (светлее токен) —
   ровно то смещение, о котором просили в фикс-задаче. */
.footer__made {
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.7;    /* светлая тема: ≈3.2:1 */
}
html[data-theme="dark"] .footer__made {
  color: var(--text-mid);
  opacity: 0.65;    /* тёмная тема: ≈3.5:1 */
}

/* ══════════════════════════════════════════════════════════════
   АДАПТИВ
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero__headline { font-size: clamp(56px, 14vw, 110px); }
}

@media (max-width: 560px) {
  .hero__strip-tags { display: none; }
  .hero__actions { width: 100%; }
  .hero__actions .btn-primary { flex: 1; text-align: center; }
  .footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 400px) {
  .hero__headline { letter-spacing: -0.025em; }
}

/* ══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   — всё движение выключается, контент видим сразу
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Nav: сразу видим, без анимации */
  .nav {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    transition: none !important;
  }

  /* Reveal: сразу видимы */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Hero line__inner: сразу видны */
  .js .hero__headline .line__inner,
  .js .contact__title .line__inner {
    visibility: visible !important;
    transform: none !important;
  }

  /* Marquee: стоп */
  .marquee__track {
    animation: none !important;
    transform: none !important;
  }

  /* Пульс статус-точки: стоп */
  .hero__strip-dot {
    animation: none !important;
  }

  /* Все CSS-переходы → мгновенные */
  * { transition-duration: 0.01ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   МАСКОТ
   Выделенные линейки-хайрлайны для ходьбы (вне transform-обёрток
   .reveal) — в стиле существующих линеек секций. Сам маскот
   (.mascot-box) создаётся скриптом mascot-site.js.
═══════════════════════════════════════════════════════════════ */
.mascot-line {
  height: 1px;
  background: var(--border-md);
  margin-top: clamp(68px, 10vw, 124px);
}

/* Маскот — вход в чат (2026-07-08): клик по гуляющему Clawd открывает
   чат-виджет (mascot-site.js включает pointer-events на box'е поверх
   pointer-events:none движка). Ховер — только filter: transform box'а
   принадлежит движку (x/y прыжков), трогать нельзя. Фокус-стиль не нужен:
   box aria-hidden, эквивалентный вход с клавиатуры — кнопка .cw-fab. */
.mascot-box { cursor: pointer; }
@media (hover: hover) {
  .mascot-box { transition: filter 0.2s var(--ease-out); }
  .mascot-box:hover { filter: brightness(1.12) saturate(1.06); }
}

/* Буквы-опоры в hero: inline + relative — раскладка и кернинг не меняются,
   JS анимирует top (проседание под весом маскота). Внутри .line запас
   по маске (padding-bottom 0.12em) покрывает сдвиг вниз до 8px. */
.hero__headline .perch {
  position: relative;
  top: 0;
  overflow-anchor: none; /* проседание буквы не дёргает scroll anchoring */
}

/* ══════════════════════════════════════════════════════════════
   ЧАТ-ВИДЖЕТ «Clawd — агент Льва» (.cw-*)
   Разметка — index.html (блок .cw), поведение — chat.js.
   Язык дизайна — как nav-таблетка: бумага + блюр (fixed — GPU-safe),
   волосяные границы токенами, --ease-out. Слои: nav 90 < fab 120 <
   scrim 125 < panel 130 < grain 200 (зерно поверх всего — эстетика сайта).
═══════════════════════════════════════════════════════════════ */
.cw { font-family: var(--ff-body); }

/* цвета мини-Clawd в виджете; --cw-face переопределяет chat.js
   при пасхалке ?mascot=signal (в акцент, как у маскота) */
.cw .mc-fill { fill: var(--cw-face, var(--clawd)); }
.cw .mc-eye  { fill: var(--clawd-eye); }

/* скринридер-текст (live-регион статуса стрима) */
.cw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── плавающая кнопка с мордочкой ────────────────────────── */
.cw-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;                /* голова «выглядывает» из-за нижней кромки */
  background: rgba(var(--bg-rgb), 0.82);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  box-shadow: var(--nav-shadow);
  transition:
    transform 0.3s var(--ease-spring),
    border-color 0.2s,
    box-shadow 0.3s var(--ease-out);
}
.cw-fab:hover  { transform: translateY(-2px); border-color: var(--border-strong); }
.cw-fab:active { transform: scale(0.94); }
.cw-fab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.cw-fab__face {
  width: 30px;
  height: auto;
  margin-bottom: -3px;             /* низ головы уходит под кромку — Clawd выглядывает */
}

/* моргание — как у большого маскота; глушится в reduced-motion */
.cw-fab .mc-eye {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: cw-blink 4.8s infinite;
}
@keyframes cw-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 95%      { transform: scaleY(0.1); }
}

/* точка-бейдж «тут кто-то живой» — исчезает после первого открытия */
.cw-fab::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
.cw.cw-seen .cw-fab::after { display: none; }

/* Состояние «чат открыт» (QA 2026-07-08, low): повторный клик по мордочке
   закрывает панель, но раньше не было визуальной подсказки. Дешёвый ход —
   без доп. разметки/JS: рамка тонируется акцентом (как активная кнопка),
   Clawd прикрывает глаза (довольный прищур) и перестаёт моргать —
   читается как «слушаю тебя», а не «завис». */
.cw.cw-open .cw-fab {
  border-color: var(--accent-ink);
  box-shadow: var(--nav-shadow), 0 0 0 3px var(--accent-dim);
}
.cw.cw-open .cw-fab .mc-eye {
  animation: none;
  transform: scaleY(0.28);
}

/* ── вуаль под панелью (только мобайл) ───────────────────── */
.cw-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 125;
  background: var(--cw-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

/* ── панель ──────────────────────────────────────────────── */
.cw-panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 130;
  width: min(380px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 132px));
  height: min(560px, calc(100dvh - 132px));
  display: flex;
  flex-direction: column;
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid var(--border-md);
  border-radius: 18px;
  box-shadow: var(--cw-shadow);
  overflow: hidden;                /* радиус и блюр держат детей */
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transform-origin: 100% 100%;
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.34s var(--ease-out);
}
.cw-panel.is-open { opacity: 1; transform: none; }
.cw-panel[hidden] { display: none; }

/* ── шапка ───────────────────────────────────────────────── */
.cw-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* гнездо-плитка, из которой выглядывает голова Clawd */
.cw-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cw-avatar svg { width: 24px; height: auto; margin-bottom: -2px; }

.cw-head__title {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.cw-head__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.cw-head__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: cw-pulse 2.4s infinite;
}
@keyframes cw-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.cw-head__role {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
}

.cw-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  border-radius: 8px;
  transition: color 0.18s, background 0.18s;
}
.cw-close:hover { color: var(--text); background: var(--border); }
.cw-close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.cw-close svg { width: 12px; height: 12px; }

/* ── лента сообщений ─────────────────────────────────────── */
.cw-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;    /* тач-скролл не утекает в страницу */
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.cw-msg { display: flex; animation: cw-msg-in 0.3s var(--ease-out); }
.cw-msg--bot  { justify-content: flex-start; }
.cw-msg--user { justify-content: flex-end; }
@keyframes cw-msg-in {
  from { opacity: 0; transform: translateY(8px); }
}

.cw-msg__bubble {
  max-width: 86%;
  padding: 9px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;           /* переносы строк ответа сохраняются */
  overflow-wrap: break-word;
  border-radius: 14px;
}
.cw-msg--bot .cw-msg__bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  color: var(--text-mid);
}
.cw-msg--user .cw-msg__bubble {
  background: var(--accent);
  border-bottom-right-radius: 5px;
  color: var(--on-accent);
  font-weight: 500;
}

/* индикатор «Clawd печатает…» */
.cw-typing .cw-msg__bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 13px 14px;
}
.cw-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: cw-dot 1.2s infinite;
}
.cw-typing__dot:nth-child(2) { animation-delay: 0.15s; }
.cw-typing__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes cw-dot {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* кнопка Telegram в фолбэк-пузыре (429/сеть) */
.cw-tg {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 8px;
  padding: 8px 14px;
  transition: opacity 0.18s, transform 0.15s;
}
.cw-tg:hover  { opacity: 0.85; }
.cw-tg:active { transform: scale(0.97); }
.cw-tg:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ── быстрые подсказки ───────────────────────────────────── */
.cw-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 14px 12px;
  flex-shrink: 0;
}
.cw-hints[hidden] { display: none; }
.cw-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  padding: 6px 12px;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.cw-hint:hover {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
.cw-hint:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ── ввод ────────────────────────────────────────────────── */
.cw-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.cw-form:focus-within { border-top-color: var(--border-strong); }

.cw-input {
  flex: 1;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  background: none;
  border: none;
  resize: none;
  max-height: 120px;
  padding: 9px 0;
}
.cw-input::placeholder { color: var(--text-dim); }
/* каретка — индикатор фокуса; рамка вокруг поля внутри панели лишняя,
   фокус показывает border-top формы (focus-within выше) */
.cw-input:focus-visible { outline: none; }

.cw-send {
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 11px;
  transition: opacity 0.18s, transform 0.2s var(--ease-spring);
}
.cw-send:hover:not(:disabled)  { opacity: 0.85; }
.cw-send:active:not(:disabled) { transform: scale(0.92); }
.cw-send:disabled { opacity: 0.4; cursor: default; }
.cw-send:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.cw-send svg { width: 16px; height: 16px; }

/* ── мобайл: панель почти фулскрин + вуаль ───────────────── */
@media (max-width: 560px) {
  .cw-fab { right: 14px; bottom: 14px; }

  .cw-scrim { display: block; }
  .cw.cw-open .cw-scrim { opacity: 1; pointer-events: auto; }

  .cw-panel {
    inset: 12px 10px 10px;
    width: auto;
    height: auto;
    border-radius: 16px;
  }

  /* iOS: шрифт <16px в поле ввода вызывает авто-зум страницы */
  .cw-input { font-size: 16px; }
}

/* ── reduced-motion: транзишены глушит глобальное правило,
     keyframe-анимации выключаем явно ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cw-fab .mc-eye,
  .cw-head__dot,
  .cw-typing__dot,
  .cw-msg {
    animation: none !important;
  }
}