/* ============================================================
   PARIVISION — главная, концепция v1 (Этап 1)
   Все значения — из ../../assets/css/tokens.css
   ============================================================ */

/* ---------- Каркас ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main { display: block; }
section { padding-block: var(--section-y); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-mint); }
:focus-visible { outline: 2px solid var(--c-mint); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--c-mint); color: var(--c-black);
  padding: 12px 20px; font-family: var(--ff-nav); text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 28px; white-space: nowrap;
  font-family: var(--ff-nav); font-size: var(--fz-nav); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-primary { background: var(--c-mint); color: var(--c-black); }
/* ховеры с фирменной «рябью» (правка заказчика 05.08.2026): фактура вместо смены цвета */
.btn-primary:hover { background: url("../brand/pattern-tile-tape.svg") 0 -60px / auto 240px var(--c-mint); color: var(--c-black); }
.btn-secondary { border-color: var(--c-mint); color: var(--c-mint); background: transparent; }
.btn-secondary:hover { background: url("../brand/pattern-tile-tape.svg") 0 -60px / auto 240px var(--c-mint); color: var(--c-black); }
.btn-ghost { border-color: var(--c-line-strong); color: var(--c-white); }
.btn-ghost:hover { border-color: var(--c-mint); color: var(--c-mint); }
.btn svg { width: 14px; height: 14px; }

/* ---------- Хедер ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  background: var(--c-black);
  border-bottom: 1px solid var(--c-line);
  transition: transform 280ms var(--ease-out);
}
.header.is-hidden { transform: translateY(-100%); }
.header-in {
  height: 100%; display: flex; align-items: center; gap: var(--sp-8);
}
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--c-white); }
.logo .mark { width: 30px; height: 27px; color: var(--c-mint); }
.logo .word { width: 56px; height: 27px; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); margin-inline: auto; }
.nav > a, .nav-sub > .nav-sub-top {
  font-family: var(--ff-nav); font-size: var(--fz-nav); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--c-white); padding: 8px 2px; position: relative;
}
.nav > a:hover { color: var(--c-mint); }
.nav > a[aria-current="page"] { color: var(--c-mint); }
.nav > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--c-mint);
}
/* подменю TEAMS: сам пункт — ссылка на страницу всех команд, список раскрывается
   по наведению и по фокусу с клавиатуры. Без JS и без <details>: клик не должен
   «съедаться» раскрытием. */
.nav-sub { position: relative; }
.nav-sub-top { display: inline-flex; align-items: center; gap: 6px; }
.nav-sub-top::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast);
}
/* мостик через зазор до выпадашки, иначе наведение рвётся на полпути */
.nav-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav-sub:hover > .nav-sub-top,
.nav-sub:focus-within > .nav-sub-top { color: var(--c-mint); }
.nav-sub:hover > .nav-sub-top::after,
.nav-sub:focus-within > .nav-sub-top::after { transform: rotate(225deg) translateY(3px); }
.nav-sub-list {
  position: absolute; top: calc(100% + 14px); left: 50%;
  min-width: 220px; background: var(--c-black);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  padding: var(--sp-2); display: grid;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out),
              visibility 0s linear var(--t-fast);
}
.nav-sub:hover > .nav-sub-list,
.nav-sub:focus-within > .nav-sub-list {
  opacity: 1; visibility: visible; transform: translateX(-50%);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility 0s;
}
.nav-sub-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius);
  font-family: var(--ff-nav); font-weight: 600; font-size: var(--fz-nav);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
}
.nav-sub-list a:hover { background: var(--c-mint); color: var(--c-black); }
.nav-sub-list .tag { margin-left: auto; }
.header-aside { display: flex; align-items: center; gap: var(--sp-4); }
.lang { display: inline-flex; gap: 2px; font-family: var(--ff-mono); font-size: var(--fz-meta); }
.lang a { padding: 10px 6px; color: var(--c-text-dim); }
.lang [aria-current="true"] { color: var(--c-mint); }
.burger { display: none; }

/* ---------- Hero ---------- */
.hero { padding-block: 0; margin-top: var(--header-h); position: relative; overflow: clip; }
.hero-in { padding-block: clamp(56px, 9vh, 120px) clamp(48px, 7vh, 96px); position: relative; }
.hero .eyebrow { margin-bottom: var(--sp-8); }
.eyebrow {
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  line-height: var(--lh-mono);
  text-transform: uppercase; letter-spacing: var(--ls-mono);
  color: var(--c-mint); display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--c-mint); }
.hero-lettering { width: min(100%, 1180px); color: var(--c-mint); }
.hero-lettering .lp { display: block; width: 100%; height: auto; }
.hero-sub {
  margin: var(--sp-8) 0 0; max-width: 560px;
  color: var(--c-text-dim); font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
}
.hero-sub b { color: var(--c-white); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-12); }
.hero-meta {
  display: flex; gap: var(--sp-8); margin-top: var(--sp-12);
  font-family: var(--ff-mono); font-size: var(--fz-meta);
  text-transform: uppercase; color: var(--c-text-dim);
}
.hero-meta b { color: var(--c-white); font-weight: 500; display: block; }

/* вариант B: леттеринг во всю ширину, сцена игрока перекрывает его правую часть */
.hero-b .hero-in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 0 var(--sp-8); align-items: start;
}
.hero-b .hero-lettering { grid-column: 1 / -1; width: 100%; position: relative; z-index: 0; }
.hero-b .hero-left { grid-column: 1; position: relative; z-index: 1; padding-top: clamp(24px, 4vh, 56px); }
.hero-b .hero-slider {
  grid-column: 2; grid-row: 2; z-index: 2;
  margin-top: clamp(-230px, -14vw, -96px);
  min-height: clamp(400px, 52vh, 600px);
  width: 100%;
}
.hero-b .ticker { grid-column: 1 / -1; }

/* слайдер игроков (hero B, ревизия 04.08.2026): гигантский ник с градиентом мяты
   УХОДИТ ЗА прозрачное фото игрока (мини-версия text-behind-photo из PV-HERO Jame ON AIR) */
.hero-slider { position: relative; min-height: clamp(440px, 58vh, 640px); overflow: hidden; }
.hs-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transform: translateY(12px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  pointer-events: none;
}
.hs-slide.active { opacity: 1; transform: none; pointer-events: auto; }
.hs-word {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-heading); font-weight: 800;
  font-size: clamp(8rem, 40vh, 24rem);
  letter-spacing: -.02em; line-height: .8; white-space: nowrap; text-transform: uppercase;
  background: linear-gradient(180deg, #A5FFF5 0%, var(--c-mint) 52%, #7DF0E3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.hs-slide img {
  position: relative; z-index: 1;
  height: 94%; width: auto; max-width: 72%;
  object-fit: contain; object-position: bottom center;
}
.hs-slide .who {
  position: absolute; left: 0; bottom: var(--sp-2); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-black); background: var(--c-mint); border-radius: var(--radius);
  padding: 9px 12px;
}
.hs-slide .who svg { width: 12px; height: 12px; }
.hs-ui {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--sp-2);
}
.hs-count { font-family: var(--ff-numbers); font-size: 17px; color: var(--c-mint); margin-right: var(--sp-2); letter-spacing: .04em; }
.hs-prev, .hs-next {
  width: 44px; height: 44px; cursor: pointer;
  background: var(--c-black); border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  color: var(--c-white); font-size: 18px; line-height: 1;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.hs-prev:hover, .hs-next:hover { border-color: var(--c-mint); color: var(--c-mint); }

/* ---------- Лента достижений (сигнатура) ---------- */
.tape {
  position: relative;
  background: var(--c-mint);
  color: var(--c-black);
  border-block: 1px solid var(--c-black);
  overflow: hidden; padding-block: 18px;
}
/* Подлинный паттерн из бренд-бука (стр.16): один X-период 218.5pt, вырезан из PDF
   векторно (tools/extract_pattern_tile.py), белый тон-в-тон по мяте, repeat-x.
   opacity: приглушён, чтобы звёзды-разделители и текст ленты читались (правка заказчика 04.08.2026) */
.tape::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* тайл Layer 1 от заказчика (05.08.2026): вписан в ленту ПО ВЫСОТЕ — высота паттерна = высота ленты */
  background-image: url("../brand/pattern-band-tape.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 0;
}
/* 4 копии подряд, сдвиг ровно на одну (−25%) — стык бесшовный, а видимого запаса
   в три копии хватает вплоть до 4K, поэтому лента никогда не «пустеет» между циклами
   (при двух копиях провал начинался с вьюпорта шире одной копии, ~1500px).
   Скорость 1 копия за 40s ≈ 37px/s — как было. */
.tape-track {
  position: relative;
  display: flex; gap: 56px; width: max-content;
  animation: tape-run 40s linear infinite;
}
.tape:hover .tape-track { animation-play-state: paused; }
.tape-item {
  display: inline-flex; align-items: center; gap: 56px;
  font-family: var(--ff-heading); font-weight: 800; font-size: 22px;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.tape-item svg { width: 20px; height: 20px; flex: none; transform: translateY(4px); }
@keyframes tape-run { to { transform: translateX(-25%); } }

/* ---------- Секции: заголовки ---------- */
.sec-head {
  display: flex; align-items: end; justify-content: space-between; gap: var(--sp-6);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sec-head h2 { font-size: var(--fz-h2); color: var(--c-white); }
.sec-head h2 .accent { color: var(--c-mint); }
.sec-head .more {
  font-family: var(--ff-mono); font-size: var(--fz-meta); text-transform: uppercase;
  color: var(--c-mint); white-space: nowrap; padding-bottom: 10px;
  display: inline-flex; align-items: center; gap: 8px;
}
.sec-head .more::after { content: ""; width: .95em; height: .95em; flex: none; background: currentColor; -webkit-mask: var(--arrow-mask); mask: var(--arrow-mask); }

/* ---------- Матчи ---------- */
.matches-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.match-card {
  border: 1px solid var(--c-line); border-radius: var(--radius-card);
  padding: var(--sp-6); display: grid; gap: var(--sp-6);
}
.match-card .row1 { display: flex; align-items: center; gap: 12px; }
.tag {
  font-family: var(--ff-mono); font-weight: 600; font-size: 12px; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 3px; padding: 4px 8px;
  color: var(--c-mint); letter-spacing: var(--ls-mono);
}
.tag-dim { color: var(--c-text-dim); }
.match-card .tourn { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta); letter-spacing: var(--ls-mono); color: var(--c-text-dim); text-transform: uppercase; }
.match-card .vs { font-size: var(--fz-h3); font-family: var(--ff-heading); text-transform: uppercase; line-height: 1; display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.match-card .vs .accent { color: var(--c-mint); }
.match-card .row3 { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.match-card time { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta); letter-spacing: var(--ls-mono); color: var(--c-text-dim); text-transform: uppercase; }
.live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 12px; color: var(--c-mint); text-transform: uppercase;
}
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-mint); animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .25; } }

.results { margin-top: var(--sp-8); border-top: 1px solid var(--c-line); }
.result-row {
  display: grid; grid-template-columns: 72px 1.2fr 1fr auto 130px;
  align-items: center; gap: var(--sp-4);
  padding: 18px 4px; border-bottom: 1px solid var(--c-line);
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-text-dim);
}
.result-row .opp { color: var(--c-white); display: flex; align-items: center; gap: 10px; }
/* рабочие цифры (счёт) — Pangram Compressed EB по съёму PV-HERO; VSNStars остаётся гига-акцентам */
.result-row .score { font-family: var(--ff-heading); font-weight: 800; font-size: 30px; color: var(--c-white); letter-spacing: -.02em; white-space: nowrap; }
.result-row .score.w { color: var(--c-mint); }
.result-row time { text-align: right; }

/* ---------- Команды ---------- */
.teams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.team-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--radius-card);
  padding: var(--sp-8); min-height: 380px;
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--c-black);
  transition: border-color var(--t-fast);
}
.team-card:hover { border-color: var(--c-mint); }
.team-card .icon { width: 44px; height: 44px; color: var(--c-mint); }
.team-card h3 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); }
/* ники по спеке бренд-бука (Star&Kits p3): звезда 70% капса, верх вровень с капсом,
   отступ 0.26 капса; разделение — воздухом, без точек */
.team-card .roster {
  font-family: var(--ff-mono); font-size: 17px; font-weight: 500;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
  display: flex; flex-wrap: wrap; gap: .55em 1.15em; line-height: 1.35;
}
.roster .nick { white-space: nowrap; }
.roster .st {
  display: inline-block; width: .53em; height: .52em;
  vertical-align: .21em; margin-right: .18em;
  color: var(--c-mint);
}
.team-card .cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-nav); font-weight: 600; text-transform: uppercase; font-size: var(--fz-nav); color: var(--c-mint); }
.team-card .cta::after { content: ""; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--arrow-mask); mask: var(--arrow-mask); }
/* фото по высоте карточки, головы не режутся (правка заказчика 04.08.2026) */
.team-card .photo {
  position: absolute; right: -8px; bottom: 0;
  height: 86%; width: auto; max-width: 62%;
  object-fit: contain; object-position: bottom right;
  opacity: .16;
  transform: translateY(8px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  pointer-events: none;
  filter: grayscale(1) contrast(1.05);
}
.team-card:hover .photo { opacity: .9; transform: none; }
/* анонс команды: раздел с галочкой «Скоро» в админке (UF_SOON) */
.team-card .badge {
  position: absolute; top: var(--sp-6); right: var(--sp-6);
  font-family: var(--ff-mono); font-weight: 600; font-size: 12px;
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-black); background: var(--c-mint); border-radius: 3px; padding: 5px 10px;
}
/* без страницы состава карточка не кликается — и не притворяется кликабельной */
.team-card--soon { cursor: default; }
.team-card--soon:hover { border-color: var(--c-line); }
.team-card--soon .roster {
  color: rgba(255, 255, 255, .56); max-width: 26ch;
  font-size: 15px; letter-spacing: var(--ls-mono); line-height: 1.5;
}

/* ---------- Новости ---------- */
.news-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-6); }
.news-feature {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--c-line); aspect-ratio: 16 / 9; display: flex; align-items: end;
}
.news-feature img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter 300ms var(--ease-out), transform 600ms var(--ease-out);
}
.news-feature:hover img { filter: none; transform: scale(1.02); }
.news-feature .body {
  position: relative; padding: var(--sp-8);
  background: linear-gradient(0deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.55) 70%, transparent 100%);
  width: 100%;
}
.news-feature h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); max-width: 22ch; }
.news-list { display: grid; gap: var(--sp-4); align-content: start; }
/* миниатюры — нативные 16:9 под текущие обложки новостей (640×360), без кропа и перезаливки */
.news-item {
  display: grid; grid-template-columns: 148px 1fr; gap: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--radius-card);
  padding: var(--sp-3);
  align-items: center;
  transition: border-color var(--t-fast);
}
.news-item:hover { border-color: var(--c-mint); }
.news-item img { width: 148px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius); filter: grayscale(1); transition: filter 300ms; }
.news-item:hover img { filter: none; }
.news-item .t { padding-right: var(--sp-2); }
.news-item h3 { font-family: var(--ff-nav); font-weight: 600; font-size: 1rem; line-height: 1.25; text-transform: uppercase; }
.news-date { font-family: var(--ff-mono); font-weight: 600; font-size: 12px; letter-spacing: var(--ls-mono); color: var(--c-text-dim); text-transform: uppercase; display: block; margin-bottom: 6px; }
.news-feature .news-date { color: var(--c-mint); }

/* ---------- Партнёры ---------- */
.partners { border-top: 1px solid var(--c-line); }
.partners-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; }
/* леттеринг PARI — только SVG (как PARIVISION/VSN), не текстом */
.partner-logo { width: clamp(140px, 16vw, 210px); height: auto; aspect-ratio: 116 / 26; color: var(--c-white); }
.partners .note { font-family: var(--ff-mono); font-size: var(--fz-meta); color: var(--c-text-dim); text-transform: uppercase; max-width: 300px; }

/* ---------- Футер ---------- */
.footer { background: var(--c-mint); color: var(--c-black); padding-block: var(--sp-16) 0; }
.footer a:hover { color: var(--c-black); opacity: .64; }
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8);
  padding-bottom: var(--sp-12);
}
.footer h4 { font-family: var(--ff-heading); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; margin: 0 0 var(--sp-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer li, .footer p { font-family: var(--ff-mono); font-size: var(--fz-meta); text-transform: uppercase; }
.footer .soc-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.footer .soc-row .n { opacity: .55; }
.footer-btm {
  border-top: 1px solid var(--c-black-line);
  padding-block: var(--sp-4);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase;
}
.footer-lettering { color: var(--c-black); padding-top: var(--sp-8); }
.footer-lettering .lp { display: block; width: 100%; height: auto; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
/* E/F: reveal ведёт GSAP (anim-gsap.js) — CSS-переход отключается, состояние ставит gsap.set */
html.gsap .reveal { transition: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .tape-track { animation: none; }
}

/* ---------- Мобильное меню ----------
   Правки 05.08.2026: оверлей ПОД хедером (лого и бургер остаются на месте,
   ничего не прыгает), открытие анимировано, бургер превращается в крестик. */
.mnav {
  position: fixed; inset: 0; z-index: 90;
  background: var(--c-black); display: flex; flex-direction: column;
  padding: calc(var(--header-h-mobile) + var(--sp-6)) var(--gutter) var(--sp-8);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 320ms;
}
.mnav.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s;
}
.mnav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* пункты въезжают лесенкой (один reveal-паттерн проекта) */
.mnav-list > li, .mnav-foot {
  opacity: 0; transform: translateY(16px);
  transition: opacity 300ms var(--ease-out), transform 380ms var(--ease-out);
}
.mnav.open .mnav-list > li, .mnav.open .mnav-foot { opacity: 1; transform: none; }
.mnav.open .mnav-list > li:nth-child(1) { transition-delay: 80ms; }
.mnav.open .mnav-list > li:nth-child(2) { transition-delay: 130ms; }
.mnav.open .mnav-list > li:nth-child(3) { transition-delay: 180ms; }
.mnav.open .mnav-list > li:nth-child(4) { transition-delay: 230ms; }
.mnav.open .mnav-list > li:nth-child(5) { transition-delay: 280ms; }
.mnav.open .mnav-list > li:nth-child(6) { transition-delay: 330ms; }
.mnav.open .mnav-list > li:nth-child(7) { transition-delay: 380ms; }
.mnav.open .mnav-foot { transition-delay: 420ms; }
.mnav-list a {
  display: block; padding: 12px 0;
  font-family: var(--ff-heading); font-weight: 800; font-size: clamp(2rem, 8vw, 2.6rem);
  text-transform: uppercase; line-height: 1;
}
.mnav-list .sub { margin-top: 0; }
.mnav-list .sub a { font-family: var(--ff-nav); font-weight: 600; font-size: 1.05rem; padding: 10px 0 10px var(--sp-6); color: var(--c-text-dim); }
.mnav-list .sub a:hover { color: var(--c-mint); }
.mnav-foot { margin-top: auto; padding-top: var(--sp-12); display: grid; gap: var(--sp-4); }
.mnav-foot .soc { display: flex; gap: var(--sp-4); font-family: var(--ff-mono); font-size: var(--fz-meta); text-transform: uppercase; color: var(--c-text-dim); flex-wrap: wrap; }

/* ---------- Адаптив ---------- */
@media (max-width: 1023px) {
  .nav, .header-aside .lang, .header-aside .btn { display: none; }
  /* кнопка меню — в правом верхнем углу (правка заказчика 05.08.2026) */
  .header-aside { margin-left: auto; }
  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
    color: var(--c-white); cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
  }
  .burger:hover, .burger.is-open { border-color: var(--c-mint); color: var(--c-mint); }
  /* бургер → крестик */
  .burger-box { position: relative; display: block; width: 20px; height: 14px; }
  .burger-box i {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; border-radius: 1px;
    transition: transform 320ms var(--ease-out), opacity 160ms linear;
  }
  .burger-box i:nth-child(1) { top: 0; }
  .burger-box i:nth-child(2) { top: 6px; }
  .burger-box i:nth-child(3) { top: 12px; }
  .burger.is-open .burger-box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger.is-open .burger-box i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
  .burger.is-open .burger-box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .header { height: var(--header-h-mobile); }
  .hero { margin-top: var(--header-h-mobile); }
  .hero-b .hero-in { grid-template-columns: 1fr; }
  .hero-b .hero-slider { grid-column: 1; grid-row: auto; margin-top: var(--sp-6); min-height: clamp(360px, 52vh, 480px); }
  .hero-photo { max-width: 420px; }
  .matches-grid { grid-template-columns: 1fr; }
  .teams-grid { grid-template-columns: 1fr; }
  .team-card { min-height: 0; }
  .team-card .photo { width: 40%; right: -12px; }
  .news-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .result-row { grid-template-columns: 56px 1fr auto; row-gap: 4px; }
  .result-row .tourn, .result-row time { display: none; }
}
@media (max-width: 599px) {
  .tape-item { font-size: 17px; gap: 36px; }
  .tape-track { gap: 36px; }
  .hero-meta { flex-wrap: wrap; gap: var(--sp-4); }
  .news-item { grid-template-columns: 112px 1fr; }
  .news-item img { width: 112px; }
}

/* ============================================================
   Приёмы из Figma PV-HERO 1.0 (съём 04.08.2026, FIGMA_PV_HERO.md §5/§7)
   ============================================================ */

/* зерно (noise) из PV-HERO: ОТКЛОНЕНО заказчиком для сайта 04.08.2026 — приём остаётся только в SMM */
.hero > .container { position: relative; z-index: 1; }

/* --- упрощённый фон (вариант Г): одна мягкая диагональ вместо двух панелей --- */
.panels-soft::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 56%, var(--c-black-2) 56% 88%, transparent 88%);
}

/* --- black-on-black: диагональные панели BLACK 2 на BLACK 1 --- */
.panels::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 44%, var(--c-black-2) 44% 74%, transparent 74%),
    linear-gradient(115deg, transparent 82%, var(--c-black-2) 82% 94%, transparent 94%);
}

/* --- макро-кроп: знак/звезда, обрезанные краем секции --- */
.star-crop {
  position: absolute; z-index: 0; pointer-events: none;
  color: var(--c-mint); height: 128%; aspect-ratio: 441 / 428;
  top: -16%; right: -13%;
}
.star-crop.ghost { color: var(--c-black-2); }

/* --- тикер-бар: PARI · слоган · разделитель · мета (низ hero/карточек) --- */
.ticker {
  display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px);
  border-top: 1px solid var(--c-line);
  margin-top: clamp(48px, 7vh, 88px);
  padding-top: var(--sp-4);
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-text-dim);
}
.ticker .pari { width: 88px; height: 20px; flex: none; color: var(--c-white); }
.ticker .sep { width: 2px; align-self: stretch; background: var(--c-mint); flex: none; }
.ticker .cell b { display: block; color: var(--c-white); font-weight: 600; }
.ticker .cell.right { margin-left: auto; text-align: right; }
.ticker .cell.right b { color: var(--c-mint); }

/* --- плейсхолдер соперника: буква вместо лого (библиотека Teams PV-HERO) --- */
.opp-ph {
  display: inline-grid; place-items: center; flex: none;
  width: 1.6em; height: 1.6em;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  font-family: var(--ff-heading); font-weight: 800; font-size: .72em;
  letter-spacing: 0; color: var(--c-white); font-style: normal;
}
.result-row .opp-ph { font-size: 15px; width: 34px; height: 34px; }
/* реальные лого соперников (с parivision.gg) — моно-режим белым силуэтом,
   как в библиотеке PV-HERO «Teams - 2 colors» */
.opp-logo { width: 34px; height: 34px; object-fit: contain; flex: none; filter: brightness(0) invert(1); }
.match-card .opp-logo { width: 40px; height: 40px; }
/* знаки дисциплин (SVG от заказчика) — ЕДИНЫЙ бокс и центровка во всех вариантах */
.game-mark {
  width: 46px; height: 18px; flex: none;
  object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1); opacity: .92;
}
.game-mark.dim { opacity: .6; }
/* E: в полосах ростеров знаки крупнее, одной высоты (визуально равные) */
.roster-line .game-mark { justify-self: start; width: 56px; height: 32px; }

/* --- звёздочка-терминатор заголовков ---
   position:absolute со auto-офсетами: остаётся на своём месте в строке, но
   выпадает из строчного потока — значит НЕ растягивает межстрочное у той строки,
   где стоит (правка заказчика 05.08.2026: «межстрочное из-за звёздочки разное»). */
h1 .term, h2 .term {
  position: absolute;
  width: .44em; height: .43em;
  margin-left: .14em; margin-top: .1em;
  color: var(--c-mint);
}
.invert-cta h2 .term { color: var(--c-black); }

/* ============================================================
   HERO C — «Matchday poster» (ДНК: Live_1/Live_3 + P5-лесенка)
   ============================================================ */
.hero-c { position: relative; }
.hero-c .hero-in { position: relative; z-index: 1; padding-block: clamp(56px, 9vh, 110px) clamp(28px, 4vh, 48px); }
.hero-c h1 {
  font-size: clamp(3.4rem, 1rem + 12.5vw, 11.5rem);
  color: var(--c-mint);
  display: grid; width: max-content; max-width: 100%;
}
.hero-c h1 span { display: block; }
.hero-c h1 .l2 { margin-left: .55em; }
.hero-c h1 .l3 { margin-left: 1.1em; white-space: nowrap; }
.hero-c .vsline {
  margin-top: clamp(28px, 4vh, 48px);
  font-family: var(--ff-mono); font-weight: 600;
  font-size: clamp(1rem, .9rem + .9vw, 1.6rem);
  line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-white);
}
.hero-c .vsline .dim { color: var(--c-text-dim); display: block; font-size: .72em; }
.hero-c .hero-cta { margin-top: var(--sp-8); position: relative; }

/* ============================================================
   HERO D — «Gameday editorial» (ДНК: Gameday_1 + Jame ON AIR)
   ============================================================ */
.hero-d { position: relative; }
.hero-d .hd-stage {
  position: relative; z-index: 1;
  min-height: clamp(420px, 66vh, 720px);
  display: grid; place-items: end center;
}
/* гигантское слово ЗА фотографией, вертикальный градиент мяты (приём text-behind-photo) */
.hero-d .hd-word {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(5rem, 23vw, 21rem); line-height: .8; white-space: nowrap;
  text-transform: none; /* фирменный строчной набор Compressed EB («Gameday», PV-HERO) */
  background: linear-gradient(180deg, #A5FFF5 0%, var(--c-mint) 52%, #7DF0E3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.hero-d .hd-word .term { vertical-align: 1.1em; }
.hero-d .hd-photo {
  position: relative; z-index: 1;
  width: clamp(240px, 34vw, 430px); height: 100%;
  object-fit: cover; object-position: top center;
  filter: grayscale(.15) contrast(1.04);
}
.hero-d .hd-foot {
  position: relative; z-index: 2;
  display: flex; align-items: end; justify-content: space-between; gap: var(--sp-6);
  padding-block: var(--sp-6) 0; flex-wrap: wrap;
}
.hero-d .vsline {
  font-family: var(--ff-mono); font-weight: 600;
  font-size: clamp(.95rem, .85rem + .6vw, 1.3rem);
  line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase;
}
.hero-d .vsline .dim { color: var(--c-text-dim); display: block; font-size: .78em; }
.vsline .st { display: inline-block; width: .62em; height: .61em; margin-right: .22em; color: var(--c-mint); }
.hero-d .ticker { margin-top: var(--sp-6); }

/* ============================================================
   Инверсная мятная секция с муаром (C) — ДНК YT-баннера
   ============================================================ */
.invert-cta {
  position: relative; overflow: clip;
  background: var(--c-mint); color: var(--c-black);
  border-block: 1px solid var(--c-black);
  padding-block: 0;
}
.invert-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../brand/pattern-band-tape.svg");
  background-repeat: repeat; background-size: auto 320px; background-position: 0 0;
}
.invert-in {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8); flex-wrap: wrap;
  padding-block: clamp(56px, 8vw, 104px);
}
.invert-in h2 { font-size: clamp(2rem, 1.2rem + 3.8vw, 4.4rem); }
.invert-in .note { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta); letter-spacing: var(--ls-mono); line-height: var(--lh-mono); text-transform: uppercase; max-width: 320px; }
.btn-invert { background: var(--c-black); color: var(--c-mint); border-color: var(--c-black); }
.btn-invert:hover { background: url("../brand/pattern-tile-mint.svg") 0 -60px / auto 240px var(--c-black); color: var(--c-mint); border-color: var(--c-black); }

/* модификатор C (правка заказчика 05.08.2026): фэшн-фото Brûler фоном, ч/б + зерно */
.invert-cta.has-photo { background: var(--c-black); color: var(--c-white); border-block-color: var(--c-line); }
.invert-cta.has-photo .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 78%: уровень джерси с надписью PARIVISION (правка заказчика 05.08.2026) */
  object-fit: cover; object-position: center 78%;
  filter: grayscale(1) contrast(1.05) brightness(.6);
}
/* v2_a: кадр на уровне плеч/груди (подобрано по рендеру на 1440 и 1920) */
.invert-cta.has-photo .bg.bg-chest { object-position: center 35%; }
.invert-cta.has-photo::before {
  background: url("../brand/noise.png") repeat 0 0 / 96px 96px;
  mix-blend-mode: overlay; opacity: .68; z-index: 1;
}
.invert-cta.has-photo .invert-in { z-index: 2; }
.invert-cta.has-photo h2 .term { color: var(--c-mint); }
.invert-cta.has-photo .note { color: var(--c-text-dim); }
.invert-cta.has-photo .btn-invert { background: var(--c-mint); color: var(--c-black); border-color: var(--c-mint); }
.invert-cta.has-photo .btn-invert:hover { background: url("../brand/pattern-tile-tape.svg") 0 -60px / auto 240px var(--c-mint); color: var(--c-black); }

/* ============================================================
   ФИНАЛ: блок мерча — полоса с фото джерси (кроп по плечам/груди),
   контент как во фэшн-блоке: искры → заголовок → дроп → кнопка, слева.
   Требования заказчика 10.08.2026 (скрин 1 = фон/высота, скрин 2 = наполнение).
   ============================================================ */
.drop {
  position: relative; overflow: clip; padding-block: 0;
  background: var(--c-black); border-block: 1px solid var(--c-line);
}
.drop .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  filter: grayscale(1) contrast(1.05) brightness(.6);
}
.drop::before {                    /* плёночное зерно — единый фото-стиль страницы */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../brand/noise.png") repeat 0 0 / 96px 96px;
  mix-blend-mode: overlay; opacity: .5;
}
.drop-in {
  position: relative; z-index: 2;
  min-height: clamp(360px, 32vw, 470px);
  display: grid; align-content: center; justify-items: start; gap: var(--sp-4);
  padding-block: clamp(48px, 6vw, 80px);
}
.drop .sparks { width: clamp(46px, 4.6vw, 66px); aspect-ratio: 392 / 485; color: var(--c-mint); }
.drop h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.1rem); color: var(--c-white); }
.drop .note {
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  letter-spacing: var(--ls-mono); line-height: var(--lh-mono);
  text-transform: uppercase; color: var(--c-text-dim); margin: 0;
}
.drop .btn { margin-top: var(--sp-2); }

/* ============================================================
   Fashion-полоса SHOP (D) — ДНК Thumb/Story: искры + editorial
   ============================================================ */
.shop-tease {
  position: relative; overflow: clip;
  background: var(--c-black);
  border-block: 1px solid var(--c-line);
}
.shop-tease .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  opacity: .55; filter: grayscale(1) brightness(.75);
}
.shop-tease .bg.bg-face { object-position: center 14%; opacity: .6; }
/* v2_f: фигура поднята — голова в верхней части блока (подобрано по рендеру 1440/1920) */
.shop-tease .bg.bg-up { object-position: center 42%; }
/* D: контент слева, модель в кадре справа-по-центру */
.shop-tease.shop-left .shop-in { justify-items: start; text-align: left; }
/* зерно поверх фото shop-полосы (единый фото-стиль с C/G) */
.shop-tease::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../brand/noise.png") repeat 0 0 / 96px 96px;
  mix-blend-mode: overlay; opacity: .68;
}
.shop-in {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: var(--sp-6);
  text-align: center; padding-block: clamp(72px, 11vw, 140px);
}
.shop-in .sparks { width: clamp(56px, 7vw, 88px); aspect-ratio: 392 / 485; color: var(--c-mint); }
.shop-in h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.8rem); color: var(--c-white); }
.shop-in .note { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta); letter-spacing: var(--ls-mono); line-height: var(--lh-mono); text-transform: uppercase; color: var(--c-text-dim); }

/* ============================================================
   HERO E — «Broadcast» (ДНК Result_1/Stats_1: результат-афиша)
   ============================================================ */
/* фирменный диагональный орнамент бренда фоном hero (правка заказчика 05.08.2026) */
.hero-e::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../brand/pattern-tile-tape.svg");
  background-repeat: repeat; background-size: auto 418px; background-position: 0 -128px;
  opacity: .09;
}
.hero-e .hero-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: var(--sp-12); align-items: center;
  padding-block: clamp(48px, 7vh, 96px) clamp(28px, 4vh, 48px);
}
.hero-e .result-meta {
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-mint); margin: 0 0 var(--sp-6);
}
.hero-e h1 { font-size: clamp(3.6rem, 1rem + 11vw, 10rem); color: var(--c-mint); }
.hero-e .scoreline {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px);
  margin-top: var(--sp-8);
}
.hero-e .scoreline .mark { width: clamp(40px, 4vw, 64px); aspect-ratio: 510 / 457; color: var(--c-white); flex: none; }
.hero-e .scoreline .opp-logo { width: clamp(44px, 4.4vw, 68px); height: auto; aspect-ratio: 1; }
.hero-e .scoreline .score {
  font-family: var(--ff-heading); font-weight: 800;
  font-size: clamp(3rem, 2rem + 5vw, 7rem); letter-spacing: -.02em; line-height: 1;
}
.hero-e .scoreline .score .w { color: var(--c-mint); }
.hero-e .score-note {
  margin-top: var(--sp-4);
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  letter-spacing: var(--ls-mono); line-height: var(--lh-mono);
  text-transform: uppercase; color: var(--c-text-dim);
}
.hero-e .hero-cta { margin-top: var(--sp-8); }
.hero-e .hero-photo-e {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  background: var(--grad-player); aspect-ratio: 4 / 3; align-self: stretch;
}
/* фирменный диагональный орнамент (тёмный) на градиент-подложке — как карточки игроков PV-HERO */
.hero-e .hero-photo-e::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("../brand/pattern-tile-dark.svg");
  background-repeat: repeat; background-size: auto 418px;
  background-position: 0 -60px;
}
.hero-e .hero-photo-e img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-e .hero-photo-e .cap {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4); z-index: 2;
  font-family: var(--ff-mono); font-weight: 600; font-size: 12px;
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  background: var(--c-black); color: var(--c-mint);
  padding: 8px 12px; border-radius: var(--radius);
}

/* ростеры полосами (ДНК Draft Stage: лейбл→значение) */
.rosters-lines { border-top: 1px solid var(--c-line); }
.roster-line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-6);
  padding-block: clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--c-line);
  transition: border-color var(--t-fast);
}
.roster-line:hover { border-color: var(--c-mint); }
.roster-line .name {
  font-family: var(--ff-heading); font-weight: 800;
  font-size: clamp(1.9rem, 1rem + 3.4vw, 4rem);
  letter-spacing: var(--ls-display); line-height: var(--lh-heading);
  text-transform: uppercase; color: var(--c-white);
  transition: color var(--t-fast);
}
.roster-line:hover .name { color: var(--c-mint); }
.roster-line .who-line {
  grid-column: 2; font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  letter-spacing: var(--ls-mono); line-height: var(--lh-mono);
  text-transform: uppercase; color: var(--c-text-dim); margin-top: 6px;
}
.roster-line .go {
  grid-row: 1 / span 2; grid-column: 3;
  font-family: var(--ff-nav); font-weight: 600; font-size: var(--fz-nav);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-mint);
  white-space: nowrap;
}
.roster-line .go::after { content: " →"; }

/* стат-полоса: лейбл→значение (факты) */
.facts { border-block: 1px solid var(--c-line); background: var(--c-black-2); padding-block: 0; }
.facts-in {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8);
  padding-block: clamp(36px, 5vw, 64px);
}
.fact .k {
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  letter-spacing: var(--ls-mono); line-height: var(--lh-mono);
  text-transform: uppercase; color: var(--c-text-dim); display: block; margin-bottom: 10px;
}
.fact .v {
  font-family: var(--ff-heading); font-weight: 800;
  font-size: clamp(1.7rem, 1rem + 2.4vw, 3rem);
  letter-spacing: var(--ls-display); line-height: .95;
  text-transform: uppercase; color: var(--c-white);
}
.fact .v.accent { color: var(--c-mint); }

/* ============================================================
   HERO F — «Zine» (инверсия: чёрный знак на мятном муаре, ДНК P3/YT)
   ============================================================ */
.hero-f { background: var(--c-mint); color: var(--c-black); border-bottom: 1px solid var(--c-black); }
/* фон как YT_CS-баннер: ровно 6 рядов тайла Layer 1 в hero (правка заказчика 05.08.2026) */
.hero-f::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../brand/pattern-band-tape.svg");
  background-repeat: repeat; background-size: auto calc(100% / 6); background-position: 0 0;
}
.hero-f .hero-in { position: relative; z-index: 1; padding-block: clamp(56px, 9vh, 110px) clamp(28px, 4vh, 48px); }
.hero-f .hero-lettering { color: var(--c-black); }
.hero-f .hero-sub { color: rgba(11, 11, 11, .78); }
.hero-f .hero-sub b { color: var(--c-black); }
.hero-f .btn-on-mint { border-color: var(--c-black); color: var(--c-black); background: transparent; }
.hero-f .btn-on-mint:hover { background: url("../brand/pattern-tile-mint.svg") 0 -60px / auto 240px var(--c-black); color: var(--c-mint); }
.hero-f .ticker { border-top-color: var(--c-black-line); color: rgba(11, 11, 11, .64); }
.hero-f .ticker .pari { color: var(--c-black); }
.hero-f .ticker .sep { background: var(--c-black); }
.hero-f .ticker .cell b { color: var(--c-black); }
.hero-f .ticker .cell.right b { color: var(--c-black); }

/* инверсная лента достижений (чёрная) */
.tape-dark { background: var(--c-black); color: var(--c-mint); border-block: 1px solid var(--c-black); }
/* F: чёрная лента ЧИСТАЯ, без паттерна (правка заказчика 05.08.2026) */
.tape-dark::before { background: none; }

/* манифест-полоса поверх фото (F) — фраза из PV-HERO Live_3 */
.moment { position: relative; overflow: clip; border-bottom: 1px solid var(--c-line); }
.moment .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 60%: люди (тренер с поднятыми руками) в кадре и на 1440, и на широких экранах */
  object-fit: cover; object-position: center 60%;
  opacity: .6; filter: grayscale(1) brightness(.76) contrast(1.05);
  /* кадр сдвинут правее, чтобы заголовок не перекрывал кричащего игрока
     (правка заказчика 05.08.2026); левая кромка растворена, чтобы стык не читался */
  left: 13%; right: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%);
}
.moment::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 11, .78) 0%, rgba(11, 11, 11, .18) 55%, rgba(11, 11, 11, .5) 100%);
}
.moment .container { position: relative; z-index: 1; padding-block: clamp(100px, 13vw, 200px); }
.moment h2 {
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6rem);
  color: var(--c-white); max-width: 13ch;
}
.moment h2 .accent { color: var(--c-mint); }

/* гига-цифры VSNStars (не используются после правки 05.08, класс оставлен) */
.digits { position: relative; overflow: clip; border-bottom: 1px solid var(--c-line); }
.digits .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  opacity: .38; filter: grayscale(1) brightness(.72);
}
.digits .container { position: relative; }
.digits-in {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8);
  padding-block: clamp(40px, 6vw, 80px); text-align: center;
}
.digit .n {
  font-family: var(--ff-numbers); font-weight: 400;
  font-size: clamp(4rem, 2rem + 9vw, 9.5rem); line-height: .88;
  color: var(--c-mint); display: block;
}
.digit .k {
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  letter-spacing: var(--ls-mono); line-height: var(--lh-mono);
  text-transform: uppercase; color: var(--c-text-dim); display: block; margin-top: 12px;
}

/* мятная полоса ростеров (F): чёрные карточки на мяте */
.teams-invert { background: var(--c-mint); color: var(--c-black); border-block: 1px solid var(--c-black); position: relative; overflow: clip; }
.teams-invert::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../brand/pattern-band-tape.svg");
  background-repeat: repeat; background-size: auto 320px; background-position: 0 0;
}
/* v2_f: ровно 6 рядов паттерна в секции ростеров */
.teams-invert.rows-6::before { background-size: auto calc(100% / 6); }
.teams-invert .container { position: relative; }
.teams-invert .sec-head h2 { color: var(--c-black); }
.teams-invert .sec-head h2 .accent { color: var(--c-black); -webkit-text-stroke: 0; opacity: .55; }
.teams-invert .sec-head h2 .term { color: var(--c-black); }
.teams-invert .sec-head .more { color: var(--c-black); }
.teams-invert .team-card { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.teams-invert .team-card:hover { border-color: var(--c-white); }
.teams-invert .team-card h3 { color: var(--c-white); }

/* сетка новостей-«постов» (F): квадратные карточки SMM-грида */
.news-posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.news-post {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--radius-card);
  display: flex; align-items: end;
}
.news-post img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter 300ms var(--ease-out), transform 600ms var(--ease-out);
}
.news-post:hover img { filter: none; transform: scale(1.03); }
.news-post .body {
  position: relative; width: 100%; padding: var(--sp-4);
  background: linear-gradient(0deg, rgba(11, 11, 11, .94) 0%, rgba(11, 11, 11, .5) 72%, transparent 100%);
}
.news-post h3 { font-family: var(--ff-nav); font-weight: 600; font-size: .95rem; line-height: 1.25; text-transform: uppercase; }
.news-post .news-date { margin-bottom: 4px; }

/* ============================================================
   HERO Г — «Squad»: 2–3 игрока крупно ПОВЕРХ леттеринга, состав и «лид»
   меняются при каждой загрузке (JS). Комменты заказчика 05.08.2026.
   ============================================================ */
.hero-squad .hero-in {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding-block: clamp(32px, 5vh, 64px) clamp(20px, 3vh, 36px);
}
.hero-squad .hero-lettering { position: relative; z-index: 0; width: 100%; }

/* группа «кучей»: двое в ряд, третий приподнят между ними и позади (правка заказчика).
   Подписи — отдельным рядом под группой: внутри фигур они наезжали друг на друга,
   потому что фото стоят с перекрытием. */
.squad {
  position: relative; z-index: 1;
  /* наезд на нижнюю часть леттеринга */
  margin-top: clamp(-190px, -11vw, -64px);
}
.squad-stage { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.squad-fig {
  margin: 0;                 /* сброс дефолтных отступов <figure> (1em/40px) — иначе фото сжимаются */
  flex: 0 0 auto; position: relative; min-width: 0;
}
.squad-names {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-3) clamp(20px, 3.4vw, 56px);
}

/* --- РАСКЛАДКИ (модификаторы на .hero-squad, --sq-cols ставит JS по числу фигур) --- */
/* 1) spread — врастяжку по всей ширине, подпись ровно под своим игроком (вариант с теста) */
.sq-spread .squad-stage,
.sq-spread .squad-names { display: grid; grid-template-columns: repeat(var(--sq-cols, 3), 1fr); }
.sq-spread .squad-stage { align-items: end; }
.sq-spread .squad-fig { justify-self: center; }
.sq-spread .squad-cap { justify-self: start; }

/* 2) right — трое плотно в правой части, все на одном уровне */
.sq-right .squad-stage { justify-content: flex-end; }
.sq-right .squad-names { justify-content: flex-end; }
.sq-right .squad-fig + .squad-fig { margin-left: clamp(-170px, -10.5vw, -56px); }

/* 3) center — плотная группа по центру */
.sq-center .squad-fig + .squad-fig { margin-left: clamp(-150px, -9vw, -48px); }

/* --- РАЗМЕР фигур: --sq-h задаёт базовую высоту, --sq-scale уравнивает игроков --- */
.hero-squad { --sq-h: clamp(230px, 33vw, 430px); }
.hero-squad.sq-lg { --sq-h: clamp(270px, 40vw, 530px); }
.hero-squad.sq-xl { --sq-h: clamp(300px, 46vw, 620px); }

/* --- ЛЕТТЕРИНГ: во всю ширину (по умолчанию) или уже, со сдвигом влево --- */
.hero-squad.lt-left .hero-lettering { width: 76%; }
/* --sq-scale выравнивает РЕАЛЬНЫЙ размер фигур: исходники сняты с разным кропом,
   коэффициенты посчитаны по ширине плеч (правка заказчика 05.08.2026) */
.squad-fig img {
  height: calc(var(--sq-h) * var(--sq-scale, 1));
  width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom center;
  display: block;
  /* исходники обрезаны по поясу — растворяем жёсткий край в чёрный */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* стильная подпись: мятная линия + ✶НИК + роль моно-шрифтом */
.squad-cap { border-left: 2px solid var(--c-mint); padding-left: 12px; }
.squad-cap .nick {
  display: flex; align-items: center; gap: .18em;
  font-family: var(--ff-heading); font-weight: 800;
  font-size: clamp(1.15rem, .9rem + 1vw, 2rem);
  line-height: .95; letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--c-white); white-space: nowrap;
}
.squad-cap .nick .st { width: .5em; height: .49em; flex: none; color: var(--c-mint); }
.squad-cap .role {
  display: block; margin-top: 5px;
  font-family: var(--ff-mono); font-weight: 600; font-size: 12px;
  line-height: var(--lh-mono); letter-spacing: var(--ls-mono);
  text-transform: uppercase; color: var(--c-text-dim); white-space: nowrap;
}

/* подпись + CTA одной строкой — чтобы кнопки остались на первом экране */
.hero-squad .hero-copy {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-8); flex-wrap: wrap;
  margin-top: clamp(24px, 4vh, 44px);
}
.hero-squad .hero-sub { margin: 0; max-width: 46ch; }
.hero-squad .hero-cta { margin-top: 0; }
.hero-squad .ticker { margin-top: clamp(24px, 3.5vh, 44px); }

/* ============================================================
   HERO G — «Trophy» (фулблид-фото победы, ДНК Gameday_1: фото + центр-текст)
   ============================================================ */
.hero-g {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: flex-end;
}
.hero-g .hg-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 26%;
  filter: grayscale(1) contrast(1.06) brightness(.84);
}
/* ч/б фото + плёночное зерно «как в тильде» (запрос заказчика 05.08.2026 — точечно, только hero G) */
.hero-g::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../brand/noise.png") repeat 0 0 / 96px 96px;
  mix-blend-mode: overlay; opacity: .68;
}
/* затемнение для читаемости текста и тикера */
.hero-g::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 11, .5) 0%, rgba(11, 11, 11, .12) 42%, rgba(11, 11, 11, .86) 100%);
}
.hero-g .hero-in {
  position: relative; z-index: 2; width: 100%;
  display: grid; justify-items: center; text-align: center;
  padding-block: clamp(120px, 20vh, 220px) clamp(28px, 4vh, 48px);
}
.hero-g .hg-meta {
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-mint); margin: 0 0 var(--sp-6);
}
.hero-g h1 { font-size: clamp(3.4rem, 1rem + 11vw, 10.5rem); color: var(--c-white); }
.hero-g h1 .accent { color: var(--c-mint); }
.hero-g .hg-sub {
  margin: var(--sp-6) 0 0;
  font-family: var(--ff-mono); font-weight: 600; font-size: var(--fz-meta);
  line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-text-dim);
}
.hero-g .hero-cta { margin-top: var(--sp-8); }
.hero-g .ticker { width: 100%; border-top-color: var(--c-line-strong); }

/* ---------- Адаптив новых блоков ---------- */
@media (max-width: 1023px) {
  /* на узких экранах звезда неизбежно пересекает контент → режим black-on-black (ДНК Stats_1) */
  .star-crop { color: var(--c-black-2); height: 80%; top: auto; bottom: -14%; right: -30%; }
  .hero-d .hd-photo { width: min(62vw, 360px); }
  /* слово выше и мельче: читается над плечами, голова перекрывает только середину */
  .hero-d .hd-word { font-size: clamp(4rem, 21vw, 12rem); align-items: flex-start; padding-top: .5em; }
}
@media (max-width: 1023px) {
  .hero-e .hero-in { grid-template-columns: 1fr; }
  .hs-word { font-size: clamp(5.4rem, 24vh, 11rem); }
  .hero-e .hero-photo-e { max-width: 480px; aspect-ratio: 16 / 10; }
  .facts-in { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .news-posts { grid-template-columns: repeat(2, 1fr); }
  .roster-line { grid-template-columns: 64px minmax(0, 1fr); }
  .roster-line .go { display: none; }
}
@media (max-width: 1023px) {
  /* Г: на планшете леттеринг ниже, наезд мягче */
  .squad { margin-top: clamp(-90px, -8vw, -40px); }
}
@media (max-width: 599px) {
  /* на мобиле в кадре 2 игрока (JS) */
  .squad { margin-top: -16px; }
  .hero-squad { --sq-h: clamp(190px, 46vw, 240px); }
  .hero-squad.sq-lg, .hero-squad.sq-xl { --sq-h: clamp(205px, 52vw, 270px); }
  .squad-stage { justify-content: flex-start; }
  .sq-right .squad-stage, .sq-right .squad-names { justify-content: flex-start; }
  .squad-names { justify-content: flex-start; gap: var(--sp-3) var(--sp-6); }
  .hero-squad.lt-left .hero-lettering { width: 100%; }
  .squad-cap .nick { font-size: 1.05rem; }
  .hero-squad .hero-copy { flex-direction: column; align-items: flex-start; }
  /* тикер в hero на мобиле — одна строка: спонсор + слоган.
     «Belgrade / est. 2023» есть в футере, достижения — в бегущей ленте сразу под hero,
     дублировать их стопкой = нагромождение (правка заказчика 05.08.2026) */
  .ticker { gap: var(--sp-4); }
  .ticker .sep { display: none; }
  .hero .ticker .cell:nth-of-type(n+2) { display: none; }
  .ticker .cell.right { margin-left: auto; text-align: right; }
  /* кнопки — ровный ряд во всю ширину, без «висящего» пустого места справа */
  .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .hero-cta .btn { padding-inline: var(--sp-3); }
  .hero-c h1 .l2 { margin-left: .3em; }
  .hero-c h1 .l3 { margin-left: .6em; }
  .invert-in, .hero-d .hd-foot { flex-direction: column; align-items: flex-start; }
  /* МАНИФЕСТ на мобиле: фото на всю плитку, заголовок разнесён по ВЕРХУ и НИЗУ фото —
     игроки остаются в середине незакрытыми (правка заказчика 05.08.2026) */
  .moment {
    display: block;
    /* плитка прижата к соседним секциям: съедаем половину их вертикальных паддингов */
    margin-block: calc(var(--section-y) * -.5);
  }
  .moment .container {
    position: relative; z-index: 1;
    min-height: 84svh;
    display: flex; flex-direction: column; justify-content: space-between;
    padding-block: var(--sp-6);
  }
  .moment h2 { display: contents; }              /* части заголовка = элементы flex-колонки */
  .moment h2 .ln1, .moment h2 .ln2 {
    display: block; max-width: 9ch;
    font-size: clamp(2.5rem, 13.4vw, 4.2rem);
  }
  /* вторая часть — вправо: диагональ обрамляет игроков, как ступенчатый локап слогана.
     padding-right — место под звёздочку: она abspos и иначе срезается краем плитки */
  .moment h2 .ln2 { align-self: flex-end; text-align: right; padding-right: .62em; }
  .moment .bg {
    left: 0; width: 100%; height: 100%;
    /* кадр приближен и смещён к ликующим игрокам — они приходятся на середину плитки */
    object-position: 42% center; transform: scale(1.28);
    opacity: .9; filter: grayscale(1) brightness(1.02) contrast(1.06);
    -webkit-mask-image: none; mask-image: none;
  }
  /* затемняем только верх и низ — под текст; середина с игроками остаётся чистой */
  .moment::after {
    background: linear-gradient(180deg,
      rgba(11, 11, 11, .88) 0%, rgba(11, 11, 11, .5) 24%,
      rgba(11, 11, 11, .06) 42%, rgba(11, 11, 11, .06) 58%,
      rgba(11, 11, 11, .5) 76%, rgba(11, 11, 11, .9) 100%);
  }

  .digits-in { grid-template-columns: 1fr; gap: var(--sp-8); }
  .news-posts { grid-template-columns: 1fr; }
  .facts-in { grid-template-columns: 1fr; }
  .hero-e .scoreline { flex-wrap: wrap; }
}
