/*
 * Стили только страницы app/views/pages/development.php (/razrabotka).
 * Подключаются layout.php после общего app.css. Фон и узор первого экрана,
 * его типографика — общие блоки app.css («AST hero background»,
 * «Типографика первых экранов»), здесь их нет.
 */
/* AST development page (2026-10-18)
 * Страница /razrabotka: pages/development.php и partials/development-hero.php,
 * слои сцены — tools/development-hero/build_layers.py. Пространство имён
 * .ast-dv-*. */
.ast-dv-page {
  --dv-ink: #0b1b3a;
  --dv-body: #3b4f68;
  --dv-blue: #1f63f0;
  --dv-blue-soft: #e8f1ff;
  --dv-line: rgba(31, 99, 240, 0.12);
  --dv-surface: #ffffff;
  --dv-radius: 20px;
  --dv-radius-sm: 12px;
  --dv-shadow: 0 12px 30px rgba(7, 20, 45, 0.07);
  /* Единый внешний промежуток: над и под текстовой группой, между блоками
     и до тёмного блока обращения — как от заголовка раздела до карточек. */
  --dv-gap: clamp(12px, 1.2vw, 18px);
  background: #e1e8f3;
}

.ast-dv-shell { width: var(--shell); margin-inline: auto; }

/* ── Первый экран ─────────────────────────────────────────────────────────
   На компьютере сцена прижата к правому краю окна, стол стоит на нижней
   границе героя; до 1200 px сцена идёт под текстом. Все слои лежат в кадре
   сцены и заданы в долях его ширины и высоты, поэтому совпадают с картинкой
   при любой ширине. */
.ast-dv-hero {
  --dv-scene-h: clamp(380px, 33vw, 600px);
  --dv-scene-w: calc(var(--dv-scene-h) * 1536 / 964);
  --dv-gutter: max(clamp(32px, 3.3333vw, 48px), (100vw - 1760px) / 2);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

.ast-dv-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.ast-dv-hero__shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: var(--shell);
  min-height: var(--dv-scene-h);
  margin-inline: auto;
}

/* Левые 9 % кадра сцены прозрачны (до кружки), туда набор может заходить. */
.ast-dv-hero__content {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  max-width: calc(100vw - var(--dv-scene-w) * 0.91 - var(--dv-gutter) - 24px);
  padding: clamp(24px, 2.6vw, 40px) 0;
}

.ast-dv-hero__title, .ast-dv-hero__lead { margin: 0; }

.ast-dv-hero__title { max-width: 13em; }
.ast-dv-hero__lead { max-width: 34rem; }

.ast-dv-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }

.ast-dv-scene { position: absolute; inset: 0 0 0 auto; z-index: 1; width: var(--dv-scene-w); }

.ast-dv-scene__canvas { position: absolute; right: 0; bottom: 0; height: var(--dv-scene-h); aspect-ratio: 1536 / 964; }

.ast-dv-scene__art, .ast-dv-scene__code { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ast-dv-scene__code { overflow: hidden; }

.ast-dv-wifi, .ast-dv-eye, .ast-dv-finger, .ast-dv-lid { position: absolute; left: var(--dv-left); top: var(--dv-top); width: var(--dv-width); height: auto; pointer-events: none; }

.ast-dv-finger { transform-origin: var(--dv-origin); }

/* Сомкнутые веки — щель на средней линии глаза и шириной с сам глаз: в
   спрайте глаз сдвинут влево от центра (замер по слою). */
.ast-dv-eye--left { --dv-lid: inset(52% 27% 44.5% 18% round 50%); }
.ast-dv-eye--right { --dv-lid: inset(52% 27% 44.5% 22% round 50%); }

/* Свечение антенны — копия своих пикселей в режиме screen: в покое
   прозрачна, видно обычное свечение исходника. */
.ast-dv-wifi { opacity: 0; mix-blend-mode: screen; filter: drop-shadow(0 0 6px rgba(80, 200, 255, 0.8)); }

/* Строки, которые набираются в цикле, в покое закрыты шторкой цвета фона:
   в редакторе четыре строки и курсор на следующей. */
.ast-dv-cover { transform: translateX(0); }

/* Отблеск экрана на линзах: полоса света под маской прозрачных стёкол.
   Оправа в маску не входит, глаза под отблеском остаются видимыми. */
.ast-dv-glare {
  position: absolute;
  left: var(--dv-left);
  top: var(--dv-top);
  width: var(--dv-width);
  height: var(--dv-height);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask: var(--dv-lenses) center / 100% 100% no-repeat;
  mask: var(--dv-lenses) center / 100% 100% no-repeat;
}

.ast-dv-glare__band {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, rgba(150, 220, 255, 0) 15%, rgba(160, 225, 255, 0.4) 50%, rgba(150, 220, 255, 0) 85%);
  opacity: 0;
  transform: translateX(-110%) skewX(-18deg);
}

/* Кнопка паузы — в прозрачном левом верхнем углу кадра. */
.ast-dv-scene__toggle {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(4, 23, 60, 0.62);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: .76rem;
  line-height: 1;
  cursor: pointer;
}

.ast-dv-scene__toggle:hover { background: rgba(4, 23, 60, 0.82); }
.ast-dv-scene__toggle[hidden] { display: none; }

.ast-dv-scene__toggle-icon { flex: none; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }

.ast-dv-scene__toggle[aria-pressed="true"] .ast-dv-scene__toggle-icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Цикл 10 с: пауза 0–0,6 с; печать строк 0,6–1,5 / 1,6–2,5 / 2,6–3,6 /
   3,7–4,0 с, пальцы отстукивают в те же секунды; перевод строки 4,2 с;
   прокрутка 4,4–4,9 с; отблеск на линзах 4,6–5,4 с; пауза с миганием
   курсора до 10 с. Моргание — по классу is-blinking (initBlinkingScene),
   свечение антенны — свой цикл 13 с. */
@media (prefers-reduced-motion: no-preference) {
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-code { animation: ast-dv-scroll 10s infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-cover--1 { animation: ast-dv-type-1 10s infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-cover--2 { animation: ast-dv-type-2 10s infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-cover--3 { animation: ast-dv-type-3 10s infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-cover--4 { animation: ast-dv-type-4 10s infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-cursor { animation: ast-dv-cursor 10s infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-cursor__bar { animation: ast-dv-caret 1s steps(1, end) infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-finger--1 { animation: ast-dv-tap-1 10s linear infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-finger--2 { animation: ast-dv-tap-2 10s linear infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-finger--3 { animation: ast-dv-tap-3 10s linear infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-finger--4 { animation: ast-dv-tap-4 10s linear infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-glare__band { animation: ast-dv-glare 10s ease-in-out infinite; }
  .ast-dv-scene.is-running:not(.is-paused) .ast-dv-wifi { animation: ast-dv-wifi 13s ease-in-out infinite; }

.ast-dv-scene.is-blinking .ast-dv-eye, .ast-dv-cta__mask.is-blinking .ast-dv-eye { animation: ast-dv-blink 200ms ease-in-out 1; }
}

@keyframes ast-dv-scroll {
  0%, 44% { transform: translateY(0); animation-timing-function: ease-in-out; }
  49%, 100% { transform: translateY(-32px); }
}

@keyframes ast-dv-type-1 {
  0%, 6% { transform: translateX(0); animation-timing-function: steps(9, end); }
  15%, 100% { transform: translateX(var(--dv-w)); }
}

@keyframes ast-dv-type-2 {
  0%, 16% { transform: translateX(0); animation-timing-function: steps(8, end); }
  25%, 100% { transform: translateX(var(--dv-w)); }
}

@keyframes ast-dv-type-3 {
  0%, 26% { transform: translateX(0); animation-timing-function: steps(10, end); }
  36%, 100% { transform: translateX(var(--dv-w)); }
}

@keyframes ast-dv-type-4 {
  0%, 37% { transform: translateX(0); animation-timing-function: steps(2, end); }
  40%, 100% { transform: translateX(var(--dv-w)); }
}

/* Курсор идёт по набираемой строке теми же шагами, что и текст; концы
   строк — из разметки (partials/development-hero.php). */
@keyframes ast-dv-cursor {
  0%, 6% { transform: translate(0, 0); animation-timing-function: steps(9, end); }
  15% { transform: translate(98.5px, 0); animation-timing-function: steps(1, end); }
  16% { transform: translate(8px, 8px); animation-timing-function: steps(8, end); }
  25% { transform: translate(81.5px, 8px); animation-timing-function: steps(1, end); }
  26% { transform: translate(8px, 16px); animation-timing-function: steps(10, end); }
  36% { transform: translate(105.5px, 16px); animation-timing-function: steps(1, end); }
  37% { transform: translate(0, 24px); animation-timing-function: steps(2, end); }
  40% { transform: translate(11.5px, 24px); animation-timing-function: steps(1, end); }
  42%, 100% { transform: translate(0, 32px); }
}

@keyframes ast-dv-caret {
  0% { opacity: 1; }
  55% { opacity: 0; }
}

@keyframes ast-dv-glare {
  0%, 46% { opacity: 0; transform: translateX(-110%) skewX(-18deg); }
  47.5%, 52.5% { opacity: 1; }
  54%, 100% { opacity: 0; transform: translateX(290%) skewX(-18deg); }
}

@keyframes ast-dv-wifi {
  0%, 76%, 100% { opacity: 0; }
  84% { opacity: 0.55; }
}

/* Веки смыкаются к средней линии глаза (≈ 54 % высоты спрайта) скруглённой
   рамкой и оставляют тонкую щель шириной с глаз; визор и очки — неподвижный
   слой под глазом. */
@keyframes ast-dv-blink {
  0%, 100% { clip-path: inset(0 0 0 0 round 0); }
  45%, 55% { clip-path: var(--dv-lid); }
}

/* Пальцы: короткий подъём и удар по клавише вокруг первого кольца сустава. */
@keyframes ast-dv-tap-1 {
  0%, 100% { transform: rotate(0deg); }
  6.0% { transform: rotate(0deg); } 6.6% { transform: rotate(-4deg); } 7% { transform: rotate(0.8deg); } 7.6% { transform: rotate(0deg); }
  11.0% { transform: rotate(0deg); } 11.6% { transform: rotate(-4deg); } 12% { transform: rotate(0.8deg); } 12.6% { transform: rotate(0deg); }
  18.5% { transform: rotate(0deg); } 19.1% { transform: rotate(-4deg); } 19.5% { transform: rotate(0.8deg); } 20.1% { transform: rotate(0deg); }
  26.0% { transform: rotate(0deg); } 26.6% { transform: rotate(-4deg); } 27% { transform: rotate(0.8deg); } 27.6% { transform: rotate(0deg); }
  32.5% { transform: rotate(0deg); } 33.1% { transform: rotate(-4deg); } 33.5% { transform: rotate(0.8deg); } 34.1% { transform: rotate(0deg); }
}

@keyframes ast-dv-tap-2 {
  0%, 100% { transform: rotate(0deg); }
  8.0% { transform: rotate(0deg); } 8.6% { transform: rotate(-4deg); } 9% { transform: rotate(0.8deg); } 9.6% { transform: rotate(0deg); }
  15.5% { transform: rotate(0deg); } 16.1% { transform: rotate(-4deg); } 16.5% { transform: rotate(0.8deg); } 17.1% { transform: rotate(0deg); }
  22.0% { transform: rotate(0deg); } 22.6% { transform: rotate(-4deg); } 23% { transform: rotate(0.8deg); } 23.6% { transform: rotate(0deg); }
  29.0% { transform: rotate(0deg); } 29.6% { transform: rotate(-4deg); } 30% { transform: rotate(0.8deg); } 30.6% { transform: rotate(0deg); }
  37.0% { transform: rotate(0deg); } 37.6% { transform: rotate(-4deg); } 38% { transform: rotate(0.8deg); } 38.6% { transform: rotate(0deg); }
}

@keyframes ast-dv-tap-3 {
  0%, 100% { transform: rotate(0deg); }
  9.5% { transform: rotate(0deg); } 10.1% { transform: rotate(-4deg); } 10.5% { transform: rotate(0.8deg); } 11.1% { transform: rotate(0deg); }
  13.0% { transform: rotate(0deg); } 13.6% { transform: rotate(-4deg); } 14% { transform: rotate(0.8deg); } 14.6% { transform: rotate(0deg); }
  20.5% { transform: rotate(0deg); } 21.1% { transform: rotate(-4deg); } 21.5% { transform: rotate(0.8deg); } 22.1% { transform: rotate(0deg); }
  27.5% { transform: rotate(0deg); } 28.1% { transform: rotate(-4deg); } 28.5% { transform: rotate(0.8deg); } 29.1% { transform: rotate(0deg); }
  34.5% { transform: rotate(0deg); } 35.1% { transform: rotate(-4deg); } 35.5% { transform: rotate(0.8deg); } 36.1% { transform: rotate(0deg); }
}

@keyframes ast-dv-tap-4 {
  0%, 100% { transform: rotate(0deg); }
  7.0% { transform: rotate(0deg); } 7.6% { transform: rotate(-4deg); } 8% { transform: rotate(0.8deg); } 8.6% { transform: rotate(0deg); }
  16.8% { transform: rotate(0deg); } 17.4% { transform: rotate(-4deg); } 17.8% { transform: rotate(0.8deg); } 18.4% { transform: rotate(0deg); }
  23.5% { transform: rotate(0deg); } 24.1% { transform: rotate(-4deg); } 24.5% { transform: rotate(0.8deg); } 25.1% { transform: rotate(0deg); }
  30.5% { transform: rotate(0deg); } 31.1% { transform: rotate(-4deg); } 31.5% { transform: rotate(0.8deg); } 32.1% { transform: rotate(0deg); }
  38.0% { transform: rotate(0deg); } 38.6% { transform: rotate(-4deg); } 39% { transform: rotate(0.8deg); } 39.6% { transform: rotate(0deg); }
}

/* ── Тело страницы ──────────────────────────────────────────────────────── */
.ast-dv-body { padding: var(--dv-gap) 0; }

.ast-dv-stack { display: grid; gap: var(--dv-gap); }

.ast-dv-section h2, .ast-dv-field h2, .ast-dv-cta h2 { margin: 0; font-size: clamp(1.75rem, 2.5vw, 2.35rem); font-weight: 700; line-height: 1.16; letter-spacing: 0; }

.ast-dv-section h2, .ast-dv-field h2 { color: var(--dv-ink); }

.ast-dv-section h3, .ast-dv-step h3 { margin: 0; color: var(--dv-ink); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }

.ast-dv-section p, .ast-dv-field p { margin: 0; color: var(--dv-body); line-height: 1.55; }

.ast-dv-section > h2 + * { margin-top: var(--dv-gap); }
.ast-dv-section > h2 + .ast-dv-section__lead { margin-top: 6px; }
.ast-dv-section__lead + * { margin-top: var(--dv-gap); }

.ast-dv-section__note { margin-top: var(--dv-gap) !important; text-align: center; font-size: .94rem; }

.ast-dv-icon, .ast-dv-step__icon { display: inline-grid; flex: none; place-items: center; color: var(--dv-blue); }

.ast-dv-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--dv-blue-soft); }

.ast-dv-icon svg { width: 26px; height: 26px; }
.ast-dv-icon .i-stroke, .ast-dv-step__icon .i-stroke { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ast-dv-step__icon svg { width: 30px; height: 30px; }

/* Направления: 2 × 2 на компьютере. */
.ast-dv-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }

.ast-dv-card, .ast-dv-own__card, .ast-dv-step { border: 1px solid var(--dv-line); border-radius: var(--dv-radius); background: var(--dv-surface); box-shadow: var(--dv-shadow); }

.ast-dv-card { display: flex; gap: 16px; align-items: flex-start; padding: clamp(18px, 1.8vw, 26px); }

.ast-dv-card__body { display: grid; gap: 8px; min-width: 0; }

.ast-dv-card__lead { padding-bottom: 2px; color: var(--dv-ink) !important; font-weight: 500; }

/* Выездные сотрудники: общий блок со светлой подложкой и миниатюрами. */
.ast-dv-field {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-radius);
  background: linear-gradient(120deg, #f4f8ff 0%, #e9f1ff 100%);
  box-shadow: var(--dv-shadow);
}

.ast-dv-field__copy { display: grid; gap: 10px; align-content: center; }

.ast-dv-field__copy h2 { margin-bottom: 4px; }

.ast-dv-field__demo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 1.6vw, 22px);
  min-width: 0;
}

/* Условные миниатюры интерфейсов: только подписи, без чисел и данных. */
.ast-dv-phone {
  flex: none;
  width: clamp(168px, 15vw, 210px);
  padding: 8px;
  border-radius: 26px;
  background: #11182a;
  box-shadow: 0 18px 36px rgba(7, 20, 45, 0.22);
}

.ast-dv-phone__screen {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 300px;
  padding: 16px 12px;
  overflow: hidden;
  border-radius: 19px;
  background: #ffffff;
}

.ast-dv-ui__title { margin: 0; color: var(--dv-ink) !important; font-size: .95rem; font-weight: 700; }

.ast-dv-ui__tabs { display: flex; flex-wrap: wrap; gap: 4px; font-size: .62rem; color: var(--dv-body); }

.ast-dv-ui__tabs span { padding: 3px 7px; border-radius: 999px; background: #eef3fb; }

.ast-dv-ui__tabs .is-active { background: var(--dv-blue); color: #ffffff; }

.ast-dv-ui__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.ast-dv-ui__list li {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #e3ebf7;
  border-radius: 10px;
  min-width: 0;
  font-size: .68rem;
  font-weight: 600;
  color: var(--dv-ink);
  overflow-wrap: anywhere;
}

.ast-dv-ui__list em {
  justify-self: end;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .58rem;
  font-style: normal;
  font-weight: 700;
  color: #ffffff;
}

.ast-dv-ui__list .is-work { background: var(--dv-blue); }
.ast-dv-ui__list .is-new { background: #f2a33a; }
.ast-dv-ui__list .is-done { background: #2e9e6b; }

.ast-dv-task {
  display: grid;
  gap: 8px;
  width: clamp(190px, 16vw, 230px);
  margin-bottom: clamp(24px, 3vw, 44px);
  padding: 14px;
  border: 1px solid var(--dv-line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(7, 20, 45, 0.14);
}

.ast-dv-task__name { padding: 8px; border-radius: 10px; background: #f3f7fe; color: var(--dv-ink) !important; font-size: .74rem; font-weight: 600; }

.ast-dv-task__checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .7rem; color: var(--dv-body); }

.ast-dv-task__checks li { position: relative; padding-left: 22px; }

.ast-dv-task__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--dv-blue);
  border-radius: 4px;
}

.ast-dv-task__checks .is-done::before {
  background: var(--dv-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2 6 9.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.ast-dv-task__button, .ast-dv-chat__button { display: block; padding: 7px 10px; border-radius: 10px; text-align: center; font-size: .7rem; font-weight: 700; }

.ast-dv-task__button { background: var(--dv-blue); color: #ffffff; }

/* Собственный опыт: две карточки, в каждой текст и миниатюра. */
.ast-dv-own { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }

.ast-dv-own__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 1.6vw, 24px);
  align-items: center;
  padding: clamp(18px, 1.8vw, 26px);
}

.ast-dv-own__copy { display: grid; gap: 10px; align-content: start; }

.ast-dv-own__head { display: flex; gap: 12px; align-items: center; }

.ast-dv-portal {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  width: clamp(220px, 19vw, 300px);
  overflow: hidden;
  border: 1px solid #dde7f6;
  border-radius: 14px;
  background: #f5f8fd;
  box-shadow: 0 14px 30px rgba(7, 20, 45, 0.12);
}

.ast-dv-portal__side {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px 8px;
  background: #0d2350;
  color: rgba(255, 255, 255, 0.78);
  font-size: .56rem;
}

.ast-dv-portal__side span { padding: 3px 5px; border-radius: 6px; }
.ast-dv-portal__side .is-active { background: rgba(255, 255, 255, 0.14); color: #ffffff; }

.ast-dv-portal__logo { margin-bottom: 4px; color: #ffffff; font-size: .72rem; font-weight: 800; }

.ast-dv-portal__main { display: grid; gap: 8px; padding: 10px; }

/* Условная карта: сетка «улиц» и метки объектов. */
.ast-dv-portal__map {
  position: relative;
  height: 110px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(31, 99, 240, 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgba(31, 99, 240, 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    #ffffff;
}

.ast-dv-portal__map i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--dv-blue);
  box-shadow: 0 2px 4px rgba(7, 20, 45, 0.25);
}

.ast-dv-portal__map i:nth-child(1) { left: 18%; top: 28%; }
.ast-dv-portal__map i:nth-child(2) { left: 46%; top: 52%; background: #2e9e6b; }
.ast-dv-portal__map i:nth-child(3) { left: 70%; top: 22%; }
.ast-dv-portal__map i:nth-child(4) { left: 30%; top: 70%; background: #2e9e6b; }
.ast-dv-portal__map i:nth-child(5) { left: 80%; top: 66%; }

.ast-dv-portal__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

.ast-dv-portal__tiles span {
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: 8px;
  background: #ffffff;
  font-size: .56rem;
  color: var(--dv-ink);
}

.ast-dv-portal__tiles i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--dv-blue) 0 55%, #e3ebf7 55%); }

.ast-dv-portal__tiles span + span i { background: linear-gradient(90deg, #2e9e6b 0 72%, #e3ebf7 72%); }

.ast-dv-phone--chat { width: clamp(150px, 12vw, 180px); }
.ast-dv-phone--chat .ast-dv-phone__screen { min-height: 250px; gap: 7px; }

.ast-dv-chat__head {
  margin: -4px -2px 4px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--dv-blue);
  color: #ffffff !important;
  font-size: .72rem;
  font-weight: 700;
}

.ast-dv-chat__bubble { padding: 8px; border-radius: 10px 10px 10px 2px; background: #eef3fb; color: var(--dv-ink) !important; font-size: .68rem; }

.ast-dv-chat__button { border: 1px solid #cfdcf3; color: var(--dv-blue); }

/* Этапы: четыре блока без стрелок. */
.ast-dv-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin: var(--dv-gap) 0 0;
  padding: 0;
  list-style: none;
}

.ast-dv-step { display: grid; gap: 10px; align-content: start; padding: clamp(16px, 1.6vw, 24px); }

.ast-dv-step__head { display: flex; gap: 12px; align-items: center; }

.ast-dv-step__num { color: #8fb2f5; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 600; line-height: 1; }

/* Тёмный завершающий блок касается подвала: нижний отступ main не нужен. */
.site-main:has(.ast-dv-page) { padding-bottom: 0; }
.site-main:has(.ast-dv-page) + .site-footer { margin-top: 0; }

/* ── Завершающий блок ──────────────────────────────────────────────────────
   Тёмный, как первый экран: те же токены фона и узора, что в общем блоке
   AST hero background. Маск по пояс стоит на нижней границе блока. */
.ast-dv-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: #ffffff; }

.ast-dv-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-pattern-image);
  background-repeat: repeat;
  background-size: calc(var(--hero-pattern-step) * 9.947) calc(var(--hero-pattern-step) * 6.92);
  background-position: right calc(var(--hero-pattern-step) * -0.135) top calc(var(--hero-pattern-step) * 0.156);
  opacity: var(--hero-pattern-opacity);
  pointer-events: none;
}

.ast-dv-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 48px); align-items: end; }

.ast-dv-cta__copy { display: grid; gap: 8px; justify-items: start; padding: clamp(24px, 2.6vw, 40px) 0; }

.ast-dv-cta__copy p { max-width: 60ch; margin: 0; color: #e5eefb; line-height: 1.55; }

.ast-dv-cta__actions { margin-top: 8px; }

/* Окно бюста: видны голова и грудь, ниже — срез границей блока. */
.ast-dv-cta__mask { align-self: stretch; position: relative; width: clamp(190px, 17vw, 260px); min-height: clamp(170px, 14vw, 220px); }

.ast-dv-cta__bust { position: absolute; left: 0; right: 0; top: 14px; aspect-ratio: 516 / 612; }

.ast-dv-cta__art { display: block; width: 100%; height: auto; }

/* ── Адаптивность ──────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .ast-dv-hero__shell { min-height: 0; }
  .ast-dv-hero__content { max-width: none; padding-bottom: clamp(8px, 2vw, 16px); }
  .ast-dv-hero__title { max-width: 20ch; }

  /* Ширина сцены под текстом — как у сцены главной на планшете. */
  .ast-dv-scene { position: relative; inset: auto; width: min(100%, 730px); margin-left: auto; }

  /* В одноколоночной раскладке левый верхний угол кадра занят антенной,
     свободен правый — над монитором. */
  .ast-dv-scene__toggle { left: auto; right: 10px; top: 4px; }

  .ast-dv-scene__canvas { position: relative; right: auto; bottom: auto; width: 100%; height: auto; }

.ast-dv-services, .ast-dv-own { grid-template-columns: minmax(0, 1fr); }
  .ast-dv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ast-dv-field { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599.98px) {
.ast-dv-hero__actions .button, .ast-dv-cta__actions .button { width: 100%; justify-content: center; }

  .ast-dv-card { flex-direction: column; gap: 12px; }
  .ast-dv-own__card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ast-dv-own__copy { justify-self: stretch; }
  .ast-dv-steps { grid-template-columns: minmax(0, 1fr); }
  .ast-dv-task { margin-bottom: 0; }
  .ast-dv-field__demo { flex-wrap: wrap; align-items: center; }
  .ast-dv-section__note { text-align: left; }

  .ast-dv-cta__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ast-dv-cta__copy { padding-bottom: 8px; }
  .ast-dv-cta__actions { width: 100%; }
  .ast-dv-cta__mask { justify-self: center; width: 180px; min-height: 160px; }
}
/* Высота и набор первого экрана — как у главной (общий блок «AST business
   heroes fit» в app.css): от 600 px набор, поля и кнопка уменьшены
   коэффициентом --hero-fit-k, с 1200 px высота сцены и героя — формула
   --hero-fit-h. Все слои заданы в долях кадра и уменьшаются вместе с ним.
   Герой по-прежнему растёт по содержимому, если тексту не хватает места.
   Блок стоит после адаптива выше, чтобы перекрыть его поля. */
@media (min-width: 600px) {
  .ast-dv-hero__content { padding-top: calc(clamp(24px, 2.6vw, 40px) * var(--hero-fit-k)); }

  .ast-dv-hero__actions {
    gap: calc(12px * var(--hero-fit-k));
    margin-top: calc(6px * var(--hero-fit-k));
  }
}

@media (min-width: 600px) and (max-width: 1199.98px) {
  .ast-dv-hero__content { padding-bottom: calc(clamp(8px, 2vw, 16px) * var(--hero-fit-k)); }
}

@media (min-width: 1200px) {
  .ast-dv-hero { --dv-scene-h: var(--hero-fit-h); }
  .ast-dv-hero__content { padding-bottom: calc(clamp(24px, 2.6vw, 40px) * var(--hero-fit-k)); }
}
/* /AST development page */