/* Allezroma Landing — слоистая композиция (инкремент 03).
 * Визуальный язык «слоистая витрина»: секции-слои наслаиваются друг на друга
 * (отрицательные перекрытия, z-стек, лёгкие повороты листа), границы
 * растворяются масками и backdrop-blur; гигантская display-типографика;
 * образы интерфейсов — нарисованные SVG-схемы (не скриншоты).
 * Анимации скролла вешает js/scroll.js: [data-reveal], [data-para], .marquee. */

/* ============ Акценты сервисов (общая карта) ============
 * Единая точка правды для пары --a1/--a2 на любом носителе data-accent:
 * листы главного лендинга (.plate), hero подстраниц (.pg-hero), контентные
 * секции подстраниц (.section: рисунок, шаги, «подробнее») и врезка «суть»
 * (.essence). Пары цветов — tokens.css --svc-*-1/2. Без data-accent
 * компоненты возвращаются к брендовым --meta/--accent (см. :not-правила). */
[data-accent="wt"]      { --a1: var(--svc-wt-1);      --a2: var(--svc-wt-2); }
[data-accent="thera"]   { --a1: var(--svc-thera-1);   --a2: var(--svc-thera-2); }
[data-accent="orga"]    { --a1: var(--svc-orga-1);    --a2: var(--svc-orga-2); }
[data-accent="bots"]    { --a1: var(--svc-bots-1);    --a2: var(--svc-bots-2); }
[data-accent="sso"]     { --a1: var(--svc-sso-1);     --a2: var(--svc-sso-2); }
[data-accent="pay"]     { --a1: var(--svc-pay-1);     --a2: var(--svc-pay-2); }
[data-accent="redactor"] { --a1: var(--svc-redactor-1); --a2: var(--svc-redactor-2); }

/* ============ Гигантская типографика ============ */

.giant {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: var(--tracking-giant);
  margin: 0;
}

.giant-fill { font-size: var(--text-8xl); color: var(--fg); }

.giant-outline {
  font-size: var(--text-8xl);
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--a1, var(--meta)) 55%, transparent);
  text-stroke: 1.5px color-mix(in oklab, var(--a1, var(--meta)) 55%, transparent);
}

.giant-svc {
  font-size: var(--text-7xl);
  color: var(--fg);
}
.giant-svc a { color: inherit; transition: color var(--motion-base) var(--ease-standard); }
.giant-svc a:hover { color: var(--a1); }
.giant-svc a:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); outline: none; }

.giant-svc .glyph-tail {
  color: color-mix(in oklab, var(--a1) 70%, var(--fg));
}

/* Контурная «тень» гигантского имени — второй слой наслоения */
.giant-wrap { position: relative; display: inline-block; max-width: 100%; }
.giant-wrap .ghost {
  position: absolute;
  left: 0.045em; top: 0.055em;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--a1) 38%, transparent);
  pointer-events: none;
  user-select: none;
}

/* ============ Hero главного лендинга ============ */

.hero-layers {
  position: relative;
  padding: clamp(36px, 6vh, 72px) 0 clamp(12px, 2vh, 28px);
}

/* Полноширинный словознак: гигантский, с намеренным кровотением вправо */
.brandstack {
  position: relative;
  width: calc(100% + 2 * clamp(var(--container-gutter-phone), 4vw, var(--container-gutter-desktop)));
  max-width: none;
  margin-left: calc(-1 * clamp(var(--container-gutter-phone), 4vw, var(--container-gutter-desktop)));
  margin-bottom: clamp(18px, 3vh, 34px);
  overflow: visible;
}
.brandstack-word {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 12.6vw, 216px);
  line-height: 0.92;
  letter-spacing: var(--tracking-giant);
  white-space: nowrap;
  width: fit-content;
}
.brandstack-word--fill {
  position: relative;
  z-index: 2;
  background: linear-gradient(104deg, var(--fg) 30%, color-mix(in oklab, var(--meta) 55%, var(--fg)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brandstack-word--outline {
  position: absolute;
  left: 0.02em;
  top: 0.05em;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in oklab, var(--meta) 42%, transparent);
  pointer-events: none;
  user-select: none;
}

.hero-titleline { max-width: 30ch; }
.hero-title-2 {
  margin: clamp(18px, 3vh, 30px) 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
}

.hero-grid-layers {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: end;
}
.hero-constellation { position: relative; min-height: 300px; align-self: center; }
.hero-constellation .constellation-svg { width: 100%; height: auto; overflow: visible; }
.hero-constellation .orbit { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 6; }
.hero-constellation .orbit-core { fill: none; stroke: color-mix(in oklab, var(--accent) 55%, transparent); stroke-width: 1.2; }
.hero-constellation .link-line { stroke: var(--border); stroke-width: 1; opacity: .7; }
.hero-constellation .node-circle { filter: drop-shadow(0 0 10px currentColor); }
.hero-constellation .node-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  fill: var(--muted); text-transform: uppercase;
}
.hero-constellation .core-glow {
  fill: url(#coreGlow);
  transform-box: fill-box; transform-origin: center;
  animation: corePulse 6s ease-in-out infinite;
}
@keyframes corePulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.06); }
}
.hero-constellation .orbit-spin { transform-origin: 260px 210px; animation: orbitSpin 60s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* ============ Бегущая строка сервисов ============ */

.marquee {
  position: relative;
  z-index: 3;
  margin: clamp(18px, 3vh, 32px) 0 clamp(24px, 4vh, 40px);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  width: max-content;
  animation: marqueeRun 46s linear infinite;
}
.marquee-item {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 2vw, 24px);
  letter-spacing: var(--tracking-display);
  color: var(--fg-2);
  white-space: nowrap;
}
.marquee-item .mq-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mq1, var(--meta)), var(--mq2, var(--accent)));
  box-shadow: 0 0 12px color-mix(in oklab, var(--mq1, var(--meta)) 55%, transparent);
  flex-shrink: 0;
}
.marquee-item .mq-tag { color: var(--muted); font-weight: 500; font-size: .72em; }
@keyframes marqueeRun { to { transform: translateX(-33.3333%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ============ Стопка слоёв-«листов» ============ */

.plates {
  position: relative;
  /* наклонные листы (±2.6vw) не должны рождать горизонтальный скролл */
  overflow-x: clip;
  /* нахлёст листов объявлен здесь: шапка стопки использует его для
     детерминированного зазора (см. .plates > .wrap .section-head) */
  --overlap: clamp(56px, 11vh, 120px);
}

.plate {
  --shift: 0vw;
  --rot: 0deg;
  --overlap: clamp(56px, 11vh, 120px);
  position: relative;
  z-index: var(--i, 1);
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--overlap));
  margin-left: var(--shift);
  margin-right: calc(-1 * var(--shift));
  border-radius: clamp(18px, 3vw, 34px);
  border-top: 1px solid color-mix(in oklab, var(--a1) 30%, var(--border));
  background:
    radial-gradient(120% 90% at 82% -10%, color-mix(in oklab, var(--a1) 9%, transparent), transparent 55%),
    radial-gradient(90% 80% at -8% 108%, color-mix(in oklab, var(--a2) 8%, transparent), transparent 52%),
    var(--plate-veil);
  backdrop-filter: blur(var(--plate-blur));
  -webkit-backdrop-filter: blur(var(--plate-blur));
  box-shadow: 0 -30px 80px -30px rgba(2, 5, 16, 0.9);
  transform: rotate(var(--rot));
}
.plate:first-child { margin-top: 0; transform: none; border-radius: 0; }
/* брендовый fallback только для листов без data-accent */
.plate:not([data-accent]) { --a1: var(--meta); --a2: var(--accent); }

/* Шапка стопки: отрицательный mt первого листа (−overlap) никогда не
   наезжает на текст — зазор всегда overlap + 24px при любом vh (баг 2026-09-01) */
.plates > .wrap .section-head { margin-bottom: calc(var(--overlap) + 24px); }

.plate--tilt-l { --shift: 2.6vw; --rot: -0.5deg; }
.plate--tilt-r { --shift: -2.6vw; --rot: 0.5deg; }

/* Атмосферный canvas-слой внутри листа (движки js/scenes.js) */
.plate .scene-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plate [data-scene-canvas] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.plate-in {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  /* нижний отступ ≥ нахлёста следующего листа (--overlap) + зазор, покрывающий
     стартовый сдвиг reveal (translateY(44px)) и подъём угла от наклона листа:
     контент не перекрывается следующим листом ни в статике, ни в анимации (баг 2026-09-01) */
  padding: clamp(44px, 7vh, 84px) clamp(var(--container-gutter-phone), 4vw, var(--container-gutter-desktop)) calc(var(--overlap) + clamp(56px, 6vh, 72px));
}

.plate-top {
  position: sticky;
  top: 74px;
  z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0 -14px clamp(20px, 4vh, 40px);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  /* подложка-туман: прилипшая строка читается поверх гигантского имени */
  background: color-mix(in oklab, var(--bg) 42%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--a1);
}
.plate-no {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; letter-spacing: 0.06em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  padding: 5px 11px;
  border: 1px solid color-mix(in oklab, var(--a1) 40%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--a1) 12%, transparent);
}
.plate-domain { color: var(--muted); }
.plate-domain::before { content: "·"; margin: 0 10px 0 2px; opacity: .7; }

.plate-lead {
  margin: clamp(18px, 3vh, 28px) 0 0;
  color: var(--fg-2);
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.66;
  max-width: 58ch;
}

.plate-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(28px, 5vh, 52px);
}
.plate-grid--flip .plate-fig { order: 2; }
.plate-grid--flip .plate-side { order: 1; }

.plate-facts { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.plate-fact {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in oklab, var(--a1) 16%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  transition: border-color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard);
}
.plate-fact:hover {
  border-color: color-mix(in oklab, var(--a1) 45%, var(--border));
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  transform: translateX(4px);
}
.plate-fact .fact-ic {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--a1);
  background: color-mix(in oklab, var(--a1) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--a1) 26%, transparent);
}
.plate-fact h4 { margin: 0 0 3px; font-size: var(--text-base); font-weight: 650; letter-spacing: .01em; }
.plate-fact p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }

.plate-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: clamp(26px, 4vh, 42px);
}
.plate-cta .btn-ghost { border-color: color-mix(in oklab, var(--a2) 40%, var(--border)); }
.plate-cta .btn-ghost:hover { border-color: color-mix(in oklab, var(--a2) 70%, var(--border)); }
.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-2); font-weight: 600; font-size: var(--text-base);
  transition: color var(--motion-fast) var(--ease-standard);
}
.link-more .arr { transition: transform var(--motion-base) var(--ease-standard); }
.link-more:hover { color: var(--a1); }
.link-more:hover .arr { transform: translateX(4px); }
.link-more:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ============ Расширенные листы SSO / Payments ============ */

.plate--deep .plate-in { max-width: min(1120px, var(--container-max)); }
.plate--deep .plate-lead { max-width: 66ch; }

.deep-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
  margin-top: clamp(26px, 4vh, 44px);
}
.deep-note {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border-left: 2px solid color-mix(in oklab, var(--a1) 60%, transparent);
  background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 9%, transparent), transparent 72%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--fg-2);
  font-size: var(--text-base);
  line-height: 1.7;
}
.deep-note strong { color: var(--fg); font-weight: 650; }
.deep-note + .deep-note { margin-top: var(--space-4); }

/* ============ Нарисованные образы интерфейсов ============ */

.fig {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--a1) 26%, var(--border));
  box-shadow:
    0 40px 110px -36px rgba(2, 5, 16, 0.9),
    0 30px 90px -40px color-mix(in oklab, var(--a1) 26%, transparent);
}
.fig::before {
  content: "";
  position: absolute; inset: -30% -20% auto -20%;
  height: 78%;
  background: radial-gradient(60% 70% at 50% 0%, color-mix(in oklab, var(--a1) 13%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.fig-chrome {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 14px;
  background: color-mix(in oklab, var(--surface-warm) 70%, var(--surface));
  border-bottom: 1px solid var(--border-soft);
}
.fig-dots { display: inline-flex; gap: 6px; }
.fig-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.fig-url {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--muted);
  padding: 3px 12px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 62%;
}
.fig-body { position: relative; z-index: 1; padding: clamp(10px, 2vw, 20px); }
.fig-svg { display: block; width: 100%; height: auto; }
.fig-cap {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Мини-режим на главном: компактнее, детали скрыты */
.fig--mini .fig-optional { display: none; }
.fig--mini .fig-body { padding: 8px; }
.fig--mini .fig-cap { display: none; }

/* Общие примитивы рисунков */
.fig .ln { stroke: color-mix(in oklab, var(--fg-2) 26%, transparent); stroke-width: 6; stroke-linecap: round; }
.fig .panel {
  fill: color-mix(in oklab, var(--surface-warm) 60%, transparent);
  stroke: color-mix(in oklab, var(--a1) 30%, var(--border));
  stroke-width: 1.2;
}
.fig .mono-lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  fill: var(--muted);
}
.fig .accent-lbl { fill: color-mix(in oklab, var(--a1) 85%, var(--fg)); font-weight: 600; }

/* --- WT: карта маршрутов + биржевой панель --- */
.fig--wt .fwt-route {
  fill: none;
  stroke: color-mix(in oklab, var(--a1) 34%, transparent);
  stroke-width: 1.1;
}
.fig--wt .fwt-city { fill: url(#nodeWt); filter: drop-shadow(0 0 6px rgba(95, 208, 255, 0.6)); }
.fig--wt .fwt-dot { fill: var(--svc-wt-1); offset-rotate: 0rad; }
.fig--wt .fwt-dot--1 { offset-path: path("M64 96 Q150 30 196 62"); animation: figTravel 5.2s linear infinite; }
.fig--wt .fwt-dot--2 { offset-path: path("M196 62 Q282 74 340 138"); animation: figTravel 6.4s linear infinite 1.2s; }
.fig--wt .fwt-dot--3 { offset-path: path("M136 246 Q190 292 282 330"); animation: figTravel 5.8s linear infinite 0.6s; }
.fig--wt .fwt-dot--4 { offset-path: path("M282 330 Q368 318 422 262"); animation: figTravel 6.8s linear infinite 2.1s; }
.fig--wt .fwt-dot--5 { offset-path: path("M340 138 Q392 196 422 262"); animation: figTravel 4.9s linear infinite 3s; }
@keyframes figTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.fig--wt .fwt-spark {
  fill: none;
  stroke: url(#nodeWt);
  stroke-width: 2.4;
  stroke-linecap: round;
  --dashlen: 320px;
  stroke-dasharray: var(--dashlen);
  stroke-dashoffset: var(--dashlen);
  animation: figDraw 4.6s var(--ease-out-soft) infinite;
}
.fig--wt .fwt-spark-glow { filter: drop-shadow(0 0 8px rgba(95, 208, 255, 0.55)); }
.fig--wt .fwt-spark-head { fill: #fff; animation: figHeadPulse 4.6s ease-in-out infinite; }
@keyframes figDraw { 0% { stroke-dashoffset: var(--dashlen, 320px); } 62% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes figHeadPulse { 0%, 55% { opacity: 0; } 62%, 88% { opacity: 1; } 100% { opacity: 0; } }
.fig--wt .fwt-bar {
  fill: color-mix(in oklab, var(--svc-wt-2) 55%, transparent);
  transform-origin: center bottom;
  animation: figBarGrow 4.6s var(--ease-out-soft) infinite;
}
.fig--wt .fwt-bars rect:nth-child(2) { animation-delay: .18s; }
.fig--wt .fwt-bars rect:nth-child(3) { animation-delay: .36s; }
.fig--wt .fwt-bars rect:nth-child(4) { animation-delay: .54s; }
@keyframes figBarGrow { 0%, 8% { transform: scaleY(0.35); } 55%, 100% { transform: scaleY(1); } }

/* --- Thera: диалог + дерево триажа + вердикт --- */
.fig--thera .ft-bubble { animation: ftRise 7s var(--ease-out-soft) infinite; }
.fig--thera .ft-bubble--2 { animation-delay: 1.1s; }
.fig--thera .ft-bubble--3 { animation-delay: 2.2s; }
@keyframes ftRise { 0% { opacity: 0; transform: translateY(14px); } 14%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fig--thera .ft-type circle { animation: ftType 1.4s ease-in-out infinite; }
.fig--thera .ft-type circle:nth-child(2) { animation-delay: .22s; }
.fig--thera .ft-type circle:nth-child(3) { animation-delay: .44s; }
@keyframes ftType { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.fig--thera .ft-tree { stroke: color-mix(in oklab, var(--svc-thera-2) 45%, transparent); stroke-width: 1.2; fill: none; }
/* волна #1734: линии дерева «прорисовываются» вместе с активным путём —
   в мини-плитке экран не пустой, дерево триажа видно и живёт */
.fig--mini.fig--thera .ft-tree path {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: figDraw 7s var(--ease-out-soft) infinite;
}
.fig--mini.fig--thera .ft-tree circle { animation: ftType 1.4s ease-in-out infinite; }
.fig--thera .ft-path {
  --dashlen: 190px;
  fill: none;
  stroke: var(--svc-thera-1);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: figDraw 7s var(--ease-out-soft) infinite;
  filter: drop-shadow(0 0 6px rgba(255, 143, 157, 0.5));
}
.fig--thera .ft-verdict { animation: ftRise 7s var(--ease-out-soft) infinite 2.9s; }

/* --- Orga: конвейер канбана + чат с ассистентом --- */
.fig--orga .fo-card { fill: color-mix(in oklab, var(--surface) 90%, var(--fg) 4%); stroke: color-mix(in oklab, var(--svc-orga-1) 30%, var(--border)); stroke-width: 1.1; }
.fig--orga .fo-col-line { stroke: color-mix(in oklab, var(--svc-orga-1) 22%, transparent); stroke-width: 5; stroke-linecap: round; }
.fig--orga .fo-runner { animation: foRunner 8.4s var(--ease-in-out) infinite; }
@keyframes foRunner {
  0% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; }
  30% { transform: translate(160px, 10px); }
  36% { transform: translate(160px, 64px); }
  60% { transform: translate(320px, 54px); opacity: 1; }
  66% { transform: translate(320px, 18px); }
  86%, 100% { transform: translate(396px, 18px); opacity: 0; }
}
.fig--orga .fo-ai {
  transform-box: fill-box; transform-origin: center;
  animation: foAiPulse 2.6s ease-in-out infinite;
}
@keyframes foAiPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.fig--orga .fo-chat-line { stroke: color-mix(in oklab, var(--fg-2) 30%, transparent); stroke-width: 5.5; stroke-linecap: round; }

/* --- Bots: телефон с чатом --- */
.fig--bots .fb-phone {
  fill: color-mix(in oklab, var(--surface) 92%, transparent);
  stroke: color-mix(in oklab, var(--svc-bots-1) 34%, var(--border));
  stroke-width: 1.4;
}
.fig--bots .fb-bubble { animation: ftRise 8.4s var(--ease-out-soft) infinite; }
.fig--bots .fb-bubble--2 { animation-delay: .9s; }
.fig--bots .fb-bubble--3 { animation-delay: 1.8s; }
.fig--bots .fb-bubble--4 { animation-delay: 2.7s; }
.fig--bots .fb-bot-chip { animation: fbFloat 5.2s ease-in-out infinite; }
.fig--bots .fb-bot-chip--2 { animation-delay: 1.3s; }
.fig--bots .fb-bot-chip--3 { animation-delay: 2.4s; }
@keyframes fbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.fig--bots .fb-send { animation: foAiPulse 2.2s ease-in-out infinite; }

/* --- SSO: SEED-карточка + мосты к сервисам --- */
.fig--sso .fs-window { fill: color-mix(in oklab, var(--surface) 88%, transparent); stroke: color-mix(in oklab, var(--svc-sso-1) 32%, var(--border)); stroke-width: 1.2; }
.fig--sso .fs-bridge { fill: none; stroke: color-mix(in oklab, var(--svc-sso-2) 40%, transparent); stroke-width: 1.1; stroke-dasharray: 4 6; }
.fig--sso .fs-seed-box { fill: rgba(255, 255, 255, 0.05); stroke: color-mix(in oklab, var(--svc-sso-1) 34%, transparent); stroke-width: 1; }
.fig--sso .fs-seed-txt { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; fill: var(--fg-2); }
.fig--sso .fs-shimmer {
  animation: fsSweep 3.8s var(--ease-standard) infinite;
}
@keyframes fsSweep { 0% { transform: translateX(-90px); opacity: 0; } 22% { opacity: .8; } 46%, 100% { transform: translateX(320px); opacity: 0; } }
.fig--sso .fs-token { fill: var(--svc-sso-1); offset-rotate: 0rad; filter: drop-shadow(0 0 5px rgba(157, 140, 255, 0.7)); }
.fig--sso .fs-token--1 { offset-path: path("M108 92 C 200 56, 300 92, 340 172"); animation: figTravel 4.4s linear infinite; }
.fig--sso .fs-token--2 { offset-path: path("M612 92 C 520 56, 420 92, 380 172"); animation: figTravel 4.4s linear infinite 1.1s; }
.fig--sso .fs-token--3 { offset-path: path("M108 332 C 200 368, 300 332, 340 248"); animation: figTravel 5s linear infinite 0.5s; }
.fig--sso .fs-token--4 { offset-path: path("M612 332 C 520 368, 420 332, 380 248"); animation: figTravel 5s linear infinite 1.7s; }
.fig--sso .fs-key {
  transform-box: fill-box; transform-origin: center;
  animation: fsKey 5.6s var(--ease-standard) infinite;
}
@keyframes fsKey { 0%, 20%, 100% { transform: rotate(0deg); } 38%, 62% { transform: rotate(-28deg); } }

/* --- Pay: окно оплаты + блокчейн-цепочка --- */
.fig--pay .fy-qr-cell { fill: color-mix(in oklab, var(--fg) 78%, transparent); }
.fig--pay .fy-finder { fill: none; stroke: color-mix(in oklab, var(--svc-pay-1) 85%, var(--fg)); stroke-width: 3; }
.fig--pay .fy-finder { transform-box: fill-box; transform-origin: center; animation: foAiPulse 3s ease-in-out infinite; }
.fig--pay .fy-step-line { stroke: color-mix(in oklab, var(--svc-pay-2) 45%, transparent); stroke-width: 1.6; }
.fig--pay .fy-progress {
  stroke: var(--svc-pay-1);
  stroke-width: 2.6;
  stroke-linecap: round;
  --dashlen: 230px;
  stroke-dasharray: var(--dashlen);
  stroke-dashoffset: var(--dashlen);
  animation: figDraw 5.8s var(--ease-out-soft) infinite;
  filter: drop-shadow(0 0 6px rgba(61, 220, 151, 0.55));
}
.fig--pay .fy-node { fill: color-mix(in oklab, var(--surface) 90%, var(--fg) 6%); stroke: color-mix(in oklab, var(--svc-pay-1) 45%, var(--border)); stroke-width: 1.4; }
.fig--pay .fy-ok {
  fill: none; stroke: var(--svc-pay-1);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: figDrawCheck 5.8s var(--ease-out-soft) infinite 3.4s;
}
.fig--pay .fy-block { fill: color-mix(in oklab, var(--surface) 92%, transparent); stroke: color-mix(in oklab, var(--svc-pay-1) 34%, var(--border)); stroke-width: 1.2; }
.fig--pay .fy-link { stroke: color-mix(in oklab, var(--svc-pay-2) 40%, transparent); stroke-width: 1.2; stroke-dasharray: 3 6; }
.fig--pay .fy-coin { offset-rotate: 0rad; }
.fig--pay .fy-coin--1 { offset-path: path("M172 336 L 213 336"); animation: figTravel 3.6s linear infinite; }
.fig--pay .fy-coin--2 { offset-path: path("M347 336 L 388 336"); animation: figTravel 3.6s linear infinite 1.2s; }
.fig--pay .fy-coin--3 { offset-path: path("M522 336 L 563 336"); animation: figTravel 3.6s linear infinite 2.4s; }

/* ============ Подстраницы сервисов ============ */

.pg-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 5vh, 56px) 0 clamp(48px, 8vh, 96px);
}
/* брендовый fallback только для hero без data-accent */
.pg-hero:not([data-accent]) { --a1: var(--meta); --a2: var(--accent); }
.pg-hero .scene-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pg-hero [data-scene-canvas] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.pg-hero-in {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(var(--container-gutter-phone), 4vw, var(--container-gutter-desktop));
}
.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  /* тап-зона ~44px без сдвига ритма: подушка компенсируется отрицательными полями */
  padding: 13px 0;
  margin: -13px 0 calc(clamp(22px, 4vh, 40px) - 13px);
  transition: color var(--motion-fast) var(--ease-standard);
}
.crumb:hover { color: var(--a1); }
.crumb:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.pg-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--a1);
  margin-bottom: var(--space-5);
}
.pg-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-7xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-giant);
  color: var(--fg);
  overflow-wrap: break-word;
}
.pg-title .tint { color: color-mix(in oklab, var(--a1) 60%, var(--fg)); }
.pg-lead {
  margin: clamp(20px, 3.4vh, 34px) 0 0;
  max-width: 62ch;
  color: var(--fg-2);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.68;
}
.pg-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: clamp(26px, 4.4vh, 44px);
}
.pg-domain {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--muted); letter-spacing: 0.05em;
}

/* Ритм подстраницы: каждая контентная секция открывается паузой шкалы
   --section-y (низ закрывает следующая секция либо .closing со своим
   паддингом). На главном лендинге секцию доктрины отстраивает #doctrine:
   последний лист уже даёт нахлёст + запас (баг нахлёста, 2026-09-01). */
.wrap .section { padding-top: clamp(48px, 8vh, var(--section-y-desktop)); }
#doctrine { padding-top: clamp(28px, 5vh, 48px); }

/* Суть — гигантская врезка */
.essence {
  position: relative;
  /* нижний воздух задаёт следующая секция (.wrap .section), не дублем */
  padding: clamp(56px, 12vh, 140px) 0 0;
}
.essence-quote {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-5xl);
  line-height: 1.14;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  max-width: 22ch;
}
.essence-quote .tint {
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in oklab, var(--a1, var(--meta)) 65%, transparent);
}
.essence-src {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}

/* Как работает — перекрывающиеся шаги */
.steps {
  position: relative;
  display: grid;
  gap: clamp(14px, 2.4vh, 22px);
  max-width: 900px;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(72px, 120px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding: clamp(20px, 3.4vh, 34px) clamp(22px, 3vw, 40px);
  border: 1px solid color-mix(in oklab, var(--a1) 20%, var(--border-soft));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in oklab, var(--a1) 8%, transparent), transparent 55%),
    color-mix(in oklab, var(--surface) 62%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.step + .step { margin-left: clamp(0px, 4vw, 56px); }
.step-no {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1;
  letter-spacing: var(--tracking-giant);
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in oklab, var(--a1) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.step-ic {
  display: flex;
  grid-column: 1;
  margin-top: var(--space-4);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--a1);
  background: color-mix(in oklab, var(--a1) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--a1) 26%, transparent);
}
/* Иконка шага стоит в колонке номера (под цифрой), текст — явно во второй
   колонке первой строки: без этого авто-размещение уводит текстовый блок
   в узкую первую колонку («в столбик по слову», волна 2026-09-02). */
.step > div { grid-row: 1; grid-column: 2; }
.step h3 {
  margin: 6px 0 var(--space-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-display);
}
.step p { margin: 0; color: var(--fg-2); line-height: 1.66; max-width: 56ch; }

/* Финальный CTA-слой подстраницы */
.closing {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(64px, 12vh, 150px) 0;
}
.closing .giant-fill { font-size: var(--text-6xl); }
.closing-lead {
  margin: var(--space-5) auto 0;
  max-width: 52ch;
  color: var(--fg-2);
  font-size: var(--text-lg);
  line-height: 1.68;
}
.closing-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4);
  margin-top: clamp(26px, 4vh, 40px);
}

/* ============ Доктрина — поток принципов ============ */

.doctrine-flow {
  position: relative;
  display: grid;
  gap: clamp(10px, 1.8vh, 18px);
  max-width: 980px;
}
.principle-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(96px, 168px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: clamp(18px, 3vh, 30px) clamp(18px, 3vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: color-mix(in oklab, var(--surface) 45%, transparent);
  transition: border-color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard);
}
.principle-row:nth-child(even) { margin-left: clamp(0px, 5vw, 72px); }
.principle-row:hover {
  border-color: color-mix(in oklab, var(--pc, var(--meta)) 45%, var(--border));
  background: color-mix(in oklab, var(--surface) 80%, transparent);
}
.principle-row .principle-num {
  font-size: clamp(48px, 6vw, 84px);
}
.principle-row h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-display);
  display: flex; align-items: center; gap: var(--space-3);
}
.principle-row .principle-ic { color: var(--pc, var(--meta)); display: inline-flex; }
.principle-row p { margin: 0; color: var(--fg-2); line-height: 1.66; max-width: 64ch; }
.principle-row--1 { --pc: var(--svc-wt-1); }
.principle-row--2 { --pc: var(--svc-poll-1); }
.principle-row--3 { --pc: var(--svc-thera-1); }
.principle-row--4 { --pc: var(--meta); }
.principle-row--5 { --pc: var(--svc-thera-2); }
.principle-row--6 { --pc: var(--svc-bots-1); }

/* ============ Сетка ботов (главная + /bots/) ============ */

.bots-cloud {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  min-width: 0;
}

/* ============ Скролл-прогресс (главная) ============ */

.scroll-rail {
  position: fixed;
  right: 18px; top: 50%;
  translate: 0 -50%;
  width: 3px; height: 180px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--fg) 10%, transparent);
  z-index: 40;
  overflow: hidden;
  opacity: .9;
}
.scroll-rail i {
  position: absolute; inset: 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--rail, var(--meta)), color-mix(in oklab, var(--rail, var(--meta)) 30%, transparent));
  transform-origin: top;
  transform: scaleY(var(--rail-fill, 0));
}

/* ============ Reveal-анимации (вешает scroll.js) ============ */

[data-reveal] {
  opacity: 0;
  transform: translateY(44px);
  filter: blur(14px);
  transition:
    opacity var(--motion-slow) var(--ease-out-soft),
    transform var(--motion-slow) var(--ease-out-soft),
    filter var(--motion-slow) var(--ease-out-soft);
  will-change: opacity, transform, filter;
}
[data-reveal="left"] { transform: translateX(-52px); }
[data-reveal="right"] { transform: translateX(52px); }
[data-reveal="zoom"] { transform: scale(.93); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }
[data-reveal-delay="5"] { transition-delay: 450ms; }
.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }

/* Параллакс-слои: коэффициент задаёт scroll.js через --pty */
[data-para] { will-change: transform; }

/* ============ Адаптив ============ */

@media (max-width: 1024px) {
  .plates { --overlap: clamp(54px, 9vh, 96px); }
  .plate { --overlap: clamp(54px, 9vh, 96px); --shift: 0vw; --rot: 0deg; margin-left: 0; margin-right: 0; }
  .plate-grid, .plate-grid--flip,
  .deep-cols { grid-template-columns: 1fr; gap: var(--space-8); }
  .plate-grid--flip .plate-fig { order: 0; }
  .plate-grid--flip .plate-side { order: 0; }
  .hero-grid-layers { grid-template-columns: 1fr; }
  .hero-constellation { max-width: 430px; }
  .scroll-rail { display: none; }
  .step + .step { margin-left: 0; }
}

@media (max-width: 768px) {
  .plates { --overlap: clamp(44px, 7vh, 72px); }
  .plate { border-radius: 18px; --overlap: clamp(44px, 7vh, 72px); }
  .plate-top { position: static; }
  .giant-svc { font-size: clamp(52px, 13.5vw, 92px); }
  .pg-title { font-size: clamp(52px, 14vw, 110px); }
  .essence-quote { font-size: clamp(30px, 7.4vw, 44px); }
  .step { grid-template-columns: minmax(56px, 84px) minmax(0, 1fr); gap: var(--space-4); }
  .principle-row { grid-template-columns: minmax(64px, 108px) minmax(0, 1fr); gap: var(--space-4); }
  .principle-row:nth-child(even) { margin-left: 0; }
  .brandstack-word { font-size: clamp(46px, 13.5vw, 96px); }
}

@media (max-width: 560px) {
  .plate-cta .btn { width: 100%; }
  .plate-cta { flex-direction: column; align-items: stretch; }
  .plate-fact { padding: var(--space-3) var(--space-4); }
  /* подстраницы: призыв и финал — колонкой на всю ширину, тап 46px */
  .pg-cta, .closing-actions { flex-direction: column; align-items: stretch; }
  .pg-cta .btn, .closing-actions .btn { width: 100%; }
  .pg-cta .pg-domain { display: block; text-align: center; }
}

/* ============ Reduced motion / no-JS ============ */

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .core-glow, .orbit-spin,
  .fig--wt .fwt-dot, .fig--wt .fwt-spark, .fig--wt .fwt-bar, .fig--wt .fwt-spark-head,
  .fig--thera .ft-bubble, .fig--thera .ft-type circle, .fig--thera .ft-path, .fig--thera .ft-verdict,
  .fig--orga .fo-runner, .fig--orga .fo-ai,
  .fig--bots .fb-bubble, .fig--bots .fb-bot-chip, .fig--bots .fb-send,
  .fig--sso .fs-shimmer, .fig--sso .fs-token, .fig--sso .fs-key,
  .fig--pay .fy-finder, .fig--pay .fy-progress, .fig--pay .fy-ok, .fig--pay .fy-coin {
    animation: none !important;
  }
  .fig--wt .fwt-spark, .fig--thera .ft-path, .fig--pay .fy-progress { stroke-dashoffset: 0; }
  .fig--thera .ft-bubble, .fig--bots .fb-bubble, .fig--thera .ft-verdict { opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  [data-para] { transform: none !important; }
}

.no-js [data-para] { transform: none !important; }
.no-js .marquee-track { animation: none; }

/* Фигура Redactor: три колонки редактора (дерево · текст · чат ИИ) */
.fig--redactor .fr-tree { stroke: color-mix(in oklab, var(--fg-2) 34%, transparent); stroke-width: 5; stroke-linecap: round; }
.fig--redactor .fr-node { fill: color-mix(in oklab, var(--fg-2) 30%, transparent); }
.fig--redactor .fr-node--active { fill: var(--svc-redactor-1); }
.fig--redactor .fr-textline { stroke: color-mix(in oklab, var(--fg-2) 26%, transparent); stroke-width: 4; stroke-linecap: round; }
.fig--redactor .fr-textline--dim { stroke: color-mix(in oklab, var(--fg-2) 14%, transparent); }
.fig--redactor .fr-selection { fill: color-mix(in oklab, var(--svc-redactor-1) 16%, transparent); stroke: color-mix(in oklab, var(--svc-redactor-1) 55%, transparent); stroke-width: 1; }
.fig--redactor .fr-textline--sel { stroke: var(--svc-redactor-1); }
.fig--redactor .fr-cursor { stroke: var(--svc-redactor-1); stroke-width: 2.4; animation: fr-blink 1.1s steps(2, start) infinite; }
@keyframes fr-blink { 50% { opacity: 0; } }
.fig--redactor .fr-chat { fill: rgba(255, 255, 255, 0.05); stroke: color-mix(in oklab, var(--svc-redactor-2) 40%, var(--border)); stroke-width: 1; }
.fig--redactor .fr-chat--ai { stroke: color-mix(in oklab, var(--svc-redactor-1) 45%, var(--border)); }
.fig--redactor .fr-chat-line { stroke: color-mix(in oklab, var(--fg-2) 30%, transparent); stroke-width: 3.4; stroke-linecap: round; }
.fig--redactor .fr-chat-line--ai { stroke: color-mix(in oklab, var(--svc-redactor-1) 60%, transparent); }
.fig--redactor .fr-ai-orb { fill: var(--svc-redactor-1); filter: drop-shadow(0 0 8px color-mix(in oklab, var(--svc-redactor-1) 70%, transparent)); }
.fig--redactor .fr-ai-ring { fill: none; stroke: color-mix(in oklab, var(--svc-redactor-1) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 6; animation: fr-spin 9s linear infinite; transform-origin: 660px 60px; }
@keyframes fr-spin { to { transform: rotate(360deg); } }