/* ═══════════════════════════════════════════════════════════════
   SKILLUP MIXING — вариант 3 «Поток»: перетекания и переливания поверх v3.1 «зоны».
   Грузится ПОСЛЕ /v3.css. Только CSS-анимации + внешний /v3-flow.js (подсветка за курсором).
   Всё под body.v3-flow, живые страницы не задеты.
   ═══════════════════════════════════════════════════════════════ */

@property --v3f-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --v3f-gold: 226,201,139;
  --v3f-ice: 156,200,255;
  --v3f-mint: 110,231,168;
  --v3f-warm: 214,150,70;
}

/* ── общие ключевые кадры ───────────────────────────────────────
   v3f-run   — бегущий блик по полосе (background-size 300% → сдвиг на период = -150%)
   v3f-shine — переливание градиентного текста (background-size 200%, две одинаковые половины) */
@keyframes v3f-run   { to { background-position: -150% 0, 0 0; } }
@keyframes v3f-shine { to { background-position: -200% 0; } }
@keyframes v3f-spin  { to { --v3f-a: 360deg; } }

/* ── 1. ФОН: северное сияние вместо статичных пятен ──────────── */
body.v3-flow::before { display: none; }
/* у разделов в index.html непрозрачный фон var(--bg) — он резал сияние ступеньками; в «Потоке» фон сквозной */
.v3-flow #content-preview, .v3-flow #offer, .v3-flow #instructor, .v3-flow #credits, .v3-flow #cta-final { background: transparent; }
.v3f-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .25; /* в 4 раза тише — просьба Александра */ }
.v3f-a {
  position: absolute;
  display: block;
  width: 64vmax;
  height: 64vmax;
  border-radius: 50%;
  opacity: var(--o, .5);
}
.v3f-a i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--c), .42) 0%, rgba(var(--c), .16) 30%, rgba(var(--c), 0) 64%);
  animation: v3f-drift var(--t, 34s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  will-change: transform;
}
.v3f-a-gold { --c: var(--v3f-gold); --o: .66; --t: 36s;            left: -20vmax; top: -24vmax; }
.v3f-a-ice  { --c: var(--v3f-ice);  --o: .40; --t: 44s; --d: -15s; right: -26vmax; top: 4vmax; }
.v3f-a-mint { --c: var(--v3f-mint); --o: .34; --t: 50s; --d: -27s; left: 6vmax; bottom: -34vmax; }
.v3f-a-warm { --c: var(--v3f-warm); --o: .30; --t: 40s; --d: -8s;  right: 2vmax; bottom: -26vmax; }
@keyframes v3f-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(8vmax, 6vmax, 0) scale(1.14); }
  100% { transform: translate3d(-7vmax, 11vmax, 0) scale(.92); }
}

/* цвет сияния перетекает по мере прокрутки: золото (hero) → лёд (подписка) → мята (бесплатно) → золото (плагины, цены) */
@supports (animation-timeline: scroll()) {
  .v3f-a { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); }
  .v3f-a-gold { animation-name: v3f-t-gold; }
  .v3f-a-ice  { animation-name: v3f-t-ice; }
  .v3f-a-mint { animation-name: v3f-t-mint; }
  .v3f-a-warm { animation-name: v3f-t-warm; }
  @keyframes v3f-t-gold { 0% { opacity: .62; transform: translateY(0); } 24% { opacity: .38; } 40% { opacity: .20; } 54% { opacity: .58; } 82% { opacity: .48; } 100% { opacity: .62; transform: translateY(-14vmax); } }
  @keyframes v3f-t-ice  { 0% { opacity: .10; transform: translateY(0); } 18% { opacity: .16; } 30% { opacity: .58; } 42% { opacity: .22; } 68% { opacity: .40; } 100% { opacity: .14; transform: translateY(-24vmax); } }
  @keyframes v3f-t-mint { 0% { opacity: .06; transform: translateY(0); } 30% { opacity: .10; } 41% { opacity: .50; } 54% { opacity: .12; } 88% { opacity: .26; } 100% { opacity: .10; transform: translateY(-30vmax); } }
  @keyframes v3f-t-warm { 0% { opacity: .18; } 50% { opacity: .22; } 78% { opacity: .44; } 100% { opacity: .30; } }
}

/* ── 2. ПОЛОСА ПРОГРЕССА: золото → лёд → мята по мере прокрутки ─ */
.v3f-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .v3f-progress {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 1200;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, rgb(var(--v3f-gold)), rgb(var(--v3f-ice)) 55%, rgb(var(--v3f-mint)));
    box-shadow: 0 0 12px rgba(var(--v3f-gold), .55);
    animation: v3f-grow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes v3f-grow { to { transform: scaleX(1); } }
}

/* ── 3. HERO: отблески на ленте, параллакс и растворение при прокрутке ── */
.v3-flow .v3-hero-media::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(38% 46% at 78% 28%, rgba(var(--v3f-ice), .85), transparent 70%),
    radial-gradient(34% 44% at 22% 78%, rgba(var(--v3f-gold), .95), transparent 70%),
    radial-gradient(28% 36% at 60% 70%, rgba(var(--v3f-mint), .55), transparent 70%);
  animation: v3f-hero-wash 26s ease-in-out infinite alternate;
  will-change: transform;
}
.v3-flow .v3-hero-media::after { z-index: 2; }
@keyframes v3f-hero-wash {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(-6%, 5%, 0) rotate(8deg) scale(1.12); }
}
.v3f-hero-glow2 {
  width: 560px;
  height: 560px;
  right: auto; left: -160px;
  top: auto; bottom: -120px;
  background: radial-gradient(circle, rgba(var(--v3f-ice), .22) 0%, rgba(var(--v3f-ice), .06) 35%, transparent 65%);
  animation-duration: 19s;
  animation-direction: alternate-reverse;
}
@supports (animation-timeline: scroll()) {
  .v3-flow .v3-hero-media { animation: v3f-hero-media linear both; animation-timeline: scroll(root); animation-range: 0px 100vh; }
  .v3-flow .v3-hero-inner,
  .v3-flow .v3-hero .hero-stats.v3-stats { animation: v3f-hero-fade linear both; animation-timeline: scroll(root); animation-range: 0px 80vh; }
  @keyframes v3f-hero-media { to { transform: translateY(14%) scale(1.06); } }
  @keyframes v3f-hero-fade  { to { opacity: 0; transform: translateY(-44px); } }
}

/* ── 4. ПЕРЕЛИВАЮЩИЙСЯ ЗОЛОТОЙ ТЕКСТ ────────────────────────────
   Две одинаковые половины градиента → бесшовный цикл. Блик проходит по слову раз в ~9 с. */
.v3-flow .v3-grad,
.v3-flow .v3-cta .cta-final-title {
  background-image: linear-gradient(100deg,
    #F3DFA6 0%, #C9AA68 16%, #9C7F3F 30%, #C9AA68 38%, #FFF7E0 44%, #F3DFA6 50%,
    #C9AA68 66%, #9C7F3F 80%, #C9AA68 88%, #FFF7E0 94%, #F3DFA6 100%);
  background-size: 200% 100%;
  animation: v3f-shine 9s linear infinite;
}
.v3-flow .v3-cta .cta-final-title { animation-duration: 12s; }

/* ── 5. ЗОЛОТЫЕ КНОПКИ: блик пробегает раз в 7 с, на ховере — сразу ── */
.v3-flow .v3-btn-gold,
.v3-flow .v3-offer .price-btn.gold,
.v3-flow .v3-offer .price-all-btn { position: relative; overflow: hidden; }
.v3-flow .v3-btn-gold::after,
.v3-flow .v3-offer .price-btn.gold::after,
.v3-flow .v3-offer .price-all-btn::after {
  content: '';
  position: absolute;
  top: -30%; bottom: -30%; left: 0;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-180%) skewX(-18deg);
  animation: v3f-sheen 7s ease-in-out infinite;
}
.v3-flow .v3-btn-gold:hover::after,
.v3-flow .v3-offer .price-btn.gold:hover::after,
.v3-flow .v3-offer .price-all-btn:hover::after { animation-duration: 1.4s; }
@keyframes v3f-sheen {
  0%, 62% { transform: translateX(-180%) skewX(-18deg); }
  100%    { transform: translateX(380%) skewX(-18deg); }
}

/* ── 6. ГРАНИЦЫ РАЗДЕЛОВ: тонкая линия, по которой бежит свет ──── */
.v3-flow .v3-section { position: relative; }
.v3-flow .v3-section::before {
  content: '';
  position: absolute;
  left: var(--v3-pad); right: var(--v3-pad); top: 0;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, transparent 18%, rgba(var(--v3f-gold), .9) 26%, rgba(var(--v3f-ice), .9) 33%, rgba(var(--v3f-mint), .9) 40%, transparent 48%, transparent 100%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.09) 18%, rgba(255,255,255,.09) 82%, transparent);
  background-size: 300% 100%, 100% 100%;
  background-position: 0 0, 0 0;
  animation: v3f-run 16s linear infinite;
  opacity: .25; /* «кометы» еле видны — просьба Александра */
}
.v3-flow #content-preview::before { display: none; } /* сразу под бегущей строкой линия уже есть */
.v3-flow #plugins::before   { animation-delay: -4s; }
.v3-flow #offer::before     { animation-delay: -8s; }
.v3-flow #instructor::before{ animation-delay: -12s; }
.v3-flow #credits::before   { animation-delay: -2s; }

/* ── 7. ПОДСВЕТКА ЗА КУРСОРОМ (--mx/--my/--v3f-spot ставит /v3-flow.js) ── */
.v3-flow .v3-legend-item, .v3-flow .v3-legend-item:hover,
.v3-flow .v3-feature,
.v3-flow .v3-tile,
.v3-flow .v3-rows .cvp-card,
.v3-flow .v3-stats .stat-card,
.v3-flow .v3-numbers .cr-stat,
.v3-flow .v3-offer .pricing-wrap .price-card.side {
  background-image:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--cat-rgb, 226,201,139), calc(.17 * var(--v3f-spot, 0))), transparent 60%),
    var(--glass);
}
.v3-flow .v3-tile-gold,
.v3-flow .v3-bundle,
.v3-flow .v3-offer .price-all,
.v3-flow .v3-numbers .cr-stat:hover {
  background-image:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--cat-rgb, 226,201,139), calc(.17 * var(--v3f-spot, 0))), transparent 60%),
    var(--glass-gold);
}
.v3-flow .v3-rack {
  background-image:
    radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--v3f-gold), calc(.14 * var(--v3f-spot, 0))), transparent 60%),
    linear-gradient(180deg, #181818 0%, #0b0b0b 100%);
}

/* ── 8. ПЕРЕЛИВАЮЩЕЕСЯ КОЛЬЦО ПО КРАЮ ПЛИТКИ (на ховере) ─────── */
.v3-flow .v3-bundle { position: relative; }
.v3f-ring {
  position: absolute !important;
  inset: 0;
  z-index: 5 !important;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
  background: conic-gradient(from var(--v3f-a),
    transparent 0deg, transparent 30deg,
    rgba(var(--cat-rgb, 226,201,139), .7) 80deg, var(--cat, #E2C98B) 115deg, #fff 140deg, var(--cat, #E2C98B) 165deg, rgba(var(--cat-rgb, 226,201,139), .7) 200deg,
    transparent 250deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.v3-flow :is(.v3-legend-item, .v3-feature, .v3-rack, .v3-bundle, .v3-tile):hover > .v3f-ring {
  opacity: 1;
  animation: v3f-spin 2.8s linear infinite;
}

/* ── 9. БЕГУЩИЕ БЛИКИ ПО ЦВЕТНЫМ ПОЛОСКАМ ──────────────────────── */
.v3-flow .v3-rows .cvp-card::after {
  background:
    linear-gradient(90deg, rgba(var(--cat-rgb), .4) 0%, var(--cat) 36%, #fff 50%, var(--cat) 64%, rgba(var(--cat-rgb), .4) 100%),
    linear-gradient(var(--cat), var(--cat));
  background-size: 300% 100%, 100% 100%;
  animation: v3f-run 6s linear infinite;
}
.v3-flow .v3-rack::before {
  background:
    linear-gradient(90deg, transparent 0%, var(--gold) 30%, #fff 50%, var(--gold) 70%, transparent 100%),
    linear-gradient(rgba(191,160,96,.25), rgba(191,160,96,.25));
  background-size: 300% 100%, 100% 100%;
  animation: v3f-run 7s linear infinite;
}
.v3-flow .v3-rack + .v3-rack::before { animation-delay: -3.5s; }
.v3-flow .v3-bundle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.06) 44%, rgba(var(--v3f-gold), .18) 50%, rgba(255,255,255,.06) 56%, transparent 70%),
    linear-gradient(transparent, transparent);
  background-size: 300% 100%, 100% 100%;
  animation: v3f-run 9s linear infinite;
}
.v3-flow .v3-bundle > * { position: relative; z-index: 1; }

/* ── 10. ПУЛЬС ЦВЕТНЫХ МЕТОК ───────────────────────────────────── */
.v3-flow .v3-legend-item::before { animation: v3f-bar 3.4s ease-in-out infinite; }
@keyframes v3f-bar {
  0%, 100% { box-shadow: 0 0 18px var(--cat); }
  50%      { box-shadow: 0 0 34px var(--cat), 0 0 6px var(--cat); }
}
.v3-flow .v3-cat-badge::before,
.v3-flow .v3-chip::before { animation: v3f-dot 2.6s ease-in-out infinite; }
@keyframes v3f-dot {
  0%, 100% { box-shadow: 0 0 10px var(--cat, var(--gold)); }
  50%      { box-shadow: 0 0 4px var(--cat, var(--gold)), 0 0 0 5px rgba(var(--cat-rgb, 191,160,96), .14); }
}

/* ── 11. БЕГУЩАЯ СТРОКА: имена переливаются золото → лёд → мята ── */
.v3-flow .v3-marquee-track span {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
    rgba(234,230,222,.6) 0%, rgb(var(--v3f-gold)) 18%, rgba(234,230,222,.6) 34%,
    rgb(var(--v3f-ice)) 50%, rgba(234,230,222,.6) 66%, rgb(var(--v3f-mint)) 84%, rgba(234,230,222,.6) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: v3f-marq-shine 14s linear infinite;
}
.v3-flow .v3-marquee-track span:nth-child(3n+2) { animation-delay: -4.7s; }
.v3-flow .v3-marquee-track span:nth-child(3n)   { animation-delay: -9.3s; }
@keyframes v3f-marq-shine { to { background-position: -150% 0; } }

/* ── 12. МЕДЛЕННОЕ ДЫХАНИЕ ОБЛОЖЕК ──────────────────────────────── */
.v3-flow .v3-feature-media img { animation: v3f-kb 24s ease-in-out infinite alternate; }
.v3-flow .v3-wall .featured-credit img { animation: v3f-kb 26s ease-in-out infinite alternate-reverse; }
.v3-flow .v3-author-photo img { transform-origin: 50% 18%; animation: v3f-kb-soft 30s ease-in-out infinite alternate; }
@keyframes v3f-kb      { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.09) translate(-1.6%, 1.2%); } }
@keyframes v3f-kb-soft { from { transform: scale(1); } to { transform: scale(1.045); } }

/* ── 13. ФИНАЛ: свечение дышит ─────────────────────────────────── */
.v3-flow .v3-cta::before { animation: v3f-breathe 10s ease-in-out infinite; }
@keyframes v3f-breathe {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .85; }
  50%      { transform: translateX(-50%) scale(1.18); opacity: 1; }
}

/* ── 14. ПОЯВЛЕНИЕ ТЕКСТА: из размытия, чуть выше ход ───────────── */
.js-reveal-ready .v3-flow :is(.v3-head, .v3-h1, .v3-lead, .v3-chip, .v3-hero-ctas, .v3-legend, .cta-final-title, .cta-final-sub).reveal {
  transform: translateY(34px);
  filter: blur(14px);
  transition: opacity .9s ease, transform .9s var(--ease), filter .9s ease;
}
.js-reveal-ready .v3-flow :is(.v3-head, .v3-h1, .v3-lead, .v3-chip, .v3-hero-ctas, .v3-legend, .cta-final-title, .cta-final-sub).reveal.revealed {
  transform: none;
  filter: blur(0);
}

/* ── 15. HERO: вторая строка подзаголовка — число вместо имён (имена бегут строкой ниже) ── */
.v3-flow .v3-lead-num { display: inline-block; margin-top: 8px; color: var(--gold-2); font-weight: 600; }

/* ── 16. РЯДЫ ВИДЕО: заголовки, подписи, кнопка и карточки по центру (как на живой главной) ── */
.v3-flow .v3-row-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; margin-bottom: 20px; }
.v3-flow .v3-row-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.v3-flow .v3-row-pills .v3-cat-badge { margin: 0; padding: 8px 14px 8px 12px; }
.v3-flow .v3-row-pills .v3-see-all { padding: 8px 14px; font-size: 10.5px; }
.v3-flow .v3-row-title { text-align: center; margin: 2px 0 0; }
.v3-flow .v3-row-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--muted2); }
.v3-flow .v3-row-sub .last-update { font-size: 12px; color: var(--muted); }
.v3-flow .v3-row-sub .v3-row-dot { color: rgba(255,255,255,0.28); }
.v3-flow .v3-row-sub .v3-row-new { color: var(--cat); font-size: 12.5px; }
@media (max-width: 640px) { .v3-flow .v3-row-sub { flex-direction: column; gap: 4px; } .v3-flow .v3-row-sub .v3-row-dot { display: none; } }
/* карточки: авто-поля по краям центрируют ленту, когда она влезает; при переполнении — обычная прокрутка слева */
.v3-flow .v3-rows .cvp-scroll > :first-child { margin-left: auto; }
.v3-flow .v3-rows .cvp-scroll > :last-child { margin-right: auto; }

/* ── 17. РАЗБОРЫ: без баннера и заголовка — легенда сразу, воздух до рядов ── */
.v3-flow .v3-legend { margin-bottom: clamp(28px, 3vw, 44px); }
.v3-flow #content-preview .v3-head { margin-bottom: 14px; }

/* ── 18. ПЛИТКИ ФОРМАТОВ В HERO (вместо счётчиков): из первого экрана сразу к видео ── */
.v3-flow .v3-hero-legend { position: relative; z-index: 2; max-width: var(--v3-max); width: 100%; margin: clamp(36px, 6vh, 72px) auto 0 !important; }
.v3-flow .v3-hero-legend { gap: 12px; }
.v3-flow .v3-hero-legend .v3-legend-item {
  padding: 16px 22px 15px 24px; gap: 3px; min-height: 0; justify-content: center;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(12,12,12,0.55);
  border-radius: 18px;
}
.v3-flow .v3-hero-legend .v3-legend-item::before { width: 4px; }
.v3-flow .v3-hero-legend .v3-legend-item::after { top: 12px; right: 14px; font-size: 12px; }
.v3-flow .v3-hero-legend .v3-legend-item:hover { background: rgba(var(--cat-rgb), 0.12); }
.v3-flow .v3-hero-legend .v3-legend-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1; letter-spacing: -0.02em; color: #fff; margin-bottom: 4px; }
.v3-flow .v3-hero-legend .v3-legend-name { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cat); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-flow .v3-hero-legend .v3-legend-desc { font-size: 12.5px; line-height: 1.4; color: rgba(234,230,222,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .v3-flow .v3-hero-legend { margin-top: 24px !important; gap: 8px; }
  .v3-flow .v3-hero-legend .v3-legend-item { flex-direction: column; align-items: flex-start; padding: 12px 36px 12px 18px; gap: 2px; border-radius: 16px; }
  .v3-flow .v3-hero-legend .v3-legend-num { font-size: 22px; margin-bottom: 2px; }
  .v3-flow .v3-hero-legend .v3-legend-name, .v3-flow .v3-hero-legend .v3-legend-desc { white-space: normal; }
}

/* ── 19. HERO: заголовок на треть меньше (Александр: «сильно большая»); метка 01 по центру, как ряды ── */
.v3-flow .v3-h1 { font-size: clamp(34px, 4.6vw, 70px); max-width: 14ch; margin: 0 0 20px; }
.v3-flow .v3-lead { font-size: clamp(14px, 1.1vw, 16px); max-width: 52ch; }
.v3-flow #content-preview .v3-head { justify-content: center; margin-bottom: 8px; }
.v3-flow #content-preview .v3-head > div { display: flex; justify-content: center; width: 100%; }
@media (max-width: 900px) { .v3-flow .v3-h1 { font-size: clamp(30px, 8.5vw, 52px); } }

/* ── 20. ФИНАЛ: «Время звучать.» одной строкой, меньше ── */
.v3-flow .v3-cta .cta-final-title { font-size: clamp(30px, 5vw, 72px); white-space: nowrap; letter-spacing: -0.035em; }

/* ── 21. HERO: текст по центру свободного места, плитки ниже — ближе к бегущей строке ── */
@media (min-width: 901px) {
  .v3-flow .v3-hero, .v3-flow #hero.v3-hero { justify-content: flex-start; padding-bottom: 164px; }   /* плитки и пилюля выше низа (Александр 07.09: шесть раз «ещё чуть-чуть»; было 16 → 56 → 80 → 104 → 128 → 152px, до того 136px; #hero из старого CSS перебивал класс — нужна id-специфичность) */
  .v3-flow .v3-hero-inner { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 0; padding-top: calc(clamp(32px, 6vh, 72px) + 84px); }   /* заголовок на 84px ниже (Александр 07.09: «также как поднял плитки — опусти») */
  .v3-flow .v3-hero-inner > * { flex: none; }
  .v3-flow .v3-hero-legend { margin-top: 0 !important; padding-top: 36px; }
  .v3-flow .v3-news { margin-top: auto; padding-top: 40px; }   /* пилюля «Новое видео» — внизу текстового блока, над плитками */
}

/* ── 22. ФИНАЛ: свечение — мягкое пятно за заголовком, рассеянное во все стороны, ничем не режется ── */
.v3-flow #cta-final { border: 0 !important; background: transparent !important; overflow: visible !important; }
.v3-flow .v3-cta::before {
  left: 50%; top: 50%; bottom: auto;
  width: min(1200px, 120vw); height: 620px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(191,160,96,0.26) 0%, rgba(191,160,96,0.12) 30%, rgba(191,160,96,0.04) 52%, transparent 70%);
  filter: blur(36px);
  animation: none;
}
.v3-flow .v3-cta::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 90vw); height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(243,223,166,0.16), transparent 70%);
  filter: blur(24px);
}
.v3-flow .v3-cta .cta-final-inner { position: relative; z-index: 1; }
.v3-flow footer { border-top-color: rgba(255,255,255,0.04) !important; }

/* ── 23. ПРОИЗВОДИТЕЛЬНОСТЬ: без постоянных перерисовок (Александр: «подлагивает, моргает») ──
   пятна сияния статичны (цвет по прокрутке остаётся), отблески на ленте статичны,
   плитки в hero без backdrop-filter поверх видео, hero-видео без filter (затемнение — оверлеем) */
.v3f-a i { animation: none !important; will-change: auto; }
.v3-flow .v3-hero-media::before { animation: none !important; will-change: auto; }
.v3-flow .v3-hero-legend .v3-legend-item { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10,10,10,0.78) !important; }
.v3-flow .v3-hero-legend .v3-legend-item:hover { background: rgba(var(--cat-rgb), 0.16) !important; }
.v3-flow .v3-hero-media video, .v3-flow .v3-hero-media img { filter: none !important; }
.v3-flow .v3-hero-media::after {
  background:
    linear-gradient(90deg, rgba(7,7,7,0.96) 0%, rgba(7,7,7,0.80) 45%, rgba(7,7,7,0.45) 100%),
    linear-gradient(180deg, rgba(7,7,7,0.55) 0%, rgba(7,7,7,0.25) 30%, rgba(7,7,7,0.45) 70%, #070707 100%);
}
.v3-flow .v3-feature-media img, .v3-flow .v3-wall .featured-credit img, .v3-flow .v3-author-photo img { animation: none !important; }

/* ── 24. НАВИГАЦИЯ без backdrop-filter поверх видео (моргала) ── */
.v3-flow #nav, .v3-flow #nav.scrolled { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10,10,10,0.9) !important; }

/* ── 25. Мобила: свечение финала не шире экрана (давало горизонтальный скролл 429px на 390) ── */
.v3-flow .v3-cta::before { width: min(1200px, 100vw); }
.v3-flow .v3-cta::after { width: min(720px, 86vw); }
html.v3-flow-root, body.v3-flow { overflow-x: clip; }

/* ── 26. МОБИЛА: покупки по центру; шапка — «Плагины» золотом вместо языка, языки в бургер-меню ── */
@media (max-width: 768px) {
  .v3-flow .v3-offer .pricing-wrap { justify-items: center; }
  .v3-flow .v3-offer .pricing-wrap .price-card.side,
  .v3-flow .v3-offer .pricing-wrap .price-card.center { width: 100%; max-width: none; margin-left: auto; margin-right: auto; }
}
.v3-nav-plugins-m { display: none; }
@media (max-width: 900px) {
  .v3-flow #lang-drop { display: none; }
  .v3-flow .v3-nav-plugins-m {
    display: inline-flex; align-items: center; height: 32px; padding: 0 13px; margin-right: 6px;
    border-radius: 999px; border: 1px solid rgba(191,160,96,0.38); background: rgba(191,160,96,0.09);
    color: var(--gold); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
  }
  .v3-flow .v3-nav-plugins-m:active { background: rgba(191,160,96,0.18); }
}
@media (max-width: 480px) { .v3-flow .v3-nav-plugins-m { height: 30px; padding: 0 11px; font-size: 9.5px; } }
.v3-mlang { display: flex; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.v3-mlang button {
  flex: 1 1 0; background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--muted);
  border-radius: 999px; padding: 10px 0; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; cursor: pointer;
}
.v3-mlang button.active { color: var(--gold); border-color: rgba(191,160,96,0.5); background: rgba(191,160,96,0.1); }

/* ── 27. HERO-медиа: постер webp, видео только на десктопе (src ставит v3-flow.js), на мобиле — статичный кадр; iOS: поля 16px, чтобы не зумило ── */
.v3-flow .v3-hero-fallback { display: none; }
@media (max-width: 900px) {
  .v3-flow .v3-hero-media video { display: none; }
  .v3-flow .v3-hero-fallback { display: block; width: 100%; height: 100%; object-fit: cover; }
  .v3-flow input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .v3-flow textarea, .v3-flow select { font-size: 16px !important; }
}

/* ── 28. Мобила: зоны нажатия и мелкий текст; ссылки в тексте подчёркнуты ── */
.v3-flow .cvp-card-more-btn::before { content: ''; position: absolute; inset: -10px -8px; }   /* невидимая зона нажатия ≥ 38px */
@media (max-width: 900px) {
  .v3-flow .nav-hamburger { padding: 12px 8px; margin: -12px -8px; }
  .v3-flow .v3-marquee-track span { font-size: 11px; }
  .v3-flow .v3-cat-badge, .v3-flow .v3-see-all, .v3-flow .v3-tag { font-size: 11px; }
  .v3-flow .v3-nav-plugins-m { font-size: 10.5px; }
}
.v3-flow .offer-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ── 29. Куки-баннер на телефоне ──────────────────────────────────
   Эти правила раньше жил в /vendor/cookie-consent.js (injectMobileCss — <style> в конец body).
   Скрипт с defer дорисовывал их ПОСЛЕ первой отрисовки, баннер перекомпоновывался на глазах:
   CLS 0,128 на subscribe/login/free-video. Перенесено в статический CSS — скачка нет.
   Префикс `body ` обязателен: на каждой странице в <body> лежит свой
   <style id="skillup-consent-modal-mobile-css"> с теми же селекторами и !important, и при равной
   специфичности побеждал бы он (аудит 12.09.2026). */
@media (max-width: 768px), (pointer: coarse) {
  body #skillup-consent-modal { padding: 14px !important; font-size: 12px !important; max-height: 80vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  body #skillup-consent-modal > div { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  body #skillup-consent-modal h2 { font-size: 15px !important; line-height: 1.3 !important; }
  body #skillup-consent-modal .cc-message { flex: 1 1 100% !important; min-width: 0 !important; }
  body #skillup-consent-modal fieldset > div { flex-direction: column !important; gap: 8px !important; }
  /* юр-текст уведомления со своим скроллом, иначе кнопки уезжают за фолд (на 320×568 не было видно ни одной) */
  body #skillup-consent-modal #cookie-banner-message > div:first-of-type { max-height: 22vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  /* блок кнопок прилипает к низу модалки и виден без скролла */
  body #skillup-consent-modal .cc-compliance,
  body #skillup-consent-modal .cli-bar-btn_container { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; flex: 1 1 100% !important; position: sticky !important; bottom: -14px !important; background: #0e0e0e !important; padding: 8px 0 12px !important; box-shadow: 0 -12px 16px rgba(14,14,14,0.92) !important; }
  body #skillup-consent-modal .cc-compliance > button, body #skillup-consent-modal .cc-compliance > a,
  body #skillup-consent-modal .cli-bar-btn_container > button, body #skillup-consent-modal .cli-bar-btn_container > a { width: 100% !important; text-align: center !important; padding: 12px 8px !important; font-size: 11px !important; box-sizing: border-box !important; }
  body #welcome-modal-wrap, body #welcome-consent-modal { padding: 12px !important; }
  body #welcome-consent { max-width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
}
/* ── 29b. Телефон: компактнее (занимал 62% экрана), все 5 кнопок и 4 категории остаются ── */
@media (max-width: 640px) {
  body #skillup-consent-modal { padding: 10px 12px 12px !important; font-size: 11px !important; line-height: 1.4 !important; max-height: 55vh !important; } /* 72vh → 55vh: на 390×844 баннер занимал 61 % экрана (аудит 12.09.2026) */
  body #skillup-consent-modal h2 { font-size: 13px !important; margin: 0 0 4px !important; }
  body #skillup-consent-modal .cc-message { font-size: 11px !important; line-height: 1.4 !important; }
  body #skillup-consent-modal fieldset { margin-top: 6px !important; }
  body #skillup-consent-modal fieldset > div { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px 8px !important; }
  body #skillup-consent-modal label { font-size: 10.5px !important; }
  body #skillup-consent-modal .cc-compliance,
  body #skillup-consent-modal .cli-bar-btn_container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin-top: 8px !important; }
  /* `> button, > a` вместо `> *`: правило страницы (#skillup-consent-modal .cc-compliance > button)
     имеет ту же специфичность, что прежнее `> *`, и лежит ниже по документу — компактные размеры
     молча не применялись (аудит 12.09.2026) */
  body #skillup-consent-modal .cc-compliance > button, body #skillup-consent-modal .cc-compliance > a,
  body #skillup-consent-modal .cli-bar-btn_container > button, body #skillup-consent-modal .cli-bar-btn_container > a { width: 100% !important; padding: 9px 6px !important; font-size: 10px !important; letter-spacing: 0.06em !important; }
  /* «Принять все» и «Отклонить все» — в одном ряду, равного размера (равный визуальный вес); «Сохранить выбор» — на всю ширину */
  body #skillup-consent-modal #cookie-accept { order: -2; }
  body #skillup-consent-modal #cookie-reject { order: -1; }
  body #skillup-consent-modal #cookie-save { grid-column: 1 / -1; }
}

/* ── АДАПТИВ / ЭКОНОМИЯ ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .v3f-a { width: 92vmax; height: 92vmax; }
  .v3f-a-warm { display: none; }
  .v3-flow .v3-section::before { left: 0; right: 0; }
  .v3-flow .v3-hero-media::before { display: none; }
}
@media (hover: none) {
  .v3f-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-flow *, .v3-flow *::before, .v3-flow *::after { animation: none !important; }
  .v3f-progress { display: none !important; }
  .js-reveal-ready .v3-flow .reveal { filter: none !important; transform: none !important; }
  /* страховка для бесконечных анимаций вне .v3-flow (баннеры, бегущая строка, спиннеры):
     `animation:none` выше не достаёт до <body> и до узлов без родителя .v3-flow (WCAG 2.2.2) */
  *, *::before, *::after { animation-iteration-count: 1 !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── 30. Бегущая строка: пауза не только по наведению, но и по фокусу с клавиатуры (WCAG 2.2.2) ──
   Было: animation-play-state:paused только на :hover — тач и клавиатура остановить не могли
   (движение 60 с без паузы, аудит 12.09.2026). */
.v3-marquee:focus-within .v3-marquee-track,
.v3-marquee-track:focus-within,
.v3-marquee-track:focus-visible { animation-play-state: paused !important; }

/* ── 31. Видимый фокус — золотой, единым правилом по всему сайту (WCAG 2.4.7) ──
   Было: у 80+ элементов системный синий ring Chrome, а у полей входа outline:none — фокус не виден
   вовсе. :focus-visible не трогает мышь, только клавиатуру (аудит 12.09.2026). */
:focus-visible { outline: 2px solid #BFA060 !important; outline-offset: 2px !important; }
/* У полей ввода outline намеренно БЕЗ !important: страница может рисовать свою рамку
   (login.html: outline:none + золотое кольцо). Кольцо ставим всегда — оно и есть
   видимый фокус там, где страница гасит outline. */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; box-shadow: 0 0 0 3px rgba(191,160,96,0.45) !important; }