/* =============================================================
   components.css — индивидуальные лейауты слайдов
   Каждый слайд имеет собственную композицию. Общие атомы:
   .slide-head, .ico, .grad, .glass (см. ниже).
   ============================================================= */

/* --- Шапка слайда ----------------------------------------- */
.slide-head { margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.slide h2 { font-size: var(--fs-h2); max-width: 24ch; }

/* --- Универсальная иконка-чип ----------------------------- */
.ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--glass-border);
  color: var(--text-0);
  flex: 0 0 auto;
}
.ico svg { width: 21px; height: 21px; }
.ico--lg { width: 52px; height: 52px; border-radius: 15px; }
.ico--lg svg { width: 25px; height: 25px; }
.ico--xl { width: 60px; height: 60px; border-radius: 17px; }
.ico--xl svg { width: 28px; height: 28px; }

/* --- Базовое стекло (общий «материал») -------------------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* мягкий внутренний блик в углу — «дорогая» стеклянная деталь */
.glass::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.07), transparent);
  pointer-events: none;
}

/* =============================================================
   2 — АКТУАЛЬНОСТЬ: гигантская шок-цифра + нумерованный стек
   ============================================================= */
.rel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.6rem, 4vw, 4.5rem);
  align-items: center;
}

/* --- Левая часть: огромная цифра-якорь -------------------- */
.rel__hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(260px, 46vh, 460px);
}
/* тусклое белое свечение под сеткой */
.rel__hero::before {
  content: "";
  position: absolute;
  left: 32%; top: 45%;
  width: 80%; height: 80%;
  z-index: -1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
      rgba(255,255,255,0.10), rgba(255,255,255,0.04) 45%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
  animation: glow-pulse 6s var(--ease-in-out) infinite;
}
/* техно-сетка позади цифры */
.rel__grid {
  position: absolute;
  inset: -10% -6%;
  background-image:
    linear-gradient(rgba(255,255,255,0.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.085) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: radial-gradient(70% 70% at 35% 45%, #000 0%, transparent 72%);
          mask: radial-gradient(70% 70% at 35% 45%, #000 0%, transparent 72%);
  pointer-events: none;
}
.rel__stat {
  position: relative;
  margin-left: -0.3em;
  font-size: clamp(6rem, 4rem + 14vw, 17rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.06em;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5));
}
.rel__caption {
  position: relative;
  margin-top: 1.4rem;
  padding-left: 1.1rem;
  max-width: 38ch;
  font-size: var(--fs-body);
  color: var(--text-1);
  line-height: 1.55;
  border-left: 2px solid;
  border-image: linear-gradient(180deg, #fff, rgba(255,255,255,0.08)) 1;
}

/* --- Правая часть: нумерованный стек причин --------------- */
.rel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.rel-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  padding: clamp(1.1rem, 2.2vh, 1.7rem) 0.4rem clamp(1.1rem, 2.2vh, 1.7rem) 0.2rem;
  border-top: 1px solid var(--line);
  transition: padding-left var(--t-fast) var(--ease-out);
}
.rel__list .rel-row:last-child { border-bottom: 1px solid var(--line); }
/* свечение-подложка при наведении */
.rel-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
  pointer-events: none;
}
.rel-row:hover { padding-left: 1.4rem; }
.rel-row:hover::before { opacity: 1; }
.rel-row:hover .rel-row__arrow { opacity: 1; transform: translateX(0); }
.rel-row:hover .rel-row__num { color: transparent; }

.rel-row__num {
  position: relative;
  font-size: clamp(2rem, 1.3rem + 1.8vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-3);
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  transition: color var(--t-fast) var(--ease-out);
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
}
.rel-row__body { position: relative; display: flex; flex-direction: column; gap: 0.3rem; }
.rel-row__title {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 700;
  color: var(--text-0);
  line-height: 1.1;
}
.rel-row__flag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg-0);
  padding: 0.25em 0.6em;
  border-radius: 999px;
  background: var(--grad-text);
}
.rel-row__text {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
  color: var(--text-1);
  line-height: 1.5;
  max-width: 46ch;
}
.rel-row__arrow {
  position: relative;
  font-size: 1.3rem;
  color: var(--text-1);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

@media (max-width: 880px) {
  .rel { grid-template-columns: 1fr; gap: clamp(1.4rem, 4vh, 2.2rem); }
  .rel__hero { min-height: 0; }
  .rel-row__arrow { display: none; }
}

/* =============================================================
   3 — ЦЕЛЬ → ГИПОТЕЗА: логическая цепочка с коннектором
   ============================================================= */
.duo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(0.6rem, 1.4vw, 1.4rem);
  align-items: stretch;
}
.duo__card {
  position: relative;
  padding: clamp(1.8rem, 2.8vw, 3rem);
  min-height: clamp(280px, 42vh, 400px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.duo__card:hover { transform: translateY(-5px); border-color: var(--line-strong); }

/* Цель — чуть «активнее» (источник), гипотеза — следствие */
.duo__card--goal {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.06), rgba(255,255,255,0) 55%),
    var(--glass-bg);
}
/* мишень должна выходить за край панели — обрезку отключаем */
.duo__card--goal,
.duo__card--goal::before { overflow: visible; }

/* 3D-мишень поверх угла панели «Цель» (торчит наружу) */
.duo__obj {
  position: absolute;
  top: clamp(-2.4rem, -3vw, -1.6rem);
  right: clamp(-2.4rem, -3vw, -1.6rem);
  z-index: 3;
  width: clamp(120px, 14vw, 184px);
  height: auto;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,0.6))
          drop-shadow(0 0 28px rgba(255,255,255,0.08));
  animation: heart-float 7s var(--ease-in-out) infinite;
  pointer-events: none;
}

/* Огромная watermark-цифра на фоне */
.duo__watermark {
  position: absolute;
  right: clamp(0.6rem, 2vw, 1.6rem);
  bottom: -0.18em;
  z-index: -1;
  font-size: clamp(7rem, 5rem + 9vw, 13rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.07);
  pointer-events: none;
}

.duo__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.3rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.duo__card h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  margin-bottom: 0.9rem;
}
.duo__card p {
  font-size: var(--fs-body);
  color: var(--text-1);
  line-height: 1.6;
  max-width: 40ch;
}

/* --- Коннектор между панелями ----------------------------- */
.duo__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 clamp(0.4rem, 1vw, 1rem);
}
.duo__line {
  width: 1px;
  flex: 1;
  min-height: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.25));
}
.duo__line:last-child {
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0));
}
.duo__node {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 0 0 6px rgba(255,255,255,0.03), 0 0 28px rgba(255,255,255,0.12);
}
.duo__arrow {
  font-size: 1.3rem;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: duo-pulse 2.6s var(--ease-in-out) infinite;
}

@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
  .duo__card { min-height: 0; }
  .duo__link { flex-direction: row; padding: 0.4rem 0; }
  .duo__line { width: auto; height: 1px; min-height: 0; min-width: 30px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.25)); }
  .duo__line:last-child { background: linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0)); }
  .duo__arrow { transform: none; }
}

/* =============================================================
   4 — OWASP TOP 10: шкала риска + крупные читаемые строки
   Монохром, без цветных блоков. Акцент — градиентная шкала слева.
   ============================================================= */
.s-risk__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.s-risk__head .slide-head { margin-bottom: 0.6rem; }
.s-risk__headText { min-width: 0; }
.s-risk__lead {
  font-size: var(--fs-body);
  color: var(--text-2);
  max-width: 56ch;
}
/* 3D-ключ парит справа от заголовка */
.s-risk__key {
  flex: 0 0 auto;
  width: clamp(150px, 18vw, 250px);
  height: auto;
  margin: clamp(-2rem, -2.5vw, -1rem) clamp(-0.5rem, -1vw, 0rem)
          clamp(-2rem, -2.5vw, -1rem) 1rem;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))
          drop-shadow(0 0 30px rgba(255,255,255,0.08));
  animation: heart-float 6.5s var(--ease-in-out) infinite;
  pointer-events: none;
}
@media (max-width: 760px) { .s-risk__key { display: none; } }

/* --- Контейнер: шкала + группы ---------------------------- */
.risk {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  margin-top: clamp(1.2rem, 2.5vh, 2rem);
  align-items: stretch;
}

/* --- Вертикальная градуированная шкала -------------------- */
.risk__scale {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 0.7rem;
}
.risk__scaleTop,
.risk__scaleBottom {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-3);
}
.risk__scaleBar {
  position: relative;
  width: 8px;
  border-radius: 999px;
  /* тусклый «трек» шкалы — виден всегда */
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
/* яркая градиентная заливка, растёт снизу вверх при показе слайда */
.risk__scaleBar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
      #ffffff 0%, #c7cbd2 45%, #6b7280 100%);
  box-shadow: 0 0 26px rgba(255,255,255,0.25);
  transform-origin: bottom;
  transform: scaleY(0);
}
.slide.is-active .risk__scaleBar::before {
  animation: scale-fill 1100ms var(--ease-out) forwards;
  animation-delay: 320ms;
}
/* деления шкалы */
.risk__scaleBar::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  z-index: 1;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
      180deg, rgba(0,0,0,0.45) 0 2px, transparent 2px 33.33%);
}

/* --- Группы уровней --------------------------------------- */
.risk__groups {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.8vh, 1.4rem);
}
.risk-group { display: grid; gap: 0.6rem; }
.risk-group__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.risk-group__tick {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--grad-text);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}
.risk-group__name {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem);
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.risk-group__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

/* --- Строка угрозы: все одинаковой ширины и высоты -------- */
.risk-row {
  display: grid;
  grid-template-columns: 4.6rem 1fr;     /* фикс. колонка под код */
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.25rem;
  align-content: center;
  min-height: 5.4rem;                     /* единая высота всех блоков */
  padding: 0.9rem clamp(1rem, 1.4vw, 1.3rem);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--glass-bg);
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.risk-row:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: var(--glass-bg-hi);
}
.risk-row__code {
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: start;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-0);
  width: 100%;
  padding: 0.45em 0;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.05);
  text-align: center;
}
.risk-row__name {
  align-self: end;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.32rem);
  font-weight: 700;
  color: var(--text-0);
  line-height: 1.1;
}
.risk-row__desc {
  grid-column: 2;
  align-self: start;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.02rem);
  color: var(--text-2);
  line-height: 1.35;
  /* обрезаем длинные описания в 2 строки — высота не плывёт */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 860px) {
  .risk-group__rows { grid-template-columns: 1fr; }
  .risk-row { min-height: 0; }
}
@media (max-width: 760px) {
  .risk { grid-template-columns: 1fr; }
  .risk__scale { grid-template-rows: none; grid-auto-flow: column; }
  .risk__scaleBar { width: auto; height: 8px; }
}

/* =============================================================
   5 — МЕТОДЫ ОБНАРУЖЕНИЯ: S-образная змейка-путь сканирования
   Без карточек и иконок — чистая типографика на изгибающейся линии.
   ============================================================= */
/* приглушённое свечение снизу — как сверху на других слайдах */
.s-pipeline { position: relative; }
.s-pipeline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4vh, 3rem);
  width: min(620px, 80%);
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 100%,
      rgba(255,255,255,0.07), rgba(255,255,255,0) 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}
.snake {
  position: relative;
  margin-top: clamp(1.6rem, 3.5vh, 3rem);
  width: 100%;
  aspect-ratio: 1000 / 440;
  max-height: 52vh;
}
/* техно-сетка на фоне змейки — заполняет пустоту, растворяется к краям */
.snake::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  background-position: center;
  -webkit-mask: radial-gradient(80% 75% at 50% 50%, #000 0%, rgba(0,0,0,0.4) 55%, transparent 82%);
          mask: radial-gradient(80% 75% at 50% 50%, #000 0%, rgba(0,0,0,0.4) 55%, transparent 82%);
}
.snake__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* базовая (тусклая) линия пути */
.snake__base {
  fill: none;
  stroke: rgba(255,255,255,0.14);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* светящийся импульс, бегущий вдоль всей змейки (включая изгибы) */
.snake__flow {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 160 1600;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.7));
  animation: snake-flow 4.5s linear infinite;
}

/* --- Узлы (точки + текст) --------------------------------- */
.snake__nodes { position: absolute; inset: 0; z-index: 2; }
.snake__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
}
.snake__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad-text);
  box-shadow: 0 0 0 6px var(--bg-1), 0 0 22px rgba(255,255,255,0.5);
  animation: glow-pulse 3s var(--ease-in-out) infinite;
}
.snake__node:nth-child(2) .snake__dot { animation-delay: .3s; }
.snake__node:nth-child(3) .snake__dot { animation-delay: .6s; }
.snake__node:nth-child(4) .snake__dot { animation-delay: .9s; }
.snake__node:nth-child(5) .snake__dot { animation-delay: 1.2s; }

/* подпись метода — над или под точкой */
.snake__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
  width: max-content;
}
.snake__node.is-above .snake__label { bottom: calc(50% + 22px); }
.snake__node.is-below .snake__label { top: calc(50% + 22px); }

.snake__num {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-3);
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
}
.snake__tag {
  font-size: clamp(1.3rem, 1rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.snake__name {
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  color: var(--text-2);
  line-height: 1.2;
  max-width: 16ch;
}

@media (max-width: 760px) {
  .snake { aspect-ratio: auto; max-height: none; height: auto; }
  .snake__svg { display: none; }
  .snake__nodes { position: static; display: grid; gap: 1.4rem; }
  .snake__node { position: static; transform: none; flex-direction: row; gap: 1rem; align-items: center; }
  .snake__label { position: static; align-items: flex-start; text-align: left; }
  .snake__node.is-above .snake__label,
  .snake__node.is-below .snake__label { top: auto; bottom: auto; }
}

.lead-prose {
  margin-top: clamp(1.6rem, 3.5vh, 3rem);
  font-size: var(--fs-lead);
  color: var(--text-1);
  line-height: 1.6;
  max-width: 84ch;
  padding-left: 1.4rem;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #fff, rgba(255,255,255,0.1)) 1;
}

/* =============================================================
   6 — ПРАКТИКИ: дерево безопасности — щит-корень → ветви
   ============================================================= */
.tree {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  margin-top: clamp(1rem, 2.5vh, 2rem);
  min-height: clamp(300px, 52vh, 520px);
}

/* --- Корень: парящий щит ---------------------------------- */
.tree__root {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}
/* техно-сетка за щитом — растворяется к краям */
.tree__root::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(560px, 130%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: center;
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,0.4) 45%, transparent 72%);
          mask: radial-gradient(circle, #000 0%, rgba(0,0,0,0.4) 45%, transparent 72%);
}
.tree__rings {
  position: absolute;
  left: 50%; top: 50%;
  width: min(500px, 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 40%, rgba(255,255,255,0.06) 40.5% 41%, transparent 41.5%),
    radial-gradient(circle, transparent 0 54%, rgba(255,255,255,0.045) 54.5% 55%, transparent 55.5%);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 72%);
          mask: radial-gradient(circle, #000 30%, transparent 72%);
}
.tree__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(420px, 92%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
      rgba(255,255,255,0.15), rgba(150,160,190,0.09) 40%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  animation: glow-pulse 5s var(--ease-in-out) infinite;
}
/* Вспышка щита в ритме палочек: каждый раз когда импульсы добегают.
   Период = период spark (2.8s), фаза совпадает с приходом к щиту. */
.slide.is-active .tree__glow {
  animation:
    glow-pulse 5s var(--ease-in-out) infinite,
    shield-charge 3.6s ease-out infinite 1300ms;
}
.slide.is-active .tree__shield {
  animation:
    heart-float 6s var(--ease-in-out) infinite,
    shield-flash 3.6s ease-out infinite 1300ms;
}
.tree__shield {
  position: relative;
  z-index: 1;
  width: min(380px, 86%);
  height: auto;
  filter: drop-shadow(0 34px 66px rgba(0,0,0,0.6))
          drop-shadow(0 0 46px rgba(255,255,255,0.10));
  animation: heart-float 6s var(--ease-in-out) infinite;
}

/* --- Ветви (SVG поверх всей зоны дерева) ------------------ */
.tree__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
/* основная ветвь: толще, с градиентом и мягким свечением */
.tree__branch {
  fill: none;
  stroke: url(#branchGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.25));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.slide.is-active .tree__branch {
  animation: branch-draw 1000ms var(--ease-out) forwards;
  animation-delay: calc(360ms + var(--i, 0) * 130ms);
}
/* бегущий световой импульс по ветви (энергия течёт от щита) */
.tree__spark {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.12 0.88;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
}
.slide.is-active .tree__spark {
  /* все палочки летят СИНХРОННО — доходят до щита одновременно */
  animation: spark-run 3.6s ease-in infinite;
  animation-delay: 1300ms;
}

/* --- Узлы-практики ---------------------------------------- */
.tree-nodes {
  position: relative;
  z-index: 3;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  padding-left: clamp(0.5rem, 2vw, 1.6rem);
}
.tree-node {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  padding: clamp(0.7rem, 1.5vh, 1.1rem) clamp(0.8rem, 1.4vw, 1.2rem);
  border-radius: var(--r-lg);
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.tree-node:hover {
  transform: translateX(6px);
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}
/* «лист» дерева — светящийся круг с номером, двойное кольцо */
.tree-node__bullet {
  position: relative;
  flex: 0 0 auto;
  width: clamp(50px, 5.5vw, 64px);
  height: clamp(50px, 5.5vw, 64px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bg-0);
  background: var(--grad-text);
  box-shadow: 0 0 0 6px var(--bg-1),
              0 0 0 7px rgba(255,255,255,0.12),
              0 0 34px rgba(255,255,255,0.35);
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
}
.tree-node__body { display: flex; flex-direction: column; gap: 0.3rem; }
.tree-node__title {
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
}
.tree-node__text {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.18rem);
  color: var(--text-1);
  line-height: 1.5;
  max-width: 48ch;
}
@media (max-width: 860px) {
  .tree { grid-template-columns: 1fr; min-height: 0; gap: 1.6rem; }
  .tree__svg { display: none; }
  .tree__shield { width: min(180px, 44%); }
  .tree-nodes { height: auto; gap: 0.4rem; padding-left: 0; }
}

/* =============================================================
   7 — МЕТОДОЛОГИЯ: запуск ракеты — этапы как ступени полёта
   ============================================================= */
.launch {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(1rem, 2.5vh, 2rem);
}

/* --- Стартовая площадка с ракетой и траекторией ----------- */
.launch__stage {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 50vh, 480px);
}
/* техно-сетка за ракетой */
.launch__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask: radial-gradient(80% 80% at 45% 55%, #000 0%, transparent 78%);
          mask: radial-gradient(80% 80% at 45% 55%, #000 0%, transparent 78%);
}
/* пунктирный след траектории */
.launch__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.launch__path {
  fill: none;
  stroke: url(#trailGrad);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 7px rgba(255,180,110,0.4));
  /* сплошная линия рисуется от старта к финишу (pathLength=1) */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.slide.is-active .launch__path {
  animation: trail-draw 1500ms var(--ease-out) forwards 300ms;
}
.launch__glow {
  position: absolute;
  left: 50%; top: 52%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
      rgba(255,160,80,0.16), rgba(255,255,255,0.06) 40%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  animation: glow-pulse 4s var(--ease-in-out) infinite;
}
.launch__rocket {
  position: relative;
  z-index: 1;
  width: min(330px, 88%);
  height: auto;
  filter: drop-shadow(0 26px 50px rgba(0,0,0,0.6))
          drop-shadow(0 0 40px rgba(255,170,90,0.18));
  /* базовый наклон носом вверх — под угол траектории */
  rotate: -30deg;
  animation: rocket-fly 5s var(--ease-in-out) infinite;
  margin-left: -20px;
}

/* --- Этапы как восходящие ступени ------------------------- */
.launch__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.launch-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;     /* текст слева, цифра справа */
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  padding: clamp(0.9rem, 1.8vh, 1.4rem) clamp(0.4rem, 1vw, 0.8rem);
  border-bottom: 1px solid var(--line);
  transition: transform var(--t-fast) var(--ease-out);
}
.launch-step:hover { transform: translateX(8px); }
.launch-step__num { order: 2; }        /* цифра — после текста */
.launch-step__body { order: 1; }
/* большая цифра без капсулы: 0 приглушён, цифра ярче */
.launch-step__num {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
}
.launch-step__zero { color: var(--text-3); opacity: 0.4; }
.launch-step__digit {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.launch-step__body { display: flex; flex-direction: column; gap: 0.25rem; }
.launch-step__title {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
}
.launch-step__text {
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.15rem);
  color: var(--text-1);
  line-height: 1.45;
}
@media (max-width: 860px) {
  .launch { grid-template-columns: 1fr; }
  .launch__stage { min-height: 0; }
  .launch__rocket { width: min(180px, 44%); }
}

/* =============================================================
   8 — РЕЗУЛЬТАТЫ: герой «60% человеческий фактор» + 2 стата
   ============================================================= */
.results {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  align-items: stretch;
}

/* --- Герой-стат с графикой человека ----------------------- */
.hero-stat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.8rem, 2.6vw, 2.8rem);
  overflow: hidden;
}
.hero-stat__body { position: relative; z-index: 2; }
.hero-stat__num {
  display: block;
  font-size: clamp(4.5rem, 3rem + 9vw, 9rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.06em;
}
.hero-stat__label {
  display: block;
  margin-top: 0.6rem;
  font-size: clamp(1.3rem, 1rem + 1vw, 2rem);
  font-weight: 700;
  color: var(--text-0);
}
.hero-stat__text {
  margin-top: 0.9rem;
  font-size: var(--fs-body);
  color: var(--text-1);
  line-height: 1.55;
  max-width: 34ch;
}

/* графика человека справа в герое */
.hero-stat__visual {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: clamp(160px, 18vw, 280px);
}
.hero-stat__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 130%; height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
      rgba(255,255,255,0.12), rgba(150,160,190,0.08) 40%, transparent 72%);
  filter: blur(16px);
  pointer-events: none;
  animation: glow-pulse 5s var(--ease-in-out) infinite;
}
.hero-stat__human {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: clamp(180px, 20vw, 300px);
  height: auto;
  filter: drop-shadow(0 26px 54px rgba(0,0,0,0.6))
          drop-shadow(0 0 40px rgba(255,255,255,0.08));
  animation: heart-float 6s var(--ease-in-out) infinite;
}

/* --- Поддерживающие статы (3 и 2) ------------------------- */
.results__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.bstat {
  position: relative;
  padding: clamp(1.4rem, 2vw, 2.1rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.bstat:hover { transform: translateY(-4px); border-color: var(--line-strong); }
/* огромная цифра-водяной знак на фоне блока */
.bstat::after {
  content: "";
  position: absolute;
  right: -8%; bottom: -30%;
  width: 55%; height: 150%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.05), transparent 70%);
  pointer-events: none;
}
/* верх: крупная цифра + подпись в одну линию */
.bstat__top {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.bstat__num {
  font-size: clamp(3rem, 2rem + 4.5vw, 5rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
}
.bstat__label {
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  font-weight: 700;
  color: var(--text-0);
}
.bstat__text { font-size: 0.98rem; color: var(--text-2); line-height: 1.45; }
/* мини-легенда: пилюли того, что входит в показатель */
.bstat__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.bstat__tag {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-1);
  padding: 0.35em 0.85em;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.035);
  position: relative;
  padding-left: 1.7em;
}
/* точка-индикатор перед тегом (как в дашборде) */
.bstat__tag::before {
  content: "";
  position: absolute;
  left: 0.75em; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-text);
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
}

@media (max-width: 900px) {
  .results { grid-template-columns: 1fr; }
  .hero-stat { grid-template-columns: 1fr; }
  .hero-stat__visual { display: none; }
  .results__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .results__side { grid-template-columns: 1fr; } }

/* =============================================================
   9 — ЗНАЧИМОСТЬ: лампочка-идея + крупный стек применений + лента
   ============================================================= */
.appl {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
  margin-top: clamp(0.8rem, 2vh, 1.6rem);
}

/* --- Лампочка с тёплым свечением (справа, на сетке) ------- */
.appl__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(240px, 40vh, 400px);
}
/* техно-сетка за лампочкой — растворяется к краям */
.appl__mesh {
  position: absolute;
  inset: 0;                       /* на весь блок — как сетка на слайде 7 */
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
  -webkit-mask: radial-gradient(80% 80% at 50% 50%, #000 0%, transparent 78%);
          mask: radial-gradient(80% 80% at 50% 50%, #000 0%, transparent 78%);
}
.appl__rays {
  position: absolute;
  left: 50%; top: 46%;
  width: min(420px, 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 42%, rgba(255,220,150,0.06) 42.5% 43%, transparent 43.5%),
    radial-gradient(circle, transparent 0 56%, rgba(255,220,150,0.04) 56.5% 57%, transparent 57.5%);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 72%);
          mask: radial-gradient(circle, #000 30%, transparent 72%);
}
.appl__glow {
  position: absolute;
  left: 50%; top: 40%;
  width: min(380px, 96%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* тёплое свечение «горящей идеи» — ярче, с белой сердцевиной */
  background: radial-gradient(closest-side,
      rgba(255,240,210,0.55) 0%,
      rgba(255,210,140,0.38) 28%,
      rgba(255,180,90,0.18) 52%,
      transparent 74%);
  filter: blur(22px);
  pointer-events: none;
  animation: glow-pulse 4.5s var(--ease-in-out) infinite;
}
.appl__bulb {
  position: relative;
  z-index: 1;
  width: min(300px, 74%);
  height: auto;
  filter: drop-shadow(0 28px 56px rgba(0,0,0,0.6))
          drop-shadow(0 0 50px rgba(255,200,120,0.18));
  animation: heart-float 6s var(--ease-in-out) infinite;
}

/* --- Правая часть: крупный нумерованный стек -------------- */
.appl__list { list-style: none; display: flex; flex-direction: column; }
.appl-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  padding: clamp(1rem, 2vh, 1.4rem) clamp(1rem, 1.6vw, 1.4rem);
  border-radius: var(--r-lg);
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.appl-row + .appl-row { margin-top: 0.5rem; }
.appl-row:hover {
  transform: translateX(6px);
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}
/* акцентная вертикальная полоска-маркер слева */
.appl-row__rail {
  width: 3px;
  align-self: stretch;
  margin: 0.2rem 0;
  border-radius: 3px;
  background: var(--grad-text);
  opacity: 0.35;
  transition: opacity var(--t-fast) var(--ease-out);
}
.appl-row:hover .appl-row__rail { opacity: 1; box-shadow: 0 0 14px rgba(255,255,255,0.4); }
.appl-row__num {
  font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  min-width: 2.2ch;
  -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum";
}
.appl-row__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.appl-row__title {
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
}
.appl-row__text {
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.15rem);
  color: var(--text-1);
  line-height: 1.5;
}
/* иконка-чип справа в строке */
.appl-row__ico { flex: 0 0 auto; opacity: 0.55; transition: opacity var(--t-fast) var(--ease-out); }
.appl-row:hover .appl-row__ico { opacity: 1; }

/* --- Рекомендация DevSecOps: чистый абзац с акцентной линией
   (как .lead-prose на слайде 5), без коробки --------------- */
.appl__rec {
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
  max-width: 90ch;
  padding-left: 1.4rem;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #fff, rgba(255,255,255,0.1)) 1;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--text-1);
  line-height: 1.6;
}
.appl__recKicker {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* «Рекомендация» — градиентом, как акцент */
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

@media (max-width: 860px) {
  .appl { grid-template-columns: 1fr; gap: 1.4rem; }
  .appl__visual { min-height: 0; }
  .appl__bulb { width: min(180px, 44%); }
}


/* =============================================================
   10 — ЗАКЛЮЧЕНИЕ: вывод-манифест + roadmap перспектив
   ============================================================= */
.concl {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}

/* --- Левая часть: итог с печатью «Цель достигнута» -------- */
.concl__verdict { position: relative; isolation: isolate; }
/* мягкое свечение за печатью */
.concl__verdict::before {
  content: "";
  position: absolute;
  left: -8%; top: -6%;
  width: 60%; height: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
      rgba(255,255,255,0.10), transparent 70%);
  filter: blur(22px);
}
/* круглая печать-штамп с галочкой */
.concl__seal {
  position: relative;
  width: clamp(96px, 11vw, 132px);
  height: clamp(96px, 11vw, 132px);
  display: grid;
  place-items: center;
  margin-bottom: 1.6rem;
}
/* пунктирное кольцо — появляется (transform) и крутится (rotate-свойство).
   Вращение вынесено в отдельное свойство rotate, чтобы не конфликтовать
   с transform появления. */
.concl__sealRing {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.3);
  opacity: 0;
  transform: scale(0.7);
}
.concl__sealRing::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
}
.slide.is-active .concl__sealRing {
  animation:
    seal-ring-in 700ms var(--ease-out) forwards 200ms,
    seal-ring-spin 14s linear infinite;
}

.concl__sealCore {
  position: relative;
  width: 64%;
  height: 64%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.14), rgba(255,255,255,0.03)),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 36px rgba(255,255,255,0.18);
  opacity: 0;
  transform: scale(0.6);
}
.slide.is-active .concl__sealCore {
  animation: seal-core-in 600ms var(--ease-out) forwards 400ms;
}

/* SVG-печать: окружность прочерчивается, затем галочка */
.concl__sealSvg {
  width: 72%;
  height: 72%;
  overflow: visible;
}
.concl__sealStroke {
  fill: none;
  stroke: rgba(255,255,255,0.85);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}
.concl__sealTick {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.7));
}
.slide.is-active .concl__sealStroke {
  animation: seal-draw 650ms var(--ease-out) forwards 650ms;
}
.slide.is-active .concl__sealTick {
  animation: seal-draw 450ms var(--ease-out) forwards 1150ms;
}
.concl__badge {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-0);
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
}
.concl__quote {
  position: relative;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-0);
  padding-left: 1.4rem;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #fff, rgba(255,255,255,0.1)) 1;
}

/* --- Правая часть: восходящий горизонт перспектив -------- */
.concl__horizon {
  position: relative;
  isolation: isolate;
  padding-left: clamp(1rem, 2vw, 2rem);
}
/* техно-сетка на фоне горизонта — растворяется к краям */
.horizon__mesh {
  position: absolute;
  inset: -10% -6% -10% 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask: radial-gradient(85% 75% at 65% 55%, #000 0%, transparent 80%);
          mask: radial-gradient(85% 75% at 65% 55%, #000 0%, transparent 80%);
}
/* мягкое свечение «рассвета будущего» снизу-справа */
.horizon__glow {
  position: absolute;
  right: -10%; bottom: -12%;
  width: 70%; height: 70%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
      rgba(255,255,255,0.10), rgba(150,160,190,0.06) 45%, transparent 72%);
  filter: blur(20px);
  animation: glow-pulse 6s var(--ease-in-out) infinite;
}
.horizon__title {
  font-size: var(--fs-h3);
  margin-bottom: 1.4rem;
  color: var(--text-1);
}
.horizon { list-style: none; position: relative; display: grid; gap: 0; }
/* вертикальный рельс */
.horizon::before {
  content: "";
  position: absolute;
  left: 7px; top: 14px; bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), #fff);
}
.horizon__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(0.8rem, 1.8vh, 1.4rem) 0;
}
/* каждый следующий пункт чуть «выше/дальше» — лесенка в будущее */
.horizon__item:nth-child(2) { padding-left: clamp(0.6rem, 1.5vw, 1.4rem); }
.horizon__item:nth-child(3) { padding-left: clamp(1.2rem, 3vw, 2.8rem); }
/* точка сидит на рельсе */
.horizon__dot {
  position: relative;
  z-index: 1;
  width: 16px; height: 16px;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--grad-text);
  box-shadow: 0 0 0 5px var(--bg-1), 0 0 22px rgba(255,255,255,0.4);
}
.horizon__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
/* метка времени — горизонтальный бейдж над текстом */
.horizon__tier {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 0.3em 0.8em;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
}
.horizon__text {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 500;
  color: var(--text-0);
  line-height: 1.4;
}
@media (max-width: 820px) {
  .concl { grid-template-columns: 1fr; }
  .horizon__item:nth-child(2),
  .horizon__item:nth-child(3) { padding-left: 0; }
}

/* =============================================================
   ТИТУЛ
   ============================================================= */
/* Титул — широкий двухколоночный: текст слева, картинка справа */
.s-title .slide__inner,
.title-slide {
  width: min(1480px, 100%);
}
.title-slide {
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 3vw, 4rem);
}
.title-slide__text {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Правая колонка — свободно парящий объект (глаз), без рамки */
.title-slide__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 50vh, 540px);
}

/* Концентрические «радарные» кольца — отсылка к сканированию угроз */
.title-slide__rings {
  position: absolute;
  left: 50%; top: 50%;
  width: min(640px, 52vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 28%, rgba(255,255,255,0.05) 28.5% 29%, transparent 29.5%),
    radial-gradient(circle, transparent 0 40%, rgba(255,255,255,0.04) 40.5% 41%, transparent 41.5%),
    radial-gradient(circle, transparent 0 52%, rgba(255,255,255,0.03) 52.5% 53%, transparent 53.5%);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 72%);
          mask: radial-gradient(circle, #000 35%, transparent 72%);
}
/* Тонкое вращающееся кольцо-сканер поверх */
.title-slide__rings::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid transparent;
  background: conic-gradient(from 0deg,
      rgba(255,255,255,0.28), rgba(255,255,255,0) 25%, rgba(255,255,255,0) 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: scan-rot 9s linear infinite;
}

/* Мягкий ореол свечения позади глаза */
.title-slide__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(600px, 50vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
      rgba(255,255,255,0.14) 0%,
      rgba(150,160,190,0.10) 35%,
      rgba(255,255,255,0) 72%);
  filter: blur(14px);
  pointer-events: none;
  animation: glow-pulse 5s var(--ease-in-out) infinite;
}

/* Сам объект — парит и слегка покачивается */
.title-slide__object {
  position: relative;
  z-index: 1;
  width: min(520px, 42vw);
  display: grid;
  place-items: center;
  animation: heart-float 6.5s var(--ease-in-out) infinite;
}
.title-slide__object img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.65))
          drop-shadow(0 0 40px rgba(255,255,255,0.10));
}
/* Лёгкое отражение под объектом */
.title-slide__reflection {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 70%;
  height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}

@media (max-width: 900px) {
  .title-slide { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vh, 2.5rem); }
  .title-slide__text { max-width: none; }
  .title-slide__visual { display: none; }
}

.title-slide__badge {
  display: inline-flex; align-items: center;
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-1);
}
/* небольшая акцентная точка перед текстом вместо иконки */
.title-slide__badge span { position: relative; padding-left: 1rem; }
.title-slide__badge span::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-text);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Заголовок-герой: крупный, уверенный, во всю ширину колонки */
.title-slide h1 {
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: none;
  margin-bottom: clamp(1.8rem, 4vh, 3rem);
}
.title-slide__line { display: block; color: var(--text-0); }
.title-slide__theme {
  display: block;
  margin-top: 0.12em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Структурированный низ: автор + мета в одну линию с разделителем */
.title-slide__foot {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding-top: clamp(1.4rem, 3vh, 2rem);
  border-top: 1px solid var(--line);
}
.author { display: flex; align-items: center; gap: 0.9rem; }
.author__avatar {
  position: relative;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 700; font-size: 1.05rem; color: var(--text-0);
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 22px rgba(255,255,255,0.08);
  flex: 0 0 auto;
}
/* реальное фото поверх инициалов; если файла нет — onerror удаляет img */
.author__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.author__initials {
  position: relative;
  z-index: 0;            /* под фото; виден только если фото нет */
}
.author__meta { display: flex; flex-direction: column; gap: 0.15rem; }
.author__meta b { color: var(--text-0); font-weight: 700; font-size: var(--fs-body); }
.author__role { color: var(--text-2); font-size: 0.92rem; }

/* Мета-блок: ключ/значение колонками */
.title-slide__meta {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  margin-left: auto;
}
.title-slide__metaItem { display: flex; flex-direction: column; gap: 0.2rem; }
.title-slide__metaKey {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.title-slide__metaVal {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-0);
}
.title-slide__metaDiv {
  width: 1px;
  height: 34px;
  background: var(--line-strong);
}
@media (max-width: 560px) {
  .title-slide__meta { margin-left: 0; }
  .title-slide__metaDiv { display: none; }
}

/* =============================================================
   ФИНАЛ
   ============================================================= */
.final-slide { text-align: center; display: grid; place-items: center; }
.final-slide .eyebrow { justify-content: center; }
.final-slide .eyebrow::before { display: none; }

/* Глянцевое 3D-сердечко с подсветкой и парением */
.final-slide__heart {
  position: relative;
  margin-bottom: clamp(2rem, 5vh, 3.4rem);
  display: grid;
  place-items: center;
}
.final-slide__heart::before {
  content: "";
  position: absolute;
  left: 50%; top: 48%;
  width: 240%; height: 240%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
      rgba(255, 255, 255, 0.18),
      rgba(150, 160, 190, 0.10) 40%,
      rgba(255, 255, 255, 0) 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
  animation: glow-pulse 5s var(--ease-in-out) infinite;
}
.final-slide__heart img {
  width: clamp(170px, 22vw, 300px);
  height: auto;
  display: block;
  filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.65))
          drop-shadow(0 0 44px rgba(255, 255, 255, 0.10));
  animation: heart-float 5.5s var(--ease-in-out) infinite,
             heart-beat 2.6s var(--ease-in-out) infinite;
}
/* глянцевая «тень-блик» под сердцем — будто оно парит над полом */
.final-slide__shadow {
  position: absolute;
  left: 50%;
  bottom: clamp(-1.4rem, -2vh, -0.8rem);
  width: clamp(120px, 16vw, 220px);
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,0.22), transparent 75%);
  filter: blur(7px);
  pointer-events: none;
  animation: shadow-breathe 5.5s var(--ease-in-out) infinite;
}

.final-slide h1 {
  font-size: clamp(2.8rem, 1.5rem + 6.5vw, 7rem);
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  line-height: 1;
}
.final-slide__rule {
  margin-top: clamp(1.4rem, 3vh, 2rem);
  width: 88px; height: 3px; border-radius: 3px;
  background: var(--grad-text);
  box-shadow: 0 0 18px rgba(255,255,255,0.3);
}
/* Подпись автора — отдельный блок, прибит к низу слайда на всю ширину.
   Лежит вне .slide__inner, поэтому центровка контента не страдает. */
.final-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vh, 3.5rem) 1rem clamp(1rem, 2vh, 1.5rem);
  pointer-events: none;
}
/* техно-сетка на всю ширину, растворяется кверху и по краям */
.final-foot__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 52px 52px;
  background-position: center bottom;
  -webkit-mask: radial-gradient(120% 110% at 50% 100%, #000 0%, rgba(0,0,0,0.35) 45%, transparent 80%);
          mask: radial-gradient(120% 110% at 50% 100%, #000 0%, rgba(0,0,0,0.35) 45%, transparent 80%);
  pointer-events: none;
}
.final-foot__text {
  position: relative;
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.86rem);
  color: var(--text-3);
  letter-spacing: 0.08em;
}
.final-foot__text b { color: var(--text-1); font-weight: 700; }