/* ============ Fonts ============ */
@font-face { font-family: "Unbounded"; src: url("/fonts/Unbounded-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/fonts/GolosText-Variable.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

/* Анимируемые переменные: параллакс, раскрытие и наклон складываются в один transform */
@property --ry { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ty { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --bg: #f7f1e8;
  --bg2: #efe6d8;
  --panel: #fffcf6;
  --glass: rgba(255, 252, 246, .76);
  --line: rgba(150, 112, 42, .22);
  --line-strong: rgba(150, 112, 42, .42);
  --gold: #9a742a;
  --gold-hi: #7d5a1b;
  --gold-lo: #6b4c16;
  --text: #231b15;
  --text-2: #4d4238;
  --mute: #6f6457;
  --burg: #5b1a35;
  --burg-hi: #742443;
  --felt-a: #6a2444; --felt-b: #4a1630; --felt-c: #2e0c1d;
  --radius: 22px;
  --shadow: 0 30px 70px -36px rgba(70, 45, 20, .38);
  --shadow-sm: 0 18px 40px -28px rgba(70, 45, 20, .3);
  --display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gold-grad: linear-gradient(105deg, #7d5a1b 0%, #b38a38 38%, #86621f 68%, #c09a4a 100%);
}
/* Тёмные островки: поверх видео Лиги, на сукне стола, экран приложения, футер, витрина логотипа в попапе */
.lg-content, .apply-copy, .footer, .app, .cm-noimg {
  --panel: rgba(255, 245, 220, .035);
  --glass: rgba(10, 9, 8, .5);
  --line: rgba(220, 199, 127, .2);
  --line-strong: rgba(220, 199, 127, .45);
  --gold: #dcc77f;
  --gold-hi: #f6e7ac;
  --text: #f3eee2;
  --text-2: #d9d1bd;
  --mute: #b5ab95;
  --gold-grad: linear-gradient(105deg, #f6e7ac 0%, #dcc77f 38%, #b08d3c 68%, #f1dc94 100%);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--body); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 0; }
h2 { font-size: clamp(26px, 3.2vw, 44px); max-width: 22ch; }
h3 { font-size: clamp(18px, 1.5vw, 22px); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--gold); color: #1a1406; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
.container { width: min(1180px, 100% - 40px); margin-inline: auto; }
.section { position: relative; padding: clamp(52px, 6.5vw, 92px) 0; }
.sub { color: var(--mute); max-width: 62ch; margin-top: 14px; font-size: clamp(16px, 1.3vw, 19px); }
.eyebrow { font: 700 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); opacity: .7; }
.age { display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; letter-spacing: .06em; font-size: 12px; color: var(--gold-hi); }
.eyebrow:has(.age)::before { display: none; }
.gold-text {
  background: var(--gold-grad); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ============ Единая трансформация: параллакс + раскрытие + наклон ============ */
[data-parallax], [data-parallax-x], .reveal, .tilt {
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--ry, 0px)), 0) perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
}
.js .reveal { opacity: 0; --ry: 34px; transition: opacity .6s ease var(--d, 0ms), --ry .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.js .reveal.in { opacity: 1; --ry: 0px; }
.tilt { transition: --tx .35s ease, --ty .35s ease, border-color .3s, background .3s; }
.tilt.is-hover { transition: --tx .08s linear, --ty .08s linear, border-color .3s, background .3s; }

/* ============ Кнопки ============ */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: 600 15.5px/1 var(--body); letter-spacing: -.005em; white-space: nowrap;
  transition: box-shadow .3s ease, border-color .3s, background .3s, color .3s;
}
/* стрелка — в кружке у правого края; при наведении поворачивается, сама кнопка на месте */
.btn:has(> .ico) { padding: 7px 7px 7px 26px; }
.btn .ico { flex: none; width: 42px; height: 42px; padding: 12px; border-radius: 50%; stroke: currentColor; transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .3s; }
.btn:hover .ico { transform: rotate(-45deg); }
.btn--sm { padding: 13px 20px; font-size: 14px; }
.btn--sm:has(> .ico) { padding: 6px 6px 6px 20px; }
.btn--sm .ico { width: 36px; height: 36px; padding: 10px; }
.btn--block { width: 100%; justify-content: space-between; }
/* главная кнопка: сплошное тёмное золото, светлый текст, светлый кружок со стрелкой */
.btn--gold { background: #9a742a; border-color: #9a742a; color: #fffaf0; box-shadow: 0 16px 32px -20px rgba(110, 78, 20, .9); }
.btn--gold:hover { background: #87661f; border-color: #87661f; }
.btn--gold .ico { background: #fffaf0; color: #7d5a1b; stroke: #7d5a1b; }
.btn--ghost .ico { background: rgba(154, 116, 42, .14); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: var(--glass); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(201, 162, 79, .12); }
/* плоская винная кнопка: без градиентов и свечения, тонкая золотая рамка как у ghost */
.btn--burgundy { background: var(--burg); border-color: var(--burg); color: #fbf3e6; }
.btn--burgundy:hover { background: var(--burg-hi); border-color: var(--burg-hi); }

/* ============ Glass / cards ============ */
.glass { background: linear-gradient(160deg, rgba(255, 253, 248, .9), rgba(255, 250, 240, .74)); box-shadow: var(--shadow); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.card, .lg-card { position: relative; padding: 32px 28px 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; }
.card::before, .lg-card::before, .club::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(220, 199, 127, .16), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.tilt.is-hover::before { opacity: 1; }
.tilt.is-hover { border-color: var(--line-strong); }
.card h3, .lg-card h3 { margin: 18px 0 12px; }
.card p, .lg-card p { color: var(--mute); font-size: 16px; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-lg { width: 44px; height: 44px; color: var(--gold); stroke: currentColor; }

/* ============ Header ============ */
.progress { position: fixed; z-index: 120; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
.site-header { position: fixed; z-index: 100; inset: 0 0 auto 0; transition: background .35s, backdrop-filter .35s, border-color .35s, transform .35s; border-bottom: 1px solid transparent; }
.site-header.is-solid { background: rgba(250, 246, 239, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand img { height: 22px; width: auto; filter: brightness(.7) saturate(1.3); }
.nav { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.nav a { font-size: 14px; color: var(--text-2); position: relative; padding: 6px 0; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:hover { color: var(--gold-hi); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--gold-hi); }

/* ============ Общие детали сцены ============ */
.layer { position: absolute; inset: -12% 0; }
.float { position: absolute; pointer-events: none; }
.float svg { width: 100%; height: auto; animation: bob var(--t, 8s) ease-in-out infinite; filter: drop-shadow(0 22px 28px rgba(70, 45, 20, .3)); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r0, -8deg)); } 50% { transform: translateY(-16px) rotate(var(--r1, 6deg)); } }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 26px; width: 26px; height: 42px; border: 1.5px solid var(--line-strong); border-radius: 14px; transform: translateX(-50%); opacity: calc(1 - var(--hp, 0) * 4); }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.mono-tag { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 600 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mono-tag .age { letter-spacing: .06em; }
.counter { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 6px; }
.counter b { font: 800 clamp(48px, 6vw, 76px)/1 var(--display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums tabular-nums; min-width: 1.4ch; }
.counter span { color: var(--mute); font-size: 15px; line-height: 1.3; }
.citycheck { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.citycheck label { display: block; font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.citycheck-row { display: flex; gap: 8px; }
.citycheck input, .field input, .field select, .finder input { width: 100%; min-width: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fffdf8; outline: none; transition: border-color .2s, box-shadow .2s; }
.citycheck input:focus, .field input:focus, .field select:focus, .finder input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(220, 199, 127, .16); }
.citycheck-out { margin-top: 12px; min-height: 3em; font-size: 15px; color: var(--text-2); }
.citycheck-out a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }

/* ============ Сцена-глобус: hero и сеть в одном длинном кадре ============ */
.orbit { position: relative; height: 400vh; background: var(--bg); }
.anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.orbit-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201, 150, 70, .14), transparent 70%), repeating-linear-gradient(60deg, transparent 0 78px, rgba(150, 112, 42, .06) 78px 79px), repeating-linear-gradient(-60deg, transparent 0 78px, rgba(150, 112, 42, .06) 78px 79px), var(--bg); }
.orbit-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.orbit-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 130% 100% at 50% 50%, transparent 65%, rgba(247, 241, 232, .6) 100%), linear-gradient(0deg, rgba(247, 241, 232, .5), transparent 14%); }
.orbit-cards { position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: 1200px; }
.gcard { position: absolute; overflow: hidden; width: clamp(230px, 19vw, 290px); padding: 22px 22px 24px; border-radius: 20px; border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(255, 253, 248, .92), rgba(255, 250, 240, .74) 45%, rgba(220, 199, 127, .18)); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 30px 60px -32px rgba(70, 45, 20, .4), inset 0 1px 0 rgba(255, 255, 255, .85); opacity: var(--o, 0); transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + (1 - var(--o, 0)) * 60px), 0) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); will-change: transform, opacity; }
.gcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 48%, transparent 62%); transform: translateX(var(--sx, 0%)); pointer-events: none; }
.gcard b { display: block; margin-top: 4px; padding-right: .12em; white-space: nowrap; font: 800 clamp(30px, 2.9vw, 46px)/1.08 var(--display); letter-spacing: -.02em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums tabular-nums; }
.gcard b.gcard-text { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.gcard > span { display: block; margin-top: 10px; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.gcard .mono-tag { margin: 0 0 6px; font-size: 11px; }
.gcard--1 { left: max(20px, calc((100vw - 1180px) / 2 - 20px)); top: 56%; --o: calc(var(--c1, 0) * (1 - var(--po, 0))); }
.gcard--2 { right: max(20px, calc((100vw - 1180px) / 2 - 30px)); top: 38%; --o: calc(var(--c2, 0) * (1 - var(--po, 0))); }
.gcard--3 { right: max(20px, calc((100vw - 1180px) / 2 + 60px)); top: 68%; --o: calc(var(--c3, 0) * (1 - var(--po, 0))); }
.orbit-panel { position: absolute; z-index: 5; left: max(20px, calc((100vw - 1180px) / 2)); top: 50%; width: min(440px, calc(100vw - 40px)); padding: 34px 32px; opacity: var(--pp, 0); transform: translate3d(calc((1 - var(--pp, 0)) * -70px), -50%, 0); pointer-events: none; }
.orbit-panel.on { pointer-events: auto; }
.ghost-hint { position: absolute; z-index: 3; left: 50%; top: 104px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 11px 20px; border: 1px dashed var(--line-strong); border-radius: 99px; background: var(--glass); backdrop-filter: blur(8px); font: 700 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); opacity: 0; transition: opacity .8s; white-space: nowrap; pointer-events: none; }
.ghost-hint i { width: 9px; height: 9px; border-radius: 50%; border: 1px dashed var(--gold); animation: ping 3s ease-out infinite; }
.orbit.show-ghosts .ghost-hint { opacity: 1; }

/* ============ Hero: фирменный 3D-ролик + светящийся горизонт ============ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 120px; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 70% at 78% 32%, rgba(255, 238, 208, .95), transparent 62%), linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .55) 46%, transparent 54%), linear-gradient(118deg, transparent 58%, rgba(255, 255, 255, .35) 63%, transparent 68%), linear-gradient(180deg, #fbf7f0, var(--bg)); }
.hero-inner { position: relative; }
.hero h1 { font-size: clamp(28px, 4.2vw, 60px); max-width: 15ch; font-weight: 800; letter-spacing: -.02em; }
.hero .lead { max-width: 48ch; margin-top: 26px; font-size: clamp(16px, 1.4vw, 20px); color: var(--text-2); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 40px; margin: 48px 0 0; }
.hero-meta div { display: flex; flex-direction: column-reverse; }
.hero-meta dd { margin: 0; font: 800 30px/1 var(--display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums tabular-nums; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--glass); font-size: 14px; color: var(--text-2); }
.hero-badges .ico { width: 16px; height: 16px; color: var(--gold); stroke: currentColor; }
.hero-badges li.age { padding: 9px 12px; height: auto; min-width: 0; border-color: var(--line-strong); font: 700 12px/1 var(--body); letter-spacing: .06em; }
.hero-meta dt { margin-top: 8px; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.hero .scroll-cue { opacity: 1; }

/* ============ Масштаб: заголовок сцены ============ */
.net-head { position: absolute; z-index: 4; left: 0; right: 0; top: clamp(92px, 13vh, 140px); text-align: center; opacity: calc(var(--hh, 0) * (1 - var(--po, 0))); transform: translate3d(0, calc((1 - var(--hh, 0)) * 30px - var(--po, 0) * 40px), 0); pointer-events: none; }
.net-head .mono-tag { justify-content: center; }
.net-head h2 { max-width: none; font-size: clamp(30px, 4.8vw, 72px); line-height: 1.02; }
.net-count b { display: inline-block; min-width: 1.25ch; text-align: right; font-variant-numeric: lining-nums tabular-nums; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.net-line { display: block; margin-top: 10px; font-size: .5em; color: var(--text-2); }
.net-last { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--glass); font: 600 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.net-last i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px var(--gold); }
.panel-title { font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; }

/* ============ Лига городов: видео финала раскрывается при прокрутке ============ */
.lg-scene { position: relative; height: 300vh; background: var(--bg); }
.lg-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 70% 60% at 50% 50%, #fffaf1, var(--bg) 70%); }
.lg-word { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; opacity: calc(1 - var(--la, 0) * 1.4); }
.lg-word span { font: 900 clamp(80px, 14vw, 250px)/.9 var(--display); letter-spacing: -.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(150, 112, 42, .32); transform: translate3d(var(--wx, 0px), 0, 0); }
.lg-video { position: absolute; inset: 0; z-index: 2; overflow: hidden; transform: scale(var(--vs, .42)); border-radius: var(--vr, 60px); box-shadow: 0 40px 100px -34px rgba(60, 35, 15, .5), 0 0 0 1px var(--line-strong); will-change: transform; }
.lg-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 8, .55), rgba(10, 9, 8, .88)); opacity: var(--sh, 0); }
.lg-photo { position: absolute; z-index: 3; margin: 0; width: clamp(150px, 17vw, 260px); aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; border: 4px solid #fffdf8; box-shadow: 0 26px 50px -24px rgba(60, 35, 15, .45); opacity: var(--po, 1); transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg)); will-change: transform, opacity; }
.lg-photo img { width: 100%; height: 100%; object-fit: cover; }
.lg-photo--1 { left: 5%; top: 13%; --pr: -6deg; }
.lg-photo--2 { right: 6%; top: 17%; --pr: 5deg; }
.lg-photo--3 { left: 13%; bottom: 9%; --pr: 4deg; }
.lg-caption { position: absolute; z-index: 4; left: 50%; bottom: 8%; margin: 0; transform: translateX(-50%); white-space: nowrap; opacity: calc(1 - var(--la, 0) * 2.5); }
.lg-content { position: absolute; z-index: 5; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.lg-content.on { pointer-events: auto; }
.lg-content .eyebrow, .lg-content h2 { --ci: var(--lc0, 0); }
.lg-content .sub { --ci: var(--lc1, 0); color: var(--text-2); }
.lg-content .eyebrow, .lg-content h2, .lg-content .sub, .lg-glass, .lg-cta { opacity: var(--ci, 0); transform: translate3d(0, calc((1 - var(--ci, 0)) * 44px), 0); }
.lg-content h2 { max-width: 18ch; }
.lg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.lg-glass { padding: 26px 24px; border-radius: 20px; border: 1px solid rgba(246, 231, 172, .26); background: linear-gradient(135deg, rgba(255, 245, 220, .12), rgba(255, 245, 220, .03) 50%, rgba(220, 199, 127, .08)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lg-glass h3 { margin: 14px 0 8px; }
.lg-glass p { color: var(--text-2); font-size: 15px; }
.lg-glass--main { border-color: rgba(246, 231, 172, .5); background: linear-gradient(135deg, rgba(220, 199, 127, .22), rgba(220, 199, 127, .05)); }
.lgc--1 { --ci: var(--lc2, 0); } .lgc--2 { --ci: var(--lc3, 0); } .lgc--3 { --ci: var(--lc4, 0); }
.lg-cta { --ci: var(--lc4, 0); margin-top: 32px; }

/* ============ Платформа: живые Mac и iPhone ============ */
.platform-cta { margin-top: 26px; }
.devices { position: relative; padding: 30px 0 90px; perspective: 1600px; }
.devices-glow { position: absolute; left: 5%; right: -5%; top: 15%; bottom: 0; background: radial-gradient(ellipse 60% 50% at 55% 62%, rgba(201, 150, 70, calc(.08 + var(--dk, 1) * .14)), transparent 70%); filter: blur(24px); pointer-events: none; }
.mac { position: relative; width: 100%; }
.mac-screen { position: relative; padding: 12px 12px 14px; border-radius: 16px 16px 4px 4px; background: #0b0b0c; border: 1px solid #3b3b3e; box-shadow: 0 50px 90px -42px rgba(50, 30, 10, .55); transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--dk, 1)) * 22deg)) scale(calc(.9 + var(--dk, 1) * .1)); }
.mac-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #17130d; border-radius: 6px 6px 0 0; border-bottom: 1px solid var(--line); }
.mac-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3225; }
.mac-bar span { margin-left: 10px; font: 500 11px/1 var(--body); letter-spacing: .06em; color: var(--mute); }
.mac-screen video { display: block; width: 100%; aspect-ratio: 1100 / 654; object-fit: cover; border-radius: 0 0 4px 4px; background: #0f0d09; }
.mac-base { position: relative; height: 16px; margin: 0 -6%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #e4e4e7, #b9b9be 55%, #8e8e93); box-shadow: 0 30px 50px -26px rgba(50, 30, 10, .5); }
.mac-base::before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 6px; border-radius: 0 0 8px 8px; background: #a2a2a8; }
.device-label { justify-content: center; margin: 18px 0 0; font-size: 11px; color: var(--mute); }
.iphone { position: absolute; z-index: 3; left: -9%; bottom: 0; width: 31%; }
.iphone-frame { position: relative; aspect-ratio: 9 / 19.5; padding: 3.2%; border-radius: 15% / 7%; background: linear-gradient(145deg, #3c3c40, #121214 40%, #2a2a2e); box-shadow: 0 40px 70px -32px rgba(50, 30, 10, .6), 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .08); transform: rotateY(calc(14deg - var(--dk, 1) * 8deg)) rotateZ(-3deg); }
.island { position: absolute; z-index: 3; left: 35%; right: 35%; top: 2.8%; height: 3.4%; border-radius: 99px; background: #000; }
.app { position: relative; height: 100%; overflow: hidden; border-radius: 12% / 5.6%; background: radial-gradient(ellipse at 50% 0%, #1d170c, #0b0a08 60%); container-type: inline-size; color: var(--text); font-family: var(--body); }
.app--real { display: flex; flex-direction: column; background: #000; }
.app--real .app-status { flex: none; height: 5.57%; padding: 0 9cqw; align-items: center; }
.app-video { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 0; display: block; background: #000; }
.app-status { display: flex; justify-content: space-between; align-items: center; padding: 5cqw 9cqw 0; font: 600 4.4cqw/1 var(--body); }
.app-sig { display: flex; align-items: flex-end; gap: 1cqw; }
.app-sig i { width: 1.2cqw; border-radius: 1px; background: var(--text); }
.app-sig i:nth-child(1) { height: 1.6cqw; } .app-sig i:nth-child(2) { height: 2.4cqw; } .app-sig i:nth-child(3) { height: 3.2cqw; } .app-sig i:nth-child(4) { height: 4cqw; }
.app-scroll { display: grid; gap: 4cqw; padding: 7cqw 5cqw 26cqw; animation: app-scroll 18s ease-in-out infinite; }
@keyframes app-scroll { 0%, 14% { transform: translateY(0); } 46%, 62% { transform: translateY(-36%); } 94%, 100% { transform: translateY(0); } }
.app:hover .app-scroll { animation-play-state: paused; }
.app-top { display: flex; align-items: center; justify-content: space-between; }
.app-top img { width: 22cqw; height: auto; }
.app-top span { padding: 2cqw 3cqw; border: 1px solid var(--line-strong); border-radius: 99px; font: 600 3.2cqw/1 var(--body); color: var(--gold-hi); }
.app-card { padding: 4.5cqw; border: 1px solid var(--line); border-radius: 5cqw; background: rgba(255, 245, 220, .04); }
.app-k { margin-bottom: 2.4cqw; font: 700 2.8cqw/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.app-title { display: block; font: 700 4.4cqw/1.2 var(--display); }
.app-loyalty { display: flex; align-items: center; justify-content: space-between; border-color: var(--line-strong); background: linear-gradient(135deg, rgba(220, 199, 127, .18), rgba(220, 199, 127, .03)); }
.app-tier { display: block; font: 800 8cqw/1 var(--display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app-pts { margin-top: 2cqw; font-size: 3.4cqw; color: #d8d0bd; font-variant-numeric: lining-nums tabular-nums; }
.app-loyalty video { width: 30cqw; height: 30cqw; border-radius: 50%; object-fit: cover; mix-blend-mode: screen; }
.app-timer { margin: 2cqw 0 3cqw; font-size: 3.4cqw; color: #d8d0bd; }
.app-timer span { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--gold-hi); }
.app-bar { height: 1.6cqw; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.app-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold-grad); transition: width .8s; }
.app-row { display: flex; justify-content: space-between; align-items: center; margin-top: 3cqw; font-size: 3.2cqw; color: #cfc7b3; }
.app-btn { padding: 2.2cqw 4cqw; border-radius: 99px; background: var(--gold); color: #1a1406; font-weight: 700; font-size: 3.2cqw; }
.app-rating { display: grid; gap: 1.4cqw; margin: 0; padding: 0; list-style: none; }
.app-rating li { display: grid; grid-template-columns: 6cqw 1fr auto; align-items: center; gap: 2cqw; padding: 2cqw 2.4cqw; border-radius: 3cqw; font-size: 3.5cqw; transition: background .6s; }
.app-rating li:first-child { background: rgba(220, 199, 127, .14); }
.app-rating li.up { background: rgba(127, 214, 154, .16); }
.app-rating b { font-variant-numeric: lining-nums tabular-nums; }
.r-n { font-weight: 700; color: var(--gold); }
.app-league { position: relative; height: 34cqw; padding: 0; overflow: hidden; }
.app-league img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.app-league div { position: absolute; left: 4.5cqw; bottom: 4cqw; }
.app-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 4cqw 8cqw 7cqw; background: linear-gradient(180deg, transparent, rgba(10, 9, 8, .96) 35%); }
.app-tabs i { width: 6cqw; height: 6cqw; border: 1.5px solid var(--mute); border-radius: 1.8cqw; }
.app-tabs i.on { border-color: var(--gold); background: rgba(220, 199, 127, .25); }

/* ============ Ticker ============ */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, #efe5d6, #f6efe4); padding: 20px 0; }
.ticker-track { display: flex; gap: 28px; width: max-content; animation: marq 70s linear infinite; font: 600 clamp(15px, 1.6vw, 20px)/1 var(--display); letter-spacing: -.01em; white-space: nowrap; color: var(--text-2); }
.ticker-track em { font-style: normal; color: var(--gold); opacity: .8; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ============ Numbers ============ */
.apply-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ============ О СРП ============ */
.about { overflow: hidden; background: linear-gradient(180deg, var(--bg), var(--bg2)); }
.about-mark { position: absolute; left: 50%; top: 50%; width: min(1300px, 110vw); transform: translate3d(-50%, calc(-50% + var(--py, 0px)), 0); opacity: .07; pointer-events: none; }
.about-mark img { width: 100%; height: auto; filter: grayscale(.3) brightness(.55); }
.about-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.about h2 { max-width: 14ch; font-size: clamp(30px, 4.4vw, 60px); }
.about-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--text-2); }
.nomoney { display: flex; gap: 18px; align-items: flex-start; margin-top: 28px; padding: 22px 24px; border: 1px solid rgba(122, 28, 52, .25); border-radius: 18px; background: linear-gradient(135deg, rgba(122, 28, 52, .09), rgba(122, 28, 52, .03)); }
.nomoney-ico { flex: none; width: 64px; height: 64px; margin: -6px 0 -6px -4px; }
.nomoney p { color: var(--text-2); font-size: 15.5px; }

/* ============ Why ============ */
.cards.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--4 .card { padding: 24px 22px 26px; }
.cico { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2b2416, #0e0b07 72%); box-shadow: 0 14px 30px -12px #000, inset 0 0 0 1px rgba(220, 199, 127, .35); }
.cico::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed rgba(220, 199, 127, .32); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.cico svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(220, 199, 127, .25)); }
.card:hover .cico::before { transform: rotate(90deg); }
/* 3D-иконки из пака: объёмный предмет без кружка-подложки */
.cico--img { width: 84px; height: 84px; background: none; box-shadow: none; }
.cico--img::before { content: none; }
/* тень запечена в саму картинку (Safari обрезал CSS drop-shadow квадратом <img>): холст больше предмета —
   по бокам 25%, сверху 12.5%, снизу 37.5%; --s — размер самого предмета, место в вёрстке прежнее */
.cico--img img, .nomoney-ico img, img.ico-lg, .panel-ico { width: calc(var(--s) * 1.5); height: calc(var(--s) * 1.5); max-width: none; margin: calc(var(--s) * -.125) calc(var(--s) * -.25) calc(var(--s) * -.375); }
.cico--img img { --s: 84px; }
.nomoney-ico img { --s: 64px; display: block; }
img.ico-lg { --s: 60px; margin-left: calc(var(--s) * -.25 - 6px); }
/* миниатюра России: широкая, поэтому своя ширина, высота по пропорции */
.cico--map { width: 150px; justify-items: start; }
/* карта: поля от ширины предмета — по бокам 14.14%, сверху 7.07%, снизу 21.21%; высота предмета 0.4697 ширины */
.cico--map img { --s: 150px; width: calc(var(--s) * 1.2828); height: auto; margin: calc(var(--s) * -.0707) calc(var(--s) * -.1414) calc(var(--s) * -.2121); }
img.ico-lg--map { --w: 118px; --h: 60px; width: calc(var(--w) * 1.2828); height: auto; margin: calc(var(--w) * -.0707 + (var(--h) - var(--w) * .4697) / 2) calc(var(--w) * -.1414) calc(var(--w) * -.2121 + (var(--h) - var(--w) * .4697) / 2) calc(var(--w) * -.1414 - 4px); }
.panel-ico { position: absolute; top: -34px; right: 24px; --s: 72px; }
.card h3 { margin-top: 16px; }
.why-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 12px; margin-top: 30px; text-align: center; font: 700 clamp(20px, 2.4vw, 32px)/1.2 var(--display); letter-spacing: -.02em; }
.why-total > span { color: var(--text-2); }

/* ============ Преимущества: две колонки ============ */
.benefits { background: linear-gradient(180deg, var(--bg), var(--bg2)); }
.benefits-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; margin-top: 34px; align-items: stretch; }
.bpanel { position: relative; display: flex; flex-direction: column; padding: 28px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; }
.bpanel--gold { border-color: var(--line-strong); background: linear-gradient(150deg, rgba(220, 199, 127, .3), rgba(255, 252, 246, .92) 55%, rgba(122, 28, 52, .07)); }
.bpanel-tag { margin-bottom: 14px; font-size: 11px; }
.bpanel h3 { font-size: clamp(20px, 1.8vw, 26px); margin-bottom: 24px; max-width: 22ch; }
.blist { display: grid; gap: 9px; margin-bottom: 22px; counter-reset: b; }
.blist--2 { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.blist li { position: relative; padding-left: 40px; min-height: 26px; color: var(--text-2); line-height: 1.4; counter-increment: b; }
.blist li::before { content: counter(b, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 600 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--gold); padding: 5px 0; width: 28px; border-bottom: 1px solid var(--line-strong); }
.bpanel .btn { margin-top: auto; align-self: flex-start; }

/* ============ Запуск ============ */
.launch { padding: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); }
.launch-lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-2); }
.launch-facts { display: grid; gap: 14px; margin: 28px 0 32px; }
.launch-facts div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.launch-facts dt { font-weight: 700; color: var(--gold-hi); }
.launch-facts dd { margin: 0; color: var(--mute); text-align: right; }

/* ============ Лучшие клубы России ============ */
.best-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 30px 0 0; border-block: 1px solid var(--line); }
.best-stats div { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px; border-left: 1px solid var(--line); }
.best-stats div:first-child { border-left: 0; padding-left: 0; }
.best-stats dd { margin: 0; font: 800 clamp(30px, 3.4vw, 48px)/1.05 var(--display); letter-spacing: -.02em; white-space: nowrap; padding-right: .1em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums tabular-nums; }
.best-stats dt { color: var(--mute); font-size: 14px; line-height: 1.4; }
.best-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ============ Лига: пункты ============ */
.lg-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; --ci: var(--lc1, 0); opacity: var(--ci, 0); transform: translate3d(0, calc((1 - var(--ci, 0)) * 44px), 0); }
.lg-points li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 15px; }
.lg-points .ico { color: var(--gold); stroke: currentColor; width: 18px; height: 18px; }
.why { background: linear-gradient(180deg, var(--bg), var(--bg2)); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.join { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 28px; padding: 34px 38px; border-color: var(--line-strong); }
.join h3 { margin-bottom: 10px; }
.join p { color: var(--mute); max-width: 62ch; }

/* ============ League ============ */

/* ============ Platform ============ */
.platform { background: var(--bg2); overflow: hidden; }
.platform-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.feat { margin-top: 28px; display: grid; gap: 12px; }
.feat li, .included li, .apply-points li { display: flex; gap: 12px; align-items: flex-start; }
.feat .ico, .included .ico, .apply-points .ico { color: var(--gold); margin-top: 3px; stroke: currentColor; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tabs button { padding: 11px 18px; border-radius: 99px; border: 1px solid var(--line); background: transparent; cursor: pointer; font: 600 14px/1 var(--body); color: var(--mute); transition: all .25s; }
.tabs button[aria-selected="true"] { background: var(--gold); color: #fffaf0; border-color: var(--gold); }
.tabs button:hover { color: var(--text); border-color: var(--line-strong); }
.tabs button[aria-selected="true"]:hover { color: #fffaf0; }

/* ============ Partners ============ */
.partners { background: linear-gradient(180deg, var(--bg2), var(--bg)); }
.partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: 36px; align-items: start; }
.included { padding: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); }
.included h3 { margin-bottom: 22px; }
.included ul { display: grid; gap: 15px; margin-bottom: 32px; }
.steps { position: relative; display: grid; gap: 22px; padding-left: 8px; }
.steps::before { content: ""; position: absolute; z-index: 0; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.steps::after { content: ""; position: absolute; z-index: 0; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--gold-grad); transform-origin: top; transform: scaleY(var(--sp2, 0)); }
.steps li { position: relative; z-index: 1; display: flex; gap: 22px; align-items: flex-start; }
.steps b { flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 0; border-radius: 50%; background: #fffdf8; box-shadow: 0 0 0 6px var(--bg); border: 2px solid var(--gold); color: var(--gold-hi); font: 800 16px/1 var(--display); z-index: 1; }
.steps h4 { font-size: 20px; margin: 6px 0 8px; }
.steps p { color: var(--mute); }

/* ============ Clubs ============ */
.clubs { background: var(--bg); overflow: hidden; }
.wall { margin-bottom: clamp(34px, 4.5vw, 60px); display: grid; gap: 18px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wall-row { overflow: hidden; }
.wall-track { display: flex; gap: 18px; width: max-content; animation: marq 80s linear infinite; }
.wall-row--rev .wall-track { animation-direction: reverse; animation-duration: 95s; }
.wall:hover .wall-track { animation-play-state: paused; }
.medal { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: none; border: 0; box-shadow: none; overflow: hidden; }
.medal img { width: 88%; height: 88%; object-fit: contain; border-radius: 0; filter: brightness(.5) sepia(.55) saturate(1.5) contrast(1.15); opacity: .85; }
.finder { margin-top: 30px; display: grid; gap: 12px; }
.finder input { max-width: 480px; padding: 16px 20px; border-radius: 99px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); background: transparent; cursor: pointer; font: 600 14px/1 var(--body); color: var(--mute); transition: all .2s; }
.chip b { margin-left: 4px; color: var(--gold); font-weight: 700; }
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.is-on { background: var(--gold); color: #fffaf0; border-color: var(--gold); }
.chip.is-on b { color: #fffaf0; }
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 26px; }
.club { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 0; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; }
.club-mark { position: absolute; z-index: -1; right: -18%; bottom: -16%; width: 74%; aspect-ratio: 1; object-fit: contain; opacity: .1; filter: grayscale(.3) sepia(.5) brightness(.5); transform: rotate(-8deg); transition: opacity .5s, transform .8s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.club:hover .club-mark { opacity: .16; transform: rotate(-3deg) scale(1.04); }
.club[hidden] { display: none; }
.club-medal { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #2a2417, #0f0c07 70%); border: 1px solid var(--line-strong); overflow: hidden; }
.club-medal img { width: 82%; height: 82%; object-fit: contain; border-radius: 50%; }
.club-body { position: relative; min-width: 0; display: flex; flex-direction: column; flex: 1; }
.club-meta { margin-top: auto; }
.club-city { font: 700 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.club h3 { font-size: 19px; margin-bottom: 8px; }
.club-blurb { color: var(--mute); font-size: 14.5px; line-height: 1.5; margin-bottom: 10px; }
.club-meta { display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.club-meta a { color: var(--gold-hi); border-bottom: 1px solid var(--line-strong); }
.club-meta a:hover { border-color: var(--gold); }
.empty { margin-top: 36px; color: var(--mute); }
.empty a { color: var(--gold-hi); text-decoration: underline; }

/* ============ Reviews ============ */

/* ============ FAQ ============ */
.faq { background: var(--bg2); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .btn { margin-top: 28px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--body); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--gold), var(--gold)) center / 100% 2px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 2px 100% no-repeat; transition: transform .3s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details p { padding: 0 0 26px; color: var(--mute); max-width: 62ch; animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } }

/* ============ Apply ============ */
.apply-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.apply-points { display: grid; gap: 16px; margin-top: 32px; color: var(--text-2); }
.form { padding: 30px; border-color: var(--line-strong); box-shadow: 0 40px 80px -40px rgba(40, 15, 25, .6); display: grid; gap: 12px; }
.form h3 { font-size: 24px; }
.field label { display: block; margin-bottom: 7px; font-size: 13px; color: var(--mute); }
.field input.bad { border-color: #c4323f; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: #fffdf8; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--mute); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold); }
.consent a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 2px; }
.form-status { min-height: 1.4em; font-size: 14px; }
.form-status.ok { color: #2f7a4a; }
.form-status.err { color: #b3263a; }

/* ============ Footer, sticky CTA, cookie ============ */
.footer { border-top: 1px solid var(--line); padding: 56px 0 90px; background: linear-gradient(180deg, #3b1529, #2a0e1e); }
.foot { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.legal { max-width: 46ch; margin-top: 20px; color: var(--mute); font-size: 13px; line-height: 1.6; }
.foot-links { display: grid; gap: 10px; font-size: 14px; color: var(--mute); }
.foot-links a:hover { color: var(--gold-hi); }
.foot-links p { margin-top: 10px; line-height: 1.7; }
.sticky-cta { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 7px 7px 26px; border-radius: 999px; background: #9a742a; color: #fffaf0; font: 600 16px/1 var(--body); letter-spacing: 0; box-shadow: 0 16px 36px -14px rgba(60, 35, 15, .5); transform: translateY(140%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.sticky-cta .ico { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: #fffaf0; color: #7d5a1b; stroke: #7d5a1b; }
.sticky-cta.show { transform: none; }
.cookie { position: fixed; z-index: 110; left: 20px; bottom: 20px; max-width: 420px; padding: 20px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(255, 252, 246, .97); box-shadow: var(--shadow); backdrop-filter: blur(14px); font-size: 14px; display: grid; gap: 14px; }
.cookie[hidden] { display: none; }

/* ============ Responsive ============ */
@media (max-width: 1180px) { .nav { gap: 18px; } .nav a { font-size: 13px; } }
@media (max-width: 1020px) {
  .nav { display: none; }
  .cards.cards--4 { grid-template-columns: 1fr 1fr; }
  .benefits-grid, .about-grid { grid-template-columns: 1fr; }
  .best-stats { grid-template-columns: 1fr 1fr; }
  .best-stats div:nth-child(3) { border-left: 0; padding-left: 0; }
  .best-stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cards, .league-grid { grid-template-columns: 1fr 1fr; }
  .platform-grid, .partners-grid, .faq-grid, .apply-grid { grid-template-columns: 1fr; }
  .devices { width: 100%; max-width: 720px; justify-self: center; margin: 20px 0 0; padding-left: 8%; }
  .lg-cards { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .lg-glass { padding: 20px 18px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .bar { height: 64px; }
  .brand img { height: 18px; }
  .btn--sm { padding: 12px 14px; }
  .cards, .league-grid, .cards.cards--4 { grid-template-columns: 1fr; }
  .blist--2 { grid-template-columns: 1fr; }
  .bpanel { padding: 26px 22px; }
  .launch { padding: 26px 22px; }
  .lg-points { display: none; }
  .best-stats div { padding: 18px 14px; }
  .best-stats div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .orbit { height: 420vh; }
  .hero { padding: 104px 0 110px; justify-content: flex-start; }
  .hero-meta { gap: 24px; margin-top: 32px; } .hero-meta dd { font-size: 24px; }
  .net-head { top: 84px; } .net-head h2 { font-size: 30px; } .net-last { margin-top: 10px; }
  .lg-scene { height: 300vh; }
  .lg-photo { width: 36vw; } .lg-photo--1 { left: -4%; top: 12%; } .lg-photo--2 { right: -6%; top: 22%; } .lg-photo--3 { left: 6%; bottom: 12%; }
  .lg-word span { font-size: 18vw; }
  .lg-content h2 { font-size: 26px; } .lg-content .sub { display: none; }
  .lg-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .lg-glass { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 14px 16px; }
  .lg-glass .ico-lg { --s: 42px; grid-row: span 2; }
  .lg-glass .ico-lg--map { --w: 46px; --h: 42px; }
  .panel-ico { top: -26px; right: 16px; --s: 54px; }
  .lg-glass h3 { margin: 0 0 4px; font-size: 16px; } .lg-glass p { font-size: 13px; }
  .lg-cta { margin-top: 18px; width: 100%; }
  .devices { padding: 10px 0 70px 14%; }
  .iphone { left: -2%; width: 40%; }
  .cta-row { margin-top: 26px; } .cta-row .btn { width: 100%; } .cta-row .btn:has(> .ico) { justify-content: space-between; }
  .gcard { width: 44vw; padding: 14px 14px 16px; border-radius: 16px; }
  .gcard b { font-size: 28px; } .gcard > span { font-size: 12px; margin-top: 6px; }
  .gcard--1 { left: 14px; top: 66%; } .gcard--2 { right: 14px; top: 76%; } .gcard--3 { display: none; }
  .orbit-panel { top: auto; bottom: calc(14px + 100lvh - 100svh); left: 14px; right: 14px; width: auto; padding: 20px 20px 18px; transform: translate3d(0, calc((1 - var(--pp, 0)) * 60px), 0); }
  .scene-lead { display: none; }
  .counter { margin: 10px 0 0; } .counter b { font-size: 44px; }
  .citycheck { margin-top: 12px; padding-top: 12px; }
  .citycheck-out { min-height: 0; margin-top: 8px; font-size: 14px; }
  .ghost-hint { top: 84px; font-size: 10px; padding: 9px 14px; }
  .join { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .included { padding: 26px 22px; }
  .form { padding: 26px 20px; }
  .club { padding: 18px; }
  .sticky-cta { display: flex; }
  .cookie { left: 12px; right: 12px; bottom: 84px; max-width: none; }
  .footer { padding-bottom: 110px; }
}

/* Без анимаций по запросу системы */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; --ry: 0px; }
  .ticker-track, .wall-track, .app-scroll { animation: none; }
}

/* Заголовки секций проявляются по словам из-под маски */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wd > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms)); }
.reveal.in .wd > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .wd > span { transform: none !important; } }

/* ============ Отзывы партнёров: колода игральных карт ============
   Справа — колода: сверху карта выбранного клуба (видео VK открывается прямо на ней), за ней ещё две.
   Слева — цитата с выделенной фразой и логотипы клубов; кольцо вокруг активного — таймер автолистания. */
.reviews { background: linear-gradient(180deg, var(--bg), var(--bg2)); overflow: hidden; }
.reviews.section { padding-bottom: clamp(56px, 7vw, 100px); }
.rv { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(28px, 4vw, 52px); }
.rv-copy { position: relative; min-width: 0; }
.rv-count { position: relative; gap: 14px; margin: 0; }
.rv-count b { font-weight: 700; color: var(--text); }
.rv-count-l { color: var(--mute); }
.rv-count-l::before { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 12px 0 0; vertical-align: middle; background: var(--line-strong); }
.rv-quotes { position: relative; display: grid; margin-top: 22px; }
.rv-q { grid-area: 1 / 1; margin: 0; }
.js .rv-q { opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s; }
.js .rv-q.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .15s, transform .8s cubic-bezier(.2, .7, .2, 1) .15s, visibility 0s; }
.rv-q blockquote { margin: 0; font: 500 clamp(20px, 2vw, 29px)/1.4 var(--display); letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.rv-q em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-who { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.rv-who b { display: block; font: 700 17px/1.2 var(--body); color: var(--text); }
.rv-who .rv-cap > span { display: block; margin-top: 6px; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.rv-ms { display: flex; flex: none; }
.rv-m { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2c2518, #0f0c07 70%); border: 1px solid rgba(220, 199, 127, .55); box-shadow: 0 10px 20px -12px rgba(50, 30, 10, .7); }
.rv-m + .rv-m { margin-left: -14px; }
.rv-m img { width: 74%; height: 74%; object-fit: contain; }
.rv-actions { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.rv-watch { gap: 12px; }
.rv-tri { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.rv-soon { padding: 17px 24px; border: 1px dashed var(--line-strong); border-radius: 999px; font: 600 15px/1 var(--body); color: var(--mute); }
.rv-soon[hidden], .rv-watch[hidden] { display: none; }
.rv-arrows { display: flex; gap: 10px; margin-left: auto; }
.rv-picker { display: flex; gap: 8px; margin: 30px -6px 0; padding: 6px; overflow-x: auto; scrollbar-width: none; }
.rv-picker::-webkit-scrollbar { display: none; }
.rv-pick { position: relative; flex: none; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: .55; transition: opacity .3s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.rv-pick:hover, .rv-pick.is-active { opacity: 1; }
.rv-pick.is-active { transform: translateY(-3px); }
.rv-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rv-pick .rv-ms:has(.rv-m + .rv-m) .rv-m { width: 38px; height: 38px; }
.rv-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); pointer-events: none; }
.rv-ring circle { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; }
.rv-pick.is-active .rv-ring circle { stroke-dashoffset: 0; }
.rv.is-auto .rv-pick.is-active .rv-ring circle { animation: rv-prog var(--rv-t, 8s) linear both; }
.rv.is-paused .rv-pick.is-active .rv-ring circle { animation-play-state: paused; }
@keyframes rv-prog { from { stroke-dashoffset: 176; } to { stroke-dashoffset: 0; } }

.rv-stage { position: relative; display: grid; place-items: center; padding: 8px 64px 34px 0; }
.rv-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -310px; border-radius: 50%; background: radial-gradient(circle, rgba(154, 116, 42, .2), transparent 62%); pointer-events: none; }
.rv-deck { position: relative; width: 300px; aspect-ratio: 5 / 7; touch-action: pan-y; transition: aspect-ratio .5s cubic-bezier(.2, .7, .2, 1); }
.rv-deck.is-playing { aspect-ratio: 9 / 16; }
/* --k — место в колоде: 0 сверху, 1–2 выглядывают из-за неё, 3 — скрыта */
.rv-card { position: absolute; inset: 0; z-index: calc(20 - var(--k, 0)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 22px 34px; border-radius: 22px; border: 1px solid rgba(154, 116, 42, .38); background: linear-gradient(160deg, #fffdf8, #f5ecdd); color: var(--text); box-shadow: 0 34px 60px -34px rgba(70, 45, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .9); transform-origin: 50% 90%; transform: translate3d(calc(var(--k, 0) * 30px), calc(var(--k, 0) * 12px), 0) rotate(calc(var(--k, 0) * 4deg)) scale(calc(1 - var(--k, 0) * .05)); transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; user-select: none; -webkit-user-select: none; cursor: pointer; }
.rv-card.is-front { cursor: default; }
.rv-card.is-hidden { opacity: 0; pointer-events: none; }
/* карта уходит со стола влево — как при раздаче */
.rv-card.is-out { z-index: 30; opacity: 0; pointer-events: none; transform: translate3d(-115%, 40px, 0) rotate(-16deg); }
.rv-card::before { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(154, 116, 42, .28); pointer-events: none; }
.rv-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bg2); opacity: calc(var(--k, 0) * .3); transition: opacity .6s ease; pointer-events: none; }
.rv-idx { position: absolute; top: 22px; left: 22px; display: flex; flex-direction: column; align-items: center; font: 800 22px/1 var(--display); color: var(--text); }
.rv-idx i { margin-top: 3px; font: 400 20px/1 var(--body); font-style: normal; }
.rv-idx--br { top: auto; left: auto; right: 22px; bottom: 22px; transform: rotate(180deg); }
.rv-card[data-suit="h"] .rv-idx, .rv-card[data-suit="d"] .rv-idx { color: #a3242f; }
.rv-tag { position: absolute; top: 26px; left: 0; right: 0; text-align: center; font: 600 10px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .18em; color: var(--gold); }
.rv-medals { position: relative; display: flex; justify-content: center; }
.rv-medal { position: relative; flex: none; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2c2518, #0f0c07 70%); border: 1px solid rgba(246, 212, 143, .6); box-shadow: 0 22px 36px -16px rgba(50, 30, 10, .6), 0 0 0 7px rgba(201, 162, 79, .13); }
.rv-medal img { width: 74%; height: 74%; object-fit: contain; }
.rv-medal + .rv-medal { margin-left: -28px; }
.rv-medals:has(.rv-medal + .rv-medal) .rv-medal { width: 104px; height: 104px; }
.rv-medals::before { content: ""; position: absolute; left: 50%; top: 50%; width: 164px; height: 164px; margin: -82px 0 0 -82px; border-radius: 50%; border: 1px dashed rgba(154, 116, 42, .35); }
.rv-card.is-front .rv-medals::before { animation: rc-spin 30s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.rv-name { margin-top: 26px; font: 800 19px/1.2 var(--display); letter-spacing: -.01em; text-align: center; }
.rv-city { margin-top: 8px; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.rv-play { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 10px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.rv-play i { position: relative; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #f6e7ac, #dcc77f 45%, #a8873d); box-shadow: 0 12px 26px -10px rgba(150, 110, 30, .75); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.rv-play i::after { content: ""; position: absolute; left: 21px; top: 17px; border-left: 16px solid #1a1406; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.rv-card.is-front .rv-play i { animation: rc-pulse 2.6s ease-out infinite; }
.rv-play:hover i { transform: scale(1.08); }
.rv-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 8px; }
@keyframes rc-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 180, 90, .5), 0 12px 26px -10px rgba(150, 110, 30, .75); } 70%, 100% { box-shadow: 0 0 0 16px rgba(220, 180, 90, 0), 0 12px 26px -10px rgba(150, 110, 30, .75); } }
.rv-soon-tag { margin-top: 26px; padding: 9px 14px; border: 1px dashed var(--line-strong); border-radius: 99px; font: 600 10px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.rv-card iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; border-radius: inherit; background: #000; }
@media (max-width: 1020px) {
  .rv { grid-template-columns: minmax(0, 1fr) 300px; }
  .rv-deck { width: 250px; }
  .rv-stage { padding-right: 52px; }
  .rv-medal { width: 108px; height: 108px; }
  .rv-medals:has(.rv-medal + .rv-medal) .rv-medal { width: 88px; height: 88px; }
  .rv-medals::before { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
}
@media (max-width: 760px) {
  .rv { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rv-stage { order: -1; padding: 0 46px 22px 0; }
  .rv-stage::before { width: 420px; height: 420px; margin: -210px 0 0 -230px; }
  .rv-deck { width: min(236px, 62vw); }
  .rv-card { padding: 38px 16px 26px; border-radius: 18px; }
  .rv-card::before { inset: 8px; border-radius: 12px; }
  .rv-idx { top: 16px; left: 16px; font-size: 17px; } .rv-idx i { font-size: 16px; }
  .rv-idx--br { top: auto; left: auto; right: 16px; bottom: 16px; }
  .rv-tag { top: 22px; font-size: 9px; }
  .rv-medal { width: 92px; height: 92px; }
  .rv-medals:has(.rv-medal + .rv-medal) .rv-medal { width: 76px; height: 76px; }
  .rv-medal + .rv-medal { margin-left: -20px; }
  .rv-medals::before { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  .rv-name { margin-top: 18px; font-size: 15.5px; }
  .rv-city { font-size: 10px; }
  .rv-play { margin-top: 16px; } .rv-play i { width: 46px; height: 46px; } .rv-play i::after { left: 18px; top: 14px; border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }
  .rv-q blockquote { font-size: 18.5px; font-weight: 450; }
  .rv-who { margin-top: 20px; }
  .rv-actions { margin-top: 22px; }
  .rv-watch { flex: 1; justify-content: center; }
  .rv-picker { margin: 22px -20px 0; padding: 6px 20px; }
}
html[data-theme="dark"] .rv-card { border-color: rgba(220, 199, 127, .32); background: linear-gradient(160deg, #1d1810, #0c0a07); box-shadow: 0 34px 60px -26px #000, inset 0 1px 0 rgba(255, 240, 200, .06); }
html[data-theme="dark"] .rv-card::before { border-color: rgba(220, 199, 127, .2); }
html[data-theme="dark"] .rv-card::after { background: #0a0908; }
html[data-theme="dark"] .rv-card[data-suit="h"] .rv-idx, html[data-theme="dark"] .rv-card[data-suit="d"] .rv-idx { color: #e0605f; }
html[data-theme="dark"] .rv-medal { box-shadow: 0 22px 40px -14px #000, 0 0 0 7px rgba(246, 212, 143, .06), 0 0 60px rgba(220, 170, 90, .22); }
html[data-theme="dark"] .rv-medals::before { border-color: rgba(246, 212, 143, .26); }
html[data-theme="dark"] .rv-stage::before { background: radial-gradient(circle, rgba(220, 170, 90, .14), transparent 62%); }
@media (prefers-reduced-motion: reduce) { .rv-card, .rv-q { transition: none !important; } .rv-card.is-front .rv-medals::before, .rv-card.is-front .rv-play i { animation: none; } }
.rail-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--glass); color: var(--gold-hi); cursor: pointer; transition: border-color .2s, background .2s; }
.rail-btn:hover { border-color: var(--gold); background: rgba(220, 199, 127, .1); }
.rail-btn[data-rv="-1"] .ico { transform: scaleX(-1); }

/* ============ Карточка клуба: обложка и «подробнее» ============ */
.club-cover { margin: -20px -20px 14px; aspect-ratio: 16 / 9; overflow: hidden; cursor: zoom-in; border-bottom: 1px solid var(--line); }
.club-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.club:hover .club-cover img { transform: scale(1.04); }
.club-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 0 2px; border: 0; background: none; color: var(--gold-hi); font: 600 14.5px/1 var(--body); cursor: pointer; }
.club-more .ico { width: 16px; height: 16px; transition: transform .25s; }
.club-more:hover .ico { transform: translateX(4px); }

/* ============ Попап клуба ============ */
.modal-open { overflow: hidden; }
.club-modal { width: min(980px, calc(100vw - 32px)); max-height: calc(100svh - 48px); padding: 0; border: 1px solid var(--line-strong); border-radius: 26px; background: var(--bg); color: var(--text); box-shadow: 0 60px 120px -40px rgba(40, 25, 10, .5); overflow: hidden; }
.club-modal::backdrop { background: rgba(40, 28, 20, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.club-modal[open] { animation: cm-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes cm-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.cm-inner { display: grid; grid-template-columns: 1.05fr 1fr; max-height: calc(100svh - 48px); }
.cm-close { position: absolute; z-index: 5; right: 14px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--glass); color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; }
.cm-gallery { position: relative; min-height: 420px; background: #efe6d8; }
.cm-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cm-track::-webkit-scrollbar { display: none; }
.cm-track img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.cm-arrow { position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--glass); color: var(--gold-hi); cursor: pointer; }
.cm-arrow--prev { left: 14px; } .cm-arrow--prev .ico { transform: scaleX(-1); }
.cm-arrow--next { right: 14px; }
.cm-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; }
.cm-dot { width: 8px; height: 8px; padding: 0; border-radius: 99px; border: 0; background: rgba(246, 231, 172, .4); cursor: pointer; transition: width .3s, background .3s; }
.cm-dot.on { width: 26px; background: var(--gold); }
.cm-noimg { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #5a1d3a, #2a0a1b 72%); }
.cm-noimg img { width: 58%; max-width: 280px; opacity: .9; filter: drop-shadow(0 20px 40px #000); }
.cm-body { padding: 34px 34px 30px; overflow-y: auto; }
.cm-head { display: flex; align-items: center; gap: 16px; margin: 0 40px 22px 0; }
.cm-logo { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #2a2417, #0f0c07 70%); border: 1px solid var(--line-strong); overflow: hidden; }
.cm-logo img { width: 84%; height: 84%; object-fit: contain; }
.cm-head h3 { font-size: clamp(22px, 2.4vw, 30px); }
.cm-about { display: grid; gap: 12px; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.cm-meta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.cm-cta { margin-top: 24px; }
@media (max-width: 760px) {
  .cm-inner { grid-template-columns: 1fr; overflow-y: auto; }
  .cm-gallery { min-height: 0; aspect-ratio: 4 / 3; }
  .cm-body { padding: 24px 20px 24px; overflow: visible; }
  .cm-cta .btn { width: 100%; white-space: normal; }
}

/* ============ Финальный блок: стол СРП с картой как фон (по мотивам макета сукна) ============ */
.apply { padding: clamp(130px, 12vw, 170px) 0 clamp(90px, 9vw, 130px); overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 75% 60% at 50% 38%, #fffaf2, #f3eadc 60%, #ebdfcc 100%); }
.apply .apply-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.apply-map { position: absolute; inset: 2% -8% 6%; background: #9a742a; opacity: .1; -webkit-mask: url("/img/map-russia.svg") center 42% / min(1560px, 125%) auto no-repeat; mask: url("/img/map-russia.svg") center 42% / min(1560px, 125%) auto no-repeat; }
.apply-flares { display: none; }
.pt-flares { filter: drop-shadow(0 2px 6px rgba(150, 110, 30, .3)); }
.apply-table { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 34px 50px rgba(60, 20, 30, .35)); }
.apply::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: none; }
.apply-grid { position: relative; align-items: center; }
.apply-copy h2 { max-width: 16ch; }
.apply .form { background: linear-gradient(160deg, #fffdf8, #f8f1e5); border-color: rgba(201, 162, 79, .55); }



.panel-cta { margin-top: 22px; }

/* Клубы на мобильном: горизонтальная карусель вместо длинного списка (листается сама, см. main.js) */
@media (max-width: 760px) {
  .club-grid { display: flex; gap: 12px; margin-inline: -20px; padding: 2px 20px 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overflow-anchor: none; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  /* в карусели карточки видны сразу: «всплытие» снизу у каждой новой карточки выглядело как дрожание */
  .club-grid > .club.reveal { opacity: 1; --ry: 0px; transition: none; }
  .club-grid::-webkit-scrollbar { display: none; }
  .club-grid > .club { flex: 0 0 84%; scroll-snap-align: start; }
}

/* Мобильное меню: бургер раскрывает навигацию под шапкой; на телефоне заявка — только нижней кнопкой */
.burger, .nav-cta { display: none; }
@media (max-width: 1020px) {
  .bar > .head-cta { margin-left: auto; }
  .burger { position: relative; display: grid; place-content: center; gap: 6px; width: 46px; height: 46px; margin-left: -12px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--glass); cursor: pointer; }
  .burger i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--burg); transition: transform .3s; }
  .menu-open .burger i:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-open .burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-open, .menu-open body { overflow: hidden; }
  .menu-open .site-header { background: rgba(250, 246, 239, .98); border-bottom-color: var(--line); transform: none; }
  .menu-open .nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; gap: 0; height: calc(100svh - 76px); padding: 12px 20px 28px; overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); }
  .menu-open .nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font: 600 20px/1.2 var(--display); color: var(--text); }
  .menu-open .nav a:not(.btn)::after { content: none; }
  .menu-open .nav .nav-cta { display: inline-flex; margin-top: 24px; font-size: 15px; }
  .menu-open .sticky-cta { display: none; }
}
@media (max-width: 760px) {
  .head-cta { display: none; }
  .panel-cta { width: 100%; padding: 16px 12px; font-size: 12px; letter-spacing: .06em; }
  .burger { margin-left: 0; }
  .menu-open .nav { height: calc(100svh - 64px); }
}

/* Видео с подложкой: размытая мини-копия прямо в HTML -> фото-постер -> ролик, когда реально пошли кадры.
   На плохой связи и в iOS (чёрный кадр до загрузки) вместо пустого блока всегда видно фото. */
.vbox { background: var(--lq, none) center / cover no-repeat; }
.vbox > .vbox-poster, .vbox > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vbox > video { opacity: 0; transition: opacity .6s ease; }
.vbox.is-ready > video { opacity: 1; }
/* когда ролик пошёл — фото и мини-копия гаснут: у карт в hero прозрачный фон, иначе сквозь него видно постер */
.vbox > .vbox-poster { transition: opacity .6s ease; }
.vbox.is-ready > .vbox-poster { opacity: 0; }
.vbox.is-ready { background-image: none; }
.lg-video .vbox { position: absolute; inset: 0; }
.mac-screen .vbox { position: relative; aspect-ratio: 1100 / 654; overflow: hidden; border-radius: 0 0 4px 4px; background-color: #e3e7ef; }
.app--real .vbox { position: relative; flex: 1; min-height: 0; background-color: #000; }
.app--real .vbox > * { object-position: 50% 0; }
.reveal-now .reveal { opacity: 1; --ry: 0px; transition: none; }

/* Hero: медведь СРП — главный образ сети, статично, часть уходит за правый край */
.hero-bear { position: absolute; right: -21vw; top: 50%; width: 58vw; height: auto; transform: translateY(-44%); pointer-events: none; }
@media (max-width: 760px) { .hero-bear { right: -38vw; width: 120vw; top: 40%; transform: translateY(-50%); opacity: .16; } }

/* Переключатель темы: луна в светлой теме, солнце в тёмной */
.bar-end { display: flex; align-items: center; gap: 12px; }
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--glass); color: var(--gold-hi); cursor: pointer; transition: border-color .2s, background .2s; }
.theme-toggle:hover { border-color: var(--gold); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.bar-end .burger { margin-left: 0; }

/* ==== Тёмная тема (сгенерировано из прежней тёмной версии; правьте токены, а не этот блок) ==== */
html[data-theme="dark"] { --bg: #0a0908; --bg2: #110e0a; --panel: rgba(255, 245, 220, .035); --line: rgba(220, 199, 127, .2); --line-strong: rgba(220, 199, 127, .45); --gold: #dcc77f; --gold-hi: #f6e7ac; --gold-lo: #8f7230; --text: #f3eee2; --mute: #aaa18d; --burg: #80000e; --burg-hi: #a3121f; --text-2: #d9d1bd; --glass: rgba(10, 9, 8, .5); --shadow: none; --shadow-sm: none; --felt-a: #211d1a; --felt-b: #131110; --felt-c: #0a0908; --gold-grad: linear-gradient(105deg, #f6e7ac 0%, #dcc77f 38%, #b08d3c 68%, #f1dc94 100%); }
html[data-theme="dark"] .btn--ghost { background: rgba(10, 9, 8, .35); }
html[data-theme="dark"] .btn--ghost:hover { background: rgba(220, 199, 127, .08); }
html[data-theme="dark"] .btn--burgundy { background: #5a0a14; border-color: var(--line-strong); color: var(--gold-hi); }
html[data-theme="dark"] .btn--burgundy:hover { background: #6e0d19; border-color: var(--gold); }
html[data-theme="dark"] .glass { background: linear-gradient(160deg, rgba(255, 245, 220, .06), rgba(255, 245, 220, .02)); box-shadow: none; }
html[data-theme="dark"] .card, html[data-theme="dark"] .lg-card { box-shadow: none; }
html[data-theme="dark"] .site-header.is-solid { background: rgba(10, 9, 8, .78); }
html[data-theme="dark"] .brand img { filter: none; }
html[data-theme="dark"] .nav a { color: #d8d0bd; }
html[data-theme="dark"] .float svg { filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .65)); }
html[data-theme="dark"] .citycheck input, html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .finder input { border: 1px solid #948453; background: rgba(10, 9, 8, .6); }
html[data-theme="dark"] .citycheck-out { color: #d8d0bd; }
html[data-theme="dark"] .orbit-sticky { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(220, 150, 60, .10), transparent 70%), repeating-linear-gradient(60deg, transparent 0 78px, rgba(220, 199, 127, .03) 78px 79px), repeating-linear-gradient(-60deg, transparent 0 78px, rgba(220, 199, 127, .03) 78px 79px), var(--bg); }
html[data-theme="dark"] .orbit-vignette { background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(10, 9, 8, .85) 100%), linear-gradient(0deg, rgba(10, 9, 8, .55), transparent 20%); }
html[data-theme="dark"] .gcard { border: 1px solid rgba(246, 231, 172, .28); background: linear-gradient(135deg, rgba(255, 245, 220, .16), rgba(255, 245, 220, .04) 45%, rgba(220, 199, 127, .10)); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
html[data-theme="dark"] .gcard::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .13) 48%, transparent 62%); }
html[data-theme="dark"] .gcard > span { color: #d8d0bd; }
html[data-theme="dark"] .ghost-hint { background: rgba(10, 9, 8, .7); }
html[data-theme="dark"] .hero-bg { background: none; }
html[data-theme="dark"] .hero .lead { color: #d9d1bd; }
html[data-theme="dark"] .hero-badges li { background: rgba(10, 9, 8, .45); color: #d8d0bd; }
html[data-theme="dark"] .net-line { color: #d9d1bd; }
html[data-theme="dark"] .net-last { background: rgba(10, 9, 8, .6); }
html[data-theme="dark"] .lg-sticky { background: radial-gradient(ellipse 70% 60% at 50% 50%, #1a1409, var(--bg) 70%); }
html[data-theme="dark"] .lg-word span { -webkit-text-stroke: 1px rgba(220, 199, 127, .24); }
html[data-theme="dark"] .lg-video { box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(220, 199, 127, .25); }
html[data-theme="dark"] .lg-photo { border: 1px solid rgba(246, 231, 172, .3); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
html[data-theme="dark"] .lg-content .sub { color: #d9d1bd; }
html[data-theme="dark"] .lg-glass p { color: #d8d0bd; }
html[data-theme="dark"] .devices-glow { background: radial-gradient(ellipse 60% 50% at 55% 62%, rgba(255, 180, 90, calc(.1 + var(--dk, 1) * .18)), transparent 70%); }
html[data-theme="dark"] .mac-screen { box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .mac-base { background: linear-gradient(180deg, #4a4a4e, #1f1f22 60%, #0e0e10); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .mac-base::before { background: #2a2a2d; }
html[data-theme="dark"] .iphone-frame { box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .95), 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .ticker { background: linear-gradient(90deg, #120f0a, #0d0b08); }
html[data-theme="dark"] .ticker-track { color: #d8d0bd; }
html[data-theme="dark"] .about { background: linear-gradient(180deg, var(--bg), #0d0b08); }
html[data-theme="dark"] .about-mark { opacity: .045; }
html[data-theme="dark"] .about-mark img { filter: grayscale(.3); }
html[data-theme="dark"] .about-lead { color: #e6dfcd; }
html[data-theme="dark"] .nomoney { border: 1px solid rgba(210, 57, 74, .35); background: linear-gradient(135deg, rgba(128, 0, 14, .22), rgba(128, 0, 14, .06)); }
html[data-theme="dark"] .nomoney p { color: #e3d9c6; }
html[data-theme="dark"] .why-total > span { color: #d9d1bd; }
html[data-theme="dark"] .bpanel { background: linear-gradient(160deg, rgba(255, 245, 220, .05), rgba(255, 245, 220, .015)); box-shadow: none; }
html[data-theme="dark"] .bpanel--gold { background: linear-gradient(150deg, rgba(220, 199, 127, .14), rgba(220, 199, 127, .03) 55%, rgba(128, 0, 14, .1)); }
html[data-theme="dark"] .blist li { color: #e3dccb; }
html[data-theme="dark"] .launch { box-shadow: none; }
html[data-theme="dark"] .launch-lead { color: #e3dccb; }
html[data-theme="dark"] .lg-points li { color: #e6dfcd; }
html[data-theme="dark"] .tabs button[aria-selected="true"] { color: #1a1406; }
html[data-theme="dark"] .tabs button[aria-selected="true"]:hover { color: #1a1406; }
html[data-theme="dark"] .included { box-shadow: none; }
html[data-theme="dark"] .steps b { background: radial-gradient(circle at 35% 30%, #2a2214, #0d0b07 70%); }
html[data-theme="dark"] .medal { background: radial-gradient(circle at 30% 25%, #2a2417, #0f0c07 70%); border: 1px solid var(--line-strong); box-shadow: 0 10px 24px -8px #000, inset 0 0 0 4px rgba(220, 199, 127, .06); }
html[data-theme="dark"] .medal img { width: 82%; height: 82%; border-radius: 50%; filter: none; opacity: 1; }
html[data-theme="dark"] .chip.is-on { color: #1a1406; }
html[data-theme="dark"] .chip.is-on b { color: #1a1406; }
html[data-theme="dark"] .club { background: linear-gradient(160deg, rgba(255, 245, 220, .05), rgba(255, 245, 220, .015)); box-shadow: none; }
html[data-theme="dark"] .club-mark { opacity: .13; filter: grayscale(.2) sepia(.35); }
html[data-theme="dark"] .club:hover .club-mark { opacity: .2; }
html[data-theme="dark"] .club-meta { color: #cfc7b3; }
html[data-theme="dark"] .apply-points { color: #d9d1bd; }
html[data-theme="dark"] .form { box-shadow: 0 40px 80px -30px #000; }
html[data-theme="dark"] .field select option { background: #17130d; }
html[data-theme="dark"] .form-status.ok { color: #7fd69a; }
html[data-theme="dark"] .form-status.err { color: #ff8c8c; }
html[data-theme="dark"] .footer { background: #070605; }
html[data-theme="dark"] .sticky-cta { box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .cookie { background: rgba(17, 14, 10, .94); box-shadow: none; }
html[data-theme="dark"] .rail-btn { background: rgba(10, 9, 8, .5); }
html[data-theme="dark"] .club-modal { background: #0d0b08; box-shadow: 0 60px 120px -30px #000; }
html[data-theme="dark"] .club-modal::backdrop { background: rgba(5, 4, 3, .78); }
html[data-theme="dark"] .cm-close { background: rgba(10, 9, 8, .7); }
html[data-theme="dark"] .cm-gallery { background: #090806; }
html[data-theme="dark"] .cm-arrow { background: rgba(10, 9, 8, .6); }
html[data-theme="dark"] .cm-noimg { background: radial-gradient(circle at 50% 45%, #2a2214, #0a0806 70%); }
html[data-theme="dark"] .cm-about { color: #d9d1bd; }
html[data-theme="dark"] .apply { background: radial-gradient(ellipse 75% 60% at 50% 38%, #6e0b16, #45060d 55%, #250307 100%); }
html[data-theme="dark"] .apply-map { background: #1d0206; opacity: .55; }
html[data-theme="dark"] .pt-flares { filter: drop-shadow(0 0 10px rgba(246, 212, 143, .35)); }
html[data-theme="dark"] .apply-table { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); }
html[data-theme="dark"] .apply::after { background: linear-gradient(180deg, rgba(10, 9, 8, .55), transparent 18%, transparent 82%, rgba(10, 9, 8, .6)); }
html[data-theme="dark"] .apply .form { background: linear-gradient(160deg, rgba(20, 17, 14, .82), rgba(12, 10, 9, .9)); border-color: rgba(246, 212, 143, .45); }
html[data-theme="dark"] .reviews.section { padding-bottom: clamp(40px, 5vw, 70px); }
html[data-theme="dark"] .mac-screen .vbox { background-color: #0f0d09; }
@media (max-width: 1020px) {
  html[data-theme="dark"] .burger { background: rgba(10, 9, 8, .5); }
  html[data-theme="dark"] .burger i { background: var(--gold-hi); }
  html[data-theme="dark"].menu-open .site-header { background: rgba(10, 9, 8, .97); }
}
/* ==== /Тёмная тема ==== */