/* ==========================================================================
   home.css — главная страница «Старко».

   ПОЧЕМУ ЭТОТ ФАЙЛ САМЫЙ БОЛЬШОЙ. Главная — единственный концепт-выброс:
   у неё светлая шапка при скролле, свой первый экран, десять секций,
   которых больше нигде нет, и своя сетка подвала. Всё остальное общее
   лежит в base.css и здесь НЕ повторяется (см. шапку base.css).

   ПАРТИАЛЫ НЕ ФОРКАЮТСЯ. Шапка, подвал и мобильное меню на главной те же,
   что и везде. Отличие выражается модификатором .is-home: main.tpl ставит
   {$body_class = 'is-home'}, а header.tpl добавляет тот же класс самой
   шапке. Правило, которое должно сработать ТОЛЬКО на главной, пишется с
   префиксом .is-home; классы, которых нет ни на одной другой странице
   (.hero-kicker, .stat, .dual), префикса не требуют — этот файл больше
   нигде не подключается.

   ЧТО ИЗ КОНЦЕПТА СЮДА НЕ ПОПАЛО И ПОЧЕМУ:
     .reveal.visible      — класс появления нормализован к .in (base.css);
     @keyframes marquee   — уже в base.css, у главной он отличался только
                            записью translate3d вместо translateX;
     .footer-logo,
     .mobile-menu-top,
     .mobile-links,
     .mobile-cta          — мёртвые селекторы: партиалы темы выводят
                            .footer-brand и .mobile-nav;
     .btn-light border    — в концепте .btn-light получала белую рамку на
                            белом фоне, то есть невидимую;
     :root{--container}   — брейкпоинт уже в base.css (там 30px полей
                            против 28px в концепте, разницу не тащим);
     .header-link         — шапка темы такой ссылки не выводит;
     светлый подвал и
     мобильный оверлей    — расхождения главной с остальными десятью
                            концептами косметические (оттенок фона, число
                            колонок ссылок, opacity против translateX).
                            Форк партиала ради них дороже расхождения.

   КАРТИНКИ — ТЕГОМ <img>, А НЕ ФОНОМ. В концепте афиша, кадры новостей и
   плитки фотоархива были CSS-фоном одной и той же переменной
   --poster-image. Здесь на их месте настоящие снимки из базы, поэтому
   разметка кладёт <img class="media-cover">, а градиенты остаются на
   ::before. Так у картинки есть alt, loading=lazy и |resize.
   ========================================================================== */

/* ------------------------------------------------------- светлая шапка -- */
/* База: шапка белым по тёмному, при скролле — тёмно-синяя подложка.
   На главной наоборот: при скролле подложка белая, значит и текст, и
   кнопка меню должны потемнеть. До скролла шапка лежит на тёмном герое и
   ведёт себя как везде. */
.is-home .header.scrolled {
	padding: 9px 0;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 8px 30px rgba(4, 29, 61, .08);
	color: var(--navy);
}
.is-home .header.scrolled:after { background: rgba(7, 62, 120, .12); }
.is-home .header.scrolled .nav a { color: var(--navy); }
.is-home .header.scrolled .nav a:hover { color: var(--red); }
.is-home .header.scrolled .menu-btn {
	border-color: rgba(7, 62, 120, .18);
	background: #fff;
	color: var(--blue);
}
.is-home .nav a:hover { color: var(--gold); }

/* --------------------------------------------------------------- секции -- */
.section { padding: 110px 0; }

.section-title {
	margin: 16px 0 24px;
	font-size: clamp(42px, 5vw, 78px);
	line-height: .94;
	letter-spacing: -.055em;
	font-weight: 950;
	text-transform: uppercase;
}
.section-copy { max-width: 760px; font-size: 18px; line-height: 1.7; color: #536176; }

/* Надзаголовок на тёмных секциях: базовый синий на них не читается. */
.concert .eyebrow,
.match-cta .eyebrow { color: #cce6ff; }
.concert .section-copy { color: rgba(255, 255, 255, .72); }

/* Заголовок секции и ссылка «весь раздел» в одной строке. */
.section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 30px;
	margin-bottom: 42px;
}

/* Общий приём для всех карточек с настоящей фотографией: снимок лежит
   подложкой, поверх него градиент из ::before и текст с z-index. */
.media-cover {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------- кнопки -- */
/* Ховеры .btn-red и .btn-outline лежат в base.css — они одинаковы почти во
   всех концептах. Здесь только то, что есть исключительно на главной:
   стрелка внутри кнопки и подсветка светлой кнопки на тёмном фоне. */
.btn svg { width: 18px; height: 18px; }
.btn-light:hover { background: var(--cream); }

/* --------------------------------------------------------- первый экран -- */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 860px;
	padding-top: 110px;
	background: linear-gradient(125deg, #031733 0%, #073E78 54%, #0A6BC0 100%);
	color: #fff;
}
/* Блики и «сетка стадиона». pointer-events:none — иначе слой перехватывал
   бы клики по кнопкам под собой. */
.hero:before {
	content: "";
	position: absolute;
	inset: -20%;
	pointer-events: none;
	background:
		radial-gradient(circle at 72% 24%, rgba(255, 255, 255, .22), transparent 15%),
		radial-gradient(circle at 18% 88%, rgba(217, 8, 18, .38), transparent 24%),
		repeating-radial-gradient(ellipse at 50% 100%, transparent 0 46px, rgba(255, 255, 255, .045) 47px 49px);
}
/* Белая «линза» внизу — переход к следующей секции. */
.hero:after {
	content: "";
	position: absolute;
	left: -8%; right: -8%; bottom: -140px;
	height: 310px;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: #fff;
	transform: rotate(-2deg);
}
.hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(460px, .98fr);
	gap: 42px;
	align-items: center;
	min-height: 720px;
}
.hero-copy { padding: 76px 0 145px; }

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.hero-kicker span {
	padding: 8px 12px;
	border-radius: 4px;
	background: var(--red);
	transform: rotate(-2deg);
}

.hero h1 {
	margin: 0;
	font-size: clamp(70px, 7.8vw, 132px);
	line-height: .78;
	letter-spacing: -.07em;
	font-weight: 950;
	text-transform: uppercase;
}
/* Вторая строка заголовка — контуром. Пустая (в блоке не заполнена) —
   строки просто нет, заголовок остаётся однострочным. */
.hero h1 .stroke {
	display: block;
	margin-top: 16px;
	font-size: .8em;
	color: transparent;
	-webkit-text-stroke: 2px #fff;
	opacity: .92;
}

/* Лид — это {$page->body} главной, то есть HTML из TinyMCE: у абзацев
   внутри нужно снять собственные отступы, иначе они разъедут блок. */
.hero-sub {
	max-width: 680px;
	margin: 32px 0 30px;
	font-size: 20px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}
.hero-sub p { margin: 0 0 12px; }
.hero-sub p:last-child { margin-bottom: 0; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 34px; }
.meta-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(10px);
	font-size: 14px;
	font-weight: 800;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------- афиша в герое -- */
.poster-wrap { position: relative; padding: 66px 0 142px; }
.poster-card {
	position: relative;
	width: min(520px, 100%);
	margin-left: auto;
	aspect-ratio: .708;
	overflow: hidden;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 35px 90px rgba(0, 0, 0, .35);
	transform: rotate(2deg);
}
.poster-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-card:after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
	pointer-events: none;
}

/* Юбилейная печать. Число в ней НЕ зашито в стили: разметка считает его
   от года основания (первая веха в истории), поэтому в 2027-м на сайте
   будет 36 без правок. */
.anniversary-badge {
	position: absolute;
	left: -34px; top: 126px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 140px; height: 140px;
	border: 7px solid #fff;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	text-align: center;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
	transform: rotate(-10deg);
}
.anniversary-badge strong { display: block; font-size: 54px; line-height: .8; }
.anniversary-badge small {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* ------------------------------------------------------ обратный отсчёт -- */
/* Рисуется, только если заполнена константа concert_datetime; сам счётчик
   ведёт design/t1/js/countdown.js по data-countdown. */
.countdown {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	max-width: 460px;
	margin-top: 26px;
}
.countdown div {
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	background: rgba(255, 255, 255, .08);
	text-align: center;
}
.countdown b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.countdown span {
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------ бегущая строка: края -- */
/* Сама лента — в base.css. Здесь только растушёвка по краям и слой выше
   «линзы» героя, иначе белый овал накрыл бы ленту. */
.is-home .marquee { position: relative; z-index: 3; }
.marquee:before,
.marquee:after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	z-index: 2;
	width: 92px;
	pointer-events: none;
}
.marquee:before { left: 0;  background: linear-gradient(90deg, #c80710, transparent); }
.marquee:after  { right: 0; background: linear-gradient(-90deg, #c80710, transparent); }

/* ---------------------------------------------------------- о команде --- */
.about {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #fff 0%, #f8f4e9 52%, #eef5fb 100%);
}
.about:before {
	content: "";
	position: absolute;
	right: -260px; top: -260px;
	width: 640px; height: 640px;
	border: 92px solid rgba(7, 62, 120, .045);
	border-radius: 50%;
	box-shadow: 0 0 0 56px rgba(217, 8, 18, .025), 0 0 0 112px rgba(7, 62, 120, .018);
}
.about:after {
	content: "";
	position: absolute;
	right: -7%; bottom: 88px;
	width: 52%; height: 9px;
	background: linear-gradient(90deg, transparent, var(--red) 24%, var(--red) 72%, transparent);
	opacity: .14;
	transform: rotate(-7deg);
}
.about-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: .86fr 1.14fr;
	gap: 68px;
	align-items: center;
}
.about-lead {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 520px;
}
.about-lead .eyebrow { margin-bottom: 22px; }

/* Крупное юбилейное число и его контурный дубль под ним. isolation:isolate
   нужен из-за z-index:-1 у контура: без него контур ушёл бы под фон
   секции и пропал. */
.anniversary-number { position: relative; width: max-content; margin-left: -14px; isolation: isolate; }
.anniversary-number-main,
.anniversary-number-outline {
	font-size: clamp(190px, 20vw, 320px);
	line-height: .68;
	letter-spacing: -.1em;
	font-weight: 950;
}
.anniversary-number-main {
	display: block;
	color: var(--blue);
	text-shadow: 14px 14px 0 rgba(217, 8, 18, .11);
}
.anniversary-number-outline {
	position: absolute;
	inset: -10px auto auto 15px;
	z-index: -1;
	color: transparent;
	-webkit-text-stroke: 2px rgba(217, 8, 18, .42);
	opacity: .9;
}
.anniversary-years {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 31px 0 0 20px;
	font-size: 16px;
	font-weight: 950;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--navy);
}
.anniversary-years i {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	font-style: normal;
	font-size: 13px;
	box-shadow: 0 10px 25px rgba(217, 8, 18, .22);
	animation: starPulse 2.8s ease-in-out infinite;
}
.anniversary-title {
	max-width: 560px;
	margin: 22px 0 0 20px;
	font-size: clamp(29px, 3vw, 48px);
	line-height: 1;
	letter-spacing: -.045em;
	color: var(--navy);
}
.anniversary-title span { color: var(--red); }
.anniversary-line {
	position: absolute;
	left: 9px; bottom: 23px;
	width: min(430px, 90%);
	height: 2px;
	background: linear-gradient(90deg, var(--blue), var(--red), transparent);
}
.anniversary-line:before {
	content: "";
	position: absolute;
	left: 0; top: -4px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 7px rgba(230, 192, 76, .16);
}

@keyframes starPulse {
	0%, 100% { transform: rotate(-8deg) scale(1); }
	50%      { transform: rotate(8deg) scale(1.12); }
}

.about-card {
	position: relative;
	padding: 34px;
	border: 1px solid rgba(7, 62, 120, .10);
	border-radius: 30px;
	background: rgba(255, 255, 255, .68);
	backdrop-filter: blur(12px);
	box-shadow: 0 28px 80px rgba(4, 29, 61, .08);
}
/* Текст карточки — {$page->body}, HTML из TinyMCE: стилизуем абзацы
   внутри обёртки, а не единственный <p>, как было в концепте. */
.about-text { position: relative; z-index: 1; max-width: 760px; margin-bottom: 28px; }
.about-text p { margin: 0 0 16px; font-size: 19px; line-height: 1.62; color: #364359; }
.about-text p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- статистика -- */
/* Плитки приходят группой блоков home_stats: сколько строк завели — столько
   плиток. Раскладка 7+5 / 5+7 расписана на первые четыре; пятая и дальше
   встают на всю ширину, поэтому имеет смысл держать в группе четыре. */
.stats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 13px;
}
.stat {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	grid-column: span 12;
	min-height: 158px;
	padding: 22px 23px;
	border: 1px solid rgba(7, 62, 120, .08);
	border-radius: 22px;
	transition: transform .32s ease, box-shadow .32s ease;
}
.stat:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(4, 29, 61, .15); }
.stat:after {
	content: attr(data-index);
	position: absolute;
	right: 16px; top: 12px;
	font-size: 42px;
	line-height: 1;
	font-weight: 950;
	letter-spacing: -.05em;
	opacity: .10;
}
.stat:nth-child(1) { grid-column: span 7; background: linear-gradient(140deg, var(--navy), var(--blue)); color: #fff; }
.stat:nth-child(2) { grid-column: span 5; background: linear-gradient(140deg, #b80710, var(--red)); color: #fff; }
.stat:nth-child(3) { grid-column: span 5; background: #fff; color: var(--navy); }
.stat:nth-child(4) { grid-column: span 7; background: linear-gradient(135deg, #f1e7bd, #e7c75f); color: var(--navy); }

.stat-kicker {
	margin-bottom: auto;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: .15em;
	text-transform: uppercase;
	opacity: .62;
}
/* tabular-nums: без него докрутка числа из stats.js дёргала бы ширину. */
.stat strong {
	display: block;
	font-size: clamp(46px, 5vw, 72px);
	line-height: .84;
	letter-spacing: -.065em;
	font-weight: 950;
	color: inherit;
	font-variant-numeric: tabular-nums;
}
.stat span {
	display: block;
	max-width: 230px;
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.38;
	color: inherit;
	opacity: .72;
}

.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 25px; }
.about-signature {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #748196;
}

/* ------------------------------------------------------------- концерт -- */
.concert { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.concert:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(120deg, rgba(217, 8, 18, .22), transparent 32%),
		repeating-linear-gradient(118deg, transparent 0 88px, rgba(255, 255, 255, .025) 89px 91px);
}
.concert-grid {
	position: relative;
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 62px;
	align-items: center;
}
.concert-poster {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.concert-poster img { width: 100%; display: block; }
/* В концепте дата была захардкожена в content: у ::after. Здесь это
   настоящий элемент — дату печатает шаблон из константы concert_datetime,
   и без неё плашки просто нет. */
.concert-date {
	position: absolute;
	left: 18px; right: 18px; bottom: 18px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 16px;
	background: rgba(4, 29, 61, .88);
	backdrop-filter: blur(12px);
	text-align: center;
	font-weight: 950;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.artist-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 34px; }
.artist-cloud a,
.artist-cloud span {
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	font-size: 13px;
	font-weight: 800;
	transition: .2s;
}
.artist-cloud a:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); }

.concert-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 36px; }
.fact {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 18px;
	background: rgba(255, 255, 255, .065);
}
.fact b { display: block; font-size: 24px; color: #fff; }
.fact small { display: block; margin-top: 6px; line-height: 1.35; color: rgba(255, 255, 255, .58); }

/* --------------------------------------------------- четыре лица клуба -- */
.team-preview { background: #f6f8fb; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Градиент под фото — это не украшение, а заглушка: у участника может не
   быть снимка, и тогда карточка остаётся цветной, а не пустой. */
.person {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	padding: 26px;
	border-radius: 24px;
	background: linear-gradient(180deg, #cedff2, #8bb2d6);
	isolation: isolate;
	transition: .3s ease;
}
.person:nth-child(2) { background: linear-gradient(180deg, #eed6d8, #c68d94); }
.person:nth-child(3) { background: linear-gradient(180deg, #f0e6c7, #cdb86b); }
.person:nth-child(4) { background: linear-gradient(180deg, #dce9e2, #8eaf9d); }
.person:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(4, 29, 61, .04) 0%, rgba(4, 29, 61, .14) 35%, rgba(4, 29, 61, .92) 100%);
}
.person:after {
	content: "★";
	position: absolute;
	right: 20px; top: 20px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	font-size: 20px;
	box-shadow: 0 8px 20px rgba(217, 8, 18, .35);
}
.person:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.person .media-cover { object-position: center top; }
.person-info { position: relative; z-index: 2; max-width: 88%; }
.person h3 {
	margin: 0 0 7px;
	font-size: 26px;
	line-height: 1.02;
	letter-spacing: -.03em;
	color: #fff;
	text-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.person p {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .82);
	text-shadow: 0 4px 14px rgba(0, 0, 0, .34);
}

/* ---------------------------------------------------- лента новостей --- */
/* Имена .news-* совпадают с news.css, но файлы никогда не грузятся вместе:
   home.css подключается только на «/». */
.news-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 44px; }

.news-feature {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 500px;
	padding: 34px;
	border-radius: 28px;
	background: linear-gradient(160deg, #0b3a6b, #031d3d);
	color: #fff;
}
.news-feature:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 35%, rgba(2, 14, 32, .95) 100%);
}
.news-content { position: relative; z-index: 2; }
.news-feature h3 { max-width: 720px; margin: 10px 0 16px; font-size: 34px; line-height: 1.08; }

.news-date {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}

.news-list { display: grid; gap: 14px; }
.news-item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 20px;
	padding: 22px;
	border: 1px solid rgba(7, 62, 120, .1);
	border-radius: 22px;
	background: #fff;
	transition: .25s;
}
.news-item:hover { transform: translateX(5px); box-shadow: 0 16px 35px rgba(4, 29, 61, .08); }
.news-item .news-date { color: var(--blue); }
.news-item h4 { margin: 7px 0 0; font-size: 17px; line-height: 1.25; }

.news-thumb {
	position: relative;
	overflow: hidden;
	min-height: 100px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--blue), #51a6ea);
}
.news-item:nth-child(2) .news-thumb { background: linear-gradient(135deg, var(--red), #ff6a6f); }
.news-item:nth-child(3) .news-thumb { background: linear-gradient(135deg, #dfb533, #ffe59a); }
/* Звёздочка видна только на пустой плашке — под снимком её незачем. */
.news-thumb:after {
	content: "★";
	position: absolute;
	right: 13px; bottom: 10px;
	color: #fff;
	font-size: 25px;
}
.news-thumb:has(img):after { content: none; }

/* -------------------------------------------------------- хронология --- */
.history-strip { overflow: hidden; background: var(--cream); }
.timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin-top: 56px;
}
.timeline:before {
	content: "";
	position: absolute;
	left: 4%; right: 4%; top: 28px;
	height: 2px;
	background: linear-gradient(90deg, var(--red), var(--blue));
}
.year { position: relative; padding: 0 22px; text-align: center; }
.year:before {
	content: "";
	position: relative;
	z-index: 2;
	display: block;
	width: 18px; height: 18px;
	margin: 20px auto 18px;
	border: 5px solid var(--blue);
	border-radius: 50%;
	background: #fff;
}
.year:first-child:before,
.year:last-child:before { border-color: var(--red); }
.year strong { font-size: 28px; color: var(--blue); }
.year p { font-size: 13px; line-height: 1.5; color: #6d7785; }

/* --------------------------------------------------- футбол × музыка --- */
/* Секция рассчитана РОВНО на два блока группы home_dual: колонок две, а
   круг с крестиком висит между ними по центру. Третий блок сломает сетку. */
.dual {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 620px;
	padding: 0;
}
.dual-panel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 90px max(6vw, 50px);
	color: #fff;
}
/* Не :last-child: после панелей в разметке ещё .dual-center, из-за него
   красный фон у «Музыки» не цеплялся — белый текст на белом = «пусто». */
.dual-panel:nth-child(1) {
	background:
		linear-gradient(180deg, rgba(3, 29, 61, .1), rgba(3, 29, 61, .92)),
		radial-gradient(circle at 40% 20%, #2e8dcc, #073e78 55%, #031d3d);
}
.dual-panel:nth-child(2) {
	background:
		linear-gradient(180deg, rgba(120, 0, 8, .05), rgba(90, 0, 6, .88)),
		radial-gradient(circle at 60% 20%, #f46c74, #d90812 55%, #780008);
}
.dual-panel:before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 46px, rgba(255, 255, 255, .07) 47px 49px);
}
.dual-panel h3 {
	position: relative;
	margin: 0;
	font-size: clamp(56px, 7vw, 118px);
	line-height: .82;
	letter-spacing: -.07em;
	text-transform: uppercase;
}
.dual-panel p { position: relative; max-width: 480px; line-height: 1.6; color: rgba(255, 255, 255, .76); }
.dual-center {
	position: absolute;
	left: 50%; top: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 82px; height: 82px;
	border-radius: 50%;
	background: #fff;
	color: var(--navy);
	font-size: 36px;
	font-weight: 950;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
	transform: translate(-50%, -50%) rotate(-6deg);
}

/* ----------------------------------------------------------- видео ----- */
.video-section { background: #fff; }
.video-card {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 560px;
	margin-top: 42px;
	padding: 42px;
	border-radius: 30px;
	background: linear-gradient(120deg, #0b3a6b, #031d3d);
	color: #fff;
}
.video-card:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 20%, rgba(2, 14, 32, .92) 100%);
}
.play {
	position: absolute;
	left: 50%; top: 47%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 102px; height: 102px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(12px);
	transition: .3s;
	transform: translate(-50%, -50%);
}
.video-card:hover .play { background: var(--red); transform: translate(-50%, -50%) scale(1.08); }
.play svg { width: 34px; height: 34px; margin-left: 5px; }
.video-text { position: relative; z-index: 2; }
.video-text h3 { margin: 5px 0 8px; font-size: 44px; }
.video-text p { margin: 0; color: rgba(255, 255, 255, .66); }

/* -------------------------------------------------------- фотоархив ---- */
.gallery { background: #f6f8fb; }
.gallery-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr .85fr;
	grid-template-rows: 260px 260px;
	gap: 14px;
	margin-top: 44px;
}
.gallery-card {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: linear-gradient(135deg, #cedff2, #8bb2d6);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.gallery-card:first-child { grid-row: 1 / 3; }
.gallery-card:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 58%, rgba(2, 14, 32, .72));
	opacity: .65;
	transition: .3s;
}
.gallery-card:hover:after { opacity: .32; }
.gallery-card span {
	position: absolute;
	left: 18px; bottom: 16px;
	z-index: 2;
	font-size: 13px;
	font-weight: 900;
	color: #fff;
}

/* --------------------------------------------------- пригласить клуб --- */
.match-cta { position: relative; overflow: hidden; background: var(--blue); color: #fff; }
.match-cta:before {
	content: "";
	position: absolute;
	inset: -30%;
	background:
		radial-gradient(circle at 20% 70%, rgba(217, 8, 18, .55), transparent 20%),
		repeating-radial-gradient(ellipse at 50% 100%, transparent 0 55px, rgba(255, 255, 255, .045) 56px 58px);
	transform: rotate(-5deg);
}
.match-box {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 60px;
	align-items: center;
	padding: 58px 0;
}
.match-box h2 {
	margin: 0 0 18px;
	font-size: clamp(48px, 6vw, 90px);
	line-height: .9;
	letter-spacing: -.055em;
	text-transform: uppercase;
}
.match-box p { max-width: 720px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.match-contact { display: grid; gap: 10px; min-width: 260px; }
.match-contact a,
.match-contact span {
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
	font-weight: 900;
}

/* ============================================================ адаптив == */

@media (max-width: 1180px) {
	.hero-grid { grid-template-columns: 1fr .8fr; }
	.hero h1 { font-size: 86px; }
	.about-grid, .concert-grid { gap: 38px; }
	.anniversary-number-main, .anniversary-number-outline { font-size: 230px; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 240px 240px; }
	.gallery-card:nth-child(5) { grid-column: 1 / 3; }
}

@media (max-width: 820px) {
	.section { padding: 76px 0; }

	/* Первый экран складывается в колонку: «линза» внизу героя на узком
	   экране превращалась в белую полосу поперёк афиши. */
	.hero { min-height: auto; }
	.hero:after { display: none; }
	.hero-grid { grid-template-columns: 1fr; gap: 0; }
	.hero-copy { padding: 86px 0 20px; }
	.hero h1 { font-size: clamp(62px, 18vw, 96px); }
	.poster-wrap { padding: 20px 0 78px; }
	.poster-card { width: min(480px, 88vw); margin: 0 auto; transform: rotate(1deg); }
	.anniversary-badge { left: 4px; top: 85px; width: 112px; height: 112px; }
	.anniversary-badge strong { font-size: 43px; }

	.about-grid, .concert-grid, .news-grid, .match-box { grid-template-columns: 1fr; }
	.about-lead { min-height: 360px; }
	.anniversary-number-main, .anniversary-number-outline { font-size: 230px; }
	.anniversary-line { bottom: 0; }
	.concert-poster { max-width: 520px; margin: auto; }

	.section-head { flex-direction: column; align-items: start; }
	.timeline { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
	.timeline:before { display: none; }

	.dual { grid-template-columns: 1fr; min-height: auto; }
	.dual-panel { min-height: 430px; padding: 70px 28px; }
	.dual-center { width: 68px; height: 68px; font-size: 30px; }

	.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px 220px; }
}

@media (max-width: 560px) {
	.section-title { font-size: 44px; }
	.hero-sub { font-size: 17px; }
	.hero-meta { display: grid; grid-template-columns: 1fr; }
	.meta-pill { justify-content: center; }
	.hero-actions { display: grid; grid-template-columns: 1fr; }
	.hero-actions .btn { width: 100%; }
	.countdown { max-width: none; }

	.about-card { padding: 22px; }
	.about-lead { min-height: 315px; }
	.anniversary-number-main, .anniversary-number-outline { font-size: 180px; }
	.anniversary-years, .anniversary-title { margin-left: 8px; }

	.stats { grid-template-columns: 1fr 1fr; }
	.stat:nth-child(n) { grid-column: span 1; min-height: 145px; padding: 18px; }
	.stat strong { font-size: 46px; }

	.concert-facts { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr; }
	.person { min-height: 330px; }
	.news-item { grid-template-columns: 86px 1fr; gap: 14px; padding: 14px; }
	.timeline { grid-template-columns: 1fr 1fr; }
	.year { padding: 0 8px; }
	.gallery-grid { grid-template-columns: 1fr; grid-template-rows: 360px 200px 200px 200px 200px; }
	.gallery-card:first-child, .gallery-card:nth-child(5) { grid-column: auto; grid-row: auto; }
	.match-box { gap: 18px; }
	.video-text h3 { font-size: 30px; }
}

/* Уважаем «меньше движения»: звёздочка между годами пульсирует бесконечно,
   а карточки ездят на hover. base.css гасит .reveal, бегущую строку и
   ховеры кнопок — здесь только то, что добавила главная. */
@media (prefers-reduced-motion: reduce) {
	.anniversary-years i { animation: none; }
	.person:hover, .news-item:hover, .stat:hover { transform: none; }
	.video-card:hover .play { transform: translate(-50%, -50%); }
}