/* Taipy - витрина (продуктовые страницы /product/...). Язык «Живая печать»:
   светлый воздух лендинга + три краски ролика + живой интерфейс в сценах.
   Все классы с префиксом vt- (Tailwind на этих страницах не подключается).

   Два мира страницы (HANDOFF-13): шаги человека (бриф, одобрение) - живые
   сцены, где интерфейс стоит в экране устройства; шаги Taipy - печатный стол
   сверху, где модуль напечатан на карточке. Интерфейс в обоих случаях
   кладется по четырем углам экрана или карточки (data-quad, showcase.js). */

:root {
  --vt-paper: #FBFAFF;
  --vt-paper-2: #F4F1FB;
  --vt-surface: #FFFFFF;
  --vt-cream: #F2EDE3;
  --vt-ink: #1C1917;
  --vt-ink-2: rgba(28, 25, 23, .72);
  --vt-ink-3: rgba(28, 25, 23, .56);
  --vt-line: #ECEAFB;
  --vt-line-2: #E1DDF3;

  --vt-indigo: #4F46E5;
  --vt-violet: #7C3AED;
  --vt-pink: #FF48B0;
  --vt-pink-ink: #D6268D;
  --vt-apricot: #F6A04D;
  --vt-apricot-ink: #B8650F;
  --vt-night: #1D1640;
  --vt-night-2: #2A2158;
  --vt-lilac: #8B7CF6;
  --vt-green: #16A34A;

  --vt-grad-text: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #A855F7 100%);
  --vt-grad-btn: linear-gradient(135deg, #4F46E5, #7C3AED 62%, #D16BD6);
  /* кнопка лендинга (.hero-cta-primary): полупрозрачные стопы + стекло */
  --vt-grad-cta: linear-gradient(135deg, rgba(79, 70, 229, .92) 0%, rgba(124, 58, 237, .92) 62%, rgba(209, 107, 214, .92) 100%);
  --vt-grad-cta-hover: linear-gradient(135deg, rgba(79, 70, 229, .98) 0%, rgba(124, 58, 237, .98) 62%, rgba(209, 107, 214, .98) 100%);
  --vt-shadow-1: 0 10px 24px -14px rgba(23, 19, 59, .30);
  --vt-shadow-2: 0 24px 56px -30px rgba(23, 19, 59, .45);
  --vt-shadow-scene: 0 40px 80px -48px rgba(23, 19, 59, .55), 0 12px 28px -20px rgba(23, 19, 59, .25);
  --vt-radius: 20px;
  --vt-ease-in: cubic-bezier(.3, 0, 0, 1);
  --vt-ease-out: cubic-bezier(.3, 0, .8, .15);
  --vt-wrap: 1200px;
  --vt-hdr: var(--site-hdr, 64px);
  --vt-font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 128px; }
html, body { overflow-x: clip; }
body.vt-body {
  margin: 0;
  background: var(--vt-paper);
  color: var(--vt-ink);
  font: 400 16px/1.6 var(--vt-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Сбросы - нулевой специфичности (:where), чтобы любой класс компонента
   их перебивал. Урок v1: `.vt-body a { color: inherit }` (0,1,1) красил
   текст фирменных кнопок-ссылок в черный. */
:where(.vt-body) img { max-width: 100%; display: block; }
:where(.vt-body) a { color: inherit; }
:where(.vt-body) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(.vt-body) :where(ul, ol) { padding: 0; list-style: none; }
:where(.vt-body) :where(h1, h2, h3) { text-wrap: balance; letter-spacing: -.02em; }
:where(.vt-body) p { text-wrap: pretty; }
.vt-wrap { width: 100%; max-width: var(--vt-wrap); margin: 0 auto; padding-inline: 32px; }
.vt-tp {
  background: var(--vt-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vt-skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--vt-ink); color: #fff; padding: 10px 14px; border-radius: 10px;
  text-decoration: none; font-weight: 600; transition: top .2s;
}
.vt-skip:focus { top: 12px; }
.vt-body :focus-visible { outline: 2px solid var(--vt-indigo); outline-offset: 3px; border-radius: 6px; }

/* ---------- печатный слой ---------- */
.vt-grain {
  position: absolute; inset: 0; pointer-events: none;
  background: url("../img/showcase/grain.f1b24d8f9899.png") 0 0 / 128px 128px;
  mix-blend-mode: overlay; opacity: .14;
}

/* ---------- кнопки: ровно токены лендинга ---------- */
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  font: 700 14px/1 var(--vt-font); text-decoration: none; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.vt-btn svg { width: 16px; height: 16px; flex: none; }
.vt-btn--brand {
  color: #fff; background: var(--vt-grad-cta); border-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 28px -10px rgba(124, 58, 237, .45), 0 4px 10px -4px rgba(15, 23, 42, .10);
}
.vt-btn--brand:hover {
  background: var(--vt-grad-cta-hover); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 18px 32px -10px rgba(124, 58, 237, .55), 0 6px 14px -6px rgba(15, 23, 42, .12);
}
.vt-btn--glass {
  color: #1F2937; font-weight: 600; background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .48);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px -6px rgba(15, 23, 42, .08);
}
.vt-btn--glass:hover { background: rgba(255, 255, 255, .55); border-color: rgba(79, 70, 229, .28); color: var(--vt-indigo); transform: translateY(-1px); }
.vt-btn--ghost { color: var(--vt-ink); font-weight: 600; background: #fff; border-color: var(--vt-line-2); box-shadow: 0 6px 16px -12px rgba(23, 19, 59, .35); }
.vt-btn--ghost:hover { border-color: rgba(79, 70, 229, .3); color: var(--vt-indigo); }
.vt-btn--sm { height: 40px; padding: 0 16px; border-radius: 11px; font-size: 13.5px; }

/* иконка в плашке (блок «Дальше» и списки глав) */
.vt-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(79, 70, 229, .08); color: var(--vt-indigo); flex: none; }
.vt-ico svg { width: 18px; height: 18px; }

/* ---------- арт и посадка интерфейса ----------
   .vt-art - плоскость арта в его собственной пропорции (--ar). Углы экранов
   и карточек заданы в процентах этой плоскости, поэтому при любой обрезке
   кадра (cover на первом экране, 4:5 на телефоне) интерфейс едет вместе с
   картинкой. Пока showcase.js не посчитал матрицу, интерфейс не виден:
   без JS экраны остаются пустыми, но ничего не торчит не на своем месте. */
.vt-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #EFE9E2 center / 100% 100% no-repeat; }
.vt-art > picture, .vt-art > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vt-quad { position: absolute; inset: 0; pointer-events: none; }
.vt-quad__ui { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; visibility: hidden; }
.vt-quad__ui.is-fit { visibility: visible; }
/* экран устройства: скругление экрана, тонкая засветка стекла и внутренняя
   тень - в той же матрице, что интерфейс */
.vt-quad--screen .vt-quad__ui { border-radius: var(--r, 18px); background: #F4F2FF; }
.vt-quad--screen .vt-quad__ui::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 20;
  background: linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, 0) 39%);
  box-shadow: inset 0 0 0 1px rgba(20, 16, 40, .10), inset 0 1px 2px rgba(20, 16, 40, .10);
}
/* бумага: модуль напечатан на карточке стола (эталон - глава 5) */
.vt-quad--paper .vt-quad__ui { overflow: visible; mix-blend-mode: multiply; }
/* наклейка: подпись поверх вырезки - обычная краска, без multiply */
.vt-quad--label .vt-quad__ui { overflow: visible; }

/* ---------- первый экран ---------- */
.vt-hero { position: relative; overflow: hidden; background: #F3EEF6; }
.vt-hero__stage { position: absolute; inset: 0; }
.vt-hero__art {
  /* cover без увеличения: арт 2560x1440 ложится по большей стороне, фокус -
     экран телефона (--fx/--fy в долях арта) ставится в точку --px/--py окна */
  --aw: max(100cqw, calc(100cqh * var(--arn)));
  --ah: calc(var(--aw) / var(--arn));
  position: absolute; width: var(--aw); height: var(--ah);
  left: clamp(calc(100cqw - var(--aw)), calc(100cqw * var(--px) - var(--aw) * var(--fx)), 0px);
  top: clamp(calc(100cqh - var(--ah)), calc(100cqh * var(--py) - var(--ah) * var(--fy)), 0px);
}
.vt-hero__copy { position: relative; z-index: 10; }
.vt-glass {
  position: relative;
  background: radial-gradient(85% 60% at 100% 0%, rgba(255, 225, 200, .18) 0%, transparent 55%),
              linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .24) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .44); border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(79, 70, 229, .025),
              0 20px 40px -22px rgba(15, 23, 42, .15), 0 8px 20px -12px rgba(79, 70, 229, .06);
}
.vt-hero__card { width: min(600px, 100%); padding: 28px 30px 24px; }
.vt-hero__h1 { font-size: 36px; font-weight: 650; letter-spacing: -.022em; line-height: 1.12; color: var(--vt-ink); }
.vt-hero__lead { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--vt-ink-2); text-wrap: balance; }
.vt-hero__cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.vt-hero__trust { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; color: rgba(28, 25, 23, .6); }
.vt-marks { display: inline-flex; align-items: center; gap: 6px; }
.vt-mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(28, 25, 23, .06); }
.vt-mark img, .vt-mark svg { width: 16px; height: 16px; }
.vt-hero__trust .vt-sep { width: 1px; height: 16px; background: rgba(28, 25, 23, .14); }
.vt-hero__grain { z-index: 1; }
.vt-hero__steam { position: absolute; z-index: 2; pointer-events: none; filter: blur(3.5px); }
.vt-hero__steam svg { width: 100%; height: 100%; overflow: visible; display: block; }
.vt-hero__steam circle { fill: rgba(255, 255, 255, .92); opacity: 0; transform-origin: center; transform-box: fill-box; animation: vt-steam 4.2s ease-out infinite; }
.vt-hero__steam--light { filter: blur(2.6px) drop-shadow(0 0 3px rgba(84, 62, 150, .38)); }
.vt-hero__steam--light circle { fill: rgba(255, 255, 255, .96); }
.vt-hero__steam circle:nth-child(2) { animation-delay: .45s; }
.vt-hero__steam circle:nth-child(3) { animation-delay: .9s; }
.vt-hero__steam circle:nth-child(4) { animation-delay: 1.35s; }
.vt-hero__steam circle:nth-child(5) { animation-delay: 1.8s; }
.vt-hero__steam circle:nth-child(6) { animation-delay: 2.25s; }
.vt-hero__steam circle:nth-child(7) { animation-delay: 2.7s; }
.vt-hero__steam circle:nth-child(8) { animation-delay: 3.15s; }
.vt-hero__m { display: none; }

/* ---------- жизнь первого экрана (templates/showcase/_amb.html) ----------
   Своя маленькая анимация у каждой сцены: пар, птицы, блики, машины на мосту,
   туман, лепесток. Слой в процентах арта; зоны с движением (полоса моста,
   небо, место падения) - контейнеры, путь в них задан в cqw/cqh, поэтому
   одинаково выглядит и на десктопе, и на телефонном арте. Движение медленное
   и тихое: сцена «дышит», а не отвлекает от карточки. */
.vt-amb { position: absolute; inset: 0; pointer-events: none; }
.vt-amb > * { position: absolute; display: block; }
.vt-amb > script { display: none; }

/* пар прядями: струйка поднимается, колышется (skewX) и тает вверху */
.vt-amb-wisps { filter: blur(1.8px); }
.vt-amb-wisps svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vt-amb-wisps path {
  fill: none; stroke-width: 6; stroke-linecap: round; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: vt-amb-wisp-rise 4.2s ease-in-out infinite; animation-delay: var(--t, 0s);
}
.vt-amb-wisps--light { z-index: 3; /* пар идет на фоне экрана - поверх интерфейса в нем */ filter: blur(1.4px) drop-shadow(0 0 2px rgba(96, 72, 160, .45)) drop-shadow(0 0 6px rgba(120, 96, 190, .25)); }
@keyframes vt-amb-wisp-rise {
  0% { transform: translate(0, 10px) scale(.7, .55) skewX(0); opacity: 0; }
  22% { opacity: 1; }
  50% { transform: translate(calc(var(--dx) * .5), -2px) scale(.95, .95) skewX(-9deg); }
  78% { opacity: .7; }
  100% { transform: translate(var(--dx), -16px) scale(1.2, 1.15) skewX(8deg); opacity: 0; }
}

/* мост: фары спереди, габариты сзади; дальняя полоса - навстречу */
.vt-amb-road {
  container-type: size; overflow: hidden; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.vt-amb-car {
  position: absolute; left: 0; top: 40%; width: var(--cw, 5.4cqw); height: 58cqh;
  animation: vt-amb-drive var(--d, 20s) linear infinite; animation-delay: calc(var(--d, 20s) * var(--o, 0) * -1);
}
.vt-amb-car::before, .vt-amb-car::after { content: ""; position: absolute; top: 0; height: 100%; }
.vt-amb-car::before { right: 0; width: 80%; background: radial-gradient(ellipse 50% 46% at 70% 50%, rgba(255, 248, 228, 1) 0, rgba(255, 242, 208, .9) 10%, rgba(255, 230, 176, .7) 20%, rgba(255, 220, 156, .46) 32%, rgba(255, 214, 146, .22) 48%, rgba(255, 210, 140, .08) 66%, rgba(255, 210, 140, 0) 86%); }
.vt-amb-car::after { left: 0; width: 36%; background: radial-gradient(circle closest-side, rgba(255, 140, 156, .95) 0, rgba(255, 96, 124, .7) 18%, rgba(255, 74, 108, .4) 36%, rgba(255, 70, 104, .16) 58%, rgba(255, 70, 104, 0) 100%); }
.vt-amb-car--back { top: 36%; height: 48cqh; animation-name: vt-amb-drive-back; animation-duration: var(--db, 24s); animation-delay: calc(var(--db, 24s) * var(--o, 0) * -1); opacity: .78; }
.vt-amb-road--mirror {
  transform: scaleY(2); transform-origin: 50% 0; filter: blur(1px); opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 17%, #000 26%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent 17%, #000 26%, #000 94%, transparent);
}
@keyframes vt-amb-drive { from { transform: translateX(-5cqw); } to { transform: translateX(102cqw); } }
@keyframes vt-amb-drive-back { from { transform: translateX(102cqw) scaleX(-1); } to { transform: translateX(-5cqw) scaleX(-1); } }

/* сигнальный огонь на шпиле */
.vt-amb-beacon {
  aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.7); opacity: .2;
  background: radial-gradient(circle, #FFE9F4 0 12%, rgba(255, 86, 170, .95) 22%, rgba(255, 86, 170, .32) 46%, rgba(255, 86, 170, 0) 70%);
  animation: vt-amb-blink 2.8s ease-out infinite;
}
@keyframes vt-amb-blink { 0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.7); } 5% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 24% { opacity: .3; transform: translate(-50%, -50%) scale(.8); } }

/* небо: стая и орел живут в static/js/showcase-amb.js. Птица - та же Lottie,
   что на главной лендинга (bird.json); JS двигает обертку, плеер внутри
   статичен - иначе lottie-player 2.0.8 под transform подмерзает. Птицы
   выходят из-за листвы (маска слева) и летят вправо. */
.vt-amb-sky { container-type: size; overflow: hidden; }
.vt-amb-sky--l {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%);
  mask-image: linear-gradient(90deg, transparent, #000 18%);
}
.vt-amb-bird { position: absolute; left: 0; top: 0; aspect-ratio: 271 / 188; opacity: 0; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .2)); will-change: transform, opacity; }
.vt-amb-bird lottie-player { display: block; width: 100%; height: 100%; }
.vt-amb-film {
  z-index: 3; /* орел летит на зрителя - поверх экранов на столе */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%);
  mask-image: linear-gradient(90deg, transparent, #000 3%);
}

/* блики солнца на воде: четырехлучевая искра загорается и гаснет */
.vt-amb-glint {
  width: var(--gs, 1.8%); aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #fff 0 5%, rgba(255, 252, 236, .75) 10%, rgba(255, 250, 230, .25) 20%, rgba(255, 250, 230, 0) 36%);
  animation: vt-amb-glint 5.6s ease-in-out infinite; animation-delay: var(--t, 0s);
}
.vt-amb-glint::before, .vt-amb-glint::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.vt-amb-glint::before { width: 100%; height: 5%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)); }
.vt-amb-glint::after { width: 5%; height: 76%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)); }
@keyframes vt-amb-glint {
  0%, 72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(22deg); }
  90% { opacity: .35; transform: translate(-50%, -50%) scale(.35) rotate(45deg); }
}

/* туман в долине: пласты «дышат» (плывут, растут, светлеют) и по ним
   медленно тянутся длинные пряди - как туман, который гонит ветер по
   ущелью. Пряди живут в полосе .vt-amb-mist (края растворены маской). */
.vt-amb-fog {
  border-radius: 50%; opacity: .5; filter: blur(2px);
  background: radial-gradient(closest-side, rgba(255, 240, 247, .9), rgba(255, 230, 242, .45) 55%, rgba(255, 230, 242, 0));
  animation: vt-amb-drift var(--d, 24s) ease-in-out infinite alternate; animation-delay: var(--t, 0s);
}
@keyframes vt-amb-drift {
  from { transform: translateX(-26%) scale(.9, .85); opacity: .35; }
  50% { transform: translateX(0) scale(1.12, 1.18); opacity: 1; }
  to { transform: translateX(26%) scale(.95, .9); opacity: .5; }
}
.vt-amb-mist {
  container-type: size; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.vt-amb-wisp {
  position: absolute; left: 0; top: calc(var(--y, 50) * 1cqh); width: var(--w, 34cqw); height: var(--h, 16cqh);
  border-radius: 50%; opacity: 0; filter: blur(3px);
  background: radial-gradient(closest-side, rgba(255, 246, 250, .95), rgba(255, 234, 244, .5) 50%, rgba(255, 234, 244, 0));
  animation: vt-amb-wisp var(--d, 22s) linear infinite; animation-delay: var(--t, 0s);
}
@keyframes vt-amb-wisp {
  0% { transform: translate(-40cqw, 0) scaleY(.7); opacity: 0; }
  18% { opacity: var(--o, .8); }
  50% { transform: translate(35cqw, -6cqh) scaleY(1.15); }
  82% { opacity: var(--o, .8); }
  100% { transform: translate(106cqw, 3cqh) scaleY(.8); opacity: 0; }
}

/* лепесток: срывается с цветка, кружит и ложится на стол */
.vt-amb-fall { container-type: size; }
.vt-amb-petal { position: absolute; left: 0; top: 0; width: var(--pw, 18cqw); height: var(--ph, 13cqw); opacity: 0; animation: vt-amb-fall 17s ease-in-out infinite; animation-delay: var(--t, 1.8s); }
.vt-amb-petal i {
  display: block; width: 100%; height: 100%; border-radius: 58% 42% 62% 38% / 66% 56% 44% 34%;
  background: radial-gradient(120% 95% at 30% 25%, #FFE8F0, #F9AECA 46%, #EC7BA8 100%);
  box-shadow: inset -1px -1px 0 rgba(196, 64, 118, .22);
}
@keyframes vt-amb-fall {
  0% { transform: translate(0, 0) rotate(-10deg) rotateX(0); opacity: 0; }
  3% { opacity: 1; }
  9% { transform: translate(26cqw, 18cqh) rotate(40deg) rotateX(55deg); }
  16% { transform: translate(10cqw, 40cqh) rotate(95deg) rotateX(12deg); }
  23% { transform: translate(38cqw, 62cqh) rotate(150deg) rotateX(60deg); }
  30% { transform: translate(50cqw, 84cqh) rotate(190deg) rotateX(24deg); }
  35%, 56% { transform: translate(58cqw, calc(100cqh - var(--ph, 13cqw))) rotate(205deg) rotateX(66deg); opacity: 1; }
  63%, 100% { transform: translate(58cqw, calc(100cqh - var(--ph, 13cqw))) rotate(205deg) rotateX(66deg); opacity: 0; }
}

/* первый экран ушел из вида - анимации стоят (showcase.js) */
.vt-hero.is-away .vt-amb *, .vt-hero.is-away .vt-amb *::before, .vt-hero.is-away .vt-amb *::after { animation-play-state: paused; }

/* ---------- живой интерфейс: бот в мессенджере ----------
   Рисуется под точную пропорцию экрана (data-ui). Колонка на flex: фото
   поста забирает лишнюю высоту в пределах min/max, поэтому интерфейс
   заполняет экран без обрезки и без пустого низа. Шапка чата - под зоной
   статусной строки; выреза и «острова» нет (в сценах экраны без выреза).
   Сообщение - одна карточка: фото с меткой, пост, панель действий внизу;
   после касания панель спокойно сменяется статусом. */
.vt-bot { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; font-family: var(--vt-font); color: var(--vt-ink);
  background: radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #F2EFFD 0%, #EAE5FA 100%); }
.vt-bot::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(79, 70, 229, .07) 1px, transparent 1.3px) 0 0 / 9px 9px; -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 60%); mask-image: linear-gradient(180deg, transparent 12%, #000 60%); }
.vt-bot > * { position: relative; }
.vt-bot__status { flex: none; height: 7%; min-height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 7% 0 8%; font-size: 11px; font-weight: 650; letter-spacing: -.01em; }
.vt-bot__status svg { height: 9px; width: auto; }
.vt-bot__bar { flex: none; display: flex; flex-direction: column; align-items: center; padding: 3px 0 9px; background: rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(79, 70, 229, .07); }
.vt-bot__bar b { font-size: 13.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.vt-bot__bar span { font-size: 10.5px; color: #8C87A3; line-height: 1.3; }
.vt-bot__feed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 9px 11px; }
.vt-msg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #fff; border-radius: 17px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 19, 59, .06), 0 16px 30px -18px rgba(23, 19, 59, .38); }
.vt-msg__ph { position: relative; flex: 1 1 auto; min-height: 84px; max-height: 210px; background: #D9D3EA center / cover no-repeat; }
.vt-msg__badge { position: absolute; left: 7px; top: 7px; display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px 0 7px; border-radius: 999px; font-size: 10px; font-weight: 650; letter-spacing: -.005em; color: #7A4210; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 12px -6px rgba(20, 16, 40, .45); white-space: nowrap; transition: opacity .35s ease; }
.vt-msg__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--vt-apricot); box-shadow: 0 0 0 3px rgba(246, 160, 77, .22); }
.vt-msg__body { flex: none; display: grid; gap: 3px; padding: 9px 11px 10px; }
.vt-msg__meta { font-size: 10px; font-weight: 500; color: #9A95AE; letter-spacing: .005em; }
.vt-msg h4 { font-size: 15px; font-weight: 700; line-height: 1.22; letter-spacing: -.012em; margin: 1px 0 0; }
.vt-msg__tx { font-size: 12.5px; line-height: 1.4; color: rgba(28, 25, 23, .7); }
.vt-msg__tags { font-size: 11.5px; font-weight: 550; color: var(--vt-indigo); margin-top: 1px; }
.vt-msg__acts { flex: none; position: relative; height: 54px; padding: 0 9px; display: flex; align-items: center; border-top: 1px solid #F0EDF9; }
.vt-acts { position: relative; flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 6px; }
.vt-acts > span:not(.vt-touch) { height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; }
.vt-acts__ok { color: #fff; background: linear-gradient(180deg, #5E56F0 0%, #4F46E5 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 16px -10px rgba(79, 70, 229, .95); }
.vt-acts__no { color: #57526E; background: #F4F2FB; }
.vt-acts__res { position: absolute; inset: 0 10px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; color: var(--vt-ink); opacity: 0; transform: translateY(4px); transition: opacity .45s var(--vt-ease-in), transform .5s var(--vt-ease-in); pointer-events: none; }
.vt-acts__res i { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .12); transform: scale(.6); transition: transform .5s var(--vt-ease-in) .05s; }
.vt-acts__res svg { width: 10px; height: 10px; stroke-width: 3; }
/* крупная версия для телефона: на экране от 13 px в заголовке и 10.5 px в тексте */
.vt-bot--m .vt-bot__status { font-size: 13px; }
.vt-bot--m .vt-bot__status svg { height: 11px; }
.vt-bot--m .vt-bot__bar b { font-size: 16px; }
.vt-bot--m .vt-bot__bar span { font-size: 12px; }
.vt-bot--m .vt-bot__feed { padding: 12px 11px 13px; }
.vt-bot--m .vt-msg { border-radius: 20px; }
.vt-bot--m .vt-msg__ph { max-height: 250px; }
.vt-bot--m .vt-msg__badge { height: 25px; font-size: 12px; padding: 0 10px 0 9px; left: 9px; top: 9px; }
.vt-bot--m .vt-msg__body { padding: 11px 13px 12px; gap: 4px; }
.vt-bot--m .vt-msg__meta { font-size: 12px; }
.vt-bot--m .vt-msg h4 { font-size: 20px; }
.vt-bot--m .vt-msg__tx { font-size: 15.5px; }
.vt-bot--m .vt-msg__tags { font-size: 14.5px; }
.vt-bot--m .vt-msg__acts { height: 66px; padding: 0 11px; }
.vt-bot--m .vt-acts > span:not(.vt-touch) { height: 44px; font-size: 16px; border-radius: 12px; }
.vt-bot--m .vt-acts__res { font-size: 15.5px; gap: 10px; }
.vt-bot--m .vt-acts__res i { width: 24px; height: 24px; }
.vt-bot--m .vt-acts__res svg { width: 13px; height: 13px; }
.vt-touch {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--vt-pink); z-index: 5; pointer-events: none;
  box-shadow: 0 0 0 7px rgba(255, 72, 176, .22), 0 0 0 15px rgba(255, 72, 176, .10);
}

/* ---------- главы ----------
   От 1200 px сцена выходит за сетку к краю окна со своей стороны
   (скругление - только у внутренних углов), текстовая колонка 440 px:
   сцена ~856 px на 1440 и 960 px на 1920. */
.vt-ch { padding-block: clamp(56px, 7vw, 112px); }
.vt-ch__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; max-width: var(--vt-wrap); margin: 0 auto; padding-inline: 32px; }
.vt-ch__text { display: grid; gap: 16px; align-content: center; }
/* кикер главы - в системе сносок главной (.lp-eyebrow): три краски ризографа
   и капс. Горит краска роли шага (индиго - пишет, розовая - ваш шаг,
   абрикос - проверяет), две другие приглушены; номер - тихими цифрами */
.vt-step { display: inline-flex; align-items: center; gap: 12px; font: 700 12px/1.5 var(--vt-font); letter-spacing: .16em; text-transform: uppercase; color: var(--vt-indigo); }
.vt-step b { font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; opacity: .45; margin-right: -2px; }
.vt-step__inks { display: inline-flex; flex: none; }
.vt-step__inks i { width: 9px; height: 9px; border-radius: 50%; mix-blend-mode: multiply; opacity: .28; }
.vt-step__inks i + i { margin-left: -3px; }
.vt-step__inks i:nth-child(1) { background: #4F46E5; }
.vt-step__inks i:nth-child(2) { background: #FF48B0; }
.vt-step__inks i:nth-child(3) { background: #F6A04D; }
.vt-step--indigo .vt-step__inks i:nth-child(1), .vt-step--pink .vt-step__inks i:nth-child(2), .vt-step--apricot .vt-step__inks i:nth-child(3) { opacity: 1; }
.vt-step--pink { color: var(--vt-pink-ink); }
.vt-step--apricot { color: var(--vt-apricot-ink); }
.vt-ch__title { font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; line-height: 1.15; letter-spacing: -.022em; }
.vt-ch__lead { font-size: 17px; line-height: 1.6; color: var(--vt-ink-2); max-width: 30em; }
.vt-ch__quiet { font-size: 14px; line-height: 1.55; color: var(--vt-ink-3); max-width: 30em; }

/* факт-лист: ровные ячейки вместо чипов-«колбас» */
.vt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.vt-facts--rows { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.vt-facts li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 11px; align-items: start; align-content: start; }
.vt-facts__i { grid-row: span 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--vt-indigo); background: rgba(79, 70, 229, .08); }
.vt-facts__i svg { width: 18px; height: 18px; }
.vt-facts b { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.vt-facts li > span:last-child { font-size: 13.5px; line-height: 1.45; color: var(--vt-ink-3); }
.vt-facts em { font-style: normal; color: var(--vt-ink-3); font-weight: 500; }
.vt-facts--pink .vt-facts__i { color: var(--vt-pink-ink); background: rgba(255, 72, 176, .10); }
.vt-facts--apricot .vt-facts__i { color: var(--vt-apricot-ink); background: rgba(246, 160, 77, .16); }

/* сцена главы: арт 3:2 + живой модуль на предмете сцены */
.vt-scene { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: var(--ar, 3 / 2); container-type: size; box-shadow: var(--vt-shadow-scene); background: #EFE9E2; }
.vt-scene .vt-grain { z-index: 3; opacity: .10; }

/* ---------- модули глав ---------- */
.vt-card { background: #fff; border-radius: 18px; box-shadow: var(--vt-shadow-1); border: 1px solid rgba(236, 234, 251, .8); }
.vt-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #4B4665; background: #fff; border: 1px solid var(--vt-line-2); white-space: nowrap; }
.vt-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vt-chip svg { width: 14px; height: 14px; flex: none; }

/* глава 1: экран ноутбука «О чем будете писать?» (дословно из мастера).
   Слева абзац печатается, справа панель кампании: скелет -> строки. */
.vt-lap { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 12px 12px 12px 16px; background: linear-gradient(180deg, #FFFFFF 0%, #F7F5FE 100%); color: var(--vt-ink); }
.vt-lap__brief { min-width: 0; display: flex; flex-direction: column; }
.vt-lap__steps { display: flex; align-items: center; gap: 4px; margin-bottom: 9px; font-size: 10px; font-weight: 600; line-height: 12px; color: var(--vt-ink-3); }
.vt-lap__steps span { margin-right: auto; }
.vt-lap__steps i { width: 14px; height: 3px; border-radius: 2px; background: #E4E0F3; }
.vt-lap__steps i.is-on { background: var(--vt-indigo); }
.vt-lap__q { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.vt-lap__sub { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--vt-ink-3); }
.vt-lap__area { position: relative; margin-top: 9px; flex: 1; min-height: 0; padding: 8px 11px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, .32), 0 0 0 3px rgba(79, 70, 229, .07); font-size: 13.5px; line-height: 1.42; }
.vt-lap__hint { position: absolute; left: 11px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 6px; background: #F4F2FC; font-size: 10px; font-weight: 500; color: var(--vt-ink-3); }
.vt-lap__hint svg { width: 11px; height: 11px; }
.vt-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -3px; margin-left: 1px; background: var(--vt-indigo); animation: vt-caret 1s steps(1) infinite; }
.vt-lap__go { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vt-lap__count { font-size: 10.5px; color: var(--vt-ink-3); font-variant-numeric: tabular-nums; }
.vt-lap__btn { height: 28px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--vt-grad-btn); box-shadow: 0 6px 14px -8px rgba(124, 58, 237, .8); }
.vt-lap__plan { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px 12px 10px; border-radius: 11px; background: #1E1A3D; color: #F1EEFF; box-shadow: 0 14px 26px -18px rgba(23, 19, 59, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.vt-lap__k { font-size: 12px; line-height: 16px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; }
.vt-lap__k i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #86EFAC; display: inline-flex; align-items: center; gap: 5px; }
.vt-lap__k i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.vt-lap__rows { margin-top: 8px; display: grid; }
.vt-lap__row { display: grid; gap: 1px; padding: 6px 0 5px; border-top: 1px solid rgba(241, 238, 255, .09); }
.vt-lap__row > span { font-size: 10px; line-height: 12px; color: rgba(241, 238, 255, .55); }
.vt-lap__row b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.vt-lap__marks { display: inline-flex; gap: 3px; }
.vt-lap__marks img, .vt-lap__marks svg { width: 14px; height: 14px; border-radius: 3.5px; display: block; }
.vt-lap__plan .vt-skel { inset: 40px 12px 12px; justify-content: flex-start; padding-top: 14px; gap: 22px; }
.vt-lap__plan .vt-skel i { background: linear-gradient(90deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .10) 100%); background-size: 200% 100%; }

/* глава 2: тема дня на карточке стола */
.vt-topic { width: 100%; height: 100%; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 12px; color: #221D3A; }
.vt-topic__lbl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-indigo); }
.vt-topic__lbl i { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-indigo); box-shadow: 0 0 0 4px rgba(79, 70, 229, .14); }
.vt-topic h4 { margin-top: 2px; font-size: 21px; font-weight: 750; line-height: 1.22; letter-spacing: -.015em; text-wrap: balance; }
.vt-topic p { font-size: 15px; line-height: 1.5; color: #4B4665; }
.vt-topic p b { color: #221D3A; }
.vt-topic__src { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 14px; border-top: 1px dashed rgba(79, 70, 229, .22); }
.vt-topic__src span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 10px; font-size: 12.5px; font-weight: 650; color: #3F37C9; background: rgba(79, 70, 229, .07); white-space: nowrap; }
.vt-topic__src svg { width: 14px; height: 14px; flex: none; }
/* отметка «просмотрено» на карточках-источниках сцены (печать индиго) */
.vt-src__ok { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--vt-indigo); box-shadow: 1.5px 1.5px 0 rgba(255, 72, 176, .35); }
.vt-src__ok svg { width: 14px; height: 14px; stroke-width: 3; }

/* глава 3: вырезки ваших постов -> голос бренда -> новый пост */
.vt-voice { width: 100%; height: 100%; padding: 17px 16px 14px; display: flex; flex-direction: column; gap: 10px; color: #221D3A; }
.vt-voice__h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-indigo); }
.vt-voice__h svg { width: 15px; height: 15px; }
.vt-voice__row { display: grid; gap: 2px; }
.vt-voice__row span { font-size: 12px; color: #7A7590; }
.vt-voice__row b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.vt-post { width: 100%; height: 100%; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; color: #221D3A; }
.vt-post__hd { display: flex; align-items: center; gap: 10px; }
.vt-post__av { width: 34px; height: 34px; border-radius: 50%; background: center / cover no-repeat; flex: none; }
.vt-post__hd b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.vt-post__hd span { font-size: 12px; color: #8C87A3; }
.vt-post__img { position: relative; flex: 1 1 auto; min-height: 90px; max-height: 210px; border-radius: 13px; overflow: hidden; background: #E3DDF0; }
.vt-post__img > span { position: absolute; inset: 0; background: center / cover no-repeat; }
.vt-post h4 { font-size: 17px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; }
.vt-post p { font-size: 13.5px; line-height: 1.5; color: #3F3B52; }
.vt-post__tags { font-size: 13px; color: var(--vt-indigo); font-weight: 500; }

/* глава 4: оттиск картинки тремя красками на карточке стола + подпись,
   кто сделал картинку («Рисует ИИ» - как в выборе картинок кампании) */
/* правый нижний угол карточки в арте лежит под веером образцов (правее 75%
   и ниже 81% высоты): фото кончается выше, подпись стоит слева */
.vt-proof { width: 100%; height: 100%; padding: 16px; display: grid; grid-template-rows: 298px auto; align-content: start; gap: 14px; color: #221D3A; }
.vt-print { position: relative; min-height: 0; border-radius: 10px; overflow: hidden; background: #E3DDF0; }
.vt-print > span { position: absolute; inset: 0; background: center / cover no-repeat; }
.vt-print__i { filter: grayscale(1) sepia(1) hue-rotate(205deg) saturate(3.2) brightness(1.02); mix-blend-mode: multiply; opacity: 0; }
.vt-print__p { filter: grayscale(1) sepia(1) hue-rotate(290deg) saturate(2.6) brightness(1.12); mix-blend-mode: multiply; opacity: 0; }
.vt-print__a { filter: grayscale(1) sepia(1) hue-rotate(-10deg) saturate(2.4) brightness(1.1); mix-blend-mode: multiply; opacity: 0; }
.vt-proof__cap { display: grid; gap: 3px; justify-items: start; }
.vt-proof__src { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 750; color: var(--vt-pink-ink); }
.vt-proof__src svg { width: 15px; height: 15px; }
.vt-proof__style { font-size: 12.5px; font-weight: 550; color: #6B6590; padding-left: 21px; white-space: nowrap; }

/* глава 5: карточка проверки на печатном столе (эталон) */
.vt-check { width: 100%; height: 100%; padding: 20px 20px 18px; color: #221D3A; }
.vt-check__top { display: flex; justify-content: space-between; align-items: center; }
.vt-stamp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #C9711A; border: 2px solid var(--vt-apricot); border-radius: 999px; padding: 5px 10px; box-shadow: 2px 2px 0 rgba(255, 72, 176, .25); transform: rotate(-2deg); }
.vt-stamp svg { width: 14px; height: 14px; }
.vt-check__tm { font-size: 12px; color: #8C87A3; }
.vt-check h4 { font-size: 18px; font-weight: 800; margin: 16px 0 6px; letter-spacing: -.01em; }
.vt-check__tx { font-size: 13.5px; line-height: 1.45; color: #4B4665; }
.vt-check hr { border: 0; border-top: 1.5px dashed rgba(79, 70, 229, .25); margin: 14px 0 12px; }
.vt-check__list { display: grid; gap: 10px; }
.vt-check__list div { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.vt-check__list i { width: 22px; height: 22px; border-radius: 50%; background: var(--vt-apricot); display: grid; place-items: center; box-shadow: 1.5px 1.5px 0 rgba(79, 70, 229, .35); flex: none; }
.vt-check__list svg { width: 12px; height: 12px; }
.vt-check__ready { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--vt-indigo); display: flex; align-items: center; gap: 6px; }
.vt-check__ready svg { width: 14px; height: 14px; }

/* глава 7: один пост в четырех местах - сайт на ноутбуке и три телефона */
.vt-dev { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; color: var(--vt-ink); }
.vt-dev__hd { flex: none; display: flex; align-items: center; gap: 5px; padding: 8px 8px; border-bottom: 1px solid #EEEBF8; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vt-dev__hd img, .vt-dev__hd svg { width: 15px; height: 15px; flex: none; }
.vt-dev__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 7px 7px 8px; }
.vt-dev__ph { flex: 1 1 auto; min-height: 40px; border-radius: 8px; background: #D9D3EA center / cover no-repeat; }
.vt-dev__body b, .vt-dev__txt b { flex: none; font-size: 13px; line-height: 1.2; }
.vt-dev__line { flex: none; display: block; height: 5px; border-radius: 3px; background: #EDEAF7; }
.vt-dev__ok { flex: none; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 11px; font-weight: 700; color: #9A95B0; white-space: nowrap; transition: color .35s ease, background-color .35s ease; }
/* ваш канал в приложении площадки (телефоны главы 7) */
.vt-app { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--app-bg, #F4F2FC); color: var(--vt-ink); font-family: var(--vt-font); }
.vt-app__status { flex: none; height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 12px; font-size: 9.5px; font-weight: 650; background: #fff; }
.vt-app__status svg { height: 7px; width: auto; }
.vt-app__bar { flex: none; display: grid; gap: 1px; padding: 3px 9px 7px; background: #fff; box-shadow: 0 1px 0 rgba(28, 25, 23, .06); }
.vt-app__bar b { font-size: 11px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.vt-app__bar span { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 550; color: var(--app-ink, #6B4DE6); white-space: nowrap; }
.vt-app__mark { display: grid; place-items: center; width: 11px; height: 11px; flex: none; }
.vt-app__mark img, .vt-app__mark svg { width: 11px; height: 11px; }
.vt-app__feed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 7px 7px 8px; }
.vt-app__post { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 0 0 8px; border-radius: 11px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(23, 19, 59, .06), 0 8px 16px -12px rgba(23, 19, 59, .35); }
.vt-app__ph { flex: 1 1 auto; min-height: 60px; background: #D9D3EA center / cover no-repeat; }
.vt-app__title { flex: none; padding: 0 8px; font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.vt-app__tags { flex: none; padding: 0 8px; font-size: 9.5px; font-weight: 600; color: var(--app-ink, #6B4DE6); }
.vt-app__acts { flex: none; display: flex; gap: 10px; padding: 1px 8px 0; color: #99A2AD; }
.vt-app__acts svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vt-app--vk .vt-app__post { padding-top: 8px; }
.vt-app--vk .vt-app__title { order: -1; }
.vt-app__ok { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 4px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #8C87A3; background: #fff; box-shadow: 0 4px 10px -8px rgba(23, 19, 59, .5); transition: color .35s ease; }
.vt-app__ok i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #C9C5D8; transition: background-color .35s ease; }
.vt-app__ok svg { width: 9px; height: 9px; stroke-width: 3.4; }
.vt-app--max { --app-bg: #F2EFFF; --app-ink: #6246E5; }
.vt-app--telegram { --app-bg: #E8F2F8; --app-ink: #1F88C8; }
.vt-app--vk { --app-bg: #EDEEF0; --app-ink: #2A5885; }
.vt-dev__ok svg { width: 11px; height: 11px; opacity: .5; transition: opacity .35s ease; }
.vt-dev--site .vt-dev__hd { padding: 5px 10px; font-size: 11.5px; }
.vt-dev--site .vt-dev__url { margin-left: auto; font-size: 11px; font-weight: 600; color: #8C87A3; background: #F4F2FC; border-radius: 6px; padding: 2px 8px; }
.vt-dev__row { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; padding: 6px 10px 7px; }
.vt-dev__row .vt-dev__ph { flex: 0 0 34%; min-height: 0; }
.vt-dev__txt { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.vt-dev__txt b { font-size: 13px; }
.vt-dev--site .vt-dev__ok { padding: 3px 8px; border-radius: 999px; background: #F4F2FC; }
.vt-sched { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 11px; padding: 0 16px; color: #221D3A; }
.vt-sched__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vt-sched__k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #221D3A; white-space: nowrap; }
.vt-sched__k svg { width: 15px; height: 15px; color: var(--vt-indigo); }
.vt-sched__tz { font-size: 11px; font-weight: 550; color: #8C87A3; white-space: nowrap; }
.vt-sched__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.vt-sched__week span { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 11.5px; font-weight: 650; color: #A9A4BD; background: #F4F2FB; }
.vt-sched__week span.is-on { color: #fff; background: linear-gradient(180deg, #5E56F0 0%, #4F46E5 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 12px -8px rgba(79, 70, 229, .9); }
.vt-sched__time { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6B6590; white-space: nowrap; }
.vt-sched__time svg { width: 14px; height: 14px; color: var(--vt-indigo); flex: none; }
.vt-sched__time b { font-size: 12.5px; font-weight: 700; color: #221D3A; }

/* глава 8: оценка, план улучшения и строка журнала */
.vt-rate { width: 100%; height: 100%; padding: 15px 14px; display: flex; flex-direction: column; gap: 12px; color: #221D3A; }
.vt-rate__post { display: grid; grid-template-columns: 56px 1fr; gap: 11px; align-items: center; }
.vt-rate__post span { height: 56px; border-radius: 11px; background: center / cover no-repeat; }
.vt-rate__post b { font-size: 14px; font-weight: 700; display: block; line-height: 1.25; }
.vt-rate__post small { font-size: 12px; color: #8C87A3; }
.vt-rate__btns { display: flex; gap: 8px; position: relative; }
.vt-rate__btns div { flex: 1; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #4B4665; background: #fff; border: 1px solid var(--vt-line-2); }
.vt-rate__btns svg { width: 16px; height: 16px; }
.vt-rate__why { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-rate__why .vt-chip { height: 27px; font-size: 12.5px; padding: 0 10px; }
.vt-ap { width: 100%; height: 100%; padding: 15px 14px; display: flex; flex-direction: column; gap: 11px; color: #221D3A; }
.vt-ap__h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-indigo); }
.vt-ap__h svg { width: 16px; height: 16px; }
.vt-ap__field { font-size: 13px; color: #6B6590; }
.vt-ap__field b { color: #221D3A; font-weight: 700; }
.vt-ap__swap { display: grid; gap: 5px; }
.vt-ap__was { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #8C87A3; background: #F4F2FC; border-radius: 10px; padding: 8px 11px; white-space: nowrap; }
.vt-ap__arr { justify-self: center; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--vt-indigo); background: rgba(79, 70, 229, .10); }
.vt-ap__arr svg { width: 13px; height: 13px; stroke-width: 2.4; }
.vt-ap__now { font-size: 13px; font-weight: 700; line-height: 1.25; color: #3F37C9; background: rgba(79, 70, 229, .07); border: 1.5px solid rgba(79, 70, 229, .45); border-radius: 10px; padding: 7px 11px; box-shadow: 2px 2px 0 rgba(255, 72, 176, .18); }
.vt-ap__why { font-size: 13px; line-height: 1.45; color: #4B4665; }
.vt-ap__go { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.vt-ap__apply { height: 36px; padding: 0 18px; border-radius: 10px; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--vt-indigo); }
.vt-ap__done { display: none; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #15803D; }
.vt-ap__done svg { width: 16px; height: 16px; }
.vt-jline { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr 1fr; align-items: end; padding: 0 2px; font-size: 13px; line-height: 1; color: #2B2560; white-space: nowrap; }
.vt-jline > span { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 4px; }
.vt-jline i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--vt-indigo); flex: none; }
.vt-jline i svg { width: 9px; height: 9px; stroke-width: 3.4; }
.vt-jline time { font-weight: 700; color: var(--vt-indigo); }

/* ---------- интерлюдия: дальше - мир Taipy ---------- */
.vt-inter { padding-block: clamp(44px, 5vw, 76px); text-align: center; background: linear-gradient(180deg, rgba(243, 239, 252, 0) 0%, #F3EFFC 28%, #F3EFFC 72%, rgba(243, 239, 252, 0) 100%); }
.vt-inter__t { font-size: clamp(22px, 2.1vw, 28px); font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.vt-inter__t span { color: var(--vt-ink-3); }
.vt-inks { margin-top: 22px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.vt-inks li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--vt-ink-2); }
.vt-ink { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--c); flex: none; }
.vt-ink::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.4px) 0 0 / 4px 4px; }
.vt-ink::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c); transform: translate(3px, -2px); opacity: .5; }

/* ---------- «Ваших шагов два» ---------- */
.vt-two { padding-block: clamp(64px, 8vw, 112px); }
.vt-sec-head { display: grid; gap: 12px; margin-bottom: 36px; max-width: 720px; }
.vt-sec-head--c { text-align: center; justify-items: center; margin-inline: auto; }
.vt-sec-head h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; line-height: 1.15; letter-spacing: -.022em; }
.vt-sec-head p { font-size: 17px; line-height: 1.6; color: var(--vt-ink-2); }
.vt-split { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--vt-line); box-shadow: var(--vt-shadow-2); }
.vt-split__k { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vt-split__k b { font-size: 34px; font-weight: 700; letter-spacing: -.03em; text-transform: none; line-height: 1; }
.vt-split__you { position: relative; padding: 34px 32px; display: flex; flex-direction: column; background: linear-gradient(160deg, #FFF6FB 0%, #FFEFF8 100%); border-right: 1px solid rgba(255, 72, 176, .14); color: var(--vt-pink-ink); }
.vt-split__you ol { flex: 1; margin-top: 26px; display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.vt-split__you li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-content: start; color: var(--vt-ink); }
.vt-split__you li i { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 700; color: #fff; background: var(--vt-pink); box-shadow: 0 0 0 5px rgba(255, 72, 176, .14); }
.vt-split__you li b { font-size: 16.5px; font-weight: 650; line-height: 1.3; }
.vt-split__you li span { font-size: 14px; line-height: 1.5; color: var(--vt-ink-3); }
.vt-split__taipy { position: relative; padding: 34px 32px; background: linear-gradient(160deg, #F7F6FF 0%, #F1EFFF 100%); color: var(--vt-indigo); overflow: hidden; }
.vt-split__taipy ul { position: relative; z-index: 2; margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; max-width: calc(100% - 200px); }
.vt-split__taipy li { display: grid; gap: 4px; align-content: start; color: var(--vt-ink); }
.vt-split__taipy li svg { width: 22px; height: 22px; color: var(--vt-indigo); margin-bottom: 6px; }
.vt-split__taipy li b { font-size: 15.5px; font-weight: 650; }
.vt-split__taipy li span { font-size: 13.5px; line-height: 1.45; color: var(--vt-ink-3); }
.vt-split__layers { position: absolute; right: 26px; top: 50%; width: 190px; height: auto; transform: translateY(-50%); z-index: 1; filter: drop-shadow(0 18px 26px rgba(79, 70, 229, .14)); }

/* ---------- два способа ---------- */
.vt-modes { padding-block: 0 clamp(64px, 8vw, 112px); }
.vt-sec-head__note { font-size: 14px !important; color: var(--vt-ink-3) !important; }
.vt-modes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.vt-mode { border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--vt-line); box-shadow: var(--vt-shadow-2); display: flex; flex-direction: column; }
.vt-mode__art { position: relative; aspect-ratio: 16 / 9; background: #EFE9E2 center / cover no-repeat; overflow: hidden; }
.vt-mode__art picture, .vt-mode__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-mode__body { padding: 26px 28px 28px; display: grid; gap: 10px; }
.vt-mode h3 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.vt-mode p { font-size: 15.5px; line-height: 1.55; color: var(--vt-ink-2); }
.vt-mode ul { margin-top: 8px; display: grid; gap: 10px; }
.vt-mode li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.vt-mode li span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--vt-indigo); background: rgba(79, 70, 229, .08); flex: none; }
.vt-mode li svg { width: 17px; height: 17px; }

/* ---------- старт ---------- */
.vt-start { padding-block: clamp(56px, 7vw, 96px); }
.vt-start__box { position: relative; overflow: hidden; border-radius: 30px; padding: clamp(28px, 5vw, 56px); background: linear-gradient(135deg, #221A5E 0%, #3B2596 55%, #6A37C4 100%); color: #fff; isolation: isolate; }
.vt-start__box h2 { position: relative; z-index: 2; font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; letter-spacing: -.022em; }
.vt-start__steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 30px; max-width: 900px; }
.vt-start__steps div { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); display: grid; gap: 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vt-start__steps b { font-size: 16px; font-weight: 650; }
.vt-start__steps span { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.vt-start__steps i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-bottom: 4px; color: #1D1640; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.vt-start__steps a { color: #fff; }
.vt-start__cta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.vt-start__cta .vt-btn--brand { background: #fff; color: #3B2F99; border-color: #fff; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5); }
.vt-start__cta .vt-btn--brand:hover { background: #fff; }
.vt-start__note { font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.vt-start__box .vt-grain { opacity: .10; z-index: 1; }
/* ночная печатная фактура ролика: светящиеся растровые круги и кольцо */
.vt-halftone { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(var(--c) 1.9px, transparent 2.4px) 0 0 / 10px 10px; -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 76%); mask-image: radial-gradient(closest-side, #000 66%, transparent 76%); filter: drop-shadow(0 0 5px var(--c)); opacity: .72; }
.vt-halftone--pink { --c: #FF5CB8; width: 270px; height: 270px; right: -46px; top: -78px; }
.vt-halftone--apricot { --c: #F6A04D; width: 140px; height: 140px; right: 236px; top: -34px; opacity: .66; }
.vt-halftone--lilac { --c: #9C8CFF; width: 240px; height: 240px; right: 58px; bottom: -128px; opacity: .55; }
.vt-start__box::before { content: ""; position: absolute; z-index: 1; width: 380px; height: 380px; right: -104px; top: -132px; border-radius: 50%; border: 2px dotted rgba(255, 92, 184, .42); pointer-events: none; }
.vt-start__box::after { content: ""; position: absolute; z-index: 1; width: 300px; height: 300px; right: 40px; bottom: -190px; border-radius: 50%; border: 2px dotted rgba(246, 160, 77, .35); pointer-events: none; }

/* ---------- FAQ ---------- */
.vt-faq { padding-block: clamp(56px, 7vw, 96px); }
.vt-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.vt-faq__head { display: grid; gap: 12px; align-content: start; }
.vt-faq__head h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; letter-spacing: -.022em; line-height: 1.15; }
.vt-faq__head p { font-size: 16px; line-height: 1.6; color: var(--vt-ink-2); }
.vt-faq__ask { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--vt-indigo); text-decoration: none; }
.vt-faq__ask svg { width: 17px; height: 17px; }
.vt-faq__ask:hover { text-decoration: underline; text-underline-offset: 4px; }
.vt-faq__list { display: grid; gap: 10px; }
.vt-faq details { border-radius: 16px; background: #fff; border: 1px solid var(--vt-line); transition: border-color .2s ease, box-shadow .2s ease; }
.vt-faq details[open] { border-color: rgba(79, 70, 229, .22); box-shadow: 0 14px 30px -24px rgba(23, 19, 59, .45); }
.vt-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 16px; font-weight: 600; }
.vt-faq summary::-webkit-details-marker { display: none; }
.vt-faq summary svg { width: 18px; height: 18px; flex: none; color: var(--vt-ink-3); transition: transform .2s; }
.vt-faq details[open] summary svg { transform: rotate(45deg); color: var(--vt-indigo); }
.vt-faq details p { padding: 0 20px 18px; color: var(--vt-ink-2); font-size: 15.5px; line-height: 1.6; max-width: 680px; }

/* ---------- дальше: как пункты мега-меню ---------- */
.vt-next { padding-block: 0 clamp(64px, 8vw, 104px); }
.vt-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vt-next a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 18px 18px 18px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--vt-line); text-decoration: none; transition: border-color .2s ease, transform .25s var(--vt-ease-in), box-shadow .25s ease; }
.vt-next a:hover { border-color: rgba(79, 70, 229, .3); transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(23, 19, 59, .5); }
.vt-next .vt-ico { width: 44px; height: 44px; border-radius: 13px; }
.vt-next .vt-ico svg { width: 21px; height: 21px; }
.vt-next b { display: block; font-size: 16px; font-weight: 650; }
.vt-next b { color: var(--vt-ink); }
.vt-next__hint { display: block; font-size: 13.5px; line-height: 1.45; color: var(--vt-ink-3); margin-top: 2px; }
.vt-next__arr { width: 18px; height: 18px; color: rgba(28, 25, 23, .35); transition: transform .25s var(--vt-ease-in), color .2s ease; }
.vt-next a:hover .vt-next__arr { transform: translateX(3px); color: var(--vt-indigo); }

/* ---------- анимация ----------
   Текст глав виден всегда. Скрытые стартовые состояния включаются только с
   классом vt-js на <html> и касаются живых модулей сцен. Без JS и при
   reduced-motion - финальный кадр. */
@keyframes vt-caret { 50% { opacity: 0; } }
@keyframes vt-tap { 0% { transform: scale(.4); opacity: 0; } 35% { transform: scale(1.15); opacity: 1; } 60% { transform: scale(.92); } 100% { transform: scale(1); opacity: 1; } }
@keyframes vt-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 72, 176, .45), 0 0 0 0 rgba(255, 72, 176, .2); } 100% { box-shadow: 0 0 0 14px rgba(255, 72, 176, 0), 0 0 0 26px rgba(255, 72, 176, 0); } }
@keyframes vt-steam { 0% { opacity: 0; transform: translate(0, 0) scale(.35); } 12% { opacity: .75; transform: translate(calc(var(--dx) * .2), -6px) scale(.6); } 45% { opacity: .55; transform: translate(calc(var(--dx) * .6), -25px) scale(1.3); } 75% { opacity: .28; transform: translate(var(--dx), -44px) scale(1.9); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.4), -60px) scale(2.4); } }
@keyframes vt-shimmer { to { background-position: -200% 0; } }
@keyframes vt-ink-in { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vt-reg { 0% { transform: translate(9px, -7px); opacity: 0; } 40% { opacity: .6; } 100% { transform: translate(3px, -2px); opacity: .5; } }

/* сцена появляется коротко (400 мс) - LQIP под ней, пустых коробок нет */
.vt-js .vt-scene { transform: translateY(14px); transition: transform .4s var(--vt-ease-in); }
.vt-js .vt-scene.is-in { transform: none; }

/* первый экран: сообщение приходит, касание «Одобрить», строка «Выйдет...» */
.vt-js [data-steps] .vt-msg { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .5s var(--vt-ease-in), transform .65s var(--vt-ease-in); }
.vt-js [data-steps].is-a .vt-msg { opacity: 1; transform: none; }
.vt-js [data-steps] .vt-touch { opacity: 0; }
.vt-js [data-steps].is-b .vt-acts .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
.vt-acts { transition: opacity .3s ease, transform .35s var(--vt-ease-in); }
[data-steps].is-c .vt-acts { opacity: 0; transform: translateY(-4px); }
[data-steps].is-c .vt-acts__res { opacity: 1; transform: none; }
[data-steps].is-c .vt-acts__res i { transform: none; }
[data-steps].is-c .vt-msg__badge { opacity: 0; }

/* глава 1: абзац печатается, затем справа собирается кампания */
.vt-fillbox { position: relative; }
.vt-skel { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; gap: 12px; pointer-events: none; }
.vt-skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #EDEAF8 0%, #F8F6FE 50%, #EDEAF8 100%); background-size: 200% 100%; animation: vt-shimmer 1.4s linear infinite; }
.vt-js .vt-fillbox .vt-skel { display: flex; transition: opacity .35s ease; }
.vt-js .vt-fillbox .vt-fill { opacity: 0; transition: opacity .55s var(--vt-ease-in) .1s; }
.vt-js [data-steps].is-b .vt-fillbox--b .vt-skel, .vt-js [data-steps].is-c .vt-fillbox--c .vt-skel { opacity: 0; }
.vt-js [data-steps].is-b .vt-fillbox--b .vt-fill, .vt-js [data-steps].is-c .vt-fillbox--c .vt-fill { opacity: 1; }
.vt-js [data-steps] .vt-lap__k i { opacity: 0; transition: opacity .4s ease .5s; }
.vt-js [data-steps].is-b .vt-lap__k i { opacity: 1; }

/* глава 2: тема дня собирается по строкам */
.vt-js [data-steps] .vt-topic > * { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-d .vt-topic > :nth-child(1),
.vt-js [data-steps].is-e .vt-topic > :nth-child(2),
.vt-js [data-steps].is-e .vt-topic > :nth-child(3),
.vt-js [data-steps].is-f .vt-topic > :nth-child(4) { opacity: 1; transform: none; }
.vt-js [data-steps] .vt-src__ok { opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .45s var(--vt-ease-in); }
.vt-js [data-steps].is-a .vt-src-1 .vt-src__ok,
.vt-js [data-steps].is-b .vt-src-2 .vt-src__ok,
.vt-js [data-steps].is-c .vt-src-3 .vt-src__ok { opacity: 1; transform: none; }

/* глава 3: чипы на вырезках -> голос бренда -> новый пост оттиском */
.vt-js [data-steps] .vt-voice > * { opacity: 0; transition: opacity .45s var(--vt-ease-in); }
.vt-js [data-steps].is-b .vt-voice > * { opacity: 1; }
.vt-js [data-steps].is-b .vt-voice > :nth-child(2) { transition-delay: .15s; }
.vt-js [data-steps].is-b .vt-voice > :nth-child(3) { transition-delay: .3s; }
.vt-js [data-steps].is-b .vt-voice > :nth-child(4) { transition-delay: .45s; }
.vt-js [data-steps].is-b .vt-voice > :nth-child(5) { transition-delay: .6s; }
.vt-js [data-steps] .vt-post > :not(.vt-post__body) { opacity: 0; transition: opacity .5s var(--vt-ease-in); }
.vt-js [data-steps].is-c .vt-post > * { opacity: 1; }

/* глава 4: три краски садятся в приводку, затем чип стиля */
.vt-js .vt-print > span { transition: transform .9s var(--vt-ease-in), opacity .6s ease; }
.vt-js .vt-print__i { transform: translate(-10px, -6px); }
.vt-js .vt-print__p { transform: translate(9px, 5px); }
.vt-js .vt-print__a { transform: translate(-6px, 8px); }
.vt-js .vt-print__full { opacity: 0; }
.vt-js [data-steps].is-a .vt-print__i { opacity: .95; transform: translate(-3px, -2px); }
.vt-js [data-steps].is-b .vt-print__p { opacity: .85; transform: translate(3px, 2px); }
.vt-js [data-steps].is-b .vt-print__a { opacity: .7; transform: translate(-2px, 3px); }
.vt-js [data-steps].is-c .vt-print__i, .vt-js [data-steps].is-c .vt-print__p, .vt-js [data-steps].is-c .vt-print__a { opacity: 0; transform: none; }
.vt-js [data-steps].is-c .vt-print__full { opacity: 1; }
.vt-js [data-steps] .vt-proof__cap { opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .45s var(--vt-ease-in); }
.vt-js [data-steps].is-d .vt-proof__cap { opacity: 1; transform: none; }

/* глава 5: строки проверки загораются по очереди, затем штамп */
.vt-js [data-steps] .vt-check__list > div { opacity: 0; transform: translateX(-6px); transition: opacity .45s var(--vt-ease-in), transform .5s var(--vt-ease-in); }
.vt-js [data-steps].is-a .vt-check__list > div:nth-child(1),
.vt-js [data-steps].is-b .vt-check__list > div:nth-child(2),
.vt-js [data-steps].is-c .vt-check__list > div:nth-child(3) { opacity: 1; transform: none; }
.vt-js [data-steps] .vt-check .vt-stamp { opacity: 0; transform: rotate(-2deg) scale(1.25); transition: opacity .35s ease, transform .45s var(--vt-ease-in); }
.vt-js [data-steps].is-d .vt-check .vt-stamp { opacity: 1; transform: rotate(-2deg); }
.vt-js [data-steps] .vt-check__ready { opacity: 0; transition: opacity .5s ease .2s; }
.vt-js [data-steps].is-d .vt-check__ready { opacity: 1; }

/* глава 7: «Опубликовано» загорается по очереди */
[data-steps].is-a .vt-pub-1 .vt-dev__ok { color: #15803D; background: #E7FAEF; }
[data-steps].is-b .vt-pub-2 .vt-app__ok, [data-steps].is-c .vt-pub-3 .vt-app__ok, [data-steps].is-d .vt-pub-4 .vt-app__ok { color: #15803D; }
[data-steps].is-b .vt-pub-2 .vt-app__ok i, [data-steps].is-c .vt-pub-3 .vt-app__ok i, [data-steps].is-d .vt-pub-4 .vt-app__ok i { background: #16A34A; }
[data-steps].is-a .vt-pub-1 .vt-dev__ok svg { opacity: 1; }

/* глава 8: оценка -> план -> «Применено» -> строка журнала */
.vt-js [data-steps].is-b .vt-rate__why .vt-chip.is-pick { color: #fff; background: var(--vt-indigo); border-color: var(--vt-indigo); transition: background-color .3s ease .5s, color .3s ease .5s; }
.vt-js [data-steps] .vt-rate .vt-touch { left: 95%; top: 22%; }
.vt-js [data-steps].is-a .vt-rate .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
.vt-js [data-steps].is-c .vt-ap .vt-touch { animation: vt-tap .55s var(--vt-ease-in) .9s forwards; }
.vt-js [data-steps].is-d .vt-ap .vt-touch { opacity: 0 !important; animation: none; }
[data-steps].is-d .vt-ap__apply { display: none; }
[data-steps].is-d .vt-ap__done { display: inline-flex; }
.vt-js [data-steps] .vt-jline > * { opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-e .vt-jline > * { opacity: 1; transform: none; }

/* интерлюдия: одно печатное движение при входе */
.vt-js .vt-inter .vt-ink { opacity: 0; }
.vt-js .vt-inter .vt-ink::after { opacity: 0; }
.vt-js .vt-inter.is-in .vt-ink { animation: vt-ink-in .6s var(--vt-ease-in) forwards; }
.vt-js .vt-inter.is-in .vt-ink::after { animation: vt-reg .8s var(--vt-ease-in) .25s forwards; }
.vt-js .vt-inter.is-in li:nth-child(2) .vt-ink, .vt-js .vt-inter.is-in li:nth-child(2) .vt-ink::after { animation-delay: .12s, .37s; }
.vt-js .vt-inter.is-in li:nth-child(3) .vt-ink, .vt-js .vt-inter.is-in li:nth-child(3) .vt-ink::after { animation-delay: .24s, .49s; }

@media (prefers-reduced-motion: reduce) {
  .vt-js *, .vt-js *::before, .vt-js *::after { transition: none !important; animation: none !important; }
  .vt-caret { display: none; }
  .vt-js .vt-inter .vt-ink, .vt-js .vt-inter .vt-ink::after { opacity: 1; }
  .vt-js .vt-inter .vt-ink::after { opacity: .5; transform: translate(3px, -2px); }
  .vt-hero__steam, .vt-amb { display: none; }
}

/* ---------- адаптив ---------- */
@media (min-width: 1200px) {
  /* первый экран - контейнер: арт и карточка считают одну геометрию.
     Карточка стоит по центру высоты на спокойной стене слева (левые 40%
     арта), не заходит на чашку и не прилипает к краю окна */
  .vt-hero { height: clamp(640px, calc(100svh - var(--vt-hdr)), 940px); container-type: size; }
  .vt-hero__copy.vt-wrap {
    position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; display: flex; align-items: center;
    --aw: max(100cqw, calc(100cqh * 1.7778));
    --al: clamp(calc(100cqw - var(--aw)), calc(100cqw * .78 - var(--aw) * .694), 0px);
    --wall: calc(var(--al) + var(--aw) * .4);
    --cw: min(580px, calc(var(--wall) - 40px));
  }
  .vt-hero__copy > .vt-hero__card { width: var(--cw); margin-left: max(24px, calc((var(--wall) - var(--cw)) / 2)); }
  .vt-hero__h1 { font-size: clamp(28px, 2.5vw, 36px); }
}
@media (min-width: 1200px) {
  .vt-ch__grid {
    max-width: none; padding-inline: 0; column-gap: 0;
    grid-template-columns: [full-start] minmax(24px, 1fr) [text-start] minmax(0, 440px) [text-end] 64px [scene-start] minmax(0, 776px) [scene-end] minmax(24px, 1fr) [full-end];
  }
  .vt-ch__text { grid-column: text; grid-row: 1; }
  .vt-ch__grid > .vt-scene { grid-column: scene-start / full-end; grid-row: 1; width: 100%; max-width: 960px; justify-self: start; border-radius: 28px 0 0 28px; }
  .vt-ch--flip .vt-ch__grid { grid-template-columns: [full-start] minmax(24px, 1fr) [scene-start] minmax(0, 776px) [scene-end] 64px [text-start] minmax(0, 440px) [text-end] minmax(24px, 1fr) [full-end]; }
  .vt-ch--flip .vt-ch__grid > .vt-scene { grid-column: full-start / scene-end; justify-self: end; border-radius: 0 28px 28px 0; }
}
@media (min-width: 1649px) {
  .vt-ch__grid > .vt-scene, .vt-ch--flip .vt-ch__grid > .vt-scene { border-radius: 28px; }
}
@media (min-width: 1024px) {
  .vt-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
  .vt-faq__head { position: sticky; top: 140px; }
}
@media (max-width: 1100px) {
  .vt-split { grid-template-columns: minmax(0, 1fr); }
  .vt-split__you { border-right: 0; border-bottom: 1px solid rgba(255, 72, 176, .14); }
}
@media (max-width: 1199px) {
  .vt-hero { background: linear-gradient(180deg, #FBF8FF 0%, #F4EEFB 70%, #EFE8F6 100%); }
  .vt-hero__stage { display: none; }
  .vt-hero__copy { display: block; height: auto; padding-top: 28px; }
  .vt-hero__card { width: 100%; max-width: 620px; margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; }
  .vt-hero__cta, .vt-hero__trust { justify-content: center; }
  .vt-hero__m { display: block; position: relative; margin: 26px auto 0; width: 100%; max-width: 560px; aspect-ratio: 1152 / 1413; overflow: hidden; container-type: size; }
  .vt-hero__m .vt-art { top: -24.6%; height: auto; aspect-ratio: 1152 / 2048; }
  .vt-hero__m::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px; z-index: 4; background: linear-gradient(180deg, #F5F0FB, rgba(245, 240, 251, 0)); pointer-events: none; }
  .vt-hero__m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 4; background: linear-gradient(0deg, var(--vt-paper), rgba(251, 250, 255, 0)); pointer-events: none; }
}
@media (min-width: 561px) and (max-width: 1199px) {
  .vt-hero__m { border-radius: 26px 26px 0 0; }
}
@media (max-width: 959px) {
  .vt-ch__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .vt-ch__text { max-width: 620px; }
  .vt-modes__grid, .vt-start__steps, .vt-next__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .vt-wrap { padding-inline: 20px; }
  html { scroll-padding-top: 124px; }
}
@media (max-width: 639px) {
  .vt-wrap, .vt-ch__grid { padding-inline: 16px; }
  .vt-hero__h1 { font-size: 28px; }
  .vt-hero__lead { font-size: 16px; }
  .vt-hero__cta .vt-btn { flex: 1 1 100%; height: 50px; }
  .vt-ch__title { font-size: 26px; }
  .vt-ch__lead { font-size: 16px; }
  .vt-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* сцена на телефоне - на всю ширину, в своем кадре (--m-ar) с фокусом на
     поверхности (--fx): арт ложится по высоте кадра, модуль едет с ним */
  .vt-ch__grid > .vt-scene { margin-inline: -16px; border-radius: 0; aspect-ratio: var(--m-ar, 4 / 5); box-shadow: none; }
  .vt-ch__grid > .vt-scene .vt-art {
    --aw: calc(100cqh * var(--arn));
    width: var(--aw); height: 100%;
    left: clamp(calc(100cqw - var(--aw)), calc(50cqw - var(--aw) * var(--fx, .5)), 0px);
  }
  .vt-split__you, .vt-split__taipy { padding: 26px 20px; }
  .vt-split__taipy ul { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 14px; }
  .vt-split__taipy li { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; }
  .vt-split__taipy li svg { grid-row: span 2; margin: 1px 0 0; }
  .vt-split__layers { display: none; }
  .vt-mode__body { padding: 22px 20px 24px; }
  .vt-faq summary { font-size: 15.5px; padding: 16px; }
  .vt-faq details p { padding: 0 16px 16px; }
  .vt-halftone--pink { width: 240px; height: 240px; right: -80px; top: -80px; }
  .vt-halftone--apricot, .vt-halftone--lilac { display: none; }
}
@media (max-width: 380px) {
  .vt-hero__h1 { font-size: 26px; }
}