/* ============================================================
   Nenta (vi) — веб-слой бренда. Токены и стиль взяты из печатных листовок
   (docs/leaflets/brand.css + brand-vi.css), печатные `mm` пересчитаны в `rem`.
   Канон: ../../docs/business-decisions/vietnam-landing-architecture-2026-07.md §12

   ⛔ Никаких внешних шрифтов и CDN: профиль обязан работать после отцепления
      на вьетнамский хост без обращений в чужой контур.
   ⛔ Не подключать /css/main.css и /css/landing.css — там русская типографика,
      Manrope и смарт-CTA российского сайта.
   ============================================================ */

@font-face { font-family: 'Be Vietnam Pro'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/vi/bevietnampro-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/vi/bevietnampro-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/assets/fonts/vi/bevietnampro-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/assets/fonts/vi/bevietnampro-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/assets/fonts/vi/bevietnampro-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/assets/fonts/vi/bevietnampro-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('/assets/fonts/vi/bevietnampro-800-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('/assets/fonts/vi/bevietnampro-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  /* Платформенный уровень — те же значения, что в печати */
  --ink: #1B1033;
  --deep: #2E1065;
  --primary: #6D28D9;
  --primary-soft: #EDE6FF;
  --accent: #FFB703;
  --accent-ink: #6B4400;
  /* Уровень приложения (Tích Sao) — только в секции приложения */
  --app-primary: #7C3AED;
  --app-pink: #EC4899;
  --app-mint: #10B981;
  --paper: #FFFFFF;
  --paper-warm: #FAF7F2;
  --line: rgba(27, 16, 51, .12);
  --muted: #6B6480;
  --r-lg: 1.5rem;
  --r-md: .875rem;
  --r-sm: .5rem;
  /* Плоский keyline вместо теней — чтобы сайт и листовка выглядели одним продуктом */
  --keyline: 1px solid var(--line);
  /* Межстрочный с запасом: у вьетнамской диакритики два яруса над строкой */
  --lh: 1.62;
}

* { box-sizing: border-box; }

body.vn {
  margin: 0;
  font-family: 'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: var(--lh);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.vn-wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.vn-sec { padding: 4.5rem 0; }
.vn-sec--warm { background: var(--paper-warm); }
.vn-sec--deep { background: var(--deep); color: #fff; }
.vn-sec--deep .vn-lead, .vn-sec--deep .vn-card__d { color: rgba(255, 255, 255, .82); }

.vn-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: 0 0 .75rem; }
.vn-sec--deep .vn-eyebrow { color: var(--accent); }
.vn-h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.24; margin: 0 0 1.25rem; }
.vn-h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.3; margin: 0 0 1rem; }
.vn-h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .5rem; }
.vn-lead { font-size: 1.125rem; color: var(--muted); margin: 0 0 2rem; max-width: 44rem; }

.vn-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.vn-card { background: var(--paper); border: var(--keyline); border-radius: var(--r-md); padding: 1.5rem; }
/* Карточка с фотошапкой: кадр во всю ширину, скругление наследуется от карточки. */
.vn-card--ph { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vn-card--ph > :not(.vn-card__ph) { padding-inline: 1.25rem; }
.vn-card--ph > .vn-h3 { margin-top: 1.125rem; }
.vn-card--ph > .vn-card__d:last-child { padding-bottom: 1.375rem; }
.vn-card__ph { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.vn-sec--deep .vn-card { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.vn-card__d { color: var(--muted); margin: 0; }

.vn-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem;
  padding: .875rem 1.5rem; border-radius: var(--r-sm); text-decoration: none; border: 2px solid transparent; }
.vn-btn--zalo { background: var(--accent); color: var(--accent-ink); }
.vn-btn--ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }

.vn-steps { counter-reset: s; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.vn-steps li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; }
.vn-steps li::before { content: counter(s); display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--primary-soft); color: var(--deep); font-weight: 800; }

.vn-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.vn-chips li { border: var(--keyline); border-radius: 999px; padding: .375rem .875rem; font-size: .9375rem; font-weight: 600; }

.vn-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; }
.vn-logo { font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; color: var(--deep); text-decoration: none; }
.vn-foot { padding: 2.5rem 0 3.5rem; border-top: var(--keyline); color: var(--muted); font-size: .9375rem; }

@media (max-width: 40rem) {
  .vn-sec { padding: 3rem 0; }
}

/* ============================================================
   ИНТЕРФЕЙСНЫЕ МОКАПЫ — порт docs/leaflets/ui-mock.css на веб.
   Интерфейс нарисован вёрсткой, а не снят скриншотом: тот же приём, что в печати.
   ⛔ Не заменять AI-картинками «похожими на интерфейс» — модель рисует нечитаемые
      надписи и несуществующие функции.
   Печатные mm пересчитаны в rem (1mm ≈ .45rem: кегль 2.1mm печати ≈ 1rem экрана).
   ============================================================ */

/* Корпус мокапа. Продуктом кадр делают два признака: адрес в строке браузера
   и собственная навигация приложения слева. Без них фиолетовая полоса с тремя
   точками читалась схемой из презентации (класс поймал оператор 2026-08-03).
   Разметка — `includes/sections/vi/_win.php`, иконки — спрайт в chrome-head. */
.win { border-radius: var(--r-md); overflow: hidden; background: #fff; color: var(--ink);
  border: var(--keyline); box-shadow: 0 1.25rem 2.75rem rgba(20, 7, 48, .14); }
.vn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.win__chrome { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem;
  background: #ECE9F5; border-bottom: 1px solid rgba(27, 16, 51, .1); }
.win__dots { display: flex; gap: .3rem; flex: none; }
.win__dots i { width: .5rem; height: .5rem; border-radius: 50%; }
.win__dots i:nth-child(1) { background: #F2705A; }
.win__dots i:nth-child(2) { background: #F3BC4B; }
.win__dots i:nth-child(3) { background: #56C271; }
.win__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: .375rem;
  background: #fff; border-radius: 999px; padding: .25rem .75rem;
  font-size: .75rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__lock { width: .6875rem; height: .6875rem; flex: none; fill: none; stroke: #56C271; stroke-width: 2; }

.win__app { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); }
.win__nav { background: var(--deep); color: #fff; padding: .75rem .5rem; display: grid; gap: .125rem; align-content: start; }
.win__brand { display: flex; align-items: center; gap: .5rem; padding: .125rem .5rem .875rem; font-size: .8125rem; font-weight: 800; }
.win__brand i { width: 1.25rem; height: 1.25rem; flex: none; border-radius: .3125rem; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: .6875rem; font-weight: 800; font-style: normal; }
.win__navi { display: grid; grid-template-columns: 1rem 1fr; align-items: center; gap: .5rem;
  padding: .4375rem .5rem; border-radius: .375rem; color: rgba(255, 255, 255, .64); }
.win__navi.is-on { background: rgba(255, 255, 255, .15); color: #fff; }
.win__navi b { font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.win__navi.is-on b { font-weight: 700; }
.win__i { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

.win__main { min-width: 0; display: flex; flex-direction: column; background: var(--paper-warm); }
.win__head { display: flex; align-items: baseline; gap: .75rem; padding: .875rem 1rem .25rem; }
.win__head b { font-size: .9375rem; font-weight: 800; }
.win__head span { font-size: .75rem; font-weight: 600; color: var(--muted); margin-left: auto; white-space: nowrap; }
.win__body { padding: 1rem; background: var(--paper-warm); }

/* 7.5rem, а не 9rem: навигация приложения забрала 8.75rem у колонки экрана, и
   третий показатель срывался на вторую строку с дырой рядом. */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .75rem; }
.kpi__c { background: #fff; border-radius: var(--r-sm); padding: .875rem 1rem; border: var(--keyline); }
.kpi__l { font-size: .8125rem; font-weight: 700; color: var(--muted); }
.kpi__v { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin-top: .25rem; line-height: 1; }
.kpi__v small { font-size: 1.0625rem; font-weight: 800; }
.kpi__d { font-size: .8125rem; font-weight: 800; margin-top: .35rem; color: var(--app-mint); }

.rowlist { background: #fff; border-radius: var(--r-sm); border: var(--keyline); margin-top: .75rem; overflow: hidden; }
.rowlist__h { font-size: .9375rem; font-weight: 800; padding: .875rem 1rem .5rem; }
.row { display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem; border-top: var(--keyline); }
.row__av { width: 2rem; height: 2rem; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-size: .8125rem; font-weight: 800; }
.row__n { font-size: .9375rem; font-weight: 700; }
.row__s { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.row__b { margin-left: auto; font-size: .8125rem; font-weight: 800; padding: .25rem .625rem; border-radius: .375rem; white-space: nowrap; }
.b--risk { background: #FEE2E2; color: #B91C1C; }
.b--warn { background: #FEF3C7; color: #92400E; }
.b--ok   { background: #D1FAE5; color: #065F46; }

.sched { display: grid; grid-template-columns: repeat(5, 1fr); gap: .375rem; }
.sched__d { font-size: .75rem; font-weight: 800; color: var(--muted); text-align: center; letter-spacing: .06em; }
.les { border-radius: .375rem; padding: .5rem .375rem; margin-top: .375rem; text-align: center;
  background: var(--primary-soft); color: var(--deep); }
.les__t { font-size: .8125rem; font-weight: 800; line-height: 1.15; }
.les__s { font-size: .75rem; font-weight: 700; opacity: .62; }
.les--mint { background: #DCFCE7; color: #065F46; }
.les--gold { background: #FFF8E7; color: var(--accent-ink); }
.les--ghost { background: transparent; outline: 1px solid var(--line); outline-offset: -1px; color: rgba(27,16,51,.32); }

.bars { display: flex; align-items: stretch; gap: .75rem; height: 8rem; position: relative; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }
.bars::before { top: 33%; } .bars::after { top: 66%; }
.bars > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bars u { font-size: .75rem; font-weight: 800; color: var(--muted); text-decoration: none; margin-bottom: .25rem; }
.bars i { display: block; width: 1.25rem; border-radius: .25rem .25rem 0 0; background: linear-gradient(180deg, #8B5CF6, var(--primary)); }
.bars i.on { background: var(--accent); }

.seg { display: flex; height: 1rem; border-radius: .375rem; overflow: hidden; margin-top: 1rem; }
.seg i { display: block; }
.seg--paid { background: linear-gradient(90deg, #7C3AED, var(--primary)); }
.seg--wait { background: #C4B5FD; }
.seg--debt { background: var(--accent); }
.leg { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .75rem; }
.leg div { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.leg em { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.leg b { display: block; font-size: .9375rem; color: var(--ink); font-weight: 800; }

/* Герой: глубина градиентами, не фотографией (переработка 2026-08-04 — сквозь
   маску снимок читался грязью; свечения на своих местах держат сцену чище).
   Слой ::before — тонкая сетка, гаснущая к тексту: фактура продукта, не декорация. */
.vn-hero { position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(56% 74% at 82% 18%, rgba(139, 92, 246, .34), rgba(139, 92, 246, 0) 70%),
    radial-gradient(44% 58% at 68% 96%, rgba(255, 183, 3, .14), rgba(255, 183, 3, 0) 66%),
    radial-gradient(52% 70% at 6% 88%, rgba(76, 44, 150, .5), rgba(76, 44, 150, 0) 70%),
    linear-gradient(160deg, #221046 0%, var(--deep) 55%, #120A26 100%); }
.vn-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
  -webkit-mask-image: radial-gradient(70% 90% at 74% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 90% at 74% 40%, #000 0%, transparent 78%); }
.vn-hero > .vn-wrap { position: relative; z-index: 2; }
.vn-hero .vn-card { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); backdrop-filter: blur(2px); }
.vn-hero .vn-card__d, .vn-hero .vn-lead { color: rgba(255,255,255,.84); }
.vn-hero .vn-eyebrow { color: var(--accent); }

.vn-stat { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; margin: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); max-width: 34rem; }
.vn-stat b { font-size: 2.75rem; font-weight: 800; letter-spacing: -.03em; color: var(--accent); line-height: 1; flex: none; }
.vn-stat span { font-size: .9375rem; font-weight: 600; color: rgba(255,255,255,.86); }

/* Двухколоночный блок «текст + мокап» */
.vn-split { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
@media (max-width: 56rem) { .vn-split { grid-template-columns: 1fr; } }

.vn-list { display: grid; gap: .875rem; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.vn-list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; }
.vn-list li::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); margin-top: .5rem; }

/* Экран приложения — корпус телефона вёрсткой, как в печатном слое */
.phone { position: relative; border-radius: 2.375rem; border: .3125rem solid #150B2E; background: #fff;
  overflow: hidden; width: 15rem; max-width: 100%; }
/* Кадр «родитель и ученик» + экран приложения поверх него: связка «кто держит телефон»
   и «что он там видит» в одном блоке. Ниже 56rem `.vn-split` схлопывается в колонку —
   там телефон встаёт под фото, без наложения.

   ⛔ Высоту корпуса не отдавать содержимому: три карточки со скидкой на перенос
   вытягивали его в 200×481 (1:2.4) — таких телефонов не бывает, и мокап оказывался
   на сотню пикселей выше самой фотографии, нависая над кадром (видеоразбор
   2026-08-03, второй заход: «узкий и высокий, перекрывает фото»). Пропорции задаёт
   `aspect-ratio` 27/55 ≈ 1:2.04 — это корпус реального аппарата; слабину добирает
   экран (`flex: 1`), как в живом приложении, где список не заполняет весь экран.
   Фотография — квадрат в 76% колонки: телефон почти той же высоты стоит рядом,
   заходя на кадр примерно третью своей ширины, а не ложась на него целиком. */
.vn-appshot { position: relative; padding-bottom: 1rem; }
.vn-appshot__ph { display: block; width: 78%; height: auto; border-radius: var(--r-md);
  aspect-ratio: 1 / 1; object-fit: cover; }
.vn-appshot .phone { position: absolute; right: 0; bottom: 0; width: 14.5rem;
  aspect-ratio: 1 / 2; display: flex; flex-direction: column;
  box-shadow: 0 1.5rem 3rem rgba(20, 7, 48, .28); }
/* ⛔ Постоянные части корпуса — `flex: none`: без этого вырез сжимается в ноль
   (тёмная полоса с динамиком исчезает), а таб-бар режет подписи разделов пополам.
   Слабину добирает только экран. */
.vn-appshot .phone__top,
.vn-appshot .phone__stat,
.vn-appshot .phone__hd,
.vn-appshot .phone__tabs { flex: none; }
.vn-appshot .phone__scr { flex: 1; align-content: start; padding: .75rem; gap: .5rem; }
.vn-appshot .phone__card { padding: .5rem .6875rem; }
@media (max-width: 56rem) {
  .vn-appshot { padding-bottom: 0; display: grid; gap: 1.25rem; justify-items: center; }
  .vn-appshot__ph { width: 100%; aspect-ratio: 4 / 3; }
  .vn-appshot .phone { position: static; width: 15rem; }
}
/* Статус-бар и таб-бар — те же два признака, что у окна браузера: без них экран
   читается карточкой-схемой, а не приложением, которое родитель держит в руке.
   Остров вместо полоски-«чёлки»: сплошная тёмная планка поверх всей ширины читалась
   рамкой из времён Bootstrap 3, а не корпусом современного телефона. */
.phone__island { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 4.25rem; height: 1.125rem; border-radius: 999px; background: #150B2E; }
.phone__stat { display: flex; align-items: center; justify-content: space-between;
  padding: .6875rem .9375rem .1875rem; font-size: .625rem; font-weight: 800; color: var(--ink); }
.phone__sys { display: flex; align-items: center; gap: .3125rem; }
.phone__bat { position: relative; width: 1.125rem; height: .5625rem; padding: .0625rem;
  border: 1px solid rgba(27, 16, 51, .4); border-radius: .1875rem; }
.phone__bat::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: .0625rem; height: .1875rem; border-radius: 0 1px 1px 0; background: rgba(27, 16, 51, .4); }
.phone__bat i { display: block; height: 100%; width: 72%; border-radius: .0625rem; background: var(--ink); }
.phone__net { display: flex; align-items: flex-end; gap: .0625rem; height: .5rem; }
.phone__net i { width: .1875rem; border-radius: .0625rem; background: var(--ink); }
.phone__net i:nth-child(1) { height: 30%; }
.phone__net i:nth-child(2) { height: 55%; }
.phone__net i:nth-child(3) { height: 80%; }
.phone__net i:nth-child(4) { height: 100%; opacity: .25; }
.phone__hd { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3125rem .9375rem .625rem; }
.phone__hd b { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; }
.phone__ava { width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-size: .6875rem; font-weight: 800; }
.phone__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .125rem;
  padding: .4375rem .375rem .25rem; border-top: 1px solid rgba(27, 16, 51, .07); background: #fff; }
.phone__tabs span { display: grid; justify-items: center; gap: .1875rem; padding: .25rem 0;
  border-radius: .625rem; color: rgba(27, 16, 51, .34); }
.phone__tabs span.is-on { color: var(--app-primary); }
.phone__tabs b { font-size: .5625rem; font-weight: 700; }
.phone__tabs .win__i { width: 1rem; height: 1rem; }
/* Индикатор жеста «домой» — нижняя кромка современного телефона. */
.phone__home { height: 1.125rem; background: #fff; display: grid; place-items: center; }
.phone__home::after { content: ''; width: 4.5rem; height: .1875rem; border-radius: 999px;
  background: rgba(27, 16, 51, .2); }
.phone__scr { padding: .8125rem; display: grid; gap: .5rem; background: var(--paper-warm); }
.phone__card { background: #fff; border: var(--keyline); border-radius: .625rem; padding: .625rem .75rem; }
.phone__t { font-size: .8125rem; font-weight: 800; }
.phone__s { font-size: .75rem; font-weight: 600; color: var(--muted); }
.phone__pay { background: var(--app-primary); color: #fff; border-radius: .625rem; padding: .75rem;
  font-size: .8125rem; font-weight: 800; text-align: center; }

/* Карточка графика и крупная сумма — доперенос из ui-mock.css (без них заголовок
   графика склеивается, а сумма теряет кегль). */
.chart { background: #fff; border-radius: var(--r-sm); padding: 1rem; border: var(--keyline); margin-top: .75rem; }
.chart__h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .875rem; }
.chart__t { font-size: .9375rem; font-weight: 800; }
.chart__n { font-size: .8125rem; font-weight: 700; color: var(--muted); text-align: right; }
.big { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.big small { font-size: 1.25rem; }

/* ── Мобильная раскладка (VN-трафик — mobile-first) ─────────────────────────
   ⛔ Причина оверфлоу — не паддинги, а min-content мокапов: `.sched` с пятью
   колонками не сжимается ниже ~470px и растягивает <body>, из-за чего обрезался
   ВЕСЬ текст справа. Лечим источником: мокап скроллится внутри своей рамки,
   страница — нет. ⛔ Не заменять на `overflow-x: hidden` у body: это спрячет
   симптом и оставит контент за кадром. */
@media (max-width: 40rem) {
  .vn-h1   { font-size: 1.95rem; letter-spacing: -.01em; }
  .vn-lead { font-size: 1.02rem; }
  .vn-sec  { padding-block: 2.5rem; }
  .vn-split { gap: 1.75rem; }

  /* Мокап окна: свой горизонтальный скролл, страница остаётся шириной вьюпорта */
  .win__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Пять дней в 390px не влезают — пятая колонка обрывается у края и читается
     как «сломано». На мобиле показываем четыре дня целиком. */
  .sched { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
  .sched > :nth-child(5) { display: none; }
  .win__body { overflow-x: visible; }
  /* Кадр фото: телефон с английской надписью сидит в левом низу — при узком
     контейнере cover вытаскивает именно его. ⛔ Не возвращать 50%. */
  /* Меню приложения сворачивается в полосу иконок: подписи разделов на 390px
     съедают половину экрана, а сама навигация — тот признак, по которому кадр
     читается продуктом. ⛔ Не прятать `.win__nav` целиком. */
  .win__app { grid-template-columns: 2.375rem minmax(0, 1fr); }
  .win__nav { padding-inline: .25rem; }
  .win__navi { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
  .win__navi b, .win__brand span { display: none; }
  .win__brand { justify-content: center; padding-inline: 0; }
  .win__head { padding-inline: .75rem; }
  .win__head span { font-size: .6875rem; }

  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__c:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi__v { font-size: 1.6rem; }

  .rowlist { overflow-x: auto; }
  /* 20rem перестали влезать, когда мокап получил полосу иконок слева: строка
     вылезала за вьюпорт (оракул `tools/vn-mobile-check.js`). Содержимое строки
     переносится само, поэтому лечим шириной, а не скроллом. */
  .row { min-width: 17rem; }
  .phone { max-width: 15rem; margin-inline: auto; }
  .vn-price { grid-template-columns: 1fr; }
  .vn-price__p b { font-size: 1.75rem; }
  .vn-stat b { font-size: 2.6rem; }
}

/* ============================================================
   ЦЕНА — открытый прайс на главной. Пять ступеней в одну полосу на десктопе,
   в колонку на телефоне. ⛔ Не задавать фиксированную ширину карточке:
   вьетнамские названия тарифов длиннее русских и рвут строку иначе.
   ============================================================ */
.vn-price { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); align-items: stretch; }
.vn-price__c { position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: var(--keyline); border-radius: var(--r-md); padding: 1.5rem 1.25rem; }
.vn-price__c.is-hot { border: 2px solid var(--primary); }
.vn-price__c.is-free { background: transparent; }
.vn-price__flag { position: absolute; top: -.6875rem; left: 1.25rem; background: var(--primary); color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: .1875rem .625rem; border-radius: 999px; }
.vn-price__n { font-size: 1.0625rem; font-weight: 800; color: var(--deep); margin: 0 0 .125rem; }
.vn-price__lim { font-size: .875rem; color: var(--muted); margin: 0 0 .875rem; }
.vn-price__p { margin: 0 0 1rem; line-height: 1.2; }
.vn-price__p b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.vn-price__p small { font-size: .8125rem; color: var(--muted); font-weight: 600; }
.vn-price__f { list-style: none; margin: auto 0 0; padding: .875rem 0 0; border-top: var(--keyline); display: grid; gap: .5rem; font-size: .875rem; }
.vn-price__f li { display: grid; grid-template-columns: 1rem 1fr; gap: .5rem; }
.vn-price__f li::before { content: '+'; color: var(--primary); font-weight: 800; }
.vn-price__f li.no { color: var(--muted); }
.vn-price__f li.no::before { content: '—'; color: var(--line); }
.vn-price__notes { margin-top: 1.75rem; }

/* ============================================================
   БЛОК ПОТОКА — цепочка `tuyển sinh → lớp học → học phí → lương → ứng dụng`.
   Пять шагов в линию на десктопе, в колонку на планшете и телефоне: шеврон
   между карточками разворачивается вниз, потому что поток обязан читаться
   как поток в любом кадре. ⛔ Не делать горизонтальный скролл ленты — на
   мобиле пятый шаг тогда не увидят вовсе, а он закрывает вопрос носителя.
   ============================================================ */
.vn-flow { list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vn-flow__n { position: relative; min-width: 0; display: flex; flex-direction: column;
  background: var(--paper); border: var(--keyline); border-radius: var(--r-md); padding: 1.25rem 1.125rem; }
/* Шеврон живёт в зазоре сетки: right = -(половина зазора + половина шеврона) */
.vn-flow__n::after { content: ''; position: absolute; top: 2.5rem; right: -.75rem;
  width: .5rem; height: .5rem; border-top: 2px solid var(--primary); border-right: 2px solid var(--primary);
  transform: rotate(45deg); }
.vn-flow__n:last-child::after { content: none; }
.vn-flow__i { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--deep); font-size: .8125rem; font-weight: 800; margin-bottom: .75rem; }
.vn-flow__t { font-size: 1rem; font-weight: 800; margin: 0 0 .375rem; }
.vn-flow__d { font-size: .875rem; color: var(--muted); margin: 0 0 1rem; }
.vn-flow__h { margin: auto 0 0; padding-top: .75rem; border-top: var(--keyline);
  display: grid; grid-template-columns: .875rem 1fr; gap: .375rem;
  font-size: .8125rem; font-weight: 700; color: var(--primary); }
.vn-flow__h::before { content: '\2192'; }

.vn-flow__note { display: grid; gap: 1.25rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--paper); border: var(--keyline); border-radius: var(--r-md); padding: 1.5rem; }
.vn-flow__note b { display: block; font-size: 1rem; font-weight: 800; color: var(--deep); margin-bottom: .25rem; }
.vn-flow__note span { font-size: .875rem; color: var(--muted); }

@media (max-width: 64rem) {
  .vn-flow { grid-template-columns: 1fr; }
  .vn-flow__n { padding-block: 1.125rem; }
  .vn-flow__n::after { top: auto; right: auto; left: 1.5rem; bottom: -.75rem; transform: rotate(135deg); }
  .vn-flow__h { padding-top: .625rem; }
}

/* Ни один элемент не имеет права расширять страницу: последняя линия обороны
   на уровне контейнеров, без глушения скролла у body. */
.vn-wrap, .vn-sec, .win, .kpi, .vn-split, .vn-price, .vn-flow { max-width: 100%; min-width: 0; }

/* ============================================================
   ЦЕЛЕВОЕ ДЕЙСТВИЕ, ДОВЕРИЕ, FAQ, ПОДВАЛ, ДИНАМИКА
   Прецедент 2026-08-03: страница читалась листовкой — на ней не было
   ни одной кнопки (CTA стояли под `if (zalo_link)`, номер пуст), ни полосы
   доверия, ни промежуточной точки съезда, ни акцентного фона (класс V1
   регламента _REGISTRY/docs/LANDING_VISUAL_DESIGN.md).
   ============================================================ */

.vn-btn { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.vn-btn:hover { transform: translateY(-1px); }
.vn-btn--zalo:hover { box-shadow: 0 .5rem 1.25rem rgba(255, 183, 3, .38); }
.vn-btn--deep { background: var(--deep); color: #fff; }
.vn-btn--deep:hover { box-shadow: 0 .5rem 1.25rem rgba(46, 16, 101, .32); }
.vn-btn--line { border-color: var(--primary); color: var(--primary); background: transparent; }
.vn-btn--line:hover { background: var(--primary-soft); }
.vn-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.vn-acts { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.75rem; }
.vn-acts--end { margin-top: 2.25rem; }

.vn-nav { display: flex; gap: 1.75rem; margin-inline: auto 1rem; }
.vn-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.vn-nav a:hover { color: var(--primary); }

/* Полоса доверия — продуктовый proof под первым экраном (§8 #2 канона). */
.vn-sec--tight { padding: 2.25rem 0; }
/* Полоса направлений — обоснование в шапке `sections/vi/fields.php`.
   Знаком работает собственная письменность предмета: латиница, 汉字, 한글, かな.
   ⛔ Не заменять пиктограммой из спрайта — глобус и книга опознают «обучение
   вообще», ради чего полоса и не заводилась. */
.vn-fields { display: grid; gap: 1.75rem; }
.vn-fields__lead { max-width: 46rem; }
.vn-fields__lead .vn-eyebrow { margin-bottom: .5rem; }
.vn-fields__t { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.vn-fields__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem; margin: 0; padding: 0; list-style: none; }
.vn-fields__l li { display: grid; gap: .25rem; align-content: start; }
/* Начертания CJK выше латиницы по кеглю при одном font-size — ряд из четырёх
   знаков иначе встаёт лесенкой. Фиксированная строка выравнивает базовые линии. */
.vn-fields__s { font-size: 1.375rem; line-height: 1.9rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--primary); }
.vn-fields__l b { font-size: 1.0625rem; letter-spacing: -.01em; }
.vn-fields__n { color: var(--muted); font-size: .875rem; line-height: 1.5; }
@media (max-width: 56rem) { .vn-fields__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vn-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 2rem;
  margin: 0; padding: 0; list-style: none; }
.vn-trust li { display: grid; gap: .3125rem; align-content: start; padding-left: 1rem;
  border-left: .1875rem solid var(--accent); }
.vn-trust b { font-size: 1.0625rem; letter-spacing: -.01em; }
.vn-trust span { color: var(--muted); font-size: .9375rem; line-height: 1.5; }

/* Единственная акцентная полоса страницы. ⛔ Вторую не заводить. */
.vn-sec--accent { background: var(--accent); color: var(--accent-ink); }
.vn-sec--accent .vn-h2 { color: var(--accent-ink); }
.vn-sec--accent .vn-lead { color: rgba(107, 68, 0, .82); }
.vn-cta { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2rem 3rem; align-items: center; }
.vn-cta__act { display: grid; gap: .75rem; justify-items: start; }
.vn-cta__act span { font-size: .9375rem; color: rgba(107, 68, 0, .82); }

/* Тарифы: кнопка на каждой карточке, карточки одной высоты. */
.vn-price__c { display: flex; flex-direction: column; }
.vn-price__c .vn-btn { margin-top: auto; justify-content: center; font-size: .9375rem;
  padding: .75rem 1rem; }
.vn-price__f { margin-bottom: 1.25rem; }

.vn-faq { display: grid; gap: .625rem; margin-top: 2rem; }
.vn-faq__i { border: var(--keyline); border-radius: var(--r-md); background: var(--paper);
  transition: border-color .16s ease; }
.vn-faq__i[open], .vn-faq__i:hover { border-color: var(--primary); }
.vn-faq__i summary { cursor: pointer; list-style: none; padding: 1.125rem 3rem 1.125rem 1.25rem;
  font-weight: 700; font-size: 1.0625rem; position: relative; }
.vn-faq__i summary::-webkit-details-marker { display: none; }
.vn-faq__i summary::after { content: ''; position: absolute; right: 1.375rem; top: 1.5rem;
  width: .5rem; height: .5rem; border-right: .125rem solid var(--primary);
  border-bottom: .125rem solid var(--primary); transform: rotate(45deg);
  transition: transform .18s ease; }
.vn-faq__i[open] summary::after { transform: rotate(-135deg); }
.vn-faq__i p { margin: 0; padding: 0 3rem 1.25rem 1.25rem; color: var(--muted); line-height: 1.6; }

.vn-foot { border-top: var(--keyline); padding: 3rem 0 0; color: var(--muted); font-size: .9375rem; }
.vn-foot__g { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 2rem; padding-bottom: 2.5rem; }
.vn-foot__d { margin: .75rem 0 0; max-width: 26rem; line-height: 1.55; }
.vn-foot__n { display: grid; gap: .5rem; align-content: start; }
.vn-foot__n b { color: var(--ink); }
.vn-foot__n a { color: var(--muted); text-decoration: none; }
.vn-foot__n a:hover { color: var(--primary); }
.vn-foot__c { border-top: var(--keyline); padding: 1.25rem 0 1.75rem; }

/* Липкая полоса действия — только узкий экран: там шапка уезжает вверх. */
.vn-bar { display: none; }

/* Проявление секций при скролле. Раскладка готова без JS — класс вешает скрипт. */
.is-rv { opacity: 0; transform: translateY(.875rem); }
.is-rv.is-in { opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) { .is-rv { opacity: 1; transform: none; } }

@media (max-width: 64rem) {
  .vn-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-cta { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .vn-nav { display: none; }
  .vn-trust { grid-template-columns: 1fr; }
  .vn-foot__g { grid-template-columns: 1fr; gap: 1.75rem; }
  .vn-acts .vn-btn { flex: 1 1 100%; justify-content: center; }
  body { padding-bottom: 4.5rem; }
  .vn-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    align-items: center; justify-content: space-between; gap: .75rem;
    padding: .625rem .875rem calc(.625rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(.5rem);
    border-top: var(--keyline); box-shadow: 0 -.25rem 1.5rem rgba(20, 7, 48, .1); }
  .vn-bar span { font-size: .8125rem; color: var(--muted); line-height: 1.3; }
  .vn-bar b { display: block; color: var(--ink); font-size: .9375rem; }
  .vn-bar .vn-btn { padding: .6875rem 1.125rem; font-size: .9375rem; white-space: nowrap; }
}

/* Подпись к мокапу — что именно надо увидеть на кадре. Без неё четыре мокапа
   читаются одинаковыми картинками и не работают как доказательство (2026-08-03).
   ⛔ Не выносить в абсолютный оверлей поверх окна: на 390px он ложится на данные. */
.vn-shot { display: grid; gap: 1.125rem; align-content: start; }
.vn-shot__n { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--muted);
  padding-left: .875rem; border-left: .1875rem solid var(--accent); }
.vn-sec--deep .vn-shot__n { color: rgba(255, 255, 255, .78); }
.win { transition: transform .2s ease, box-shadow .2s ease; }
.win:hover { transform: translateY(-.25rem); box-shadow: 0 1.75rem 3.5rem rgba(20, 7, 48, .2); }

/* Финальный блок: шаги слева, действие справа. */
.vn-split--end { margin-top: 2rem; align-items: start; }
.vn-final { background: var(--paper); border: var(--keyline); border-radius: var(--r-md);
  padding: 1.75rem; display: grid; gap: .875rem; align-content: start; }
.vn-final b { font-size: 1.125rem; letter-spacing: -.01em; }
.vn-final p { margin: 0; color: var(--muted); line-height: 1.55; }
.vn-final .vn-acts { margin-top: .25rem; }
.vn-final .vn-chips li { font-size: .8125rem; font-weight: 500; color: var(--muted); }

@media (max-width: 64rem) {
  .win:hover { transform: none; }
}

@media (max-width: 40rem) {
  /* Кнопка в шапке дублируется липкой полосой — на узком экране она вспомогательная. */
  .vn-topbar .vn-btn { padding: .625rem 1rem; font-size: .9375rem; }
}

/* ============================================================
   ФАЗА ВИДЕОРАЗБОРА 2026-08-03 — визуальный слой
   Страница читалась вёрсткой без картинки: карточки без пиктограмм, поток
   стеной текста, мокапы прижаты к краям, единственная анимация — общее
   проявление секции. Ниже — тот слой, которого не хватало. Класс V2
   регламента _REGISTRY/docs/LANDING_VISUAL_DESIGN.md.
   ⛔ Ничего из этого не должно двигаться при `prefers-reduced-motion`.
   ============================================================ */

/* Первый экран — кнопки обязаны попадать в первый кадр 1280×800.
   ⛔ Не возвращать список из четырёх пунктов с полным описанием связки:
   именно он уводил `.vn-acts` под фолд (видеоразбор, 00:00). */
.vn-list--tight { gap: .625rem; margin-bottom: 1.125rem; }
.vn-stat--slim { padding: .875rem 0; margin: 0 0 .25rem; }
.vn-stat--slim b { font-size: 2.25rem; }
.vn-stat--slim span { font-size: .875rem; line-height: 1.45; }
.vn-hero .vn-acts { margin-top: 1.25rem; }
.vn-hero .vn-lead { margin-bottom: 1.25rem; }
.vn-hero .vn-h1 { margin-bottom: .875rem; }
.vn-hero.vn-sec { padding-block: 3.25rem 3.75rem; }


/* Парящий слой: мокап отделён от подложки собственной тенью и лёгким движением. */
.vn-float { box-shadow: 0 1.75rem 3.5rem rgba(9, 3, 26, .42); animation: vn-float 7s ease-in-out infinite; }
@keyframes vn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.5rem); } }
@media (prefers-reduced-motion: reduce) { .vn-float { animation: none; } }

/* Пиктограммы: полоса доверия и карточки болей. */
.vn-trust__i, .vn-card__i, .vn-tools__i {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vn-trust li { padding-left: 0; border-left: 0; }
.vn-trust__i { width: 1.5rem; height: 1.5rem; color: var(--primary); margin-bottom: .125rem; }
.vn-card--ic .vn-card__i { width: 1.75rem; height: 1.75rem; color: var(--primary); margin-bottom: .875rem; }
.vn-card__h { margin: 1rem 0 0; padding-top: .75rem; border-top: var(--keyline);
  font-size: .8125rem; font-weight: 700; color: var(--primary); }
.vn-card--ic { display: flex; flex-direction: column; }
.vn-card--ic .vn-card__h { margin-top: auto; }

/* Поток: номер-шеврон заменён иконкой шага, между карточками — рельс. */
.vn-flow--rail { position: relative; }
.vn-flow--rail::before { content: ''; position: absolute; left: 1.125rem; right: 1.125rem; top: 2.5rem;
  border-top: .125rem dashed var(--line); }
.vn-flow--rail .vn-flow__n { position: relative; background: var(--paper); }
.vn-flow__i { position: relative; width: 2.75rem; height: 2.75rem; background: var(--primary-soft);
  color: var(--primary); }
.vn-flow__i svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vn-flow__i em { position: absolute; right: -.3125rem; top: -.3125rem; width: 1.125rem; height: 1.125rem;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: .6875rem; font-weight: 800;
  font-style: normal; display: grid; place-items: center; }
.vn-flow--rail .vn-flow__n::after { top: 2.125rem; background: var(--paper-warm); }
.vn-flow__n { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vn-flow__n:hover { transform: translateY(-.25rem); border-color: var(--primary);
  box-shadow: 0 .875rem 2rem rgba(20, 7, 48, .12); }

/* Приложение: мокап приподнят над фотографией, а не прижат к её углу — тень и
   парение даёт `.vn-float` в разметке. Геометрия композиции (размер корпуса,
   пропорции, ширина кадра) собрана в одном месте — блок `.vn-appshot` выше;
   ⛔ не переопределять её здесь повторно, прошлый заход так и разъехался. */

/* Инструменты вовлечения и Jobs to be done (секция `learn.php`). */
.vn-tools { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.vn-tools__c { background: var(--paper); border: var(--keyline); border-radius: var(--r-md);
  padding: 1.375rem 1.25rem; display: grid; gap: .375rem; align-content: start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vn-tools__c:hover { transform: translateY(-.25rem); border-color: var(--primary);
  box-shadow: 0 .875rem 2rem rgba(20, 7, 48, .12); }
.vn-tools__i { width: 1.75rem; height: 1.75rem; color: var(--primary); margin-bottom: .375rem; }
.vn-tools__c b { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.vn-tools__c span { color: var(--muted); font-size: .9375rem; line-height: 1.55; }

.vn-acts--tight { margin-top: 1.5rem; }
.vn-acts--mid { margin-bottom: 2rem; }

/* Второе действие — текстовой ссылкой, а не второй кнопкой: шесть секций подряд
   заканчивались одинаковой парой «жёлтая + контурная», и полоса действия
   переставала читаться (разбор ритма 2026-08-03, §12.11 канона). */
.vn-tolink { display: inline-flex; align-items: center; gap: .375rem; font-weight: 700;
  font-size: 1rem; color: var(--primary); padding-bottom: .125rem;
  border-bottom: 1px solid rgba(109, 40, 217, .3);
  transition: color .16s ease, border-color .16s ease; }
.vn-tolink::after { content: '→'; font-weight: 800; }
.vn-tolink:hover { color: var(--deep); border-bottom-color: var(--deep); }

/* Мостик между двумя частями главы о приложении: родительской (app) и ученической (learn). */
.vn-bridge { margin: 1.5rem 0 0; font-weight: 700; color: var(--muted); }
.vn-bridge::after { content: ' ↓'; color: var(--primary); font-weight: 800; }

@media (max-width: 64rem) {
  .vn-flow--rail::before { content: none; }
  .vn-tools__c:hover, .vn-flow__n:hover { transform: none; box-shadow: none; }
}

@media (max-width: 40rem) {
}

/* ─────────────────────────────────────────────────────────────────────────────
   СЕКЦИЯ ПРИЛОЖЕНИЯ — механика кадром (разбор скриншота 2026-08-03)
   Экраны, сценарий дня и маскот. ⛔ Маскот живёт только здесь и в `app.php`:
   в интерфейсе Nenta персонажа нет (vietnam-design-brief §2). Позы — из листа
   docs/vietnam-brand/mascot-c-poses/, наложение всегда `pointer-events:none`,
   чтобы фигура не перехватывала клики по экрану под ней.
   ───────────────────────────────────────────────────────────────────────── */
.vn-learn .vn-lead { max-width: 46rem; }

.vn-screens { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem; align-items: start; }
.vn-screens__c { position: relative; display: grid; justify-items: center; gap: .875rem; }
.vn-screens__c .phone { width: 100%; max-width: 16rem; }
.vn-screens__n { font-size: .9375rem; line-height: 1.55; color: var(--muted); max-width: 20rem; }
.vn-screens__n b { color: var(--ink); font-weight: 800; }
/* Средний экран приподнят: ряд из трёх одинаковых карточек читался таблицей. */
.vn-screens__c--mid { padding-top: 1.75rem; }
.vn-screens__c--mid .phone { box-shadow: 0 1.5rem 3rem rgba(46, 16, 101, .16); }

.vn-mascot { display: block; height: auto; pointer-events: none; }
.vn-mascot--peek { position: absolute; top: -3.25rem; right: -1.5rem; width: 8.5rem; z-index: 2;
  filter: drop-shadow(0 .75rem 1.25rem rgba(46, 16, 101, .18)); }
.vn-mascot--star { position: absolute; right: -1rem; bottom: 2.5rem; width: 9.5rem; z-index: 2;
  filter: drop-shadow(0 .75rem 1.25rem rgba(46, 16, 101, .22)); }

/* Экран 1 — тренажёр слов */
.phone__flash { background: #fff; border: var(--keyline); border-radius: .75rem;
  padding: 1.25rem .75rem; display: grid; gap: .375rem; justify-items: center; text-align: center; }
.phone__flash span { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }
.phone__flash em { font-style: normal; font-size: .875rem; font-weight: 700; color: var(--app-primary); }
.phone__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  font-size: .75rem; font-weight: 800; text-align: center; }
.phone__btns span { padding: .5rem; border-radius: .5rem; border: var(--keyline); color: var(--muted); }
.phone__btns b { padding: .5rem; border-radius: .5rem; background: var(--app-mint); color: #fff; }

/* Экран 2 — звёзды */
.phone__bal { display: flex; align-items: center; gap: .375rem; background: var(--primary-soft);
  border-radius: .625rem; padding: .625rem .75rem; color: var(--app-primary); }
.phone__bal .win__i { width: 1.125rem; height: 1.125rem; }
.phone__bal b { font-size: 1.375rem; font-weight: 800; line-height: 1; }
.phone__bal span { font-size: .75rem; font-weight: 700; }
.phone__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: #fff; border: var(--keyline); border-radius: .5rem; padding: .5rem .625rem;
  font-size: .75rem; font-weight: 600; color: var(--muted); }
.phone__row b { color: var(--app-mint); font-size: .8125rem; font-weight: 800; }
.phone__streak { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 700;
  color: var(--accent-ink); background: #FFF8E7; border-radius: .5rem; padding: .5rem .625rem; }
.phone__streak .win__i { width: .9375rem; height: .9375rem; }

/* Экран 3 — магазин наград */
.phone__shop { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: #fff; border: var(--keyline); border-radius: .5rem; padding: .5rem .625rem;
  font-size: .75rem; font-weight: 700; }
.phone__shop b { color: var(--app-primary); font-weight: 800; white-space: nowrap; }
.phone__shop.is-on { border-color: var(--app-primary); background: var(--primary-soft); }

/* Сценарий одного дня */
.vn-story { margin-top: 2.5rem; display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
.vn-story__hd { grid-column: 1 / -1; }
.vn-story__hd p { color: var(--muted); margin-top: .375rem; }
.vn-story__l { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.vn-story__s { position: relative; display: grid; gap: .1875rem .75rem;
  grid-template-columns: 2.5rem auto 1fr; align-items: center;
  background: var(--paper); border: var(--keyline); border-radius: var(--r-md); padding: .875rem 1rem; }
.vn-story__i { grid-row: 1 / 3; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.vn-story__i svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vn-story__t { font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; }
.vn-story__w { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--accent-ink);
  background: #FFF8E7; border-radius: 999px; padding: .0625rem .5rem; justify-self: start; }
.vn-story__d { grid-column: 2 / -1; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.vn-story__ph { position: relative; margin: 0; }
.vn-story__ph > img:first-child { display: block; width: 100%; height: auto;
  border-radius: var(--r-md); }
.vn-story__ph figcaption { margin-top: .75rem; font-size: .875rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 64rem) {
  /* ⛔ Не две колонки: три экрана давали ряд 2+1 с сиротой у левого края
     (LANDING_VISUAL_DESIGN §V3). Держим тройку до 52rem, дальше — одна колонка. */
  .vn-screens { gap: 1.5rem 1.125rem; }
  .vn-screens__c--mid { padding-top: 0; }
  .vn-story { grid-template-columns: 1fr; }
}

@media (max-width: 52rem) {
  .vn-screens { grid-template-columns: minmax(0, 17.5rem); justify-content: center; gap: 2.25rem; }
}

@media (max-width: 40rem) {
  .vn-screens__c .phone { max-width: 15rem; }
  .vn-mascot--peek { width: 6.5rem; top: -2.5rem; right: 0; }
  .vn-mascot--star { width: 7rem; right: -.5rem; bottom: 3rem; }
  .vn-story__s { grid-template-columns: 2.25rem 1fr; }
  .vn-story__d { grid-column: 1 / -1; }
}

/* Доводка секции приложения по первому снимку прода (2026-08-03):
   — экраны выровнены по высоте, иначе три подписи стояли лесенкой;
   — маскот `peek` лежит лапами на кромке телефона, а не парит над ней;
   — тёмная панель ролей получила `position: relative`: без него абсолютный
     маскот уезжал из панели к ближайшему позиционированному предку. */
.vn-screens .phone__scr { min-height: 15.25rem; align-content: start; }
.vn-screens__c--mid { padding-top: 0; }
.vn-mascot--peek { top: -2.35rem; right: -.75rem; }

/* Маскот у фото сдвинут за кромку кадра — на предыдущей посадке он закрывал
   фигуру ученицы справа; выход за рамку читается как «шагнул из кадра». */
.vn-mascot--star { right: -2.5rem; bottom: 3rem; }
@media (max-width: 40rem) { .vn-mascot--star { right: -1.25rem; bottom: 3.5rem; } }

/* Посадка маскота — обрезанная фигура читается ампутацией, а не кадрированием
   (замечание оператора 2026-08-03 по кадру секции). Правило простое: либо низ
   персонажа уходит ЗА элемент (тогда обрез объясняется кромкой), либо фигура
   полноростовая и стоит на кромке плашки. ⛔ Поза по пояс на весу — нельзя. */
.vn-screens__c .phone { position: relative; z-index: 1; }
/* «Выглядывает из-за экрана»: низ фигуры прячется за корпусом телефона. */
.vn-mascot--peek { z-index: 0; top: -4.75rem; right: -.5rem; width: 9rem; }
/* У фотографии — полноростовая поза, лапы на нижней кромке кадра. */
.vn-mascot--star { right: -1.75rem; bottom: 3.25rem; width: 8.5rem; }
@media (max-width: 40rem) {
  .vn-mascot--peek { width: 7rem; top: -3.75rem; right: 0; }
  .vn-mascot--star { width: 6.5rem; right: -.75rem; bottom: 3.75rem; }
}

/* Ноги на нижнюю кромку кадра: фигура над кромкой читалась парящей. */
.vn-mascot--star { bottom: -.25rem; }
@media (max-width: 40rem) { .vn-mascot--star { bottom: -.25rem; } }

/* Колонки расписания обязаны сжиматься: `1fr` не опускается ниже min-content
   («IELTS 6.5»), и на узком окне пятый день уезжал за правую кромку мокапа. */
.sched { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ─────────────────────────────────────────────────────────────────────────────
   ВИДЕОРАЗБОР 2026-08-03 (второй заход) — доводка визуального слоя
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Корпус мокапа читается окном рабочей системы, а не схемой из презентации
   (00:26 «имитируем окошко браузера, но выглядит неубедительно, не как облачный
   сервис»). Добавлены полоса вкладок, панель навигации и тулбар раздела —
   признаки, по которым глаз опознаёт продукт: вкладка с фавиконом, стрелки,
   адрес с замком, аватар профиля, поиск по базе и фильтры периода. */
.win { border: 1px solid rgba(20, 7, 48, .1); box-shadow: 0 1.5rem 3.5rem rgba(9, 3, 26, .28); }
.win__tabs { display: flex; align-items: flex-end; gap: .5rem; padding: .4375rem .75rem 0;
  background: #E7E3EF; }
.win__tabs .win__dots { padding-bottom: .4375rem; }
.win__tab { display: flex; align-items: center; gap: .375rem; min-width: 0; max-width: 13rem;
  background: #fff; border-radius: .5rem .5rem 0 0; padding: .375rem .5rem; }
.win__tab b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .6875rem; font-weight: 700; color: var(--ink); }
.win__tab em { font-style: normal; font-size: .75rem; line-height: 1; color: var(--muted); }
.win__fav { width: .875rem; height: .875rem; flex: none; border-radius: .25rem; display: grid;
  place-items: center; background: var(--primary); color: #fff; font-size: .5625rem; font-weight: 800;
  font-style: normal; }
.win__plus { font-size: .875rem; line-height: 1; color: var(--muted); padding-bottom: .5rem; }
.win__chrome { background: #fff; border-bottom: 1px solid rgba(20, 7, 48, .08); }
.win__navs { display: flex; align-items: center; gap: .5rem; flex: none; color: var(--muted); }
.win__back, .win__fwd { width: .5rem; height: .5rem; border-left: .1rem solid currentColor;
  border-bottom: .1rem solid currentColor; transform: rotate(45deg); }
.win__fwd { transform: rotate(-135deg); opacity: .4; }
.win__rel { width: .8125rem; height: .8125rem; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.win__url { background: var(--paper-warm); border: 1px solid rgba(20, 7, 48, .08); border-radius: 999px;
  padding: .1875rem .625rem; }
.win__me { width: 1.125rem; height: 1.125rem; flex: none; border-radius: 50%; display: grid;
  place-items: center; background: var(--primary); color: #fff; font-size: .625rem; font-weight: 800; }
.win__bar { display: flex; align-items: center; gap: .375rem; padding: .25rem 1rem .625rem;
  background: var(--paper-warm); }
.win__find { display: flex; align-items: center; gap: .375rem; flex: 1; min-width: 0;
  background: #fff; border: var(--keyline); border-radius: 999px; padding: .25rem .625rem;
  font-size: .6875rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; }
.win__find .win__i { width: .75rem; height: .75rem; flex: none; }
.win__chip { flex: none; background: #fff; border: var(--keyline); border-radius: 999px;
  padding: .25rem .5625rem; font-size: .6875rem; font-weight: 700; color: var(--ink); }
.win__add { flex: none; background: var(--primary); color: #fff; border-radius: 999px;
  padding: .25rem .625rem; font-size: .6875rem; font-weight: 800; }
@media (max-width: 40rem) {
  .win__bar .win__chip:nth-of-type(2) { display: none; }
}

/* 2. Карточки болей получили фрагмент интерфейса: секция шла без единой
   иллюстрации (00:47). Язык фрагментов — тот же, что у мокапов страницы. */
.vn-vis { margin: 1rem 0 0; display: grid; gap: .3125rem; background: var(--paper-warm);
  border: var(--keyline); border-radius: var(--r-sm); padding: .625rem; }
.vn-vis__r { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: #fff; border: var(--keyline); border-radius: .4375rem; padding: .375rem .5rem;
  font-size: .75rem; font-weight: 600; color: var(--muted); }
.vn-vis__r b { font-weight: 800; color: var(--ink); white-space: nowrap; }
.vn-vis__r .is-due { color: #C2410C; }
.vn-vis__r .is-ok { color: #12A150; }
.vn-vis__d { display: flex; align-items: center; gap: .3125rem; }
.vn-vis__d i { width: 1.5rem; flex: none; font-style: normal; font-size: .6875rem; font-weight: 800;
  color: var(--muted); }
.vn-vis__d span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #fff; border: var(--keyline); border-radius: .375rem; padding: .25rem .4375rem;
  font-size: .6875rem; font-weight: 700; }
.vn-vis__d .is-on { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.vn-vis__d .is-gap { color: rgba(27, 16, 51, .35); border-style: dashed; }
.vn-vis__m { background: #fff; border: var(--keyline); border-radius: .625rem .625rem .625rem .1875rem;
  padding: .375rem .5rem; font-size: .75rem; line-height: 1.4; color: var(--muted); }
.vn-vis__m--me { background: var(--primary-soft); border-color: transparent; color: var(--primary);
  border-radius: .625rem .625rem .1875rem .625rem; margin-left: 2.5rem; font-weight: 700; }

/* 3. Состав системы — один щит с волосяными швами, девять равнозначных отсеков.
   ⛔ Не возвращать сюда ни рельс, ни чередование у кромок, ни нумерацию: разделы
   не связаны порядком, а любая из этих форм читается пошаговым сценарием (разбор
   2026-08-03, второй заход). Смысл «одна база» несёт общая рамка, а не подпись.
   Швы — фон контейнера, просвечивающий в `gap: 1px` сетки: отсеки прилегают друг
   к другу, как части одного экрана, и рваная высота описаний не даёт ступенек. */
.vn-mods { margin-top: 2.5rem; background: var(--line); border: var(--keyline);
  border-radius: var(--r-md); overflow: hidden; }
.vn-mods__hd { background: var(--paper-warm); border-bottom: var(--keyline);
  padding: .875rem 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1875rem .75rem; }
.vn-mods__hd b { font-size: .8125rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; }
.vn-mods__hd span { font-size: .875rem; font-weight: 600; color: var(--muted); }
.vn-mods__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
.vn-mods__i { background: var(--paper); padding: 1.25rem; display: grid; gap: .3125rem;
  align-content: start; transition: background .18s ease; }
.vn-mods__i:hover { background: var(--paper-warm); }
.vn-mods__ic { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid;
  place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: .375rem; }
.vn-mods__ic svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.vn-mods__i b { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.vn-mods__d { font-size: .9375rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 64rem) {
  .vn-mods__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .vn-mods__g { grid-template-columns: minmax(0, 1fr); }
  .vn-mods__i { padding: 1rem 1.125rem; }
  .vn-mods__ic { width: 2rem; height: 2rem; margin-bottom: .25rem; }
}

/* 4. Живой человек в главе про отток — слоями по принципам hero (2026-08-04):
   реплика-карточка парит ПЕРЕД ученицей (z выше) и перекрывает её руку — слои
   связаны, как hs-zalo с владелицей. Низ фигуры растворяется маской, не режется
   кромкой потока. Кадр по-прежнему в потоке flex — на узком экране ничего не
   абсолютится, слои просто складываются. */
.vn-face { display: flex; align-items: flex-end; margin-top: 1.5rem; }
/* ⛔ Вырезной фигуре drop-shadow не возвращать — ни здесь, ни у `.vn-boss`,
   ни у `.hs-person`. Порядок отрисовки: фильтр → маска, поэтому маска срезает
   ровно ту часть тени, ради которой её ставили (опора под ногами), и оставляет
   верхний ореол: серое пятно вокруг головы и плеч с прямой кромкой по боксу
   картинки. Разбор 2026-08-04: оператор прочитал это как «грязный фон» и пошёл
   проверять альфу webp — она чистая (`-alpha extract`, углы = 0), рисовал CSS.
   Опору даёт сама маска: низ растворяется в фоне, фигура не висит. Нужен объём —
   работать фоном сцены (свечение секции), не тенью поверх фигуры. */
.vn-face img { width: 8.5rem; height: auto; flex: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 8%);
  mask-image: linear-gradient(to top, transparent 0, #000 8%); }
.vn-face p { position: relative; z-index: 1; margin: 0 0 1.5rem -2.5rem;
  background: var(--paper); border: var(--keyline);
  border-radius: .875rem .875rem .875rem .25rem; padding: .875rem 1rem;
  font-size: .9375rem; line-height: 1.5; color: var(--muted);
  animation: hs-float 8s ease-in-out infinite; }
.vn-face p b { color: var(--ink); font-weight: 800; }
@media (max-width: 40rem) { .vn-face img { width: 6.5rem; } .vn-face p { margin-left: -1.75rem; } }

/* 5. Экраны приложения — витрина для детей, а не третий мокап админки: в общем
   строгом наборе они сливались с интерфейсом giáo vụ (02:14 «сделать поярче,
   чтобы было видно, что детям понравятся»). Ярче только здесь: в самой Nenta
   палитра остаётся деловой. */
.vn-learn { --app-ink: #17103A; --app-dim: #7C7596; --app-line: rgba(23, 16, 58, .08);
  --app-violet: #7C3AED; --app-magenta: #C026D3; --app-green: #12A150; --app-amber: #F59E0B; }

/* Сцена: три корпуса на плоской кремовой заливке висели без опоры. Мягкое
   фиолетовое свечение под ними даёт глубину, контактная тень — вес. */
.vn-screens { position: relative; align-items: stretch; }
/* Корпуса тянутся до общей высоты, подписи встают в один ряд: при контенте разной
   длины экраны стояли лесенкой и три подписи начинались на трёх уровнях. */
.vn-screens__c { grid-template-rows: 1fr auto; }
.vn-screens__c .phone { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto auto; }
.vn-screens .phone__scr { display: flex; flex-direction: column; gap: .5rem; }
/* Главное действие экрана прижато к низу — как в живом приложении. */
.vn-screens .phone__foot, .vn-screens .phone__mini, .vn-screens .phone__streak { margin-top: auto; }
.vn-screens .phone__foot { display: grid; gap: .4375rem; }
.vn-screens .phone__note { font-size: .625rem; font-weight: 700; color: var(--app-dim); text-align: center; }
.vn-screens::before { content: ''; position: absolute; inset: 3rem 0 -1.5rem; z-index: 0;
  border-radius: 2.5rem; pointer-events: none;
  background:
    radial-gradient(56% 66% at 50% 38%, rgba(124, 58, 237, .2), rgba(124, 58, 237, 0) 70%),
    radial-gradient(42% 54% at 10% 58%, rgba(192, 38, 211, .15), rgba(192, 38, 211, 0) 68%),
    radial-gradient(42% 54% at 90% 58%, rgba(245, 158, 11, .16), rgba(245, 158, 11, 0) 68%); }
/* ⛔ Свечение не вылетает за контейнер по горизонтали ни на одной ширине: `-2rem`
   в базовом правиле давал горизонтальную прокрутку всей страницы там, где поле
   меньше вылета — 402px при вьюпорте 390 и 912 при 900 (проверено scrollTo(500,0):
   scrollX = 12). Объём даёт мягкость градиента, не вынос за кромку. Вертикальный
   вылет безопасен — страница и так прокручивается вниз. */
.vn-screens__c { z-index: 1; }

/* Корпус: тонкая рамка + блик по кромке вместо толстой заливки. */
.vn-screens .phone { border-color: #150B2E;
  box-shadow: 0 .0625rem 0 rgba(255, 255, 255, .5) inset,
              0 1.75rem 3.25rem -.75rem rgba(35, 12, 76, .32),
              0 .375rem 1rem -.25rem rgba(35, 12, 76, .18); }
/* ⛔ Диагональный «блик стекла» поверх экрана не вводить: белая заливка поверх
   контента гасит титул шапки и левый край баланса — проверено на снимке 2026-08-03.
   Объём даёт рамка и тени корпуса, не глянец. */
/* Шапка приложения — светлая, крупный титул. Сплошная фиолетовая полоса поверх
   экрана — чрома старого гибридного приложения; современный экран держит цвет
   внутри контента, а не в панели. */
.vn-screens .phone__hd { background: #fff; color: var(--app-ink); }
.vn-screens .phone__ava { background: linear-gradient(140deg, #8B5CF6, #C026D3); color: #fff;
  box-shadow: 0 .25rem .5rem rgba(124, 58, 237, .3); }
.vn-screens .phone__hdbal { display: inline-flex; align-items: center; gap: .25rem;
  background: #FFF6E2; color: #92610A; border-radius: 999px; padding: .1875rem .5rem .1875rem .375rem;
  font-size: .75rem; font-weight: 800; }
.vn-screens .phone__hdbal .win__i { width: .8125rem; height: .8125rem; fill: #F59E0B; stroke: #F59E0B; }
.vn-screens .phone__scr { background: linear-gradient(180deg, #F7F4FF, #FBF8FF 55%, #FFF9F1); }

/* Экран 1 — колода и карточка */
.vn-screens .phone__deck { display: grid; grid-template-columns: 1fr auto; gap: .4375rem .5rem;
  background: #fff; border-radius: .875rem; padding: .625rem .75rem;
  box-shadow: 0 .125rem .5rem rgba(35, 12, 76, .06); }
.vn-screens .phone__deck-t { font-size: .75rem; font-weight: 700; color: var(--app-dim); align-self: center; }
.vn-screens .phone__deck-n { font-size: .9375rem; font-weight: 800; color: var(--app-violet); }
.vn-screens .phone__deck-n i { font-style: normal; font-size: .75rem; color: var(--app-dim); }
.vn-screens .phone__bar { grid-column: 1 / -1; height: .3125rem; border-radius: 999px;
  background: rgba(124, 58, 237, .14); overflow: hidden; }
.vn-screens .phone__bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7C3AED, #C026D3); }
.vn-screens .phone__flash { position: relative; background: #fff; border: 0; border-radius: 1.125rem;
  padding: 1.125rem .75rem .875rem; display: grid; gap: .1875rem; justify-items: center; text-align: center;
  box-shadow: 0 .75rem 1.5rem -.5rem rgba(124, 58, 237, .22), 0 .125rem .5rem rgba(35, 12, 76, .06); }
.vn-screens .phone__flash::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid rgba(124, 58, 237, .14); pointer-events: none; }
.vn-screens .phone__flash-tag { font-size: .5625rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--app-violet); background: rgba(124, 58, 237, .1);
  border-radius: 999px; padding: .125rem .4375rem; margin-bottom: .25rem; }
.vn-screens .phone__flash b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--app-ink); }
.vn-screens .phone__flash em { font-style: normal; font-size: .875rem; font-weight: 700; color: var(--app-violet); }
.vn-screens .phone__flash-h { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem;
  font-size: .625rem; font-weight: 700; color: var(--app-dim); }
.vn-screens .phone__flash-h .win__i { width: .75rem; height: .75rem; }
.vn-screens .phone__btns { grid-template-columns: 1fr 1.15fr; gap: .4375rem; }
.vn-screens .phone__btns span { border: 0; background: #fff; color: var(--app-dim); border-radius: 999px;
  padding: .5625rem .5rem; box-shadow: inset 0 0 0 1px rgba(23, 16, 58, .09); }
.vn-screens .phone__btns b { border-radius: 999px; padding: .5625rem .5rem; color: #fff;
  background: linear-gradient(100deg, #22C55E, #0E9F6E);
  box-shadow: 0 .375rem .75rem -.125rem rgba(16, 161, 80, .4); }
.vn-screens .phone__mini { display: grid; grid-template-columns: 1fr 1fr; gap: .4375rem;
  font-size: .625rem; font-weight: 700; color: var(--app-dim); }
.vn-screens .phone__mini span { display: flex; align-items: baseline; gap: .25rem;
  background: rgba(255, 255, 255, .72); border-radius: .625rem; padding: .375rem .5rem;
  box-shadow: inset 0 0 0 1px var(--app-line); }
.vn-screens .phone__mini b { font-size: .8125rem; font-weight: 800; color: var(--app-ink); }

/* Экран 2 — баланс и начисления */
.vn-screens .phone__bal { display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  gap: 0 .5rem; border-radius: 1.125rem; padding: .8125rem .875rem; color: #fff;
  background: linear-gradient(122deg, #6D28D9, #A21CAF 58%, #C026D3);
  box-shadow: 0 .75rem 1.5rem -.5rem rgba(109, 40, 217, .45); }
.vn-screens .phone__bal-i { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid;
  place-items: center; background: rgba(255, 255, 255, .18); }
.vn-screens .phone__bal-i .win__i { width: 1rem; height: 1rem; fill: #FFD24A; stroke: #FFD24A; }
.vn-screens .phone__bal b { font-size: 1.625rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.vn-screens .phone__bal span { font-size: .75rem; font-weight: 700; opacity: .8; align-self: flex-end; }
.vn-screens .phone__bal em { grid-column: 3; justify-self: end; font-style: normal; font-size: .625rem;
  font-weight: 800; background: rgba(255, 255, 255, .2); border-radius: 999px; padding: .1875rem .4375rem; }
.vn-screens .phone__row { border: 0; border-radius: .875rem; padding: .5rem .625rem; background: #fff;
  gap: .5rem; box-shadow: 0 .125rem .5rem rgba(35, 12, 76, .05); }
.vn-screens .phone__row-i { width: 1.5rem; height: 1.5rem; border-radius: .5rem; flex: none;
  display: grid; place-items: center; background: rgba(124, 58, 237, .1); color: var(--app-violet); }
.vn-screens .phone__row-i .win__i { width: .8125rem; height: .8125rem; }
.vn-screens .phone__row-t { flex: 1; font-size: .75rem; font-weight: 700; color: var(--app-ink); }
.vn-screens .phone__row b { color: #0E8A45; background: #E7F9EF; border-radius: 999px;
  padding: .1875rem .4375rem; font-size: .75rem; }
.vn-screens .phone__streak { display: grid; grid-template-columns: auto 1fr; gap: .1875rem .5rem;
  border-radius: .875rem; padding: .5625rem .625rem; color: #7A4E00;
  background: linear-gradient(120deg, #FFF3D1, #FFE7AE); }
.vn-screens .phone__streak-i { grid-row: 1 / 3; align-self: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .75);
  color: #B45309; }
.vn-screens .phone__streak-i .win__i { width: .8125rem; height: .8125rem; }
.vn-screens .phone__streak b { font-size: .75rem; font-weight: 800; }
.vn-screens .phone__dots { display: flex; gap: .1875rem; }
.vn-screens .phone__dots { gap: .25rem; }
.vn-screens .phone__dots i { width: .375rem; height: .375rem; border-radius: 50%; background: #E5941A;
  box-shadow: 0 0 0 .09375rem rgba(255, 255, 255, .6); }

/* Экран 3 — витрина наград */
.vn-screens .phone__shop { border: 0; border-radius: .875rem; padding: .4375rem .5625rem; background: #fff;
  gap: .5rem; box-shadow: 0 .125rem .5rem rgba(35, 12, 76, .05); }
.vn-screens .phone__shop-i { width: 1.75rem; height: 1.75rem; border-radius: .625rem; flex: none;
  display: grid; place-items: center; background: linear-gradient(140deg, #F3EBFF, #FFEFF8);
  color: var(--app-violet); }
.vn-screens .phone__shop-i .win__i { width: .875rem; height: .875rem; }
.vn-screens .phone__shop-t { flex: 1; display: grid; font-size: .75rem; font-weight: 700; color: var(--app-ink); }
.vn-screens .phone__shop-t em { font-style: normal; font-size: .5625rem; font-weight: 700; color: var(--app-dim); }
.vn-screens .phone__shop b { display: inline-flex; align-items: center; gap: .1875rem; color: #92610A;
  background: #FFF6E2; border-radius: 999px; padding: .1875rem .4375rem .1875rem .5rem; font-size: .75rem; }
.vn-screens .phone__shop b .win__i { width: .75rem; height: .75rem; fill: #F59E0B; stroke: #F59E0B; }
.vn-screens .phone__shop.is-on { background: linear-gradient(120deg, #F6EDFF, #FFF0FA);
  box-shadow: 0 0 0 .09375rem var(--app-violet), 0 .375rem .875rem -.25rem rgba(124, 58, 237, .28); }
.vn-screens .phone__shop.is-on .phone__shop-t em { color: var(--app-violet); }
.vn-screens .phone__shop.is-off { opacity: .55; box-shadow: inset 0 0 0 1px var(--app-line); }
.vn-screens .phone__pay { display: flex; align-items: center; justify-content: center; gap: .375rem;
  border-radius: 999px; padding: .625rem; font-size: .8125rem;
  background: linear-gradient(100deg, #7C3AED, #C026D3);
  box-shadow: 0 .625rem 1.25rem -.375rem rgba(124, 58, 237, .5); }
.vn-screens .phone__pay i { font-style: normal; font-size: .6875rem; font-weight: 800;
  background: rgba(255, 255, 255, .22); border-radius: 999px; padding: .125rem .375rem; }

.vn-screens .phone__tabs span.is-on { color: var(--app-violet); background: rgba(124, 58, 237, .09); }

/* Подписи под экранами: ширина по корпусу — иначе строки разной длины ломали ряд. */
.vn-screens__n { max-width: 17.5rem; font-size: .875rem; }

/* 6. Маскот у экрана: нижняя часть фигуры уходит ЗА корпус телефона целиком.
   Прежняя посадка держала его правее кромки, и обрез читался ампутацией (01:53).
   Привязка к центру колонки, а не к её правому краю: телефон центрирован и уже
   колонки, поэтому `right` попадал в пустоту рядом с ним. */
.vn-mascot--peek { left: 50%; right: auto; margin-left: -1rem; top: -4.25rem; width: 9rem; }

/* 7. Плашка карточек не прилипает к сценарию дня (02:35). */
.vn-tools { margin-top: 2.75rem; }

/* 8. Маскот у фотографии переехал к левой кромке кадра: справа он смотрел из
   кадра в пустоту и закрывал подпись (02:46). Слева его взгляд и поднятая лапа
   направлены на учеников, а подпись отбита отступом под фигуру. */
.vn-mascot--star { left: -1.75rem; right: auto; bottom: -.25rem; width: 8.5rem; }
.vn-story__ph figcaption { padding-left: 7.5rem; }

@media (max-width: 40rem) {
  .vn-mascot--peek { width: 7rem; margin-left: -.75rem; top: -3.25rem; }
  .vn-mascot--star { left: -1rem; right: auto; width: 6.5rem; bottom: -.25rem; }
  .vn-story__ph figcaption { padding-left: 5.75rem; }
}

/* ============================================================================
   БЛОК 6. Вид современного приложения — перенос системы экранов на всю страницу
   ----------------------------------------------------------------------------
   Экраны ученика (`.vn-screens`) после редизайна 2026-08-03 читались приложением,
   а остальная страница — набором коробок на волосяной рамке: `--keyline` без
   подъёма, голые line-иконки, макеты-прямоугольники. Здесь тот же принцип
   распространён на карточки, сетки и оконные макеты.
   ⛔ `--keyline` не удалён: он держит единство сайта и печатной листовки. Подъём
   добавлен поверх него и снят в `@media print` — листовка остаётся плоской.
   ============================================================================ */

.vn {
  /* Тень тонирована глубоким фиолетовым (не чёрным): на кремовом фоне серая
     тень читается грязью. Два яруса — контактный и рассеянный. */
  --e1: 0 .0625rem .125rem rgba(20, 7, 48, .05), 0 .5rem 1.25rem rgba(20, 7, 48, .05);
  --e2: 0 .125rem .25rem rgba(20, 7, 48, .05), 0 .875rem 2rem rgba(20, 7, 48, .08);
  --e3: 0 .25rem .5rem rgba(20, 7, 48, .06), 0 1.75rem 3.5rem rgba(20, 7, 48, .14);
  --line-soft: rgba(27, 16, 51, .07);
  --r-card: 1.25rem;
}

/* --- Карточки: подъём и радиус вместо коробки на линии ---------------------- */
.vn-card,
.vn-tools__c,
.vn-flow__n {
  border-radius: var(--r-card);
  border-color: var(--line-soft);
  box-shadow: var(--e1);
}
/* ⛔ Не `.vn-card { padding }` без исключения: у фото-карточки ролей падинг нулевой,
   снимок идёт в обрез рамки. Общее правило вдвигало его внутрь белой рамки. */
.vn-card:not(.vn-card--ph) { padding: 1.625rem 1.5rem; }
.vn-sec--deep .vn-card { box-shadow: none; }

.vn-card,
.vn-tools__c,
.vn-flow__n,
.vn-mods__i { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vn-card:hover,
.vn-tools__c:hover,
.vn-flow__n:hover { transform: translateY(-.1875rem); box-shadow: var(--e2); border-color: var(--line-soft); }
.vn-sec--deep .vn-card:hover { transform: none; box-shadow: none; }

/* --- Иконка-токен: тонированный квадрат вместо голого штриха ---------------- */
.vn-card--ic .vn-card__i,
.vn-tools__i,
.vn-trust__i {
  width: 2.5rem; height: 2.5rem; padding: .625rem;
  border-radius: .875rem;
  background: linear-gradient(150deg, #F3ECFF, #FFF0F8);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .08);
}
.vn-card--ic .vn-card__i { margin-bottom: 1rem; }
.vn-tools__i { margin-bottom: .625rem; }
.vn-sec--deep .vn-trust__i {
  background: rgba(255, 255, 255, .12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* --- Мини-макеты внутри карточек: мягкая подложка, не таблица --------------- */
.vn-vis { border-radius: .875rem; padding: .75rem; }
.vn-vis__d span,
.vn-vis__m { border-radius: .5rem; border-color: var(--line-soft); }
.vn-vis__m { box-shadow: 0 .0625rem .125rem rgba(20, 7, 48, .04); }

/* --- «Chín phần»: девять карточек, а не таблица на разделителях ------------- */
.vn-mods { background: transparent; border: 0; border-radius: 0; }
.vn-mods__hd {
  background: transparent; border: 0;
  padding: 0 .25rem 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
}
.vn-mods__g { gap: .875rem; }
.vn-mods__i {
  border: 1px solid var(--line-soft); border-radius: var(--r-card);
  box-shadow: var(--e1); padding: 1.375rem 1.25rem;
}
.vn-mods__i:hover {
  background: var(--paper); transform: translateY(-.1875rem); box-shadow: var(--e2);
}
.vn-mods__ic {
  width: 2.5rem; height: 2.5rem; border-radius: .875rem;
  background: linear-gradient(150deg, #F3ECFF, #FFF0F8);
  box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .08);
}

/* --- Оконный макет: корпус с глубиной, как у телефона ----------------------- */
.win { border-radius: 1.125rem; border-color: rgba(20, 7, 48, .1); box-shadow: var(--e3); }
.win__chrome { padding: .625rem .75rem; }
.win:hover { transform: translateY(-.25rem); box-shadow: 0 .375rem .75rem rgba(20, 7, 48, .08), 0 2.25rem 4.5rem rgba(20, 7, 48, .2); }

/* Свечение под макетом — тот же приём, что под экранами ученика: кадр перестаёт
   висеть на пустой плоскости. Только на светлых секциях: на `--deep` фиолетовое
   пятно по фиолетовому не читается. */
.vn-sec:not(.vn-sec--deep):not(.vn-sec--accent) .vn-shot { position: relative; }
.vn-sec:not(.vn-sec--deep):not(.vn-sec--accent) .vn-shot > * { position: relative; z-index: 1; }
.vn-sec:not(.vn-sec--deep):not(.vn-sec--accent) .vn-shot::before {
  content: ''; position: absolute; inset: 8% 0 -8%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% 44%, rgba(109, 40, 217, .16), rgba(109, 40, 217, 0) 70%),
    radial-gradient(40% 50% at 88% 68%, rgba(255, 183, 3, .16), rgba(255, 183, 3, 0) 68%);
}

/* --- Карточки ролей с фото: снимок и текст одним телом --------------------- */
.vn-card--ph { border-radius: var(--r-card); }
.vn-card--ph .vn-card__ph { border-radius: 0; }

@media print {
  .vn-card, .vn-tools__c, .vn-flow__n, .vn-mods__i, .win { box-shadow: none; }
  .vn-shot::before { display: none; }
}

/* --- Прайс, FAQ и хвост страницы: те же карточки, не таблица на разделителях -- */
.vn-price { gap: 1.125rem; }
.vn-price__c {
  border-radius: var(--r-card); border-color: var(--line-soft);
  box-shadow: var(--e1); padding: 1.625rem 1.375rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vn-price__c:hover { transform: translateY(-.1875rem); box-shadow: var(--e2); }
/* Популярный план поднят над рядом — рамкой в 2px он читался обводкой, не выбором. */
.vn-price__c.is-hot { border-color: var(--primary); box-shadow: var(--e2), 0 0 0 .25rem rgba(109, 40, 217, .08); }
.vn-price__c.is-hot:hover { box-shadow: var(--e3), 0 0 0 .25rem rgba(109, 40, 217, .1); }
.vn-price__c.is-free { background: var(--paper); }

.vn-faq { gap: .75rem; }
.vn-faq__i {
  border-radius: var(--r-card); border-color: var(--line-soft); box-shadow: var(--e1);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.vn-faq__i[open], .vn-faq__i:hover { box-shadow: var(--e2); }

.vn-flow__note {
  border-radius: var(--r-card); border-color: var(--line-soft); box-shadow: var(--e1);
}

@media print {
  .vn-price__c, .vn-faq__i, .vn-flow__note { box-shadow: none; }
}

/* --- Хвосты сеток: 5 тарифов и 9 модулей не делятся на 2–4 колонки ----------
   `auto-fit` на промежуточных ширинах давал ряд из одной-двух сирот, прижатых
   влево (V3 из `_REGISTRY/docs/LANDING_VISUAL_DESIGN.md`). Фиксируем число колонок
   и центрируем последний элемент, вместо того чтобы полагаться на авто-раскладку. */
@media (min-width: 72rem) {
  .vn-price { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 40.0625rem) and (max-width: 71.9375rem) {
  .vn-price { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-price__c:last-child { grid-column: 1 / -1; width: calc(50% - .5625rem); justify-self: center; }
}
@media (min-width: 40.0625rem) and (max-width: 64rem) {
  .vn-mods__i:last-child { grid-column: 1 / -1; width: calc(50% - .4375rem); justify-self: center; }
}

/* ============================================================================
   БЛОК 7. Третий видеоразбор (2026-08-04) — шапка, устройства героя, ритм полос
   ----------------------------------------------------------------------------
   Разбор шёл сверху вниз по живой странице. Классы дефектов:
   а) шапка уезжала вместе с контентом — целевое действие пропадало на 4 минуты
      прокрутки; полоса была высокой, а имя бренда шло без знака;
   б) в герое окно висело в пустоте: снимок сверху, мокап под ним, между ними
      провал, а подпись срезалась кромкой секции;
   в) свечение под макетами обрывалось по кромке своего бокса — градиент имел
      ненулевую альфу на границе;
   г) двенадцать белых карточек подряд читались одним полотном;
   д) хвостовые блоки (сценарий дня) остались на волосяной рамке БЛОКА 6.
   ============================================================================ */

/* --- а. Шапка: липкая полоса, знак у имени ---------------------------------- */
.vn-top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(.875rem);
  backdrop-filter: saturate(180%) blur(.875rem);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.vn-top.is-stuck { border-bottom-color: var(--line-soft); box-shadow: 0 .25rem 1.25rem rgba(20, 7, 48, .06); }
/* Полоса ниже прежнего: 1.25rem сверху и снизу давали ~5.5rem — четверть первого
   экрана уходила под навигацию, при этом она даже не липла. */
.vn-topbar { padding: .625rem 0; gap: 1rem; }
.vn-logo { display: inline-flex; align-items: center; gap: .5625rem; font-size: 1.1875rem; }
.vn-logo__m {
  width: 1.75rem; height: 1.75rem; flex: none; border-radius: .5625rem;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #8B5CF6, #6D28D9);
  color: #fff; font-size: .9375rem; font-weight: 800; line-height: 1;
  box-shadow: 0 .25rem .625rem rgba(109, 40, 217, .32);
}
.vn-nav { gap: 1.375rem; }
.vn-nav a { font-size: .90625rem; }
/* Якорь не заезжает под липкую полосу. */
[id] { scroll-margin-top: 4.5rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 56rem) { .vn-nav { display: none; } }

/* --- в. Свечение не обрывается кромкой -------------------------------------- */
/* Бокс шире пятна: раньше радиальный градиент доходил до границы с ненулевой
   альфой, и она читалась резаной тенью по прямоугольнику. */
.vn-sec:not(.vn-sec--deep):not(.vn-sec--accent) .vn-shot::before {
  inset: -8% -14% -12% -14%;
  background:
    radial-gradient(46% 48% at 50% 46%, rgba(109, 40, 217, .16), rgba(109, 40, 217, 0) 72%),
    radial-gradient(32% 38% at 82% 66%, rgba(255, 183, 3, .15), rgba(255, 183, 3, 0) 70%);
}
.vn-screens::before {
  inset: 1.5rem -6% -6%;
  background:
    radial-gradient(44% 52% at 50% 46%, rgba(109, 40, 217, .14), rgba(109, 40, 217, 0) 72%),
    radial-gradient(34% 40% at 84% 70%, rgba(236, 72, 153, .12), rgba(236, 72, 153, 0) 70%);
}

/* --- г. Ритм полос: состав системы и приложение — свои фоны ------------------ */
.vn-sec--soft { background: linear-gradient(180deg, #F7F3FF, #FCFAFF 62%, #FFF8F1); }
/* Глава приложения — полоса во всю ширину со своим фоном: раньше она шла тем же
   кремовым, что и соседняя, и две секции сливались в одну. */
.vn-sec--app {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, #F4EEFF, #FBF6FF 46%, #FFF4FA);
}
.vn-sec--app::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 44% at 12% 8%, rgba(139, 92, 246, .16), rgba(139, 92, 246, 0) 70%),
    radial-gradient(42% 48% at 92% 88%, rgba(236, 72, 153, .12), rgba(236, 72, 153, 0) 70%);
}
.vn-sec--app > .vn-wrap { position: relative; z-index: 1; }
.vn-sec--app .vn-card, .vn-sec--app .vn-tools__c { background: rgba(255, 255, 255, .82); }

/* Сцена главы приложения: ученики стоят у кромок ряда корпусов, а не отдельным
   кадром над ним. Прежняя посадка — вырез 380×980 в карточке `aspect-ratio: 3/2`
   с `object-fit: cover` — срезала голову и ноги и оставляла торс с сумкой на белом
   прямоугольнике (кадр оператора 2026-08-04, «фото криво стало»).
   ⛔ Вырезу не возвращать карточку, кроп и тень — правило общее с `.vn-face`
   и `.hs-person`: опору даёт маска низа, объём — свечение сцены под корпусами.
   Рельсы фиксированной ширины (не `1fr`): доля отдавала фигуре четверть полосы,
   и корпуса ужимались тем сильнее, чем уже экран.
   Рельсы разной ширины — это рост: младшеклассник ниже подростка тем же отношением,
   что в жизни (8.2 к 10.5), обе фигуры прижаты к низу и стоят на одном полу.
   ⛔ Не выравнивать по высоте — восьмилетка становится ростом со старшеклассником. */
.vn-stage { margin-top: 4.5rem; display: grid; gap: 1.25rem; align-items: end;
  grid-template-columns: 8.2rem minmax(0, 1fr) 10.5rem; }
.vn-stage .vn-screens { margin-top: 0; }
.vn-learn__fig { display: block; width: 100%; height: auto; position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 9%);
  mask-image: linear-gradient(to top, transparent 0, #000 9%); }
/* Верхний зазор держит маскота: он вылезает на 4.25rem над средним корпусом, и при
   отступе 2rem лапы ложились на последнюю строку лида (тот же кадр). */
@media (max-width: 64rem) { .vn-stage { grid-template-columns: 7rem minmax(0, 1fr) 9rem; } }
/* Ниже 52rem корпуса схлопываются в одну колонку — рельсов на фигуры уже нет,
   люди в главе остаются кадром учеников в сценарии дня. */
@media (max-width: 52rem) {
  .vn-stage { grid-template-columns: 1fr; margin-top: 3.5rem; }
  .vn-learn__fig { display: none; }
}

/* Три экрана — семья устройств, а не три одинаковых прямоугольника в линию. */
@media (min-width: 56.0625rem) {
  .vn-screens__c--mid { align-self: start; }
  .vn-screens__c:first-child .phone { transform: rotate(-2.5deg) translateY(1.25rem); }
  .vn-screens__c:last-child .phone { transform: rotate(2.5deg) translateY(1.25rem); }
  .vn-screens__c--mid .phone { max-width: 17.25rem; box-shadow: 0 2rem 4rem rgba(46, 16, 101, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .vn-screens__c:first-child .phone, .vn-screens__c:last-child .phone { transform: none; }
}

/* --- д. Хвостовые блоки в общей системе карточек ---------------------------- */
/* Сценарий дня и финальная плашка остались на волосяной рамке: рядом с карточками
   БЛОКА 6 они читались другим поколением вёрстки. */
.vn-story__s, .vn-final, .vn-face p {
  border-radius: var(--r-card); border-color: var(--line-soft); box-shadow: var(--e1);
}
.vn-story__s { transition: transform .18s ease, box-shadow .18s ease; }
.vn-story__s:hover { transform: translateY(-.125rem); box-shadow: var(--e2); }
.vn-story__ph > img:first-child { border-radius: var(--r-card); box-shadow: var(--e2); }
.vn-chips li { border-color: var(--line-soft); border-radius: 999px; box-shadow: var(--e1); background: var(--paper); }

@media print {
  .vn-story__s, .vn-final, .vn-face p, .vn-chips li, .vn-story__ph > img:first-child { box-shadow: none; }
  .vn-top { position: static; }
}

/* --- Сцена главы Chuỗi (2026-08-04): человек по принципам hero --------------- */
/* Директор сети стоит справа ПЕРЕД кромкой окна отчётов (z 2). Окно ужато
   margin'ом — фигура перекрывает только паддинг, KPI и бейджи «tốt / cần xem»
   целы. Карточка «Chuyển cơ sở» (z 3) парит НАД фигурой и связывает слои,
   как hs-zalo в hero. Люди не «плавают» — hs-float только у карточки. */
.vn-sec--deep { overflow-x: clip; }
.vn-chainsc { position: relative; }
.vn-chainsc .win { margin-right: 8rem; }
/* Ужатому окну KPI-сетка иначе падает в 2 колонки с дырой на месте третьей;
   компактный кегль — чтобы подписи не рвались на 3-4 строки. */
.vn-chainsc .kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.vn-chainsc .kpi__c { padding: .625rem .625rem; }
.vn-chainsc .kpi__l { font-size: .6875rem; }
.vn-chainsc .kpi__v { font-size: 1.375rem; white-space: nowrap; }
.vn-chainsc .kpi__d { font-size: .6875rem; }
/* ⛔ Без drop-shadow — см. блок `.vn-face img`. На тёмно-фиолетовом полотне
   `rgba(0,0,0,.5)` с блюром 2.25rem давал вокруг фигуры чёрное облако, особенно
   заметное справа от неё и на кромке окна отчётов. */
.vn-boss { position: absolute; z-index: 2; right: -1rem; bottom: 0; width: 9.5rem; height: auto;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 6%);
  mask-image: linear-gradient(to top, transparent 0, #000 6%); }
/* Карточка живёт на голени фигуры, право — за кромкой окна: бейджи филиалов
   («tốt / cần xem») остаются читаемыми. */
.vn-boss__card { position: absolute; z-index: 3; right: -1.25rem; bottom: 3rem; max-width: 11.5rem;
  animation: hs-float 9s ease-in-out infinite; }
.vn-boss__card b { display: block; font-size: .8125rem; font-weight: 800; letter-spacing: -.01em; }
.vn-boss__ic { width: 2rem; height: 2rem; flex: none; border-radius: .625rem; display: grid;
  place-items: center; background: #FEF3C7; color: #92400E; }
/* ≤72rem колонка узкая: карточку прячем (иначе ложится на бейдж «cần xem»),
   фигура стоит почти без перекрытия окна. */
/* Селектор с .vn-chainsc: блок стоит ВЫШЕ `.hs-card { display:flex }` по файлу,
   и одноклассовый `.vn-boss__card { display:none }` та проигрывала бы каскаду. */
@media (max-width: 72rem) {
  .vn-chainsc .win { margin-right: 5.5rem; }
  .vn-boss { width: 6.75rem; right: -1rem; }
  .vn-chainsc .vn-boss__card { display: none; }
}
@media (max-width: 56rem) {
  .vn-chainsc .win { margin-right: 0; }
  .vn-boss, .vn-chainsc .vn-boss__card { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vn-face p, .vn-boss__card { animation: none; } }

/* Липкая полоса действия: подпись обязана сжиматься. У флекс-элемента минимальная
   ширина по умолчанию — по содержимому, поэтому «14 ngày dùng thử miễn phí» и
   кнопка вместе выносили страницу за вьюпорт (420 против 390). Кнопка держит свой
   размер, текст отдаёт. */
@media (max-width: 56rem) {
  .vn-bar > span { min-width: 0; flex: 1 1 auto; }
  .vn-bar .vn-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ⛔ Без этого браузер сам увеличивает шрифт в блоках-«кластерах» на мобильном
   (text autosizing) — подпись липкой полосы вырастала на 30px и вытягивала полосу
   за вьюпорт (оракул `vn-mobile-check`: 420 против 390). Раскладка обязана
   считаться от заданных размеров, а не от догадки движка. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ⛔ Свечения секций нарисованы псевдоэлементами с отрицательными отступами — они
   намеренно выходят за кромку блока (иначе градиент срезается по границе, разбор
   2026-08-04, 01:59 и 03:01). На узком экране этот вылет давал горизонтальную
   прокрутку. `clip`, а не `hidden`: `hidden` на корне убивает липкую шапку. */
html { overflow-x: clip; }


/* ═════════════════════════════════════════════════════════════════════════════
   ГЕРОЙ: два устройства в ряд, снимок — подписью (переработка 2026-08-04)

   Прежняя композиция была коллажем внахлёст: фотография в absolute сверху, окно
   поверх неё, телефон в правом жёлобе. Кадр оператора показал три следствия —
   мокап получал 390px на всё окно (расписание переносило «Thiếu nhi» в две
   строки, «128/134» уходило под срез карточки), от фотографии оставался угол
   из-под крышки, а подпись жалась к нижней кромке.

   Сейчас: ноутбук и телефон стоят на одной линии сеткой (⛔ не absolute — именно
   он и давал наложения), телефон заходит на крышку только кромкой корпуса, а
   фотография ушла в подпись под композицией. Ширина окна перестала быть остатком
   и считается от колонки.
   ───────────────────────────────────────────────────────────────────────────── */

/* Правая колонка шире: она несёт мокап, левая — текст, который переносится сам. */
.vn-hero .vn-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: 2.5rem; }
/* ⛔ Кегль H1 сведён с новой шириной колонки: на 3.25rem «ngữ» уезжало третьей
   строкой-сиротой. Пересчитывать при любой правке пропорций сплита. */
.vn-hero .vn-h1 { font-size: clamp(1.95rem, 4.1vw, 2.9rem); }

/* --- Расписание: карточки урока вместо табличек ---------------------------- */
.sched { gap: .3125rem; }
.sched__d {
  display: flex; align-items: baseline; justify-content: center; gap: .25rem;
  font-size: .6875rem; letter-spacing: .04em;
}
.sched__d i { font-style: normal; font-size: .625rem; font-weight: 700; opacity: .55; }
.les {
  margin-top: .3125rem; padding: .375rem .3125rem .4375rem; border-radius: .5rem;
  text-align: left; border-left: .1875rem solid currentColor; line-height: 1.1;
}
.les__t { font-size: .6875rem; letter-spacing: -.01em; }
.les__s { font-size: .6875rem; opacity: .7; margin-top: .125rem; }
.les--ghost { border-left-color: rgba(27, 16, 51, .18); background: rgba(27, 16, 51, .03); outline: 0; }

/* --- KPI: число + полоска той же величины --------------------------------- */
.kpi--win { margin-top: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.kpi--win .kpi__c { padding: .625rem .625rem .5rem; border-radius: .625rem; }
.kpi--win .kpi__l { font-size: .6875rem; font-weight: 700; line-height: 1.2; }
.kpi--win .kpi__v { font-size: 1.25rem; margin-top: .3125rem; white-space: nowrap; }
.kpi--win .kpi__v small { font-size: .8125rem; opacity: .55; }
.kpi__bar {
  display: block; height: .1875rem; margin-top: .5rem; border-radius: 999px;
  background: rgba(27, 16, 51, .08); overflow: hidden;
}
.kpi__bar i { display: block; height: 100%; border-radius: 999px; background: var(--app-primary); }
.kpi__c:nth-child(2) .kpi__bar i { background: var(--app-mint); }
.kpi__c:nth-child(3) .kpi__bar i { background: var(--accent); }

/* --- Телефон -------------------------------------------------------------- */
/* ⛔ Цвет задаётся явно: на тёмном герое корпус наследовал `#fff` от секции, и
   «Lịch học» с названиями занятий были белым по белой карточке (кадр оператора). */
.phone { color: var(--ink); }
.vn-scene { position: relative; min-width: 0; min-height: 28.5rem; }
.vn-scene::before { content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset: 0 -8% 2% -10%;
  background:
    radial-gradient(48% 54% at 44% 40%, rgba(139, 92, 246, .42), rgba(139, 92, 246, 0) 70%),
    radial-gradient(36% 42% at 80% 72%, rgba(255, 183, 3, .2), rgba(255, 183, 3, 0) 66%);
  filter: blur(.375rem); }
.vn-scene > * { position: absolute; animation: hs-in .7s cubic-bezier(.22, .7, .3, 1) both; }
@keyframes hs-in { from { opacity: 0; translate: 0 1.375rem; } to { opacity: 1; translate: 0 0; } }
@keyframes hs-float {
  0%, 100% { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
  50% { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - .4375rem), 0); } }
.hs-win { animation-delay: .05s; }
.hs-person { animation-delay: .15s; }
.hs-att { animation: hs-in .7s cubic-bezier(.22, .7, .3, 1) .45s both, hs-float 7s ease-in-out 1.6s infinite; }
.hs-kpi { animation: hs-in .7s cubic-bezier(.22, .7, .3, 1) .6s both, hs-float 9s ease-in-out 2s infinite; }
.hs-zalo { animation: hs-in .7s cubic-bezier(.22, .7, .3, 1) .8s both, hs-float 7.5s ease-in-out 2.3s infinite; }
@media (prefers-reduced-motion: reduce) { .vn-scene > * { animation: none; } }

/* Окно веб-приложения: узкий рельс иконок вместо сайдбара — интерфейс дышит. */
.hs-win { z-index: 1; left: 0; right: 11rem; top: 1.375rem;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  background: #fff; color: var(--ink); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 2.5rem 5rem rgba(9, 3, 26, .55); }
.hs-bar { display: flex; align-items: center; gap: .625rem; padding: .5625rem .75rem; border-bottom: 1px solid var(--line); }
.hs-bar__dots { display: flex; gap: .3rem; flex: none; }
.hs-bar__dots i { width: .5rem; height: .5rem; border-radius: 50%; }
.hs-bar__dots i:nth-child(1) { background: #F2705A; }
.hs-bar__dots i:nth-child(2) { background: #F3BC4B; }
.hs-bar__dots i:nth-child(3) { background: #56C271; }
.hs-bar__url { margin-inline: auto; display: flex; align-items: center; gap: .375rem;
  font-size: .6875rem; font-weight: 700; color: var(--muted);
  background: var(--paper-warm); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .75rem; }
.hs-bar__url .win__i { width: .6875rem; height: .6875rem; stroke: #56C271; }
.hs-bar__ava { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--app-primary); color: #fff; font-size: .6875rem; font-weight: 800; }
.hs-app { display: grid; grid-template-columns: 3rem minmax(0, 1fr); }
.hs-rail { display: grid; gap: .375rem; align-content: start; justify-items: center; padding: .75rem .5rem;
  background: linear-gradient(180deg, #2B1B54, #190E33); }
.hs-rail span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .625rem;
  color: rgba(255, 255, 255, .55); }
.hs-rail span.is-on { background: rgba(255, 255, 255, .16); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* Правый паддинг больше перекрытия телефоном (1.5rem): подложка окна уходит под
   корпус — глубина есть, а контент («+ Thêm», колонка T6) остаётся целым. */
.hs-main { min-width: 0; padding: .875rem 2.25rem 1rem 1rem; background: var(--paper-warm); }
.hs-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.hs-head b { font-size: .9375rem; font-weight: 800; margin-right: auto; }
.hs-chip { font-size: .6875rem; font-weight: 700; color: var(--muted); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .625rem; white-space: nowrap; }
.hs-chip--acc { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }

/* Владелица школы: стоит справа ПЕРЕД кромкой окна и ЗА карточками (z 3-4) —
   сервис показан через человека. Перекрытие окна ≤ правого паддинга .hs-main,
   расписание остаётся целым. Не «плавает» (hs-float людям не идёт), параллакс —
   тем же transform, что у окна. Низ фигуры растворяется маской, не режется.
   ⛔ Без drop-shadow — см. блок `.vn-face img`: маска срезает опору, остаётся
   тёмный ореол вокруг головы и плеч поверх фиолетового градиента. */
.hs-person { z-index: 2; right: -1rem; bottom: 0; width: 14rem; height: auto;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 7%);
  mask-image: linear-gradient(to top, transparent 0, #000 7%); }

/* Спутники: KPI вынесены из окна — плавают на своих глубинах. */
.hs-card { display: flex; align-items: center; gap: .625rem; background: #fff; color: var(--ink);
  border-radius: .875rem; padding: .625rem .875rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 1.25rem 2.75rem rgba(9, 3, 26, .45); }
.hs-card div > span { display: block; font-size: .6875rem; font-weight: 700; color: var(--muted); }
.hs-att { z-index: 3; top: -.875rem; left: -1rem; }
.hs-att b, .hs-kpi b { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.hs-att b small { font-size: .75rem; font-weight: 800; opacity: .5; }
.hs-att__ic { width: 2rem; height: 2rem; flex: none; border-radius: .625rem; display: grid; place-items: center;
  background: #DCFCE7; color: #065F46; }
.hs-kpi { z-index: 3; left: -1.25rem; bottom: 9.25rem; }
.hs-ring { width: 2.5rem; height: 2.5rem; flex: none; transform: rotate(-90deg); }
.hs-ring circle { fill: none; stroke: rgba(27, 16, 51, .08); stroke-width: 4; }
.hs-ring .hs-ring__v { stroke: var(--accent); stroke-dasharray: 86 100; stroke-linecap: round; }

/* Zalo-карточка — фирменный слой: продукт говорит с родителем сам. */
.hs-zalo { z-index: 4; left: 26%; bottom: -.25rem; width: 17rem; align-items: flex-start; }
.hs-zalo__ic { width: 2.125rem; height: 2.125rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #0068FF; color: #fff; }
.hs-zalo__ic .win__i { width: 1.125rem; height: 1.125rem; }
.hs-zalo__b { min-width: 0; }
.hs-zalo__t { display: flex; align-items: baseline; gap: .5rem; }
.hs-zalo__t b { font-size: .75rem; font-weight: 800; }
.hs-zalo__t em { font-style: normal; font-size: .625rem; font-weight: 600; color: var(--muted); margin-left: auto; }
.hs-zalo p { margin: .25rem 0 .3125rem; padding: .5rem .625rem; font-size: .75rem; font-weight: 600; line-height: 1.45;
  background: #EAF2FF; border-radius: .125rem .75rem .75rem .75rem; }
.hs-zalo__seen { font-size: .625rem; font-weight: 700; color: #0068FF; }

@media (max-width: 72rem) {
  .hs-win { right: 10rem; }
  .hs-person { width: 13rem; right: -1.25rem; }
  .hs-zalo { left: 7%; }
  .hs-head .hs-chip:nth-of-type(2) { display: none; }
}
/* Ниже 64rem пятый день не влезает целиком — четыре дня показываем полностью. */
@media (max-width: 64rem) {
  .hs-win .sched { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hs-win .sched > :nth-child(5) { display: none; }
}

/* --- Узкий экран ---------------------------------------------------------- */
/* ⛔ Схлопывание в колонку обязано жить здесь же: `.vn-hero .vn-split` весом
   перебивает `.vn-split` из общего медиазапроса, и без этой строки первый экран
   на телефоне оставался двухколоночным, а мокап уезжал за вьюпорт. */
@media (max-width: 56rem) {
  .vn-hero .vn-split { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .vn-hero .vn-h1 { font-size: clamp(1.95rem, 6.4vw, 2.6rem); }
  /* Сцена в потоке: окно во всю ширину, спутники прячутся (телефон живёт в app.php),
     Zalo-карточка остаётся — человеческий слой первого экрана. */
  .vn-scene { min-height: 0; }
  .vn-scene > * { position: static; }
  /* Телефона в потоке нет — запас под его перекрытие не нужен. */
  .hs-main { padding-right: 1rem; }
  .hs-person, .hs-att, .hs-kpi { display: none; }
  .hs-zalo { width: auto; max-width: 22rem; margin: 1rem 0 0 auto; }
}

@media (max-width: 40rem) {
  /* Три дня вместо четырёх: на 390px карточка урока иначе теряет и время, и название. */
  .hs-win .sched { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3125rem; }
  .hs-win .sched > :nth-child(4) { display: none; }
  .hs-rail { display: none; }
  .hs-app { grid-template-columns: minmax(0, 1fr); }
  .kpi--win { gap: .375rem; }
  .kpi--win .kpi__c { padding: .5rem .4375rem; }
  .kpi--win .kpi__v { font-size: 1.0625rem; }
  .kpi--win .kpi__l { font-size: .625rem; }
}