/* ======================================================
   DESIGN TOKENS
====================================================== */

/* Запасные шрифты с метриками Manrope и JetBrains Mono: пока фирменные
   грузятся, строки не переносятся иначе (scripts/font-fallback-26sep.mjs). */
@font-face{font-family:"Manrope Fallback";font-weight:400 600;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:101%;ascent-override:105.9%;descent-override:29.7%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";font-weight:400 600;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:104.3%;ascent-override:102.6%;descent-override:28.8%;line-gap-override:0%;unicode-range:U+0400-04FF}
@font-face{font-family:"Manrope Fallback";font-weight:400 600;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:102%;ascent-override:104.9%;descent-override:29.4%;line-gap-override:0%;unicode-range:U+0041-005A,U+0061-007A,U+00C0-00FF}
@font-face{font-family:"Manrope Fallback";font-weight:400 600;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:101%;ascent-override:106%;descent-override:29.7%;line-gap-override:0%;unicode-range:U+0030-0039}
@font-face{font-family:"Manrope Fallback";font-weight:400 600;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:105.6%;ascent-override:101.3%;descent-override:28.4%;line-gap-override:0%;unicode-range:U+0021-002F,U+003A-0040,U+005B-0060,U+007B-007E,U+00A0-00BF}
@font-face{font-family:"Manrope Fallback";font-weight:400 600;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:78.6%;ascent-override:136.1%;descent-override:38.2%;line-gap-override:0%;unicode-range:U+2010-206F,U+20BD}
@font-face{font-family:"Manrope Fallback";font-weight:400 600;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:72%;ascent-override:148.7%;descent-override:41.7%;line-gap-override:0%;unicode-range:U+0020}
@font-face{font-family:"Manrope Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:101.1%;ascent-override:105.8%;descent-override:29.7%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:103%;ascent-override:103.8%;descent-override:29.1%;line-gap-override:0%;unicode-range:U+0400-04FF}
@font-face{font-family:"Manrope Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:102.4%;ascent-override:104.5%;descent-override:29.3%;line-gap-override:0%;unicode-range:U+0041-005A,U+0061-007A,U+00C0-00FF}
@font-face{font-family:"Manrope Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:106.8%;ascent-override:100.2%;descent-override:28.1%;line-gap-override:0%;unicode-range:U+0030-0039}
@font-face{font-family:"Manrope Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:111.7%;ascent-override:95.8%;descent-override:26.9%;line-gap-override:0%;unicode-range:U+0021-002F,U+003A-0040,U+005B-0060,U+007B-007E,U+00A0-00BF}
@font-face{font-family:"Manrope Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:81.2%;ascent-override:131.8%;descent-override:37%;line-gap-override:0%;unicode-range:U+2010-206F,U+20BD}
@font-face{font-family:"Manrope Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:72%;ascent-override:148.7%;descent-override:41.7%;line-gap-override:0%;unicode-range:U+0020}
@font-face{font-family:"JetBrains Mono Fallback";font-weight:400 600;src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono");size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";font-weight:700 900;src:local("Courier New Bold"),local("CourierNewPS-BoldMT"),local("Liberation Mono Bold");size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
:root{
  /* Поверхности: белый холст и одна мягкая подложка под карточки и формы. */
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --card2:#F6F6F7;
  /* Текст: основной, вторичный, приглушённый. Больше уровней не нужно. */
  --ink:#1A1A1A;
  --ink-soft:#5A5A60;
  --ink-muted:#6A6A72;
  /* Линии: волосок на карточках и чуть заметнее — на контурах и осях. */
  --line:#ECECEC;
  --line-2:#D9DDDB;
  /* Радиусы. Шесть ступеней сверху вниз: полоса, карточка, малая
     карточка, чип, плитка иконки, волосок. Формы 999px и 50% — не
     ступени шкалы. */
  --r-band:28px;
  --r:24px;
  --r-sm:18px;
  --r-xs:12px;
  --r-2xs:8px;
  --r-3xs:4px;
  /* Цифры и данные: моноширинный с табличными цифрами. */
  --mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Типографика. Семь ступеней интерфейса: соседей ближе чем на 1.5px
     в шкале нет, иначе разница не читается как иерархия. */
  --fs-1:11px;
  --fs-2:12px;
  --fs-3:13px;
  --fs-4:15px;
  --fs-5:17px;
  --fs-6:20px;
  --fs-7:24px;
  /* Резиновый текст абзацев: лид под заголовком и крупный подзаголовок. */
  --fs-lead:clamp(15px,1.35vw,18px);
  --fs-lead-lg:clamp(19px,2.1vw,26px);
  /* Дисплейные. Раньше у каждого заголовка была своя формула роста —
     сорок штук на сайт, поэтому страницы не выглядели набранными в
     одной системе. Теперь заголовок одного уровня растёт одинаково. */
  --fs-d1:clamp(20px,2.6vw,32px);
  --fs-d2:clamp(22px,3.2vw,44px);
  --fs-d3:clamp(28px,4.4vw,64px);
  --fs-d4:clamp(34px,5.6vw,96px);
  --fs-mega:clamp(64px,12vw,180px);
  /* motion system — one shared language */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.32,.46,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  /* Микроотклик: подсветка ссылки, тон кнопки под курсором. */
  --dur-0:.1s;
  --dur-1:.18s;
  --dur-2:.32s;
  --dur-3:.55s;
  --ring:0 0 0 3px rgba(11,138,91,.55);
  /* Бренд-эмеральд даёт на белом 4.37:1 — этого хватает графике (порог 3:1),
     но не тексту мельче 18.66px и не белому тексту на кнопке (порог 4.5:1).
     Для них берём тот же оттенок, что уже был в системе как ховер. */
  --em:#0B8A5B;
  --em-text:#0A7A50;
  /* Разбавленный изумруд под чипы, метки и подсветку в тексте. Раньше
     это же значение звалось --mint, --yellow и --yellow-warm сразу. */
  --em-wash:#E3F5ED;
  /* На тёмных полосах (подвал, ROI, финальный CTA) тёмный эмеральд наоборот
     проваливается — там нужен светлый. Бренд-цвет на #111 давал 4.32:1. */
  --em-on-dark:#3ECF95;
  /* Отрицательный акцент. Два оттенка по той же причине, что у изумруда:
     графике хватает порога 3:1, тексту нужен 4,5:1. --stop даёт 4,53:1,
     --stop-text — 5,87:1. Больше красных в системе быть не должно. */
  --stop:#C2543F; --stop-text:#B23B3B; --stop-wash:#FBEEEB;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.2;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul,ol{list-style:none}
button,input,select,textarea,optgroup{font-family:inherit;font-size:inherit;line-height:inherit}

/* ======================================================
   UTILS
====================================================== */
.wrap{max-width:1320px;margin:0 auto;padding:28px 28px 72px}
.mk{padding:.04em .22em;border-radius:var(--r-2xs);line-height:1;white-space:nowrap;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mk-y{background:var(--em-wash)}
.mk-o{background:var(--em-text)}
.mk-b{background:var(--em-text)}
.mk-g{background:var(--em-wash)}
/* Один класс «только для скринридера» на весь сайт. .visually-hidden — прежнее
   имя, оставлено синонимом. Темам разделов свои копии (.ex-vh, .px-visually-hidden,
   .co-visually-hidden, .bd-vh) не нужны — переходить на .sr-only. */
.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 24px;border-bottom-right-radius:var(--r-xs);font-weight:700;font-size:var(--fs-4)}
.skip-link:focus{left:0}
#main:focus{outline:none}
.tag{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-3);letter-spacing:.04em;
  text-transform:uppercase;padding:8px 16px;border-radius:999px;
  background:rgba(23,23,23,.07);width:fit-content
}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.sec{margin-top:48px}
/* Compact editorial sections retain themed surfaces and use native disclosures. */
.editorial-copy{width:100%;max-width:960px;margin-inline:auto;min-width:0}
.editorial-copy h2{font-size:var(--fs-d2);font-weight:800;letter-spacing:-.028em;line-height:1.18;margin-bottom:24px}
.editorial-copy p,.editorial-copy li{font-size:var(--fs-5);line-height:1.6;color:inherit}
.editorial-copy p+p,.editorial-copy ul+p{margin-top:16px}
.editorial-part{margin-top:32px}
.editorial-part h3{font-size:var(--fs-7);font-weight:800;line-height:1.3;margin-bottom:12px}
.editorial-copy ul{display:grid;gap:12px;padding-left:24px;list-style:disc}
.editorial-copy a:not(.btn){text-decoration:underline;text-underline-offset:4px}
.editorial-details{border-block:1px solid var(--line-2);padding:20px 0;margin-top:16px}
.editorial-details summary{font-size:var(--fs-5);font-weight:700;line-height:1.5;cursor:pointer}
.editorial-details summary:focus-visible{outline:3px solid var(--em-text);outline-offset:4px}
.editorial-details[open]>summary{margin-bottom:16px}
.sec-head{padding:0 0 24px}
.sec-head h2{font-weight:800;font-size:var(--fs-d3);letter-spacing:-.028em;line-height:1.18}
.sec-head p{margin-top:16px;max-width:560px;font-weight:500;color:var(--ink-soft);font-size:var(--fs-5);line-height:1.55}
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:12px;
  font-weight:700;font-size:var(--fs-5);padding:16px 28px;border-radius:999px;
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);cursor:pointer;
  /* Рамка прозрачная, но есть: без неё .btn-ghost со своей рамкой 1.5px
     оказывался на 3px выше соседней .btn-dark — замерено 54 против 52. */
  border:1.5px solid transparent;
}
/* shine sweep on hover (::before so ::after stays free for the arrow glyph) */
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform var(--dur-3) var(--ease-out);}
/* Блик по кнопке на ховере снят вместе с магнитом (25.09.2026). */
.btn:active{transform:translateY(0) scale(.97);transition-duration:var(--dur-0)}
/* arrow glyph + glide */
.arrow-ic::after{content:"→";position:relative;z-index:1;transition:transform var(--dur-2) var(--ease-spring)}
.btn.arrow-ic:hover::after,.btn.arrow-ic .icon{transition:transform var(--dur-2) var(--ease-spring)}
.btn.arrow-ic:hover::after{transform:translateX(4px)}
.btn.arrow-ic:hover .icon{transform:translateX(4px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.26)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(23,23,23,.3)}
.btn-ghost::before{background:linear-gradient(110deg,transparent 30%,rgba(23,23,23,.08) 50%,transparent 70%)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.btn-mint{background:var(--em-wash);color:var(--ink)}
.btn-mint:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.12)}

/* ======================================================
   STICKY HEADER + MOBILE MENU
====================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(229,225,216,0);
  transition:background var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out);
  margin:0 -28px;padding:0 28px;
}
.site-header.scrolled{
  background:rgba(229,225,216,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
/* torn-paper bottom edge (Dia/Arc style) — appears when stuck.
   Same tint as the header bar; a soft drop-shadow on the zigzag makes the
   torn silhouette read against the content scrolling underneath. */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:11px;
  background:rgba(229,225,216,.92);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='11' viewBox='0 0 24 11'%3E%3Cpath d='M0 0 H24 V4 L21 8 L18 4 L15 8 L12 4 L9 8 L6 4 L3 8 L0 4 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top/24px 11px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='11' viewBox='0 0 24 11'%3E%3Cpath d='M0 0 H24 V4 L21 8 L18 4 L15 8 L12 4 L9 8 L6 4 L3 8 L0 4 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top/24px 11px;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.08));
  opacity:0;transition:opacity var(--dur-1) var(--ease-out);pointer-events:none;
}
.site-header.scrolled::after{opacity:1}
@media(prefers-reduced-motion:reduce){.site-header::after{transition:none}}
.burger{
  display:none;width:46px;height:46px;border-radius:50%;
  background:var(--ink);border:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:var(--r-3xs);transition:transform var(--dur-2) var(--ease-smooth),opacity var(--dur-1) var(--ease-out)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  /* Выше .cookie-bar (z-index 1200) — иначе баннер до выбора пользователя
     перекрывает нижние пункты открытого меню (SEO-аудит, скриншот). Меню —
     полноэкранный модальный оверлей, ему и положено быть сверху. */
  position:fixed;inset:0;z-index:1300;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  padding:88px 36px 40px;overflow-y:auto;
  /* Панель проявляется на месте (opacity за --dur-2), а не едет сверху на
     всю высоту экрана: вместе с ней проезжала и закреплённая кнопка внизу.
     Сдвиг на 8px — у пунктов (каскад ниже). Закрытие короче — --dur-1. */
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-1) var(--ease-out),visibility 0s linear var(--dur-1);
}
.mobile-menu.open{opacity:1;visibility:visible;transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear}
/* Открытое меню: шапка с бургером-крестом поднимается над панелью, иначе
   закрыть меню было нечем (панель 1300 лежала поверх шапки 60). Фон шапки —
   цвет панели, чтобы они читались одним листом. */
.mm-open .site-header,.mm-open .ed .site-header.site-header{z-index:1310;transform:none;background:var(--bg);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.mobile-menu>a{font-weight:800;font-size:var(--fs-7);letter-spacing:-.03em;padding:16px 0}
.mobile-menu .btn{margin-top:20px;font-size:var(--fs-5)}
.mobile-menu-phone{margin-top:auto;font-weight:700;font-size:var(--fs-5);opacity:.7}
/* «Разобрать задачу» в открытом меню видна сразу (25.09.2026): на 390px она
   стояла под «Глоссарием», ниже первого экрана. Кнопка закреплена внизу
   панели, порядок пунктов прежний. Подложка — тень цвета фона, обрезанная
   clip-path до полосы во всю ширину панели (±36px — боковой отступ меню);
   верхняя линия — ::before кнопки (блик на ней не нужен). Разметку 267
   страниц не трогаем. Телефон под кнопкой рисуется поверх подложки.
   Нижний отступ панели (40px) перенесён с самой панели на телефон: липкий
   bottom браузеры отсчитывают по-разному — с учётом padding прокрутки или
   без, а так кнопка встаёт на 16px от края экрана везде. */
.mobile-menu{padding-bottom:0}
.mobile-menu>.mobile-menu-phone{margin-bottom:40px}
.mobile-menu>a.btn{position:sticky;bottom:16px;z-index:2;overflow:visible;clip-path:inset(-16px -36px -16px -36px);
  /* .mobile-menu>a снимал боковой отступ — текст упирался в левый край */
  justify-content:center;padding-inline:24px}
.ed .mobile-menu>a.btn,.ed .mobile-menu>a.btn:hover,.ed .mobile-menu>a.btn:active{box-shadow:0 0 0 200px var(--bg)}
.ed .mobile-menu.open>a.btn:hover,.ed .mobile-menu.open>a.btn:active{transform:none}
.mobile-menu>a.btn::before{display:block;inset:-16px -36px auto;height:1px;border-radius:0;background:var(--line);transform:none;transition:none}
.mobile-menu>.mobile-menu-phone{position:relative;z-index:3}

/* ======================================================
   NAV
====================================================== */
/* Правило писалось под навигацию в шапке, но селектор был по элементу — и
   протекало на КАЖДЫЙ <nav> сайта. Ломало два места сразу: у хлебных крошек
   justify-content:space-between растаскивало «Главная», стрелку и текущую
   страницу по всей ширине 1224px, а колонки подвала превращались в
   переносящуюся флекс-строку, где заголовок и список ссылок разъезжались по
   вертикали на сотни пикселей, и четыре заголовка вставали на четырёх разных
   высотах. Оба места своих layout-правил не имели и держались на этой утечке. */
.site-header nav{
  display:flex;align-items:center;justify-content:space-between;
  /* Высота шапки постоянная (motion-критик, 25.09.2026): раньше при
     scrollY>20 нижний отступ падал с 24 до 12px, плюс появлялась рамка 1px —
     контент под липкой шапкой прыгал на 11px, CLS 0,007–0,015 на каждой
     странице при первой прокрутке. Сумма та же, 36px: 16 сверху, 20 снизу.
     При прокрутке меняются только фон и тень. */
  padding:16px 0 20px;flex-wrap:wrap;
  /* gap:8px — это МИНИМУМ, а не видимый промежуток: при space-between
     блоки и так расходятся по краям, и на широком экране между ними
     сотни пикселей. Значение важно только в момент, когда строка почти
     заполнена: при 16px на экране 1280 не хватало 9px и .nav-right
     переносился вниз, удваивая высоту шапки. */
  gap:8px;   /* минимум, не видимый отступ */
}
.nav-logo{display:flex;align-items:center;gap:12px}
.footer-logo{margin-bottom:4px}
.footer-logo .nav-logo-ring path{animation-delay:.05s}
.nav-logo-ink{position:relative;display:inline-flex;align-items:center;line-height:1;padding:2px 4px}
.nav-logo-name{font-weight:800;font-size:var(--fs-6);letter-spacing:-.03em;position:relative;z-index:1}
.nav-logo-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);width:150%;height:230%;overflow:visible;pointer-events:none;color:var(--em-text);z-index:0}
.nav-logo-ring path{stroke-dasharray:2340;stroke-dashoffset:2340;animation:logoRingDraw 2.1s var(--ease-smooth) var(--dur-1) forwards}
@keyframes logoRingDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.nav-logo-ring path{animation:none;stroke-dashoffset:0}}
/* Кольцо логотипа рисуется один раз за сессию (25.09.2026): прежде 2,1 с на
   каждом переходе. html.logo-drawn ставит встроенный скрипт в начале шапки
   (partials/header.html) по sessionStorage — до первой отрисовки, без
   мигания. На страницах с кольцом в заголовке (.ring-mk) логотип статичен
   сразу: два рисующихся кольца одновременно спорили друг с другом. */
.logo-drawn .nav-logo-ring path,body:has(.ring-mk) .nav-logo-ring path{animation:none;stroke-dashoffset:0}
/* ДНК 404ai на «сайтах внутри сайта» (решение владельца 15.09.2026): кольцо
   логотипа всегда изумрудное — единственный цвет бренда, который тема не
   перекрашивает; и тот же штрих «от руки» как обводка одного ключевого слова
   или цифры на первом экране (.ring-mk). Цвет обводки — акцент раздела. */
body[class*=" theme-"] .site-header .nav-logo-ring{color:#0A7A50}
.ring-mk{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.ring-mk-svg{position:absolute;left:50%;top:52%;width:calc(100% + 1.4em);height:calc(100% + 1.3em);transform:translate(-50%,-50%);overflow:visible;pointer-events:none;z-index:-1;color:var(--em)}
.ring-mk-svg path{fill:none;stroke:currentColor;stroke-width:var(--ring-w,16);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2340;stroke-dashoffset:2340;animation:logoRingDraw 1.6s var(--ease-smooth) var(--dur-3) forwards}
@media(prefers-reduced-motion:reduce){.ring-mk-svg path{animation:none;stroke-dashoffset:0}}
/* Знак препинания после обводки прилипает к слову. Темы дают кольцу правое
   поле (обводка шире слова и иначе наезжает на следующее слово), и точка сразу
   за </span> отрывалась: «где .», «24/7 .». Класс ставит script.js, если текст за
   кольцом начинается с пунктуации; в разметке его можно вписать и сразу — тогда
   нет даже сдвига на долю em после загрузки скрипта. !important — потому что
   поля заданы в theme.css селекторами вида body.theme-x .x-hero h1 .ring-mk. */
.ring-mk.ring-mk--end{margin-right:0!important}
/* Плитка иконки из общего набора /assets/releases/20261007-cifra-articles-1/icons.svg — вторая часть ДНК: линия цвета
   текста, акцентный штрих иконки и подложка — цветом раздела; в ряду одна-две
   плитки залиты акцентом. Скруглённый квадрат, не круг. */
.dna-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:var(--r-xs);background:var(--em-wash);color:var(--ink);font-size:var(--fs-7);--ic-ac:var(--em-text)}
.dna-ic--fill{background:var(--em-text);color:#FFFFFF;--ic-ac:#FFFFFF}
/* Премиальная иконка-рисунок (assets/art, как на главной) в карточках продуктовых
   страниц: графит + один изумрудный акцент, без подложки. --sm — внутри заголовка. */
/* mix-blend-mode:multiply: в рисунках есть белые заливки внутри контура, и на
   сером «столе» тем (#F6F6F7, #F5F6F8) они читались белыми наклейками. Умножение
   делает белое прозрачным на любом светлом фоне, графит и изумруд не меняются.
   На тёмном фоне .pr-art не ставить: умножение сольёт рисунок с фоном. */
.pr-art{display:block;width:72px;height:72px;margin:0 0 16px;flex:none;mix-blend-mode:multiply}
.pr-art--sm{display:inline-block;width:40px;height:40px;margin:0 12px 0 0;vertical-align:middle}
/* Рисунок внутри фирменной плитки .dna-ic (главная): плитка остаётся, вместо
   спрайтового значка — рисунок из assets/art. Подложка плитки светлая, multiply
   работает как на «столе». */
.dna-ic .pr-art{width:34px;height:34px;margin:0}
/* Промежуток 24, а не 28. При 28 три блока шапки просили 1265px на
   доступных 1264 — промах в ОДИН пиксель, из-за которого .nav-right
   переносился на вторую строку на всех ширинах, и шапка была 130px
   вместо 56 на каждой странице сайта. Девять пунктов, восемь промежутков:
   минус 4px каждому дают 32px запаса. */
.nav-links{display:flex;gap:24px;font-weight:600;font-size:var(--fs-4)}
.nav-links a{color:var(--ink-soft);transition:color var(--dur-1) var(--ease-out)}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-phone{font-weight:700;font-size:var(--fs-4);opacity:.85}
.nav-phone:hover{opacity:1}
.nav-links>a{color:var(--ink-soft);transition:color var(--dur-1) var(--ease-out)}
.nav-links>a:hover{opacity:1}
.nav-links>a.is-active{opacity:1;font-weight:800}

/* ---- Desktop dropdowns ---- */
.nav-item{position:relative;padding-bottom:20px;margin-bottom:-20px}
.nav-item .dropdown-toggle{display:inline-flex;align-items:center;gap:8px;opacity:.75;cursor:pointer;transition:opacity var(--dur-1) var(--ease-out)}
.nav-item:hover .dropdown-toggle,.nav-item:focus-within .dropdown-toggle,.nav-item .dropdown-toggle.is-active{opacity:1}
.nav-item .dropdown-toggle.is-active{font-weight:800}
.nav-item .caret{font-size:var(--fs-1);transition:transform var(--dur-1) var(--ease-out)}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
.dropdown-menu{
  position:absolute;top:100%;left:0;min-width:300px;
  background:var(--card);border-radius:var(--r-xs);
  box-shadow:0 20px 54px rgba(0,0,0,.16);
  padding:12px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),visibility var(--dur-1) linear;z-index:80;
}
.nav-item:hover .dropdown-menu,.nav-item:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:var(--r-xs);opacity:1;transition:background var(--dur-0) var(--ease-out)}
.dropdown-menu a:hover{background:var(--card2)}
.dd-name{font-weight:700;font-size:var(--fs-4);color:var(--ink);letter-spacing:-.01em}
.dd-desc{font-weight:500;font-size:var(--fs-3);color:var(--ink-muted)}

/* Раньше на ≤1220px шапка прятала СРАЗУ и меню, и телефон, и кнопку «Запросить
   демо», оставляя один бургер. В диапазоне 761–1220px (планшеты и небольшие
   ноутбуки) липкая нижняя панель ещё не включалась, поэтому видимого призыва к
   действию не было нигде на сайте. Теперь прячем по одному элементу за раз. */
@media(max-width:1220px){.nav-links{display:none}.burger{display:flex}}
@media(max-width:900px){.nav-right .nav-phone{display:none}}
@media(max-width:620px){.nav-right .btn-dark{display:none}}

/* ---- Mobile menu accordions ---- */
.m-group{width:100%;border-bottom:1px solid rgba(23,23,23,.08)}
.m-acc{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:800;font-size:var(--fs-7);letter-spacing:-.03em;padding:16px 0;color:var(--ink);
}
.m-acc .caret{font-size:var(--fs-5);transition:transform var(--dur-1) var(--ease-out)}
.m-acc[aria-expanded="true"] .caret{transform:rotate(180deg)}
.m-sub{display:none;flex-direction:column;padding:0 0 12px 4px}
.m-sub.open{display:flex}
.m-sub a{font-size:var(--fs-5) !important;font-weight:600 !important;padding:8px 0 !important;opacity:.8}
.m-sub a.m-role-link{display:flex;flex-direction:column;gap:1px;opacity:1;padding:8px 0 !important;line-height:1.25}
.m-sub a.m-role-link .mm-role{font-size:var(--fs-5);font-weight:600;color:var(--ink-soft);letter-spacing:-.01em}
.m-sub a.m-role-link .mm-nm{font-size:var(--fs-3);font-weight:600;color:var(--ink);letter-spacing:.02em}

/* ======================================================
   LOGO MARK SVG
====================================================== */
.mark{width:36px;height:36px;flex:none}
.mark-lg{width:90px;height:90px;flex:none}

/* ======================================================
   HERO
====================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--em-wash);border-radius:var(--r);
  min-height:720px;display:flex;align-items:center;
  padding:72px 72px 100px;
}
.hero-content{position:relative;z-index:3;max-width:760px}
.hero h1{
  font-weight:800;font-size:var(--fs-d4);
  line-height:1.2;letter-spacing:-.03em;
}
.hero-sub{
  margin-top:28px;font-size:var(--fs-6);font-weight:500;
  color:var(--ink-soft);line-height:1.58;max-width:540px;
}
.hero-actions{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}
.hero-trust{
  margin-top:36px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  font-weight:600;font-size:var(--fs-4);color:var(--ink-soft)
}
.hero-trust-item{display:flex;align-items:center;gap:8px}
.hero-trust-item::before{
  content:"✓";font-weight:800;font-size:var(--fs-3);
  color:#fff;background:var(--em-text);
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none
}
.hero-metrics{margin-top:40px;display:flex;gap:36px;flex-wrap:wrap}
.hero-metric-num{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.03em;line-height:1}
.hero-metric-lbl{margin-top:8px;font-weight:600;font-size:var(--fs-3);color:var(--ink-soft);max-width:140px;line-height:1.35}
.hero-blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;z-index:0;pointer-events:none}
.hero-blob.b1{width:340px;height:340px;background:radial-gradient(circle at 30% 30%,#E3F5ED,transparent 70%);right:8%;top:-60px;animation:floatA 14s var(--ease-smooth) infinite}
.hero-blob.b2{width:300px;height:300px;background:radial-gradient(circle at 30% 30%,#C7EAD9,transparent 70%);right:24%;bottom:-80px;animation:floatB 18s var(--ease-smooth) infinite}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,22px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-24px)}}
.hero-art{position:absolute;right:0;top:0;bottom:0;width:52%;z-index:1;pointer-events:none}
.hero-art-bird{position:absolute;right:-3%;top:2%;width:620px;max-width:62%}
.hero-frame{position:absolute;right:5%;bottom:9%;width:340px;max-width:62%;z-index:2}
.hero-balance{position:absolute;right:5%;bottom:8%;width:300px;max-width:50%;z-index:2}
.hero-balance svg{width:100%;height:auto;display:block}
@keyframes teeter{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@media(max-width:900px){
  .hero{padding:52px 32px 60px;min-height:auto}
  .hero-art{display:none}
  .hero-blob{display:none}
  /* tighten the hero foot on mobile — trust chips + metrics were too airy */
  .hero-trust{margin-top:24px;gap:12px 16px;font-size:var(--fs-3)}
  .hero-metrics{margin-top:24px;gap:20px 28px}
  .hero-metric-lbl{font-size:var(--fs-2);max-width:150px}
}

/* ======================================================
   BRAND STRIP
====================================================== */
.brand{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;padding:52px 24px 36px;flex-wrap:wrap;
}
.brand-left{display:flex;align-items:flex-end;gap:20px}
.brand-word{
  font-weight:800;font-size:var(--fs-mega);
  letter-spacing:-.045em;line-height:.85;
}
.brand-word sup{font-size:.22em;font-weight:700;vertical-align:super}
.brand-right{padding-bottom:12px}
.brand-tag{font-weight:700;font-size:var(--fs-d1);line-height:1.15;letter-spacing:-.01em}

/* ======================================================
   TRUST BAR — MARQUEE
====================================================== */
.trust-bar{
  background:var(--card);border-radius:var(--r-sm);
  padding:24px 0;overflow:hidden;position:relative;
}
.trust-bar-label{
  font-weight:700;font-size:var(--fs-4);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-muted);padding:0 36px 16px;
}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:56px;width:max-content;animation:scrollX 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.trust-logo{font-weight:800;font-size:var(--fs-6);letter-spacing:-.02em;opacity:.4;white-space:nowrap;transition:opacity var(--dur-1) var(--ease-out)}
.trust-logo:hover{opacity:.75}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ======================================================
   ADVANTAGES
====================================================== */
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Блок цифр «о компании»: после того как из него убрали две фразы,
   осталось четыре карточки, а в трёхколоночной сетке это 3+1 с пустой
   ячейкой. Колонок столько, сколько карточек. */
.adv-grid--nums{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media(max-width:880px){.adv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.adv-grid{grid-template-columns:1fr}}
/* Пара карточек: две колонки вместо трёх. Раньше это задавалось инлайном
   в разметке — инлайн перебивает медиазапросы, и на 390px карточки
   вылезали за край экрана на 9px. */
.adv-grid--pair{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.adv-grid--pair{grid-template-columns:1fr}}
.adv{background:var(--card);border-radius:var(--r-sm);padding:32px 28px;border:1px solid transparent;transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.adv:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.09);border-color:rgba(11,138,91,.22)}
/* Рисунок в карточке. Изумрудной плитки под ним нет намеренно: у
   рисунка 96px своя весомость, подложка превращается в кляксу.
   Значок 24px на плитке остаётся там, где он служебный. */
.adv-art,.uc-art{width:96px;height:96px;margin:0 0 20px}
.ind-chip-art{width:88px;height:88px;margin:0 0 16px}
.ind-chip-art img{display:block;width:100%;height:100%}
/* Рисунок в шаге (/thank-you/). Номер шага висит отдельным водяным «01»
   справа, поэтому плитка под рисунком не нужна — как у .ind-chip-art. */
.step-art{width:88px;height:88px;margin:0 0 16px}
.step-art img{display:block;width:100%;height:100%}
@media(max-width:760px){.step-art{width:72px;height:72px}}
.adv-art img,.uc-art img{display:block;width:100%;height:100%}
/* Те же рисунки assets/art с белыми заливками: на изумрудных подложках карточек
   главной они давали белый квадрат. Все эти обёртки стоят на светлом фоне. */
.adv-art img,.uc-art img,.step-art img,.tab-art img,.ind-chip-art img{mix-blend-mode:multiply}
@media(max-width:760px){.adv-art,.uc-art{width:72px;height:72px;margin-bottom:16px}}

.adv-ic{
  width:52px;height:52px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-7);margin-bottom:16px;
}
.adv h3{font-weight:800;font-size:var(--fs-6);letter-spacing:-.02em}
.adv p{margin-top:8px;font-weight:500;color:var(--ink-soft);font-size:var(--fs-4);line-height:1.5}

/* ======================================================
   STATS
====================================================== */
/* Колонок столько, сколько показателей: после того как из блока убрали
   продуктовую метрику ASR, жёсткие четыре колонки оставляли пустую ячейку. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{border-radius:var(--r-sm);padding:36px 28px}
.stat:nth-child(1){background:var(--em-wash)}
.stat:nth-child(2){background:var(--em-wash)}
.stat:nth-child(3){background:var(--em-text)}
.stat:nth-child(4){background:var(--card)}
.stat-num{font-weight:800;font-size:var(--fs-d3);letter-spacing:-.035em;line-height:1}
.stat-lbl{margin-top:12px;font-weight:600;color:var(--ink-soft);font-size:var(--fs-4);line-height:1.45}

/* ======================================================
   HOW IT WORKS
====================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
/* Четыре шага (спасибо-страница Киры): две колонки на планшете. */
.steps.steps-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.steps.steps-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.steps.steps-4{grid-template-columns:1fr}}
/* Варианты блоков под продукт (/thank-you/, /demo/): hidden сильнее, чем
   display у класса блока. Выбор делает script.js. */
[data-for-product][hidden],[data-not-for-product][hidden],.ed .lead-info>.tag[hidden]{display:none!important}
.step{background:var(--card);border-radius:var(--r-sm);padding:36px 32px;position:relative}
.step-num{
  font-weight:800;font-size:var(--fs-d4);letter-spacing:-.05em;line-height:.8;
  color:rgba(23,23,23,.07);position:absolute;right:24px;top:20px;
}
.step h3{font-weight:800;font-size:var(--fs-7);letter-spacing:-.02em;margin-top:8px}
.step p{margin-top:12px;font-weight:500;color:var(--ink-soft);font-size:var(--fs-5);line-height:1.55}
.step-icon{
  width:52px;height:52px;border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-7);
}

/* ======================================================
   PRODUCTS
====================================================== */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
/* Число колонок теперь определяет minmax, отдельное правило не нужно. */
.card-p{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--card);border-radius:var(--r-sm);padding:32px 32px;
  display:flex;flex-direction:column;min-height:260px;
  border:1px solid transparent;
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);
}
/* мягкий статичный hover-tint по центру карточки (JS-слежение за курсором удалено как AI-паттерн) */
.card-p::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  transition:opacity var(--dur-2) var(--ease-out);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(11,138,91,.10),transparent 60%);}
.card-p:hover::before{opacity:1}
.card-p:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.11);border-color:rgba(11,138,91,.28)}
.card-p.col3{grid-column:span 3}
.card-p.col2{grid-column:span 2}
.card-p.col4{grid-column:span 4}
.card-p.col6{grid-column:span 6}
.tint-mint{background:var(--em-wash)}
.tint-yellow{background:var(--em-wash)}
.tint-blue{background:var(--em-text)}
@media(max-width:980px){.card-p.col3,.card-p.col2,.card-p.col4,.card-p.col6{grid-column:span 1}}
.p-features{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.p-feat{display:flex;align-items:flex-start;gap:8px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.4}
.p-feat::before{content:"→";font-weight:700;font-size:var(--fs-3);margin-top:1px;flex:none}
.card-p h3{margin-top:auto;font-weight:800;font-size:var(--fs-d1);letter-spacing:-.02em}
.card-p .card-desc{margin-top:12px;font-weight:500;color:var(--ink-soft);font-size:var(--fs-4);line-height:1.5}
.card-link{margin-top:20px;font-weight:700;font-size:var(--fs-4);display:inline-flex;gap:8px;align-items:center;opacity:.75;transition:opacity var(--dur-1) var(--ease-out)}
.card-link:hover{opacity:1}

/* ======================================================
   DEEP DIVE — dashboard mock
====================================================== */
.deepdive{
  background:var(--card);border-radius:var(--r);
  padding:56px 60px;display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center;
}
@media(max-width:880px){.deepdive{grid-template-columns:1fr;padding:40px 32px;gap:36px}}
.deepdive h2{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.03em;line-height:1.18}
.deepdive .dd-lead{margin-top:20px;font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.55;max-width:460px}
.dd-points{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.dd-point{display:flex;gap:12px;align-items:flex-start}
.dd-point-ic{width:30px;height:30px;border-radius:var(--r-2xs);background:var(--em-wash);display:flex;align-items:center;justify-content:center;font-size:var(--fs-4);flex:none}
.dd-point h4{font-weight:700;font-size:var(--fs-4)}
.dd-point p{margin-top:2px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.45}
.dd-mock{background:var(--bg);border-radius:var(--r-sm);padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.dd-mock-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.dd-mock-title{font-weight:800;font-size:var(--fs-4)}
.dd-mock-dots{display:flex;gap:8px}
.dd-mock-dots span{width:9px;height:9px;border-radius:50%}
.dd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.dd-kpi{background:#fff;border-radius:var(--r-xs);padding:16px 12px}
.dd-kpi-num{font-weight:800;font-size:var(--fs-6);letter-spacing:-.03em}
.dd-kpi-lbl{margin-top:4px;font-weight:600;font-size:var(--fs-1);color:var(--ink-muted);line-height:1.3}
.dd-chart{background:#fff;border-radius:var(--r-xs);padding:16px 16px 12px;margin-bottom:16px}
.dd-chart-head{display:flex;justify-content:space-between;font-weight:700;font-size:var(--fs-2);color:var(--ink-soft);margin-bottom:16px}
.dd-bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.dd-bar{flex:1;border-radius:6px 6px 0 0;background:var(--em-wash);position:relative}
.dd-bar:nth-child(even){background:var(--em-text)}
.dd-bar:nth-child(5){background:var(--em-text)}
.dd-tags{display:flex;flex-wrap:wrap;gap:8px}
.dd-tag{font-weight:700;font-size:var(--fs-2);padding:8px 12px;border-radius:999px;background:#fff;color:var(--ink-soft)}
.dd-tag.hot{background:var(--em-text);color:#fff}
.dd-tag.warm{background:var(--em-wash)}

/* ======================================================
   USE CASES
====================================================== */
.usecases{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
/* Число колонок теперь определяет minmax, отдельное правило не нужно. */
.uc{background:var(--card);border-radius:var(--r-sm);padding:32px 28px}
.uc-icon{font-size:var(--fs-d1);margin-bottom:16px}
.uc h3{font-weight:800;font-size:var(--fs-6);letter-spacing:-.02em}
.uc p{margin-top:8px;font-weight:500;color:var(--ink-soft);font-size:var(--fs-4);line-height:1.5}
.uc-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.uc-list li{font-size:var(--fs-4);font-weight:600;padding:4px 0;border-bottom:1px solid rgba(23,23,23,.07);color:var(--ink-soft)}
.uc-list li:last-child{border-bottom:none}
/* provider / positioning block */
.prov-lead{max-width:760px;margin:0 auto 32px;text-align:center;color:var(--ink-soft);font-weight:500;font-size:var(--fs-5);line-height:1.62}
.prov-lead b{color:var(--ink);font-weight:800}
a.uc{position:relative;overflow:hidden;isolation:isolate;display:block;text-decoration:none;color:inherit;border:1px solid transparent;transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
a.uc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity var(--dur-2) var(--ease-out);background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(11,138,91,.10),transparent 60%)}
a.uc:hover::before{opacity:1}
a.uc:hover{border-color:rgba(11,138,91,.26)}
a.uc:hover .uc-more .icon{transform:translateX(4px)}
.uc-more .icon{transition:transform var(--dur-2) var(--ease-spring)}
a.uc:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.08)}
.uc-ic{width:46px;height:46px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.uc-ic .icon{width:24px;height:24px}
.uc-more{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-4);color:var(--em-text)}
.uc-more .icon{width:15px;height:15px}
.plan-rr{display:inline-block;margin-top:12px;padding:4px 12px;border-radius:999px;background:var(--em-wash);color:var(--em-text);font-weight:700;font-size:var(--fs-3)}
.compare-cta{margin-top:24px;display:flex;justify-content:center}
/* perf: skip rendering offscreen footer until near viewport */
.footer{content-visibility:auto;contain-intrinsic-size:auto 720px}
.card-mascot{display:flex;justify-content:center;margin:2px 0 16px;color:var(--ink)}
.card-mascot .cm-svg{height:150px;width:auto;max-width:100%;display:block;overflow:visible;transition:transform var(--dur-3) var(--ease-out)}
.card-p:hover .card-mascot .cm-svg{transform:translateY(-5px)}
@media(max-width:640px){.card-mascot .cm-svg{height:120px}}
/* ===== hero mascot: hand balancing blocks ===== */

.bal{transform-box:view-box;transform-origin:178px 151px;animation:baltilt 4.6s var(--ease-smooth) infinite alternate}
@keyframes baltilt{from{transform:rotate(-9deg)}to{transform:rotate(-4deg)}}
.bal-hand{transform-box:view-box;transform-origin:300px 56px;animation:handbob 5.2s var(--ease-smooth) infinite alternate}
@keyframes handbob{from{transform:translateY(0)}to{transform:translateY(5px)}}
.hl{stroke-dasharray:1;stroke-dashoffset:1;animation:bdraw 1.1s var(--ease-out) forwards}
.bal-hand .hl:nth-child(1){animation-delay:.1s}.bal-hand .hl:nth-child(2){animation-delay:.25s}.bal-hand .hl:nth-child(3){animation-delay:.4s}.bal-hand .hl:nth-child(4){animation-delay:.5s}.bal-hand .hl:nth-child(5){animation-delay:.6s}.bal-hand .hl:nth-child(6){animation-delay:.7s}.bal-hand .hl:nth-child(7){animation-delay:.8s}.bal-hand .hl:nth-child(8){animation-delay:.9s}.bal-hand .hl:nth-child(9){animation-delay:1s}
@keyframes bdraw{to{stroke-dashoffset:0}}
.bk{opacity:0;transform-box:fill-box;transform-origin:center;animation:bkpop var(--dur-3) var(--ease-out) forwards}
.bk1{animation-delay:.2s}.bk2{animation-delay:.35s}.bk3{animation-delay:.5s}
@keyframes bkpop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.hero-art-svg.interacting .bal{animation:none;transform:rotate(var(--tilt,-7deg));transition:transform var(--dur-1) var(--ease-out)}
@media(prefers-reduced-motion:reduce){.bal,.bal-hand,.hl,.bk{animation:none!important}.hl{stroke-dashoffset:0}.bk{opacity:1;transform:none}.bal{transform:rotate(-7deg)}}

/* ======================================================
   INDUSTRIES — TABS
====================================================== */
.tabs-nav{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 24px}
.tab-btn{
  font-weight:700;font-size:var(--fs-4);padding:12px 20px;border-radius:999px;
  background:var(--card);border:none;cursor:pointer;color:var(--ink-soft);
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-0) var(--ease-out);
}
.tab-btn:hover{transform:translateY(-2px)}
.tab-btn.active{background:var(--ink);color:#fff}
/* sliding pill indicator (JS-injected via initTabs) */
.tabs-nav.has-pill{position:relative}
.tabs-nav.has-pill .tab-btn{position:relative;z-index:1;background:transparent}
.tabs-nav.has-pill .tab-btn:not(.active){background:var(--card)}
.tab-pill{
  position:absolute;top:0;left:0;width:0;height:0;border-radius:999px;
  background:var(--ink);z-index:0;pointer-events:none;
  transition:transform var(--dur-3) var(--ease-spring),width var(--dur-2) var(--ease-out),height var(--dur-2) var(--ease-out);
}
@media(prefers-reduced-motion:reduce){.tab-pill{transition:none}}
.tab-panels{position:relative}
/* Узкая колонка под рисунок отрасли. До неё секция была единственной
   крупной на главной вообще без изображений. */
.tab-art{width:96px;height:96px}
.tab-art img{display:block;width:100%;height:100%}
@media(max-width:900px){.tab-panel.active{grid-template-columns:72px 1fr 1fr 1fr;gap:24px}.tab-art{width:72px;height:72px}}
.tab-panel{display:none;background:var(--card);border-radius:var(--r);padding:44px 48px}
.tab-panel.active{display:grid;grid-template-columns:96px 1fr 1fr 1fr;gap:32px;align-items:start;animation:fadeIn var(--dur-2) var(--ease-out)}
@media(max-width:760px){.tab-panel.active{grid-template-columns:1fr;gap:24px;padding:32px 28px}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Смена вкладок: JS 520мс держит активными обе панели (уходящую morph-out и
   входящую morph-in) для перекрёстного морфа. Без этих правил обе оставались
   в потоке (display:grid) и вставали стопкой — на экране две карточки разом.
   Накладываем их друг на друга абсолютом (высоту обёртки на это время фиксирует
   JS), уходящую уводим и гасим, входящую вводим — по направлению --dir. */
.tab-panel.morph-out,.tab-panel.morph-in{position:absolute;top:0;left:0;right:0}
.tab-panel.morph-out{animation:tabOut var(--dur-2) var(--ease-out) forwards;pointer-events:none;z-index:1}
.tab-panel.morph-in{animation:tabIn var(--dur-3) var(--ease-out);z-index:2}
@keyframes tabOut{to{opacity:0;transform:translateX(calc(var(--dir,1) * -26px))}}
@keyframes tabIn{from{opacity:0;transform:translateX(calc(var(--dir,1) * 26px))}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tab-panel.morph-out,.tab-panel.morph-in{animation:none}}
.tab-col h4{font-weight:800;font-size:var(--fs-3);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:12px}
.tab-col p{font-weight:600;font-size:var(--fs-5);line-height:1.5;color:var(--ink)}
.tab-col.metric .tab-metric-num{font-weight:800;font-size:var(--fs-d3);letter-spacing:-.035em;line-height:1;color:var(--em-text)}
.tab-col.metric p{margin-top:12px;font-weight:600;font-size:var(--fs-4);color:var(--ink-soft)}

/* ======================================================
   CASE STUDIES
====================================================== */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.cases-grid{grid-template-columns:1fr}}
.cases-shot{position:relative;max-width:1040px;margin:0 auto 24px}
.cases-shot .cases-shot__bar{position:static;display:block;margin-bottom:8px;padding:0;background:none;box-shadow:none}
.cases-shot img{display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 1px 2px rgba(16,24,20,.04),0 14px 34px -20px rgba(16,24,20,.16)}
.cases-shot figcaption{margin-top:12px;max-width:76ch;font-size:var(--fs-3);font-weight:500;line-height:1.5;color:var(--ink-muted)}
@media(max-width:599px){.cases-shot{margin-bottom:20px}}
/* Хвост секции кейсов: до 2026-08-06 раздел /cases/ не имел ни одной входящей
   ссылки с главной, и 20 разборов внедрений видел только поисковый трафик. */
.cases-more{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cases-more p{max-width:62ch;color:var(--ink-soft);font-size:var(--fs-5);line-height:1.55;margin:0}
.case{border-radius:var(--r-sm);padding:36px 32px;display:flex;flex-direction:column}
/* Карточка кейса стала ссылкой: раньше это был <article>, который выглядел
   кликабельным, но никуда не вёл. Сбрасываем оформление ссылки, чтобы
   карточка выглядела ровно так же, как прежде. */
a.case{text-decoration:none;color:inherit}
.case-more{margin-top:auto;padding-top:16px;font-weight:700;font-size:var(--fs-4);color:var(--ink)}
/* Ссылка под блоком дифференциатора: наследовала серый цвет сноски и не
   читалась как ссылка. */
.agency-more{margin-top:28px;text-align:center;font-size:var(--fs-4)}
.agency-more a{color:var(--em-text);font-weight:700;text-decoration:none}
.agency-more a:hover{text-decoration:underline}
.case:nth-child(1){background:var(--em-wash)}
.case:nth-child(2){background:var(--em-wash)}
.case:nth-child(3){background:var(--em-text)}
.case-logo{font-weight:800;font-size:var(--fs-5);letter-spacing:-.02em;margin-bottom:20px}
.case-row{margin-bottom:16px}
.case-row h4{font-weight:800;font-size:var(--fs-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:4px}
.case-row p{font-weight:600;font-size:var(--fs-4);line-height:1.45}
.case-metric{margin-top:auto;padding-top:20px}
.case-metric-num{font-weight:800;font-size:var(--fs-d3);letter-spacing:-.035em;line-height:1}
.case-metric-lbl{margin-top:8px;font-weight:600;font-size:var(--fs-4);color:var(--on-dark-soft)}
/* Обложка кейса в карточке «Проблема / Решение» (22.09.2026) — та же, что в
   списке кейсов: во всю ширину карточки, углы скругляет сама карточка. */
.case-cover{display:block;width:calc(100% + 64px);max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;margin:-36px -32px 24px;background:var(--card2)}
.case:has(> .case-cover){overflow:hidden}
/* Обложка кейса в карточках на страницах продуктов (Эхолитикс, Фонекс, Коуч,
   Дирижёр): сверху внутри карточки, скруглённая. В карточке внедрения
   Дирижёра (сетка «текст + цифры») — баннером на всю ширину. */
.pc-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 16px;border-radius:var(--r-xs);background:var(--card2)}
.or-case > .pc-cover{grid-column:1/-1;aspect-ratio:3/1;margin:0}
/* «Разборы по теме» на страницах решений (scripts/case-cards.mjs). */
.case-cards__all{margin-top:24px;text-align:center;font-size:var(--fs-4)}
.case-cards__all a{font-weight:700;color:var(--em-text);text-decoration:none}
.case-cards__all a:hover{text-decoration:underline}

/* ======================================================
   COMPARISON TABLE
====================================================== */
.compare-wrap{background:var(--card);border-radius:var(--r-sm);overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;min-width:520px}
.compare-table th{font-weight:800;font-size:var(--fs-4);padding:20px 24px;text-align:left;border-bottom:2px solid var(--bg)}
.compare-table th:nth-child(2){background:rgba(23,23,23,.04)}
.compare-table th:nth-child(3){background:var(--em-wash)}
.compare-table td{padding:16px 24px;font-size:var(--fs-4);font-weight:600;border-bottom:1px solid var(--bg);vertical-align:middle}
.compare-table td:nth-child(2){background:rgba(23,23,23,.025);color:var(--ink-soft)}
.compare-table td:nth-child(3){background:rgba(11,138,91,.07)}
.compare-table tr:last-child td{border-bottom:none}
.ic-yes{color:var(--em-text);font-size:var(--fs-5);font-weight:800}
.ic-no{color:var(--stop);font-size:var(--fs-5);font-weight:800}

/* ======================================================
   ROI CALCULATOR
====================================================== */
.roi{
  background:var(--ink);color:#fff;border-radius:var(--r);
  padding:52px 56px;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
}
@media(max-width:880px){.roi{grid-template-columns:1fr;padding:40px 32px;gap:36px}}
.roi h2{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.03em;line-height:1.18}
.roi h2 .mk{color:var(--ink)}
.roi-intro{margin-top:16px;font-weight:500;font-size:var(--fs-5);color:var(--on-dark-muted);line-height:1.55;max-width:430px}
.roi-controls{display:flex;flex-direction:column;gap:24px;margin-top:32px}
.roi-control label{display:flex;justify-content:space-between;font-weight:700;font-size:var(--fs-4);margin-bottom:12px}
.roi-control label b{font-weight:800}
.roi-range{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:rgba(255,255,255,.18);outline:none;cursor:pointer;
}
.roi-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--em-wash);border:3px solid var(--ink);cursor:pointer}
.roi-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--em-wash);border:3px solid var(--ink);cursor:pointer}
.roi-result{background:rgba(255,255,255,.06);border-radius:var(--r-sm);padding:36px 36px}
.roi-result-label{font-weight:700;font-size:var(--fs-3);letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark-muted)}
.roi-result-num{font-weight:800;font-size:var(--fs-d4);letter-spacing:-.04em;line-height:1;color:var(--em-wash);margin-top:12px}
.roi-result-sub{margin-top:8px;font-weight:600;font-size:var(--fs-4);color:var(--on-dark-soft);line-height:1.45}
.roi-breakdown{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.roi-line{display:flex;justify-content:space-between;font-weight:600;font-size:var(--fs-4);color:var(--on-dark-soft);padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.roi-line:last-child{border-bottom:none}
.roi-line b{font-weight:800;color:#fff}
.roi .btn{margin-top:28px}

/* ======================================================
   TESTIMONIALS
====================================================== */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.testimonials{grid-template-columns:1fr}}
.testi{background:var(--card);border-radius:var(--r-sm);padding:32px 28px}
.testi-quote{font-size:var(--fs-d2);line-height:1;color:var(--ink-muted);margin-bottom:12px}
.testi p{font-weight:500;font-size:var(--fs-5);line-height:1.6;color:var(--ink-soft)}
.testi-author{margin-top:24px;display:flex;align-items:center;gap:12px}
.testi-avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:var(--fs-5);color:#fff;flex:none;
}
.testi-name{font-weight:700;font-size:var(--fs-4)}
.testi-pos{font-weight:500;font-size:var(--fs-3);color:var(--ink-muted);margin-top:2px}

/* ======================================================
   PRICING
====================================================== */
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 16px 32px;font-weight:700;font-size:var(--fs-4)}
.pricing-toggle .pt-opt{color:var(--ink-muted);transition:color var(--dur-1) var(--ease-out)}
.pricing-toggle .pt-opt.active{color:var(--ink)}
.pt-save{font-weight:700;font-size:var(--fs-2);background:var(--em-wash);padding:4px 12px;border-radius:999px;margin-left:2px}
.switch{position:relative;width:54px;height:30px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
  position:absolute;inset:0;background:var(--ink);border-radius:999px;cursor:pointer;transition:background var(--dur-1) var(--ease-out);
}
.switch .slider::before{
  content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;left:4px;top:4px;transition:transform var(--dur-1) var(--ease-out);
}
.switch input:checked + .slider::before{transform:translateX(24px)}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:880px){.pricing{grid-template-columns:1fr}}
.plan{
  background:var(--card);border-radius:var(--r-sm);padding:40px 32px;
  display:flex;flex-direction:column;position:relative;border:2px solid transparent;
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out);
}
.plan:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(0,0,0,.09)}
.plan.featured{background:var(--em-wash);border-color:var(--ink)}
.plan-badge{
  position:absolute;top:-13px;left:32px;background:var(--ink);color:#fff;
  font-weight:700;font-size:var(--fs-2);letter-spacing:.03em;padding:8px 16px;border-radius:999px;
}
.plan-name{font-weight:800;font-size:var(--fs-6);letter-spacing:-.02em}
.plan-desc{margin-top:8px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.45;min-height:42px}
.plan-price{margin-top:24px;display:flex;align-items:baseline;gap:8px}
.plan-price .pp-from{font-weight:600;font-size:var(--fs-4);color:var(--ink-muted)}
.plan-price .pp-num{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.035em}
.plan-price .pp-per{font-weight:600;font-size:var(--fs-4);color:var(--ink-muted)}
.plan-features{margin-top:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.plan-feat{display:flex;align-items:flex-start;gap:12px;font-weight:600;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.4}
.plan-feat::before{content:"✓";font-weight:800;color:var(--em-text);flex:none}
.plan .btn{margin-top:28px;width:100%;justify-content:center}

/* ======================================================
   LEAD FORM
====================================================== */
.lead{
  position:relative;overflow:hidden;
  background:var(--card);border-radius:var(--r);
  padding:56px 60px;display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start;
}
/* AI-console dot-grid texture on the lead panel */
.lead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(23,23,23,.045) 1px,transparent 1.4px);background-size:24px 24px;
  mask-image:radial-gradient(120% 90% at 100% 0%,#000 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 90% at 100% 0%,#000 20%,transparent 70%)}
.lead>*{position:relative;z-index:1}
/* the form column reads as a console card */
.lead /* Свёрнутые уточнения в форме заявки ---------------------------------
   Тринадцать полей сразу — 792px формы — для первого контакта много.
   Поля не выброшены: внутри <details> они остаются частью формы и
   уходят на сервер со своими значениями, даже если человек их не
   разворачивал. Это важно для продуктовых страниц, где product и
   volume заранее выставлены интентом квиза. */
.lf-more{grid-column:1/-1;margin:4px 0 0}
.lf-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-3);color:var(--ink-soft);padding:8px 0}
.lf-more>summary::-webkit-details-marker{display:none}
.lf-more>summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line-2);border-radius:var(--r-3xs);font-weight:800;color:var(--ink-soft)}
.lf-more[open]>summary::before{content:"–"}
.lf-more>summary span{font-weight:500;color:var(--ink-muted)}
.lf-more>summary:hover{color:var(--ink)}
.lf-more-in{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:8px}
.lf-more-in .full{grid-column:1/-1}
@media(max-width:560px){.lf-more-in{grid-template-columns:1fr}}

.form-grid{background:rgba(255,255,255,.55);backdrop-filter:blur(2px);
  border:1px solid rgba(23,23,23,.06);border-radius:var(--r-sm);padding:24px 24px 28px}
@media(max-width:880px){.lead{grid-template-columns:1fr;padding:40px 32px;gap:36px}}
.lead-info h2{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.03em;line-height:1.18}
.lead-info p{margin-top:16px;font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.55;max-width:380px}
.lead-perks{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.lead-perk{display:flex;align-items:center;gap:12px;font-weight:600;font-size:var(--fs-4)}
.lead-perk::before{content:"✓";font-weight:800;color:#fff;background:var(--em-text);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-3);flex:none}
/* личный контакт основателя у лид-формы */
.lead-person{margin-top:28px;padding-top:24px;border-top:1px solid #ECECEC;display:flex;align-items:center;gap:16px}
.lead-person img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.lead-person b{display:block;font-weight:800;font-size:var(--fs-4);letter-spacing:-.01em}
.lead-person span{display:block;margin-top:2px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.45}
.lead-person a{color:var(--em-text);font-weight:700;text-decoration:none}
.lead-person a:hover{text-decoration:underline}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* На телефоне две колонки давали поле шириной ~90px: подпись «Telegram или
   WhatsApp» переносилась в три строки поверх рамки (/demo/ на 390px). */
@media(max-width:560px){.form-grid{grid-template-columns:1fr;gap:12px}}
/* FLOATING LABEL fields */
.field{position:relative;display:block}
.field.full{grid-column:1 / -1}
.field label{position:absolute;left:15px;top:15px;z-index:2;pointer-events:none;
  font-weight:600;font-size:var(--fs-4);color:var(--ink-muted);
  background:transparent;padding:0 4px;
  transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.field label .req{color:var(--em-text)}
.field input,.field select,.field textarea{
  font-family:inherit;font-weight:500;font-size:var(--fs-4);color:var(--ink);
  background:#fff;border:1.5px solid rgba(23,23,23,.48);border-radius:var(--r-xs);
  padding:20px 16px 12px;outline:none;width:100%;
  box-shadow:0 1px 0 rgba(23,23,23,.03) inset;
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);
}
/* placeholder hidden until label floats (we set placeholder=" ") */
.field input::placeholder,.field textarea::placeholder{color:transparent}
.field textarea{resize:vertical;min-height:104px}
/* float the label up when focused or filled */
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field:has(select) > label,
.field.has-value > label{
  transform:translateY(-15px) scale(.78);
  color:var(--em-text);background:#fff;border-radius:var(--r-3xs)}
/* selects always carry a value, so their label always floats */
.field select{padding-top:20px;padding-bottom:8px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23626260' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(23,23,23,.62)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--em-text);
  box-shadow:0 0 0 3px rgba(11,138,91,.16),0 6px 18px rgba(11,138,91,.08);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--stop);background:#fdf3f3;box-shadow:0 0 0 3px rgba(192,80,80,.14)}
/* var(--stop) хватало на белом (4.66:1), но плавающий лейбл лежит на подсвеченном
   фоне самого поля #fdf3f3, где остаётся 4.28:1 — ниже порога. */
.field.invalid label{color:var(--stop-text)}
.field-error{margin-top:8px;font-weight:600;font-size:var(--fs-2);color:var(--stop-text);display:none}
.field.invalid .field-error{display:block}
.consent{grid-column:1 / -1;display:flex;align-items:flex-start;gap:12px;margin-top:4px}
.consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--em-text);cursor:pointer}
.consent label{font-weight:500;font-size:var(--fs-3);color:var(--ink-soft);line-height:1.5}
.consent.invalid label{color:var(--stop-text)}
.consent a{text-decoration:underline}
.lead-submit{grid-column:1 / -1;margin-top:8px}
.lead-submit .btn{width:100%;justify-content:center;font-size:var(--fs-5);padding:16px}
.form-success{
  display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--em-wash);border-radius:var(--r-sm);padding:56px 40px;min-height:340px;
}
.form-success.show{display:flex;animation:fadeIn var(--dur-2) var(--ease-out)}
.form-error{margin-top:16px;color:#b3402a;font-weight:600;font-size:var(--fs-4);line-height:1.45}

/* hand-drawn kiwi mascot scenes (404 / thank-you / homepage bands) */
.kiwi-scene{overflow:visible}

/* ---- hero mascot CTA: transparent button over the cloud-bird ---- */
.hero-art-cta{position:absolute;right:-3%;top:2%;width:620px;max-width:62%;aspect-ratio:260/312;
  pointer-events:auto;cursor:pointer;background:transparent;border:0;padding:0;border-radius:var(--r-band);
  display:flex;align-items:flex-end;justify-content:center;outline-offset:8px}
.hero-art-cta::before{content:"";position:absolute;inset:-8% -6%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(190,234,201,.6),rgba(190,234,201,0) 72%);
  opacity:0;transform:scale(.88);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.hero-art-cta:hover::before,.hero-art-cta:focus-visible::before{opacity:1;transform:scale(1)}
.hero-art-hint{display:inline-flex;align-items:center;gap:8px;margin-bottom:7%;
  background:var(--ink);color:#fff;font-weight:700;font-size:var(--fs-4);padding:8px 16px;border-radius:999px;
  box-shadow:0 12px 26px rgba(0,0,0,.2);opacity:0;transform:translateY(7px);pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.hero-art-hint .icon{width:15px;height:15px}
.hero-art-cta:hover .hero-art-hint,.hero-art-cta:focus-visible .hero-art-hint{opacity:1;transform:none}

/* ---- pilot modal ---- */
.pilot-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;
  border:0;padding:clamp(16px,4vw,32px);background:transparent;color:var(--ink)}
.pilot-dialog:not([open]){display:none}
.pilot-dialog[open]{display:grid;place-items:center}
.pilot-dialog::backdrop{background:rgba(20,16,10,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pilot-card{position:relative;width:100%;max-width:440px;max-height:92vh;overflow:auto;
  background:var(--card);border:1px solid rgba(23,23,23,.08);border-radius:var(--r);
  padding:clamp(28px,4vw,40px);box-shadow:0 40px 90px rgba(0,0,0,.30);
  animation:pilotIn var(--dur-3) var(--ease-spring) both}
@keyframes pilotIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.pilot-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;z-index:2;
  border:1px solid rgba(23,23,23,.12);background:#fff;color:var(--ink);display:grid;place-items:center;
  cursor:pointer;transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.pilot-close:hover{background:var(--bg);transform:rotate(90deg)}
.pilot-close .icon{width:16px;height:16px}
.pilot-card h2{font-size:var(--fs-d1);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.pilot-sub{color:var(--ink-soft);font-size:var(--fs-4);line-height:1.5;margin-bottom:20px}
.pilot-form .field{margin-bottom:16px}
.pilot-form>.btn{width:100%;justify-content:center;margin-top:8px}
.pilot-dialog .form-success{min-height:0;padding:44px 32px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){.pilot-card{animation:none}.hero-art-cta::before,.hero-art-hint{transition:none}}
.form-success-ic{position:relative;width:70px;height:70px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-d2);margin-bottom:24px;animation:successPop var(--dur-3) var(--ease-spring) both}
.form-success-ic::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--em-text);opacity:0;animation:successRing 1s var(--ease-out) var(--dur-1) both}
@keyframes successPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes successRing{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.form-success h3{font-weight:800;font-size:var(--fs-7);letter-spacing:-.02em}
.form-success p{margin-top:12px;font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.5;max-width:340px}

/* ── Quiz modal (lead quiz) ───────────────────────────────────────────────── */
.quiz-card{max-width:500px}
.quiz-head{margin-bottom:20px}
.quiz-progress{height:5px;border-radius:999px;background:var(--border,#E7E7E7);overflow:hidden;margin:16px 0 8px}
.quiz-progress span{display:block;height:100%;width:50%;background:var(--em-text);border-radius:999px;transition:width var(--dur-2) var(--ease-out,var(--ease-out))}
.quiz-steplabel{font-size:var(--fs-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted,#6A6A72);margin:0}
.quiz-step{display:none}
.quiz-step.active{display:block;animation:fadeIn var(--dur-2) var(--ease-out)}
.quiz-q{margin-bottom:20px}
.quiz-q-label{font-weight:700;font-size:var(--fs-4);margin:0 0 12px;color:var(--ink)}
.quiz-q-label .req{color:var(--em-text)}
.quiz-q-multi{margin-left:4px;font-weight:500;font-size:var(--fs-3);color:var(--ink-muted,#6A6A72)}
.quiz-opts{display:flex;flex-wrap:wrap;gap:8px}
.quiz-opt{flex:1 1 auto;min-width:62px;text-align:center;padding:12px 16px;border:1.5px solid var(--border,#E2E2E2);border-radius:var(--r-xs);background:#fff;font-family:inherit;font-size:var(--fs-4);font-weight:600;color:var(--ink-soft,#5A5A60);cursor:pointer;transition:border-color var(--dur-0) var(--ease-out),background var(--dur-0) var(--ease-out),color var(--dur-0) var(--ease-out)}
.quiz-opt:hover{border-color:var(--em-text);color:var(--em-text)}
.quiz-opt[aria-pressed="true"]{background:var(--em-text);border-color:var(--em-text);color:#fff}
/* Полупрозрачная рамка давала к белому около 1.5:1 — для нетекстового
   индикатора нужно 3:1, и цвет был единственным носителем ошибки. */
.quiz-q.invalid .quiz-opts{outline:2px solid var(--stop);outline-offset:4px;border-radius:var(--r-xs)}
.quiz-q-error{margin:8px 0 0;font-weight:600;font-size:var(--fs-3);color:var(--stop-text);line-height:1.4}
.quiz-q-error[hidden]{display:none}
.quiz-step .btn{width:100%;justify-content:center;margin-top:8px}
.quiz-actions{display:flex;gap:12px;margin-top:8px}
.quiz-actions .btn{margin-top:0}
.quiz-back{flex:0 0 auto;width:auto!important;background:none;border:1.5px solid var(--border,#E2E2E2);color:var(--ink-soft,#5A5A60)}
.quiz-back:hover{border-color:var(--ink);color:var(--ink)}
.quiz-actions .btn[type=submit]{flex:1}
.quiz-skip{display:block;width:100%;margin-top:12px;font-size:var(--fs-3);color:var(--ink-muted,#6A6A72);text-decoration:underline;cursor:pointer;background:none;border:0;font-family:inherit;text-align:center}
.quiz-skip:hover{color:var(--em-text)}

/* ======================================================
   SECURITY
====================================================== */
.security{
  background:var(--ink);color:#fff;
  border-radius:var(--r);padding:52px 56px;
  display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
}
@media(max-width:760px){.security{grid-template-columns:1fr;padding:40px 32px}}
.security h2{font-weight:800;font-size:var(--fs-d3);letter-spacing:-.03em;line-height:1.18}
.security h2 .mk{color:var(--ink)}
.security-list{display:flex;flex-direction:column;gap:20px}
.sec-item{display:flex;align-items:flex-start;gap:16px}
.sec-item-ic{
  width:44px;height:44px;border-radius:var(--r-xs);
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-6);flex:none;
}
.sec-item-body h4{font-weight:700;font-size:var(--fs-5)}
.sec-item-body p{margin-top:4px;font-size:var(--fs-4);color:var(--on-dark-muted);font-weight:500;line-height:1.4}

/* ======================================================
   FAQ
====================================================== */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--card);border-radius:var(--r-xs);overflow:hidden}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:24px 28px;font-weight:700;font-size:var(--fs-5);text-align:left;
  cursor:pointer;background:none;border:none;color:var(--ink);gap:20px;
}
.faq-q:hover{background:rgba(23,23,23,.03)}
.faq-ic{
  width:28px;height:28px;border-radius:50%;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-size:var(--fs-5);font-weight:400;transition:transform var(--dur-1) var(--ease-out);
}
/* visibility:hidden обязателен. max-height:0 с overflow:hidden прячет ответ
   только визуально: кнопка объявляет aria-expanded="false", а содержимое
   остаётся в дереве доступности, и скринридер читает подряд все ответы FAQ
   как обычный текст страницы. Задержка в transition держит ответ видимым всё
   время сворачивания, иначе он исчезал бы рывком в начале анимации. */
.faq-a{
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height var(--dur-2) var(--ease-out),padding var(--dur-1) var(--ease-out),visibility 0s linear var(--dur-2);
  font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.6;
  padding:0 28px;
}
.faq-item.open .faq-a{max-height:340px;padding:0 28px 24px;visibility:visible;transition:max-height var(--dur-2) var(--ease-out),padding var(--dur-1) var(--ease-out),visibility 0s linear}
.faq-item.open .faq-ic{transform:rotate(45deg)}
/* Общие страницы (25.09.2026, motion-критик): ответ раскрывается сеткой
   0fr → 1fr одной длительностью --dur-2. Прежде max-height (320 мс) и
   padding (180 мс) шли двумя тактами. Нижний отступ — ::after внутри
   ответа: padding у свёрнутой строки не сжимается и торчал бы из-под неё.
   Темы (body.theme-*) держат свой аккордеон, toggleFaq считает им высоту. */
body:not([class*=" theme-"]) .faq-item{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows var(--dur-2) var(--ease-out)}
body:not([class*=" theme-"]) .faq-item.open{grid-template-rows:auto 1fr}
body:not([class*=" theme-"]) .faq-a,body:not([class*=" theme-"]) .faq-item.open .faq-a{min-height:0;max-height:none;padding-top:0;padding-bottom:0;transition:visibility 0s linear var(--dur-2)}
body:not([class*=" theme-"]) .faq-item.open .faq-a{transition:visibility 0s linear}
body:not([class*=" theme-"]) .faq-a::after{content:"";display:block;height:24px}
/* Без JS аккордеон не открыть (кнопка зовёт toggleFaq из script.js), поэтому
   ответы показываем раскрытыми, а плюс прячем — он ничего бы не делал. Прятать
   ответы — работа скрипта: свёрнутое состояние включается только там, где
   скрипты выполняются. !important — темы задают отступы .faq-a своими
   селекторами (body.theme-x .faq-a). */
@media (scripting:none){
  .faq-item{grid-template-rows:auto 1fr!important}
  .faq-item .faq-a::after{content:none!important}
  .faq-item .faq-a{max-height:none!important;visibility:visible!important;padding-bottom:24px!important}
  .faq-item .faq-ic{display:none!important}
  .faq-item .faq-q{cursor:default}
}

/* ======================================================
   INTEGRATIONS
====================================================== */
.integrations{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
/* Число колонок теперь определяет minmax, отдельное правило не нужно. */
.int-card{
  background:var(--card);border-radius:var(--r-xs);
  padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-weight:700;font-size:var(--fs-3);text-align:center;color:var(--ink-soft);
  transition:transform var(--dur-0) var(--ease-out);
}
.int-card:hover{transform:translateY(-3px)}
.int-ic{font-size:var(--fs-d1)}

/* ======================================================
   CTA BIG
====================================================== */
.cta-big{
  background:var(--ink);color:#fff;border-radius:var(--r);
  padding:72px 64px;
  display:grid;grid-template-columns:1fr auto;gap:52px;align-items:center;
}
/* Две колонки перестают помещаться задолго до 760px: справа стоит кнопка
   шириной в свой текст, и на 768 она уезжала за край плашки, где её срезал
   overflow:hidden. 20.09.2026 */
@media(max-width:900px){.cta-big{grid-template-columns:1fr;padding:48px 32px}}
/* Allow marker highlights to wrap on small screens (prevents horizontal overflow on long phrases) */
@media(max-width:760px){.mk{white-space:normal}}
.cta-big h2{font-weight:800;font-size:var(--fs-d4);letter-spacing:-.03em;line-height:1.18}
/* Что будет после заявки — показываем ДО заявки. Раньше эти три шага жили
   только на /thank-you/: человек узнавал порядок действий, уже отправив
   свои данные, то есть страх снимался после того, как он рискнул. */
.cta-steps{list-style:none;counter-reset:cs;margin:28px 0 0;padding:0;display:grid;gap:12px;max-width:62ch}
.cta-steps li{counter-increment:cs;position:relative;padding-left:36px;font-size:var(--fs-4);line-height:1.55;color:var(--on-dark-soft)}
.cta-steps li::before{content:counter(cs,decimal-leading-zero);position:absolute;left:0;top:2px;font:700 var(--fs-2)/1.6 var(--mono);color:var(--em-wash)}
.cta-steps b{color:#fff;font-weight:700}
@media(max-width:760px){.cta-steps{margin-top:24px;gap:12px}.cta-steps li{font-size:var(--fs-4);padding-left:32px}}
.cta-big h2 .mk{color:var(--ink)}
/* Выделение в заголовке CTA переносится на любой ширине. С nowrap .mk был
   неразрывным куском в 739px, колонка 1fr не могла сжаться ниже него, и
   кнопку срезало вплоть до ~1090px — то есть и выше брейкпоинта в 900px.
   На .ed у .mk нет ни фона, ни отступов (строка 2544), так что неразрывность
   ничего не давала визуально. Так же уже сделано для .page-hero h1 и
   .cta-live. 20.09.2026 */
.cta-big h2 .mk{white-space:normal}
.cta-big-sub{margin-top:16px;font-size:var(--fs-5);font-weight:500;color:var(--on-dark-soft);line-height:1.5}
.cta-big-actions{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.cta-contact-line{display:flex;align-items:center;gap:12px;font-weight:600;font-size:var(--fs-4);color:var(--on-dark)}
.cta-contact-line:hover{color:#fff}
.cta-note{margin-top:12px;font-size:var(--fs-3);color:var(--on-dark-muted);font-weight:500}

/* ======================================================
   FOOTER
====================================================== */
.footer{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding:52px 20px 32px}
@media(max-width:860px){.footer{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer{grid-template-columns:1fr}}
.footer-brand .f-name{font-weight:800;font-size:var(--fs-6);letter-spacing:-.03em;margin-top:12px}
.footer-brand p{margin-top:12px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.5;max-width:240px}
.footer-social{margin-top:20px;display:flex;gap:12px}
.footer-social a{
  width:40px;height:40px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-5);
  transition:transform var(--dur-0) var(--ease-out),background var(--dur-1) var(--ease-out);
}
.footer-social a:hover{transform:translateY(-3px);background:var(--em-wash)}
.arda-badge{display:inline-block;margin-top:28px;opacity:.85;transition:opacity var(--dur-1) var(--ease-out)}
.arda-badge:hover{opacity:1}
.arda-badge img{display:block;height:36px;width:auto;border-radius:var(--r-3xs)}
.footer-col h4{font-weight:800;font-size:var(--fs-4);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-muted)}
.footer-col ul{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.footer-col ul li a{font-weight:600;font-size:var(--fs-4);color:var(--ink-soft);transition:color var(--dur-1) var(--ease-out)}
.footer-col ul li a:hover{color:var(--ink)}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 20px 4px;border-top:1px solid rgba(23,23,23,.1);
  flex-wrap:wrap;gap:16px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft)
}
.footer-badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{background:var(--card);padding:8px 16px;border-radius:999px;font-weight:600;font-size:var(--fs-3);color:var(--ink-soft)}

/* ======================================================
   BACK TO TOP + STICKY MOBILE CTA
====================================================== */
.to-top{
  position:fixed;right:22px;bottom:96px;z-index:50;
  width:50px;height:50px;border-radius:50%;background:var(--ink);color:#fff;border:none;cursor:pointer;
  font-size:var(--fs-6);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),visibility var(--dur-1) linear;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:54;display:flex;
  background:rgba(23,23,23,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:12px 16px;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(100%);visibility:hidden;
  /* visibility переключается с задержкой на время уезда: скрытая панель не
     попадает в порядок Tab и в дерево доступности, но уезжает плавно. */
  transition:transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2);
}
.sticky-cta.show{transform:translateY(0);visibility:visible;transition:transform var(--dur-2) var(--ease-out),visibility 0s linear}
@media(prefers-reduced-motion:reduce){.sticky-cta,.sticky-cta.show{transition:none}}
/* Раньше панель жила только на мобильном (display:none выше 900px), и на
   десктопе между hero-кнопкой и финальным CTA не оставалось ни одной точки
   действия — на Эхолитиксе это 20 секций подряд. Панель стала общей; на
   широком экране её содержимое выровнено по сетке контента (--wrap 1320),
   справа — зазор под пузырь чат-виджета, как на мобильном. */
@media(min-width:901px){
  .sticky-cta{padding-inline:max(26px,calc((100vw - 1320px)/2)) 104px}
}
.sticky-cta-text{color:#fff;font-weight:700;font-size:var(--fs-4);line-height:1.25;min-width:0}
.sticky-cta-text span{display:block;font-weight:500;font-size:var(--fs-2);color:var(--on-dark-muted)}
.sticky-cta .btn{padding:12px 20px;font-size:var(--fs-4);flex:none}
/* На узких экранах панель делит ширину с кнопкой и пузырём чат-виджета:
   текст ужимаем и не даём ему разваливаться на четыре строки. */
@media(max-width:480px){
  .sticky-cta{padding:12px 80px 12px 16px;gap:12px}
  .sticky-cta-text{font-size:var(--fs-3)}
  .sticky-cta-text span{font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-cta .btn{padding:12px 16px;font-size:var(--fs-4)}
}
/* 375–400px: панель делит ширину с кнопкой и пузырём виджета, на тексте
   остаётся ~130px. Две строки там не помещались и резались многоточием —
   оставляем одну, главную, и разрешаем ей перенос в две строки вместо обрезки.
   Темам: первая строка панели на телефоне — до ~22 знаков («6 ₽ за контакт»). */
@media(max-width:400px){
  .sticky-cta-text span{display:none}
  .sticky-cta-text{font-size:var(--fs-3);line-height:1.2}
  /* Стрелка на кнопке — ~20px, которых не хватало тексту: без неё подпись
     «Запуск за 3 дня» встаёт в две строки, а не в три. */
  .sticky-cta .btn{padding:12px 16px}
  .sticky-cta .btn.arrow-ic::after{content:none}
}
@media(max-width:900px){
  /* Правый отступ — под пузырь чат-виджета (#w404-host, сторонний shadow DOM
     в правом нижнем углу). Без него правая треть кнопки уходила под виджет. */
  .sticky-cta{padding-right:80px}
  /* Cookie-плашка (z-index 1200) физически накрывала липкую кнопку (z-index 54)
     и жила там до выбора пользователя — то есть перекрывала единственный
     мобильный призыв к действию. Поднимаем её над панелью. */
  .cookie-bar{bottom:84px}
  .to-top{bottom:150px}
}

/* ======================================================
   PAGE HERO (inner pages)
====================================================== */
.page-hero{
  position:relative;overflow:hidden;
  background:var(--em-wash);border-radius:var(--r);
  padding:56px 60px 60px;margin-top:20px;
}
.page-hero.dark{background:var(--ink);color:#fff}
.page-hero-blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;z-index:0;pointer-events:none}
.page-hero-blob.p1{width:300px;height:300px;background:radial-gradient(circle at 30% 30%,#E3F5ED,transparent 70%);right:6%;top:-70px;animation:floatA 14s var(--ease-smooth) infinite}
.page-hero-blob.p2{width:260px;height:260px;background:radial-gradient(circle at 30% 30%,#C7EAD9,transparent 70%);right:22%;bottom:-90px;animation:floatB 18s var(--ease-smooth) infinite}
.page-hero>*{position:relative;z-index:2}
.page-hero>.page-hero-blob{position:absolute}
.page-hero h1{font-weight:800;font-size:var(--fs-d4);line-height:1.16;letter-spacing:-.03em;max-width:840px}
.page-hero .ph-sub{margin-top:16px;font-size:var(--fs-lead-lg);font-weight:500;color:var(--ink-soft);line-height:1.45;max-width:800px}
.page-hero.dark .ph-sub{color:var(--on-dark-soft)}
.ph-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.ph-chip{
  font-weight:700;font-size:var(--fs-2);letter-spacing:.04em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;background:rgba(23,23,23,.08);color:var(--ink-soft);
}
.page-hero.dark .ph-chip{background:rgba(255,255,255,.1);color:var(--on-dark)}
.ph-chip-accent{background:var(--em-wash);color:var(--em-text);border:1px solid rgba(11,138,91,.22)}
.ph-actions{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ph-price{
  display:inline-flex;flex-direction:column;background:var(--ink);color:#fff;
  border-radius:var(--r-sm);padding:16px 24px;
}
.page-hero.dark .ph-price{background:var(--em-wash);color:var(--ink)}
.ph-price b{font-weight:800;font-size:var(--fs-7);letter-spacing:-.03em;line-height:1}
.ph-price span{margin-top:4px;font-weight:600;font-size:var(--fs-3);opacity:.7}
.ph-metrics{margin-top:40px;display:flex;gap:36px;flex-wrap:wrap}
.ph-metric-num{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.03em;line-height:1}
.ph-metric-lbl{margin-top:8px;font-weight:600;font-size:var(--fs-3);color:var(--ink-soft);max-width:150px;line-height:1.35}
.page-hero.dark .ph-metric-lbl{color:var(--on-dark-muted)}
@media(max-width:760px){.page-hero{padding:40px 28px 44px}.page-hero-blob{display:none}}

/* ======================================================
   BREADCRUMBS
====================================================== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px 0;font-weight:600;font-size:var(--fs-3);color:var(--ink-muted)}
.crumbs a{transition:color var(--dur-1) var(--ease-out)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink-soft)}

/* ======================================================
   PAINS — problem → solution
====================================================== */
.pains{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.pains{grid-template-columns:1fr}}
.pain{background:var(--card);border-radius:var(--r-sm);padding:32px 32px;position:relative;overflow:hidden}
.pain-num{font-weight:800;font-size:var(--fs-d4);letter-spacing:-.05em;line-height:.8;color:rgba(23,23,23,.07);position:absolute;right:22px;top:18px}
.pain h3{font-weight:800;font-size:var(--fs-6);letter-spacing:-.02em;position:relative}
.pain .pain-prob{margin-top:12px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.5}
.pain .pain-sol{margin-top:16px;display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:var(--fs-4);line-height:1.5}
.pain .pain-sol::before{content:"→";font-weight:800;color:var(--em-text);flex:none}

/* ======================================================
   FEATURE ROWS — alternating text + mock
====================================================== */
.feature-row{
  background:var(--card);border-radius:var(--r);
  padding:48px 52px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:16px;
}
.feature-row.flip .fr-text{order:2}
@media(max-width:880px){.feature-row{grid-template-columns:1fr;padding:36px 28px;gap:32px}.feature-row.flip .fr-text{order:0}}
.fr-text h3{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.025em;line-height:1.18}
.fr-text .fr-lead{margin-top:16px;font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.55}
.fr-list{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.fr-li{display:flex;gap:12px;align-items:flex-start}
.fr-li-ic{width:30px;height:30px;border-radius:var(--r-2xs);background:var(--em-wash);display:flex;align-items:center;justify-content:center;font-size:var(--fs-4);flex:none}
.fr-li h4{font-weight:700;font-size:var(--fs-4)}
.fr-li p{margin-top:2px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.45}
.fr-visual{background:var(--bg);border-radius:var(--r-sm);padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.08);min-height:220px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.fr-bubble{background:#fff;border-radius:var(--r-xs);padding:16px 16px;font-weight:600;font-size:var(--fs-4);line-height:1.45;max-width:84%}
.fr-bubble.me{background:var(--em-wash);align-self:flex-end}
.fr-bubble .who{display:block;font-weight:700;font-size:var(--fs-1);color:var(--ink-muted);margin-bottom:4px}

/* ======================================================
   INDUSTRY CHIPS
====================================================== */
.industry-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.industry-chips{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.industry-chips{grid-template-columns:1fr}}
.ind-chip{background:var(--card);border-radius:var(--r-sm);padding:28px 28px;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out);display:flex;flex-direction:column}
.ind-chip:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.08)}
.ind-chip-ic{font-size:var(--fs-d1);margin-bottom:16px}
.ind-chip h3{font-weight:800;font-size:var(--fs-5);letter-spacing:-.02em}
.ind-chip p{margin-top:8px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.5}
.ind-chip .card-link{margin-top:16px}

/* ======================================================
   TEAM
====================================================== */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:880px){.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.team-grid{grid-template-columns:1fr}}
.member{background:var(--card);border-radius:var(--r-sm);padding:28px 28px}
.member-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-7);color:#fff;margin-bottom:16px}
.member h3{font-weight:800;font-size:var(--fs-5);letter-spacing:-.02em}
.member .m-role{margin-top:4px;font-weight:600;font-size:var(--fs-4);color:var(--em-text)}
.member p{margin-top:12px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.5}

/* ── Team photo cards ─────────────────────────────────────────────────────── */
.team-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px;margin:0 auto}
.team-photo-grid--3{grid-template-columns:repeat(3,1fr);max-width:1100px}
.team-photo-grid--4{grid-template-columns:repeat(4,1fr);max-width:1180px}
@media(max-width:980px){.team-photo-grid--4{grid-template-columns:repeat(2,1fr);max-width:720px}}
@media(max-width:820px){.team-photo-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.team-photo-grid,.team-photo-grid--3,.team-photo-grid--4{grid-template-columns:1fr}}
.member-photo-card{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--border,#ECECEC);box-shadow:0 8px 32px -12px rgba(0,0,0,.10);transition:box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.member-photo-card:hover{box-shadow:0 20px 48px -16px rgba(11,138,91,.18);transform:translateY(-3px)}
.mpc-photo{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--em-text)}
.mpc-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform var(--dur-3) var(--ease-out);display:block}
.member-photo-card:hover .mpc-photo img{transform:scale(1.04)}
.mpc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,138,91,.55) 0%,transparent 50%);opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.member-photo-card:hover .mpc-overlay{opacity:1}
.mpc-skills{position:absolute;bottom:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap;opacity:0;transform:translateY(6px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.member-photo-card:hover .mpc-skills{opacity:1;transform:translateY(0)}
.mpc-skills span{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:999px;padding:2px 12px;font-size:var(--fs-2);font-weight:700;color:var(--em-text);letter-spacing:.02em}
.mpc-body{padding:24px 24px 28px}
.mpc-body h3{font-weight:800;font-size:var(--fs-6);letter-spacing:-.025em;color:var(--ink)}
.mpc-body .m-role{margin-top:4px;font-weight:700;font-size:var(--fs-3);text-transform:uppercase;letter-spacing:.08em;color:var(--em-text)}
.mpc-body p{margin-top:12px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.58}
.mpc-body .m-link{display:inline-block;margin-top:12px;font-weight:700;font-size:var(--fs-4);color:var(--em-text)}
.mpc-photo--placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(145deg,#E3F5ED 0%,#E3F5ED 100%);gap:12px}
.mpc-photo--placeholder .ph-icon{width:64px;height:64px;border-radius:50%;background:rgba(11,138,91,.12);display:flex;align-items:center;justify-content:center}
.mpc-photo--placeholder .ph-icon svg{width:32px;height:32px;stroke:var(--em-text);fill:none;stroke-width:1.5}
.mpc-photo--placeholder .ph-label{font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--em-text);opacity:.6}
.mpc-photo--placeholder .mpc-skills{position:static;opacity:1;transform:none;padding:0 16px;gap:8px;flex-wrap:wrap;justify-content:center}

/* Team role list (text-only, below photo grid) */
.team-role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
@media(max-width:980px){.team-role-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team-role-grid{grid-template-columns:1fr}}
.role-card{background:var(--card);border:1px solid var(--border,#ECECEC);border-radius:var(--r-sm);padding:20px;display:flex;flex-direction:column;gap:12px}
.rc-head{display:flex;align-items:flex-start;gap:12px}
.rc-icon{width:40px;height:40px;flex-shrink:0;padding:8px;border-radius:var(--r-xs);background:var(--em-wash);color:var(--ink);--ic-ac:var(--em-text);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rc-title{font-weight:800;font-size:var(--fs-4);letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.rc-dept{margin-top:4px;font-size:var(--fs-2);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--em-text)}
.rc-skills{display:flex;flex-wrap:wrap;gap:4px}
.rc-skills span{background:rgba(11,138,91,.08);color:var(--em-text);border-radius:999px;padding:2px 8px;font-size:var(--fs-1);font-weight:700;letter-spacing:.02em}
.rc-desc{font-size:var(--fs-3);font-weight:500;color:var(--ink-soft);line-height:1.56;margin:0}

/* ======================================================
   CONTACT CARDS
====================================================== */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.contact-cards{grid-template-columns:1fr}}
.contact-card{background:var(--card);border-radius:var(--r-sm);padding:32px 32px;display:flex;flex-direction:column}
.contact-card.accent{background:var(--em-wash)}
.contact-card-ic{font-size:var(--fs-d1);margin-bottom:16px}
.contact-card h3{font-weight:800;font-size:var(--fs-6);letter-spacing:-.02em}
.contact-card p{margin-top:8px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.5}
.contact-card .cc-val{margin-top:auto;padding-top:20px;font-weight:800;font-size:var(--fs-5);letter-spacing:-.02em}
.contact-card .cc-val a{transition:opacity var(--dur-1) var(--ease-out)}
.contact-card .cc-val a:hover{opacity:.7}

/* ======================================================
   LEGAL (privacy / terms)
====================================================== */
.legal{background:var(--card);border-radius:var(--r);padding:48px 56px;max-width:880px;margin:0 auto}
@media(max-width:760px){.legal{padding:32px 28px}}
.legal h2{font-weight:800;font-size:var(--fs-d1);letter-spacing:-.02em;margin:36px 0 12px;line-height:1.25}
.legal h2:first-child{margin-top:0}
.legal h3{font-weight:800;font-size:var(--fs-5);margin:24px 0 8px}
.legal p{font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.65;margin-bottom:12px}
.legal ul{margin:0 0 16px 4px;display:flex;flex-direction:column;gap:8px}
.legal ul li{font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.55;padding-left:20px;position:relative}
.legal ul li::before{content:"—";position:absolute;left:0;color:var(--ink-muted)}
.legal .legal-meta{font-weight:600;font-size:var(--fs-4);color:var(--ink-muted);margin-bottom:28px}

/* ======================================================
   SCROLL REVEAL
====================================================== */
/* Появление при прокрутке. Блок виден по умолчанию: раньше .reveal был
   скрыт стилями до выполнения script.js, и первый экран — шапка страницы,
   крошки, заголовок статьи — ждал весь JS (на 4G до 5 секунд белого экрана).
   Теперь скрипт сам прячет только то, что при загрузке ниже экрана
   (.rv-wait), и снимает класс, когда блок доезжает до поля зрения. */
/* 25.09.2026 — один характер на весь сайт (motion-критик): сдвиг 16px без
   масштаба, --dur-3, --ease-out. Это анимация, а не переход (transition), и свой
   transition карточки (ховер) больше не перебивает появление, а сдвиг идёт
   свойством translate и не спорит с transform ховера. Задержку лесенки
   внутри группы ставит initReveal (style.animationDelay). GSAP-путь снят. */
@keyframes rvIn{from{opacity:0;translate:0 16px}}
.reveal.rv-wait{opacity:0;translate:0 16px}
.reveal.rv-in{animation:rvIn var(--dur-3) var(--ease-out) backwards}
/* 26.09.2026 — фоновые петли вне экрана и в скрытой вкладке стоят
   (motion-критик B). Класс ставит initLoops в script.js контейнеру с
   data-loop, [data-nexus] и .page-hero. Пауза, а не animation:none: петля
   продолжается с того же кадра, без скачка. */
.loop-off,.loop-off::before,.loop-off::after,.loop-off *,.loop-off *::before,.loop-off *::after{animation-play-state:paused!important}

/* ======================================================
   REDUCED MOTION
====================================================== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  .hero-blob,.hero-seesaw{animation:none}
}

/* ======================================================
   BLOG — LISTING
====================================================== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:980px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-sm);padding:28px 28px 24px;height:100%;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.post-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.08)}
.post-card.feature{grid-column:span 2;background:var(--em-wash)}
@media(max-width:640px){.post-card.feature{grid-column:span 1}}
.post-cat{font-weight:700;font-size:var(--fs-2);letter-spacing:.04em;text-transform:uppercase;color:var(--em-text)}
.post-card h2,.post-card h3{margin-top:12px;font-weight:800;font-size:var(--fs-6);letter-spacing:-.02em;line-height:1.26;color:var(--ink)}
.post-card.feature h2,.post-card.feature h3{font-size:var(--fs-d1)}
.post-excerpt{margin-top:12px;font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.55;flex:1}
.post-meta{margin-top:20px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-3);color:var(--ink-muted)}
.post-meta .sep{opacity:.5}
.post-more{margin-top:16px;font-weight:700;font-size:var(--fs-4);color:var(--ink)}

/* ======================================================
   BLOG — ARTICLE
====================================================== */
.article-head{max-width:1040px;margin:0 auto;padding:0 8px}
.article-cat{font-weight:700;font-size:var(--fs-2);letter-spacing:.04em;text-transform:uppercase;color:var(--em-text)}
.article-head h1{font-weight:800;font-size:var(--fs-d3);letter-spacing:-.03em;line-height:1.14;margin-top:16px}
.article-meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-weight:600;font-size:var(--fs-4);color:var(--ink-muted)}
.article-meta .sep{opacity:.5}
/* именной автор ведёт на свою карточку в /about/ — сигнал авторства для E-E-A-T */
.article-author{color:inherit;text-decoration:none;border-bottom:1px solid rgba(138,138,144,.4);transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.article-author:hover{color:var(--em-text);border-bottom-color:#0B8A5B}
/* переход по якорю автора не должен прятать карточку под липкой шапкой */
.member-photo-card[id]{scroll-margin-top:96px}
.article{background:var(--card);border-radius:var(--r);padding:56px 80px 52px;max-width:1040px;margin:20px auto 0}
@media(max-width:760px){.article{padding:32px 24px}}
.article p.article-lead{font-weight:600;font-size:var(--fs-6);color:var(--ink);line-height:1.5;margin:0 0 20px}
.article h2{font-weight:800;font-size:var(--fs-d1);letter-spacing:-.02em;line-height:1.22;margin:40px 0 16px}
.article h3{font-weight:800;font-size:var(--fs-6);letter-spacing:-.01em;margin:28px 0 12px}
/* Кириллица в Manrope шире знака «0», по которому считается ch: 62ch
   даёт около 75 знаков — верх нормы. Ограничиваем абзацы и списки, а не
   карточку, иначе сузятся таблицы и врезки. */
.article p,.article li{max-width:62ch}
.article p{font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.7;margin-bottom:16px}
.article strong{color:var(--ink);font-weight:700}
.article a{color:var(--em-text);text-decoration:underline;text-underline-offset:2px}
.article a:hover{opacity:.8}
.article ul,.article ol{margin:0 0 20px 2px;display:flex;flex-direction:column;gap:8px}
.article ul li{font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.6;padding-left:24px;position:relative}
.article ul li::before{content:"";position:absolute;left:3px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--em-wash)}
.article ol{counter-reset:ol}
.article ol li{counter-increment:ol;font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.6;padding-left:40px;position:relative;min-height:28px;display:flex;align-items:center}
.article ol li::before{content:counter(ol);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:var(--fs-3);display:flex;align-items:center;justify-content:center}
/* Врезка — обычный абзац с подписью. Цветной плашки с жирной полосой слева нет и не будет:
   это узнаваемый шаблон сгенерированных страниц (решение владельца 14.09.2026, check-left-accent.mjs). */
.callout{margin:8px 0 24px}
/* Поясняющий абзац после сетки карточек в секции — обычный текст с воздухом сверху, без плашки. */
.sec-after{margin-top:32px;max-width:760px;color:var(--ink-soft);font-size:var(--fs-5);line-height:1.6}
.sec-after b{color:var(--ink)}
/* Код во врезках статей (примеры robots.txt, llms.txt, команды) — длинная строка без пробелов не должна раздвигать страницу на телефоне. */
.callout code{overflow-wrap:anywhere}
.callout p{margin:0;font-weight:500;font-size:var(--fs-5);color:var(--ink);line-height:1.6}
.callout .callout-l{display:block;font-weight:800;font-size:var(--fs-2);letter-spacing:.04em;text-transform:uppercase;color:var(--em-text);margin-bottom:8px}
.table-wrap{overflow-x:auto;margin:8px 0 24px;border-radius:var(--r-xs)}
.article-table{width:100%;border-collapse:collapse;font-size:var(--fs-4);min-width:460px}
.article-table th,.article-table td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(23,23,23,.1)}
.article-table thead th{font-weight:800;color:var(--ink);background:var(--card2)}
.article-table td:first-child,.article-table th:first-child{font-weight:700;color:var(--ink)}
.article-table tbody td{font-weight:500;color:var(--ink-soft)}
.article-table td.hl{background:var(--em-wash);color:var(--ink);font-weight:800}
.article-foot{max-width:1040px;margin:24px auto 0;display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:var(--fs-4);padding:0 8px}
.article-foot a{color:var(--ink);opacity:.78;transition:opacity var(--dur-1) var(--ease-out)}
.article-foot a:hover{opacity:1}

/* ── Одна ось страницы статьи ──────────────────────────────────────
   Было четыре разных левых края, замерено на 1440px: крошки 88,
   заголовок 200, текст 289, секции ниже 88. Текст утапливала карточка,
   которой не видно: --card и --bg оба #FFFFFF, ни рамки, ни тени — её
   80px горизонтального padding'а ничем не объяснялись и читались как
   сбитая вёрстка.

   :has(.article-head) выбирает ровно те 142 страницы, где есть статья:
   139 в блоге и три сравнения. Страниц с .article, но без .article-head,
   нет — проверено, поэтому класс в разметку добавлять не пришлось.

   880px, а не ширина строки: .blog-grid в «Читайте также» жёстко
   трёхколоночная, её брейкпоинты считаются по окну, а не по контейнеру.
   Уже 880 карточки схлопнутся до 240px, окно при этом широкое. */
body:has(.article-head) main > *{max-width:880px;margin-left:auto;margin-right:auto}
body:has(.article-head) .crumbs{padding-left:0;padding-right:0}
/* Крошки и кикер стояли в 2px друг от друга. Пока они были на разных
   левых краях, это читалось как два отдельных элемента; на одной оси
   они слиплись в одну строку мелкого текста. */
body:has(.article-head) .article-head{padding:0;margin-top:28px}
body:has(.article-head) .article-foot{padding:0}
/* Невидимую карточку заменяет линия: она отделяет шапку статьи от текста
   явно, вместо отступа, который не на что отнести. */
body:has(.article-head) .article{background:none;border-radius:0;padding:36px 0 0;margin-top:36px;border-top:1px solid var(--line)}
/* На узком экране горизонтальные поля даёт .wrap, свои не нужны. */
@media(max-width:760px){body:has(.article-head) .article{padding:28px 0 0;margin-top:28px}}
@media(max-width:760px){.article-table th,.article-table td{padding:12px 12px;font-size:var(--fs-4)}}

/* ======================================================
   GLOSSARY
====================================================== */
.gloss-index{display:flex;flex-wrap:wrap;gap:8px;margin:0 16px 8px}
.gloss-index a{font-weight:700;font-size:var(--fs-4);padding:8px 16px;border-radius:999px;background:var(--card);color:var(--ink);transition:background var(--dur-1) var(--ease-out)}
.gloss-index a:hover{background:var(--em-wash)}
.gloss-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.gloss-grid{grid-template-columns:1fr}}
.gloss-term{background:var(--card);border-radius:var(--r-sm);padding:24px 28px;scroll-margin-top:96px}
.gloss-term h3{font-weight:800;font-size:var(--fs-6);letter-spacing:-.02em;margin-bottom:8px}
.gloss-term p{font-weight:500;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.62}
.gloss-term a{color:var(--em-text);text-decoration:underline;text-underline-offset:2px}
.gloss-more{display:inline-block;margin-top:12px;font-weight:700;font-size:var(--fs-4);color:var(--em-text)}

/* ======================================================
   ICON SYSTEM (line icons via /assets/releases/20261007-cifra-articles-1/icons.svg sprite)
====================================================== */
.icon{width:1em;height:1em;display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}
.icon-sm{width:16px;height:16px}
.icon-md{width:20px;height:20px}
.icon-lg{width:26px;height:26px}
/* containers that hold a colored bg + line icon */
.adv-ic .icon,.ind-chip-ic .icon,.step-icon .icon,.contact-card-ic .icon,.int-ic .icon,.fr-li-ic .icon,.uc-icon .icon{width:1em;height:1em;stroke-width:1.7;color:var(--ink)}
.footer-social .icon{width:18px;height:18px;stroke-width:1.8}
.to-top .icon{width:20px;height:20px;color:#fff;stroke-width:2}
.caret .icon{width:11px;height:11px;stroke-width:2.2}
.faq-ic .icon{width:17px;height:17px;stroke-width:2}
.crumbs .sep .icon{width:13px;height:13px;opacity:.55}
.btn .icon{width:1.05em;height:1.05em;stroke-width:2}
/* masked check for CSS-generated lists */
.plan-feat::before,.lead-perk::before{
  content:"";width:16px;height:16px;flex:none;margin-top:1px;background:var(--em-text);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5 10-11"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5 10-11"/></svg>') center/contain no-repeat;
}

/* ======================================================
   MASCOT (bird) MOTION
====================================================== */
.bird-svg{overflow:visible}
.bird-glide{animation:birdGlide 7s var(--ease-smooth) infinite;transform-origin:center}
.bird-wing{transform-box:fill-box;transform-origin:60% 80%;animation:wingFlap 3.2s var(--ease-smooth) infinite}
@keyframes birdGlide{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-16px) rotate(1.2deg)}}
@keyframes wingFlap{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
/* draw-on: JS sets d-array/offset per path; class triggers transition */
.bird-draw .bird-stroke{stroke-dashoffset:var(--dash,800)}
.bird-draw.is-drawn .bird-stroke{stroke-dashoffset:0}
.bird-stroke{transition:stroke-dashoffset 1.5s var(--ease-smooth)}
.bird-peek{animation:birdPeek 6s var(--ease-smooth) infinite}
@keyframes birdPeek{0%,100%{transform:translateY(6px) rotate(2deg)}50%{transform:translateY(-4px) rotate(-2deg)}}
.bird-cheer .bird-wing{animation:wingCheer 1.6s var(--ease-smooth) infinite}
@keyframes wingCheer{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-22deg)}}
.footer-bird{display:block;width:54px;height:auto;opacity:.5;color:var(--ink)}
.bird-link{opacity:.4}
.bird-nodes circle{opacity:0;transition:opacity var(--dur-3) var(--ease-out) var(--dur-2)}
.bird-draw.is-drawn .bird-nodes circle{opacity:1}

/* ======================================================
   GRADIENT MESH (hero background)
====================================================== */
.hero-mesh,.page-hero-mesh{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;filter:blur(46px);opacity:.55;
  background:
    radial-gradient(40% 45% at 22% 30%,rgba(190,234,201,.9),transparent 70%),
    radial-gradient(38% 42% at 78% 24%,rgba(252,240,154,.85),transparent 70%),
    radial-gradient(42% 48% at 68% 78%,rgba(169,201,238,.8),transparent 70%),
    radial-gradient(30% 36% at 30% 80%,rgba(244,122,45,.4),transparent 70%);
  background-size:200% 200%;animation:meshShift 22s var(--ease-smooth) infinite}
@keyframes meshShift{0%,100%{background-position:0% 0%,100% 0%,80% 100%,0% 100%}50%{background-position:30% 20%,70% 30%,50% 70%,20% 60%}}

/* ======================================================
   PRODUCT MOCKUP FRAMES
====================================================== */
.frame{position:relative;background:#fff;border-radius:var(--r-sm);border:1px solid rgba(23,23,23,.08);
  box-shadow:0 30px 60px -22px rgba(23,23,23,.30),0 8px 20px -10px rgba(23,23,23,.18);overflow:hidden;width:100%}
.frame-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--card2);border-bottom:1px solid rgba(23,23,23,.07)}
.frame-dot{width:10px;height:10px;border-radius:50%;background:rgba(23,23,23,.18)}
.frame-dot.r{background:#F47A2D}.frame-dot.y{background:#E9C44A}.frame-dot.g{background:#5BB97E}
.frame-title{margin-left:8px;font-weight:700;font-size:var(--fs-2);color:var(--ink-muted);letter-spacing:.02em}
.frame-body{padding:20px 20px 20px}
.frame-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.frame-score{font-weight:800;font-size:var(--fs-d1);letter-spacing:-.03em;color:var(--ink)}
.frame-score small{font-size:var(--fs-4);color:var(--ink-muted);font-weight:700}
.frame-chip{font-weight:700;font-size:var(--fs-2);padding:4px 12px;border-radius:999px;background:var(--em-wash);color:var(--em-text);display:inline-flex;align-items:center;gap:4px}
/* waveform */
.fr-wave{display:flex;align-items:center;gap:2px;height:40px;margin:8px 0 16px}
.fr-wave i{display:block;width:4px;border-radius:var(--r-3xs);background:linear-gradient(var(--em-wash),var(--em-text));height:30%;animation:waveBar 1.1s var(--ease-smooth) infinite}
.fr-wave i:nth-child(odd){background:linear-gradient(var(--em-wash),var(--em-text))}
@keyframes waveBar{0%,100%{height:18%}50%{height:95%}}
/* transcript lines */
.fr-lines{display:flex;flex-direction:column;gap:8px}
.fr-line{display:flex;align-items:flex-start;gap:8px;opacity:0;transform:translateY(6px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.frame.is-in .fr-line{opacity:1;transform:none}
.fr-line .who{font-weight:800;font-size:var(--fs-1);color:var(--ink-muted);min-width:30px;padding-top:1px}
.fr-line .bar{height:9px;border-radius:var(--r-3xs);background:var(--card2);flex:1}
.fr-line .bar.s{max-width:60%}.fr-line .bar.m{max-width:82%}
.fr-line.mint .bar{background:var(--em-wash)}
.frame-cta{margin-top:16px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-3);color:var(--ink-muted)}
.frame-cta .pulse{width:8px;height:8px;border-radius:50%;background:#5BB97E;box-shadow:0 0 0 0 rgba(91,185,126,.6);animation:pulseDot 1.8s var(--ease-out) infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(91,185,126,.6)}100%{box-shadow:0 0 0 9px rgba(91,185,126,0)}}
@media(max-width:760px){.frame{max-width:480px;margin:0 auto}.frame-score{font-size:var(--fs-7)}}

/* cabinet-style UI inside frames */
.fr-label{font-weight:800;font-size:var(--fs-1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 8px}
.fr-label.mt{margin-top:16px}
.fr-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fr-kpi{background:var(--card2);border-radius:var(--r-xs);padding:12px 12px}
.fr-kpi b{display:block;font-weight:800;font-size:var(--fs-5);letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.fr-kpi b.g{color:var(--em-text)}.fr-kpi b.o{color:var(--em-text)}.fr-kpi b.bl{color:#2E6FC2}
.fr-kpi span{display:block;margin-top:2px;font-weight:700;font-size:var(--fs-1);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.fr-queue{display:flex;gap:8px}
.fr-queue .fr-kpi{flex:1}
.fr-rows{display:flex;flex-direction:column;gap:8px}
.fr-check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-3);color:var(--ink-soft)}
.fr-check .ic{width:20px;height:20px;border-radius:var(--r-2xs);display:flex;align-items:center;justify-content:center;flex:none}
.fr-check .ic.ok{background:rgba(11,138,91,.14);color:var(--em-text)}
.fr-check .ic.no{background:rgba(192,80,80,.16);color:var(--stop)}
.fr-check .ic .icon{width:13px;height:13px;stroke-width:2.8}
.fr-note{margin-top:12px;background:var(--em-wash);border-radius:var(--r-2xs);padding:8px 12px;font-weight:600;font-size:var(--fs-2);color:var(--em-text);line-height:1.4}
.fr-bars{display:flex;flex-direction:column;gap:12px}
.fr-bar-top{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:var(--fs-3);color:var(--ink);margin-bottom:8px}
.fr-bar-top .pct{font-weight:800;color:var(--em-text)}
.fr-bar-track{height:9px;border-radius:var(--r-2xs);background:var(--card2);overflow:hidden}
.fr-bar-fill{height:100%;border-radius:var(--r-2xs);background:linear-gradient(90deg,var(--em-wash),var(--em-text));width:var(--w,50%);transform:scaleX(0);transform-origin:left}
.frame.is-in .fr-bar-fill{animation:barGrow 1.3s var(--ease-out) forwards}
.fr-bar-fill.dim{background:linear-gradient(90deg,#E7C9A8,var(--em-text))}
@keyframes barGrow{to{transform:scaleX(1)}}
.fr-voice{display:flex;flex-direction:column;gap:8px}
.fr-vrow{display:flex;align-items:center;justify-content:space-between;background:var(--card2);border-radius:var(--r-2xs);padding:8px 12px;font-weight:600;font-size:var(--fs-3);color:var(--ink-soft)}
.fr-vrow .cnt{font-weight:800;color:var(--ink)}
.fr-vrow .trend.up{color:var(--em-text)}.fr-vrow .trend.down{color:var(--stop)}
.fr-vrow .cnt-wrap{display:flex;align-items:center;gap:8px}

/* --- expanded interface gallery: log, voice-of-customer, AI insights, promises --- */
/* filter chips + table (Журнал звонков) */
.fr-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fr-fchip{font-weight:700;font-size:var(--fs-1);padding:4px 8px;border-radius:999px;background:var(--card2);color:var(--ink-muted);white-space:nowrap}
.fr-fchip.on{background:var(--ink);color:#fff}
.fr-table{display:flex;flex-direction:column;gap:2px}
.fr-thead,.fr-trow{display:grid;grid-template-columns:1.1fr 1.05fr 1fr .5fr .55fr .9fr;gap:4px;align-items:center}
.fr-thead{font-weight:800;font-size:var(--fs-1);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);padding:0 4px 8px;border-bottom:1px solid rgba(23,23,23,.07)}
.fr-trow{font-weight:600;font-size:var(--fs-1);color:var(--ink-soft);padding:8px 4px;border-bottom:1px solid rgba(23,23,23,.05)}
.fr-trow:last-child{border-bottom:0}
.fr-trow .ar,.fr-thead .ar{text-align:right;justify-self:end}
.fr-mut{color:var(--ink-muted);font-weight:600}
.fr-sc{display:inline-block;font-weight:800;font-size:var(--fs-1);padding:1px 8px;border-radius:var(--r-2xs)}
.fr-sc.hi{background:rgba(11,138,91,.14);color:var(--em-text)}
.fr-sc.md{background:rgba(233,196,74,.28);color:#8A6D14}
.fr-sc.lo{background:rgba(192,80,80,.16);color:var(--stop)}
.fr-st{font-style:normal;font-weight:700;font-size:var(--fs-1);padding:2px 8px;border-radius:999px;white-space:nowrap}
.fr-st.ok{background:var(--em-wash);color:var(--em-text)}
.fr-st.work{background:rgba(46,111,194,.14);color:#2E6FC2}
.fr-st.bad{background:rgba(192,80,80,.16);color:var(--stop)}
.fr-tfoot{margin-top:12px;font-weight:700;font-size:var(--fs-1);letter-spacing:.02em;color:var(--ink-muted)}

/* voice of customer (Голос клиента) */
.fr-voc{display:flex;flex-direction:column;gap:8px}
.fr-voc-cat{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.fr-voc-cat:first-child{margin-top:0}
.fr-voc-name{font-weight:800;font-size:var(--fs-2);color:var(--ink)}
.fr-voc-sum{font-weight:800;font-size:var(--fs-1);color:var(--ink-muted);background:var(--card2);border-radius:999px;padding:2px 8px}
.fr-phrases{display:flex;flex-wrap:wrap;gap:8px}
.fr-phrase{display:inline-flex;align-items:center;gap:8px;background:var(--card2);border-radius:var(--r-2xs);padding:4px 8px;font-weight:600;font-size:var(--fs-1);color:var(--ink-soft)}
.fr-phrase b{font-weight:800;color:var(--ink)}
.fr-phrase .fr-tr{font-weight:800;font-size:var(--fs-1);font-style:normal}
.fr-tr.up{color:var(--em-text)}.fr-tr.dn{color:var(--stop)}

/* AI insights (AI-инсайты дня) */
.fr-ai{display:flex;align-items:flex-start;gap:12px;background:var(--card2);border-radius:var(--r-2xs);padding:8px 12px}
.fr-ai-ic{width:24px;height:24px;border-radius:var(--r-2xs);display:flex;align-items:center;justify-content:center;flex:none}
.fr-ai-ic .icon{width:14px;height:14px;stroke-width:2.4}
.fr-ai b{display:block;font-weight:800;font-size:var(--fs-2);color:var(--ink);line-height:1.3}
.fr-ai span{display:block;margin-top:2px;font-weight:600;font-size:var(--fs-1);color:var(--ink-muted);line-height:1.35}
.fr-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fr-cmp{border-radius:var(--r-2xs);padding:12px 12px}
.fr-cmp.good{background:var(--em-wash)}
.fr-cmp.grow{background:rgba(244,122,45,.13)}
.fr-cmp-lbl{display:block;font-weight:800;font-size:var(--fs-1);letter-spacing:.06em;text-transform:uppercase}
.fr-cmp.good .fr-cmp-lbl{color:var(--em-text)}.fr-cmp.grow .fr-cmp-lbl{color:var(--em-text)}
.fr-cmp b{display:block;margin-top:4px;font-weight:800;font-size:var(--fs-4);color:var(--ink);letter-spacing:-.02em}
.fr-cmp-val{display:block;margin-top:2px;font-weight:600;font-size:var(--fs-1);color:var(--ink-muted)}

/* promise tracking (Контроль обещаний) */
.fr-promise{display:flex;align-items:center;gap:12px}
.fr-promise .ic{width:22px;height:22px;border-radius:var(--r-2xs);display:flex;align-items:center;justify-content:center;flex:none}
.fr-promise .ic.ok{background:rgba(11,138,91,.14);color:var(--em-text)}
.fr-promise .ic.no{background:rgba(192,80,80,.16);color:var(--stop)}
.fr-promise .ic.wait{background:rgba(46,111,194,.14);color:#2E6FC2}
.fr-promise .ic .icon{width:13px;height:13px;stroke-width:2.6}
.fr-promise>div{flex:1;min-width:0}
.fr-promise b{display:block;font-weight:800;font-size:var(--fs-2);color:var(--ink);line-height:1.25}
.fr-promise span{display:block;margin-top:1px;font-weight:600;font-size:var(--fs-1);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-pr-st{font-style:normal;font-weight:700;font-size:var(--fs-1);padding:2px 8px;border-radius:999px;white-space:nowrap;flex:none}
.fr-pr-st.done{background:var(--em-wash);color:var(--em-text)}
.fr-pr-st.late{background:rgba(192,80,80,.16);color:var(--stop)}
.fr-pr-st.wait{background:rgba(46,111,194,.14);color:#2E6FC2}

/* ======================================================
   SHOWCASE — Superhuman-style scroll-synced feature block
   LEFT: scrolling text steps · RIGHT: sticky swapping mockup
====================================================== */
.showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start}

/* LEFT — text steps */
.sc-steps{display:flex;flex-direction:column}
.sc-step{padding:clamp(40px,9vh,96px) 0;opacity:.42;filter:saturate(.6);
  transition:opacity var(--dur-3) var(--ease-out),filter var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
  transform:translateX(-6px)}
.sc-step:first-child{padding-top:clamp(8px,3vh,28px)}
.sc-step:last-child{padding-bottom:clamp(8px,3vh,28px)}
.sc-step.is-current{opacity:1;filter:none;transform:none}
.sc-step:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:var(--r-xs)}
.sc-tag{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:var(--fs-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.sc-tag-ic{width:24px;height:24px;border-radius:var(--r-2xs);background:var(--em-wash);color:var(--em-text);display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-spring)}
.sc-tag-ic .icon{width:13px;height:13px;stroke-width:2.4}
.sc-step.is-current .sc-tag{color:var(--em-text)}
.sc-step.is-current .sc-tag-ic{transform:scale(1.06)}
.sc-name{margin-top:16px;font-weight:800;font-size:var(--fs-d2);letter-spacing:-.025em;line-height:1.16}
.sc-desc{margin-top:16px;font-weight:500;font-size:var(--fs-5);color:var(--ink-soft);line-height:1.55;max-width:480px}
.sc-list{margin-top:20px;display:flex;flex-direction:column;gap:12px;list-style:none;padding:0}
.sc-list li{display:flex;align-items:flex-start;gap:12px;font-weight:600;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.4}
.sc-li-ic{width:24px;height:24px;border-radius:var(--r-2xs);background:var(--card2);color:var(--em-text);display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:-1px;
  transition:background var(--dur-2) var(--ease-out)}
.sc-li-ic .icon{width:13px;height:13px;stroke-width:2.6}
.sc-step.is-current .sc-li-ic{background:var(--em-wash)}

/* RIGHT — sticky stage */
.sc-sticky{position:sticky;top:120px;align-self:start}
.sc-stage{position:relative;min-height:0}
.sc-panel{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);pointer-events:none;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.sc-panel.is-active{opacity:1;transform:none;pointer-events:auto;position:relative}
.sc-panel .frame{box-shadow:0 30px 70px rgba(0,0,0,.10)}
.sc-panel .app-frame{width:100%}

@media(prefers-reduced-motion:reduce){
  .sc-step{opacity:1;filter:none;transform:none}
  .sc-panel{transition:none}
}

/* MOBILE — stack each step's text above its mockup, no sticky.
   .showcase becomes a flex column; .sc-steps / .sc-sticky / .sc-stage use
   display:contents so steps and panels become siblings, then explicit
   `order` interleaves each step directly above its matching panel. */
@media(max-width:900px){
  .showcase{display:flex;flex-direction:column;gap:0}
  .sc-steps,.sc-sticky,.sc-stage{display:contents}
  .sc-step{opacity:1;filter:none;transform:none;padding:0 0 24px}
  .sc-panel{position:relative;opacity:1;transform:none;pointer-events:auto;inset:auto;margin:0 0 56px}
  /* Порядок считается из индекса шага (--sc-i ставит скрипт), а не из списка
     ключей конкретного продукта: шаг идёт перед своей панелью при любом их
     числе и любых именах. */
  .sc-step{order:calc(var(--sc-i, 1) * 2 - 1)}
  .sc-panel{order:calc(var(--sc-i, 1) * 2)}
  .sc-panel .frame{max-width:480px;box-shadow:0 18px 44px rgba(0,0,0,.09)}
}

/* ======================================================
   MASCOT — nav logo cloud
====================================================== */
.nav-cloud{width:34px;height:auto;margin-left:4px;color:var(--ink);opacity:.85;flex:none;animation:navCloudFloat 6s var(--ease-smooth) infinite}
@keyframes navCloudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ======================================================
   MASCOT — scrollytelling guide
====================================================== */
.scrolly{position:fixed;right:26px;bottom:26px;z-index:55;width:160px;pointer-events:none;opacity:0;
  transition:top .8s var(--ease-spring),bottom .8s var(--ease-spring),opacity var(--dur-3) var(--ease-out)}
.scrolly.show{opacity:1}
.scrolly-cloud{width:104px;height:auto;display:block;margin-left:auto;color:var(--ink);animation:scrollyFloat 5s var(--ease-smooth) infinite}
.scrolly-bubble{position:absolute;bottom:72%;right:4px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:16px 16px 4px 16px;
  font-weight:600;font-size:var(--fs-4);line-height:1.35;max-width:240px;width:max-content;opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);box-shadow:0 12px 28px -10px rgba(0,0,0,.3)}
.scrolly.show .scrolly-bubble{opacity:1;transform:none}
@keyframes scrollyFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@media(max-width:960px){.scrolly{display:none}}

/* ======================================================
   INTRO LOADER — brush paints the hero, then writes
====================================================== */
#intro{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
#intro.intro-done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-3) var(--ease-out),visibility var(--dur-3) linear}
.intro-stage{position:relative;width:min(560px,84vw);height:128px}
.intro-brush{position:absolute;inset:0;border-radius:var(--r);background:var(--em-wash);transform:scaleX(0);transform-origin:left;
  animation:introPaint 1s var(--ease-smooth) var(--dur-1) forwards}
.intro-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:var(--fs-d3);letter-spacing:-.03em;color:var(--ink);clip-path:inset(0 100% 0 0);
  animation:introReveal .85s var(--ease-smooth) 1.05s forwards}
.intro-cloud{position:absolute;top:-30px;left:0;width:66px;height:auto;color:var(--ink);transform:translateX(-50%);
  animation:introRide 1s var(--ease-smooth) var(--dur-1) forwards}
.intro-tag{position:absolute;left:0;right:0;top:calc(100% + 18px);text-align:center;font-weight:600;font-size:var(--fs-4);
  color:var(--ink-soft);opacity:0;animation:introFade var(--dur-3) var(--ease-out) 1.55s forwards}
@keyframes introPaint{to{transform:scaleX(1)}}
@keyframes introReveal{to{clip-path:inset(0 0 0 0)}}
@keyframes introRide{from{left:0}to{left:100%}}
@keyframes introFade{to{opacity:1}}
body.intro-lock{overflow:hidden}

/* ======================================================
   HERO PAINT-ON — mascot paints the hero in place
====================================================== */
/* интро-«прорисовка» hero НЕ блокирует прокрутку (скролл активен сразу) */
.hero-canvas,.hero-paint-cv,.hero-paint-wet,.hero-painter,.hero-skip{display:none}
/* instant cream cover (no FOUC) until the canvas takes over */
.js-paint .hero-canvas{display:block;position:absolute;inset:0;z-index:20;background:var(--bg);pointer-events:none}
/* reveal canvas — JS erases cream along the brush path */
.js-paint .hero-paint-cv{display:block;position:absolute;inset:0;z-index:21;pointer-events:none}
/* wet-paint canvas — mint glow at the brush tip that dries off */
.js-paint .hero-paint-wet{display:block;position:absolute;inset:0;z-index:22;pointer-events:none}
/* painter cloud — JS drives its position/tilt along the path */
.js-paint .hero-painter{display:block;position:absolute;top:20%;left:0;width:128px;height:auto;z-index:23;color:var(--ink);pointer-events:none;transition:opacity var(--dur-3) var(--ease-out)}
.hero-painter-svg{filter:drop-shadow(0 9px 16px rgba(23,23,23,.16))}
/* content hidden during paint, revealed step-by-step as the brush passes */
.js-paint .hero-content>*:not(h1){opacity:0;transform:translateY(18px)}
.js-paint .hero-content>h1{clip-path:inset(0 100% 0 0)}
.js-paint .hero-art{opacity:0}
.js-paint .hero-mesh{opacity:0}
.hero-mesh{transition:opacity 1.1s var(--ease-out)}
.hero .hero-content>*.is-shown{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.hero .hero-art.is-shown{opacity:1;transition:opacity .85s var(--ease-out)}
/* skip control */
.js-paint .hero-skip{display:block;position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:30;
  font-family:inherit;font-weight:600;font-size:var(--fs-3);color:var(--ink-soft);background:var(--card);
  border:1px solid rgba(23,23,23,.12);padding:8px 16px;border-radius:999px;cursor:pointer;
  opacity:0;animation:skipIn var(--dur-2) var(--ease-out) 1.1s forwards}
.hero-skip:hover{color:var(--ink);border-color:rgba(23,23,23,.3)}
@keyframes skipIn{to{opacity:.9}}

/* ======================================================
   CARD TILT + GRADIENT BORDER (premium)
====================================================== */
.tilt{transition:transform var(--dur-1) var(--ease-out)}
.grad-border{position:relative}
.grad-border::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(120deg,var(--em-wash),var(--em-text),var(--em-wash),var(--em-wash));background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:borderFlow 8s linear infinite;opacity:.9}
@keyframes borderFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ======================================================
   ORCHESTRATION DIAGRAM (Orchestra)
====================================================== */
/* ======================================================
   NEXUS — reusable radial architecture graph (dark panel).
   Product pages drop in their own hub/ring nodes; the SVG is
   generated by scripts/gen-nexus.mjs. First used on Orchestra.
====================================================== */
.nexus{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.5vw,52px);align-items:center;
  position:relative;isolation:isolate;
  /* light paper panel (on-brand cream) with a soft mint "field" + a faint warm
     accent; depth comes from soft elevation shadows, not glow */
  background:
    radial-gradient(56% 62% at 38% 40%,rgba(190,234,201,.40) 0%,rgba(190,234,201,0) 62%),
    radial-gradient(46% 54% at 80% 22%,rgba(244,170,110,.10) 0%,rgba(244,170,110,0) 56%),
    linear-gradient(158deg,#F6F3EC 0%,#EBE6DB 100%);
  border:1px solid rgba(23,23,23,.08);
  border-radius:var(--r-band);
  padding:clamp(24px,3.5vw,48px);
  box-shadow:0 30px 70px rgba(70,56,32,.12),inset 0 1px 0 rgba(255,255,255,.65);
  overflow:hidden;
}
/* faint diagonal weave (texture) + soft inner edge for depth */
.nexus::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(122deg,rgba(23,23,23,.011) 0 1.5px,transparent 1.5px 22px);opacity:.8}
.nexus::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 110px 16px rgba(120,98,58,.08)}
.nexus-graph{position:relative;min-width:0}
.nx-svg{width:100%;height:auto;display:block;max-width:540px;margin-inline:auto;overflow:visible}

.nx-rings circle{fill:none;stroke:rgba(23,23,23,.07);stroke-dasharray:2 7}
.nx-arc{fill:rgba(23,23,23,.34);font:700 var(--fs-4)/1 Manrope,Arial,sans-serif;letter-spacing:.3em}

.nx-link line{stroke:rgba(11,138,91,.18);stroke-width:1}
.nx-link .nx-link-out{stroke:rgba(23,23,23,.1)}

.nx-pkt{filter:drop-shadow(0 0 3px currentColor)}
.nx-pkt-0{fill:var(--em-text);color:var(--em-text)}
.nx-pkt-1{fill:#3f78bd;color:#3f78bd}
.nx-pkt-2{fill:#cf9b13;color:#cf9b13}
.nx-pkt-3{fill:#F47A2D;color:#F47A2D}
/* energy primitives shared by the bespoke product architectures:
   nx-flowline = current marching along a link; nx-ping2 = expanding sonar ring.
   These give every connector visible flow (the thing the radial graph has and
   the early bespoke versions lacked). */
/* single bright pulse of light travels each link (elegant, not chunky dashes) */
.nx-flowline{fill:none;stroke-linecap:round;stroke-width:1.8;stroke-dasharray:18 220;opacity:.92;animation:nxFlow 2.1s linear infinite}
@keyframes nxFlow{to{stroke-dashoffset:-238}}
.nx-ping2{fill:none;animation:nxPing2 2s var(--ease-out) infinite}
@keyframes nxPing2{0%{opacity:.65}70%,100%{opacity:0}}
/* signature animation layers — one per product (SMIL-driven, self-contained):
   pulse=sonar rings (echolytics), dial=orbiting dot (phonex),
   current=marching ring (coach). */
.nx-ping{stroke:rgba(190,234,201,.5);stroke-width:1.5}
.nx-orbit{fill:#F47A2D;filter:drop-shadow(0 0 7px rgba(244,122,45,.9))}
.nx-scan-wedge{fill:#C7EAD9;opacity:.13}
.nx-scan-line{stroke:rgba(169,201,238,.75);stroke-width:1.6}
.nx-current-base{stroke:rgba(255,255,255,.05);stroke-width:2}
.nx-current{stroke:#FCEF8D;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:14 26;filter:drop-shadow(0 0 5px rgba(252,239,141,.8))}

/* Position lives in CSS vars (--tx/--ty), NOT a transform attribute, so the
   hover/active scale composes onto the translate instead of replacing it —
   that override was the "jitter": the node jumped to 0,0 then scaled. */
.nx-node{transform:translate(var(--tx),var(--ty));transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-1) var(--ease-out);cursor:pointer;outline:none}
.nx-node circle{stroke-width:1.4;transition:filter var(--dur-1) var(--ease-out),stroke var(--dur-1) var(--ease-out)}
.nx-nl{fill:#27261e;font:700 var(--fs-1)/1 Manrope,Arial,sans-serif;text-anchor:middle;pointer-events:none}
.nx-chan .nx-nl{font-size:var(--fs-2);fill:#1d2a20}
.nx-skill .nx-nl{fill:#22303d}
.nx-int .nx-nl{fill:#3a2613}
/* depth on light = soft elevation shadows (chip on paper), not glow. Fills are
   near-white with a faint category tint (light gradients injected by initNexus;
   solid colour after url() is the fallback). */
.nx-chan circle{fill:url(#nx-g-chan) #E3F5ED;stroke:rgba(11,138,91,.55);filter:drop-shadow(0 4px 9px rgba(40,72,52,.18)) drop-shadow(0 1px 2px rgba(0,0,0,.1))}
.nx-skill circle{fill:url(#nx-g-skill) #F4F7FB;stroke:rgba(63,120,189,.5);filter:drop-shadow(0 4px 9px rgba(40,58,86,.16)) drop-shadow(0 1px 2px rgba(0,0,0,.1))}
.nx-int circle{fill:url(#nx-g-int) #FBF3EB;stroke:rgba(244,122,45,.6);filter:drop-shadow(0 4px 9px rgba(120,70,30,.18)) drop-shadow(0 1px 2px rgba(0,0,0,.1))}
/* echolytics agents + coach AI-client: override the inline solid fills with
   light gradients (higher specificity beats the in-body <style>) */
.nexus .nx-ag circle{fill:url(#nx-g-ag) #E3F5ED}
.nexus .nx-cli circle{fill:url(#nx-g-int) #FBF3EB}
.nx-node:hover,.nx-node:focus-visible,.nx-node.is-hot{transform:translate(var(--tx),var(--ty)) scale(1.09)}
.nx-chan:hover circle,.nx-chan:focus-visible circle,.nx-chan.is-hot circle{filter:drop-shadow(0 7px 15px rgba(11,138,91,.32)) drop-shadow(0 2px 4px rgba(0,0,0,.12));stroke:rgba(11,138,91,.9)}
.nx-skill:hover circle,.nx-skill:focus-visible circle,.nx-skill.is-hot circle{filter:drop-shadow(0 7px 15px rgba(63,120,189,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.12));stroke:rgba(63,120,189,.85)}
.nx-int:hover circle,.nx-int:focus-visible circle,.nx-int.is-hot circle{filter:drop-shadow(0 7px 15px rgba(244,122,45,.32)) drop-shadow(0 2px 4px rgba(0,0,0,.12));stroke:rgba(244,122,45,.9)}
/* focus mode — dim everything except the active node + hub */
.nexus.is-focusing .nx-node:not(.is-hot):not(.nx-hub){opacity:.26}
.nexus.is-focusing .nx-link,.nexus.is-focusing .nx-arc{opacity:.45}

.nx-hub{filter:drop-shadow(0 10px 24px rgba(11,138,91,.34)) drop-shadow(0 3px 8px rgba(0,0,0,.14))}
.nx-hub circle{fill:url(#nx-g-hub) #C7EAD9;stroke:rgba(11,138,91,.5);stroke-width:1.5}
.nx-hl{fill:#10120c;font:800 var(--fs-4)/1 Manrope,Arial,sans-serif;text-anchor:middle}
.nx-hs{fill:rgba(16,18,12,.6);font:600 var(--fs-1)/1 Manrope,Arial,sans-serif;text-anchor:middle}

.nexus-legend{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:center;margin-top:12px}
.nexus-legend span{display:inline-flex;align-items:center;gap:8px;color:var(--ink-muted);font-size:var(--fs-3);font-weight:600}
.nx-leg{width:10px;height:10px;border-radius:50%;border:1.6px solid}
.nx-leg-c{border-color:#C7EAD9}
.nx-leg-s{border-color:#C7EAD9}
.nx-leg-i{border-color:#F47A2D}
.nx-leg-hub{border-color:var(--em-text);background:var(--em-text)}

/* Dynamic detail panel — reforms to the hovered/focused/tapped node.
   Content is injected by initNexus(); category drives the accent colour. */
.nexus-detail{display:flex;flex-direction:column;justify-content:center;align-self:stretch;min-width:0;
  position:relative;overflow:hidden;padding:clamp(24px,2.5vw,32px);border-radius:var(--r-sm);
  background:rgba(255,255,255,.55);border:1px solid rgba(23,23,23,.09);box-shadow:0 10px 30px rgba(70,56,32,.07)}
.nexus-detail-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.nexus-detail-dot{width:9px;height:9px;border-radius:50%;background:var(--em-wash);box-shadow:0 0 0 4px rgba(190,234,201,.15);transition:background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.nexus-detail[data-cat="skill"] .nexus-detail-dot{background:#C7EAD9;box-shadow:0 0 0 4px rgba(169,201,238,.15)}
.nexus-detail[data-cat="int"] .nexus-detail-dot{background:#F47A2D;box-shadow:0 0 0 4px rgba(244,122,45,.15)}
.nexus-detail-tag{font-size:var(--fs-2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.nexus-detail-title{color:var(--ink);font-size:var(--fs-d1);font-weight:800;letter-spacing:-.02em;line-height:1.14;margin-bottom:16px}
.nexus-detail-pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.nexus-detail-pts li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:var(--fs-4);line-height:1.5}
.nexus-detail-pts li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;border:2px solid var(--em-wash)}
.nexus-detail[data-cat="skill"] .nexus-detail-pts li::before{border-color:#C7EAD9}
.nexus-detail[data-cat="int"] .nexus-detail-pts li::before{border-color:#F47A2D}
.nexus-detail-link{margin-top:20px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-weight:700;font-size:var(--fs-4);color:var(--ink);background:var(--em-wash);
  padding:12px 16px;border-radius:999px;text-decoration:none;
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out)}
.nexus-detail-link:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,138,91,.22)}
.nexus-detail-hint{margin-top:20px;font-size:var(--fs-3);color:rgba(23,23,23,.42)}
.nexus.is-focusing .nexus-detail-hint{opacity:0}
/* entrance stagger, replayed on every content swap (.is-in toggled by JS) */
.nexus-detail.is-in .nexus-detail-title{animation:nxSwap var(--dur-3) var(--ease-out) both}
.nexus-detail.is-in .nexus-detail-pts li{opacity:0;animation:nxSwap var(--dur-3) var(--ease-out) forwards}
.nexus-detail.is-in .nexus-detail-pts li:nth-child(1){animation-delay:.06s}
.nexus-detail.is-in .nexus-detail-pts li:nth-child(2){animation-delay:.14s}
.nexus-detail.is-in .nexus-detail-pts li:nth-child(3){animation-delay:.22s}
@keyframes nxSwap{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* entrance: nodes ripple in from the core when the panel scrolls into view.
   Per-node delay (--nxd) is set by initNexus from each node's distance to the
   hub. "backwards" fill holds them hidden during the delay, then releases to
   the base state so the hover/active scale still composes. */
@keyframes nxPop{from{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.32)}to{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}}
.nexus.is-in .nx-node{animation:nxPop var(--dur-3) var(--ease-spring,var(--ease-spring)) backwards;animation-delay:var(--nxd,0s)}
@media(prefers-reduced-motion:reduce){.nexus.is-in .nx-node{animation:none}}

/* ---- light-theme accents for the bespoke product graphs ----
   The in-body <style> of each gen-arch-*.mjs tuned these for the old dark panel
   (white/mint on dark → invisible or washed on paper). Override centrally with
   higher specificity so the generators stay theme-agnostic. The flow-line and
   sonar-ring colours come from each generator's constants instead (darkened). */
.nexus .nx-links .nx-link{stroke:rgba(11,138,91,.15)}
.nexus .nx-links .nx-link-out{stroke:rgba(23,23,23,.09)}
.nexus .nx-ag circle{stroke:rgba(11,138,91,.55)}
.nexus .nx-ag:hover circle,.nexus .nx-ag:focus-visible circle,.nexus .nx-ag.is-hot circle{filter:drop-shadow(0 6px 14px rgba(11,138,91,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.12));stroke:rgba(11,138,91,.9)}
.nexus .nx-cli:hover circle,.nexus .nx-cli:focus-visible circle,.nexus .nx-cli.is-hot circle{filter:drop-shadow(0 6px 14px rgba(244,122,45,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.12));stroke:rgba(244,122,45,.9)}
.nexus-detail[data-cat="ag"]::before{background:var(--em-text)}
.nexus-detail[data-cat="ag"] .nexus-detail-dot{background:var(--em-text);box-shadow:0 0 0 4px rgba(11,138,91,.15)}
.nexus-detail[data-cat="ag"] .nexus-detail-pts li::before{border-color:var(--em-text)}
.nexus .nx-eq{fill:#3f78bd}
.nexus .nx-typdot{fill:var(--em)}
.nexus .nx-agring{stroke:var(--em)}
.nexus .nx-gdot.off{fill:rgba(23,23,23,.12)}
.nexus .nx-gdot.on{fill:#2f9c5b}
.nexus .nx-funnel-wall{stroke:rgba(63,120,189,.34);fill:rgba(63,120,189,.045)}
.nexus .nx-chip{fill:#3f78bd}
.nexus .nx-scanbeam line{stroke:rgba(63,120,189,.7)}
.nexus .nx-bar-fill{fill:rgba(63,120,189,.5)}
.nexus .nx-bar.top .nx-bar-fill{fill:var(--em-text)}
.nexus .nx-bar-s{fill:var(--ink-muted)}
.nexus .nx-bar.top .nx-bar-s{fill:var(--em-text)}
.nexus .nx-score-track{fill:rgba(23,23,23,.09)}
.nexus .nx-score-lbl{fill:var(--ink-muted)}
.nexus .nx-lvlring{stroke:#3f78bd}
.nexus .nx-bubble.m circle{fill:var(--em)}

@media(max-width:900px){
  .nexus{grid-template-columns:1fr;gap:16px;padding:clamp(16px,4.5vw,28px)}
  /* let the graph use the full panel width on phones/tablets so labels are as
     legible as possible (the detail panel carries the full copy below) */
  .nx-svg{max-width:none}
  .nexus-detail{padding:clamp(20px,4.5vw,28px)}
}
@media(prefers-reduced-motion:reduce){
  .nx-fx{display:none}
  .nx-node{transition:none}
  .nexus-detail.is-in .nexus-detail-title,.nexus-detail.is-in .nexus-detail-pts li{animation:none}
  .nexus-detail.is-in .nexus-detail-pts li{opacity:1}
}

/* ======================================================
   AI TEAM ROSTER (Echolytics) — «отдел из 15+ агентов»
   Light cream cards (balances the dark nexus panel above).
====================================================== */
.team-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.team-stats>div{background:var(--card);border:1px solid rgba(23,23,23,.08);border-radius:var(--r-xs);padding:20px 20px}
.team-stats b{display:block;font-size:var(--fs-d2);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.team-stats span{display:block;margin-top:8px;font-size:var(--fs-3);font-weight:600;color:var(--ink-muted);line-height:1.35}
@media(max-width:760px){.team-stats{grid-template-columns:repeat(2,1fr)}}

.team-groups{display:flex;flex-direction:column;gap:32px}
.team-group-head{display:flex;align-items:baseline;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.team-group-tag{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:var(--fs-2);color:var(--ink-muted);letter-spacing:.02em}
.team-group-head h3{font-size:var(--fs-lead-lg);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}

/* Канон yanalitics: чистая hairline-карточка без цветного левого бордера
   (был AI-слоп — 4 разных цвета). Категорию несёт mono-заголовок группы. */
.agent{background:var(--card);border:1px solid rgba(23,23,23,.08);border-radius:var(--r-xs);
  padding:20px 20px 16px;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.agent:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.07);border-color:rgba(11,138,91,.35)}
.agent-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.agent-ic{flex:none;width:34px;height:34px;border-radius:var(--r-2xs);display:grid;place-items:center;background:#E3F5ED}
.agent-ic .icon{width:18px;height:18px;color:#0B8A5B}
.agent-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.agent-id b{font-size:var(--fs-4);font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.agent-id code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:var(--fs-2);color:var(--ink-muted)}
.agent-desc{font-size:var(--fs-4);line-height:1.5;color:var(--ink-soft);margin-bottom:12px}
.agent-meta{display:flex;flex-wrap:wrap;gap:8px}
.agent-model{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:var(--fs-1);font-weight:600;color:var(--em-text);background:rgba(11,138,91,.09);border-radius:var(--r-2xs);padding:2px 8px}
.agent-model.rule{color:var(--ink-muted);background:rgba(23,23,23,.05)}
.agent-sched{font-size:var(--fs-1);font-weight:600;color:var(--ink-muted);background:rgba(23,23,23,.05);border-radius:var(--r-2xs);padding:2px 8px}

/* ======================================================
   ANIMATION PAUSE HOOK (for screenshots/testing)
====================================================== */
html.anim-paused *,html.anim-paused *::before,html.anim-paused *::after{animation-play-state:paused!important}

/* ======================================================
   REDUCED MOTION — neutralize new motion
====================================================== */
@media(prefers-reduced-motion:reduce){
  .bird-glide,.bird-wing,.bird-peek,.bird-cheer .bird-wing,.hero-mesh,.page-hero-mesh,.fr-wave i,.frame-cta .pulse,.grad-border::after{animation:none!important}
  .bird-draw .bird-stroke,.bird-stroke{stroke-dashoffset:0!important;transition:none!important}
  .bird-nodes circle{opacity:1!important;transition:none!important}
  .frame .fr-line{opacity:1!important;transform:none!important}
  .fr-bar-fill{transform:scaleX(1)!important;animation:none!important}
  .nav-cloud,.scrolly-cloud{animation:none!important}
  .scrolly{transition:opacity var(--dur-2) var(--ease-out)!important}
  .hero-canvas,.hero-paint-cv,.hero-paint-wet,.hero-painter,.hero-skip{display:none!important}
}

/* ===== hero mascot (user-provided SVG) ===== */
.hero-mascot .ms-line{fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-mascot #ms-screen{transform-origin:340px 185px;animation:msScreenPulse 2.4s var(--ease-smooth) infinite}
.hero-mascot #ms-chart{stroke-dasharray:80;stroke-dashoffset:80;animation:msChartRun 2.4s var(--ease-smooth) infinite}
.hero-mascot #ms-wing{transform-origin:240px 175px;animation:msWingMove 2.4s var(--ease-smooth) infinite}
@keyframes msScreenPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes msChartRun{0%{stroke-dashoffset:80}40%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes msWingMove{0%,100%{transform:rotate(0deg)}40%{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.hero-mascot #ms-screen,.hero-mascot #ms-chart,.hero-mascot #ms-wing{animation:none}.hero-mascot #ms-chart{stroke-dashoffset:0}}


/* ======================================================
   PREMIUM POLISH LAYER (tech-premium motion + atmosphere)
====================================================== */
/* brand text selection */
::selection{background:var(--em-wash);color:var(--ink)}
/* branded scrollbar (webkit) */
*{scrollbar-width:thin;scrollbar-color:var(--ink-muted) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:rgba(23,23,23,.28);border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(23,23,23,.45)}
/* unified focus ring for keyboard nav */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-2xs)}

/* subtle dot-grid texture on hero + dark CTA bands */
.hero{position:relative}
.hero::before{content:none;position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:radial-gradient(rgba(23,23,23,.05) 1px,transparent 1.4px);
  background-size:26px 26px;mask-image:radial-gradient(120% 100% at 80% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 100% at 80% 30%,#000 30%,transparent 75%);}
.hero-content{z-index:3}
.cta-big{position:relative;overflow:hidden}
.cta-big::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:24px 24px;
  mask-image:radial-gradient(100% 100% at 90% 10%,#000,transparent 70%);-webkit-mask-image:radial-gradient(100% 100% at 90% 10%,#000,transparent 70%)}

/* section headings: animated accent underline on the highlighted word */
.sec-head h2 .mk{position:relative}

/* nav links: sliding underline */
.nav-links>a,.nav-item>a{position:relative}
.nav-links>a::after,.nav-item>.dropdown-toggle::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--ink);border-radius:var(--r-3xs);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-2) var(--ease-out);opacity:.0}
.nav-links>a:hover::after,.nav-links>a.is-active::after{transform:scaleX(1);opacity:1}

/* card arrow link glide (generic) */
.card-link.arrow-ic .icon,.card-link.arrow-ic::after{transition:transform var(--dur-2) var(--ease-spring)}
.card-p:hover .card-link.arrow-ic .icon,.card-link.arrow-ic:hover .icon{transform:translateX(4px)}

/* metric numbers: tabular for clean count-up */
.hero-metric-num,.stat-num{font-variant-numeric:tabular-nums}

/* image/svg drag guard */
svg,canvas{user-select:none}

/* stagger helper: children fade up with index delay (set --i inline or via JS) */
/* Тот же механизм и тот же характер, что у .reveal: прячем только группы
   ниже экрана (.rv-wait от initReveal), дети идут лесенкой по 60 мс, не
   больше шести ступеней. Без JS и в первом экране дети видны сразу. */
.stagger.rv-wait>*{opacity:0;translate:0 16px}
.stagger.rv-in>*{animation:rvIn var(--dur-3) var(--ease-out) backwards;animation-delay:calc(min(var(--i,0),5)*60ms)}

@media(prefers-reduced-motion:reduce){
  .btn::before,.card-p::before,a.uc::before{display:none}
  .stagger>*{opacity:1;transform:none;transition:none}
  .nav-links>a::after{transition:none}
}

/* ======================================================
   BRAND BAND (large wordmark + slogan under hero)
====================================================== */
.brand-band{max-width:1320px;margin:0 auto;padding:56px 28px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.brand-band-left{display:flex;align-items:center;gap:clamp(16px,2vw,28px);color:var(--ink);min-width:0}
.brand-band-mark{width:clamp(54px,7vw,92px);height:clamp(54px,7vw,92px);flex:none}
.brand-band-word{font-weight:800;letter-spacing:-.04em;line-height:.9;
  font-size:var(--fs-mega)}
.brand-band-word sup{font-size:.18em;font-weight:700;vertical-align:super;margin-left:.04em;opacity:.85}
.brand-band-slogan{font-weight:700;letter-spacing:-.01em;line-height:1.16;text-align:right;
  font-size:var(--fs-d2);color:var(--ink)}
@media(max-width:780px){
  .brand-band{justify-content:flex-start;gap:20px}
  .brand-band-slogan{text-align:left;font-size:var(--fs-6)}
}

/* ======================================================
   HERO PAINT — React island (mascot draws the hero)
====================================================== */
.hero-cover-react{position:absolute;inset:0;z-index:25;pointer-events:none;display:block}
.hero-trail-react{position:absolute;inset:0;z-index:26;pointer-events:none;display:block}
.hero-pen-react{position:absolute;top:0;left:0;width:80px;height:110px;z-index:27;pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(23,23,23,.18));will-change:transform}
.hero-pen-react svg{width:100%;height:100%;display:block}
#hero-paint-island{position:absolute;inset:0;z-index:24;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero-cover-react,.hero-pen-react,.hero-trail-react{display:none!important}}

/* ======================================================
   LAZY RENDER — content-visibility for below-fold blocks
   (skips layout/paint until near viewport). Avoids scrollytelling
   sections (data-narrate) which need stable observer geometry.
====================================================== */
.cv-lazy{content-visibility:auto}
.cv-lazy.cv-sec{contain-intrinsic-size:auto 600px}
/* «Сайты внутри сайта» (body.theme-*): секции ниже второго экрана не
   раскладываются до подлёта. На Фонексе первая раскладка занимала 560 мс при
   CPU ×4 — дольше, чем загрузка всего CSS. overflow-clip-margin — потому что
   content-visibility включает обрезку по краю секции, а свечения и тени тем
   намеренно выходят за секцию. Переход по якорю снимает режим (html.cv-off в
   script.js): иначе браузер целится по оценочным высотам и промахивается. */
html:not(.cv-off) body[class*=" theme-"] main>section:nth-of-type(n+3){content-visibility:auto;contain-intrinsic-size:auto 1000px;overflow-clip-margin:320px}
/* Short text costs little to lay out. Give anchors their real position instead
   of reserving the former 1000px section size until the visitor scrolls to it. */
html:not(.cv-off) body[class*=" theme-"] main>section.editorial-section{content-visibility:visible;contain-intrinsic-size:none}
.cv-lazy.cv-tall{contain-intrinsic-size:auto 900px}
.cv-lazy.cv-article{contain-intrinsic-size:auto 1400px}
/* Карточки блога: в списке их больше полутора сотен, и браузер раскладывал
   все сразу — ~2 400 элементов до первого кадра. Карточку за экраном он
   теперь пропускает до прокрутки; «auto» запоминает реальную высоту после
   первой отрисовки, так что полоса прокрутки не прыгает. */
/* contain-intrinsic-size задаёт и ширину: пропущенная карточка занимала
   440px в ширину и ломала сетку (горизонтальная прокрутка на /vnedrenie-ai/,
   отзумленная вёрстка на телефоне). Ширину считаем по месту, заглушка — только
   для высоты. 20.09.2026 */
.blog-grid>.post-card{content-visibility:auto;contain-intrinsic-width:none;contain-intrinsic-height:auto 440px}
@media(prefers-reduced-motion:reduce){.cv-lazy{content-visibility:visible}}

/* ======================================================
   VIEW TRANSITIONS — cross-document (MPA) page transitions
   Progressive enhancement: unsupported browsers navigate normally.
====================================================== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut var(--dur-2) var(--ease-out) both}
::view-transition-new(root){animation:vtIn var(--dur-2) var(--ease-out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* persistent header glides between pages */
/* Один призыв за раз ---------------------------------------------------
   Пока внизу висит липкая полоса с призывом, кнопка в шапке — тот же
   призыв во второй раз: обе перехватываются одним обработчиком и
   открывают одно окно. Прячем верхнюю, нижняя ближе к большому пальцу
   и несёт контекст. Логотип и меню остаются: на главной ленты разделов
   нет, заменить шапку нечем. */
/* Кнопка шапки гаснет после того, как полоса снизу начала выезжать
   (задержка --dur-1), — две смены по очереди, а не одним кадром. */
.cta-bar-on .site-header .nav-right > a.btn{opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity var(--dur-1) var(--ease-out) var(--dur-1),transform var(--dur-1) var(--ease-out) var(--dur-1)}
@media(prefers-reduced-motion:reduce){.cta-bar-on .site-header .nav-right > a.btn{transition:none}}

.site-header{view-transition-name:site-header}
::view-transition-group(site-header){animation-duration:var(--dur-2)}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ======================================================
   MAGNETIC BUTTONS + NAV SKELETON
====================================================== */
/* Магнит снят 25.09.2026 (motion-критик): кнопка шла за курсором до 18px,
   надпись — до 31px, плюс подъём, тень и блик. Остался сдержанный ховер:
   подъём не больше 2px, тень и цвет — за --dur-1. */
.btn-dark,.btn-mint,.btn-white{transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}

/* navigation skeleton overlay */
.nav-skeleton{position:fixed;inset:0;z-index:9999;background:var(--bg);
  opacity:0;visibility:hidden;transition:opacity var(--dur-1) var(--ease-out),visibility var(--dur-1) linear;
  padding:0;overflow:hidden}
.nav-skeleton.show{opacity:1;visibility:visible}
.nav-skeleton-bar{height:72px;border-bottom:1px solid rgba(23,23,23,.06)}
.nav-skeleton-body{max-width:1320px;margin:0 auto;padding:64px 28px;display:flex;flex-direction:column;gap:20px}
.sk{background:linear-gradient(100deg,rgba(23,23,23,.06) 30%,rgba(23,23,23,.12) 50%,rgba(23,23,23,.06) 70%);
  background-size:200% 100%;border-radius:var(--r-2xs);animation:skShimmer 1.3s linear infinite}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-tag{width:200px;height:30px;border-radius:999px}
.sk-h1{width:560px;max-width:90%;height:48px;margin-top:8px}
.sk-h1.w80{width:460px}.sk-h1.w60{width:360px}
.sk-line{width:420px;max-width:80%;height:16px;margin-top:16px}
.sk-line.w70{width:300px}
.sk-btns{display:flex;gap:16px;margin-top:24px}
.sk-btn{width:170px;height:52px;border-radius:999px}
.sk-btn.ghost{width:150px;opacity:.6}
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.sk-card{height:220px;border-radius:var(--r-sm)}
@media(max-width:760px){.sk-grid{grid-template-columns:1fr}.sk-card:nth-child(n+2){display:none}}
@media(prefers-reduced-motion:reduce){
  .sk{animation:none}
  .nav-skeleton{transition:opacity var(--dur-0) var(--ease-out)}
}

/* ======================================================
   TOP PROGRESS BAR + MAGNETIC ICONS
====================================================== */
.page-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;pointer-events:none;background:transparent}
.page-progress-fill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--em-text),var(--em-wash) 60%,var(--em-text));
  box-shadow:0 0 10px rgba(11,138,91,.4);transition:transform var(--dur-0) var(--ease-out)}
.page-progress.loading .page-progress-fill{box-shadow:0 0 14px rgba(244,122,45,.5)}
/* magnetic icon links: smooth spring return */
.footer-social a,.nav-phone,.back-to-top{transition:transform var(--dur-2) var(--ease-spring),color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.footer-social a{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .page-progress-fill{transition:none}
  .footer-social a,.nav-phone,.back-to-top{transition:none}
}

/* ===== hero replay-with-sound control ===== */
.hero-replay{position:absolute;right:18px;bottom:18px;z-index:6;
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-weight:700;font-size:var(--fs-3);letter-spacing:-.01em;color:var(--ink);
  background:#fff;border:1.5px solid rgba(244,122,45,.45);
  padding:8px 16px;border-radius:999px;backdrop-filter:blur(4px);
  box-shadow:0 4px 14px rgba(23,23,23,.08);
  animation:replayNudge 2.2s var(--ease-out) var(--dur-3) 3;
  transition:transform var(--dur-2) var(--ease-spring),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.hero-replay svg{color:var(--em-text);transition:transform var(--dur-3) var(--ease-spring)}
.hero-replay:hover{transform:translateY(-2px);border-color:var(--em-text);box-shadow:0 10px 24px rgba(244,122,45,.22)}
.hero-replay:hover svg{transform:rotate(-180deg)}
@keyframes replayNudge{0%,100%{box-shadow:0 4px 14px rgba(23,23,23,.08);border-color:rgba(244,122,45,.45)}50%{box-shadow:0 6px 22px rgba(244,122,45,.42);border-color:var(--em-text)}}
@media(max-width:760px){.hero-replay{display:none}}
@media(prefers-reduced-motion:reduce){.hero-replay{display:none;animation:none}}

/* ======================================================
   INTERACTIVE DOT-GRID + ADVANTAGE ICON MICRO-ANIMATIONS
====================================================== */
/* dot-grid canvas: behind hero content, above mint bg */
.hero-dotgrid{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit}
.hero-content{position:relative;z-index:2}
.hero-art{z-index:2}

/* ---- advantage icon: charge-in + hover orbit pulse ---- */
.adv-ic{position:relative;overflow:visible;
  /* base hidden state before charge-in */
  transform:scale(.6) rotate(-12deg);opacity:0;
  transition:transform var(--dur-3) var(--ease-spring) var(--ic-delay,0ms),opacity var(--dur-3) var(--ease-out) var(--ic-delay,0ms)}
.adv-ic.charged{transform:none;opacity:1}
/* icon glyph subtle settle */
.adv-ic .icon{transition:transform var(--dur-3) var(--ease-spring) calc(var(--ic-delay,0ms) + var(--dur-0))}
.adv-ic.charged .icon{transform:none}
.adv-ic:not(.charged) .icon{transform:scale(.7)}
/* the fx ring element is no longer styled (no green glow); kept hidden */
.adv-ic-fx{display:none}
/* subtle lift on hover — no glow ring */
.adv:hover .adv-ic{transform:translateY(-2px) scale(1.04)}
.adv:hover .adv-ic .icon{transform:scale(1.04)}

@media(prefers-reduced-motion:reduce){
  .adv-ic{transform:none;opacity:1;transition:none}
  .adv-ic .icon{transform:none}
}
.stats-note{max-width:680px;margin:32px auto 0;text-align:center;font-weight:500;font-size:var(--fs-4);color:var(--ink-muted);line-height:1.5}
.srav-cta{margin:40px 0 0;display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--card);border-radius:var(--r-sm);padding:28px 32px}
.srav-cta-text{font-weight:600;font-size:var(--fs-5);flex:1;min-width:220px;margin:0}
@media(max-width:600px){.srav-cta{flex-direction:column;text-align:center}}


/* ---------- Cookie consent banner (152-ФЗ) ---------- */
.cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:1200;
  max-width:600px;margin-inline:auto;
  background:var(--card);border:1px solid rgba(23,23,23,.10);
  border-radius:var(--r-sm);padding:20px 20px;
  box-shadow:0 22px 60px -16px rgba(23,23,23,.4);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  /* Появление: сдвиг 16px и прозрачность за --dur-2 (прежде выезд на 150%
     своей высоты за 550 мс). Скрытая плашка не ловит Tab — visibility. */
  transform:translateY(16px);opacity:0;visibility:hidden;
  transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out),bottom var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2);
}
.cookie-bar.show{transform:translateY(0);opacity:1;visibility:visible;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out),bottom var(--dur-2) var(--ease-out),visibility 0s linear}
/* 21.09.2026: по центру внизу панель 600×143 накрывала вторую кнопку первого
   экрана на 1440. 25.09.2026: справа на bottom:80px она закрывала «+31,7%» в
   карточке «Маршрута задачи». Теперь — компактная, в самом углу (с зазором
   под пузырь чат-виджета), и выходит только при прокрутке или через 8 с. */
@media(min-width:901px){
  .cookie-bar{left:auto;right:88px;bottom:16px;max-width:360px;margin-inline:0;padding:16px;gap:12px}
  .cookie-bar-text{font-size:var(--fs-3);line-height:1.45;flex-basis:100%}
  .cookie-bar .ck-btn{padding:8px 16px;font-size:var(--fs-3)}
}
.cookie-bar-text{margin:0;font-size:var(--fs-4);line-height:1.5;flex:1 1 280px;color:var(--ink)}
.cookie-bar-text a{text-decoration:underline;color:inherit}
.cookie-bar-actions{display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap}
.ck-btn{font-weight:700;font-size:var(--fs-4);padding:12px 20px;border-radius:999px;border:none;cursor:pointer;transition:transform var(--dur-0) var(--ease-out),background var(--dur-1) var(--ease-out)}
.ck-btn:hover{transform:translateY(-2px)}
.ck-accept{background:var(--ink);color:#fff}
.ck-decline{background:transparent;color:var(--ink);border:1px solid rgba(23,23,23,.22)}
.ck-decline:hover{background:rgba(23,23,23,.05)}
@media(max-width:560px){
  /* bottom с запасом под липкую CTA-панель: она fixed на bottom:0 и высотой
     ~72px, а плашка живёт до выбора пользователя и раньше её накрывала.
     20.09.2026: плашка была 158px из 844 и накрывала кнопку первого экрана на
     пяти страницах из шести (замер на 390). Текст мельче, кнопки в один ряд,
     отступы вдвое — высота около 96px. */
  /* 25.09.2026: пока липкой полосы нет, плашка стоит у самого края (16px) —
     на bottom:80px она закрывала цифру результата в карточке первого экрана.
     Поднимается над полосой, только когда та выехала (html.cta-bar-on). */
  .cookie-bar{left:8px;right:8px;bottom:16px;padding:12px;gap:8px 12px}
  .cta-bar-on .cookie-bar{bottom:80px}
  .cookie-bar-text{font-size:var(--fs-2);line-height:1.4;flex:1 1 100%}
  .cookie-bar-actions{width:100%;gap:8px;flex-wrap:nowrap}
  .ck-btn{flex:1 1 0;min-width:0;padding:8px 12px;font-size:var(--fs-3)}
}
@media(prefers-reduced-motion:reduce){.cookie-bar{transition:opacity var(--dur-1) var(--ease-out)}}
/* Резервируем место под баннер вместо чистого overlay — иначе он накрывает
   то, что оказалось внизу экрана (SEO-аудит нашёл перекрытие hero-CTA на
   /echolytics/ на десктопе и мобильном, и trust-полосы на главной). Высоту
   меряет и пишет в переменную initCookieBar() в script.js — фиксированное
   число не подошло бы: текст переносится по-разному на разной ширине. */
body.ck-open{padding-bottom:var(--cookie-bar-h,0px);transition:padding-bottom var(--dur-2) var(--ease-out)}
@media(prefers-reduced-motion:reduce){body.ck-open{transition:none}}

/* ---------- Coach: pilot CTA + security notes ---------- */
.btn.btn-lg{padding:16px 32px;font-size:var(--fs-5)}
/* Строка о цене там, где своего тарифа у продукта пока нет: молчание о
   цене не откладывает вопрос, а отправляет человека искать порядок цифр
   на стороне. */
/* Подпись под парой «телефон / мессенджер»: обязательное — не поле, а
   любой из двух контактов, и звёздочка стоит на правиле, а не на поле. */
.contact-hint{grid-column:1/-1;margin:-4px 0 2px;font-size:var(--fs-3);line-height:1.45;color:var(--ink-muted)}
.contact-hint .req{color:var(--em-text)}
.ph-price-note{margin-top:16px;font-size:var(--fs-4);line-height:1.5;color:var(--ink-soft);max-width:56ch}
.ph-price-note a{color:var(--em-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ph-pilot-note{margin-top:16px;font-size:var(--fs-4);line-height:1.5;color:var(--ink-soft);max-width:560px}
.ph-sec-note{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-3);font-weight:600;color:var(--em-text);background:rgba(11,138,91,.08);padding:8px 16px;border-radius:999px}
.ph-sec-note .icon{width:15px;height:15px}
.ph-metric-foot{display:block;margin-top:2px;font-size:var(--fs-2);font-weight:600;color:var(--ink-muted);opacity:.85}
.cta-sec-note{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-3);font-weight:600;color:var(--on-dark)}
.cta-sec-note .icon{width:15px;height:15px}

/* ---------- Coach: comparison table ---------- */
.cmp-table thead th{font-weight:800;font-size:var(--fs-4);background:var(--bg)}
.cmp-table th:last-child,.cmp-table td.cmp-win{background:rgba(11,138,91,.08)}
.cmp-table td.cmp-win{font-weight:700;color:var(--ink)}
.cmp-table td:nth-child(2){color:var(--ink-muted)}

/* ---------- Coach: economics formula ---------- */
.econ-calc{display:grid;gap:20px}
.econ-formula{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 12px;padding:28px 24px;background:var(--card);border-radius:var(--r);border:1px solid rgba(23,23,23,.06)}
.econ-term{font-weight:700;font-size:var(--fs-4);background:var(--bg);border-radius:999px;padding:12px 20px;line-height:1.2;text-align:center}
.econ-term.econ-result{background:var(--ink);color:#fff}
.econ-op{font-weight:800;font-size:var(--fs-6);color:var(--ink-muted)}
.econ-example{background:var(--em-wash);border-radius:var(--r);padding:32px 32px}
.econ-example h3{font-weight:800;font-size:var(--fs-5);letter-spacing:-.02em;margin-bottom:16px}
.econ-line{font-size:var(--fs-lead-lg);font-weight:600;line-height:1.5}
.econ-line b{font-weight:800}
.econ-line .econ-x{color:var(--em-text);font-weight:800;margin:0 2px}
.econ-big{background:#fff;border-radius:var(--r-2xs);padding:2px 12px;white-space:nowrap}
.econ-note{margin-top:16px;font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft);max-width:620px}

/* ---------- Coach: product tour (real UI screenshots) ---------- */
.coach-tour{display:flex;flex-direction:column;gap:clamp(36px,6vw,76px)}
.tour-row{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;margin:0}
.tour-row:nth-child(even){grid-template-columns:.9fr 1.1fr}
.tour-row:nth-child(even) .shot{order:2}
.shot{border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid rgba(23,23,23,.08);box-shadow:0 34px 64px -30px rgba(23,23,23,.45)}
.shot img{display:block;width:100%;height:auto}
.tour-step{display:inline-block;font-weight:700;font-size:var(--fs-2);letter-spacing:.05em;text-transform:uppercase;color:var(--em-text);margin-bottom:12px}
.tour-text h3{font-weight:800;font-size:var(--fs-d1);letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
.tour-text>p{color:var(--ink-soft);line-height:1.6;font-size:var(--fs-5)}
.tour-pts{margin:16px 0 0;display:grid;gap:8px;list-style:none;padding:0}
.tour-pts li{position:relative;padding-left:28px;font-size:var(--fs-4);line-height:1.5;color:var(--ink)}
.tour-pts li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:var(--r-3xs);background:var(--em-wash);box-shadow:inset 0 0 0 2px var(--em-text)}
@media(max-width:820px){
  .tour-row,.tour-row:nth-child(even){grid-template-columns:1fr}
  .tour-row:nth-child(even) .shot{order:0}
}

/* ---------- Coach: app-frame mockup + tour extras ---------- */
.app-frame{border-radius:var(--r-xs);overflow:hidden;background:#fff;border:1px solid rgba(23,23,23,.10);box-shadow:0 34px 64px -30px rgba(23,23,23,.45);transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.tour-row:hover .app-frame,.tour-mini:hover .app-frame{transform:translateY(-6px);box-shadow:0 46px 84px -28px rgba(23,23,23,.5)}
.app-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--card);border-bottom:1px solid rgba(23,23,23,.07)}
.app-dot{width:10px;height:10px;border-radius:50%;flex:none;background:rgba(23,23,23,.16)}
.app-dot:nth-child(1){background:var(--em-text)}
.app-dot:nth-child(2){background:var(--em-wash)}
.app-dot:nth-child(3){background:var(--em-wash)}
.app-tab{margin-left:8px;font-size:var(--fs-2);font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid rgba(23,23,23,.08);border-radius:var(--r-2xs);padding:2px 12px}
.app-frame img{display:block;width:100%;height:auto}
/* dashboard payoff row gets a tinted panel */
.tour-row.tour-hl{background:rgba(11,138,91,.07);border-radius:var(--r);padding:clamp(24px,3.5vw,44px)}
/* admin strip (team + settings) */
.tour-admin{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px)}
.tour-mini{margin:0;display:flex;flex-direction:column;gap:16px}
.tour-mini figcaption h4{font-weight:800;font-size:var(--fs-5);letter-spacing:-.01em;margin-bottom:8px}
.tour-mini figcaption p{font-size:var(--fs-4);color:var(--ink-soft);line-height:1.5}
@media(max-width:760px){.tour-admin{grid-template-columns:1fr}}

/* ---------- Header product dropdowns: meaning big-gray on top, codename small-black below ---------- */
.dropdown-menu[aria-label="Продажи"] .dd-desc,
.dropdown-menu[aria-label="Процессы"] .dd-desc{order:1;font-weight:700;font-size:var(--fs-4);color:var(--ink-soft);letter-spacing:-.01em}
.dropdown-menu[aria-label="Продажи"] .dd-name,
.dropdown-menu[aria-label="Процессы"] .dd-name{order:2;font-weight:600;font-size:var(--fs-2);color:var(--ink);letter-spacing:.02em}

/* ---------- Coach: live badge ---------- */
.app-live{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-1);font-weight:700;color:var(--em-text);white-space:nowrap}
.app-live i{width:8px;height:8px;border-radius:50%;background:var(--em-text);box-shadow:0 0 0 0 rgba(11,138,91,.5);animation:phLive 1.8s var(--ease-out) infinite}
/* Разбор закончен: точка перестаёт пульсировать. */
.app-live.done i{animation:none;box-shadow:none}
@keyframes phLive{0%{box-shadow:0 0 0 0 rgba(11,138,91,.5)}70%{box-shadow:0 0 0 9px rgba(11,138,91,0)}100%{box-shadow:0 0 0 0 rgba(11,138,91,0)}}
.sim-tag{font-size:var(--fs-1);font-weight:700;color:#b8412a;background:rgba(244,122,45,.16);border-radius:999px;padding:2px 8px}

/* ---------- Coach hero: iPhone mockup with animated training-call ---------- */
.phone{position:relative;margin:0 auto;width:100%;aspect-ratio:300/610;background:#101012;border-radius:38px;padding:8px;box-shadow:0 36px 70px -22px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.06)}
.phone-island{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:74px;height:19px;background:#000;border-radius:var(--r-xs);z-index:6}
.phone-screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(172deg,#dff0ff,#E3F5ED 52%,#fff)}
.callsim{flex:1;display:flex;flex-direction:column;min-height:0}
.callsim-status{display:flex;align-items:center;justify-content:space-between;padding:32px 16px 4px;font-size:var(--fs-1);font-weight:600;color:var(--ink-soft)}
.callsim-stage{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:16px 16px 0;text-align:center;overflow:hidden;min-height:0}
.callsim-av{position:relative;width:80px;height:80px;border-radius:50%;flex:none;margin-top:8px;background:linear-gradient(135deg,#F47A2D,#e0631a);display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(244,122,45,.5)}
.callsim-av::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(11,138,91,.45);opacity:0;animation:ccRing 2.4s var(--ease-out) infinite}
.callsim.speaking .callsim-av::before{animation-duration:1.2s}
.callsim-face{font-weight:800;font-size:var(--fs-7);color:#fff;letter-spacing:.02em}
.callsim-name{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-weight:800;font-size:var(--fs-4);margin-top:8px;letter-spacing:-.01em}
.callsim-sub{font-size:var(--fs-1);color:var(--ink-muted)}
.callsim-warm{display:flex;align-items:center;gap:8px;width:78%;margin-top:12px;font-size:var(--fs-1);color:var(--ink-soft)}
.callsim-warm-bar{flex:1;height:6px;border-radius:var(--r-2xs);background:rgba(23,23,23,.12);overflow:hidden}
.callsim-warm-bar i{display:block;height:100%;width:8%;border-radius:var(--r-2xs);background:linear-gradient(90deg,var(--em-text),var(--em-text));transition:width var(--dur-3) var(--ease-out)}
.callsim-bubbles{position:absolute;inset:0;pointer-events:none}
.callsim-bubble{position:absolute;left:13px;right:13px;bottom:14px;padding:12px 12px;border-radius:var(--r-xs);font-size:var(--fs-3);line-height:1.4;box-shadow:0 12px 26px -10px rgba(23,23,23,.34);animation:bubbleIn var(--dur-3) var(--ease-out) both;text-align:left}
.callsim-bubble.out{animation:bubbleOut var(--dur-3) var(--ease-out) forwards}
.callsim-bubble .who{display:block;font-size:var(--fs-1);font-weight:700;opacity:.55;margin-bottom:2px}
.callsim-bubble.client{background:#fff;color:var(--ink);border:1px solid rgba(23,23,23,.07)}
.callsim-bubble.me{background:var(--em-text);color:#10324f}
.callsim-bubble.coach{background:var(--em-wash);color:var(--ink);font-weight:600;text-align:center}
.callsim-bar{display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 0 20px}
.cc-btn{width:46px;height:46px;border-radius:50%;border:none;background:#fff;box-shadow:0 6px 14px rgba(23,23,23,.16);display:grid;place-items:center;color:var(--ink);cursor:default}
.cc-btn .icon{width:18px;height:18px}
.cc-end{background:#e5484d;color:#fff;box-shadow:0 8px 18px rgba(229,72,77,.45)}
.cc-end .icon{transform:rotate(135deg)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(14px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bubbleOut{to{opacity:0;transform:translateY(-12px) scale(.96)}}
@keyframes ccRing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
@media(prefers-reduced-motion:reduce){.app-live i,.callsim-av::before,.callsim-bubble{animation:none}}

/* dock the phone in the hero bottom-right */
.ph-has-call{position:relative}
.ph-call{margin:32px auto 0;width:240px;max-width:80%}
@media(min-width:981px){
  .ph-has-call{padding-right:clamp(300px,28%,360px)}
  .ph-call{position:absolute;right:clamp(16px,2vw,36px);bottom:clamp(16px,2.5vw,40px);width:clamp(208px,22%,246px);margin:0;z-index:3}
}

/* ---------- Echolytics hero: animated call-scoring prototype ---------- */
.ph-has-sim{position:relative}
.echo-simwrap{margin:32px auto 0;width:100%;max-width:520px}
@media(min-width:981px){
  .ph-has-sim{padding-right:clamp(360px,36%,472px)}
  .echo-simwrap{position:absolute;right:clamp(18px,2.5vw,40px);bottom:clamp(18px,2.5vw,42px);width:clamp(330px,34%,430px);margin:0;z-index:3}
}
.echosim{background:linear-gradient(180deg,var(--em-wash),#ffffff 62%);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:248px}
.echosim-top{display:flex;align-items:center;gap:16px}
.echosim-ring{position:relative;width:64px;height:64px;flex:none}
.echosim-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.es-track{fill:none;stroke:rgba(23,23,23,.1);stroke-width:6}
.es-prog{fill:none;stroke:var(--em-text);stroke-width:6;stroke-linecap:round}
.echosim-num{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:var(--fs-5);color:var(--em-text)}
.echosim-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.echosim-who b{font-size:var(--fs-4);font-weight:800;letter-spacing:-.01em}
.echosim-who>span{font-size:var(--fs-2);color:var(--ink-muted)}
.echosim-verdict{align-self:flex-start;margin-top:2px;font-size:var(--fs-1);font-weight:700;color:var(--ink-soft);background:rgba(23,23,23,.06);border-radius:999px;padding:2px 8px;transition:color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.echosim-verdict.ok{color:var(--em-text);background:rgba(11,138,91,.13)}
.echosim-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.echosim-checks li{display:flex;align-items:center;gap:8px;font-size:var(--fs-3);color:var(--ink-muted);transition:color var(--dur-2) var(--ease-out)}
.echosim-checks li::before{content:"";width:17px;height:17px;border-radius:var(--r-3xs);flex:none;border:1.5px solid rgba(23,23,23,.2);display:grid;place-items:center;font-size:var(--fs-1);font-weight:800;color:#fff;transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.echosim-checks li.on{color:var(--ink)}
.echosim-checks li.on::before{content:"✓";background:var(--em-text);border-color:var(--em-text)}
/* Частично пройденный пункт: не галочка и не пусто. Из-за него балл
   и выходит 9.2, а не 10 — иначе четыре зелёные галочки подряд
   читаются как самореклама, а не как разбор. */
.echosim-checks li.part{color:var(--ink-soft)}
.echosim-checks li.part::before{content:"–";background:#fff;border-color:var(--em-text);color:var(--em-text)}
.echosim-flag{display:flex;align-items:center;gap:8px;font-size:var(--fs-2);font-weight:600;color:var(--ink-soft);background:rgba(23,23,23,.04);border:1px solid var(--line-2);border-radius:var(--r-2xs);padding:8px 12px;opacity:0;transform:translateY(6px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.echosim-flag.on{opacity:1;transform:none}
.echosim-flag .icon{width:15px;height:15px;color:var(--em-text);flex:none}
@media(prefers-reduced-motion:reduce){.es-prog{transition:none!important}}

/* ---------- Phonex hero: live-dialer prototype docked bottom-right ---------- */
.ph-has-dialer{position:relative}
.ph-dialer-wrap{margin:32px auto 0;width:100%;max-width:340px}
@media(min-width:981px){
  .ph-has-dialer{padding-right:clamp(340px,32%,400px)}
  .ph-dialer-wrap{position:absolute;right:clamp(18px,2vw,38px);bottom:clamp(18px,2.5vw,42px);width:clamp(290px,28%,332px);margin:0;z-index:3}
}
.dialer{background:linear-gradient(180deg,#ffffff,#f7f6f2);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:300px}
.dialer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dialer-now{display:flex;align-items:center;gap:12px;min-width:0}
.dialer-ring{position:relative;width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--em-wash);color:var(--em-text)}
.dialer-ring .icon{width:17px;height:17px}
.dialer-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--em-text);opacity:0}
.dialer-ring.is-calling::before{animation:dialRing 1s var(--ease-out) infinite}
@keyframes dialRing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.dialer-now-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.dialer-now-t b{font-size:var(--fs-3);font-weight:800;color:var(--ink)}
.dialer-num{font-size:var(--fs-2);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dialer-kpi{text-align:right;flex:none}
.dialer-kpi b{display:block;font-size:var(--fs-6);font-weight:800;color:var(--em-text);letter-spacing:-.02em;line-height:1}
.dialer-kpi span{font-size:var(--fs-1);color:var(--ink-muted);font-weight:600}
.dialer-bar{display:block;height:7px;border-radius:var(--r-2xs);background:rgba(23,23,23,.1);overflow:hidden}
.dialer-bar i{display:block;height:100%;width:88%;border-radius:var(--r-2xs);background:linear-gradient(90deg,var(--em-wash),var(--em-text))}
.dialer-meta{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-1);color:var(--ink-muted)}
.dialer-meta b{color:var(--ink);font-weight:700}
.dialer-feed{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.dialer-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:var(--r-2xs);background:#fff;border:1px solid rgba(23,23,23,.07);font-size:var(--fs-2);animation:dialRow var(--dur-2) var(--ease-out) both}
.dialer-rn{color:var(--ink);font-variant-numeric:tabular-nums}
.dialer-rs{font-weight:700;font-size:var(--fs-1);white-space:nowrap}
.dialer-rs.ok{color:var(--em-text)}
.dialer-rs.bl{color:#2E6FC2}
.dialer-rs.mut{color:var(--ink-muted)}
@keyframes dialRow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dialer-ring.is-calling::before{animation:none}.dialer-row{animation:none}}

/* ============ Homepage redesign: "yanalitics" — white + coral (scoped body.ed) ============ */
/* Значения переехали в :root — здесь остаётся только то, что относится к
   самому элементу. Компонентные правила ниже пока сохраняют префикс .ed:
   снятие префикса — отдельный шаг со своими рисками по специфичности. */
.ed{background:var(--bg);color:var(--ink)}
.ed h1,.ed h2,.ed h3{font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.ed .sec-head h2{font-size:var(--fs-d2);line-height:1.12}
/* Призыв и полоса безопасности — такие же заголовки секций. Их вес несут
   тёмная подложка, изумрудный градиент и тень, а не лишняя ступень кегля:
   на странице статьи призыв выходил крупнее её собственного H1. */
.ed .cta-big h2,.ed .security h2{font-size:var(--fs-d2)}
/* Внутри тёмных полос обычный абзац наследовал --ink-soft — цвет,
   рассчитанный на белый фон: 2.76:1 на #111. Здесь нужен светлый. */
.ed .cta-big .sec-head p,.ed .roi .sec-head p,.ed .security .sec-head p{color:var(--on-dark-soft)}
.ed .cta-big .tag,.ed .roi .tag,.ed .security .tag{color:var(--on-dark-soft)}
.ed .sec-head p{color:var(--ink-soft)}
.ed .tag{background:none;border:0;padding:0;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-2);font-weight:700;font-family:inherit}
.ed .tag .dot{display:none}
.ed .mk{background:none!important;color:#0B8A5B!important;font-style:normal;padding:0;border-radius:0}
/* under .ed the mk has no highlight bg, so long emphasized hero phrases can wrap instead of overflowing */
.ed .page-hero h1 .mk{white-space:normal}
/* buttons */
.ed .btn{border-radius:var(--r-xs)}
.ed .btn-dark{background:#1A1A1A;color:#fff}
.ed .btn-mint,.ed .btn-white{background:var(--em-text);color:#fff;border:0}
.ed .btn-mint:hover,.ed .btn-white:hover{background:#096847;box-shadow:0 14px 30px -14px rgba(11,138,91,.6)}
.ed .btn-ghost{background:none;border:1px solid #E2E2E2;color:var(--ink)}
.ed .btn-ghost:hover{border-color:#1A1A1A;box-shadow:none}
/* flat white cards */
.ed .adv,.ed .uc,.ed .card-p,.ed .testi,.ed .int-card,.ed .case,.ed .step,.ed .plan{
  background:#fff;border:1px solid #ECECEC;box-shadow:0 14px 34px -22px rgba(0,0,0,.18)}
.ed .adv:hover,.ed .card-p:hover,.ed .plan:hover{border-color:#0B8A5B;box-shadow:0 22px 46px -22px rgba(11,138,91,.30)}
.ed .card-p::before{display:none}
.ed .card-p.tint-mint,.ed .card-p.tint-yellow,.ed .card-p.tint-blue{background:#fff}
/* coral line-art icon wrappers */
.ed .adv-ic,.ed .step-icon,.ed .dd-point-ic,.ed .int-ic,.ed .testi-avatar{background:#E3F5ED!important;color:#0B8A5B!important}
/* канон DESIGN.md: two-tone — тёмная линия + ровно один изумрудный акцент (--ic-ac проникает в <use>) */
.ed .adv-ic .icon,.ed .step-icon .icon,.ed .int-ic .icon,.ed .uc-icon .icon,.ed .dd-point-ic .icon,.ed .testi-avatar .icon{color:#3A3A40!important;--ic-ac:#0B8A5B}
.ed .uc-icon{color:#3A3A40}
.ed .step-num{color:rgba(11,138,91,.16)}
/* dark rounded bands */
.ed .roi,.ed .security,.ed .cta-big{background:#111!important;border-radius:var(--r-band)}
.ed .roi h2,.ed .security h2,.ed .cta-big h2{color:#fff}
.ed .roi h2 .mk,.ed .security h2 .mk,.ed .cta-big h2 .mk{color:#0B8A5B!important}
.ed .nx-leg-hub{background:#0B8A5B!important}
.ed .nx-leg-c{background:#0B8A5B!important}
.ed .nx-leg-s{background:#1A1A1A!important}
.ed .roi-result{background:rgba(255,255,255,.06)}
.ed .roi-result-num{color:#0B8A5B}
.ed .roi-range::-webkit-slider-thumb{background:#0B8A5B;border-color:#fff}
.ed .roi-range::-moz-range-thumb{background:#0B8A5B;border-color:#fff}
.ed .sec-item-ic{background:rgba(11,138,91,.20)!important;color:#0B8A5B!important}
.ed .sec-item-ic .icon{color:#0B8A5B!important}
/* lead form (light card on soft gray) */
.ed .lead{background:#F6F6F7}
.ed .lead .form-grid{background:#fff;border:1px solid #ECECEC}
.ed .lead-perk::before{background:#0B8A5B}
/* pricing */
.ed .plan.featured{background:#fff;border:1.5px solid #0B8A5B}
.ed .plan-badge{background:var(--em-text);color:#fff}
.ed .plan-feat::before{color:var(--em-text)}
.ed .plan-rr{background:#E3F5ED;color:var(--em-text)}
.ed .switch input:checked + .slider{background:#0B8A5B}
.ed .tab-btn.active{background:#1A1A1A;color:#fff}
/* faq → hairline accordion rows */
.ed .faq-list{gap:0}
.ed .faq-item{background:none;border:0;border-bottom:1px solid #ECECEC;border-radius:0;overflow:hidden}
.ed .faq-q{padding:24px 52px 24px 4px;font-size:var(--fs-5);position:relative}
.ed .faq-q:hover{background:none;color:var(--em-text)}
.ed .faq-ic{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.ed .faq-item.open .faq-ic{transform:translateY(-50%) rotate(45deg)}
.ed .faq-a{padding:0 56px 0 4px;max-width:78ch}
.ed .faq-item.open .faq-a{padding:0 56px 24px 4px}
.ed .faq-ic{background:none;border:1.5px solid #D9DDDB;color:#0B8A5B}
.ed .faq-item.open .faq-ic{border-color:#0B8A5B}
/* nexus → see premium dark tool-graph redo near end of file (.ed .nexus …) */
.ed .nx-flowline,.ed .nx-current,.ed .nx-scan-line{stroke:var(--em-on-dark)}
.ed .nx-orbit{fill:var(--em-on-dark);filter:none}
/* brand-band */
.ed .brand-band-word{color:var(--ink)}
.ed .brand-band-slogan{color:var(--ink-muted)}
/* comparison table → coral */
.ed .compare-table th:nth-child(3){background:#E3F5ED}
.ed .compare-table td:nth-child(3){background:rgba(11,138,91,.08)}
.ed .ic-yes{color:#0B8A5B}

/* ================= Hero (yanalitics) ================= */
.hero-yn{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(24px,3.5vw,48px);align-items:center;margin-top:8px;padding:clamp(20px,2.5vw,40px) 16px}
.yn-text{max-width:620px;position:relative;z-index:2}
.yn-h1{margin:0;font-weight:800;font-size:var(--fs-d4);line-height:1.05;letter-spacing:-.035em;color:#1A1A1A}
.yn-h1 .mk{color:#0B8A5B;background:none;padding:0}
.yn-pill{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:.92em;vertical-align:-.04em;margin:0 .1em;border-radius:.44em;background:linear-gradient(95deg,#1FB47E,#0B8A5B);box-shadow:0 8px 18px -7px rgba(11,138,91,.6);color:#fff}
.yn-pill svg{width:.5em;height:.5em}
.yn-sub{margin:24px 0 0;max-width:48ch;font-size:var(--fs-lead);line-height:1.62;color:var(--ink-soft);font-weight:500}
/* «ИИ-трансформация» не должна разваливаться по дефису: подчёркнутая ссылка,
   разорванная на «AI-» и остаток, читается как опечатка, а не как перенос.
   Проверено на 320px — строка нигде не вылезает за колонку. */
a[href="/ai-transformaciya/"]{white-space:nowrap}

.yn-cta{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
/* В столбик кнопки должны быть одной ширины: разная длина подписи не повод
   для разной ширины плитки. На широком экране они стоят в строку и жмутся
   по содержимому, как и было. */
@media(max-width:560px){.yn-cta{gap:12px}.yn-cta .btn{flex:1 1 100%;justify-content:center}}
/* Вторая дверь в герое. Намеренно строкой, а не третьей кнопкой: два входа
   равного веса делят внимание и роняют конверсию обоих. Продуктовая дверь
   остаётся основной, эта — узкой и для того, кто уже знает, что ему нужно
   не одно решение. */
.yn-second{margin:16px 0 0;max-width:48ch;font-size:var(--fs-4);line-height:1.5;color:var(--ink-muted)}
.yn-second a{color:var(--em-text);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.yn-trust{margin-top:28px;display:flex;gap:16px 24px;flex-wrap:wrap}
.yn-trust div{display:flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-4);color:var(--ink)}
.yn-trust div::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:#0B8A5B no-repeat center/10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7 9.5 3.7' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.yn-metrics{margin-top:36px;display:flex;gap:24px 40px;flex-wrap:wrap}
.yn-metrics .n{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.03em;line-height:1;color:#1A1A1A}
.yn-metrics .l{margin-top:8px;font-weight:600;font-size:var(--fs-3);color:var(--ink-soft);max-width:140px;line-height:1.35}

/* hero scene: iso plane + neuro-cloud emblem + floating cards + coral shapes */
.yn-scene{position:relative;height:clamp(360px,38vw,500px)}
.yn-scene>*{position:absolute}
.yn-dots{inset:-8% -6%;z-index:0;background-image:radial-gradient(rgba(0,0,0,.10) 1.2px,transparent 1.2px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 70% at 60% 45%,#000,transparent 78%);mask-image:radial-gradient(70% 70% at 60% 45%,#000,transparent 78%)}
.yn-glow{right:4%;top:8%;width:64%;height:70%;z-index:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(11,138,91,.30),rgba(245,138,130,.08) 55%,transparent 72%);filter:blur(6px)}
.yn-stage{left:9%;top:18%;width:64%;aspect-ratio:5/4;z-index:1;border-radius:var(--r);background:#fff;border:1.5px solid #EFEFEF;
  box-shadow:0 44px 84px -42px rgba(0,0,0,.30);transform:perspective(1300px) rotateX(7deg) rotateY(-17deg) rotate(1deg)}
.yn-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(130% 90% at 28% 8%,rgba(11,138,91,.12),transparent 58%)}
.yn-emblem{left:16%;top:1%;width:56%;z-index:3;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.14));animation:ynFloat 6.5s var(--ease-smooth) infinite}
.yn-card{z-index:2;background:#fff;border:1.5px solid #ECECEC;border-radius:var(--r-xs);box-shadow:0 20px 38px -24px rgba(0,0,0,.24);overflow:hidden;animation:ynFloat 7s var(--ease-smooth) infinite}
.yn-card i{position:absolute;left:12px;height:5px;border-radius:var(--r-3xs);background:#EFEFEF}
.yn-card i:nth-child(1){top:14px;width:46%}
.yn-card i:nth-child(2){top:26px;width:64%}
.yn-card .tri{position:absolute;right:11px;top:11px;width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #0B8A5B}
.yn-card.c1{left:1%;top:6%;width:24%;height:62px;transform:rotate(-7deg)}
.yn-card.c2{right:1%;top:1%;width:21%;height:56px;transform:rotate(6deg);animation-delay:-1.6s}
.yn-card.c3{left:6%;bottom:3%;width:26%;height:64px;transform:rotate(5deg);animation-delay:-3.1s}
.yn-card.c4{right:5%;bottom:8%;width:22%;height:58px;transform:rotate(-6deg);animation-delay:-2.2s}
.yn-pie{right:2%;top:24%;width:80px;height:80px;z-index:2;border-radius:50%;background:conic-gradient(#0B8A5B 0 27%,#C7EAD9 27% 100%);animation:ynSpin 16s linear infinite}
.yn-pie::after{content:"";position:absolute;inset:30%;border-radius:50%;background:#fff}
.yn-cyl{right:8%;bottom:14%;width:58px;height:78px;z-index:2;border-radius:29px/13px;background:linear-gradient(180deg,#C7EAD9,#0B8A5B);animation:ynFloat 8s var(--ease-smooth) infinite;animation-delay:-1s}
.yn-cyl::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;border-radius:50%;background:#D7F0E3}
.yn-arc{right:0;top:6%;width:74px;height:74px;z-index:1;border-radius:0 74px 0 0;background:linear-gradient(135deg,#0B8A5B,#C7EAD9);opacity:.55;animation:ynFloat 9s var(--ease-smooth) infinite;animation-delay:-2.5s}

/* emblem micro-animations */
#yn-gauge{stroke-dasharray:150;stroke-dashoffset:150;animation:ynDraw 1.7s var(--dur-2) var(--ease-out) forwards}
@keyframes ynDraw{to{stroke-dashoffset:18}}
.yn-pbar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:ynGrowX 1s var(--ease-out) forwards}
#yn-pbar1{animation-delay:.55s}#yn-pbar2{animation-delay:.75s}
@keyframes ynGrowX{to{transform:scaleX(1)}}
.yn-bars rect{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:ynGrowY .75s var(--ease-out) forwards}
.yn-bars rect:nth-child(1){animation-delay:.6s}.yn-bars rect:nth-child(2){animation-delay:.72s}
.yn-bars rect:nth-child(3){animation-delay:.84s}.yn-bars rect:nth-child(4){animation-delay:.96s}
@keyframes ynGrowY{to{transform:scaleY(1)}}
#yn-chip{transform-box:fill-box;transform-origin:center;animation:ynPulse 2.8s var(--ease-smooth) 1.3s infinite}
@keyframes ynPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ynFloat{0%,100%{transform:translateY(0) var(--rot,)}50%{transform:translateY(-11px) var(--rot,)}}
@keyframes ynSpin{to{transform:rotate(360deg)}}

@media(max-width:900px){.hero-yn{grid-template-columns:1fr}.yn-scene{height:320px;margin-top:4px}.yn-stage{left:14%;width:60%}}
@media (prefers-reduced-motion:reduce){
  .yn-emblem,.yn-card,.yn-pie,.yn-cyl,.yn-arc{animation:none}
  #yn-gauge{stroke-dashoffset:18;animation:none}
  .yn-pbar,.yn-bars rect{transform:none;animation:none}#yn-chip{animation:none}
}

/* bespoke two-tone feature icons */
.ed .ficon{width:28px;height:28px;display:block}
.ed .uc-icon{width:54px;height:54px;border-radius:var(--r-xs);background:#E3F5ED;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ed .uc-icon .ficon{width:30px;height:30px}
.ed .sec-item-ic .ficon{width:24px;height:24px}
.ed .dd-point-ic{width:30px;height:30px;border-radius:var(--r-2xs);background:#E3F5ED!important}
.ed .dd-point-ic .ficon{width:18px;height:18px}
.ed .int-ic .ficon{width:24px;height:24px}

/* ================= Polish pass (homepage analysis P0+P1+P2) ================= */
/* P0/H1 — icons visible on the dark security band */
.ed .security .ficon{stroke:#fff}
/* M1 — calmer neutral icon wrappers; reserve coral for accents & CTAs */
.ed .adv-ic,.ed .step-icon,.ed .dd-point-ic,.ed .int-ic{background:#F3F3F4!important}
/* --- значок карточки без плитки ---
   Серый квадрат 52px на белой карточке не читался как элемент: он читался
   как пятно, а значок 24px внутри него занимал 46% и терялся. Замерено, что
   на сайте это единственная плитка без бренда (#F3F3F4 + уголь), тогда как
   .bc-mod-ic рядом идёт изумрудом по #E3F5ED. Красить эти 1110 плиток в
   изумруд нельзя: решение «calmer neutral icon wrappers» выше сделано
   сознательно, акцент бережём для CTA. Поэтому идём в другую сторону и
   доводим то же решение до конца — нейтральнее пустоты ничего нет. Плитка
   снята, значок вырос до display-ступени и стоит прямо на карточке по левому
   краю текста. .step-icon и остальные из строки выше не трогаем: там плитка
   несёт номер шага. */
.ed .adv-ic{background:transparent!important;display:inline-flex;justify-content:flex-start;
  width:auto;height:auto;font-size:var(--fs-d1);margin-bottom:20px}
.ed .adv-ic .icon{stroke-width:1.5}
.ed .uc-icon{background:#F3F3F4}
.ed .sec-item-ic{background:rgba(255,255,255,.08)!important}
/* M2 — uniform stat cards + coral number */
.ed .stat{background:#F6F6F7!important}
.ed .stat-num{color:#0B8A5B}
/* M5 — coral "wow" numbers in cases & industries */
.ed .case-metric-num,.ed .tab-metric-num{color:#0B8A5B}
/* M4 — product cards: top-aligned content, links pinned to the bottom */
.ed .card-p{justify-content:flex-start}
.ed .card-p h3{margin-top:16px}
.ed .card-p .card-link{margin-top:auto;padding-top:20px}
/* M7 — drop the noisy scrollytelling narrator tooltips on the homepage */
.ed .scrolly{display:none!important}
/* M3 — rhythm: soft inset panels break the white card monotony */
/* чередование фонов на подстраницах: мягкая inset-панель (класс уже расставлен в разметке) */
.ed .sec-alt{background:#F6F6F7;border-radius:var(--r-band);padding:clamp(28px,3vw,48px) clamp(20px,2.5vw,36px);margin-top:48px}
.ed .sec-alt .sec-head{padding-left:0;padding-right:0}
.ed #how,.ed [aria-labelledby="testi-h"]{background:#F6F6F7;border-radius:var(--r-band);padding:clamp(28px,3vw,48px) clamp(20px,2.5vw,36px);margin-top:48px}
.ed #how .sec-head,.ed [aria-labelledby="testi-h"] .sec-head{padding-left:0;padding-right:0}
/* L1 — Echolytics dashboard bars animate in (subtle product life) */
.ed .deepdive .dd-bar{transform-box:fill-box;transform-origin:bottom;animation:ddGrow .8s var(--ease-out) backwards}
.ed .deepdive .dd-bar:nth-child(1){animation-delay:.05s}
.ed .deepdive .dd-bar:nth-child(2){animation-delay:.14s}
.ed .deepdive .dd-bar:nth-child(3){animation-delay:.23s}
.ed .deepdive .dd-bar:nth-child(4){animation-delay:.32s}
.ed .deepdive .dd-bar:nth-child(5){animation-delay:.41s}
.ed .deepdive .dd-bar:nth-child(6){animation-delay:.5s}
.ed .deepdive .dd-bar:nth-child(7){animation-delay:.59s}
@keyframes ddGrow{from{transform:scaleY(.18);opacity:.35}to{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.ed .deepdive .dd-bar{animation:none}}

/* ================= S-tier pass 1: conversion structure ================= */
/* one unmistakable action colour — coral CTAs */
/* Основная кнопка — тёмная таблетка, как и задумано в DESIGN.md. Изумруд
   остаётся акцентным: им покрашены .btn-mint и .btn-white. */
.ed .btn-dark:hover{background:#000;box-shadow:0 16px 32px -14px rgba(0,0,0,.45)}
.ed .cta-big .btn-white{background:var(--em-text);color:#fff}
.ed .cta-big .btn-white:hover{background:#096847}
/* ghost/secondary button on dark bands: white outline, was invisible (ink-on-dark) */
.ed .cta-big .btn-ghost,.ed .roi .btn-ghost,.ed .security .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
/* На тёмной полосе основная кнопка обязана перевернуться: почти чёрная на
   почти чёрном фоне давала контраст 1.08:1 — кнопка была, но её не было
   видно. Поймано обходом уже после правки: разметка полосы — не section,
   и первая проверка её не увидела. */
.ed .cta-big .btn-dark,.ed .roi .btn-dark,.ed .security .btn-dark,.ed #stats.statdark .btn-dark{background:#fff;color:var(--ink);box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
.ed .cta-big .btn-dark:hover,.ed .roi .btn-dark:hover,.ed .security .btn-dark:hover,.ed #stats.statdark .btn-dark:hover{background:#F6F6F7;box-shadow:0 18px 36px -16px rgba(0,0,0,.7)}
.ed .cta-big .btn-ghost:hover,.ed .roi .btn-ghost:hover,.ed .security .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff}
/* depth on the dark bands (coral glow corner) */
.ed .roi,.ed .security,.ed .cta-big{background:radial-gradient(120% 150% at 100% 0%,rgba(11,138,91,.20),transparent 46%),#111!important}
/* trust strip (replaces decorative brand-band) */
.trust-strip{margin-top:44px;padding:32px clamp(20px,3vw,44px);border:1px solid #ECECEC;border-radius:var(--r);background:#fff;box-shadow:0 18px 44px -28px rgba(0,0,0,.16)}
.ts-points{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 0;align-items:start}
.ts-points span{display:flex;flex-direction:column;gap:8px;min-width:0;padding:0 clamp(12px,1.6vw,24px);border-left:1px solid var(--line)}
.ts-points span:first-child{border-left:0;padding-left:0}
.ts-points b{display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-weight:800;line-height:1;color:#1A1A1A}
.ts-points .ts-v{font-style:normal;font-size:var(--fs-d2);letter-spacing:-.03em}
.ed .ts-points .ts-u{font-style:normal;font-family:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--fs-5);font-weight:700;letter-spacing:0;color:var(--em-text)}
.ed .ts-points .ts-u--pct{margin-left:-8px;font-family:var(--mono);font-size:var(--fs-d1)}
.ts-points i{font-style:normal;font-weight:600;font-size:var(--fs-3);color:#6A6A72;line-height:1.4;max-width:22ch}
.ts-int{margin-top:24px;padding-top:20px;border-top:1px solid #F6F6F7;text-align:center;font-size:var(--fs-4);font-weight:600;color:#6A6A72}
.ts-int-lbl{color:#1A1A1A}
@media(max-width:1000px){.ts-points{grid-template-columns:repeat(3,minmax(0,1fr))}.ts-points span:nth-child(4){border-left:0;padding-left:0}}
@media(max-width:760px){.ts-points{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-points span{border-left:0;padding-left:0}.ts-points span:last-child{grid-column:1/-1}.ts-int{font-size:var(--fs-3)}}

/* ================= S-tier pass 2: section craft ================= */
.ed .kicker{display:block;margin:0 0 12px;font-weight:700;font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;color:var(--em-text)}
.ed .sec-head{padding-bottom:28px}
/* anchor jumps must not hide headings under the sticky header */
html{scroll-padding-top:96px}
.ed section[id]{scroll-margin-top:96px}

/* ================= Hero product mockup (replaces iso scene) ================= */
.hero-app{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(360px,36vw,470px)}
.ha-win{width:min(100%,520px);background:#fff;border:1px solid #ECECEC;border-radius:var(--r-sm);box-shadow:0 44px 90px -40px rgba(0,0,0,.32);overflow:hidden;transform:perspective(1500px) rotateY(-6deg) rotateX(1.5deg)}
.ha-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #F6F6F7;background:#F6F6F7}
.ha-bar .d{width:9px;height:9px;border-radius:50%;background:#E2E2E2}
.ha-bar .d:first-child{background:#0B8A5B}
.ha-bar b{margin-left:8px;font-size:var(--fs-3);font-weight:700;color:#1A1A1A}
.ha-live{margin-left:auto;font-size:var(--fs-1);font-weight:800;letter-spacing:.1em;color:var(--em-text);display:flex;align-items:center;gap:4px}
.ha-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#0B8A5B;animation:haPulse 1.6s var(--ease-smooth) infinite}
.ha-body{padding:20px;display:flex;flex-direction:column;gap:20px}
.ha-row{display:flex;gap:24px;align-items:center}
.ha-score{position:relative;width:92px;height:92px;flex:none}
.ha-score svg{width:92px;height:92px;display:block}
.ha-score-n{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:var(--fs-7);color:#1A1A1A;letter-spacing:-.02em}
.ha-kpis{display:flex;flex-direction:column;gap:12px;flex:1}
.ha-kpis b{font-weight:800;font-size:var(--fs-6);color:#1A1A1A;letter-spacing:-.02em;line-height:1}
.ha-kpis b.up{color:var(--em-text)}
.ha-kpis i{display:block;font-style:normal;font-size:var(--fs-2);color:#6A6A72;margin-top:2px}
.ha-chart{border-top:1px solid #F4F4F4;padding-top:16px}
.ha-chart-h{font-size:var(--fs-1);font-weight:700;color:#6A6A72;text-transform:uppercase;letter-spacing:.09em}
.ha-bars{display:flex;align-items:flex-end;gap:8px;height:66px;margin-top:12px}
.ha-bars i{flex:1;height:var(--h);background:#C7EAD9;border-radius:6px 6px 0 0;transform-box:fill-box;transform-origin:bottom;animation:haGrow var(--dur-3) var(--ease-out) backwards}
.ha-bars i.hot{background:#0B8A5B}
.ha-bars i:nth-child(1){animation-delay:.30s}.ha-bars i:nth-child(2){animation-delay:.38s}.ha-bars i:nth-child(3){animation-delay:.46s}.ha-bars i:nth-child(4){animation-delay:.54s}.ha-bars i:nth-child(5){animation-delay:.62s}.ha-bars i:nth-child(6){animation-delay:.70s}.ha-bars i:nth-child(7){animation-delay:.78s}
.ha-tags{display:flex;flex-wrap:wrap;gap:8px}
.ha-tags span{font-size:var(--fs-2);font-weight:600;padding:8px 12px;border-radius:999px;background:#F6F6F7;color:#5A5A60}
.ha-tags span.hot{background:#E3F5ED;color:var(--em-text)}
.ha-float{position:absolute;left:-7%;bottom:-5%;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #ECECEC;border-radius:var(--r-xs);padding:12px 16px;box-shadow:0 26px 48px -22px rgba(0,0,0,.28);animation:haFloat 5.5s var(--ease-smooth) infinite;z-index:3}
.ha-float-ic{width:34px;height:34px;border-radius:var(--r-2xs);background:#E3F5ED;color:#0B8A5B;display:grid;place-items:center;flex:none}
.ha-float-ic svg{width:16px;height:16px}
.ha-float-t b{display:block;font-size:var(--fs-4);font-weight:800;color:#1A1A1A;line-height:1.1}
.ha-float-t i{font-style:normal;font-size:var(--fs-2);color:#6A6A72}
#ha-gauge{stroke-dasharray:201;stroke-dashoffset:201;animation:haGauge 1.6s var(--dur-2) var(--ease-out) forwards}
@keyframes haGauge{to{stroke-dashoffset:20}}
@keyframes haGrow{from{transform:scaleY(.1);opacity:.3}to{transform:scaleY(1);opacity:1}}
@keyframes haPulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes haFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:900px){.hero-app{min-height:300px;margin-top:8px}.ha-float{left:2%}}
@media (prefers-reduced-motion:reduce){.ha-win,.ha-float{animation:none}.ha-bars i{animation:none}#ha-gauge{stroke-dashoffset:20;animation:none}.ha-live::before{animation:none}}

/* ================= S-tier: white scroll header (homepage) ================= */
/* Линия снизу — тенью, а не border-bottom: рамка добавляла шапке 1px высоты. */
.ed .site-header.scrolled{background:rgba(255,255,255,.9);box-shadow:0 1px 0 #ECECEC,0 6px 22px -8px rgba(0,0,0,.12)}
.ed .site-header::after{display:none}

/* cohesive card hover lift across the page */
.ed .uc,.ed .case,.ed .testi,.ed .int-card{transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.ed .uc:hover,.ed .case:hover,.ed .testi:hover,.ed .int-card:hover{transform:translateY(-4px);border-color:#0B8A5B;box-shadow:0 22px 46px -24px rgba(11,138,91,.28)}

/* ================= Live call-analysis demo (Echolytics) ================= */
.calldemo{display:flex;flex-direction:column;justify-content:flex-start}
.calldemo .cd-top{display:flex;align-items:center;gap:8px;font-size:var(--fs-3);font-weight:700;color:#1A1A1A;padding-bottom:12px;border-bottom:1px solid #F6F6F7;margin-bottom:16px}
.cd-dot{width:9px;height:9px;border-radius:50%;background:#0B8A5B;box-shadow:0 0 0 4px rgba(11,138,91,.14);flex:none}
.cd-live{margin-left:auto;font-size:var(--fs-1);font-weight:800;letter-spacing:.1em;color:var(--em-text);display:flex;align-items:center;gap:4px}
.cd-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#0B8A5B;animation:haPulse 1.6s var(--ease-smooth) infinite}
.cd-feed{display:flex;flex-direction:column;gap:8px;min-height:184px}
.cd-line{max-width:84%;padding:8px 12px;border-radius:var(--r-xs);font-size:var(--fs-4);line-height:1.4;font-weight:500;position:relative;animation:cdIn var(--dur-2) var(--ease-out) backwards}
.cd-line.cli{align-self:flex-start;background:#F6F6F7;color:#3A3A40;border-bottom-left-radius:4px}
.cd-line.mgr{align-self:flex-end;background:#E3F5ED;color:var(--em-text);border-bottom-right-radius:4px}
.cd-line.obj{background:#fff;box-shadow:inset 0 0 0 1.5px #0B8A5B;margin-top:8px}
.cd-line.obj::after{content:"возражение";position:absolute;top:-9px;left:11px;font-size:var(--fs-1);font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:#0B8A5B;color:#fff;padding:1px 8px;border-radius:var(--r-2xs)}
@keyframes cdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cd-analysis{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid #F6F6F7;opacity:0;transform:translateY(8px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.cd-analysis.show{opacity:1;transform:none}
.cd-score{display:flex;flex-direction:column;align-items:center;flex:none}
.cd-score b{font-size:var(--fs-7);font-weight:800;color:#0B8A5B;line-height:1;letter-spacing:-.02em}
.cd-score i{font-style:normal;font-size:var(--fs-1);color:#6A6A72;margin-top:2px}
.cd-chips{display:flex;flex-direction:column;gap:8px}
.cd-chip{font-size:var(--fs-2);font-weight:700;padding:8px 12px;border-radius:999px;background:#F6F6F7;color:#5A5A60}
.cd-chip.ok{background:#E3F5ED;color:var(--em-text)}
@media (prefers-reduced-motion:reduce){.cd-line{animation:none}.cd-analysis{transition:none}.cd-live::before{animation:none}}

/* ================= Interactive product card mini-previews ================= */
.ed .card-p{position:relative}
.ed .card-viz{position:absolute;top:24px;right:26px;width:54px;height:40px;opacity:.45;transition:opacity var(--dur-2) var(--ease-out);pointer-events:none;z-index:2}
.ed .card-p:hover .card-viz{opacity:1}
/* Echolytics — equalizer */
.cv-eq{display:flex;align-items:flex-end;justify-content:flex-end;gap:4px}
.cv-eq i{width:6px;border-radius:var(--r-3xs);background:#0B8A5B;height:30%}
.cv-eq i:nth-child(1){height:40%}.cv-eq i:nth-child(2){height:70%}.cv-eq i:nth-child(3){height:50%}.cv-eq i:nth-child(4){height:90%}.cv-eq i:nth-child(5){height:55%}
.ed .card-p:hover .cv-eq i{animation:cvEq 1s var(--ease-smooth) infinite}
.cv-eq i:nth-child(2){animation-delay:.15s}.cv-eq i:nth-child(3){animation-delay:.3s}.cv-eq i:nth-child(4){animation-delay:.45s}.cv-eq i:nth-child(5){animation-delay:.6s}
@keyframes cvEq{0%,100%{height:25%}50%{height:100%}}
/* Orchestra — chat bubbles */
.cv-chat{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px}
.cv-chat i{display:block;height:11px;border-radius:var(--r-2xs)}
.cv-chat i:nth-child(1){width:44px;background:#E3F5ED}
.cv-chat i:nth-child(2){width:30px;background:#0B8A5B}
.ed .card-p:hover .cv-chat i{animation:cvPop var(--dur-3) var(--ease-out) backwards}
.ed .card-p:hover .cv-chat i:nth-child(2){animation-delay:.13s}
@keyframes cvPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Phonex — dialer ripple */
.cv-ring{display:grid;place-items:center}
.cv-ring::before{content:"";grid-area:1/1;width:8px;height:8px;border-radius:50%;background:#0B8A5B;justify-self:center;align-self:center}
.cv-ring i{grid-area:1/1;width:12px;height:12px;border:2px solid #0B8A5B;border-radius:50%;opacity:0;justify-self:center;align-self:center}
.ed .card-p:hover .cv-ring i{animation:cvRipple 1.7s var(--ease-out) infinite}
.cv-ring i:nth-child(2){animation-delay:.55s}.cv-ring i:nth-child(3){animation-delay:1.1s}
@keyframes cvRipple{0%{width:10px;height:10px;opacity:.85}100%{width:50px;height:50px;opacity:0}}
/* Coach — progress ring */
.cv-prog svg{width:40px;height:40px;display:block;margin-left:auto}
.cv-prog-arc{stroke-dasharray:94;stroke-dashoffset:94;transition:stroke-dashoffset 1.1s var(--ease-out)}
.ed .card-p:hover .cv-prog-arc{stroke-dashoffset:24}
@media (prefers-reduced-motion:reduce){.ed .card-p:hover .cv-eq i,.ed .card-p:hover .cv-ring i,.ed .card-p:hover .cv-chat i{animation:none}}

/* ================= Signature hero: "the 95% you do not hear" ================= */
.hero-wave{position:relative;min-height:clamp(370px,38vw,480px);border-radius:var(--r);overflow:hidden;border:1px solid #ECECEC;background:radial-gradient(120% 120% at 78% 8%,#E3F5ED 0%,#EEF3F1 58%,#E9EFEC 100%)}
.hw-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hw-overlay{position:absolute;inset:0;pointer-events:none}
.hw-chip{position:absolute;display:inline-flex;align-items:center;background:#fff;border:1px solid #ECECEC;border-radius:999px;padding:8px 12px;font-size:var(--fs-2);font-weight:700;color:#1A1A1A;box-shadow:0 16px 32px -18px rgba(0,0,0,.28);white-space:nowrap;opacity:0;animation:hwChip 7s var(--ease-smooth) infinite}
.hw-chip b{color:var(--em-text)}
.hw-chip.c1{top:13%;left:8%;animation-delay:.6s}
.hw-chip.c2{top:39%;right:7%;animation-delay:3s}
.hw-chip.c3{bottom:21%;left:13%;animation-delay:5.2s}
@keyframes hwChip{0%,100%{opacity:0;transform:translateY(9px)}6%{opacity:1;transform:none}26%{opacity:1;transform:translateY(-4px)}36%{opacity:0;transform:translateY(-12px)}}
.hw-legend{position:absolute;left:16px;bottom:14px;display:flex;align-items:center;gap:8px;font-size:var(--fs-1);font-weight:600;color:#6A6A72}
.hw-leg{width:9px;height:9px;border-radius:var(--r-3xs)}
.hw-leg.on{background:#0B8A5B}.hw-leg.off{background:#CBD3CF;margin-left:12px}
@media(max-width:900px){.hero-wave{min-height:300px}}
@media (prefers-reduced-motion:reduce){.hw-chip{animation:none}.hw-chip.c1{opacity:1}.hw-chip.c2,.hw-chip.c3{display:none}}

/* Красный акцент на «5%» в hero-заголовке */
.ed .mk.mk-red{color:var(--stop)!important}

/* ===== Hero entropy — «Хаос съедает структуру» (chaos→order canvas) ===== */
/* Без фона: точки рендерятся прямо на белом холсте hero —
   слева чёрная упорядоченная сетка, справа изумрудный хаос. */
.hero-yn .hero-entropy{
  position:relative;margin:0;min-height:clamp(430px,44vw,560px);
  display:flex;flex-direction:column;gap:16px;
  background:none;border:0;box-shadow:none;border-radius:0;
}
.hero-entropy .he-stage{position:relative;flex:1 1 auto;width:100%;max-width:430px;margin:0 auto;min-height:clamp(390px,40vw,520px)}
/* Подписи-чипы: структура = план/воронка, угол = хаос (слив сделок) */
.hero-entropy .he-tag{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #ECECEC;border-radius:999px;padding:8px 12px;font-size:var(--fs-2);font-weight:700;color:#1A1A1A;white-space:nowrap;pointer-events:none;box-shadow:0 16px 32px -18px rgba(0,0,0,.22)}
.hero-entropy .he-tag i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hero-entropy .he-tag-plan{top:5%;left:-2%}
.hero-entropy .he-tag-plan i{background:#0B8A5B}
.hero-entropy .he-tag-chaos{bottom:8%;right:-2%;color:#6A6A72}
.hero-entropy .he-tag-chaos i{background:var(--stop)}
@media(max-width:600px){.hero-entropy .he-tag{display:none}}
/* Маска: точки мягко растворяются к краям — секция не выглядит вставленным квадратом,
   фон-биас вправо (62%) даёт «воздух» у текста слева. */
.hero-entropy .he-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(130% 130% at 52% 50%,#000 40%,rgba(0,0,0,0) 84%);
  mask-image:radial-gradient(130% 130% at 52% 50%,#000 40%,rgba(0,0,0,0) 84%);
}
/* Постер поля до загрузки script.js: тот же кадр, что рисует canvas.
   Белый фон картинки растворяется в градиенте hero через multiply;
   когда canvas нарисовал первый кадр (.he-live), постер гаснет. */
.hero-entropy .he-stage::before{content:"";position:absolute;inset:0;background:url(/assets/releases/20261007-cifra-articles-1/assets/hero-entropy-poster.webp) center/100% 100% no-repeat;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(130% 130% at 52% 50%,#000 40%,rgba(0,0,0,0) 84%);mask-image:radial-gradient(130% 130% at 52% 50%,#000 40%,rgba(0,0,0,0) 84%);transition:opacity var(--dur-2) var(--ease-out)}
.hero-entropy.he-live .he-stage::before{opacity:0}
.hero-entropy .he-cap{
  margin:0;padding:0 16px;text-align:center;
  font-family:var(--mono,ui-monospace,"SF Mono",Menlo,Consolas,monospace);
  font-style:italic;font-weight:500;font-size:var(--fs-4);line-height:1.55;letter-spacing:.01em;
  color:#6A6A72;
}
@media(max-width:900px){.hero-yn .hero-entropy{min-height:300px}.hero-entropy .he-stage{min-height:260px}}

/* ================= P5: data-product typography (mono numbers) ================= */
.ed .ts-points b,.ed .stat-num,.ed .roi-result-num,.ed .case-metric-num,.ed .tab-metric-num,
.ed .plan-price .pp-num,.ed .cd-score b,.ed .hw-chip b,.ed .roi-line b{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* ROI figure as an art object */
.ed .roi-result-num{font-size:var(--fs-d3);letter-spacing:-.035em;line-height:1;white-space:nowrap}
.ed .roi-result{padding-top:32px}

/* ================= P3: scrollytelling "anatomy of a call" ================= */
.ed #how.story{background:none;border-radius:0;padding:0;margin-top:64px}
.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,80px);align-items:start}
.story-vis{position:sticky;top:108px;height:min(72vh,500px)}
.sv-frame{height:100%;background:#fff;border:1px solid #ECECEC;border-radius:var(--r-sm);box-shadow:0 34px 74px -42px rgba(0,0,0,.26);overflow:hidden;display:flex;flex-direction:column}
.sv-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #F6F6F7;background:#F6F6F7}
.sv-bar i{width:9px;height:9px;border-radius:50%;background:#E2E2E2}
.sv-bar i:first-child{background:#0B8A5B}
.sv-bar b{margin-left:8px;font-size:var(--fs-3);font-weight:700;color:#1A1A1A}
.sv-step{margin-left:auto;font-family:var(--mono);font-size:var(--fs-1);font-weight:700;color:var(--em-text)}
.sv-stage{position:relative;flex:1}
.sv-panel{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:0;transform:translateY(12px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);pointer-events:none}
.ed .story[data-stage="1"] .sv-panel[data-p="1"],.ed .story[data-stage="2"] .sv-panel[data-p="2"],.ed .story[data-stage="3"] .sv-panel[data-p="3"]{opacity:1;transform:none}
.sv-h{font-size:var(--fs-2);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6A6A72}
.sv-conn{display:flex;flex-wrap:wrap;gap:8px}
.sv-conn span{font-size:var(--fs-3);font-weight:700;color:#1A1A1A;padding:8px 16px;border:1px solid #E2E2E2;border-radius:var(--r-2xs);background:#fff}
.sv-ok{display:flex;align-items:center;gap:8px;font-size:var(--fs-4);font-weight:600;color:var(--em-text);line-height:1.4}
.sv-ok svg{width:18px;height:18px;flex:none;color:var(--em-text)}
.sv-wave{display:flex;align-items:center;gap:4px;height:48px;margin-top:8px}
.sv-wave i{flex:1;background:#0B8A5B;border-radius:var(--r-3xs);height:30%;animation:svWave 1.1s var(--ease-smooth) infinite}
.sv-wave i:nth-child(2n){height:70%;animation-delay:.15s}.sv-wave i:nth-child(3n){height:50%;animation-delay:.3s}.sv-wave i:nth-child(4n){height:90%;animation-delay:.45s}.sv-wave i:nth-child(5n){height:40%;animation-delay:.6s}
@keyframes svWave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.sv-score{display:flex;align-items:baseline;gap:12px}
.sv-score-n{font-family:var(--mono);font-weight:800;font-size:var(--fs-d3);color:#0B8A5B;letter-spacing:-.03em;line-height:1}
.sv-score-l{font-size:var(--fs-3);color:#6A6A72;font-weight:600}
.sv-grow{font-family:var(--mono);font-weight:700;font-size:var(--fs-4);color:#1A1A1A;background:#E3F5ED;align-self:flex-start;padding:8px 12px;border-radius:999px}
.story-steps{display:flex;flex-direction:column}
.story-step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity var(--dur-2) var(--ease-out)}
.story-step.active{opacity:1}
.ss-n{font-family:var(--mono);font-size:var(--fs-4);font-weight:700;color:var(--em-text)}
.story-step h3{font-weight:800;font-size:var(--fs-d2);letter-spacing:-.03em;margin:12px 0 12px}
.story-step p{color:var(--ink-soft);max-width:46ch;font-size:var(--fs-lead);line-height:1.6;font-weight:500}
@media(max-width:860px){
  .story-grid{grid-template-columns:1fr;gap:20px}
  .story-vis{position:relative;top:0;height:280px;order:-1}
  .ed .story[data-stage] .sv-panel{position:absolute}
  .story-step{min-height:auto;opacity:1;padding:16px 0}
}
@media (prefers-reduced-motion:reduce){.sv-wave i{animation:none}.sv-panel{transition:none}}

/* ================= Marquee (интеграции) ================= */
/* Border-beam и shimmer удалены как типовые AI-паттерны: featured-тариф
   выделяется канонной изумрудной рамкой + бейджем (DESIGN.md Pricing). */

/* primary CTAs stay calm — no ambient shimmer (anti-slop: дорогая кнопка молчит до hover) */

/* marquee (integrations) */
.marquee{overflow:hidden;margin-top:4px;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marqueeMove 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.ed .marquee .int-card{flex:0 0 auto;width:210px}
@keyframes marqueeMove{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ================= P4: bento advantages (break the 3-col uniform grid) ================= */
.ed #why .adv-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.ed #why .adv:nth-child(1),.ed #why .adv:nth-child(6){grid-column:span 2}
.ed #why .adv:nth-child(1),.ed #why .adv:nth-child(6){background:linear-gradient(135deg,#fff,#E3F5ED);display:flex;flex-direction:column;justify-content:center}
.ed #why .adv:nth-child(1) h3,.ed #why .adv:nth-child(6) h3{font-size:var(--fs-7)}
@media(max-width:900px){.ed #why .adv-grid{grid-template-columns:repeat(2,1fr)}.ed #why .adv:nth-child(1),.ed #why .adv:nth-child(6){grid-column:span 2}}
@media(max-width:560px){.ed #why .adv-grid{grid-template-columns:1fr}.ed #why .adv:nth-child(n){grid-column:auto}}

/* ================= P6: dark signature scene — "Цифры" with animated grid + neon ================= */
.ed #stats.statdark{background:#0E1512;border-radius:var(--r-band);padding:clamp(40px,5vw,68px) clamp(24px,4vw,56px);margin-top:48px;color:#fff;overflow:hidden}
.ed #stats.statdark .kicker{color:var(--em-on-dark)}
.ed #stats.statdark .sec-head h2{color:#fff}
.ed #stats.statdark .sec-head p,.ed #stats.statdark .stat-lbl,.ed #stats.statdark .stats-note{color:var(--on-dark-muted)}
.ed #stats.statdark .stat{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.09)}
.ed #stats.statdark .stat-num{color:var(--em-on-dark);text-shadow:0 0 28px rgba(62,207,149,.45)}
.ed #stats.statdark::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(62,207,149,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(62,207,149,.08) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask:radial-gradient(circle at 50% 38%,#000,transparent 76%);mask:radial-gradient(circle at 50% 38%,#000,transparent 76%);
  animation:gridPan 20s linear infinite}
@keyframes gridPan{to{background-position:42px 42px}}
.ed #stats.statdark>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.ed #stats.statdark::after{animation:none}}

/* ================= hero waveform (static) + scrollytelling ================= */
.hw-bars{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(2px,0.5vw,8px);padding:0 7%;z-index:1}
.hw-bar{flex:1 1 0;max-width:9px;min-width:3px;height:30%;background:#CBD3CF;border-radius:var(--r-3xs);transform-origin:center;will-change:transform,opacity}

/* ======================= PREMIUM PASS (site-wide via .ed) ======================= */
html{scroll-behavior:smooth;scrollbar-color:#cfd6d2 transparent}
.ed{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.ed ::selection{background:rgba(11,138,91,.20);color:#0A3B28}
.ed h1,.ed h2,.ed h3,.ed .yn-h1,.ed .sec-head h2{text-wrap:balance}
.ed p,.ed li,.ed .yn-sub{text-wrap:pretty}
/* crisp emerald focus ring everywhere */
.ed a:focus-visible,.ed button:focus-visible,.ed input:focus-visible,.ed textarea:focus-visible,.ed select:focus-visible,.ed [tabindex]:focus-visible{outline:2px solid #0B8A5B;outline-offset:3px;border-radius:var(--r-2xs)}
/* thin premium scrollbar */
.ed ::-webkit-scrollbar{width:11px;height:11px}
.ed ::-webkit-scrollbar-thumb{background:#D3DAD6;border-radius:var(--r-2xs);border:3px solid #fff;background-clip:padding-box}
.ed ::-webkit-scrollbar-thumb:hover{background:#BBC4BF;border:3px solid #fff;background-clip:padding-box}
.ed ::-webkit-scrollbar-track{background:transparent}
/* layered, expensive card elevation */
.ed .adv,.ed .uc,.ed .card-p,.ed .testi,.ed .case,.ed .plan,.ed .int-card,.ed .step{box-shadow:0 1px 2px rgba(16,24,20,.04),0 14px 34px -20px rgba(16,24,20,.16)}
.ed .adv:hover,.ed .card-p:hover,.ed .plan:hover,.ed .uc:hover,.ed .case:hover,.ed .testi:hover{box-shadow:0 2px 6px rgba(11,138,91,.07),0 28px 52px -22px rgba(11,138,91,.30)}
/* primary button: subtle inner highlight + emerald lift */
.ed .btn-dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px -12px rgba(0,0,0,.45)}
.ed .btn-dark:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 34px -14px rgba(0,0,0,.5)}
/* dark bands: deep premium drop */
.ed .roi,.ed .security,.ed .cta-big{box-shadow:0 44px 100px -56px rgba(0,0,0,.65)}
/* subpage hero: emerald wash, kill the legacy candy blobs */
.ed .page-hero{background:linear-gradient(180deg,#E3F5ED 0%,#FFFFFF 92%)}
.ed .page-hero-blob.p1{background:radial-gradient(circle at 30% 30%,rgba(11,138,91,.22),transparent 70%)!important;opacity:.7}
.ed .page-hero-blob.p2{background:radial-gradient(circle at 30% 30%,rgba(62,207,149,.26),transparent 70%)!important;opacity:.7}
.ed .page-hero.dark{background:radial-gradient(120% 150% at 100% 0%,rgba(11,138,91,.22),transparent 46%),#111}
.ed .page-hero.dark .page-hero-blob{opacity:.18}

/* ===== Premium subpage hero refinement (site-wide via .ed) ===== */
.ed .page-hero{padding:clamp(32px,3.5vw,56px) clamp(28px,4vw,64px);border-radius:var(--r-band);border:1px solid #ECECEC}
/* Ступенью ниже главной: там заголовок — это довод, здесь — название
   раздела. Побочно уходит перекос, при котором «Блог 404ai» на индексе
   был крупнее заголовка любой статьи внутри. */
.ed .page-hero h1{font-size:var(--fs-d3);line-height:1.08;letter-spacing:-.035em}
/* Лид был зажат в 600px: при кегле 23px это 44 знака в строке — вдвое
   уже нормы, и потому восемь строк вместо шести. Цвет взят из токена:
   #4A5A52 был пятым серым, которого нет в системе. */
.ed .page-hero .ph-sub{color:var(--ink-soft);max-width:800px}
.ed .page-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,138,91,.06) 1.1px,transparent 1.1px);background-size:22px 22px;
  -webkit-mask:linear-gradient(120deg,#000,transparent 60%);mask:linear-gradient(120deg,#000,transparent 60%);opacity:.6}
.ed .page-hero.dark{border-color:rgba(255,255,255,.08)}
.ed .page-hero.dark .ph-sub{color:var(--on-dark-soft)}
.ed .roi.roi-island{display:block}

/* ===== P2: premium comparison table ===== */
/* overflow:hidden тут стоял ради скругления углов и заодно убивал
   горизонтальную прокрутку: на 375px правые 172px таблицы становились
   недоступны — не обрезка ради красоты, а потеря контента. Скругление
   держится на overflow-y, прокрутка — на overflow-x. */
.ed .compare-wrap{background:#fff;border:1px solid #ECECEC;border-radius:var(--r-sm);overflow-x:auto;overflow-y:hidden;box-shadow:0 14px 34px -22px rgba(16,24,20,.16)}
.ed .compare-table th{border-bottom:1px solid #EEE;font-size:var(--fs-4)}
.ed .compare-table th:nth-child(2){background:#F6F6F7;color:#6A6A72}
.ed .compare-table th:nth-child(3){background:#E3F5ED;color:var(--em-text);box-shadow:inset 0 3px 0 #0B8A5B}
.ed .compare-table td{border-bottom:1px solid #F6F6F7}
.ed .compare-table td:nth-child(2){background:#F6F6F7;color:#6A6A72}
.ed .compare-table td:nth-child(3){background:rgba(11,138,91,.07);color:#1A1A1A;font-weight:700}
.ed .compare-table tr:hover td{background:rgba(11,138,91,.04)}
.ed .compare-table tr:hover td:nth-child(3){background:rgba(11,138,91,.12)}
.ed .compare-table .ic-yes{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#0B8A5B;color:#fff;margin-right:8px;vertical-align:-4px}
.ed .compare-table .ic-yes .icon{width:12px;height:12px;color:#fff}
.ed .compare-table .ic-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#E2E2E2;color:#6A6A72;margin-right:8px;vertical-align:-4px}
.ed .compare-table .ic-no .icon{width:11px;height:11px;color:#6A6A72}

/* ===== P3: case before/after mini-viz ===== */
.case-viz{margin-top:16px;padding-top:16px;border-top:1px solid #EFEFEF;display:flex;flex-direction:column;gap:8px}
.cv-row{display:flex;align-items:center;gap:12px}
.cv-lbl{flex:none;width:58px;font-size:var(--fs-1);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6A6A72}
.cv-track{flex:1;height:8px;border-radius:var(--r-2xs);background:#F6F6F7;overflow:hidden}
.cv-fill{display:block;height:100%;border-radius:var(--r-2xs);width:var(--w)}
.cv-before .cv-fill{background:#D9DDDB}
.cv-after .cv-fill{background:linear-gradient(90deg,#0B8A5B,var(--em-on-dark))}
.cv-val{flex:none;width:46px;text-align:right;font-family:var(--mono,"JetBrains Mono",monospace);font-size:var(--fs-3);font-weight:800;color:#1A1A1A}
.cv-before .cv-val{color:#6A6A72}
.cv-after .cv-val{color:var(--em-text)}

/* ===== P4: industries metric card + impact bar ===== */
.ed .tab-col.metric{background:#0F1512;border-radius:var(--r-sm);padding:28px 28px;display:flex;flex-direction:column;justify-content:center}
.ed .tab-col.metric .tab-metric-num{color:var(--em-on-dark)}
.ed .tab-col.metric p{color:var(--on-dark-muted)}
.tab-impact{margin:16px 0 4px;height:8px;border-radius:var(--r-2xs);background:rgba(255,255,255,.1);overflow:hidden}
.ti-fill{display:block;height:100%;border-radius:var(--r-2xs);width:var(--w);background:linear-gradient(90deg,#0B8A5B,var(--em-on-dark));transform-origin:left;transition:width .8s var(--ease-out)}
.tab-impact.anim .ti-fill{animation:tiFill .85s var(--ease-out)}
@keyframes tiFill{from{width:0}to{width:var(--w)}}
@media(max-width:760px){.ed .tab-col.metric{padding:24px}}
@media(prefers-reduced-motion:reduce){.ti-fill,.tab-impact.anim .ti-fill{animation:none;transition:none}}

/* ===== P5: premium pull-quote testimonials ===== */
.ed .testi{position:relative;padding:36px 32px 32px;display:flex;flex-direction:column;overflow:hidden}
.ed .testi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#0B8A5B,var(--em-on-dark));opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
.ed .testi:hover::before{opacity:1}
.ed .testi-quote{font-family:Georgia,"Times New Roman",serif;font-size:var(--fs-d4);line-height:.7;color:#7FCDAE;height:34px;margin-bottom:12px;user-select:none}
.ed .testi p{font-size:var(--fs-5);line-height:1.62;color:#1A1A1A;font-weight:600;letter-spacing:-.01em}
.ed .testi-author{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:12px}
.ed .testi-avatar{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(11,138,91,.2)}
.ed .testi-avatar .icon{width:21px;height:21px}
.ed .testi-name{font-weight:800;font-size:var(--fs-4);color:#1A1A1A}
.ed .testi-pos{font-weight:600;font-size:var(--fs-3);color:var(--em-text);margin-top:2px;text-transform:uppercase;letter-spacing:.03em}

/* ===== P6: integration logo-chips ===== */
.ed .marquee .int-card{flex:0 0 auto;width:auto;flex-direction:row;align-items:center;gap:12px;padding:12px 24px 12px 12px;border-radius:var(--r-xs);background:#fff;border:1px solid #ECECEC;font-size:var(--fs-4);font-weight:800;color:#1A1A1A;box-shadow:0 2px 8px rgba(16,24,20,.04)}
.ed .marquee .int-ic{width:40px;height:40px;border-radius:var(--r-2xs);display:flex;align-items:center;justify-content:center;flex:none;background:#E3F5ED!important}
.ed .marquee .int-ic .ficon{width:22px;height:22px}
.ed .marquee .int-card:hover{border-color:#0B8A5B;transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(11,138,91,.3)}

/* ===== Footer premium dark band (site-wide via .ed) ===== */
.ed footer{position:relative;overflow:hidden;margin-top:64px;padding:20px 24px 16px;border-radius:var(--r-band);background:#0F1512;color:#fff;content-visibility:auto;contain-intrinsic-size:auto 720px}
.ed footer::before{content:"";position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(62,207,149,.16),transparent 62%);pointer-events:none}
.ed footer::after{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,#0B8A5B,var(--em-on-dark),transparent);opacity:.6}
.ed footer>*{position:relative;z-index:1}
.ed footer .footer{content-visibility:visible}
.ed footer .footer-brand p{color:var(--on-dark-soft)}
.ed footer .footer-col h4{color:var(--on-dark)}
.ed footer .footer-col ul li a{color:var(--on-dark-soft)}
.ed footer .footer-col ul li a:hover{color:#fff}
.ed footer .footer-social a{background:rgba(255,255,255,.08);color:#fff}
/* Respect reduced-motion for the only unguarded continuous animations (decorative blobs) */
@media (prefers-reduced-motion:reduce){.hero-blob,.page-hero-blob{animation:none!important}}
.ed footer .footer-social a:hover{background:#0B8A5B;color:#fff;transform:translateY(-3px)}
.ed footer .footer-social .icon{color:#fff}
.ed footer .footer-bottom{border-top:1px solid rgba(255,255,255,.12);color:var(--on-dark-muted)}
.ed footer .badge{background:rgba(255,255,255,.07);color:var(--on-dark-soft);border:1px solid rgba(255,255,255,.08)}
.ed footer .footer-bottom a{color:var(--on-dark-muted)}
.ed footer .footer-bottom a:hover{color:#fff}
@media(max-width:560px){.ed footer{border-radius:var(--r);margin-top:44px}}

/* ===== Orchestra hero: messenger qualification sim ===== */
.orch-simwrap{margin-top:36px;max-width:560px}
.orchsim{padding:20px;display:flex;flex-direction:column;gap:16px;min-height:312px}
.orchsim-chat{display:flex;flex-direction:column;gap:12px}
.om{display:none}
.om.on{display:flex;animation:omIn var(--dur-2) var(--ease-out)}
.om-in{justify-content:flex-start}
.om-ai{justify-content:flex-end}
.om-b{max-width:80%;padding:12px 16px;border-radius:var(--r-xs);font-size:var(--fs-4);font-weight:600;line-height:1.42}
.om-in .om-b{background:#F6F6F7;color:#1A1A1A;border-bottom-left-radius:5px}
.om-ai .om-b{background:linear-gradient(135deg,#0B8A5B,#0A7A50);color:#fff;border-bottom-right-radius:5px}
@keyframes omIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.orchsim-typing{display:none;align-self:flex-end;gap:4px;align-items:center;padding:12px 16px;background:#E3F5ED;border-radius:var(--r-xs);border-bottom-right-radius:5px;width:fit-content}
.orchsim-typing.on{display:flex}
.orchsim-typing i{width:6px;height:6px;border-radius:50%;background:#0B8A5B;animation:omType 1s var(--ease-out) infinite}
.orchsim-typing i:nth-child(2){animation-delay:.15s}
.orchsim-typing i:nth-child(3){animation-delay:.3s}
@keyframes omType{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.orchsim-done{margin-top:auto;opacity:0;transform:translateY(9px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);border-top:1px solid #EEE;padding-top:12px}
.orchsim-done.on{opacity:1;transform:none}
.orchsim-done-row{display:flex;align-items:center;gap:8px;font-size:var(--fs-4)}
.orchsim-done-row .icon{width:20px;height:20px;color:#fff;background:#0B8A5B;border-radius:50%;padding:4px;flex:none}
.orchsim-done-row b{color:#1A1A1A;font-weight:800}
.orchsim-done-row span{color:#6A6A72;font-weight:600}
.orchsim-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.orchsim-tags span{font-size:var(--fs-2);font-weight:700;color:var(--em-text);background:#E3F5ED;padding:4px 12px;border-radius:999px}

/* ===== Architecture graph — premium dark tool-graph redo (.ed, all product pages) ===== */
.ed .nexus{
  background:
    radial-gradient(58% 64% at 40% 38%,rgba(11,138,91,.30) 0%,rgba(11,138,91,0) 60%),
    radial-gradient(46% 52% at 82% 18%,rgba(62,207,149,.10) 0%,rgba(62,207,149,0) 55%),
    linear-gradient(160deg,#0F1512 0%,#0A0F0D 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
}
.ed .nexus::before{background:repeating-linear-gradient(122deg,rgba(255,255,255,.02) 0 1.5px,transparent 1.5px 24px);opacity:.5}
.ed .nexus::after{box-shadow:inset 0 0 140px 24px rgba(0,0,0,.45)}
.ed .nexus .nx-rings circle{stroke:rgba(255,255,255,.06)}
.ed .nexus .nx-arc{fill:rgba(255,255,255,.20)}
.ed .nexus .nx-link line,.ed .nexus .nx-links .nx-link{stroke:rgba(62,207,149,.26);stroke-width:1.1}
.ed .nexus .nx-link .nx-link-out,.ed .nexus .nx-links .nx-link-out{stroke:rgba(255,255,255,.08)}
.ed .nexus .nx-nl,.ed .nexus .nx-chan .nx-nl,.ed .nexus .nx-skill .nx-nl,.ed .nexus .nx-int .nx-nl{fill:rgba(255,255,255,.93)}
.ed .nexus .nx-chan circle,.ed .nexus .nx-ag circle{fill:url(#nx-g-chan) #16201b;stroke:rgba(62,207,149,.55);filter:drop-shadow(0 5px 12px rgba(0,0,0,.55))}
.ed .nexus .nx-skill circle{fill:url(#nx-g-skill) #141b1f;stroke:rgba(95,201,230,.5);filter:drop-shadow(0 5px 12px rgba(0,0,0,.55))}
.ed .nexus .nx-int circle{fill:url(#nx-g-int) #201b13;stroke:rgba(244,185,120,.55);filter:drop-shadow(0 5px 12px rgba(0,0,0,.55))}
.ed .nexus .nx-chan:hover circle,.ed .nexus .nx-chan:focus-visible circle,.ed .nexus .nx-chan.is-hot circle,.ed .nexus .nx-ag:hover circle,.ed .nexus .nx-ag:focus-visible circle,.ed .nexus .nx-ag.is-hot circle{stroke:var(--em-on-dark);filter:drop-shadow(0 0 13px rgba(62,207,149,.65))}
.ed .nexus .nx-skill:hover circle,.ed .nexus .nx-skill:focus-visible circle,.ed .nexus .nx-skill.is-hot circle{stroke:#5FC9E6;filter:drop-shadow(0 0 13px rgba(95,201,230,.6))}
.ed .nexus .nx-int:hover circle,.ed .nexus .nx-int:focus-visible circle,.ed .nexus .nx-int.is-hot circle{stroke:#F4B978;filter:drop-shadow(0 0 13px rgba(244,185,120,.6))}
.ed .nexus.is-focusing .nx-node:not(.is-hot):not(.nx-hub){opacity:.2}
.ed .nexus.is-focusing .nx-link,.ed .nexus.is-focusing .nx-arc{opacity:.3}
.ed .nexus .nx-hub{filter:drop-shadow(0 0 26px rgba(11,138,91,.6))}
.ed .nexus .nx-hub circle{fill:url(#nx-g-hub) #0B8A5B;stroke:rgba(62,207,149,.85);stroke-width:1.6}
.ed .nexus .nx-hl{fill:#fff}
.ed .nexus .nx-hs{fill:rgba(255,255,255,.78)}
.ed .nexus .nx-pkt-0{fill:var(--em-on-dark);color:var(--em-on-dark)}
.ed .nexus .nx-pkt-1{fill:#5FC9E6;color:#5FC9E6}
.ed .nexus .nx-pkt-2{fill:#F4B978;color:#F4B978}
.ed .nexus .nx-pkt-3{fill:#A7EBD0;color:#A7EBD0}
.ed .nexus .nexus-legend span{color:var(--on-dark-muted)}
.ed .nexus .nx-leg-c{border-color:var(--em-on-dark)}
.ed .nexus .nx-leg-s{border-color:#5FC9E6}
.ed .nexus .nx-leg-i{border-color:#F4B978}
.ed .nexus .nx-leg-hub{border-color:var(--em-on-dark);background:var(--em-on-dark)}
.ed .nexus .nexus-detail{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 54px -30px rgba(0,0,0,.6)}
.ed .nexus .nexus-detail::before{background:var(--em-on-dark)}
.ed .nexus .nexus-detail[data-cat="skill"]::before{background:#5FC9E6}
.ed .nexus .nexus-detail[data-cat="int"]::before{background:#F4B978}
.ed .nexus .nexus-detail-tag{color:var(--on-dark-muted)}
.ed .nexus .nexus-detail-title{color:#fff}
.ed .nexus .nexus-detail-pts li{color:var(--on-dark-soft)}
.ed .nexus .nexus-detail-pts li::before{border-color:var(--em-on-dark)}
.ed .nexus .nexus-detail[data-cat="skill"] .nexus-detail-pts li::before{border-color:#5FC9E6}
.ed .nexus .nexus-detail[data-cat="int"] .nexus-detail-pts li::before{border-color:#F4B978}
.ed .nexus .nexus-detail-dot{background:var(--em-on-dark);box-shadow:0 0 0 4px rgba(62,207,149,.18)}
.ed .nexus .nexus-detail[data-cat="skill"] .nexus-detail-dot{background:#5FC9E6;box-shadow:0 0 0 4px rgba(95,201,230,.18)}
.ed .nexus .nexus-detail[data-cat="int"] .nexus-detail-dot{background:#F4B978;box-shadow:0 0 0 4px rgba(244,185,120,.18)}
.ed .nexus .nexus-detail-hint{color:var(--on-dark-muted)}
.ed .nexus .nexus-detail-link{background:#0B8A5B;color:#fff}

/* ===== Programmatic /resheniya/ cluster pages ===== */
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.r-grid{grid-template-columns:1fr}}
.r-card{display:flex;flex-direction:column;gap:8px;padding:28px 24px;border-radius:var(--r-sm);background:#fff;border:1px solid #ECECEC;box-shadow:0 1px 2px rgba(16,24,20,.04),0 14px 34px -20px rgba(16,24,20,.16);text-decoration:none;transition:transform var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.r-card:hover{transform:translateY(-4px);border-color:#0B8A5B;box-shadow:0 22px 46px -24px rgba(11,138,91,.28)}
.r-card h3{font-weight:800;font-size:var(--fs-5);letter-spacing:-.02em;color:#1A1A1A}
.r-card p{font-weight:500;font-size:var(--fs-4);line-height:1.5;color:#5A5A60}
.r-card-go{margin-top:auto;font-weight:800;font-size:var(--fs-4);color:var(--em-text)}
.r-related{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.r-related li a{display:inline-flex;padding:12px 16px;border-radius:999px;background:#E3F5ED;color:var(--em-text);font-weight:700;font-size:var(--fs-4);text-decoration:none;transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.r-related li a:hover{background:#0B8A5B;color:#fff}
.ph-updated{margin-top:12px;font-size:var(--fs-3);font-weight:600;color:var(--ink-muted,#6A6A72)}

/* ===== Lead-magnet: call-QA checklist (/chek-list-kontrolya-zvonkov/) ===== */
.cl-wrap{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
@media(max-width:860px){.cl-wrap{grid-template-columns:1fr}}
.cl-stage{margin-bottom:20px}
.cl-stage-h{font-weight:800;font-size:var(--fs-3);letter-spacing:.04em;text-transform:uppercase;color:#6A6A72;margin-bottom:12px}
.cl-item{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #ECECEC;border-radius:var(--r-xs);margin-bottom:8px;cursor:pointer;background:#fff;transition:border-color var(--dur-0) var(--ease-out),background var(--dur-0) var(--ease-out)}
.cl-item:hover{border-color:#0B8A5B}
.cl-item input{position:absolute;opacity:0;width:0;height:0}
.cl-box{flex:none;width:22px;height:22px;border-radius:var(--r-2xs);border:2px solid #CBD5CE;display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-0) var(--ease-out),border-color var(--dur-0) var(--ease-out)}
.cl-item input:checked + .cl-box{background:#0B8A5B;border-color:#0B8A5B}
.cl-item input:checked + .cl-box::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.cl-item input:focus-visible + .cl-box{box-shadow:0 0 0 3px rgba(11,138,91,.3)}
.cl-txt{flex:1;font-weight:600;font-size:var(--fs-4);color:#5A5A60}
.cl-item input:checked ~ .cl-txt{color:#1A1A1A}
.cl-w{flex:none;font-family:var(--mono,"JetBrains Mono",monospace);font-size:var(--fs-2);font-weight:800;color:#6A6A72}
.cl-score{position:sticky;top:90px;background:#0F1512;border-radius:var(--r-sm);padding:24px;color:#fff;display:flex;flex-direction:column;gap:16px}
.cl-score-num{display:flex;align-items:baseline;gap:8px}
.cl-score-num b{font-family:var(--mono,"JetBrains Mono",monospace);font-size:var(--fs-d3);font-weight:800;color:var(--em-on-dark);line-height:1}
.cl-score-num span{font-weight:700;color:var(--on-dark-muted)}
.cl-bar{height:8px;border-radius:var(--r-2xs);background:rgba(255,255,255,.1);overflow:hidden}
.cl-bar span{display:block;height:100%;width:0;border-radius:var(--r-2xs);background:linear-gradient(90deg,#0B8A5B,var(--em-on-dark));transition:width var(--dur-2) var(--ease-out)}
.cl-verdict{font-weight:700;font-size:var(--fs-4);color:var(--on-dark)}
.cl-verdict.ok{color:var(--em-on-dark)}
.cl-verdict.mid{color:#F4B978}
.cl-verdict.low{color:#ff8b7a}
.cl-score .btn-dark{background:#0B8A5B}
.cl-score .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.cl-score .btn-ghost:hover{border-color:var(--em-on-dark);color:var(--em-on-dark)}

/* ── Blog tag filter ──────────────────────────────────────────────────────── */
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.blog-filter-btn{background:none;border:1.5px solid var(--border,#E2E2E2);border-radius:999px;padding:8px 16px;font-family:inherit;font-size:var(--fs-3);font-weight:600;color:var(--ink-soft,#5A5A60);cursor:pointer;transition:background var(--dur-0) var(--ease-out),border-color var(--dur-0) var(--ease-out),color var(--dur-0) var(--ease-out);white-space:nowrap}
.blog-filter-btn:hover{border-color:var(--em-text);color:var(--em-text)}
.blog-filter-btn.active{background:var(--em-text);border-color:var(--em-text);color:#fff}
.blog-filter-empty{display:none;grid-column:1/-1;text-align:center;padding:48px 0;color:var(--ink-soft,#5A5A60);font-size:var(--fs-4)}
.blog-filter-empty.visible{display:block}

/* ======================================================
   IMAGE LIGHTBOX (click product screenshots to zoom)
====================================================== */
.app-frame img,.rh-hero-img,img.zoomable{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,14,16,.9);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:zoom-out;opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
.lightbox.open{opacity:1}
.lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:var(--r-xs);box-shadow:0 40px 100px -20px rgba(0,0,0,.7);cursor:zoom-out}
@media(prefers-reduced-motion:reduce){.lightbox{transition:none}}

/* mono-цифры — фирменный приём — на подстраницах (метрики hero, счётчики команды) */
.ed .ph-metric-num,.ed .team-stats b{font-family:var(--mono,ui-monospace,monospace);letter-spacing:-.01em}


/* ===== Ярус 3: микротактильность и тайминги ===== */
.quiz-opt{transition:transform var(--dur-0) var(--ease-out),border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.quiz-opt:active{transform:scale(.96)}
/* Трёхсторонняя таблица на главной ------------------------------------
   Изумрудная колонка задана через nth-child(3), а эти правила общие со
   страницами /sravnenie/*, где колонок три. Здесь их четыре, поэтому
   без своего класса изумруд достался бы колонке «Купить SaaS». */

.compare-table tbody tr{transition:background-color var(--dur-1) var(--ease-out)}
.lightbox img{transform:scale(.965);transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.lightbox.open img{transform:scale(1)}
/* каскад пунктов мобильного меню */
/* Каскад пунктов: сдвиг 8px за --dur-2, шесть ступеней по 25 мс, дальше
   все вместе (прежде 12 ступеней по 30 мс — меню «доезжало» ~560 мс).
   Закреплённая кнопка и телефон не двигаются и не ждут: проявляются вместе
   с панелью. Закрытие — без каскада. */
.mobile-menu>a:not(.btn):not(.mobile-menu-phone),.mobile-menu>.m-group{opacity:0;transform:translateY(8px);transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.mobile-menu.open>a:not(.btn):not(.mobile-menu-phone),.mobile-menu.open>.m-group{opacity:1;transform:none;transition-duration:var(--dur-2)}
.mobile-menu.open>*:nth-child(2){transition-delay:25ms}
.mobile-menu.open>*:nth-child(3){transition-delay:50ms}
.mobile-menu.open>*:nth-child(4){transition-delay:75ms}
.mobile-menu.open>*:nth-child(5){transition-delay:.1s}
.mobile-menu.open>*:nth-child(n+6){transition-delay:125ms}
.mobile-menu.open>a.btn,.mobile-menu.open>.mobile-menu-phone{transition-delay:0s}
/* спиннер в состоянии отправки */
.btn[aria-busy="true"]{pointer-events:none}
.btn[aria-busy="true"]::before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.85;animation:btnSpin var(--dur-3) linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .mobile-menu>a,.mobile-menu>.m-group,.mobile-menu.open>a:not(.btn):not(.mobile-menu-phone),.mobile-menu.open>.m-group{opacity:1;transform:none;transition:none}
  .lightbox img{transform:none;transition:opacity var(--dur-1) var(--ease-out)}
  .btn[aria-busy="true"]::before{animation:none}
}


/* ===== Партнёрский калькулятор ===== */
.pcalc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.5vw,36px);align-items:stretch;max-width:1000px;margin:36px auto 0}
.pcalc-controls{background:#F6F6F7;border:1px solid #ECECEC;border-radius:var(--r-sm);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:center;gap:28px}
.pcalc-field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-size:var(--fs-4);color:var(--ink);margin-bottom:16px}
.pcalc-v{font-family:var(--mono,ui-monospace);font-weight:800;color:var(--em-text);font-size:var(--fs-5);letter-spacing:-.01em}
.pcalc-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;outline:none;background:linear-gradient(90deg,#0B8A5B 0 var(--p,50%),#E2E2E2 var(--p,50%) 100%)}
.pcalc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#0B8A5B;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.28);cursor:pointer;transition:transform var(--dur-0) var(--ease-out)}
.pcalc-range::-webkit-slider-thumb:active{transform:scale(1.12)}
.pcalc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0B8A5B;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.28);cursor:pointer}
.pcalc-range:focus-visible{box-shadow:0 0 0 3px rgba(11,138,91,.25)}
.pcalc-note{font-size:var(--fs-3);color:var(--ink-soft);line-height:1.5;margin-top:2px}
.pcalc-result{background:#111;border-radius:var(--r);padding:clamp(24px,3vw,40px);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:0}
.pcalc-out{padding:16px 0}
.pcalc-out+.pcalc-out{border-top:1px solid rgba(255,255,255,.1)}
.pcalc-out:first-child{padding-top:0}
.pcalc-num{font-family:var(--mono,ui-monospace);font-weight:800;font-size:var(--fs-d2);color:var(--em-on-dark);letter-spacing:-.02em;line-height:1}
.pcalc-lbl{font-size:var(--fs-3);color:var(--on-dark-soft);margin-top:8px}
.pcalc-sub{font-size:var(--fs-3);color:var(--on-dark-muted);margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:760px){.pcalc{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pcalc-range::-webkit-slider-thumb{transition:none}}

/* ── Цели нажатия на сенсорных экранах ──────────────────────────────────
   DESIGN.md требует ≥44px, фактически чипы были 31px, табы 39px. Правило
   ограничено pointer:coarse: на десктопе мышью 39px попадаются нормально, и
   раздувать там кнопки незачем — меняем только там, где палец. */
@media (pointer: coarse) {
  .tab-btn,
  .blog-filter-btn,
  .ph-chip,
  .quiz-opt,
  .faq-q {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .faq-q { width: 100%; }

  /* Аудит замерил на 390px: значения контактов — ссылки высотой 23px, а это
     единственная работа страницы /contacts/. Крошки — 24px, ровно по нижней
     границе. Поднимаем высоту области нажатия, вид строки не меняется. */
  .cc-val a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Крошкам высоту поднимать нельзя: ссылка вырастает до 44px, а стрелка и
     текущий пункт остаются на прежней базовой линии — ряд распадается на две
     высоты. Проверено замером: было 170 против 184. Расширяем область
     нажатия слоем, раскладка не меняется. */
  .crumbs a { position: relative; }
  .crumbs a::after {
    content: "";
    position: absolute;
    inset: -14px -6px;
  }

  /* Ссылка на политику cookie стоит внутри предложения — поднять ей высоту
     нельзя, разорвёт строку. Расширяем область нажатия невидимым слоем. */
  .cookie-bar-text a { position: relative; }
  .cookie-bar-text a::after {
    content: "";
    position: absolute;
    inset: -12px -8px;
  }
}

/* ==========================================================================
   РЕГИСТР «ЧЕРТЁЖ» — компоненты для объяснения программы, а не продукта.

   Зачем отдельный набор. Существующая система умеет один жанр: показать, что
   фича работает. Продажа годовой программы требует другого: объяснить время,
   последовательность, состояния приёмки, пороги SLA, владельца каждого шага.
   Под это в системе не было ни одного примитива — этапы работы верстались
   плиткой .pains, то есть компонентом, который означает «перечень болей».

   Не второй бренд, а второй голос внутри той же палитры: белый, ink, один
   изумруд. Никаких новых бренд-цветов. Добавлены ровно два служебных токена —
   волосок и запрещающий тон, оба ниже с обоснованием.
   ========================================================================== */

.ed{
  /* Ровно один запрещающий тон на весь сайт. До него «нельзя» рисовалось тем
     же бледным изумрудом, что и справка: юридический дисклеймер, ограничение
     и подтверждение эксперта были визуально неразличимы. Значение взято из
     форка кейсов, чтобы не заводить шестой оттенок красного. */
  /* --stop, --stop-text и --stop-wash определены в :root выше. */
  /* Предупреждение — не ошибка и не запрет. Нужен третий тон под «работает,
     но с оговоркой»: границы, зоны ответственности, условия. */
  --warn:#8A6410; --warn-wash:#FAF3E4;
}

/* ── Врезки: три смысла вместо одного ──────────────────────────────────── */
.ed .callout--stop{}
.ed .callout--stop .callout-l{color:var(--stop)}
.ed .callout--warn{}
.ed .callout--warn .callout-l{color:var(--warn)}

/* ── Ось времени с воротами приёмки ────────────────────────────────────────
   Главное отличие от плитки этапов: у оси есть направление и есть точки, где
   работа не продолжается, пока предыдущий кусок не принят. Ворота — не
   украшение, а единственный способ показать «принимаем по акту, а не по
   ощущению». */
.ed .tline{list-style:none;margin:8px 0 0;padding:0;position:relative}
.ed .tline::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:1px;background:var(--line-2)}
.ed .tl{position:relative;padding:0 0 28px 52px}
.ed .tl:last-child{padding-bottom:0}
.ed .tl::before{
  content:attr(data-gate);position:absolute;left:0;top:0;width:31px;height:31px;
  border:1px solid var(--line-2);background:#fff;border-radius:var(--r-2xs);
  display:grid;place-items:center;font:700 var(--fs-2)/1 var(--mono);
  color:var(--ink-muted);font-variant-numeric:tabular-nums;
}
.ed .tl--key::before{background:var(--em-text);border-color:var(--em-text);color:#fff}
.ed .tl-when{
  display:block;font:700 var(--fs-2)/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--em-text);margin-bottom:8px;
}
.ed .tl h3{font-size:var(--fs-6);margin:0 0 8px}
.ed .tl p{margin:0;color:var(--ink-soft);font-size:var(--fs-4);line-height:1.6}
.ed .tl-acc{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:var(--fs-4);color:var(--ink-soft);
}
.ed .tl-acc b{
  display:block;font:700 var(--fs-1)/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:4px;
}
@media(max-width:640px){
  .ed .tline::before{left:11px}
  .ed .tl{padding-left:40px;padding-bottom:24px}
  .ed .tl::before{width:23px;height:23px;font-size:var(--fs-1);border-radius:var(--r-2xs)}
}

/* ── Матричная таблица под KPI, SLA и роли ─────────────────────────────────
   Отличие от .compare-table: та жёстко рассчитана на три колонки и
   подсвечивает третью через nth-child — при пяти ролях подсветка встанет не
   туда. Здесь колонок сколько угодно, акцент задаётся классом на ячейке,
   числа моноширинные и выровнены вправо, шапка липнет при прокрутке. */
.ed .matrix{width:100%;border-collapse:collapse;font-size:var(--fs-4);min-width:640px}
.ed .matrix th,.ed .matrix td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ed .matrix thead th{
  font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);background:var(--card2);position:sticky;top:0;z-index:1;white-space:nowrap;
}
.ed .matrix tbody td:first-child{font-weight:700;color:var(--ink)}
.ed .matrix tbody td{color:var(--ink-soft);font-weight:500}
.ed .matrix tbody tr:hover{background:var(--card2)}
.ed .matrix tbody tr:last-child td{border-bottom:0}
.ed .matrix .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink)}
.ed .matrix .is-key{color:var(--ink);font-weight:700}
/* Состояние замены роли: смысл кодируется формой значка, а не только цветом —
   иначе на два десятка строк палитра рассыплется, а дальтоник не различит. */
.ed .m-st{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:700;color:var(--ink)}
.ed .m-st::before{content:"";width:10px;height:10px;flex:none;border:1.5px solid var(--em-text)}
.ed .m-st--full::before{background:var(--em-text);border-radius:50%}
.ed .m-st--most::before{background:none;border-radius:50%}
.ed .m-st--boost::before{background:none;border-radius:var(--r-3xs);border-style:dashed}
@media(max-width:760px){
  .ed .matrix{font-size:var(--fs-3)}
  .ed .matrix th,.ed .matrix td{padding:8px 12px}
}

/* ── Паспорт модуля ────────────────────────────────────────────────────────
   Карточка единицы, которую можно купить, положить в смету и принять.
   Сознательно не «фича с иконкой»: сверху код, снизу критерий приёмки. */
.ed .mods{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:8px}
.ed .mod{border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 24px;background:#fff}
.ed .mod-id{
  font:700 var(--fs-1)/1 var(--mono);letter-spacing:.1em;
  color:var(--ink-muted);display:block;margin-bottom:12px;
}
.ed .mod h3{font-size:var(--fs-5);margin:0 0 8px}
.ed .mod p{margin:0;color:var(--ink-soft);font-size:var(--fs-4);line-height:1.6}
.ed .mod-acc{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  font-size:var(--fs-4);color:var(--ink-soft);
}
.ed .mod-acc b{
  display:block;font:700 var(--fs-1)/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:4px;
}

/* ── Доказательные компоненты, поднятые из форка кейсов ────────────────────
   Эти три примитива — самые продающие на сайте, и до сих пор они были
   физически недоступны страницам, которые должны продавать проект: жили в
   cases/*/case.css со своим :root и своей шкалой. Перенесены под .ed на
   токены основной системы. Разметка та же, чтобы кейсы и услуги говорили
   одним языком.
   ────────────────────────────────────────────────────────────────────────── */

/* Таблица «до/после». Единственный формат, в котором результат читается за
   секунду: два числа рядом и стрелка между ними. */
.ed .ba{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;width:100%;border-collapse:collapse}
.ed .ba thead th{
  background:var(--card2);padding:16px 24px;text-align:left;font-size:var(--fs-2);font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted);border-bottom:1px solid var(--line);
}
.ed .ba tbody tr{border-bottom:1px solid var(--line)}
.ed .ba tbody tr:last-child{border-bottom:0}
.ed .ba td,.ed .ba th[scope=row]{padding:16px 24px;font-size:var(--fs-4);vertical-align:middle}
.ed .ba th[scope=row]{text-align:left;font-weight:700;color:var(--ink);width:42%}
.ed .ba .v-before{font-family:var(--mono);font-weight:700;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.ed .ba .v-after{font-family:var(--mono);font-weight:800;color:var(--em-text);font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .ed .ba thead{display:none}
  .ed .ba tbody tr{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:12px 16px}
  .ed .ba td,.ed .ba th[scope=row]{padding:0;width:auto}
  .ed .ba .v-before::after{content:" →";color:var(--line-2)}
}

/* «Кому подходит и кому нет». Вторая колонка здесь важнее первой: страница,
   которая честно называет, кому не подходит, вызывает больше доверия, чем
   страница, которая обещает всем. */
.ed .fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ed .fit-c{border:1px solid var(--line);border-radius:var(--r-sm);padding:28px;background:#fff}
.ed .fit-c--no{background:var(--card2)}
.ed .fit-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ed .fit-b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--em-wash);font-weight:800;color:var(--em-text);font-size:var(--fs-4)}
.ed .fit-c--no .fit-b{background:var(--stop-wash);color:var(--stop)}
.ed .fit-h h3{font-size:var(--fs-5);margin:0}
.ed .fit-c p{font-size:var(--fs-4);color:var(--ink-soft);line-height:1.6;margin:0}
.ed .fit-c ul{margin:0;padding-left:20px;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.6}
.ed .fit-c li{margin-bottom:8px}
.ed .fit-c li:last-child{margin-bottom:0}
@media(max-width:700px){.ed .fit{grid-template-columns:1fr}}

/* Честный блок: что именно пошло не так или не получится. Отрицательный
   акцент здесь единственно уместен — это и есть тот случай, ради которого
   заводился запрещающий тон. */
.ed .honest{background:var(--card2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,3.5vw,52px)}
.ed .honest-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px}
.ed .honest h2{margin:0 0 12px}
.ed .honest p{color:var(--ink-soft)}
.ed .honest-ex{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xs);padding:20px;margin-top:20px;
}
.ed .honest-ex-t{font-size:var(--fs-1);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--stop);margin-bottom:8px}
.ed .honest-ex p{font-size:var(--fs-4);color:var(--ink-soft);line-height:1.55;margin:0}
@media(max-width:860px){.ed .honest-grid{grid-template-columns:1fr;gap:28px}}

/* ── Навигация по длинной странице ─────────────────────────────────────────
   Страница программы выросла до пятнадцати секций: без ориентира читатель не
   понимает ни где он, ни сколько осталось, и уходит на середине.

   Лента, а не боковая рейка: рейка требует свободной колонки, которой в этой
   сетке нет, и на планшете всё равно превращается в ленту. Одно поведение на
   всех ширинах надёжнее двух.

   Список собирается из самой разметки скриптом — ручной перечень разошёлся бы
   со страницей при первой же правке генератора.
   ────────────────────────────────────────────────────────────────────────── */
/* Из потока, а не sticky. Sticky-лента держалась при прокрутке, но 91px
   в потоке отнимала у первого экрана: заголовок продуктовой страницы
   начинался на 55% его высоты вместо 44% на остальных. Fixed не занимает
   места, поэтому появление ленты не двигает вёрстку. */
.ed .pnav{
  position:fixed;top:64px;left:0;right:0;z-index:20;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transform:translateY(-110%);opacity:0;pointer-events:none;visibility:hidden;
  /* visibility — чтобы спрятанная лента не ловила Tab невидимыми ссылками */
  transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2);
}
.ed .pnav[hidden]{display:none}
.ed .pnav.is-on{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out),visibility 0s linear}
@media(prefers-reduced-motion:reduce){.ed .pnav,.ed .pnav.is-on{transition:none}}
.ed .pnav-in{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  max-width:1120px;margin-inline:auto;padding:12px 20px;
}
.ed .pnav-in::-webkit-scrollbar{display:none}
.ed .pnav a{
  flex:none;padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  font:700 var(--fs-2)/1 var(--mono);color:var(--ink-muted);text-decoration:none;
  white-space:nowrap;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);
}
.ed .pnav a:hover{color:var(--ink);border-color:var(--line-2)}
.ed .pnav a[aria-current="true"]{
  color:#fff;background:var(--em-text);border-color:var(--em-text);
}
/* Полоса прогресса чтения: тонкая, под лентой, без анимации ширины —
   значение ставится напрямую, иначе на длинной странице она «догоняет». */
/* Внутренний лендинг: шапка уступает место ленте разделов ------------
   Две липкие полосы одна под другой съедали четверть экрана, при этом
   общая навигация внутри лендинга не нужна — там своя. При движении
   вверх шапка возвращается сразу, а не по долистыванию до верха. */
.ed .pnav-row{display:flex;align-items:center;gap:12px;max-width:1120px;margin-inline:auto;padding-right:20px}
/* Правый край ленты гасим: без него обрез пункта вплотную к кнопке
   читается как столкновение, а не как «дальше можно листать». Тот же
   приём уже стоит на бегущей строке интеграций. */
.ed .pnav-row .pnav-in{flex:1 1 auto;min-width:0;margin-inline:0;
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
/* a.pnav-cta: иначе .ed .pnav a (0,2,1) красил текст кнопки серым — 3.25:1 */
.ed .pnav a.pnav-cta{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:var(--fs-2);white-space:nowrap;transition:background var(--dur-1) var(--ease-out)}
.ed .pnav a.pnav-cta:hover{background:var(--em-text);color:#fff}
/* Фон — за --dur-1, тень догоняет за --dur-2: шапка сначала «белеет», потом
   отрывается от контента, а не всё одним щелчком. */
.ed .site-header{transition:transform var(--dur-2) var(--ease-out),background var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.hdr-away .site-header{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.ed .site-header{transition:none}}
@media(max-width:760px){.ed .pnav-row{padding-right:12px;gap:8px}.ed .pnav a.pnav-cta{height:32px;padding:0 12px}}

.ed .pnav-bar{height:2px;background:var(--line)}
.ed .pnav-bar i{display:block;height:100%;width:0;background:var(--em-text)}
@media(max-width:640px){
  .ed .pnav{top:56px}
  .ed .pnav-in{padding:8px 16px}
  .ed .pnav a{font-size:var(--fs-2);padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
  .ed .pnav a{transition:none}
}

/* ── Схема потоков данных ──────────────────────────────────────────────────
   Вторая топология рядом с радиальным графом. Граф отвечает на вопрос «что
   умеет система» — хаб и кольцо вокруг. Здесь нужен другой вопрос: «куда
   идут данные», а у него есть направление, порядок слоёв и обратная связь.
   Радиальной фигурой это не рисуется в принципе.

   Под 760px SVG прячется, а список под ним остаётся: подписи в 13 единиц
   viewBox на телефоне превращаются в нечитаемые четыре пикселя. Список в
   разметке есть всегда — и ради телефона, и ради нейросетей, которые
   картинку не видят.
   ────────────────────────────────────────────────────────────────────────── */
.ed .flow{max-width:1120px;margin:8px auto 0}
.ed .flow-svg{width:100%;height:auto;display:block}
.ed .fl-lane{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 4}
.ed .fl-lane-t{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--ink-muted)}
.ed .fl-box{fill:var(--card);stroke:var(--line-2);stroke-width:1}
.ed .fl-box--key{fill:var(--em-wash);stroke:var(--em-text)}
.ed .fl-t{font:600 13px var(--sans,inherit);fill:var(--ink)}
.ed .fl-t--sm{font-size:var(--fs-2);fill:var(--ink-soft)}
.ed .fl-arrow{fill:none;stroke:var(--line-2);stroke-width:1.4;marker-end:url(#fl-head)}
.ed .fl-arrow--key{stroke:var(--em-text)}
.ed .fl-back{fill:none;stroke:var(--em-text);stroke-width:1.2;stroke-dasharray:5 4;marker-end:url(#fl-head-em)}
.ed .fl-edge-t{font:700 10.5px var(--mono);fill:var(--ink-muted)}
.ed .fl-head{fill:var(--line-2)}
.ed .fl-head--em{fill:var(--em-text)}

/* Текстовый дубль схемы. На десктопе — подпись под рисунком, на телефоне
   единственное представление. */
.ed .flow-list{margin:24px auto 0;max-width:1040px;display:grid;gap:12px}
.ed .flow-list li{list-style:none;display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:start;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.55}
.ed .flow-list b{font:700 var(--fs-1)/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--em-text)}
@media(max-width:760px){
  .ed .flow-svg{display:none}
  .ed .flow-list{margin-top:0}
  .ed .flow-list li{grid-template-columns:1fr;gap:2px}
}

/* ── Лестница ценности ─────────────────────────────────────────────────────
   Ступени, а не равные карточки. Карточки в ряд говорят «выбери одно из»,
   а лестница — «одно ведёт к следующему», и это разные утверждения. Сетка
   тарифов (.pricing) для этого не годится вдвойне: она рассчитана на три
   равнозначных элемента, а ступеней семь.

   Сдвиг ступени фиксированный и небольшой: на семи уровнях крупный шаг
   съедает ширину, и последняя ступень остаётся без места под текст.
   ────────────────────────────────────────────────────────────────────────── */
.ed .ladder{list-style:none;margin:8px 0 0;padding:0;max-width:1000px}
.ed .lad{
  position:relative;display:grid;grid-template-columns:1fr auto;gap:12px 20px;
  align-items:baseline;padding:16px 20px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;margin-bottom:12px;
}
.ed .lad:last-child{margin-bottom:0}
.ed .lad--key{border-color:var(--em-text);background:var(--em-wash)}
.ed .lad-n{
  font:700 var(--fs-1)/1 var(--mono);letter-spacing:.1em;color:var(--ink-muted);
  display:block;margin-bottom:8px;
}
.ed .lad--key .lad-n{color:var(--em-text)}
.ed .lad h3{font-size:var(--fs-5);margin:0 0 4px}
.ed .lad p{margin:0;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.55}
.ed .lad-ai{
  grid-column:1 / -1;margin-top:8px;padding-top:12px;border-top:1px solid var(--line);
  font-size:var(--fs-4);color:var(--ink-soft);
}
.ed .lad--key .lad-ai{border-top-color:var(--em-text)}
.ed .lad-ai b{
  font:700 var(--fs-1)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);display:block;margin-bottom:4px;
}
/* Сдвиг делает лестницу лестницей. На узких экранах он снимается: там важнее
   ширина текста, чем метафора. */
@media(min-width:900px){
  .ed .lad{margin-left:calc(var(--lad-i, 0) * 28px);width:calc(100% - var(--lad-i, 0) * 26px)}
}

/* ── Текстовая версия графа архитектуры ────────────────────────────────────
   На узком экране граф нечитаем: 22 узла в масштабе 0,4 дают подпись в 4,4
   пикселя. Ниже 760px граф уступает место списку с тем же содержанием.
   На широком экране список скрыт — там работает сам граф, — но остаётся в
   разметке: разбор узлов иначе виден только по наведению мышью, то есть не
   виден ни поисковику, ни нейросети.
   ────────────────────────────────────────────────────────────────────────── */
.ed .nx-list{display:none}
.ed .nx-list-cat{
  font:700 var(--fs-1)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin:24px 0 12px;
}
.ed .nx-list-cat:first-child{margin-top:0}
.ed .nx-item{border:1px solid var(--line);border-radius:var(--r-xs);background:#fff;margin-bottom:8px}
.ed .nx-item > summary{
  cursor:pointer;padding:12px 16px;font-weight:700;font-size:var(--fs-4);color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:12px;
}
.ed .nx-item > summary::-webkit-details-marker{display:none}
.ed .nx-item > summary::after{content:"+";margin-left:auto;font:700 var(--fs-5)/1 var(--mono);color:var(--ink-muted)}
.ed .nx-item[open] > summary::after{content:"−"}
.ed .nx-item ul{margin:0;padding:0 16px 16px 32px;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.55}
.ed .nx-item li{margin-bottom:8px}
.ed .nx-item li:last-child{margin-bottom:0}
@media(max-width:760px){
  .ed .nexus .nx-svg{display:none}
  .ed .nexus .nexus-detail{display:none}
  .ed .nx-list{display:block}
}

/* ── Навигация по разделу продукта ──────────────────────────────────────────
   Задачные страницы одного продукта — это раздел, а не набор одиночных
   лендингов. Читатель, пришедший из поиска на «сделки без движения», без этой
   полосы не узнаёт, что у продукта есть ещё пять страниц: блок «связанные
   решения» лежит в самом низу, куда доходят немногие.
   Цветов не добавляет — только существующие токены. */
.secnav-wrap{padding-top:0;padding-bottom:0}
.secnav{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.secnav-home{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:800;font-size:var(--fs-4);letter-spacing:-.01em;color:var(--ink);text-decoration:none;
}
.secnav-home::after{content:"";width:1px;height:16px;background:var(--line-2)}
.secnav ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.secnav ul a{
  display:inline-block;padding:8px 12px;border-radius:999px;
  background:var(--card2);color:var(--ink-soft);
  font-weight:700;font-size:var(--fs-3);text-decoration:none;
  transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);
}
.secnav ul a:hover{color:var(--ink)}
.secnav ul a[aria-current="page"]{background:var(--em-wash);color:var(--em-text)}
@media (prefers-reduced-motion: reduce){.secnav ul a{transition:none}}

/* ── Размер цели касания ──────────────────────────────────────────────────
   Палец промахивается по кнопке высотой 30px. WCAG 2.5.8 просит 44×44 для
   указателя; на десктопе с мышью такой пол заметно поменял бы облик кнопок,
   поэтому правило действует только там, где указатель грубый: узкий экран
   или тач. Ссылки внутри предложения под правило не подпадают — это прямое
   исключение критерия, и растягивать их значило бы рвать строку.
   ========================================================================= */
@media (max-width:760px), (pointer:coarse){
  .ed .btn,
  .ed .tab-btn,
  .ed .ck-btn,
  .ed .blog-filter-btn{min-height:44px}
  .ed .skip-link{min-height:44px;display:inline-flex;align-items:center}
  /* Логотип, бейдж и ссылка «подробнее» — строчные, высоту им задаёт текст. */
  .ed .nav-logo,
  .ed .arda-badge,
  .ed .card-link,
  .ed .cta-contact-line{min-height:44px;display:inline-flex;align-items:center}
  /* Ссылки подвала стоят колонками: высоту добираем отступом, чтобы между
     соседними целями оставался промежуток, а не сплошная полоса. */
  .ed .footer-col li a,
  .ed .footer-bottom nav a{display:inline-block;padding-top:16px;padding-bottom:16px}
  /* Крошки — навигация, но строчная: берём минимум AA (24px), а не 44,
     иначе строка пути разъедется на три этажа. */
  .ed .crumbs a{display:inline-block;padding-top:4px;padding-bottom:4px}
  .ed .footer-social a{min-width:44px;min-height:44px}
  /* Лента разделов продукта и список связанных кейсов — это навигация,
     по ней ходят пальцем чаще, чем по чему-либо ещё на странице. */
  .ed .pnav-in a{min-height:44px;display:inline-flex;align-items:center}
  .ed .r-related li a{display:inline-block;padding-top:12px;padding-bottom:12px}
  /* Флажок согласия: сам квадрат остаётся целью, подписи мало. */
  .ed .consent input[type="checkbox"]{width:24px;height:24px}
}


/* ── Три акцента на пути к заявке ─────────────────────────────────────────
   Анимаций на сайте и так 77, поэтому добавляем не «ещё движения», а ровно
   те три момента на пути к заявке, где отклика не было совсем.

   1. Подложка модалки. Карточка уже выезжала (pilotIn), а фон под ней
      включался мгновенно — вспышка затемнения перед плавным движением.
      Если браузер не наследует переменные в ::backdrop, свойство станет
      недействительным и подложка просто включится как раньше.
   2. Вопросы анкеты. Восемь блоков появлялись разом; лесенка в 55 мс даёт
      глазу порядок чтения сверху вниз.
   3. Подтверждение отправки. Момент, ради которого всё и делалось, до сих
      пор просто подменял разметку без единого кадра.
   ========================================================================= */
@keyframes backIn{from{opacity:0}to{opacity:1}}
.ed .pilot-dialog[open]::backdrop{animation:backIn var(--dur-2) var(--ease-out) both}

@keyframes quizQIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ed .quiz-dialog[open] .quiz-q{
  animation:quizQIn var(--dur-2) var(--ease-out) both;
  animation-delay:calc(var(--qi,0) * 55ms);
}

@keyframes okCard{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes okMark{from{opacity:0;transform:scale(.4)}60%{transform:scale(1.07)}to{opacity:1;transform:none}}
.ed .form-success{animation:okCard var(--dur-2) var(--ease-out) both}
.ed .form-success-ic{animation:okMark var(--dur-3) var(--ease-spring) both;animation-delay:var(--dur-1)}

@media(prefers-reduced-motion:reduce){
  .ed .pilot-dialog[open]::backdrop,
  .ed .quiz-dialog[open] .quiz-q,
  .ed .form-success,
  .ed .form-success-ic{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   EDGE-TO-EDGE: фундамент

   Полосы тянутся до края окна, колонка набора остаётся на месте. Ширина
   колонки задана здесь и только здесь — меняя --col, вы меняете длину
   строки сразу на всех полосах.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* 1152 — ровно столько даёт сегодня контент-бокс .wrap (1264) минус
     собственный паддинг тёмной полосы (2×56). Геометрия не меняется. */
  --col:1152px;
  /* Колонка героя: те же 1264 минус его 2×16. */
  --col-hero:1232px;
  /* Вынос до края окна. Работает, потому что .wrap центрирован
     (margin:0 auto), а 50% считается от родителя. */
  --bleed:calc(50% - 50vw);
}
/* clip, а НЕ hidden. overflow-x:hidden делает предка скролл-контейнером и
   убивает position:sticky у .site-header (styles.css:139) и у .pnav. clip
   скролл-контейнера не создаёт. Нужен потому, что 100vw включает ширину
   полосы прокрутки: без него полоса вылезает на ~7px и рождает
   горизонтальную прокрутку.

   Правило нужно на ОБОИХ элементах, и это не дублирование. Браузер
   переносит overflow корня на вьюпорт, а сам <html> при этом считается
   visible — то есть одна строка про html не обрезала ничего, и страница
   действительно уезжала вбок на 5px (scrollWidth 1435 при clientWidth
   1430 на окне 1440). Пока у html значение не visible, значение body на
   вьюпорт не переносится и действует на самом body — он и срезает вынос.
   Убрать любую из двух строк — прокрутка возвращается. Темы подсайтов
   (echolytics/theme.css и остальные) давно ставят clip на body.theme-*,
   поэтому там прокрутки и не было. Проверено 20.09.2026: scrollWidth
   становится равен clientWidth, scrollLeft не сдвигается, липкая шапка
   жива, а cookie-bar, mobile-menu и sticky-cta не обрезаются — у body
   нет transform, так что контейнера для position:fixed он не создаёт. */
html{overflow-x:clip}
body{overflow-x:clip}

/* ── Серые: с шестнадцати оттенков до шести ────────────────────────────
   Шестнадцать набирались не из hex, а из ступеней белого с прозрачностью
   на тёмных полосах и из opacity: на тексте. Второе опаснее: opacity даёт
   цвет, которого нет ни в одном списке, и его не видит ни один храповик —
   он виден только в браузере. Ниже — единственные разрешённые значения.
   Альфа ниже .5 запрещена check-palette.mjs (АЛЬФА_МИН). */
:root{
  --on-dark:#FFFFFF;                     /* заголовки и ключевые числа */
  --on-dark-soft:rgba(255,255,255,.72);  /* абзацы на тёмном           */
  --on-dark-muted:rgba(255,255,255,.55); /* подписи, мета, правовое    */
}
.ed footer .footer-brand p,.ed footer .footer-col ul li a,
.ed .roi-intro,.ed .cta-big-sub,.ed .cta-steps li,
.ed #stats.statdark .sec-head p{color:var(--on-dark-soft)}
.ed footer .footer-bottom,.ed footer .footer-bottom a,
.ed .cta-note,.ed #stats.statdark .stat-lbl{color:var(--on-dark-muted)}
.ed footer .footer-col h4{color:var(--on-dark)}

/* opacity как цвет — убираем. Логотипы стека при opacity .4 давали около
   2.5:1 и не читались вовсе; --ink-muted даёт 5.36:1. Телефон в шапке
   переводится на сплошной --ink: он элемент конверсии, приглушать его
   было нечем оправдать. */
.ed .trust-logo{color:var(--ink-muted);opacity:1;transition:color var(--dur-1) var(--ease-out)}
.ed .trust-logo:hover{color:var(--ink);opacity:1}
.ed .card-link{color:var(--ink-soft);opacity:1}
.ed .card-link:hover{color:var(--ink);opacity:1}
.ed .nav-phone{color:var(--ink);opacity:1}
.ed .m-sub a{color:var(--ink-soft);opacity:1}
.ed .footer-legal{font-size:var(--fs-2);color:var(--on-dark-muted)}

/* ── Иерархия заголовков ───────────────────────────────────────────────
   Секционный h2 сидел на --fs-d2 (styles.css:2429), из-за чего страница
   падала с 74 сразу на 40 — это обрыв, а не лестница. Переводим на свою
   ступень. Подзаголовок героя поднимаем следом, иначе 96→17 даёт тот же
   провал этажом ниже. */
.ed .sec-head h2{font-size:var(--fs-d3);line-height:1.06;letter-spacing:-.03em}
.ed .cta-big h2,.ed .security h2{font-size:var(--fs-d3);line-height:1.06}
.ed .yn-h1{line-height:1.02;letter-spacing:-.04em}
.ed .yn-sub{font-size:var(--fs-lead-lg);line-height:1.5}
/* Это число стоит с white-space:nowrap в половине колонки тёмной полосы —
   на 64px оно вылезет за край. Пиним на ступень ниже. */
.ed .roi-result-num{font-size:var(--fs-d2)}

/* ── Подвал во всю ширину ──────────────────────────────────────────────
   Селектор дословно повторяет styles.css:3036 и стоит позже: этого
   достаточно, !important не нужен. Колонка держится не паддингом полосы,
   а max-width внутреннего блока. */
.ed footer{margin-inline:var(--bleed);border-radius:0;padding-block:clamp(24px,3vw,48px)}
.ed footer .footer,.ed footer .footer-bottom{max-width:calc(var(--col) + 40px);margin-inline:auto;width:100%}

/* ── Тёмная полоса цифр во всю ширину ──────────────────────────────────
   Точная копия селектора со строки 2907, специфичность (1,2,0), позиция
   ниже. Перебиваются ровно четыре свойства; background, color, overflow и
   margin-top продолжают жить в исходном правиле. padding задаётся двумя
   longhand'ами — это и есть лекарство от прошлого провала.

   Арифметика на 1920: max(56, (1920−1152)/2 = 384) → 384, колонка
   1920−768 = 1152, ровно как сегодня. На ширинах меньше 1264 срабатывает
   первый аргумент, и мобильные отступы не меняются. */
.ed #stats.statdark{margin-inline:var(--bleed);border-radius:0;padding-block:clamp(56px,6vw,96px);padding-inline:max(clamp(24px,4vw,56px),calc((100vw - var(--col))/2))}

/* ── Остальные тёмные полосы ───────────────────────────────────────────
   (0,2,0) — как у строк 2464/2663/2950, но позже. Правило сильнее, чем
   @media(max-width:880px){.roi{padding:…}} (0,1,0), поэтому узкие отступы
   задаются здесь же первым аргументом max(). grid-template-columns из тех
   медиа-правил не трогается и продолжает работать. */
.ed .roi,.ed .security,.ed .cta-big{margin-inline:var(--bleed);border-radius:0;box-shadow:none;padding-block:clamp(48px,6vw,96px);padding-inline:max(clamp(32px,4vw,56px),calc((100vw - var(--col))/2))}
.ed #stats.statdark,.ed .roi,.ed .security,.ed .cta-big{margin-block:clamp(56px,6vw,96px) 0}

/* ── Изумруд: с 0.30% площади до заметной доли ─────────────────────────
   Две правки: подложка героя в край даёт площадь, изумрудный финальный
   призыв даёт громкость.

   Цвет заливки — #0A7A50, а не бренд-#0B8A5B. Белый на #0B8A5B даёт
   4.37:1 при пороге AA 4.5 — не проходит. На #0A7A50 выходит 5.37:1.
   Посчитано, не на глаз. */
.ed .hero-yn{margin-inline:var(--bleed);padding-inline:max(16px,calc((100vw - var(--col-hero))/2));padding-block:clamp(20px,2.5vw,40px);background:linear-gradient(180deg,#E3F5ED 0%,#FFFFFF 82%)}
/* !important здесь обязателен и единственный на всю правку: фон этих полос
   объявлен с !important дважды (строки 2464 и 2663). Равная специфичность
   плюс позиция ниже плюс important — перебивает important. */
.ed .cta-big{background:linear-gradient(160deg,#0A7A50 0%,#096847 100%)!important}
/* На изумруде полупрозрачный белый не читается: .72 даёт 3.56:1, .55 —
   2.72:1. Храповик этого не поймает, он считает контраст на белом фоне.
   Поэтому внутри этой полосы текст только сплошной. */
.ed .cta-big .cta-big-sub,.ed .cta-big .cta-note,.ed .cta-big .cta-steps li,
.ed .cta-big .cta-contact-line{color:#FFFFFF}
/* Метка .mk на теме .ed красится в #0B8A5B (строка 2441) — на изумрудной
   полосе это изумруд на изумруде, 1.23:1, читать нечем. #A7EBD0 даёт
   3.95:1: для заголовка в 64px порог 3.0, проходит. Взят он не наугад —
   этот оттенок уже внесён в РАЗРЕШЕНО в check-palette.mjs, поэтому
   храповик трогать не пришлось. */
.ed .cta-big h2 .mk{color:#A7EBD0!important}
.ed .cta-big .btn-ghost{border-color:#FFFFFF;color:#FFFFFF}
/* .btn-white оставался изумрудным (строка ~2693, со времён тёмной полосы):
   изумрудная пилюля на изумрудной полосе почти не видна. На полосе он белый,
   текст #0A7A50 — 5.37:1. */
.ed .cta-big .btn-white{background:#FFFFFF;color:var(--em-text)}
.ed .cta-big .btn-white:hover{background:#E3F5ED;color:var(--em-text)}

/* ═══ HEADING LEVELS ═══════════════════════════════════════════════════
   fix-heading-levels.mjs перевёл h4, стоявшие сразу под h2, в h3:
   скринридер видел пропуск уровня. Вид не должен меняться, поэтому ниже —
   значения, снятые с живого сайта до правки (computed style прежнего h4 в
   каждом контейнере), а не «inherit»: общее .ed h3 иначе навязало бы 800,
   −.03em и balance. Префикс .ed нужен, чтобы перебить именно его. */
.ed .fr-li h3{font-weight:700;font-size:var(--fs-4);letter-spacing:normal;line-height:1.2;color:inherit;text-transform:none;margin:0;text-wrap:wrap}
.ed .sec-item-body h3{font-weight:700;font-size:var(--fs-5);letter-spacing:normal;line-height:1.2;color:inherit;text-transform:none;margin:0;text-wrap:pretty}
.ed .tab-col h3{font-weight:800;font-size:var(--fs-3);letter-spacing:.04em;line-height:1.2;text-transform:uppercase;color:var(--ink-muted);margin:0 0 12px;text-wrap:wrap}
.ed .case-row h3{font-weight:800;font-size:var(--fs-2);letter-spacing:.04em;line-height:1.2;text-transform:uppercase;color:var(--ink-muted);margin:0 0 4px;text-wrap:wrap}

/* ═══ ARTICLE FIGURE ═══════════════════════════════════════════════════
   Иллюстрация статьи: встроенный SVG на мягкой подложке, как медиарамка
   (--r-sm по шкале радиусов). Подпись — приглушённым, по шкале кеглей. */
.article-fig{margin:32px 0 40px;padding:24px;background:#F6F6F7;border:1px solid #ECECEC;border-radius:var(--r-sm)}
.article-fig svg{display:block;width:100%;max-width:720px;height:auto;margin-inline:auto;font-family:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,sans-serif}
.article-fig figcaption{margin-top:16px;font-size:var(--fs-3);line-height:1.5;color:var(--ink-muted);max-width:62ch}
/* На телефоне схема шириной 640 ужимается вдвое, и подписи падают до 8px.
   Вместо этого схема держит 520px и прокручивается внутри рамки, как
   широкие таблицы статей: подписи ~14px, страница вбок не едет. */
@media(max-width:760px){.article-fig{padding:16px;margin:24px 0 32px;overflow-x:auto}.article-fig svg{min-width:520px}}

/* ═══ BLOG CARDS WITH COVERS ═══════════════════════════════════════════
   Карточка статьи с обложкой: картинка 16:9 в край карточки, рубрика —
   плашкой поверх картинки, ниже строка «дата · время» со значками,
   заголовок и начало текста. Порядок задаётся order, а не разметкой: так
   одни и те же карточки в списке блога и в «Читайте также» перестраиваются
   без правки 160 страниц. Всё под :has(.post-cover) — карточки без обложки
   (сравнения, решения) остаются прежними. */
.blog-grid:has(.post-cover){gap:48px 32px}
.post-card:has(.post-cover){position:relative;padding:0 0 24px;background:#FFFFFF;border:1px solid #ECECEC;border-radius:var(--r);overflow:hidden;box-shadow:0 14px 34px -22px rgba(0,0,0,.18)}
.post-card:has(.post-cover):hover{border-color:rgba(11,138,91,.35);box-shadow:0 18px 40px -20px rgba(11,138,91,.28)}
.post-card:has(.post-cover) > *{margin-inline:24px}
.post-cover{order:0;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#F6F6F7;margin:0 !important;transition:transform var(--dur-1) var(--ease-out)}
.post-card:hover .post-cover{transform:scale(1.03)}
.post-card:has(.post-cover) .post-meta{order:1;margin-top:20px;gap:16px}
.post-card:has(.post-cover) h3{order:2;margin-top:12px}
.post-card:has(.post-cover) .post-excerpt{order:3}
.post-card:has(.post-cover) .post-more{display:none}
.post-card:has(.post-cover) .post-cat{position:absolute;top:16px;left:16px;margin:0;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 12px -8px rgba(0,0,0,.3)}
.post-meta span{display:inline-flex;align-items:center;gap:8px}
.post-meta .icon{width:16px;height:16px;flex:none}
.post-card.feature:has(.post-cover){background:#FFFFFF}

/* ═══ AUTHOR PAGE ═══════════════════════════════════════════════════════
   Страница автора: фото слева, имя, роль и описание справа, ниже его
   статьи обычной сеткой блога. Отдельных стилей карточек не нужно —
   .post-card с обложками уже общий. */
.author-head{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
.author-photo{border-radius:var(--r-sm);overflow:hidden;background:var(--em-text);aspect-ratio:4/5}
.author-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.author-head h1{margin-top:8px;font-size:var(--fs-d2);line-height:1.15}
.author-bio{margin-top:16px;font-weight:500;font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.6;max-width:62ch}
.author-head .post-meta{margin-top:20px}
.author-skills{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:760px){.author-head{grid-template-columns:1fr;gap:24px}.author-photo{max-width:240px}}

/* ═══ SKELETON ══════════════════════════════════════════════════════════
   Места, где содержимое приходит позже страницы, пока ждут — показывают
   форму будущего содержимого, а не пустоту. Это не экран загрузки (его на
   сайте нет намеренно, см. site-loader): страница видна сразу, заглушка
   стоит только там, где данных ещё нет.

   Пульс яркости, а не бегущий блик: шиммер снят с сайта как типовой
   AI-паттерн. Петля длиннее 700 мс на --ease-smooth — по check-motion
   это фоновая петля, а не отклик.

   1. Ленивые картинки (обложки, фото, скриншоты) — класс sk-wait ставит
      script.js, пока картинка не пришла.
   2. Калькулятор ROI до монтирования острова: main.tsx помечает
      смонтированный остров data-mounted, до этого рядом с текстом стоят
      заглушки ползунков и панели результата в той же сетке 1fr 1fr —
      острову некуда «прыгать». Только при включённом JS: без него
      заглушка висела бы вечно.
   3. Анализатор звонка — класс sk-pulse на пузырях внутри острова. */
@keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.sk-pulse{animation:sk-pulse 1.6s var(--ease-smooth) infinite}
img.sk-wait{background-color:#ECECEC;animation:sk-pulse 1.6s var(--ease-smooth) infinite}
@media (scripting:enabled){
  [data-island="roi-calc"]:not([data-mounted]){display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start}
  [data-island="roi-calc"]:not([data-mounted]) > *{grid-column:1;justify-self:start}
  [data-island="roi-calc"]:not([data-mounted])::before{content:"";grid-column:1;grid-row:4;width:100%;height:176px;margin-top:32px;
    background:
      linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) 0 0/42% 12px no-repeat,
      linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)) 0 28px/100% 5px no-repeat,
      linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) 0 64px/36% 12px no-repeat,
      linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)) 0 92px/100% 5px no-repeat,
      linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) 0 128px/30% 12px no-repeat,
      linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)) 0 156px/100% 5px no-repeat;
    animation:sk-pulse 1.6s var(--ease-smooth) infinite}
  [data-island="roi-calc"]:not([data-mounted])::after{content:"";grid-column:2;grid-row:1 / span 4;min-height:400px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);animation:sk-pulse 1.6s var(--ease-smooth) infinite}
  @media(max-width:1023px){
    [data-island="roi-calc"]:not([data-mounted]){grid-template-columns:1fr}
    [data-island="roi-calc"]:not([data-mounted])::after{grid-column:1;grid-row:auto;min-height:320px;margin-top:32px}
  }
}
@media (prefers-reduced-motion:reduce){
  .sk-pulse,img.sk-wait,[data-island]::before,[data-island]::after{animation:none}
}


/* ═══ БЛОГ «растИИшка» В МЕНЮ ═══════════════════════════════════════════
   Блог назван как Telegram-канал и выделен в шапке чёрной плашкой со знаком
   канала. Плашка меньше кнопки «Запросить демо» и стоит в ряду ссылок, а не
   рядом с кнопкой — читается как бренд раздела, а не как второй призыв. */
.nav-links>a.nav-blog{display:inline-flex;align-items:center;gap:4px;align-self:center;padding:4px 12px 4px 8px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-weight:700;letter-spacing:-.01em;transition:background var(--dur-1) var(--ease-out)}
.nav-links>a.nav-blog::after{display:none}
.nav-links>a.nav-blog:hover{background:#000000;color:#FFFFFF}
/* Листья знака — изумрудный акцент (--ic-ac проникает в <use>), остальное —
   белая линия. На тёмном фоне берём светлый изумруд из токенов. */
.nav-blog .icon,.m-blog .icon{width:20px;height:20px;stroke-width:1.5;--ic-ac:var(--em-on-dark)}
.rb-sub-mark .icon{--ic-ac:var(--em-on-dark)}
.mobile-menu>a.m-blog{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:8px 0;padding:8px 20px 8px 12px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-size:var(--fs-6)}
.mobile-menu>a.m-blog .icon{width:28px;height:28px}
.m-blog span{margin-left:4px;font-weight:600;font-size:var(--fs-3);letter-spacing:0;opacity:.6}

/* ═══ БЛОГ «растИИшка»: ШАПКА РАЗДЕЛА ═══════════════════════════════════
   Шапка блога тёмная, как логотип канала: слева название и подписка, справа
   крупный знак «мозг с ростком». Основа — канонический .page-hero.dark. */
.rb-grid{position:relative;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.rb-kicker{font-weight:700;font-size:var(--fs-2);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted)}
.rb-hero h1{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rb-name{font-weight:800;font-size:var(--fs-d4);line-height:1;letter-spacing:-.04em;color:var(--on-dark)}
.rb-h1-sub{font-weight:700;font-size:var(--fs-d1);line-height:1.2;letter-spacing:-.02em;color:var(--on-dark-soft)}
.rb-tagline{margin-top:20px;font-weight:700;font-size:var(--fs-5);letter-spacing:.04em;text-transform:uppercase;color:var(--em-on-dark)}
.rb-hero .ph-sub{max-width:640px}
.rb-tg .icon{width:20px;height:20px;margin-right:8px}
.rb-authors{display:flex;align-items:center;gap:12px;font-weight:600;font-size:var(--fs-3);color:var(--on-dark-muted)}
.rb-faces{display:flex}
.rb-faces a{display:block;width:40px;height:40px;margin-left:-12px;border-radius:999px;overflow:hidden;border:2px solid #111111;transition:transform var(--dur-1) var(--ease-out)}
.rb-faces a:first-child{margin-left:0}
.rb-faces a:hover{transform:translateY(-4px)}
.rb-faces img{display:block;width:100%;height:100%;object-fit:cover}
.rb-mark{width:clamp(180px,24vw,320px);aspect-ratio:1}
/* 3D-знак отрисован на почти чёрном фоне; края растворяем маской, чтобы
   квадрат картинки не читался плиткой поверх изумрудного свечения шапки. */
.rb-mark img{display:block;width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
@media(max-width:760px){.rb-grid{grid-template-columns:1fr}.rb-mark{display:none}}

/* ═══ БЛОГ «растИИшка»: ПОДПИСКА ПОСЛЕ СТАТЬИ ═══════════════════════════ */
.rb-sub{max-width:760px;margin:48px auto 0;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:24px 28px;border-radius:var(--r-sm);background:#111111;color:var(--on-dark)}
.rb-sub-mark{width:56px;height:56px;display:grid;place-items:center;border-radius:var(--r-xs);background:rgba(255,255,255,.06)}
.rb-sub-mark .icon{width:40px;height:40px;stroke-width:1.4}
.rb-sub-title{font-weight:800;font-size:var(--fs-5);letter-spacing:-.01em}
.rb-sub-text p+p{margin-top:4px;font-weight:500;font-size:var(--fs-4);line-height:1.5;color:var(--on-dark-soft)}
.rb-sub-btn{white-space:nowrap}
.rb-sub-btn .icon{width:18px;height:18px;margin-right:8px}
@media(max-width:760px){.rb-sub{grid-template-columns:auto 1fr;margin:40px 20px 0;padding:20px}.rb-sub-btn{grid-column:1/-1;justify-content:center}}
/* Ширина шапки. Контейнер шапки не шире ~1264 px на любом экране, а ссылки,
   телефон и кнопка не помещались в одну строку уже на 1221–1380 px (шапка
   переносилась в два ряда ещё до плашки блога). Поэтому промежутки и плашка
   компактные везде, а ниже 1400 px убираем телефон: он есть в подвале, на
   странице контактов и в мобильном меню. */
.nav-links{gap:16px}
.nav-links>a.nav-blog{padding:4px 12px 4px 8px;font-size:var(--fs-3)}
.nav-blog .icon{width:18px;height:18px}
@media(max-width:1400px){.nav-right .nav-phone{display:none}}

/* ── Услуги агентства на главной (15.09.2026) ─────────────────────────────
   Три услуги — не продукты, поэтому не бенто: одинаковые по весу карточки с
   «что это», «кому», тремя фактами со страницы услуги и ссылкой. */
/* Четыре услуги (с 16.09.2026 добавилась «Разработка сайтов»): в три колонки
   четвёртая карточка оставалась одна в ряду. Две колонки дают полный ряд и
   больше места длинному описанию услуги. */
.ed .svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.ed .svc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);padding:24px;overflow:hidden;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.ed .svc:hover{border-color:var(--line-2);box-shadow:0 16px 40px rgba(0,0,0,.06)}
.ed .svc-fmt{font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--em-text)}
.ed .svc h3{margin:12px 0 0;font-size:var(--fs-d1);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ed .svc-what{margin:12px 0 0;font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.ed .svc-who{margin:12px 0 24px;font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.ed .svc-who b{color:var(--ink);font-weight:700}
.ed .svc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:auto 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.ed .svc-facts div{min-width:0}
.ed .svc-facts dt{font-family:var(--mono);font-size:var(--fs-6);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.ed .svc-facts dd{margin:4px 0 0;font-size:var(--fs-2);line-height:1.4;color:var(--ink-muted)}
.ed .svc .card-link{margin-top:0;padding-top:20px}
.ed .svc-note{margin-top:24px;max-width:760px;font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft)}
/* Иллюстрация услуги: фирменный объёмный рендер (матово-белое + изумруд),
   тот же язык, что у картинки ИИ-трансформации на её странице. Рамка одна на
   все пять, поэтому разные пропорции исходников кадрируются по центру. */
.ed .svc-art{display:block;margin:-24px -24px 16px;aspect-ratio:16/10;overflow:hidden;background:var(--card2);border-bottom:1px solid var(--line)}
.ed .svc-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform var(--dur-3) var(--ease-out)}
.ed .svc:hover .svc-art img{transform:scale(1.03)}
/* «Кому подходит» — под раскрытием: абзац с оговорками остаётся в разметке,
   но не занимает пол-карточки до того, как о нём спросили. */
.ed .svc-who-d{margin:12px 0 20px;font-size:var(--fs-3)}
.ed .svc-who-d>summary{padding:4px 0;cursor:pointer;width:fit-content;font-weight:700;color:var(--ink-soft);list-style:none}
.ed .svc-who-d>summary::-webkit-details-marker{display:none}
.ed .svc-who-d>summary::after{content:" +";color:var(--em-text)}
.ed .svc-who-d[open]>summary::after{content:" −"}
.ed .svc-who-d .svc-who{margin:8px 0 0;font-size:var(--fs-3)}
/* Шестая ячейка сетки: вопрос «что мне нужно» вместо сноски под таблицей. */
.ed .svc--ask{justify-content:center;gap:12px;background:var(--card2)}
.ed .svc--ask h3{margin:0;font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.ed .svc--ask p{font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.ed .svc--ask .btn{align-self:flex-start;margin-top:4px}
.ed .svc-ask__list{display:grid;gap:8px;margin:4px 0 8px;font-size:var(--fs-3);color:var(--ink-soft);line-height:1.45}
.ed .svc-ask__list li{padding-left:20px;position:relative}
.ed .svc-ask__list li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--em)}
@media(max-width:1180px){.ed .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.ed .svc-grid{grid-template-columns:1fr}}
/* Пятая услуга (с 18.09.2026) — на всю ширину сетки в две колонки, чтобы не
   осталась сиротой; текст держим в читаемой мере. */
.ed .svc--wide{grid-column:1/-1}
.ed .svc--wide .svc-what,.ed .svc--wide .svc-who{max-width:760px}
/* Седьмая услуга (с 25.09.2026, «Приложения для бизнеса»): семь карточек и
   «Не знаете, что нужно?» — восемь ячеек. В три колонки это 3+3+2 с дырой,
   поэтому вопрос занимает две ячейки последнего ряда (3+3+1+2), а внутри
   раскладывается в две колонки: слева вопрос и кнопка, справа три обещания.
   В две колонки восемь ячеек и так дают четыре полных ряда, в одну — столбик. */
@media(min-width:1181px){
  .ed .svc-grid .svc--ask{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:40px;row-gap:12px;align-content:center;padding:40px}
  .ed .svc-grid .svc--ask>h3{grid-column:1;grid-row:1}
  .ed .svc-grid .svc--ask>p{grid-column:1;grid-row:2}
  .ed .svc-grid .svc--ask>.btn{grid-column:1;grid-row:3;justify-self:start}
  .ed .svc-grid .svc--ask>.svc-ask__list{grid-column:2;grid-row:1/4;align-self:center;margin:0}
}

/* ═══ ГЛАВНАЯ 18.09.2026: продукты плитками, отрасли, живой финальный CTA ═══
   Точечная правка четырёх блоков (владелец откатил полную перестройку).
   «Для кого 404ai» (#roles) снят, его три роли — строкой .ind-roles под
   отраслями. Плитки продуктов — общая разметка статической копии и
   React-острова (ProductsBento.tsx рендерит те же классы). */
/* Лента контента Киры (20.09.2026). Хвост секции продуктов: единственное
   место на главной, где видно не интерфейс, а то, что выходит наружу.
   Ролики здесь другие, не те три, что стоят в плитке Киры. Играют не больше
   трёх одновременно (см. initShowcaseVideos), остальные стоят обложкой. */
.krb{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.krb__t{max-width:820px;font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.krb__t b{color:var(--ink);font-weight:800}
.krb__rail{display:flex;gap:12px;margin:20px 0 16px;padding-bottom:8px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.krb__rail::-webkit-scrollbar{display:none}
.krb__rail{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent)}
.krb__item{flex:0 0 148px;scroll-snap-align:start}
.krb__m{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:var(--r-xs);background:#1C1C1F}
.krb__p,.krb__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.krb__cap{display:block;margin-top:8px;font-size:var(--fs-2);font-weight:700;line-height:1.35;color:var(--ink)}
.krb__cap i{display:block;margin-top:2px;font-style:normal;font-weight:600;color:var(--ink-muted)}
@media(max-width:599px){.krb__rail{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}.krb__item{flex-basis:132px}}
/* Призыв внутри длинного пролёта (21.09.2026): между кнопкой первого
   экрана и следующим действием было 5,8 экрана на компьютере и 12 на
   телефоне. Строка, а не секция: пролёт не должен стать длиннее. */
.home-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px;padding:24px 28px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card2)}
.home-cta__t{flex:1 1 420px;font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.home-cta__t b{color:var(--ink);font-weight:800}
.home-cta__links{flex:1 1 100%;font-size:var(--fs-3);line-height:1.6;color:var(--ink-muted)}
.home-cta__links a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px}
.home-cta__links a:hover{color:var(--em-text)}
.cases-more__act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.int-more{color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px}
.int-more:hover{color:var(--em-text)}
/* Две тёмные полосы подряд (цифры и ROI) разделяла белая щель 86 px —
   читалась как незакрашенный шов. Склеиваем с волоском между ними. */
.ed #stats+#roi{margin-top:0;border-top:1px solid rgba(255,255,255,.08)}
/* Контур данных (20.09.2026). Заголовок секции утверждал «один контур
   данных», и это было единственное место, где утверждение жило. Схема
   набрана текстом, а не нарисована: факты должны читаться и поисковиком, и
   нейросетью, а графика здесь — только тёмная панель и стрелки. */
.kontur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:center;margin:0 0 24px}
.kontur__side{position:relative}
.kontur__lbl{font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.kontur__list{display:grid;gap:8px;margin-top:12px}
.kontur__list li{padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--card);
  font-size:var(--fs-3);font-weight:600;line-height:1.4;color:var(--ink-soft)}
.kontur__core{position:relative;padding:28px 32px;border-radius:var(--r-sm);color:#FFFFFF;
  background:radial-gradient(70% 90% at 50% 0%,rgba(17,163,104,.34) 0%,rgba(17,163,104,0) 68%),#121214;
  box-shadow:0 30px 70px -32px rgba(16,24,20,.55)}
.kontur__core-t{font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;color:#FFFFFF}
.kontur__prods{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.kontur__prods li{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);font-family:var(--mono);font-size:var(--fs-2);font-weight:700;color:#FFFFFF}
.kontur__core-s{font-size:var(--fs-3);line-height:1.55;color:var(--on-dark-soft)}
/* Стрелки от источников к ядру и от ядра к результатам — только на широком
   экране: в одну колонку они указывали бы в пустоту. */
@media(min-width:1024px){
  .kontur__side::after{content:"";position:absolute;top:50%;width:16px;height:1px;background:var(--line-2)}
  .kontur__side:first-child::after{right:-16px}
  .kontur__side:last-child::after{left:-16px}
}
@media(max-width:1023px){
  .kontur{grid-template-columns:1fr;gap:12px}
  .kontur__core{order:-1}
}
.pt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pt{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;
  box-shadow:0 1px 2px rgba(16,24,20,.04),0 14px 34px -22px rgba(16,24,20,.16);
  transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.pt:hover{transform:translateY(-4px);border-color:var(--em);box-shadow:0 2px 6px rgba(11,138,91,.07),0 28px 52px -22px rgba(11,138,91,.30)}
.pt:focus-visible{outline:none;box-shadow:var(--ring)}
.pt-top{display:flex;align-items:center;gap:12px}
.pt-art{width:48px;height:48px;flex:none;mix-blend-mode:multiply}
.pt-cat{font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);line-height:1.35}
.ed .pt-name{margin-top:4px;font-size:var(--fs-7);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.pt-what{margin-bottom:8px;font-size:var(--fs-4);font-weight:500;line-height:1.5;color:var(--ink-soft)}
.pt-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.pt-price{display:block;font-size:var(--fs-3);font-weight:600;line-height:1.4;color:var(--ink-soft)}
.pt-price b{margin-right:4px;font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.pt-price small{display:block;margin-top:4px;font-size:var(--fs-2);font-weight:700;color:var(--em-text)}
.pt-go{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-weight:700;font-size:var(--fs-5);color:var(--ink);
  transition:transform var(--dur-2) var(--ease-spring),background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.pt:hover .pt-go{background:var(--em-text);border-color:var(--em-text);color:#FFFFFF;transform:translateX(4px)}

/* Витрина продукта. С 20.09.2026 плитка начинается не с иконки, а с картинки.
   21.09.2026 кадры интерфейса заменены обложками в стиле иллюстраций услуг:
   экран в плитке 400 px читался как мелкая таблица, а не как продукт. У Киры
   вместо обложки — три примера роликов, её собственный результат. */
.pt--shot{padding-top:0;overflow:hidden}
.pt-shot{order:-1;position:relative;display:block;margin:0 -24px 4px;aspect-ratio:16/10;overflow:hidden;background:var(--card2);border-bottom:1px solid var(--line)}
.pt-shot__img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;
  transition:transform var(--dur-3) var(--ease-out)}
.pt:hover .pt-shot__img{transform:scale(1.03)}
/* Обложка продукта — иллюстрация в стиле услуг: кадрируется по центру. */
.pt-shot--art .pt-shot__img{object-position:center}
/* Живая обложка: ролик из той же картинки лежит поверх постера и появляется,
   когда начал играть. Без JS и при «меньше движения» остаётся постер. */
.pt-shot__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.pt-shot__v.is-playing{opacity:1}
.pt:hover .pt-shot__v{transform:scale(1.03);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-out)}
@media(prefers-reduced-motion:reduce){.pt-shot__v{display:none}}
.pt-shot__bar,.cases-shot__bar{position:absolute;left:12px;top:12px;z-index:2;padding:4px 8px;border-radius:var(--r-3xs);
  background:rgba(255,255,255,.94);box-shadow:0 1px 2px rgba(16,24,20,.10);
  font-size:var(--fs-1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--ink-muted)}
/* Живые витрины продуктов (21.09.2026, ТЗ креативного продакта). У каждой свой
   медиум, чтобы плитки не читались одним шаблоном: Эхолитикс — тёмное видео
   «призма» с субтитрами звонка; Дирижёр — телефон с перепиской в MAX на
   вечернем столе; Фонекс — табло обзвона без медиа; Коуч — окно тренировочного
   звонка с ИИ-клиентом. Текст — настоящий HTML поверх кадра. Разметка —
   react/src/components/liveUi.ts, тайминги — scripts/gen-scene-css.mjs.
   Базовое состояние — финальный кадр, его видят при «меньше движения». */
.lv-layer{position:absolute;inset:0;z-index:2;pointer-events:none;font-size:var(--fs-1);line-height:1.3}
.lv .pt-shot__img{object-position:center}

/* Эхолитикс */
.lv--echo{background:#121214;border-bottom-color:#26262A}
.lv--echo .lv-layer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(18,18,20,.92),rgba(18,18,20,0))}
.lv--echo .lv-rec{position:absolute;left:4%;top:6%;display:flex;align-items:center;gap:8px;font-family:var(--mono);color:#FFFFFF;opacity:.82}
.lv--echo .lv-rec i{width:6px;height:6px;border-radius:50%;background:#7FCDAE}
.lv--echo .lv-cnt{position:absolute;right:4%;top:6%;font-family:var(--mono);color:#FFFFFF;opacity:.72}
.lv--echo .lv-tags{position:absolute;right:4%;top:16%;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lv-tag{display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(18,18,20,.64);font-weight:700;color:#FFFFFF;white-space:nowrap}
.lv-tag i{width:6px;height:6px;border-radius:50%;background:#7FCDAE}
.lv-tag.is-no i{background:#FF8B7A}
.lv--echo .lv-score{position:absolute;right:4%;top:62%;font-family:var(--mono);font-size:var(--fs-3);text-align:right;color:#FFFFFF}
.lv--echo .lv-score b{font-size:var(--fs-7);font-weight:800;color:#7FCDAE}
.lv--echo .lv-score small{display:block;font-family:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--fs-1);opacity:.72}
.lv--echo .lv-subs{position:absolute;left:4%;right:4%;bottom:7%;height:24px}
.lv--echo .lv-sub{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:8px;max-width:100%;font-size:var(--fs-3);font-weight:600;color:#FFFFFF;white-space:nowrap}
.lv--echo .lv-sub em{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.14);font-style:normal;font-size:var(--fs-1);font-weight:800}
.lv-sub>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lv--echo mark{padding:0 2px;border-radius:var(--r-3xs);color:inherit;background-color:transparent;
  background-image:linear-gradient(rgba(62,207,149,.26),rgba(62,207,149,.26)),linear-gradient(#3ECF95,#3ECF95);
  background-repeat:no-repeat;background-position:0 0,0 100%}

/* Дирижёр */
.lv--orch .pt-shot__img{object-position:30% 50%}
.pt:hover .lv--orch .pt-shot__img{transform:none}
.lv-chs{position:absolute;left:4%;top:16%;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.lv-ch{padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink-soft)}
.lv-ch.is-on{border-color:transparent;background:var(--em-wash);font-weight:700;color:var(--em-text)}
.lv-fly{position:absolute;left:40%;top:30%;width:8px;height:8px;border-radius:50%;background:var(--em);opacity:0}
.lv-phone{position:absolute;left:31%;width:36%;top:6%;bottom:-8%;display:flex;flex-direction:column;padding:8px 4px 0;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);box-shadow:0 16px 32px -20px rgba(16,24,20,.35)}
.lv-ph-head{display:flex;align-items:center;gap:4px;padding:0 4px 8px;border-bottom:1px solid var(--line)}
.lv-ph-head>i{flex:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7FCDAE,var(--em) 60%)}
.lv-ph-head>span:not(.lv-time){min-width:0}
.lv-ph-head b{display:block;overflow:hidden;font-weight:800;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.lv-ph-head small{display:block;font-size:var(--fs-1);color:var(--em-text)}
.lv-time{flex:none;display:grid;margin-left:auto;font-family:var(--mono);color:var(--ink-muted)}
.lv-time>span{grid-area:1/1}
.lv-chat{flex:1;display:flex;flex-direction:column;gap:4px;padding:8px 4px;background:var(--card2)}
.lv-bub{align-self:flex-start;max-width:88%;padding:4px 8px;border-radius:var(--r-2xs);background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,20,.06)}
.lv-bub.is-me{align-self:flex-end;background:var(--em-wash)}
.lv-dots{align-self:flex-end;display:flex;align-items:center;gap:2px;height:20px;margin-bottom:-24px;padding:0 8px;border-radius:var(--r-2xs);background:var(--em-wash)}
.lv-dots i{width:4px;height:4px;border-radius:50%;background:var(--em-text)}
.lv-crm{position:absolute;right:3%;top:32%;width:27%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;
  border:1px solid var(--line);border-radius:var(--r-xs);background:var(--card);box-shadow:0 12px 24px -16px rgba(16,24,20,.3);color:var(--ink-soft)}
.lv-crm small{font-size:var(--fs-1);color:var(--ink-muted)}
.lv-hot{padding:2px 8px;border-radius:999px;background:var(--em-wash);font-weight:700;color:var(--em-text)}
.lv-crm b{font-weight:700;color:var(--ink)}

/* Фонекс */
.lv--phon{background:radial-gradient(var(--line-2) 1px,transparent 1px) 0 0/16px 16px,var(--card2)}
.lv--phon .lv-cnt{position:absolute;left:4%;top:7%}
.lv--phon .lv-cnt b{display:block;font-family:var(--mono);font-size:var(--fs-7);font-weight:800;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.lv--phon .lv-cnt small{font-size:var(--fs-1);color:var(--ink-muted)}
@property --n{syntax:"<integer>";inherits:false;initial-value:284}
.lv-n{margin-left:4px}
.lv-n::after{content:counter(n);counter-reset:n 284;counter-reset:n var(--n,284)}
.lv-field{position:absolute;right:4%;top:10%;width:42%;height:66%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(6,1fr);place-items:center}
.lv-field i,.lv-legend i{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.lv-field i::after{content:"";position:absolute;inset:-2px;border:2px solid var(--em);border-radius:50%;opacity:0}
.lv--phon i.is-ok{background:var(--em)}
.lv--phon i.is-miss{background:var(--ink-muted);opacity:.35}
.lv--phon i.is-drop{background:transparent;border:1px dashed var(--ink-muted)}
.lv-voice{position:absolute;left:4%;top:30%;width:46%;bottom:16%}
.lv-vh{display:flex;align-items:center;gap:8px}
.lv-av{position:relative;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--em);font-size:var(--fs-3);font-weight:800;color:#FFFFFF}
.lv-av::after{content:"";position:absolute;inset:-4px;border:2px solid var(--em);border-radius:50%;opacity:0}
.lv-wave{display:flex;align-items:center;gap:2px;height:24px}
.lv-wave i{width:3px;height:calc(var(--h) * 1px);border-radius:999px;background:var(--em)}
.lv-call{position:absolute;left:0;right:0;top:44px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.lv-call small{font-size:var(--fs-1);color:var(--ink-muted)}
.lv-bot{font-size:var(--fs-2);font-weight:600;line-height:1.35;color:var(--ink)}
.lv-ans{font-size:var(--fs-2);color:var(--ink-soft)}
.lv-res{padding:2px 8px;white-space:nowrap;border:1px solid var(--line);border-radius:999px;background:var(--card);font-weight:700;color:var(--ink-muted)}
.lv-res.is-ok{border-color:transparent;background:var(--em-wash);color:var(--em-text)}
.lv-legend{position:absolute;left:4%;right:4%;bottom:5%;display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--ink-muted)}
.lv-legend>span{display:flex;align-items:center;gap:4px}

/* Коуч */
.lv--coach .pt-shot__img,.lv--coach .pt-shot__v{object-position:30% 50%}
.lv-bar{position:absolute;left:0;right:0;top:0;height:13%;display:flex;align-items:center;gap:8px;padding:0 12px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink-soft)}
.lv-st{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px;font-weight:700;color:var(--ink)}
.lv-st i{width:6px;height:6px;border-radius:50%;background:var(--em)}
.lv-st>span{grid-area:1/2;white-space:nowrap}
.lv-who{flex:1;text-align:center;color:var(--ink-muted);white-space:nowrap}
.lv-bar>b{margin-left:auto;font-family:var(--mono);color:var(--ink)}
.lv-warm{position:absolute;right:4%;top:17%;width:32%;display:flex;flex-direction:column;gap:4px}
.lv-warm small{font-size:var(--fs-1);color:var(--ink-muted)}
.lv-warm>span{height:4px;border-radius:999px;background:var(--line)}
.lv-warm i{display:block;height:100%;border-radius:999px;background:var(--em);transform-origin:left;transform:scaleX(.7)}
.lv-card{position:absolute;right:4%;top:28%;width:32%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;
  border:1px solid var(--line);border-radius:var(--r-xs);background:var(--card);box-shadow:0 12px 24px -16px rgba(16,24,20,.3);font-size:var(--fs-2);line-height:1.35;color:var(--ink)}
.lv-card>b{display:flex;align-items:center;gap:4px;font-size:var(--fs-1);font-weight:800;color:var(--em-text)}
.lv-card>b i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7FCDAE,var(--em) 60%)}
.lv-pts{font-family:var(--mono);color:var(--ink-muted)}
.lv-pts strong{font-size:var(--fs-7);font-weight:800;color:var(--em-text)}
.lv-rev small{font-size:var(--fs-1);color:var(--ink-muted)}
.lv-rec2{padding:2px 8px;white-space:nowrap;border-radius:999px;background:var(--em-wash);font-size:var(--fs-1);font-weight:700;color:var(--em-text)}
.lv-you{position:absolute;right:4%;bottom:6%;display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-2xs);background:var(--card);color:var(--ink-soft)}
.lv-in{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--em-wash);font-weight:800;color:var(--em-text)}
.lv-mic{display:flex;align-items:flex-end;gap:2px;height:12px}
.lv-mic i{width:2px;height:100%;border-radius:999px;background:var(--em);transform-origin:bottom;transform:scaleY(.4)}
.lv--coach .lv-subs{position:absolute;left:4%;right:30%;bottom:6%;height:32px}
.lv--coach .lv-sub{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:8px;max-width:100%;padding:4px 8px;
  border:1px solid var(--line);border-radius:var(--r-2xs);background:rgba(255,255,255,.94);font-size:var(--fs-2);font-weight:600;color:var(--ink);white-space:nowrap}
.lv--coach .lv-sub em{flex:none;padding:2px 4px;border-radius:var(--r-3xs);background:var(--card2);font-style:normal;font-size:var(--fs-1);font-weight:700;color:var(--ink-soft)}
.lv--coach .lv-sub.is-me em{background:var(--em-wash);color:var(--em-text)}

/* Везория (22.09.2026, вместо видео офиса): доска задач ИИ-агентов.
   База знаний → линия к каждому агенту → статус «готовит → на одобрение →
   одобрено», кнопка «Одобрить» нажимается в момент смены статуса. */
.lv--vez{background:var(--card2)}
.lv-kb{position:absolute;left:4%;top:7%;display:flex;align-items:center;gap:4px;padding:4px 12px 4px 8px;
  border:1px solid var(--em);border-radius:999px;background:var(--card);font-size:var(--fs-2);font-weight:800;color:var(--em-text);white-space:nowrap}
.lv-kb svg{flex:none}
.lv-appr{position:absolute;right:4%;top:7%;display:flex;align-items:center;gap:8px}
.lv-appr small{font-size:var(--fs-1);color:var(--ink-muted);white-space:nowrap}
.lv-appr b{display:flex;align-items:center;gap:4px;padding:4px 12px;border:1px solid var(--em);border-radius:999px;background:var(--em);
  font-size:var(--fs-2);font-weight:700;color:#FFFFFF;white-space:nowrap}
.lv-ags{--g:6px;position:absolute;left:4%;right:4%;top:calc(7% + 36px);bottom:6%;display:flex;flex-direction:column;gap:var(--g);padding-left:28px}
.lv-ag{position:relative;flex:1;min-height:0;display:flex;align-items:center;gap:8px;padding:0 8px;
  border:1px solid var(--line);border-radius:var(--r-2xs);background:var(--card)}
/* линия от базы знаний: у каждой карточки свой отвод (::before) и отрезок ствола
   до середины предыдущей (::after), у первой — до чипа базы знаний */
.lv-ag::before,.lv-ag::after,.lv-link{content:"";position:absolute;left:-14px;background:var(--em);opacity:.4}
.lv-ag::before{top:50%;width:13px;height:1px}
.lv-ag::after{top:calc(-50% - var(--g));width:1px;height:calc(100% + var(--g))}
.lv-ag1::after{top:-10px;height:calc(50% + 10px)}
.lv-link{top:calc(50% - 1px);width:13px;height:3px;border-radius:999px;opacity:1}
.lv-ava{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--em-wash);font-size:var(--fs-1);font-weight:800;color:var(--em-text)}
.lv-who2{flex:1;min-width:0;display:flex;flex-direction:column}
.lv-who2 b{overflow:hidden;font-size:var(--fs-2);font-weight:800;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.lv-who2 small{overflow:hidden;font-size:var(--fs-1);color:var(--ink-muted);white-space:nowrap;text-overflow:ellipsis}
.lv-state{flex:none;display:grid;justify-items:end}
.lv-state>span{grid-area:1/1;display:flex;align-items:center;gap:2px;padding:2px 8px;border:1px solid transparent;border-radius:999px;
  font-family:var(--mono);font-size:var(--fs-1);line-height:1.3;white-space:nowrap}
.lv-state .lv-s1{border-color:var(--line-2);color:var(--ink-muted)}
.lv-s1 i{width:3px;height:3px;border-radius:50%;background:currentColor}
.lv-s1 i:first-of-type{margin-left:2px}
.lv-state .lv-s2{border-color:var(--ink);font-weight:700;color:var(--ink)}
.lv-state .lv-s3{background:var(--em-wash);font-weight:700;color:var(--em-text)}

/* Мобильная карусель: витрина ≈330×206 */
@media(max-width:599px){
  .lv .lv-wide,.lv--echo .lv-cnt,.lv-chs,.lv-fly,.lv--orch .lv-bub1,.lv--orch .lv-bub2,.lv--orch .lv-dots1,.lv--phon .lv-call small,.lv--phon .lv-ans,.lv-who,.lv-you,.lv-warm small,.lv-rev small{display:none}
  .lv--echo .lv-tags{top:18%}
  .lv--echo .lv-score{top:5%}
  .lv--echo .lv-score b{font-size:var(--fs-6)}
  .lv--echo .lv-score small{display:none}
  .lv--echo .lv-rec{top:7%}
  .lv--echo .lv-sub{font-size:var(--fs-2)}
  .lv--echo .lv-subs{bottom:6%}
  .lv-phone{left:4%;width:52%}
  .lv-crm{right:4%;width:38%;top:30%;padding:8px}
  .lv--phon .lv-cnt b{font-size:var(--fs-6)}
  .lv-field{width:36%;top:12%;height:58%;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)}
  .lv-field i:nth-child(n+25){display:none}
  .lv-voice{top:28%;width:58%;bottom:18%}
  .lv-av{width:24px;height:24px;font-size:var(--fs-1)}
  .lv-call{top:32px}
  .lv-bar{padding:0 8px}
  .lv-warm{top:17%;width:40%}
  .lv-card{top:23%;width:42%;padding:8px}
  .lv--coach .lv-subs{right:4%;bottom:5%}
  .lv--coach .lv-sub{font-size:var(--fs-1)}
  .lv-ags{--g:4px;top:calc(7% + 32px);padding-left:24px}
  .lv-ag::before,.lv-ag::after,.lv-link{left:-12px}
  .lv-ag::before,.lv-link{width:11px}
  /* на телефоне без аватара: роль и статус в строку, задача под ними целиком */
  .lv-ag{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;gap:2px 8px;padding:0 8px}
  .lv-ava{display:none}
  .lv-who2{display:contents}
  .lv-who2 small{grid-column:1/-1}
  .lv-state{grid-row:1;grid-column:2}
  .lv-state>span{padding:0 8px}
  .lv-appr b{padding:4px 12px}
}

/* Движение — только когда пользователь его не отключил */
@media(prefers-reduced-motion:no-preference){
  .lv--echo .lv-rec i,.lv-st i{animation:lv-blink 1.6s var(--ease-smooth) infinite}
  .lv-fly{animation:lv-fly 10s var(--ease-smooth) infinite}
  .lv-dots i{animation:lv-blink .9s linear infinite}
  .lv-dots i:nth-child(2){animation-delay:.15s}
  .lv-dots i:nth-child(3){animation-delay:.3s}
.lv-n::after{animation:lv-n 12s linear infinite}
  .lv-field i{animation:lv-miss 12s var(--ease-out) infinite;animation-delay:calc(var(--d) * -.37s)}
  .lv-field i.is-ok{animation-name:lv-ok}
  .lv-field i.is-drop{animation-name:lv-drop}
  .lv-field i::after{animation:lv-ring 12s var(--ease-out) infinite;animation-delay:inherit}
  .lv-field i.is-link1{animation:lv-link1 12s var(--ease-out) infinite}
  .lv-field i.is-link2{animation:lv-link2 12s var(--ease-out) infinite}
  .lv-field i.is-link1::after,.lv-field i.is-link2::after{animation:none}
  .lv-av::after{animation:lv-pulse 1.6s var(--ease-out) infinite}
  .lv-wave i,.lv-mic i{animation:lv-bar 1.1s var(--ease-smooth) infinite;animation-delay:calc(var(--d,0) * -.2s)}
  .lv-mic i:nth-child(2){animation-delay:-.3s}.lv-mic i:nth-child(3){animation-delay:-.6s}.lv-mic i:nth-child(4){animation-delay:-.8s}
  .lv-warm i{animation:lv-warm 14s var(--ease-smooth) infinite}
  .lv-s1 i{animation:lv-blink .9s linear infinite}
  .lv-s1 i:nth-of-type(2){animation-delay:.15s}
  .lv-s1 i:nth-of-type(3){animation-delay:.3s}
  .lv-appr b{animation:lv-appr 12s var(--ease-out) infinite}
}
/* Везория: нажатия «Одобрить» — в те же
   секунды, что смена статуса в gen-scene-css.mjs (3,8 · 5,6 · 7,2 · 8,8 из 12). */
@keyframes lv-appr{
  0%,30.42%,34.17%,45.42%,49.17%,58.75%,62.5%,72.08%,75.83%,100%{transform:none;background:var(--em);box-shadow:0 0 0 0 rgba(11,138,91,0)}
  31.67%,46.67%,60%,73.33%{transform:scale(.92);background:var(--em-text);box-shadow:0 0 0 4px var(--em-wash)}}
@keyframes lv-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes lv-pulse{0%{opacity:.6;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
@keyframes lv-bar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes lv-fly{0%{left:12%;top:19%;opacity:0}2%{opacity:1}8%{left:44%;top:30%;opacity:1}10%,100%{left:44%;top:30%;opacity:0}}
@keyframes lv-n{from{--n:240}to{--n:284}}
@keyframes lv-ring{0%{opacity:.7;transform:scale(1)}8%,100%{opacity:0;transform:scale(2.4)}}
@keyframes lv-ok{0%,8%{background:var(--line-2)}10%,92%{background:var(--em)}97%,100%{background:var(--line-2)}}
@keyframes lv-miss{0%,8%{background:var(--line-2);opacity:1}10%,92%{background:var(--ink-muted);opacity:.35}97%,100%{background:var(--line-2);opacity:1}}
@keyframes lv-drop{0%,8%{background:var(--line-2);border-color:transparent}10%,92%{background:transparent;border-color:var(--ink-muted)}97%,100%{background:var(--line-2);border-color:transparent}}
@keyframes lv-link1{0%,41%{background:var(--line-2);transform:none}43%{background:var(--em);transform:scale(1.8)}46%,92%{background:var(--em);transform:none}97%,100%{background:var(--line-2)}}
@keyframes lv-link2{0%,68%{background:var(--line-2);border-color:transparent}70%,92%{background:transparent;border-color:var(--ink-muted)}97%,100%{background:var(--line-2);border-color:transparent}}
@keyframes lv-warm{0%,59%{transform:scaleX(.3)}64%,96%{transform:scaleX(.7)}100%{transform:scaleX(.3)}}
/* lv-timeline:start — пишет scripts/gen-scene-css.mjs, руками не править */
.lv--echo .lv-sub1{opacity:0;transform:translateY(6px)}
.lv--echo .lv-sub2{opacity:0;transform:translateY(6px)}
.lv--echo .lv-sub3{opacity:1;transform:none}
.lv--echo .lv-sub1 mark{background-size:0% 100%,0% 2px}
.lv--echo .lv-sub2 mark{background-size:0% 100%,0% 2px}
.lv--echo .lv-sub3 mark{background-size:100% 100%,100% 2px}
.lv--echo .lv-tag1{opacity:1;transform:none}
.lv--echo .lv-tag2{opacity:1;transform:none}
.lv--echo .lv-tag3{opacity:1;transform:none}
.lv--echo .lv-score{opacity:1;transform:none}
.lv--vez .lv-ag1{opacity:1;transform:none}
.lv--vez .lv-ag1 .lv-s1{opacity:0}
.lv--vez .lv-ag1 .lv-link{opacity:0}
.lv--vez .lv-ag1 .lv-s2{opacity:0}
.lv--vez .lv-ag1 .lv-s3{opacity:1;transform:none}
.lv--vez .lv-ag2{opacity:1;transform:none}
.lv--vez .lv-ag2 .lv-s1{opacity:0}
.lv--vez .lv-ag2 .lv-link{opacity:0}
.lv--vez .lv-ag2 .lv-s2{opacity:0}
.lv--vez .lv-ag2 .lv-s3{opacity:1;transform:none}
.lv--vez .lv-ag3{opacity:1;transform:none}
.lv--vez .lv-ag3 .lv-s1{opacity:0}
.lv--vez .lv-ag3 .lv-link{opacity:0}
.lv--vez .lv-ag3 .lv-s2{opacity:0}
.lv--vez .lv-ag3 .lv-s3{opacity:1;transform:none}
.lv--vez .lv-ag4{opacity:1;transform:none}
.lv--vez .lv-ag4 .lv-s1{opacity:0}
.lv--vez .lv-ag4 .lv-link{opacity:0}
.lv--vez .lv-ag4 .lv-s2{opacity:0}
.lv--vez .lv-ag4 .lv-s3{opacity:1;transform:none}
.lv--orch .lv-bub1{opacity:1;transform:none}
.lv--orch .lv-dots1{opacity:0}
.lv--orch .lv-bub2{opacity:1;transform:none}
.lv--orch .lv-bub3{opacity:1;transform:none}
.lv--orch .lv-dots2{opacity:0}
.lv--orch .lv-bub4{opacity:1;transform:none}
.lv--orch .lv-t1{opacity:1}
.lv--orch .lv-t2{opacity:0}
.lv--orch .lv-crm{opacity:1;transform:none}
.lv--orch .lv-hot{opacity:1;transform:none}
.lv--phon .lv-call1{opacity:1}
.lv--phon .lv-call1 .lv-bot{opacity:1}
.lv--phon .lv-call1 .lv-ans{opacity:1;transform:none}
.lv--phon .lv-call1 .lv-res{opacity:1;transform:none}
.lv--phon .lv-call2{opacity:0}
.lv--phon .lv-call2 .lv-bot{opacity:0}
.lv--phon .lv-call2 .lv-ans{opacity:0;transform:translateY(6px)}
.lv--phon .lv-call2 .lv-res{opacity:0;transform:scale(.8)}
.lv--coach .lv-st1{opacity:0}
.lv--coach .lv-st2{opacity:1}
.lv--coach .lv-sub1{opacity:0;transform:translateY(6px)}
.lv--coach .lv-sub2{opacity:0;transform:translateY(6px)}
.lv--coach .lv-sub3{opacity:0;transform:translateY(6px)}
.lv--coach .lv-sub4{opacity:0;transform:translateY(6px)}
.lv--coach .lv-ins{opacity:0;transform:translateY(6px)}
.lv--coach .lv-rev{opacity:1;transform:none}
.lv--coach .lv-pts{opacity:1;transform:none}
.lv--coach .lv-rev small{opacity:1}
.lv--coach .lv-rec2{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
.lv--echo .lv-sub1{animation:lv-echo-1 12s var(--ease-out) infinite}
.lv--echo .lv-sub2{animation:lv-echo-2 12s var(--ease-out) infinite}
.lv--echo .lv-sub3{animation:lv-echo-3 12s var(--ease-out) infinite}
.lv--echo .lv-sub1 mark{animation:lv-echo-4 12s var(--ease-out) infinite}
.lv--echo .lv-sub2 mark{animation:lv-echo-5 12s var(--ease-out) infinite}
.lv--echo .lv-sub3 mark{animation:lv-echo-6 12s var(--ease-out) infinite}
.lv--echo .lv-tag1{animation:lv-echo-7 12s var(--ease-out) infinite}
.lv--echo .lv-tag2{animation:lv-echo-8 12s var(--ease-out) infinite}
.lv--echo .lv-tag3{animation:lv-echo-9 12s var(--ease-out) infinite}
.lv--echo .lv-score{animation:lv-echo-10 12s var(--ease-out) infinite}
.lv--vez .lv-ag1{animation:lv-vez-1 12s var(--ease-out) infinite}
.lv--vez .lv-ag1 .lv-s1{animation:lv-vez-2 12s var(--ease-out) infinite}
.lv--vez .lv-ag1 .lv-link{animation:lv-vez-3 12s var(--ease-out) infinite}
.lv--vez .lv-ag1 .lv-s2{animation:lv-vez-4 12s var(--ease-out) infinite}
.lv--vez .lv-ag1 .lv-s3{animation:lv-vez-5 12s var(--ease-out) infinite}
.lv--vez .lv-ag2{animation:lv-vez-6 12s var(--ease-out) infinite}
.lv--vez .lv-ag2 .lv-s1{animation:lv-vez-7 12s var(--ease-out) infinite}
.lv--vez .lv-ag2 .lv-link{animation:lv-vez-8 12s var(--ease-out) infinite}
.lv--vez .lv-ag2 .lv-s2{animation:lv-vez-9 12s var(--ease-out) infinite}
.lv--vez .lv-ag2 .lv-s3{animation:lv-vez-10 12s var(--ease-out) infinite}
.lv--vez .lv-ag3{animation:lv-vez-11 12s var(--ease-out) infinite}
.lv--vez .lv-ag3 .lv-s1{animation:lv-vez-12 12s var(--ease-out) infinite}
.lv--vez .lv-ag3 .lv-link{animation:lv-vez-13 12s var(--ease-out) infinite}
.lv--vez .lv-ag3 .lv-s2{animation:lv-vez-14 12s var(--ease-out) infinite}
.lv--vez .lv-ag3 .lv-s3{animation:lv-vez-15 12s var(--ease-out) infinite}
.lv--vez .lv-ag4{animation:lv-vez-16 12s var(--ease-out) infinite}
.lv--vez .lv-ag4 .lv-s1{animation:lv-vez-17 12s var(--ease-out) infinite}
.lv--vez .lv-ag4 .lv-link{animation:lv-vez-18 12s var(--ease-out) infinite}
.lv--vez .lv-ag4 .lv-s2{animation:lv-vez-19 12s var(--ease-out) infinite}
.lv--vez .lv-ag4 .lv-s3{animation:lv-vez-20 12s var(--ease-out) infinite}
.lv--orch .lv-bub1{animation:lv-orch-1 10s var(--ease-out) infinite}
.lv--orch .lv-dots1{animation:lv-orch-2 10s var(--ease-out) infinite}
.lv--orch .lv-bub2{animation:lv-orch-3 10s var(--ease-out) infinite}
.lv--orch .lv-bub3{animation:lv-orch-4 10s var(--ease-out) infinite}
.lv--orch .lv-dots2{animation:lv-orch-5 10s var(--ease-out) infinite}
.lv--orch .lv-bub4{animation:lv-orch-6 10s var(--ease-out) infinite}
.lv--orch .lv-t1{animation:lv-orch-7 10s var(--ease-out) infinite}
.lv--orch .lv-t2{animation:lv-orch-8 10s var(--ease-out) infinite}
.lv--orch .lv-crm{animation:lv-orch-9 10s var(--ease-out) infinite}
.lv--orch .lv-hot{animation:lv-orch-10 10s var(--ease-out) infinite}
.lv--phon .lv-call1{animation:lv-phon-1 12s var(--ease-out) infinite}
.lv--phon .lv-call1 .lv-bot{animation:lv-phon-2 12s var(--ease-out) infinite}
.lv--phon .lv-call1 .lv-ans{animation:lv-phon-3 12s var(--ease-out) infinite}
.lv--phon .lv-call1 .lv-res{animation:lv-phon-4 12s var(--ease-out) infinite}
.lv--phon .lv-call2{animation:lv-phon-5 12s var(--ease-out) infinite}
.lv--phon .lv-call2 .lv-bot{animation:lv-phon-6 12s var(--ease-out) infinite}
.lv--phon .lv-call2 .lv-ans{animation:lv-phon-7 12s var(--ease-out) infinite}
.lv--phon .lv-call2 .lv-res{animation:lv-phon-8 12s var(--ease-out) infinite}
.lv--coach .lv-st1{animation:lv-coach-1 14s var(--ease-out) infinite}
.lv--coach .lv-st2{animation:lv-coach-2 14s var(--ease-out) infinite}
.lv--coach .lv-sub1{animation:lv-coach-3 14s var(--ease-out) infinite}
.lv--coach .lv-sub2{animation:lv-coach-4 14s var(--ease-out) infinite}
.lv--coach .lv-sub3{animation:lv-coach-5 14s var(--ease-out) infinite}
.lv--coach .lv-sub4{animation:lv-coach-6 14s var(--ease-out) infinite}
.lv--coach .lv-ins{animation:lv-coach-7 14s var(--ease-out) infinite}
.lv--coach .lv-rev{animation:lv-coach-8 14s var(--ease-out) infinite}
.lv--coach .lv-pts{animation:lv-coach-9 14s var(--ease-out) infinite}
.lv--coach .lv-rev small{animation:lv-coach-10 14s var(--ease-out) infinite}
.lv--coach .lv-rec2{animation:lv-coach-11 14s var(--ease-out) infinite}
}
@keyframes lv-echo-1{0%,6.67%{opacity:0;transform:translateY(6px)}10%,35%{opacity:1;transform:none}38.33%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-echo-2{0%,36.67%{opacity:0;transform:translateY(6px)}40%,60%{opacity:1;transform:none}63.33%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-echo-3{0%,61.67%{opacity:0;transform:translateY(6px)}65%,93.33%{opacity:1;transform:none}96.67%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-echo-4{0%,18.33%{background-size:0% 100%,0% 2px}21.67%,35%{background-size:100% 100%,100% 2px}38.33%,100%{background-size:0% 100%,0% 2px}}
@keyframes lv-echo-5{0%,43.33%{background-size:0% 100%,0% 2px}46.67%,60%{background-size:100% 100%,100% 2px}63.33%,100%{background-size:0% 100%,0% 2px}}
@keyframes lv-echo-6{0%,71.67%{background-size:0% 100%,0% 2px}75%,93.33%{background-size:100% 100%,100% 2px}96.67%,100%{background-size:0% 100%,0% 2px}}
@keyframes lv-echo-7{0%,21.67%{opacity:0;transform:scale(.8)}25%,93.33%{opacity:1;transform:none}96.67%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-echo-8{0%,48.33%{opacity:0;transform:scale(.8)}51.67%,93.33%{opacity:1;transform:none}96.67%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-echo-9{0%,75%{opacity:0;transform:scale(.8)}78.33%,93.33%{opacity:1;transform:none}96.67%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-echo-10{0%,81.67%{opacity:0;transform:scale(.8)}85%,93.33%{opacity:1;transform:none}96.67%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-vez-1{0%,0.83%{opacity:0;transform:translateY(6px)}4.17%,96.67%{opacity:1;transform:none}100%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-vez-2{0%,21.67%{opacity:1}25%,100%{opacity:0}}
@keyframes lv-vez-3{0%,0.83%{opacity:0}4.17%,21.67%{opacity:1}25%,100%{opacity:0}}
@keyframes lv-vez-4{0%,21.67%{opacity:0}25%,31.67%{opacity:1}35%,100%{opacity:0}}
@keyframes lv-vez-5{0%,31.67%{opacity:0;transform:scale(.8)}35%,96.67%{opacity:1;transform:none}100%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-vez-6{0%,5%{opacity:0;transform:translateY(6px)}8.33%,96.67%{opacity:1;transform:none}100%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-vez-7{0%,35%{opacity:1}38.33%,100%{opacity:0}}
@keyframes lv-vez-8{0%,5%{opacity:0}8.33%,35%{opacity:1}38.33%,100%{opacity:0}}
@keyframes lv-vez-9{0%,35%{opacity:0}38.33%,46.67%{opacity:1}50%,100%{opacity:0}}
@keyframes lv-vez-10{0%,46.67%{opacity:0;transform:scale(.8)}50%,96.67%{opacity:1;transform:none}100%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-vez-11{0%,9.17%{opacity:0;transform:translateY(6px)}12.5%,96.67%{opacity:1;transform:none}100%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-vez-12{0%,48.33%{opacity:1}51.67%,100%{opacity:0}}
@keyframes lv-vez-13{0%,9.17%{opacity:0}12.5%,48.33%{opacity:1}51.67%,100%{opacity:0}}
@keyframes lv-vez-14{0%,48.33%{opacity:0}51.67%,60%{opacity:1}63.33%,100%{opacity:0}}
@keyframes lv-vez-15{0%,60%{opacity:0;transform:scale(.8)}63.33%,96.67%{opacity:1;transform:none}100%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-vez-16{0%,13.33%{opacity:0;transform:translateY(6px)}16.67%,96.67%{opacity:1;transform:none}100%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-vez-17{0%,61.67%{opacity:1}65%,100%{opacity:0}}
@keyframes lv-vez-18{0%,13.33%{opacity:0}16.67%,61.67%{opacity:1}65%,100%{opacity:0}}
@keyframes lv-vez-19{0%,61.67%{opacity:0}65%,73.33%{opacity:1}76.67%,100%{opacity:0}}
@keyframes lv-vez-20{0%,73.33%{opacity:0;transform:scale(.8)}76.67%,96.67%{opacity:1;transform:none}100%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-orch-1{0%,10%{opacity:0;transform:translateY(6px)}14%,88%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-orch-2{0%,18%{opacity:0}22%,26%{opacity:1}30%,100%{opacity:0}}
@keyframes lv-orch-3{0%,26%{opacity:0;transform:translateY(6px)}30%,88%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-orch-4{0%,42%{opacity:0;transform:translateY(6px)}46%,88%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-orch-5{0%,50%{opacity:0}54%,56%{opacity:1}60%,100%{opacity:0}}
@keyframes lv-orch-6{0%,56%{opacity:0;transform:translateY(6px)}60%,88%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-orch-7{0%,60%{opacity:1}64%,100%{opacity:0}}
@keyframes lv-orch-8{0%,60%{opacity:0}64%,100%{opacity:1}}
@keyframes lv-orch-9{0%,66%{opacity:0;transform:translateX(-16px)}70%,88%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(-16px)}}
@keyframes lv-orch-10{0%,70%{opacity:0;transform:scale(.8)}74%,88%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-phon-1{0%,53.33%{opacity:1}56.67%,100%{opacity:0}}
@keyframes lv-phon-2{0%,10%{opacity:0}13.33%,53.33%{opacity:1}56.67%,100%{opacity:0}}
@keyframes lv-phon-3{0%,33.33%{opacity:0;transform:translateY(6px)}36.67%,53.33%{opacity:1;transform:none}56.67%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-phon-4{0%,41.67%{opacity:0;transform:scale(.8)}45%,53.33%{opacity:1;transform:none}56.67%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-phon-5{0%,55%{opacity:0}58.33%,90%{opacity:1}93.33%,100%{opacity:0}}
@keyframes lv-phon-6{0%,56.67%{opacity:0}60%,90%{opacity:1}93.33%,100%{opacity:0}}
@keyframes lv-phon-7{0%,63.33%{opacity:0;transform:translateY(6px)}66.67%,90%{opacity:1;transform:none}93.33%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-phon-8{0%,68.33%{opacity:0;transform:scale(.8)}71.67%,90%{opacity:1;transform:none}93.33%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-coach-1{0%,77.14%{opacity:1}80%,100%{opacity:0}}
@keyframes lv-coach-2{0%,77.14%{opacity:0}80%,95.71%{opacity:1}98.57%,100%{opacity:0}}
@keyframes lv-coach-3{0%,4.29%{opacity:0;transform:translateY(6px)}7.14%,21.43%{opacity:1;transform:none}24.29%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-coach-4{0%,22.86%{opacity:0;transform:translateY(6px)}25.71%,40%{opacity:1;transform:none}42.86%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-coach-5{0%,41.43%{opacity:0;transform:translateY(6px)}44.29%,58.57%{opacity:1;transform:none}61.43%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-coach-6{0%,60%{opacity:0;transform:translateY(6px)}62.86%,75.71%{opacity:1;transform:none}78.57%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-coach-7{0%,44.29%{opacity:0;transform:translateY(6px)}47.14%,75.71%{opacity:1;transform:none}78.57%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-coach-8{0%,77.14%{opacity:0;transform:translateY(6px)}80%,95.71%{opacity:1;transform:none}98.57%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lv-coach-9{0%,79.29%{opacity:0;transform:scale(.8)}82.14%,95.71%{opacity:1;transform:none}98.57%,100%{opacity:0;transform:scale(.8)}}
@keyframes lv-coach-10{0%,81.43%{opacity:0}84.29%,95.71%{opacity:1}98.57%,100%{opacity:0}}
@keyframes lv-coach-11{0%,83.57%{opacity:0;transform:scale(.8)}86.43%,95.71%{opacity:1;transform:none}98.57%,100%{opacity:0;transform:scale(.8)}}
/* lv-timeline:end */
/* Кира: три примера вертикальных роликов. */
.pt-shot--reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:44px 12px 12px;background:#121214}
.pt-reel{position:relative;display:block;overflow:hidden;border-radius:var(--r-2xs);background:#1C1C1F}
.pt-reel__p,.pt-reel__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:599px){.pt-shot--reels{padding-top:40px}}
@media(prefers-reduced-motion:reduce){.pt-shot__img,.pt:hover .pt-shot__img{transition:none;transform:none}}
@media(max-width:1023px){.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){
  .pt-grid{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:4px 16px 20px;scroll-padding-inline:16px}
  .pt-grid::-webkit-scrollbar{display:none}
  .pt-grid{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent)}
  .pt{flex:0 0 82%;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){.pt,.pt-go{transition:none}.pt:hover,.pt:hover .pt-go{transform:none}}

/* Отрасли: плитка = подпись + линейная иконка в своей геометрической рамке
   поверх чертёжной сетки с узлами. Без JS раскрытое видно сразу (ниже рисунка);
   с JS (.ind-js) оно становится тёмной шторкой по наведению или по кнопке. */
.ind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ind{position:relative;display:flex;flex-direction:column;min-height:304px;padding:20px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;isolation:isolate;
  background-color:var(--card);
  background-image:radial-gradient(circle,rgba(26,26,26,.2) 1.2px,transparent 1.8px),linear-gradient(rgba(26,26,26,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,26,.045) 1px,transparent 1px);
  background-size:96px 96px,24px 24px,24px 24px;background-position:48px 48px,0 0,0 0;
  transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.ind-head{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ed .ind-name{font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink);transition:color var(--dur-1) var(--ease-out)}
.ind-tg{position:relative;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);cursor:pointer;
  transition:transform var(--dur-2) var(--ease-spring),background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.ind-tg::before,.ind-tg::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:var(--r-3xs);background:var(--em);transform:translate(-50%,-50%)}
.ind-tg::after{transform:translate(-50%,-50%) rotate(90deg)}
.ind-tg:focus-visible{outline:none;box-shadow:var(--ring)}
.ind-fig{display:block;width:min(100%,236px);margin:auto;overflow:visible}
.ind-fig *{vector-effect:non-scaling-stroke}
.ind-guide{fill:none;stroke:#C9CFCC;stroke-width:1;stroke-dasharray:3 5}
.ind-frame{fill:#FFFFFF;stroke:var(--ink);stroke-width:1.6;transition:fill var(--dur-2) var(--ease-out)}
.ind-node circle{fill:#FFFFFF;stroke:var(--ink);stroke-width:1.2}
.ind-node-ac{fill:var(--em)}
.ind-ic *{fill:none;stroke:#3A3A40;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ind-ic .ac{stroke:var(--em);stroke-width:2}
.ind:hover .ind-frame{fill:var(--em-wash)}
.ind-more{display:grid;gap:8px;margin-top:16px;font-size:var(--fs-3);line-height:1.45;color:var(--ink-soft)}
.ind-more p{margin:0}
.ind-more b{font-weight:700;color:var(--ink)}
.ind-num span{display:block;font-family:var(--mono);font-size:var(--fs-7);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--em-text)}
.ind-num a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ind-link{justify-self:start;font-size:var(--fs-4);font-weight:700;color:var(--em-text);text-decoration:none}
.ind-link::after{content:" →"}
.ind-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Плитка-витрина: кейс со снимком интерфейса и кнопкой */
.ind-feat{background:#111111;border-color:#111111}
.ed .ind-feat .ind-name{color:#FFFFFF}
.ind-feat .ind-tg{background:transparent;border-color:rgba(255,255,255,.35)}
.ind-shot{margin:16px 0 0;border-radius:var(--r-xs);overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.ind-shot img{display:block;width:100%;height:auto}
.ind-feat-num{margin:16px 0;font-size:var(--fs-3);font-weight:600;line-height:1.4;color:#FFFFFF}
.ind-feat-num span{display:block;font-family:var(--mono);font-size:var(--fs-7);font-weight:700;letter-spacing:-.02em;color:var(--em-on-dark)}
.ed .ind-feat .ind-feat-btn{margin-top:auto;align-self:flex-start;padding:12px 20px;font-size:var(--fs-4);background:#FFFFFF;color:var(--ink)}
.ed .ind-feat .ind-feat-btn:hover{background:var(--em-wash)}
.ind-feat .ind-more,.ind-feat .ind-more b{color:#FFFFFF}
.ind-feat .ind-num span{color:var(--em-on-dark)}
.ind-feat .ind-link{color:var(--em-on-dark)}

/* Режим с JS: раскрытие — тёмная шторка поверх плитки */
.ind-js .ind{cursor:pointer}
.ind-js .ind-more{position:absolute;inset:0;z-index:1;margin:0;align-content:start;padding:76px 20px 20px;background:#111111;color:var(--on-dark-soft);
  opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
.ind-js .ind-more b{color:#FFFFFF}
.ind-js .ind-num span{color:var(--em-on-dark)}
.ind-js .ind-num{color:#FFFFFF}
.ind-js .ind-link{margin-top:4px;color:var(--em-on-dark)}
.ind-js .ind.is-open .ind-more{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.ind-js .ind.is-open .ind-name{color:#FFFFFF}
.ind-js .ind.is-open .ind-tg{transform:rotate(45deg);background:transparent;border-color:rgba(255,255,255,.4)}
@media(hover:hover) and (pointer:fine){
  .ind-js .ind:hover .ind-more{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  .ind-js .ind:hover .ind-name{color:#FFFFFF}
  .ind-js .ind:hover .ind-tg{transform:rotate(45deg);background:transparent;border-color:rgba(255,255,255,.4)}
  .ind-js .ind:hover{border-color:#111111;box-shadow:0 28px 52px -24px rgba(0,0,0,.4)}
}
@media(max-width:1180px){.ind{min-height:392px}}
@media(max-width:1099px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ind{min-height:320px}}
/* Телефон: список строк; раскрытие — внутри строки, не шторкой */
@media(max-width:599px){
  .ind-grid{grid-template-columns:1fr;gap:8px}
  .ind{min-height:0;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"fig head" "more more";column-gap:16px;align-items:center;padding:12px 16px 12px 12px;background-size:96px 96px,16px 16px,16px 16px}
  .ind-head{grid-area:head;align-items:center}
  .ed .ind-name{font-size:var(--fs-5)}
  .ind-fig{grid-area:fig;width:64px;margin:0}
  .ind-guide{display:none}
  .ind-more{grid-area:more}
  .ind-js .ind-more{position:static;display:none;padding:0 0 8px;margin-top:12px;background:none;color:var(--ink-soft);opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none}
  .ind-js .ind.is-open .ind-more{display:grid}
  .ind-js .ind-more b,.ind-js .ind-num{color:var(--ink)}
  .ind-js .ind-num span,.ind-js .ind-link{color:var(--em-text)}
  .ind-js .ind.is-open .ind-name{color:var(--ink)}
  .ind-js .ind.is-open .ind-tg{border-color:var(--line-2)}
  .ind-feat{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "shot" "num" "btn" "more";padding:16px}
  .ind-feat .ind-shot{grid-area:shot;margin-top:12px}
  .ind-feat .ind-feat-num{grid-area:num;margin:12px 0}
  .ed .ind-feat .ind-feat-btn{grid-area:btn}
  .ind-js .ind-feat .ind-more,.ind-js .ind-feat .ind-more b,.ind-js .ind-feat .ind-num{color:#FFFFFF}
  .ind-js .ind-feat .ind-num span,.ind-js .ind-feat .ind-link{color:var(--em-on-dark)}
  .ind-js .ind-feat.is-open .ind-name{color:#FFFFFF}
  .ind-js .ind-feat.is-open .ind-tg{border-color:rgba(255,255,255,.4)}
}
.ind-roles{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:176px minmax(0,1fr);gap:24px}
.ind-roles-h{margin:0;font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.ind-roles ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ind-roles li{font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.ind-roles b{font-weight:700;color:var(--ink)}
@media(max-width:1023px){.ind-roles{grid-template-columns:1fr;gap:16px}.ind-roles ul{grid-template-columns:1fr;gap:12px}}
@media(prefers-reduced-motion:reduce){.ind-more,.ind-tg,.ind-frame{transition:none!important}}

/* Живой финальный CTA: часы посетителя в заголовке + рисунок «часы уносят
   разговоры». Рисунок — тушь с альфой, поэтому ложится на любой изумруд. */
.ed .cta-big.cta-live{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.ed .cta-live h2{font-size:var(--fs-d2);line-height:1.12;max-width:20ch}
.ed .cta-live h2 .mk{white-space:normal;padding:0}
.cta-live .cta-big-sub{max-width:56ch}
.cta-live .cta-big-actions{margin-top:32px}
.cta-pill{display:inline-block;padding:.1em .4em;border-radius:999px;background:#FFFFFF;color:var(--em-text);font-family:var(--mono);font-size:.8em;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;vertical-align:.06em}
.cta-colon{animation:ctaBlink 2s steps(1,end) infinite}
@keyframes ctaBlink{50%{opacity:.25}}
.ed .cta-live .cta-live-btn{padding:20px 36px;font-size:var(--fs-6);box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.ed .cta-live .cta-live-btn:hover{transform:translateY(-2px);box-shadow:0 26px 48px -18px rgba(0,0,0,.55)}
.cta-live-contacts{display:flex;flex-wrap:wrap;gap:12px 24px}
.cta-live .cta-note{margin-top:0}
.cta-live-art{position:relative;z-index:1;justify-self:end;width:min(100%,540px);margin:0}
.cta-live-art img{display:block;width:100%;height:auto;transform-origin:70% 92%;animation:ctaWalk 1.4s var(--ease-smooth) infinite alternate}
@keyframes ctaWalk{from{transform:translateY(0) rotate(0)}to{transform:translateY(-4px) rotate(-1.2deg)}}
.cta-drop{position:absolute;left:4%;top:44%;width:34%;height:auto;overflow:visible;pointer-events:none}
.cta-drop g{fill:none;stroke:#0C1812;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center;animation:ctaFall 2.8s linear infinite}
.cta-drop circle{fill:#0C1812;stroke:none}
.cta-drop .cta-drop-b{animation-duration:3.3s;animation-delay:1.1s}
.cta-drop .cta-drop-c{animation-duration:3.0s;animation-delay:2s}
@keyframes ctaFall{0%{opacity:0;transform:translate(0,-12px) rotate(0)}18%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(-16px,40px) rotate(-18deg)}}
@media(max-width:900px){
  .ed .cta-big.cta-live{grid-template-columns:1fr;gap:32px}
  .cta-live-art{justify-self:center;width:min(80%,360px)}
}
@media(prefers-reduced-motion:reduce){.cta-live-art img,.cta-colon{animation:none}.cta-drop{display:none}}
@media(max-width:599px){
  .ed .cta-live h2{font-size:var(--fs-d3)}
  .ed .cta-live .cta-live-btn{width:100%;justify-content:center;padding:16px 24px;font-size:var(--fs-5)}
  .cta-live-contacts{gap:4px 20px}
}
.ind-grid:not(.ind-js) .ind-feat .ind-more .ind-num{display:none}
/* ── Роли и зарплаты на главной (#roles) ───────────────────────────────────
   Заменяет трёхстороннее сравнение .cmp-3way. Одна разметка — <table>,
   чтобы поисковики и нейросети читали строки как данные. На ширине ≤760px
   каждая строка становится карточкой, подписи берутся из data-label.
   Значки степени — общие .m-st (styles.css, блок «Матрица»), тот же язык,
   что на /ai-transformaciya/. Префикс .rw- на сайте больше нигде не занят. */
.ed .rw-legend{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 20px;font-size:var(--fs-3);color:var(--ink-muted);line-height:1.5}
.ed .rw-legend li{display:flex;align-items:baseline;gap:8px;max-width:520px}
.ed .rw-legend .m-st{font-size:var(--fs-3)}

/* Десять ролей — самый длинный блок главной: 2 241 px на компьютере и
   5 523 px на телефоне. Видно четыре, остальные шесть раскрываются.
   Переключатель — checkbox с подписью, а не скрипт: раскрытие работает и
   без JS, а текст всех десяти ролей в любом случае лежит в разметке. */
.ed .rw:has(.rw-toggle:not(:checked)) .rw-hid{display:none}
.ed .rw:has(.rw-toggle:not(:checked)) .rw-table tbody tr:nth-child(4)>*{border-bottom:0}
.ed .rw-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:12px 20px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:999px;background:var(--card);
  font-weight:700;font-size:var(--fs-4);color:var(--ink);
  transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.ed .rw-more:hover{border-color:var(--em);color:var(--em-text)}
.ed .rw-more__ic::after{content:"+";font-family:var(--mono);color:var(--em-text)}
.ed .rw-toggle:checked~.rw-more .rw-more__ic::after{content:"−"}
.ed .rw-toggle:focus-visible~.rw-more{outline:none;box-shadow:var(--ring)}
.ed .rw-more__off{display:none}
.ed .rw-toggle:checked~.rw-more .rw-more__on{display:none}
.ed .rw-toggle:checked~.rw-more .rw-more__off{display:inline}
.ed .rw-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow-x:auto;box-shadow:0 14px 34px -22px rgba(16,24,20,.16)}
.ed .rw-table{width:100%;border-collapse:collapse;min-width:1040px;font-size:var(--fs-4);line-height:1.45}
.ed .rw-table th,.ed .rw-table td{text-align:left;vertical-align:top;padding:16px;border-bottom:1px solid var(--line)}
.ed .rw-table thead th{
  font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);background:var(--card2);white-space:nowrap;padding-block:12px
}
.ed .rw-table tbody th{font-weight:800;color:var(--ink);width:17%}
.ed .rw-table tbody td{color:var(--ink-soft);font-weight:500}
.ed .rw-table tbody tr:last-child>*{border-bottom:0}
.ed .rw-table tbody tr:hover>*{background:var(--card2)}
.ed .rw-table .rw-num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink);font-weight:700}
.ed .rw-table thead .rw-num{font-weight:700;color:var(--ink-muted)}
.ed .rw-fn{font-size:var(--fs-1);color:var(--ink-muted);margin-left:2px}
/* Колонка продукта — единственное место изумруда в строке. */
.ed .rw-prod{min-width:200px}
.ed .rw-prod a{display:inline-block;font-weight:800;color:var(--em-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ed .rw-prod a:hover{color:var(--ink)}
.ed .rw-prod span{display:block;margin-top:4px;font-family:var(--mono);font-size:var(--fs-3);color:var(--ink);line-height:1.45}

/* Источники: свёрнуто, чтобы не спорить с таблицей, но видно поисковикам. */
.ed .rw-src{margin-top:16px;font-size:var(--fs-3);color:var(--ink-muted);line-height:1.55}
.ed .rw-src>summary{padding:4px 0;cursor:pointer;font-weight:700;color:var(--ink-soft);width:fit-content;list-style:none}
.ed .rw-src>summary::-webkit-details-marker{display:none}
.ed .rw-src>summary::after{content:" +";color:var(--em-text)}
.ed .rw-src[open]>summary::after{content:" \2212"}
.ed .rw-src p{margin-top:8px;max-width:880px}
.ed .rw-src ul{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.ed .rw-src a{text-decoration:underline;text-underline-offset:4px}
.ed .rw-src a:hover{color:var(--ink)}

/* Условный пример: карточка с тонкой рамкой со всех сторон, без полосы слева. */
.ed .rw-calc{margin-top:32px;padding:24px 28px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card2)}
.ed .rw-calc__t{font-weight:800;font-size:var(--fs-5);color:var(--ink)}
.ed .rw-calc__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.ed .rw-calc__row>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xs);padding:16px 20px}
.ed .rw-calc__row dt{font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.ed .rw-calc__row dd{margin-top:8px}
.ed .rw-calc__f{display:block;font-family:var(--mono);font-size:var(--fs-3);color:var(--ink-soft)}
.ed .rw-calc__row dd b{display:block;margin-top:4px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-6);font-weight:700;color:var(--ink)}
.ed .rw-calc__note{margin-top:16px;max-width:880px;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.55}
.ed .rw-cta{margin-top:24px}

/* Мобильная версия: строка таблицы — карточка. */
@media(max-width:760px){
  .ed .rw-legend{flex-direction:column;gap:8px}
  .ed .rw-wrap{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .ed .rw-table{min-width:0;display:block}
  .ed .rw-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ed .rw-table tbody{display:grid;gap:12px}
  .ed .rw-table tbody tr{
    display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:20px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
    box-shadow:0 14px 34px -22px rgba(0,0,0,.18)
  }
  .ed .rw-table tbody tr:hover>*{background:none}
  .ed .rw-table tbody th,.ed .rw-table tbody td{display:block;padding:0;border:0;width:auto}
  .ed .rw-table tbody th{grid-column:1;font-size:var(--fs-5);line-height:1.3}
  .ed .rw-table tbody td.rw-num{grid-column:2;grid-row:1;font-size:var(--fs-4)}
  .ed .rw-table tbody td.rw-num::before{content:"медиана, ₽/мес";display:block;font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);text-align:right}
  .ed .rw-table tbody td:not(.rw-num){grid-column:1/-1;font-size:var(--fs-4)}
  .ed .rw-table tbody td[data-label="Берёт система"]::before,
  .ed .rw-table tbody td[data-label="Остаётся человеку"]::before{
    content:attr(data-label);display:block;margin-bottom:4px;
    font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)
  }
  .ed .rw-table tbody td[data-label="Берёт система"]{margin-top:8px}
  .ed .rw-prod{min-width:0;margin-top:8px;padding-top:12px !important;border-top:1px solid var(--line) !important}
  .ed .rw-calc{padding:20px}
  .ed .rw-calc__row{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   НИШЕВЫЕ ЛЕНДИНГИ /dlya-…/ (nz-*, 22.09.2026, v2 — живые сцены)
   Одна тема на все ниши: ниши различаются данными (путь, карта, сцены,
   контент Киры), а не палитрой. Страницы собирает scripts/gen-niches.mjs.
   Продукты обозначены знаками pm-* из /assets/releases/20261007-cifra-articles-1/icons.svg (форма продукта тушью +
   один изумрудный акцент), а не иконками в мятных плитках. Карточки —
   тонкая рамка со всех сторон; линии — фоном, не border-left
   (check-left-accent). Янтарь (--warn) — только «теряем» на пути клиента
   и «не названо» в сцене разбора.
   Движение — только CSS: появление по .reveal (IntersectionObserver в
   script.js), сцены .nz-live по классу .is-play; при «меньше движения» —
   финальный кадр.
   ══════════════════════════════════════════════════════════════════════ */
.ed .nz-hero{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 48px;align-items:start;margin-top:16px;padding:clamp(28px,3.4vw,48px);border:1px solid var(--line);border-radius:var(--r-band);background:var(--bg)}
/* Живой hero: сцена справа на две строки сетки, цифры кейсов — под текстом
   слева. Так три цифры остаются в первом экране (низ ≤ 900 px на 1440),
   а колонке текста хватает ширины на H1 в три строки. */
.ed .nz-hero--live .nz-hero-art{grid-row:span 2}
.ed .nz-hero--live .nz-proof{grid-column:1;align-self:end}
.ed .nz-kicker{color:var(--ink-muted)}
/* Сегмент кикера не рвётся: точка-разделитель едет вместе со словом, а не
   висит в начале следующей строки. */
.ed .nz-k{white-space:nowrap}
.ed .nz-hero h1{font-size:var(--fs-d3);line-height:1.08;letter-spacing:-.035em}
/* Обводка ниже и уже общей: с общей высотой (100% + 1.3em) кольцо наезжало
   на строку над словом. У .ring-mk своя высота строки — рамка кольца.
   margin-right убран: он переносил последнее слово H1 на новую строку.
   viewBox кольца в gen-niches обрезан по самому штриху, поэтому вылет
   кольца задан в em и не зависит от длины слова: слева .2em (там пробел
   и margin-left), справа .12em за padding-right .1em — кольцо не режет
   последнюю букву и не касается следующего слова («каждом разговоре»). */
.ed .nz-hero h1 .ring-mk{line-height:1;margin-left:.12em;padding-right:.1em}
.ed .nz-hero h1 .ring-mk-svg{top:56%;left:calc(50% - .04em);width:calc(100% + .32em);height:calc(100% + .7em)}
.ed .nz-hero-art{align-self:center;margin-inline:0;margin-bottom:0}
.ed .nz-hero-art--live{align-self:stretch;display:flex;flex-direction:column;gap:8px}
.ed .nz-lead{margin-top:20px;max-width:62ch;font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);font-weight:500}
.ed .nz-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ed .nz-proof{grid-column:1/-1;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ed .nz-proof-item{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);transition:border-color var(--dur-1) var(--ease-out)}
.ed .nz-proof-item:hover{border-color:var(--em)}
.ed .nz-proof-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.ed .nz-proof-num{font:700 var(--fs-6)/1.2 var(--mono);color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.ed .nz-proof-per{font:600 var(--fs-1)/1.3 var(--mono);color:var(--ink-muted);white-space:nowrap}
.ed .nz-proof-lbl{font-size:var(--fs-3);line-height:1.45;color:var(--ink-soft)}
.ed .nz-proof-cite{margin-top:auto;padding-top:4px;font-size:var(--fs-2);font-weight:700;color:var(--em-text)}
.ed .nz-hero-art img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card2)}
@media(max-width:980px){
  .ed .nz-hero,.ed .nz-hero--live{grid-template-columns:minmax(0,1fr);gap:32px}
  .ed .nz-hero--live .nz-hero-art{grid-row:auto}
  .ed .nz-hero--live .nz-proof{grid-column:auto}
  .ed .nz-proof{order:1}
  .ed .nz-hero-art{order:2}
}
@media(max-width:640px){
  .ed .nz-hero{padding:24px 20px;border-radius:var(--r)}
  .ed .nz-lead{font-size:var(--fs-4)}
  .ed .nz-proof{grid-template-columns:minmax(0,1fr);gap:8px}
  .ed .nz-proof-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline}
  .ed .nz-proof-top{flex-direction:column;align-items:flex-start;gap:0}
  .ed .nz-proof-cite{grid-column:2;margin-top:0;padding-top:0}
  .ed .nz-hero-actions{align-items:center;gap:16px}
  .ed .nz-hero-actions .btn{flex:1 1 100%;justify-content:center}
  /* Вторая кнопка на телефоне — текстовая ссылка: две полноширинные кнопки
     подряд спорят за первое действие. */
  .ed .nz-hero-actions .nz-cta2{flex:0 0 auto;min-height:44px;padding:0 4px;border:0;background:none;box-shadow:none;color:var(--em-text);text-decoration:underline;text-underline-offset:4px}
}

/* ── Знаки продуктов (pm-* в /assets/releases/20261007-cifra-articles-1/icons.svg) ────────────────────────────── */
.pm{display:inline-block;flex:none;width:40px;height:40px;vertical-align:middle}
.pm--sm{width:32px;height:32px}
.pm--xs{width:20px;height:20px}
.pm--lg{width:56px;height:56px}

/* ── Живые сцены .nz-live ───────────────────────────────────────────── */
/* Каждому .nz-lv-i генератор ставит --t — секунду появления в цикле. */
.ed .nz-live{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card2)}
.ed .nz-live--chat{flex:1;min-height:640px}
.ed .nz-lv-bg{position:absolute;inset:0}
.ed .nz-hero-art .nz-lv-bg img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;border:0;border-radius:0}
.ed .nz-lv-phone{position:relative;z-index:1;width:min(348px,calc(100% - 48px));margin:24px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);box-shadow:0 24px 48px -28px rgba(0,0,0,.3)}
.ed .nz-lv-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ed .nz-lv-ch{flex:none;padding:4px 8px;border-radius:var(--r-2xs);background:var(--ink);font:700 var(--fs-2)/1.2 var(--mono);color:#FFFFFF}
.ed .nz-lv-ttl{display:grid;min-width:0}
.ed .nz-lv-ttl b{overflow:hidden;font-size:var(--fs-3);line-height:1.35;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.ed .nz-lv-ttl small{font-size:var(--fs-2);font-weight:600;line-height:1.35;color:var(--em-text)}
.ed .nz-lv-chat{list-style:none;display:flex;flex-direction:column;gap:8px;padding:16px}
.ed .nz-lv-msg{position:relative;display:flex;justify-content:flex-end}
.ed .nz-lv-msg.is-ai{justify-content:flex-start}
.ed .nz-lv-bub{max-width:86%;padding:8px 12px;border-radius:var(--r-xs);background:var(--ink);font-size:var(--fs-3);line-height:1.45;color:#FFFFFF}
.ed .nz-lv-msg.is-ai .nz-lv-bub{background:var(--em-wash);color:var(--ink)}
.ed .nz-lv-typing{position:absolute;left:0;top:0;display:flex;gap:4px;padding:12px;border-radius:var(--r-xs);background:var(--em-wash);opacity:0}
.ed .nz-lv-typing i{width:6px;height:6px;border-radius:50%;background:var(--em)}
.ed .nz-lv-crm{position:absolute;z-index:2;right:16px;bottom:16px;width:min(248px,58%);padding:16px;border:1px solid var(--em);border-radius:var(--r-sm);background:var(--card);box-shadow:0 20px 40px -24px rgba(11,138,91,.45)}
.ed .nz-lv-crm-h{display:flex;align-items:center;gap:8px;font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em-text)}
.ed .nz-lv-crm-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--em)}
.ed .nz-lv-crm ul{list-style:none;display:grid;gap:4px;margin-top:8px;font-size:var(--fs-3);line-height:1.4;color:var(--ink-soft)}
.ed .nz-lv-crm-b{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:var(--fs-4);font-weight:800;color:var(--ink)}
.ed .nz-lv-cap{font-size:var(--fs-2);line-height:1.45;color:var(--ink-muted)}

/* Сцена разбора разговора — тёмная, стоит в полосе результатов. */
.ed .nz-live--call{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"bar bar" "lines side";border-color:rgba(255,255,255,.12);background:#1C1C1F}
.ed .nz-lv-bar{grid-area:bar;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.1);font:600 var(--fs-2)/1.3 var(--mono);color:var(--on-dark-soft)}
.ed .nz-lv-rec{display:inline-flex;align-items:center;gap:8px}
.ed .nz-lv-rec i{width:8px;height:8px;border-radius:50%;background:var(--em-on-dark)}
.ed .nz-lv-src{display:inline-flex;align-items:center;gap:8px;--pm-ink:#FFFFFF;--pm-on:#1C1C1F;--pm-ac:#0B8A5B}
.ed .nz-lv-lines{grid-area:lines;list-style:none;display:grid;align-content:start;gap:12px;padding:20px}
.ed .nz-lv-line{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;font-size:var(--fs-4);line-height:1.5;color:var(--on-dark-soft)}
.ed .nz-lv-line em{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);font:800 var(--fs-2)/1 var(--mono);font-style:normal;color:#FFFFFF}
.ed .nz-lv-line.is-pro em{background:var(--em)}
.ed .nz-lv-line.is-pro>span{color:#FFFFFF}
.ed .nz-lv-mk{padding:0 2px;border-radius:var(--r-3xs);background:linear-gradient(rgba(62,207,149,.3),rgba(62,207,149,.3)) no-repeat 0 0/100% 100%;color:inherit}
.ed .nz-lv-side{grid-area:side;display:flex;flex-direction:column;gap:16px;padding:20px;border-left:1px solid rgba(255,255,255,.1)}
.ed .nz-lv-side-h{font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted)}
.ed .nz-lv-chks{list-style:none;display:grid;gap:12px}
.ed .nz-lv-chk{display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 12px;font-size:var(--fs-3);font-weight:700;line-height:1.35;color:#FFFFFF}
.ed .nz-lv-chk i{position:relative;grid-row:span 2;width:20px;height:20px;border-radius:50%;background:var(--em)}
.ed .nz-lv-chk i::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #FFFFFF;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ed .nz-lv-chk.is-no i{background:transparent;box-shadow:inset 0 0 0 1.5px #F4B978}
.ed .nz-lv-chk.is-no i::after{left:9px;top:4px;width:2px;height:12px;border:0;background:#F4B978;transform:rotate(45deg);box-shadow:none}
.ed .nz-lv-chk small{font:600 var(--fs-2)/1.3 var(--mono);color:var(--on-dark-muted)}
.ed .nz-lv-chk.is-no small{color:#F4B978}
.ed .nz-lv-score{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font:700 var(--fs-6)/1 var(--mono);color:var(--on-dark-muted)}
.ed .nz-lv-score b{font-size:var(--fs-d2);letter-spacing:-.03em;color:var(--em-on-dark)}
.ed .nz-lv-score small{display:block;margin-top:8px;font:600 var(--fs-2)/1.3 "Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,sans-serif;color:var(--on-dark-muted)}
@media(max-width:640px){
  .ed .nz-live--chat{min-height:0;padding-bottom:152px}
  .ed .nz-lv-phone{width:auto;margin:16px}
  .ed .nz-lv-crm{left:16px;right:16px;bottom:16px;width:auto}
  .ed .nz-live--call{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "lines" "side"}
  .ed .nz-lv-side{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .ed .nz-lv-lines{padding:16px}
  .ed .nz-lv-line{font-size:var(--fs-3)}
}
/* Цикл: без .is-play элементы сцены скрыты (сцена ниже экрана ждёт
   появления); с .is-play каждый проявляется в свою секунду --t. */
@media(prefers-reduced-motion:no-preference){
  .ed .nz-live .nz-lv-i{opacity:0}
  .ed .nz-live.is-play .nz-lv-i{animation:nz-lv-in var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--t) * var(--nz-spd,1) * 1s)}
  .ed .nz-live.is-play .nz-lv-typing{animation:nz-lv-type 1.1s linear both;animation-delay:calc(var(--t) * var(--nz-spd,1) * 1s)}
  /* Точки «печатает» мигают, только пока видна сама плашка (~1 с на
     сцену), а не вечно под прозрачным родителем (motion-критик B). */
  .ed .nz-live.is-play .nz-lv-typing i{animation:nz-lv-blink .9s linear 2;animation-delay:calc(var(--t) * var(--nz-spd,1) * 1s)}
  .ed .nz-live.is-play .nz-lv-typing i:nth-child(2){animation-delay:calc(var(--t) * var(--nz-spd,1) * 1s + .15s)}
  .ed .nz-live.is-play .nz-lv-typing i:nth-child(3){animation-delay:calc(var(--t) * var(--nz-spd,1) * 1s + .3s)}
  .ed .nz-live .nz-lv-mk{background-size:0% 100%}
  .ed .nz-live.is-play .nz-lv-mk{animation:nz-lv-mk var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--t) * var(--nz-spd,1) * 1s)}
  .ed .nz-lv-rec i{animation:nz-lv-blink 1.6s var(--ease-smooth) infinite}
}
@media(prefers-reduced-motion:reduce){.ed .nz-lv-typing{display:none}}
@keyframes nz-lv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nz-lv-type{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
@keyframes nz-lv-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes nz-lv-mk{from{background-size:0% 100%}to{background-size:100% 100%}}

/* ── Путь клиента: лента этапов с линией ────────────────────────────── */
/* Секционные H2 ниши — ступенью ниже H1: общее .ed .sec-head h2 стоит на
   --fs-d3, как и H1 первого экрана, и все заголовки страницы были по 63px. */
.ed .nz-sec .sec-head h2{font-size:var(--fs-d2);line-height:1.1}
.ed .nz-sec .sec-head p{max-width:720px}
.ed .nz-path-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;min-height:44px;margin-bottom:24px}
.ed .nz-path-sum{font-size:var(--fs-4);color:var(--ink-soft)}
.ed .nz-path-sum b{margin-right:4px;font-size:var(--fs-6);font-weight:800;color:var(--ink)}
.ed .nz-path-sum b span{font-family:var(--mono);color:var(--warn)}
.ed .nz-path-nav{display:flex;gap:8px}
.ed .nz-path-nav[hidden]{display:none}
.ed .nz-path-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:var(--card);font-size:var(--fs-6);color:var(--ink);cursor:pointer;transition:border-color var(--dur-1) var(--ease-out),opacity var(--dur-1) var(--ease-out)}
.ed .nz-path-btn:hover{border-color:var(--ink)}
.ed .nz-path-btn:disabled{opacity:.35;cursor:default}
.ed .nz-path-btn--prev .icon{transform:rotate(180deg)}
.ed .nz-path{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,calc((100% - 72px) / 3.4));gap:24px;overflow-x:auto;padding-bottom:16px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.ed .nz-path:focus-visible{outline:2px solid var(--em-text);outline-offset:4px;border-radius:var(--r-3xs)}
.ed .nz-step{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:60px;scroll-snap-align:start}
/* Отрезок линии от узла этапа до следующего; при появлении — прорисовка. */
.ed .nz-step::before{content:"";position:absolute;left:0;right:-24px;top:19px;height:2px;background:var(--line-2);transform-origin:left center;transition:transform var(--dur-3) var(--ease-out);transition-delay:calc(var(--i) * .12s)}
.ed .nz-step:last-child::before{display:none}
.ed .nz-step--loss::before{background:linear-gradient(90deg,var(--warn),var(--line-2) 60%)}
.ed .nz-path-box.rv-wait .nz-step::before{transform:scaleX(0)}
.ed .nz-step-n{position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--line-2);border-radius:50%;background:var(--bg);font:700 var(--fs-3)/1 var(--mono);color:var(--ink-muted)}
.ed .nz-step--loss .nz-step-n{border-color:var(--warn);background:var(--warn-wash);color:var(--warn)}
.ed .nz-step--out .nz-step-n{border-style:dashed}
.ed .nz-step h3{font-size:var(--fs-6);line-height:1.2;letter-spacing:-.02em}
.ed .nz-step-what{font-size:var(--fs-4);line-height:1.5;color:var(--ink-soft)}
.ed .nz-loss{margin-top:4px;padding:12px 16px;border:1px solid rgba(138,100,16,.2);border-radius:var(--r-xs);background:var(--warn-wash);font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
.ed .nz-loss b{color:var(--warn)}
.ed .nz-loss a,.ed .nz-stage-body a,.ed .nz-roles a,.ed .nz-bundle-more a,.ed .nz-example a,.ed .faq-a a{color:var(--em-text);text-decoration:underline;text-underline-offset:2px}
.ed .nz-out{margin-top:4px;padding:12px 16px;border:1px dashed var(--line-2);border-radius:var(--r-xs);font-size:var(--fs-3);line-height:1.5;color:var(--ink-muted)}
@media(prefers-reduced-motion:no-preference){
  .ed .nz-path-box:not(.rv-wait) .nz-step--loss .nz-step-n::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 2px var(--warn);opacity:0;animation:nz-ping 1.4s var(--ease-out) 2;animation-delay:calc(var(--i) * .12s + .4s)}
}
@keyframes nz-ping{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@media(max-width:760px){
  .ed .nz-path-nav{display:none}
  .ed .nz-path{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);gap:0;overflow:visible;padding-bottom:0}
  .ed .nz-step{padding:0 0 28px 56px}
  .ed .nz-step::before{left:19px;right:auto;top:40px;bottom:0;width:2px;height:auto;transform-origin:center top}
  .ed .nz-step--loss::before{background:linear-gradient(180deg,var(--warn),var(--line-2) 60%)}
  .ed .nz-path-box.rv-wait .nz-step::before{transform:scaleY(0)}
  .ed .nz-step h3{padding-top:8px}
}

/* ── Нишевый блок: редакционный список с крупными номерами ──────────── */
.ed .nz-special{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.ed .nz-special li{display:grid;grid-template-columns:72px minmax(0,1fr);align-content:start;column-gap:16px;padding:28px 0;border-bottom:1px solid var(--line)}
.ed .nz-special-n{grid-row:span 2;font:700 var(--fs-d1)/1 var(--mono);letter-spacing:-.04em;color:var(--em)}
.ed .nz-special h3{font-size:var(--fs-6);line-height:1.25}
.ed .nz-special p{margin-top:8px;font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft)}
@media(max-width:760px){.ed .nz-special{grid-template-columns:minmax(0,1fr)}.ed .nz-special li{grid-template-columns:48px minmax(0,1fr);padding:20px 0}}

/* Плитка-иконка — только в блоке «Другие отрасли». */
.ed .nz-tile{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-2xs);background:var(--em-wash);color:#3A3A40;font-size:var(--fs-7);--ic-ac:var(--em)}

/* ── Карта связки: сетка «этап × инструмент» ───────────────────────── */
.ed .nz-map{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.ed .nz-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:16px;font-size:var(--fs-2);font-weight:600;color:var(--ink-muted)}
.ed .nz-legend span{display:inline-flex;align-items:center;gap:8px}
.ed .nz-legend .icon{color:var(--em-text);stroke-width:2.4}
.ed .nz-legend-line{width:24px;height:2px;background:var(--em)}
.ed .nz-legend-line--dash{background:repeating-linear-gradient(90deg,var(--em) 0 4px,transparent 4px 8px)}
.ed .nz-map-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ed .nz-map-chips-l{margin-right:4px;font:700 var(--fs-2)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.ed .nz-chip{min-height:36px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font:inherit;font-size:var(--fs-3);font-weight:700;color:var(--ink);cursor:pointer;transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.ed .nz-chip:hover,.ed .nz-chip[aria-pressed="true"]{border-color:var(--em);background:var(--em-wash)}
.ed .nz-chip:focus-visible{outline:2px solid var(--em-text);outline-offset:2px}
.ed .nz-map-grid{display:grid;grid-template-columns:148px repeat(var(--nz-cols),minmax(0,1fr));gap:8px;position:relative}
.ed .nz-map-head{padding:0 4px 8px;border-bottom:1px solid var(--line);font-size:var(--fs-3);font-weight:800;line-height:1.3;color:var(--ink)}
.ed .nz-map-head span{display:block;margin-bottom:4px;font:700 var(--fs-1)/1 var(--mono);color:var(--ink-muted)}
.ed .nz-map-tool{display:flex;align-items:center;gap:8px;font-size:var(--fs-3);font-weight:700;line-height:1.25;color:var(--ink)}
/* Этап «не наша зона» (path.steps[].out): штриховка на всю колонку. */
.ed .nz-map-out{display:flex;justify-content:center;align-items:flex-start;padding-top:12px;border-radius:var(--r-xs);background:repeating-linear-gradient(135deg,var(--card2) 0 8px,transparent 8px 16px)}
.ed .nz-map-out span{padding:4px 8px;border-radius:var(--r-3xs);background:var(--card);font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.ed .nz-track{position:relative;align-self:center;height:2px;background:repeating-linear-gradient(90deg,var(--em) 0 4px,transparent 4px 8px);opacity:.6}
.ed .nz-link{position:relative;justify-self:center;width:2px;margin-block:24px;background:repeating-linear-gradient(180deg,var(--em) 0 4px,transparent 4px 8px);opacity:.6}
.ed .nz-link--solid,.ed .nz-track--b{background:var(--em);opacity:1}
.ed .nz-track.nz-sig{opacity:1;background:repeating-linear-gradient(90deg,rgba(11,138,91,.6) 0 4px,transparent 4px 8px)}
.ed .nz-track--b.nz-sig{background:var(--em)}
.ed .nz-node,.ed .nz-link,.ed .nz-track{transition:opacity var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.ed .nz-node{position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--card)}
.ed .nz-node b{font-size:var(--fs-3);line-height:1.3;color:var(--ink)}
.ed .nz-node--case{border-color:var(--em)}
.ed .nz-node .nz-metric{display:flex}
.ed .nz-node .nz-num{white-space:normal}
/* Подсветка связки: кнопки над сеткой и «Показать на карте» в связках. */
.ed .nz-map-grid.has-hl .nz-node:not(.is-hl),.ed .nz-map-grid.has-hl .nz-link:not(.is-hl),.ed .nz-map-grid.has-hl .nz-track:not(.is-hl){opacity:.18}
.ed .nz-map-grid.has-hl .nz-node.is-hl{border-color:var(--em);box-shadow:0 0 0 4px var(--em-wash)}
/* Сигнал по линии связки: точка-псевдоэлемент едет transform'ом.
   26.09.2026 (motion-критик B): раньше точка бежала background-position —
   пересчёт стилей и перерисовка каждый кадр, и за экраном тоже. Длину пути
   даёт контейнер-линия (container-type): 100cqw/100cqh — её длина. Концы
   линии уходят под узлы (у них фон и z-index), поэтому точка появляется из
   узла и в узле же пропадает. За экраном петлю ставит на паузу initLoops
   (data-loop на .nz-map). */
.ed .nz-link.nz-sig{container-type:size}
.ed .nz-track.nz-sig{container-type:inline-size}
.ed .nz-link.nz-sig::after,.ed .nz-track.nz-sig::after{content:"";position:absolute;width:14px;height:14px;background:radial-gradient(circle,var(--em) 0 3px,rgba(11,138,91,.22) 3.5px 6px,transparent 6.5px);opacity:0}
.ed .nz-link.nz-sig::after{left:-6px;top:0}
.ed .nz-track.nz-sig::after{left:0;top:-6px}
@media(prefers-reduced-motion:no-preference){
  .ed .nz-link.nz-sig::after{animation:nz-sig-v 2.2s linear infinite}
  .ed .nz-track.nz-sig::after{animation:nz-sig-h 2.2s linear infinite;animation-delay:calc(var(--d,0) * -1s)}
  .ed .nz-map-grid.has-hl .nz-track.nz-sig:not(.is-hl)::after{animation:none}
  .ed .nz-map-grid.has-hl .nz-link.nz-sig:not(.is-hl)::after{animation:none}
}
@keyframes nz-sig-v{0%{opacity:0;transform:translateY(-14px)}8%,92%{opacity:1}100%{opacity:0;transform:translateY(100cqh)}}
@keyframes nz-sig-h{0%{opacity:0;transform:translateX(-14px)}8%,92%{opacity:1}100%{opacity:0;transform:translateX(100cqw)}}
.ed .nz-metric{display:inline-flex;align-items:baseline;gap:4px;font-size:var(--fs-2);font-weight:600;line-height:1.4;color:var(--ink-muted)}
.ed .nz-num{font-family:var(--mono);font-weight:700;white-space:nowrap}
.ed .nz-metric .icon{flex:none;align-self:center;color:var(--em-text);stroke-width:2.4}
.ed .nz-node--case .nz-metric,.ed .nz-metric--case{color:var(--em-text)}
.ed .nz-stages-box{margin-top:32px;max-width:880px}
.ed .nz-stages-sum{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.ed .nz-stages-sum::-webkit-details-marker{display:none}
.ed .nz-stages-sum:focus-visible{outline:2px solid var(--em-text);outline-offset:4px;border-radius:var(--r-3xs)}
.ed .nz-stages-sum:hover .nz-stages-h{color:var(--em-text)}
.ed .nz-stages-h{font-size:var(--fs-6);transition:color var(--dur-1) var(--ease-out)}
.ed .nz-stages-box[open] > .nz-stages-sum .nz-stage-ic{transform:rotate(45deg)}
.ed .nz-stages-h-narrow{display:none}
.ed .nz-stages{display:grid;grid-template-columns:minmax(0,1fr)}
.ed .nz-stage{border-bottom:1px solid var(--line)}
.ed .nz-stage h3{font-size:inherit}
.ed .nz-stage-btn{display:grid;grid-template-columns:32px minmax(0,1fr) 28px;grid-template-areas:"n t i" ". c i";column-gap:12px;align-items:center;width:100%;padding:16px 0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.ed .nz-stage-btn:hover .nz-stage-t{color:var(--em-text)}
.ed .nz-stage-btn:focus-visible{outline:2px solid var(--em-text);outline-offset:4px;border-radius:var(--r-3xs)}
.ed .nz-stage-n{grid-area:n;font:700 var(--fs-2)/1 var(--mono);color:var(--ink-muted)}
.ed .nz-stage-t{grid-area:t;font-size:var(--fs-5);font-weight:800;letter-spacing:-.02em;transition:color var(--dur-1) var(--ease-out)}
.ed .nz-stage-cnt{grid-area:c;margin-top:4px;font-size:var(--fs-3);font-weight:500;color:var(--ink-muted)}
.ed .nz-stage-ic{grid-area:i;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--line-2);border-radius:50%;color:var(--em);transition:transform var(--dur-1) var(--ease-out)}
.ed .nz-stage-btn[aria-expanded="true"] .nz-stage-ic{transform:rotate(45deg)}
.ed .nz-stage-body{list-style:none;display:grid;gap:16px;padding:0 0 20px 44px}
.ed .nz-stage-body[hidden]{display:none}
.ed .nz-stage-node{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.ed .nz-stage-node p{font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft)}
.ed .nz-stage-node .nz-stage-tool{color:var(--ink);font-weight:700}
.ed .nz-stage-node .nz-stage-tool a{color:var(--ink);text-decoration:none}
.ed .nz-stage-node .nz-stage-tool a:hover{color:var(--em-text)}
.ed .nz-stage-node .nz-metric{margin-top:8px;display:flex;flex-wrap:wrap}
@media(max-width:1180px){
  .ed .nz-map{display:none}
  .ed .nz-desk{display:none}
  /* Здесь список и есть карта: он раскрыт, заголовок — не переключатель. */
  .ed .nz-stages-box{margin-top:0}
  .ed .nz-stages-sum{padding-top:0;cursor:default;pointer-events:none}
  .ed .nz-stages-sum .nz-stage-ic,.ed .nz-stages-h-wide{display:none}
  .ed .nz-stages-h-narrow{display:inline}
}
@media(max-width:760px){
  .ed .nz-stage-body{padding-left:0}
}

/* ── Кто что закрывает: «было → стало» с чередованием строк ─────────── */
.ed .nz-roles{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.ed .nz-roles table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--fs-4);line-height:1.55}
.ed .nz-roles th,.ed .nz-roles td{padding:20px;text-align:left;vertical-align:top}
.ed .nz-roles thead th{font-size:var(--fs-2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--line)}
.ed .nz-roles thead th:nth-child(3){color:var(--em-text)}
.ed .nz-roles tbody tr:nth-child(even){background:var(--card2)}
.ed .nz-roles tbody th{font-weight:800;color:var(--ink)}
.ed .nz-col-role{width:18%}
.ed .nz-col-now{width:22%}
.ed .nz-col-ai{width:38%}
.ed .nz-col-human{width:22%}
.ed .nz-roles td.nz-was{color:var(--ink-muted)}
.ed .nz-roles td.nz-now{color:var(--ink)}
.ed .nz-role-pm{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.ed .nz-roles td.nz-human{color:var(--ink);font-weight:600}
@media(max-width:760px){
  .ed .nz-roles{overflow:visible;border:0;background:none;border-radius:0}
  .ed .nz-roles thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ed .nz-roles table,.ed .nz-roles tbody,.ed .nz-roles tr,.ed .nz-roles th,.ed .nz-roles td{display:block;width:auto}
  .ed .nz-roles tr,.ed .nz-roles tbody tr:nth-child(even){margin-bottom:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
  .ed .nz-roles th,.ed .nz-roles td{padding:0;border:0}
  .ed .nz-roles tbody th{width:auto;font-size:var(--fs-5)}
  .ed .nz-roles td{margin-top:12px}
  .ed .nz-roles td::before{content:attr(data-label);display:block;margin-bottom:4px;font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
  .ed .nz-roles td.nz-now::before{color:var(--em-text)}
}

/* ── Контент от Киры: галерея форматов ──────────────────────────────── */
.ed .nz-kira{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.ed .nz-kira-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.ed .nz-kira-card--v{position:relative;grid-column:1;grid-row:1/span 2;min-height:520px;border-color:#111111;background:#111111}
.ed .nz-kira-media{position:relative;aspect-ratio:1/1;background:var(--card2)}
.ed .nz-kira-media img{display:block;width:100%;height:100%;object-fit:cover}
.ed .nz-kira-media--v{position:absolute;inset:0;aspect-ratio:auto;background:#111111}
.ed .nz-kira-media--v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.ed .nz-kira-media--v img,.ed .nz-kira-media--v video{object-fit:contain;object-position:50% 0}
.ed .nz-kira-media--v video.is-on{opacity:1}
.ed .nz-kira-play{position:absolute;left:16px;top:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9)}
.ed .nz-kira-play::after{content:"";position:absolute;left:14px;top:11px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink)}
.ed .nz-kira-dots{position:absolute;left:50%;bottom:12px;display:flex;gap:4px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.9);transform:translateX(-50%)}
.ed .nz-kira-dots i{width:6px;height:6px;border-radius:999px;background:var(--line-2)}
.ed .nz-kira-dots i:first-child{width:16px;background:var(--em)}
.ed .nz-kira-body{padding:20px}
.ed .nz-kira-fmt{font:700 var(--fs-1)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.ed .nz-kira-body h3{margin-top:8px;font-size:var(--fs-5);line-height:1.3}
.ed .nz-kira-body p:last-child{margin-top:8px;font-size:var(--fs-3);line-height:1.55;color:var(--ink-soft)}
.ed .nz-kira-card--v .nz-kira-body{position:relative;margin-top:auto;padding:96px 20px 20px;background:linear-gradient(to top,rgba(17,17,17,.94) 45%,rgba(17,17,17,0))}
.ed .nz-kira-card--v .nz-kira-fmt{color:var(--on-dark-muted)}
.ed .nz-kira-card--v h3{color:#FFFFFF}
.ed .nz-kira-card--v .nz-kira-body p:last-child{color:var(--on-dark-soft)}
.ed .nz-kira-card--cta{justify-content:flex-start;align-items:flex-start;gap:16px;padding:24px;border-color:var(--card2);background:var(--card2)}
.ed .nz-kira-card--cta .btn{margin-top:auto}
.ed .nz-kira-card--cta p{font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.ed .nz-kira-note{max-width:760px;margin-top:16px;font-size:var(--fs-3);line-height:1.5;color:var(--ink-muted)}
@media(max-width:1180px){.ed .nz-kira{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .ed .nz-kira{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;margin-inline:-20px;padding:0 20px 12px;scroll-padding-inline:20px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .ed .nz-kira-card{scroll-snap-align:start}
  .ed .nz-kira-card--v{grid-column:auto;grid-row:auto;min-height:0}
}
@media(prefers-reduced-motion:reduce){.ed .nz-kira-media--v video{display:none}}

/* ── Результаты: тёмная полоса с крупными цифрами «было → стало» ─────── */
.ed .nz-band{padding:clamp(32px,5vw,72px) clamp(20px,4vw,56px);border-radius:var(--r-band);background:#111111;color:#FFFFFF}
.ed .nz-band .sec-head .kicker{color:var(--on-dark-muted)}
.ed .nz-band .sec-head h2{color:#FFFFFF}
.ed .nz-band .sec-head h2 .mk{color:var(--em-on-dark)}
.ed .nz-band .sec-head p{color:var(--on-dark-soft)}
.ed .nz-rb{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.ed .nz-rb--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ed .nz-rb--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ed .nz-rb-item{display:flex;flex-direction:column;padding:32px 24px 8px}
.ed .nz-rb-item:first-child{padding-left:0}
.ed .nz-rb-item + .nz-rb-item{border-left:1px solid rgba(255,255,255,.1)}
.ed .nz-rb-num{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-family:var(--mono);font-weight:700;letter-spacing:-.03em}
.ed .nz-rb-was{font-size:var(--fs-6);color:var(--on-dark-muted)}
.ed .nz-rb-ar{font-size:var(--fs-6);color:var(--on-dark-muted)}
.ed .nz-rb-now{font-size:var(--fs-d2);line-height:1;color:var(--em-on-dark);white-space:nowrap;font-variant-numeric:tabular-nums}
.ed .nz-rb-lbl{margin-top:16px;font-size:var(--fs-5);font-weight:700;line-height:1.35;color:#FFFFFF}
.ed .nz-rb-per{margin-top:4px;font:600 var(--fs-2)/1.4 var(--mono);color:var(--on-dark-muted)}
.ed .nz-rb-who{margin-top:12px;font-size:var(--fs-3);line-height:1.45}
.ed .nz-rb-who a,.ed .nz-rb-scene-txt a{color:var(--em-on-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ed .nz-rb-facts{list-style:none;display:grid;gap:4px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.ed .nz-rb-facts li{position:relative;padding-left:16px;font-size:var(--fs-3);line-height:1.5;color:var(--on-dark-soft)}
.ed .nz-rb-facts li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--em-on-dark)}
.ed .nz-rb-calc{margin-top:12px;font-size:var(--fs-2);line-height:1.5;color:var(--on-dark-muted)}
.ed .nz-rb-scene{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px 48px;align-items:center;margin-top:48px;padding-top:48px;border-top:1px solid rgba(255,255,255,.14)}
.ed .nz-rb-scene-txt .kicker{color:var(--on-dark-muted)}
.ed .nz-rb-scene-txt h3{margin-top:12px;font-size:var(--fs-7);line-height:1.2;color:#FFFFFF}
.ed .nz-rb-scene-txt p:last-child{margin-top:12px;font-size:var(--fs-4);line-height:1.6;color:var(--on-dark-soft)}
.ed .nz-cases-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Две карточки — не растягиваем на всю ширину, три — в ряд. */
.ed .nz-cases-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
.ed .nz-cases-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ed .nz-sec .case-cards__all{text-align:left}
.ed .nz-cases-grid .post-card{border:1px solid var(--line)}
@media(max-width:1180px){
  .ed .nz-cases-grid,.ed .nz-cases-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed .nz-rb,.ed .nz-rb--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed .nz-rb-item:nth-child(odd){padding-left:0;border-left:0}
  .ed .nz-rb-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .ed .nz-rb-scene{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .ed .nz-band{border-radius:var(--r)}
  .ed .nz-rb,.ed .nz-rb--2,.ed .nz-rb--3{grid-template-columns:minmax(0,1fr)}
  .ed .nz-rb-item,.ed .nz-rb-item:nth-child(odd){padding:24px 0 8px;border-left:0}
  .ed .nz-rb-item + .nz-rb-item{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .ed .nz-cases-grid,.ed .nz-cases-grid--2,.ed .nz-cases-grid--3{grid-template-columns:minmax(0,1fr)}
}

/* ── Связки: переключатель слева, схема справа; на телефоне аккордеон ── */
.ed .nz-bt{display:grid;gap:12px}
.ed .nz-bt-item{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.ed .nz-bt-item--start{border-color:var(--em)}
.ed .nz-bt-h{font-size:inherit}
.ed .nz-bt-tab{display:grid;grid-template-columns:minmax(0,1fr) 28px;grid-template-areas:"s i" "n i" "p i";gap:8px 16px;align-items:center;width:100%;padding:20px 24px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.ed .nz-bt-tab:focus-visible{outline:2px solid var(--em-text);outline-offset:-4px;border-radius:var(--r-sm)}
.ed .nz-bt-stage{grid-area:s;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:700 var(--fs-2)/1.4 var(--mono);color:var(--ink-muted)}
.ed .nz-bt-name{grid-area:n;font-size:var(--fs-5);font-weight:800;line-height:1.3;letter-spacing:-.02em;transition:color var(--dur-1) var(--ease-out)}
.ed .nz-bt-tab:hover .nz-bt-name{color:var(--em-text)}
.ed .nz-bt-pms{grid-area:p;display:flex;gap:4px}
.ed .nz-bt-tab .nz-stage-ic{grid-area:i}
.ed .nz-bt-tab[aria-expanded="true"] .nz-stage-ic{transform:rotate(45deg)}
.ed .nz-bundle-badge{padding:2px 8px;border-radius:999px;background:var(--em-wash);font:700 var(--fs-1)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--em-text)}
.ed .nz-bt-panel{padding:0 24px 24px}
.ed .nz-bt-panel[hidden]{display:none}
.ed .nz-bt-task{font-size:var(--fs-lead);line-height:1.55;color:var(--ink)}
/* Схема связки: знак → знак → метрика, по стрелкам бежит сигнал. */
.ed .nz-flow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.ed .nz-flow-t{display:inline-flex;flex-direction:column;align-items:center;gap:8px;min-width:88px;font-size:var(--fs-3);font-weight:700;line-height:1.25;text-align:center;color:var(--ink)}
.ed .nz-flow-t .pm{width:48px;height:48px}
.ed .nz-flow-ar{position:relative;flex:1 0 24px;max-width:72px;height:2px;background:var(--line-2)}
.ed .nz-flow-ar::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border:solid var(--line-2);border-width:2px 2px 0 0;transform:rotate(45deg)}
/* Точка по стрелке — transform, путь = длина стрелки (100cqw); появляется и
   гаснет в пределах стрелки, не заходя на соседние плашки. */
.ed .nz-flow-ar{container-type:inline-size}
.ed .nz-flow-ar::before{content:"";position:absolute;left:0;top:-5px;width:12px;height:12px;background:radial-gradient(circle,var(--em) 0 3px,transparent 3.5px);opacity:0}
@media(prefers-reduced-motion:no-preference){.ed .nz-bt-panel:not([hidden]) .nz-flow-ar::before{animation:nz-sig-ar 1.8s linear infinite}}
@keyframes nz-sig-ar{0%{opacity:0;transform:none}15%,85%{opacity:1}100%{opacity:0;transform:translateX(calc(100cqw - 12px))}}
.ed .nz-flow-res{display:grid;gap:4px;max-width:240px;padding:12px 16px;border:1px solid var(--em);border-radius:var(--r-xs);background:var(--em-wash);font-size:var(--fs-3);font-weight:700;line-height:1.35;color:var(--ink)}
.ed .nz-flow-res small{font:700 var(--fs-1)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em-text)}
.ed .nz-bundle-flow{list-style:none;counter-reset:nzf;display:grid;gap:8px;margin-top:20px}
.ed .nz-bundle-flow li{counter-increment:nzf;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;font-size:var(--fs-4);line-height:1.5;color:var(--ink)}
.ed .nz-bundle-flow li::before{content:counter(nzf,decimal-leading-zero);font:700 var(--fs-2)/1 var(--mono);color:var(--em-text)}
.ed .nz-bt-launch{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.ed .nz-bt-launch b{color:var(--ink)}
.ed .nz-bundle-more{margin-top:12px;font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
.ed .nz-bundle-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ed .nz-bundle-links a,.ed .nz-bt-map{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font:inherit;font-size:var(--fs-3);font-weight:700;color:var(--ink);cursor:pointer;transition:border-color var(--dur-1) var(--ease-out)}
.ed .nz-bundle-links a:hover,.ed .nz-bt-map:hover{border-color:var(--em)}
.ed .nz-bt-map{border-color:var(--em);color:var(--em-text)}
/* Широкий экран со скриптом: вкладки слева, открытая панель справа. */
@media(min-width:981px){
  .ed .nz-bt.is-js{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:repeat(var(--nz-bn,4),auto) 1fr;gap:8px 32px;align-items:start}
  .ed .nz-bt.is-js .nz-bt-item{display:contents}
  .ed .nz-bt.is-js .nz-bt-h{grid-column:1;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
  .ed .nz-bt.is-js .nz-bt-item--start .nz-bt-h{border-color:var(--em)}
  .ed .nz-bt.is-js .nz-bt-item.is-on .nz-bt-h{border-color:var(--ink);box-shadow:0 14px 34px -22px rgba(0,0,0,.28)}
  .ed .nz-bt.is-js .nz-stage-ic{display:none}
  .ed .nz-bt.is-js .nz-bt-tab{grid-template-columns:minmax(0,1fr);grid-template-areas:"s" "n" "p";padding:16px 20px}
  .ed .nz-bt.is-js .nz-bt-panel{grid-column:2;grid-row:1/-1;padding:32px;border:1px solid var(--line);border-radius:var(--r);background:var(--card2)}
  .ed .nz-bt.is-js .nz-flow{background:var(--card)}
}
@media(max-width:1180px){.ed .nz-bt-map{display:none}}
@media(max-width:640px){
  .ed .nz-bt-tab{padding:16px}
  .ed .nz-bt-panel{padding:0 16px 20px}
  .ed .nz-flow{padding:16px;gap:8px}
  .ed .nz-flow-t{min-width:64px}
  .ed .nz-flow-t .pm{width:40px;height:40px}
  .ed .nz-flow-res{max-width:none;flex:1 1 100%}
}

/* ── Экономика ─────────────────────────────────────────────────────── */
.ed .nz-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ed .nz-formula{display:grid;gap:12px;align-content:start;padding:24px;border-radius:var(--r);background:var(--card2)}
.ed .nz-formula p{font:600 var(--fs-4)/1.6 var(--mono);color:var(--ink)}
.ed .nz-example{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.ed .nz-example-h{font-size:var(--fs-5);font-weight:800;color:var(--ink)}
.ed .nz-example ul{list-style:none;display:grid;gap:8px;margin-top:12px}
.ed .nz-example li{font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media(max-width:900px){.ed .nz-calc{grid-template-columns:minmax(0,1fr)}.ed .nz-formula,.ed .nz-example{padding:20px}}

/* ── Пилот — «чек»: строки условий и итог ──────────────────────────── */
.ed .nz-pilot-sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 64px;align-items:start}
.ed .nz-rcpt{position:relative;margin-bottom:12px;padding:24px 32px 32px;border-top-left-radius:var(--r-sm);border-top-right-radius:var(--r-sm);background:var(--card2)}
/* Зубчатый отрыв чека. */
.ed .nz-rcpt::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(135deg,var(--card2) 50%,transparent 50%) 0 0/16px 12px repeat-x,linear-gradient(-135deg,var(--card2) 50%,transparent 50%) 0 0/16px 12px repeat-x}
.ed .nz-rcpt-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-bottom:16px;border-bottom:1px dashed var(--line-2);font:700 var(--fs-2)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.ed .nz-rcpt-row{display:grid;grid-template-columns:152px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px dashed var(--line-2)}
.ed .nz-rcpt-row dt{font:700 var(--fs-2)/1.8 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.ed .nz-rcpt-row dd{font-size:var(--fs-4);line-height:1.55;color:var(--ink)}
.ed .nz-rcpt-total{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;padding-top:20px}
.ed .nz-rcpt-total span{font:700 var(--fs-2)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.ed .nz-rcpt-total b{font:700 var(--fs-6)/1.3 var(--mono);letter-spacing:-.02em;color:var(--em-text)}
@media(max-width:980px){.ed .nz-pilot-sec{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.ed .nz-rcpt{padding:20px 20px 28px}.ed .nz-rcpt-row{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ── Когда не нужно — компактный список в две колонки ──────────────── */
.ed .nz-not{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:1px solid var(--line)}
.ed .nz-not li{position:relative;padding:16px 0 16px 32px;border-bottom:1px solid var(--line);font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.ed .nz-not li::before{content:"×";position:absolute;left:4px;top:16px;font:700 var(--fs-5)/1.4 var(--mono);color:var(--em-text)}
@media(max-width:760px){.ed .nz-not{grid-template-columns:minmax(0,1fr)}}

/* ── Другие отрасли ────────────────────────────────────────────────── */
.ed .nz-others{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ed .nz-other{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);transition:border-color var(--dur-1) var(--ease-out)}
.ed .nz-other:hover{border-color:var(--em)}
.ed .nz-other-t{margin-top:8px;font-size:var(--fs-5);font-weight:800;color:var(--ink)}
.ed .nz-other-p{font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
@media(max-width:1180px){.ed .nz-others{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ── Телефон: одно действие на экране ──────────────────────────────────
   Липкая полоса, кнопка ленты разделов и кнопки первого экрана вели на одну
   и ту же форму и занимали треть экрана 390px. Оставляем кнопку полосы на
   всю ширину, подпись полосы и кнопку ленты прячем. */
@media(max-width:640px){
  .nz-page .sticky-cta{padding-right:80px}
  .nz-page .sticky-cta-text{display:none}
  .nz-page .sticky-cta .btn{flex:1 1 auto;justify-content:center}
  .ed.nz-page .pnav a.pnav-cta{display:none}
}
@media(max-width:640px){.ed .nz-others{grid-template-columns:minmax(0,1fr)}.ed .nz-other{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:center}.ed .nz-other .nz-tile{grid-row:span 2}.ed .nz-other-t{margin-top:0}}

/* Телефон: переписка в hero идёт быстрее (×0,6), чтобы итоговая карточка
   появлялась примерно на 8-й секунде, а не на 14-й; цикл в script.js
   укорачивается тем же множителем. */
@media(max-width:640px){.ed .nz-live--chat{--nz-spd:.6}}
/* Связки на телефоне — столбиком: знак и имя в строку, стрелки вниз,
   без висячей стрелки после переноса. */
@media(max-width:640px){
  .ed .nz-flow{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px}
  .ed .nz-flow-t{flex-direction:row;justify-content:flex-start;gap:12px;min-width:0;text-align:left}
  .ed .nz-flow-ar{flex:none;align-self:flex-start;width:2px;height:16px;max-width:none;margin-left:20px}
  .ed .nz-flow-ar::after{right:auto;left:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}
  .ed .nz-flow-ar::before{display:none}
}

/* ═══ ГЛАВНАЯ АГЕНТСТВА (25.09.2026) ══════════════════════════════════
   Префикс hm-. Главная — хаб агентства: первый экран «Маршрут задачи»
   (задача → что делаем → метрика), полоса доказательств, услуги по трём
   направлениям, кейсы, процесс, свои продукты, доверие, FAQ, форма.
   Один сквозной мотив — изумрудная линия-штрих со станциями (штрих кольца
   логотипа): в первом экране и в процессе. */

/* ── Первый экран ── */
.ed .hero-yn.hm-hero{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);column-gap:56px;row-gap:0;align-items:center;padding-block:48px 64px}
.hm-hero__txt{max-width:640px}
.ed .hm-hero .hm-hero__tag{margin:0 0 12px}
.ed .hm-hero__h1{margin:0;font-size:var(--fs-d3)}
/* Поле слева и узкое кольцо — иначе обводка «заявок» задевает «е» в «больше». */
.hm-hero .ring-mk{margin-left:.12em;padding-right:.08em}
.hm-hero .ring-mk-svg{left:calc(50% - .02em);width:calc(100% + .3em);height:calc(100% + .45em)}
.hm-hero__sub{margin:24px 0 0}
.hm-hero__cta{margin-top:32px}
.hm-hero__cta .yn-cta{margin-top:0}
.hm-hero__free{margin:16px 0 0;max-width:52ch;font-size:var(--fs-4);line-height:1.5;color:var(--ink-soft)}
.hm-hero__free b{color:var(--ink);font-weight:700}

/* Сцена: вкладки-задачи и карточка с тремя станциями на линии. */
.hm-rt{--hm-deep:#0F1F18;margin:0;align-self:center;min-width:0}
.hm-rt-tabs{display:flex;flex-wrap:wrap;gap:8px}
.hm-rt-tab{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:36px;padding:4px 16px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.8);font-size:var(--fs-3);font-weight:600;color:var(--ink-soft);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.hm-rt-tab:hover{border-color:var(--ink);color:var(--ink)}
.hm-rt-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--em-on-dark);transform:scaleX(0);transform-origin:left}
.hm-rt-r:checked+.hm-rt-tab{border-color:var(--hm-deep);background:var(--hm-deep);color:#FFFFFF}
.hm-rt-r:focus-visible+.hm-rt-tab{box-shadow:var(--ring)}
/* Полоса на активной вкладке заполняется 8 с; по animationend script.js
   включает следующую вкладку (initHomeRoute) — таймеров нет. Наведение и
   фокус внутри сцены ставят полосу на паузу: читающего не перебивают. */
.hm-rt.is-auto .hm-rt-r:checked+.hm-rt-tab::after{animation:hmRtProg 8s linear forwards}
.hm-rt.is-auto:hover .hm-rt-r:checked+.hm-rt-tab::after,.hm-rt.is-auto:focus-within .hm-rt-r:checked+.hm-rt-tab::after{animation-play-state:paused}
@keyframes hmRtProg{to{transform:scaleX(1)}}
/* Фирменный момент: при смене вкладки цифру результата один раз обводит
   рукописное кольцо логотипа цветом --em-on-dark. Разметку кольца вставляет
   initHomeRoute; класс rt-moved — после первой смены, до неё не рисуем. */
.hm-rt-rk{position:relative;display:inline-block;isolation:isolate}
.hm-rt-ring{position:absolute;left:50%;top:50%;width:calc(100% + .8em);height:calc(100% + .48em);transform:translate(-50%,-50%);overflow:visible;pointer-events:none;z-index:-1;color:var(--em-on-dark);opacity:.85}
.hm-rt-ring path{fill:none;stroke:currentColor;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2340;stroke-dashoffset:2340}
.hm-rt.rt-moved:has(#hm-rt-0:checked) .hm-rt-st--0 .hm-rt-ring path,.hm-rt.rt-moved:has(#hm-rt-1:checked) .hm-rt-st--1 .hm-rt-ring path,.hm-rt.rt-moved:has(#hm-rt-2:checked) .hm-rt-st--2 .hm-rt-ring path,.hm-rt.rt-moved:has(#hm-rt-3:checked) .hm-rt-st--3 .hm-rt-ring path,.hm-rt.rt-moved:has(#hm-rt-4:checked) .hm-rt-st--4 .hm-rt-ring path,.hm-rt.rt-moved:has(#hm-rt-5:checked) .hm-rt-st--5 .hm-rt-ring path{animation:logoRingDraw var(--dur-3) var(--ease-smooth) var(--dur-1) both}
/* Тёмная карточка: глубина и светящийся результат уравновешивают крупный H1 слева. */
.hm-rt-card{position:relative;display:grid;margin-top:16px;padding:32px 32px 28px 72px;color:#FFFFFF;border:1px solid rgba(62,207,149,.18);border-radius:var(--r-band);
  background:radial-gradient(90% 70% at 100% 100%,rgba(62,207,149,.18),transparent 60%),radial-gradient(60% 50% at 0 0,rgba(255,255,255,.05),transparent 70%),var(--hm-deep);box-shadow:0 30px 70px -36px rgba(10,60,40,.6)}
/* Все состояния в одной ячейке сетки: высоту задаёт самое высокое,
   переключение ничего не сдвигает (CLS 0). Скрытые — visibility:hidden,
   их ссылки не фокусируются и не читаются скринридером. */
.hm-rt-st{grid-area:1/1;list-style:none;margin:0;padding:0;display:grid;gap:24px;align-content:center;visibility:hidden;opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
.hm-rt:has(#hm-rt-0:checked) .hm-rt-st--0,.hm-rt:has(#hm-rt-1:checked) .hm-rt-st--1,.hm-rt:has(#hm-rt-2:checked) .hm-rt-st--2,.hm-rt:has(#hm-rt-3:checked) .hm-rt-st--3,.hm-rt:has(#hm-rt-4:checked) .hm-rt-st--4,.hm-rt:has(#hm-rt-5:checked) .hm-rt-st--5{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.hm-rt-row{position:relative}
/* Узлы и ровная линия между ними; узел результата светится. */
.hm-rt-row::before{content:"";position:absolute;left:-44px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--hm-deep);border:2px solid rgba(62,207,149,.6);box-sizing:border-box}
.hm-rt-row:not(:last-child)::after{content:"";position:absolute;left:-38px;top:20px;width:2px;height:calc(100% + 6px);background:linear-gradient(rgba(62,207,149,.5),rgba(62,207,149,.15))}
.hm-rt-row--res{padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.hm-rt-row--res::before{top:24px;background:var(--em-on-dark);border-color:var(--em-on-dark);box-shadow:0 0 0 6px rgba(62,207,149,.18),0 0 24px rgba(62,207,149,.6)}
.hm-rt-k{display:block;margin-bottom:4px;font-family:var(--mono);font-size:var(--fs-1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted)}
.hm-rt-q{margin:0;font-size:var(--fs-6);line-height:1.3;font-weight:700;color:#FFFFFF}
.hm-rt-svc{margin:0;font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.hm-rt-svc a{color:#FFFFFF;text-decoration:none;transition:color var(--dur-1) var(--ease-out)}
.hm-rt-svc a::after{content:" →";color:var(--em-on-dark)}
.hm-rt-svc a:hover{color:var(--em-on-dark)}
.hm-rt-svc a:focus-visible{outline:2px solid var(--em-on-dark);outline-offset:4px;border-radius:var(--r-3xs)}
.hm-rt-how{margin:4px 0 0;font-size:var(--fs-3);line-height:1.5;color:rgba(255,255,255,.62)}
.hm-rt-num{margin:0;font-family:var(--mono);font-size:var(--fs-d3);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--em-on-dark);font-variant-numeric:tabular-nums}
.hm-rt-res{margin:8px 0 0;font-size:var(--fs-3);line-height:1.5;color:rgba(255,255,255,.62)}
.hm-rt-res a{color:#FFFFFF;font-weight:700}
.hm-rt-res a:hover{color:var(--em-on-dark)}
.hm-rt-cap{margin-top:12px;max-width:52ch;font-size:var(--fs-2);line-height:1.5;color:var(--ink-muted)}
/* Без :has() — первое состояние и без вкладок. */
@supports not selector(:has(*)){.hm-rt-st--0{visibility:visible;opacity:1;transform:none}.hm-rt-tabs{display:none}}

@media(max-width:900px){
  /* На телефоне основной следующий шаг доступен до большой сцены с кейсом. */
  .ed .hero-yn.hm-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "h1" "cta" "sub" "rt";padding-block:24px 40px}
  .hm-hero__txt{display:contents}
  .ed .hm-hero .hm-hero__tag{grid-area:tag}
  .ed .hm-hero__h1{grid-area:h1;font-size:var(--fs-d4)}
  .hm-rt{grid-area:rt;margin-top:20px}
  .hm-hero__cta{grid-area:cta;margin-top:20px}
  .hm-hero__sub{grid-area:sub;margin-top:20px}
  .hm-rt-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scroll-padding-inline:16px;scrollbar-width:none}
  .hm-rt-tabs::-webkit-scrollbar{display:none}
  .hm-rt-tab{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .hm-rt-card{margin-top:12px;padding:24px 20px 20px 52px;border-radius:var(--r)}
  .hm-rt-row::before{left:-36px}
  .hm-rt-row:not(:last-child)::after{left:-30px;height:calc(100% + 2px)}
  .hm-rt-row--res{padding-top:16px}
  .hm-rt-row--res::before{top:20px}
  .hm-rt-st{gap:20px}
  .hm-rt-q{font-size:var(--fs-5)}
  .hm-rt-svc{font-size:var(--fs-5)}
  .hm-rt-how{display:none}
  .hm-rt-num{font-size:var(--fs-d3)}
  .hm-rt-cap{display:none}
  .hm-hero__free{font-size:var(--fs-3)}
}
@media(prefers-reduced-motion:reduce){
  .hm-rt-st{transition:none}
  .hm-rt.is-auto .hm-rt-r:checked+.hm-rt-tab::after{animation:none}
  .hm-rt.rt-moved .hm-rt-ring path{animation:none!important;stroke-dashoffset:0}}

/* ── Полоса доказательств: три цифры из трёх направлений ── */
.hm-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 34px -22px rgba(0,0,0,.18)}
.hm-proof__i{display:flex;flex-direction:column;gap:4px;padding:24px 28px;color:var(--ink);text-decoration:none;border-left:1px solid var(--line);transition:background-color var(--dur-1) var(--ease-out)}
.hm-proof__i:first-child{border-left:0}
/* Запятая моноширинного шрифта — полная клетка; сужаем до пропорциональной. */
.n-cm{margin-inline:-.2em -.12em}
.hm-proof__i:hover{background:var(--card2)}
.hm-proof__i:focus-visible{outline:none;box-shadow:var(--ring)}
.hm-proof__n{font-family:var(--mono);font-size:var(--fs-d1);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--em-text);font-variant-numeric:tabular-nums}
.hm-proof__t{font-size:var(--fs-4);font-weight:600;line-height:1.4}
.hm-proof__s{margin-top:4px;font-size:var(--fs-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
@media(max-width:760px){
  .hm-proof{grid-template-columns:1fr}
  .hm-proof__i{padding:16px 20px;border-left:0;border-top:1px solid var(--line)}
  .hm-proof__i:first-child{border-top:0}
  .hm-proof__t{font-size:var(--fs-3)}
}

/* ── Услуги: три направления ── */
.hm-dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.hm-dir{display:flex;flex-direction:column;gap:12px;min-width:0}
.hm-dir__head{position:relative;padding-top:20px}
/* Линия-штрих над направлением — тот же мотив, что в первом экране. */
.hm-dir__head::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r-3xs);background:linear-gradient(90deg,var(--em) 0,var(--em) 32%,var(--line) 32%)}
.hm-dir__n{display:block;font-family:var(--mono);font-size:var(--fs-2);font-weight:700;letter-spacing:.08em;color:var(--em-text)}
.ed .hm-dir__head h3{margin:4px 0 0;font-size:var(--fs-7);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.hm-dir__head p{margin:8px 0 0;font-size:var(--fs-4);line-height:1.5;color:var(--ink-soft)}
.hm-dir__list{display:grid;gap:12px}
.hm-svc{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;
  transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.hm-svc:hover{border-color:var(--em);box-shadow:0 2px 6px rgba(11,138,91,.07),0 28px 52px -22px rgba(11,138,91,.30);transform:translateY(-2px)}
.hm-svc:focus-visible{outline:none;box-shadow:var(--ring)}
.hm-svc__img{display:block;width:100%;height:140px;object-fit:cover;background:var(--card2);border-bottom:1px solid var(--line)}
.hm-svc__body{display:flex;flex-direction:column;gap:4px;padding:16px 20px 20px}
.hm-svc__task{font-size:var(--fs-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.ed .hm-svc__name{margin:0;font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.hm-svc:hover .hm-svc__name{color:var(--em-text)}
.hm-svc__what{font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
.hm-svc__fact{margin-top:8px;font-family:var(--mono);font-size:var(--fs-2);font-weight:600;line-height:1.5;color:var(--em-text)}
.hm-dir__tools{margin:4px 0 0;font-size:var(--fs-3);line-height:1.55;color:var(--ink-soft)}
.hm-dir__tools a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--em);text-underline-offset:3px}
/* «Чем работаем в продажах» — карточка-список в колонке 02: у направления две
   услуги против трёх у соседей, и под строкой-абзацем на 1440 оставалось
   ≈330 px пустоты. Цен здесь нет — они в блоке продуктов ниже. */
.hm-tools{padding:20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card2)}
.hm-tools__t{margin:0 0 8px;font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.hm-tools__list{margin:0;padding:0;list-style:none}
.hm-tools__list li+li{border-top:1px solid var(--line)}
.hm-tools__list a{display:flex;align-items:center;gap:12px;padding:8px 0;color:var(--ink-soft);font-size:var(--fs-3);line-height:1.4;text-decoration:none}
.hm-tools__list .dna-ic{width:36px;height:36px;margin:0;border-radius:var(--r-2xs);font-size:var(--fs-6);transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.hm-tools__list b{display:block;font-size:var(--fs-4);font-weight:800;color:var(--ink)}
.hm-tools__list a:hover b{color:var(--em-text)}
.hm-tools__list a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
.hm-tools__more{margin:8px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
.hm-tools__more a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--em);text-underline-offset:3px}
@media(max-width:1100px) and (min-width:761px){.hm-tools__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}.hm-tools__list li:nth-child(2){border-top:0}}
@media(max-width:760px){
  .hm-tools{padding:16px}
  .hm-tools__list a{gap:8px;padding:4px 0}
  .hm-tools__list .dna-ic{width:32px;height:32px;font-size:var(--fs-5)}
  .hm-tools__list b{display:inline;margin-right:4px}
}
.hm-ind{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.hm-ind__t{margin:0;font-size:var(--fs-4);font-weight:700;color:var(--ink)}
.hm-ind__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.hm-ind__list a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 16px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:var(--fs-4);font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color var(--dur-1) var(--ease-out)}
.hm-ind__list a:hover{border-color:var(--em)}
.hm-ind__list .dna-ic{width:36px;height:36px;margin:0;border-radius:999px;font-size:var(--fs-5)}
.hm-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:32px;padding:24px 28px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card2)}
.hm-ask p{margin:0;max-width:64ch;font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.hm-ask b{color:var(--ink)}
@media(max-width:1100px){.hm-dirs{grid-template-columns:minmax(0,1fr);gap:32px}.hm-dir__list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
@media(max-width:760px){
  .hm-dir__list{grid-template-columns:minmax(0,1fr);gap:8px}
  /* Телефон: карточка — строка «квадрат 72 px + текст». */
  .hm-svc{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start;padding:12px}
  .hm-svc__img{width:72px;height:72px;border:0;border-radius:var(--r-2xs)}
  .hm-svc__body{padding:0}
  .ed .hm-svc__name{font-size:var(--fs-5)}
  .hm-svc__fact{margin-top:4px}
  .hm-ind{margin-top:32px}
  .hm-ind__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .hm-ind__list a{font-size:var(--fs-3)}
  .hm-ask{padding:20px}
  .hm-ask .btn{width:100%;justify-content:center}
}

/* ── Кейсы ── */
.hm-cs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hm-cs{display:flex;flex-direction:column;gap:4px;overflow:hidden;padding:0 20px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;
  transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.hm-cs:hover{border-color:var(--em);box-shadow:0 2px 6px rgba(11,138,91,.07),0 28px 52px -22px rgba(11,138,91,.30);transform:translateY(-2px)}
.hm-cs:focus-visible{outline:none;box-shadow:var(--ring)}
.hm-cs__img{display:block;width:calc(100% + 40px);max-width:none;margin:0 -20px 12px;aspect-ratio:16/9;height:auto;object-fit:cover;background:var(--card2);border-bottom:1px solid var(--line)}
.hm-cs__dir{font-family:var(--mono);font-size:var(--fs-1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--em-text)}
.hm-cs__who{font-size:var(--fs-3);font-weight:600;line-height:1.4;color:var(--ink-muted)}
.hm-cs__num{margin-top:8px;font-family:var(--mono);font-size:var(--fs-d1);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-cs__num--txt{font-family:inherit;font-size:var(--fs-6);font-weight:800;line-height:1.25}
.hm-cs__t{font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
.hm-cs__bars{display:grid;gap:4px;margin-top:8px}
.hm-cs__bar{position:relative;display:block;height:20px;border-radius:var(--r-3xs);background:var(--card2);overflow:hidden}
.hm-cs__bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--line-2)}
.hm-cs__bar--after i{background:var(--em)}
.hm-cs__bar em{position:relative;display:block;padding-left:8px;font-style:normal;font-size:var(--fs-1);font-weight:700;line-height:20px;color:var(--ink)}
.hm-cs__bar--after em{color:#FFFFFF}
.hm-cs__more{margin-top:auto;padding-top:12px;font-size:var(--fs-3);font-weight:700;color:var(--em-text)}
.hm-cs-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media(max-width:1100px){.hm-cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .hm-cs-grid{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:4px 16px 16px;scroll-padding-inline:16px}
  .hm-cs-grid::-webkit-scrollbar{display:none}
  .hm-cs{flex:0 0 min(300px,82%);scroll-snap-align:start}
  .hm-cs-act .btn{flex:1 1 100%;justify-content:center}
}

/* ── Процесс: четыре станции на линии-штрихе ── */
.hm-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
/* Фирменный момент (25.09.2026): изумрудная линия прочерчивается за 1,1 с
   равномерно, и каждый шаг загорается, когда линия до него доходит, —
   задержки (--lit) по доле пути до плитки шага: 0 / 26 / 53 / 79%. Один
   раз, при появлении блока. Сам блок не «всплывает» общим rvIn — у него
   своя хореография. При «меньше движения» всё стоит на месте. */
.hm-steps.reveal.rv-wait{opacity:1;translate:none}
.hm-steps.reveal.rv-in{animation:none}
.hm-steps::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:3px;border-radius:var(--r-3xs);background:var(--em);transform-origin:left;transition:transform 1.1s linear}
.hm-steps.rv-wait::before{transform:scaleX(0)}
.hm-step{position:relative;min-width:0;--lit:0ms;transition:opacity var(--dur-3) var(--ease-out) var(--lit),transform var(--dur-3) var(--ease-out) var(--lit)}
.hm-steps.rv-wait .hm-step{opacity:0;transform:translateY(8px)}
.hm-step:nth-child(2){--lit:290ms}
.hm-step:nth-child(3){--lit:580ms}
.hm-step:nth-child(4){--lit:870ms}
.hm-steps.rv-in .hm-step .dna-ic{animation:hmStepLit var(--dur-3) var(--ease-out) var(--lit) both}
@keyframes hmStepLit{
  0%{box-shadow:0 0 0 6px var(--bg,#FFFFFF),0 0 0 6px rgba(11,138,91,0)}
  45%{box-shadow:0 0 0 6px var(--bg,#FFFFFF),0 0 0 12px rgba(11,138,91,.3)}
  100%{box-shadow:0 0 0 6px var(--bg,#FFFFFF),0 0 0 16px rgba(11,138,91,0)}
}
.hm-step .dna-ic{position:relative;z-index:1;box-shadow:0 0 0 6px var(--bg,#FFFFFF)}
.hm-step__n{display:block;font-family:var(--mono);font-size:var(--fs-2);font-weight:700;letter-spacing:.08em;color:var(--ink-muted)}
.ed .hm-step h3{margin:4px 0 0;font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.hm-step p{margin:8px 0 0;font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.hm-proc .sec-after a{color:var(--em-text);font-weight:700}
@media(max-width:900px){
  .hm-steps{grid-template-columns:minmax(0,1fr);gap:20px;padding-left:60px}
  .hm-steps::before{left:21px;right:auto;top:22px;bottom:22px;width:3px;height:auto;transform-origin:top}
  .hm-steps.rv-wait::before{transform:scaleY(0)}
  .hm-step .dna-ic{position:absolute;left:-60px;top:0}
  .ed .hm-step h3{font-size:var(--fs-5)}
  .hm-step p{font-size:var(--fs-3)}
}
@media(prefers-reduced-motion:reduce){.hm-steps::before,.hm-step{transition:none}.hm-steps.rv-in .hm-step .dna-ic{animation:none}}

/* ── Свои продукты: компактные карточки-строки (25.09.2026) ──
   Без живых витрин: иконка, название, что делает, цена или условие старта.
   Кнопка «Подобрать под задачу» стоит в шапке блока справа от вступления —
   отдельная плашка под сеткой добавляла ~140 px и повторяла вступление. */
@media(min-width:1101px){
  .hm-prods .sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end;padding-bottom:24px}
  .hm-prods .sec-head .kicker,.hm-prods .sec-head h2{grid-column:1/-1}
  .hm-prods .sec-head p{max-width:720px}
}
.hm-prods__cta{margin-top:16px}
.hm-prl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hm-prl>li{display:flex;min-width:0}
.hm-pr{position:relative;flex:1;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-areas:"ic top" "ic what" "ic price";align-content:start;gap:4px 12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;
  transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.hm-pr:hover{border-color:var(--em);box-shadow:0 2px 6px rgba(11,138,91,.07),0 28px 52px -22px rgba(11,138,91,.30);transform:translateY(-2px)}
.hm-pr:focus-visible{outline:none;box-shadow:var(--ring)}
.hm-pr__ic{grid-area:ic;width:36px;height:36px;margin:0;border-radius:var(--r-2xs);font-size:var(--fs-6)}
.hm-pr__top{grid-area:top;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0;padding-right:32px}
.ed .hm-pr__name{margin:0;font-size:var(--fs-5);font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.hm-pr__cat{font-size:var(--fs-2);font-weight:600;line-height:1.4;color:var(--ink-muted)}
.hm-pr__what{grid-area:what;font-size:var(--fs-3);line-height:1.45;color:var(--ink-soft)}
.hm-pr__price{grid-area:price;margin-top:4px;font-size:var(--fs-3);line-height:1.4;color:var(--ink-soft)}
.hm-pr__price b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-pr__price small{display:block;font-size:var(--fs-2);font-weight:600;color:var(--ink-muted)}
.hm-pr__go{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-2);border-radius:50%;font-size:var(--fs-4);font-weight:700;line-height:1;color:var(--ink);
  transition:transform var(--dur-2) var(--ease-spring),background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.hm-pr:hover .hm-pr__go{background:var(--ink);border-color:var(--ink);color:#FFFFFF;transform:translateX(4px)}
@media(max-width:1100px){.hm-prl{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Телефон: строка «иконка · название и тип · цена»; фраза «что делает» и
   условие старта остаются в разметке, на экране их заменяет тип продукта. */
@media(max-width:600px){
  .hm-prods__cta{width:100%;justify-content:center}
  .hm-prl{grid-template-columns:minmax(0,1fr);gap:8px}
  .hm-pr{grid-template-areas:"ic top" "ic price";align-items:center;gap:0 12px;padding:12px 48px 12px 12px}
  .hm-pr__top{padding-right:0}
  .hm-pr__what,.hm-pr__price small{display:none}
  .hm-pr__price{margin-top:0;font-size:var(--fs-2)}
  .hm-pr__go{top:calc(50% - 14px);right:12px}
}

/* ── Доверие: тёмная полоса ── */
.ed .hm-trust{margin-inline:var(--bleed);margin-block:clamp(56px,6vw,96px) 0;padding-block:clamp(48px,6vw,80px);padding-inline:max(16px,calc((100vw - var(--col))/2));background:#111111;color:#FFFFFF}
.ed .hm-trust .sec-head h2{color:#FFFFFF}
.ed .hm-trust .kicker{color:var(--em-on-dark)}
.hm-trust__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hm-trust__i{padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm)}
.hm-trust__i .dna-ic{background:rgba(255,255,255,.1);color:#FFFFFF;--ic-ac:var(--em-on-dark)}
.hm-trust__i .dna-ic--fill{background:var(--em-text);--ic-ac:#FFFFFF}
.ed .hm-trust__i h3{margin:0;font-size:var(--fs-6);font-weight:800;color:#FFFFFF}
.hm-trust__i p{margin:8px 0 0;font-size:var(--fs-4);line-height:1.55;color:#FFFFFF}
.hm-trust__i a,.hm-trust__stack a{color:var(--em-on-dark);font-weight:700}
.hm-trust__stack{margin:24px 0 0;font-size:var(--fs-4);line-height:1.6;color:#FFFFFF}
@media(max-width:900px){.hm-trust__grid{grid-template-columns:minmax(0,1fr);gap:12px}.hm-trust__i{padding:20px}}

/* ── Финал: изумрудная полоса с формой-квизом ── */
.ed .cta-big.hm-final{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:start}
.hm-final__kick{margin:0 0 12px;font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.hm-final__contacts{display:flex;flex-wrap:wrap;gap:12px 24px;margin:24px 0 0}
.hm-final__contacts a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#FFFFFF;text-decoration:none}
.hm-final__contacts a:hover{text-decoration:underline}
.hm-final__contacts .icon{width:16px;height:16px}
.hm-final__form{min-width:0;color:var(--ink)}
.ed .hm-final .form-grid{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px;background:#FFFFFF;border:0;border-radius:var(--r-sm);backdrop-filter:none}
.hm-task{margin:0;padding:0;border:0;min-width:0}
.hm-task legend{padding:0;margin-bottom:8px;font-size:var(--fs-4);font-weight:700;color:var(--ink)}
.hm-task__opts{display:flex;flex-wrap:wrap;gap:8px}
.hm-task__o{position:relative;display:inline-flex;cursor:pointer}
.hm-task__o input{position:absolute;opacity:0;width:1px;height:1px}
.hm-task__o span{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:var(--fs-3);font-weight:600;line-height:1.3;color:var(--ink-soft);
  transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.hm-task__o:hover span{border-color:var(--ink);color:var(--ink)}
.hm-task__o input:checked+span{border-color:var(--ink);background:var(--ink);color:#FFFFFF}
.hm-task__o input:focus-visible+span{box-shadow:var(--ring)}
.hm-final .field textarea{min-height:88px}
.hm-opt{font-weight:500;color:var(--ink-muted)}
.hm-final .form-success{color:var(--ink)}
@media(max-width:900px){.ed .cta-big.hm-final{grid-template-columns:minmax(0,1fr);gap:32px}}
@media(max-width:560px){.ed .hm-final .form-grid{padding:16px}.ed .cta-big.hm-final{padding-inline:16px}}
/* Кнопка формы стоит на белой карточке внутри изумрудной полосы: общее
   правило полос красит .btn-dark в белый — здесь возвращаем тёмную. */
.ed .cta-big.hm-final .hm-form .btn-dark{background:var(--ink);color:#FFFFFF;box-shadow:none}
.ed .cta-big.hm-final .hm-form .btn-dark:hover{background:#000000}
/* Глобальное a[href="/ai-transformaciya/"]{white-space:nowrap} не должно
   ломать карточку-ссылку: текст внутри переносится как обычно. */
a.hm-svc{white-space:normal}
/* Высота карточки сцены не зависит от догрузки шрифта: иначе карточка,
   выровненная по центру колонки, сдвигалась при подмене шрифта (CLS). */
@media(min-width:901px){.hm-rt-card{min-height:360px}}

/* Commercial scope: one price, a readable scope and explicit extra costs. */
/* Shared navigation: product/industry taxonomy, ordinary links and explicit toggles. */
.site-header[data-navigation="mega"]{z-index:140;position:sticky;top:0;background:var(--bg)}
.site-header[data-navigation="mega"] nav{min-height:72px;padding:8px 0;flex-wrap:nowrap;gap:24px}
.site-header[data-navigation="mega"] .nav-links{display:flex;align-items:center;gap:20px;white-space:nowrap}
.site-header[data-navigation="mega"] .nav-right{gap:12px;flex-shrink:0}
.site-header[data-navigation="mega"] .nav-right>.btn{padding:12px 20px;white-space:nowrap}
.site-header[data-navigation="mega"] .nav-logo{flex-shrink:0;padding:8px 12px}
.site-header[data-navigation="mega"] .mega-item{position:static;margin:0;padding:0}
.mega-item>.dropdown-toggle{border:0;background:none;padding:12px 0;color:var(--ink-soft);font:inherit;opacity:1;white-space:nowrap;cursor:pointer}
.mega-item>.dropdown-toggle:hover,.mega-item>.dropdown-toggle.is-active,.mega-item.is-open>.dropdown-toggle{color:var(--ink);opacity:1}
.mega-item.is-open>.dropdown-toggle .caret{transform:rotate(180deg)}
.mega-item:not(.is-open) .caret{transform:none}
.mega-panel{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:24px 32px;box-shadow:0 24px 48px rgba(0,0,0,.12);max-height:calc(100dvh - 96px);overflow-y:auto;white-space:normal}
.mega-panel[hidden],.m-sub[hidden]{display:none!important}
.mega-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.mega-heading>strong{font-size:var(--fs-6);font-weight:800}
.mega-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-2);border-radius:var(--r-2xs);background:var(--bg);color:var(--ink);font-size:var(--fs-7);cursor:pointer}
.mega-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.mega-group{min-width:0}
.ed .mega-group h3,.mega-group h3{margin:0 0 12px;font-size:var(--fs-4);font-weight:800;line-height:1.4;color:var(--ink)}
.mega-group>a{display:flex;flex-direction:column;gap:4px;padding:8px 12px;margin:0 -12px 4px;border-radius:var(--r-2xs);text-decoration:none;line-height:1.4;white-space:normal}
.mega-group>a:hover,.mega-group>a.is-active{background:var(--card2)}
.mega-group .dd-name{font-size:var(--fs-4);font-weight:700;color:var(--ink)}
.mega-group .dd-desc{font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
.mega-group .mega-module{margin-left:0;padding-left:12px}
.mega-group .mega-module .dd-name{font-size:var(--fs-3)}
.nav-more{display:none}
.mega-panel--more .mega-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
.dropdown-toggle:focus-visible,.mega-close:focus-visible,.mega-group>a:focus-visible,.m-acc:focus-visible{outline:2px solid var(--em-text);outline-offset:4px;border-radius:var(--r-3xs)}
.mobile-menu:has(.mobile-nav-body){padding:80px 24px 16px;gap:16px;overflow:hidden}
.mm-open .site-header[data-navigation="mega"]{position:fixed;inset:0 0 auto;margin:0;padding:0 24px}
.mobile-nav-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 4px 16px}
.mobile-nav-body>a{display:block;padding:16px 0;font-size:var(--fs-6);font-weight:800;text-decoration:none;color:var(--ink)}
.mobile-nav-body .m-acc{padding:16px 0;font-size:var(--fs-6);font-weight:800;color:var(--ink)}
.mobile-nav-body .m-sub.open{display:block;padding:8px 0 20px}
.mobile-nav-body .mega-group+.mega-group{margin-top:24px}
.mobile-nav-body .mega-group>a{padding:12px 0;margin:0 0 4px}
.mobile-nav-footer{flex:none;border-top:1px solid var(--line-2);padding-top:16px;background:var(--bg)}
.mobile-nav-footer .btn{width:100%;justify-content:center;margin:0;white-space:nowrap}
.mobile-nav-footer .mobile-menu-phone{display:block;margin:12px 0 0;text-align:center;color:var(--ink-soft);font-size:var(--fs-4);opacity:1}
@media(min-width:961px){.site-header[data-navigation="mega"] .burger{display:none}}
@media(min-width:961px) and (max-width:1180px){.site-header[data-navigation="mega"] .nav-links{gap:16px}.site-header[data-navigation="mega"] .nav-secondary{display:none}.site-header[data-navigation="mega"] .nav-more{display:block}}
@media(max-width:960px){.site-header[data-navigation="mega"] .nav-links{display:none}.site-header[data-navigation="mega"] .burger{display:flex}.mega-groups{grid-template-columns:1fr;gap:24px}}
@media(max-width:620px){.site-header[data-navigation="mega"] nav{min-height:68px}.site-header[data-navigation="mega"] .nav-right>.btn{display:none}}

/* Added evidence and scenarios use readable HTML next to real screens. */
.ed .enrich-section{content-visibility:visible;contain-intrinsic-size:none}
.ed .enrich-section>h2,.ed .enrich-section .enrich-intro h2{margin:0 0 20px;font-size:var(--fs-d1);line-height:1.25;color:var(--ink);letter-spacing:-.03em}
.ed .enrich-section h3{font-size:var(--fs-6);line-height:1.4;color:var(--ink);margin:0 0 12px}
.ed .enrich-section p,.enrich-section li{font-size:var(--fs-4);line-height:1.65;color:var(--ink-soft)}
.enrich-intro{max-width:76ch;margin:0 0 24px}
.enrich-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.enrich-grid>div,.enrich-grid>article{min-width:0}
.enrich-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;list-style:none;padding:24px;margin:24px 0;border:1px solid var(--line-2);border-radius:var(--r-sm);counter-reset:enrich-step}
.enrich-flow>li{position:relative;min-width:0;counter-increment:enrich-step;padding-top:36px}
.enrich-flow>li::before{content:counter(enrich-step,decimal-leading-zero);position:absolute;top:0;left:0;color:var(--em-text);font-weight:800;font-size:var(--fs-4)}
.enrich-flow strong,.enrich-flow span{display:block}
.enrich-flow strong{color:var(--ink);margin-bottom:8px}
.enrich-figure{margin:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.enrich-figure img{display:block;width:100%;height:auto;object-fit:contain}
.enrich-figure figcaption{padding:16px 20px;font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft);border-top:1px solid var(--line)}
.enrich-example{padding:24px;background:var(--card2);border-radius:var(--r-sm);margin:20px 0}
.enrich-example>p:first-child{margin-top:0}.enrich-example>p:last-child{margin-bottom:0}
.ed .enrich-section .enrich-caption,.ed .enrich-section .enrich-note{font-size:var(--fs-4);color:var(--ink-soft);line-height:1.6;margin:16px 0;max-width:90ch}
.enrich-table{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r-sm);margin:24px 0}
.enrich-table:focus-visible{outline:2px solid var(--em-text);outline-offset:4px}
.ed .enrich-scroll-hint{display:none;font-size:var(--fs-3);color:var(--ink-soft);margin:16px 0 8px}
.enrich-role-grid{grid-template-columns:1fr}
@media(max-width:767px){.ed .enrich-scroll-hint{display:block}.enrich-scroll-hint+.enrich-table{margin-top:8px}}
.enrich-table table{width:100%;border-collapse:collapse;font-size:var(--fs-4);line-height:1.55;color:var(--ink-soft)}
.enrich-table caption{text-align:left;padding:16px 20px;font-weight:700;color:var(--ink);background:var(--card2)}
.enrich-table th,.enrich-table td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.enrich-table th{color:var(--ink);font-weight:700}.enrich-table thead{background:var(--card2)}.enrich-table tr:last-child td,.enrich-table tr:last-child th{border-bottom:0}
.enrich-steps{padding-left:24px;margin:20px 0}.enrich-steps>li{margin:12px 0}.enrich-steps strong{color:var(--ink)}
.enrich-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0}.enrich-links a,.enrich-section a:not(.btn){color:var(--em-text);text-decoration:underline;text-underline-offset:4px}
.enrich-section details{padding:16px 0;border-bottom:1px solid var(--line)}
.enrich-section summary{font-size:var(--fs-5);font-weight:700;color:var(--ink);line-height:1.5;cursor:pointer}
.enrich-section summary:focus-visible{outline:2px solid var(--em-text);outline-offset:4px}
.enrich-section dl{margin:20px 0}.enrich-section dt{font-weight:700;color:var(--ink);font-size:var(--fs-4)}.enrich-section dd{margin:4px 0 16px;font-size:var(--fs-4);color:var(--ink-soft);line-height:1.6}
.enrich-section button,.enrich-section input,.enrich-section select{font:inherit}
.home-industry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
.home-industry{display:grid;grid-template-columns:56px minmax(0,1fr) 20px;align-items:start;gap:20px;padding:24px;border:1px solid var(--line-2);border-radius:var(--r-sm);text-decoration:none!important;background:var(--card);transition:border-color var(--dur-1) var(--ease-out)}
.home-industry:hover{border-color:var(--em-text)}
.home-industry>img{width:56px;height:56px;object-fit:contain}
.home-industry strong{display:block;color:var(--ink);font-size:var(--fs-6);line-height:1.4}
.home-industry-task{display:block;margin:8px 0 12px;font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft)}
.home-industry-tools{display:block;font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
.home-industry-go{color:var(--em-text);font-size:var(--fs-6)}
.home-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.home-choice-grid>article{padding:20px 0;border-top:1px solid var(--line-2)}
.home-choice-grid p{margin:12px 0 16px}
.home-choice-grid a{font-size:var(--fs-4);font-weight:700}
.ed .home-choice .home-system-h{margin:32px 0 16px}
.usage-calculator{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.usage-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border:0;padding:0;margin:0;min-width:0}
.usage-inputs legend{padding:0 0 20px;font-size:var(--fs-5);font-weight:700;color:var(--ink)}
.usage-inputs label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:var(--fs-4);font-weight:700;color:var(--ink)}
.usage-inputs input{width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--line-2);border-radius:var(--r-2xs);background:var(--card);color:var(--ink);font-size:var(--fs-5);font-variant-numeric:tabular-nums}
.usage-inputs input:focus-visible{outline:2px solid var(--em-text);outline-offset:2px}
.usage-inputs input[aria-invalid="true"]{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:2px}
.usage-inputs small{font-size:var(--fs-3);font-weight:500;color:var(--ink-soft);line-height:1.5}
.usage-result{padding:24px;border-radius:var(--r-sm);background:var(--card2)}
.usage-result>span{display:block;font-size:var(--fs-4);color:var(--ink-soft)}
.usage-result output{display:block;margin:12px 0 20px;font-size:var(--fs-d2);font-weight:800;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.ed .hm-svc__what,.ed .hm-pr__what,.ed .hm-cs__t{font-size:var(--fs-4);line-height:1.6}
@media(max-width:960px){.home-choice-grid{grid-template-columns:1fr;gap:16px}.usage-calculator{grid-template-columns:1fr;gap:32px}}
@media(max-width:767px){.home-industry-grid{grid-template-columns:1fr;gap:12px}.home-industry{grid-template-columns:40px minmax(0,1fr) 16px;gap:16px;padding:20px}.home-industry>img{width:40px;height:40px}.usage-inputs{grid-template-columns:1fr;gap:20px}}
@media(max-width:767px){.enrich-grid{grid-template-columns:minmax(0,1fr);gap:24px}.enrich-flow{grid-template-columns:1fr;padding:20px;gap:20px}.enrich-flow>li{padding:0 0 0 36px}.enrich-flow>li::before{top:0}.enrich-table th,.enrich-table td{padding:12px 16px;min-width:140px}.enrich-example{padding:20px}}
.ed .commercial-scope>h2{margin:0 0 24px;font-size:var(--fs-d1);line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
/* Conversion pass: stable choice, visible first-step value and short forms. */
.ed .hero-yn.hm-hero{align-items:start;padding-block:40px 48px}
.ed .hm-hero__h1{font-size:var(--fs-d2);line-height:1.12}
.ed .hm-hero__sub{font-size:var(--fs-lead-lg);line-height:1.5;max-width:48ch;margin-top:20px}
.hm-hero__cta{margin-top:24px}
.hm-first-result{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:20px 0 0}
.hm-first-result li{font-size:var(--fs-4);line-height:1.5;color:var(--ink);display:flex;gap:8px;align-items:baseline}
.hm-first-result li::before{content:"✓";color:var(--em-text);font-weight:700}
.ed .hm-first-note{margin:12px 0 0;font-size:var(--fs-3);line-height:1.6;color:var(--ink-soft)}
.ed .hm-task-prompt{margin:0 0 12px;font-size:var(--fs-4);font-weight:700;color:var(--ink)}
.hm-rt-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;overflow:visible}
.hm-rt-tab{justify-content:center;min-height:44px;font-size:var(--fs-4);padding:8px 12px;white-space:normal;text-align:center;border-radius:var(--r-xs)}
.hm-cs__kind{display:block;font-size:var(--fs-3);font-weight:700;color:var(--em-text);margin:0 0 8px}
.ed .quiz-steplabel{text-transform:none;letter-spacing:0;font-size:var(--fs-3);line-height:1.5;margin:12px 0 0}
.quiz-card{max-width:520px}
.ed .quiz-card h2{font-size:var(--fs-d1);line-height:1.2;padding-right:24px}
.ed .quiz-context{padding:12px 16px;margin:0 0 20px;border:1px solid var(--line-2);border-radius:var(--r-xs);font-size:var(--fs-4);line-height:1.5;color:var(--ink)}
.quiz-extra{margin:12px 0 20px;font-size:var(--fs-3);color:var(--ink-soft)}
.quiz-extra summary{cursor:pointer;padding:8px 0;font-weight:600}
.quiz-extra .field{margin-top:12px}
.quiz-extra summary:focus-visible{outline:2px solid var(--em-text);outline-offset:4px}
.quiz-form .contact-hint{margin:-4px 0 16px;font-size:var(--fs-3);line-height:1.5;color:var(--ink-soft)}
.quiz-form [data-quiz-back]{padding:12px 0;margin-top:4px}
@media(max-width:900px){.ed .hero-yn.hm-hero{grid-template-areas:"tag" "h1" "sub" "cta" "rt";padding-block:24px 32px}.ed .hm-hero__h1{font-size:var(--fs-d4)}.ed .hm-hero__sub{font-size:var(--fs-lead);margin-top:16px}.hm-hero__cta{margin-top:20px}.hm-first-result{gap:8px 16px;margin-top:16px}.hm-rt-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;overflow:visible}.hm-rt-tab{font-size:var(--fs-3);min-height:44px;white-space:normal;flex:none}.hm-rt-cap{display:block}.hm-rt-how{display:block}.quiz-card{max-height:calc(100dvh - 32px);padding:24px}.pilot-dialog{padding:16px}.quiz-card h2{font-size:var(--fs-7)}}
/* Service offer first; existing detailed definitions stay in native disclosure. */
body.ed .service-hero.service-hero h1{font-size:var(--fs-d2);line-height:1.12;text-transform:none;letter-spacing:-.03em;max-width:24ch;margin-bottom:20px}
body.ed .service-hero.service-hero :is(.gs-lead,.geo-lead,.pf-lead,.rs-lead,.mob-lead,.ph-sub,.ob-lead){font-size:var(--fs-lead);line-height:1.55;max-width:60ch;display:block;overflow:visible;-webkit-line-clamp:unset}
body.ed .service-hero.service-hero :is(.gs-hero__cta,.geo-hero__cta,.pf-hero__cta,.rs-hero__cta,.mob-hero__cta,.ob-hero__cta,.ph-actions,.yn-cta){margin-top:24px}
body.ed .service-hero.service-hero :is(.btn,.gs-btn){min-height:48px}
.ed .service-definition{padding-block:16px;margin-block:0}
.service-definition details{border-bottom:1px solid var(--line-2);padding-bottom:16px}
.service-definition summary{cursor:pointer;font-size:var(--fs-4);font-weight:700;color:var(--em-text);padding:12px 0}
.service-definition summary:focus-visible{outline:2px solid var(--em-text);outline-offset:4px}
.ed .service-definition p{font-size:var(--fs-4);line-height:1.7;max-width:80ch;margin-top:16px;color:var(--ink-soft)}
.app-format-definition{display:block;font-weight:400;font-size:var(--fs-3);line-height:1.5;margin-top:8px;color:var(--ink-soft)}
.anchor-alias{display:block;scroll-margin-top:144px}
.vz-role-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-top:24px}
.vz-role-groups details{border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--card);min-width:0;scroll-margin-top:144px}
.vz-role-groups summary{display:flex;gap:16px;align-items:baseline;cursor:pointer;padding:24px;list-style:none}
.vz-role-groups summary::-webkit-details-marker{display:none}
.vz-role-groups summary::after{content:"+";font-size:var(--fs-6);font-weight:700;color:var(--em-text);margin-left:auto}
.vz-role-groups details[open] summary::after{content:"−"}
.vz-role-groups summary:focus-visible{outline:2px solid var(--em-text);outline-offset:4px;border-radius:var(--r-xs)}
.vz-role-number{color:var(--em-text);font-weight:700;font-size:var(--fs-3)}
.vz-role-groups summary strong{display:block;font-size:var(--fs-6);line-height:1.35;color:var(--ink)}
.vz-role-groups summary small{display:block;font-size:var(--fs-3);line-height:1.6;color:var(--ink-soft);margin-top:8px}
.vz-role-body{padding:0 24px 24px}
.ed .vz-role-start{font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft);margin:0 0 24px}
.vz-role-detail{border-top:1px solid var(--line-2);padding-top:16px;margin-top:16px}
.ed .vz-role-detail h3{font-size:var(--fs-5);line-height:1.4;margin:0 0 12px}
.vz-role-detail h3 span{scroll-margin-top:144px}
.ed .vz-role-detail p{font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft);margin:8px 0 0}
@media(max-width:900px){.vz-role-groups{grid-template-columns:minmax(0,1fr)}.vz-role-groups summary{padding:20px;gap:12px}.vz-role-body{padding:0 20px 20px}}
.proof-walkthrough{margin-top:40px}
.ed .proof-walkthrough>h3{font-size:var(--fs-d1);margin-bottom:24px}
.proof-rows{list-style:none;padding:0;margin:0;display:grid;gap:24px}
.proof-rows>li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;border-top:1px solid var(--line-2);padding-top:24px;min-width:0}
.proof-rows figure{margin:0;min-width:0}
.proof-crop{position:relative;overflow:hidden;aspect-ratio:var(--crop-ratio);border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--card)}
.proof-crop img{position:absolute;max-width:none;width:var(--crop-width);height:auto;left:var(--crop-left);top:var(--crop-top);cursor:zoom-in}
.proof-crop:focus-within{outline:2px solid var(--em-text);outline-offset:4px}
.proof-rows figcaption{font-size:var(--fs-3);color:var(--ink-muted);line-height:1.5;margin-top:8px}
.proof-step{font-size:var(--fs-3);font-weight:700;color:var(--em-text)}
.ed .proof-rows h3{font-size:var(--fs-6);line-height:1.3;margin:8px 0 12px}
.ed .proof-rows p,.ed .proof-next p{font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft);margin:0}
.proof-next{display:flex;gap:24px;align-items:center;justify-content:space-between;border-top:1px solid var(--line-2);padding-top:24px;margin-top:32px}
.proof-next p{max-width:60ch}
.proof-next .btn{flex-shrink:0}
@media(max-width:900px){body.ed .service-hero.service-hero h1{font-size:var(--fs-d4);max-width:24ch}body.ed .service-hero.service-hero :is(.gs-lead,.geo-lead,.pf-lead,.rs-lead,.mob-lead,.ph-sub,.ob-lead){font-size:var(--fs-5)}.proof-rows>li{grid-template-columns:minmax(0,1fr);gap:16px}.proof-rows>li>div{grid-row:1}.proof-next{flex-direction:column;align-items:stretch}.proof-next .btn{align-self:flex-start;white-space:normal}}
@media(max-width:600px){body.ed .page-hero.service-hero{display:flex;flex-direction:column;margin-top:16px;padding-top:24px}body.ed .page-hero.service-hero h1{font-size:var(--fs-d3)}body.ed .page-hero.service-hero .btn{font-size:var(--fs-4)}body.ed .service-hero .tr-hero__t{display:flex;flex-direction:column}body.ed .service-hero .ph-chips{order:3;margin-top:24px;margin-bottom:0}body.ed .service-hero :is(.ph-actions,.yn-cta){order:2}body.ed .service-hero .ph-sec-note{order:4}body.ed .service-hero .ph-metrics{order:5}}
.commercial-panel{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr);gap:32px 48px;padding:32px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card)}
.commercial-price,.commercial-content{min-width:0}
.ed .commercial-scope .commercial-amount{margin:0;font-size:var(--fs-d2);font-weight:800;line-height:1.15;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.commercial-from{font-size:var(--fs-6);font-weight:600;letter-spacing:0;color:var(--ink-soft)}
.ed .commercial-scope .commercial-unit{margin:8px 0 0;font-size:var(--fs-4);line-height:1.5;color:var(--ink-soft)}
.ed .commercial-scope .commercial-timing{margin:24px 0;font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft);max-width:36ch}
.commercial-price .btn{width:fit-content;max-width:100%;white-space:nowrap;box-shadow:none}
.ed .commercial-scope h3{margin:0 0 12px;font-size:var(--fs-5);font-weight:800;line-height:1.4;letter-spacing:0;color:var(--ink)}
.commercial-included{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.commercial-included li{position:relative;margin:0;padding-left:24px;font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft)}
.commercial-included li::before{content:'✓';position:absolute;left:0;color:var(--em-text);font-weight:800}
.commercial-extra{margin-top:24px}
.ed .commercial-scope .commercial-extra p,.ed .commercial-scope .commercial-note{margin:0;font-size:var(--fs-4);line-height:1.6;color:var(--ink-soft)}
.ed .commercial-scope .commercial-note{margin-top:16px}
.commercial-conditions{grid-column:1/-1;border-top:1px solid var(--line-2);padding-top:8px}
.commercial-details>summary{padding:16px 0;font-size:var(--fs-4);line-height:1.5;font-weight:700;color:var(--ink);cursor:pointer}
.commercial-details>summary:hover{color:var(--em-text)}
.commercial-details>summary:focus-visible{outline:2px solid var(--em-text);outline-offset:4px;border-radius:var(--r-3xs)}
.ed .commercial-scope .commercial-details>p{margin:0 0 16px;font-size:var(--fs-4);line-height:1.7;color:var(--ink-soft);max-width:90ch}
.commercial-details a{color:var(--em-text);text-decoration:underline;text-underline-offset:4px}
@media(max-width:767px){
 .commercial-panel{grid-template-columns:minmax(0,1fr);gap:32px;padding:24px}
 .ed .commercial-scope>h2{margin-bottom:20px}
 .ed .commercial-scope .commercial-amount{font-size:var(--fs-d3)}
 .ed .commercial-scope .commercial-timing{max-width:none;margin:20px 0}
 .commercial-price .btn{width:100%;justify-content:center}
 .commercial-conditions{grid-column:auto}
}

/* ── /about/ (29.09.2026): герой с карточкой цифр, пара «что делаем / цель», сетки по четыре ── */
.page-hero--split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:center}
.page-hero--split .ph-main{min-width:0}
.ph-metrics--card{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph-metrics--card>div{background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);padding:24px}
.ph-metrics--card .ph-metric-lbl{max-width:none}
@media(max-width:980px){.page-hero--split{grid-template-columns:1fr;gap:32px}}
@media(max-width:560px){.page-hero--split{padding:36px 24px}.ph-metrics--card{grid-template-columns:1fr}}
.fr-visual--pair{background:#fff;border:1px solid var(--line);box-shadow:none;padding:0;gap:0;justify-content:stretch}
.fr-pair{padding:32px}
.fr-pair+.fr-pair{border-top:1px solid var(--line)}
.fr-pair-k{display:block;margin-bottom:8px;font-weight:700;font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;color:var(--em-text)}
.fr-pair p{font-weight:700;font-size:var(--fs-6);line-height:1.35;letter-spacing:-.02em}
.adv-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.adv-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.adv-grid--4{grid-template-columns:1fr}}
.industry-chips--pair{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.industry-chips--pair{grid-template-columns:1fr}}
.team-photo-grid--4{max-width:none}
.ph-metrics--card .ph-metric-num{font-size:var(--fs-d1);white-space:nowrap}
.feature-row--plain{padding:0;background:none;border-radius:0}
/* Header chevrons: independent of the shared icon sprite; state follows the menu. */
.site-header .nav-item > .dropdown-toggle .caret {
  display: inline-grid;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-left: 9px;
  place-items: center;
  transform: none;
  transition: transform 180ms ease;
}
.site-header .nav-item > .dropdown-toggle .caret::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-1.5px) rotate(45deg);
}
.site-header .nav-item > .dropdown-toggle .caret > svg { display: none; }
.site-header .nav-item > .dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-item > .dropdown-toggle .caret { transition: none; }
}