/* =========================================================
   Страница метода (спица) — Архитектура устойчивой организации
   Переиспользует токены и компоненты сайта (site.css/sections.css).
   Эстетика «радарной комнаты»: тёмный фон, изумруд точечно, глубина светом.
   ========================================================= */

/* ---- Hero (раскладка B: текст слева, радар-консоль справа) ---- */
.method-hero {
  position: relative;
  padding: clamp(40px, 9vh, 110px) 0 clamp(48px, 8vh, 96px);
  overflow: hidden;
}
.method-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.method-hero__text { position: relative; z-index: 2; }

/* бредкрамб «← Все методы» (контекстный возврат к витрине на лендинге) */
.m-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; letter-spacing: 0.02em;
  color: var(--em-text); text-decoration: none;
  margin: 0 0 12px; padding: 6px 2px 6px 0; /* чуть крупнее область нажатия */
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.m-back span { transition: transform .3s var(--ease); }
.m-back:hover { color: var(--em-bright); }
.m-back:hover span { transform: translateX(-3px); }

.method-hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--em-text);
  margin: 0;
}
.method-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 20px 0 0;
}
.method-hero__subtitle {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
.method-hero__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 52ch;
  margin: 24px 0 0;
}
.method-hero__lead b { color: var(--ink-soft); font-weight: 500; }

.method-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
.method-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: 100px;
  border: 1px solid var(--em-line);
  background: rgba(52, 201, 125, 0.06);
  box-shadow: inset 0 0 24px rgba(52, 201, 125, 0.05);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.method-cta:hover { transform: translateY(-2px); border-color: var(--em); background: rgba(52, 201, 125, 0.1); }
.method-cta span { color: var(--em-bright); filter: drop-shadow(0 0 6px rgba(70, 224, 141, 0.8)); }

.method-hero__path {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  margin: 40px 0 0;
}

/* ---- Поле прорастания (hero-визуал) ---- */
.method-hero__console {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
}
.method-hero__console::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 126, 80, 0.14) 0%, rgba(27, 126, 80, 0.04) 45%, transparent 68%);
  pointer-events: none;
}
.growth { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }

/* тонкий «рост» прорастает от старта (A) к финалу (B) непрерывно */
.gw-spine {
  fill: none; stroke: #61B488; stroke-width: 1.2; stroke-linecap: round;
  opacity: 0.36; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: gw-grow 2.6s ease forwards;
}
/* ветки-тупики «отрастают» по волне (задержка = когда фронт роста дошёл) */
.gw-branch {
  fill: none; stroke: #61B488; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: gw-grow 0.65s ease forwards;
}
/* найденный путь — перерисовывается жирным поверх тонкой трассы, после роста */
.gw-main {
  fill: none; stroke: #34C97D; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(52, 201, 125, 0.6));
  animation: gw-grow 1.8s ease 2.8s forwards;
}
.gw-origin { fill: none; stroke: #61B488; stroke-width: 1.4; opacity: 0; animation: gw-fade 0.5s ease 0.1s forwards; }
.gw-ping { opacity: 0; animation: gw-fade 0.6s ease 4.5s forwards; }
.gw-ping-ring {
  fill: none; stroke: #46E08D; stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  animation: gw-ping 2.6s ease-out 4.6s infinite;
}
.gw-ping-core { fill: #46E08D; filter: drop-shadow(0 0 12px rgba(70, 224, 141, 0.95)); animation: gw-core 2.4s ease-in-out 4.6s infinite; }

@keyframes gw-grow { to { stroke-dashoffset: 0; } }
@keyframes gw-fade { to { opacity: 1; } }
@keyframes gw-core { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes gw-ping { 0% { transform: scale(0.5); opacity: 0.6; } 70% { opacity: 0; } 100% { transform: scale(2.7); opacity: 0; } }

/* ---- Адаптив ---- */
@media (max-width: 880px) {
  .method-hero__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); }
  .method-hero__console { order: -1; max-width: 340px; }
  .method-hero__lead { max-width: none; }
  .method-hero__path { margin-top: 28px; }
}

/* ---- prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .gw-spine, .gw-branch, .gw-main { stroke-dashoffset: 0; animation: none; }
  .gw-origin, .gw-ping { opacity: 1; animation: none; }
  .gw-ping-ring { opacity: 0; animation: none; }
  .gw-ping-core { animation: none; }
  .method-cta { transition: none; }
}

/* =========================================================
   Контент-секции страницы метода
   ========================================================= */
.m-section { padding: clamp(48px, 9vh, 104px) 0; }
.m-section + .m-section .m-inner { border-top: 1px solid var(--panel-edge); padding-top: clamp(48px, 9vh, 104px); }
.m-inner { max-width: 980px; }

.m-eyebrow {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--em-text); margin: 0 0 16px;
}
.m-h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.1; color: var(--ink); margin: 0; max-width: 20ch;
}
.m-h2 em { color: var(--em); font-style: normal; }
/* Заголовки балансируются по строкам — нет «сирот» (одиночного слова на
   последней строке из-за узкого max-width). Инвайт исключён ниже (нужна одна строка). */
.m-h2, .method-hero__title, .um-step h3, .m-case__title { text-wrap: balance; }
/* Заголовок без узкого лимита ширины — для тех, что должны идти одной строкой
   (или ломаться по заданному <br>, а не по 20ch). */
.m-h2--free { max-width: none; }
.m-intro {
  font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65;
  color: var(--ink-soft); max-width: 66ch; margin: 22px 0 0;
}
.m-note {
  font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--muted);
  max-width: 66ch; margin: 20px 0 0;
}
.m-note b { color: var(--ink-soft); font-weight: 500; }

/* боль — симптомы */
.m-symptoms { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; max-width: 820px; }
.m-symptoms li {
  position: relative; padding-left: 28px; font-family: var(--font-body);
  font-size: 16px; line-height: 1.5; color: var(--ink-soft);
}
.m-symptoms li::before {
  content: ""; position: absolute; left: 4px; top: 0.5em; width: 8px; height: 8px;
  border: 1px solid var(--em); border-radius: 50%;
}

/* модель — ось ценности ⇄ структуры */
.m-model { margin: 36px 0 0; max-width: 560px; }
.m-tier {
  position: relative; background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 14px; padding: 18px 22px; text-align: center;
}
.m-tier + .m-tier { margin-top: 14px; }
.m-tier + .m-tier::before {
  content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 14px;
  background: var(--em-line);
}
.m-tier--mid { border-color: var(--em-line); box-shadow: inset 0 0 30px rgba(70,224,141,0.07); }
.m-tier__name {
  display: block; font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--ink);
}
.m-tier--mid .m-tier__name { color: var(--em); }
.m-tier__items { display: block; font-family: var(--font-body); font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.m-model__loop {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--muted);
  margin: 22px 0 0; max-width: 60ch;
}
.m-model__loop b { color: var(--em-text); font-weight: 500; }

/* маршрут — диагностика / проектирование */
.m-route { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 34px); margin: 38px 0 0; }
.m-route__col { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 18px; padding: clamp(22px, 2.4vw, 32px); }
.m-route__head { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--em-text); margin: 0 0 6px; }
.m-route__sub { font-family: var(--font-body); font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.m-steps { counter-reset: mstep; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.m-steps li { position: relative; padding-left: 44px; min-height: 30px; }
.m-steps li::before {
  counter-increment: mstep; content: counter(mstep); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--em-line); color: var(--em); font-family: var(--font-display);
  font-size: 14px; font-weight: 400;
}
.m-steps b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--ink); }
.m-steps span { display: block; font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 3px; }

/* что получите */
.m-get { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.m-get li {
  position: relative; padding: 18px 20px 18px 46px; background: var(--panel);
  border: 1px solid var(--panel-edge); border-radius: 14px;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
.m-get li::before {
  content: ""; position: absolute; left: 20px; top: 22px; width: 12px; height: 7px;
  border-left: 1.5px solid var(--em); border-bottom: 1.5px solid var(--em); transform: rotate(-45deg);
}
.m-result {
  margin: 34px 0 0; padding: clamp(24px, 3vw, 36px); background: var(--panel-2);
  border: 1px solid var(--em-line); border-radius: 18px;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.3; color: var(--ink); max-width: 30ch;
}
.m-result b { color: var(--em); font-weight: 300; }

/* чипы (для кого / форматы) */
.m-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.m-chip {
  font-family: var(--font-body); font-size: 14px; color: var(--ink-soft);
  padding: 9px 16px; border: 1px solid var(--panel-edge); border-radius: 100px; background: rgba(255,255,255,0.015);
}

/* опора */
.m-support { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; max-width: 820px; }
.m-support li { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--muted); padding-left: 18px; position: relative; }
.m-support li::before { content: "—"; position: absolute; left: 0; color: var(--em-text); }
.m-support b { color: var(--ink-soft); font-weight: 500; }

/* кейсы */
.m-cases { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); margin: 34px 0 0; }
.m-case { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 18px; padding: clamp(22px, 2.4vw, 34px); }
/* изумрудная «спица» слева — тихий намёк, что кейс вырос из той же системы-модели */
.m-case::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgba(70,224,141,0.5), rgba(70,224,141,0) 82%); }
.m-case__head { display: flex; align-items: center; gap: 12px; }
.m-case__tag { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--em-text); }
.m-case__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 2vw, 27px); line-height: 1.15; color: var(--ink); margin: 12px 0 0; }
.m-case__body { display: grid; grid-template-columns: 140px 1fr; column-gap: clamp(20px, 3vw, 36px); row-gap: 16px; margin: 22px 0 0; }
.m-case__body dt { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--em-text); align-self: start; padding-top: 2px; }
.m-case__body dd { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
/* лид-строка кейса — выжимка поля, чтобы кейс сканировался глазами без вчитывания */
.m-case__lead { display: block; margin-bottom: 8px; font-weight: 500; color: var(--ink); }

/* финальный CTA */
.m-final { text-align: center; }
.m-final .m-h2 { margin: 0 auto; max-width: 22ch; }
.m-final .m-intro { margin: 18px auto 0; }
.m-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  padding: 15px 30px; border-radius: 100px; font-family: var(--font-body);
  font-weight: 600; font-size: 15px; text-decoration: none;
  background: linear-gradient(180deg, var(--em), var(--em-deep)); color: #04130C;
  box-shadow: 0 14px 36px -14px rgba(70,224,141,0.55);
  transition: transform 0.3s var(--ease);
}
.m-btn:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
  .m-route, .m-cases { grid-template-columns: 1fr; }
  .m-case__body { grid-template-columns: 1fr; row-gap: 6px; }
  .m-case__body dt { padding-top: 14px; }
  .m-case__body dd { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .m-btn { transition: none; } }

/* =========================================================
   «Устройство метода» — прогрессивная сборка по скроллу
   ========================================================= */
/* site.css ставит overflow-x:hidden на html и body → overflow-y становится
   auto → два вложенных скролл-контейнера ломают position:sticky.
   На странице метода меняем на clip: горизонталь так же отсекается, но
   скролл-контейнер не создаётся, и закреплённый визуал работает. */
html, body { overflow-x: clip; }
.um { padding: clamp(40px, 7vh, 90px) 0 clamp(20px, 4vh, 48px); }
.um__head { max-width: 720px; }
.um__scroller {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(8px, 3vh, 32px);
}
/* закреплённый визуал — держится всю прокрутку; модель прижата ВЛЕВО (не прыгает) */
.um__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: flex-start; }
.um-figure { width: 100%; max-width: 540px; display: grid; gap: 12px; transition: width 0.5s var(--ease); }
.um-row { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: center; }
.um-block {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px;
  padding: 12px 16px; text-align: center;
  opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.6s var(--ease);
}
/* как только JS включился (data-stage появился) — управляем показом */
.um-figure[data-stage] .um-block { opacity: 0; transform: translateY(10px) scale(0.97); }
.um-figure[data-stage] .um-block.is-on { opacity: 1; transform: none; }
.um-block__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 1.6vw, 20px); color: var(--ink); }
.um-block--center { border-color: var(--em-line); box-shadow: inset 0 0 30px rgba(70, 224, 141, 0.08); }
.um-block--center .um-block__name { color: var(--em); }
/* описание-легенда: позиционируется АБСОЛЮТНО сбоку от блока (колонка 2), поэтому
   НЕ влияет на высоту строки → при включении легенды высота строк не меняется:
   ни reflow («дёрганье»), ни мгновенного снапа («дрыг»). Появление — только через
   opacity (+лёгкий сдвиг), с задержкой: текст проявляется ПОСЛЕ раскрытия ширины,
   когда перенос строк уже финальный (нет «шевеления» шрифта). На ≤520px — поток (см. ниже). */
.um-desc {
  position: absolute; top: 50%; left: 238px; right: 0; /* 238 = колонка блока 210 + gap 28 */
  margin: 0; font-family: var(--font-body); font-size: clamp(14px, 1.15vw, 15.5px); line-height: 1.55; color: var(--ink-soft);
  opacity: 0; transform: translateY(-50%) translateX(-8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.um-desc b { font-weight: 500; color: var(--ink); } /* первый сильный глагол — лёгкий акцент */
/* режим легенды: фигура разворачивается на всю ширину, подписи шагов гаснут */
.um__scroller.is-legend .um-figure { width: min(1040px, calc(100vw - 80px)); max-width: none; flex-shrink: 0; }
.um__scroller.is-legend .um__steps { opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.um__scroller.is-legend .um-desc { opacity: 1; transform: translateY(-50%); }
/* каскад появления стартует ПОСЛЕ раскрытия ширины (≈0.5s) — текст уже не перенабирается */
.um__scroller.is-legend .um-row:nth-child(1) .um-desc { transition-delay: 0.50s; }
.um__scroller.is-legend .um-row:nth-child(2) .um-desc { transition-delay: 0.56s; }
.um__scroller.is-legend .um-row:nth-child(3) .um-desc { transition-delay: 0.62s; }
.um__scroller.is-legend .um-row:nth-child(4) .um-desc { transition-delay: 0.68s; }
.um__scroller.is-legend .um-row:nth-child(5) .um-desc { transition-delay: 0.74s; }
.um__scroller.is-legend .um-row:nth-child(6) .um-desc { transition-delay: 0.80s; }
.um__scroller.is-legend .um-row:nth-child(7) .um-desc { transition-delay: 0.86s; }
/* шаг 5 — невидимый триггер прокрутки (подпись убрана) */
.um-step--legend { min-height: 90vh; }

/* шаги-подписи (скролл) */
.um__steps { display: flex; flex-direction: column; }
.um-step { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.um-step:first-child { min-height: 86vh; }
.um-step__n {
  font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--em-text); margin: 0 0 12px;
}
.um-step h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.12; color: var(--ink); margin: 0; max-width: 18ch; }
.um-step p { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.65; color: var(--muted); max-width: 46ch; margin: 16px 0 0; }
.um-step p b { color: var(--ink-soft); font-weight: 500; }

/* ============================================================
   Мобильная версия «Устройства метода» (2a, от Claude Design) — статичный блок.
   Токены — из :root site.css. Показывается на ≤880px вместо скроллителлинга.
   ============================================================ */
.um-m { display: none; }

/* ---------- шаги с мини-схемами ---------- */
.um-m__steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.um-m__step { border: 1px solid var(--panel-edge); border-radius: 16px; background: rgba(255,255,255,.02); padding: 18px 18px 20px; }
.um-m__n { font-family: var(--font-body); font-weight: 500; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--em-text); margin: 0; }
.um-m__h { font-family: var(--font-display); font-weight: 300; font-size: 21px; line-height: 1.18; color: var(--ink); margin: 9px 0 0; text-wrap: balance; }
.um-m__t { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--muted); margin: 11px 0 0; }
.um-m__t b { color: var(--ink-soft); font-weight: 500; }

/* мини-схема сборки внутри шага */
.um-m__scheme { display: grid; gap: 6px; margin-top: 16px; }
.um-m__cell {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 10px;
  padding: 9px 12px; text-align: center;
  font-family: var(--font-display); font-weight: 400; font-size: 14px; color: var(--muted);
}
/* слой, добавившийся на этом шаге */
.um-m__cell--new { border-color: var(--em-line); color: var(--ink); box-shadow: 0 0 14px rgba(70,224,141,.10); }
/* «Действия» в шаге 3 — связка, чуть заметнее, но без крика */
.um-m__cell--link { border-color: rgba(70,224,141,.35); color: var(--ink); box-shadow: 0 0 18px rgba(70,224,141,.14), inset 0 0 24px rgba(70,224,141,.06); }
/* «разрыв» между полюсами */
.um-m__gap { height: 22px; display: flex; justify-content: center; }
.um-m__gap--s { height: 18px; }
.um-m__gap::before { content: ''; border-left: 1px dashed rgba(126,143,134,.45); }

/* уплотнённая стопка всех 7 слоёв (шаг 4) */
.um-m__scheme--dense { gap: 4px; }
.um-m__scheme--dense .um-m__cell { padding: 6px 12px; border-radius: 9px; font-size: 13px; }
/* ключевые полюса модели: Стратегия и Ценности */
.um-m__cell--key {
  border-color: rgba(70,224,141,.55); color: var(--em-bright);
  box-shadow: 0 0 16px rgba(70,224,141,.20), inset 0 0 20px rgba(70,224,141,.08);
}
/* ось/центр: Действия — мягкий акцент */
.um-m__cell--axis { border-color: var(--em-line); color: var(--ink); box-shadow: 0 0 12px rgba(70,224,141,.10); }

/* ---------- полная модель с описаниями ---------- */
.um-m__result { margin-top: 36px; }
.um-m__reyebrow { font-family: var(--font-body); font-weight: 500; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--em-text); margin: 0; }
.um-m__lead { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 8px 0 0; }

.um-m__model { list-style: none; position: relative; margin: 20px 0 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
/* светящаяся ось слева */
.um-m__model::before {
  content: ''; position: absolute; left: 2px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg, rgba(27,126,80,.15), var(--em) 50%, rgba(27,126,80,.15));
  box-shadow: 0 0 8px rgba(52,201,125,.35);
}
.um-m__lblock {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 11px;
  padding: 6px 16px; text-align: center;
  font-family: var(--font-display); font-weight: 400; font-size: 15.5px; color: var(--ink); display: block;
}
.um-m__lblock--key {
  border-color: rgba(70,224,141,.55); color: var(--em-bright);
  box-shadow: 0 0 22px rgba(70,224,141,.22), inset 0 0 24px rgba(70,224,141,.08);
}
.um-m__lblock--axis { border-color: var(--em-line); box-shadow: 0 0 12px rgba(70,224,141,.10); }
.um-m__ldesc { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--muted); margin: 6px 4px 2px; }
.um-m__ldesc b { color: var(--ink-soft); font-weight: 500; }

@media (max-width: 880px) {
  .um__scroller { display: none; } /* десктопный скроллителлинг скрыт */
  .um-m { display: block; }        /* мобильный статичный блок */
}
@media (prefers-reduced-motion: reduce) {
  .um-block { transition: none; }
}

/* ---- Финальное приглашение к разговору ---- */
.m-invite {
  position: relative;
  max-width: 760px;
  margin-top: 78px; /* место для линии-пути сверху */
  background: var(--panel-2);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 26px 70px -52px rgba(0, 0, 0, 0.85);
}

/* линия-путь сверху — эхо hero, замыкает идею «пути» */
.m-invite__arrival {
  position: absolute;
  left: clamp(26px, 4vw, 54px);
  top: -72px;
  width: 44px;
  height: 74px;
  overflow: visible;
}
.m-arrival__line { fill: none; stroke: var(--em); stroke-width: 1.6; stroke-linecap: round; opacity: 0.7;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(52, 201, 125, 0.4)); }
.m-arrival__branch { fill: none; stroke: var(--em-text); stroke-width: 1; stroke-linecap: round; opacity: 0.4;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-arrival__dot { fill: var(--em-bright); opacity: 0; filter: drop-shadow(0 0 8px rgba(70, 224, 141, 0.9)); }
.m-invite.is-arrived .m-arrival__line { animation: gw-grow 1.1s ease forwards; }
.m-invite.is-arrived .m-arrival__branch { animation: gw-grow 0.6s ease 0.55s forwards; }
.m-invite.is-arrived .m-arrival__dot { animation: gw-fade 0.5s ease 1s forwards; }
@media (prefers-reduced-motion: reduce) {
  .m-invite.is-arrived .m-arrival__line,
  .m-invite.is-arrived .m-arrival__branch { animation: none; stroke-dashoffset: 0; }
  .m-invite.is-arrived .m-arrival__dot { animation: none; opacity: 1; }
}
/* инвайт: заголовок в одну строку на десктопе (панель ≤760px → кегль чуть меньше) */
.m-invite .m-h2 { max-width: none; font-size: clamp(26px, 3.4vw, 36px); text-wrap: wrap; }
.m-invite__action { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 32px; }
.m-invite .m-btn { margin-top: 0; }
.m-invite__sign { color: var(--muted-2); margin-top: 26px; }

/* ---- Таблица слоёв «Из чего состоит система» ---- */
.m-layers { margin-top: 36px; border-top: 1px solid var(--panel-edge); }
.m-layer {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 20px 2px; border-bottom: 1px solid var(--panel-edge);
}
.m-layer__icon {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--em-line); background: rgba(52, 201, 125, 0.04); color: var(--em-text);
}
.m-layer__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m-layer__name { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink); }
.m-layer__desc { display: block; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
@media (max-width: 600px) {
  .m-layer { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
}

/* ---- Врезка-акцент (мысль/вывод) ---- */
.m-callout {
  margin: 34px 0 0; padding: clamp(22px, 3vw, 32px);
  background: var(--panel-2); border: 1px solid var(--em-line); border-radius: 16px;
  box-shadow: inset 0 0 40px rgba(70, 224, 141, 0.04);
  font-family: var(--font-body); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.62; color: var(--ink-soft);
}
.m-callout b { color: var(--em-text); font-weight: 500; }

/* ---- Буллеты внутри колонок «Два этапа» ---- */
.m-route .m-steplist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.m-route .m-steplist li {
  position: relative; padding-left: 22px; font-family: var(--font-body);
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
.m-route .m-steplist li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--em);
}