/* ═══════════════════════════════════════════════════════════
   MODXdevpro — главная страница
   Светлый сайт (шапка — белое стекло) + тёмный hero-слайдер
   с фото во весь слайд.
   Палитра:
   — основной акцент  #1ABC9C  (шкала --teal-*, база = 500)
   — графит           #2C3434  (шкала --ink-*, база = 800) —
     снят с оригинального логотипа, текст «MODX»
   Шрифты — как на текущем сайте modxdevpro.ru (@font-face в
   assets/css/fonts.css): Play 400/700 (заголовки) +
   Roboto 300–700 (текст).
   Логотип: assets/img/logo.png (оригинал, прозрачный фон).
   Для тёмных секций (футер, CTA) — assets/img/logo-white.png
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Бирюзовая шкала — база #1ABC9C (основной акцент) */
  --teal-50:  #E9FBF7;
  --teal-100: #D2F5EC;
  --teal-200: #A7EBDB;
  --teal-300: #72DCC6;
  --teal-400: #40CDB0;
  --teal-500: #1ABC9C;
  --teal-600: #15A286;
  --teal-700: #118871;
  --teal-800: #0F6E5D;
  --teal-900: #0D594B;

  /* Графитовая шкала — база #2C3434 (из логотипа) */
  --ink-100: #E6EAE9;
  --ink-200: #C8D0CF;
  --ink-300: #9DA8A7;
  --ink-400: #717D7C;
  --ink-500: #525E5D;
  --ink-600: #414B4A;
  --ink-700: #353D3C;
  --ink-800: #2C3434;
  --ink-900: #242A29;
  --ink-950: #1B2020;

  /* Поверхности и текст */
  --paper: #F7FBFA;
  --white: #FFFFFF;
  --text-main: #242A29;
  --text-muted: #525E5D;
  --fq-line: #E3ECE8;    /* тонкая линия-разделитель (глобальный токен) */

  /* Эффекты (свечение — акцент #1ABC9C) */
  --shadow-cta: 0 10px 26px -10px rgba(26, 188, 156, .55);
  --shadow-cta-hover: 0 14px 32px -10px rgba(26, 188, 156, .65);
  --shadow-header: 0 12px 32px -20px rgba(27, 32, 32, .25);

  /* Сетка и типографика */
  --container: 1200px;
  --header-h: 72px;
  --radius: 16px;        /* карточки, крупные поверхности */
  --radius-btn: 10px;    /* кнопки — спокойное скругление */
  --font-body: 'Roboto', Arial, system-ui, sans-serif;
  --font-display: 'Play', 'Roboto', sans-serif;
}

/* ── Сброс и база ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-main);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; }

button { font: inherit; border: 0; background: none; cursor: pointer; padding: 0; }

::selection { background: var(--teal-500); color: #fff; }

:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .container { padding-inline: 32px; }
}

/* ── Кнопки ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s;
}

.btn--primary {
  background: var(--teal-500);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
  background: var(--teal-600);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0); }

/* Ghost-кнопка для светлого фона */
.btn--ghost {
  border: 1px solid var(--ink-200);
  color: var(--ink-800);
  background: var(--white);
}
.btn--ghost:hover {
  border-color: var(--teal-500);
  color: var(--teal-700);
  background: var(--teal-50);
}

/* Ghost-кнопка для тёмных секций */
.btn--ghost-light {
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .88);
  background: transparent;
}
.btn--ghost-light:hover {
  border-color: rgba(64, 205, 176, .6);
  color: var(--teal-300);
}

.btn--sm { padding: 11px 22px; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════
   ШАПКА — светлая
   Сплошной белый фон с самого старта (T93): полупрозрачное
   стекло на тёмном hero читалось как «серая» шапка. При
   скролле фон прежний — появляется тень (.is-scrolled).
   ═══════════════════════════════════════════════════════════ */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: #fff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(44, 52, 52, .05);
  transition: background-color .3s, box-shadow .3s;
}

/* Состояние «проскроллили» — фон прежний, появляется тень */
.header.is-scrolled {
  background: #fff;
  box-shadow: inset 0 -1px 0 rgba(44, 52, 52, .08), var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

/* ── Логотип (оригинальный файл) ──────────────────────────── */

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity .25s;
}
.logo:hover { opacity: .88; }

.logo__img {
  height: 40px;
  width: auto;
  transition: opacity .3s;
}

@media (max-width: 575px) {
  .logo__img { height: 34px; }
}

/* ── Десктопная навигация ─────────────────────────────────── */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-500);
  transition: color .25s, background-color .25s;
}

.nav__link:hover {
  color: var(--ink-900);
  background: rgba(44, 52, 52, .05);
}

/* Активный пункт — акцентное подчёркивание */
.nav__link.is-active { color: var(--ink-900); }

.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal-400), var(--teal-600));
}

/* ── Действия справа ──────────────────────────────────────── */

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__tg {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ink-200);
  color: var(--ink-500);
  transition: color .25s, border-color .25s, background-color .25s;
}
.header__tg svg { width: 18px; height: 18px; }
.header__tg:hover {
  color: var(--teal-600);
  border-color: rgba(26, 188, 156, .45);
  background: rgba(26, 188, 156, .07);
}

/* divuley: иконка МАКС крупнее — сам кружок (40px) не трогаем;
   модификатор стоит только на case-divuley, общие страницы с Telegram не задеты */
.header__tg--max svg { width: 22px; height: 22px; }

.header__cta { display: none; }

/* ── Бургер ───────────────────────────────────────────────── */

.burger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--ink-200);
  transition: border-color .25s, background-color .25s;
}
.burger:hover {
  border-color: rgba(26, 188, 156, .45);
  background: rgba(26, 188, 156, .06);
}

.burger__box {
  position: relative;
  width: 18px;
  height: 14px;
}

.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-800);
  transition: transform .3s, opacity .3s, top .3s, background-color .3s;
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 6px; }
.burger__line:nth-child(3) { top: 12px; }

/* Крестик при открытом меню */
.is-open .burger__line:nth-child(1) { top: 6px; transform: rotate(45deg); }
.is-open .burger__line:nth-child(2) { opacity: 0; }
.is-open .burger__line:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ── Мобильное меню — белое стекло ────────────────────────── */

.mobile-menu {
  display: block;
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(44, 52, 52, .08);
  transition: max-height .35s cubic-bezier(.22, 1, .36, 1);
}

.is-open .mobile-menu { max-height: 480px; }

.is-open.header { background: #fff; }

.mobile-menu__list {
  padding: 8px 20px 4px;
}

.mobile-menu__link {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius-btn);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-700);
  transition: background-color .25s, color .25s;
}
.mobile-menu__link:hover,
.mobile-menu__link.is-active {
  background: rgba(26, 188, 156, .1);
  color: var(--teal-700);
}

.mobile-menu__cta {
  margin: 12px 20px 24px;
  width: calc(100% - 40px);
}

/* divuley: кнопка «Написать в МАКС» под CTA (−12 сверху гасит 24 нижнего
   поля CTA через схлопывание → зазор 12px) */
.mobile-menu__max {
  margin: -12px 20px 24px;
  width: calc(100% - 40px);
  gap: 12px;
}
.mobile-menu__max svg { width: 20px; height: 20px; flex: none; }

/* ── Десктоп: бургер скрыт, показываем навигацию и CTA ───── */

@media (min-width: 992px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .header__tg { display: grid; }
  .burger { display: none; }
  .mobile-menu { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   HERO-СЛАЙДЕР — тёмный, фото во весь слайд
   Каждое фото — фон своего слайда (object-fit: cover), поверх —
   градиентная вуаль: плотнее слева (читабельность текста) и
   снизу (панель управления). Пока фото не загрузилось —
   графитовый градиент на .hero. Слайды в одной grid-ячее,
   панель управления — абсолютом поверх фото.
   ═══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h);
  overflow: hidden;
  background: linear-gradient(180deg, #212726 0%, var(--ink-950) 55%, #1E2423 100%);
}

/* Фокус на тёмном фоне — светлой бирюзой */
.hero :focus-visible { outline-color: var(--teal-300); }

/* ── Трек и слайды ────────────────────────────────────────── */

.slider {
  flex: 1;
  display: grid;
  align-items: stretch;
}

.slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
  pointer-events: none;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .6s ease, visibility 0s linear 0s;
}

/* ── Фото-фон и вуаль ─────────────────────────────────────── */

.slide__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.slide__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 7s cubic-bezier(.22, .61, .36, 1);
}

/* Лёгкий наезд камеры на активном слайде */
.slide.is-active .slide__bg img { transform: scale(1); }

/* Вуаль: слева плотнее — под текст (текстовая колонка широкая), снизу — под панель управления */
.slide__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(27, 32, 32, .5) 0%, rgba(27, 32, 32, .1) 26%, rgba(27, 32, 32, .14) 62%, rgba(27, 32, 32, .74) 100%),
    linear-gradient(92deg, rgba(24, 29, 29, .94) 0%, rgba(24, 29, 29, .84) 34%, rgba(24, 29, 29, .52) 66%, rgba(24, 29, 29, .2) 100%);
}

/* ── Контент слайда ───────────────────────────────────────── */

/* Нижний паддинг резервает место под панель управления */
.slide__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  padding-top: clamp(32px, 6vh, 64px);
  padding-bottom: clamp(130px, 16vh, 170px);
}

/* Каскадное появление контента активного слайда */
.slide__title, .slide__text, .slide__actions {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
}
.slide.is-active .slide__title   { opacity: 1; transform: none; transition-delay: .2s; }
.slide.is-active .slide__text    { opacity: 1; transform: none; transition-delay: .3s; }
.slide.is-active .slide__actions { opacity: 1; transform: none; transition-delay: .4s; }

.slide__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.16;
  color: #fff;
  text-wrap: balance;
}

/* Акцентное слово — бирюза, с градиентом где поддерживается */
.slide__title span { color: var(--teal-300); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .slide__title span {
    background: linear-gradient(92deg, var(--teal-300) 5%, var(--teal-500) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.slide__text {
  margin: 20px 0 0;
  max-width: 700px;
  font-size: clamp(16px, 1.3vw, 18px);
  color: rgba(255, 255, 255, .74);
}

.slide__actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Кнопка в hero — крупнее и выше базовой */
.slide__actions .btn {
  padding: 19px 38px;
  font-size: 16px;
}

/* ── Управление: табы-прогрессы + навигация ───────────────── */

/* Панель лежит поверх фото (absolute внизу hero) */
.slider__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(20px, 3.5vh, 36px);
}

.slider__tabs {
  display: flex;
  gap: 10px;
  flex: 1;
  max-width: 620px;
}

.stab {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 2px 6px;
  text-align: left;
  cursor: pointer;
}

.stab__label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .42);
  white-space: nowrap;
  transition: color .3s;
}

.stab__bar {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}

.stab__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--teal-400);
  transform: scaleX(0);
  transform-origin: left;
}

.stab:hover .stab__label { color: rgba(255, 255, 255, .72); }
.stab.is-active .stab__label { color: #fff; }
.stab:hover .stab__bar { background: rgba(255, 255, 255, .24); }

.slider__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider__count {
  margin-right: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
  white-space: nowrap;
}
.slider__count b { color: #fff; font-weight: 700; }
.slider__count i { font-style: normal; margin: 0 2px; }

.snav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s, transform .25s;
}
.snav svg { width: 18px; height: 18px; }
.snav:hover {
  border-color: rgba(64, 205, 176, .65);
  color: var(--teal-300);
  background: rgba(26, 188, 156, .12);
}
.snav:active { transform: scale(.94); }

/* Пауза/плей: иконки переключаются классом .is-paused */
.snav--pause .icon-play { display: none; }
.snav--pause.is-paused .icon-pause { display: none; }
.snav--pause.is-paused .icon-play { display: block; }

/* ═══════════════════════════════════════════════════════════
   Адаптив слайдера
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  /* На узких экранах вуаль плотнее и равномернее — текст читается поверх фото */
  .slide__scrim {
    background:
      linear-gradient(180deg, rgba(27, 32, 32, .66) 0%, rgba(27, 32, 32, .56) 40%, rgba(27, 32, 32, .88) 100%),
      linear-gradient(92deg, rgba(24, 29, 29, .62), rgba(24, 29, 29, .38));
  }
  .slide__content { max-width: 680px; }
  .slide__text { max-width: 680px; }
}

@media (max-width: 640px) {
  .stab__label { display: none; }
  .stab { gap: 7px; }
  .slider__controls { align-items: center; }
  .slide__actions .btn { width: 100%; padding-inline: 24px; }
}

/* ── Уважение к настройкам анимаций ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .slide__title, .slide__text, .slide__actions { transform: none; }
  .slide__bg img { transform: none; }
}

.section-stub {
  padding: 96px 0;
  background: var(--paper);
  border-top: 1px solid var(--ink-100);
}

.section-stub--alt { background: var(--white); }

.section-stub--dark {
  background: var(--ink-900);
  color: #fff;
  border-top: 0;
}

.section-stub h2 { font-size: clamp(24px, 3vw, 34px); }

.section-stub p { margin: 12px 0 0; color: var(--text-muted); }

.section-stub--dark p { color: rgba(255, 255, 255, .55); }

/* ═══════════════════════════════════════════════════════════
   УСЛУГИ (.sv) — bento-сетка
   Блок перенесён с текущего сайта modxdevpro.ru: структура,
   тексты карточек и иконки — 1:1. Отличия от донора:
   — зелёная палитра → бирюза логотипа (teal-700/800/900);
   — заголовок секции H2 (H1 страницы — в hero-слайдере);
   — в больших карточках добавлена ссылка «Обсудить задачу»,
     открывающая модалку с предвыбранным чипом услуги
     (data-mf-open + data-mf-chip, см. main.js);
   — reveal/spotlight только при наличии JS и (для spotlight)
     hover:fine; reduced-motion — всё видно без анимаций.
   ═══════════════════════════════════════════════════════════ */

.sv {
  /* палитра блока — бирюза логотипа + графит */
  --sv-green:    var(--teal-700);   /* #118871 */
  --sv-green-2:  var(--teal-800);   /* #0F6E5D */
  --sv-green-3:  var(--teal-900);   /* #0D594B */
  --sv-ink:      var(--text-main);  /* заголовки */
  --sv-mut:      var(--text-muted); /* подзаголовок секции */
  --sv-body:     var(--ink-600);    /* описания карточек */
  --sv-card:     #fff;
  --sv-line:     #DFE9E5;           /* рамка карточек */
  --sv-chip-line:#C7DAD3;           /* рамка чипов */
  --sv-soft:     #E9F6F1;           /* подложка иконки */
  --sv-tint:     #F3F9F6;           /* фон секции */
  --sv-r:        var(--radius);
  background: var(--sv-tint);
  padding: 96px 0 104px;
  font-family: var(--font-body);
  color: var(--sv-ink);
}

/* ── Шапка секции: заголовок слева, подзаголовок справа ───── */
.sv-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 52px;
}
.sv-overline {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sv-green-2);   /* 5.7:1 на тинте — AA */
}
.sv-overline::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--sv-green);
  border-radius: 2px;
}
.sv-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sv-ink);
}
.sv-sub {
  margin: 0;
  font-size: 16px; line-height: 1.65;
  color: var(--sv-mut);
}

/* ── Bento-сетка: 3 колонки, крупные карточки span 2 ────────
   grid-auto-flow: dense — карточки в DOM по номерам 01→06,
   большие уплотняются автоматически, дыр в адаптиве нет. */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  gap: 20px;
}
.sv-card {
  position: relative;
  overflow: hidden;
  background: var(--sv-card);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r);
  padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sv-card:hover {
  border-color: rgba(17, 136, 113, .4);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(17, 136, 113, .09);
}
.sv-card--big { grid-column: span 2; }

/* Spotlight за курсором (класс вешает разметка, vars — JS;
   только hover:fine, см. main.js) */
.sv-spot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(26, 188, 156, .09), transparent 65%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.sv-spot:hover::after { opacity: 1; }

/* ── Карточка: иконка + название + номер в одной строке ───── */
.sv-top {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 2px;
}
.sv-ico {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--sv-soft);
  display: flex; align-items: center; justify-content: center;
}
.sv-ico svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--sv-green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sv-name {
  margin: 0;
  flex: 1; min-width: 0;
  font-family: var(--font-display);
  font-size: 21px; line-height: 1.25; font-weight: 700;
  color: var(--sv-ink);
}
.sv-card--big .sv-name { font-size: 25px; }
.sv-num {
  flex: none; margin-left: auto;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  color: var(--sv-green);
  letter-spacing: .04em;
}
.sv-desc {
  margin: 0;
  font-size: 15px; line-height: 1.6;
  color: var(--sv-body);
  max-width: 46ch;
}
.sv-card--big .sv-desc { font-size: 15.5px; }

/* Чипы состава услуги — только в больших карточках */
.sv-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.sv-chip {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid var(--sv-chip-line);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--sv-green-2);
  white-space: nowrap;
}

/* CTA-ссылка большой карточки: открывает модалку с предвыбранным
   чипом услуги (data-mf-open + data-mf-chip) */
.sv-link {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 14.5px; font-weight: 700;
  color: var(--sv-green);
  cursor: pointer;
}
.sv-link svg {
  width: 16px; height: 16px;
  fill: currentColor;
  transition: transform .25s ease;
}
.sv-link:hover { color: var(--sv-green-2); }
.sv-link:hover svg { transform: translateX(4px); }
.sv-link:focus-visible { outline: 2px solid var(--sv-green); outline-offset: 3px; border-radius: 6px; }

/* Водяной знак-иконка в больших карточках (декор) */
.sv-mark {
  position: absolute;
  right: -26px; bottom: -34px;
  width: 170px; height: 170px;
  fill: none;
  stroke: rgba(17, 136, 113, .08);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ── CTA-карточка: цельная кнопка → модалка ────────────────── */
.sv-cta {
  margin: 0;
  padding: 32px;
  border: 0;
  border-radius: var(--sv-r);
  background: linear-gradient(135deg, var(--sv-green) 0%, var(--sv-green-2) 100%);
  color: #fff;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 34px rgba(17, 136, 113, .28);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.sv-cta:hover {
  background: linear-gradient(135deg, var(--sv-green-2) 0%, var(--sv-green-3) 100%);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(17, 136, 113, .4);
}
.sv-cta:focus-visible { outline: 3px solid var(--sv-green-3); outline-offset: 3px; }
.sv-cta-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; line-height: 1.3;
}
.sv-cta-desc {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .85);
}
.sv-cta-go {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700;
}
.sv-cta-go svg {
  width: 17px; height: 17px;
  fill: currentColor;
  transition: transform .25s ease;
}
.sv-cta:hover .sv-cta-go svg { transform: translateX(4px); }

/* ── Reveal: появление по скроллу (класс .sv-js вешает JS;
   без JS всё видимо; translate — чтобы не конфликтовать
   с hover-подъёмом на transform) ───────────────────────────── */
.sv-js .sv-card, .sv-js .sv-cta {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity .65s cubic-bezier(.22, .61, .36, 1),
    translate .65s cubic-bezier(.22, .61, .36, 1),
    border-color .25s ease, box-shadow .25s ease, background .25s ease;
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms;
}
.sv-js.sv-on .sv-card, .sv-js.sv-on .sv-cta {
  opacity: 1;
  translate: 0 0;
}

/* ── Адаптив ────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .sv { padding: 80px 0 88px; }
  .sv-head { grid-template-columns: 1fr; margin-bottom: 40px; }
  .sv-grid { grid-template-columns: repeat(2, 1fr); }
  .sv-cta { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .sv-cta-go { margin-top: 0; padding-top: 0; }
}
@media (max-width: 640px) {
  .sv { padding: 64px 0 72px; }
  .sv-grid { grid-template-columns: 1fr; gap: 16px; }
  .sv-card, .sv-cta { padding: 26px 22px; }
  .sv-card--big { grid-column: auto; }
  .sv-cta { grid-column: auto; flex-direction: column; align-items: stretch; }
  .sv-top { gap: 12px; }
  .sv-name, .sv-card--big .sv-name { font-size: 20px; }
  .sv-mark { width: 130px; height: 130px; right: -22px; bottom: -26px; }
}

/* ── Reduced motion: без reveal и ховер-эффектов ───────────── */
@media (prefers-reduced-motion: reduce) {
  .sv .sv-card, .sv .sv-cta { transition: none; }
  .sv .sv-card:hover, .sv .sv-cta:hover { transform: none; }
  .sv-spot::after { display: none; }
  .sv-js .sv-card, .sv-js .sv-cta { opacity: 1; translate: none; transition: none; }
  .sv-link svg, .sv-cta-go svg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ПОРТФОЛИО (.cs) — «Наши работы»
   Версия по референсу заказчика: сетка 3 колонки; первый кейс —
   широкий (span 2, 16:9), остальные — вертикальные 6:7.
   Под скриншотом — нумерованная мета «01 — КАТЕГОРИЯ», название,
   короткое описание, ссылка «Смотреть кейс →».
   Карточка кликабельна целиком (.cs-link + ::after-слой) и
   открывает модалку с чипом «Новый сайт». Логика reveal и
   фильтров — в main.js (.cs-js/.is-in, [data-cs-filter],
   [data-cs-count]).
   ═══════════════════════════════════════════════════════════ */

.cs {
  /* палитра блока — бирюза логотипа + графит */
  --cs-green:  var(--teal-700);
  --cs-line:   #E3ECE8;              /* тонкие разделители, рамки скриншотов */
  background: var(--white);
  padding: 104px 0 112px;
  font-family: var(--font-body);
  color: var(--text-main);
}

/* ── Шапка секции: заголовок слева, подзаголовок справа ───── */
.cs-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 36px;
}
.cs-overline {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal-800);
}
.cs-overline::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--cs-green);
  border-radius: 2px;
}
.cs-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-main);
}
.cs-sub {
  margin: 0;
  font-size: 16px; line-height: 1.65;
  color: var(--text-muted);
}

/* ── Фильтры: тихие текстовые табы над тонкой линией ──────── */
.cs-filters {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: 0 32px;
  border-bottom: 1px solid var(--cs-line);
  margin-bottom: 56px;
}
.cs-tab {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 0 2px 13px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none; cursor: pointer;
  font-family: inherit;
  font-size: 15px; font-weight: 500;
  color: var(--ink-500);
  transition: color .2s ease, border-color .2s ease;
}
.cs-tab:hover { color: var(--text-main); }
.cs-tab:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 4px;
  border-radius: 4px;
}
.cs-tab[aria-pressed="true"] {
  color: var(--cs-green);
  border-bottom-color: var(--cs-green);
  font-weight: 600;
}
.cs-tab-n {
  font-size: 12.5px; font-weight: 600; line-height: 1;
  color: currentColor; opacity: .45;
}
.cs-count {
  margin-left: auto;
  padding-bottom: 13px;
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ── Сетка: 3 колонки; первый кейс — широкий (span 2) ─────── */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 32px;
}
.cs-card {
  position: relative;
  display: flex; flex-direction: column;
}
.cs-card[hidden] { display: none !important; }
.cs-card--wide { grid-column: span 2; }

/* ── Скриншот: вертикальный 6:7, у широкого — 16:9 ────────── */
.cs-media {
  aspect-ratio: 6 / 7;
  overflow: hidden;
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  background: var(--paper);
}
.cs-card--wide .cs-media { aspect-ratio: 16 / 9; }
.cs-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.cs-card:hover .cs-media img,
.cs-card:focus-within .cs-media img { transform: scale(1.035); }

/* ── Контент: мета с номером, название, описание, ссылка ──── */
.cs-body { padding: 22px 4px 0; }
.cs-meta {
  display: flex; align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.cs-num {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em;
  color: var(--cs-green);
}
.cs-cat {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400);
}
.cs-cat::before {
  content: "";
  width: 20px; height: 1px;
  background: #D6E1DC;
}
.cs-name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.28;
  font-weight: 700;
  color: var(--text-main);
}
.cs-card--wide .cs-name { font-size: 22px; }
.cs-desc {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-500);
}
.cs-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  border: 0; border-radius: 0;
  background: none; cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 700; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cs-green);
  transition: color .2s ease;
}
.cs-link svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s ease;
}
.cs-card:hover .cs-link,
.cs-link:focus-visible { color: var(--teal-800); }
.cs-card:hover .cs-link svg { transform: translateX(4px); }

/* вся карточка кликабельна: кнопка static, слой ::after
   растягивается на .cs-card (position:relative) — stretched */
.cs-link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.cs-link:focus-visible { outline: none; }
.cs-card:has(.cs-link:focus-visible) .cs-media {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(26, 188, 156, .22);
}

/* ── Тег «Архив» на превью (portfolio): старые кейсы, чей сайт
   давно изменён или недоступен. Позиционирование — от .cs-media. */
.cs-media { position: relative; }
.cs-arch {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(27, 32, 32, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none;
}
.cs-arch::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
}

/* ── Лайтбокс архивных кейсов (portfolio) ─────────────────── */
html.pf-lb-lock { overflow: hidden; }
.pf-lb {
  position: fixed; inset: 0; z-index: 1100;   /* поверх модалки (1000) */
  display: flex; align-items: center; justify-content: center;
  padding: 56px 72px;
}
.pf-lb[hidden] { display: none; }
.pf-lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(27, 32, 32, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: pf-lb-fade .3s ease;
}
.pf-lb-figure {
  position: relative; z-index: 1;
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%;
  animation: pf-lb-pop .38s cubic-bezier(.22, 1, .36, 1);
}
.pf-lb-img {
  display: block;
  max-width: min(1040px, 100%);
  max-height: calc(100dvh - 200px);
  border-radius: 14px;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .6);
  background: #fff;
}
.pf-lb-cap {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 16px;
  color: rgba(255, 255, 255, .92);
}
.pf-lb-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
}
.pf-lb-count {
  font-size: 13px; letter-spacing: .06em;
  color: rgba(255, 255, 255, .55);
}
.pf-lb-btn {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(27, 32, 32, .55);
  color: #fff; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.pf-lb-btn:hover {
  background: var(--teal-600);
  border-color: var(--teal-500);
}
.pf-lb-btn svg { width: 20px; height: 20px; }
.pf-lb-btn[hidden] { display: none; }
.pf-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.pf-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.pf-lb-close { top: 16px; right: 16px; }
.pf-lb-prev:hover, .pf-lb-next:hover { transform: translateY(-50%) scale(1.06); }
@keyframes pf-lb-fade { from { opacity: 0; } }
@keyframes pf-lb-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (max-width: 640px) {
  .pf-lb { padding: 64px 12px 20px; }
  .pf-lb-img { max-height: calc(100dvh - 170px); border-radius: 10px; }
  .pf-lb-btn { width: 40px; height: 40px; }
  .pf-lb-btn svg { width: 18px; height: 18px; }
  .pf-lb-name { font-size: 15px; }
  .pf-lb-count { display: none; }
}

/* ── CTA-строка: разделитель + текст слева, кнопка справа ──── */
.cs-more {
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid var(--cs-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 40px;
}
.cs-more-text { max-width: 640px; }
.cs-more-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--text-main);
}
.cs-more-sub {
  margin: 8px 0 0;
  font-size: 15.5px;
  color: var(--text-muted);
}
.cs-more .btn { flex: 0 0 auto; }

/* ── Reveal и пере-стаггер фильтра (классы ставит main.js) ───
   Появление — через animation с delay --d: не мешает hover-
   transition карточки и переигрывается при смене фильтра. */
.cs-js .cs-card, .cs-js .cs-more { opacity: 0; }
.cs-js .cs-card.is-in, .cs-js .cs-more.is-in {
  opacity: 1;
  animation: cs-in .5s ease var(--d, 0ms) backwards;
}
@keyframes cs-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Адаптив ───────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .cs { padding: 80px 0 88px; }
  .cs-head { grid-template-columns: 1fr; margin-bottom: 28px; }
  .cs-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
  .cs-card--wide { grid-column: span 2; }
  .cs-card--wide .cs-media { aspect-ratio: 16 / 9; }
  .cs-count { display: none; }
}
@media (max-width: 640px) {
  .cs { padding: 64px 0 72px; }
  .cs-filters {
    flex-wrap: nowrap; gap: 0 24px;
    overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cs-filters::-webkit-scrollbar { display: none; }
  .cs-tab { flex: 0 0 auto; }
  .cs-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-card--wide { grid-column: auto; }
  .cs-card--wide .cs-media { aspect-ratio: 16 / 10; }
  .cs-media { aspect-ratio: 4 / 3; }
  .cs-name { font-size: 18px; }
  .cs-card--wide .cs-name { font-size: 19px; }
  .cs-more {
    margin-top: 48px; padding-top: 32px;
    flex-direction: column; align-items: flex-start;
  }
  .cs-more .btn { width: 100%; }
}

/* ── Reduced motion: всё видно, без zoom ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cs-js .cs-card, .cs-js .cs-more { opacity: 1; animation: none; }
  .cs-media, .cs-media img, .cs-link, .cs-link svg { transition: none; }
  .cs-card:hover .cs-media img { transform: none; }
}


/* ══════════════════════════════════════════════════════════
   СТРАНИЦА ПОРТФОЛИО (portfolio.html)
   Тёмный hero (.pf-top) — та же декоративная система, что
   у записи блога и CTA: ink-фон, teal-свечения, сетка.
   Сетка работ переиспользует компоненты .cs-* (карточки,
   фильтры, CTA-строка) — переменные --cs-* объявлены ниже.
   Reveal, фильтры и «Показать ещё» — portfolio.js
   (.cs-js/.is-in, data-pf-*); карточки второй порции —
   data-extra, в MODX заменяется ajax-пагинацией pdoPage.
   Без JS: все карточки видны, кнопка «Ещё» скрыта.
   ══════════════════════════════════════════════════════════ */
.pf {
  /* те же переменные, что у .cs — компоненты их переиспользуют */
  --cs-green: var(--teal-700);
  --cs-line:  #E3ECE8;
  background: var(--white);
  padding: 88px 0 112px;
}

/* — Тёмный hero «Витрина работ»: тот же премиум-язык, что у
   страниц услуг. Класс .im-hero--dark (в разметке) даёт
   flex-центрирование, высоту ровно в первый экран, ink-фон;
   атмосфера — общие .swa-* (авроры/сетка/зерно), каскад
   копи — .swa-rv. Слева — крошки, типографика, статы, кнопки;
   справа — .pf-wall: окна браузера с миниатюрами кейсов
   в перспективе, каждое парит в своём ритме. Микропараллакс
   за курсором — portfolio.js (pointer:fine). — */
.pf-top {
  position: relative;
  overflow: hidden;   /* авроры и витрина выходят за края сцены */
  color: #fff;
}
/* правая колонка шире — под витрину (перебивает базовую сетку
   .im-hero--dark за счёт специфичности .pf-top.im-hero--dark) */
.pf-top.im-hero--dark .im-hero-in {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
}

/* — Статы: короткая teal-линия + три числа — */
.pf-stats {
  position: relative;
  display: flex; flex-wrap: wrap;
  gap: 16px 56px;
  margin-top: 34px;
  padding-top: 22px;
}
.pf-stats::before {
  content: '';
  position: absolute; top: 0; left: 2px;
  width: 46px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal-400), rgba(26, 188, 156, 0));
}
.pf-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700; line-height: 1.1;
  color: #fff;
}
.pf-stat span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

/* — Витрина кейсов: три окна браузера в перспективе — */
.pf-wall {
  position: relative;
  min-width: 0;
  min-height: 520px;
  perspective: 1500px;
  animation: swa-rise .9s cubic-bezier(.22, .61, .24, 1) backwards .35s;
}
.pf-wall-glow {
  position: absolute;
  width: min(560px, 116%); height: min(560px, 116%);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .26), rgba(26, 188, 156, .08) 55%, transparent 74%);
  filter: blur(30px);
  animation: swa-halo 8s ease-in-out infinite alternate;
}
/* окно: стеклянная рамка + строка-хром + скриншот кейса;
   наклон/глубина (--ry/--rx/--tz) сохраняются в парении */
.pf-win {
  position: absolute;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    0 40px 90px -40px rgba(9, 20, 18, .65),
    0 26px 60px -34px rgba(26, 188, 156, .28);
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(var(--tz, 0px));
  animation: pf-win-float var(--dur, 9s) ease-in-out var(--del, 0s) infinite alternate;
}
@keyframes pf-win-float {
  from { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(var(--tz, 0px)) translateY(0); }
  to   { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(var(--tz, 0px)) translateY(-14px); }
}
.pf-win-bar {
  display: flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pf-win-bar i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .24);
}
.pf-win-bar i:nth-child(2) { opacity: .68; }
.pf-win-bar i:nth-child(3) { opacity: .4; }
.pf-win-url {
  flex: 1;
  height: 11px;
  margin-left: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
}
.pf-win img {
  display: block;
  width: 100%;
  aspect-ratio: 650 / 450;
  object-fit: cover;
}
/* teal-тинт + растворение в тёмном фоне */
.pf-win::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(205deg, rgba(26, 188, 156, .14), transparent 44%),
    linear-gradient(0deg, rgba(27, 32, 32, .5), transparent 48%);
}
.pf-win--main {
  --ry: -7deg; --rx: 5deg; --dur: 9s;
  left: 5%; right: 5%; top: 10%;
  z-index: 3;
}
.pf-win--main img { object-position: 50% 28%; }
.pf-win--back-l {
  --ry: 20deg; --rx: 3deg; --tz: -70px; --dur: 11.5s; --del: -4s;
  width: 55%; left: -7%; top: 2%;
  z-index: 1;
  opacity: .5;
}
.pf-win--back-l img { filter: saturate(.78) blur(1.5px); }
.pf-win--back-l::after {
  background:
    linear-gradient(205deg, rgba(26, 188, 156, .2), transparent 50%),
    linear-gradient(0deg, rgba(27, 32, 32, .72), transparent 55%);
}
.pf-win--back-r {
  --ry: -23deg; --rx: 4deg; --tz: -60px; --dur: 10s; --del: -7s;
  width: 58%; right: -6%; bottom: 4%;
  z-index: 2;
  opacity: .46;
}
.pf-win--back-r img { filter: saturate(.75) blur(2px); }
.pf-win--back-r::after {
  background:
    linear-gradient(205deg, rgba(26, 188, 156, .22), transparent 52%),
    linear-gradient(0deg, rgba(27, 32, 32, .74), transparent 58%);
}

/* — «Показать ещё»: по центру под сеткой; без JS не выводится — */
.pf:not(.cs-js) .pf-more { display: none; }
.pf-more {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 56px;
  text-align: center;
}
.pf-more-btn[hidden], .pf-done[hidden] { display: none; }
.pf-more-btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s ease;
}
.pf-more-btn:hover svg { transform: translateY(2px); }
.pf-done {
  margin: 0;
  font-size: 14px;
  color: var(--ink-500);
}

/* — Адаптив — */
@media (max-width: 1023px) {
  .pf { padding: 72px 0 88px; }
  /* витрина — только на десктопе (как правые визуалы service-страниц);
     сброс сетки с той же специфичностью, что и включающее правило
     (модификатор иначе перебивает медиа — урок Task 40) */
  .pf-top.im-hero--dark .im-hero-in { grid-template-columns: 1fr; }
  .pf-top .pf-wall { display: none; }
}
@media (max-width: 640px) {
  .pf-stats { gap: 14px 32px; margin-top: 24px; padding-top: 18px; }
  .pf-stat b { font-size: 21px; }
  .pf { padding: 56px 0 72px; }
  .pf-more { margin-top: 40px; }
  .pf-more .btn { width: 100%; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .pf-wall, .pf-win { animation: none; }
  .pf-more-btn svg { transition: none; }
}



/* ═══════════════════════════════════════════════════════════
   ПОЧЕМУ ИМЕННО МЫ (.wy) — светлый блок, 3 карточки
   Тексты донора 1:1; ghost-номера как .sv-num в услугах.
   ═══════════════════════════════════════════════════════════ */
.wy {
  --wy-line: #E3ECE8;
  background: var(--paper);
  padding: 104px 0 112px;
  font-family: var(--font-body);
}
.wy-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 400px);
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 48px;
}
.wy-overline {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-700);
}
.wy-overline::before {
  content: ""; width: 26px; height: 2px;
  background: var(--teal-500); border-radius: 2px;
}
.wy-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text-main);
}
.wy-sub {
  margin: 0 0 6px;
  font-size: 16px; line-height: 1.65;
  color: var(--text-muted);
}
.wy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wy-card {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 28px;
  background: var(--white);
  border: 1px solid var(--wy-line);
  border-radius: var(--radius);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.wy-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-300);
  box-shadow: 0 18px 44px -26px rgba(26, 188, 156, .45);
}
.wy-num {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--font-display);
  font-size: 46px; font-weight: 700; line-height: 1;
  color: rgba(26, 188, 156, .13);
  user-select: none;
}
.wy-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--teal-50);
  color: var(--teal-700);
}
.wy-ico svg {
  width: 25px; height: 25px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.wy-name {
  margin: 20px 0 8px;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; line-height: 1.3;
  color: var(--text-main);
}
.wy-text {
  margin: 0;
  font-size: 15.5px; line-height: 1.6;
  color: var(--text-muted);
}
/* reveal — как в .sv */
.wy-js .wy-anim {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity .65s cubic-bezier(.22, .61, .36, 1),
    translate .65s cubic-bezier(.22, .61, .36, 1),
    transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms;
}
.wy-js.wy-on .wy-anim { opacity: 1; translate: 0 0; }
@media (max-width: 1023px) {
  .wy { padding: 80px 0 88px; }
  .wy-head { grid-template-columns: 1fr; margin-bottom: 36px; }
  .wy-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .wy { padding: 64px 0 72px; }
  .wy-title { font-size: 28px; }
  .wy-card { padding: 26px 22px 24px; }
  .wy-name { font-size: 17.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .wy-js .wy-anim { opacity: 1; translate: none; transition: none; }
  .wy-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   КАК МЫ РАБОТАЕМ (.wf) — «Таймлапс проекта»
   Светлая скролл-секция: слева липкий «браузер» с тематическими
   иллюстрациями этапов (бриф → план → отладка → запуск), справа
   этапы 01–04 с бегущей точкой на линии. Состояние слоёв
   и прогресса управляется data-step на секции (main.js).
   Без JS: виден слой брифа и все этапы — ничего не потеряно.
   ═══════════════════════════════════════════════════════════ */
.wf {
  position: relative;
  /* без overflow:hidden — он ломает position:sticky у .wf-preview */
  padding: 84px 0 96px;
  color: var(--ink-800);
  background:
    radial-gradient(760px 420px at 92% -12%, rgba(26, 188, 156, .09), transparent 60%),
    radial-gradient(640px 380px at -10% 112%, rgba(26, 188, 156, .06), transparent 58%),
    var(--white);
  border-top: 1px solid var(--ink-100);
  font-family: var(--font-body);
}
.wf-head {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 360px);
  gap: 14px 48px;
  align-items: end;
  margin-bottom: 44px;
}
.wf-overline {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-600);
}
.wf-overline::before {
  content: ""; width: 26px; height: 2px;
  background: var(--teal-500); border-radius: 2px;
}
.wf-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.wf-sub {
  margin: 0 0 4px;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-500);
}

/* ── Сцена: превью + этапы ─────────────────────────────────── */
.wf-story {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
}

/* ── Липкое превью «живой сборки» ──────────────────────────── */
.wf-preview { position: sticky; top: 104px; }
.wf-browser {
  overflow: hidden;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  box-shadow:
    0 30px 70px -36px rgba(27, 32, 32, .28),
    0 12px 28px -18px rgba(27, 32, 32, .12);
}
/* верхняя панель браузера */
.wf-chrome {
  display: flex; align-items: center; gap: 12px;
  height: 40px;
  padding: 0 16px;
  background: var(--white);
  border-bottom: 1px solid #E9F1EF;
}
.wf-dots { display: inline-flex; gap: 5px; }
.wf-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #DCE8E5;
}
.wf-url {
  flex: 1;
  text-align: center;
  font-size: 11px; letter-spacing: .06em;
  color: var(--ink-400);
}
.wf-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--teal-700);
  background: var(--teal-50);
  transition: background .4s ease, color .4s ease;
}
.wf-badge.is-live {
  color: #fff;
  background: var(--teal-500);
}
/* экран со слоями */
.wf-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--paper);
  overflow: hidden;
}
.wf-layer {
  position: absolute; inset: 0;
  opacity: 0;
  translate: 0 16px;
  scale: .985;
  transition: opacity .55s ease, translate .55s ease, scale .55s ease;
}
/* без JS показываем первый слой — страница не «пустая».
   Активный слой — ПО ПОРЯДКУ: слой №N внутри .wf-screen
   = этап №N (nth-of-type). Имена .wf-layer--* НЕ нужны:
   порядок слоёв в разметке сам задаёт этапы, внутри
   .wf-screen должны быть только слои .wf-layer. Этапов
   больше четырёх — добавить строку data-step="4" и т.д. */
.wf:not(.wf-js) .wf-layer:nth-of-type(1) { opacity: 1; translate: 0 0; scale: 1; }
.wf-js[data-step="0"] .wf-layer:nth-of-type(1),
.wf-js[data-step="1"] .wf-layer:nth-of-type(2),
.wf-js[data-step="2"] .wf-layer:nth-of-type(3),
.wf-js[data-step="3"] .wf-layer:nth-of-type(4) {
  opacity: 1; translate: 0 0; scale: 1;
}

/* иллюстрация этапа — на весь экран «браузера» */
.wf-layer img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* статус-бар: прогресс сборки */
.wf-status {
  display: flex; align-items: center; gap: 14px;
  height: 42px;
  padding: 0 16px;
  background: var(--white);
  border-top: 1px solid #E9F1EF;
}
.wf-track {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: #E5EEEB;
  overflow: hidden;
}
.wf-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 25%;
  border-radius: 3px;
  background: var(--teal-500);
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
.wf-status strong {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-800);
  white-space: nowrap;
}

/* ── Этапы справа: линия + бегущая точка ───────────────────── */
.wf-chapters {
  border-left: 1px solid rgba(27, 32, 32, .12);
  padding-left: 44px;
}
.wf-chapter {
  position: relative;
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* точка на линии — активному этапу */
.wf-chapter::before {
  content: "";
  position: absolute;
  left: -49px;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C9D6D2;
  transition: background .35s ease, box-shadow .35s ease;
}
.wf-chapter.is-active::before {
  background: var(--teal-500);
  box-shadow: 0 0 0 7px rgba(26, 188, 156, .16);
}
/* шапка этапа: цифра и заголовок на одной линии */
.wf-ch-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}
.wf-ch-n {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em;
  color: var(--teal-600);
}
/* короткое тире после цифры — как в оверлайнах секции */
.wf-ch-n::after {
  content: "";
  display: inline-block;
  width: 20px; height: 2px;
  margin-left: 14px;
  border-radius: 2px;
  background: var(--teal-500);
  vertical-align: 4px;
}
.wf-ch-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.wf-ch-lead {
  font-size: 15.5px; font-weight: 500;
  color: var(--ink-700);
}
.wf-ch-text {
  margin: 8px 0 0;
  max-width: 44ch;
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-500);
}
/* активность этапов — только при JS */
.wf-js .wf-chapter {
  opacity: .3;
  transition: opacity .45s ease;
}
.wf-js .wf-chapter.is-active { opacity: 1; }

/* ── Адаптив ────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .wf { padding: 64px 0 72px; }
  .wf-head { grid-template-columns: 1fr; margin-bottom: 36px; }
  .wf-story { grid-template-columns: 1fr; gap: 36px; }
  .wf-preview { top: 84px; z-index: 5; }
  .wf-chapters {
    border-left: 0;
    padding-left: 0;
  }
  .wf-chapter {
    min-height: 0;
    padding: 22px 0;
  }
  .wf-chapter::before { display: none; }
  .wf-js .wf-chapter { opacity: 1; }
  .wf-js .wf-chapter:not(.is-active) { opacity: .45; }
  .wf-ch-head { gap: 12px; }
  .wf-ch-n::after { width: 16px; margin-left: 10px; }
  .wf-ch-name { font-size: 26px; }
}
@media (max-width: 640px) {
  .wf { padding: 56px 0 64px; }
  .wf-title { font-size: 28px; }
  .wf-sub { font-size: 14.5px; }
  .wf-preview { top: 76px; }
  .wf-chrome { height: 36px; padding: 0 12px; gap: 10px; }
  .wf-url { font-size: 10px; }
  .wf-badge { padding: 2px 7px; font-size: 9px; }
  .wf-screen { aspect-ratio: 16 / 11.5; }
  .wf-status { height: 38px; padding: 0 12px; gap: 10px; }
  .wf-chapter { padding: 18px 0; }
  .wf-ch-head { gap: 10px; }
  .wf-ch-n { font-size: 12px; }
  .wf-ch-n::after { width: 14px; margin-left: 8px; vertical-align: 3px; }
  .wf-ch-name { font-size: 23px; white-space: normal; }
  .wf-ch-lead { font-size: 14.5px; }
}

/* ── Reduced motion: мгновенная смена слоёв без анимации ───── */
@media (prefers-reduced-motion: reduce) {
  .wf-layer { transition: none; }
  .wf-bar-fill { transition: none; }
  .wf-js .wf-chapter { transition: none; }
  .wf-badge { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ВОПРОСЫ И БЛОГ (.fq) — аккордеон + CTA-карточка + тизер блога
   Тексты донора 1:1. Аккордеон на details/summary: без JS
   работает нативно (первый пункт открыт); JS делает выбор
   одиночным и добавляет reveal по образцу .wy.
   ═══════════════════════════════════════════════════════════ */
.fq {
  --fq-line: #E3ECE8;
  background: var(--paper);
  padding: 104px 0 112px;
}
.fq-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 400px);
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 40px;
}
.fq-overline {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-700);
}
.fq-overline::before {
  content: ""; width: 26px; height: 2px;
  background: var(--teal-500); border-radius: 2px;
}
.fq-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text-main);
}
.fq-sub {
  margin: 0 0 6px;
  font-size: 16px; line-height: 1.65;
  color: var(--text-muted);
}

/* ── Сетка: список слева, CTA-карточка справа ─────────────── */
.fq-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px 48px;
  align-items: start;
}

/* аккордеон */
.fq-item { border-top: 1px solid var(--fq-line); }
.fq-item:last-child { border-bottom: 1px solid var(--fq-line); }
.fq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-display);
  font-size: 18.5px; font-weight: 700; line-height: 1.35;
  color: var(--ink-900);
  transition: color .25s ease;
}
.fq-q::-webkit-details-marker { display: none; }
.fq-q:hover { color: var(--teal-700); }

/* плюс-иконка: «+» → «×» у открытого пункта */
.fq-x {
  position: relative; flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 1px solid #D5E2DE; border-radius: 50%;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.fq-x::before, .fq-x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px;
  background: var(--ink-700); border-radius: 2px;
  transition: background .3s ease;
}
.fq-x::after { transform: rotate(90deg); }
.fq-item[open] .fq-x {
  background: var(--teal-50);
  border-color: var(--teal-300);
  transform: rotate(45deg);
}
.fq-item[open] .fq-x::before,
.fq-item[open] .fq-x::after { background: var(--teal-600); }

.fq-a { padding: 0 46px 22px 0; }
.fq-a p {
  margin: 0; max-width: 64ch;
  font-size: 15px; line-height: 1.68;
  color: var(--text-muted);
}
@keyframes fq-slide {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}
.fq-item[open] .fq-a { animation: fq-slide .35s ease both; }

/* CTA-карточка справа — тёмная, как панель в модалке */
.fq-rail {
  position: sticky; top: 96px;
  overflow: hidden;
  padding: 30px 28px 28px;
  background: linear-gradient(165deg, var(--ink-900), var(--ink-950));
  border-radius: 20px;
  color: #fff;
}
.fq-rail::before {
  content: ""; position: absolute; top: -70px; right: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 188, 156, .28), transparent 65%);
  pointer-events: none;
}
.fq-rail-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; line-height: 1.25;
}
.fq-rail-sub {
  margin: 10px 0 0;
  font-size: 14.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.fq-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 16px 0 0;
  font-size: 13px; line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}
.fq-note svg {
  flex: 0 0 auto;
  width: 16px; height: 16px; margin-top: 1px;
  fill: none; stroke: var(--teal-300);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.fq-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 24px; padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700; color: #fff;
  background: var(--teal-500);
  border: 0; border-radius: var(--radius-btn);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.fq-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .25s ease;
}
.fq-btn:hover {
  background: var(--teal-600);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
.fq-btn:hover svg { translate: 3px 0; }

/* ── Тизер блога: слайдер на нативном scroll-snap ─────────── */
.fq-blog { margin-top: 72px; }
.fq-blog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 24px;
}
.fq-blog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  color: var(--ink-900);
}
.fq-blog-nav {
  display: flex; align-items: center; gap: 10px;
}
/* стрелки: без JS скрываются — свайп работает нативно */
.fq:not(.fq-js) .fq-blog-nav { display: none; }
.fq-nav-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid #D5E2DE;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.fq-nav-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--ink-700);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s ease;
}
.fq-nav-btn:hover:not(:disabled) {
  background: var(--teal-500);
  border-color: var(--teal-500);
}
.fq-nav-btn:hover:not(:disabled) svg { stroke: #fff; }
.fq-nav-btn:disabled {
  opacity: .35;
  cursor: default;
}
.fq-all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  font-size: 14px; font-weight: 700;
  color: var(--teal-700);
  text-decoration: none;
  transition: color .2s ease;
}
.fq-all svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .25s ease;
}
.fq-all:hover { color: var(--teal-600); }
.fq-all:hover svg { translate: 3px 0; }

/* дорожка слайдера: 3 карточки, свайп/прокрутка нативные */
.fq-blog-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 0 26px;   /* место под тени карточек */
  margin-bottom: -20px;
  cursor: grab;
}
.fq-blog-scroller::-webkit-scrollbar { display: none; }
/* перетаскивание мышью: на время drag снап отключается —
   иначе браузер будет «стягивать» дорожку обратно при паузе */
.fq-blog-scroller.is-drag {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.fq-blog-scroller.is-drag .fq-post { pointer-events: none; }

/* карточка: иллюстрация — чистая полоса сверху, текст — на подложке */
.fq-post {
  position: relative;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 20px 22px 20px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--teal-50);
  outline: 1px solid var(--fq-line);
  outline-offset: -1px;
  text-decoration: none;
  transition: transform .3s ease, outline-color .3s ease, box-shadow .3s ease;
}
.fq-post:hover {
  transform: translateY(-3px);
  outline-color: var(--teal-300);
  box-shadow: 0 18px 44px -26px rgba(26, 188, 156, .45);
}
/* иллюстрация во всю ширину карточки — фул-блид из паддингов */
.fq-post-bg {
  display: block;
  height: 150px;
  margin: -20px -22px 0;   /* выйти из паддингов карточки */
  border-bottom: 1px solid var(--fq-line);
  background-size: cover;
  background-position: center;
  transition: transform .55s ease;
}
.fq-post:hover .fq-post-bg { transform: scale(1.045); }

.fq-post-cat {
  position: relative; z-index: 1;
  align-self: flex-start;
  margin-top: 18px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(26, 188, 156, .28);
  color: var(--teal-700);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.fq-post-name {
  position: relative; z-index: 1;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 17.5px; font-weight: 700; line-height: 1.32;
  color: var(--ink-900);
  transition: color .25s ease;
}
.fq-post:hover .fq-post-name { color: var(--teal-700); }
.fq-post-text {
  position: relative; z-index: 1;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-500);
}
.fq-post-foot {
  position: relative; z-index: 1;
  margin-top: auto;      /* кнопки прижаты к низу — ряд ровный */
  padding-top: 16px;
}
/* «Читать» — цельная pill-кнопка */
.fq-post-more {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(26, 188, 156, .38);
  background: rgba(255, 255, 255, .92);
  color: var(--teal-700);
  font-size: 13px; font-weight: 700; line-height: 1;
  transition: background .25s ease, border-color .25s ease,
              color .25s ease, box-shadow .25s ease;
}
.fq-post-more svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .25s ease;
}
.fq-post:hover .fq-post-more,
.fq-post:focus-visible .fq-post-more {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(26, 188, 156, .65);
}
.fq-post:hover .fq-post-more svg,
.fq-post:focus-visible .fq-post-more svg { translate: 3px 0; }

/* ── Слайдер: адаптив ───────────────────────────────────────── */
@media (max-width: 1023px) {
  .fq-blog-scroller { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .fq-blog-head { flex-wrap: wrap; gap: 12px 16px; }
  .fq-blog-title { font-size: 21px; }
  .fq-nav-btn { width: 38px; height: 38px; }
  .fq-blog-scroller {
    grid-auto-columns: 86%;
    gap: 16px;
  }
  .fq-post-bg { height: 136px; margin: -20px -18px 0; }
  .fq-post-cat { margin-top: 15px; }
  .fq-post-name { font-size: 16.5px; }
  .fq-post-more { padding: 8px 14px; font-size: 12.5px; }
}

/* ── Reveal — по образцу .wy (.fq-js/.fq-on + --d) ────────── */
.fq-js .fq-anim {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              translate .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
}
.fq-js.fq-on .fq-anim { opacity: 1; translate: 0 0; }

/* ── Адаптив ────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .fq { padding: 64px 0 72px; }
  .fq-head { grid-template-columns: 1fr; margin-bottom: 32px; }
  .fq-body { grid-template-columns: 1fr; gap: 24px; }
  .fq-rail { position: static; }
  .fq-blog { margin-top: 56px; }
}
@media (max-width: 640px) {
  .fq { padding: 56px 0 64px; }
  .fq-title { font-size: 28px; }
  .fq-sub { font-size: 14.5px; }
  .fq-q { font-size: 16.5px; gap: 14px; padding: 18px 0; }
  .fq-x { width: 26px; height: 26px; }
  .fq-x::before, .fq-x::after { width: 10px; margin-left: -5px; }
  .fq-a { padding: 0 40px 18px 0; }
  .fq-a p { font-size: 14.5px; }
  .fq-rail { padding: 26px 22px 24px; }
  .fq-blog-title { font-size: 21px; }
  .fq-post { padding: 20px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-js .fq-anim { opacity: 1; translate: none; transition: none; }
  .fq-item[open] .fq-a { animation: none; }
  .fq-q, .fq-x, .fq-btn, .fq-post, .fq-all svg, .fq-post-more, .fq-post-more svg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   CTA «Обсудим ваш проект?» (.ct, #cta) — тёмная секция.
   Тексты донора 1:1; графика — teal-свечения + сетка.
   Ритм фонов: .fq (paper) → .ct (ink-900→950) → .footer (ink-950)
   ═══════════════════════════════════════════════════════════ */
.ct {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  background:
    radial-gradient(680px 340px at 10% -12%, rgba(26, 188, 156, .17), transparent 62%),
    radial-gradient(760px 400px at 98% 116%, rgba(26, 188, 156, .14), transparent 62%),
    linear-gradient(165deg, var(--ink-900) 0%, var(--ink-950) 100%);
  color: #fff;
}
/* декоративная сетка-«чертёж», тает к краям */
.ct-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(760px 520px at 76% 50%, #000 28%, transparent 74%);
  mask-image: radial-gradient(760px 520px at 76% 50%, #000 28%, transparent 74%);
  pointer-events: none;
}
.ct-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}
.ct-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
}
.ct-grad {
  background: linear-gradient(92deg, var(--teal-300) 0%, var(--teal-500) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ct-sub {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .66);
}
.ct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 32px;
}
.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--teal-500);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ct-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .25s ease;
}
.ct-btn:hover {
  background: var(--teal-600);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
.ct-btn:hover svg { translate: 3px 0; }
.ct-link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .2s ease;
}
.ct-link:hover { color: var(--teal-300); text-decoration: underline; text-underline-offset: 4px; }

/* консоль */
.ct-term {
  width: 100%;
  max-width: 540px;
  justify-self: end;
  border-radius: 14px;
  background: rgba(20, 25, 24, .72);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65);
  overflow: hidden;
}
.ct-term-head {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ct-term-head i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.ct-term-head i:first-child { background: var(--teal-500); }
.ct-term-name {
  margin-left: 8px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, .42);
}
.ct-term-body {
  padding: 20px 22px 24px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 13.5px;
  line-height: 2;
  white-space: nowrap;
  overflow-x: auto;
}
.ct-term-body p { margin: 0; }
/* строки «печатаются» каскадом после появления секции */
.ct-line {
  opacity: 0;
  translate: 0 8px;
  transition: opacity .5s ease, translate .5s ease;
  transition-delay: calc(.45s + var(--i, 0) * .22s);
}
.ct-js.ct-on .ct-line { opacity: 1; translate: 0 0; }
.ct-line .g { color: var(--teal-400); font-weight: 700; }
.ct-line .c { color: #fff; font-weight: 600; }
.ct-line .u { color: rgba(255, 255, 255, .45); }
.ct-line .s { color: #8FE8D2; }
.ct-line .m { color: rgba(255, 255, 255, .55); }
.ct-caret {
  display: inline-block;
  width: 8px; height: 15px;
  margin-left: 7px;
  vertical-align: -2px;
  background: var(--teal-300);
  animation: ct-blink 1.1s steps(1) infinite;
}
@keyframes ct-blink { 50% { opacity: 0; } }

/* reveal — тот же паттерн, что .wy/.fq */
.ct-js .ct-anim {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              translate .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
}
.ct-js.ct-on .ct-anim { opacity: 1; translate: 0 0; }

/* ═══════════════════════════════════════════════════════════
   ФУТЕР (.footer) — ink-950, 4 колонки + нижняя строка
   ═══════════════════════════════════════════════════════════ */
.footer {
  padding: 64px 0 28px;
  background: var(--ink-950);
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .66);
}
.f-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px 32px;
}
.f-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.f-mark { width: 32px; height: 32px; }
.f-logo-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.f-logo-text em {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-400);
}
.f-desc {
  margin: 16px 0 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .55);
}
.f-powered {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
}
.f-powered svg { width: 15px; height: 15px; }
.f-powered b { color: var(--teal-300); font-weight: 700; }

.f-title {
  margin: 4px 0 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.f-links {
  margin: 0; padding: 0;
  list-style: none;
}
.f-links li + li { margin-top: 10px; }
.f-links a {
  font-size: 14.5px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .2s ease;
}
.f-links a:hover { color: var(--teal-300); }

/* Кнопка «Написать в МАКС» в колонке контактов (габариты даёт .btn--primary) */
.f-max { margin-top: 18px; gap: 12px; }
.f-max svg { width: 20px; height: 20px; flex: none; }

.f-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.f-copy {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}
.f-privacy {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .2s ease;
}
.f-privacy:hover { color: var(--teal-300); text-decoration: underline; text-underline-offset: 4px; }

/* кнопка «наверх» */
.scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid #D5E2DE;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-700);
  cursor: pointer;
  box-shadow: 0 14px 34px -14px rgba(27, 32, 32, .4);
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity .3s ease, translate .3s ease, visibility .3s,
              background .25s ease, border-color .25s ease;
}
.scroll-top svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.scroll-top.is-show {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.scroll-top:hover {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
}

/* ── CTA + футер: адаптив ───────────────────────────────────── */
@media (max-width: 1023px) {
  .ct { padding: 76px 0; }
  .ct-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ct-term { justify-self: start; max-width: 560px; }
  .f-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 640px) {
  .ct { padding: 60px 0; }
  .ct-title { font-size: 27px; }
  .ct-sub { font-size: 14.5px; }
  .ct-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 28px;
  }
  .ct-btn { justify-content: center; }
  .ct-term-body { font-size: 12px; padding: 16px 16px 18px; }
  .footer { padding: 52px 0 24px; }
  .f-grid { grid-template-columns: 1fr; gap: 30px; }
  .f-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 38px;
  }
  .scroll-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-js .ct-anim { opacity: 1; translate: none; transition: none; }
  .ct-line { opacity: 1; translate: none; transition: none; }
  .ct-caret { animation: none; }
  .ct-btn, .ct-btn svg, .scroll-top, .f-links a, .ct-link { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   МОДАЛЬНАЯ ФОРМА «Оставьте заявку» (#contact-modal)
   Стили перенесены с текущего сайта modxdevpro.ru 1:1
   (структура, анимации, брейкпоинты). Единственная адаптация —
   фирменный зелёный #0d8469 заменён на бирюзу логотипа
   (#1ABC9C: teal-700/800/900), нейтральные slate-серые — на
   графитовую шкалу --ink-*. Вернуть исходный зелёный можно
   правкой токенов --mf-green* ниже.
   Открытие: .is-open на оверлее (вешает main.js), успех:
   .is-success. Разметка — в index.html перед </body>.
   ═══════════════════════════════════════════════════════════ */

/* ═══ 1. ТОКЕНЫ ФОРМЫ ═══ */
#contact-modal {
  /* текст на белом */
  --mf-ink:      #242A29;   /* заголовки/подписи (= --text-main) */
  --mf-ink-2:    #525E5D;   /* вторичный текст — 7.4:1 на белом */
  --mf-ink-3:    #717D7C;   /* бордер инпутов — 4.4:1 (норма для UI ≥3:1) */
  /* бренд — бирюза логотипа */
  --mf-green:    #118871;   /* = --teal-700 */
  --mf-green-2:  #0F6E5D;   /* = --teal-800, 6.2:1 с белым */
  --mf-green-3:  #0D594B;   /* = --teal-900, тёмный текст на бирюзовой подложке */
  --mf-green-bg: rgba(26, 188, 156, .09);
  /* поверхности */
  --mf-field-bg: #F4F8F7;
  --mf-border:   #D8E2E0;   /* декоративные линии, чипы */
  --mf-err:      #D92D20;   /* ошибки, 4.9:1 на белом */
  --mf-radius:     24px;
  --mf-radius-in:  12px;
  --mf-ease-pop:   cubic-bezier(.22, 1.2, .36, 1);
  /* мосты к чекбоксу согласия (стили ниже используют
     переменные --primary/--text-light из шаблона-донора) */
  --primary:        var(--mf-green);
  --primary-dark:   var(--mf-green-3);
  --text-light:     var(--mf-ink-2);
  --border-active:  var(--mf-green);
  font-family: 'Roboto', Arial, sans-serif;
}

/* ═══ 2. ОВЕРЛЕЙ ═══ */
.mf-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; justify-content: center;   /* вертикаль держит margin:auto у карточки */
  padding: 24px;
  background: rgba(27, 32, 32, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
  overflow-y: auto;
}
.mf-overlay.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .28s ease;
}
/* мягкое бирюзовое свечение за карточкой — «вау» без затемнения */
.mf-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mf-glow i {
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  filter: blur(90px); opacity: .16;
}
.mf-glow i:nth-child(1) {
  background: radial-gradient(circle, #40CDB0, transparent 65%);
  top: -120px; left: calc(50% - 560px);
}
.mf-glow i:nth-child(2) {
  background: radial-gradient(circle, #118871, transparent 65%);
  bottom: -160px; right: calc(50% - 560px); opacity: .22;
}

/* ═══ 3. КАРТОЧКА: split-композиция ═══ */
.mf-card {
  position: relative;
  margin: auto;   /* центрирование без обрезки контента на низких экранах */
  display: grid; grid-template-columns: 340px 1fr;
  grid-template-rows: minmax(0, 1fr);   /* ⚠️ строка ≤ max-height: панель и форма
      не растягивают карточку — счётчики и кнопка не уезжают за экран */
  width: min(920px, 100%);
  max-height: calc(100dvh - 48px);
  background: #fff;
  border-radius: var(--mf-radius);
  box-shadow:
    0 40px 90px -24px rgba(17, 136, 113, .4),
    0 24px 48px -24px rgba(27, 32, 32, .3),
    0 0 0 1px rgba(27, 32, 32, .05);
  overflow: hidden;
  transform: translateY(20px) scale(.965);
  opacity: 0;
  transition: transform .45s var(--mf-ease-pop), opacity .3s ease;
}
.mf-overlay.is-open .mf-card { transform: translateY(0) scale(1); opacity: 1; }

/* ═══ 4. ЛЕВАЯ ПАНЕЛЬ: бренд + выгоды ═══ */
.mf-side {
  position: relative;
  display: flex;
  min-height: 0;   /* разрешаем сетке ужать панель */
  background:
    radial-gradient(420px 260px at 110% -10%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(160deg, #118871 0%, #0F6E5D 58%, #0C5F50 100%);
  color: #fff;
  overflow: hidden;
}
/* точечная сетка — фирменная «инженерная» фактура */
.mf-side::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(200deg, rgba(0, 0, 0, .9), transparent 72%);
  mask-image: linear-gradient(200deg, rgba(0, 0, 0, .9), transparent 72%);
  pointer-events: none;
}
.mf-side-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%;
  padding: 40px 32px 32px;   /* 40 сверху/по бокам 32 — воздух без «дыр» */
}
.mf-logo {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 10px 24px -10px rgba(15, 110, 93, .5);
  display: none;
}
.mf-logo img { display: block; height: 30px; width: auto; }
.mf-side-title {
  margin-top: 32px;
  font: 700 clamp(24px, 2.6vw, 30px)/1.22 'Play', sans-serif;
  letter-spacing: .2px;
}
.mf-side-text {
  margin-top: 12px;
  font-size: 15px; line-height: 1.6;
  color: rgba(255, 255, 255, .95);
}
.mf-benefits {
  list-style: none;
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.mf-benefits li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 500;
}
.mf-b-ico {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.mf-b-ico svg { width: 14px; height: 14px; }
.mf-side-foot {
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  justify-content: space-between;
}
.mf-stat b {
  display: block;
  font: 700 22px/1.2 'Play', sans-serif;
}
.mf-stat span {
  font-size: 13px; color: rgba(255, 255, 255, .95);
}

/* divuley (.mf-card--max): тексты левой панели — на уровне правой колонки
   (правый padding 40 = левый 40, margin-top 32 убран; на низких экранах
   панель прижата к 10px → 32−10=22), плюс кнопка «Написать в МАКС» */
.mf-card--max .mf-side-title { margin-top: 0; }
.mf-card--max .mf-max { margin-top: 28px; align-self: flex-start; }
@media (max-height: 800px) {
  .mf-card--max .mf-side-title { margin-top: 22px; }
  .mf-card--max .mf-max { margin-top: 20px; }
}

/* ═══ 5. ЗАКРЫВАЮЩАЯ КНОПКА ═══ */
.mf-close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 40px; height: 40px; border: 0; cursor: pointer;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EEF3F2; color: #525E5D;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mf-close:hover { background: #E1E9E7; color: #242A29; transform: rotate(90deg); }
.mf-close:focus-visible { outline: 3px solid var(--mf-green); outline-offset: 2px; }
.mf-close svg { width: 18px; height: 18px; }

/* ═══ 6. ПРАВАЯ КОЛОНКА: ФОРМА ═══ */
.mf-main {
  position: relative;
  min-height: 0;                    /* иначе min-content формы ломает max-height карточки */
  padding: 40px;                    /* единый внутр. отступ — чистый ритм */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #C0CCC9 transparent;
}
.mf-title {
  font: 700 26px/1.25 'Play', sans-serif;
  color: var(--mf-ink);
  letter-spacing: .2px;
}
.mf-sub {
  margin-top: 8px;                  /* заголовок —8— подзаголовок */
  font-size: 15px; line-height: 1.55;
  color: var(--mf-ink-2);
}

/* ═══ 7. ЧИПЫ УСЛУГ ═══ */
.mf-chips-label {
  margin-top: 24px;                 /* подзаголовок —24— чипы */
  font-size: 13px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--mf-ink-2);
}
.mf-chips {
  margin-top: 12px;                 /* подпись —12— чипы */
  display: flex; flex-wrap: wrap; gap: 8px;
}
.mf-chip {
  display: inline-flex; align-items: center;   /* без gap — отступом управляет иконка */
  height: 40px; padding: 0 16px;
  border: 1.5px solid var(--mf-border); border-radius: 999px;
  background: #fff; color: var(--mf-ink);
  font: 500 13px/1 'Roboto', sans-serif;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease,
              color .18s ease, transform .18s var(--mf-ease-pop);
}
.mf-chip svg {
  width: 14px; height: 14px; color: var(--mf-green);
  stroke-width: 3; flex: 0 0 auto;
  /* не выбран: иконка схлопнута — текст начинается ровно от левого padding 16px */
  max-width: 0; margin-right: 0; opacity: 0; transform: scale(.4) rotate(-90deg);
  transition: opacity .18s ease, max-width .25s var(--mf-ease-pop),
              margin-right .25s var(--mf-ease-pop), transform .25s var(--mf-ease-pop);
}
.mf-chip:hover { border-color: #B3C1BF; background: #F4F8F7; }
.mf-chip[aria-pressed="true"] {
  border-color: var(--mf-green);
  background: var(--mf-green-bg);
  color: var(--mf-green-3);
}
.mf-chip[aria-pressed="true"] svg { max-width: 14px; margin-right: 6px; opacity: 1; transform: scale(1) rotate(0deg); }
.mf-chip:focus-visible { outline: 3px solid var(--mf-green); outline-offset: 2px; }

/* ═══ 8. ПОЛЯ: подпись сверху, крупная зона ввода ═══ */
.mf-fields {
  margin-top: 24px;                 /* чипы —24— поля */
  display: grid;
  grid-template-columns: 1fr 1fr;   /* Имя + Email в 2 колонки */
  gap: 20px 16px;                   /* между рядами 20, между колонками 16 */
}
.mf-field { display: flex; flex-direction: column; min-width: 0; }
.mf-field--wide { grid-column: 1 / -1; }
.mf-label {
  margin-bottom: 8px;               /* подпись —8— поле */
  font-size: 14px; font-weight: 500; color: var(--mf-ink);
}
.mf-label i { font-style: normal; color: var(--mf-err); }
.mf-label small { font-weight: 400; color: var(--mf-ink-2); }
.mf-input, .mf-textarea {
  width: 100%;
  font: 400 16px/1.45 'Roboto', Arial, sans-serif;
  color: var(--mf-ink);
  background: var(--mf-field-bg);
  border: 1.5px solid var(--mf-ink-3);
  border-radius: var(--mf-radius-in);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.mf-input  { height: 52px; padding: 0 16px; }
.mf-textarea {
  min-height: 96px; padding: 14px 16px;
  resize: vertical;
}
.mf-input::placeholder, .mf-textarea::placeholder { color: var(--mf-ink-2); }
.mf-input:hover, .mf-textarea:hover { border-color: #5A6765; }
.mf-input:focus, .mf-textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--mf-green);
  box-shadow: 0 0 0 4px rgba(17, 136, 113, .14);   /* мягкое кольцо фокуса */
}
/* ошибка */
.mf-field.is-error .mf-input,
.mf-field.is-error .mf-textarea,
.mf-field .mf-textarea.si-error { border-color: var(--mf-err); background: #fff5f4; }
.mf-field.is-error .mf-input:focus,
.mf-field.is-error .mf-textarea:focus { box-shadow: 0 0 0 4px rgba(217, 45, 32, .12); }
.mf-error {
  display: none;
  margin-top: 6px;                  /* поле —6— текст ошибки */
  font-size: 13px; line-height: 1.4; color: var(--mf-err);
}
/* без SendIt текст ошибки согласия выводит main.js — класс .is-visible */
.mf-error.is-visible { display: block; }
.mf-fields > .mf-error[data-si-error="agreement"] { grid-column: 1 / -1; margin-top: -10px; }

/* ═══ 9. СОГЛАСИЕ ═══ */
.mf-agree {
  position: relative;
  grid-column: 1 / -1;
  margin-top: 4px;                  /* визуально +20 к общему шагу */
  display: flex; align-items: flex-start; gap: 12px;
}
/* ошибка согласия: без текста — краснеет подпись и рамка чекбокса.
   Снимается автоматически при input/change внутри .mf-agree (main.js) */
.mf-agree.is-error label {
  color: var(--mf-err);
}
.mf-agree.is-error .checkbox input { border-color: var(--mf-err); }
.mf-agree.is-error .checkbox svg { --stroke: var(--mf-err); }

/* Чекбокс согласия (перенесён с сайта-донора: .checkbox-wrapper-30
   + .form-checkbox-label; переменные --primary/--text-light
   замкнуты на токены формы в блоке 1) */
.checkbox-wrapper-30 .checkbox {
  --bg: #fff;
  --brdr: #D8E2E0;
  --brdr-actv: var(--primary);
  --brdr-hovr: #A9B6B4;
  --dur: calc((var(--size, 2)/2) * 0.6s);
  display: inline-block;
  width: calc(var(--size, 1) * 22px);
  position: relative;
  color: var(--primary);
}
.checkbox-wrapper-30 .checkbox:after {
  content: "";
  width: 100%;
  padding-top: 100%;
  display: block;
}
.checkbox-wrapper-30 .checkbox > * {
  position: absolute;
}
.checkbox-wrapper-30 .checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  background-color: var(--bg);
  border-radius: calc(var(--size, 1) * 4px);
  border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
  color: var(--newBrdrClr, var(--brdr));
  outline: none;
  margin: 0;
  padding: 0;
  transition: all calc(var(--dur) / 3) linear;
}
.checkbox-wrapper-30 .checkbox input:hover,
.checkbox-wrapper-30 .checkbox input:checked {
  --newBrdr: calc(var(--size, 1) * 2);
}
.checkbox-wrapper-30 .checkbox input:hover {
  --newBrdrClr: var(--brdr-hovr);
}
.checkbox-wrapper-30 .checkbox input:checked {
  --newBrdrClr: var(--brdr-actv);
  transition-delay: calc(var(--dur) / 1.3);
}
.checkbox-wrapper-30 .checkbox input:checked + svg {
  --dashArray: 16 93;
  --dashOffset: 109;
}
.checkbox-wrapper-30 .checkbox svg {
  fill: none;
  left: 0;
  pointer-events: none;
  stroke: var(--stroke, var(--border-active));
  stroke-dasharray: var(--dashArray, 93);
  stroke-dashoffset: var(--dashOffset, 94);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  top: 0;
  transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
}
.checkbox-wrapper-30 .checkbox svg,
.checkbox-wrapper-30 .checkbox input {
  display: block;
  height: 100%;
  width: 100%;
}
.form-checkbox-label {
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.5;
  cursor: pointer;
  margin: 0;
}
.form-checkbox-label a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-checkbox-label a:hover {
  color: var(--primary-dark);
}

/* ═══ 10. КНОПКА ОТПРАВКИ ═══ */
.mf-submit-row {
  grid-column: 1 / -1;
  margin-top: 4px;                  /* итого 24px после согласия (20 сетка + 4) */
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mf-submit {
  position: relative; overflow: hidden;
  width: 100%; height: 54px;
  border: 0; border-radius: 14px; cursor: pointer;
  font: 600 16px/1 'Roboto', sans-serif; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--mf-green), var(--mf-green-2));
  box-shadow:
    0 14px 28px -10px rgba(17, 136, 113, .55),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .18s var(--mf-ease-pop), box-shadow .22s ease, opacity .2s ease;
}
.mf-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -10px rgba(17, 136, 113, .6); }
.mf-submit:active { transform: translateY(0) scale(.985); }
.mf-submit:focus-visible { outline: 3px solid var(--mf-green-3); outline-offset: 3px; }
.mf-submit:disabled { cursor: default; opacity: .85; transform: none; }
.mf-submit svg { width: 18px; height: 18px; }
/* блик, пробегающий по кнопке при наведении */
.mf-submit::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  left: -80px; transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.mf-submit:hover::after { left: calc(100% + 30px); }
/* спиннер загрузки */
.mf-spinner {
  display: none; width: 20px; height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%;
  animation: mf-spin .7s linear infinite;
}
@keyframes mf-spin { to { transform: rotate(360deg); } }
.mf-submit.is-loading .mf-spinner { display: inline-block; }
.mf-submit.is-loading .mf-txt-idle,
.mf-submit.is-loading > svg { display: none; }
.mf-micro {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--mf-ink-2);
}
.mf-micro svg { width: 14px; height: 14px; color: var(--mf-green); flex: 0 0 auto; }

/* ═══ 11. СТАГГЕР-ПОЯВЛЕНИЕ ЭЛЕМЕНТОВ ═══ */
.mf-anim {
  opacity: 0;
  transform: translateY(14px);
}
.mf-overlay.is-open .mf-anim {
  animation: mf-rise .5s var(--mf-ease-pop) forwards;
  animation-delay: calc(120ms + var(--d, 0ms));
}
@keyframes mf-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ 12. ЭКРАН УСПЕХА (заменяет форму в правой колонке) ═══ */
.mf-success {
  position: relative;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  padding: 48px 32px;
  min-height: 420px;
  background: #fff;
}
.mf-overlay.is-success .mf-success { display: flex; }
.mf-overlay.is-success .mf-head,
.mf-overlay.is-success .mf-form { display: none; }
.mf-success-badge {
  position: relative;
  width: 84px; height: 84px; margin-bottom: 16px;
  border-radius: 50%;
  background: var(--mf-green-bg);
  display: flex; align-items: center; justify-content: center;
}
/* кольцо-хало — полный круг (разрыв «справа» выглядел как обрезка) */
.mf-success-badge::before {
  content: ""; position: absolute; inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(17, 136, 113, .3);
  animation: mf-halo 1.6s ease-in-out infinite;
}
@keyframes mf-halo {
  0%, 100% { transform: scale(.94); opacity: .25; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.mf-success-badge svg { width: 40px; height: 40px; }
.mf-success-badge svg path {
  stroke: var(--mf-green); stroke-width: 2.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
}
.mf-overlay.is-success .mf-success-badge svg path {
  animation: mf-draw .45s ease .25s forwards;
}
@keyframes mf-draw { to { stroke-dashoffset: 0; } }
.mf-success-title {
  font: 700 24px/1.25 'Play', sans-serif; color: var(--mf-ink);
}
.mf-success-desc {
  margin-top: 8px; max-width: 320px;
  font-size: 15px; line-height: 1.6; color: var(--mf-ink-2);
}
.mf-success-desc b { color: var(--mf-ink); }
/* кнопка «Отлично» (в разметке — .btn.btn-primary; стили .btn-primary
   из шаблона-донора перенесены сюда с точностью до палитры) */
.mf-ok {
  margin-top: 24px;
  height: 48px; padding: 0 32px;
}
#contact-modal .btn-primary,
.cn-success .btn-primary { /* тот же градиент — на экране успеха инлайн-формы */
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; cursor: pointer;
  font: 600 15px/1 'Roboto', Arial, sans-serif;
  color: #fff;
  background: linear-gradient(135deg, var(--mf-green), var(--mf-green-2));
  box-shadow: 0 10px 22px -10px rgba(17, 136, 113, .55);
  transition: filter .18s ease, transform .18s var(--mf-ease-pop);
}
#contact-modal .btn-primary:hover,
.cn-success .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
#contact-modal .btn-primary:focus-visible,
.cn-success .btn-primary:focus-visible { outline: 3px solid var(--mf-green-3); outline-offset: 2px; }
/* конфетти — сдержанные фирменные тона */
.mf-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mf-confetti i {
  position: absolute; top: 42%; left: 50%;
  width: 8px; height: 8px; border-radius: 2px;
  opacity: 0;
}
.mf-overlay.is-success .mf-confetti i { animation: mf-pop .9s var(--mf-ease-pop) .3s forwards; }
.mf-confetti i:nth-child(1) { background: #118871; --dx: -130px; --dy: -90px;  --rot: 40deg; }
.mf-confetti i:nth-child(2) { background: #40CDB0; --dx: 120px;  --dy: -110px; --rot: -30deg; }
.mf-confetti i:nth-child(3) { background: #f4b740; --dx: -80px;  --dy: 100px;  --rot: 60deg; }
.mf-confetti i:nth-child(4) { background: #0D594B; --dx: 90px;   --dy: 95px;   --rot: -50deg; }
.mf-confetti i:nth-child(5) { background: #40CDB0; --dx: -160px; --dy: 30px;   --rot: 20deg; }
.mf-confetti i:nth-child(6) { background: #f4b740; --dx: 160px;  --dy: 20px;   --rot: -70deg; }
.mf-confetti i:nth-child(7) { background: #118871; --dx: -40px;  --dy: -140px; --rot: 80deg; }
.mf-confetti i:nth-child(8) { background: #7fd1ff; --dx: 45px;   --dy: -135px; --rot: -20deg; }
@keyframes mf-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); }
}

/* ═══ 12-бис. НИЗКИЕ ЭКРАНЫ: панель ужимается, счётчики не уезжают ═══ */
@media (max-height: 800px) {
  .mf-side-inner { padding: 10px 28px 24px; }
  .mf-side-title { margin-top: 24px; font-size: 24px; }
  .mf-side-text { margin-top: 8px; font-size: 14px; }
  .mf-benefits { margin-top: 24px; gap: 12px; }
  .mf-stat b { font-size: 20px; }
  /* форма тоже компактнее — стараемся влезть в экран ноутбука без скролла */
  .mf-main { padding: 32px 32px 28px; }
  .mf-chips-label, .mf-fields { margin-top: 16px; }
  .mf-fields { gap: 16px 16px; }
  .mf-textarea { min-height: 84px; }
}
@media (max-height: 640px) {
  .mf-side-text { display: none; }   /* первым жертвуем описание */
}
@media (max-height: 540px) {
  .mf-side-foot { display: none; }   /* при крайней нужде — счётчики */
}

/* ═══ 13. МОБИЛЬНАЯ ВЕРСИЯ ≤ 899px: bottom-sheet ═══ */
@media (max-width: 899px) {
  .mf-overlay {
    align-items: flex-end; padding: 0;
  }
  .mf-card {
    grid-template-columns: 1fr;
    margin: auto 0 0;                /* лист прижат к низу, не центр */
    width: 100%; max-height: calc(100dvh - 40px);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px rgba(27, 32, 32, .35);
    transform: translateY(100%);
    transition: transform .5s var(--mf-ease-pop), opacity .3s ease;
  }
  .mf-overlay.is-open .mf-card { transform: translateY(0); }
  .mf-glow { display: none; }
  /* «ручка» перетаскивания */
  .mf-card::before {
    content: ""; position: absolute; top: 8px; left: 50%; z-index: 6;
    width: 44px; height: 5px; border-radius: 999px;
    background: #C0CCC9; transform: translateX(-50%);
  }
  .mf-side { display: none; }       /* слоган остаётся на самом сайте */
  .mf-main { padding: 32px 20px calc(24px + env(safe-area-inset-bottom)); }
  .mf-card::after {                 /* фирменная градиентная кромка листа */
    content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 7; height: 3px;
    background: linear-gradient(90deg, #15A286, #72DCC6);
  }
  .mf-title { font-size: 22px; }
  .mf-close {
    top: 20px; right: 16px;
    background: #fff; box-shadow: 0 2px 10px rgba(27, 32, 32, .15);
  }
  .mf-fields { grid-template-columns: 1fr; gap: 20px; }
  .mf-chip { height: 44px; }        /* комфортный тач-таргет */
  .mf-success { padding: 48px 24px calc(32px + env(safe-area-inset-bottom)); min-height: 320px; }
}
/* очень низкие экраны — компактнее заголовок */
@media (max-width: 899px) and (max-height: 700px) {
  .mf-sub { margin-top: 4px; }
  .mf-chips-label { margin-top: 16px; }
  .mf-fields { margin-top: 16px; }
}

/* ═══ 14. ДОСТУПНОСТЬ: reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .mf-overlay, .mf-card, .mf-anim, .mf-chip svg,
  .mf-submit, .mf-submit::after, .mf-close, .mf-spinner,
  .mf-success-badge::before, .mf-success-badge svg path, .mf-confetti i {
    animation: none !important;
    transition-duration: .01s !important;
  }
  .mf-anim { opacity: 1; transform: none; }
  .mf-success-badge svg path { stroke-dashoffset: 0; }
  .mf-confetti { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА ЗАПИСИ БЛОГА (.bp) — blog-post.html
   Верхняя «лента» (крошки-капсула + время чтения + шапка) →
   двухколоночное тело: слева текст (код-блоки с копированием),
   справа липкий сайдбар с мини-CTA → навигация → «Читайте
   также» → CTA. Подсветка — локальный Prism; тема — ink/teal.
   Reveal: .bp-js/.bp-on на каждом .bp-anim (ставит JS);
   карточки «Читайте также» — родные .fq-js/.fq-on.
   ═══════════════════════════════════════════════════════════ */

.bp {
  --font-mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  padding-top: var(--header-h);  /* тёмный hero начинается ровно от края шапки */
}

/* — Универсальный компактный hero контентных страниц (список
   блога, запись, инфостраницы — один чанк). Минималистичная
   редакционная шапка: тихие крошки → крупный заголовок с одним
   градиентным акцентом → мета-строка с короткой teal-линией.
   Декоративных анимаций нет — только статичная атмосфера:
   два мягких свечения и зерно. Высота — по контенту, НЕ на
   весь экран ——————————————————————————————————————————— */
.bp-top {
  position: relative;
  overflow: hidden;
  padding: 38px 0 48px;
  background: linear-gradient(172deg, var(--ink-950) 0%, var(--ink-900) 100%);
  border-bottom: 1px solid rgba(64, 205, 176, .16);
  color: #fff;
}
/* статичная атмосфера: мягкое teal-свечение справа сверху и
   едва заметное встречное снизу слева; зерно — общий .swa-grain */
.bp-top-bg { position: absolute; inset: 0; pointer-events: none; }
.bp-glow {
  position: absolute; top: -260px; right: -180px;
  width: 680px; height: 680px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 188, 156, .13), transparent 62%);
}
.bp-glow--b {
  top: auto; right: auto; bottom: -320px; left: -220px;
  background: radial-gradient(circle, rgba(26, 188, 156, .07), transparent 60%);
}
.bp-top .bp-top-in { position: relative; z-index: 1; }

/* — Крошки: тихая строка на тёмном, без капсул. Спокойный цвет,
   тонкий разделитель, текущая страница без жирного акцента —
   главный элемент hero ниже ——————————————————————————— */
.bp-crumbs { padding: 0; }
.bp-crumbs-list {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 3px 12px;
  margin: 0;
  font-size: 13px;
}
.bp-crumbs-list li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.bp-crumb-sep {
  width: 11px; height: 11px; flex: none;
  fill: none; stroke: rgba(255, 255, 255, .22);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bp-crumbs-list a {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, .5); font-weight: 400;
  transition: color .2s ease;
}
.bp-crumbs-list a:hover { color: var(--teal-300); }
.bp-crumb-home {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--teal-300);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.bp-crumbs-list [aria-current] {
  color: rgba(255, 255, 255, .85); font-weight: 500;
  max-width: 340px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}

/* — Шапка: заголовок — главный элемент hero; работает с любым
   названием, в том числе в 5–7 слов (перенос балансирует
   text-wrap: balance). Единственный акцент — одно градиентное
   словосочетание .bp-tint, статичное, без анимации ——————— */
.bp-hero { padding: 30px 0 0; }
.bp-title {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(31px, 4.8vw, 54px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: #fff;
  text-wrap: balance;
}
.bp-title .bp-tint { color: var(--teal-300); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bp-title .bp-tint {
    color: transparent;
    background: linear-gradient(97deg,
      var(--teal-200) 4%, var(--teal-400) 52%, var(--teal-300) 96%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.bp-meta {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 28px;
  margin-top: 22px;
  padding-top: 18px;
  color: rgba(255, 255, 255, .6);
  font-size: 14.5px;
}
.bp-meta::before { /* короткая затухающая teal-линия над метой */
  content: '';
  position: absolute; top: 0; left: 2px;
  width: 46px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal-400), rgba(26, 188, 156, 0));
}
.bp-meta-item { display: inline-flex; align-items: center; gap: 9px; }
.bp-meta-item svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--teal-300);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* время чтения — четвёртый элемент мета-строки;
   число подставляет blog-post.js */
.bp-read[hidden] { display: none; }
.bp-read b { color: #fff; font-weight: 600; }

/* — Текст статьи ————————————————————————————————————————— */
.bp-body { padding: 36px 0 20px; }
.bp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  column-gap: 56px;
  row-gap: 44px;
  align-items: start;
}
.bp-layout > * { min-width: 0; }  /* иначе pre в код-блоках распирает колонку на мобиле */
.bp-content {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-800);
}
.bp-content p { margin: 0 0 18px; }
.bp-lead {
  font-size: 19px; line-height: 1.7;
  color: var(--ink-700);
}
.bp-content h2 {
  position: relative;
  margin: 38px 0 16px;
  padding-left: 15px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 700; line-height: 1.25;
  color: var(--ink-900);
}
.bp-content h2::before {
  content: '';
  position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 2px;
  background: var(--teal-500);
}
.bp-content a {
  color: var(--teal-700);
  text-decoration: underline;
  text-decoration-color: rgba(26, 188, 156, .35);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.bp-content a:hover { color: var(--teal-600); text-decoration-color: currentColor; }
.bp-content :not(pre) > code {
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--teal-50);
  outline: 1px solid var(--teal-100); outline-offset: -1px;
  color: var(--teal-800);
  font-family: var(--font-mono);
  font-size: .86em;
  cursor: pointer;  /* клик — копирование (blog-post.js) */
  transition: background-color .18s ease, color .18s ease, outline-color .18s ease;
}
.bp-content :not(pre) > code:hover { outline-color: var(--teal-400); }
.bp-content :not(pre) > code.is-copied {
  background: var(--teal-500);
  outline-color: var(--teal-500);
  color: #fff;
}

/* — Таблица в статье ————————————————————————————————————
   Карточку рисует обёртка .bp-table-wrap: её же скроллит на
   узких экранах. Обёртку ставит blog-post.js (в MODX контент
   [[*content]] может прийти с «голым» <table>). */
.bp-table-wrap {
  margin: 24px 0 28px;
  overflow-x: auto;
  background: var(--white);
  border-radius: var(--radius);
  outline: 1px solid var(--fq-line); outline-offset: -1px;
  box-shadow: 0 18px 36px -30px rgba(20, 45, 40, .4);
}
.bp-content table {
  width: 100%;
  min-width: 480px;   /* на мобильных — скролл, а не сжатие */
  border-collapse: collapse;
  font-size: 15px; line-height: 1.55;
}
.bp-content th,
.bp-content td {
  padding: 11px 16px;
  text-align: left; vertical-align: top;
  border-top: 1px solid var(--fq-line);
}
.bp-content thead th {
  border-top: 0;
  background: var(--paper);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-700);
  white-space: nowrap;
}
.bp-content tbody tr:nth-child(even) { background: rgba(247, 251, 250, .7); }
.bp-content tbody tr { transition: background-color .18s ease; }
.bp-content tbody tr:hover { background: rgba(26, 188, 156, .06); }
.bp-content td code { white-space: nowrap; }

/* — Заметки-коллауты ————————————————————————————————————— */
.bp-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 22px 0 24px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--teal-50);
  outline: 1px solid var(--teal-100); outline-offset: -1px;
}
.bp-note > svg {
  flex: none;
  width: 20px; height: 20px; margin-top: 3px;
  fill: none; stroke: var(--teal-600);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bp-note span { color: var(--ink-700); }
.bp-note a { font-weight: 600; }

/* — Список параметров ————————————————————————————————————— */
.bp-params ul {
  display: grid; gap: 10px;
  margin: 14px 0 18px; padding: 0;
  list-style: none;
}
.bp-params li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--white);
  outline: 1px solid var(--fq-line); outline-offset: -1px;
}
.bp-params li code { flex: none; }
.bp-params li span { color: var(--text-muted); }

/* — Код-блок: тёмная карточка с шапкой и копированием ———— */
.code-block {
  margin: 24px 0 28px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #131C1E;
  outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -1px;
  box-shadow: 0 26px 50px -32px rgba(20, 45, 40, .55);
}
.code-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 10px 9px 18px;
  background: rgba(255, 255, 255, .045);
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}
.code-block-lang {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-300);
}
.code-block-lang::before {
  content: '';
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--teal-400);
  box-shadow: 0 0 10px rgba(26, 188, 156, .8);
}
.code-block-copy {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: transparent;
  color: #A9BBB7;
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.code-block-copy svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.code-block-copy .ico-check { display: none; }
.code-block-copy:hover { color: #fff; border-color: var(--teal-400); }
.code-block.is-copied .code-block-copy {
  color: var(--teal-300);
  border-color: rgba(64, 205, 176, .5);
  background: rgba(26, 188, 156, .12);
}
.code-block.is-copied .ico-copy { display: none; }
.code-block.is-copied .ico-check { display: block; }
.code-block pre {
  margin: 0; padding: 18px 22px;
  overflow: auto;
  max-height: 520px;
  font-family: var(--font-mono);
  font-size: 13.75px; line-height: 1.7;
  tab-size: 4;
  color: #D9E4E1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.code-block pre::-webkit-scrollbar { height: 10px; width: 10px; }
.code-block pre::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255, 255, 255, .16); }
.code-block pre::-webkit-scrollbar-track { background: transparent; }
.code-block pre code {
  font: inherit; white-space: pre;
  background: none; padding: 0; color: inherit;
}

/* — Тема подсветки Prism — ink/teal (One-Dark-подобная) —— */
.code-block .token.comment, .code-block .token.prolog,
.code-block .token.cdata { color: #5E7370; font-style: italic; }
.code-block .token.punctuation { color: #7E928E; }
.code-block .token.keyword, .code-block .token.tag,
.code-block .token.selector, .code-block .token.important,
.code-block .token.atrule { color: #4FD1B5; }
.code-block .token.attr-name, .code-block .token.number,
.code-block .token.boolean, .code-block .token.variable { color: #E8A878; }
.code-block .token.string, .code-block .token.attr-value,
.code-block .token.char, .code-block .token.regex { color: #E4C77E; }
.code-block .token.property, .code-block .token.class-name { color: #7ADCC3; }
.code-block .token.function, .code-block .token.builtin { color: #58B7C6; }
.code-block .token.operator, .code-block .token.entity, .code-block .token.url { color: #93A8A4; }
/* язык modx (регистрируется в blog-post.js) */
.code-block .token.modx-tag .token.name { color: #4FD1B5; font-weight: 600; }
.code-block .token.modx-tag .token.param { color: #58B7C6; }
.code-block .token.modx-tag .token.modifier,
.code-block .token.modx-tag .token.filter { color: #E8A878; }
.code-block .token.modx-tag .token.string { color: #E4C77E; }
.code-block .token.modx-tag .token.operator { color: #93A8A4; }

/* — Иллюстрация в тексте ————————————————————————————————— */
.bp-fig { margin: 28px 0; }
.bp-fig img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  outline: 1px solid var(--fq-line); outline-offset: -1px;
  box-shadow: 0 26px 52px -34px rgba(27, 50, 45, .4);
  cursor: zoom-in;
}

/* — Лайтбокс ————————————————————————————————————————————— */
.bp-lb {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
  background: rgba(27, 32, 32, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.bp-lb.is-open { opacity: 1; visibility: visible; }
.bp-lb img {
  max-width: 92vw; max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
  transform: scale(.965);
  transition: transform .28s ease;
}
.bp-lb.is-open img { transform: scale(1); }
.bp-lb-close {
  position: absolute; top: 18px; right: 18px;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.bp-lb-close:hover { background: var(--teal-500); border-color: var(--teal-500); }
.bp-lb-close svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round;
}

/* — Сайдбар: мини-CTA (компактная версия тёмного .ct) — */
.bp-side {
  position: sticky;
  top: calc(var(--header-h) + 22px);
}

/* — Меню разделов блога, 2 уровня: белые карды. Текущий раздел
   записи развёрнут (is-open ставится на сервере), соседние
   свёрнуты; клик по заголовку — аккордеон (blog-post.js).
   Активный подраздел — teal-пилюля ——————————————————————— */
.bp-menu { margin: 0 0 22px; }
.bp-menu-sec {
  background: #fff;
  border: 1px solid var(--fq-line);
  border-radius: 16px;
  box-shadow: 0 20px 44px -34px rgba(16, 42, 36, .4);
}
.bp-menu-sec + .bp-menu-sec { margin-top: 12px; }
.bp-menu-h { margin: 0; }
.bp-menu-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border: 0; background: none;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-600);
  cursor: pointer;
}
.bp-menu-btn svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--ink-300);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s ease, stroke .2s ease;
}
.bp-menu-btn:hover svg { stroke: var(--teal-500); }
.bp-menu-sec.is-open .bp-menu-btn svg { transform: rotate(180deg); stroke: var(--teal-500); }
/* плавное раскрытие: 0fr → 1fr (без магических max-height) */
.bp-menu-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.bp-menu-sec.is-open .bp-menu-sub { grid-template-rows: 1fr; }
.bp-menu-sub-in { overflow: hidden; min-height: 0; }
.bp-menu-list { margin: 0; padding: 2px 10px 12px; list-style: none; }
.bp-menu-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px; line-height: 1.45;
  color: var(--ink-700);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.bp-menu-list a:hover { background: rgba(26, 188, 156, .08); color: var(--teal-700); }
.bp-menu-list a.is-active {
  background: rgba(26, 188, 156, .12);
  color: var(--teal-700);
  font-weight: 600;
}
/* без JS меню не интерактивно — показываем все разделы раскрытыми */
.bp:not(.bp-js) .bp-menu-sub { grid-template-rows: 1fr; }

.bp-cta {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 28px;
  border-radius: 18px;
  background:
    radial-gradient(360px 220px at 6% -22%, rgba(26, 188, 156, .30), transparent 62%),
    radial-gradient(320px 240px at 108% 118%, rgba(26, 188, 156, .22), transparent 65%),
    linear-gradient(165deg, var(--ink-900) 0%, var(--ink-950) 100%);
  color: #fff;
  box-shadow: 0 32px 64px -36px rgba(16, 42, 36, .8);
}
.bp-cta-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(460px 340px at 82% -8%, #000 18%, transparent 78%);
  mask-image: radial-gradient(460px 340px at 82% -8%, #000 18%, transparent 78%);
  pointer-events: none;
}
.bp-cta > *:not(.bp-cta-grid) { position: relative; }
.bp-cta-console {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.5;
  white-space: nowrap; overflow: hidden;
}
.bp-cta-console .g { color: var(--teal-400); font-weight: 700; }
.bp-cta-console .c { color: #fff; font-weight: 600; }
.bp-cta-console .u { color: rgba(255, 255, 255, .45); }
.bp-cta-console .s { color: #8FE8D2; }
.bp-cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 23px; font-weight: 700;
  line-height: 1.22; letter-spacing: -.01em;
}
.bp-cta-text {
  margin: 12px 0 0;
  font-size: 14.5px; line-height: 1.62;
  color: rgba(255, 255, 255, .62);
}
.bp-cta-btn {
  width: 100%; justify-content: center;
  margin-top: 22px;
  padding: 13px 20px;
  font-size: 14px;
}
.bp-cta-note {
  display: flex; align-items: center; gap: 8px;
  margin: 15px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
}
.bp-cta-note svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--teal-300);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* — Теги и файлы записи —————————————————————————————————
   Отдельные чанки после [[*content]]; .bp-extra занимает
   только колонку статьи (grid-column: 1) — под сайдбар
   блоки не попадают. */
.bp-extra {
  grid-column: 1;
  padding-top: 22px;
  border-top: 1px solid var(--fq-line);
}
.bp-tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px;
}
.bp-tags-label,
.bp-files-label {
  display: inline-flex; align-items: center; gap: 7px;
  margin-right: 2px;
  color: var(--text-muted);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.bp-tags-label svg,
.bp-files-label svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.bp-tag {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--teal-50);
  outline: 1px solid var(--teal-100); outline-offset: -1px;
  color: var(--teal-800);
  font-size: 13.5px; font-weight: 600; line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, outline-color .2s ease,
              translate .2s ease, box-shadow .2s ease;
}
.bp-tag:hover {
  background: var(--teal-500);
  outline-color: var(--teal-500);
  color: #fff;
  translate: 0 -1px;
  box-shadow: 0 10px 22px -12px rgba(26, 188, 156, .65);
}
.bp-files {
  display: flex; flex-direction: column; align-items: stretch;
  margin-top: 24px;
}
.bp-file {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--white);
  outline: 1px solid var(--fq-line); outline-offset: -1px;
  text-decoration: none;
  transition: outline-color .2s ease, box-shadow .2s ease, translate .2s ease;
}
.bp-file + .bp-file { margin-top: 10px; }
.bp-file:hover {
  outline-color: var(--teal-400);
  box-shadow: 0 14px 30px -22px rgba(26, 188, 156, .55);
  translate: 0 -1px;
}
.bp-file-ico {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--teal-50);
  outline: 1px solid var(--teal-100); outline-offset: -1px;
}
.bp-file-ico svg {
  width: 19px; height: 19px;
  fill: none; stroke: var(--teal-600);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.bp-file-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-file-name {
  font-family: var(--font-mono);
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}
.bp-file-size { font-size: 12.5px; color: var(--text-muted); }
.bp-file-dl {
  flex: none; margin-left: auto;
  width: 18px; height: 18px;
  fill: none; stroke: var(--text-muted);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: color .2s ease, translate .2s ease;
}
.bp-file:hover .bp-file-dl { color: var(--teal-600); translate: 0 2px; }

/* — Подвал статьи: «Ранее/Следующая» ————————————————— */
.bp-foot {
  /* только колонка статьи: иначе разделитель тянется под сайдбар */
  grid-column: 1;
  padding: 30px 0 8px;
  border-top: 1px solid var(--fq-line);
}
.bp-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.bp-nav-card {
  display: inline-flex; flex-direction: column; gap: 8px;
  max-width: 440px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--white);
  outline: 1px solid var(--fq-line); outline-offset: -1px;
  text-decoration: none;
  transition: outline-color .25s ease, box-shadow .25s ease, translate .25s ease;
}
.bp-nav-card:hover {
  outline-color: var(--teal-400);
  box-shadow: 0 18px 38px -26px rgba(26, 188, 156, .5);
  translate: 0 -2px;
}
.bp-nav-label {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--teal-700);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.bp-nav-label svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .25s ease;
}
.bp-nav-card:hover .bp-nav-label svg { translate: -3px 0; }
.bp-nav-title {
  font-family: var(--font-display);
  font-size: 17.5px; font-weight: 700; line-height: 1.3;
  color: var(--ink-900);
}
/* карточка «Следующая» — зеркальная: справа, стрелка вправо */
.bp-nav-card.bp-nav-next {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}
.bp-nav-card.bp-nav-next .bp-nav-label svg { transform: scaleX(-1); }
.bp-nav-card.bp-nav-next:hover .bp-nav-label svg { translate: 3px 0; }

/* — Читайте также ———————————————————————————————————————— */
.bp-rel { background: var(--paper); padding: 70px 0 78px; }
.bp-rel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 26px;
}
.bp-rel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700; line-height: 1.2;
  color: var(--ink-900);
}
.bp-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
.bp-rel .fq-post { height: 100%; }

/* — Reveal записи (.bp-js/.bp-on ставит blog-post.js) ———— */
.bp-js .bp-anim {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s ease var(--d, 0ms), translate .6s ease var(--d, 0ms);
}
.bp-js .bp-anim.bp-on { opacity: 1; translate: 0 0; }

/* — Адаптив —————————————————————————————————————————————— */
@media (max-width: 1023px) {
  .bp-layout { grid-template-columns: 1fr; }
  .bp-side { position: static; max-width: 560px; }
  .bp-hero { padding-top: 24px; }
  .bp-crumbs-list [aria-current] { max-width: 260px; }
}

@media (max-width: 640px) {
  .bp-top { padding: 20px 0 40px; }
  .bp-crumbs-list { font-size: 12.5px; gap: 2px 7px; }
  .bp-crumbs-list [aria-current] { max-width: 150px; }
  .bp-hero { padding-top: 20px; }
  .bp-meta { margin-top: 18px; padding-top: 14px; gap: 10px 20px; font-size: 13.5px; }
  .bp-meta-item svg { width: 15px; height: 15px; }
  .bp-body { padding-top: 26px; }
  .bp-content { font-size: 15.5px; }
  .bp-lead { font-size: 17px; }
  .bp-note { padding: 14px 15px; gap: 10px; }
  .bp-params li { padding: 10px 13px; }
  .code-block pre { padding: 14px 15px; font-size: 12.5px; max-height: 420px; }
  .code-block-copy span { display: none; }
  .code-block-copy { padding: 7px 10px; }
  .bp-side { max-width: none; }
  .bp-cta { padding: 22px 20px 24px; }
  .bp-foot { padding-top: 24px; }
  .bp-nav { flex-direction: column; align-items: stretch; }
  .bp-nav-card { max-width: none; width: 100%; padding: 16px 18px; }
  .bp-nav-card.bp-nav-next { margin-left: 0; align-items: flex-start; text-align: left; }
  .bp-tags { align-items: flex-start; }
  .bp-file { padding: 11px 13px; gap: 12px; }
  .bp-file-ico { width: 36px; height: 36px; }
  .bp-rel { padding: 54px 0 60px; }
}

/* — Reduced motion ——————————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  /* универсальный hero: декоративных анимаций нет,
     вход копи (.swa-rv) гасит общий блок ниже */
  .bp-js .bp-anim { opacity: 1; translate: none; transition: none; }
  .bp-lb, .bp-lb img { transition: none; }
  .bp-fig img, .bp-nav-card, .bp-tag, .bp-file { transition: none; }
  .bp-menu-sub, .bp-menu-btn svg, .bp-menu-list a { transition: none; }
  .bp-content tbody tr { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   СТРАНИЦА КОНТАКТОВ (contacts.html)
   Hero (.cn-top) — тёмный, в языке страниц услуг: .im-hero--dark
   + общие .swa-* (аврора/сетка/зерно), каскад входа .swa-rv.
   Справа — «панель связи» .cn-pcard: часы UTC+7, бейдж графика
   и обещание-срок оживляют contacts.js; панель вобрала бывшие
   карточки контактов (режим/локация/написать) — отдельная
   секция .cn-cards удалена, ритм страницы: hero → форма.
   Форма .cn-* — визуальный близнец полей модалки: токены
   --cn-* повторяют --mf-* (#contact-modal), классы изолированы,
   чтобы тянуть форму можно было без модалки.
   Данные — со страницы «Контакты» текущего modxdevpro.ru.
   ══════════════════════════════════════════════════════════ */

/* ── HERO: правая колонка шире базовой .im-hero--dark — под
   панель связи (та же специфичность, что у включающего правила,
   урок Task 40); сброс на ≤1023 — в медиа ниже — */
.cn-top.im-hero--dark .im-hero-in {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 470px);
}

/* — Панель связи: стеклянная карточка (рецепт .sup-panel-card)
   + гало/кольцо из общих .swa-*. Внутри — живой слой (часы,
   бейдж, обещание — contacts.js) и факты/каналы. Панель
   содержит реальные ссылки — НЕ aria-hidden. Без JS показаны
   нейтральные значения из HTML («--:--», «Сейчас на связи»). — */
.cn-panel {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
}
.cn-panel-deco {
  position: absolute; inset: -36px -30px;
  display: grid; place-items: center;
  pointer-events: none;
}
.cn-panel-deco .swa-halo { opacity: .8; }

.cn-pcard {
  position: relative;
  width: min(446px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(152deg,
    rgba(255, 255, 255, .085) 0%,
    rgba(26, 188, 156, .055) 52%,
    rgba(255, 255, 255, .03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 34px 80px -36px rgba(3, 16, 13, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 18px 18px 20px;
}
/* блик по стеклу — общий приём */
.cn-pcard::after {
  content: '';
  position: absolute; top: 9px; left: 9%; right: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
}

/* шапка-хром: точки + название + online с пульс-кольцом */
.cn-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.cn-chrome-dots { display: inline-flex; gap: 6px; }
.cn-chrome-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.cn-chrome-name {
  flex: 1; min-width: 0;
  font-size: 12px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cn-live {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 10.5px/1 'Roboto', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-300);
}
.cn-live i {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-300);
  box-shadow: 0 0 10px rgba(26, 188, 156, .9);
}
.cn-live i::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(26, 188, 156, .7);
  animation: cn-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes cn-ping {
  0%       { transform: scale(.5); opacity: 1; }
  75%,100% { transform: scale(1.7); opacity: 0; }
}

/* часы + бейдж статуса: главная зона карточки.
   Часы показывает UTC+7 посетителя независимо от его пояса;
   без JS высота зарезервирована, «--:--» — нейтральное значение */
.cn-now {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding: 16px 2px 0;
}
.cn-clock-label {
  display: block;
  font: 600 11px/1 'Roboto', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.cn-clock {
  display: block;
  min-height: 46px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: .01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cn-badge {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(122, 220, 198, .38);
  background: rgba(26, 188, 156, .13);
  font: 600 12.5px/1 'Roboto', sans-serif;
  color: var(--teal-200);
}
.cn-badge-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal-300);
  box-shadow: 0 0 10px rgba(26, 188, 156, .9);
}
.cn-badge-dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(26, 188, 156, .7);
  animation: cn-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
/* вне графика: бейдж гаснет, пульс убран */
.cn-badge.is-off {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .62);
}
.cn-badge.is-off .cn-badge-dot {
  background: rgba(255, 255, 255, .35);
  box-shadow: none;
}
.cn-badge.is-off .cn-badge-dot::after { content: none; }

/* строка-обещание: живой срок от contacts.js */
.cn-promise {
  margin: 10px 2px 0;
  font-size: 13px; line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}

/* недельная полоска: рабочие дни подсвечены, «сегодня» — кольцо */
.cn-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 16px;
}
.cn-day {
  display: grid; place-items: center;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
  font: 600 11.5px/1 'Roboto', sans-serif;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .35);
}
.cn-day.is-work {
  border-color: rgba(26, 188, 156, .30);
  background: linear-gradient(180deg, rgba(26, 188, 156, .22), rgba(26, 188, 156, .08));
  color: var(--teal-200);
}
.cn-day.is-today {
  border-color: rgba(122, 220, 198, .8);
  box-shadow:
    0 0 0 1px rgba(122, 220, 198, .8),
    0 0 14px -2px rgba(26, 188, 156, .55);
  color: #fff;
}

/* факты: иконка + подпись + значение (рецепт .sup-row) */
.cn-rows {
  display: grid; gap: 9px;
  margin: 16px 0 0;
  padding: 0; list-style: none;
}
.cn-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
}
.cn-row svg {
  width: 16px; height: 16px; flex: none;
  stroke: var(--teal-300);
}
.cn-row span {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: rgba(255, 255, 255, .8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cn-row b {
  flex: none;
  font-size: 12.5px; font-weight: 600; color: #fff;
  white-space: nowrap;
}

/* каналы: стеклянные пилюли, hover — только translate (урок 41) */
.cn-chan {
  margin-top: 15px;
  padding: 14px 2px 0;
  border-top: 1px dashed rgba(255, 255, 255, .13);
}
.cn-chan-label {
  display: block;
  font: 600 11px/1 'Roboto', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.cn-chan-links {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}
.cn-chan-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  font: 600 13px/1 'Roboto', sans-serif;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease, translate .18s ease;
}
.cn-chan-link svg {
  width: 13px; height: 13px;
  stroke: currentColor;
  transition: translate .2s ease;
}
.cn-chan-link:hover {
  border-color: var(--teal-400);
  background: rgba(26, 188, 156, .15);
  color: var(--teal-200);
  translate: 0 -2px;
}
.cn-chan-link:hover svg { translate: 1px -1px; }

/* — Секция формы — */
.cn-form-sec {
  background: var(--paper);
  padding: 88px 0 112px;
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.cn-form-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.cn-form-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 33px);
  font-weight: 700; line-height: 1.18;
  color: var(--ink-900);
}
.cn-form-text {
  margin: 16px 0 0;
  max-width: 460px;
  font-size: 16px; line-height: 1.62;
  color: var(--ink-500);
}
.cn-check {
  margin: 26px 0 0; padding: 0;
  list-style: none;
  display: grid; gap: 13px;
}
.cn-check li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-700);
}
.cn-check svg {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  stroke: var(--teal-600);
}

/* карточка формы: токены --cn-* = значения --mf-* модалки;
   мосты --primary/--text-light/--border-active — как в #contact-modal,
   без них чекбокс донора теряет цвета (стили .checkbox-wrapper-30
   объявлены глобально, а переменные были замкнуты на модалку) */
.cn-form-card {
  --cn-ink: #242A29;
  --cn-ink-2: #525E5D;
  --cn-ink-3: #717D7C;
  --cn-green: var(--teal-700);
  --cn-green-2: #0F6E5D;
  --cn-field-bg: #F4F8F7;
  --cn-border: #D8E2E0;
  --cn-err: #D92D20;
  --cn-radius-in: 12px;
  --primary: var(--cn-green);
  --primary-dark: var(--cn-green-2);
  --text-light: var(--cn-ink-2);
  --border-active: var(--cn-green);
  background: #fff;
  border: 1px solid #E3ECE8;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 26px 52px -34px rgba(16, 42, 36, .45);
}
.cn-fields {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
.cn-field { display: flex; flex-direction: column; min-width: 0; }
.cn-field--wide { grid-column: 1 / -1; }
.cn-label {
  margin-bottom: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--cn-ink);
}
.cn-label small { font-size: 12.5px; font-weight: 400; color: var(--cn-ink-2); }
.cn-label i { font-style: normal; color: var(--teal-600); }
.cn-input, .cn-textarea {
  width: 100%;
  font: 400 16px/1.45 'Roboto', Arial, sans-serif;
  color: var(--cn-ink);
  background: var(--cn-field-bg);
  border: 1.5px solid var(--cn-ink-3);
  border-radius: var(--cn-radius-in);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cn-input  { height: 52px; padding: 0 16px; }
.cn-textarea { padding: 14px 16px; resize: vertical; min-height: 96px; }
.cn-input::placeholder, .cn-textarea::placeholder { color: var(--cn-ink-2); }
.cn-input:hover, .cn-textarea:hover { border-color: #5A6765; }
.cn-input:focus, .cn-textarea:focus {
  outline: none;
  border-color: var(--cn-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(17, 136, 113, .14);   /* кольцо как в модалке */
}
/* HTML5-валидация в статике: подсветка невалидных */
.cn-input.is-bad, .cn-textarea.is-bad { border-color: var(--cn-err); background: #fff5f4; }
.cn-input.is-bad:focus, .cn-textarea.is-bad:focus { box-shadow: 0 0 0 4px rgba(217, 45, 32, .12); }

.cn-error {
  display: none;
  margin-top: 6px;
  font-size: 13px; line-height: 1.4;
  color: var(--cn-err);
}
.cn-error.is-on { display: block; }

/* согласие: та же раскладка, что .mf-agree в модалке (flex + gap 12);
   обёртки донора сохранены (.form-field--checkbox, .checkbox-wrapper-30) */
.cn-agree {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 24px;
}
.cn-agree .checkbox-wrapper-30 { flex: 0 0 auto; }
.cn-agree-err { margin: 8px 0 0 34px; }
/* ошибка согласия: краснеет подпись и рамка чекбокса —
   как .mf-agree.is-error в модалке (JS страницы ставит .is-on
   тексту ошибки, состояние подхватывается через :has) */
.cn-agree:has(+ .cn-agree-err.is-on) .form-checkbox-label { color: var(--cn-err); }
.cn-agree:has(+ .cn-agree-err.is-on) .checkbox input { border-color: var(--cn-err); }

.cn-submit-row {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 24px;
}
.cn-submit {
  position: relative; overflow: hidden;
  width: 100%;
  height: 54px;
  padding: 0 28px;
  border: 0; border-radius: 14px; cursor: pointer;
  font: 600 16px/1 'Roboto', sans-serif; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--cn-green), var(--cn-green-2));
  box-shadow:
    0 14px 28px -10px rgba(17, 136, 113, .55),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .18s ease, box-shadow .22s ease, opacity .2s ease;
}
/* блик, пробегающий по кнопке при наведении — как у .mf-submit */
.cn-submit::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  left: -80px; transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.cn-submit:hover::after { left: calc(100% + 30px); }
.cn-submit svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  transition: transform .2s ease;
}
.cn-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -10px rgba(17, 136, 113, .6), inset 0 1px 0 rgba(255, 255, 255, .2); }
.cn-submit:hover svg { transform: translateX(3px); }
.cn-submit:active { transform: translateY(0) scale(.985); }
.cn-submit:focus-visible { outline: 3px solid var(--cn-green-2); outline-offset: 3px; }
.cn-submit:disabled { opacity: .68; cursor: default; transform: none; }
.cn-micro {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--cn-ink-2);
}
.cn-micro svg { width: 14px; height: 14px; stroke: var(--cn-green); flex: 0 0 auto; }

/* успех — 1:1 как в модалке: контейнер несёт классы .cn-success
   (механика [hidden]) + .mf-success (вся раскладка/анимации модалки
   из раздела «МОДАЛЬНАЯ ФОРМА», один источник правды). Токены
   модалки продублированы — вне #contact-modal они не видны;
   show-триггеры анимаций (галочка рисуется, конфетти разлетается)
   — по :not([hidden]) вместо .mf-overlay.is-success. */
.cn-success {
  --mf-ink:      #242A29;
  --mf-ink-2:    #525E5D;
  --mf-green:    #118871;
  --mf-green-2:  #0F6E5D;
  --mf-green-3:  #0D594B;
  --mf-green-bg: rgba(26, 188, 156, .09);
  --mf-ease-pop: cubic-bezier(.22, 1.2, .36, 1);
}
.cn-success[hidden] { display: none; }
.cn-success:not([hidden]) { display: flex; }
.cn-success:not([hidden]) .mf-success-badge svg path { animation: mf-draw .45s ease .25s forwards; }
.cn-success:not([hidden]) .mf-confetti i { animation: mf-pop .9s var(--mf-ease-pop) .3s forwards; }

/* — Адаптив — */
@media (max-width: 1023px) {
  .cn-top.im-hero--dark .im-hero-in { grid-template-columns: 1fr; row-gap: 44px; }
  .cn-form-grid { grid-template-columns: 1fr; gap: 40px; }
  .cn-form-text { max-width: 560px; }
}
@media (max-width: 640px) {
  .cn-pcard { padding: 16px 15px; }
  .cn-now { flex-wrap: wrap; row-gap: 10px; }
  .cn-clock { font-size: 38px; min-height: 40px; margin-top: 6px; }
  .cn-week { gap: 4px; }
  .cn-day { height: 28px; border-radius: 8px; font-size: 11px; }
  .cn-rows span { font-size: 12.5px; }
  .cn-rows b { font-size: 12px; }
  .cn-form-sec { padding: 64px 0 80px; }
  .cn-form-card { padding: 24px 20px; }
  .cn-fields { grid-template-columns: 1fr; gap: 18px; }
  .cn-submit { width: 100%; }
  .cn-micro { justify-content: center; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .cn-live i::after, .cn-badge-dot::after { animation: none; }
  .cn-js [data-cn-reveal] { transition: none; }
  .cn-submit, .cn-submit svg { transition: none; }
  .cn-chan-link, .cn-chan-link svg { transition: none; }
  .cn-submit::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА КЕЙСА (case.html)
   Hero (.kc-top) — тёмный, в языке страниц услуг/портфолио:
   .im-hero--dark + общие .swa-* (авроры, сетка, зерно), высота
   ровно в первый экран, каскад входа .swa-rv. Справа — «Паспорт
   проекта» .kc-pass: УНИВЕРСАЛЬНАЯ правая часть hero любого
   кейса — одна структура бланка (поля с пунктирными лидерами,
   блок результата, штрих-код), меняются только значения (TV).
   Печать «ЗАПУЩЕНО» ставится ударом, медаль-печать с бегущей
   по кругу надписью вращается, чипы гарантий парят. Демо-
   значения согласованы с .kc-metrics ниже; в MODX паспорт —
   статичный чанк, значения — TV.
   Структура подачи: hero с результатом → факты → задача →
   что сделали → скриншоты → результат в цифрах → отзыв →
   другие кейсы (карточки .cs из портфолио).
   При интеграции в MODX Revolution все данные — TV/чанки
   (см. комментарий в начале <main> в case.html).
   ══════════════════════════════════════════════════════════ */

/* правая колонка шире базовой .im-hero--dark — под панель;
   та же специфичность, что у включающего правила (урок Task 40) */
.kc-top.im-hero--dark .im-hero-in {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
}
/* overflow:hidden не наследуется: секция новая (не .im-hero) —
   без него авроры/кольцо дают ovx (урок Task 42) */
.kc-top { position: relative; overflow: hidden; }

/* — Светлая правая часть hero. Родилось на кейсе «Дивный улей»
   как эксперимент (.kc-top--glow — только тот кейс), по фидбеку
   «мрачновато» разослано на ВСЕ тёмные hero модификатором
   .im-hero--glow: услуги (service-web/im/support), портфолио,
   контакты, кейсы (case.html, case-fudzi75) и шапка поста
   блога (.bp-top). Слева — спокойное тёмное (свой фон секции:
   ink-950 у .im-hero--dark/.kc-top, свой градиент у .bp-top),
   правая половина заметно высветляется в цвета сайта: базовый
   градиент от ink к teal-зелёному у края, над ним свечение за
   правым визуалом, мятный полусвет сверху справа и диагональная
   вуаль; авроры/сетка/зерно .swa-bg ложатся поверх. Секции уже
   имеют position:relative + overflow:hidden; isolation — свой
   стековый контекст: слой z-index:-1 не уходит под фон секции
   и не ложится на контент (контент выше: .im-hero-in и
   .bp-top-in — z-index:1, .swa-bg/.bp-top-bg — естественный
   порядок поверх). Кейсы получают .im-hero--glow, а НЕ
   .kc-top--glow — мобильные флип-сбросы divuley (media ≤1023)
   на них не утекают. Главный hero главной не включён: там
   фото-слайды со своим scrim — слой z:-1 был бы под фото */
.kc-top--glow, .im-hero--glow { isolation: isolate; }
.kc-top--glow::before,
.im-hero--glow::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 640px at 76% 44%,
      rgba(26, 188, 156, .26), transparent 70%),
    radial-gradient(520px 400px at 94% 14%,
      rgba(114, 220, 198, .15), transparent 72%),
    linear-gradient(258deg,
      rgba(26, 188, 156, .16) 0%,
      rgba(26, 188, 156, .07) 36%,
      transparent 62%),
    linear-gradient(90deg,
      rgba(27, 32, 32, 0) 46%,
      rgba(33, 74, 63, .5) 72%,
      rgba(38, 90, 76, .9) 100%);
}

/* — «Паспорт проекта» .kc-pass: универсальная правая часть hero
   ЛЮБОГО кейса. Одна структура бланка — меняются только значения
   (в MODX — TV). Печать «ЗАПУЩЕНО», медаль-печать со бегущей
   надписью, штрих-код и чипы гарантий — константы. — */
.kc-pass {
  position: relative;
  min-width: 0;
  animation: swa-rise .9s cubic-bezier(.22, .61, .24, 1) backwards .35s;
}
/* гало + кольцо — общие .swa-*: центрируются гридом слоя
   (паттерн .swa-obj на service-web) */
.kc-pass-deco {
  position: absolute; inset: -36px -30px;
  display: grid; place-items: center;
  pointer-events: none;
}
.kc-pass-deco .swa-halo { opacity: .8; }

/* лёгкое парение всей стопки */
.kc-pass-float {
  position: relative;
  animation: kc-float 7.5s ease-in-out 2.4s infinite;
}

/* стопка документов: две подложки со сдвигом создают глубину;
   в реверсе (divuley) убраны — габариты блока данных равны
   габаритам лица со скриншотом (фидбек) */
.kc-pass-stack { position: relative; }
.kc-pass-stack::before,
.kc-pass-stack::after {
  content: '';
  position: absolute;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: linear-gradient(165deg,
    rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}
.kc-pass-stack::before { inset: 16px -14px -14px 16px; rotate: 2.4deg; }
.kc-pass-stack::after  { inset: 34px -26px -26px 34px; rotate: 5deg; opacity: .5; }
.kc-flip--rev .kc-pass-stack::before,
.kc-flip--rev .kc-pass-stack::after { content: none; }

/* сам «документ»: стекло с лёгким наклоном «на столе»; при
   наведении выравнивается и приподнимается — индивидуальные
   свойства rotate/translate, чтобы не конфликтовать с reveal
   и kc-pass-in (урок Task 41) */
.kc-pass-doc {
  position: relative; z-index: 1;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, .085) 0%,
    rgba(255, 255, 255, .04) 55%,
    rgba(26, 188, 156, .075) 100%);
  box-shadow:
    0 36px 90px -36px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  rotate: -2.5deg;
  transition:
    rotate .6s cubic-bezier(.22, .61, .24, 1),
    translate .6s cubic-bezier(.22, .61, .24, 1),
    border-color .45s ease,
    box-shadow .6s ease;
  animation: kc-pass-in .8s cubic-bezier(.22, .61, .24, 1) backwards .45s;
}
.kc-pass-doc:hover {
  rotate: 0deg;
  translate: 0 -7px;
  border-color: rgba(122, 220, 198, .34);
  box-shadow:
    0 48px 110px -38px rgba(0, 0, 0, .68),
    0 0 0 1px rgba(26, 188, 156, .14),
    0 0 54px -12px rgba(26, 188, 156, .42),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* блик по стеклу — общий swa-sheen */
.kc-pass-doc::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 90px;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .075) 46%, rgba(122, 220, 198, .10) 54%, transparent);
  animation: swa-sheen 8s ease-in-out 3s infinite;
  pointer-events: none;
}
/* вход документа: из наклона -7° в «рабочие» -2.5°;
   база = конечное состояние — без JS и при reduced-motion
   документ показан готовым */
@keyframes kc-pass-in {
  from { opacity: 0; translate: 0 26px; rotate: -7deg; }
  to   { opacity: 1; translate: 0 0; rotate: -2.5deg; }
}

/* шапка бланка: иконка + название; справа зарезервирована зона
   под печать (padding-right) */
.kc-pass-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 148px 14px 18px;
  border-bottom: 1px dashed rgba(255, 255, 255, .14);
}
.kc-pass-ico {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(122, 220, 198, .38);
  background: linear-gradient(150deg,
    rgba(26, 188, 156, .32), rgba(26, 188, 156, .12));
  box-shadow:
    0 10px 26px -10px rgba(26, 188, 156, .55),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}
.kc-pass-ico svg { width: 20px; height: 20px; stroke: var(--teal-200); }
.kc-pass-tt { min-width: 0; }
.kc-pass-tt b {
  display: block;
  font: 700 15.5px/1.2 var(--font-display);
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--white);
}
.kc-pass-tt small {
  display: block; margin-top: 3px;
  font: 600 10px/1 'Roboto', sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .42);
}

/* строки-поля: пунктирные лидеры, как в настоящем бланке.
   Значения — TV кейса; структура одна для всех страниц */
.kc-pass-rows {
  list-style: none;
  margin: 0; padding: 13px 18px 15px;
  display: grid; gap: 10px;
}
.kc-pass-rows li { display: flex; align-items: baseline; gap: 9px; }
.kc-pass-rows span {
  flex: none;
  font: 500 11.5px/1.3 'Roboto', sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.kc-pass-rows i {
  flex: 1; min-width: 12px;
  border-bottom: 1px dotted rgba(255, 255, 255, .22);
  translate: 0 -3px;
}
.kc-pass-rows b {
  min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 600 13.5px/1.3 'Roboto', sans-serif;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .93);
}

/* блок результата — «главная строка» паспорта */
.kc-pass-res {
  display: flex; align-items: center; gap: 14px;
  margin: 1px 14px 0;
  padding: 13px 15px;
  border-radius: 15px;
  border: 1px solid rgba(122, 220, 198, .34);
  background: linear-gradient(140deg,
    rgba(26, 188, 156, .22),
    rgba(26, 188, 156, .07) 55%,
    rgba(26, 188, 156, .17));
  box-shadow:
    0 14px 40px -14px rgba(26, 188, 156, .45),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  animation: kc-fade .6s ease backwards 2.05s;
}
.kc-pass-res-label {
  font: 600 10.5px/1.4 'Roboto', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-200);
}
.kc-pass-res-val {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 7px;
  font: 700 27px/1 var(--font-display);
  letter-spacing: .01em;
  color: var(--white);
  text-shadow: 0 0 26px rgba(26, 188, 156, .55);
  animation: kc-pop .5s cubic-bezier(.34, 1.56, .64, 1) backwards 2.2s;
}
.kc-pass-res-val small {
  font: 600 11px/1 'Roboto', sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-200);
}
.kc-pass-res-ico {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(122, 220, 198, .4);
  background: rgba(26, 188, 156, .14);
  animation: kc-fade .5s ease backwards 2.35s;
}
.kc-pass-res-ico svg { width: 19px; height: 19px; stroke: var(--teal-200); }

/* подвал бланка: штрих-код + номер (глиф № U+2116 проверен
   в кириллических сабсетах) */
.kc-pass-foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: 15px;
  padding: 13px 18px 15px;
  border-top: 1px dashed rgba(255, 255, 255, .14);
}
.kc-pass-bar {
  flex: none;
  display: block;
  width: 122px; height: 24px;
  /* штрих-код — inline SVG в case*.html: полоски-ректы с целыми
     координатами. Прежний repeating-linear-gradient под наклоном
     бланка (-2.5°) и в 3D-плоскости флипа пересемплировался —
     полоски становились рваными («покосило»). SVG рисуется
     векторно и остаётся ровным при любом наклоне. */
}
.kc-pass-no {
  font: 700 13.5px/1 var(--font-display);
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .62);
}
.kc-pass-no i { font-style: normal; color: rgba(255, 255, 255, .34); }

/* печать «ЗАПУЩЕНО»: ставится ударом (scale 2.2 → 1 с overshoot),
   в момент удара — вспышка-кольцо; база = конечное состояние,
   поэтому без JS и при reduced-motion печать уже стоит */
.kc-pass-stamp {
  position: absolute; top: 10px; right: 11px; z-index: 3;
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 12px 7px;
  border-radius: 11px;
  border: 2px solid rgba(122, 220, 198, .66);
  background: rgba(26, 188, 156, .07);
  box-shadow:
    0 0 26px -8px rgba(26, 188, 156, .55),
    inset 0 0 18px -10px rgba(26, 188, 156, .5);
  rotate: -12deg;
  animation: kc-stamp .55s cubic-bezier(.34, 1.56, .64, 1) backwards 1.6s;
}
/* реверс (divuley): удар раньше — пока паспорт виден до переворота (1.5с) */
.kc-flip--rev .kc-pass-stamp { animation-delay: .8s; }
.kc-pass-stamp::before {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 7px;
  border: 1px solid rgba(122, 220, 198, .32);
  pointer-events: none;
}
.kc-pass-stamp::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 16px;
  border: 1.5px solid rgba(122, 220, 198, .6);
  opacity: 0;
  animation: kc-ring .55s ease-out 1.6s;
}
.kc-flip--rev .kc-pass-stamp::after { animation-delay: .8s; }
.kc-pass-stamp b {
  font: 800 14.5px/1 var(--font-display);
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--teal-200);
  text-shadow: 0 0 18px rgba(26, 188, 156, .5);
}
.kc-pass-stamp i {
  font: 600 7.5px/1 'Roboto', sans-serif;
  font-style: normal;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  color: rgba(122, 220, 198, .62);
}
@keyframes kc-stamp {
  0%   { opacity: 0; scale: 2.2; rotate: -36deg; }
  55%  { opacity: 1; }
  100% { opacity: 1; scale: 1; rotate: -12deg; }
}
@keyframes kc-ring {
  0%   { opacity: .85; scale: .55; }
  100% { opacity: 0; scale: 1.25; }
}

/* медаль-печать в правом нижнем углу: надпись бежит по кругу
   (kc-spin), галка в центре статична */
.kc-seal {
  position: absolute; right: -26px; bottom: -20px; z-index: 4;
  display: grid; place-items: center;
  width: 98px; height: 98px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: radial-gradient(circle at 32% 28%,
    rgba(22, 46, 40, .95), rgba(8, 20, 17, .96));
  box-shadow:
    0 22px 52px -18px rgba(0, 0, 0, .65),
    0 0 36px -10px rgba(26, 188, 156, .5),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: kc-fade .7s ease backwards 2.5s;
}
.kc-seal-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: kc-spin 18s linear infinite;
}
.kc-seal-ring text {
  font: 700 8.6px 'Roboto', sans-serif;
  letter-spacing: .06em;
}
.kc-seal-check {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(122, 220, 198, .42);
  background: linear-gradient(150deg,
    rgba(26, 188, 156, .3), rgba(26, 188, 156, .12));
  box-shadow: 0 0 20px -4px rgba(26, 188, 156, .55);
}
.kc-seal-check svg { width: 15px; height: 15px; stroke: var(--teal-200); }
@keyframes kc-spin { to { transform: rotate(1turn); } }

/* плавающие чипы гарантий (константы чанка; каскад снизу слева) */
.kc-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(20, 30, 28, .72);
  box-shadow:
    0 18px 44px -18px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 600 13px/1 'Roboto', sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--white);
}
.kc-chip svg {
  width: 15px; height: 15px;
  stroke: var(--teal-300);
}
.kc-chip--term {
  left: -34px; bottom: -34px;
  animation:
    kc-fade .6s ease backwards 2.7s,
    kc-float 7s ease-in-out 3.4s infinite;
}
.kc-chip--team {
  left: -6px; bottom: -86px;
  animation:
    kc-fade .6s ease backwards 2.85s,
    kc-float 8.5s ease-in-out 3.6s infinite;
}

@keyframes kc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kc-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* — FLIP ПАСПОРТА (case-fudzi75.html — классика, case-divuley.html —
   реверс через .kc-flip--rev): правая часть hero — двусторонняя
   карточка. Лицо — скриншот главной в мини-браузере, вписан в
   размер бланка (grid-стек обеих сторон равняет высоту по
   обороту); оборот — сам паспорт. КЛАССИКА (fudzi): загрузка —
   лицо; через 1.5с case.js снимает html-класс .kc-flip-js (ставит
   инлайн-скрипт в <head> ДО первой отрисовки — без вспышки) —
   переворот к паспорту; наведение — снова лицо. РЕВЕРС (divuley,
   класс в разметке): старт сразу с паспорта (данные), через 1.5с
   case.js ставит .kc-flip-go — переворот к лицу; наведение —
   снова паспорт. База (без JS, reduced-motion) — паспорт, без
   переворотов. Печать kc-stamp: 1.6с (классика — к концу
   переворота) / 0.8с в реверсе — пока паспорт виден. — */
.kc-flip {
  position: relative;
  perspective: 1300px;
}
.kc-flip-inner {
  display: grid;
  transform-style: preserve-3d;
  transform: rotateY(180deg); /* база: паспорт (no-JS, reduce) */
  transition: transform .95s cubic-bezier(.45, .05, .18, 1);
}
/* классика (fudzi): html-класс .kc-flip-js — старт с лица */
.kc-flip-js .kc-flip-inner { transform: rotateY(0deg); }
.kc-flip.is-front .kc-flip-inner,
.kc-flip.is-live:hover .kc-flip-inner { transform: rotateY(0deg); }
/* реверс (divuley): через 1.5с case.js переворачивает карточку
   к лицу-скриншоту; наведение — снова паспорт (правила с
   повышенной специфичностью перебивают классику выше) */
.kc-flip--rev.kc-flip-go .kc-flip-inner { transform: rotateY(0deg); }
.kc-flip.kc-flip--rev.is-live:hover .kc-flip-inner { transform: rotateY(180deg); }

/* стороны в одной grid-ячейке: высота лица = высоте бланка */
.kc-flip-face {
  grid-area: 1 / 1;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* лицо: карточка-«браузер» в том же стекле, что и бланк */
.kc-flip-front {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, .085) 0%,
    rgba(255, 255, 255, .04) 55%,
    rgba(26, 188, 156, .075) 100%);
  box-shadow:
    0 36px 90px -36px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  rotate: -2.5deg;
  transform: rotateY(0deg);
  animation: kc-pass-in .8s cubic-bezier(.22, .61, .24, 1) backwards .45s;
}
/* реверс (divuley): лицо появляется переворотом, а не входом —
   анимация играла бы в скрытой стороне */
.kc-flip--rev .kc-flip-front { animation: none; }
/* блик по стеклу — тот же, что у бланка */
.kc-flip-front::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 90px;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .075) 46%, rgba(122, 220, 198, .10) 54%, transparent);
  animation: swa-sheen 8s ease-in-out 3s infinite;
  pointer-events: none;
}

/* адресная строка мини-браузера */
.kc-flip-bar {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
}
.kc-flip-dots {
  flex: none;
  display: inline-flex; gap: 5px;
}
.kc-flip-dots b {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.kc-flip-dots b:first-child { background: rgba(26, 188, 156, .8); }
.kc-flip-url {
  flex: 1; min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(8, 20, 17, .38);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  text-align: center;
  font: 500 11px/1 'Roboto', sans-serif;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .6);
}
/* скриншот: вписан в оставшуюся высоту карточки, кроп сверху */
.kc-flip-shot {
  position: relative; flex: 1; min-height: 0;
  display: block;
}
.kc-flip-shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

/* оборот: паспорт — собственных стилей лица не требует */
.kc-flip-back { transform: rotateY(180deg); }
/* внутри 3D-плоскости Chromium не сэмплит фон — blur паспорта
   не отрисовывается, стекло «прореживается». Заменяем его
   плотной матовой заливкой (послойно: родное стекло + база
   под цвет размытого фона hero с гало) */
.kc-flip .kc-pass-doc {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, .085) 0%,
      rgba(255, 255, 255, .04) 55%,
      rgba(26, 188, 156, .075) 100%),
    linear-gradient(160deg, #2e443c 0%, #17251f 58%, #1c3d33 100%);
}

/* — О проекте / Задача + карточка фактов — */
.kc-brief { background: var(--white); padding: 88px 0; }
.kc-brief-grid {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: 56px;
  align-items: start;
}
.kc-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 700; line-height: 1.2;
  color: var(--ink-900);
}
.kc-h2--task { margin-top: 44px; }
.kc-brief-copy p {
  margin: 18px 0 0;
  max-width: 620px;
  font-size: 16px; line-height: 1.7;
  color: var(--ink-700);
}
.kc-tasks {
  margin: 24px 0 0; padding: 0;
  list-style: none;
  display: grid; gap: 13px;
}
.kc-tasks li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; line-height: 1.55;
  color: var(--ink-700);
}
.kc-tasks svg {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  stroke: var(--teal-600);
}
.kc-facts {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: #fff;
  border: 1px solid #E3ECE8;
  border-radius: 20px;
  padding: 26px 26px 10px;
  box-shadow: 0 26px 52px -34px rgba(16, 42, 36, .45);
}
.kc-facts-h {
  margin: 0 0 4px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-600);
}
.kc-facts-list { margin: 0; }
.kc-fact {
  padding: 14px 0;
  border-top: 1px solid #EDF3F1;
}
.kc-facts-list .kc-fact:first-child { border-top: 0; }
.kc-fact dt {
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-300);
}
.kc-fact dd {
  margin: 5px 0 0;
  font-size: 15px; font-weight: 500; line-height: 1.45;
  color: var(--ink-900);
}
.kc-fact-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--teal-700);
  text-decoration: none; font-weight: 600;
}
.kc-fact-link svg { width: 13px; height: 13px; stroke: currentColor; transition: transform .2s ease; }
.kc-fact-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.kc-fact-link:hover svg { transform: translate(2px, -2px); }

/* — О проекте: кинетическая полоса [kbk — эксперимент на
   case-divuley; на другие кейсы переносится классами
   .kc-brief--mod / .kbk-*]. Тренд scroll-driven typography:
   слова манифеста «зажигаются» по мере скролла (JS ставит
   .kbk-live и is-lit), прожектор следует за курсором (--mx/--my),
   бегущая строка фактов уводит к «Страницам сайта». Холст
   #1B2020 продолжает hero; без JS / при reduce всё «зажжено». — */
.kc-brief.kc-brief--mod {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1B2020 0%, #1A2522 58%, #16241F 100%);
  padding: 78px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .055);
}
.kbk-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* прожектор: координаты --mx/--my ставит case.js (px);
   значения по умолчанию — стационарное свечение справа сверху */
.kbk-spot {
  position: absolute; inset: -1px;
  background: radial-gradient(680px 500px at var(--mx, 74%) var(--my, 20%),
    rgba(26, 188, 156, .21), transparent 64%);
}
/* два медленных «аврора»-пятна — рифма к свечению hero */
.kbk-halo {
  position: absolute; border-radius: 50%;
  filter: blur(72px); opacity: .55;
}
.kbk-halo--a {
  width: 540px; height: 340px; left: -150px; top: -170px;
  background: rgba(26, 188, 156, .12);
  animation: kbk-drift 17s ease-in-out infinite alternate;
}
.kbk-halo--b {
  width: 430px; height: 300px; right: -130px; bottom: 60px;
  background: rgba(114, 220, 198, .09);
  animation: kbk-drift 21s ease-in-out infinite alternate-reverse;
}
@keyframes kbk-drift { to { transform: translate(64px, 44px); } }
/* тихая точечная сетка — глубина, выцветает к низу */
.kbk-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 76%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 76%);
}
.kbk .container { position: relative; }

/* сетка полосы: манифест слева, описание + данные справа */
.kbk-grid {
  display: grid;
  grid-template-columns: 1.16fr .84fr;
  gap: 40px 72px;
  align-items: start;
}
.kbk-note {
  margin: 0;
  font-size: 15px; line-height: 1.62;
  color: rgba(208, 226, 221, .68);
}
/* разметка данных кейса: запуск / клиент / сделано (TV при интеграции) */
.kbk-data {
  margin: 26px 0 0;
}
.kbk-data > div {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0;
}
.kbk-data dt {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(208, 226, 221, .48);
}
/* точечный лидер «запуск.......2026»: тянется от лейбла до значения,
   значение прижато к правому краю колонки */
.kbk-data dt::after {
  content: '';
  flex: 1; min-width: 24px;
  height: 4px;
  background-image: radial-gradient(circle, rgba(208, 226, 221, .4) 1.25px, transparent 1.4px);
  background-size: 8px 4px;
  background-repeat: repeat-x;
  background-position: 0 center;
  transform: translateY(4px);
}
.kbk-data dd {
  margin: 0;
  font-size: 14px; font-weight: 600; line-height: 1.45;
  color: rgba(240, 250, 247, .92);
}
/* колофон: дизайн и вёрстка — студия Форествеб. Знак (три ели) и
   зелёные фирменные — взяты с forest-web.ru; hover: ели приподнимаются */
.kbk-credit {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 24px;
  text-decoration: none;
}
.kbk-credit-mark {
  flex: none;
  width: 23px; height: 28px;
  transition: transform .3s ease;
}
.kbk-credit:hover .kbk-credit-mark { transform: translateY(-3px); }
.kbk-credit-tx { display: flex; flex-direction: column; gap: 3px; }
.kbk-credit-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(208, 226, 221, .48);
}
.kbk-credit-name {
  font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  color: #73E1BA;
  transition: color .2s ease;
}
.kbk-credit:hover .kbk-credit-name { color: #F0FAF7; }

/* манифест: слова «проявляются» по мере скролла. База (без JS
   и при reduce) — зажжённое состояние; .kbk-live гасит слова
   в контур, is-lit возвращает краску (переход .5s) */
.kbk-statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.7vw, 64px);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -.015em;
  color: #F2FAF8;
}
.kbk-w { display: inline; }
.kbk-acc {
  color: var(--teal-300);
  text-shadow: 0 0 28px rgba(26, 188, 156, .35);
}
.kbk-live .kbk-w {
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 244, 240, .27);
  transition: color .5s ease, -webkit-text-stroke-color .5s ease,
    text-shadow .5s ease;
}
.kbk-live .kbk-w.is-lit {
  color: #F2FAF8;
  -webkit-text-stroke-color: rgba(230, 244, 240, 0);
}
.kbk-live .kbk-acc { color: transparent; text-shadow: none; }
.kbk-live .kbk-acc.is-lit {
  color: var(--teal-300);
  text-shadow: 0 0 28px rgba(26, 188, 156, .4);
}
/* запасной вид «погашенных» слов там, где нет text-stroke */
@supports not (-webkit-text-stroke: 1px #000) {
  .kbk-live .kbk-w { color: rgba(238, 246, 244, .15); }
  .kbk-live .kbk-w.is-lit { color: #F2FAF8; }
  .kbk-live .kbk-acc { color: rgba(114, 220, 198, .2); }
  .kbk-live .kbk-acc.is-lit { color: var(--teal-300); }
}

/* подвал полосы: цифры с count-up + приглашение к скроллу */
.kbk-foot {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 26px 40px;
  margin-top: 44px;
}
.kbk-stats { display: flex; flex-wrap: wrap; margin: 0; }
.kbk-stat { display: flex; flex-direction: column-reverse; }
.kbk-stat + .kbk-stat {
  margin-left: 28px; padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.kbk-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700; line-height: 1;
  color: var(--teal-300);
  font-variant-numeric: tabular-nums;
}
.kbk-stat dt {
  margin-top: 7px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(208, 226, 221, .5);
}
.kbk-cue {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(26, 188, 156, .42);
  background: rgba(26, 188, 156, .08);
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  color: #D9F6EE;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease;
}
.kbk-cue:hover {
  background: rgba(26, 188, 156, .16);
  border-color: rgba(114, 220, 198, .7);
}
.kbk-cue svg {
  width: 15px; height: 15px; stroke: currentColor;
  transition: transform .25s ease;
}
.kbk-cue:hover svg { transform: translate(2px, -2px); }

/* бегущая строка фактов — финал полосы, стык со «Страницами» */
.kbk-ticker {
  position: relative;
  margin-top: 56px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(13, 18, 17, .5);
  overflow: hidden;
}
.kbk-track {
  display: flex; width: max-content;
  animation: kbk-roll 32s linear infinite;
}
.kbk-ticker:hover .kbk-track { animation-play-state: paused; }
.kbk-run {
  display: flex; align-items: center; gap: 26px;
  padding-right: 26px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  color: rgba(190, 232, 221, .52);
}
.kbk-run i {
  flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal-500); opacity: .8;
}
@keyframes kbk-roll { to { transform: translateX(-50%); } }

@media (max-width: 1023px) {
  .kbk-grid { grid-template-columns: 1fr; gap: 30px; }
  .kbk-side { max-width: 560px; }
  .kbk-foot { margin-top: 38px; }
}
@media (max-width: 640px) {
  .kc-brief.kc-brief--mod { padding: 54px 0 0; }
  .kbk-grid { gap: 24px; }
  .kbk-statement { font-size: clamp(26px, 7.2vw, 32px); }
  .kbk-live .kbk-w { -webkit-text-stroke-width: .8px; }
  .kbk-data { margin-top: 20px; }
  .kbk-data dd { font-size: 13px; }
  .kbk-foot { margin-top: 30px; }
  .kbk-stat + .kbk-stat { margin-left: 18px; padding-left: 18px; }
  .kbk-stat dd { font-size: 26px; }
  .kbk-ticker { margin-top: 42px; }
}

/* — Заголовки секций — */
.kc-over2 {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-600);
}
.kc-h2-lg {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700; line-height: 1.18;
  color: var(--ink-900);
}
.kc-sec-head { margin-bottom: 40px; }

/* — Что сделали: этапы — */
.kc-work { background: var(--paper); padding: 88px 0; }
.kc-steps {
  margin: 0; padding: 0;
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.kc-step {
  display: flex; gap: 18px;
  background: #fff;
  border: 1px solid #E3ECE8;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 20px 44px -34px rgba(16, 42, 36, .4);
}
.kc-step--wide { grid-column: 1 / -1; }
.kc-step-num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; line-height: 1;
  color: var(--teal-500);
  padding-top: 3px;
}
.kc-step-h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--ink-900);
}
.kc-step-body p {
  margin: 0;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-500);
}

/* — Скриншоты — */
.kc-shots { background: var(--white); padding: 88px 0; }
.kc-shot { margin: 0; }
.kc-shot img {
  display: block;
  width: 100%; height: auto;
  border: 1px solid #E3ECE8;
  border-radius: 18px;
}
.kc-shot figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-300);
}
.kc-shots-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
/* CSS-плейсхолдеры скриншотов — при интеграции заменяются
   изображениями TV-галереи */
.kc-ph {
  display: grid; gap: 10px;
  aspect-ratio: 4 / 3;
  padding: 18px;
  border: 1px solid #E3ECE8;
  border-radius: 18px;
  background: #F4F8F7;
  overflow: hidden;
}
.kc-ph i { display: block; background: #DCE8E4; border-radius: 6px; }
.kc-ph-a { width: 38%; height: 12px; grid-column: 1 / -1; }
.kc-ph-side { display: grid; gap: 8px; align-content: start; }
.kc-ph-side i { height: 9px; }
.kc-ph-side i:nth-child(2) { width: 72%; }
.kc-ph-side i:nth-child(4) { width: 60%; }
.kc-ph-main {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; align-content: start;
}
.kc-ph-main i { height: 52px; border-radius: 10px; }
/* карточка продукции: изображение слева, текст справа */
.kc-ph--product { grid-template-columns: 1.05fr 1fr; align-content: stretch; }
.kc-ph-img { display: grid; }
.kc-ph-img i { border-radius: 12px; background: #CFE2DC; }
.kc-ph--product .kc-ph-side { align-content: start; gap: 9px; padding-top: 4px; }
.kc-ph-t { width: 70%; height: 13px !important; background: #C5DDD5 !important; }
.kc-ph--product .kc-ph-side i:not(.kc-ph-t):not(.kc-ph-btn) { height: 8px; }
.kc-ph-btn {
  height: 26px !important;
  width: 62% !important;
  border-radius: 8px !important;
  background: rgba(26, 188, 156, .28) !important;
  margin-top: 8px;
}
/* мобильная версия: узкий экран по центру */
.kc-ph--mobile { display: flex; justify-content: center; align-items: center; }
.kc-ph-phone {
  width: 46%;
  display: grid; gap: 8px; align-content: start;
  padding: 14px 12px;
  border: 1.5px solid #C9DAD5;
  border-radius: 14px;
  background: #fff;
}
.kc-ph-phone i { height: 8px; }
.kc-ph-phone .kc-ph-btn { margin-top: 6px; width: 74% !important; }
/* телефон с реальным скриншотом внутри (кейс «Фудзи»):
   высота — вся карточка, ширина — по пропорции кадра 390×844 */
.kc-ph-phone--img {
  display: block; padding: 0; overflow: hidden;
  width: auto; height: 100%;
  aspect-ratio: 390 / 844;
}
.kc-ph-phone--img img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}

/* ── Кейс: страницы сайта (.wf.kp) ───────────────────────────
   Скролл-telling как «Таймлапс» на главной: каркас .wf-* общий
   (браузер, главы, статус-бар). Здесь только скелетоны страниц
   .kp-page-* и состояния слоёв. Скелетоны — плейсхолдеры в
   языке .kc-ph; при интеграции слой заменяется на <img>.
   ──────────────────────────────────────────────────────────── */
/* якорь «Посмотреть галерею» из hero: секция не прячется под шапкой */
.wf.kp { scroll-margin-top: calc(var(--header-h) + 20px); }

/* СЛОИ КЕЙСОВ — позиционные: показывает ОБЩИЙ блок
   «экран со слоями» в стилях .wf выше. Активный слой =
   слой №N по порядку в .wf-screen (этап №N); имена
   .wf-layer--* не используются — в новом кейсе достаточно
   сложить нужные страницы слоями .wf-layer подряд
   (первый виден без JS) */

/* реальный скриншот вместо скелетона (кейс «Фудзи», case-fudzi75.html):
   кадр живого сайта на весь экран «браузера»; --phone — мобильный
   кадр по центру с сохранением пропорций */
.kp-shot { position: absolute; inset: 0; margin: 0; background: #fff; }
.kp-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.kp-shot--phone img { width: auto; margin: 0 auto; object-fit: contain; }

/* страница-скелетон на весь экран «браузера» */
.kp-page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 18px 22px 20px;
  background: #fff;
}
.kp-page i { display: block; background: #DCE8E4; border-radius: 5px; }

/* верхнее меню страницы */
.kp-nav { height: 10px; flex: 0 0 auto; background: #E7F0ED; }
/* текстовые плашки */
.kp-t { height: 8px; width: 88%; }
.kp-t--lg { height: 14px; width: 72%; background: #C5DDD5; }
.kp-t--md { height: 11px; width: 55%; background: #CFE2DC; }
.kp-t--crumb { height: 7px; width: 34%; background: #E7F0ED; }
.kp-t--short { width: 46%; }
.kp-t--price { height: 13px; width: 40%; background: #C5DDD5; }
.kp-t--total { height: 12px; width: 60%; background: #C5DDD5; }
.kp-t--on { width: 22%; background: #CFE2DC; }
/* teal-кнопка */
.kp-btn {
  height: 24px; width: 38%;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(26, 188, 156, .85), rgba(15, 110, 93, .85));
}
.kp-btn--wide { width: 100%; margin-top: auto; }

/* ── 01 · Главная: hero + ряд карточек ──────────────────── */
.kp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; flex: 1 1 auto; min-height: 0; }
.kp-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding-right: 6px; }
.kp-hero-copy .kp-btn { margin-top: 8px; }
.kp-hero-img { border-radius: 12px; background: #CFE2DC; }
.kp-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 0 0 auto; }
.kp-card { display: grid; gap: 7px; padding: 10px; border: 1px solid #E3EDE9; border-radius: 10px; background: #FBFDFC; }
.kp-card-img { height: 40px; border-radius: 7px; background: #CFE2DC; }
.kp-page--home .kp-card .kp-t { width: 78%; }

/* ── 02 · Каталог: фильтры + сетка товаров ──────────────── */
.kp-cat { display: grid; grid-template-columns: 150px 1fr; gap: 16px; flex: 1 1 auto; min-height: 0; }
.kp-filters { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid #E3EDE9; border-radius: 10px; background: #FBFDFC; }
.kp-filters i:nth-child(3) { width: 70%; }
.kp-filters i:nth-child(4) { width: 82%; }
.kp-filters i:nth-child(5) { width: 64%; }
.kp-filters i:nth-child(6) { width: 76%; }
.kp-chip {
  height: 20px; width: 58%;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(26, 188, 156, .22);
}
.kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.kp-grid .kp-card-img { height: 34px; }
.kp-grid .kp-card i:nth-child(2) { height: 7px; width: 92%; }
.kp-page--catalog .kp-t--crumb { margin-top: -4px; }

/* ── 03 · Карточка товара: фото + покупки + табы ────────── */
.kp-goods { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; flex: 1 1 auto; min-height: 0; }
.kp-goods-img { border-radius: 12px; background: #CFE2DC; }
.kp-goods-side { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.kp-goods-side i:not(.kp-t):not(.kp-btn) { height: 8px; }
.kp-goods-side i:nth-child(3) { width: 84%; }
.kp-goods-side i:nth-child(4) { width: 68%; }
.kp-goods-side .kp-t--price { margin-top: 6px; }
.kp-tabs { display: flex; gap: 14px; flex: 0 0 auto; padding-bottom: 7px; border-bottom: 1px solid #E3EDE9; }
.kp-tabs i { height: 8px; width: 16%; }
.kp-page--product > i { height: 8px; width: 92%; }
.kp-page--product > .kp-t--short { width: 46%; }

/* ── 04 · Оформление заказа: форма + итог ───────────────── */
.kp-order { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; flex: 1 1 auto; min-height: 0; }
.kp-form { display: grid; gap: 6px; align-content: start; }
.kp-form .kp-t { margin-top: 8px; width: 32%; }
.kp-form .kp-t:first-child { margin-top: 0; }
.kp-field { height: 26px; border: 1px solid #D5E4DF; border-radius: 8px; background: #FBFDFC; }
.kp-field--area { height: 44px; }
.kp-sum {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px;
  border: 1px solid #E3EDE9;
  border-radius: 10px;
  background: #FBFDFC;
}
.kp-sum > i:nth-child(2) { width: 74%; }
.kp-sum > i:nth-child(3) { width: 84%; }
.kp-sum > i:nth-child(4) { width: 66%; }
.kp-sum .kp-t--total { margin-top: 4px; padding-top: 10px; border-top: 1px solid #E3EDE9; }

/* ── Адаптив: скелетоны упрощаются ────────────────────────── */
@media (max-width: 1023px) {
  .kp-page { padding: 14px 16px 16px; gap: 10px; }
  .kp-cat { grid-template-columns: 110px 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .kp-page { padding: 10px 12px 12px; gap: 8px; }
  .kp-nav { height: 7px; }
  .kp-t { height: 6px; }
  .kp-t--lg { height: 10px; }
  .kp-t--md { height: 8px; }
  .kp-hero { gap: 8px; }
  .kp-hero-copy { gap: 6px; }
  .kp-hero-copy .kp-btn { height: 14px; }
  .kp-card { padding: 6px; gap: 5px; border-radius: 8px; }
  .kp-card-img { height: 20px; border-radius: 5px; }
  .kp-grid .kp-card-img { height: 18px; }
  .kp-cards3 { gap: 7px; }
  .kp-grid { gap: 7px; }
  .kp-cat { grid-template-columns: 1fr; }
  .kp-filters { display: none; }
  .kp-goods, .kp-order { gap: 8px; }
  .kp-field { height: 18px; }
  .kp-field--area { height: 28px; }
  .kp-sum { padding: 9px; gap: 6px; }
  .kp-btn { height: 16px; border-radius: 6px; }
}

/* ── Панорамирование полных страниц (case-divuley.html) ──────
   Секция с data-pan: слои — ПОЛНЫЕ скриншоты страниц (очень
   высокие). case.js ставит секции .wf-pan-live, тянет «окно
   браузера» на высоту вьюпорта и двигает картинку внутри по
   мере прокрутки главы; когда «доскроллили» до низа картинки —
   глава переключается на следующую. Картинка всегда закрывает
   окно целиком (cover: по ширине с вертикальной прокруткой,
   короткие страницы — по высоте с лёгким боковым кропом).
   Без JS и при reduced-motion класс не ставится: скриншоты
   ведут себя как прежде (object-fit: cover в окне 16/10). */
.wf-pan-live .wf-screen {
  aspect-ratio: auto;
  /* окно на высоту вьюпорта: липкий отступ 104 + шапка 40 +
     статус-бар 42 + воздух 30 */
  height: calc(100vh - 216px);
  min-height: 300px;
}
.wf-pan-live .kp-shot img {
  height: auto;               /* до первого кадра JS: пропорция полной страницы */
}
/* мобильная полная страница — узкая «лента телефона» по центру */
.wf-pan-live .kp-shot--phone img {
  width: min(62%, 248px);
  margin: 0 auto;
  border: 1px solid var(--ink-100);
  border-radius: 18px;
  box-shadow: 0 18px 44px -22px rgba(27, 32, 32, .35);
}
/* Этаж высоты главы (T89): case.js (sizeChapters) растягивает главу
   под длину её скриншота — здесь этаж до расчёта и без JS/reduce;
   панорама внутри окна едет с постоянным темпом до конца картинки */
/* «окно» страниц шире общего каркаса: 65% строки контейнера
   (2.15fr/1fr с учётом гаттера 56px). data-pan есть только у этого
   кейса — главная и fudzi75 остаются 1.04fr/1fr; min-width:1024 —
   чтобы не спорить со стеком 1fr на планшете/мобиле */
@media (min-width: 1024px) {
  .wf[data-pan] .wf-story { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }
}
.wf-pan-live .wf-chapter { min-height: 88vh; }
/* T90: текст главы — ВВЕРХУ главы, а не по центру. Главы T89
   высотой в путь скриншота (~2400px у главной НОРД): центриро-
   ванный заголовок виден только с середины прокрутки (фидбек).
   Вверху название встаёт в кадр сразу при активации главы —
   её верх пересекает линию 0.34vh, текст лежит чуть ниже.
   Классические кейсы (без pan) остаются центрированными. */
.wf-pan-live .wf-chapter {
  justify-content: flex-start;
  padding-top: 32px;
}
/* T91: текст главы закрепляется на время главы. Sticky-блок
   внутри главы: встаёт в кадр при активации (верх главы на
   линии 0.34vh + отступ 32px — как в T90) и держится, пока
   едет панорама; у конца главы его выталкивает низ самой
   главы — текст уезжает вверх, уступая следующему (зазор
   32px сохраняется). top связан с линией активации midLine()
   в case.js (0.34vh): сменишь там — поправь и здесь.
   Классические кейсы без pan этого блока не имеют и остаются
   центрированными */
.wf-pan-live .wf-ch-body {
  position: sticky;
  top: calc(34vh + 32px);
}
/* точка этапа переехала в sticky-блок (T91): свечение держится
   рядом с заголовком всю главу — точка на ::before главы
   уезжала бы с её верхом. 15px: центр строки имени
   (36px/1.1 ≈ 40) минус половина точки; left:-49 — как у
   точки главы, по центру линии этапов */
.wf-pan-live .wf-chapter::before { display: none; }
.wf-pan-live .wf-ch-body::before {
  content: "";
  position: absolute;
  left: -49px;
  top: 15px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C9D6D2;
  transition: background .35s ease, box-shadow .35s ease;
}
.wf-pan-live .wf-chapter.is-active .wf-ch-body::before {
  background: var(--teal-500);
  box-shadow: 0 0 0 7px rgba(26, 188, 156, .16);
}/* «разгонная дорожка» после последней главы. ВАЖНО: sticky у
   grid-элемента ограничен высотой СТРОКИ грида, а не контейнера,
   поэтому хвост — padding колонки глав (она задаёт высоту строки),
   а не .wf-story: липкое окно не отклеивается, пока последняя
   картинка не доедет до низа. T88: линия активации поднята
   (0.5→0.34 вьюпорта) — хвост растёт на ту же величину (+16vh),
   иначе последняя глава не доедет до p=1 до отклейки sticky */
.wf-pan-live .wf-chapters { padding-bottom: 78vh; }
/* прогресс-бар в pan-режиме непрерывный — без плавающей задержки */
.wf-pan-live .wf-bar-fill { transition: none; }
@media (max-width: 1023px) {
  .wf-pan-live .wf-chapter { min-height: 72vh; }
  .wf-pan-live .wf-screen { height: calc(100vh - 200px); }
  .wf-pan-live .wf-chapters { padding-bottom: 48vh; }
  /* Task 69: на мобиле главы скрыты — «только скриншоты» (фидбек:
     текст мелькает под липким окном). Дорожка pan сохраняется:
     visibility:hidden не убирает главы из раскладки — case.js
     продолжает считать шаги и панораму по их позициям. Без JS
     и при reduced-motion .wf-pan-live не ставится — главы видны. */
  .wf-pan-live .wf-chapters { visibility: hidden; }
}
@media (max-width: 640px) {
  .wf-pan-live .kp-shot--phone img {
    width: min(56%, 210px);
    border-radius: 14px;
  }
  .wf-pan-live .wf-screen { height: calc(100vh - 180px); min-height: 280px; }
}

/* — Результат: тёмная секция — */
.kc-results {
  position: relative;
  overflow: hidden;
  padding: 88px 0 92px;
  background:
    radial-gradient(640px 320px at 8% 0%, rgba(26, 188, 156, .16), transparent 62%),
    radial-gradient(560px 300px at 94% 110%, rgba(26, 188, 156, .12), transparent 66%),
    linear-gradient(172deg, var(--ink-950) 0%, var(--ink-900) 100%);
  color: #fff;
}
.kc-results-deco {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(820px 460px at 90% 10%, #000 20%, transparent 76%);
  mask-image: radial-gradient(820px 460px at 90% 10%, #000 20%, transparent 76%);
  pointer-events: none;
}
.kc-results .container { position: relative; z-index: 1; }
.kc-sec-head--dark .kc-h2-lg { color: #fff; }
.kc-sec-head--dark .kc-over2 { color: var(--teal-300); }
.kc-lead {
  margin: 16px 0 0;
  max-width: 620px;
  font-size: 16px; line-height: 1.65;
  color: rgba(255, 255, 255, .58);
}
.kc-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kc-metric {
  padding: 30px 28px;
  border: 1px solid rgba(64, 205, 176, .25);
  border-radius: 20px;
  background: rgba(255, 255, 255, .03);
}
.kc-metric-v {
  margin: 0;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(36px, 3.8vw, 50px);
  font-weight: 700; line-height: 1.05;
  color: #fff;
}
.kc-metric-v svg {
  width: 22px; height: 22px;
  stroke: var(--teal-300);
  flex: 0 0 auto;
}
.kc-metric-l {
  margin: 12px 0 0;
  font-size: 15.5px; font-weight: 500; line-height: 1.45;
  color: rgba(255, 255, 255, .78);
}
.kc-metric-sub {
  margin: 7px 0 0;
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .45);
}

/* — Отзыв — */
.kc-quote-sec { background: var(--white); padding: 88px 0; }
.kc-quote {
  margin: 0 auto;
  max-width: 820px;
  text-align: center;
}
.kc-quote-mark {
  width: 40px; height: 40px;
  color: var(--teal-500);
  opacity: .3;
}
.kc-quote-text {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.5vw, 27px);
  font-weight: 500; line-height: 1.45;
  color: var(--ink-900);
}
.kc-quote-who {
  margin-top: 28px;
  display: inline-flex; align-items: center; gap: 14px;
  text-align: left;
}
.kc-quote-ava {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  box-shadow: 0 12px 24px -12px rgba(17, 136, 113, .6);
  font: 700 16px/1 'Roboto', sans-serif;
  letter-spacing: .04em;
  color: #fff;
}
.kc-quote-person { display: grid; gap: 2px; }
.kc-quote-name { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.kc-quote-role { font-size: 13.5px; color: var(--ink-300); }

/* — Другие кейсы: карточки .cs из портфолио — */
.kc-more { background: var(--paper); padding: 88px 0 96px; }
.kc-more .kc-more-grid { margin-top: 4px; }
.kc-more .cs-card {
  opacity: 1;
  transform: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* reveal: без JS всё видно */
.kc-js .kc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .55s ease var(--d, 0ms),
    transform .65s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}
.kc-js .kc-reveal.is-in { opacity: 1; transform: none; }

/* — Адаптив — */
@media (max-width: 1023px) {
  .kc-brief-grid { grid-template-columns: 1fr; gap: 44px; }
  .kc-facts { position: static; }
  .kc-steps { grid-template-columns: 1fr; }
  .kc-shots-grid { grid-template-columns: 1fr 1fr; }
  .kc-metrics { grid-template-columns: 1fr; }
  /* «Паспорт проекта» — только на десктопе (как правые визуалы
     service/portfolio); сброс сетки с той же специфичностью,
     что у включающего правила (урок Task 40) */
  .kc-top.im-hero--dark .im-hero-in { grid-template-columns: 1fr; }
  .kc-pass { display: none; }
}

/* — Мобильный hero кейса divuley (.kc-top--glow — только этот кейс,
   другие не трогаем): паспорт-флип на стеке заменяем статичным
   скриншотом сайта — лицо флип-карточки в мини-браузере, БЕЗ
   переворотов; лёгкий параллакс прокрутки добавляет case.js.
   Крошки и текст подняты к шапке — вертикальное центрирование
   hero убрано (фидбек: пустой центрированный текст выглядел
   несуразно). Перебивка состояний — с запасом специфичности
   (урок Task 40). — */
@media (max-width: 1023px) {
  .kc-top--glow.im-hero--dark {
    align-items: flex-start;
    padding-top: calc(var(--header-h) + 36px);
  }
  .kc-top--glow .kc-pass { display: block; }
  /* флип выключен: внутренность закреплена «лицом», оборот-паспорт
     скрыт; перечислены все состояния — база, классика (.kc-flip-js),
     реверс (.kc-flip-go) и hover-возвраты */
  .kc-flip-js .kc-top--glow .kc-flip-inner,
  .kc-top--glow .kc-flip-inner,
  .kc-top--glow .kc-flip.is-live:hover .kc-flip-inner,
  .kc-top--glow .kc-flip--rev.kc-flip-go .kc-flip-inner,
  .kc-top--glow .kc-flip.kc-flip--rev.is-live:hover .kc-flip-inner { transform: none; }
  .kc-top--glow .kc-flip-inner { transition: none; }
  .kc-top--glow .kc-flip-back { display: none; }
  /* высоту карточки задаёт лицо (оборот убран из grid-стека) */
  .kc-top--glow .kc-flip-front { aspect-ratio: 16 / 10; }
  /* медаль-печать на узком экране — шум */
  .kc-top--glow .kc-seal { display: none; }
}
@media (max-width: 640px) {
  .kc-brief { padding: 56px 0; }
  .kc-h2--task { margin-top: 36px; }
  .kc-facts { padding: 22px 20px 6px; }
  .kc-work, .kc-shots, .kc-quote-sec { padding: 56px 0; }
  .kc-results { padding: 64px 0; }
  .kc-more { padding: 56px 0 64px; }
  .kc-sec-head { margin-bottom: 30px; }
  .kc-shots-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .kc-step { padding: 22px 20px; gap: 14px; }
  .kc-metric { padding: 24px 22px; }
  .kc-quote-who { flex-direction: row; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  /* паспорт и вся его «обработка» — показаны готовыми, без анимаций;
     flip выключен целиком (ни .kc-flip-js, ни .kc-flip-go/.is-live
     не ставятся — виден паспорт, переворотов и hover-смены нет) */
  .kc-pass, .kc-pass-float, .kc-pass-doc, .kc-pass-doc::after,
  .kc-pass-stamp, .kc-pass-stamp::after, .kc-pass-res,
  .kc-pass-res-val, .kc-pass-res-ico, .kc-seal, .kc-seal-ring,
  .kc-chip, .kc-flip-front { animation: none; }
  .kc-pass-doc, .kc-flip-inner { transition: none; }
  .kc-js .kc-reveal { transition: none; }
  .kc-fact-link svg { transition: none; }
  .kbk-halo { display: none; }
  .kbk-track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   РЕЗУЛЬТАТ (case-divuley): светлая секция, отзыв справа.
   Классы rs-* — только divuley; старые .kc-results/.kc-quote
   остаются для fudzi75.
   ═══════════════════════════════════════════════════════════ */
.rs {
  position: relative;
  background: #EEF5F1;
  padding: 96px 0 100px;
  overflow: hidden;
}
.rs-bg { position: absolute; inset: 0; pointer-events: none; }
.rs-glow {
  position: absolute; top: -230px; right: -170px;
  width: 740px; height: 660px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 188, 156, .16), transparent 72%);
}
/* точечная сетка — светлая рифма кинетической полосы */
.rs-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(24, 62, 52, .08) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(205deg, rgba(0, 0, 0, .8), transparent 50%);
  mask-image: linear-gradient(205deg, rgba(0, 0, 0, .8), transparent 50%);
}
.rs .container { position: relative; }
.rs-grid {
  display: grid;
  grid-template-columns: 1.08fr .78fr;
  gap: 48px 72px;
  align-items: center;
}
.rs-head { margin-bottom: 0; }
/* чек-лист полученного: тематическая SVG-иконка (квадрат,
   высота = высоте текстового блока пункта) + строка с пояснением */
.rs-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}
.rs-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(24, 62, 52, .13);
}
.rs-item:last-child { border-bottom: 1px solid rgba(24, 62, 52, .13); }
.rs-check {
  flex: none;
  width: 45px; height: 45px;
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-700);
}
.rs-check svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rs-item-t {
  margin: 0;
  font-size: 16.5px; font-weight: 600; line-height: 1.35;
  color: var(--ink-900);
}
.rs-item-s {
  margin: 3px 0 0;
  font-size: 13.5px; line-height: 1.5;
  color: rgba(30, 49, 43, .58);
}
/* отзыв: белая карточка справа, тил-акценты */
.rs-side { position: relative; min-width: 0; }
.rs-quote {
  margin: 0;
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(24, 62, 52, .09);
  border-radius: 24px;
  padding: 32px 36px 30px;
}
.rs-quote::before {
  content: '';
  position: absolute; top: -1px; left: 30px; right: 46%;
  height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #17B397, rgba(23, 179, 151, 0));
}
.rs-quote-mark {
  position: absolute; top: 26px; right: 28px;
  width: 46px; height: 46px;
  color: rgba(26, 188, 156, .22);
}
.rs-quote-tag {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-700);
}
.rs-quote-tag::before {
  content: '';
  display: inline-block; width: 6px; height: 6px;
  margin-right: 9px; border-radius: 50%;
  background: var(--teal-600);
  vertical-align: 1px;
}
.rs-quote-text {
  margin: 0;
  font-size: 17px; line-height: 1.62;
  color: rgba(24, 44, 38, .86);
}
.rs-quote-who {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(24, 62, 52, .09);
}
.rs-quote-ava {
  flex: none;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 188, 156, .15);
  color: var(--teal-700);
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
}
.rs-quote-person { display: flex; flex-direction: column; gap: 2px; }
.rs-quote-name { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.rs-quote-role { font-size: 13px; color: rgba(30, 49, 43, .58); }
/* слайдер отзывов: навигацию строит case.js ТОЛЬКО при 2+ слайдах
   (один отзыв — статичная карточка). Язык управления — как у
   im-slider на service-im: стрелки, точки, свайп, клавиши. */
.rs-slider { overflow: hidden; touch-action: pan-y; }
.rs-track {
  display: flex; align-items: stretch;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.rs-slide { flex: 0 0 100%; min-width: 0; padding: 0 8px 10px; }
.rs-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.rs-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(24, 62, 52, .16);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--ink-800);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.rs-btn:hover {
  border-color: var(--teal-600);
  background: var(--teal-600);
  color: #fff;
}
.rs-btn svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rs-dots { display: flex; align-items: center; gap: 8px; }
.rs-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(24, 62, 52, .18);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.rs-dot.is-active {
  width: 20px;
  background: var(--teal-600);
}
/* адаптив */
@media (max-width: 1023px) {
  .rs { padding: 78px 0 84px; }
  .rs-grid { grid-template-columns: 1fr; gap: 44px; }
  .rs-side { max-width: 580px; }
}
@media (max-width: 640px) {
  .rs { padding: 60px 0 68px; }
  .rs-list { margin-top: 22px; }
  .rs-item { gap: 12px; padding: 14px 0; }
  .rs-check { width: 42px; height: 42px; }
  .rs-item-t { font-size: 15px; }
  .rs-nav { margin-top: 12px; gap: 12px; }
  .rs-btn { width: 34px; height: 34px; }
  .rs-quote { padding: 26px 24px 24px; border-radius: 20px; }
  .rs-quote-text { font-size: 15.5px; }
  .rs-quote-mark { width: 38px; height: 38px; top: 22px; right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-track { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦЫ УСЛУГ: ИНТЕРНЕТ-МАГАЗИН (service-im.html) и
   СОЗДАНИЕ САЙТОВ (service-web.html)
   Общие компоненты обеих страниц услуг — префикс im-: hero-
   типографика, сравнение, карточки, цитата, marquee, 3D-карусель
   кейсов, процесс, «почему мы», reveal. Концепция референса
   (сравнение → преимущества → технология → стек → кейсы →
   процесс → FAQ) в системе сайта: светлые секции, hairline
   --fq-line, teal-акценты, pill-кнопки в одной системе с
   .im-btn/.im-ghost, тёмный CTA #cta и переиспользованные
   .fq (FAQ) / .ct-grad.
   Reveal: .im-js .im-reveal (service-im.js / service-web.js),
   каскад — inline --d; без JS и при reduced-motion всё видно.
   Уникальные блоки service-web.html — в секции ниже (sw-).
   ═══════════════════════════════════════════════════════════ */

.im-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 48px) 0 72px;
  background:
    radial-gradient(720px 360px at 4% -30%, rgba(26, 188, 156, .10), transparent 62%),
    radial-gradient(600px 320px at 96% -24%, rgba(26, 188, 156, .08), transparent 66%),
    linear-gradient(172deg, var(--white) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--fq-line);
}
/* декоративная сетка — в языке hero кейса */
.im-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(13, 89, 75, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 89, 75, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(720px 420px at 18% 0%, #000, transparent 78%);
  mask-image: radial-gradient(720px 420px at 18% 0%, #000, transparent 78%);
  pointer-events: none;
}
.im-hero-in {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, 470px);
  gap: 48px;
  align-items: center;
}

/* — Крошки, оверлайн, заголовок — в языке .kc-top — */
.im-crumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.im-crumbs a {
  color: rgba(36, 42, 41, .52);
  text-decoration: none;
  transition: color .18s ease;
}
.im-crumbs a:hover { color: var(--teal-600); }
.im-crumbs svg { width: 13px; height: 13px; color: rgba(36, 42, 41, .3); }
.im-crumbs [aria-current] { color: rgba(36, 42, 41, .66); font-weight: 500; }
.im-title {
  max-width: 640px;
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(29px, 4.4vw, 45px);
  font-weight: 700; line-height: 1.16;
  color: var(--ink-900);
}
.im-title span { color: var(--teal-600); }
.im-sub {
  max-width: 560px;
  margin: 18px 0 0;
  font-size: 17px; line-height: 1.65;
  color: var(--text-muted);
}

/* — Кнопки hero: pill, в системе .im-btn/.im-ghost — */
.im-actions {
  display: flex; flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.im-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--teal-500);
  box-shadow: var(--shadow-cta);
  font: 600 15px/1 'Roboto', sans-serif; color: #fff;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.im-btn:hover {
  background: var(--teal-600);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
}
.im-btn:active { transform: translateY(0); }
.im-btn svg {
  width: 16px; height: 16px;
  stroke: rgba(255, 255, 255, .92);
  transition: transform .2s ease;
}
.im-btn:hover svg { transform: translateX(3px); }
.im-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 26px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: var(--white);
  font: 600 15px/1 'Roboto', sans-serif; color: var(--ink-800);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.im-ghost:hover {
  border-color: var(--teal-500);
  color: var(--teal-700);
  background: var(--teal-50);
}
.im-ghost svg {
  width: 15px; height: 15px;
  transition: transform .2s ease;
}
.im-ghost:hover svg { transform: translateY(2px); }

/* ═══ СЕКЦИИ УСЛУГИ: общие шапки ═══ */
.im-comp, .im-tech, .im-cases, .im-why { background: var(--white); }
.im-adv, .im-stack, .im-proc { background: var(--paper); }
.im-comp, .im-adv, .im-tech, .im-stack, .im-cases, .im-proc, .im-why {
  padding: 104px 0 96px;
}
/* якоря не уезжают под фиксированную шапку */
.im-comp, .im-tech, .im-stack, .im-cases, .im-proc, .im-why, .fq {
  scroll-margin-top: calc(var(--header-h) + 20px);
}
/* FAQ на странице услуги — единый ритм отступов с im-секциями
   (глобальный .fq чуть отличается: низ 112px, шапка 40px) */
#im-faq { padding-bottom: 96px; }
#im-faq .fq-head { margin-bottom: 44px; }

.im-sec-head { margin-bottom: 44px; max-width: 760px; }
.im-sec-head--center { margin-inline: auto; text-align: center; }
.im-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700; line-height: 1.18;
  color: var(--ink-900);
}
.im-lead {
  margin: 14px 0 0;
  font-size: 17px; line-height: 1.65;
  color: var(--text-muted);
  max-width: 680px;
}
.im-sec-head--center .im-lead { margin-inline: auto; }

/* ═══ СРАВНЕНИЕ «два мира»: маркетплейс vs свой магазин ═══
   Светлый атмосферный стенд (teal-свечения + сетка + зерно — язык
   hero, тонус ниже); editorial-шапка (заголовок слева, лид справа).
   Карточки — два разных мира, а не близнецы: слева «аренда» (холодное
   ink-стекло + пунктирная рамка-купон), справа «владение» (белый +
   teal-свечение, приподнята). Полоса маржи — мини-датавиз, заливка
   едет при появлении (.is-in). Hover — через translate: transform
   занят reveal-системой (см. урок в .sw-fmt). */
.im-comp { position: relative; }
.im-comp .container { position: relative; z-index: 1; }

/* — Атмосфера секции — */
.im-comp-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.im-comp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.im-comp-glow--a {
  width: 720px; height: 500px;
  top: -260px; left: -200px;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .11), transparent 72%);
  animation: swa-drift-b 33s ease-in-out infinite alternate;
}
.im-comp-glow--b {
  width: 640px; height: 480px;
  bottom: -240px; right: -170px;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .08), transparent 72%);
  animation: swa-drift-a 26s ease-in-out infinite alternate;
}
/* светлые варианты общих .swa-grid/.swa-grain (в hero они тёмные) */
.im-comp .swa-grid {
  background-image:
    linear-gradient(rgba(17, 136, 113, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 136, 113, .05) 1px, transparent 1px);
}
.im-comp .swa-grain { opacity: .03; }

/* — Editorial-шапка: заголовок слева, лид справа (по базовой линии) — */
.im-comp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 18px 56px;
  align-items: end;
  margin: 0 0 48px;
}
.im-comp .im-h2 {
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.im-comp-head .im-lead { margin: 0; font-size: 16.5px; }
.im-comp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.im-comp-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 20px;
  padding: 30px 30px 26px;
  overflow: hidden;
  /* подъём через translate — transform занят reveal-системой */
  transition: translate .3s cubic-bezier(.22, .61, .24, 1),
              border-color .3s ease, box-shadow .3s ease;
}
.im-comp-card:hover { translate: 0 -6px; }

/* мир «аренда»: холодное ink-стекло + пунктирная рамка-купон */
.im-comp-card--bad {
  background: linear-gradient(170deg, #F4F7F6, #E9EFED);
  border: 1px solid #DCE4E1;
  box-shadow: 0 18px 40px -34px rgba(27, 32, 32, .3);
}
.im-comp-card--bad::after {
  content: '';
  position: absolute; inset: 10px;
  border: 1.5px dashed rgba(82, 94, 93, .16);
  border-radius: 13px;
  pointer-events: none;
}
.im-comp-card--bad:hover {
  border-color: #C7D2CE;
  box-shadow: 0 26px 52px -34px rgba(27, 32, 32, .4);
}

/* мир «владение»: белый + teal-свечение изнутри, приподнят */
.im-comp-card--good {
  background:
    radial-gradient(560px 320px at 100% 0%, rgba(26, 188, 156, .11), transparent 62%),
    radial-gradient(460px 280px at 0% 100%, rgba(26, 188, 156, .07), transparent 58%),
    var(--white);
  border: 1px solid rgba(26, 188, 156, .35);
  box-shadow: 0 30px 60px -38px rgba(13, 89, 75, .45);
}
.im-comp-card--good:hover {
  border-color: rgba(26, 188, 156, .6);
  box-shadow:
    0 36px 66px -38px rgba(13, 89, 75, .48),
    0 24px 60px -28px rgba(26, 188, 156, .22);
}

/* сглаженный hover после reveal: базовый .im-js .im-reveal
   перебивает transition-список карда — после is-in возвращаем
   переходы hover-свойств (opacity/transform reveal уже отыграли,
   оставляем их в списке, чтобы сам reveal не сломался) */
.im-js .im-comp-card.is-in {
  transition:
    opacity .55s ease var(--d, 0ms),
    transform .65s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
    translate .3s cubic-bezier(.22, .61, .24, 1),
    border-color .3s ease, box-shadow .3s ease;
}
.im-comp-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
}
.im-comp-card--bad::before  { background: linear-gradient(90deg, var(--ink-300), var(--ink-200)); }
.im-comp-card--good::before { background: linear-gradient(90deg, var(--teal-400), var(--teal-600)); }

.im-comp-card-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--fq-line);
}
.im-comp-ico {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.im-comp-ico svg { width: 25px; height: 25px; }
.im-comp-card--bad .im-comp-ico { background: var(--ink-100); color: var(--ink-500); }
.im-comp-card--good .im-comp-ico { background: var(--teal-50); color: var(--teal-700); }
.im-comp-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.25;
  color: var(--ink-900);
}
.im-comp-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); }

.im-comp-list {
  display: flex; flex-direction: column;
  gap: 14px;
}
.im-comp-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-600);
}
.im-comp-mark {
  width: 22px; height: 22px; flex-shrink: 0;
  margin-top: 1px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.im-comp-mark svg { width: 11px; height: 11px; }
.im-comp-card--bad .im-comp-mark { background: var(--ink-100); color: var(--ink-500); }
.im-comp-card--good .im-comp-mark { background: var(--teal-100); color: var(--teal-700); }

.im-comp-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--fq-line);
}
.im-comp-foot-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
}
.im-comp-foot-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.im-comp-foot-value {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
}
.im-comp-card--bad .im-comp-foot-value { color: var(--ink-500); }
.im-comp-card--good .im-comp-foot-value { color: var(--teal-600); }

/* полоса маржи — мини-датавиз: заливка едет при появлении карда */
.im-comp-bar {
  height: 10px;
  margin-top: 16px;
  border-radius: 999px;
  overflow: hidden;
}
.im-comp-card--bad .im-comp-bar { background: rgba(82, 94, 93, .12); }
.im-comp-card--good .im-comp-bar { background: rgba(26, 188, 156, .14); }
.im-comp-bar-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: inherit;
}
.im-comp-card--bad .im-comp-bar-fill {
  background: linear-gradient(90deg, var(--ink-400), var(--ink-300));
}
.im-comp-card--good .im-comp-bar-fill {
  background: linear-gradient(90deg, var(--teal-500), var(--teal-600));
}
.im-js .im-comp-bar-fill {
  width: 0;
  transition: width 1.1s cubic-bezier(.22, 1, .36, 1) .5s;
}
.im-js .im-comp-card.is-in .im-comp-bar-fill { width: var(--w, 0%); }

.im-comp-cap {
  margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.45;
  color: var(--text-muted);
}

.im-comp-vs { position: relative; }
.im-comp-vs-line {
  position: absolute; top: 4%; bottom: 4%; left: 50%;
  width: 2px;
  /* переход из мира аренды (ink) в мир владения (teal) */
  background: linear-gradient(180deg,
    transparent, rgba(157, 168, 167, .6) 22%,
    rgba(26, 188, 156, .5) 78%, transparent);
}
.im-comp-vs-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  color: var(--teal-700);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: .08em;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 1px rgba(26, 188, 156, .4),
    0 0 0 8px rgba(26, 188, 156, .09),
    0 14px 30px -14px rgba(13, 89, 75, .45);
}
.im-comp-note {
  max-width: 720px;
  margin: 44px auto 0;
  text-align: center;
  padding: 26px 34px;
  background: linear-gradient(135deg, rgba(26, 188, 156, .10), rgba(26, 188, 156, .03));
  border: 1px solid rgba(26, 188, 156, .25);
  border-radius: 18px;
  font-size: 17px; line-height: 1.6;
  color: var(--ink-800);
}
.im-comp-note b { color: var(--teal-700); }

/* ═══ КАРТОЧКИ (преимущества / технология / процесс) ═══ */
/* базовая сетка — 2 колонки: акцентная карточка на всю ширину + 2×2 */
.im-adv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.im-card {
  background: var(--white);
  border: 1px solid var(--fq-line);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.im-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-200);
  box-shadow: 0 18px 40px -26px rgba(15, 110, 93, .3);
}
.im-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.im-card-num {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: .08em;
  color: rgba(36, 42, 41, .34);
}
.im-card-ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--teal-50);
  color: var(--teal-700);
  display: flex; align-items: center; justify-content: center;
}
.im-card-ico svg { width: 23px; height: 23px; }
/* карточка-строка: иконка слева, заголовок рядом (преимущества / технология) */
.im-card--row .im-card-head {
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.im-card--row .im-card-h { margin: 0; }
.im-card-h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 19px; line-height: 1.3;
  color: var(--ink-900);
}
.im-card-text {
  margin: 0;
  font-size: 15px; line-height: 1.62;
  color: var(--text-muted);
}
/* акцентная карточка (featured): вся ширина сетки, teal-подложка */
.im-card--feat {
  grid-column: 1 / -1;
  padding: 30px 34px;
  background: linear-gradient(135deg, rgba(26, 188, 156, .10), rgba(26, 188, 156, .03));
  border-color: rgba(26, 188, 156, .28);
}
.im-card--feat:hover { border-color: rgba(26, 188, 156, .48); }
.im-card--feat .im-card-ico {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: rgba(26, 188, 156, .16);
}
.im-card--feat .im-card-ico svg { width: 26px; height: 26px; }
.im-card--feat .im-card-h { font-size: 21px; }
.im-card--feat .im-card-text { max-width: 900px; }

/* ═══ ТЕХНОЛОГИЯ: композиция «цитата-панель + сетка 2×2» ═══ */
.im-tech-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}
/* цитата — тёмная вертикальная панель, контрастный акцент секции */
.im-quote {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 34px 32px;
  background: var(--ink-900);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -30px rgba(13, 27, 25, .5);
}
.im-quote::after {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 188, 156, .3), transparent 70%);
  pointer-events: none;
}
.im-quote-mark {
  font-family: var(--font-display);
  font-size: 46px; line-height: .9;
  color: var(--teal-400);
}
.im-quote-text {
  margin: 0;
  font-size: 18.5px; line-height: 1.58;
  color: rgba(255, 255, 255, .88);
}
.im-quote-text b { color: var(--teal-300); }
.im-quote-foot {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .52);
}

/* ═══ СТЕК: бегущая строка компонентов ═══ */
.im-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.im-marquee-track {
  display: flex;
  width: max-content;
  animation: im-marquee 38s linear infinite;
}
.im-marquee:hover .im-marquee-track { animation-play-state: paused; }
@keyframes im-marquee { to { transform: translateX(-50%); } }
.im-marquee-row {
  display: flex;
  gap: 20px;
  padding-right: 20px;
}
.im-stack-card {
  width: 300px; flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--fq-line);
  border-radius: 16px;
  padding: 22px 24px;
  transition: border-color .2s ease;
}
.im-stack-card:hover { border-color: var(--teal-300); }
.im-stack-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--teal-700);
}
.im-stack-card p {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--text-muted);
}
.im-stack-note {
  margin-top: 44px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

/* ═══ КЕЙСЫ: 3D-карусель (coverflow) ═══
   Активный слайд в центре, соседи слева и справа уходят в
   перспективу (rotateY + глубина) и плавно сменяют друг друга.
   Пропорции слайда: 40% изображение / 60% информация.
   Без JS (.im-slider--on не поставлен) — карточки стеком. */
.im-cases { overflow-x: clip; }
@supports not (overflow-x: clip) { .im-cases { overflow-x: hidden; } }

.im-slider {
  --im-slide-w: min(880px, 100%);
  --im-gap: 26px;     /* зазор между активным слайдом и соседями */
  --im-rot: 22deg;    /* разворот соседей к активному */
  --im-depth: 220px;  /* глубина ухода соседей в перспективу */
}
.im-slider-stage {
  display: grid;
  gap: 20px;
  justify-items: center;
}
.im-slider-stage:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 6px;
  border-radius: var(--radius);
}

/* карусель включена скриптом (класс .im-slider--on) */
.im-slider--on .im-slider-stage {
  position: relative;
  display: block;
  height: var(--im-stage-h, 540px);
  perspective: 1400px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
/* у всех состояний одинаковый список transform-функций —
   браузер интерполирует попарно, смена позиций плавная */
.im-slider--on .im-case {
  position: absolute;
  top: 0; left: 50%;
  margin: 0;
  transition: transform .6s cubic-bezier(.3, .86, .3, 1), opacity .45s ease,
              border-color .3s ease, box-shadow .3s ease;
}
.im-slider--on .im-case.is-active {
  z-index: 5;
  opacity: 1;
  transform: translateX(-50%) rotateY(0deg) translateZ(60px) scale(1);
  border-color: var(--teal-200);
  box-shadow: 0 30px 62px -28px rgba(15, 110, 93, .42);
}
.im-slider--on .im-case.is-active:hover {
  border-color: var(--teal-300);
  box-shadow: 0 34px 68px -28px rgba(15, 110, 93, .5);
}
.im-slider--on .im-case.is-left,
.im-slider--on .im-case.is-right {
  z-index: 2;
  opacity: .38;
  cursor: pointer;
}
.im-slider--on .im-case.is-left:hover,
.im-slider--on .im-case.is-right:hover { opacity: .55; }
.im-slider--on .im-case.is-left {
  transform: translateX(calc(-50% - var(--im-slide-w) / 2 - var(--im-gap)))
             rotateY(var(--im-rot))
             translateZ(calc(-1 * var(--im-depth)))
             scale(.96);
}
.im-slider--on .im-case.is-right {
  transform: translateX(calc(-50% + var(--im-slide-w) / 2 + var(--im-gap)))
             rotateY(calc(-1 * var(--im-rot)))
             translateZ(calc(-1 * var(--im-depth)))
             scale(.96);
}
.im-slider--on .im-case.is-far {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotateY(0deg)
             translateZ(calc(-2.4 * var(--im-depth))) scale(.92);
}
/* в неактивных карточках кнопка не ловит клик — клик по карточке листает */
.im-slider--on .im-case:not(.is-active) .im-case-link { pointer-events: none; }

.im-case {
  width: var(--im-slide-w);
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* 40% / 60% */
  background: var(--white);
  border: 1px solid var(--fq-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.im-case-media {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: var(--paper);
}
.im-case-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.im-case.is-active:hover .im-case-media img { transform: scale(1.04); }
.im-case-tag, .im-case-time {
  position: absolute; top: 14px;
  font-size: 12px; font-weight: 700;
  border-radius: 999px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.im-case-tag {
  left: 14px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink-800);
}
.im-case-time {
  right: 14px;
  background: rgba(233, 251, 247, .94);
  color: var(--teal-800);
}
.im-case-body {
  display: flex; flex-direction: column;
  padding: 28px 32px 30px;
}
.im-case-name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.3;
  color: var(--ink-900);
}
.im-case-desc {
  margin: 0 0 16px;
  font-size: 15px; line-height: 1.58;
  color: var(--text-muted);
}
.im-case-stack {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.im-case-stack li {
  font-size: 12px; font-weight: 600;
  color: var(--teal-800);
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: 999px;
  padding: 5px 11px;
}
.im-case-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--fq-line);
}
.im-case-stat { margin: 0; }
.im-case-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; line-height: 1.1;
  color: var(--ink-900);
}
.im-case-stat dt {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.im-case-link {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 22px;
  margin-top: auto;
  align-self: flex-start;
  border-radius: 999px;
  background: var(--teal-500);
  box-shadow: var(--shadow-cta);
  font: 600 14px/1 'Roboto', sans-serif; color: #fff;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.im-case-link:hover {
  background: var(--teal-600);
  box-shadow: var(--shadow-cta-hover);
}
.im-case-link svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.im-case-link:hover svg { transform: translateX(3px); }

/* навигация слайдера: без JS скрыта (листается свайпом/скроллом) */
.im-slider-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.im-js .im-slider-nav { display: flex; }
.im-slider-btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--fq-line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-800);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.im-slider-btn:hover {
  border-color: var(--teal-500);
  background: var(--teal-500);
  color: #fff;
}
.im-slider-btn svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.im-slider-dots { display: flex; align-items: center; gap: 9px; }
.im-slider-dot {
  width: 9px; height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--ink-200);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.im-slider-dot.is-active {
  width: 24px;
  background: var(--teal-500);
}

/* ═══ ПРОЦЕСС: 6 этапов ═══ */
.im-proc-grid {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.im-proc-time {
  font-size: 12px; font-weight: 700;
  color: var(--teal-700);
  background: var(--teal-50);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}

/* ═══ ПОЧЕМУ МЫ ═══ */
.im-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.im-why-card {
  background: var(--white);
  border: 1px solid var(--fq-line);
  border-radius: 16px;
  padding: 24px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.im-why-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-200);
  box-shadow: 0 18px 40px -26px rgba(15, 110, 93, .3);
}
.im-why-num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--teal-600);
}
.im-why-h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px; line-height: 1.35;
  color: var(--ink-900);
}
.im-why-text {
  margin: 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-muted);
}

/* ═══ REVEAL (service-im.js): каскад через inline --d;
   без .im-js (нет JS) и при reduced-motion всё видно ═══ */
.im-js .im-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .55s ease var(--d, 0ms),
    transform .65s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}
.im-js .im-reveal.is-in { opacity: 1; transform: none; }

/* каскад пунктов сравнения: is-in вешается на список (data-im-stagger) */
.im-js .im-comp-list li {
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity .5s ease,
    transform .55s cubic-bezier(.22, 1, .36, 1);
}
.im-js .im-comp-card--good .im-comp-list li { transform: translateX(14px); }
.im-js .im-comp-list.is-in li { opacity: 1; transform: none; }
.im-js .im-comp-list.is-in li:nth-child(1) { transition-delay: .05s; }
.im-js .im-comp-list.is-in li:nth-child(2) { transition-delay: .11s; }
.im-js .im-comp-list.is-in li:nth-child(3) { transition-delay: .17s; }
.im-js .im-comp-list.is-in li:nth-child(4) { transition-delay: .23s; }
.im-js .im-comp-list.is-in li:nth-child(5) { transition-delay: .29s; }
.im-js .im-comp-list.is-in li:nth-child(6) { transition-delay: .35s; }

/* — Адаптив — */
@media (max-width: 1023px) {
  .im-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .im-title { max-width: 720px; }

  /* единый ритм отступов секций на планшете (как у FAQ/CTA) */
  .im-comp, .im-adv, .im-tech, .im-stack, .im-cases, .im-proc, .im-why { padding: 72px 0 64px; }
  #im-faq { padding: 72px 0 64px; }
  #cta { padding: 72px 0; }
  .im-sec-head, .im-comp-head { margin-bottom: 36px; }
  #im-faq .fq-head { margin-bottom: 36px; }

  .im-comp-grid { grid-template-columns: 1fr; gap: 18px; }
  .im-comp-head { grid-template-columns: 1fr; gap: 14px; }
  .im-comp-vs {
    height: 52px;
    order: 2;
  }
  .im-comp-card--bad { order: 1; }
  .im-comp-card--good { order: 3; }
  .im-comp-vs-line {
    top: 50%; bottom: auto; left: 4%; right: 4%; width: auto; height: 2px;
    /* горизонтальный шов: аренда (ink) → владение (teal) */
    background: linear-gradient(90deg,
      transparent, rgba(157, 168, 167, .6) 22%,
      rgba(26, 188, 156, .5) 78%, transparent);
  }

  .im-why-grid { grid-template-columns: 1fr 1fr; }
  .im-proc-grid { grid-template-columns: 1fr 1fr; }
  .im-slider {
    --im-slide-w: min(680px, 88%);
    --im-gap: 18px;
    --im-rot: 18deg;
    --im-depth: 150px;
  }
  .im-tech-wrap { grid-template-columns: 1fr; }
  .im-card--feat { padding: 26px 28px; }
}

@media (max-width: 640px) {
  .im-hero { padding: calc(var(--header-h) + 32px) 0 56px; }
  .im-comp, .im-adv, .im-tech, .im-stack, .im-cases, .im-proc, .im-why, #im-faq { padding: 64px 0 60px; }
  #cta { padding: 64px 0; }
  .im-sec-head { margin-bottom: 30px; }
  #im-faq .fq-head { margin-bottom: 30px; }

  .im-actions { margin-top: 26px; }
  .im-btn, .im-ghost { width: 100%; }

  .im-comp-head { margin-bottom: 30px; }
  .im-comp-card { padding: 22px 20px 22px; }
  .im-comp-list { gap: 11px; }
  .im-comp-list li { font-size: 14px; }
  .im-comp-foot-value { font-size: 34px; }
  .im-comp-note { padding: 22px 22px; font-size: 15.5px; }

  .im-adv-grid, .im-proc-grid, .im-why-grid { grid-template-columns: 1fr; }
  .im-card--feat { padding: 24px 22px; }
  .im-card--feat .im-card-text { max-width: none; }

  .im-case-link { width: 100%; justify-content: center; }
  .im-case-body { padding: 20px 20px 22px; }
  .im-slider {
    --im-slide-w: 100%;
    --im-gap: 12px;
    --im-rot: 12deg;
    --im-depth: 90px;
  }
  .im-slider-stage { gap: 16px; }
  .im-case { grid-template-columns: 1fr; }
  .im-case-media { min-height: 0; aspect-ratio: 16 / 10; }
  .im-case-media img { position: static; }
  .im-case-name { font-size: 19px; }
  .im-case-stat dd { font-size: 19px; }
  .im-slider-nav { margin-top: 20px; }
  .im-slider-btn { width: 42px; height: 42px; }

  .im-stack-card { width: 244px; padding: 18px 20px; }
  .im-marquee { margin-top: 8px; }
  .im-quote { padding: 26px 22px; }
  .im-quote-text { font-size: 16px; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .im-js .im-reveal,
  .im-js .im-comp-list li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .im-marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .im-marquee-row { flex-wrap: wrap; padding-right: 0; }
  .im-case-media img, .im-card, .im-case, .im-slider--on .im-case,
  .im-why-card, .im-comp-card { transition: none; }
  .im-btn, .im-btn svg, .im-ghost, .im-ghost svg, .im-case-link, .im-case-link svg { transition: none; }
  .im-comp-glow { animation: none; }
  .im-js .im-comp-card,
  .im-js .im-comp-card.is-in { transition: none; }
  .im-comp-bar-fill { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА УСЛУГИ: СОЗДАНИЕ САЙТОВ (service-web.html)
   Префикс sw-. Уникальные блоки страницы: тёмный hero «Aurora type»
   (.im-hero--dark + .swa-* — авроры, зерно, стеклянная призма),
   манифест-банд (.sw-idea), «анатомия сайта» — изометрическая схема
   слоёв + карточки (.sw-anatomy) и сетка форматов (.sw-formats).
   Остальное — общие im-компоненты (см. секцию выше).
   ═══════════════════════════════════════════════════════════ */

/* ═══ HERO: тёмный «Aurora type» — премиум-паттерн топ-студий ═══
   Гигантская типографика первой величины на живой атмосфере:
   дрейфующие teal-авроры + зерно + тонкая сетка (фон .swa-bg).
   Правая часть — два переключаемых варианта (класс .swa-v-shots
   на секции): A — абстрактная стеклянная призма из трёх листов
   (CSS 3D, .swa-obj) с гало и орбитальными кольцами; B — коллаж
   полупрозрачных скриншотов сайтов (.swa-shots). Появление копи —
   каскад «подъём из блюра» (.swa-rv). Высота hero — в пределах
   первого экрана (flex + min-height: 100svh).
   Лёгкий параллакс фона/объекта — service-web.js (pointer:fine). */

.im-hero--dark {
  /* высота — ровно в пределах первого экрана: flex центрирует
     контент, min-height добирает до вьюпорта, но не раздувает
     hero дальше экрана (контент ужат под один экран) */
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 52px) 0 64px;
  background: var(--ink-950);
  border-bottom: 0;
}
/* базовая сетка .im-hero::after не нужна — есть .swa-grid */
.im-hero--dark::after { content: none; }
.im-hero--dark .im-hero-in {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  gap: 40px;
  row-gap: 0;
}
/* страница интернет-магазина: правая колонка шире — под диораму */
.im-hero--dark.im-hero--shop .im-hero-in {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
}

/* — Атмосфера: авроры (дрейф) + сетка + зерно — */
.swa-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.swa-aurora { position: absolute; inset: 0; will-change: transform; }
.swa-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.swa-blob--1 {
  width: min(860px, 68vw); height: 560px;
  top: -240px; right: -160px;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .34), rgba(26, 188, 156, .10) 55%, transparent 74%);
  animation: swa-drift-a 26s ease-in-out infinite alternate;
}
.swa-blob--2 {
  width: 620px; height: 520px;
  bottom: -280px; left: -240px;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .20), transparent 72%);
  animation: swa-drift-b 33s ease-in-out infinite alternate;
}
.swa-blob--3 {
  width: 560px; height: 460px;
  top: 6%; left: 32%;
  background: radial-gradient(closest-side,
    rgba(114, 220, 198, .13), transparent 70%);
  animation: swa-drift-c 39s ease-in-out infinite alternate;
}
@keyframes swa-drift-a { to { transform: translate3d(-72px, 64px, 0) scale(1.07); } }
@keyframes swa-drift-b { to { transform: translate3d(64px, -56px, 0) scale(1.1); } }
@keyframes swa-drift-c { to { transform: translate3d(-48px, 44px, 0) scale(.93); } }

.swa-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(114, 220, 198, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 220, 198, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(980px 640px at 68% 12%, #000, transparent 76%);
  mask-image: radial-gradient(980px 640px at 68% 12%, #000, transparent 76%);
}
/* зерно: SVG feTurbulence, data-URI (без внешних файлов) */
.swa-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: .055;
}

/* — Появление копи: подъём из блюра (каскад через inline --d) — */
.swa-rv {
  animation: swa-rise .75s cubic-bezier(.22, .61, .24, 1) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes swa-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* — Перекраска общих hero-стилей под тёмный фон — */
/* крошки: чуть крупнее базовых (13px) и с большим шагом */
.im-hero--dark .im-crumbs { font-size: 14.5px; gap: 12px; }
.im-hero--dark .im-crumbs svg { width: 15px; height: 15px; }
.im-hero--dark .im-crumbs a { color: rgba(255, 255, 255, .55); }
.im-hero--dark .im-crumbs a:hover { color: var(--teal-300); }
.im-hero--dark .im-crumbs svg { color: rgba(255, 255, 255, .32); }
.im-hero--dark .im-crumbs [aria-current] { color: rgba(255, 255, 255, .78); }

/* заголовок — типографика первой величины, акцент — градиент */
.im-hero--dark .im-title {
  max-width: 780px;
  margin-top: 26px;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--white);
}
.im-hero--dark .im-title span { color: var(--teal-300); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .im-hero--dark .im-title span {
    color: transparent;
    background: linear-gradient(97deg,
      var(--teal-200) 4%, var(--teal-400) 52%, var(--teal-300) 96%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.im-hero--dark .im-sub {
  max-width: 520px;
  margin-top: 24px;
  font-size: 17.5px;
  color: rgba(255, 255, 255, .72);
}

/* кнопки: primary — teal-глоу, ghost — тёмное стекло */
.im-hero--dark .im-actions { margin-top: 38px; gap: 12px; }
.im-hero--dark .im-btn {
  background: var(--teal-500);
  box-shadow:
    0 14px 40px -10px rgba(26, 188, 156, .55),
    0 4px 14px rgba(26, 188, 156, .28),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.im-hero--dark .im-btn:hover {
  background: var(--teal-400);
  box-shadow:
    0 18px 52px -10px rgba(26, 188, 156, .65),
    0 6px 18px rgba(26, 188, 156, .30),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.im-hero--dark .im-ghost {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  backdrop-filter: blur(8px);
}
.im-hero--dark .im-ghost:hover {
  border-color: var(--teal-400);
  background: rgba(26, 188, 156, .14);
  color: var(--teal-200);
}
.im-hero--dark .im-ghost svg { stroke: currentColor; }

/* — Объект: стеклянная призма (CSS 3D) + гало + кольца — */
.swa-obj {
  position: relative;
  min-width: 0;
  min-height: 480px;
  display: grid;
  place-items: center;
  perspective: 1200px;
  animation: swa-rise .9s cubic-bezier(.22, .61, .24, 1) backwards .35s;
}
.swa-halo {
  position: absolute;
  width: min(540px, 110%); height: min(540px, 110%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .30), rgba(26, 188, 156, .09) 55%, transparent 74%);
  filter: blur(26px);
  animation: swa-halo 7.5s ease-in-out infinite alternate;
}
@keyframes swa-halo { to { transform: scale(1.14); opacity: .8; } }

.swa-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(114, 220, 198, .20);
}
.swa-ring--a {
  width: 460px; height: 460px;
  transform: rotate(-16deg) scaleY(.42);
}
.swa-ring--b {
  width: 600px; height: 600px;
  border-style: dashed;
  border-color: rgba(114, 220, 198, .13);
  animation: swa-spin 44s linear infinite;
}
@keyframes swa-spin {
  from { transform: rotate(-16deg) scaleY(.42); }
  to   { transform: rotate(344deg) scaleY(.42); }
}

.swa-prism {
  position: relative;
  width: 320px; height: 250px;
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-24deg) rotateZ(7deg);
  animation: swa-prism 9.5s ease-in-out infinite alternate;
}
@keyframes swa-prism {
  0%, 100% { transform: rotateX(14deg) rotateY(-24deg) rotateZ(7deg) translateY(0); }
  50%      { transform: rotateX(11deg) rotateY(-18deg) rotateZ(5deg) translateY(-14px); }
}
.swa-sheet {
  position: absolute; inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .17);
  background: linear-gradient(138deg,
    rgba(255, 255, 255, .11) 0%,
    rgba(26, 188, 156, .10) 48%,
    rgba(255, 255, 255, .02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 34px 70px -34px rgba(4, 18, 16, .9);
  animation: swa-sheet-in .8s cubic-bezier(.22, .61, .24, 1) backwards;
}
/* блик — тонкая световая кромка */
.swa-sheet::after {
  content: '';
  position: absolute; top: 10px; left: 10%; right: 32%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
}
.swa-sheet--a { transform: translateZ(0); animation-delay: .5s; }
.swa-sheet--b {
  transform: translate3d(30px, -26px, 70px);
  background: linear-gradient(138deg,
    rgba(255, 255, 255, .13),
    rgba(26, 188, 156, .14) 52%,
    rgba(255, 255, 255, .03));
  animation-delay: .62s;
}
.swa-sheet--c {
  transform: translate3d(60px, -52px, 140px);
  background: linear-gradient(138deg,
    rgba(255, 255, 255, .15),
    rgba(26, 188, 156, .18) 52%,
    rgba(255, 255, 255, .04));
  animation-delay: .74s;
}
@keyframes swa-sheet-in {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}

/* — Вариант B: коллаж полупрозрачных скриншотов сайтов (.swa-shots) —
   Включается модификатором .swa-v-shots на .im-hero--dark (призма
   при этом скрыта, но остаётся в разметке). Миниатюры кейсов
   «растворены» в тёмном фоне: прозрачность, teal-тинт и градиентный
   уход в тень; каждая карточка парит в своём ритме (--rot сохраняет
   наклон в анимации), позади — teal-свечение. */
.swa-shots { display: none; }
.im-hero--dark.swa-v-shots .swa-obj { display: none; }
.im-hero--dark.swa-v-shots .swa-shots {
  display: block;
  position: relative;
  min-width: 0;
  min-height: 520px;
  animation: swa-rise .9s cubic-bezier(.22, .61, .24, 1) backwards .35s;
}
.swa-shots-glow {
  position: absolute; inset: -10% -14%;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .26), rgba(26, 188, 156, .07) 58%, transparent 76%);
  filter: blur(30px);
  animation: swa-halo 7.5s ease-in-out infinite alternate;
}
.swa-shot {
  position: absolute; margin: 0;
  aspect-ratio: 650 / 450;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  box-shadow:
    0 42px 90px -42px rgba(4, 18, 16, .95),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  overflow: hidden;
  transform: rotate(var(--rot, 0deg));
  animation: swa-float var(--dur, 9s) ease-in-out var(--del, 0s) infinite alternate;
}
.swa-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: var(--op, .55);
  filter: saturate(.88);
}
/* teal-тинт сверху-слева + уход в тень снизу — растворение в фоне */
.swa-shot::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(205deg, rgba(26, 188, 156, .15) 0%, transparent 42%),
    linear-gradient(0deg, rgba(4, 18, 16, .55) 0%, transparent 48%);
}
/* передний план — самый читаемый */
.swa-shot--1 { --op: .6; --rot: -2.5deg; --dur: 8.5s;
  width: 84%; left: 0; top: 17%; z-index: 3; }
/* задние — мельче, бледнее и чуть размыты (глубина) */
.swa-shot--2 { --op: .34; --rot: 7deg; --dur: 11.5s; --del: -4s;
  width: 58%; right: -4%; top: -3%; z-index: 1; }
.swa-shot--2 img { filter: saturate(.8) blur(1px); }
.swa-shot--3 { --op: .44; --rot: -6deg; --dur: 10s; --del: -7s;
  width: 62%; right: 2%; bottom: -2%; z-index: 2; }
.swa-shot--3 img { filter: saturate(.84) blur(.5px); }
@keyframes swa-float {
  from { transform: rotate(var(--rot, 0deg)) translateY(0); }
  to   { transform: rotate(var(--rot, 0deg)) translateY(-16px); }
}

/* ═══ HERO E-COMMERCE: «магазин, который платит вам» (.swa-store) ═══
   Правая часть тёмного hero страницы интернет-магазина — стеклянное
   окно-витрина с реальными скриншотами премиального магазина одежды
   (assets/img/store-*.jpg, анонимно: без логотипа и фирменных
   цветов — кроп ниже шапки сайта; в MODX — TV-миниатюры).
   Слева из глубины — полупрозрачный кадр лукбука (.swa-shot2,
   язык .swa-shot из service-web: op + blur + teal-тинт), справа
   сверху кружит токен «0% комиссия маркетплейса» — USP страницы
   против площадок. Тот же язык, что .swa-shots: teal-гало,
   dashed-кольцо, парение в разных ритмах; по стеклу витрины
   пробегает блик. Параллакс слоя — service-im.js (pointer:fine). */
.swa-store {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: swa-rise .9s cubic-bezier(.22, .61, .24, 1) backwards .3s;
}

/* — Гало + орбитальное кольцо — преемственность языка сцены — */
.swa-store-glow {
  position: absolute; inset: -6% -10%;
  background: radial-gradient(56% 52% at 50% 48%,
    rgba(26, 188, 156, .22), transparent 70%);
  filter: blur(12px);
  animation: swa-halo 9s ease-in-out infinite alternate;
}
.swa-store-ring {
  position: absolute;
  width: 500px; height: 500px;
  left: 50%; top: 50%;
  border: 1.5px dashed rgba(114, 220, 198, .16);
  border-radius: 50%;
  animation: swa-turn 90s linear infinite;
}
@keyframes swa-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* — Кадр лукбука в глубине: полупрозрачный, чуть размыт,
   выглядывает слева-снизу из-за витрины (противовес токену «0%») — */
.swa-shot2 {
  position: absolute;
  left: -3.5%; bottom: 2%;
  width: 45%;
  aspect-ratio: 735 / 900;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .04);
  box-shadow:
    0 42px 90px -42px rgba(4, 18, 16, .95),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  overflow: hidden;
  z-index: 0;
  transform: rotate(var(--rot, 0deg));
  --rot: 5deg;
  animation: swa-float 10.5s ease-in-out -3s infinite alternate;
}
.swa-shot2 img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: .42;
  filter: saturate(.82) blur(1px);
}
/* teal-тинт + уход в тень — растворение в фоне сцены */
.swa-shot2::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(25deg, rgba(26, 188, 156, .16) 0%, transparent 46%),
    linear-gradient(0deg, rgba(4, 18, 16, .5) 0%, transparent 55%);
}

/* — Окно-витрина: стеклянный «браузер» со скриншотом каталога — */
.swa-store-front {
  position: relative;
  z-index: 1;
  width: 92%;
  padding: 14px 16px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, .09), rgba(255, 255, 255, .028) 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 50px 100px -50px rgba(4, 18, 16, .95);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transform: rotate(var(--rot, 0deg));
  --rot: -2.4deg;
  animation: swa-float 11s ease-in-out infinite alternate;
}
/* блик, изредка пробегающий по стеклу */
.swa-store-front::before {
  content: '';
  position: absolute; top: -20%; bottom: -20%;
  left: 0; width: 34%;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, .07), transparent);
  transform: translateX(-160%) skewX(-16deg);
  animation: swa-sheen 8s ease-in-out 2.6s infinite;
}
@keyframes swa-sheen {
  0%        { transform: translateX(-160%) skewX(-16deg); }
  38%, 100% { transform: translateX(430%)  skewX(-16deg); }
}

/* браузерная строка: точки-«светофор» + адрес с замочком */
.swa-sf-bar { position: relative; height: 22px; display: flex; align-items: center; }
.swa-sf-dot {
  width: 7px; height: 7px; margin-right: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.swa-sf-url {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .06);
  font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}
.swa-sf-url svg { width: 9px; height: 9px; }

/* — Просвет витрины: скриншот каталога (реальный магазин одежды,
   анонимно) — светлое пятно-фокус тёмной сцены; снизу уходит
   в тень, сверху лёгкий teal-тинт — картинка живёт в палитре — */
.swa-sf-view {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 1212 / 874;
  border-radius: 12px;
  overflow: hidden;
  background: #F3F3F1;
  animation: swa-rise .7s cubic-bezier(.22, .61, .24, 1) backwards .56s;
}
.swa-sf-view img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 0 0;
  opacity: .96;
  filter: saturate(.9) contrast(.99);
}
.swa-sf-view::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(205deg, rgba(26, 188, 156, .10) 0%, transparent 38%),
    linear-gradient(0deg, rgba(4, 18, 16, .42) 0%, transparent 34%);
}

/* — Токен-печать «0% комиссия» — ключевой USP страницы — */
.swa-zero {
  position: absolute; top: 1%; right: 0;
  z-index: 2; /* печать поверх угла витрины (у окна z-index:1) */
  width: 118px; height: 118px;
  display: grid; place-content: center; text-align: center;
  border-radius: 50%;
  background: linear-gradient(160deg,
    rgba(26, 188, 156, .24), rgba(10, 60, 52, .6));
  border: 1px solid rgba(114, 220, 198, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 30px 60px -30px rgba(4, 18, 16, .95);
  backdrop-filter: blur(10px);
  transform: rotate(var(--rot, 0deg));
  --rot: -3deg;
  animation: swa-float 10s ease-in-out -6s infinite alternate;
}
.swa-zero::before {
  content: '';
  position: absolute; inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(114, 220, 198, .35);
}
.swa-zero b {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  color: var(--teal-200);
  text-shadow: 0 0 24px rgba(26, 188, 156, .55);
}
.swa-zero span {
  margin-top: 5px;
  font-size: 8.5px; font-weight: 600; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

/* ═══ ФОРМАТЫ: витрина «какие сайты создаём» (светлая) ═══
   Светлая передышка между тёмным hero и тёмным манифестом —
   фон var(--paper), в одной системе с «встроено в проект».
   Атмосфера: мягкие teal-свечения + светлые варианты сетки
   и зерна; editorial-шапка (заголовок слева, лид справа);
   белые карды с контурным номером и футером «цена + стрелка». */
/* ритм секций — как у im-страницы: 104/96 → 72/64 → 64/60 */
.sw-formats {
  position: relative;
  overflow-x: clip;
  padding: 104px 0 96px;
  background: var(--paper);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
@supports not (overflow-x: clip) { .sw-formats { overflow-x: hidden; } }
.sw-formats .container { position: relative; z-index: 1; }

/* — Атмосфера секции — */
.sw-fmt-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sw-fmt-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
/* мягкие teal-свечения на светлом (тонус ниже, чем в hero) */
.sw-fmt-glow--a {
  width: 760px; height: 520px;
  top: -260px; left: -220px;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .12), transparent 72%);
  animation: swa-drift-b 33s ease-in-out infinite alternate;
}
.sw-fmt-glow--b {
  width: 640px; height: 480px;
  bottom: -220px; right: -180px;
  background: radial-gradient(closest-side,
    rgba(26, 188, 156, .08), transparent 72%);
  animation: swa-drift-a 26s ease-in-out infinite alternate;
}
/* светлые варианты общих .swa-grid/.swa-grain (в hero они тёмные) */
.sw-formats .swa-grid {
  background-image:
    linear-gradient(rgba(17, 136, 113, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 136, 113, .055) 1px, transparent 1px);
}
.sw-formats .swa-grain { opacity: .035; }

/* — Editorial-шапка: заголовок слева, лид справа (по базовой линии) — */
.sw-fmt-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 20px 56px;
  align-items: end;
  margin-bottom: 48px;
}
.sw-formats .im-h2 {
  color: var(--ink-900);
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.sw-fmt-head .im-lead {
  margin: 0;
  font-size: 16.5px;
  color: var(--text-muted);
}

/* — Сетка и белые карды — */
.sw-fmt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.sw-fmt {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 26px 24px;
  border-radius: 20px;
  border: 1px solid var(--fq-line);
  background: var(--white);
  box-shadow: 0 24px 48px -38px rgba(13, 89, 75, .35);
  /* подъём через translate — не конфликтует с reveal-трансформом
     (.im-js .im-reveal.is-in { transform: none }) и его stagger-delay */
  transition: translate .3s cubic-bezier(.22, .61, .24, 1),
              border-color .3s ease, box-shadow .3s ease;
}
.sw-fmt:hover {
  translate: 0 -6px;
  border-color: rgba(26, 188, 156, .55);
  box-shadow:
    0 34px 64px -38px rgba(13, 89, 75, .4),
    0 24px 60px -28px rgba(26, 188, 156, .22);
}

/* контурный номер — премиальная деталь; на hover зажигается */
.sw-fmt-num {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--font-display);
  font-size: 40px; font-weight: 700; line-height: 1;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 188, 156, .38);
  transition: -webkit-text-stroke-color .3s ease;
  pointer-events: none;
}
@supports not (-webkit-text-stroke: 1px #000) {
  .sw-fmt-num { color: rgba(26, 188, 156, .25); }
}
.sw-fmt:hover .sw-fmt-num { -webkit-text-stroke-color: rgba(17, 136, 113, .85); }

/* заголовок — первый элемент карда (иконка убрана по фидбеку):
   занимает место бывшей иконки, кегль чуть крупнее */
.sw-fmt h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.28;
  color: var(--ink-900);
}
.sw-fmt p {
  margin: 0 0 22px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-muted);
}

/* футер карда: чип цены слева, круг-стрелка справа */
.sw-fmt-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.sw-fmt-price {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(26, 188, 156, .32);
  background: rgba(26, 188, 156, .08);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--teal-700);
  white-space: nowrap;
}
.sw-fmt-price svg { width: 13px; height: 13px; flex-shrink: 0; }
.sw-fmt-arrow {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(27, 32, 32, .16);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-600);
  transition: background .3s ease, border-color .3s ease,
              color .3s ease, box-shadow .3s ease;
}
.sw-fmt-arrow svg {
  width: 15px; height: 15px;
  transition: transform .3s cubic-bezier(.22, .61, .24, 1);
}
.sw-fmt:hover .sw-fmt-arrow {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(26, 188, 156, .6);
}
.sw-fmt:hover .sw-fmt-arrow svg { transform: translate(2px, -2px); }

/* ═══ МАНИФЕСТ: тёмный банд перед «анатомией» ═══ */
.sw-idea {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding: 92px 0 88px;
  background:
    radial-gradient(620px 300px at 8% -20%, rgba(26, 188, 156, .16), transparent 60%),
    radial-gradient(700px 340px at 100% 130%, rgba(26, 188, 156, .12), transparent 60%),
    linear-gradient(165deg, var(--ink-900) 0%, var(--ink-950) 100%);
}
.sw-idea-title {
  margin: 0 auto 18px;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700; line-height: 1.16;
  color: #fff;
}
.sw-idea-text {
  margin: 0 auto;
  max-width: 700px;
  font-size: 17px; line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}
.sw-idea-tags {
  list-style: none;
  margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
}
.sw-idea-tags li {
  font-size: 13.5px; font-weight: 600;
  color: rgba(255, 255, 255, .55);
  border: 1px dashed rgba(255, 255, 255, .24);
  border-radius: 999px;
  padding: 9px 16px;
  text-decoration: line-through;
  text-decoration-color: rgba(64, 205, 176, .75);
  text-decoration-thickness: 2px;
}

/* ═══ АНАТОМИЯ САЙТА: разбор продукта на слои ═══
   Слева — изометрический стек из 5 слоёв (декоративный,
   aria-hidden): активный слой приподнимается и подсвечивается.
   Справа — карточки слоёв; IntersectionObserver держит активным
   слой напротив центра вьюпорта. Без JS активен первый слой. */
.sw-anatomy {
  background: var(--white);
  padding: 104px 0 96px;
  overflow-x: clip;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
@supports not (overflow-x: clip) { .sw-anatomy { overflow-x: hidden; } }

.sw-ana {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: 48px;
  align-items: start;
}
.sw-ana-visual { position: sticky; top: calc(var(--header-h) + 28px); }
.sw-ana-stack {
  --plate-w: 296px; --plate-h: 196px; --step: 62px;
  position: relative;
  height: 560px;
  /* проекция стека асимметрична по вертикали (вверх ~330px,
     вниз ~100px) — padding центрирует её в сцене, иначе
     верхние слои уходят под шапку при sticky */
  padding-top: 230px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1300px;
  animation: sw-ana-bob 11s ease-in-out infinite;
}
@keyframes sw-ana-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.sw-ana-plates {
  position: relative;
  width: var(--plate-w); height: var(--plate-h);
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-44deg);
}
.sw-ana-plate {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  transform: translateZ(calc(var(--i) * var(--step)));
  transition: transform .55s cubic-bezier(.3,.86,.3,1),
              opacity .4s ease, border-color .4s ease,
              background .4s ease, box-shadow .55s ease;
  cursor: pointer;
}
.sw-ana-plate svg {
  width: 72%; height: auto;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.sw-ana-plate svg .dl { stroke: var(--ink-300); }
.sw-ana-plate svg .da { stroke: var(--teal-600); }
.sw-ana-plate svg .f1 { fill: var(--teal-100); stroke: var(--teal-600); }
.sw-ana-plate svg .f2 { fill: var(--teal-50); stroke: var(--teal-600); }
.sw-ana-plate svg .fd { fill: var(--teal-500); stroke: none; }
.sw-ana-plate::after {
  content: '';
  position: absolute; top: 14px; left: 14px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-200);
  transition: background .4s ease;
}
.sw-ana-plate:not(.is-active) { opacity: .42; }
.sw-ana-plate.is-active {
  opacity: 1;
  border-color: var(--teal-400);
  background: linear-gradient(160deg, var(--white) 18%, var(--teal-50));
  box-shadow: -20px 32px 46px -26px rgba(15, 110, 93, .5);
  transform: translateZ(calc(var(--i) * var(--step) + 30px));
}
.sw-ana-plate.is-active::after { background: var(--teal-500); }

.sw-ana-cards {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.sw-ana-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--fq-line);
  border-radius: var(--radius);
  padding: 24px 28px;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.sw-ana-card::before {
  content: '';
  position: absolute; left: -1px; top: 18px; bottom: 18px;
  width: 3px; border-radius: 999px;
  background: var(--teal-500);
  opacity: 0;
  transition: opacity .4s ease;
}
.sw-ana-card.is-active {
  background: var(--white);
  border-color: var(--teal-200);
  box-shadow: 0 22px 44px -30px rgba(15, 110, 93, .38);
}
.sw-ana-card.is-active::before { opacity: 1; }
.sw-ana-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sw-ana-num {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
  color: var(--teal-700);
  background: var(--teal-50);
  border-radius: 999px;
  padding: 4px 11px;
}
.sw-ana-kind {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-400);
}
.sw-ana-h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 21px; line-height: 1.25;
  color: var(--ink-900);
}
.sw-ana-text { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--text-muted); }
.sw-ana-get {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--ink-100);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-700);
}
.sw-ana-get svg {
  flex-shrink: 0;
  width: 18px; height: 18px; margin-top: 1px;
  fill: none;
  stroke: var(--teal-600);
  stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sw-ana-get b { color: var(--ink-900); }

/* FAQ страницы — единый ритм с секциями (scope по #sw-faq,
   глобальные страницы не задеты) */
#sw-faq { padding-bottom: 96px; }
#sw-faq .fq-head { margin-bottom: 44px; }

/* — Адаптив — */
@media (max-width: 1023px) {
  .sw-formats { padding: 72px 0 64px; }
  #sw-faq { padding: 72px 0 64px; }
  #sw-faq .fq-head { margin-bottom: 36px; }

  /* на стеке визуал скрываем — hero несёт типографика + атмосфера */
  .swa-obj { display: none; }
  .im-hero--dark.swa-v-shots .swa-shots { display: none; }
  .swa-store { display: none; }
  .swa-blob { filter: blur(64px); }
  .im-hero--dark { padding-bottom: 56px; }
  /* на стеке grid в одну колонку (десктопные 2 колонки перебивают
     базовый .im-hero-in по специфичности); модификатор .im-hero--shop
     имеет ещё большую специфичность — сбрасываем и его */
  .im-hero--dark .im-hero-in,
  .im-hero--dark.im-hero--shop .im-hero-in { grid-template-columns: 1fr; row-gap: 44px; }
  .sw-fmt-grid { grid-template-columns: 1fr 1fr; }
  .sw-fmt-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }

  .sw-idea { padding: 72px 0 64px; }
  .sw-idea-title { font-size: 30px; }
  .sw-anatomy { padding: 72px 0 64px; }
  .sw-ana { grid-template-columns: 1fr; gap: 36px; }
  .sw-ana-visual { position: static; max-width: 520px; margin: 0 auto; }
  .sw-ana-stack { --plate-w: 260px; --plate-h: 172px; --step: 52px; height: 410px; padding-top: 195px; }
}

@media (max-width: 640px) {
  .sw-formats, #sw-faq { padding: 64px 0 60px; }
  #sw-faq .fq-head { margin-bottom: 30px; }

  .im-hero--dark { padding: calc(var(--header-h) + 44px) 0 48px; }
  .im-hero--dark .im-title { margin-top: 18px; }
  .swa-blob--3 { left: 12%; }
  .sw-fmt-grid { grid-template-columns: 1fr; }
  .sw-fmt { padding: 22px 20px; }
  .sw-fmt-num { font-size: 32px; top: 18px; right: 18px; }

  .sw-idea { padding: 64px 0 60px; }
  .sw-idea-text { font-size: 15.5px; }
  .sw-anatomy { padding: 64px 0 60px; }
  .sw-ana-stack { --plate-w: 208px; --plate-h: 140px; --step: 40px; height: 330px; padding-top: 157px; }
  .sw-ana-card { padding: 20px 18px; }
  .sw-ana-h { font-size: 19px; }
  .sw-ana-text { font-size: 14.5px; }
}

/* невысокие десктопные окна (ноутбуки): компактнее — hero
   гарантированно умещается в экран */
@media (min-width: 1024px) and (max-height: 820px) {
  .im-hero--dark { padding: calc(var(--header-h) + 40px) 0 48px; }
  .im-hero--dark .im-title { font-size: clamp(34px, 4.4vw, 52px); }
  .im-hero--dark .im-actions { margin-top: 30px; }
  .swa-obj,
  .im-hero--dark.swa-v-shots .swa-shots { min-height: 420px; }
  /* витрина компактнее — гарантированно умещается в экран */
  .swa-store { min-height: 440px; }
  .swa-store-front { width: 94%; }
  .swa-shot2 { width: 40%; left: -2%; }
  .pf-wall { min-height: 430px; }
  .pf-win--main { top: 9%; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .swa-blob, .swa-halo, .swa-ring--b, .swa-prism,
  .swa-sheet, .swa-rv, .swa-obj, .swa-shots,
  .swa-shots-glow, .swa-shot,
  .swa-store, .swa-store-glow, .swa-store-ring,
  .swa-store-front, .swa-store-front::before,
  .swa-sf-view, .swa-shot2, .swa-zero,
  .pf-wall, .pf-win { animation: none; }
  .sw-fmt, .sw-fmt-arrow, .sw-fmt-arrow svg,
  .sw-fmt-glow { animation: none; transition: none; }
  .sw-ana-stack { animation: none; }
  .sw-ana-plate, .sw-ana-card, .sw-ana-plate::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА СПИСКА БЛОГА (.bl-*) — blog/index.html
   Тот же тёмный hero (.bp-top) и grid-раскладка (.bp-layout),
   что у записи; внутри — лента карточек (две разновидности:
   с иллюстрацией .bl-card--img и текстовая) + постраничная
   навигация. Сайдбар — общий чанк с записью (.bp-side).
   Reveal — те же .bp-js/.bp-on (blog-post.js).
   ═══════════════════════════════════════════════════════════ */

.bl-body { padding: 40px 0 72px; }

/* — Лента карточек ————————————————————————————————————— */
.bl-list { display: grid; gap: 20px; }

/* карточка записи: белая карда в стиле меню сайдбара.
   По умолчанию — текстовая; .bl-card--img добавляет
   миниатюру слева (запись может быть с картинкой или без) */
.bl-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 24px;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--white);
  outline: 1px solid var(--fq-line); outline-offset: -1px;
  box-shadow: 0 20px 44px -34px rgba(16, 42, 36, .4);
  transition: outline-color .25s ease, box-shadow .25s ease, translate .25s ease;
}
.bl-card:hover {
  outline-color: var(--teal-300);
  box-shadow: 0 22px 48px -30px rgba(26, 188, 156, .45);
  translate: 0 -2px;
}
.bl-card--img { grid-template-columns: 236px minmax(0, 1fr); }

/* иллюстрация: врезанная миниатюра, тянется по высоте текста */
.bl-card-media {
  position: relative;
  min-height: 172px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--teal-50);
  outline: 1px solid var(--fq-line); outline-offset: -1px;
}
.bl-card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.bl-card:hover .bl-card-media img { transform: scale(1.045); }

.bl-card-body { display: flex; flex-direction: column; min-width: 0; }

/* мета-строка: чип раздела + дата */
.bl-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bl-card-cat {
  padding: 4px 10px; border-radius: 999px;
  background: var(--teal-50);
  border: 1px solid rgba(26, 188, 156, .28);
  color: var(--teal-700);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.bl-card-date {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-muted);
}
.bl-card-date svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--teal-600);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.bl-card-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; line-height: 1.3;
  letter-spacing: .1px;
}
.bl-card-title a { color: inherit; text-decoration: none; transition: color .22s ease; }
.bl-card-title a:hover { color: var(--teal-700); }

.bl-card-text {
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px; line-height: 1.62;
  color: var(--ink-500);
}

/* теги (есть не у всех записей) */
.bl-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bl-card-tags span {
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--fq-line);
  color: var(--text-muted);
  font-size: 12px; line-height: 1.5;
}

/* низ карточки: «Читать» + просмотры, над ним тонкая линия */
.bl-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--fq-line);
}
.bl-card-more {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--teal-700);
  font-size: 13.5px; font-weight: 700; line-height: 1;
  text-decoration: none;
  transition: color .22s ease;
}
.bl-card-more svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.3;
  stroke-linecap: round; stroke-linejoin: round;
  transition: translate .22s ease;
}
.bl-card-more:hover { color: var(--teal-600); }
.bl-card:hover .bl-card-more svg { translate: 3px 0; }
.bl-card-views {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-muted);
}
.bl-card-views svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* — Постраничная навигация ————————————————————————————— */
.bl-pager { display: flex; justify-content: center; margin-top: 36px; }
.bl-pager-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.bl-pager-num {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 10px;
  border-radius: 999px;
  background: var(--white);
  outline: 1px solid var(--fq-line); outline-offset: -1px;
  font-size: 14.5px; font-weight: 600; line-height: 1;
  color: var(--ink-700);
  text-decoration: none;
  transition: outline-color .22s ease, color .22s ease,
              translate .22s ease, box-shadow .22s ease;
}
a.bl-pager-num:hover {
  outline-color: var(--teal-300);
  color: var(--teal-700);
  translate: 0 -2px;
  box-shadow: 0 14px 30px -20px rgba(26, 188, 156, .6);
}
.bl-pager-num.is-current {
  background: var(--teal-500);
  outline-color: var(--teal-500);
  color: #fff; font-weight: 700;
  box-shadow: 0 14px 28px -14px rgba(26, 188, 156, .65);
  cursor: default;
}
.bl-pager-next svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.3;
  stroke-linecap: round; stroke-linejoin: round;
  transition: translate .22s ease;
}
a.bl-pager-next:hover svg { translate: 3px 0; }

/* — Адаптив ———————————————————————————————————————————— */
@media (max-width: 1023px) {
  .bl-body { padding-top: 32px; }
  .bl-card--img { grid-template-columns: 208px minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .bl-body { padding: 26px 0 56px; }
  .bl-list { gap: 16px; }
  .bl-card { padding: 18px 16px; gap: 6px 18px; }
  .bl-card--img { grid-template-columns: minmax(0, 1fr); }
  .bl-card-media { min-height: 0; aspect-ratio: 16 / 9; }
  .bl-card-title { font-size: 18px; }
  .bl-card-text { font-size: 13.5px; }
  .bl-card-foot { margin-top: 14px; padding-top: 12px; }
  .bl-pager { margin-top: 28px; }
  .bl-pager-num { min-width: 42px; height: 42px; }
  .bl-pager-next { padding: 0 16px; }
}

/* — Reduced motion ————————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-card-media img, .bl-card-more svg,
  .bl-pager-num, .bl-pager-next svg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ГЛОБАЛЬНОЕ СОСТОЯНИЕ ОТПРАВКИ ФОРМ (.fbl-*)
   Классы ставит/снимает main.js:
   window.lockSubmitButtons() / window.unlockSubmitButtons()
   Анимация «кристалл»: квадрат-ромб морфится в кольцо и
   обратно, вокруг расходится гало-импульс. Цвет —
   currentColor: анимация автоматически совпадает с цветом
   текста кнопки (белая на teal-кнопках, teal на светлых).
   Для input[type=submit] (внутрь не влезть) — анимация фоном:
   бегущие диагональные полосы, текст на время скрыт.
   ═══════════════════════════════════════════════════════════ */
.fbl-anim {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.fbl-anim > * { grid-area: 1 / 1; }

.fbl-gem {
  width: 13px;
  height: 13px;
  background: currentColor;
  border-radius: 3px;
  animation: fbl-gem 1.05s cubic-bezier(.45, .05, .55, .95) infinite;
}

.fbl-halo {
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: fbl-halo 1.05s ease-out infinite;
}

@keyframes fbl-gem {
  0%   { transform: rotate(45deg)  scale(1);    border-radius: 3px; }
  50%  { transform: rotate(135deg) scale(.66);  border-radius: 50%; }
  100% { transform: rotate(225deg) scale(1);    border-radius: 3px; }
}

@keyframes fbl-halo {
  0%   { transform: scale(.45);  opacity: .5; }
  75%  { transform: scale(1.02); opacity: 0; }
  100% { transform: scale(1.02); opacity: 0; }
}

/* заблокированная кнопка: убрать hover-блик и реакцию на курсор */
button.fbl-lock { pointer-events: none; }
button.fbl-lock::after { display: none; }

/* input[type=submit]: анимация бегущими полосами по фону */
input[type="submit"].fbl-lock {
  color: transparent;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .18) 0 10px,
      rgba(255, 255, 255, 0) 10px 20px),
    linear-gradient(135deg, var(--teal-500), var(--teal-600));
  background-size: 28.28px 100%, 100% 100%;
  animation: fbl-sweep .8s linear infinite;
}

@keyframes fbl-sweep {
  to { background-position: 28.28px 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fbl-gem, .fbl-halo,
  input[type="submit"].fbl-lock { animation: none; }
}
/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА УСЛУГИ: ПОДДЕРЖКА САЙТОВ (service-support.html)
   Общие компоненты страниц услуг — выше (im-): hero, карточки,
   процесс, 3D-карусель кейсов, FAQ, CTA. Здесь — уникальные
   блоки (префикс sup-): «живая» панель мониторинга в hero
   (3D-наклон за курсором, чипы-спутники, график с легендой,
   спарклайн SLA), боли, тарифы (рекомендуемый выделен),
   разовые работы, полоса цифр, контакты в CTA, цитаты в
   кейсах, сетка 3×2 для «почему мы».
   Reveal — общий .im-js .im-reveal (service-support.js).
   ВАЖНО: transform у .im-reveal занят reveal-системой —
   приподнятие рекомендуемого тарифа и hover-эффекты только
   через индивидуальное свойство translate (урок Task 41).
   ═══════════════════════════════════════════════════════════ */

/* ── HERO: правая колонка под панель мониторинга ── */
.sup-hero.im-hero--dark .im-hero-in {
  grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
}

/* — Панель мониторинга: стеклянный дашборд «состояние сайта
   клиента» + два чипа-спутника. .sup-tilt — слой 3D-наклона
   за курсором: углы --rx/--ry и глубина чипов --px/--py
   приходят из JS (service-support.js); без JS — нули, панель
   статична. Декор-слой — общие .swa-halo/.swa-ring--b.
   Значения — ДЕМО. — */
.sup-panel {
  position: relative;
  min-width: 0;
  min-height: 480px;
  display: grid;
  place-items: center;
}
.sup-panel-deco {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.sup-tilt {
  position: relative;
  width: min(432px, 100%);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.sup-panel-card {
  position: relative;
  width: min(432px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(152deg,
    rgba(255, 255, 255, .085) 0%,
    rgba(26, 188, 156, .055) 52%,
    rgba(255, 255, 255, .03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 34px 80px -36px rgba(3, 16, 13, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 18px 18px 20px;
}
/* блик по стеклу — общий приём */
.sup-panel-card::after {
  content: '';
  position: absolute; top: 9px; left: 9%; right: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
}

/* шапка-хром: точки + адрес + LIVE с пульс-кольцом */
.sup-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.sup-chrome-dots { display: inline-flex; gap: 6px; }
.sup-chrome-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.sup-chrome-name {
  flex: 1; min-width: 0;
  font-size: 12px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sup-live {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 10.5px/1 'Roboto', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-300);
}
.sup-live i {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-300);
  box-shadow: 0 0 10px rgba(26, 188, 156, .9);
}
.sup-live i::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(26, 188, 156, .7);
  animation: sup-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes sup-ping {
  0%       { transform: scale(.5); opacity: 1; }
  75%,100% { transform: scale(1.7); opacity: 0; }
}

/* аптайм: подпись + значение + 30 столбиков за 30 дней */
.sup-upt { padding: 16px 2px 4px; }
.sup-upt-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.sup-upt-label { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.sup-upt-value {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700;
  color: var(--teal-300);
}
.sup-upt-bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 46px;
  margin-top: 12px;
}
.sup-upt-bars i {
  flex: 1; min-width: 0;
  height: var(--h, 100%);
  min-height: 6px;
  border-radius: 2.5px;
  background: linear-gradient(180deg, var(--teal-300), var(--teal-600));
  transform-origin: bottom;
  animation: sup-grow .7s cubic-bezier(.22, .7, .3, 1) backwards;
  animation-delay: calc(420ms + var(--i, 0) * 24ms);
}
/* деградировавшие дни — приглушённые, «сегодня» — с пульсом */
.sup-upt-bars i.is-low {
  background: rgba(255, 255, 255, .15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.sup-upt-bars i.is-now {
  background: linear-gradient(180deg, var(--teal-200), var(--teal-400));
  animation:
    sup-grow .7s cubic-bezier(.22, .7, .3, 1) backwards,
    sup-now 2.6s ease-in-out 1.6s infinite;
}
@keyframes sup-grow {
  from { transform: scaleY(0); }
}
@keyframes sup-now {
  0%, 100% { box-shadow: 0 0 9px rgba(26, 188, 156, .4); }
  50%      { box-shadow: 0 0 19px rgba(26, 188, 156, .85); }
}

/* легенда графика — тихая строка под барами */
.sup-upt-legend {
  display: flex; gap: 16px;
  margin-top: 10px;
}
.sup-upt-legend span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .02em;
  color: rgba(255, 255, 255, .38);
}
.sup-upt-legend i {
  width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(180deg, var(--teal-300), var(--teal-600));
}
.sup-upt-legend i.is-low { background: rgba(255, 255, 255, .16); }

/* статус-строки: точка + событие + значение */
.sup-rows {
  display: grid; gap: 9px;
  margin: 14px 0 0;
  padding: 0; list-style: none;
}
.sup-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
}
.sup-dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .26);
}
.sup-dot.is-on {
  background: var(--teal-300);
  box-shadow: 0 0 9px rgba(26, 188, 156, .75);
}
.sup-row-txt {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: rgba(255, 255, 255, .8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sup-row b { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; }

/* футер панели: SLA + спарклайн динамики реакции */
.sup-panel-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 15px;
  padding: 13px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.sup-panel-foot-label { flex: 1; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.sup-spark { width: 78px; height: 24px; flex: none; }
.sup-panel-foot-value {
  font-family: var(--font-display);
  font-size: 23px; font-weight: 700;
  color: var(--teal-300);
}

/* — Чипы-спутники: события «выехали» за карточку. Позиция —
   на .sup-chip (вход — разовая анимация), парение — на
   .sup-chip-body (transform), глубина при наклоне — translate
   из JS-переменных; слои не конфликтуют друг с другом — */
.sup-chip {
  position: absolute;
  z-index: 2;
  animation: sup-chip-in .65s cubic-bezier(.22, .61, .24, 1) backwards;
}
.sup-chip--backup { top: -38px; right: -16px; animation-delay: 1.05s; }
.sup-chip--done   { bottom: -38px; left: -16px; animation-delay: 1.2s; }
.sup-chip-body {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(152deg,
    rgba(255, 255, 255, .1) 0%,
    rgba(26, 188, 156, .07) 58%,
    rgba(255, 255, 255, .04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 18px 44px -18px rgba(3, 16, 13, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  translate: var(--px, 0px) var(--py, 0px);
  animation: sup-float 5.6s ease-in-out 1.9s infinite alternate;
}
.sup-chip--done .sup-chip-body { animation-delay: 2.5s; }
.sup-chip-ico {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: rgba(26, 188, 156, .16);
  border: 1px solid rgba(26, 188, 156, .38);
  color: var(--teal-300);
}
.sup-chip-ico svg { width: 15px; height: 15px; fill: none; }
.sup-chip-txt {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 12px; line-height: 1.25;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
}
.sup-chip-txt b { font-size: 13px; font-weight: 600; color: #fff; }
@keyframes sup-chip-in {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
}
@keyframes sup-float {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}

/* ── БОЛИ: «Знакомы ли вам эти ситуации?» — бумажный фон,
   6 карточек (общие .im-card--row) в сетке 3×2 — */
.sup-pains {
  background: var(--paper);
  padding: 104px 0 96px;
}
.sup-pains-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* — Финальный акцент секции: тёмная CTA-полоса «бесплатный
   аудит» — ответ на ситуации выше. Язык тёмных hero: свечения,
   сетка, зерно (статично); между копи и кнопкой — пунктирный
   «отрывной корешок» с пробитыми отверстиями (цвет — бумага
   секции). Кнопка — общая модалка (чип «Поддержка») — */
.sup-audit {
  position: relative;
  margin-top: 36px;
  border-radius: 24px;
  background:
    radial-gradient(640px 300px at 86% -8%, rgba(26, 188, 156, .18), transparent 64%),
    radial-gradient(460px 280px at 2% 112%, rgba(26, 188, 156, .09), transparent 62%),
    linear-gradient(140deg, #22302d 0%, var(--ink-900) 46%, #16302b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 34px 74px -34px rgba(10, 46, 39, .55);
}
/* сетка с маской — как в hero, но тише; radius наследуется,
   поэтому overflow не нужен (отверстия корешка выходят за край) */
.sup-audit::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(rgba(114, 220, 198, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 220, 198, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(600px 320px at 78% 0%, #000, transparent 74%);
  mask-image: radial-gradient(600px 320px at 78% 0%, #000, transparent 74%);
}
.sup-audit-grain { border-radius: inherit; opacity: .05; }
.sup-audit-in {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 34px;
  padding: 34px 40px;
}
.sup-audit-copy { flex: 1; min-width: 0; }
.sup-audit-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.28;
  color: #fff;
  text-wrap: balance;
}
.sup-audit-title span { color: var(--teal-300); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sup-audit-title span {
    background: linear-gradient(92deg, var(--teal-200), var(--teal-400) 55%, var(--teal-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.sup-audit-sub {
  margin: 10px 0 0;
  max-width: 560px;
  font-size: 15.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}
/* «отрывной корешок»: пунктир во всю высоту + два отверстия
   на верхней и нижней кромках полосы (высунуты за край) */
.sup-audit-sep {
  position: relative;
  align-self: stretch;
  flex: none;
  width: 0;
  border-left: 2px dashed rgba(255, 255, 255, .16);
}
.sup-audit-hole {
  position: absolute; left: -6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgba(15, 43, 37, .22);
}
.sup-audit-hole--t { top: -40px; }
.sup-audit-hole--b { bottom: -40px; }
.sup-audit-act {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sup-audit-btn { height: 54px; padding: 0 30px; font-size: 15.5px; }
.sup-audit-micro {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .52);
}
.sup-audit-micro svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--teal-300);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── ТАРИФЫ: 3 карточки; рекомендуемый (sup-plan--biz) —
   teal-рамка, бейдж, свечение, приподнят translate'ом
   (transform занят reveal'ом) ───────────────────────────── */
.sup-plans {
  background: var(--white);
  padding: 104px 0 96px;
}
.sup-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.sup-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 26px 26px;
  border-radius: 20px;
  border: 1px solid rgba(19, 62, 53, .12);
  background: var(--white);
  box-shadow: 0 18px 44px -30px rgba(10, 46, 39, .35);
}
.sup-plan--biz {
  border-color: var(--teal-500);
  box-shadow:
    0 30px 70px -28px rgba(26, 188, 156, .5),
    0 10px 28px -14px rgba(26, 188, 156, .3);
  translate: 0 -14px;
}
.sup-plan-badge {
  position: absolute; top: -14px; left: 50%;
  translate: -50% 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-500);
  box-shadow: 0 8px 20px -8px rgba(26, 188, 156, .65);
  font: 700 11.5px/1 'Roboto', sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.sup-plan-tier {
  display: inline-block;
  font: 700 11.5px/1 'Roboto', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700);
}
.sup-plan-name {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 25px; font-weight: 700; line-height: 1.15;
  color: var(--ink-900);
}
.sup-plan-price {
  margin: 12px 0 0;
  font-size: 18px; font-weight: 700;
  color: var(--teal-700);
}
.sup-plan-for {
  margin: 7px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--fq-line);
  font-size: 13.5px; line-height: 1.5;
  color: var(--text-muted);
}
.sup-plan-list {
  display: grid; gap: 11px;
  margin: 16px 0 0;
  padding: 0; list-style: none;
}
.sup-plan-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-800);
}
.sup-check {
  display: inline-grid; place-items: center;
  width: 19px; height: 19px; flex: none;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--teal-50);
}
.sup-check svg {
  width: 11px; height: 11px;
  fill: none; stroke: var(--teal-600);
  stroke-linecap: round; stroke-linejoin: round;
}
.sup-plan-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: auto;
  height: 48px;
  border: 0; border-radius: 999px;
  background: var(--teal-500);
  box-shadow: 0 12px 28px -12px rgba(26, 188, 156, .55);
  font: 600 14.5px/1 'Roboto', sans-serif; color: #fff;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.sup-plan--biz .sup-plan-btn { margin-top: 22px; }
.sup-plan-btn:hover {
  background: var(--teal-600);
  box-shadow: 0 14px 32px -12px rgba(26, 188, 156, .65);
}
.sup-plan-btn svg {
  width: 15px; height: 15px;
  stroke: rgba(255, 255, 255, .92);
  transition: transform .2s ease;
}
.sup-plan-btn:hover svg { transform: translateX(3px); }

/* — Разовые работы: пунктирный купон со списком — */
.sup-extra {
  margin-top: 56px;
  padding: 26px 28px;
  border: 1.5px dashed rgba(19, 62, 53, .25);
  border-radius: 20px;
}
.sup-extra-label {
  margin: 0 0 18px;
  font: 700 12.5px/1 'Roboto', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700);
}
.sup-extra-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.sup-extra-item {
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px 15px;
  border-radius: 14px;
  background: var(--paper);
  transition: border-color .18s ease, box-shadow .18s ease, translate .18s ease;
  border: 1px solid transparent;
}
.sup-extra-item:hover {
  border-color: rgba(26, 188, 156, .4);
  box-shadow: 0 14px 30px -18px rgba(26, 188, 156, .45);
  translate: 0 -3px;
}
.sup-extra-ico {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--teal-50);
}
.sup-extra-ico svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--teal-600);
  stroke-linecap: round; stroke-linejoin: round;
}
.sup-extra-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--ink-800);
}
.sup-extra-price {
  margin-top: auto;
  font-size: 13px; font-weight: 700;
  color: var(--teal-700);
}

/* ── ПОЧЕМУ МЫ: 6 карточек в сетке 3×2 (карточки общие,
   сетка — своя; сбросы в медиа с той же специфичностью) ── */
.sup-why .im-why-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* цитата клиента внутри кейса карусели */
.im-case-quote {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--teal-400);
  font-size: 13.5px; font-style: italic; line-height: 1.5;
  color: rgba(19, 62, 53, .68);
}

/* ── ЦИФРЫ: тёмная полоса социальных доказательств ── */
.sup-stats {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background:
    radial-gradient(640px 300px at 18% 0%, rgba(26, 188, 156, .12), transparent 65%),
    radial-gradient(520px 280px at 86% 100%, rgba(26, 188, 156, .08), transparent 70%),
    linear-gradient(172deg, var(--ink-950), var(--ink-900));
}
.sup-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0; padding: 0; list-style: none;
}
.sup-stat {
  text-align: center;
  padding: 10px 12px;
}
.sup-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 44px; font-weight: 700; line-height: 1;
  color: var(--teal-300);
}
.sup-stat-label {
  display: block;
  margin-top: 10px;
  font-size: 14px; line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}

/* ── КОНТАКТЫ в CTA: телефон / почта / мессенджеры ── */
.sup-contacts {
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0; list-style: none;
}
.sup-contacts li {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .75);
}
.sup-contacts svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--teal-300);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sup-contacts a { color: rgba(255, 255, 255, .85); transition: color .18s ease; }
.sup-contacts a:hover { color: var(--teal-300); }

/* ── Адаптив ── */
@media (max-width: 1240px) {
  .sup-hero.im-hero--dark .im-hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(370px, 430px);
  }
  .sup-extra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  /* hero в одну колонку; сброс с той же специфичностью,
     что у базового правила (урок Task 40/42) */
  .sup-hero.im-hero--dark .im-hero-in { grid-template-columns: 1fr; }
  .sup-panel { display: none; }

  .sup-pains-grid { grid-template-columns: 1fr 1fr; }
  .sup-plans-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .sup-plan--biz { translate: none; order: -1; }
  .sup-why .im-why-grid { grid-template-columns: 1fr 1fr; }
  .sup-extra-grid { grid-template-columns: 1fr 1fr; }
  .sup-stats-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .sup-stat-num { font-size: 38px; }
  /* CTA-полоса аудита — в колонку */
  .sup-audit-in { flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px 28px; }
  .sup-audit-sep { display: none; }
  .sup-audit-act { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px; }
}

@media (max-width: 640px) {
  .sup-pains, .sup-plans { padding: 64px 0 60px; }
  .sup-pains-grid, .sup-why .im-why-grid, .sup-extra-grid { grid-template-columns: 1fr; }
  .sup-plan { padding: 26px 20px 22px; }
  .sup-plan-btn { width: 100%; }
  .sup-chip--backup { right: 0; }
  .sup-chip--done { left: 0; }
  .sup-extra { margin-top: 40px; padding: 20px 18px; }
  .sup-stats { padding: 52px 0; }
  .sup-stats-grid { gap: 28px 14px; }
  .sup-stat { padding: 0 6px; }
  .sup-stat-num { font-size: 31px; }
  .sup-stat-label { font-size: 13px; }
  .sup-audit { margin-top: 30px; border-radius: 20px; }
  .sup-audit-in { padding: 26px 20px; gap: 20px; }
  .sup-audit-btn { width: 100%; }
  .im-case-quote { font-size: 13px; }
}

/* — Reduced motion: гасим всю моторику панели (пульс LIVE,
   рост баров, пульс «сегодня», чипы) — карточка остаётся
   полностью видимой и статичной; вход панели гасит общий
   блок .swa-rv — */
@media (prefers-reduced-motion: reduce) {
  .sup-live i::after { animation: none; opacity: .5; }
  .sup-upt-bars i,
  .sup-upt-bars i.is-now,
  .sup-chip,
  .sup-chip-body { animation: none; }
  .sup-chip-body { translate: none; }
  .sup-plan-btn svg { transition: none; }
  .sup-extra-item { transition: none; translate: none; }
  .sup-contacts a { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА УСЛУГИ: ПЕРЕНОС НА MODX (service-migration.html)
   Концепция «Переезд без потерь»: сайт переезжает как квартира —
   с описью имущества, сохранённым адресом (SEO) и без дня
   простоя. Неважно, откуда: Evolution, Revolution 2.x,
   WordPress, Битрикс, Joomla, OpenCart, конструкторы, самописный
   PHP — точка назначения одна: современный MODX 3.
   Префикс mg-; общие секции — реюз im-adv/im-tech/im-proc/
   im-cases/im-why/fq/ct. Правые визуалы ≤1023 скрыты (паттерн
   service-страниц). При интеграции в MODX — комментарии в HTML.
   ═══════════════════════════════════════════════════════════ */

/* — HERO: «Маршрутный лист переезда» .mg-route — стеклянная
   панель (рецепт .sup-panel-card): блок «Откуда» (движки крутит
   JS — service-migration.js; полоски .mg-route-dots — индикаторы
   и переключатели), стрелка «забираем всё», блок «Куда» (MODX
   3.x), опись-чеклист и номер маршрута в подвале. Чипы-спутники
   .mg-fchip парят по краям. Наклон за курсором — тот же приём,
   что у .sup-tilt (переменные --rx/--ry ставит JS). Декор —
   общие .swa-halo/.swa-ring. Панель декоративная: role="img" с
   текстовым описанием, внутренность aria-hidden. — */
.mg-route {
  position: relative;
  min-width: 0;
  min-height: 520px;
  display: grid;
  place-items: center;
  animation: swa-rise .9s cubic-bezier(.22, .61, .24, 1) backwards .35s;
}
.mg-route-deco {
  position: absolute; inset: -36px -30px;
  display: grid; place-items: center;
  pointer-events: none;
}
.mg-route-deco .swa-halo { opacity: .8; }

.mg-route-tilt {
  position: relative;
  width: min(432px, 100%);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.mg-route-card {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(152deg,
    rgba(255, 255, 255, .085) 0%,
    rgba(26, 188, 156, .07) 52%,
    rgba(255, 255, 255, .03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 34px 80px -36px rgba(3, 16, 13, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 18px 18px 16px;
}
/* блик по стеклу — общий приём */
.mg-route-card::after {
  content: '';
  position: absolute; top: 9px; left: 9%; right: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
}

/* шапка-хром: точки + название + статус-бейдж */
.mg-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.mg-chrome-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.mg-chrome-name {
  flex: 1;
  margin-left: 4px;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .62);
}
.mg-chrome-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(114, 220, 198, .35);
  background: rgba(26, 188, 156, .12);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-300);
}
.mg-chrome-badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-300);
  animation: mg-pulse 2.2s ease-in-out infinite;
}
@keyframes mg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(114, 220, 198, .45); }
  55%      { box-shadow: 0 0 0 5px rgba(114, 220, 198, 0); }
}

.mg-route-body { padding: 18px 6px 6px; display: grid; gap: 14px; }
.mg-step-label {
  margin: 0 0 7px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
/* значение «Откуда» — JS крутит движки (фейд через .is-swap);
   min-height держит высоту строки при любой длине названия */
.mg-route-val {
  margin: 0;
  min-height: 1.25em;
  font-family: var(--font-display);
  font-size: 25px; font-weight: 700; line-height: 1.25;
  color: #fff;
  transition: opacity .22s ease, transform .22s ease;
}
.mg-route-val.is-swap { opacity: 0; transform: translateY(5px); }
.mg-route-val--teal { color: var(--teal-300); }

/* индикаторы-переключатели источников (8 движков) */
.mg-route-dots { display: flex; gap: 6px; margin-top: 12px; }
.mg-route-dot {
  width: 18px; height: 4px;
  padding: 0; border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.mg-route-dot:hover { background: rgba(255, 255, 255, .38); }
.mg-route-dot.is-on { background: var(--teal-300); width: 26px; }
.mg-route-dot:focus-visible { outline: 2px solid var(--teal-300); outline-offset: 3px; }

/* стрелка «забираем всё» между блоками */
.mg-route-link {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255, 255, 255, .5);
}
.mg-route-link svg {
  width: 20px; height: 20px;
  color: var(--teal-300);
  animation: mg-drop 2.1s ease-in-out infinite;
}
@keyframes mg-drop {
  0%, 100% { transform: translateY(-2px); opacity: .75; }
  50%      { transform: translateY(3px);  opacity: 1; }
}
.mg-route-link span {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.mg-route-modern {
  display: inline-block;
  margin-top: 9px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
}

/* опись-чеклист переезда */
.mg-route-list {
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  list-style: none;
  display: grid; gap: 9px;
}
.mg-route-list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, .74);
}
.mg-route-list svg {
  width: 15px; height: 15px; flex: none;
  align-self: center;
  color: var(--teal-300);
}
.mg-route-list b { color: #fff; font-weight: 600; }

.mg-route-foot {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 14px;
  padding: 12px 6px 2px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

/* чипы-спутники по краям панели */
.mg-fchip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(30, 38, 37, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -24px rgba(3, 16, 13, .9);
  font-size: 12.5px; font-weight: 600;
  font-style: normal;
  color: rgba(255, 255, 255, .84);
  white-space: nowrap;
  animation: mg-float 5.2s ease-in-out infinite alternate;
}
.mg-fchip svg { width: 15px; height: 15px; flex: none; color: var(--teal-300); }
.mg-fchip--a { top: -16px; right: -8px; }
.mg-fchip--b { bottom: -16px; left: -8px; animation-delay: -2.6s; }
@keyframes mg-float {
  from { transform: translateY(-5px); }
  to   { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-route { animation: none; }
  .mg-fchip, .mg-route-link svg, .mg-chrome-badge i { animation: none; }
}

/* — ОПИСЬ ПЕРЕЕЗДА .mg-inv: слева липкая тёмная карточка «Остаётся
   в прошлом», справа — сетка «что переезжает» (8 позиций с
   нумерацией). Секция-обёртка — .im-adv (фон/паддинги общие). — */
.mg-inv-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  gap: 20px;
  align-items: start;
}
.mg-inv-side {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  overflow: hidden;
  padding: 30px 28px 28px;
  border-radius: var(--radius);
  background: var(--ink-900);
  color: #fff;
}
/* мягкое teal-свечение в углу карточки */
.mg-inv-side::before {
  content: '';
  position: absolute; top: -120px; right: -120px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 188, 156, .16), transparent 65%);
  pointer-events: none;
}
.mg-inv-side-h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.3;
  color: #fff;
}
.mg-inv-side-sub {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, .6);
}
.mg-inv-side-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.mg-inv-side-list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .74);
}
.mg-inv-side-list svg {
  width: 15px; height: 15px; flex: none;
  align-self: center;
  color: rgba(255, 255, 255, .38);
}
.mg-inv-side-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px; line-height: 1.55;
  color: rgba(255, 255, 255, .5);
}
.mg-inv-side-note b { color: var(--teal-300); font-weight: 600; }

.mg-inv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mg-inv-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 20px 22px 22px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--fq-line);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mg-inv-grid .mg-inv-row:hover {
  transform: translateY(-4px);
  border-color: var(--teal-200);
  box-shadow: 0 18px 40px -26px rgba(15, 110, 93, .3);
}
.mg-inv-num {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: .08em;
  color: var(--teal-700);
  padding-top: 3px;
}
.mg-inv-h {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 16.5px; line-height: 1.3;
  color: var(--ink-900);
}
.mg-inv-text { margin: 0; font-size: 14px; line-height: 1.58; color: var(--text-muted); }

/* — ИСТОЧНИКИ v3 «Коммутационная панель» .mg-src-sec: тёмная
   полоса на ВСЮ ширину экрана (ритм страницы: paper → dark →
   paper). Хром-полосы больше нет — атмосферу несут секция
   (правый glow как на тёмных hero — те же 4 слоя, что у
   .im-hero--glow, поверх аврор и базового градиента, плюс
   чертёжная сетка ::before с mask-fade) и карточки-
   стекло с призрачной монограммой-ватермаркой; MODX-семья
   (Evo/Revo 2.x) подсвечена teal. Плитка-моно убрана — заголовок
   поднят наверх карточки, чип прижат к нижней грани (flex-
   колонка), поэтому все чипы на одной линии. Шина .mg-src-bus:
   LED-порты, пунктир-«поток», цель MODX 3 с пульсом. Под шиной —
   CTA-полоса в формате .sup-audit (service-support) с
   модификатором .mg-src-audit. — */
.mg-src-sec {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 640px at 76% 44%,
      rgba(26, 188, 156, .26), transparent 70%),
    radial-gradient(520px 400px at 94% 14%,
      rgba(114, 220, 198, .15), transparent 72%),
    linear-gradient(258deg,
      rgba(26, 188, 156, .16) 0%,
      rgba(26, 188, 156, .07) 36%,
      transparent 62%),
    linear-gradient(90deg,
      rgba(27, 32, 32, 0) 46%,
      rgba(33, 74, 63, .5) 72%,
      rgba(38, 90, 76, .9) 100%),
    radial-gradient(900px 460px at 88% -12%, rgba(26, 188, 156, .15), transparent 65%),
    radial-gradient(720px 460px at -6% 112%, rgba(26, 188, 156, .08), transparent 60%),
    linear-gradient(168deg, #2B3332 0%, var(--ink-900) 55%, #1E2423 100%);
}
/* чертёжная сетка — тает к центру, видна у верхнего края полосы */
.mg-src-sec::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(760px 460px at 82% 0%, #000, transparent 78%);
          mask-image: radial-gradient(760px 460px at 82% 0%, #000, transparent 78%);
  pointer-events: none;
}
.mg-src-sec .container { position: relative; z-index: 1; }
.mg-src-sec .im-h2 { color: #fff; }
.mg-src-sec .im-lead { color: rgba(255, 255, 255, .62); }
/* примечание под сеткой — светлые тексты на тёмном фоне */
.mg-src-sec .im-comp-note {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(114, 220, 198, .28);
  color: rgba(255, 255, 255, .75);
}
.mg-src-sec .im-comp-note b { color: var(--teal-300); }

.mg-src-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mg-src-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 18px;
  border-radius: 16px;
  background: linear-gradient(165deg,
    rgba(255, 255, 255, .06) 0%,
    rgba(255, 255, 255, .02) 55%,
    rgba(26, 188, 156, .05) 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mg-src-sec .mg-src-card:hover {
  transform: translateY(-4px);
  border-color: rgba(114, 220, 198, .45);
  box-shadow: 0 24px 48px -28px rgba(3, 16, 13, .95);
}
/* MODX-семья — своя экосистема, тёплая teal-подложка */
.mg-src-card--modx {
  background: linear-gradient(165deg,
    rgba(26, 188, 156, .17) 0%,
    rgba(26, 188, 156, .06) 55%,
    rgba(255, 255, 255, .02) 100%);
  border-color: rgba(114, 220, 198, .3);
}
/* призрачная монограмма-ватермарка в правом верхнем углу */
.mg-src-ghost {
  position: absolute; top: -12px; right: 4px;
  font-family: var(--font-display);
  font-size: 84px; font-weight: 700; line-height: 1;
  color: rgba(255, 255, 255, .04);
  -webkit-text-stroke: 1px rgba(255, 255, 255, .1);
  pointer-events: none;
  transition: -webkit-text-stroke-color .25s ease;
}
.mg-src-card:hover .mg-src-ghost { -webkit-text-stroke-color: rgba(114, 220, 198, .42); }
.mg-src-card--modx .mg-src-ghost {
  color: rgba(114, 220, 198, .07);
  -webkit-text-stroke-color: rgba(114, 220, 198, .18);
}
/* контент карточки — поверх монограммы-ватермарки */
.mg-src-name, .mg-src-text, .mg-src-chip { position: relative; z-index: 1; }
.mg-src-name {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 16px; line-height: 1.3;
  color: #fff;
}
.mg-src-text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .58); }
.mg-src-chip {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  margin-top: auto; /* чип прижат к нижней грани — все на одной линии */
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(26, 188, 156, .18), rgba(26, 188, 156, .06));
  border: 1px solid rgba(114, 220, 198, .3);
  font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--teal-300);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.mg-src-chip::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal-300);
  box-shadow: 0 0 8px rgba(114, 220, 198, .8);
}
.mg-src-card:hover .mg-src-chip {
  border-color: rgba(114, 220, 198, .55);
  box-shadow: 0 6px 18px -8px rgba(26, 188, 156, .45);
}

/* шина: порты-лампочки → пунктир-поток → MODX 3 */
.mg-src-bus {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px dashed rgba(255, 255, 255, .13);
}
.mg-src-ports { display: flex; gap: 6px; flex: none; }
.mg-src-ports i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  animation: mg-port 4.8s ease-in-out infinite;
}
.mg-src-ports i:nth-child(2) { animation-delay: .6s; }
.mg-src-ports i:nth-child(3) { animation-delay: 1.2s; }
.mg-src-ports i:nth-child(4) { animation-delay: 1.8s; }
.mg-src-ports i:nth-child(5) { animation-delay: 2.4s; }
.mg-src-ports i:nth-child(6) { animation-delay: 3s; }
.mg-src-ports i:nth-child(7) { animation-delay: 3.6s; }
.mg-src-ports i:nth-child(8) { animation-delay: 4.2s; }
@keyframes mg-port {
  0%, 13%, 100% { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  6%            { background: var(--teal-300); box-shadow: 0 0 10px rgba(114, 220, 198, .65); }
}
.mg-src-wire {
  flex: 1; height: 2px; min-width: 40px;
  background: repeating-linear-gradient(90deg, rgba(114, 220, 198, .5) 0 9px, transparent 9px 18px);
  animation: mg-flow 1.1s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
@keyframes mg-flow { to { background-position: 18px 0; } }
.mg-src-target {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 9px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  box-shadow: 0 16px 32px -16px rgba(26, 188, 156, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.mg-src-target i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: mg-pulse 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mg-src-ports i, .mg-src-wire, .mg-src-target i { animation: none; }
}

/* — КУДА ПЕРЕЕЗЖАЕМ .mg-path: «лестница версий» — 4 узла от
   устаревших платформ к MODX 3.x (цель подсвечена, пульс-кольцо),
   ниже — сетка преимуществ 3.x (реюз .im-card) и примечание. — */
.mg-path-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 6px 0 26px;
}
.mg-path-node {
  position: relative;
  padding-top: 30px;
  text-align: center;
}
/* соединительная линия между узлами */
.mg-path-node::before {
  content: '';
  position: absolute; top: 7px; left: -50%;
  width: 100%; height: 2px;
  background: var(--fq-line);
}
.mg-path-node:first-child::before { display: none; }
.mg-path-dot {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid #C9D6D1;
}
.mg-path-txt { position: relative; }
.mg-path-name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 15.5px; font-weight: 700;
  color: var(--ink-900);
}
.mg-path-sub { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.mg-path-flag {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--teal-50);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-700);
}
/* цель — MODX 3.x: teal-точка с пульсом, подпись акцентом */
.mg-path-node--target .mg-path-dot {
  background: var(--teal-500);
  border-color: var(--teal-500);
  animation: mg-pulse 2.2s ease-in-out infinite;
}
.mg-path-node--target .mg-path-name { color: var(--teal-700); }
.mg-path-note { margin-top: 22px; }

/* — ГАРАНТИИ ПЕРЕЕЗДА .mg-guar: тёмный «театр» со скролл-колодой
   крупных карточек. Desktop ≥1024 + JS (см. main.js [data-mg-deck]):
   трек становится высоким, сцена липнет (sticky), по мере прокрутки
   карточка уезжает влево и гаснет, следующая въезжает из-за правой
   кромки (в покое виден её «пик»), третья подплывает к пику;
   позиции слоёв JS пишет в --x/--o/--s. overflow-клип слоёв — на
   .mg-deck-view (внутри sticky), чтобы sticky не ломался; сама
   секция БЕЗ overflow:hidden — иначе sticky у потомков отваливается
   (а на мобиле карточки — CSS sticky-pile). Без JS / <1024 /
   reduced-motion — статичный стек карточек. Заголовок секции —
   внутри sticky-сцены (виден всю прокрутку); фон — те же слои,
   что на тёмных hero (.im-hero--glow), растянутые на высокую
   секцию, плюс чертёжная сетка у верхнего/нижнего краёв. — */
.mg-guar {
  position: relative;
  padding: 76px 0 84px;
  /* фон — как на тёмных hero (.im-hero--glow, реюз .mg-src-sec):
     мятный полусвет сверху справа, высокий glow вдоль правой
     кромки (тянет всю высоту колоды — середина не проваливается
     в глухой чёрный), правый teal-смыв и диагональная вуаль,
     подсветка снизу слева; база чуть светлее к верху. Все слои
     inset:0 — overflow:hidden секции не нужен (sticky жив) */
  background:
    radial-gradient(760px 640px at 76% 170px,
      rgba(26, 188, 156, .2), transparent 70%),
    radial-gradient(520px 400px at 96% -40px,
      rgba(114, 220, 198, .14), transparent 72%),
    radial-gradient(900px 1250px at 104% 56%,
      rgba(26, 188, 156, .13), transparent 68%),
    linear-gradient(90deg,
      rgba(27, 32, 32, 0) 46%,
      rgba(33, 74, 63, .38) 74%,
      rgba(38, 90, 76, .72) 100%),
    linear-gradient(258deg,
      rgba(26, 188, 156, .1) 0%,
      rgba(26, 188, 156, .04) 34%,
      transparent 56%),
    radial-gradient(720px 520px at -8% 100%, rgba(26, 188, 156, .1), transparent 62%),
    linear-gradient(168deg, #232B29 0%, var(--ink-900) 46%, #1E2423 100%);
}
.mg-guar .container { position: relative; z-index: 1; }
/* чертёжная сетка — тает к центру, видна у верхнего и нижнего
   краёв секции (двойная mask-область) */
.mg-guar::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image:
    radial-gradient(760px 460px at 82% 0%, #000, transparent 78%),
    radial-gradient(700px 460px at 10% 100%, #000, transparent 78%);
  mask-image:
    radial-gradient(760px 460px at 82% 0%, #000, transparent 78%),
    radial-gradient(700px 460px at 10% 100%, #000, transparent 78%);
  pointer-events: none;
}
.mg-guar .im-sec-head .im-h2 { color: #fff; }
.mg-guar .im-sec-head .im-lead { color: rgba(255, 255, 255, .6); }

.mg-deck { margin-top: 4px; }
.mg-deck-stage { position: static; }
.mg-deck-view { position: relative; }

.mg-deck-card {
  position: relative;
  z-index: calc(var(--i, 0) + 1);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 34px;
  align-items: center;
  min-height: 400px;
  padding: 42px 48px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(480px 300px at 94% -10%, rgba(26, 188, 156, .14), transparent 62%),
    linear-gradient(140deg, #22312D 0%, #1A2321 52%, #17251F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 30px 70px -38px rgba(3, 16, 13, .9);
  overflow: hidden;
  margin-bottom: 16px;
}
.mg-deck-card:last-child { margin-bottom: 0; }
/* контурная цифра-призрак — глубина и заполнение пустоты */
.mg-deck-ghost {
  position: absolute; top: -26px; right: 16px; z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(96px, 11vw, 148px);
  font-weight: 700; line-height: 1;
  color: rgba(114, 220, 198, .07);
  -webkit-text-stroke: 1px rgba(114, 220, 198, .3);
  pointer-events: none;
}
.mg-deck-val {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 700; line-height: 1;
  letter-spacing: -.01em;
  color: var(--teal-300);
}
.mg-deck-title {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.15;
  color: #fff;
}
.mg-deck-text {
  margin: 0;
  font-size: 16.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .66);
  max-width: 44ch;
}
.mg-deck-points {
  margin: 20px 0 0; padding: 0; list-style: none;
  display: grid; gap: 10px;
}
.mg-deck-points li {
  position: relative;
  padding-left: 27px;
  font-size: 14px; line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}
.mg-deck-points li::before {
  content: '';
  position: absolute; left: 0; top: 2px;
  width: 15px; height: 15px;
  border-radius: 5px;
  border: 1.6px solid rgba(114, 220, 198, .7);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2372DCC6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}
.mg-deck-art {
  position: relative;
  min-height: 300px;
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(360px 240px at 68% 30%, rgba(26, 188, 156, .12), transparent 68%),
    linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
}
/* точечная сетка-подложка под иллюстрацией */
.mg-deck-art::before {
  content: '';
  position: absolute; inset: 12px;
  background-image: radial-gradient(rgba(114, 220, 198, .22) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(78% 78% at 60% 45%, #000, transparent 80%);
  mask-image: radial-gradient(78% 78% at 60% 45%, #000, transparent 80%);
  pointer-events: none;
}
.mg-deck-art svg {
  position: relative;
  width: 100%; max-width: 330px; height: auto;
  display: block;
}

/* HUD колоды: счётчик + прогресс; виден только в режиме колоды */
.mg-deck-hud {
  display: none;
  position: absolute;
  top: calc(100% + 18px); left: 2px; right: 2px;
  align-items: center; gap: 16px;
}
.mg-deck-count {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: .08em;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
}
.mg-deck-count b { color: var(--teal-300); font-size: 15px; }
.mg-deck-bar {
  flex: 1; height: 3px; border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.mg-deck-bar i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-300));
}
.mg-deck-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, .38);
  white-space: nowrap;
}

/* Режим колоды (класс ставит JS ≥1024px без reduced-motion):
   сцена — sticky с фиксированной высотой, слои — абсолютные,
   геометрию задаёт JS через --x/--o/--s; клип слоёв — на view
   (внутри sticky-сцены — sticky не ломается) */
.mg-deck-ready .mg-deck-stage {
  position: sticky;
  top: clamp(76px, 9vh, 100px);
  height: clamp(480px, 76vh, 680px);
  display: flex;
  flex-direction: column;
}
/* заголовок внутри сцены: прижат к верху, виден всю прокрутку
   колоды (отступ компактнее базовых 44px) */
.mg-deck-ready .mg-deck-stage .im-sec-head {
  margin: 0 0 22px;
}
.mg-deck-ready .mg-deck-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 26px;
}
.mg-deck-ready .mg-deck-card {
  position: absolute; inset: 0;
  margin: 0; min-height: 0;
  transform: translate3d(var(--x, 0px), 0, 0) scale(var(--s, 1));
  opacity: var(--o, 1);
  will-change: transform, opacity;
}
.mg-deck-ready .mg-deck-hud { display: flex; }

/* — Адаптив — */
@media (max-width: 1023px) {
  /* на стеке визуал скрываем — hero несёт типографика + атмосфера
     (паттерн правых визуалов service-страниц: .swa-store/.sup-panel) */
  .mg-route { display: none; }
  .mg-inv-grid { grid-template-columns: 1fr; }
  .mg-inv-side { position: static; }
  .mg-src-grid { grid-template-columns: 1fr 1fr; }
  .mg-src-ghost { font-size: 64px; top: -10px; right: 2px; }
  /* лестница версий — вертикальный таймлайн */
  .mg-path-track { display: flex; flex-direction: column; gap: 20px; margin-bottom: 22px; }
  .mg-path-node {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 0;
    text-align: left;
    align-items: start;
  }
  .mg-path-node::before {
    left: 6px; top: 24px; bottom: -20px;
    width: 2px; height: auto;
  }
  .mg-path-node:last-child::before { display: none; }
  .mg-path-dot { position: static; transform: none; margin-top: 3px; }
  .mg-guar { padding: 68px 0 72px; }
  /* статичный режим: карточка в колонку; липкий каскад (pile) —
     каждая следующая останавливается чуть ниже предыдущей */
  .mg-deck-card {
    position: sticky;
    top: calc(76px + var(--i, 0) * 14px);
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
    padding: 26px 24px 28px;
  }
  .mg-deck-art { order: -1; min-height: 180px; padding: 14px; }
  .mg-deck-art svg { max-width: 260px; }
  .mg-deck-ghost { font-size: 88px; top: -16px; right: 8px; }
}
@media (max-width: 640px) {
  .mg-src-grid { grid-template-columns: 1fr; }
  .mg-src-card { padding: 18px 16px 16px; }
  .mg-src-bus { gap: 10px; }
  .mg-src-target { padding: 8px 12px; font-size: 12px; gap: 8px; }
  .mg-src-ports { gap: 4px; }
  .mg-src-ports i { width: 5px; height: 5px; }
  .mg-src-wire { min-width: 16px; }
  .mg-inv-list { grid-template-columns: 1fr; }
  .mg-guar { padding: 64px 0 68px; }
  .mg-deck-card {
    top: calc(70px + var(--i, 0) * 10px);
    padding: 22px 18px 24px;
  }
  .mg-deck-val { font-size: 38px; }
  .mg-deck-ghost { font-size: 72px; top: -12px; right: 4px; }
}

/* — CTA-полоса внизу тёмной секции источников (#mg-sources) —
   формат .sup-audit (service-support), адаптированный под тёмное:
   полоса глубже фона секции, свои тусклые авроры; сетка (::after)
   и зерно — общие слои .sup-audit. «Отрывной корешок» с
   отверстиями цвета фона секции (имитация пробитых дырок);
   акцент в подписи — teal, как было у примечания-сноски.
   Светлая тема полосы — модификатор .mg-src-audit--light ниже. — */
.mg-src-audit {
  background:
    radial-gradient(640px 300px at 86% -8%, rgba(26, 188, 156, .14), transparent 64%),
    radial-gradient(460px 280px at 2% 112%, rgba(26, 188, 156, .07), transparent 62%),
    linear-gradient(140deg, #1D2624 0%, #121816 52%, #142921 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 30px 64px -34px rgba(3, 16, 13, .8);
}
.mg-src-audit .sup-audit-hole { background: #202826; }
.mg-src-audit .sup-audit-sub b { color: var(--teal-300); font-weight: 600; }

/* — Светлая тема CTA-полосы (.mg-src-audit--light): тёмная панель
   на тёмной секции сливалась, поэтому полоса перекрашена в
   «бумагу»: светлая панель с teal-аврорами, чернильные текст,
   пунктир корешка и подпись; акценты — teal-600 (teal-300 на
   светлом бледнеет). Отверстия корешка остаются цвета секции
   (#202826 — правило .mg-src-audit выше): «пробиты» сквозь
   светлую панель. Кнопка — общая teal-пилюля .im-btn, зерно и
   геометрия сетки (::after, background-size/mask) — общие. — */
.mg-src-audit--light {
  background:
    radial-gradient(640px 300px at 86% -8%, rgba(26, 188, 156, .12), transparent 64%),
    radial-gradient(460px 280px at 2% 112%, rgba(26, 188, 156, .07), transparent 62%),
    linear-gradient(140deg, #FFFFFF 0%, var(--paper) 52%, #E9F5F0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(36, 42, 41, .09),
    0 30px 64px -34px rgba(3, 16, 13, .6);
}
/* сетка на светлом — teal вместо мятного; background-size
   переобъявлен: шорткат background сбрасывает его на auto */
.mg-src-audit--light::after {
  background:
    linear-gradient(rgba(26, 188, 156, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 188, 156, .08) 1px, transparent 1px);
  background-size: 44px 44px;
}
.mg-src-audit--light .sup-audit-title { color: var(--ink-900); }
.mg-src-audit--light .sup-audit-title span { color: var(--teal-600); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mg-src-audit--light .sup-audit-title span {
    background: linear-gradient(92deg, var(--teal-500), var(--teal-700) 55%, var(--teal-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.mg-src-audit--light .sup-audit-sub { color: rgba(36, 42, 41, .74); }
.mg-src-audit--light .sup-audit-sub b { color: var(--teal-600); }
.mg-src-audit--light .sup-audit-sep { border-left-color: rgba(36, 42, 41, .16); }
.mg-src-audit--light .sup-audit-micro { color: rgba(36, 42, 41, .56); }
.mg-src-audit--light .sup-audit-micro svg { stroke: var(--teal-600); }


/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА УСЛУГ (services.html) — префикс sxp-
   Вариант T84: страница в родной стилистике сайта.
   1) Hero — компактный тёмный бэнд (.im-hero--dark/--glow,
      модификатор .sxp-top: без full-screen-высоты, одна
      колонка); чипы .sxp-meta — стеклянные, как на слайдере.
   2) «Направления и цены» (.sxp-sec, светлый тинт #F3F9F6):
      строки-карточки .sxp-row в системе .sv-card главной —
      белая карточка, рамка, radius, плитка-иконка (иконки 1:1
      с главной), номер в стиле .sv-num, цена «от», круглая
      стрелка; hover — подъём через translate (reveal .im-reveal
      живёт на transform — конфликта нет), бирюзовая рамка,
      тень и spotlight .sv-spot (::after — глобальные стили,
      vars --mx/--my ставит services.js).
   3) «Как формируется цена» (.sxp-steps-sec, фон --paper):
      карточки .sxp-step в системе .wy + бирюзовая CTA-плашка
      .sxp-cta в системе .sv-cta (градиент teal-700 → teal-800).
   ═══════════════════════════════════════════════════════════ */

/* ── Hero: компактный бэнд вместо full-screen ─────────────── */
.sxp-top {
  display: block;
  min-height: 0;
  padding: calc(var(--header-h) + 68px) 0 76px;
}
.sxp-top .im-hero-in { display: block; }
.sxp-top .im-hero-copy { max-width: 820px; }

.sxp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.sxp-meta li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .045);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .78);
}
.sxp-meta li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--teal-400);
  box-shadow: 0 0 12px rgba(26, 188, 156, .8);
}

/* ── Секция «Направления и цены»: шапка в системе .sv-head ── */
.sxp-sec {
  background: #F3F9F6;
  padding: 92px 0 96px;
}
.sxp-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 44px;
}
.sxp-overline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.sxp-overline::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--teal-500);
  border-radius: 2px;
}
.sxp-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-main);
}
.sxp-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ── Строки-карточки: система .sv-card ────────────────────── */
.sxp-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sxp-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) max-content 46px;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 24px 26px;
  background: var(--white);
  border: 1px solid #DFE9E5;
  border-radius: var(--radius);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    translate .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}
.sxp-row:hover {
  translate: 0 -3px;
  border-color: rgba(17, 136, 113, .4);
  box-shadow: 0 14px 40px rgba(17, 136, 113, .09);
}
.sxp-row:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
}
/* reveal .im-reveal живёт на transform; после is-in возвращаем
   hover-переходы (translate/border/shadow) — паттерн .im-comp-card */
.im-js .sxp-row.is-in {
  transition:
    opacity .55s ease var(--d, 0ms),
    transform .65s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
    translate .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}
.sxp-ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--teal-50);
  color: var(--teal-700);
}
.sxp-ico svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sxp-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.sxp-name-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.sxp-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--teal-600);
}
.sxp-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
}
.sxp-soon {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--teal-50);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-700);
  white-space: nowrap;
}
.sxp-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}
.sxp-price {
  text-align: right;
  white-space: nowrap;
}
.sxp-price b {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink-900);
  transition: color .25s ease;
}
.sxp-row:hover .sxp-price b { color: var(--teal-700); }
.sxp-price i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-muted);
}
.sxp-go {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid #DFE9E5;
  border-radius: 50%;
  color: var(--ink-600);
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}
.sxp-go svg {
  width: 19px; height: 19px;
  fill: none;
  transition: transform .25s ease;
}
.sxp-row:hover .sxp-go {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
}
.sxp-row:hover .sxp-go svg { transform: translateX(3px); }

.sxp-cap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 26px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.sxp-cap svg {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  stroke: var(--teal-600);
}

/* ── Секция «Как формируется цена»: система .wy + .sv-cta ─── */
.sxp-steps-sec {
  background: var(--paper);
  padding: 92px 0 104px;
}
.sxp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sxp-step {
  position: relative;
  padding: 30px 26px 28px;
  background: var(--white);
  border: 1px solid #E3ECE8;
  border-radius: var(--radius);
  transition:
    translate .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
.sxp-step:hover {
  translate: 0 -4px;
  border-color: var(--teal-300);
  box-shadow: 0 18px 44px -26px rgba(26, 188, 156, .45);
}
.im-js .sxp-step.is-in {
  transition:
    opacity .55s ease var(--d, 0ms),
    transform .65s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
    translate .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
.sxp-step-num {
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: rgba(26, 188, 156, .13);
  user-select: none;
}
.sxp-step-ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--teal-50);
  color: var(--teal-700);
}
.sxp-step-ico svg {
  width: 25px; height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sxp-step-name {
  margin: 20px 0 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-main);
}
.sxp-step-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.sxp-step-fact {
  display: inline-flex;
  margin-top: 16px;
  padding: 6px 12px;
  border: 1px solid #C7DAD3;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-700);
  white-space: nowrap;
}

/* CTA-плашка: система .sv-cta (градиент главной) */
.sxp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 20px;
  padding: 30px 34px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-800) 100%);
  box-shadow: 0 12px 34px rgba(17, 136, 113, .28);
  transition:
    translate .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}
.sxp-cta:hover {
  background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-900) 100%);
  translate: 0 -3px;
  box-shadow: 0 18px 44px rgba(17, 136, 113, .4);
}
.im-js .sxp-cta.is-in {
  transition:
    opacity .55s ease var(--d, 0ms),
    transform .65s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
    translate .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}
.sxp-cta-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.sxp-cta-text {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .85);
}
.sxp-cta-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--teal-800);
  cursor: pointer;
  transition:
    background-color .25s ease,
    box-shadow .25s ease;
}
.sxp-cta-btn svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  transition: transform .25s ease;
}
.sxp-cta-btn:hover {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 26px rgba(13, 89, 75, .3);
}
.sxp-cta-btn:hover svg { transform: translateX(3px); }
.sxp-cta-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .7);
  outline-offset: 3px;
}

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .sxp-sec { padding: 76px 0 84px; }
  .sxp-steps-sec { padding: 76px 0 88px; }
  .sxp-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 34px;
  }
  .sxp-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 899px) {
  .sxp-row {
    grid-template-columns: 46px minmax(0, 1fr) 42px;
    row-gap: 12px;
    padding: 20px;
  }
  .sxp-ico {
    grid-row: 1; grid-column: 1;
    align-self: start;
    width: 46px; height: 46px;
  }
  .sxp-ico svg { width: 22px; height: 22px; }
  .sxp-info { grid-row: 1; grid-column: 2; }
  .sxp-go {
    grid-row: 1; grid-column: 3;
    align-self: start;
    width: 42px; height: 42px;
  }
  .sxp-go svg { width: 17px; height: 17px; }
  /* номер и имя — инлайн-поток: «01 Название» переносится как слова,
     без сиротского номера на отдельной строке */
  .sxp-name-row { display: block; }
  .sxp-num { margin-right: 10px; }
  .sxp-name { font-size: 18px; }
  .sxp-soon {
    display: flex;
    width: max-content;
    margin: 8px 0 0;
  }
  .sxp-price {
    grid-row: 2; grid-column: 2 / -1;
    text-align: left;
  }
  .sxp-price b { font-size: 18px; }
}
@media (max-width: 639px) {
  .sxp-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
  }
  .sxp-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* reduced-motion: без reveal/hover-анимаций, всё видно */
@media (prefers-reduced-motion: reduce) {
  .im-js .sxp-row,
  .im-js .sxp-step,
  .im-js .sxp-cta { opacity: 1; transform: none; }
  .sxp-row, .sxp-step, .sxp-cta,
  .sxp-price b, .sxp-go, .sxp-go svg,
  .sxp-cta-btn, .sxp-cta-btn svg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА УСЛУГИ: ОМОЛОЖЕНИЕ САЙТА (service-renew.html)
   Префикс rn-. Страница собрана из родных компонентов сайта:
   тёмный hero «Aurora type» (.im-hero--dark + .swa-* — общие),
   светлые секции в системе .im-comp/.im-proc/.im-why/.im-cases,
   FAQ .fq и CTA .ct. Уникальные блоки:
   • .rn-facts — три стеклянных чипа-триггера под кнопками hero;
   • .rn-ba    — интерактивное сравнение «До / После»: рамка
                 браузера, два нарисованных CSS макета сайта и
                 шторка на скрытом input[type=range] (доступен
                 с клавиатуры и на тач-экранах), двигает её через
                 CSS-переменную --pos; без JS range disabled;
   • .rn-pain  — карточки-признаки старого сайта (4);
   • .rn-steps — таймлайн апгрейда: белые карточки на teal-рельсе
                 + плашка-гарантия .rn-safe;
   • .rn-vs    — тёмный банд «уходить с MODX не надо»;
   • .rn-tar   — тарифы: 3 карточки, центральная акцентная.
   Reveal — общий .im-reveal (service-renew.js). Ховер-сдвиги
   карточек возвращены контекстными правилами .is-in:hover —
   базовый .im-js .im-reveal.is-in { transform:none } их глушит
   (урок T81). Без JS и при reduced-motion всё видно и статично.
   ═══════════════════════════════════════════════════════════ */

/* ── HERO: чипы-триггеры под кнопками (стекло, в системе
   .im-ghost тёмного hero) ── */
.rn-facts {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0; list-style: none;
}
.rn-facts li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 500;
  color: rgba(255, 255, 255, .78);
}
.rn-facts svg { width: 15px; height: 15px; color: var(--teal-300); flex: 0 0 auto; }

/* ── HERO: сравнение «До / После» (.rn-ba) ── */
.rn-ba {
  position: relative;
  min-width: 0;
}
.rn-ba-frame {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(140deg,
    rgba(255, 255, 255, .10) 0%,
    rgba(255, 255, 255, .03) 55%,
    rgba(26, 188, 156, .08) 100%);
  box-shadow:
    0 42px 90px -42px rgba(4, 18, 16, .95),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  overflow: hidden;
}
/* адресная строка рамки */
.rn-ba-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}
.rn-ba-bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.rn-ba-bar i:first-child { background: rgba(26, 188, 156, .55); }
.rn-ba-url {
  margin-left: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(4, 18, 16, .35);
  font-size: 11.5px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}

/* сцена: --pos двигает шторку (JS) и ручку; без JS — 50% */
.rn-ba-stage {
  --pos: 50%;
  position: relative;
  aspect-ratio: 10 / 8;
  overflow: hidden;
}
.rn-ba-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* БЫЛО: нижний слой — тесный серый макет «из 2015-го» */
.rn-ba--before { background: #E9EBE6; z-index: 1; }
.rn-b-nav {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 12px;
  background: #4B5654;
}
.rn-b-logo { width: 34px; height: 10px; border-radius: 2px; background: #9AA6A3; }
.rn-b-mi { width: 20px; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, .34); }
.rn-b-cols { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 12px; }
.rn-b-side { width: 26%; display: flex; flex-direction: column; gap: 7px; }
.rn-b-si { height: 8px; border-radius: 2px; background: #C4CBC6; }
.rn-b-si:nth-child(even) { width: 80%; }
.rn-b-cnt { height: 26px; margin-top: auto; border-radius: 3px; background: #B9C1BC; }
.rn-b-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.rn-b-main i { display: block; flex: 0 0 auto; }
.rn-b-h { width: 62%; height: 12px; border-radius: 2px; background: #8C9793; }
.rn-b-ln { height: 6px; border-radius: 2px; background: #C9CEC9; }
.rn-b-ln--s { width: 74%; }
.rn-b-banner {
  height: 27%; min-height: 44px;
  border-radius: 4px;
  background: linear-gradient(90deg, #7E93AC, #A9B8C8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.rn-b-row { display: flex; gap: 7px; }
.rn-b-row i {
  flex: 1; height: 22px;
  border-radius: 3px;
  background: #D3D7D2;
  box-shadow: inset 0 0 0 1px #BFC5C0;
}

/* СТАЛО: верхний слой — современный макет, раскрывается
   вправо шторкой (clip-path по --pos) */
.rn-ba--after {
  background: #fff;
  z-index: 2;
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.rn-a-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid #EDF2F0;
}
.rn-a-logo { width: 46px; height: 11px; border-radius: 999px; background: var(--teal-500); }
.rn-a-mi { width: 22px; height: 6px; border-radius: 999px; background: #DCE4E2; }
.rn-a-cta {
  margin-left: auto;
  width: 42px; height: 14px;
  border-radius: 999px;
  background: var(--teal-500);
  box-shadow: 0 4px 10px -3px rgba(26, 188, 156, .55);
}
.rn-a-hero {
  flex: 1; min-height: 0;
  padding: 14px 16px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.rn-a-hero i { display: block; flex: 0 0 auto; }
.rn-a-h { height: 13px; border-radius: 3px; background: #232B29; }
.rn-a-h--1 { width: 56%; }
.rn-a-h--2 {
  width: 42%;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-300));
}
.rn-a-ln { width: 48%; height: 6px; border-radius: 2px; background: #DCE3E1; }
.rn-a-btns { display: flex; gap: 7px; margin-top: 2px; }
/* мини-график «конверсия растёт» — заполняет правую половину макета */
.rn-a-chart {
  position: absolute; right: 14px; top: 20%;
  width: 31%; height: 42%;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 10px 10px 0;
  border: 1px solid #E4EBE9;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #F7FBFA, rgba(247, 251, 250, .4));
}
.rn-a-chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--teal-300), var(--teal-500));
}
.rn-a-chart i:nth-child(1) { height: 34%; }
.rn-a-chart i:nth-child(2) { height: 48%; }
.rn-a-chart i:nth-child(3) { height: 62%; }
.rn-a-chart i:nth-child(4) { height: 80%; }
.rn-a-chart i:nth-child(5) { height: 100%; background: linear-gradient(180deg, var(--teal-400), var(--teal-600)); }
.rn-a-btn {
  width: 52px; height: 16px;
  border-radius: 999px;
  background: var(--teal-500);
  box-shadow: 0 5px 12px -4px rgba(26, 188, 156, .6);
}
.rn-a-btn--ghost { background: #fff; box-shadow: inset 0 0 0 1.5px #D8E0DE; }
.rn-a-cards { display: flex; gap: 8px; padding: 0 16px 16px; }
.rn-a-cards i {
  flex: 1; height: 34px;
  border-radius: 8px;
  border: 1px solid #E4EBE9;
  background: #F7FBFA;
  position: relative;
}
.rn-a-cards i::before {
  content: '';
  position: absolute; top: 7px; left: 8px;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--teal-200);
}

/* подписи «До» / «После» */
.rn-ba-tag {
  position: absolute; top: 12px; z-index: 4;
  padding: 5px 12px;
  border-radius: 999px;
  font: 600 11px/1 'Roboto', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
}
.rn-ba-tag--old {
  left: 12px;
  color: rgba(255, 255, 255, .85);
  background: rgba(35, 43, 41, .55);
  backdrop-filter: blur(6px);
}
.rn-ba-tag--new {
  right: 12px;
  color: #0E1614;
  background: var(--teal-300);
}

/* ручка шторки */
.rn-ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  z-index: 5;
  width: 0;
  pointer-events: none;
}
.rn-ba-handle::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -1px;
  width: 2px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 12px rgba(26, 188, 156, .8);
}
.rn-ba-handle svg {
  position: absolute; top: 50%; left: 0;
  width: 34px; height: 34px;
  padding: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  color: var(--teal-700);
  box-shadow:
    0 8px 22px -6px rgba(4, 18, 16, .5),
    0 0 0 4px rgba(26, 188, 156, .25);
}

/* подсказка: исчезает после первого взаимодействия */
.rn-ba-hint {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(4, 18, 16, .55);
  backdrop-filter: blur(6px);
  font-size: 11.5px; font-weight: 500;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s ease;
}
.rn-ba-used .rn-ba-hint { opacity: 0; }

/* невидимый range — доступный контрол шторки:
   JS снимает disabled; без JS контрол инертен */
.rn-ba-range {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.rn-ba-range:disabled { cursor: default; }
.rn-ba-stage:has(.rn-ba-range:focus-visible) .rn-ba-frame {
  border-color: var(--teal-300);
}

/* ── ДИАГНОСТИКА: 4 признака ── */
.rn-pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.rn-pain {
  background: var(--white);
  border: 1px solid var(--fq-line);
  border-radius: 16px;
  padding: 24px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rn-pain:hover {
  transform: translateY(-4px);
  border-color: var(--teal-200);
  box-shadow: 0 18px 40px -26px rgba(15, 110, 93, .3);
}
/* hover против reveal: базовый .im-js .im-reveal.is-in
   { transform:none } глушит ховер — возвращаем контекстом (T81) */
.im-js .rn-pain.is-in:hover { transform: translateY(-4px); }
.rn-pain-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--teal-50);
  color: var(--teal-700);
}
.rn-pain-ico svg { width: 23px; height: 23px; }
.rn-pain-h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px; line-height: 1.3;
  color: var(--ink-900);
}
.rn-pain-text {
  margin: 0;
  font-size: 14.5px; line-height: 1.62;
  color: var(--text-muted);
}

/* ── ПРОЦЕСС: таймлайн на teal-рельсе ── */
.rn-steps {
  position: relative;
  margin: 0; padding: 0;
  list-style: none;
}
.rn-steps::before {
  content: '';
  position: absolute; left: 21px; top: 10px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--teal-400), rgba(26, 188, 156, .10));
}
.rn-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 20px;
  padding: 0 0 20px;
}
.rn-step:last-child { padding-bottom: 0; }
.rn-step-num {
  position: relative; z-index: 1;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--teal-200);
  color: var(--teal-700);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--paper);
}
.rn-step-body {
  background: var(--white);
  border: 1px solid var(--fq-line);
  border-radius: 16px;
  padding: 20px 24px 22px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rn-step:hover .rn-step-body {
  transform: translateX(4px);
  border-color: var(--teal-200);
  box-shadow: 0 18px 40px -26px rgba(15, 110, 93, .3);
}
.rn-step-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.rn-step-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px; line-height: 1.3;
  color: var(--ink-900);
}
.rn-step-text {
  margin: 0;
  font-size: 15px; line-height: 1.62;
  color: var(--text-muted);
}

/* плашка-гарантия под таймлайном */
.rn-safe {
  display: flex; align-items: center; gap: 18px;
  margin-top: 44px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(26, 188, 156, .12), rgba(26, 188, 156, .04));
  border: 1px solid rgba(26, 188, 156, .3);
  border-radius: 18px;
}
.rn-safe-ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(26, 188, 156, .16);
  color: var(--teal-700);
}
.rn-safe-ico svg { width: 24px; height: 24px; }
.rn-safe-text {
  margin: 0;
  font-size: 16px; line-height: 1.6;
  color: var(--ink-800);
}
.rn-safe-text b { color: var(--teal-700); }

/* ── ЦЕННОСТЬ: 3 карточки в системе .im-why ── */
.rn-value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── КЕЙСЫ: светлая секция (paper) вместо базовой белой ── */
.rn-cases { background: var(--paper); }
/* ── ВОЗРАЖЕНИЯ: тёмный банд «не уходите с MODX» ── */
.rn-vs {
  position: relative;
  overflow: hidden;
  padding: 96px 0 100px;
  background: linear-gradient(168deg, #232B29 0%, var(--ink-900) 55%, #1E2423 100%);
}
.rn-vs-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.rn-vs-glow {
  position: absolute; inset: 0;
  background: radial-gradient(760px 480px at 82% 8%, rgba(26, 188, 156, .16), transparent 65%);
}
.rn-vs-glow--b {
  background: radial-gradient(620px 420px at 6% 96%, rgba(26, 188, 156, .10), transparent 68%);
}
.rn-vs .container { position: relative; z-index: 1; }
.rn-vs .im-h2 { color: var(--white); }
.rn-vs .im-h2 span { color: var(--teal-300); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rn-vs .im-h2 span {
    color: transparent;
    background: linear-gradient(97deg,
      var(--teal-200) 4%, var(--teal-400) 52%, var(--teal-300) 96%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.rn-vs .im-lead { color: rgba(255, 255, 255, .66); }
.rn-vs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.rn-vs-card {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.rn-vs-card:hover {
  transform: translateY(-4px);
  border-color: rgba(114, 220, 198, .4);
  background: rgba(26, 188, 156, .10);
}
.im-js .rn-vs-card.is-in:hover { transform: translateY(-4px); }
.rn-vs-h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px; line-height: 1.35;
  color: var(--white);
}
.rn-vs-text {
  margin: 0;
  font-size: 14.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .66);
}

/* ── ТАРИФЫ: 3 карточки, центральная акцентная ── */
.rn-tar {
  background: var(--white);
  padding: 104px 0 96px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.rn-tar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.rn-tar-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--fq-line);
  border-radius: 20px;
  padding: 28px 28px 26px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rn-tar-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-200);
  box-shadow: 0 18px 40px -26px rgba(15, 110, 93, .3);
}
.im-js .rn-tar-card.is-in:hover { transform: translateY(-4px); }
.rn-tar-card--hot {
  background: linear-gradient(165deg, rgba(26, 188, 156, .10), rgba(26, 188, 156, .02) 52%);
  border-color: rgba(26, 188, 156, .45);
  box-shadow: 0 24px 60px -34px rgba(15, 110, 93, .35);
}
.rn-tar-badge {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-500);
  color: #fff;
  font: 700 11.5px/1 'Roboto', sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 8px 18px -6px rgba(26, 188, 156, .55);
}
.rn-tar-head { margin-bottom: 10px; }
.rn-tar-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px; line-height: 1.25;
  color: var(--ink-900);
}
.rn-tar-tag {
  margin: 5px 0 0;
  font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--teal-600);
}
.rn-tar-desc {
  margin: 0 0 16px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-muted);
}
.rn-tar-list {
  margin: 0 0 22px;
  padding: 0; list-style: none;
  display: grid; gap: 10px;
}
.rn-tar-list li {
  position: relative;
  padding: 0 0 0 30px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-800);
}
.rn-tar-list li::before {
  content: '';
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--teal-50);
}
.rn-tar-list li::after {
  content: '';
  position: absolute; left: 5px; top: 6px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--teal-700);
  border-bottom: 2px solid var(--teal-700);
  transform: rotate(-45deg);
}
.rn-tar-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 20px;
  border-top: 1px dashed var(--ink-200);
}
.rn-tar-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  color: var(--ink-900);
}
.rn-tar-price span {
  display: block;
  margin-top: 4px;
  font: 400 12.5px/1.4 'Roboto', sans-serif;
  color: var(--text-muted);
}
.rn-tar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: var(--white);
  font: 600 14.5px/1 'Roboto', sans-serif;
  color: var(--ink-800);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.rn-tar-btn:hover {
  border-color: var(--teal-500);
  color: var(--teal-700);
  background: var(--teal-50);
}
.rn-tar-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  transition: transform .2s ease;
}
.rn-tar-btn:hover svg { transform: translateX(3px); }
.rn-tar-card--hot .rn-tar-btn {
  border-color: transparent;
  background: var(--teal-500);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.rn-tar-card--hot .rn-tar-btn:hover {
  background: var(--teal-600);
  color: #fff;
  box-shadow: var(--shadow-cta-hover);
}

/* FAQ страницы — единый ритм отступов с im-секциями */
#rn-faq { padding-bottom: 96px; }
#rn-faq .fq-head { margin-bottom: 44px; }

/* — Адаптив — */
@media (max-width: 1023px) {
  .rn-pain-grid,
  .rn-vs-grid { grid-template-columns: 1fr 1fr; }
  .rn-value-grid { grid-template-columns: 1fr 1fr; }
  .rn-value-grid .im-why-card:last-child { grid-column: 1 / -1; }
  .rn-tar {
    padding: 72px 0 64px;
  }
  .rn-tar-grid {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }
  .rn-vs { padding: 72px 0 76px; }
  .rn-ba {
    width: 100%;
    max-width: 560px;
    margin: 6px auto 0;
  }
}

@media (max-width: 640px) {
  .rn-pain-grid,
  .rn-vs-grid,
  .rn-value-grid { grid-template-columns: 1fr; }
  .rn-value-grid .im-why-card:last-child { grid-column: auto; }
  .rn-facts li { font-size: 12.5px; padding: 8px 13px; }
  .rn-ba { margin-top: 2px; }
  .rn-ba-stage { aspect-ratio: 10 / 9; }
  .rn-b-side { display: none; }
  .rn-b-cols { padding: 10px; }
  .rn-safe { padding: 20px; gap: 14px; }
  .rn-safe-text { font-size: 14.5px; }
  .rn-vs { padding: 64px 0 60px; }
  .rn-tar { padding: 64px 0 60px; }
  .rn-tar-card { padding: 24px 22px; }
  .rn-tar-price { font-size: 23px; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .rn-ba-hint { transition: none; }
  .rn-pain, .rn-step-body, .rn-vs-card,
  .rn-tar-card, .rn-tar-btn, .rn-tar-btn svg { transition: none; }
  .im-js .rn-pain.is-in:hover,
  .im-js .rn-vs-card.is-in:hover,
  .im-js .rn-tar-card.is-in:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   СТРАНИЦА ПЕРЕХОДА — away.html (T95)
   Промежуточная страница внешних ссылок /away?url=…: карточка
   с целью перехода (host + полный url), предупреждение и явный
   клик «Перейти» вместо молчаливого редиректа. Разметку и
   подстановку цели делает assets/js/away.js (только
   textContent/setAttribute — XSS исключён).
   ═══════════════════════════════════════════════════════════ */

.away {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 260px);
  padding: calc(var(--header-h) + 48px) 0 72px;
}

.away-card {
  max-width: 640px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--fq-line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -32px rgba(27, 32, 32, .18);
  padding: 44px 44px 40px;
  text-align: center;
  animation: away-in .45s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes away-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.away-ico {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--teal-50);
  color: var(--teal-600);
}
.away-ico svg { width: 28px; height: 28px; }

/* Ошибочное состояние — красный, но спокойный (не аларм-ред) */
.away-card--error .away-ico {
  background: #FDEDEC;
  color: #B03A2E;
}

.away-title {
  font-size: 28px;
  margin-bottom: 12px;
}

.away-lead {
  color: var(--text-muted);
  margin: 0 0 20px;
}

.away-code {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: .92em;
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--fq-line);
  border-radius: 6px;
  padding: 1px 6px;
}

/* Блок цели: host крупно + полный адрес мелким моно */
.away-target {
  background: var(--paper);
  border: 1px solid var(--fq-line);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.away-host {
  display: block;
  font-weight: 700;
  font-size: 18px;
  word-break: break-all;
}

.away-url {
  display: block;
  margin-top: 6px;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 13px;
  color: var(--ink-500);
  word-break: break-all;
}

.away-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--teal-50);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 24px;
}
.away-note svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--teal-600);
}

.away-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 575px) {
  .away {
    padding-top: calc(var(--header-h) + 28px);
    padding-bottom: 48px;
  }
  .away-card { padding: 32px 22px 28px; }
  .away-title { font-size: 23px; }
  .away-actions .btn { width: 100%; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .away-card { animation: none; }
}