@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════════════
   PULSE v4 — «Ночная арена».
   Глубокий чёрный и золото. Ритм светлых и тёмных полос.
   Фактуры (крашеная стена с мазком, поле с разметкой) отрисованы
   вектором и градиентами — ни одной фоновой картинки.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Gilroy'; src:url('/assets/fonts/Gilroy-Regular.woff') format('woff'),url('/assets/fonts/Gilroy-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('/assets/fonts/Gilroy-Bold.woff') format('woff'),url('/assets/fonts/Gilroy-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('/assets/fonts/Gilroy-ExtraBold.woff') format('woff'),url('/assets/fonts/Gilroy-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }

:root {
    /* тёмная сторона */
    --black:  #08080a;
    --black2: #0e0e11;
    --black3: #16161b;
    --black4: #1e1e24;

    /* светлая сторона */
    --paper:  #ffffff;
    --cream:  #f5f3ee;
    --cream2: #e9e5dc;

    --ink:    #131316;
    --ink2:   #5c5c66;
    --ink3:   #91919c;

    --pearl:  #f0efec;
    --pearl2: #a8a69f;
    --pearl3: #6d6b66;

    /* золото */
    --gold:   #d9a441;
    --gold-b: #f4d489;
    --gold-d: #9c7420;
    --gold-grad: linear-gradient(135deg, #f7dc9c 0%, #d9a441 44%, #a97b22 100%);

    --hair:   rgba(19, 19, 22, .12);
    --hairw:  rgba(240, 239, 236, .12);
    --hairw2: rgba(240, 239, 236, .26);
    --hairg:  rgba(217, 164, 65, .32);

    --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --sans: 'Gilroy', -apple-system, 'Segoe UI', Roboto, sans-serif;

    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");

    --hold: 1320px;
    --gut: 38px;
    --bar: 76px;

    --e: cubic-bezier(.2, .7, .3, 1);
    --e-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 20px); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--black);
    color: var(--ink);
    font: 400 17px/1.65 var(--sans);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.lock { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.032em; line-height: 1.05; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

::selection { background: var(--gold); color: var(--black); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hold { position: relative; z-index: 2; width: 100%; max-width: var(--hold); margin: 0 auto; padding: 0 var(--gut); }
.off { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ch { width: 15px; height: 15px; }
.mark { width: 34px; height: 38px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
.mark--lg { width: 48px; height: 54px; }
.mark--sm { width: 40px; height: 45px; }

.grain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .035; background-image: var(--noise); }
.beam { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58vw 46vh at var(--bx,70%) var(--by,14%), rgba(217,164,65,.09), transparent 62%); transition: background .4s linear; }

/* полоса прочитанного */
.prog-line { position: fixed; inset: 0 auto auto 0; z-index: 950; height: 2px; width: 0; background: var(--gold-grad); box-shadow: 0 0 14px rgba(217,164,65,.7); transition: width .1s linear; }

/* ══════════════════════════════════════════════════ ФАКТУРЫ ФОНОВ ═══ */

.wall { position: relative; isolation: isolate; overflow: hidden; color: var(--pearl);
    border-top: 1px solid rgba(217,164,65,.24); border-bottom: 1px solid rgba(217,164,65,.24); }
.wall::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--noise); opacity: .1; mix-blend-mode: overlay; }

/* золотая подсветка стены — чтобы чёрного было не так много */
.wall::after { content: ''; position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(85% 65% at 10% 6%, rgba(217,164,65,.17), transparent 58%),
                radial-gradient(70% 60% at 96% 92%, rgba(217,164,65,.12), transparent 60%),
                radial-gradient(100% 100% at 50% 112%, rgba(0,0,0,.45), transparent 60%); }

.wall--ink  { background: var(--black2); }
.wall--ink2 { background: var(--black); }

/* мазок краски — золото на чёрном */
.splash { position: absolute; z-index: 1; pointer-events: none; line-height: 0; }
.splash svg { width: 100%; height: 100%; display: block; }
.splash--a { top: -16%; left: 42%; width: 68vw; max-width: 1000px; aspect-ratio: 1/1; fill: var(--gold); opacity: .3; }
.splash--b { top: -22%; left: -18%; width: 72vw; max-width: 1040px; aspect-ratio: 1/1; fill: var(--gold); opacity: .27; }

/* светлая штукатурка */
.blk--paper { background: var(--paper); color: var(--ink); }
.blk--cream { background: var(--cream); color: var(--ink); }
.blk--paper, .blk--cream { position: relative; isolation: isolate; }
.blk--paper::before, .blk--cream::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--noise); opacity: .04; }

/* Коробка ровно под квадратный герб, по центру секции по вертикали.
   Без overflow: hidden — он срезал ореол размытия сверху и снизу. */
.wm {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    width: 46%;
    max-width: 600px;
    max-height: 80%;
    aspect-ratio: 1 / 1;
    line-height: 0;
    pointer-events: none;
}

/* Герб клуба: чёрно-белый и слегка расфокусированный.
   contain, а не cover — логотип нельзя обрезать. */
.wm img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    filter: grayscale(1) blur(5px);
    opacity: .28;
}

/* тёмное поле с золотой разметкой */
.turf { position: absolute; inset: 0; z-index: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 92px, transparent 92px 184px),
        radial-gradient(72% 82% at 14% 22%, rgba(217,164,65,.17), transparent 60%),
        radial-gradient(60% 70% at 92% 88%, rgba(217,164,65,.11), transparent 62%),
        radial-gradient(130% 110% at 50% -12%, #17171c 0%, #0d0d10 48%, #060608 100%); }
.turf::after { content: ''; position: absolute; inset: 0; background-image: var(--noise); opacity: .07; mix-blend-mode: overlay; }
/* slice вместо растяжения: пропорции разметки не плывут на узких экранах */
.lines { position: absolute; inset: 8% 0; z-index: 1; pointer-events: none; line-height: 0; overflow: hidden; color: rgba(217,164,65,.17); }
.lines svg { width: 100%; height: 100%; display: block; }

/* ═════════════════════════════════════════════════════════════ ШАПКА ══ */

/* Сплошная чёрная полоса, как в панели управления: без прозрачности
   и размытия — фото под шапку не просвечивает. */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--bar); display: flex; align-items: center;
    background: var(--black);
    border-bottom: 1px solid var(--hairw);
    transition: height .4s var(--e), border-color .4s var(--e), box-shadow .4s var(--e);
    color: var(--pearl); }
.bar.stuck { height: 64px; border-bottom-color: var(--hairg); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }
.bar__in { display: flex; align-items: center; gap: 28px; }
.bar__id { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; letter-spacing: .2em; line-height: 1; color: var(--pearl); }

.bar__id i { display: block; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .3em; color: var(--pearl3); margin-top: 5px; }

.bar__nav { display: flex; gap: 26px; margin-left: auto; }
.bar__nav a { position: relative; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pearl2); padding: 6px 0; transition: color .22s var(--e); }
.bar__nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--e); }
.bar__nav a:hover { color: #fff; }
.bar__nav a:hover::after, .bar__nav a.on::after { transform: scaleX(1); transform-origin: left; }
.bar__nav a.on { color: var(--gold-b); }

.bar__end { display: flex; align-items: center; gap: 18px; }
.bar__tel { font-size: 14px; font-weight: 700; }
.bar__tel:hover { color: var(--gold); }

.bg { display: none; width: 42px; height: 42px; border: 1px solid var(--hairw2); cursor: pointer; position: relative; }
.bg span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin-left: -8px; background: var(--pearl); transition: transform .3s var(--e); }
.bg span:nth-child(1) { transform: translateY(-4px); }
.bg span:nth-child(2) { transform: translateY(4px); }
.bg.on span:nth-child(1) { transform: rotate(45deg); }
.bg.on span:nth-child(2) { transform: rotate(-45deg); }

.shade { position: fixed; inset: 0; z-index: 880; background: var(--black2); color: var(--pearl); padding: calc(var(--bar) + 34px) var(--gut) 40px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--e-out); }
.shade.on { clip-path: inset(0 0 0 0); }
.shade nav { display: flex; flex-direction: column; }
.shade nav a { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hairw); font-size: clamp(22px, 6vw, 34px); font-weight: 800; }
.shade nav a i { font-style: normal; font-size: 11px; color: var(--gold); }
.shade__tel { font-size: 22px; font-weight: 800; color: var(--gold); }

/* ════════════════════════════════════════════════════════════ КНОПКИ ══ */

.key {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 28px; background: var(--gold-grad); color: #201704;
    font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    cursor: pointer; overflow: hidden; isolation: isolate; border-radius: 3px;
    transition: transform .28s var(--e-out), box-shadow .3s var(--e), color .3s var(--e);
    box-shadow: 0 14px 32px -16px rgba(217, 164, 65, .8);
}
.key::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .4s var(--e-out); }
.key:hover { transform: translateY(-2px); color: var(--gold-b); box-shadow: 0 20px 40px -18px rgba(0,0,0,.8); }
.key:hover::before { transform: none; }
.key--lg { padding: 19px 36px; font-size: 14px; }
.key--w { width: 100%; }
.key--ink { background: var(--ink); color: var(--gold-b); }
.key--ink::before { background: var(--gold-grad); }
.key--ink:hover { color: #201704; }
.key.busy { pointer-events: none; opacity: .75; }
.key.busy::after { content: ''; width: 15px; height: 15px; border: 2px solid rgba(0,0,0,.25); border-top-color: currentColor; border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

.ghost { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pearl2); cursor: pointer; padding: 6px 0; border-bottom: 1px solid var(--hairw2); transition: color .25s var(--e), border-color .25s var(--e); }
.ghost .ch { transition: transform .35s var(--e-out); }
.ghost:hover { color: var(--gold-b); border-color: var(--gold); }
.ghost:hover .ch { transform: translateX(5px); }
.ghost--d { color: var(--ink2); border-color: var(--hair); }
.ghost--d:hover { color: var(--gold-d); border-color: var(--gold); }

.tick { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--ink3); margin-bottom: 22px; }
.tick i { font-style: normal; font-size: 11px; color: var(--gold-d); border: 1px solid var(--hairg); width: 28px; height: 28px; display: grid; place-items: center; letter-spacing: 0; border-radius: 50%; }
.tick--w { color: rgba(240,239,236,.6); }
.tick--w i { color: var(--gold); border-color: var(--hairg); }
.tick--mid { justify-content: center; }
.tick--plain { color: var(--gold); }

/* ═════════════════════════════════════════════════════════════ ГЕРОЙ ══ */

.open { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--bar) + 40px) 0 0; overflow: hidden; color: var(--pearl); background: var(--black); }
.open__ph { position: absolute; inset: 0; z-index: 0; }
.open__ph img { width: 100%; height: 118%; object-fit: cover; object-position: center 36%; filter: contrast(1.08) brightness(.6) saturate(.55) sepia(.16); will-change: transform; }
.open__vig { position: absolute; inset: 0; z-index: 1; background:
    radial-gradient(60% 42% at 18% 88%, rgba(217,164,65,.2), transparent 62%),
    radial-gradient(46% 34% at 88% 16%, rgba(217,164,65,.13), transparent 64%),
    linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.28) 34%, rgba(8,8,10,.97) 100%),
    radial-gradient(74% 62% at 50% 42%, transparent 26%, rgba(8,8,10,.7) 100%); }

.flag { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--pearl2); }
.flag i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(217,164,65,.65); animation: bt 2.2s infinite; }
@keyframes bt { 70% { box-shadow: 0 0 0 11px rgba(217,164,65,0); } 100% { box-shadow: 0 0 0 0 rgba(217,164,65,0); } }

.open__in { padding-bottom: 48px; }
.open__h { margin: 26px 0 0; }
.open__sm { display: block; font-size: clamp(13px, 1.8vw, 19px); font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--pearl2); margin-bottom: 12px; }
/* было -.05em: на 250px это минус 12px между буквами — U и L наезжали друг на друга */
.open__big { display: block; font-size: clamp(72px, 17vw, 250px); line-height: .9; letter-spacing: .005em; text-transform: uppercase;
    background: linear-gradient(174deg, #fdf3dc 12%, var(--gold) 58%, #8f6716 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 8px 40px rgba(217,164,65,.22)); }
.open__claim { margin-top: 28px; font-family: var(--serif); font-size: clamp(18px, 2.2vw, 27px); font-style: italic; line-height: 1.42; color: var(--pearl2); }
.open__act { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }

.open__foot { border-top: 1px solid var(--hairw); }

/* Разделители рисуем псевдоэлементом, а не border-right: при переносе
   на две колонки border оставался бы висеть посреди строки. */
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.meta > div { position: relative; padding: 24px 24px 30px 0; display: flex; flex-direction: column; }
.meta > div + div { padding-left: 24px; }
.meta > div + div::before {
    content: ''; position: absolute; left: 0; top: 22px; bottom: 22px;
    width: 1px; background: var(--hairw);
}
.meta dt { font-size: clamp(24px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.meta > div:last-child dt { color: var(--gold); }
.meta dd { margin-top: auto; padding-top: 10px; font-size: 12.5px; line-height: 1.35; letter-spacing: .04em; color: var(--pearl3); max-width: 17ch; }

/* ══════════════════════════════════════════════════════ БЕГУЩАЯ СТРОКА ══ */

.tape { overflow: hidden; background: var(--gold-grad); color: #241a05; padding: 13px 0; }
.tape__row { display: flex; align-items: center; gap: 28px; width: max-content; animation: tp 30s linear infinite; }
.tape span { font-size: clamp(15px, 1.9vw, 22px); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
/* разделитель — герб клуба; на золоте он читается, поэтому без осветления */
.tape i { font-style: normal; display: flex; flex: 0 0 auto; }
.tape i img { display: block; width: auto; height: clamp(20px, 2.2vw, 27px); }
@keyframes tp { to { transform: translateX(-50%); } }

/* ═════════════════════════════════════════════════════════════ БЛОКИ ══ */

.blk { padding: 124px 0; position: relative; }
.cap { max-width: 740px; margin-bottom: 64px; }
.cap h2 { font-size: clamp(34px, 5.2vw, 68px); }
.cap h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-d); }
.cap--w h2 { color: #fff; }
.cap--w h2 em { color: var(--gold); }
.cap__p { margin-top: 20px; font-size: 16.5px; color: rgba(240,239,236,.7); }
.cap--mid { margin-left: auto; margin-right: auto; text-align: center; }

/* ─── философия ─────────────────────────────────────────────────────── */

.creed { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 76px; align-items: start; }
.lede { font-family: var(--serif); font-size: 21px; line-height: 1.6; color: var(--ink); padding-bottom: 34px; border-bottom: 1px solid var(--hair); }

.pts { margin-top: 10px; }
.pt { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; padding: 28px 0; border-bottom: 1px solid var(--hair); transition: padding-left .4s var(--e-out); }
.pt:hover { padding-left: 10px; }
.pt > span { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--gold-d); padding-top: 5px; }
.pt h3 { font-size: 21px; margin-bottom: 9px; }
.pt p { font-size: 15.5px; color: var(--ink2); }

.pitchwrap { position: sticky; top: 130px; }
.board { background: linear-gradient(160deg, var(--black3) 0%, var(--black) 100%); border: 1px solid var(--hairg); border-radius: 10px; padding: 24px; box-shadow: 0 34px 70px -34px rgba(0,0,0,.6); }
.pitch { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.pitch__field { fill: none; stroke: rgba(240,239,236,.2); stroke-width: 1; }
.pitch__dot { fill: rgba(240,239,236,.2); stroke: none; }
.pitch__line { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); filter: drop-shadow(0 0 7px rgba(217,164,65,.7)); }
.pitch__nodes circle { fill: var(--black); stroke: rgba(240,239,236,.55); stroke-width: 1.5; }
.pitch__nodes .pitch__goal { fill: var(--gold); stroke: var(--gold-b); }
.pitchwrap__cap { display: block; margin-top: 18px; text-align: center; font-size: 12.5px; letter-spacing: .05em; color: var(--ink3); }

/* ─── мяч ───────────────────────────────────────────────────────────── */

.ballsec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.ballsec h2 { font-size: clamp(32px, 4.4vw, 58px); margin-bottom: 22px; color: #fff; }
.ballsec__l > p { font-size: 17px; color: rgba(240,239,236,.76); max-width: 440px; }
.ballsec__ul { margin: 32px 0 34px; border-top: 1px solid var(--hairg); }
.ballsec__ul li { display: flex; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hairw); }
.ballsec__ul b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; width: 68px; flex: 0 0 68px; color: var(--gold); }
.ballsec__ul span { font-size: 15px; color: rgba(240,239,236,.7); }

.ballsec__r { position: relative; }
.stage3d { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; }
.stage3d__cv { position: relative; z-index: 2; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--e); }
.stage3d__cv.is-live { opacity: 1; }
.stage3d__glow { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(217,164,65,.3), transparent 66%); filter: blur(42px); }
.stage3d::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 6%; height: 18px; background: radial-gradient(ellipse at center, rgba(0,0,0,.75), transparent 72%); filter: blur(10px); }

/* ─── программы ─────────────────────────────────────────────────────── */

.cine { display: grid; gap: 26px; }
.cn { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); border: 1px solid var(--hair); background: var(--paper); overflow: hidden; border-radius: 6px; transition: border-color .35s var(--e), box-shadow .4s var(--e), transform .4s var(--e-out); }
.cn:hover { border-color: var(--hairg); box-shadow: 0 30px 60px -34px rgba(19,19,22,.3); transform: translateY(-4px); }
.cn--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.cn--rev .cn__ph { order: 2; }
.cn__ph { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--cream2); }
.cn__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--e-out); }
.cn:hover .cn__ph img { transform: scale(1.045); }
.cn__bd { padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.cn__age { font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--gold-d); }
.cn__age i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .38em; color: var(--ink3); margin-left: 8px; }
.cn__bd h3 { font-size: 23px; }
.cn__bd p { font-size: 15.5px; color: var(--ink2); }
.cn__ul { margin: 6px 0 4px; display: grid; gap: 7px; }
.cn__ul li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink2); }
.cn__ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 9px; height: 1.5px; background: var(--gold); }

/* ─── карусель тренеров ─────────────────────────────────────────────── */

.crsl { position: relative; z-index: 2; }
.crsl__vp { overflow: hidden; padding: 10px 0 34px; cursor: grab; touch-action: pan-y; }
.crsl__vp.is-drag { cursor: grabbing; }
/* боковые отступы проставляет скрипт — чтобы центрировалась любая карточка */
.crsl__track { display: flex; gap: 28px; width: max-content; will-change: transform; transition: transform .7s var(--e-out); }
.crsl__vp.is-drag .crsl__track { transition: none; }

.mate {
    flex: 0 0 clamp(280px, 30vw, 400px);
    background: linear-gradient(165deg, var(--black3) 0%, var(--black) 100%);
    border: 1px solid var(--hairw);
    border-radius: 8px;
    overflow: hidden;
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--e), transform .7s var(--e-out), border-color .5s var(--e), box-shadow .6s var(--e);
    user-select: none;
}

.crsl.is-ready .mate { opacity: .38; transform: scale(.9); }
.crsl.is-ready .mate.is-on, .mate.is-on {
    opacity: 1;
    transform: scale(1);
    border-color: var(--hairg);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(217,164,65,.14);
}

.mate__ph { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--black); }
.mate__ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.85); transition: filter .7s var(--e), transform 1.1s var(--e-out); }
.mate.is-on .mate__ph img { filter: grayscale(.25) contrast(1.04); }
.mate.is-on:hover .mate__ph img { filter: none; transform: scale(1.04); }
.mate__ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,8,10,.92) 100%); }

.mate__no {
    position: absolute; left: 18px; top: 16px; z-index: 2;
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--hairg); border-radius: 50%;
    font-size: 13px; font-weight: 800; letter-spacing: .06em;
    color: var(--gold); background: rgba(8,8,10,.5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* герб клуба в углу фото — как клубный штамп на карточке игрока */
.mate__crest { position: absolute; right: 16px; top: 14px; z-index: 2; width: 46px; height: 46px; }
.mate__crest img { width: 100%; height: 100%; object-fit: contain;
    filter: grayscale(1) brightness(1.5) contrast(.85); opacity: .5;
    transition: filter .7s var(--e), opacity .7s var(--e); }
.mate.is-on .mate__crest img { filter: none; opacity: .95; }

.mate__role {
    position: absolute; left: 20px; bottom: 18px; z-index: 2;
    font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold-b);
}

.mate__bd { padding: 26px 24px 30px; }
.mate__bd h3 { font-size: 21px; line-height: 1.18; color: #fff; margin-bottom: 16px; }
.mate__bd ul { display: grid; gap: 9px; }
.mate__bd li { position: relative; padding-left: 17px; font-size: 13.5px; line-height: 1.5; color: rgba(240,239,236,.72); }
.mate__bd li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 1.5px; background: var(--gold); }

.crsl__ui { display: flex; align-items: center; gap: 20px; }
.crsl__dots { display: flex; gap: 9px; margin-right: auto; }
.crsl__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--hairw2); cursor: pointer; transition: background .3s var(--e), width .3s var(--e); }
.crsl__dot.is-on { background: var(--gold); width: 28px; border-radius: 5px; }
.crsl__count { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--pearl3); font-variant-numeric: tabular-nums; }
.crsl__count b { color: var(--gold); }
.crsl__count i { font-style: normal; margin: 0 6px; opacity: .5; }

.rnd { width: 50px; height: 50px; border: 1px solid var(--hairw2); display: grid; place-items: center; cursor: pointer; color: var(--pearl); border-radius: 50%; transition: background .25s var(--e), border-color .25s var(--e), color .25s var(--e); }
.rnd:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.rnd:disabled { opacity: .3; cursor: default; background: none; border-color: var(--hairw2); color: var(--pearl); }
.rnd--prev .ch { transform: rotate(180deg); }

/* ─── хроника ───────────────────────────────────────────────────────── */

.reels { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.rl { display: block; width: 100%; padding: 0; cursor: pointer; text-align: left; }
.rl__box { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--black2); border-radius: 6px; box-shadow: 0 26px 54px -30px rgba(19,19,22,.4); }
.rl--big .rl__box { aspect-ratio: 16/10; }
.rl__box img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .45s var(--e), transform .9s var(--e-out); }
.rl:hover .rl__box img { opacity: 1; transform: scale(1.04); }
.rl iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rl__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 78px; height: 78px; border-radius: 50%; background: var(--gold-grad); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(217,164,65,.4); transition: transform .35s var(--e-out), box-shadow .35s var(--e); }
.rl__play::before { content: ''; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #241a05; margin-left: 5px; }
.rl:hover .rl__play { transform: translate(-50%,-50%) scale(1.1); box-shadow: 0 0 0 16px rgba(217,164,65,.14); }
.rl__cap { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; font-size: 14.5px; font-weight: 700; }
.rl__cap b { font-size: 11.5px; letter-spacing: .18em; color: var(--gold-d); }

/* ─── отзывы ────────────────────────────────────────────────────────── */

.big { max-width: 900px; margin: 0 auto 70px; text-align: center; }
.big__q { width: 46px; height: 34px; color: rgba(217,164,65,.5); margin: 0 auto 24px; display: block; }
.big blockquote { margin: 0; font-family: var(--serif); font-size: clamp(22px, 3vw, 38px); font-style: italic; line-height: 1.36; }
.big figcaption { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 28px; font-size: 13.5px; font-weight: 800; letter-spacing: .06em; }
.big figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

.notes { columns: 3; column-gap: 34px; }
.nt { break-inside: avoid; margin: 0 0 30px; padding-top: 22px; border-top: 1px solid var(--hair); }
.nt p { font-size: 15.5px; line-height: 1.66; color: var(--ink2); }
.nt cite { display: block; margin-top: 14px; font-style: normal; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; }
.nt i { display: block; font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink3); margin-top: 3px; }

/* ─── запись: тёмное поле + светлая карточка формы ──────────────────── */

.sign { position: relative; isolation: isolate; overflow: hidden; padding: 120px 0; color: var(--pearl);
    border-top: 1px solid rgba(217,164,65,.24); border-bottom: 1px solid rgba(217,164,65,.24); }
.sign__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(56% 66% at 20% 28%, rgba(217,164,65,.2), transparent 62%); }

.sign__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 76px; align-items: start; }
.sign h2 { font-size: clamp(34px, 4.6vw, 60px); color: #fff; }
.sign__free { background: linear-gradient(120deg, #fbeec6 0%, var(--gold) 55%, #a97b22 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.sign__p { margin-top: 22px; font-size: 17.5px; line-height: 1.6; color: rgba(240,239,236,.74); max-width: 420px; }

/* три шага — крупно и читаемо */
.steps { margin: 40px 0 42px; display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start; padding: 20px 0; border-top: 1px solid var(--hairw); }
.step:last-child { border-bottom: 1px solid var(--hairw); }
.step > b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--hairg); color: var(--gold); font-size: 16px; font-weight: 800; }
.step h3 { font-size: 18px; color: #fff; margin-bottom: 6px; }
.step p { font-size: 15px; line-height: 1.55; color: rgba(240,239,236,.66); }

.sign__tel { display: inline-block; font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -.03em; color: #fff; transition: color .25s var(--e); }
.sign__tel:hover { color: var(--gold); }
.sign__tel small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--pearl3); margin-bottom: 8px; }

/* карточка формы — самое светлое пятно на странице */
.card {
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    padding: 36px 34px 30px;
    box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(217,164,65,.22);
}

.card__hd { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--hair); }
.card__badge { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--gold-grad); color: #241a05; font-size: 16px; font-weight: 800; letter-spacing: -.02em;
    box-shadow: 0 8px 20px -8px rgba(217,164,65,.9); }
.card__hd h3 { font-size: 20px; line-height: 1.2; }
.card__hd p { margin-top: 5px; font-size: 13.5px; color: var(--ink3); }

/* выбор возраста кнопками — быстрее, чем печатать */
.chips { margin-bottom: 22px; }
.chips__t { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 10px; }
.chips__row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { flex: 1 1 auto; padding: 12px 14px; border: 1.5px solid var(--hair); border-radius: 10px; background: var(--cream);
    font-size: 14.5px; font-weight: 700; color: var(--ink2); cursor: pointer; white-space: nowrap;
    transition: border-color .25s var(--e), background .25s var(--e), color .25s var(--e), transform .25s var(--e-out); }
.chip:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--gold-b); }

/* поля светлой карточки */
.fx { position: relative; margin-bottom: 16px; }
.fx label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; color: var(--ink2); margin-bottom: 7px; }
.fx label s { text-decoration: none; color: var(--gold-d); }
.fx input {
    width: 100%; padding: 15px 16px;
    border: 1.5px solid var(--hair); border-radius: 10px;
    background: #fdfcfa; color: var(--ink);
    font: 400 16px var(--sans); outline: none;
    transition: border-color .25s var(--e), box-shadow .25s var(--e), background .25s var(--e);
}
.fx input::placeholder { color: #b3b3bb; }
.fx input:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(217,164,65,.16); }
.fx em { display: none; font-style: normal; margin-top: 6px; font-size: 12.5px; color: #b3261e; }
.fx.bad input { border-color: #b3261e; background: #fff7f6; }
.fx.bad em { display: block; }

.card .key { margin-top: 6px; }
.card .msg { margin-top: 14px; font-size: 14.5px; font-weight: 700; text-align: center; min-height: 20px; }
.card .msg.ok { color: #1a7a45; }
.card .msg.err { color: #b3261e; }
.card .fine { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--ink3); text-align: center; }

/* ─── поля ──────────────────────────────────────────────────────────── */

.fd { position: relative; grid-column: 1 / -1; margin-bottom: 20px; }
.fd--h { grid-column: span 1; }
.fd input { width: 100%; padding: 24px 2px 10px; border: 0; border-bottom: 1px solid var(--hairw2); background: none; color: var(--pearl); font: 400 16px var(--sans); outline: none; transition: border-color .3s var(--e); }
.fd input::placeholder { color: transparent; }
.fd label { position: absolute; left: 2px; top: 21px; font-size: 15.5px; color: var(--pearl3); pointer-events: none; transform-origin: left top; transition: transform .28s var(--e-out), color .28s var(--e); }
.fd input:focus { border-bottom-color: var(--gold); }
.fd input:focus + label, .fd input:not(:placeholder-shown) + label { transform: translateY(-20px) scale(.74); color: var(--gold); }
.fd em { display: none; font-style: normal; margin-top: 7px; font-size: 12.5px; color: #f0a0a4; }
.fd.bad input { border-bottom-color: #f0a0a4; }
.fd.bad em { display: block; }

.sign__f .key { grid-column: 1 / -1; margin-top: 8px; }
.msg { grid-column: 1 / -1; margin-top: 14px; font-size: 14.5px; font-weight: 700; text-align: center; min-height: 20px; }
.msg.ok { color: #7ad6a4; }
.msg.err { color: #f0a0a4; }
.fine { grid-column: 1 / -1; margin-top: 14px; font-size: 12px; color: var(--pearl3); text-align: center; }
.fine a { text-decoration: underline; }

/* ─── адреса ────────────────────────────────────────────────────────── */

.geo { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); gap: 40px; align-items: start; }
.pins { border-top: 1px solid var(--hair); }
.pins li { display: flex; align-items: baseline; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--hair); transition: padding-left .4s var(--e-out); }
.pins li:hover { padding-left: 12px; }
.pins b { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--gold-d); }
.pins strong { display: block; font-size: clamp(19px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.pins span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink3); }
.pins__n { display: block; border-bottom: 0; font-size: 13.5px; color: var(--ink3); line-height: 1.6; }
.pins__n:hover { padding-left: 0; }

.atlas { position: relative; border-radius: 10px; overflow: hidden;
    box-shadow: 0 26px 60px -34px rgba(19,19,22,.45), 0 0 0 1px rgba(217,164,65,.3); }
.atlas iframe { display: block; width: 100%; height: 560px; border: 0; filter: grayscale(.5) sepia(.12) contrast(1.03); }

/* золотые уголки, чтобы карта читалась как часть оформления */
.atlas::before, .atlas::after { content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 2; }
.atlas::before { left: 12px; top: 12px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.atlas::after { right: 12px; bottom: 12px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }

/* ─── подвал ────────────────────────────────────────────────────────── */

.end { background: var(--black); color: var(--pearl); padding: 70px 0 40px; border-top: 1px solid var(--hairg); }
.end__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 40px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--hairw); }
.end__id { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 800; letter-spacing: .18em; }

.end__id i { display: block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pearl3); margin-top: 6px; }
.end__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 28px; justify-content: start; }
.end__nav a { font-size: 14px; color: var(--pearl2); }
.end__nav a:hover { color: var(--gold); }
.end__c { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.end__tel { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.end__tel:hover { color: var(--gold); }
.end__soc { display: flex; gap: 18px; font-size: 13px; color: var(--pearl3); }
.end__soc a:hover { color: var(--gold); }
.end__bot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-size: 12.5px; color: var(--pearl3); }
.end__bot a:hover { color: var(--gold); }

/* ─── модалка ───────────────────────────────────────────────────────── */

.pop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(4,4,6,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .3s var(--e), visibility .3s; }
.pop.on { opacity: 1; visibility: visible; }
.pop__b { position: relative; width: 100%; max-width: 470px; max-height: 92vh;
    background: transparent; border: 0; padding: 0;
    transform: translateY(22px); transition: transform .45s var(--e-out); }
/* прокручивается карточка, а не коробка — иначе крестик уезжает вверх */
.pop__b .card { max-height: 92vh; overflow-y: auto; }
.pop.on .pop__b { transform: none; }
.pop__b .card { box-shadow: 0 50px 100px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(217,164,65,.3); }
.pop__x { position: absolute; right: 12px; top: 12px; z-index: 3; width: 36px; height: 36px;
    border: 1.5px solid var(--hair); background: #fff; border-radius: 50%; cursor: pointer;
    transition: background .25s var(--e), transform .35s var(--e), border-color .25s var(--e); }
.pop__x:hover { background: var(--cream); border-color: var(--gold); transform: rotate(90deg); }
.pop__x::before, .pop__x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.6px; margin: -.8px 0 0 -6.5px; background: var(--ink); }
.pop__x::before { transform: rotate(45deg); }
.pop__x::after { transform: rotate(-45deg); }


/* ─── появление ─────────────────────────────────────────────────────── */

/* Прячем блоки только после того, как скрипт включил режим появления
   (класс rv-on ставит app.js). Если скрипт не отработал — текст виден,
   а не пропадает навсегда. */
.rv-on .rv { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--e-out), transform .85s var(--e-out); }
.rv-on .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rv-on .rv { opacity: 1; transform: none; transition: none; }
    .pitch__line { stroke-dashoffset: 0; }
    .flag i, .tape__row { animation: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}

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

@media (max-width: 1180px) {
    :root { --gut: 26px; }
    .bar__nav { display: none; }
    .bg { display: block; }
    .notes { columns: 2; }
    .creed { grid-template-columns: minmax(0, 1fr); gap: 54px; }
    .pitchwrap { position: static; max-width: 420px; }
    .wm { width: 54%; right: -5%; }
}

@media (max-width: 940px) {
    .blk { padding: 88px 0; }
    .sign { padding: 88px 0; }
    .ballsec { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .stage3d { max-width: 420px; margin: 0 auto; }
    .cn, .cn--rev { grid-template-columns: minmax(0, 1fr); }
    .cn--rev .cn__ph { order: 0; }
    .reels { grid-template-columns: minmax(0, 1fr); }
    .rl--big .rl__box, .rl__box { aspect-ratio: 16/9; }
    .sign__in { grid-template-columns: minmax(0, 1fr); gap: 46px; }
    .geo { grid-template-columns: minmax(0, 1fr); }
    .atlas iframe { height: 380px; }
    .end__top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .end__c { align-items: flex-start; }
    .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* в начале строки вертикальной черты быть не должно, между рядами — горизонтальная */
    .meta > div:nth-child(odd) { padding-left: 0; }
    .meta > div:nth-child(odd)::before { display: none; }
    .meta > div:nth-child(n+3) { border-top: 1px solid var(--hairw); padding-top: 22px; }
    /* нечётная последняя плашка занимает всю строку, а не половину */
    .meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .meta > div:last-child:nth-child(odd) dd { max-width: 34ch; }
    .splash--a, .splash--b { width: 120vw; left: 10%; top: -8%; }
    .lines { inset: 4% 0; }
}

@media (max-width: 640px) {
    :root { --gut: 18px; --bar: 64px; }
    body { font-size: 16px; }
    .bar__tel { display: none; }
    .bar__id i { display: none; }

    /* ── первый экран на телефоне ── */
    .open { min-height: 92svh; padding-top: calc(var(--bar) + 40px); }
    .open__in { padding-bottom: 32px; }
    /* разрядка в 0.22em на узком экране выталкивает строку за поля */
    .flag { font-size: 10.5px; letter-spacing: .12em; flex-wrap: wrap; line-height: 1.5; }
    .open__h { margin-top: 18px; }
    .open__sm { font-size: 12px; letter-spacing: .18em; margin-bottom: 8px; }
    .open__big { font-size: clamp(56px, 19vw, 92px); }
    .open__claim { margin-top: 18px; font-size: 17px; line-height: 1.38; }
    .open__claim br { display: none; }
    .open__act { gap: 14px; margin-top: 26px; }
    .open__act .key { width: 100%; }
    .open__act .ghost { width: 100%; justify-content: center; }
    .meta > div { padding: 18px 14px 22px 0; }
    .meta > div + div { padding-left: 14px; }
    .meta > div + div::before { top: 16px; bottom: 16px; }
    .meta > div:nth-child(n+3) { padding-top: 18px; }
    .meta dd { font-size: 11.5px; letter-spacing: .02em; max-width: none; }
    .notes { columns: 1; }
    .pt { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
    .cn__bd { padding: 28px 22px; }
    .sign__f { padding: 30px 22px 26px; }
    .sign__f { grid-template-columns: minmax(0, 1fr); }
    .fd--h { grid-column: 1 / -1; }
    .end__bot { flex-direction: column; }
    .wm { display: none; }
    .lines { display: none; }
    .crsl__track { gap: 18px; }
    .crsl__ui { flex-wrap: wrap; }
    .crsl__dots { order: 3; width: 100%; margin: 6px 0 0; justify-content: center; }
    .crsl__count { margin-right: auto; }
}