/* cpage-esm v1.9
   v1.9 — поддержка тёмной темы сайта: при тёмном фоне (определяет скрипт по факту,
          класс .cpage__esm--on-dark) текст и подложки переключаются на светлые,
          карточка-определение/статы/sticky-шапка — на тёмные; блоки на --svc-*
          (FAQ, форма, модалка, кнопки) тему подхватывают через cpage.css.
          Фикс: текст кнопок .cpage__cta не пропадает при наведении (глобальные стили
          сайта перекрашивали ссылки) — цвет жёстко держится «на акценте».
   v1.8 — интеграция в интерфейс сайта: убрана внешняя «карточка» листа (белый фон,
          тень, скругление, большой внутренний отступ) — контент ложится прямо в
          контентную колонку сайта во всю её ширину (горизонтальные поля даёт сама
          колонка). Внутренние блоки (отсчёт, статы, схема, карточки) не изменились.
          Снято возможное ограничение ширины «полной» раскладки для этой страницы.
   v1.7 — наведение на код партнёра в финале: ярче и контрастнее — насыщенный
          синий #1b3fa0, лёгкий рост и свечение (блик-перелив на время наведения
          гаснет). (Сдвиг липкой шапки под шапку сайта — в скрипте страницы.)
   v1.6 — hover пунктов «5 причин» приведён к образцу: при наведении только
          светлая подложка #f6f9ff (галочка остаётся зелёной, заголовок — тёмным,
          без сдвига строки и вращения галочки). База пункта: padding 8 + радиус 14,
          gap списка 18, галочка 30×30 (радиус 9) — как в образце.
   v1.5 — фикс блока обратного отсчёта: заголовок и надкаголовок перебивались
          правилами cpage.css/.cpage__esm p (они специфичнее) — заголовок получал
          чужой тёмный цвет (выглядел тускло на тёмно-синем) и чужой max-width:70ch
          (растягивался, из-за чего ячейки таймера переносились вниз). Подняли
          специфичность .cpage__esm .cpage__esm-cd-kicker/-cd-head — вернулись
          светлый текст (#8fb6ff/#fff) и max-width:32ch (текст в одну колонку,
          ячейки встают справа в одну строку, как в образце).
   v1.4 — крупный редизайн по присланному эталону: sticky-шапка листа + прогресс
          чтения (внутри листа, на position: sticky — не мешают шапке сайта),
          герой-бейдж со сроком и плавающие блобы, блок обратного отсчёта
          (живой таймер до 01.07.2026), статы со счётчиками (5000 ₽/30 мин/100 %/
          код 77815), переливающийся код партнёра (блик), анимации схемы кассового
          узла включены постоянно (кольцо, «текущие» связи, пульс ядра).
   v1.3 — оживление всей страницы: плавное появление блоков при прокрутке
          (.is-reveal/.esm-anim) + hover-микровзаимодействия (карточки, плашки,
          причины, шаги, чек-лист, пакет, код партнёра, FAQ, логотип).
   v1.2 — схема кассового узла сделана интерактивной (hover): вращение кольца,
          прорисовка связей ядро↔узлы, пульс ядра, дрейф и подсветка узлов.
   v1.1 — добавлены разделы «Кому нужно подключать» (плашки-категории
          .cpage__esm-cats) и общий спейсинг прочих секций .cpage__esm-block;
          «Что входит» и FAQ переиспользуют .cpage__steps / .cpage__faq-item
          из cpage.css (новых стилей под них нет).
   Стилистика страницы «Подключение и настройка ТС ПИоТ (ЕСМ)» — образец по
   макету АО «ЕСП» (Figma «Для сайтов партнёров»). Зона: Фронт (подсистема САЙ).
   Это ДОПОЛНИТЕЛЬНЫЙ слой ПОВЕРХ cpage.css: подключается реквизитом ФайлCSS
   ВМЕСТЕ с cpage.css. Из cpage.css используются токены --svc-*, кнопки
   .cpage__cta / .cpage__cta-ghost и базовая типографика.
   Компоненты .cpage__esm-* самодостаточны по цвету (фиксированная светлая
   айдентика + тёмно-синие блоки) и не зависят от тёмной темы ОС.
   Селекторы заголовков/абзацев заскоплены под .cpage__esm — перебивают
   prose-слой cpage.css. */

/* ───────── Белый «лист» страницы + палитра ───────── */
.cpage__esm {
  --esm-navy: #0e1a3c;
  --esm-navy-2: #1a2a55;
  --esm-navy-line: rgba(126, 156, 236, 0.22);
  --esm-brand: #0f74e0;
  --esm-ink: #15204a;
  --esm-ink-2: #4a5572;
  --esm-line: rgba(20, 32, 74, 0.12);
  --esm-soft: #eef2fb;
  --esm-soft-line: rgba(15, 116, 224, 0.16);
  --esm-check: #2ea66b;
  --esm-sheet: #ffffff;

  /* Интеграция в контентную область сайта: без «карточки» (фон/тень/скругление),
     во всю ширину колонки. Горизонтальные отступы даёт сама колонка (.cpage-layout).
     Внутренние блоки (отсчёт, статы, схема, карточки) сохраняют своё оформление. */
  color: var(--esm-ink);
  max-width: none;
  margin: 8px 0 32px;
  padding: 0;
  position: relative;
}

/* Снимаем возможное ограничение ширины «полной» раскладки именно для этой страницы
   (правило-пустышка, если у проекта другой класс-обёртка — ничего не сломает). */
.cpage-layout--full:has(.cpage__esm) { max-width: none; }

/* Текст кнопок .cpage__cta не должен пропадать при наведении: глобальные стили
   сайта могут перекрашивать ссылки (<a>) на ховере. Жёстко держим цвет «на акценте». */
.cpage__esm a.cpage__cta,
.cpage__esm a.cpage__cta:link,
.cpage__esm a.cpage__cta:visited,
.cpage__esm a.cpage__cta:hover,
.cpage__esm a.cpage__cta:focus,
.cpage__esm a.cpage__cta:active,
.cpage__esm button.cpage__cta:hover {
  color: var(--svc-on-accent) !important;
  -webkit-text-fill-color: var(--svc-on-accent);
}

/* Заголовки/абзацы внутри листа (перебивают prose cpage.css). */
.cpage__esm h2 {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--esm-ink);
  margin: 0 0 18px;
}
.cpage__esm h3 {
  color: var(--esm-ink);
  margin: 0 0 8px;
}
.cpage__esm p {
  color: var(--esm-ink-2);
}

/* Ряд кнопок (повторяется в нескольких блоках). */
.cpage__esm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* ───────── 1. ТС ПИоТ: заголовок + лид | карточка-определение ───────── */
.cpage__esm-intro {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.cpage__esm-intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.cpage__esm .cpage__esm-h1 {
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--esm-ink);
  margin: 0 0 18px;
}
.cpage__esm-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  padding-left: 16px;
  border-left: 4px solid var(--svc-accent);
}
.cpage__esm-law {
  background: linear-gradient(165deg, #f3f7ff 0%, #e9f0fc 100%);
  border: 1px solid rgba(15, 116, 224, 0.14);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}
.cpage__esm-law-label {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--esm-brand);
}
.cpage__esm-law p {
  font-size: 15px;
  line-height: 1.62;
  margin: 0;
  color: var(--esm-ink-2);
}
.cpage__esm-law-src {
  margin-top: 16px !important;
  font-weight: 700;
  text-align: right;
  color: var(--esm-ink) !important;
}

/* ───────── 2. Бренд ЕСМ ───────── */
.cpage__esm-brand {
  text-align: center;
  margin: 0 auto clamp(40px, 6vw, 72px);
  max-width: 720px;
}
.cpage__esm-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.cpage__esm-logo svg {
  width: 64px;
  height: 64px;
  flex: none;
}
.cpage__esm-logo-word {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--esm-brand);
  line-height: 1;
}
.cpage__esm-brand-sub {
  font-size: 22px;
  font-weight: 800;
  color: var(--esm-ink) !important;
  margin: 0 0 16px !important;
}
.cpage__esm-brand-text {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto !important;
  max-width: 56ch;
}

/* ───────── 3. «5 причин» + схема ───────── */
.cpage__esm-reasons {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.cpage__esm-reasons-h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px !important;
}
.cpage__esm-num {
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--esm-ink);
}
.cpage__esm-reasons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.cpage__esm-reasons-list > li {
  display: flex;
  gap: 14px;
  padding: 8px;
  border-radius: 14px;
}
.cpage__esm-reasons-list > li::before { content: none; }
.cpage__esm-rcheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  margin-top: 2px;
  border-radius: 9px;
  background: #e7f6ee;
  color: var(--esm-check);
}
.cpage__esm-rcheck svg { width: 16px; height: 16px; }
.cpage__esm-reasons-list h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
}
.cpage__esm-reasons-list p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* Схема кассового узла */
.cpage__esm-diagram {
  margin: 0;
  background: linear-gradient(180deg, #f3f7fe 0%, #eaf1fc 100%);
  border: 1px solid var(--esm-soft-line);
  border-radius: 20px;
  padding: 22px 18px 16px;
  text-align: center;
}
.cpage__esm-diagram svg {
  width: 100%;
  max-width: 360px;
  height: auto;
}
.cpage__esm-diagram figcaption {
  font-size: 13px;
  font-weight: 600;
  color: var(--esm-brand);
  margin-top: 4px;
}

/* ───────── Схема кассового узла: постоянные анимации + hover-узлы ───────── */
.cpage__esm-diagram .esm-svg { overflow: visible; }
.cpage__esm-diagram .esm-node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.34, 1.4, .5, 1);
}
.cpage__esm-diagram .esm-bubble,
.cpage__esm-diagram .esm-ico,
.cpage__esm-diagram .esm-node-label {
  transition: fill .25s ease, stroke .25s ease, stroke-width .25s ease;
}

/* пунктирное кольцо — постоянное медленное вращение */
.cpage__esm-diagram .esm-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: esm-ring-spin 50s linear infinite;
}
@keyframes esm-ring-spin { to { transform: rotate(360deg); } }

/* связи ядро↔узлы — постоянно «текут» */
.cpage__esm-diagram .esm-link {
  stroke-dasharray: 5 8;
  opacity: .55;
  animation: esm-flow 2.6s linear infinite;
}
.cpage__esm-diagram .esm-links line:nth-child(2) { animation-delay: .5s; }
.cpage__esm-diagram .esm-links line:nth-child(3) { animation-delay: 1s; }
@keyframes esm-flow { to { stroke-dashoffset: -160; } }

/* ядро ЕСМ — постоянный пульс ореола */
.cpage__esm-diagram .esm-core-halo {
  fill: #0f74e0;
  transform-box: fill-box;
  transform-origin: center;
  animation: esm-core-pulse 2.6s ease-in-out infinite;
}
@keyframes esm-core-pulse {
  0%, 100% { opacity: .12; transform: scale(.92); }
  50%      { opacity: .26; transform: scale(1.22); }
}

/* наведение на отдельный узел — дрейф наружу + подсветка */
.cpage__esm-diagram .esm-node--top:hover { transform: translateY(-10px) scale(1.04); }
.cpage__esm-diagram .esm-node--bl:hover  { transform: translate(-9px, 6px) scale(1.04); }
.cpage__esm-diagram .esm-node--br:hover  { transform: translate(9px, 6px) scale(1.04); }
.cpage__esm-diagram .esm-node:hover .esm-bubble { fill: rgba(15, 116, 224, 0.12); stroke: #0f74e0; stroke-width: 2.2; }
.cpage__esm-diagram .esm-node:hover .esm-node-label { fill: #0f74e0; }

@media (prefers-reduced-motion: reduce) {
  .cpage__esm-diagram .esm-ring,
  .cpage__esm-diagram .esm-link,
  .cpage__esm-diagram .esm-core-halo { animation: none; }
  .cpage__esm-diagram .esm-link { opacity: .5; }
  .cpage__esm-diagram .esm-node--top:hover,
  .cpage__esm-diagram .esm-node--bl:hover,
  .cpage__esm-diagram .esm-node--br:hover { transform: none; }
}

/* ───────── 4. Партнёрский статус (тёмно-синий блок) ───────── */
.cpage__esm-partner {
  background: linear-gradient(160deg, #122150 0%, #0b1430 100%);
  color: #fff;
  border-radius: 26px;
  padding: clamp(28px, 4vw, 56px);
  margin: clamp(40px, 6vw, 72px) 0 0;
  text-align: center;
}
.cpage__esm-partner-title {
  color: #fff !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  line-height: 1.25 !important;
  max-width: 46ch;
  margin: 0 auto 10px !important;
}
.cpage__esm-ph { color: #8fb6ff; }
.cpage__esm-partner-code {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: 0 0 26px !important;
}
.cpage__esm-partner-code b { color: #fff; }
.cpage__esm-partner-sub {
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 22px !important;
}
.cpage__esm-partner-cards {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cpage__esm-partner-cards > li {
  background: var(--esm-navy-2);
  border: 1px solid var(--esm-navy-line);
  border-radius: 16px;
  padding: 22px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.cpage__esm-partner-cards > li::before { content: none; }
.cpage__esm-partner-note {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 78ch;
  margin: 0 auto !important;
}

/* ───────── 5. Пакет обслуживания + «Как подключить» ───────── */
.cpage__esm-connect {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin: clamp(40px, 6vw, 72px) 0 0;
}
.cpage__esm-package {
  background: linear-gradient(180deg, #f6f8ff 0%, #eef2fc 100%);
  border: 1px solid var(--esm-soft-line);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 30px);
}
.cpage__esm-package-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--svc-accent);
  margin: 0 0 18px;
}
.cpage__esm-package-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
}
.cpage__esm-tree-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--esm-soft-line);
}
.cpage__esm-tree-list > li {
  position: relative;
  font-size: 14px;
  line-height: 1.4;
  color: var(--esm-ink-2);
  padding: 5px 0 5px 18px;
}
.cpage__esm-tree-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--esm-check);
}
.cpage__esm-tree-root {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--esm-ink) !important;
  margin: 0 !important;
}
.cpage__esm-tree-root + .cpage__esm-tree-list { margin-bottom: 14px; }
.cpage__esm-price {
  text-align: center;
}
.cpage__esm-qr {
  display: inline-flex;
  margin-bottom: 10px;
}
.cpage__esm-qr svg { width: 64px; height: 64px; }
.cpage__esm-price-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--svc-accent);
  line-height: 1.25;
  margin-bottom: 4px;
}
.cpage__esm-price-value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--esm-ink);
}

/* Нумерованные шаги-таймлайн */
.cpage__esm-howto h2 { margin-bottom: 22px !important; }
.cpage__esm-steps {
  list-style: none;
  counter-reset: esm-step;
  margin: 0;
  padding: 0;
}
.cpage__esm-steps > li {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
}
.cpage__esm-steps > li::before { content: none; }
.cpage__esm-steps > li:not(:last-child) > .cpage__esm-step-n::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34px;
  bottom: -10px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--esm-soft-line);
}
.cpage__esm-step-n {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--svc-accent);
  background: #fff;
  color: var(--svc-accent);
  font-size: 15px;
  font-weight: 700;
}
.cpage__esm-steps p {
  margin: 4px 0 0 !important;
  font-size: 15.5px;
  line-height: 1.5;
}
.cpage__esm-steps b { color: var(--esm-ink); }
.cpage__esm-howto .cpage__cta { margin-top: 10px; }

/* ───────── 6. Финальный CTA + крупный код ───────── */
.cpage__esm-cta {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin: clamp(40px, 6vw, 72px) 0 0;
}
.cpage__esm-cta h2 { margin-bottom: 14px !important; }
.cpage__esm-cta p { font-size: 16px; line-height: 1.6; }
.cpage__esm-code {
  text-align: right;
  line-height: 1;
}
.cpage__esm-code-num {
  display: block;
  font-size: clamp(56px, 8vw, 92px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: transparent;
  background: linear-gradient(120deg, #c2c8d6, #9fb6e8, #c2c8d6);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: esm-sheen 4.5s linear infinite;
}
@keyframes esm-sheen {
  0%   { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}
/* Наведение на код партнёра — ярче и контрастнее: насыщенный синий, рост, свечение */
.cpage__esm-code-num { transition: transform .3s cubic-bezier(.34, 1.3, .5, 1); }
.cpage__esm-code:hover .cpage__esm-code-num {
  animation: none;
  background: none;
  -webkit-text-fill-color: #1b3fa0;
  color: #1b3fa0;
  transform: scale(1.05);
  text-shadow: 0 12px 34px rgba(27, 63, 160, 0.32);
}
.cpage__esm-code-label {
  display: block;
  font-size: 14px;
  color: var(--esm-ink-2);
  margin-top: 2px;
}

/* ───────── 7. Футер ───────── */
.cpage__esm-foot {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--esm-line);
  text-align: center;
}
.cpage__esm-foot p {
  font-size: 13.5px;
  color: var(--esm-ink-2) !important;
  margin: 0 auto 6px !important;
  max-width: 80ch;
}

/* ───────── Доп. разделы (Кому нужно / Что входит / FAQ) ───────── */
.cpage__esm-block {
  margin: clamp(40px, 6vw, 72px) 0;
}
.cpage__esm-cats {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cpage__esm-cats > li {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--esm-ink);
  background: var(--esm-soft);
  border: 1px solid var(--esm-soft-line);
  border-radius: 999px;
  padding: 8px 16px;
}
.cpage__esm-cats > li::before { content: none; }

/* ═══════════ ОЖИВЛЕНИЕ СТРАНИЦЫ ═══════════ */

/* Появление блоков при прокрутке (класс .is-reveal вешает JS — без JS всё видно сразу) */
.cpage__esm.is-reveal .esm-anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .7, .3, 1);
  will-change: opacity, transform;
}
.cpage__esm.is-reveal .esm-anim.in {
  opacity: 1;
  transform: none;
}

/* Карточка-определение */
.cpage__esm-law { transition: transform .3s ease, box-shadow .3s ease; }
.cpage__esm-law:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15, 23, 42, .10); }

/* Логотип ЕСМ */
.cpage__esm-logo { transition: transform .35s cubic-bezier(.34, 1.3, .5, 1); }
.cpage__esm-logo svg { transition: transform .5s ease; }
.cpage__esm-logo:hover { transform: scale(1.04); }
.cpage__esm-logo:hover svg { transform: rotate(3deg); }

/* Плашки-категории */
.cpage__esm-cats > li { transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.cpage__esm-cats > li:hover { transform: translateY(-2px); background: rgba(15, 116, 224, .10); border-color: var(--esm-brand); color: var(--esm-brand); }

/* Причины: при наведении — только светлая подложка (как в образце) */
.cpage__esm-reasons-list > li { transition: background .18s ease; }
.cpage__esm-reasons-list > li:hover { background: #f6f9ff; }

/* Карточки партнёрского статуса (тёмно-синие) */
.cpage__esm-partner-cards > li { transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.cpage__esm-partner-cards > li:hover { transform: translateY(-4px); border-color: rgba(143, 182, 255, .5); background: #1f3163; box-shadow: 0 16px 36px rgba(0, 0, 0, .28); }

/* Карточка пакета: лифт, рост листьев дерева, лёгкий QR */
.cpage__esm-package { transition: transform .3s ease, box-shadow .3s ease; }
.cpage__esm-package:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(15, 23, 42, .10); }
.cpage__esm-tree-list > li::before { transition: transform .25s ease; }
.cpage__esm-tree-list > li:hover::before { transform: scale(1.4); }
.cpage__esm-qr svg { transition: transform .45s ease; }
.cpage__esm-package:hover .cpage__esm-qr svg { transform: scale(1.06) rotate(2deg); }

/* Шаги «Как подключить»: сдвиг + заливка номера */
.cpage__esm-steps > li { transition: transform .3s ease; }
.cpage__esm-steps > li:hover { transform: translateX(4px); }
.cpage__esm-step-n { transition: transform .35s cubic-bezier(.34, 1.4, .5, 1), background .25s ease, color .25s ease, box-shadow .25s ease; }
.cpage__esm-steps > li:hover .cpage__esm-step-n { background: var(--svc-accent); color: #fff; transform: scale(1.1); box-shadow: 0 6px 16px rgba(36, 86, 214, .35); }

/* Чек-лист «Что входит» (.cpage__steps из cpage.css) */
.cpage__esm .cpage__steps > li { transition: transform .25s ease; }
.cpage__esm .cpage__steps > li:hover { transform: translateX(4px); }
.cpage__esm .cpage__check { transition: transform .3s cubic-bezier(.34, 1.4, .5, 1), background .25s ease, color .25s ease; }
.cpage__esm .cpage__steps > li:hover .cpage__check { transform: scale(1.12); background: var(--svc-accent); color: #fff; }

/* FAQ: лёгкий лифт и подсветка рамки (раскрытие/шеврон — из cpage.css) */
.cpage__esm .cpage__faq-item { transition: border-color .25s ease, box-shadow .25s ease; }
.cpage__esm .cpage__faq-item:hover { border-color: var(--svc-accent-line); box-shadow: 0 8px 22px rgba(15, 23, 42, .06); }

@media (prefers-reduced-motion: reduce) {
  .cpage__esm.is-reveal .esm-anim { opacity: 1; transform: none; transition: none; }
  .cpage__esm-law:hover,
  .cpage__esm-logo:hover,
  .cpage__esm-logo:hover svg,
  .cpage__esm-cats > li:hover,
  .cpage__esm-reasons-list > li:hover,
  .cpage__esm-reasons-list > li:hover .cpage__esm-rcheck,
  .cpage__esm-partner-cards > li:hover,
  .cpage__esm-package:hover,
  .cpage__esm-tree-list > li:hover::before,
  .cpage__esm-package:hover .cpage__esm-qr svg,
  .cpage__esm-steps > li:hover,
  .cpage__esm-steps > li:hover .cpage__esm-step-n,
  .cpage__esm .cpage__steps > li:hover,
  .cpage__esm .cpage__steps > li:hover .cpage__check { transform: none; }
  .cpage__esm-code-num { animation: none; }
  .cpage__esm-code:hover .cpage__esm-code-num { transform: none; }
}

/* ───────── Sticky-шапка листа + прогресс чтения ─────────
   position: sticky ВНУТРИ листа (не fixed) — поэтому не перекрывает шапку сайта.
   Отступ сверху — переменной --esm-sticky-top (по умолчанию 12px). Если у сайта
   своя «липкая» шапка высотой H, задайте на странице: .cpage__esm{ --esm-sticky-top: Hpx } */
.cpage__esm-topbar {
  position: sticky;
  top: var(--esm-sticky-top, 12px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(20, 32, 74, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}
.cpage__esm-topbar-logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--esm-brand);
  letter-spacing: 0.02em;
  line-height: 1;
}
.cpage__esm-topbar-note {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--esm-ink-2);
}
.cpage__esm-topbar-note b { color: #c4302b; }
.cpage__esm-topbar .cpage__cta {
  margin-left: auto;
  padding: 10px 16px;
  font-size: 14px;
}
.cpage__esm-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #0f74e0, #2454d6);
  box-shadow: 0 0 12px rgba(36, 86, 214, 0.45);
  transition: width .12s linear;
}

/* ───────── Герой: бейдж-срок + плавающие блобы ───────── */
.cpage__esm-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(224, 64, 64, 0.08);
  border: 1px solid rgba(224, 64, 64, 0.20);
  color: #c4302b;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cpage__esm-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e04040;
  animation: esm-pulse-dot 1.8s ease-out infinite;
}
@keyframes esm-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(224, 64, 64, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(224, 64, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 64, 64, 0); }
}
.cpage__esm-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(4px);
}
.cpage__esm-blob--1 {
  top: -90px; right: -40px;
  width: 300px; height: 300px;
  background: radial-gradient(circle at 32% 30%, rgba(15, 116, 224, 0.20), rgba(15, 116, 224, 0) 70%);
  animation: esm-float 9s ease-in-out infinite;
}
.cpage__esm-blob--2 {
  bottom: -110px; left: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle at 50% 50%, rgba(36, 86, 214, 0.16), rgba(36, 86, 214, 0) 70%);
  animation: esm-float2 12s ease-in-out infinite;
}
@keyframes esm-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes esm-float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px);  } }

/* ───────── Обратный отсчёт (тёмно-синий блок) ───────── */
.cpage__esm-countdown {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #122150 0%, #0b1430 100%);
  border-radius: 24px;
  padding: clamp(26px, 3.4vw, 40px);
  margin: 0 0 clamp(40px, 6vw, 68px);
}
.cpage__esm-cd-glow {
  position: absolute;
  top: -40px; right: -30px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 116, 224, 0.30), transparent 70%);
  pointer-events: none;
}
.cpage__esm-cd-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cpage__esm .cpage__esm-cd-kicker {
  margin: 0 0 6px;
  max-width: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fb6ff;
}
.cpage__esm .cpage__esm-cd-head {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.cpage__esm-cd-cells { display: flex; gap: 12px; }
.cpage__esm-cd-cell {
  min-width: 74px;
  padding: 14px 10px;
  text-align: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(143, 182, 255, 0.20);
}
.cpage__esm-cd-cell--accent {
  background: rgba(15, 116, 224, 0.22);
  border-color: rgba(143, 182, 255, 0.35);
}
.cpage__esm-cd-num {
  display: block;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cpage__esm-cd-lab {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fb6ff;
}

/* ───────── Статы со счётчиками ───────── */
.cpage__esm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 0 0 clamp(40px, 6vw, 68px);
}
.cpage__esm-stat {
  padding: 22px 18px;
  text-align: center;
  border-radius: 16px;
  background: #f6f9ff;
  border: 1px solid rgba(15, 116, 224, 0.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cpage__esm-stat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08); }
.cpage__esm-stat--navy { background: var(--esm-navy); border-color: var(--esm-navy-line); }
.cpage__esm-stat-num {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--esm-brand);
}
.cpage__esm-stat--navy .cpage__esm-stat-num { color: #fff; }
.cpage__esm-stat-lab {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--esm-ink-2);
}
.cpage__esm-stat--navy .cpage__esm-stat-lab { color: #8fb6ff; }

@media (max-width: 560px) {
  .cpage__esm-topbar-note { display: none; }
  .cpage__esm-cd-cell { min-width: 60px; padding: 12px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpage__esm-badge-dot,
  .cpage__esm-blob--1,
  .cpage__esm-blob--2 { animation: none; }
  .cpage__esm-stat:hover { transform: none; }
}

/* ───────── Тёмная тема сайта ─────────
   Класс .cpage__esm--on-dark вешает скрипт, если фон под страницей тёмный
   (работает при любом механизме темы сайта). Блоки на --svc-* (FAQ, форма, модалка,
   кнопки) подхватывают тёмную тему через cpage.css; здесь правим наши --esm-* цвета. */
.cpage__esm--on-dark {
  --esm-ink: #eef2ff;
  --esm-ink-2: #aeb8d6;
  --esm-line: rgba(150, 168, 220, 0.18);
  --esm-soft: #18223f;
  --esm-soft-line: rgba(120, 150, 230, 0.22);
}
/* карточка-определение «Что такое ТС ПИоТ» */
.cpage__esm--on-dark .cpage__esm-law {
  background: linear-gradient(165deg, #16203f 0%, #111a35 100%);
  border-color: rgba(120, 150, 230, 0.20);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.cpage__esm--on-dark .cpage__esm-law p { color: #c8d0ea; }
.cpage__esm--on-dark .cpage__esm-law-src { color: #aeb8d6; }
/* статы */
.cpage__esm--on-dark .cpage__esm-stat {
  background: #141d3a;
  border-color: rgba(120, 150, 230, 0.18);
}
/* плашки-категории на ховере */
.cpage__esm--on-dark .cpage__esm-cats > li:hover {
  background: rgba(15, 116, 224, 0.18);
}
/* sticky-шапка листа */
.cpage__esm--on-dark .cpage__esm-topbar {
  background: rgba(18, 26, 54, 0.82);
  border-color: rgba(120, 150, 230, 0.18);
}
.cpage__esm--on-dark .cpage__esm-topbar-note { color: #aeb8d6; }
/* подложка пунктов «5 причин» на ховере */
.cpage__esm--on-dark .cpage__esm-reasons-list > li:hover { background: rgba(120, 150, 230, 0.10); }
/* код партнёра: ховер ярче на тёмном фоне */
.cpage__esm--on-dark .cpage__esm-code:hover .cpage__esm-code-num {
  -webkit-text-fill-color: #6aa6ff;
  color: #6aa6ff;
  text-shadow: 0 12px 34px rgba(106, 166, 255, 0.30);
}

/* ───────── Адаптив ───────── */
@media (max-width: 900px) {
  .cpage__esm-intro,
  .cpage__esm-reasons,
  .cpage__esm-connect,
  .cpage__esm-cta {
    grid-template-columns: 1fr;
  }
  .cpage__esm-code,
  .cpage__esm-cta .cpage__esm-cta-col { text-align: left; }
  .cpage__esm-code { order: -1; }
}
@media (max-width: 760px) {
  .cpage__esm-partner-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cpage__esm-package-grid { grid-template-columns: 1fr; gap: 16px; }
  .cpage__esm-price { text-align: left; display: flex; align-items: center; gap: 14px; }
  .cpage__esm-qr { margin: 0; }
  .cpage__esm-actions .cpage__cta,
  .cpage__esm-actions .cpage__cta-ghost { width: 100%; justify-content: center; }
}