/* Вариант 1 — «Showreel». Hero: только логотип по центру поверх шоурила. */

/* ── Hero ──────────────────────────────────────────────────────────── */
.va-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--rd-black);
}
.va-hero__bg {
  position: absolute; inset: -8%;
  background: radial-gradient(120% 140% at 80% 10%, #3D2410 0%, #1C1208 45%, var(--rd-black) 100%);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .va-hero__bg { animation: va-kenburns 16s var(--rd-ease-in-out, ease-in-out) infinite alternate; }
  @keyframes va-kenburns {
    from { scale: 1; }
    to { scale: 1.08; }
  }
}
.va-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.va-hero__video { object-fit: cover; z-index: 0; background: var(--rd-black); }
.va-hero.has-gl .va-hero__video { opacity: 0; }
.va-hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.va-hero__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: 0.08; mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  .va-hero__grain { animation: va-grain 0.7s steps(3) infinite; }
  @keyframes va-grain {
    0% { transform: translate(0,0); } 33% { transform: translate(-3%,2%); } 66% { transform: translate(2%,-3%); } 100% { transform: translate(0,0); }
  }
}
/* Видео поверх заглушки: пока видео нет (display:none по onError) — видна image-slot и градиент */
.va-hero__poster { z-index: 0; }
.va-hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* A11y: центр тоже притемнён — H1 и подзаголовок читаются на любых кадрах */
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(10,9,8,0.32) 0%, rgba(10,9,8,0.62) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.45) 0%, transparent 30%, transparent 65%, rgba(10,9,8,0.7) 100%);
}
.va-hero__badge {
  position: absolute; top: 18px; right: var(--rd-gut); z-index: 3; pointer-events: none;
  font-family: var(--rd-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rd-text-3);
  border: 1px solid var(--rd-line); border-radius: 999px; padding: 5px 10px;
  background: rgba(10, 9, 8, 0.5);
}
.va-hero__logo-wrap {
  position: relative; z-index: 6; pointer-events: none;
  width: min(72vw, 980px);
  translate: 0 var(--para, 0px);
}
.va-hero__logo { width: 100%; height: auto; filter: drop-shadow(0 12px 60px rgba(0,0,0,0.55)); position: relative; z-index: 2; }
/* Круговая инверсия цвета за курсором — сплошной круг (без градиента) */
.va-hero__lens {
  position: absolute; top: 0; left: 0; z-index: 20; pointer-events: none;
  width: 140px; height: 140px; border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0; transition: opacity 260ms var(--rd-ease);
  will-change: transform;
}
.va-hero__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.va-hero__reel {
  display: flex; justify-content: center; margin-top: clamp(24px, 4vh, 44px);
  position: relative; z-index: 5; pointer-events: auto;
}
@media (max-width: 700px) {
  .va-hero__logo-wrap { width: 86vw; }
}

/* ── Hero: вариант с заголовком + CTA (tweak: data-hero="text") ── */
.va-hero__pitch { display: none; }
html[data-hero="text"] .va-hero__logo-wrap { display: none; }
html[data-hero="text"] .va-hero__pitch {
  position: relative; z-index: 6; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: min(92vw, 1100px); padding: 0 16px;
  --para: 0px; transform: translateY(var(--para));
}
.va-hero__h1 {
  font-family: var(--rd-display); font-weight: var(--rd-w-display); text-transform: var(--rd-tt-case);
  font-size: calc(clamp(38px, 6vw, 88px) * var(--rd-scale)); line-height: 0.98; letter-spacing: -0.01em;
  margin: 0; color: #FFFFFF; text-wrap: balance;
}
.va-hero__h1 .rd-accent { color: #FFFFFF; }
/* Крутящееся слово в H1 (сложно/дорого/нельзя) — акцент + резерв ширины по самому широкому. */
.va-hero__h1 .va-hero__rotator { color: var(--rd-accent); display: inline-block; text-align: center; white-space: nowrap; }
/* Мобилка: заголовок стал длиннее (4 слова) — поджимаем кегль и leading, чтобы лид/CTA не уходили вниз. */
@media (max-width: 560px) {
  .va-hero__h1 { font-size: calc(clamp(36px, 11vw, 56px) * var(--rd-scale)); line-height: 0.9; letter-spacing: -0.02em; }
}
.va-hero__sub {
  margin: clamp(20px, 3vh, 32px) 0 0; max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; color: #FFFFFF; text-wrap: pretty;
}
.va-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: clamp(28px, 4vh, 44px); }
html[data-hero="text"] .va-hero__cta .va-hero__reel { margin-top: 0; }
/* Кнопка «Обсудить проект» в hero: белая → оранжевая при наведении */
.va-hero__cta .rd-btn--primary { background: var(--rd-cream); border-color: var(--rd-cream); color: var(--rd-black); }
.va-hero__cta .rd-btn--primary::before { background: var(--rd-accent); }
.va-hero__cta .rd-btn--primary:hover { border-color: var(--rd-accent); color: var(--rd-on-accent); }

/* ── Метрики ───────────────────────────────────────────────────────── */
.va-metrics { background: var(--rd-black-2); border-bottom: 1px solid var(--rd-line); }
.va-metrics__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--rd-line);
  margin-top: clamp(28px, 4vw, 56px);
}
.va-metric {
  padding: clamp(24px, 3vw, 44px) clamp(20px, 2.5vw, 40px);
  border-right: 1px solid var(--rd-line);
  border-top: 1px solid var(--rd-line);
}
.va-metric .num {
  font-family: var(--rd-display); font-weight: var(--rd-w-display);
  font-size: calc(clamp(44px, 5vw, 84px) * var(--rd-scale));
  line-height: 0.95; letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1;
}
.va-metric .acc { color: var(--rd-accent); }
.va-metric .lbl { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--rd-text-2); max-width: 26ch; }
/* Второй уровень — поддерживающие цифры, компактной строкой под главными */
.va-metrics__grid--sub { margin-top: 0; }
.va-metric--sm {
  display: flex; align-items: baseline; gap: clamp(14px, 1.5vw, 22px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.5vw, 40px);
}
.va-metric--sm .num { font-size: calc(clamp(28px, 3vw, 44px) * var(--rd-scale)); color: var(--rd-text-2); flex: 0 0 auto; }
.va-metric--sm .lbl { margin-top: 0; align-self: center; font-size: 13px; max-width: 24ch; }
.va-metrics__note { margin: 28px 0 0; font-size: 12px; color: var(--rd-text-3); max-width: 70ch; }
@media (max-width: 860px) { .va-metrics__grid { grid-template-columns: 1fr; } }

/* ── Услуги — строки с инверсией ───────────────────────────────────── */
.va-service { display: block; border-bottom: 1px solid var(--rd-line); transition: background var(--rd-dur) var(--rd-ease); }
.va-service:last-child { border-bottom: none; }
.va-service__row {
  display: grid; grid-template-columns: 1.2fr 1fr 48px;
  align-items: center; gap: clamp(16px, 3vw, 48px);
  padding-top: clamp(28px, 3.6vw, 52px); padding-bottom: clamp(28px, 3.6vw, 52px);
}
.va-service .num { font-family: var(--rd-mono); font-size: 13px; color: var(--rd-text-3); }
.va-service .ttl {
  font-family: var(--rd-display); font-weight: var(--rd-w-display); text-transform: var(--rd-tt-case);
  font-size: var(--t-h3);
  line-height: 1; transition: transform var(--rd-dur) var(--rd-ease);
}
.va-service .desc { font-size: 15px; line-height: 1.55; color: var(--rd-text-2); max-width: 44ch; }
.va-service .arr { font-size: 26px; color: var(--rd-text-3); transition: transform var(--rd-dur) var(--rd-ease), color var(--rd-dur) var(--rd-ease); }
.va-service:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: -3px; }
.va-service:hover { background: var(--rd-accent); }
.va-service:hover .ttl { transform: translateX(8px); }
.va-service:hover .num, .va-service:hover .ttl, .va-service:hover .desc { color: var(--rd-on-accent); }
.va-service:hover .arr { color: var(--rd-on-accent); transform: translateX(6px); }
@media (max-width: 860px) {
  .va-service__row { grid-template-columns: 1fr 32px; }
  .va-service .desc { display: none; }
}
.va-service__icon { color: var(--rd-accent); display: flex; transition: color var(--rd-dur) var(--rd-ease), transform var(--rd-dur) var(--rd-ease); }
.va-service:hover .va-service__icon { color: var(--rd-on-accent); transform: scale(1.08); }

/* ── Подход ────────────────────────────────────────────────────────── */
.va-approach { background: var(--rd-black-2); border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line); }
.va-approach__statement {
  font-family: var(--rd-display); font-weight: 600; text-transform: var(--rd-tt-case);
  font-size: calc(clamp(24px, 3.2vw, 48px) * var(--rd-scale));
  line-height: 1.12; margin: 24px 0 0; max-width: 30ch; text-wrap: balance;
}
.va-approach__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 6vw, 88px);
}
.va-approach__item .num { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-accent); }
.va-approach__item .ttl { font-family: var(--rd-display); font-weight: 700; text-transform: var(--rd-tt-case); font-size: calc(17px * var(--rd-scale)); margin-top: 14px; line-height: 1.2; }
.va-approach__item .desc { font-size: 16px; line-height: 1.6; color: var(--rd-text-2); margin: 10px 0 0; }
@media (max-width: 960px) { .va-approach__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .va-approach__grid { grid-template-columns: 1fr; } }