/* Страница «Разработка программного обеспечения». Свой визуальный язык:
   левый край и крупный гротеск, тонкие линии, моноширинные метки, настоящие
   устройства и живые схемы вместо ровного ряда карточек. */

:root {
  /* Размер флага языка и кнопок шапки — как на главной (общий subpages.css задаёт его только до 1180px). */
  --footer-meta-font-size: clamp(0.54rem, 0.72vw, 0.72rem);
  --ink: #f3f2ed;
  --ink-2: rgba(243, 242, 237, 0.62);
  --ink-3: rgba(243, 242, 237, 0.38);
  --line: rgba(243, 242, 237, 0.13);
  --bg: #060607;
  --paper: #d8d5ce;
  --dark: #0b0b0d;
  --wallet: #4c86ff;
  --legal: #34d399;
  --go: #5dea9c;
  --stop: #ff6257;
  --sans: "Onest", "SF Pro Display", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Плавности появления: длинный мягкий выход, как у Apple и Linear. */
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --io: cubic-bezier(0.65, 0, 0.35, 1);
}

html, body { background: var(--bg); color: var(--ink); }
/* Страница заканчивается подвалом: без поля браузера и без нижнего отступа,
   который общая мобильная вёрстка подпроектов добавляет сцене. */
body { margin: 0; }
html.is-mobile-preview body.is-mobile-layout.is-project-page .subpage-stage.dv { padding-bottom: 0 !important; }
html { scroll-behavior: smooth; }

.dv, .dv * { box-sizing: border-box; }
.subpage-stage.dv {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.subpage-stage.dv::before, .subpage-stage.dv::after { display: none; }
:where(.dv) :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.dv) :where(ul, ol) { list-style: none; }
:where(.dv) a { color: inherit; text-decoration: none; }
:where(.dv) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.dv) img { display: block; max-width: 100%; }
.dv :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.dv-w { width: min(1560px, 100%); margin-inline: auto; padding-inline: max(clamp(18px, 4vw, 64px), env(safe-area-inset-left, 0px)); }

/* Обвязка страницы */
.page-transition-curtain { position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: 0; background: #000; transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1); }
body.is-page-entering .page-transition-curtain, body.is-page-leaving .page-transition-curtain { opacity: 1; }
body.is-page-entering.is-page-enter-active .page-transition-curtain { opacity: 0; }
.ugc-stage .page-logo { position: fixed; z-index: 44; }
.ugc-stage .page-logo-return, .ugc-stage .page-logo-caption { pointer-events: auto; }
.dv-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* Свечение продукта не переключается, а перетекает: прозрачность каждого тона
   считается от положения его блока и меняется на высоте почти целого экрана. */
.dv-ambient > i { position: absolute; inset: -12%; opacity: 0; will-change: opacity, transform; animation: dvDrift var(--drift, 28s) ease-in-out var(--phase, 0s) infinite alternate; }
/* Медленный дрейф пятна; сдвиг от прокрутки идёт отдельным свойством translate из скрипта. */
@keyframes dvDrift { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(3%, 2.5%, 0); } }
/* Точки страницы: одна подложка на всю длину, прокручивается вместе с ней
   (без background-attachment: fixed). Начинается там, где гаснет поле первого экрана. */
.subpage-stage.dv { position: relative; }
.dv { --dot-gap: 32px; --dots-light: radial-gradient(circle, rgba(243, 242, 237, 0.1) 0 0.85px, transparent 1.25px) 0 0 / var(--dot-gap) var(--dot-gap); --dots-dark: radial-gradient(circle, rgba(11, 11, 13, 0.06) 0 0.85px, transparent 1.25px) 0 0 / var(--dot-gap) var(--dot-gap); }
.dv-grain { position: absolute; left: 0; right: 0; top: calc(var(--grain-top, 60vh) + var(--grain-fade, 320px)); bottom: 0; z-index: -1; pointer-events: none; background: var(--dots-light); }
.dv-grain::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--grain-fade, 320px); background: var(--dots-light); -webkit-mask-image: linear-gradient(180deg, transparent, #000); mask-image: linear-gradient(180deg, transparent, #000); }
/* Фигуры блоков рисует один общий холст за содержимым. */
.dv-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Появление при прокрутке — только если скрипт жив. Сдвиг идёт отдельным свойством
   translate, поэтому не спорит с transform, которым элементы двигаются сами. */
html.js-reveal .dv-r { opacity: 0; translate: 0 56px; transition: opacity 900ms var(--out) var(--d, 0ms), translate 1300ms var(--out) var(--d, 0ms); }
html.js-reveal .dv-r.is-in { opacity: 1; translate: none; }

/* Общие элементы */
.dv-tag { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.dv-sec { padding-block: clamp(84px, 11vw, 190px) 0; scroll-margin-top: 70px; }
.dv-head { display: grid; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: clamp(44px, 6vw, 96px); }
.dv-head h2, .dv-sealed h2, .dv-order h2 { font-size: clamp(40px, 6.6vw, 112px); line-height: 0.98; font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
.dv-arrow { width: 0.8em; height: 0.8em; flex: none; transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) { a:hover > .dv-arrow, button:hover > .dv-arrow { transform: translate(3px, -3px); } }

.dv-cta { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 24px; background: var(--ink); color: #08080a; font-weight: 500; font-size: 17px; line-height: 1; border-radius: 3px; overflow: hidden; transform: translate(var(--mx, 0), var(--my, 0)); transition: transform 240ms var(--ease), background 240ms ease; }
.dv-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%); transform: translateX(-110%); }
@media (hover: hover) and (pointer: fine) { .dv-cta:hover::after { transform: translateX(110%); transition: transform 760ms var(--ease); } }
.dv-cta > * { position: relative; z-index: 1; }
.dv-cta--ink { background: #0b0b0d; color: #efeee8; }
.dv-cta--ink::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); }
.dv-cta[disabled] { opacity: 0.5; }
.dv-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-weight: 500; transition: gap 240ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .dv-link:hover { gap: 15px; } }

/* Первый экран */
.dv-hero { --hero-pad: max(84px, 11vh); position: relative; padding-top: var(--hero-pad); padding-bottom: clamp(16px, 2vw, 32px); overflow: clip; }
.dv-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 82%); mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 82%); }
.dv-hero-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); align-items: start; gap: clamp(24px, 4vw, 72px); }
.dv-hero h1 { font-size: clamp(42px, 8.4vw, 148px); line-height: 0.96; font-weight: 500; letter-spacing: -0.045em; }
.dv-l { display: block; padding-bottom: 0.1em; margin-bottom: -0.1em; }
/* Заголовок первого экрана виден с первого кадра (это LCP): строки только досаживаются
   на место сдвигом, без прозрачности и без маски. */
.dv-l > span { display: block; animation: dvLine 1400ms var(--out) both; }
.dv-l:nth-child(2) > span { animation-delay: 70ms; }
.dv-l:nth-child(3) > span { animation-delay: 140ms; }
@keyframes dvLine { from { transform: translate3d(0, 0.34em, 0); } to { transform: none; } }
.dv-hero-side { display: grid; gap: 26px; justify-items: start; padding-bottom: 0.6em; }
.dv-hero-sub { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.3; animation: dvFade 1200ms 260ms var(--out) both; }
.dv-hero-side .dv-cta { animation: dvWipe 1100ms 420ms var(--io) both; }
@keyframes dvFade { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: none; } }
@keyframes dvWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Герб-флаг первого экрана: колышется на ветру (canvas из JS), ведёт на главную. */
/* Герб-флаг над описанием (на узком экране — под кнопкой). */
.dv-mast { position: relative; width: min(100%, 320px, calc((100svh - 610px) * 0.82)); min-width: 150px; animation: dvFade 1600ms 360ms var(--out) both; }
.dv-flag { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.12; overflow: hidden; }
/* Картинка без JS и при «меньше движения»: прозрачные поля герба срезаны, как и на полотне canvas. */
.dv-flag img { display: block; width: 152.7%; max-width: none; height: auto; margin: calc(-26.05% + 6%) 0 0 -26.05%; }
.dv-flag canvas { display: block; width: 100%; height: 100%; }
.dv-flag.is-live img { display: none; }
.dv-flag:focus-visible, .dv-wordmark:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
a.dv-wordmark { display: block; }
.dv-hero-stage { position: relative; width: min(1240px, 92vw); margin: clamp(28px, 3vw, 48px) auto 0; perspective: 1700px; }
.dv-rig--hero { transform: rotateX(calc(var(--hero, 1) * 18deg)) scale(calc(1 - var(--hero, 1) * 0.05)); transform-origin: 50% 0; }

/* Устройства */
.dv-rig { position: relative; }
.dv-rig-in { position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform 420ms var(--ease); padding-bottom: 3%; }
.dv-mac { position: relative; width: 87%; margin-left: 5%; transition: transform 700ms var(--ease), opacity 500ms ease; transform-origin: 30% 100%; }
.dv-mac-lid { padding: 1.5% 1.5% 2.6%; border-radius: 16px 16px 4px 4px / 16px 16px 4px 4px; background: #08080a; box-shadow: inset 0 0 0 1px #3d3e43, inset 0 0 0 2.5px #000, 0 50px 120px -30px rgba(0, 0, 0, 0.9); }
.dv-mac-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px 6px 1px 1px; background: #000; container-type: inline-size; }
.dv-mac-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dv-mac-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 26%, transparent 42%); }
.dv-mac-notch { position: absolute; z-index: 2; left: 50%; top: 0; width: 12.5%; height: 3.1%; transform: translateX(-50%); background: #08080a; border-radius: 0 0 0.6cqw 0.6cqw; }
.dv-mac-base { position: relative; width: 113%; margin-left: -6.5%; aspect-ratio: 100 / 2.7; border-radius: 1px 1px 14px 14px / 1px 1px 100% 100%; background: linear-gradient(180deg, #e6e7ea 0, #b4b6bb 22%, #85878c 62%, #4c4d51 100%); box-shadow: 0 26px 40px -14px rgba(0, 0, 0, 0.75); }
.dv-mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #55565b, #9b9da2); }
.dv-phone { position: absolute; right: 0; bottom: 0; width: 21%; padding: 1.1%; border-radius: 15% / 7%; background: #08080a; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #84858b, 0 0 0 3.5px #2f3033, 0 44px 80px -16px rgba(0, 0, 0, 0.92); transition: transform 700ms var(--ease); transform-origin: 100% 100%; transform: translateZ(50px); }
.dv-phone-screen { position: relative; padding: 13.4% 0 4.5%; overflow: hidden; border-radius: 13% / 6%; background: #05060a; container-type: inline-size; }
.dv-phone-screen img { display: block; width: 100%; height: auto; aspect-ratio: 560 / 1212; }
.dv-phone-bar { position: absolute; z-index: 2; inset: 0 0 auto; height: 13.4cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 9cqw; color: #fff; font: 600 4.6cqw/1 var(--sans); }
.dv-phone-bar u { width: 9cqw; height: 4cqw; border-radius: 1.2cqw; background: #fff; opacity: 0.9; }
.dv-phone-island { position: absolute; left: 50%; top: 2.4cqw; width: 30cqw; height: 8.4cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.dv-phone-btn { position: absolute; width: 2.5px; background: #6f7075; border-radius: 2px; }
.dv-phone-btn--a { left: -4.5px; top: 16%; height: 5%; }
.dv-phone-btn--b { left: -4.5px; top: 24%; height: 9%; }
.dv-phone-btn--c { right: -4.5px; top: 24%; height: 13%; }

/* Бегущая строка фактов */
/* «Поезд»: один ряд направлений и фактов крупным гротеском, ромбы-разделители,
   края гаснут внутри контейнера, наведение — пауза. */
.dv-marquee { grid-column: 1 / -1; min-width: 0; position: relative; margin-top: clamp(28px, 4vw, 56px); padding-block: clamp(14px, 1.4vw, 22px); border-block: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); animation: dvFade 1200ms 640ms var(--out) both; }
.dv-marquee-track { display: flex; align-items: center; width: max-content; animation: dvMarquee 80s linear infinite; }
.dv-marquee li { display: flex; align-items: center; white-space: nowrap; padding-left: clamp(20px, 2vw, 36px); font-size: clamp(26px, 2.3vw, 40px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.dv-marquee li::before { content: ""; flex: none; width: 0.24em; height: 0.24em; margin-right: clamp(20px, 2vw, 36px); border: 1px solid var(--ink-3); transform: rotate(45deg); }
@keyframes dvMarquee { to { transform: translateX(-50%); } }

/* Манифест: слова зажигаются прокруткой */
.dv-manifest { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: clamp(32px, 5vw, 96px); align-items: end; padding-block: clamp(84px, 11vw, 190px) 0; }
.dv-words { font-size: clamp(27px, 3.9vw, 66px); line-height: 1.12; font-weight: 500; letter-spacing: -0.028em; }
.dv-words span { opacity: 0.18; transition: opacity 300ms linear; }
.dv-words span.is-on { opacity: 1; }
.dv-manifest-note { color: var(--ink-2); }
.dv-manifest-sub { margin-top: clamp(28px, 3.4vw, 56px); max-width: 30ch; font-size: clamp(21px, 2vw, 32px); line-height: 1.32; letter-spacing: -0.012em; color: var(--ink-2); }
.dv-manifest-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(26px, 2.8vw, 44px); border-top: 1px solid var(--line); }
.dv-manifest-pts li { position: relative; padding: clamp(22px, 2.2vw, 34px) 24px 0 0; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.22; letter-spacing: -0.015em; font-weight: 500; color: var(--ink); }
.dv-manifest-pts li::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: clamp(14px, 1.4vw, 22px); background: var(--ink-3); }
@media (max-width: 720px) {
  .dv-manifest-pts { grid-template-columns: minmax(0, 1fr); }
  .dv-manifest-pts li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .dv-manifest-pts li::before { flex: none; width: 20px; margin: 0; }
}

/* Продукты: устройство стоит, текст проходит мимо */
.dv-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding-bottom: clamp(70px, 9vw, 150px); }
/* Кейсы чередуются по порядку, а не по продукту: чётный блок — мокап слева, текст справа. */
.dv-story:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dv-story:nth-of-type(even) .dv-story-copy { order: 2; }
.dv-story-copy { --tone: var(--wallet); padding-top: 3vh; }
.dv-story--legal .dv-story-copy { --tone: var(--legal); }
/* Цвет акцента кейса совпадает с его свечением (data-tint, цвета — storyTints в бандле). */
.dv-story[data-tint="home"] .dv-story-copy { --tone: rgb(150 172 215); }
.dv-story[data-tint="ugc"] .dv-story-copy { --tone: rgb(236 124 92); }
.dv-story[data-tint="dev"] .dv-story-copy { --tone: rgb(64 196 222); }
.dv-product { display: flex; align-items: center; gap: 10px; font: 400 13px/1.3 var(--mono); color: var(--tone); }
.dv-product i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 14px var(--tone); }
.dv-story h3 { margin-block: 22px 22px; font-size: clamp(30px, 3.5vw, 60px); line-height: 1.04; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.dv-story-lead { color: var(--ink-2); max-width: 52ch; }
.dv-claims { margin-block: clamp(36px, 8vh, 90px) 40px; border-top: 1px solid var(--line); }
.dv-claims li { position: relative; padding: clamp(22px, 5vh, 44px) 0 clamp(22px, 5vh, 44px) 34px; border-bottom: 1px solid var(--line); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.28; letter-spacing: -0.01em; color: var(--ink-3); transition: color 420ms ease; }
.dv-claims li::before { content: ""; position: absolute; left: 0; top: calc(clamp(22px, 5vh, 44px) + 0.5em); width: 16px; height: 1px; background: currentColor; transition: width 500ms var(--ease), background 400ms ease; }
.dv-claims li.is-on { color: var(--ink); }
.dv-claims li.is-on::before { background: var(--tone); height: 2px; width: 22px; }
.dv-story-stage { position: sticky; top: max(84px, calc(50vh - 26vw)); perspective: 1500px; }
.dv-switch { display: inline-flex; margin-top: 30px; padding: 3px; border: 1px solid var(--line); border-radius: 99px; font: 400 12px/1 var(--mono); }
.dv-switch button { padding: 9px 16px; border-radius: 99px; color: var(--ink-2); transition: background 220ms ease, color 220ms ease; }
.dv-switch button[aria-pressed="true"] { background: var(--ink); color: #08080a; }
.dv-rig[data-focus="phone"] .dv-mac { transform: scale(0.8) translateX(-6%); opacity: 0.32; }
.dv-rig[data-focus="phone"] .dv-phone { transform: translate3d(-112%, -2%, 80px) scale(1.5); }

/* Закрытый продукт */
.dv-sealed { margin-top: clamp(70px, 9vw, 150px); padding-block: clamp(70px, 9vw, 150px); border-block: 1px solid var(--line); scroll-margin-top: 70px; position: relative; isolation: isolate; }
/* Штриховка закрытого блока проявляется и гаснет у краёв, без резкой кромки. */
.dv-sealed::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(243, 242, 237, 0.018) 0 2px, transparent 2px 13px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); }
.dv-sealed-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 130px); align-items: center; }
.dv-sealed-device { justify-self: center; width: min(310px, 62vw); }
.dv-sealed-phone { position: relative; aspect-ratio: 9 / 19.5; border-radius: 46px; overflow: hidden; background: #0a0a0c; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #5e5f64, 0 60px 100px -30px #000; display: grid; place-items: center; }
.dv-sealed-haze { position: absolute; inset: -30%; background: conic-gradient(from 0deg, #15161b, #2d2f38, #101114, #3c3e49, #15161b); filter: blur(34px); animation: dvSpin 14s linear infinite; }
.dv-sealed-haze:not(.is-live) { animation-play-state: paused; }
@keyframes dvSpin { to { transform: rotate(360deg); } }
.dv-sealed-scan { position: absolute; inset: 0 0 auto; height: 36%; background: linear-gradient(180deg, transparent, rgba(243, 242, 237, 0.12), transparent); animation: dvScan 4.6s ease-in-out infinite; }
@keyframes dvScan { 0%, 100% { transform: translateY(-100%); } 50% { transform: translateY(280%); } }
.dv-sealed-phone svg { position: relative; width: 56px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.dv-tag--alert { color: var(--stop); }
.dv-tag--alert i { width: 7px; height: 7px; border-radius: 50%; background: var(--stop); animation: dvBlink 1.6s steps(2, jump-none) infinite; }
@keyframes dvBlink { 50% { opacity: 0.2; } }
.dv-sealed h2 { margin-block: 20px 34px; }
.dv-sealed h3 { font-size: clamp(20px, 1.9vw, 30px); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 14px; }
.dv-sealed-copy > p { max-width: 62ch; color: var(--ink-2); margin-bottom: 12px; }
.dv-redact { display: grid; gap: 7px; margin-block: 24px; font: 400 clamp(11px, 1vw, 14px)/1.4 var(--mono); color: rgba(243, 242, 237, 0.34); overflow: hidden; user-select: none; }
.dv-redact span { display: block; min-height: 1.4em; white-space: nowrap; overflow: hidden; }
.dv-redact span:nth-child(2) { width: 82%; }
.dv-redact span:nth-child(3) { width: 58%; }
.dv-sealed-soon { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.dv-sealed-soon strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }

/* Возможности: индекс слева, живая схема справа */
.dv-caps { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.dv-cap { position: relative; border-top: 1px solid var(--line); }
.dv-cap:last-child { border-bottom: 1px solid var(--line); }
.dv-cap::after { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.dv-caps.is-auto .dv-cap.is-active::after { animation: dvFill var(--cap-time, 4200ms) linear forwards; }
@keyframes dvFill { to { transform: scaleX(1); } }
.dv-cap h3 { font: inherit; }
.dv-cap button { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: baseline; gap: 8px; width: 100%; padding: clamp(14px, 1.6vw, 24px) 0; text-align: left; transition: padding 420ms var(--ease); }
.dv-cap-n { font: 400 12px/1 var(--mono); color: var(--ink-3); }
.dv-cap-t { font-size: clamp(23px, 2.7vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -0.025em; color: var(--ink-3); transition: color 300ms ease, transform 420ms var(--ease); }
.dv-cap.is-active .dv-cap-t { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .dv-cap button:hover .dv-cap-t { color: var(--ink); } }
.dv-cap.is-active .dv-cap-t { transform: translateX(8px); }
.dv-cap button > i { position: relative; width: 14px; height: 14px; align-self: center; }
.dv-cap button > i::before, .dv-cap button > i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--ink-2); transition: transform 320ms var(--ease); }
.dv-cap button > i::after { transform: rotate(90deg); }
.dv-cap.is-active button > i::after { transform: rotate(0); }
.dv-cap-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 480ms var(--ease); }
.dv-cap-body > div { overflow: hidden; padding: 0 0 24px 52px; color: var(--ink-2); }
html.js-reveal .dv-cap:not(.is-active) .dv-cap-body { grid-template-rows: 0fr; }
html.js-reveal .dv-cap:not(.is-active) .dv-cap-body > div { padding-bottom: 0; }
.dv-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; font: 400 12px/1 var(--mono); }
.dv-platforms li { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; }
.dv-cap-panel { position: sticky; top: max(90px, calc(50vh - 240px)); aspect-ratio: 5 / 4.4; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: radial-gradient(90% 70% at 50% 0%, rgba(243, 242, 237, 0.06), transparent 70%), #09090b; }
.dv-viz { position: absolute; inset: 0; display: grid; place-items: center; padding: 7%; opacity: 0; transform: scale(0.97); transition: opacity 252ms ease, transform 372ms var(--ease); pointer-events: none; }
.dv-viz.is-active { opacity: 1; transform: none; will-change: transform; }
/* Анимации картинок идут только у видимой и только пока панель на экране (is-live ставит скрипт). */
.dv-viz:not(.is-active) *, .dv-viz:not(.is-active) *::before, .dv-viz:not(.is-active) *::after, html.js-reveal .dv-cap-panel:not(.is-live) * { animation-play-state: paused !important; }
.vz { width: 100%; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.35; }
.vz svg { width: 100%; display: block; overflow: visible; }
.vz-wire { fill: none; stroke: var(--line); stroke-width: 1.5; }
.vz-pulse { fill: none; stroke: var(--go); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 26 1000; stroke-dashoffset: 26; animation: vzPulse 1.8s linear infinite; }
.vz-pulse--b { animation-delay: 0.48s; }
.vz-pulse--c { animation-delay: 0.9s; }
.vz-pulse--d { animation-delay: 1.32s; }
@keyframes vzPulse { to { stroke-dashoffset: -400; } }
.vz-nodes circle { fill: #09090b; stroke: var(--ink); stroke-width: 1.5; }
.vz-labels text { fill: var(--ink-2); font: 400 11px var(--mono); text-anchor: middle; }
.vz-core { fill: var(--ink); }
.vz-hub text:last-child, .vz-labels text:last-child { }
.vz-hub .vz-labels text:nth-child(5) { fill: #08080a; font-size: 9px; }
/* 01: один интерфейс меняет форму */
/* Рамка меняет размер — пересчёт и перерисовка заперты внутри блока картинки. */
.vz-apps { display: grid; place-items: center; min-height: 260px; contain: strict; }
.vz-apps-frame { display: grid; grid-template-columns: 26% 1fr; gap: 7px; padding: 12px; border: 1.5px solid var(--ink); border-radius: 12px; animation: vzApps 5.4s var(--ease) infinite; }
.vz-apps-frame i { display: block; border-radius: 5px; background: rgba(243, 242, 237, 0.13); }
.vz-apps-frame i:first-child { grid-row: span 3; }
.vz-apps-frame i:nth-child(2) { background: var(--wallet); opacity: 0.7; }
@keyframes vzApps { 0%, 26% { width: 110px; height: 230px; border-radius: 22px; } 33%, 59% { width: 240px; height: 180px; border-radius: 14px; } 66%, 93% { width: 340px; height: 210px; border-radius: 8px; } 100% { width: 110px; height: 230px; border-radius: 22px; } }
/* 02: агент читает документ */
.vz-agent { display: grid; grid-template-columns: 44% 1fr; gap: 16px; align-items: center; }
.vz-doc { position: relative; display: grid; gap: 10px; padding: 18px 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.vz-doc i { height: 6px; border-radius: 3px; background: rgba(243, 242, 237, 0.16); }
.vz-doc i:nth-child(even) { width: 72%; }
.vz-doc .vz-hit { animation: vzHit 4.2s ease infinite; }
@keyframes vzHit { 0%, 40% { background: rgba(243, 242, 237, 0.16); } 50%, 90% { background: var(--stop); } }
.vz-doc b { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--legal); box-shadow: 0 0 16px var(--legal); animation: vzScanDoc 4.2s ease infinite; }
@keyframes vzScanDoc { 0% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(130px); opacity: 1; } 46%, 100% { opacity: 0; transform: translateY(130px); } }
.vz-chat { display: grid; gap: 8px; }
.vz-chat p { padding: 9px 11px; border-radius: 10px; opacity: 0; animation: vzStep 4.2s ease infinite; }
.vz-q { justify-self: end; background: var(--ink); color: #08080a; animation-delay: 0s !important; --from: 0%; }
.vz-dots { justify-self: start; display: flex; gap: 4px; background: rgba(243, 242, 237, 0.1); animation-name: vzDots !important; }
.vz-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.vz-a { background: rgba(243, 242, 237, 0.1); animation-name: vzAnswer !important; }
@keyframes vzStep { 0%, 4% { opacity: 0; transform: translateY(8px); } 9%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vzDots { 0%, 14% { opacity: 0; } 18%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes vzAnswer { 0%, 48% { opacity: 0; transform: translateY(8px); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 03: бот */
.vz-bot { display: grid; gap: 8px; max-width: 340px; margin-inline: auto; }
.vz-msg { padding: 10px 13px; border-radius: 14px; background: rgba(243, 242, 237, 0.09); opacity: 0; animation: vzBot 4.8s ease infinite; }
.vz-msg--in { animation-delay: 0s; }
.vz-msg--out { justify-self: start; background: #2a6fd4; animation-delay: 0.54s; }
.vz-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; opacity: 0; animation: vzBot 4.8s 0.9s ease infinite; }
.vz-keys span { padding: 9px; text-align: center; border-radius: 9px; background: rgba(243, 242, 237, 0.13); }
.vz-keys span:first-child { animation: vzTap 4.8s ease infinite; }
@keyframes vzTap { 0%, 44% { background: rgba(243, 242, 237, 0.13); } 48%, 90% { background: var(--go); color: #08080a; } }
.vz-msg--ok { color: var(--go); animation-delay: 2.34s; }
@keyframes vzBot { 0% { opacity: 0; transform: translateY(10px); } 6%, 54% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; } }
.vz-msg--in { animation-name: vzBotLong; } .vz-msg--out { animation-name: vzBotMid; } .vz-keys { animation-name: vzBotMid; } .vz-msg--ok { animation-name: vzBotEnd; }
@keyframes vzBotLong { 0% { opacity: 0; transform: translateY(10px); } 5%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vzBotMid { 0% { opacity: 0; transform: translateY(10px); } 5%, 76% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }
@keyframes vzBotEnd { 0% { opacity: 0; transform: translateY(10px); } 5%, 40% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; } }
/* 05: панель */
.vz-board { display: grid; gap: 16px; }
.vz-bars { display: flex; align-items: flex-end; gap: 7px; height: 150px; border-bottom: 1px solid var(--line); }
.vz-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--ink), rgba(243, 242, 237, 0.16)); transform-origin: 50% 100%; animation: vzBar 3s var(--ease) infinite alternate; }
.vz-bars i:nth-child(2n) { animation-delay: -1.3s; }
.vz-bars i:nth-child(3n) { animation-delay: -2.7s; }
@keyframes vzBar { from { transform: scaleY(0.5); } to { transform: scaleY(1); } }
.vz-log { display: grid; gap: 6px; font: 400 12px/1.4 var(--mono); color: var(--ink-2); }
.vz-log u { text-decoration: none; color: var(--go); margin-right: 8px; }
/* 06: учёт */
.vz-ledger { display: grid; gap: 0; }
.vz-row { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.vz-row em { font: 400 12px/1.5 var(--mono); font-style: normal; color: var(--go); animation: vzRow 3.6s ease infinite; }
.vz-row:nth-child(2) em { animation-delay: 0.48s; }
.vz-row:nth-child(3) em { animation-delay: 0.96s; }
.vz-row--back em { color: #ffc266; animation-delay: 1.44s; }
@keyframes vzRow { 0%, 6% { opacity: 0; } 14%, 92% { opacity: 1; } 100% { opacity: 0; } }
.vz-server { margin-top: 16px; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
/* 08: языки */
.vz-lang { position: relative; display: block; min-height: 120px; }
.vz-lang p { position: absolute; inset: 0; margin: auto; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; border: 1.5px solid var(--ink); border-radius: 12px; font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; opacity: 0; animation: vzLang 6s ease infinite; }
.vz-lang b { font: 400 11px/1 var(--mono); color: var(--ink-2); }
.vz-lang p:nth-child(2) { animation-delay: 1.5s; }
.vz-lang p:nth-child(3) { animation-delay: 3s; }
.vz-lang p:nth-child(4) { animation-delay: 4.5s; border-color: var(--go); }
@keyframes vzLang { 0% { opacity: 0; transform: translateY(14px); } 4%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-14px); } }

/* Процесс: путь сборки */
.dv-rail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.dv-rail::before, .dv-rail::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
/* Светящаяся линия — свой слой: прокрутка лишь масштабирует его, без перерисовки свечения во всю высоту. */
.dv-rail::after { height: 2px; top: 6.5px; background: var(--go); transform: scaleX(var(--rail, 0)); transform-origin: 0 50%; box-shadow: 0 0 14px var(--go); will-change: transform; }
.dv-rail li { position: relative; z-index: 1; opacity: 0.42; transition: opacity 500ms ease; }
.dv-rail li.is-on { opacity: 1; }
.dv-node { display: block; width: 15px; height: 15px; margin-bottom: 26px; border-radius: 50%; border: 1.5px solid var(--ink-2); background: var(--bg); transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease; }
.dv-rail li.is-on .dv-node { background: var(--go); border-color: var(--go); box-shadow: 0 0 18px var(--go); }
.dv-step-n { font: 400 12px/1 var(--mono); color: var(--ink-3); }
.dv-rail h3 { margin-block: 10px 12px; font-size: clamp(20px, 1.75vw, 28px); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; }
.dv-rail p { font-size: 15px; color: var(--ink-2); }
.dv-gate { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(26px, 4vw, 72px); align-items: center; margin-top: clamp(60px, 7vw, 110px); padding-top: clamp(26px, 3vw, 44px); border-top: 1px solid var(--line); }
.dv-gate-hint { margin-block: 12px 22px; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.22; letter-spacing: -0.015em; }
.dv-gate-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-gate-checks button { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border: 1px solid var(--line); border-radius: 99px; font: 400 13px/1 var(--mono); transition: border-color 220ms ease, transform 180ms ease; }
.dv-gate-checks button:active { transform: scale(0.96); }
.dv-gate-checks i { width: 26px; height: 15px; border-radius: 99px; background: var(--stop); position: relative; transition: background 220ms ease; }
.dv-gate-checks i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform 240ms var(--ease); }
.dv-gate-checks [aria-pressed="true"] i { background: var(--go); }
.dv-gate-checks [aria-pressed="true"] i::after { transform: translateX(11px); }
.dv-term { position: relative; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: #09090b; }
/* Статус шлюза: кромка света по верхней грани и мягкое пятно под окном, как отражение
   на поверхности. Два слоя (зелёный и красно-янтарный) сменяются через opacity. */
.dv-term-lights { position: absolute; inset: 0; pointer-events: none; }
.dv-term-lights i { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease-in-out; }
.dv-term-lights i::before { content: ""; position: absolute; left: 6%; right: 6%; top: -1px; height: 1px; border-radius: 1px; }
.dv-term-lights i::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: 72%; height: 70%; border-radius: 50%; filter: blur(48px); }
.dv-term-lights .is-go::before { background: linear-gradient(90deg, rgba(93, 234, 156, 0), rgba(93, 234, 156, 0.75) 50%, rgba(93, 234, 156, 0)); }
.dv-term-lights .is-go::after { background: radial-gradient(closest-side, rgba(93, 234, 156, 0.16), rgba(93, 234, 156, 0.1) 35%, rgba(93, 234, 156, 0.04) 65%, rgba(93, 234, 156, 0)); }
.dv-term-lights .is-stop::before { background: linear-gradient(90deg, rgba(255, 140, 80, 0), rgba(255, 120, 80, 0.75) 50%, rgba(255, 140, 80, 0)); }
.dv-term-lights .is-stop::after { background: radial-gradient(closest-side, rgba(255, 120, 80, 0.15), rgba(255, 120, 80, 0.09) 35%, rgba(255, 120, 80, 0.035) 65%, rgba(255, 120, 80, 0)); }
.dv-gate[data-state="green"] .dv-term-lights .is-go, .dv-gate[data-state="red"] .dv-term-lights .is-stop { opacity: 1; }
.dv-term-inner { position: relative; overflow: hidden; border-radius: 11px; }
.dv-gate[data-state="green"] .dv-term-log .is-go { text-shadow: 0 0 14px rgba(93, 234, 156, 0.25); }
.dv-term-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dv-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.dv-term-log { padding: 16px 18px 20px; min-height: 148px; font: 400 clamp(13px, 1.05vw, 15px)/1.7 var(--mono); color: var(--ink-2); }
.dv-term-log .is-go { color: var(--go); }
.dv-term-log .is-stop { color: var(--stop); }

/* Цифры: без подложки, размером с экран */
.dv-figs { margin-top: clamp(84px, 11vw, 190px); border-block: 1px solid var(--line); }
.dv-figs-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dv-fig { padding: clamp(24px, 3vw, 44px) clamp(14px, 2vw, 30px) clamp(26px, 3vw, 44px); border-left: 1px solid var(--line); }
.dv-fig:first-child { border-left: 0; padding-left: 0; }
.dv-fig { min-width: 0; }
.dv-fig-num { display: inline-flex; max-width: 100%; height: 1em; overflow: hidden; font-size: clamp(72px, 9vw, 180px); line-height: 1; font-weight: 500; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dv-odo { display: inline-flex; }
.dv-odo-col { display: block; height: 1em; overflow: hidden; }
.dv-odo-col > span { display: block; transition: transform 1900ms cubic-bezier(0.16, 0.84, 0.3, 1) calc(var(--i, 0) * 140ms); }
.dv-odo-col b { display: block; height: 1em; font-weight: inherit; }
.dv-odo-suf { display: block; opacity: 0; translate: 0 0.25em; transition: opacity 700ms var(--out), translate 900ms var(--out); transition-delay: calc(var(--i, 0) * 140ms + 1300ms); }
.dv-fig-num.is-rolled .dv-odo-suf { opacity: 1; translate: none; }
.dv-ticks { display: flex; gap: 4px; margin-block: 16px 22px; }
.dv-ticks i { width: 22px; height: 3px; background: var(--go); transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease) 700ms; }
.dv-fig.is-in .dv-ticks i, html:not(.js-reveal) .dv-ticks i { transform: scaleX(1); }
.dv-fig strong { display: block; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; margin-bottom: 8px; }
.dv-fig p { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* Принципы: плашки наезжают одна на другую */
.dv-plates { display: grid; gap: 14px; }
.dv-plate { position: sticky; top: calc(76px + var(--i) * 12px); display: grid; grid-template-columns: 70px minmax(0, 1fr) clamp(110px, 15vw, 230px); gap: clamp(14px, 3vw, 54px); align-items: center; min-height: clamp(280px, 36vw, 480px); padding: clamp(24px, 4vw, 64px); border-radius: 22px; background: #111114; color: var(--ink); box-shadow: 0 -24px 50px -22px rgba(0, 0, 0, 0.8); }
.dv-plate--light { background: var(--dots-dark), var(--paper); color: #0b0b0d; }
.dv-plate--blue { background: #1b49d6; color: #fff; }
.dv-plate--green { background: #0c4d39; color: #eafff5; }
.dv-plate-n { align-self: start; font: 400 13px/1 var(--mono); opacity: 0.6; }
.dv-plate h3 { font-size: clamp(28px, 4.4vw, 76px); line-height: 1.02; font-weight: 500; letter-spacing: -0.033em; margin-bottom: clamp(14px, 1.8vw, 26px); text-wrap: balance; }
.dv-plate p { max-width: 58ch; opacity: 0.74; }
.dv-plate-art { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.9; }
.dv-plate-art .vz-draw { stroke-width: 3; stroke-dasharray: 300; stroke-dashoffset: 300; animation: vzDraw 3.6s var(--ease) infinite alternate; }
@keyframes vzDraw { 0%, 18% { stroke-dashoffset: 300; } 82%, 100% { stroke-dashoffset: 0; } }

/* Справочная часть: заголовок стоит, абзацы идут */
.dv-guide { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.dv-guide-head { position: sticky; top: 90px; }
.dv-guide-head h2 { margin-block: 16px 22px; font-size: clamp(30px, 3.9vw, 66px); line-height: 1.03; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.dv-guide-head p { color: var(--ink-2); max-width: 56ch; }
.dv-guide-item { padding-block: clamp(22px, 2.6vw, 38px); border-top: 1px solid var(--line); }
.dv-guide-item:last-child { border-bottom: 1px solid var(--line); }
.dv-guide-item h3 { margin-bottom: 10px; font-size: clamp(21px, 1.9vw, 30px); line-height: 1.14; font-weight: 500; letter-spacing: -0.018em; }
.dv-guide-item p { color: var(--ink-2); }

/* Вопросы */
.dv-faqs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 5vw, 96px); align-items: start; }
.dv-faqs .dv-head { margin: 0; position: sticky; top: 90px; }
.dv-faq { border-top: 1px solid var(--line); }
.dv-faq:last-child { border-bottom: 1px solid var(--line); }
.dv-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: clamp(18px, 1.9vw, 28px) 0; cursor: pointer; list-style: none; }
.dv-faq summary::-webkit-details-marker { display: none; }
.dv-faq h3 { font-size: clamp(19px, 1.65vw, 26px); line-height: 1.2; font-weight: 500; letter-spacing: -0.014em; transition: transform 320ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .dv-faq summary:hover h3 { transform: translateX(6px); } }
.dv-faq summary i { position: relative; flex: none; width: 16px; height: 16px; }
.dv-faq summary i::before, .dv-faq summary i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: var(--ink); transition: transform 320ms var(--ease); }
.dv-faq summary i::after { transform: rotate(90deg); }
.dv-faq[open] summary i::after { transform: rotate(0); }
.dv-faq-a p { padding-bottom: 26px; max-width: 64ch; color: var(--ink-2); }
.dv-faq::details-content { block-size: 0; overflow: clip; transition: block-size 420ms var(--ease), content-visibility 420ms allow-discrete; }
.dv-faq[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { .dv-faq { interpolate-size: allow-keywords; } }

/* Заявка: страница переворачивается в светлую */
.dv-order { --sheet-r: 28px; --sheet-grow: 20px; --sheet-shift: 6vh; --sheet-shrink: 0.06; margin-top: clamp(84px, 11vw, 190px); padding-block: clamp(60px, 8vw, 130px); background: var(--paper); color: #0b0b0d; scroll-margin-top: 0; }
.dv-order-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.dv-order-next { margin-top: clamp(26px, 4vw, 70px); max-width: 40ch; }
.dv-order-next .dv-tag { color: #3a3833; margin-bottom: 10px; }
.dv-order-next strong { font-weight: 600; }
.dv-honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dv-meter { height: 3px; margin-bottom: 26px; background: rgba(11, 11, 13, 0.12); }
.dv-meter i { display: block; height: 100%; background: #0b0b0d; transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; transition: transform 420ms var(--ease); }
.dv-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(18px, 2.4vw, 36px); }
.dv-field { display: grid; gap: 4px; }
.dv-field--full { grid-column: 1 / -1; }
.dv-field span { font: 500 13px/1.3 var(--mono); color: #1a1a1a; }
.dv-field input, .dv-field textarea { width: 100%; padding: 9px 0 11px; border: 0; border-bottom: 1px solid rgba(11, 11, 13, 0.5); border-radius: 0; outline: 0; background: none; color: #0b0b0d; font: 400 18px/1.35 var(--sans); resize: vertical; transition: border-color 200ms ease, box-shadow 200ms ease; }
.dv-field input::placeholder, .dv-field textarea::placeholder { color: #57544d; opacity: 1; }
/* Фокус — подчёркивание в стиле страницы, без общей рамки .dv :focus-visible. */
.dv-field input:focus, .dv-field textarea:focus, .dv-field input:focus-visible, .dv-field textarea:focus-visible { outline: none; border-color: #0b0b0d; box-shadow: 0 1px 0 #0b0b0d; }
.dv-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.dv-form-status { min-height: 1.5em; margin-top: 16px; font-size: 15px; }
.dv-form-status.is-error { color: #bb1f14; }
.dv-form-status.is-success { color: #0a7a48; }

/* Подвал */
.dv-footer { padding-top: 56px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); overflow: hidden; }
.dv-wordmark { width: min(78vw, 560px); margin-inline: auto; overflow: hidden; }
.dv-wordmark img { display: block; width: 100%; height: auto; }

/* iPad и узкий настольный экран */
@media (max-width: 1080px) {
  .dv-hero-top { grid-template-columns: minmax(0, 1fr); }
  .dv-hero-side { padding-bottom: 0; }
  /* Узкий экран: заголовок, описание, кнопка, а под кнопкой — герб-флаг по центру. */
  .dv-mast { order: 3; justify-self: center; width: min(62vw, 300px); margin-top: 22px; }
  .dv-manifest, .dv-story, .dv-story:nth-of-type(even), .dv-sealed-in, .dv-caps, .dv-guide, .dv-faqs, .dv-order-in, .dv-gate { grid-template-columns: minmax(0, 1fr); }
  .dv-story:nth-of-type(even) .dv-story-copy { order: 0; }
  .dv-story-stage { position: relative; top: 0; order: -1; }
  .dv-switch { margin-top: 22px; }
  .dv-claims { margin-block: 28px; }
  .dv-claims li { padding-block: 20px; }
  .dv-claims li::before { top: calc(20px + 0.5em); }
  .dv-guide-head, .dv-faqs .dv-head { position: static; }
  .dv-cap-panel { position: relative; top: 0; margin: 4px 0 26px; aspect-ratio: 5 / 3.6; }
  .dv-rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dv-rail::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .dv-rail::after { left: 6.5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(var(--rail, 0)); transform-origin: 50% 0; }
  .dv-rail li { padding: 0 0 34px 36px; }
  .dv-node { position: absolute; left: 0; top: 2px; margin: 0; }
  .dv-sealed-device { width: min(230px, 50vw); }
  .dv-figs-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
  .dv-fig:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Телефон */
@media (max-width: 640px) {
  .dv { --dot-gap: 26px; }
  .dv-order { margin-inline: 9px; --sheet-r: 24px; --sheet-grow: 10px; --sheet-shift: 3vh; --sheet-shrink: 0.03; }
  .dv-footer { padding-top: 36px; }
  .subpage-stage.dv { font-size: 16px; }
  .dv-hero { --hero-pad: calc(env(safe-area-inset-top, 0px) + 84px); }
  .dv-hero h1 { font-size: clamp(36px, 11vw, 62px); }
  .dv-cta { width: 100%; }
  .dv-hero-side { justify-items: stretch; }
  .dv-rig--hero { transform: rotateX(calc(var(--hero, 1) * 14deg)); }
  .dv-mac { width: 90%; margin-left: 5%; }
  .dv-phone { width: 27%; }
  .dv-mac-lid { border-radius: 8px 8px 2px 2px; }
  .dv-cap button { grid-template-columns: 32px minmax(0, 1fr) 16px; }
  .dv-cap-body > div { padding-left: 40px; }
  .dv-cap-panel { aspect-ratio: auto; min-height: 310px; }
  .vz { font-size: 13px; }
  .vz-labels text { font-size: 15px; }
  .vz-hub .vz-labels text:nth-child(5) { font-size: 11px; }
  .dv-cap.is-active .dv-cap-t { transform: none; }
  .vz-apps { min-height: 250px; }
  @keyframes vzApps { 0%, 26% { width: 100px; height: 210px; border-radius: 20px; } 33%, 59% { width: 180px; height: 160px; border-radius: 14px; } 66%, 93% { width: 260px; height: 170px; border-radius: 8px; } 100% { width: 100px; height: 210px; border-radius: 20px; } }
  .dv-gate-checks button { flex: 1 1 auto; justify-content: center; }
  .dv-fig-num { font-size: 19vw; }
  .dv-ticks i { width: 14px; }
  .dv-plate { grid-template-columns: minmax(0, 1fr) 62px; min-height: 0; padding: 22px 20px 26px; border-radius: 16px; top: calc(66px + var(--i) * 7px); gap: 12px; }
  .dv-plate-n { grid-column: 1 / -1; }
  .dv-plate-copy { grid-column: 1 / -1; }
  .dv-plate-art { grid-column: 2; grid-row: 1; width: 62px; }
  .dv-form-grid { grid-template-columns: minmax(0, 1fr); }
  .dv-form-actions .dv-cta { width: 100%; }
  .dv-rig[data-focus="phone"] .dv-phone { transform: translate3d(-118%, -4%, 80px) scale(1.5); }
}

/* ─── Светлый лист ───────────────────────────────────────────────────────────
   Светлая заявка не перетекает градиентом: это отдельный лист со скруглёнными углами,
   который наплывает поверх непрерывного тёмного фона с точками и уходит так же.
   Наплыв и уход — transform и clip-path по прогрессу прокрутки (переменные из скрипта). */
/* Форма носит id #ugcOrderSection (общий скрипт заявки), а общий subpages.css даёт этому id задержку
   появления 0,94 с: лист менял бы размер скачком через 0,94 с. Лист ведёт прокрутка — без переходов. */
.dv-order { --sheet-in: 1; --sheet-out: 0; transition: none !important; position: relative; margin-inline: clamp(12px, 2vw, 28px); background: radial-gradient(70% 60% at 82% 18%, rgba(196, 150, 100, 0.1), transparent 70%), var(--dots-dark), linear-gradient(180deg, #dcd9d2, #d5d1c8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); transform: translate3d(0, calc((1 - var(--sheet-in)) * var(--sheet-shift)), 0) scale(calc(1 - ((1 - var(--sheet-in)) + var(--sheet-out)) * var(--sheet-shrink))); transform-origin: 50% 0; clip-path: inset(0 round calc(var(--sheet-r) + (1 - var(--sheet-in)) * var(--sheet-grow)) calc(var(--sheet-r) + (1 - var(--sheet-in)) * var(--sheet-grow)) calc(var(--sheet-r) + var(--sheet-out) * var(--sheet-grow)) calc(var(--sheet-r) + var(--sheet-out) * var(--sheet-grow))); }
/* Лист будто уходит под тёмный слой: едва заметная тень по верхней кромке изнутри. */
.dv-order::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px; pointer-events: none; background: linear-gradient(180deg, rgba(6, 6, 7, 0.12), rgba(6, 6, 7, 0)); }
.dv-order > * { position: relative; }
.dv-footer { position: relative; background: none; }

/* ─── Движение страницы ───────────────────────────────────────────────────
   Класс dv-motion ставится в разметке до первой отрисовки и только если система не
   просит меньше движения. Всё ниже двигает transform, translate, scale, opacity и
   clip-path; прокрутка лишь пишет числа в CSS-переменные один раз за кадр. */

/* Первый экран: только заголовок, текст и кнопка. Устройства ждут прокрутки.
   Гаснет лишь во второй половине ухода — пока экран перед глазами, он в полную яркость. */
html.dv-motion .dv-hero-top { min-height: calc(100svh - var(--hero-pad)); align-content: start; padding-bottom: clamp(64px, 10vh, 120px); translate: 0 calc(var(--lift, 0) * -70px); opacity: calc(1 - max(0, var(--lift, 0) - 0.5) * 1.4); will-change: translate, opacity; }
html.dv-motion .dv-dots { animation: dvAppear 2200ms 150ms ease both; }
@keyframes dvAppear { from { opacity: 0; } to { opacity: 1; } }
/* Выход устройств: сцена поднимается и распрямляется вместе с прокруткой, а окно
   раскрывается один раз, своей длинной плавностью. */
html.dv-motion .dv-hero-stage { opacity: clamp(0, calc(var(--rise, 0) * 2.4), 1); transform: translate3d(0, calc((1 - var(--rise, 0)) * 22vh), 0) scale(calc(0.84 + var(--rise, 0) * 0.16)); transform-origin: 50% 0; clip-path: inset(14% 16% 26% 16% round 28px); transition: clip-path 1700ms var(--out); will-change: transform, opacity; }
html.dv-motion .dv-hero-stage.is-open { clip-path: inset(-24% -16% -32% -16% round 0); }
html.dv-motion .dv-rig--hero { transform: rotateX(calc(var(--hero, 1) * 26deg)) scale(calc(1 - var(--hero, 1) * 0.04)); }
html.dv-motion .dv-rig--hero .dv-phone { translate: 0 calc((1 - var(--rise2, 0)) * 60%); }
html.dv-motion .dv-rig--hero .dv-mac-screen img { scale: calc(1.16 - var(--rise, 0) * 0.16); transform-origin: 50% 0; will-change: scale; }
/* Где браузер умеет анимации от прокрутки, выход устройств ведёт сам браузер в потоке
   прокрутки, а не скрипт: на iOS прокрутка идёт отдельно от скрипта, и значения из него
   приходили с опозданием — макеты дрожали относительно страницы. Те же формулы, что в
   paint(): rise — от верха сцены на 1,02 экрана до 0,30; телефон — с 20% rise; наклон
   (--hero) — от 0,62 экрана до 0,12. Отсчёт cover — от верха сцены у низа экрана. */
@supports (animation-timeline: view()) {
  html.dv-motion .dv-hero-stage { view-timeline: --dvStage block; animation: dvStageRise linear both; animation-timeline: --dvStage; animation-range: cover -2vh cover 70vh; }
  html.dv-motion .dv-rig--hero { animation: dvRigTilt linear both; animation-timeline: --dvStage; animation-range: cover 38vh cover 88vh; }
  html.dv-motion .dv-rig--hero .dv-phone { animation: dvPhoneRise linear both; animation-timeline: --dvStage; animation-range: cover 12.4vh cover 70vh; }
  html.dv-motion .dv-rig--hero .dv-mac-screen img { animation: dvShotSettle linear both; animation-timeline: --dvStage; animation-range: cover -2vh cover 70vh; }
}
@keyframes dvStageRise { from { opacity: 0; transform: translate3d(0, 22vh, 0) scale(0.84); } 41.667% { opacity: 1; } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes dvStageRiseM { from { opacity: 0; transform: translate3d(0, 36px, 0) scale(0.9); } 41.667% { opacity: 1; } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes dvRigTilt { from { transform: rotateX(26deg) scale(0.96); } to { transform: rotateX(0deg) scale(1); } }
@keyframes dvPhoneRise { from { translate: 0 60%; } to { translate: 0 0; } }
@keyframes dvShotSettle { from { scale: 1.16; } to { scale: 1; } }

/* Заголовки выезжают по словам из-под маски. */
.dv-wd { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.14em; margin: 0 -0.04em -0.14em; }
.dv-wd > span { display: inline-block; transform: translate3d(0, 112%, 0); transition: transform 1300ms var(--out) calc(var(--d, 0ms) + var(--w, 0) * 50ms); }
.is-in .dv-wd > span, .dv-wd.is-in > span { transform: none; }

/* Шапка раздела: линия прочерчивается, метка въезжает, заголовок поднимается. */
html.js-reveal .dv-head.dv-r { opacity: 1; translate: none; border-top-color: transparent; }
/* Опора для линии; липкая шапка вопросов остаётся липкой — правило слабее её. */
html.js-reveal :where(.dv-head.dv-r, .dv-guide-item.dv-r) { position: relative; }
html.js-reveal .dv-head.dv-r::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1700ms var(--out); }
html.js-reveal .dv-head.dv-r.is-in::before { transform: none; }
html.js-reveal .dv-head.dv-r .dv-tag { opacity: 0; translate: -16px 0; transition: opacity 900ms var(--out) 180ms, translate 1200ms var(--out) 180ms; }
html.js-reveal .dv-head.dv-r.is-in .dv-tag { opacity: 1; translate: none; }

/* Кадры с устройствами и схемами открываются окном. */
html.js-reveal .dv-media { opacity: 0; scale: 0.93; clip-path: inset(12% 8% 12% 8% round 28px); transition: opacity 900ms var(--out), scale 1700ms var(--out), clip-path 1700ms var(--out); }
html.js-reveal .dv-media.is-in { opacity: 1; scale: 1; clip-path: inset(-90% -60% -40% -60% round 0); }
html.js-reveal .dv-media .dv-mac-screen img, html.js-reveal .dv-media .dv-phone-screen img { scale: 1.14; transition: scale 2400ms var(--out) 120ms; }
html.js-reveal .dv-media.is-in .dv-mac-screen img, html.js-reveal .dv-media.is-in .dv-phone-screen img { scale: 1; }
html.js-reveal .dv-wipe { clip-path: inset(0 0 100% 0 round 18px); transition: clip-path 1500ms var(--io) var(--d, 0ms); }
html.js-reveal .dv-wipe.is-in { clip-path: inset(0 0 0 0 round 18px); }

/* Манифест: слова не только зажигаются, но и встают на строку. */
.dv-words span { display: inline-block; translate: 0 0.2em; transition: opacity 420ms linear, translate 900ms var(--out); }
.dv-words span.is-on { translate: none; }
html:not(.js-reveal) .dv-words span { translate: none; }

/* Закрытый продукт раскрывается из центра. */
html.js-reveal .dv-sealed-device.dv-r { opacity: 1; translate: none; clip-path: circle(0% at 50% 46%); scale: 0.9; transition: clip-path 1900ms var(--out), scale 1900ms var(--out); }
html.js-reveal .dv-sealed-device.dv-r.is-in { clip-path: circle(110% at 50% 46%); scale: 1; }

/* Шаги процесса подтягиваются, когда до них доходит линия. */
.dv-rail li { translate: 0 22px; transition: opacity 600ms ease, translate 1000ms var(--out); }
.dv-rail li.is-on { translate: none; }
html:not(.js-reveal) .dv-rail li { translate: none; }

/* Принципы: новая плашка наезжает, прежняя уходит вглубь и темнеет. */
.dv-plate { transform: scale(calc(1 - var(--stack, 0) * 0.06)); transform-origin: 50% 0; }
.dv-plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc(var(--stack, 0) * 0.5); pointer-events: none; }
html.js-reveal .dv-plate.dv-r { opacity: 1; translate: 0 90px; scale: 0.96; transition: translate 1400ms var(--out), scale 1400ms var(--out); }
html.js-reveal .dv-plate.dv-r.is-in { translate: none; scale: 1; }
html.js-reveal .dv-plate-copy p { opacity: 0; translate: 0 20px; transition: opacity 900ms var(--out) 380ms, translate 1200ms var(--out) 380ms; }
html.js-reveal .dv-plate.is-in .dv-plate-copy p { opacity: 0.74; translate: none; }

/* Справка: линия над абзацем прочерчивается перед текстом. */
html.js-reveal .dv-guide-item.dv-r { border-top-color: transparent; }
html.js-reveal .dv-guide-item.dv-r::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1500ms var(--out); }
html.js-reveal .dv-guide-item.dv-r.is-in::before { transform: none; }
/* Три пункта манифеста: линия прочерчивается, пункты выходят по очереди, их черта вытягивается */
html.js-reveal .dv-manifest-pts.dv-r { position: relative; opacity: 1; translate: none; border-top-color: transparent; }
html.js-reveal .dv-manifest-pts.dv-r::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1500ms var(--out); }
html.js-reveal .dv-manifest-pts.dv-r li { opacity: 0; translate: 0 24px; transition: opacity 800ms var(--out) calc(260ms + var(--i) * 160ms), translate 1100ms var(--out) calc(260ms + var(--i) * 160ms); }
html.js-reveal .dv-manifest-pts.dv-r li::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--out) calc(420ms + var(--i) * 160ms), background 600ms ease calc(420ms + var(--i) * 160ms); }
.dv-manifest-pts li:nth-child(1) { --i: 0; } .dv-manifest-pts li:nth-child(2) { --i: 1; } .dv-manifest-pts li:nth-child(3) { --i: 2; }
html.js-reveal .dv-manifest-pts.dv-r.is-in::before, html.js-reveal .dv-manifest-pts.dv-r.is-in li::before { transform: none; }
html.js-reveal .dv-manifest-pts.dv-r.is-in li { opacity: 1; translate: none; }
html.js-reveal .dv-manifest-pts.dv-r.is-in li::before { background: var(--ink-2); }

/* Подвал: знак поднимается из-под линии обреза. */
html.js-reveal .dv-wordmark img { opacity: 0; transform: translateY(18%) scale(0.94); transition: opacity 1400ms var(--out), transform 1800ms var(--out); }
html.js-reveal .dv-wordmark.is-in img { opacity: 1; transform: none; }

/* Нижняя полоса первого экрана: «поезд» стоит в последнем ряду сетки, свободную
   высоту над ним забирает пустой ряд; входит каскадом после кнопки. */
@media (min-width: 1081px) {
  /* Заголовок с правой колонкой стоят по центру между верхом и «поездом»:
     пустые ряды сверху и снизу делят свободную высоту поровну. */
  html.dv-motion .dv-hero-top { grid-template-rows: minmax(0, 1fr) auto minmax(clamp(28px, 4vh, 64px), 1fr) auto; row-gap: 0; align-items: center; }
  .dv-hero-top > h1, .dv-hero-top > .dv-hero-side { grid-row: 2; }
  /* Герб выше и дальше от подзаголовка: зазор около 40px, общая центровка сохраняется. */
  .dv-mast { transform: translateY(-48px); margin-bottom: -34px; }
  .dv-hero-top > .dv-marquee { grid-row: 4; margin-top: 0; }
}

/* Телефон: первый экран не растягивается на всю высоту — устройства идут вскоре
   после герба, а связка MacBook + iPhone целиком помещается в ширину с полями 16px
   в любой фазе выезда (телефон без выноса по глубине, чтобы перспектива его не раздувала). */
@media (max-width: 640px) {
  html.dv-motion .dv-hero .dv-hero-top { min-height: 0; padding-bottom: 0; }
  .dv-hero-stage { width: 100%; margin-top: 36px; }
  .dv-marquee { margin-top: 28px; padding-block: 13px; }
  /* Выезд устройств на телефоне — из близкой позиции, без резерва высоты под сдвиг. */
  html.dv-motion .dv-hero-stage { transform: translate3d(0, calc((1 - var(--rise, 0)) * 36px), 0) scale(calc(0.9 + var(--rise, 0) * 0.1)); }
  @supports (animation-timeline: view()) { html.dv-motion .dv-hero-stage { animation-name: dvStageRiseM; } }
  .dv-marquee li { font-size: 20px; }
  .dv-rig--hero .dv-mac { width: 86%; margin-left: 6%; }
  .dv-rig--hero .dv-phone { width: 26%; right: 0.5%; transform: none; }
  /* Единый ритм между блоками: 48px. Лишняя пара линий была от нижней рамки закрытого
     продукта и цифр, к которой шапка следующего раздела добавляла свою верхнюю линию. */
  .dv-sec, .dv-manifest { padding-top: 48px; }
  .dv-story { padding-bottom: 48px; }
  .dv-sealed { margin-top: 0; padding-block: 48px; border-bottom: 0; }
  .dv-sealed + .dv-sec { padding-top: 0; }
  .dv-figs { margin-top: 48px; border-bottom: 0; }
  .dv-figs + .dv-sec { padding-top: 24px; }
  .dv-head { margin-bottom: 36px; }
  .dv-gate { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-marquee-track { animation: none !important; }
  html { scroll-behavior: auto; }
  .dv *, .dv *::before, .dv *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  html.js-reveal .dv-r, html.js-reveal .dv-media, html.js-reveal .dv-wipe, html.js-reveal .dv-plate.dv-r, html.js-reveal .dv-sealed-device.dv-r { opacity: 1; translate: none; scale: none; clip-path: none; }
  .dv-wd > span, html.js-reveal .dv-wordmark img { opacity: 1 !important; transform: none !important; }
  .dv-words span, .dv-rail li, html.js-reveal .dv-head.dv-r .dv-tag, html.js-reveal .dv-plate-copy p { translate: none; opacity: 1; }
  html.js-reveal .dv-head.dv-r::before, html.js-reveal .dv-guide-item.dv-r::before, html.js-reveal .dv-manifest-pts.dv-r::before, html.js-reveal .dv-manifest-pts.dv-r li::before { transform: none; }
  html.js-reveal .dv-manifest-pts.dv-r li { opacity: 1; translate: none; }
  .vz-msg, .vz-keys, .vz-chat p, .vz-row em { opacity: 1 !important; }
  .vz-lang p:not(:first-child) { display: none; }
  .vz-lang p:first-child { opacity: 1 !important; }
}

/* Кнопки шапки над светлыми блоками: тёмная подложка проявляется плавно. */
/* Флаг языка крупнее общего (2,04 от шрифта шапки): на десктопе почти во всю кнопку, на телефоне — в круг 46px. */
#langCycleBtn.lang-btn { font-size: calc(var(--footer-meta-font-size) * 2.55); }
html.is-mobile-preview #langCycleBtn.lang-btn { font-size: 27px; }
#homeLink, #langCycleBtn { transition: background-color 300ms ease, box-shadow 300ms ease, -webkit-backdrop-filter 300ms ease, backdrop-filter 300ms ease, filter 170ms ease, opacity 170ms ease, transform 170ms ease; }
html.dv-light-top body.is-project-page #homeLink.page-back-button { background: rgba(12, 12, 14, 0.72); background-color: rgba(12, 12, 14, 0.72); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
html.dv-light-top body #langCycleBtn.lang-btn { background-color: rgba(12, 12, 14, 0.72) !important; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.08); }
@media (min-width: 641px) {
  html.dv-light-top body #langCycleBtn.lang-btn { box-shadow: 0 0 0 6px rgba(12, 12, 14, 0.72), 0 0 0 7px rgba(255, 255, 255, 0.08); }
}

/* Плавающая «Обсудить задачу»: круг прижат к нижнему углу (в RTL — к левому). Сцену ведёт
   скрипт на GSAP (только transform, opacity и d у path); материал — как у главной кнопки.
   Кнопка живёт вне .dv, поэтому размеры заданы явно (box-sizing). */
.dv-fab, .dv-fab * { box-sizing: border-box; }
.dv-fab { --fab-c: 56px; position: fixed; z-index: 45; right: calc(env(safe-area-inset-right, 0px) + 20px); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px + var(--fab-lift, 0px)); width: var(--fab-c); height: var(--fab-c); opacity: 0; color: #08080a; text-decoration: none; pointer-events: none; transition: bottom 300ms ease; -webkit-tap-highlight-color: transparent; }
[dir="rtl"] .dv-fab { right: auto; left: calc(env(safe-area-inset-left, 0px) + 20px); }
.dv-fab[data-state="dock"] { pointer-events: auto; }
.dv-fab.is-off { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.dv-fab-body, .dv-fab-mag { position: absolute; inset: 0; transform-origin: 50% 50%; }
.dv-fab-shadow { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.62), 0 4px 10px -4px rgba(0, 0, 0, 0.4); }
.dv-fab-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--ink, #f3f2ed); }
/* Тонкая внутренняя кромка и верхний блик, внутри — «дышащая» полоса света. */
.dv-fab-gloss { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 58%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 0 2px rgba(12, 12, 14, 0.06), inset 0 -6px 12px -6px rgba(12, 12, 14, 0.18); }
.dv-fab-gloss i { position: absolute; inset: -20% auto -20% 0; width: 70%; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.95) 50%, transparent 80%); transform: translateX(-120%); }
.dv-fab-icon { position: absolute; inset: 0; display: grid; place-items: center; }
.dv-fab-icon svg { display: block; width: 20px; height: 20px; }
.dv-fab:focus-visible { outline: none; }
.dv-fab:focus-visible .dv-fab-gloss { box-shadow: inset 0 0 0 2px #08080a, inset 0 0 0 4px rgba(255, 255, 255, 0.9); }
/* Капля под главной кнопкой: потомок её обёртки, едет вместе со страницей. Точка слоя —
   центр нижней кромки кнопки; перешеек морфит GSAP, шар — transform. */
.dv-drip-host { position: relative; }
.dv-drip { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; opacity: 0; will-change: transform; }
.dv-drip-neck { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; fill: var(--ink, #f3f2ed); }
.dv-drip-ball { position: absolute; left: 0; top: 0; width: var(--fab-c, 56px); height: var(--fab-c, 56px); border-radius: 50%; background: var(--ink, #f3f2ed); transform: translate(-50%, -50%) scale(0); will-change: transform; }
@media (max-width: 640px) { .dv-drip-ball { width: 52px; height: 52px; } }
/* Простой режим (reduced-motion или без GSAP): только мягкое появление в углу. */
.dv-fab.is-simple { transition: bottom 300ms ease, opacity 220ms ease; }
.dv-fab.is-simple[data-state="dock"] { opacity: 1; }
@media (max-width: 640px) {
  .dv-fab { --fab-c: 52px; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + var(--fab-lift, 0px)); }
  [dir="rtl"] .dv-fab { right: auto; left: calc(env(safe-area-inset-left, 0px) + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  #homeLink, #langCycleBtn, .dv-fab { transition: none !important; }
}
/* Левая колонка с фигурой: место под неё — нижний отступ липкой шапки колонки. */
@media (min-width: 1081px) {
  .dv-shape-col { padding-bottom: calc(var(--shape-size, 0px) + 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .dv-ambient > i { animation: none !important; }
  .dv-term-lights i { transition: none !important; }
  .dv-order { transform: none !important; clip-path: inset(0 round 28px) !important; }
}