/* GANG — design tokens (из assets/brand/colors-and-fonts.md). Правьте цвета/шрифты только здесь. */
/* Реверс цветовой схемы (2026-07-13, docs/superpowers/specs/2026-07-13-color-reversal-design.md):
   значения --color-dark/--color-offwhite и --color-dark-1/--color-gray-2 намеренно поменяны
   местами — имена токенов оставлены как есть (см. открытый вопрос в спеке), чтобы не расширять
   объём правки; каждый компонент, ссылающийся на переменные, переворачивается автоматически. */
:root {
  --color-red: #C83540;
  --color-green: #00B40F;
  --color-offwhite: #101010;
  --color-dark: #EEEEEE;
  --color-dark-1: #E1E1E1;
  --color-dark-2: #898989;
  --color-gray-1: #898989;
  --color-gray-2: #2F2F2F;
  --color-surface-dark: #181818; /* новая «поверхность карточки» — карточки, которые были чисто белыми (#fff) на светлой странице, на новой тёмной странице чуть светлее фона, а не чёрные-в-чёрное */

  --font-main: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Типографика — шкала из Figma (docs/figma-extract.md).
     Значения заданы через clamp(мобильное_из_макета, интерполяция, десктопное_из_макета):
     дизайнер зафиксировал только две точки (mob/web), промежуточные — линейные. */
  --fs-h1: clamp(24px, 8.4vw, 120px);
  --fs-h2: clamp(20px, 2.6vw, 40px);
  --fs-h3: clamp(16px, 2.1vw, 32px);
  --fs-btn-lg: clamp(16px, 2.1vw, 32px);
  --fs-btn: clamp(14px, 1.3vw, 20px);
  --fs-body: clamp(14px, 1.1vw, 16px);
  --fs-body-2: clamp(12px, 0.95vw, 14px);
  --fs-body-3: clamp(10px, 0.8vw, 12px);

  /* Надпись GANG в герое — по макету крупнее h1 и растёт по скроллу (см. Task 5) */
  --fs-display: clamp(64px, 17vw, 240px);
}

/* GANG — базовые стили, общие для всех страниц. Правьте один раз здесь — применится ко всем 8 страницам. */

* { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-behavior:smooth намеренно не используется глобально — вместе с колесом мыши и
   тяжёлым scroll-обработчиком (пиннинг портфолио) это давало рывки/просадки при прокрутке.
   Плавный переход по якорям делает JS точечно (см. main.js). */
html {
  overflow-x: hidden;
}
body {
  font-family: var(--font-main);
  background: var(--color-dark);
  color: var(--color-offwhite);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-green); }
::selection { background: var(--color-red); color: #fff; } /* текст в выделении всегда светлый на красном — красный акцент не участвует в реверсе */
input, textarea { font-family: var(--font-main); }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 780px) {
  .container { padding: 0 20px; }
}

/* фирменный паттерн — тайл из логотипа-снегиря (assets/pattern-tile.png), см. assets/brand/ */
.pattern-bg {
  background-image: url('assets/pattern-tile.png');
  background-size: 300px;
  pointer-events: none;
}

/* ---------- placeholder for photos not yet supplied ---------- */
.photo-slot {
  position: relative;
  width: 100%; height: 100%;
  background: #0c0c0c;
  display: flex; align-items: center; justify-content: center;
  color: #55585c;
  font-size: 12px;
  text-align: center;
  padding: 12px;
  border: 1px dashed #2a2a2a;
}

/* --- Кнопки (Figma: прямоугольные, без pill; см. запрет pill в CLAUDE.md) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: var(--fs-btn);
  line-height: 1.1;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-lg { font-size: var(--fs-btn-lg); padding: 20px 40px; }

.btn-primary { background: var(--color-red); color: #EEEEEE; border-color: var(--color-red); }
.btn-primary:hover { background: var(--color-green); border-color: var(--color-green); color: #101010; transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--color-offwhite); border-color: var(--color-offwhite); }
.btn-outline:hover { background: var(--color-green); border-color: var(--color-green); color: #101010; transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--color-gray-1); border-color: var(--color-dark-1); }
.btn-ghost:hover { color: var(--color-green); border-color: var(--color-green); }

/* Алиасы старых имён — используются в портфолио и КП, не ломаем */
.btn-light { background: var(--color-offwhite); color: var(--color-dark); border-color: var(--color-offwhite); }
.btn-light:hover { background: var(--color-red); border-color: var(--color-red); color: #fff; transform: translateY(-2px); }
.btn-dark { background: var(--color-dark); color: var(--color-offwhite); border-color: var(--color-dark); }
.btn-dark:hover { background: var(--color-green); border-color: var(--color-green); color: #101010; transform: translateY(-2px); }
.btn-outline-dark { color: var(--color-offwhite); border-color: var(--color-dark-2); font-weight: 600; font-size: var(--fs-body-2); padding: 12px 22px; }
.btn-outline-dark:hover { border-color: var(--color-green); color: var(--color-green); background: rgba(0,180,15,.08); }
.link-underline { border-bottom: 1px solid currentColor; padding-bottom: 4px; font-weight: 600; font-size: 14px; transition: .3s; }
@media (max-width: 640px) {
  .btn { padding: 16px 26px; }
  .btn-lg { padding: 18px 32px; }
}

/* --- Хедер: лого + бургер (Figma), полноэкранное меню --- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(238,238,238,.9);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(16,16,16,.08);
}
.brand { display: flex; align-items: center; gap: 14px; z-index: 92; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand span { font-family: var(--font-sans, Montserrat, sans-serif); font-weight: 800; font-size: 23px; letter-spacing: -.02em; }

/* Бургер — три полосы, превращается в крестик при открытом меню */
.nav-toggle {
  z-index: 92;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-dark-1);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .25s ease;
}
.nav-toggle:hover { border-color: var(--color-red); }
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  margin: 0 auto;
  background: var(--color-offwhite);
  transition: transform .3s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Полноэкранное меню */
.main-nav {
  position: fixed;
  inset: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  /* Пункты идут сверху вниз с отступом под шапку и крестик закрытия, а не
     центрируются: при 7 пунктах крупным шрифтом на невысоком экране (ноутбук)
     центрирование выталкивало верхние пункты за край экрана, где они
     обрезались и налезали на контент. overflow-y даёт прокрутку, когда меню
     всё же выше окна, — ни один пункт не пропадёт. */
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  padding: clamp(84px, 13vh, 128px) 48px 48px;
  overflow-y: auto;
  background: var(--color-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.nav-links { display: flex; flex-direction: column; gap: 8px; }
.main-nav .nav-links a {
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--color-offwhite);
  transition: color .2s ease, transform .25s ease;
}
.main-nav .nav-links a:hover { color: var(--color-red); transform: translateX(10px); }
.nav-cta { align-self: flex-start; }

@media (max-width: 640px) {
  .site-header { padding: 16px 20px; }
  .main-nav { padding: 80px 20px 40px; gap: 28px; }
}

/* --- Герой (Figma): статичная композиция «снегирь + лок-ап + тезис + кнопка».
   Контент виден сразу (по требованию клиента — не reveal-on-scroll).
   По скроллу сохраняем два акцента: снегирь исчезает, надпись GANG растёт. --- */
.hero {
  --hero-p: 0; /* прогресс скролла 0..1, пишется из JS */
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 48px 80px;
  overflow: hidden;
}
.hero-pattern { position: absolute; top: -8%; right: -14%; width: 56vw; height: 118%; z-index: 0; color: var(--color-offwhite); }

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hero-bird {
  flex: 0 0 auto;
  width: min(38vw, 460px);
  pointer-events: none;
  transform: scale(calc(1 - var(--hero-p) * 0.25));
  transform-origin: left center;
  opacity: calc(1 - var(--hero-p) * 1.6);
  transition: opacity .1s linear;
}
.hero-bird img { width: 100%; height: auto; animation: gang-bird-soft 7s ease-in-out infinite; }

.hero-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  min-width: 0;
}

/* Лок-ап digital / GANG / agency — единая композиция (не фоновый декор):
   ghost-слова центрируются по GANG сверху и снизу, вплотную к нему. */
.hero-lockup { position: relative; display: inline-block; }
.hero-word {
  display: block;
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--color-offwhite); /* светлая тема: GANG тёмный. Растёт по скроллу, цвет не меняем */
  transform: scale(calc(1 + var(--hero-p) * 0.18));
  transform-origin: left center;
}
.hero-ghost {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: calc(var(--fs-display) * 0.34);
  line-height: 1;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-dark-2);
  opacity: .55;
  white-space: nowrap;
  pointer-events: none;
}
.hero-ghost-top { top: calc(var(--fs-display) * -0.2); }
.hero-ghost-bottom { bottom: calc(var(--fs-display) * -0.2); }

.hero-col h1 {
  font-weight: 800;
  /* Не var(--fs-h1) (120): это фраза-заголовок, а не display-слово (гигантский размер только
     у GANG). При 120px 30-символьная строка вылезала за правый край и обрезалась. */
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 18ch;
}

/* Планшет (по «Главная.png»): герой остаётся двухколоночным, как на десктопе */
@media (max-width: 900px) {
  .hero { padding: 120px 20px 60px; }
  .hero-inner { gap: 24px; }
}
/* Мобилка (по «Главная.png»): стек с ЛЕВЫМ выравниванием — птица сверху,
   под ней лок-ап, тезис и кнопка */
@media (max-width: 640px) {
  .hero { padding: 104px 20px 56px; }
  .hero-inner { flex-direction: column; align-items: flex-start; text-align: left; gap: 20px; }
  .hero-bird { width: min(62vw, 260px); }
  .hero-col { align-items: flex-start; }
  .hero-col h1 { max-width: none; }
}

/* ---------- section heading kicker ---------- */
.kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.kicker .rule { width: 32px; height: 1px; background: var(--color-red); }
.kicker .label { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--color-gray-1); }

/* ---------- trust bar ---------- */
.trust-bar { position: relative; background: var(--color-offwhite); color: var(--color-dark); padding: 74px 0 78px; clip-path: polygon(0 42px,100% 0,100% 100%,0 100%); margin-top: -1px; }
.trust-bar .container { padding-bottom: 38px; }
.trust-marquee-wrap { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.trust-marquee { display: flex; width: max-content; align-items: center; animation: gang-marquee 44s linear infinite; }
.trust-marquee .logo { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 40px; white-space: nowrap; }
.trust-marquee .logo img { max-height: 100%; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: .88; }
.trust-title { font-weight: 800; font-size: var(--fs-h2); letter-spacing: -.01em; margin-bottom: 32px; }

/* --- Услуги (Figma): теги поверх облака ключевых слов, подсветка по очереди --- */
.services { position: relative; padding: 140px 48px; overflow: hidden; }
.services-cloud {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 28px 48px;
  padding: 60px;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 24px);
  color: var(--color-dark-1);
  opacity: .5;
  user-select: none;
  pointer-events: none;
}
.services-inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
.services h2 { font-weight: 800; font-size: var(--fs-h2); letter-spacing: -.01em; }
.services-lede { margin-top: 20px; max-width: 62ch; font-size: var(--fs-body); line-height: 1.6; color: var(--color-gray-2); }

.service-tags { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 16px; }
.service-tag {
  padding: 14px 26px;
  border: 1px solid var(--color-dark-1);
  border-radius: 4px;
  background: var(--color-dark);
  font-weight: 700;
  font-size: var(--fs-btn);
  /* заливку/рамку анимируем в такт с opacity и цветом текста (0.4s из правила задачи 4),
     иначе при переключении активного тега фон переключается рывком */
  transition: background-color .4s ease, border-color .4s ease;
}
/* активный тег — светлый/выделенный (в макете активный тег подсвечивается по очереди);
   на светлой теме «выделенный» = заливка тёмным с белым текстом */
.service-tag.is-active {
  background: var(--color-offwhite);
  border-color: var(--color-offwhite);
}
/* специфичность важна: у общего правила задачи 4 (`[data-step].is-active .step-title`,
   ниже по файлу) та же специфичность, а идёт оно позже — без доп. класса `.service-tags`
   в селекторе оно бы выиграло каскад и оставило тёмный текст на тёмной плашке */
.service-tags .service-tag.is-active .step-title { color: var(--color-dark); }
.service-tag:hover { border-color: var(--color-green); }

@media (max-width: 640px) { .services { padding: 90px 20px; } }

/* ---------- cases (портфолио) ---------- */
.cases-section { position: relative; background: var(--color-offwhite); color: var(--color-dark); height: 420vh; }
.cases-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.cases-head { padding: 140px 48px 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cases-head h2 { font-weight: 800; font-size: clamp(28px,3.6vw,52px); letter-spacing: -.02em; line-height: 1.02; max-width: 22ch; }
.cases-head h2 .accent { color: var(--color-red); }
.cases-hint { font-family: var(--font-mono); font-size: 13px; color: var(--color-gray-1); display: flex; align-items: center; gap: 10px; }
.cases-viewport { flex: 1; display: flex; align-items: center; overflow: hidden; }
.cases-track { display: flex; gap: 32px; padding: 0 48px; will-change: transform; }
.case-card { --case-accent: var(--color-red); background: var(--color-surface-dark); border: 1px solid var(--color-gray-2); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.cases-track .case-card { width: min(50vw,560px); flex-shrink: 0; }
a.case-card:hover { transform: translateY(-4px); border-color: var(--color-red); box-shadow: 0 18px 34px rgba(0,0,0,.35); }
.case-card .photo { position: relative; height: min(42vh,340px); overflow: hidden; background: #0c0c0c; }
.case-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.case-card:hover .photo img { transform: scale(1.03); }
.case-card .photo-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,0) 65%); pointer-events: none; }
/* лейбл направления — лежит поверх фото, а не фона карточки, поэтому всегда светлый текст (см. .case-card .photo-fade) вне зависимости от темы страницы */
/* тег направления — красный чип поверх фото (по «Портфолио.png») */
.case-card .case-label { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; font-size: var(--fs-body-3); font-weight: 700; letter-spacing: .04em; color: #EEEEEE; background: rgba(200,53,64,.95); border-radius: 6px; padding: 7px 12px; }
.case-card .case-label .dot { display: none; }
.case-card .body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.case-card .client { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-gray-1); }
.case-card .result { font-weight: 800; font-size: clamp(18px,1.9vw,24px); line-height: 1.2; letter-spacing: -.01em; color: var(--color-dark); }
.case-card .text { font-size: 14px; line-height: 1.55; color: #b0b0b0; }
/* цвет НЕ из --case-accent: у кейсов с тёмным тегом (#101010) он сливался с тёмной
   карточкой и был виден только на hover. Всегда красный — единообразно на всех кейсах. */
.case-card .read { font-family: var(--font-mono); font-size: 13px; color: var(--color-red); margin-top: auto; transition: color .25s ease, transform .3s ease; }
a.case-card:hover .read { color: var(--color-green); transform: translateX(4px); }
.case-cta { width: min(36vw,360px); flex-shrink: 0; background: var(--color-dark); color: var(--color-offwhite); display: flex; flex-direction: column; justify-content: center; padding: 40px; }
.case-cta img { width: 60px; opacity: .5; margin-bottom: 24px; }
.case-cta h3 { font-weight: 800; font-size: clamp(21px,2.3vw,32px); letter-spacing: -.02em; line-height: 1.05; margin-bottom: 24px; }
@media (max-width: 900px) {
  /* На узких экранах отключаем скролл-пиннинг (плохо ведёт себя в мобильных браузерах) — обычная горизонтальная карусель со свайпом */
  .cases-section { height: auto; }
  .cases-pin { position: static; height: auto; overflow: visible; }
  .cases-head { padding: 60px 20px 10px; }
  .cases-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .cases-track { transform: none !important; padding: 20px; }
  .case-card, .case-cta { width: 82vw; scroll-snap-align: start; }
}

/* --- Наши работы (Figma-стиль + горизонтальный пиннинг-скролл из прошлой итерации) ---
   Премиум-карточки: крупное фото со скруглением, тёмный тинт, заголовок поверх фото.
   Категория услуги проступает поверх фото при наведении.
   Секция высокая (position:sticky у .works-pin) — по вертикальному скроллу трек
   едет горизонтально (JS в main.js: #cases-pin + #cases-track). --- */
.works-section { position: relative; height: 460vh; }
.works-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.works-head { padding: 120px 48px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.works-head h2 { font-weight: 800; font-size: clamp(40px, 6.4vw, 104px); letter-spacing: -.02em; line-height: .98; }
.works-hint { font-family: var(--font-mono); font-size: 13px; color: var(--color-red); font-weight: 600; display: flex; align-items: center; gap: 10px; white-space: nowrap; } /* красная — читается на светлом (правка клиента) */
.works-viewport { flex: 1; display: flex; align-items: center; overflow: hidden; }
.works-track { display: flex; gap: 28px; padding: 0 48px; will-change: transform; }

.works-card {
  position: relative;
  flex-shrink: 0;
  width: min(46vw, 600px);
  height: min(62vh, 520px);
  border-radius: 22px;
  overflow: hidden;
  background: #0c0c0c;
}
.works-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.works-card:hover img { transform: scale(1.04); }
.works-tint {
  position: absolute; inset: 0;
  /* лёгкое затемнение сверху для читаемости заголовка поверх фото */
  background: linear-gradient(180deg, rgba(16,16,16,.55) 0%, rgba(16,16,16,.12) 40%, rgba(16,16,16,.35) 100%);
  pointer-events: none;
}
.works-title {
  position: absolute;
  top: 32px; left: 32px; right: 32px;
  z-index: 2;
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #EEEEEE; /* светлый текст поверх фото — не зависит от темы страницы */
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  max-width: 14ch;
}
/* Категория поверх фото — появляется при наведении (по правке клиента) */
.works-cats {
  position: absolute;
  left: 32px; bottom: 32px; right: 32px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.works-card:hover .works-cats,
.works-card:focus-within .works-cats { opacity: 1; transform: none; }
.works-cats span {
  font-size: var(--fs-body-2);
  font-weight: 700;
  letter-spacing: .02em;
  /* фирменный красный вместо серого — тег читается поверх фото (правка клиента) */
  color: #EEEEEE;
  background: rgba(200,53,64,.95); /* --color-red с лёгкой прозрачностью */
  border-radius: 8px;
  padding: 8px 14px;
  backdrop-filter: blur(4px);
}

/* Карточка-финал «И это только начало» */
.works-cta {
  flex-shrink: 0;
  width: min(34vw, 400px);
  height: min(62vh, 520px);
  border-radius: 22px;
  background: var(--color-offwhite);
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px;
}
.works-cta img { width: 84px; height: auto; margin-bottom: 28px; }
.works-cta h3 { font-weight: 800; font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -.02em; line-height: 1.05; margin-bottom: 32px; }
.works-cta .btn { align-self: flex-start; }

/* Кнопка «Смотреть все» под сеткой — только планшет/мобилка (по «Главная.png»);
   на десктопе вместо неё карточка «И это только начало» */
.works-all { display: none; }
/* 4-я карта кейса — только планшет/мобилка (на ПК горизонтальный трек: 3 + CTA) */
.works-extra { display: none; }

/* Планшет (по «Главная.png»): пиннинг отключаем, карточки СЕТКОЙ 2×2,
   теги видимы, внизу кнопка «Смотреть все» */
@media (max-width: 900px) {
  .works-section { height: auto; }
  .works-pin { position: static; height: auto; overflow: visible; }
  .works-head { padding: 80px 20px 16px; }
  .works-hint { display: none; } /* пиннинга нет — подсказка «крутите вниз» не нужна */
  .works-viewport { display: block; overflow: visible; }
  .works-track { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; transform: none !important; padding: 8px 20px 0; }
  .works-card { width: auto; height: min(52vw, 440px); }
  .works-extra { display: block; } /* 4-я карта появляется — сетка 2×2 (по «Главная.png») */
  .works-cta { display: none; } /* по макету на планшете/мобилке — кнопка вместо карточки */
  .works-all { display: inline-flex; align-self: flex-start; margin: 24px 20px 80px; } /* компактная, слева (родитель flex-column растягивал) */
  /* на тач-устройствах категория видна сразу (нет hover) */
  .works-cats { opacity: 1; transform: none; }
}
/* Мобилка (по «Главная.png»): карточки вертикальным стеком во всю ширину */
@media (max-width: 640px) {
  .works-track { grid-template-columns: 1fr; }
  .works-card { height: min(108vw, 460px); }
}

/* ---------- letters (отзывы) ---------- */
.letters { position: relative; background: var(--color-dark); padding: 130px 48px; overflow: hidden; }
.letters-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.letters h2 { font-weight: 800; font-size: var(--fs-h2); letter-spacing: -.01em; }
.letters-head h2 { line-height: 1.02; max-width: 20ch; }
.letters-nav { display: flex; gap: 12px; }
.letters-nav button { width: 56px; height: 56px; background: transparent; border: 2px solid var(--color-dark-1); color: var(--color-offwhite); font-family: var(--font-mono); font-size: 18px; cursor: pointer; transition: .3s; }
.letters-nav button:hover { border-color: var(--color-green); color: var(--color-green); background: rgba(0,180,15,.08); }
.letters-stage { position: relative; perspective: 1800px; }
.letters-slides { position: relative; min-height: 540px; }
.letter-slide { position: absolute; inset: 0; display: grid; grid-template-columns: .78fr 1fr; gap: 56px; align-items: center; opacity: 0; transform: rotateY(9deg) scale(.97); transition: opacity .6s ease, transform .65s cubic-bezier(.7,0,.2,1); pointer-events: none; }
.letter-slide.is-active { opacity: 1; transform: rotateY(0) scale(1); pointer-events: auto; z-index: 2; }
.letter-slide .scan { position: relative; min-width: 0; height: 540px; background: #fff; box-shadow: 0 34px 70px rgba(0,0,0,.55); overflow: hidden; }
.letter-slide .scan img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.letter-slide .scan .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--color-red); z-index: 2; }
.letter-slide .quote-mark { font-family: Georgia,'Times New Roman',serif; font-size: 92px; line-height: .5; color: var(--color-red); margin-bottom: 18px; }
.letter-slide .quote { font-size: clamp(20px,2.1vw,30px); line-height: 1.42; font-weight: 500; letter-spacing: -.01em; max-width: 26ch; }
.letter-slide .who { margin-top: 36px; display: flex; align-items: center; gap: 16px; }
.letter-slide .who .rule { width: 38px; height: 1px; background: var(--color-dark-2); }
.letter-slide .who .name { font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.letter-slide .who .org { font-size: 14px; color: var(--color-gray-1); margin-top: 3px; }
.letters-dots { margin-top: 44px; display: flex; gap: 10px; }
.letters-dots button { width: 36px; height: 4px; background: var(--color-dark-1); border: 0; padding: 0; cursor: pointer; transition: background .3s; }
.letters-dots button.is-active { background: var(--color-red); }
@media (max-width: 900px) {
  .letters { padding: 80px 20px; }
  .letter-slide { grid-template-columns: 1fr; gap: 20px; }
  .letter-slide .scan { height: 260px; }
  .letters-slides { min-height: 640px; }
}

/* --- О нас (Figma «Анимация в блоке о нас»): ТЁМНАЯ секция. Экран заполнен СПЛОШНОЙ
   стеной цифр — вплотную, без отступов, до самых краёв. Ключевой тезис — ячейка ВНУТРИ
   сетки (в общем ряду, не поверх), выделен зелёным цветом и подписью. По скроллу цифры
   перещёлкиваются, тезисы сменяются. Пользователь листает только вниз — секция пинится,
   прогресс скролла гонит анимацию (main.js: [data-about]). --- */
.about {
  position: relative;
  height: 720vh; /* большой запас — тезисы держатся дольше (скролл не быстрый) */
  background: var(--color-offwhite); /* #101010 — тёмная секция (белые цифры видны) */
  color: var(--color-dark);          /* #EEEEEE — светлый текст */
}
.about-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* затемнение краёв (сильнее сверху) — заголовок «О нас» читается поверх стены цифр */
.about-pin::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2; /* над стеной (z:0), под заголовком (z:3); центр прозрачен — тезис не трогает */
  pointer-events: none;
  background:
    /* верх темнее и глубже: под шапкой и заголовком «О нас» стена цифр не должна
       конкурировать с текстом — раньше заголовок сливался с цифрами */
    linear-gradient(180deg, rgba(16,16,16,.94) 0%, rgba(16,16,16,.82) 14%, rgba(16,16,16,.45) 26%, rgba(16,16,16,0) 40%),
    linear-gradient(0deg,   rgba(16,16,16,.72) 0%, rgba(16,16,16,0) 20%),
    linear-gradient(90deg,  rgba(16,16,16,.62) 0%, rgba(16,16,16,0) 16%),
    linear-gradient(270deg, rgba(16,16,16,.62) 0%, rgba(16,16,16,0) 16%);
}

/* Стена из РЯДОВ крупных одиночных цифр — все цифры ОДНОГО размера (как в макете),
   вплотную, ряды заполняют экран до краёв. Размер задаёт JS (--about-f). */
.about-wall {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 0;
  overflow: hidden;
}
.about-wrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
}
.about-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(238,238,238,.38); /* белые контурные */
  font-variant-numeric: tabular-nums;
  position: relative;
}
.about-num.dim { -webkit-text-stroke-color: rgba(238,238,238,.16); }   /* приглушённые */
.about-num.solid { -webkit-text-stroke: 0; color: rgba(238,238,238,.13); } /* редкие залитые */
/* маленькие ✦-искры между цифрами, как в макете */
.about-num.spark::after {
  content: '✦';
  position: absolute;
  top: 14%; right: -4%;
  font-size: 14px;
  color: rgba(238,238,238,.55);
  -webkit-text-stroke: 0;
}

/* Ключевой тезис — сидит прямо в среднем ряду цифр, ТОЙ ЖЕ высоты, без фона и
   отступов (не плашка): зелёная цифра + компактный текст вплотную, по бокам
   продолжаются обычные цифры (746 [26 Сертификатов] 47). */
.about-stat {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  margin: 0 20px;
  /* НЕ сжимается: при нехватке места соседние цифры уходят за край (клип),
     а не давят текст тезиса в узкий столбик */
  flex-shrink: 0;
}
.about-stat .v {
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-green);
  text-shadow: 0 0 34px rgba(0,180,15,.3);
  white-space: nowrap;
  /* размер = размеру цифр стены, задаёт JS через --about-f */
  font-size: var(--about-f, 200px);
}
.about-stat .info { min-width: 0; max-width: 380px; white-space: normal; /* отменяем nowrap ряда — текст переносится */ }
.about-stat .l { font-weight: 700; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.08; letter-spacing: -.01em; color: var(--color-dark); }
/* описание — полужирное и белое, чтобы читалось поверх тёмного фона (правка клиента) */
.about-stat .d { margin-top: 8px; font-size: clamp(13px, 1vw, 15px); line-height: 1.5; font-weight: 600; color: var(--color-dark); }

.about-heading {
  position: absolute;
  /* ниже фиксированной шапки: на 6vh заголовок уезжал под неё и читался обрезанным */
  top: clamp(104px, 15vh, 172px); left: 6vw;
  z-index: 3;
  font-weight: 800;
  font-size: clamp(38px, 6vw, 92px);
  letter-spacing: -.02em;
  line-height: 1;
  pointer-events: none;
}

/* Тезисы в HTML — SEO-источник данных; на десктопе скрыты (активный встраивается в сетку) */
.about-theses { display: none; }

/* Мобилка: подпись тезиса уходит ПОД цифру (стек), иначе на узком экране не помещается
   рядом. Анимация (стена + тезис в ряду) работает — фолбэк ниже только для reduced-motion. */
@media (max-width: 640px) {
  .about-stat { flex-direction: column; align-items: flex-start; gap: 6px; }
  .about-stat .info { max-width: 88vw; }
}

/* Reduced-motion фолбэк: без пиннинга и стены, тезисы — статичный читаемый список */
@media (prefers-reduced-motion: reduce) {
  .about { height: auto; }
  .about-pin { position: static; height: auto; overflow: visible; padding: 80px 0; }
  .about-pin::after { display: none; }
  .about-wall { display: none; }
  .about-heading { position: static; margin: 0 6vw 40px; }
  .about-theses { display: block; max-width: 1100px; margin: 0 auto; }
  .about-thesis { display: flex; align-items: center; gap: 28px; margin: 0 6vw 48px; }
  .about-value { font-weight: 800; font-size: clamp(72px, 14vw, 180px); line-height: .8; letter-spacing: -.03em; color: var(--color-green); }
  .about-label { font-weight: 700; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.1; }
  .about-desc { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--color-gray-1); max-width: 40ch; }
}

/* ---------- blog ---------- */
.blog { position: relative; background: var(--color-offwhite); color: var(--color-dark); padding: 20px 48px 130px; }
.blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 52px; }
.blog-head h2 { font-weight: 800; font-size: clamp(30px,4vw,56px); letter-spacing: -.02em; line-height: 1.02; }
.blog-head h2 em { font-weight: 300; font-style: italic; }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.blog-card { display: flex; flex-direction: column; background: var(--color-surface-dark); border: 1px solid var(--color-gray-2); transition: transform .4s ease, border-color .4s ease; }
.blog-card:hover { transform: translateY(-6px); border-color: var(--color-dark); }
.blog-card .photo { position: relative; height: 210px; background: var(--color-dark); overflow: hidden; }
.blog-card .tag { position: absolute; top: 18px; left: 18px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 7px 11px; color: var(--color-offwhite); }
.blog-card .body { padding: 28px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.blog-card h3 { font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.blog-card .read { margin-top: auto; font-family: var(--font-mono); font-size: 13px; color: var(--color-red); }
@media (max-width: 900px) {
  .blog { padding: 20px 20px 80px; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* --- Контакты (Figma): карта + плитки реквизитов --- */
.contacts { padding: 140px 48px; }
.contacts-inner { max-width: 1200px; margin: 0 auto; }
/* крупный заголовок — в один масштаб с «Наши работы»/«О нас» */
.contacts h2 { font-weight: 800; font-size: clamp(40px, 6vw, 96px); letter-spacing: -.02em; line-height: .98; margin-bottom: 56px; }
.contacts-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
/* чистая заглушка карты (не пунктирный фото-слот): тёмная поверхность, пин и подпись */
.contacts-map {
  position: relative;
  min-height: 460px;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #1c1c1c 0%, var(--color-surface-dark) 60%);
  border: 1px solid var(--color-gray-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.contacts-map .pin {
  width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  background: var(--color-red);
  transform: rotate(-45deg);
  box-shadow: 0 0 0 8px rgba(200,53,64,.14), 0 10px 26px rgba(200,53,64,.35);
}
.contacts-map-label { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: .04em; color: var(--color-dark); }
.contacts-city { font-weight: 800; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.01em; }
.contacts-lede { margin-top: 12px; font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); max-width: 40ch; }
.contacts-tiles { margin: 28px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--color-gray-2);
  border-radius: 6px;
  background: var(--color-surface-dark);
  transition: border-color .25s ease, transform .25s ease;
}
.contact-tile:hover { border-color: var(--color-red); transform: translateY(-3px); }
.contact-tile .k { font-size: var(--fs-body-3); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-gray-1); }
/* плитка тёмная (--color-surface-dark) поверх светлой страницы — текст должен быть светлым
   (--color-dark), а не --color-offwhite: тот в реверсной схеме тёмный и слился бы с фоном
   плитки почти до нечитаемости, как уже было с призрачными цифрами в блоке «О нас» */
.contact-tile .v { font-size: var(--fs-body-2); color: var(--color-dark); }
.contact-tile .v a:hover { color: var(--color-green); }
/* Соц-сети: при наведении на плитку текст сменяется логотипами в фирменных цветах */
.contact-tile--social .s-logos { display: none; align-items: center; gap: 16px; }
.contact-tile--social:hover .s-text { display: none; }
.contact-tile--social:hover .s-logos { display: flex; }
.contact-tile--social .s-logo { display: inline-flex; color: var(--color-dark); }
.contact-tile--social .s-logo svg { fill: currentColor; display: block; }
.contact-tile--social:hover .s-logo.s-tg { color: #29B6F6; } /* Telegram */
.contact-tile--social:hover .s-logo.s-vk { color: #0077FF; } /* ВКонтакте */
.contact-tile--social .s-logo { transition: transform .2s ease; }
.contact-tile--social .s-logo:hover { transform: translateY(-2px); }

/* Планшет (по «Главная.png»): карта слева, плитки столбиком справа */
@media (max-width: 900px) {
  .contacts { padding: 90px 20px; }
  .contacts-tiles { grid-template-columns: 1fr; }
}
/* Мобилка (по «Главная.png»): всё стеком — карта, затем плитки */
@media (max-width: 640px) {
  .contacts-grid { grid-template-columns: 1fr; }
}

/* ---------- final CTA ---------- */
.final-cta { position: relative; background: var(--color-dark); overflow: hidden; padding: 130px 48px; }
.final-cta .wipe { position: absolute; inset: 0; background: var(--color-green); transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(.7,0,.2,1); z-index: 1; }
.final-cta .bird { position: absolute; top: 8%; right: -4%; width: 40vw; max-width: 560px; opacity: .16; z-index: 2; pointer-events: none; }
.final-cta .inner { position: relative; z-index: 3; max-width: 1000px; margin: 0 auto; }
.final-cta h2 { font-weight: 900; font-size: clamp(32px,5.4vw,80px); letter-spacing: -.03em; line-height: 1; max-width: 20ch; color: var(--color-offwhite); transition: color 1s ease; }
.final-cta .sub { margin-top: 28px; max-width: 58ch; font-size: 19px; line-height: 1.6; color: #4a4a4a; transition: color 1s ease; }
.cta-form { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; }
.cta-form input, .cta-form textarea { grid-column: span 1; background: transparent; border: 2px solid var(--color-dark-2); color: var(--color-offwhite); padding: 18px 20px; font-size: 16px; outline: none; transition: border-color .3s, color .6s; }
.cta-form input::placeholder, .cta-form textarea::placeholder { color: #9a9a9a; opacity: 1; transition: color .6s; }
.cta-form input:focus, .cta-form textarea:focus { border-color: var(--color-green); }
.cta-form textarea { grid-column: 1/3; resize: vertical; }
.cta-form label { grid-column: 1/3; display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5; color: #9a9a9a; cursor: pointer; transition: color .6s; }
.cta-form label input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-green); cursor: pointer; }
.cta-form label a { color: var(--color-offwhite); border-bottom: 1px solid #555; transition: color .6s; }
.cta-form button[type="submit"] { grid-column: 1/3; justify-self: start; }
.cta-hint { grid-column: 1/3; font-size: 12px; line-height: 1.5; color: #6E6E6E; margin-top: -6px; transition: color 1s ease; }
/* is-dark включается после зелёного wipe-in — привязано к зелёному фону, не к теме страницы, поэтому хардкод, а не токены */
.cta-form.is-dark input:not([type="checkbox"]), .cta-form.is-dark textarea { background: #fff; color: #101010; border-color: rgba(16,16,16,.12); }
.cta-form.is-dark input::placeholder, .cta-form.is-dark textarea::placeholder { color: rgba(16,16,16,.5); }
.cta-form.is-dark label { color: #0d3f12; }
.cta-form.is-dark label a { color: #101010; border-bottom-color: rgba(16,16,16,.4); }
.cta-form.is-dark .cta-hint { color: #1a4a1f; }
/* .btn-dark на зелёном фоне (флагман-карточка, форма CTA после wipe-in) — ховер не может
   быть зелёным, иначе кнопка сливается с фоном; здесь используем красный */
.service-flagship .btn-dark:hover, .final-cta .btn-dark:hover { background: var(--color-red); border-color: var(--color-red); color: #fff; }
@media (max-width: 640px) {
  .final-cta { padding: 90px 20px; }
  .cta-form { grid-template-columns: 1fr; }
  .cta-form input, .cta-form textarea, .cta-form label, .cta-form button, .cta-hint { grid-column: 1; }
}

/* ---------- footer ---------- */
.site-footer { background: #f5f5f5; color: var(--color-gray-1); padding: 80px 48px 40px; border-top: 1px solid #e0e0e0; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr auto 1fr; gap: 40px; }
.footer-grid .brand { margin-bottom: 22px; }
.footer-grid .brand span { color: var(--color-offwhite); font-size: 27px; letter-spacing: -.02em; }
.footer-grid .brand img { width: 40px; height: 40px; }
.social-row { display: flex; gap: 12px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-gray-2); border-radius: 8px; color: var(--color-offwhite); transition: border-color .25s ease, color .25s ease, transform .25s ease; }
.social-icon:hover { border-color: var(--color-red); color: var(--color-red); transform: translateY(-2px); }
.footer-about { max-width: 34ch; font-size: var(--fs-body-2); line-height: 1.6; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .head { font-size: var(--fs-body-3); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #5a5a5a; margin-bottom: 6px; }
.footer-col a, .footer-col span { font-size: var(--fs-body-2); transition: color .25s; }
/* кнопки исключены: у .btn свой ховер, а это правило перекрывало его специфичностью
   и красило текст в зелёный на зелёном фоне — надпись пропадала */
.footer-col a:not(.btn):hover { color: var(--color-green); }
.footer-btn-col { justify-content: center; }
.social-row { display: flex; gap: 14px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid #d5d5d5; color: var(--color-gray-1); transition: color .25s, border-color .25s; }
/* при наведении — фирменный цвет самой соцсети, а не общий зелёный */
.social-icon.telegram:hover { color: #26A5E4; border-color: #26A5E4; }
.social-icon.vk:hover { color: #0077FF; border-color: #0077FF; }
.footer-bottom { max-width: 1200px; margin: 56px auto 0; padding-top: 26px; border-top: 1px solid #e0e0e0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; letter-spacing: .04em; color: #5a5a5a; }
.footer-bottom .legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom .legal-links a:hover { color: var(--color-offwhite); }
@media (max-width: 900px) {
  .site-footer { padding: 60px 20px 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-grid .brand-col { grid-column: 1/3; }
  .footer-grid .footer-btn-col { grid-column: 1/3; align-items: flex-start; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid .brand-col { grid-column: 1; }
  .footer-grid .footer-btn-col { grid-column: 1; }
}

/* ---------- cookie banner ---------- */
.cookie-banner { position: fixed; right: 24px; bottom: 24px; z-index: 9000; max-width: 380px; width: calc(100vw - 48px); background: #FFFFFF; border: 1px solid var(--color-dark-1); box-shadow: 0 24px 60px rgba(0,0,0,.18); padding: 26px; display: none; flex-direction: column; gap: 16px; }
.cookie-banner p { font-size: 14px; line-height: 1.55; color: #3a3a3a; }
.cookie-banner p a { color: var(--color-offwhite); border-bottom: 1px solid #555; }
.cookie-banner.is-visible { display: flex; }

/* ---------- reveal-on-scroll ---------- */
/* Прячем только если JS реально работает (класс .js ставится инлайн-скриптом в <head>).
   Без JS — контент виден сразу, а не пустая страница: это и защита от сбоя скрипта,
   и требование по краулерам (важный контент должен быть в исходном HTML). */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .trust-marquee { animation: none; }
  .hero-bird img { animation: none; }
}

/* ---------- preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 9999; background: var(--color-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; transition: transform .9s cubic-bezier(.7,0,.2,1); }
.preloader .bird-wrap { position: relative; width: 190px; height: 190px; }
.preloader .bird-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.preloader .bird-outline { opacity: .1; }
.preloader .bird-fill { opacity: .96; clip-path: inset(100% 0 0 0); }
.preloader .wordmark { font-weight: 800; font-size: 28px; letter-spacing: -.02em; opacity: 0; transition: opacity .6s ease; }
.preloader .wordmark.is-visible { opacity: 1; }
.preloader .status { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .24em; color: #6E6E6E; text-transform: uppercase; }
.preloader .status .pct { color: var(--color-offwhite); min-width: 42px; }
.preloader.is-done { transform: translateY(-100%); }
.preloader.is-hidden { display: none; }

@keyframes gang-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes gang-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-26px) rotate(1deg); } }
@keyframes gang-bird-soft { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }

/* ---------- page-hero: заголовок + вступление для внутренних страниц (не Главная) ---------- */
.page-hero { padding: 150px 48px 40px; background: var(--color-dark); }
.page-hero h1 { font-weight: 800; font-size: clamp(30px,4.2vw,56px); line-height: 1.05; letter-spacing: -.02em; max-width: 22ch; margin-top: 10px; }
.page-hero-intro { margin-top: 24px; max-width: 78ch; font-size: 17px; line-height: 1.65; color: #4a4a4a; }
@media (max-width: 640px) {
  .page-hero { padding: 110px 20px 30px; }
}

/* portfolio-hero: фирменный паттерн-фон + счётчики вместо текстового вступления */
.portfolio-hero { position: relative; overflow: hidden; }
.portfolio-intro { color: #4a4a4a; border-left: 2px solid var(--color-green); padding-left: 18px; }
.portfolio-stats { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--color-dark-1); }
.portfolio-stats .num { font-family: var(--font-mono); font-weight: 800; font-size: clamp(30px,3.4vw,44px); letter-spacing: -.02em; color: var(--color-offwhite); }
.portfolio-stats .num.accent { color: var(--color-red); }
.portfolio-stats .num.accent-green { color: var(--color-green); }
.portfolio-stats .label { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gray-1); }

/* ---------- filter-bar: реальные ссылки на отдельные адреса категорий (не JS-переключатель) ---------- */
/* Фильтр — кнопки (по «Портфолио.png»): активная — красная заливка, остальные — рамка.
   Ссылки-URL сохранены (каждая категория краулится отдельно — SEO/GEO). */
.filter-bar { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.filter-bar a.filter-btn {
  font-size: var(--fs-body-2); font-weight: 700; letter-spacing: .01em;
  color: var(--color-offwhite);
  border: 1px solid var(--color-dark-1); border-radius: 6px;
  padding: 10px 20px;
  transition: background-color .25s, border-color .25s, color .25s;
}
.filter-bar a.filter-btn:hover { border-color: var(--color-red); color: var(--color-red); }
.filter-bar a.filter-btn.is-active { background: var(--color-red); border-color: var(--color-red); color: #EEEEEE; }

/* Переключатель инструментов на странице кейса (по «Маркетинговая стратегия кейс.png»).
   Тело кейса ТЁМНОЕ (#101010) — поэтому текст кнопок светлый (var(--color-dark)=#EEEEEE),
   активная — красная заливка. Не var(--color-offwhite): он тёмный и слился бы с фоном. */
.tool-switcher { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 44px 0 4px; }
.tool-btn { font-family: var(--font-main); font-size: var(--fs-body-2); font-weight: 700; color: var(--color-dark); background: transparent; border: 1px solid rgba(238,238,238,.25); border-radius: 6px; padding: 10px 20px; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.tool-btn:hover { border-color: var(--color-red); color: var(--color-red); }
.tool-btn.is-active { background: var(--color-red); border-color: var(--color-red); color: #EEEEEE; }
.tool-panel[hidden] { display: none; }
.slot-ph { margin-top: 14px; padding: 40px 24px; border: 1px dashed rgba(238,238,238,.22); border-radius: 8px; color: var(--color-gray-1); font-size: var(--fs-body-2); text-align: center; background: rgba(238,238,238,.03); }

/* ---------- сетка карточек портфолио ---------- */
.portfolio-grid-section { background: var(--color-dark); padding: 50px 48px 130px; }
.portfolio-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2,1fr); } }
.portfolio-tender-line { max-width: 1200px; margin: 40px auto 0; text-align: center; font-size: 15px; color: var(--color-gray-1); }
.portfolio-tender-line a { color: var(--color-offwhite); }
@media (max-width: 900px) {
  .portfolio-grid-section { padding: 30px 20px 80px; }
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ---------- страница отдельного кейса ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #7a7a7a; margin-bottom: 24px; }
.breadcrumbs a { color: #9a9a9a; transition: color .2s; }
.breadcrumbs a:hover { color: var(--color-green); }
.breadcrumbs .current { color: var(--color-gray-1); }
.case-hero { position: relative; overflow: hidden; }
.case-hero h1 { max-width: 30ch; }
.case-hero-bird { position: absolute; top: 8%; right: 2%; width: min(18vw,220px); opacity: .1; pointer-events: none; z-index: 0; }
.case-hero-bird img { width: 100%; display: block; animation: gang-bird-soft 8s ease-in-out infinite; }
.case-meta { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 22px; margin-top: 36px; padding: 26px 0; border-top: 1px solid var(--color-dark-1); border-bottom: 1px solid var(--color-dark-1); }
.case-meta .k { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-gray-1); margin-bottom: 6px; }
.case-meta .v { font-size: 15px; font-weight: 600; color: var(--color-offwhite); }
.case-meta .v a { color: var(--color-offwhite); border-bottom: 1px solid var(--color-gray-1); }
.case-meta .v a:hover { color: var(--color-green); border-color: var(--color-green); }
.case-headline-result { margin-top: 26px; font-family: var(--font-mono); font-weight: 700; font-size: clamp(18px,2vw,24px); }

.case-body { background: var(--color-offwhite); color: var(--color-dark); padding: 70px 48px; }
.case-body + .case-body { padding-top: 0; }
.case-body:last-child { padding-bottom: 120px; }
.case-body-inner { max-width: 780px; margin: 0 auto; }
.case-block { margin-bottom: 60px; }
.case-block:last-child { margin-bottom: 0; }
.case-block h2 { font-size: clamp(22px,2.4vw,30px); font-weight: 800; letter-spacing: -.01em; margin-bottom: 20px; }
.case-block > p { font-size: 16px; line-height: 1.7; color: #cfcfcf; }

/* «Коротко» — прямой ответ для поисковиков и ИИ-систем (GEO) */
.case-tldr { background: var(--color-surface-dark); border: 1px solid var(--color-gray-2); border-left: 4px solid var(--color-red); padding: 26px 30px; margin-bottom: 50px; }
.case-tldr .tldr-label { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-red); margin-bottom: 12px; }
.case-tldr p { font-size: clamp(16px,1.7vw,18px); line-height: 1.62; color: #d8d8d8; }

/* Частые вопросы — FAQPage schema + масса ключевых слов */
.case-faq h2 { font-size: clamp(22px,2.4vw,28px); font-weight: 800; margin-bottom: 22px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--color-dark-1); background: rgba(16,16,16,.03); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; font-size: 16px; line-height: 1.4; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: 24px; font-weight: 400; color: var(--color-red); flex-shrink: 0; line-height: 1; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--color-gray-2); }

/* секция-эйброу с крупным номером этапа */
.section-eyebrow { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.section-eyebrow .num { font-family: var(--font-mono); font-weight: 700; font-size: clamp(30px,4vw,52px); line-height: 1; color: var(--case-accent, var(--color-red)); letter-spacing: -.02em; }
.section-eyebrow .label { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #8a8a8a; }

/* --- Задача: лид, факты-чипы, KPI-цели --- */
.case-lede { font-size: clamp(18px,2vw,22px); line-height: 1.55; color: var(--color-dark); font-weight: 500; }
.brief-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 34px; }
.brief-fact { background: var(--color-surface-dark); border: 1px solid var(--color-gray-2); border-top: 2px solid var(--color-red); padding: 22px 20px; }
.brief-fact .n { display: block; font-family: var(--font-mono); font-weight: 800; font-size: clamp(28px,3.4vw,40px); letter-spacing: -.02em; color: var(--color-dark); }
.brief-fact .l { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #b0b0b0; }
.kpi-targets { margin-top: 34px; }
.kpi-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 16px; }
.kpi-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.kpi-card { background: var(--color-dark); color: var(--color-offwhite); padding: 24px; }
.kpi-channel { font-size: 13px; font-weight: 700; letter-spacing: .04em; margin-bottom: 16px; color: var(--color-offwhite); }
.kpi-metrics { display: flex; flex-direction: column; gap: 10px; }
.kpi-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #dcdcdc; }
.kpi-metric:last-child { border-bottom: 0; padding-bottom: 0; }
.kpi-metric .mn { font-size: 13px; color: #6a6a6a; }
.kpi-metric .mp { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }

/* --- Решение: таймлайн процесса --- */
.case-timeline { position: relative; padding-left: 8px; }
.case-timeline .timeline-line { position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--color-red), var(--color-gray-2)); }
.tl-step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding-bottom: 34px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-node { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--color-surface-dark); border: 2px solid var(--color-gray-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: #a8a8a8; transition: border-color .4s ease, color .4s ease, background .4s ease; }
.tl-step.is-visible .tl-node { border-color: var(--color-red); color: var(--color-red); }
.tl-body h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; padding-top: 12px; }
.tl-body p { font-size: 15px; line-height: 1.65; color: #cfcfcf; }

/* --- Инструменты анализа: методики, вынесенные в бейджи --- */
.analysis-toolkit { margin: 0 0 40px; }
.toolkit-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 16px; }
.tool-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.tool-pill { font-family: var(--font-mono); font-size: 13px; font-weight: 700; padding: 9px 16px; background: var(--color-green); border: 1px solid var(--color-green); border-radius: 999px; color: var(--color-dark); }
.analysis-diagram { margin-top: 22px; border: 1px solid var(--color-gray-2); background: var(--color-surface-dark); padding: 10px; }
.analysis-diagram img { display: block; width: 100%; height: auto; }
.analysis-diagram figcaption { margin-top: 12px; padding: 0 6px 4px; font-size: 13px; color: #a8a8a8; line-height: 1.5; }

/* --- Экраны и блоки: реальные скриншоты сайта --- */
.case-screens { margin-top: 44px; }
.screens-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.screen-item { border: 1px solid var(--color-gray-2); background: var(--color-surface-dark); padding: 8px; }
.screen-item.wide { grid-column: 1 / -1; }
.screen-item img { display: block; width: 100%; height: auto; }
.screen-item figcaption { margin-top: 10px; padding: 0 6px 4px; font-size: 13px; color: #a8a8a8; }

/* --- Результат: тёмная секция с точечным красным акцентом — эффектно, но не давит на глаза --- */
.case-results-band { position: relative; overflow: hidden; background: var(--color-dark); color: var(--color-offwhite); padding: 92px 48px 100px; }
.case-results-band::before { content: ""; position: absolute; top: -30%; right: -12%; width: 60%; height: 85%; background: radial-gradient(circle, var(--case-accent) 0%, transparent 68%); opacity: .22; filter: blur(6px); pointer-events: none; z-index: 0; }
.case-results-band::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--case-accent); opacity: .85; z-index: 1; }
.case-results-band .container { position: relative; z-index: 1; max-width: 900px; }
.case-results-band .section-eyebrow .label { color: var(--color-gray-1); }
.results-bird { position: absolute; top: 4%; right: -3%; width: min(30vw,380px); opacity: .05; pointer-events: none; z-index: 0; }
.results-lede { font-size: clamp(20px,2.6vw,30px); font-weight: 800; letter-spacing: -.01em; line-height: 1.24; max-width: 24ch; margin-bottom: 46px; color: var(--color-offwhite); }
.results-callout { font-family: var(--font-mono); font-weight: 700; font-size: clamp(22px,3vw,34px); color: var(--case-accent); }
.results-viz { display: flex; flex-direction: column; gap: 32px; }
.res-row { }
.res-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.res-metric { font-size: 15px; font-weight: 600; color: #5a5a5a; }
.res-mult { font-family: var(--font-mono); font-weight: 800; font-size: clamp(28px,4vw,46px); line-height: 1; color: var(--case-accent); white-space: nowrap; }
.res-mult .x { opacity: .6; font-size: .6em; margin-right: 2px; }
.res-bar { position: relative; height: 14px; background: #d8d8d8; border-radius: 2px; overflow: visible; }
.res-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--case-accent); border-radius: 2px; transition: width 1.1s cubic-bezier(.16,.84,.44,1); }
.res-row.is-visible .res-fill { width: 100%; }
.res-plan { position: absolute; top: 50%; transform: translate(-50%,-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .5s ease .5s; }
.res-row.is-visible .res-plan { opacity: 1; }
.res-plan .dot { width: 2px; height: 24px; background: rgba(16,16,16,.6); }
.res-plan .lbl { position: absolute; top: 28px; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; color: #8a8a8a; }
/* достигнутый результат — тёмный чип у правого конца полосы; полоса всегда залита красным (--case-accent),
   поэтому чип контрастирует с красным фоном, а не с темой страницы — хардкод, не токен */
.res-fact { position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(.7); transform-origin: right center; z-index: 3; background: #101010; color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: -.01em; padding: 5px 12px; border: 1px solid rgba(255,255,255,.18); white-space: nowrap; opacity: 0; transition: opacity .5s ease .7s, transform .5s cubic-bezier(.16,.84,.44,1) .7s; }
.res-row.is-visible .res-fact { opacity: 1; transform: translateY(-50%) scale(1); }
.res-label { margin-top: 34px; font-size: 13px; color: #6a6a6a; }
/* крупный акцент — светлая «карта», единственное красное пятно в тёмной секции */
.res-highlight { margin-top: 50px; padding: 32px 36px; background: var(--color-offwhite); color: var(--color-dark); border-left: 6px solid var(--color-red); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.res-highlight .n { font-family: var(--font-mono); font-weight: 800; font-size: clamp(42px,6vw,68px); line-height: 1; color: var(--color-red); }
.res-highlight .l { font-size: clamp(15px,1.8vw,19px); font-weight: 600; max-width: 24ch; line-height: 1.35; color: var(--color-dark); }

/* ===== Реверс страницы кейса (тёмный Figma → светлый сайт) + секции 1:1 с фреймом ===== */
.case-body { background: var(--color-dark); color: var(--color-offwhite); }   /* светлый фон, тёмный текст */
.case-body-inner { max-width: 1120px; }
.case-block > p { color: var(--color-gray-2); }        /* было #cfcfcf — невидимо на светлом */
.case-lede { color: var(--color-offwhite); }           /* было var(--color-dark) — светлое на светлом */
.case-tldr { background: rgba(16,16,16,.03); border-color: var(--color-dark-1); }
.case-tldr p { color: var(--color-gray-2); }
/* переключатель инструментов на светлом фоне — тёмный текст */
.tool-btn { color: var(--color-offwhite); border-color: var(--color-dark-1); }
.tool-btn:hover { border-color: var(--color-red); color: var(--color-red); }
.tool-btn.is-active { background: var(--color-red); border-color: var(--color-red); color: #EEEEEE; }
/* крупные секции-заголовки (по фрейму: «Анализ бизнеса», «Выбор стратегии», «Медиа-план») */
.case-section { margin: 0 0 56px; }
.case-section-title { font-weight: 800; font-size: clamp(34px, 5.4vw, 76px); line-height: 1; letter-spacing: -.02em; margin: 44px 0 28px; }
/* 6-колоночная сетка: блок может занимать всю ширину (full), половину (half) или треть (third) — как во фрейме */
.case-subgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 26px; align-items: start; }
.case-subblock { display: flex; flex-direction: column; gap: 12px; grid-column: span 3; }
.case-subblock.is-full { grid-column: span 6; }
.case-subblock.is-half { grid-column: span 3; }
.case-subblock.is-third { grid-column: span 2; }
.sub-label { font-weight: 700; font-size: var(--fs-body); color: var(--color-offwhite); }
.sub-text { font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); max-width: 62ch; }
.sub-text.is-ph { color: var(--color-gray-1); }
/* слот под изображение — под описанием раздела (наполняется в админке) */
.sub-media { margin-top: 4px; }
.sub-slot { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 24px 20px; border: 1px dashed var(--color-dark-2); border-radius: 10px; background: rgba(16,16,16,.02); color: var(--color-gray-1); font-size: var(--fs-body-2); text-align: center; }
.sub-media.is-wide .sub-slot { min-height: 300px; }
.case-banner { margin: 8px 0 44px; }
.case-banner .sub-slot { min-height: 300px; }
/* SWOT — цветные плашки с анимацией появления (по фрейму) */
.swot-grid { margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.swot-card { display: flex; align-items: flex-start; min-height: 128px; padding: 18px 20px; border-radius: 12px; background: #1f7a3d; color: rgba(255,255,255,.9); font-size: var(--fs-body-3); line-height: 1.4; }
.swot-card:nth-child(1) { background: #16632f; }
.swot-card:nth-child(4) { background: #16632f; }
.swot-ph { opacity: .85; }
.tool-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tool-pill { font-size: var(--fs-body-3); font-weight: 700; letter-spacing: .04em; color: var(--color-offwhite); border: 1px solid var(--color-dark-1); border-radius: 6px; padding: 6px 12px; }
@media (max-width: 760px) {
  .case-subgrid { grid-template-columns: 1fr; }
  .case-subblock, .case-subblock.is-full, .case-subblock.is-half, .case-subblock.is-third { grid-column: auto; }
  .swot-grid { grid-template-columns: 1fr; }
  .case-section-title { font-size: clamp(28px,8vw,44px); }
}

/* ===== Шапка кейса 1:1 с фреймом Figma: Описание → фото → Проблема/Решение ===== */
/* серые крупные подзаголовки-метки разделов (Описание / Проблема / Решение) */
.case-eyebrow { display: block; font-weight: 800; font-size: clamp(20px,2.4vw,30px); letter-spacing: -.01em; color: var(--color-gray-1); }
/* «Описание» — метка слева, прямой ответ справа (в шапке-герое, на светлом фоне) */
.case-intro { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px 48px; margin: 30px 0 8px; align-items: start; }
.case-intro-text { font-size: clamp(16px,1.4vw,19px); line-height: 1.6; color: var(--color-gray-2); }
.case-intro .brief-facts { margin-top: 26px; }
/* hero-фото кейса. Высота задана и на самой figure — картинка теперь лежит
   в .media-slot (см. build.js/mediaSlot), а он тянется на 100% высоты
   родителя; без явной высоты у figure это 100% от auto и высота съезжает
   на исходное соотношение сторон картинки вместо фиксированной кадрированной. */
.case-herophoto { margin: 0 0 56px; border-radius: 16px; overflow: hidden; background: var(--color-dark-1); height: clamp(240px,42vw,540px); }
.case-herophoto img { display: block; width: 100%; height: clamp(240px,42vw,540px); object-fit: cover; }
/* Проблема / Решение — две колонки с верхней линией-разделителем */
.case-ps { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 0 0 64px; }
.case-ps-col { padding-top: 22px; border-top: 1px solid var(--color-dark-1); }
.case-ps-col .case-eyebrow { margin-bottom: 16px; }
.case-ps-col p { font-size: var(--fs-body-2); line-height: 1.65; color: var(--color-gray-2); }
/* «Подробнее» + Скачать стратегию */
.case-download { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin: 8px 0 8px; padding: 40px; border-radius: 16px; background: rgba(16,16,16,.03); border: 1px solid var(--color-dark-1); }
.case-download h2 { font-weight: 800; font-size: clamp(24px,2.6vw,34px); margin-bottom: 12px; }
.case-download-body p { font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); margin-bottom: 24px; max-width: 46ch; }
.case-download-preview .sub-slot { min-height: 200px; }
.btn.is-pending { display: inline-flex; align-items: center; opacity: .55; cursor: not-allowed; pointer-events: none; }
@media (max-width: 760px) {
  .case-intro, .case-ps, .case-download { grid-template-columns: 1fr; }
  .case-download { padding: 28px; }
}

/* --- Цитата, ссылка на услугу, похожие кейсы --- */
.case-results { display: flex; flex-direction: column; gap: 12px; }
.case-results li { list-style: none; position: relative; overflow: hidden; padding: 16px 20px 16px 28px; background: #f0f0f0; color: var(--color-offwhite); font-weight: 600; font-size: 15px; line-height: 1.5; transition: transform .25s ease, background .25s ease; }
.case-results li:hover { transform: translateX(6px); background: #e6e6e6; }
.case-results li .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--case-accent); }
.case-quote { background: var(--color-dark); color: var(--color-offwhite); padding: 48px 40px 40px; }
.case-quote .mark { display: block; font-family: Georgia,'Times New Roman',serif; font-size: 64px; line-height: .5; color: var(--color-red); margin-bottom: 18px; }
.case-quote .q { font-size: 19px; line-height: 1.6; font-style: italic; }
.case-quote .who { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.case-quote .name { font-weight: 700; font-size: 14px; }
.case-quote .role { font-size: 13px; color: var(--color-offwhite); opacity: .68; }
.case-service-link p { font-size: 16px; }
.case-service-link a { color: var(--color-red); border-bottom: 1px solid var(--color-red); }
.case-service-link a:hover { color: var(--color-green); border-color: var(--color-green); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 900px) {
  .case-body { padding: 50px 20px; }
  .case-body:last-child { padding-bottom: 80px; }
  .case-results-band { padding: 60px 20px 70px; }
  .brief-facts, .kpi-grid, .screens-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .res-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* --- Сквозной приём макета: активный шаг подсвечен, остальные приглушены --- */
[data-step] { transition: opacity .4s ease, color .4s ease, transform .4s ease; }
[data-step] .step-num {
  font-weight: 800;
  line-height: 1;
  color: var(--color-dark-1);
  transition: color .4s ease, font-size .4s ease, transform .4s ease;
}
[data-step] .step-title { color: var(--color-gray-1); transition: color .4s ease; }
[data-step] .step-text { color: var(--color-gray-1); }
[data-step]:not(.is-active) { opacity: .45; }
[data-step].is-active { opacity: 1; }
[data-step].is-active .step-num { color: var(--color-green); transform: scale(1.06); transform-origin: left center; }
[data-step].is-active .step-title { color: var(--color-offwhite); }


/* ===================== БЛОГ ===================== */
/* Фреймы «Блог.png» и «Статья.png», реверс: тёмный макет → светлая страница сайта. */

/* --- Список статей --- */
.blog-list { background: var(--color-dark); color: var(--color-offwhite); padding: 60px 48px 90px; }
.posts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; max-width: 1120px; margin: 0 auto; }
.posts-empty { max-width: 1120px; margin: 0 auto; color: var(--color-gray-2); font-size: var(--fs-body-2); }

.post-card { display: flex; flex-direction: column; }
.post-photo { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background: var(--color-dark-1); }
.post-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* чипы-категории поверх фото, правый нижний угол — как во фрейме */
.post-chips { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.post-chip { background: rgba(238,238,238,.92); color: var(--color-offwhite); font-size: var(--fs-body-3); font-weight: 700; letter-spacing: .02em; padding: 5px 10px; border-radius: 6px; }
.post-body { display: flex; flex-direction: column; align-items: flex-start; padding-top: 18px; }
.post-title { font-size: clamp(19px,2vw,25px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.post-title a { color: inherit; }
.post-title a:hover { color: var(--color-red); }
.post-excerpt { margin-top: 12px; font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* «Читать» — кнопка справа, всегда видима (не только по ховеру) */
.post-read { align-self: flex-end; margin-top: 18px; font-size: var(--fs-body-3); font-weight: 700; color: var(--color-offwhite);
  border: 1px solid var(--color-dark-2); border-radius: 8px; padding: 9px 20px; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.post-read:hover { background: var(--color-red); border-color: var(--color-red); color: #EEEEEE; }

/* --- Страница статьи --- */
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.art-meta .post-chip { background: var(--color-red); color: #EEEEEE; }
.art-read, .art-date { font-size: var(--fs-body-3); color: var(--color-gray-1); }

.art-body { background: var(--color-dark); color: var(--color-offwhite); padding: 60px 48px 80px; }
.art-inner { max-width: 780px; }
.art-herophoto { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 21 / 9; background: var(--color-dark-1); margin: 0 0 44px; }

/* Акцентный блок «Коротко» — прямой ответ (GEO) и главный акцент страницы */
.art-tldr { position: relative; margin: 0 0 46px; padding: 26px 30px; border-left: 5px solid var(--color-red);
  background: rgba(200,53,64,.06); border-radius: 0 12px 12px 0; }
.art-tldr-label { display: block; font-size: var(--fs-body-3); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-red); margin-bottom: 10px; }
.art-tldr p { font-size: clamp(16px,1.5vw,19px); line-height: 1.6; font-weight: 500; color: var(--color-offwhite); }

.art-section { margin: 0 0 34px; }
.art-section h2 { font-size: clamp(22px,2.6vw,32px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 16px; }
.art-section p { font-size: var(--fs-body-2); line-height: 1.75; color: var(--color-gray-2); margin-bottom: 14px; }
.art-list { margin: 0 0 16px; padding-left: 0; list-style: none; }
.art-list li { position: relative; padding-left: 22px; font-size: var(--fs-body-2); line-height: 1.7; color: var(--color-gray-2); margin-bottom: 9px; }
.art-list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 8px; height: 2px; background: var(--color-red); }

/* «По теме» — явный блок-ссылка на услугу */
.art-service { margin: 40px 0 28px; padding: 22px 26px; border: 1px solid var(--color-dark-1); border-radius: 12px; background: rgba(16,16,16,.03); }
.art-service-label { display: block; font-size: var(--fs-body-3); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-gray-1); margin-bottom: 8px; }
.art-service p { font-size: var(--fs-body-2); color: var(--color-offwhite); }
.art-service a, .art-cta a { color: var(--color-red); border-bottom: 1px solid var(--color-red); }
.art-service a:hover, .art-cta a:hover { color: var(--color-green); border-color: var(--color-green); }
.art-cta { margin: 0 0 40px; font-size: var(--fs-body-2); line-height: 1.7; color: var(--color-offwhite); }

.art-others { padding-top: 20px; }
.art-others-title { font-size: clamp(26px,3.4vw,44px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 30px; max-width: 1120px; margin-left: auto; margin-right: auto; }

@media (max-width: 760px) {
  .blog-list, .art-body { padding-left: 20px; padding-right: 20px; }
  .posts-grid { grid-template-columns: 1fr; gap: 34px; }
  .art-tldr { padding: 20px 22px; }
}

/* Иллюстрации внутри статьи — разбавляют текст, удерживают до конца чтения */
.art-figure { margin: 30px 0 34px; }
.art-figure-media { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background: var(--color-dark-1); }
.art-figure-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-figure figcaption { margin-top: 10px; font-size: var(--fs-body-3); line-height: 1.5; color: var(--color-gray-1); }

/* ===================== УСЛУГИ ===================== */
/* Фрейм «Услуги.png», реверс: тёмный макет → светлая страница сайта. */

.svc-eyebrow { display: block; font-size: var(--fs-body-3); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--color-gray-1); margin-bottom: 14px; }
.svc-hero .filter-bar { margin: 0 0 26px; }
/* якорная навигация по разделам страницы услуги */
.svc-anchors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.svc-anchor { font-size: var(--fs-body-3); font-weight: 700; color: var(--color-offwhite); border: 1px solid var(--color-dark-1); border-radius: 8px; padding: 8px 16px; transition: border-color .18s ease, color .18s ease; }
.svc-anchor:hover { border-color: var(--color-red); color: var(--color-red); }

.svc-block { background: var(--color-dark); color: var(--color-offwhite); padding: 62px 48px; }
.svc-block .container { max-width: 1120px; }
.svc-h2 { font-size: clamp(26px,3.4vw,46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 30px; }

/* Этапы работы — нумерованные шаги (активный номер зелёный, как во фрейме) */
.svc-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px 30px; }
.svc-step .step-num { display: block; font-family: var(--font-mono); font-weight: 800; font-size: clamp(38px,4.6vw,62px); line-height: 1; color: var(--color-dark-2); transition: color .3s ease, transform .3s ease; }
.svc-step .step-title { margin: 10px 0 8px; font-size: var(--fs-body); font-weight: 800; }
.svc-step .step-text { font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); }

/* Что входит / Кому подходит */
.svc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.svc-list { list-style: none; padding: 0; margin: 0; }
.svc-list li { position: relative; padding-left: 24px; font-size: var(--fs-body-2); line-height: 1.65; color: var(--color-gray-2); margin-bottom: 11px; }
.svc-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--color-red); }
.svc-all-cases { margin-top: 26px; font-size: var(--fs-body-2); }
.svc-all-cases a { color: var(--color-red); border-bottom: 1px solid var(--color-red); }
.svc-all-cases a:hover { color: var(--color-green); border-color: var(--color-green); }

/* Наши заказчики — ряд логотипов */
.svc-clients { background: var(--color-dark); color: var(--color-offwhite); padding: 20px 48px 62px; }
.svc-clients .container { max-width: 1120px; }
.clients-row { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 44px; }
.client-logo { display: inline-flex; align-items: center; height: 46px; }
.client-logo img { max-height: 46px; width: auto; object-fit: contain; opacity: .55; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.client-logo:hover img { opacity: 1; filter: none; }

/* Тарифы */
.tariff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.tariff-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 28px; border-radius: 14px; background: rgba(16,16,16,.03); border: 1px solid var(--color-dark-1); }
.tariff-card h3 { font-size: clamp(20px,2.2vw,26px); font-weight: 800; }
.tariff-price { margin: 10px 0 16px; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-body); color: var(--color-red); }
.tariff-lead { font-size: var(--fs-body-2); font-weight: 700; color: var(--color-offwhite); margin-bottom: 12px; }
.tariff-desc { font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); margin-bottom: 24px; }
.tariff-cta { margin-top: auto; }
.tariff-note { margin-top: 24px; font-size: var(--fs-body-3); line-height: 1.6; color: var(--color-gray-1); max-width: 80ch; }

/* Преимущества */
.adv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px 26px; }
.adv-media { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16/9; background: var(--color-dark-1); margin-bottom: 16px; }
.adv-card h3 { font-size: var(--fs-body); font-weight: 800; margin-bottom: 8px; }
.adv-card p { font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); }

/* Обзорная страница услуг */
.svc-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.svc-card { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 30px; border-radius: 14px; border: 1px solid var(--color-dark-1); background: rgba(16,16,16,.03); transition: border-color .2s ease, transform .2s ease; }
.svc-card:hover { border-color: var(--color-red); transform: translateY(-3px); }
.svc-card h2 { font-size: clamp(21px,2.4vw,28px); font-weight: 800; margin-bottom: 12px; }
.svc-card-lead { font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); margin-bottom: 14px; }
.svc-card-proof { font-size: var(--fs-body-2); font-weight: 700; color: var(--color-offwhite); margin-bottom: 20px; }
.svc-card-more { margin-top: auto; font-size: var(--fs-body-3); font-weight: 700; color: var(--color-red); }
.manifest-list { max-width: 90ch; }
.manifest-facts { margin-top: 34px; }

@media (max-width: 860px) { .svc-steps, .tariff-grid, .adv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .svc-block, .svc-clients { padding-left: 20px; padding-right: 20px; }
  .svc-steps, .svc-two, .tariff-grid, .adv-grid, .svc-cards { grid-template-columns: 1fr; }
}

/* Тарифные карточки — акцентные: тёмная заливка с реверсом текста в светлый */
.tariff-card { background: var(--color-offwhite); border: 1px solid var(--color-offwhite); border-top: 3px solid var(--color-red); color: var(--color-dark); box-shadow: 0 18px 40px rgba(16,16,16,.14); transition: transform .2s ease, box-shadow .2s ease; }
.tariff-card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(16,16,16,.22); }
.tariff-card h3 { color: var(--color-dark); }
.tariff-card .tariff-price { color: var(--color-dark); font-size: clamp(16px,1.7vw,20px); }
.tariff-card .tariff-lead { color: rgba(238,238,238,.86); }
.tariff-card .tariff-desc { color: rgba(238,238,238,.62); }
.tariff-card .tariff-cta { background: var(--color-red); border-color: var(--color-red); color: #EEEEEE; }
.tariff-card .tariff-cta:hover { background: var(--color-green); border-color: var(--color-green); }

/* ===== Правки по услугам: тёмные карточки, манифест по скроллу, лого-строка, фильтры ===== */

/* Кнопки-фильтры: в макете это контрастные пилюли (белые на тёмном) —
   в реверсе они должны быть тёмными на светлом, а не бесцветными. */
.filter-bar a.filter-btn { background: var(--color-offwhite); border-color: var(--color-offwhite); color: var(--color-dark); }
.filter-bar a.filter-btn:hover { background: var(--color-gray-2); border-color: var(--color-gray-2); color: var(--color-dark); }
.filter-bar a.filter-btn.is-active { background: var(--color-red); border-color: var(--color-red); color: #EEEEEE; }

/* Карточки услуг — акцентные тёмные */
.svc-cards { grid-auto-flow: dense; }
.svc-card { background: var(--color-offwhite); border-color: var(--color-offwhite); color: var(--color-dark); box-shadow: 0 18px 40px rgba(16,16,16,.14); }
.svc-card h2 { color: var(--color-dark); }
.svc-card .svc-card-lead { color: rgba(238,238,238,.68); }
.svc-card .svc-card-proof { color: var(--color-dark); }
.svc-card .svc-card-more { color: var(--color-red); }
.svc-card:hover { border-color: var(--color-red); box-shadow: 0 26px 56px rgba(16,16,16,.24); }
/* «Комплексный маркетинг» — во всю ширину, зелёный акцент */
.svc-card.is-hero { grid-column: 1 / -1; padding: 42px 40px; border-top: 3px solid var(--color-green); }
.svc-card.is-hero h2 { font-size: clamp(28px,3.6vw,44px); }
.svc-card.is-hero .svc-card-lead { max-width: 70ch; font-size: var(--fs-body); }
.svc-card.is-hero .svc-card-proof { color: var(--color-green); font-size: var(--fs-body); }
.svc-card.is-hero .svc-card-more { color: var(--color-green); }
.svc-card.is-hero:hover { border-color: var(--color-green); }
.svc-card-badge { display: inline-block; margin-bottom: 14px; font-size: var(--fs-body-3); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-green); border: 1px solid var(--color-green); border-radius: 6px; padding: 6px 12px; }

/* Манифест «Чего мы не делаем» — раскрывается по скроллу, активен один тезис */
.manifest-steps { display: flex; flex-direction: column; border-top: 1px solid var(--color-dark-1); }
.manifest-step { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 24px 30px; padding: 30px 0; border-bottom: 1px solid var(--color-dark-1); transition: opacity .45s ease; }
.manifest-step .step-num { font-family: var(--font-mono); font-weight: 800; font-size: clamp(34px,4vw,54px); line-height: 1; color: var(--color-dark-2); transition: color .35s ease, transform .35s ease; }
.manifest-step .step-title { font-size: clamp(17px,1.9vw,24px); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--color-gray-2); transition: color .35s ease; }
.manifest-step.is-active .step-title { color: var(--color-offwhite); }
.manifest-proof { text-align: right; opacity: 0; transform: translateY(10px); transition: opacity .5s ease .1s, transform .5s ease .1s; }
.manifest-step.is-active .manifest-proof { opacity: 1; transform: none; }
.manifest-proof .n { display: block; font-family: var(--font-mono); font-weight: 800; font-size: clamp(30px,3.6vw,50px); line-height: 1; color: var(--color-green); }
.manifest-proof .l { display: block; margin-top: 6px; font-size: var(--fs-body-3); line-height: 1.4; color: var(--color-gray-2); max-width: 26ch; }
.manifest-proof .src { display: block; margin-top: 4px; font-size: var(--fs-body-3); color: var(--color-gray-1); }

/* Бегущая строка логотипов на светлой странице — тёмные, без подсветки по ховеру */
.trust-marquee.is-ink .logo img { filter: brightness(0); opacity: .62; }
.svc-clients .container { padding-bottom: 26px; }

@media (max-width: 760px) {
  .manifest-step { grid-template-columns: 64px 1fr; }
  .manifest-proof { grid-column: 2; text-align: left; }
  .svc-card.is-hero { padding: 30px 26px; }
}

/* Манифест и этапы: подсветка по скроллу — это УСИЛЕНИЕ, а не условие читаемости.
   Если JS не отработал или скролл-подсветка не сработала, блок всё равно выглядит
   целым: тезисы читаемы, цифры на месте — просто без зелёного акцента. */
.manifest-step:not(.is-active) { opacity: .62; }
.manifest-proof { opacity: .34; transform: none; transition: opacity .45s ease, transform .45s ease; }
.manifest-proof .n { color: var(--color-gray-1); transition: color .35s ease, transform .35s ease; }
.manifest-step.is-active .manifest-proof { opacity: 1; }
.manifest-step.is-active .manifest-proof .n { color: var(--color-green); transform: scale(1.04); transform-origin: right center; }
.manifest-step.is-active .step-num { color: var(--color-green); }
.svc-step:not(.is-active) { opacity: .72; }
/* без JS класс .js не ставится — показываем всё в полную силу */
html:not(.js) .manifest-step,
html:not(.js) .manifest-proof,
html:not(.js) .svc-step { opacity: 1; }
@media (max-width: 760px) { .manifest-proof .n { transform-origin: left center; } }

/* ============ УСЛУГИ: премиальная редакция ============
   Направление из брифа: сдержанно, «по-взрослому», крупная редакционная типографика,
   много воздуха, один акцент. Фирменный паттерн со снегирями на этих страницах не
   используем — он остаётся приёмом главной, здесь читался бы как шум.
   Смысловой центр: манифест агентства говорит «не берём проект, если результат нельзя
   свести к цифрам» — поэтому каждое направление подписано своей реальной цифрой из кейса. */

/* --- Шапка: крупный заголовок, красная линия, интро и цифры в подвале шапки --- */
.svc-hero { padding-bottom: 84px; }
.svc-hero h1 { font-size: clamp(38px,6.4vw,86px); line-height: 1.02; letter-spacing: -.035em; max-width: 16ch; }
.svc-hero .svc-eyebrow { color: var(--color-red); letter-spacing: .24em; }
.svc-rule { display: block; width: 100%; height: 1px; background: var(--color-dark-1); margin: 44px 0 34px; position: relative; }
.svc-rule::after { content: ""; position: absolute; left: 0; top: 0; width: 96px; height: 3px; margin-top: -1px; background: var(--color-red); }
.svc-hero-foot { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 40px 64px; align-items: start; }
.svc-hero .svc-hero-intro { font-size: clamp(16px,1.45vw,19px); line-height: 1.68; color: var(--color-gray-2); max-width: 62ch; margin: 0; }
.svc-hero-meta { display: flex; gap: 48px; justify-content: flex-end; }
.svc-hero-meta .v { display: block; font-family: var(--font-mono); font-weight: 800; font-size: clamp(30px,3.4vw,46px); line-height: 1; letter-spacing: -.03em; }
.svc-hero-meta .l { display: block; margin-top: 8px; font-size: var(--fs-body-3); line-height: 1.4; color: var(--color-gray-1); max-width: 16ch; }

/* --- Индекс направлений --- */
.svc-index { padding-top: 8px; padding-bottom: 90px; }
.svc-cards { gap: 20px; }
.svc-card { padding: 40px 38px 34px; border-radius: 16px; box-shadow: none; overflow: hidden; position: relative; transition: transform .45s cubic-bezier(.16,.84,.44,1), box-shadow .45s cubic-bezier(.16,.84,.44,1); }
/* тонкая красная кромка, которая «прорастает» по наведению — единственный акцент карточки */
.svc-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-red); transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.16,.84,.44,1); }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 30px 64px rgba(16,16,16,.26); }
.svc-card:hover::after, .svc-card:focus-visible::after { transform: scaleX(1); }
.svc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.svc-card h2 { font-size: clamp(23px,2.7vw,34px); line-height: 1.1; letter-spacing: -.025em; margin: 0; }
.svc-card-arrow { font-size: 22px; color: var(--color-red); transform: translateX(-6px); opacity: 0; transition: transform .4s cubic-bezier(.16,.84,.44,1), opacity .4s ease; }
.svc-card:hover .svc-card-arrow { transform: none; opacity: 1; }
.svc-card .svc-card-lead { margin: 14px 0 0; font-size: var(--fs-body-2); line-height: 1.62; color: rgba(238,238,238,.62); max-width: 46ch; }
/* цифра-пруф — подпись направления результатом, а не обещанием */
.svc-metric { display: block; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(238,238,238,.14); }
.svc-metric .v { display: block; font-family: var(--font-mono); font-weight: 800; font-size: clamp(26px,3vw,40px); line-height: 1; letter-spacing: -.035em; color: var(--color-dark); }
.svc-metric .l { display: block; margin-top: 10px; font-size: var(--fs-body-3); line-height: 1.45; color: rgba(238,238,238,.6); max-width: 34ch; }
.svc-metric .src { display: block; margin-top: 8px; font-size: var(--fs-body-3); letter-spacing: .1em; text-transform: uppercase; color: rgba(238,238,238,.38); }

/* «Комплексный маркетинг» — единственный зелёный акцент на странице */
.svc-card.is-hero { padding: 52px 48px 46px; }
.svc-card.is-hero::after { background: var(--color-green); }
.svc-card.is-hero h2 { font-size: clamp(30px,4.4vw,58px); }
.svc-card.is-hero .svc-card-arrow { color: var(--color-green); }
.svc-card.is-hero .svc-card-lead { font-size: clamp(15px,1.35vw,18px); max-width: 64ch; }
.svc-card.is-hero .svc-metric { display: flex; align-items: baseline; gap: 20px 32px; flex-wrap: wrap; }
.svc-card.is-hero .svc-metric .v { color: var(--color-green); font-size: clamp(34px,4.6vw,64px); }
.svc-card.is-hero .svc-metric .l { margin-top: 0; max-width: 30ch; }
.svc-card.is-hero .svc-metric .src { margin-top: 0; }

@media (max-width: 860px) {
  .svc-hero-foot { grid-template-columns: 1fr; }
  .svc-hero-meta { justify-content: flex-start; gap: 34px; }
}
@media (max-width: 760px) {
  .svc-card { padding: 30px 26px 26px; }
  .svc-card.is-hero { padding: 34px 26px 30px; }
  .svc-card-arrow { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card::after, .svc-card-arrow { transition: none; }
  .svc-card:hover { transform: none; }
}

/* ============ Единый премиальный первый экран для разделов ============ */
.svc-eyebrow, .page-eyebrow { display: block; font-size: var(--fs-body-3); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--color-red); margin-bottom: 14px; }
.svc-rule, .page-rule { display: block; width: 100%; height: 1px; background: var(--color-dark-1); margin: 40px 0 32px; position: relative; }
.svc-rule::after, .page-rule::after { content: ""; position: absolute; left: 0; top: -1px; width: 96px; height: 3px; background: var(--color-red); }
.portfolio-hero h1, .blog-hero h1, .art-hero h1 { font-size: clamp(38px,6.4vw,86px); line-height: 1.02; letter-spacing: -.035em; max-width: 16ch; }
.art-hero h1 { font-size: clamp(30px,4.4vw,58px); max-width: 22ch; }
.portfolio-hero .page-hero-intro, .blog-hero .page-hero-intro { font-size: clamp(16px,1.45vw,19px); line-height: 1.68; color: var(--color-gray-2); max-width: 62ch; }

/* ============ Карточки услуг: светлые в покое, тёмная заливка наплывает по наведению ============
   Раньше все пять были сплошь тёмными — страница читалась как набор чёрных пятен.
   Теперь спокойный светлый список, а тёмное — награда за наведение: панель поднимается
   снизу, текст уходит в реверс, цифра загорается акцентом. «Комплексный маркетинг»
   остаётся единственной постоянно тёмной карточкой — это флагман, ему и выделяться. */
.svc-card:not(.is-hero) {
  background: #F6F6F6; border: 1px solid var(--color-dark-1); color: var(--color-offwhite);
  box-shadow: none; isolation: isolate;
}
.svc-card:not(.is-hero)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-offwhite);
  transform: scaleY(0); transform-origin: bottom center;
  transition: transform .55s cubic-bezier(.16,.84,.44,1);
}
.svc-card:not(.is-hero):hover::before,
.svc-card:not(.is-hero):focus-visible::before { transform: scaleY(1); }
.svc-card:not(.is-hero) h2 { color: var(--color-offwhite); transition: color .4s ease .06s; }
.svc-card:not(.is-hero) .svc-card-lead { color: var(--color-gray-2); transition: color .4s ease .06s; }
.svc-card:not(.is-hero) .svc-metric { border-top-color: var(--color-dark-1); transition: border-color .4s ease; }
.svc-card:not(.is-hero) .svc-metric .v { color: var(--color-offwhite); transition: color .4s ease .06s; }
.svc-card:not(.is-hero) .svc-metric .l { color: var(--color-gray-2); transition: color .4s ease .06s; }
.svc-card:not(.is-hero) .svc-metric .src { color: var(--color-gray-1); transition: color .4s ease .06s; }
/* состояние наведения — реверс текста на тёмной панели */
.svc-card:not(.is-hero):hover h2,
.svc-card:not(.is-hero):focus-visible h2 { color: var(--color-dark); }
.svc-card:not(.is-hero):hover .svc-card-lead,
.svc-card:not(.is-hero):focus-visible .svc-card-lead { color: rgba(238,238,238,.62); }
.svc-card:not(.is-hero):hover .svc-metric,
.svc-card:not(.is-hero):focus-visible .svc-metric { border-top-color: rgba(238,238,238,.16); }
.svc-card:not(.is-hero):hover .svc-metric .v,
.svc-card:not(.is-hero):focus-visible .svc-metric .v { color: var(--color-red); }
.svc-card:not(.is-hero):hover .svc-metric .l,
.svc-card:not(.is-hero):focus-visible .svc-metric .l { color: rgba(238,238,238,.6); }
.svc-card:not(.is-hero):hover .svc-metric .src,
.svc-card:not(.is-hero):focus-visible .svc-metric .src { color: rgba(238,238,238,.38); }
.svc-card:not(.is-hero):hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(16,16,16,.20); }

@media (prefers-reduced-motion: reduce) {
  .svc-card:not(.is-hero)::before { transition: none; }
}

/* ============ Услуги: цвет в первых двух экранах ============
   Композиция, размеры и положение элементов не меняются — добавляется только
   цветовая среда: тёплое красное свечение в фоне, акцент в заголовке и цифрах.
   Зелёный намеренно НЕ идёт в фон: по фирстилю он точечный, наравне с красным
   читался бы как «рождественская пара». */

/* Шапка: мягкое красное свечение сверху справа + лёгкая тёплая подложка */
.svc-hero {
  background:
    radial-gradient(118% 88% at 86% -18%, rgba(200,53,64,.20), transparent 62%),
    radial-gradient(70% 60% at 4% 8%, rgba(200,53,64,.07), transparent 64%),
    linear-gradient(180deg, #F5F2F2 0%, var(--color-dark) 72%);
}
/* Акцент в заголовке — выгода клиента красным */
.svc-hero h1 em { font-style: normal; color: var(--color-red); }
/* Цифры шапки — красные, чтобы взгляд цеплялся за них, а не за подписи */
.svc-hero-meta .v { color: var(--color-red); }
.svc-hero-meta .l { color: var(--color-gray-2); }
/* Правило: тонкая линия получает мягкий красный уход вправо */
.svc-hero .svc-rule { background: linear-gradient(90deg, var(--color-dark-1), rgba(200,53,64,.28) 62%, transparent); }

/* Индекс направлений: своя тональная полоса — отделяет второй экран от шапки
   и даёт светлым карточкам больше объёма */
.svc-index {
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(200,53,64,.10), transparent 62%),
    linear-gradient(180deg, var(--color-dark) 0%, #E6E4E4 100%);
}

/* ============ Плитка направлений: тот же приём, что в шапке ============
   В шапке цвет дали свечение в фоне + красные цифры. Здесь — то же самое на
   уровне карточки: тёплое свечение в углу вместо плоской заливки и цифра-пруф
   красным уже в покое. По наведению тёмная панель наплывает как раньше, а цифра
   уходит в светлый — акцент инвертируется, а не повторяется. */
.svc-card:not(.is-hero) {
  background:
    radial-gradient(82% 74% at 100% 0%, rgba(200,53,64,.11), transparent 62%),
    radial-gradient(60% 60% at 0% 100%, rgba(200,53,64,.05), transparent 66%),
    #F7F5F5;
  border-color: rgba(200,53,64,.16);
}
/* цифра-пруф — главный смысл карточки, поэтому она цветная уже в покое */
.svc-card:not(.is-hero) .svc-metric .v { color: var(--color-red); }
.svc-card:not(.is-hero) .svc-metric { border-top-color: rgba(200,53,64,.20); }
/* на тёмной панели цифра становится светлой — акцент меняется, а не дублируется */
.svc-card:not(.is-hero):hover .svc-metric .v,
.svc-card:not(.is-hero):focus-visible .svc-metric .v { color: var(--color-dark); }
.svc-card:not(.is-hero):hover { border-color: var(--color-offwhite); }

/* полоса блока — чуть больше цвета, чтобы плитка не висела в сером */
.svc-index {
  background:
    radial-gradient(72% 58% at 100% 96%, rgba(200,53,64,.14), transparent 64%),
    radial-gradient(56% 46% at 0% 4%, rgba(200,53,64,.08), transparent 62%),
    linear-gradient(180deg, var(--color-dark) 0%, #EDE9E9 100%);
}

/* ============ Страница отдельной услуги: ритм вместо сплошного серого ============
   Ниже шапки шла одна плоская светлая простыня на весь скролл. Даём разделам
   чередование: блок с тёплым свечением — блок «на отдыхе». Приём тот же, что
   в шапке и в плитке направлений, поэтому страницы читаются как одна система. */

/* Этапы работы — первый цветной блок после шапки.
   Полоса начинается и заканчивается тоном страницы, тепло набирается к середине —
   так стык не читается ступенькой, а выглядит как мягкая волна. */
#etapy {
  background:
    radial-gradient(58% 52% at 2% 24%, rgba(200,53,64,.11), transparent 64%),
    linear-gradient(180deg, var(--color-dark) 0%, #F3EFEF 42%, var(--color-dark) 100%);
}
/* Что входит / Кому подходит — пауза, чистый фон: глазу нужен отдых между акцентами */

/* Кейсы — тёплая полоса, чтобы карточки кейсов не висели в сером */
#keysy {
  background:
    radial-gradient(64% 56% at 100% 30%, rgba(200,53,64,.12), transparent 64%),
    linear-gradient(180deg, var(--color-dark) 0%, #EFEBEB 46%, var(--color-dark) 100%);
}

/* Тарифы — самый насыщенный блок страницы: это момент решения,
   тёмные карточки на тёплом фоне читаются как акцент, а не как пятна */
#tarify {
  background:
    radial-gradient(70% 60% at 88% 74%, rgba(200,53,64,.17), transparent 62%),
    radial-gradient(52% 44% at 0% 26%, rgba(200,53,64,.08), transparent 62%),
    linear-gradient(180deg, var(--color-dark) 0%, #EFE9E9 44%, var(--color-dark) 100%);
}

/* Преимущества — снова пауза перед FAQ */

/* Заголовки разделов получают короткий красный штрих — тот же приём,
   что линия-правило в шапке, только в масштабе раздела */
.svc-block .svc-h2, .svc-clients .svc-h2 { position: relative; padding-top: 20px; }
.svc-block .svc-h2::before, .svc-clients .svc-h2::before {
  content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 3px; background: var(--color-red);
}

/* ============ Страница услуги: шапка-лок-ап с реальным кейсом ============
   Раньше это был текст на градиенте — отсюда ощущение примитивности. Главная
   выглядит дорого не за счёт цвета, а за счёт настоящих ассетов и слоёв:
   3D-снегирь, контурные слова за крупным GANG, фото кейсов во всю карточку.
   Переношу сюда тот же принцип: контурное слово за заголовком, крупная цифра
   результата и реальная обложка флагманского кейса вместо пустого места. */
.svc-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 48px 64px; align-items: center; margin-top: 12px; }
/* Контурное слово стоит НАД заголовком, а не сквозь него: заголовок услуги в две
   строки, и наложение читалось как случайный артефакт, а не как слой. */
.svc-lockup { position: relative; display: block; padding-top: clamp(30px,3.4vw,46px); }
.svc-ghost {
  position: absolute; top: 0; left: -.015em; z-index: 0;
  font-weight: 800; font-size: clamp(22px,2.7vw,38px); line-height: 1; letter-spacing: .06em;
  text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px var(--color-dark-2); opacity: .45;
  white-space: nowrap; pointer-events: none; user-select: none;
}
.svc-hero-grid h1 { position: relative; z-index: 1; font-size: clamp(34px,5.2vw,72px); line-height: 1.02; letter-spacing: -.035em; max-width: 15ch; margin: 0; }
.svc-hero-grid .page-hero-intro { margin-top: 26px; font-size: clamp(16px,1.4vw,19px); line-height: 1.66; color: var(--color-gray-2); max-width: 54ch; }

/* Цифра результата — тезис страницы, а не подпись под текстом */
.svc-hero-proof { margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(200,53,64,.24); }
.svc-hero-proof .v { display: block; font-family: var(--font-mono); font-weight: 800; font-size: clamp(32px,4.4vw,62px); line-height: 1; letter-spacing: -.04em; color: var(--color-red); }
.svc-hero-proof .l { display: block; margin-top: 12px; font-size: var(--fs-body-2); line-height: 1.45; color: var(--color-gray-2); max-width: 32ch; }
.svc-hero-proof .src { display: block; margin-top: 8px; font-size: var(--fs-body-3); letter-spacing: .1em; text-transform: uppercase; color: var(--color-gray-1); }

/* Реальная обложка кейса — главный визуальный вес шапки. Высота задана и на
   самой figure — см. комментарий у .case-herophoto о том, почему без этого
   .media-slot внутри съезжает на высоту по соотношению сторон картинки. */
.svc-hero-shot { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #0c0c0c; box-shadow: 0 40px 90px rgba(16,16,16,.28); height: clamp(300px,42vw,520px); }
.svc-hero-shot img { display: block; width: 100%; height: clamp(300px,42vw,520px); object-fit: cover; }
.svc-hero-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 46px 28px 22px;
  font-size: var(--fs-body-2); font-weight: 700; line-height: 1.35; color: #EEEEEE;
  background: linear-gradient(180deg, transparent, rgba(12,12,12,.86));
}

/* Кейсы — фотокарточки во всю плоскость, язык блока «Наши работы» с главной */
.svc-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.svc-cases .works-card { width: auto; height: clamp(300px,34vw,430px); }
.svc-cases .works-cats span { font-size: var(--fs-body-3); }

@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .svc-hero-shot { height: clamp(240px,56vw,360px); }
  .svc-hero-shot img { height: clamp(240px,56vw,360px); }
  .svc-cases { grid-template-columns: 1fr; }
}

/* ============ Этапы работы: глава + закреплённая шкала прогресса ============
   Была сетка из номеров — процесс не читался как последовательность. Теперь слева
   закреплённая шкала с заполняющейся линией и активной засечкой, справа этапы идут
   главами. Порядок здесь несёт смысл (это реальная хронология), поэтому нумерация
   уместна — в отличие от блоков, где она была бы украшением. */
.proc { display: grid; grid-template-columns: minmax(210px,262px) minmax(0,1fr); gap: 0 68px; align-items: start; }
.proc-rail { position: sticky; top: 120px; display: flex; gap: 22px; padding-right: 8px; }
.proc-line { position: relative; flex: 0 0 2px; width: 2px; background: var(--color-dark-1); border-radius: 2px; }
.proc-line-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--color-red); border-radius: 2px; transition: height .35s cubic-bezier(.16,.84,.44,1); }
.proc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.proc-tick { display: flex; align-items: baseline; gap: 12px; opacity: .38; transition: opacity .35s ease, transform .35s ease; }
.proc-tick .n { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--color-gray-1); }
.proc-tick .t { font-size: var(--fs-body-3); font-weight: 700; line-height: 1.3; color: var(--color-offwhite); }
.proc-tick.is-on { opacity: 1; transform: translateX(3px); }
.proc-tick.is-on .n { color: var(--color-red); }

.proc-chapters { display: flex; flex-direction: column; }
.proc-chapter { position: relative; padding: 46px 0 46px 0; border-top: 1px solid var(--color-dark-1); }
.proc-chapter:first-child { border-top: 0; padding-top: 6px; }
.proc-num { display: block; font-family: var(--font-mono); font-weight: 800; font-size: clamp(44px,6vw,84px); line-height: 1; letter-spacing: -.04em; color: var(--color-dark-1); transition: color .4s ease; }
.proc-chapter h3 { margin: 14px 0 12px; font-size: clamp(21px,2.5vw,32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }
.proc-chapter p { font-size: var(--fs-body-2); line-height: 1.7; color: var(--color-gray-2); max-width: 58ch; }
.proc-bar { display: block; width: 0; height: 3px; margin-top: 26px; background: var(--color-red); transition: width .7s cubic-bezier(.16,.84,.44,1); }
.proc-chapter.is-active .proc-num { color: var(--color-red); }
.proc-chapter.is-active .proc-bar { width: 84px; }

/* ============ Что входит: плитки возможностей вместо маркированного списка ============ */
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.cap { padding: 28px 26px 26px; border-radius: 14px; background: #F7F5F5; border: 1px solid rgba(200,53,64,.16); transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease; }
.cap:hover { transform: translateY(-4px); border-color: var(--color-red); box-shadow: 0 22px 46px rgba(16,16,16,.14); }
.cap-i { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--color-offwhite); color: var(--color-dark); margin-bottom: 18px; }
.cap-i .i { width: 23px; height: 23px; }
.cap:hover .cap-i { background: var(--color-red); }
.cap h3 { font-size: var(--fs-body); font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.cap p { font-size: var(--fs-body-3); line-height: 1.55; color: var(--color-gray-2); }

/* ============ Кому подходит: диагностика «симптом → что делаем» ============
   Список пунктов ничего не сообщал. Пара «ситуация клиента → наш первый шаг»
   помогает узнать себя и сразу видеть ответ — это информация, а не перечисление. */
.fit-h2 { margin-top: 78px; }
.fit-lede { margin: -14px 0 28px; font-size: var(--fs-body-2); color: var(--color-gray-1); }
.fit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fit { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 24px 26px; border-radius: 14px; background: var(--color-offwhite); color: var(--color-dark); }
.fit-s { font-size: var(--fs-body-2); font-weight: 700; line-height: 1.45; color: var(--color-dark); }
.fit-arrow { font-family: var(--font-mono); font-size: 19px; color: var(--color-red); transform: translateX(0); transition: transform .35s cubic-bezier(.16,.84,.44,1); }
.fit:hover .fit-arrow { transform: translateX(5px); }
.fit-a { font-size: var(--fs-body-3); line-height: 1.5; color: rgba(238,238,238,.66); }

@media (max-width: 1000px) { .cap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .proc { grid-template-columns: 1fr; gap: 0; }
  .proc-rail { display: none; }
}
@media (max-width: 760px) {
  .cap-grid, .fit-list { grid-template-columns: 1fr; }
  .fit { grid-template-columns: 1fr; gap: 10px; }
  .fit-arrow { transform: rotate(90deg); justify-self: start; }
  .fit:hover .fit-arrow { transform: rotate(90deg) translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .proc-line-fill, .proc-bar, .cap, .fit-arrow { transition: none; }
}

/* Глава этапа — длинный текст, поэтому приглушение мягче, чем у коротких тезисов.
   Без JS (нет класса .js) показываем всё в полную силу: подсветка — усиление,
   а не условие читаемости. */
.proc-chapter:not(.is-active) { opacity: .74; }
html:not(.js) .proc-chapter,
html:not(.js) .proc-tick { opacity: 1; }
html:not(.js) .proc-line-fill { height: 100%; }

/* ============ Цвет и жизнь в «Что входит» и «Кому подходит» ============
   Было: шесть одинаковых светлых плиток и четыре одинаковые тёмные карточки —
   ровное полотно без акцентов. Добавляем цвет внутри элементов: тёплая подложка,
   красные иконки и двухтоновая карточка вместо сплошной заливки. */

/* Плитки: тёплое свечение в углу + красная иконка вместо тёмной плашки */
.cap {
  background:
    radial-gradient(78% 72% at 100% 0%, rgba(200,53,64,.13), transparent 62%),
    linear-gradient(160deg, #FBF7F7 0%, #F4F0F0 100%);
}
.cap-i { background: rgba(200,53,64,.12); color: var(--color-red); transition: background .3s ease, color .3s ease, transform .3s ease; }
.cap:hover .cap-i { background: var(--color-red); color: #EEEEEE; transform: scale(1.06); }
/* красная кромка снизу «прорастает» — тот же приём, что у карточек направлений */
.cap { position: relative; overflow: hidden; }
.cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-red); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.16,.84,.44,1); }
.cap:hover::after { transform: scaleX(1); }

/* Диагностика: карточка стала двухтоновой — светлая с тёмной панелью ответа.
   Так видно, где вопрос клиента, а где наш ответ, и блок перестаёт быть плитой. */
.fit {
  background:
    radial-gradient(64% 86% at 0% 0%, rgba(200,53,64,.11), transparent 62%),
    linear-gradient(160deg, #FBF7F7 0%, #F3EFEF 100%);
  border: 1px solid rgba(200,53,64,.18);
  color: var(--color-offwhite);
  align-items: stretch;
  padding: 20px;
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease;
}
.fit:hover { transform: translateY(-3px); border-color: var(--color-red); box-shadow: 0 20px 44px rgba(16,16,16,.14); }
.fit-s { display: flex; align-items: center; color: var(--color-offwhite); font-weight: 700; }
.fit-arrow { align-self: center; font-size: 21px; }
/* ответ — тёмная панель внутри светлой карточки */
.fit-a {
  display: flex; align-items: center;
  background: var(--color-offwhite); color: rgba(238,238,238,.82);
  border-left: 3px solid var(--color-red);
  border-radius: 10px; padding: 16px 18px;
  font-size: var(--fs-body-3); line-height: 1.5;
}

/* полоса блока «Что входит / Кому подходит» — своё тёплое свечение,
   раньше секция была единственной без цвета в этом ритме */
#vhodit {
  background:
    radial-gradient(52% 40% at 96% 6%, rgba(200,53,64,.10), transparent 62%),
    radial-gradient(46% 36% at 2% 92%, rgba(200,53,64,.08), transparent 62%),
    linear-gradient(180deg, var(--color-dark) 0%, #F1ECEC 50%, var(--color-dark) 100%);
}

@media (max-width: 760px) {
  .fit-a { border-left: 0; border-top: 3px solid var(--color-red); }
}

/* ============ Зелёный как статус, паттерн как текстура, снегирь как акцент ============
   Зелёный здесь не украшение: в шкале этапов он означает «пройдено», красный —
   «вы здесь». Это единственное честное применение второго цвета по фирстилю,
   где он не спорит с красным, а делит с ним смысл. */
.proc-tick.is-done { opacity: .85; }
.proc-tick.is-done .n { color: var(--color-green); }
.proc-tick.is-done .t { color: var(--color-gray-2); }
/* галочка у пройденного этапа — статус читается без цвета тоже */
.proc-tick.is-done .n::after { content: " ✓"; font-size: .9em; }
.proc-line-fill { background: linear-gradient(180deg, var(--color-green) 0%, var(--color-green) 62%, var(--color-red) 100%); }
.proc-chapter.is-done .proc-num { color: rgba(0,180,15,.42); }
.proc-chapter.is-done .proc-bar { width: 84px; background: var(--color-green); }

/* Фирменный паттерн вернулся на страницу услуги — но как тихая текстура блока,
   а не как фон под всем экраном: даёт материальность там, где были плоские заливки. */
#vhodit { position: relative; overflow: hidden; }
#vhodit > .container { position: relative; z-index: 1; }
.vhodit-pattern {
  position: absolute; right: -6%; top: -8%; width: 46%; height: 116%;
  background-size: 300px; opacity: .16; filter: grayscale(1) brightness(1.7); z-index: 0;
}

/* CTA со снегирём — главный премиальный ассет сайта, до этого на услугах не работал */
.fit-cta {
  position: relative; overflow: hidden; margin-top: 26px;
  display: grid; grid-template-columns: minmax(200px,320px) minmax(0,1fr); align-items: center; gap: 44px;
  padding: 44px 52px; border-radius: 18px;
  background: linear-gradient(140deg, #141414 0%, #0d0d0d 100%);
  color: var(--color-dark);
}
.fit-cta-pattern {
  position: absolute; inset: 0; z-index: 0;
  background-size: 260px; opacity: .09; filter: grayscale(1) brightness(2.6);
  pointer-events: none;
}
.fit-cta-body { position: relative; z-index: 2; }
.fit-cta h3 { font-size: clamp(22px,2.6vw,34px); font-weight: 800; letter-spacing: -.02em; color: var(--color-dark); margin-bottom: 12px; }
.fit-cta p { font-size: var(--fs-body-2); line-height: 1.6; color: rgba(238,238,238,.66); max-width: 52ch; margin-bottom: 24px; }
.fit-cta-bird {
  position: relative; z-index: 1; justify-self: center; width: 100%; max-width: 300px; height: auto;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.5));
  animation: gang-bird-soft 7s ease-in-out infinite;
}

@media (max-width: 860px) {
  .fit-cta { grid-template-columns: 1fr; padding: 32px 26px; }
  .fit-cta-bird { justify-self: start; max-width: 190px; order: -1; }
  .vhodit-pattern { width: 70%; opacity: .1; }
}
@media (prefers-reduced-motion: reduce) { .fit-cta-bird { animation: none; } }

/* ===================== О НАС ===================== */
/* Фрейм «О нас.png» в реверсе: тёмный макет → светлая страница.
   Сквозной приём макета сохранён — по скроллу активная цифра зелёная. */

/* Ценности — двухколоночный список отказов */
.ab-values { position: relative; overflow: hidden; }
.ab-values > .container { position: relative; z-index: 1; }
.ab-val-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-val { padding: 26px 28px; border-radius: 14px; background: var(--color-offwhite); color: var(--color-dark); border-left: 3px solid var(--color-red); }
.ab-val h3 { font-size: var(--fs-body); font-weight: 800; line-height: 1.35; margin-bottom: 10px; color: var(--color-dark); }
.ab-val p { font-size: var(--fs-body-3); line-height: 1.6; color: rgba(238,238,238,.66); }

/* Команда */
.ab-team { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.ab-photo { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg,#F7F3F3,#EDE7E7); border: 1px solid rgba(200,53,64,.16); margin-bottom: 14px; }
.ab-photo-slot { font-size: var(--fs-body-3); color: var(--color-gray-1); text-align: center; padding: 0 14px; }
.ab-member h3 { font-size: var(--fs-body); font-weight: 800; line-height: 1.25; }
.ab-member p { margin-top: 5px; font-size: var(--fs-body-3); color: var(--color-gray-1); }

/* Квалификации */
.ab-quals-block { background: linear-gradient(180deg, var(--color-dark) 0%, #F1ECEC 50%, var(--color-dark) 100%); }
.ab-quals { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.ab-qual { padding: 26px 28px; border-radius: 14px; background: #F7F5F5; border: 1px solid rgba(200,53,64,.16); }
.ab-qual h3 { font-size: var(--fs-body); font-weight: 800; }
.ab-qual .role { margin-top: 4px; font-size: var(--fs-body-3); color: var(--color-gray-1); }
.ab-qual .course { margin-top: 12px; font-size: var(--fs-body-2); font-weight: 700; color: var(--color-offwhite); }
.ab-cert { display: flex; align-items: center; justify-content: center; margin-top: 16px; aspect-ratio: 16/10; border-radius: 10px; background: var(--color-offwhite); }
.ab-cert-slot { font-size: var(--fs-body-3); color: rgba(238,238,238,.5); text-align: center; padding: 0 16px; }

/* Карьера */
.ab-career-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 24px 56px; align-items: end; margin-bottom: 32px; }
.ab-career-head .svc-h2 { margin-bottom: 0; }
.ab-career-head p { font-size: var(--fs-body-2); line-height: 1.65; color: var(--color-gray-2); max-width: 58ch; }
.ab-career { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ab-shot-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; border-radius: 14px; background: linear-gradient(160deg,#F7F3F3,#EBE5E5); border: 1px solid rgba(200,53,64,.16); }
.ab-shot-slot { font-size: var(--fs-body-3); color: var(--color-gray-1); text-align: center; padding: 0 14px; }
.ab-shot figcaption { margin-top: 12px; font-size: var(--fs-body-2); font-weight: 700; line-height: 1.3; }
.ab-career-cta { margin-top: 30px; }
.ab-works { margin-bottom: 4px; }

@media (max-width: 1000px) {
  .ab-team, .ab-career { grid-template-columns: 1fr 1fr; }
  .ab-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ab-val-list, .ab-quals, .ab-career-head { grid-template-columns: 1fr; }
  .ab-team, .ab-career, .ab-stats { grid-template-columns: 1fr 1fr; }
  .ab-career-head { align-items: start; }
}



/* ============ «О нас»: первый экран (ТЗ 2026-07-19) ============
   Закреплённый светлый экран. Слева логотип, справа по скроллу сменяются кадры:
   сначала вводный текст, затем четыре тезиса с цифрами. Активная цифра зелёная.
   Индикатор хода — только вертикальная линия между колонками, точек нет. */
.ab-stage { position: relative; height: 520vh; background: var(--color-dark); color: var(--color-offwhite); }
.ab-stage-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 92px 0 40px; }
/* навигация прижата к верху, а не участвует в вертикальном центрировании */
.ab-stage-nav { position: absolute; top: clamp(96px,12vh,132px); left: 0; right: 0; z-index: 2; }
.ab-stage-nav .breadcrumbs { margin: 0; }

/* фон: фирменный паттерн крупным пятном справа + тёплое свечение снизу слева.
   Экран был почти пустым — это даёт глубину, не отвлекая от кадров. */
.ab-stage-pattern {
  position: absolute; top: -12%; right: -8%; width: 62%; height: 124%; z-index: 0;
  background-size: 300px; opacity: .13; filter: grayscale(1) brightness(1.7);
  -webkit-mask-image: radial-gradient(70% 60% at 78% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(70% 60% at 78% 45%, #000 0%, transparent 72%);
}
.ab-stage-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 52% at 12% 88%, rgba(200,53,64,.16), transparent 66%),
    radial-gradient(46% 42% at 92% 8%, rgba(0,180,15,.07), transparent 64%);
}
.ab-stage-grid { position: relative; z-index: 1; }
.ab-stage-grid { display: grid; grid-template-columns: minmax(0,.72fr) 1px minmax(0,1fr); gap: clamp(22px,4vw,64px); align-items: center; }

/* логотип: снегирь + название под ним, статичен */
.ab-brand { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px,1.4vh,18px); }
.ab-brand img { display: block; width: 100%; max-width: clamp(190px,26vw,420px); height: auto; }
.ab-brand-word { font-weight: 800; font-size: clamp(34px,4.6vw,76px); line-height: .9; letter-spacing: -.045em; color: var(--color-offwhite); user-select: none; }

/* линия-прогресс между колонками */
.ab-rail { position: relative; align-self: stretch; width: 1px; min-height: clamp(180px,32vh,340px); background: var(--color-dark-1); }
.ab-rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--color-green); transition: height .45s cubic-bezier(.16,.84,.44,1); }

/* кадры лежат друг на друге и сменяются в одной точке */
/* кадры лежат в одной ячейке грида: контейнер сам берёт высоту самого высокого кадра,
   поэтому длинный вводный текст больше не вылезает на хлебные крошки */
.ab-frames { display: grid; align-items: center; min-height: clamp(200px,34vh,320px); }
.ab-frame { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
/* специфичность выше глобального [data-step]:not(.is-active) — иначе кадры наложатся */
.ab-frames .ab-frame { opacity: 0; transform: translateY(26px); transition: opacity .5s cubic-bezier(.16,.84,.44,1), transform .5s cubic-bezier(.16,.84,.44,1); }
.ab-frames .ab-frame.is-active { opacity: 1; transform: none; }

/* кадр 0 — заголовок и вводный абзац */
.ab-frame h1 { font-size: clamp(26px,3.2vw,46px); line-height: 1.1; letter-spacing: -.03em; max-width: 19ch; margin: 0; }
.ab-lede { margin-top: clamp(14px,2vh,22px); font-size: clamp(15px,1.25vw,18px); line-height: 1.65; color: var(--color-gray-2); max-width: 52ch; }

/* кадры с тезисами: цифра — тот же жирный гротеск, что и подпись (как во фрейме) */
.ab-v { display: block; font-weight: 800; font-size: clamp(58px,9vw,150px); line-height: .86; letter-spacing: -.05em; color: var(--color-green); }
.ab-l { display: block; margin-top: clamp(6px,1.2vh,14px); font-weight: 800; font-size: clamp(20px,2.6vw,44px); line-height: 1.06; letter-spacing: -.02em; }
.ab-d { margin-top: clamp(12px,1.8vh,20px); font-size: clamp(13px,1.1vw,16px); line-height: 1.6; color: var(--color-gray-2); max-width: 44ch; }

/* текстовый источник тезисов для поиска */
.ab-seo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* без JS показываем первый кадр целиком, а не пустой экран */
html:not(.js) .ab-frames .ab-frame { opacity: 0; }
html:not(.js) .ab-frames .ab-frame.is-active { opacity: 1; }

@media (max-width: 900px) {
  .ab-stage { height: 460vh; }
  .ab-stage-grid { grid-template-columns: 1fr; gap: 20px; }
  .ab-rail { display: none; }
  .ab-brand { flex-direction: row; align-items: center; gap: 16px; }
  .ab-brand img { max-width: 108px; }
  .ab-frames { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-frames .ab-frame, .ab-rail-fill { transition: none; }
}

/* H4 названия курса и H3 подписи к фото офиса — уровни заданы структурой раздела,
   визуально остаются подписями, а не «ещё одними заголовками» */
.ab-qual h4.course { margin-top: 12px; font-size: var(--fs-body-2); font-weight: 700; color: var(--color-offwhite); }
.ab-qual .course-note { margin-top: 6px; font-size: var(--fs-body-3); line-height: 1.5; color: var(--color-gray-1); }
.ab-shot figcaption h3 { margin: 0; font-size: var(--fs-body-2); font-weight: 700; line-height: 1.3; }

/* ===================== КОНТАКТЫ ===================== */
/* Фрейм «Контакты.png» в реверсе: тёмный макет → светлая страница. */

.kt-hero h1 { font-size: clamp(40px,7vw,96px); line-height: 1; letter-spacing: -.04em; }
/* строка под заголовком: город — текст — кнопка */
.kt-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px 34px; margin-top: clamp(18px,2.6vw,30px); }
.kt-city { font-size: clamp(22px,2.6vw,34px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.kt-lede { font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); max-width: 52ch; margin: 0; }
.kt-cta { justify-self: end; white-space: nowrap; }

.kt-block { background: var(--color-dark); color: var(--color-offwhite); padding: 40px 48px 90px; }
.kt-block .container { max-width: 1120px; }

/* карта во всю ширину со скруглением */
.kt-map { height: clamp(240px,34vw,420px); border-radius: 16px; margin-bottom: 22px; }

/* четыре плитки в ряд: метка сверху, значение снизу справа */
.kt-tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.kt-tiles .contact-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  min-height: 132px; padding: 20px 22px; border-radius: 14px;
  background: #F7F5F5; border: 1px solid rgba(200,53,64,.16);
}
.kt-tiles .contact-tile .k { font-size: var(--fs-body-2); font-weight: 800; letter-spacing: -.01em; color: var(--color-offwhite); }
.kt-tiles .contact-tile .v { font-size: var(--fs-body-3); line-height: 1.5; color: var(--color-gray-2); text-align: right; }
.kt-tiles .contact-tile .v a { color: var(--color-offwhite); border-bottom: 1px solid var(--color-dark-2); }
.kt-tiles .contact-tile .v a:hover { color: var(--color-red); border-color: var(--color-red); }

/* карточка формы обратного звонка */
.kt-form-card { margin-top: 26px; padding: clamp(26px,3.4vw,44px); border-radius: 16px; background: #F7F5F5; border: 1px solid var(--color-dark-1); }
.kt-form-card h2 { font-size: clamp(22px,2.8vw,36px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.kt-form-lede { font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); max-width: 56ch; margin-bottom: 24px; }
.kt-form { margin-top: 0; max-width: 720px; }
.kt-form label { color: var(--color-gray-2); }
.kt-form label a { color: var(--color-offwhite); border-bottom-color: var(--color-dark-2); }

@media (max-width: 1000px) { .kt-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .kt-block { padding-left: 20px; padding-right: 20px; }
  .kt-head { grid-template-columns: 1fr; }
  .kt-cta { justify-self: start; }
  .kt-tiles { grid-template-columns: 1fr; }
  .kt-form { grid-template-columns: 1fr; }
}

/* ===================== ЮРИДИЧЕСКИЕ СТРАНИЦЫ ===================== */
/* Служебные документы: приоритет — читаемость длинного текста, не эффектность. */

.lg-hero h1 { font-size: clamp(28px,3.6vw,52px); line-height: 1.12; letter-spacing: -.025em; max-width: 24ch; }
.lg-hero .page-hero-intro { font-size: var(--fs-body-2); line-height: 1.7; color: var(--color-gray-2); max-width: 72ch; }
.lg-date { margin-top: 18px; font-size: var(--fs-body-3); letter-spacing: .1em; text-transform: uppercase; color: var(--color-gray-1); }

.lg-body { background: var(--color-dark); color: var(--color-offwhite); padding: 56px 48px 90px; }
.lg-inner { max-width: 820px; }

/* содержание документа */
.lg-toc { padding: 24px 26px; border-radius: 14px; background: #F7F5F5; border: 1px solid var(--color-dark-1); margin-bottom: 48px; }
.lg-toc h2 { font-size: var(--fs-body); font-weight: 800; margin-bottom: 14px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg-toc a { font-size: var(--fs-body-2); line-height: 1.45; color: var(--color-gray-2); border-bottom: 1px solid transparent; }
.lg-toc a:hover { color: var(--color-red); border-bottom-color: var(--color-red); }

/* разделы и пункты с ручной нумерацией — сквозная, как в договоре */
.lg-section { margin-bottom: 40px; scroll-margin-top: 100px; }
.lg-section h2 { display: flex; gap: 12px; font-size: clamp(19px,2.1vw,26px); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; margin-bottom: 16px; }
.lg-num { color: var(--color-red); flex-shrink: 0; }
.lg-list { list-style: none; margin: 0; padding: 0; }
.lg-list li { display: flex; gap: 12px; font-size: var(--fs-body-2); line-height: 1.72; color: var(--color-gray-2); margin-bottom: 12px; }
.lg-cl { flex-shrink: 0; min-width: 42px; font-family: var(--font-mono); font-size: .92em; color: var(--color-gray-1); }

/* места, которые обязан закрыть юрист или клиент — видно и в вёрстке */
.lg-note { margin-top: 14px; padding: 14px 18px; border-left: 3px solid var(--color-red); background: rgba(200,53,64,.07); border-radius: 0 10px 10px 0; font-size: var(--fs-body-3); line-height: 1.6; color: var(--color-gray-2); }
.lg-note strong { color: var(--color-red); }

/* реквизиты */
.lg-req { margin-top: 56px; padding: 28px 30px; border-radius: 14px; background: var(--color-offwhite); color: var(--color-dark); }
.lg-req h2 { font-size: clamp(19px,2.1vw,26px); font-weight: 800; margin-bottom: 18px; color: var(--color-dark); }
.lg-req dl { margin: 0; display: grid; gap: 10px; }
.lg-req dl > div { display: grid; grid-template-columns: minmax(140px,210px) 1fr; gap: 8px 20px; }
.lg-req dt { font-size: var(--fs-body-3); color: rgba(238,238,238,.55); }
.lg-req dd { margin: 0; font-size: var(--fs-body-2); line-height: 1.5; color: var(--color-dark); }
.lg-req a { color: var(--color-dark); border-bottom: 1px solid rgba(238,238,238,.35); }
.lg-req a:hover { color: var(--color-green); border-color: var(--color-green); }

@media (max-width: 760px) {
  .lg-body { padding-left: 20px; padding-right: 20px; }
  .lg-list li { flex-direction: column; gap: 2px; }
  .lg-cl { min-width: 0; }
  .lg-req dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ===================== ПРИГЛАСИТЬ В ТЕНДЕР ===================== */
/* Страница для снабженцев: приоритет — читаемость данных, а не эффектность. */

.td-hero h1 { font-size: clamp(30px,4vw,58px); line-height: 1.06; letter-spacing: -.03em; max-width: 18ch; }
.td-hero .page-hero-intro { font-size: var(--fs-body-2); line-height: 1.68; color: var(--color-gray-2); max-width: 68ch; }
.td-top { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 24px; margin-top: 40px; }

/* реквизиты */
.td-req { padding: 30px 32px; border-radius: 16px; background: #F7F5F5; border: 1px solid var(--color-dark-1); }
.td-req h2 { font-size: clamp(19px,2.1vw,26px); font-weight: 800; margin-bottom: 18px; }
.td-req dl { margin: 0; display: grid; gap: 9px; }
.td-row { display: grid; grid-template-columns: minmax(150px,220px) 1fr; gap: 6px 20px; }
.td-row dt { font-size: var(--fs-body-3); color: var(--color-gray-1); }
.td-row dd { margin: 0; font-size: var(--fs-body-2); line-height: 1.45; }
.td-req-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.td-copied { margin-top: 10px; font-size: var(--fs-body-3); color: var(--color-green); min-height: 1.2em; }

/* контакт */
.td-contact { padding: 30px 32px; border-radius: 16px; background: var(--color-offwhite); color: var(--color-dark); align-self: start; }
.td-contact h2 { font-size: clamp(18px,2vw,23px); font-weight: 800; color: var(--color-dark); margin-bottom: 10px; }
.td-contact-note { font-size: var(--fs-body-3); line-height: 1.55; color: rgba(238,238,238,.62); margin-bottom: 20px; }
.td-mail, .td-phone { display: block; font-weight: 700; color: var(--color-dark); border-bottom: 1px solid rgba(238,238,238,.3); }
.td-mail { font-size: clamp(16px,1.6vw,21px); margin-bottom: 12px; word-break: break-all; }
.td-phone { font-size: var(--fs-body); }
.td-mail:hover, .td-phone:hover { color: var(--color-green); border-color: var(--color-green); }

.td-facts { background: linear-gradient(180deg, var(--color-dark) 0%, #F2EDED 46%, var(--color-dark) 100%); }

/* форма */
.td-form-inner { max-width: 860px; }
.td-form-lede { margin: -12px 0 28px; font-size: var(--fs-body-2); line-height: 1.6; color: var(--color-gray-2); }
.td-form-lede a { color: var(--color-red); border-bottom: 1px solid var(--color-red); }
.td-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.td-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.td-field > span { font-size: var(--fs-body-3); font-weight: 700; }
.td-field i { color: var(--color-red); font-style: normal; margin-left: 3px; }
.td-field input, .td-field textarea {
  font: inherit; font-size: var(--fs-body-2); color: var(--color-offwhite);
  background: #FBF9F9; border: 1px solid var(--color-dark-1); border-radius: 10px;
  padding: 13px 15px; transition: border-color .2s ease;
}
.td-field input:focus, .td-field textarea:focus { outline: none; border-color: var(--color-red); }
.td-field small { font-size: var(--fs-body-3); line-height: 1.5; color: var(--color-gray-1); }
.td-field input[type="file"] { padding: 11px 13px; cursor: pointer; }
/* поле с ошибкой: цвет дублируется текстом — на цвет полагаться нельзя */
.td-field.is-error input, .td-field.is-error textarea { border-color: var(--color-red); background: rgba(200,53,64,.05); }
.td-error { font-size: var(--fs-body-3); color: var(--color-red); }
.td-consent { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 22px; font-size: var(--fs-body-3); line-height: 1.55; color: var(--color-gray-2); }
.td-consent input { margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--color-red); }
.td-consent a { color: var(--color-red); border-bottom: 1px solid var(--color-red); }
.td-consent.is-error { color: var(--color-red); }
/* ловушка для ботов: убрана из потока и от скринридеров, но не display:none —
   часть ботов пропускает поля, скрытые именно так */
.td-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.td-status { margin-top: 14px; font-size: var(--fs-body-2); line-height: 1.55; min-height: 1.4em; }
.td-status.is-ok { color: var(--color-green); }
.td-status.is-fail { color: var(--color-red); }
[data-td-submit][disabled] { opacity: .6; cursor: progress; }

@media (max-width: 900px) {
  .td-top { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .td-grid { grid-template-columns: 1fr; }
  .td-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Печать: снабженец сохраняет реквизиты в PDF средствами браузера */
@media print {
  .site-header, .site-footer, .cookie-banner, .final-cta,
  .td-contact, .td-facts, .td-cases, .td-form-block, .case-faq,
  .breadcrumbs, .page-eyebrow, .page-rule, .td-req-actions, .td-copied { display: none !important; }
  .td-hero, .td-req { background: none !important; border: 0 !important; padding: 0 !important; }
  .td-top { display: block !important; }
  body { background: #fff !important; color: #000 !important; }
  .td-row { grid-template-columns: 220px 1fr !important; }
  a { text-decoration: none !important; color: #000 !important; }
}

/* Заголовок только для структуры документа: визуально сетка кейсов в нём
   не нуждается, но без него уровень прыгает с H1 сразу на H3. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==================== СЛОТЫ ИЗОБРАЖЕНИЙ ==================== */
/* Обёртка вокруг каждого места под картинку. Видна посетителям, поэтому
   стили основные, а не из admin.css — там только подсветка режима правки.
   Обёртка растягивается на родителя, чтобы заглушка и загруженная картинка
   занимали одну и ту же область и замена не двигала вёрстку. */
/* flex + центрирование — раньше это делали сами .ab-photo/.ab-cert/.ab-shot-media
   вокруг текстовой заглушки; теперь между ними и заглушкой стоит .media-slot,
   и без центрирования здесь текст уезжает в левый верхний угол. Для заполненного
   слота эффекта не видно: img ниже принудительно растянут на 100%×100%. */
.media-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Побочный эффект центрирования выше: .sub-slot (пунктирная плашка-заглушка в
   подблоках кейса, баннере раздела и обложке PDF — везде один и тот же класс,
   см. build.js) раньше был блочным ребёнком блочной обёртки и растягивался на
   всю ширину сам. Теперь это flex-элемент без роста (flex-grow:0 по умолчанию),
   и он сжимается до ширины текста заглушки — с ~580px до ~280px. Даём расти
   только .sub-slot, а не всем детям .media-slot: у SWOT-плашек, фото команды,
   сертификатов и фото офиса — свои классы с своим (не растянутым) видом, и это
   правило их не задевает. */
.media-slot > .sub-slot { flex: 1 1 auto; }
/* Строгий is-filled убран: реальный <img> из markdown (b.src !== 'slot' в
   renderArtFigure) тоже рендерится внутри .media-slot, но до сих пор не через
   MEDIA_MAP — слот остаётся is-empty, и растяжение до него не доходило. Картинка
   есть картинка независимо от происхождения. */
.media-slot > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==================== БЛОКИ НОВЫХ КЕЙСОВ ==================== */
/* Нынешние 27 кейсов свёрстаны штучно; здесь — общая вёрстка для кейсов,
   которые собирает менеджер из блоков. Отступы одинаковые у всех типов,
   чтобы страница не рассыпалась при любом порядке блоков. */
.cb { margin: 64px 0; }
.cb-text h2 { margin-bottom: 18px; }
.cb-text p { font-size: var(--fs-body-2); line-height: 1.7; color: var(--color-gray-2); max-width: 68ch; margin-bottom: 14px; }

.cb-steps-list { list-style: none; counter-reset: cbstep; display: grid; gap: 22px; }
.cb-steps-list li { counter-increment: cbstep; padding-left: 58px; position: relative; }
.cb-steps-list li::before {
  content: counter(cbstep); position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-red); border-radius: 50%;
  font-weight: 700; color: var(--color-red);
}
.cb-steps-list h3 { font-size: var(--fs-body); margin-bottom: 6px; }
.cb-steps-list p { color: var(--color-gray-2); line-height: 1.6; }

.cb-quote { border-left: 3px solid var(--color-red); padding: 6px 0 6px 26px; }
.cb-quote p { font-size: var(--fs-body); line-height: 1.6; margin-bottom: 12px; }
.cb-quote footer { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-body-3); }
.cb-quote-author { font-weight: 700; }
.cb-quote-role { color: var(--color-gray-1); }

.cb-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.cb-metric { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--color-gray-2); border-radius: 14px; }
.cb-metric-value { font-size: var(--fs-h2); font-weight: 800; line-height: 1; }
.cb-metric-label { font-weight: 700; }
.cb-metric-note { font-size: var(--fs-body-3); color: var(--color-gray-1); }

.cb-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.cb-gallery-item figcaption, .cb-image figcaption { margin-top: 10px; font-size: var(--fs-body-3); color: var(--color-gray-1); }

@media (max-width: 640px) {
  .cb { margin: 44px 0; }
  .cb-steps-list li { padding-left: 48px; }
}