@font-face { font-family: "Bebas"; src: url("../fonts/bebas.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mont"; font-weight: 200; src: url("../fonts/mont-ExtraLight.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mont"; font-weight: 500; src: url("../fonts/mont-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mont"; font-weight: 600; src: url("../fonts/mont-SemiBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mont"; font-weight: 700; src: url("../fonts/mont-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mont"; font-weight: 900; font-style: italic; src: url("../fonts/mont-BlackItalic.woff2") format("woff2"); font-display: swap; }

/* ===== токены ===== */
:root {
  --ink: #0b0b0b;   --coal: #161616;  --coal2: #1d1d1d; --paper: #ecebe7;
  --white: #fff;    --fog: #8c8a86;   --box: var(--white);   /* бокс — в общей ч/б гамме (был салатовый #83f52c) */
  --fg: 255,255,255; --bg: 11,11,11; --card: 22,22,22;   /* тройки RGB для полупрозрачных цветов */
  --inv-muted: #3a3936;              /* приглушённый текст на «перевёрнутой» (белой при наведении) плашке */
  --box-text: var(--white);          /* текст бокса — как основной */
  --line: rgba(255,255,255,.16);
  --gutter: clamp(16px, 4.5vw, 64px);   /* поля страницы */
  --section: clamp(72px, 10vw, 150px);  /* вертикальный ритм секций */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t: .5s;                             /* длительность появления */
  --tilt: -9deg;                        /* фирменная диагональ «скорость» */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--white); font: 500 17px/1.55 "Mont", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--white); color: var(--ink); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.paper :focus-visible { outline-color: var(--ink); }
/* «Перейти к содержанию» — видна только при переходе с клавиатуры (Tab) */
.skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--white); color: var(--ink); padding: 12px 18px; font-weight: 600; }
.skip:focus { top: 16px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 72px; }

/* зерно поверх всего сайта */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ===== типографика ===== */
.bebas { font-family: "Bebas", sans-serif; font-weight: 400; line-height: .84; text-transform: uppercase; letter-spacing: -.005em; }
.punch { font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; }
.meta  { font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
.lead  { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; max-width: 34em; }
.muted { color: var(--fog); }
.outline { color: transparent; -webkit-text-stroke: 1.5px var(--white); }
.paper .outline { -webkit-text-stroke-color: var(--ink); }
.h2 { font-size: clamp(56px, 9vw, 140px); }
.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
section { padding-block: var(--section); position: relative; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: clamp(36px, 5vw, 72px); flex-wrap: wrap; }
.sec-head .lead { color: rgba(var(--fg),.78); max-width: 26em; }
.sec-num { color: var(--fog); }
.nbsp { white-space: nowrap; }
.plus { font: 900 italic .62em/1 "Mont"; vertical-align: .32em; -webkit-text-stroke: 0; }
.unit { font: 900 italic .36em/1 "Mont"; text-transform: none; vertical-align: .9em; margin-left: .08em; letter-spacing: 0; -webkit-text-stroke: 0; }
.rub { font: 700 .66em/1 "Mont"; margin-left: .04em; letter-spacing: 0; }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 900 italic 12px/1 "Mont"; text-transform: uppercase; letter-spacing: .02em; padding: 7px 10px 6px; background: var(--white); color: var(--ink); white-space: nowrap; }
.tag.ghost { background: transparent; color: var(--white); border: 1px solid var(--line); font: 600 11px/1 "Mont"; font-style: normal; letter-spacing: .16em; }
.tag.box { background: var(--box); color: var(--ink); }

/* ===== кнопки ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 0 28px;
  font: 900 italic 16px/1 "Mont"; text-transform: uppercase; letter-spacing: .01em; text-decoration: none; text-align: center;
  border: 2px solid var(--white); transition: background .2s var(--ease), color .2s var(--ease), transform .25s var(--ease); cursor: pointer; }
.btn-solid { background: var(--white); color: var(--ink); }
.btn-solid:hover { background: transparent; color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--ink); }
.btn:active { translate: 0 1px; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-box { border-color: var(--box-text); background: var(--box); color: var(--ink); }
.btn-box:hover { background: transparent; color: var(--box-text); }
.btn-xl { min-height: 72px; padding: 0 40px; font-size: 19px; }
.paper .btn-solid { background: var(--ink); color: var(--white); border-color: var(--ink); }
.paper .btn-solid:hover { background: transparent; color: var(--ink); }
.magnet { will-change: transform; }

/* ===== шапка ===== */
.top { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s var(--ease), border-color .3s; border-bottom: 1px solid transparent; }
.top.solid { background: rgba(var(--bg),.92); backdrop-filter: blur(8px); border-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.top .logo img { height: 48px; width: auto; }
.nav { display: flex; list-style: none; gap: 4px; align-items: center; }
.nav a { text-decoration: none; display: block; padding: 10px 12px; font: 600 13px/1 "Mont"; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--fg),.78); transition: color .2s; position: relative; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--white); }
.nav .nav-cta { display: none; }
.top-cta { display: flex; gap: 10px; }
.top .btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
.top-mini { display: none; }
.burger { display: none; background: none; border: 0; color: var(--white); width: 44px; height: 44px; cursor: pointer; flex: 0 0 auto; }
.burger span { display: block; height: 2px; background: currentColor; margin: 7px 8px; transition: transform .25s var(--ease), opacity .2s; }
.top.open .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.top.open .burger span:nth-child(2) { opacity: 0; }
.top.open .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ===== фон-узор с формы клуба: крупные редкие ромбы, плывут; у курсора подсвечиваются ===== */
.pattern { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hp { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 340px); display: block; opacity: .13; }
.hp-lit { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease);
  -webkit-mask: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.35) 50%, transparent 100%);
          mask: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.35) 50%, transparent 100%); }
.hp-lit .hp { opacity: .9; }
.lit .hp-lit { opacity: 1; }
.anim .hp { animation: hp-up 22s linear infinite; }
@keyframes hp-up { to { transform: translateY(-340px); } }
/* «шлейфы скорости»: тонкие линии пролетают по фирменной диагонали */
.streaks { position: absolute; inset: -20% -10%; transform: rotate(var(--tilt)); }
.streaks i { position: absolute; left: 0; height: 2px; width: 34%; background: linear-gradient(90deg, transparent, rgba(var(--fg),.85) 70%, var(--white)); opacity: 0; }
.streaks i:nth-child(1) { top: 22%; --d: 0s;   --s: 2.6s; }
.streaks i:nth-child(2) { top: 38%; --d: 1.1s; --s: 3.2s; width: 22%; }
.streaks i:nth-child(3) { top: 51%; --d: 2.3s; --s: 2.2s; }
.streaks i:nth-child(4) { top: 64%; --d: .6s;  --s: 3.6s; width: 18%; }
.streaks i:nth-child(5) { top: 77%; --d: 1.8s; --s: 2.8s; width: 28%; }
.anim .streaks i { animation: streak var(--s) var(--ease) var(--d) infinite; }
@keyframes streak { 0% { transform: translateX(-110%); opacity: 0; } 15% { opacity: .55; } 70% { opacity: .35; } 100% { transform: translateX(330%); opacity: 0; } }
.pattern::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg),.55) 0%, rgba(var(--bg),0) 28%, rgba(var(--bg),.55) 70%, var(--ink) 100%); }

/* фото зала и манежа: наклонная панель справа, цветные кадры тускло сменяют друг друга (9 кадров × 6 с) */
.hero-shots { --hs-o: .34; position: absolute; inset: 0 0 0 30%; overflow: hidden; pointer-events: none;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 38%); mask: linear-gradient(90deg, transparent 0, #000 38%); }
.hero-shots i { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; filter: saturate(.8); }
.hero-shots .hs-1 { opacity: var(--hs-o); }
.anim .hero-shots i { opacity: 0; animation: hs 54s linear infinite; }
.anim .hero-shots .hs-2 { animation-delay: 6s; }
.anim .hero-shots .hs-3 { animation-delay: 12s; }
.anim .hero-shots .hs-4 { animation-delay: 18s; }
.anim .hero-shots .hs-5 { animation-delay: 24s; }
.anim .hero-shots .hs-6 { animation-delay: 30s; }
.anim .hero-shots .hs-7 { animation-delay: 36s; }
.anim .hero-shots .hs-8 { animation-delay: 42s; }
.anim .hero-shots .hs-9 { animation-delay: 48s; }
@keyframes hs { 0% { opacity: 0; transform: scale(1.1); } 3%, 11% { opacity: var(--hs-o); } 14% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.hs-1 { background-image: url("../img/hero-1.webp"); }
.hs-2 { background-image: url("../img/hero-2.webp"); }
.hs-3 { background-image: url("../img/hero-3.webp"); }
.hs-4 { background-image: url("../img/hero-4.webp"); }
.hs-5 { background-image: url("../img/hero-5.webp"); }
.hs-6 { background-image: url("../img/hero-6.webp"); }
.hs-7 { background-image: url("../img/hero-7.webp"); }
.hs-8 { background-image: url("../img/hero-8.webp"); }
.hs-9 { background-image: url("../img/hero-9.webp"); }

/* ===== главная: первый экран ===== */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 112px 32px; overflow: hidden; }
.hero-grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px clamp(24px, 4vw, 64px); align-items: end; }
.hero-free { display: inline-flex; align-items: center; gap: 12px; background: var(--white); color: var(--ink); padding: 9px 16px 8px; margin-bottom: 20px; font-size: clamp(14px, 1.3vw, 17px); transform: skewX(-9deg); }
.hero-free > span { display: inline-block; transform: skewX(9deg); }
.hero-title { font-size: clamp(84px, 14.5vw, 232px); margin-left: -.04em; }
.hero-title .outline { -webkit-text-stroke-width: 2px; }
.hero-rot { font-size: clamp(34px, 4.2vw, 64px); margin-top: clamp(12px, 1.6vw, 20px); color: rgba(var(--fg),.9); }
.rot { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; position: relative; top: .04em; }
.rot > span { display: block; }
.rot b { display: block; height: 1em; line-height: 1; font-weight: 400; background: var(--white); color: var(--ink); padding: 0 .12em; }
.anim .rot > span { animation: rot 10s var(--ease) infinite; }
@keyframes rot { 0%,21% { transform: translateY(0); } 25%,46% { transform: translateY(-1em); } 50%,71% { transform: translateY(-2em); } 75%,96% { transform: translateY(-3em); } 100% { transform: translateY(-4em); } }
.hero .lead { font-size: clamp(16px, 1.4vw, 19px); margin-top: 20px; max-width: 36em; color: rgba(var(--fg),.86); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; color: rgba(var(--fg),.66); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.doors { display: grid; gap: 12px; }
.door { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; padding: 22px 24px; border: 1px solid var(--line); background: rgba(var(--card),.72); backdrop-filter: blur(6px); text-decoration: none; overflow: hidden; isolation: isolate; transition: border-color .25s, transform .3s var(--ease); }
.door::before { content: ""; position: absolute; inset: 0; background: var(--white); transform: translateX(-101%) skewX(-12deg); transform-origin: left; transition: transform .45s var(--ease); z-index: -1; }
.door:hover { border-color: var(--white); color: var(--ink); }
.door:hover::before { transform: translateX(0) skewX(0); }
.door .meta { grid-column: 1 / -1; font-size: 11px; color: var(--fog); }
.door:hover .meta, .door:hover small { color: rgba(var(--bg),.7); }
.door b { font-size: clamp(48px, 4.4vw, 68px); }
.door small { grid-column: 1; font-size: 13px; color: rgba(var(--fg),.7); line-height: 1.35; }
.door .arr { grid-row: 2 / 4; grid-column: 2; font: 900 italic 30px/1 "Mont"; transition: transform .3s var(--ease); }
.door:hover .arr { transform: translate(4px, -4px); }
.scroll-cue { position: relative; margin: 28px auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--fog); text-decoration: none; font-size: 11px; width: max-content; }
.scroll-cue::after { content: ""; width: 1px; height: 36px; background: linear-gradient(var(--white), transparent); }
.anim .scroll-cue::after { animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ===== наклонные бегущие ленты ===== */
.bands { position: relative; height: clamp(150px, 14vw, 210px); overflow: hidden; margin-block: 8px; }
.band { position: absolute; left: -5%; right: -5%; top: 50%; overflow: hidden; padding: 16px 0 12px; }
.band-1 { background: var(--white); color: var(--ink); transform: translateY(-62%) rotate(-3deg); z-index: 2; }
.band-2 { border-block: 1px solid var(--line); transform: translateY(-30%) rotate(2.4deg); }
.band-track { display: flex; width: max-content; animation: tick 46s linear infinite; }
.band-2 .band-track { animation-direction: reverse; animation-duration: 60s; }
.band ul { display: flex; list-style: none; flex: 0 0 auto; }
.band li { font: 400 clamp(30px, 3.4vw, 50px)/1 "Bebas"; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; }
.band li::after { content: ""; width: 12px; height: 12px; transform: rotate(45deg); border: 2px solid currentColor; margin: 0 26px .14em; }
.band-2 li { color: transparent; -webkit-text-stroke: 1.2px var(--white); }
.band-2 li::after { border-color: var(--fog); }
.band li.boxing { color: var(--ink); }
.band-2 li.boxing { color: var(--box-text); -webkit-text-stroke: 0; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ===== почему мы ===== */
.statement { font-size: clamp(30px, 4.2vw, 64px); line-height: 1.02; max-width: 17em; }
.statement em { font-style: normal; background: var(--white); color: var(--ink); padding: 0 .1em; }
/* вырезанная фигура тренера справа от текста */
.why-top { position: relative; padding-right: clamp(0px, 26vw, 380px); }
.why-top > p { position: relative; z-index: 1; }
.why-coach { position: absolute; right: 0; top: 0; width: clamp(0px, 24vw, 360px); height: 100%; object-fit: contain; object-position: right bottom;
  -webkit-mask: linear-gradient(180deg, #000 78%, transparent); mask: linear-gradient(180deg, #000 78%, transparent); }
.problem-text { margin-top: clamp(32px, 4vw, 56px); max-width: 40em; font-size: clamp(18px, 1.8vw, 24px); color: rgba(var(--fg),.82); border-left: 2px solid var(--white); padding-left: clamp(16px, 2vw, 28px); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 72px); counter-reset: c; }
.card { border: 1px solid var(--line); padding: clamp(24px, 2.6vw, 36px); position: relative; overflow: hidden; transition: border-color .25s, transform .3s var(--ease); }
.card:hover { border-color: rgba(var(--fg),.5); transform: translateY(-4px); }
.card .n { font: 400 clamp(72px, 7vw, 112px)/.8 "Bebas"; color: transparent; -webkit-text-stroke: 1.2px rgba(var(--fg),.5); display: block; margin-bottom: 28px; }
.card h3 { font: 400 clamp(34px, 3vw, 46px)/.9 "Bebas"; text-transform: uppercase; margin-bottom: 12px; }
.card p { color: rgba(var(--fg),.78); font-size: 16px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 88px); }
.stat { padding: 28px 24px 0; border-right: 1px solid var(--line); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: clamp(56px, 7vw, 104px); font-variant-numeric: tabular-nums; }

/* ===== направления (главная) ===== */
.dirs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.dir { grid-column: span 2; position: relative; min-height: 440px; overflow: hidden; background: var(--coal); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; text-decoration: none; isolation: isolate; }
.dir:nth-child(1), .dir:nth-child(2) { grid-column: span 3; min-height: 500px; }
.dir-photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; transition: transform .7s var(--ease), clip-path .6s var(--ease); clip-path: inset(0); }
.dir::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--bg),.05) 25%, rgba(var(--bg),.94) 100%); }
.dir::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.dir:hover::after { transform: none; }
.dir:hover .dir-photo { transform: scale(1.06); }
.dir-top { position: absolute; top: 22px; left: 22px; right: 22px; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.dir h3 { font-size: clamp(48px, 5vw, 80px); margin-bottom: 12px; }
.dir p { font-size: 15px; max-width: 28em; margin-bottom: 18px; color: rgba(var(--fg),.84); }
.dir-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.dir-foot a.go { text-decoration: none; }              /* бокс: две ссылки — детям / взрослым */
.stats + .reviews { margin-top: clamp(32px, 4vw, 56px); }   /* «Детям»: цифры клуба над отзывами */
.dir-price { font: 400 30px/1 "Bebas"; white-space: nowrap; }
.dir-price small { font: 600 11px/1 "Mont"; letter-spacing: .18em; color: var(--fog); margin-left: 6px; vertical-align: .3em; }
.dir-price.ask { font: 700 14px/1.3 "Mont"; white-space: normal; }
.go { font: 900 italic 14px/1 "Mont"; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; white-space: nowrap; }
.go .arr { transition: transform .25s var(--ease); }
.dir:hover .go .arr { transform: translate(3px, -3px); }
.dir p.box-teams { margin-bottom: 8px; font-weight: 700; color: var(--white); }
.box-teams span { display: block; }
.sec-logo { height: clamp(64px, 8vw, 120px); width: auto; }
.dir.boxing { outline: 2px solid var(--box); outline-offset: -2px; }
.dir.boxing h3, .dir.boxing .go { color: var(--box-text); }
.dir.boxing::after { background: var(--box); }

/* ===== форматы ===== */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--white); }
.format { padding: 28px 28px 8px 0; border-right: 1px solid var(--line); }
.format + .format { padding-left: 28px; }
.format:last-child { border-right: 0; }
.format b { display: block; font-size: clamp(40px, 4vw, 60px); margin-bottom: 10px; }
.format p { color: rgba(var(--fg),.78); font-size: 16px; }
.format .price-line { margin-top: 14px; font: 400 26px/1 "Bebas"; }

/* ===== пять качеств ===== */
.approach { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.approach-photo { background: url("../img/warmup.webp") center / cover; min-height: 560px; transition: clip-path .6s var(--ease); clip-path: inset(0); position: relative; }
.qualities { list-style: none; display: flex; flex-direction: column; justify-content: space-between; }
.qualities li { font-size: clamp(54px, 9vw, 144px); border-bottom: 1px solid var(--line); padding-block: 4px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), color .25s, -webkit-text-stroke-color .25s; }
.qualities li span { font: 600 13px/1 "Mont"; letter-spacing: .22em; color: var(--fog); -webkit-text-stroke: 0; }
.qualities li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--white); }
.qualities li:hover { color: var(--white); padding-left: .08em; }
.qualities li:nth-child(2) { transition-delay: 60ms; } .qualities li:nth-child(3) { transition-delay: 120ms; }
.qualities li:nth-child(4) { transition-delay: 180ms; } .qualities li:nth-child(5) { transition-delay: 240ms; }
.manifest { margin-top: clamp(72px, 9vw, 128px); text-align: center; }
.manifest q { quotes: none; display: block; font-size: clamp(56px, 10.5vw, 170px); }
.manifest cite { display: block; margin-top: 24px; font-style: normal; }

/* ===== карусель (тренеры, жизнь клуба): прокрутка пальцем/колёсиком + стрелки ===== */
.carousel { position: relative; }
.car-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; }
.car-nav { display: flex; gap: 8px; }
.car-btn { width: 56px; height: 56px; border: 1px solid var(--line); background: transparent; color: var(--white); font: 900 italic 22px/1 "Mont"; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.car-btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.car-btn:disabled { opacity: .3; pointer-events: none; }
.paper .car-btn { border-color: rgba(var(--bg),.3); color: var(--ink); }
.paper .car-btn:hover { background: var(--ink); color: var(--paper); }

/* ===== тренеры ===== */
.coaches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.coach { position: relative; background: var(--coal); min-height: 580px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; isolation: isolate; }
/* на фоне — направления тренера: первая строка залита, вторая контуром */
.coach .ghost { position: absolute; top: 20px; left: 22px; right: 16px; display: flex; flex-direction: column; gap: .08em; font-size: clamp(36px, 3.2vw, 56px); color: transparent; -webkit-text-stroke: 1.2px rgba(var(--fg),.6); z-index: -3; white-space: nowrap; overflow: hidden; transition: transform .8s var(--ease); }
.coach .ghost span:first-child { color: var(--white); -webkit-text-stroke: 0; }
.coach.boxing .ghost span:first-child { color: var(--box-text); }
.coach:hover .ghost { transform: translateX(3%); }
/* наведение: по рамке бежит белый блик */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.coach::before { content: ""; position: absolute; inset: 0; padding: 2px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from var(--ang), transparent 0 55%, rgba(var(--fg),.95) 72%, transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.coach:hover::before { opacity: 1; animation: ang 3.2s linear infinite; }
@keyframes ang { to { --ang: 360deg; } }
.coach img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 84%; width: auto; max-width: none; z-index: -2; transition: transform .6s var(--ease); filter: grayscale(.15) contrast(1.04); }
.coach:hover img { transform: translateX(-50%) scale(1.03); }
.coach::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(180deg, transparent, rgba(var(--bg),.97) 70%); z-index: -1; }
.coach .role { color: var(--fog); }
.coach h3 { font-size: clamp(42px, 4vw, 62px); margin-top: 6px; }
.coach ul { list-style: none; margin-top: 12px; display: grid; gap: 4px; font-size: 14px; color: rgba(var(--fg),.82); }
.coach ul li::before { content: "◆"; font-size: 8px; vertical-align: 2px; margin-right: 8px; color: var(--fog); }
.coach.boxing h3 { color: var(--box-text); }
.coach.boxing { box-shadow: inset 0 0 0 1px rgba(var(--fg),.45); }
.coach.founder { box-shadow: inset 0 0 0 1px rgba(var(--fg),.4); }
/* фото целиком (в зале, без вырезки): на всю карточку, направления — поверх стены */
.coach img.full { left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: none; filter: none; }
.coach:hover img.full { transform: scale(1.03); }
.coach:has(img.full) .ghost { z-index: -1; }
.coach:has(img.full) .ghost span:first-child { color: var(--ink); }
.coach:has(img.full) .ghost { -webkit-text-stroke-color: rgba(var(--bg),.7); }
.coach.founder::after { inset: 30% 0 0; }
.facts4 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 12px; }
.facts4 div { border-top: 1px solid var(--line); padding: 8px 0 8px; font-size: 13px; color: rgba(var(--fg),.8); line-height: 1.3; }
.facts4 b { display: block; font: 400 26px/.9 "Bebas"; color: var(--white); margin-bottom: 2px; }

/* ===== отзывы ===== */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reviews-photo { aspect-ratio: 21 / 8; background: center 40% / cover no-repeat; margin-bottom: 12px; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); }
.review { border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 20px; justify-content: space-between; min-height: 240px; transition: border-color .25s, transform .3s var(--ease); }
.review:hover { border-color: rgba(var(--fg),.5); transform: translateY(-4px); }
.review q { quotes: "«" "»"; font-size: 16px; line-height: 1.5; color: rgba(var(--fg),.9); }
.review footer { border: 0; padding: 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.review b { font: 400 26px/1 "Bebas"; text-transform: uppercase; }
.reviews-more { margin-top: 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; color: var(--fog); }

/* ===== расписание и цены ===== */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--white); margin-bottom: 8px; overflow-x: auto; }
.tabs button { flex: 0 0 auto; background: none; border: 0; color: var(--fog); cursor: pointer; padding: 14px 28px 12px; font: 400 clamp(28px, 3vw, 40px)/1 "Bebas"; text-transform: uppercase; transition: color .2s var(--ease), background .2s var(--ease); }
.tabs button:hover { color: var(--white); }
.tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); }
.sched .row { display: grid; grid-template-columns: 180px 1.4fr 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); transition: background .2s, padding .25s var(--ease); }
.sched .row:hover { background: rgba(var(--fg),.04); padding-left: 10px; }
.sched .row b { font: 400 30px/1 "Bebas"; }
.sched.wide-time .row { grid-template-columns: 300px 1.4fr 1fr; }
.prices.two .price { justify-content: flex-start; }
.sched .row span { font-weight: 700; }
.sched .row i { font-style: normal; color: var(--fog); }
.sched .row.box b { color: var(--box-text); }
.sched:not([hidden]) .row { animation: rowIn .35s var(--ease) both; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } }
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(56px, 7vw, 96px); }
.prices.two { grid-template-columns: 1fr 1fr; }
.price { border: 1px solid var(--line); padding: 32px; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.price b.bebas { font-size: clamp(72px, 7vw, 120px); display: block; margin-bottom: 4px; }
.price-h { font-size: clamp(48px, 6vw, 96px); margin-top: clamp(56px, 7vw, 96px); }
.price-h + .prices { margin-top: 24px; }
/* «Первое занятие бесплатно» — полоса во всю ширину под разовыми и абонементами; при наведении белеет */
#prices .prices { grid-template-columns: 1fr 1fr; }
.price.free { grid-column: 1 / -1; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 32px; text-decoration: none; color: var(--white); background: var(--coal); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s; }
.price.free b.bebas { font-size: clamp(56px, 6vw, 96px); margin: 0; }
.price.free .free-txt { flex: 1 1 260px; color: rgba(var(--fg),.8); transition: color .35s; }
.price.free .go { font: 900 italic 15px/1 "Mont"; text-transform: uppercase; white-space: nowrap; }
.price.free .meta { flex-basis: 100%; color: var(--fog); }
.price.free:hover, .price.free:focus-visible { background: var(--white); color: var(--ink); border-color: var(--white); }
.price.free:hover .free-txt, .price.free:hover .meta { color: var(--inv-muted); }
.price.free:hover .arr { transform: translateX(4px); }
.plist { display: grid; gap: 0; }
.plist div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plist dd { font: 400 26px/1 "Bebas"; white-space: nowrap; }
.price-note { font-size: 14px; line-height: 1.45; }

/* ===== жизнь клуба (бумага) ===== */
.paper { background: var(--paper); color: var(--ink); }
.paper .sec-num, .paper .muted { color: var(--inv-muted); }
#life .sec-head .over { margin-top: 0; }
.life-warm { margin-top: clamp(32px, 4vw, 56px); max-width: 38em; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; color: #2b2a28; }
/* бесконечная лента (вторая половина — копия, её добавляет скрипт); пауза при наведении */
.life-run { overflow: hidden; margin-inline: calc(var(--gutter) * -1); }
.life-car { list-style: none; display: flex; gap: 12px; width: max-content; }
.life-car.run { animation: life 70s linear infinite; }
.life-run:hover .life-car, .life-run:focus-within .life-car { animation-play-state: paused; }
@keyframes life { to { transform: translateX(calc(-50% - 6px)); } }
/* кадр-карточка: при наведении переворачивается, на обороте — что это было */
.flip { width: clamp(240px, 26vw, 360px); aspect-ratio: 4/5; perspective: 1400px; cursor: pointer; }
.flip:focus-visible { outline-offset: -3px; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.flip:hover .flip-in, .flip:focus-visible .flip-in, .flip.on .flip-in { transform: rotateY(180deg); }
.face, .back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face { background-size: cover; background-position: center; }
.back { transform: rotateY(180deg); background: var(--ink); color: var(--white); padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.back b { font-size: clamp(38px, 3.2vw, 52px); }
.back p { font-size: 15px; line-height: 1.45; color: rgba(var(--fg),.82); }
/* слоган: заливка «пробегает» по буквам */
.paper .over { font-size: clamp(64px, 11vw, 170px); margin-top: clamp(32px, 4vw, 56px); position: relative; }
.over .sweep { display: inline-block; color: transparent; -webkit-text-stroke: 1.5px var(--ink); background: linear-gradient(100deg, var(--ink) 45%, transparent 55%) 0 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.anim .over .sweep { animation: sweep 5s var(--ease) infinite alternate; }
.anim .over .sweep + br + .sweep { animation-delay: 1.2s; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ===== тизер «Обучение» ===== */
.teaser { overflow: hidden; isolation: isolate; border-block: 1px solid var(--line); }
.teaser-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 32px clamp(24px, 4vw, 64px); align-items: center; }
.teaser h2 { font-size: clamp(56px, 8vw, 128px); }
.teaser p { color: rgba(var(--fg),.8); margin-top: 20px; max-width: 32em; }
.teaser .btn { margin-top: 32px; }
/* книга: при наведении (или нажатии) обложка открывается, внутри — анонс */
.book { justify-self: center; position: relative; display: block; width: min(300px, 64vw); aspect-ratio: 2/3; perspective: 1800px; transform: rotate(-5deg); transition: transform .6s var(--ease); cursor: pointer; text-decoration: none; margin-left: 40px; }
.book-page { position: absolute; inset: 0; background: var(--paper); color: var(--ink); padding: 26px 22px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 18px 18px 0 rgba(var(--fg),.08), inset 10px 0 18px rgba(0,0,0,.12); }
.book-page b { font: 400 clamp(32px, 3vw, 42px)/.9 "Bebas"; text-transform: uppercase; }
.book-page p { font-size: 14px; line-height: 1.45; color: var(--inv-muted); }
.book-page .tag { align-self: flex-start; background: var(--ink); color: var(--paper); }
.book-page .go { color: var(--ink); }
.book-cover { position: absolute; inset: 0; background: #111 url("../img/book-cover.webp") center / cover; transform-origin: left center; transition: transform 1s var(--ease), box-shadow 1s var(--ease); backface-visibility: hidden; box-shadow: 18px 18px 0 rgba(var(--fg),.08), inset 4px 0 0 rgba(var(--fg),.25), inset 12px 0 18px rgba(0,0,0,.45); z-index: 1; }
.book:hover, .book:focus-visible, .book.open { transform: rotate(0deg) translateX(12%); }
.book:hover .book-cover, .book:focus-visible .book-cover, .book.open .book-cover { transform: rotateY(-150deg); box-shadow: -10px 10px 30px rgba(0,0,0,.4); }
.book-hint { position: absolute; z-index: 2; right: -10px; bottom: 18px; transform: rotate(var(--tilt)); transition: opacity .3s; }
.book:hover .book-hint, .book.open .book-hint { opacity: 0; }

/* «свой путь»: контур медленно заливается белым и снова пустеет */
.signup-title .fill { background: linear-gradient(100deg, var(--white) 45%, transparent 55%) 0 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.anim .signup-title .fill { animation: sweep 6s var(--ease) infinite alternate; }

/* ===== запись + квиз ===== */
.signup { overflow: hidden; isolation: isolate; }
.signup .beam { position: absolute; inset: 0; background: radial-gradient(60% 60% at 75% 0%, rgba(var(--fg),.13), transparent 70%); pointer-events: none; z-index: -1; }
.signup-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.signup-title { font-size: clamp(76px, 12vw, 190px); }
.signup-head .lead { max-width: 22em; color: rgba(var(--fg),.82); }
.ghost-word { position: absolute; font-size: clamp(160px, 30vw, 460px); color: transparent; -webkit-text-stroke: 1px rgba(var(--fg),.07); pointer-events: none; user-select: none; white-space: nowrap; z-index: -1; bottom: -.12em; right: -.03em; }

.quiz { border: 1px solid var(--line); background: rgba(var(--card),.9); }
html:not(.js) .quiz { display: none; }
.q-head { display: flex; align-items: center; gap: 16px 32px; padding: 20px clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.q-head > .meta { color: var(--fog); }
.q-prog { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); flex: 1 1 360px; position: relative; }
.q-prog li { position: relative; padding-top: 18px; color: var(--fog); font: 600 12px/1 "Mont"; letter-spacing: .2em; text-transform: uppercase; transition: color .3s var(--ease); }
.q-prog li::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--line); }
.q-prog li::after { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--fog); transition: background .3s, border-color .3s; }
.q-prog li i { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.q-prog li.done i { transform: none; }
.q-prog li.on, .q-prog li.done { color: var(--white); }
.q-prog li.on::after, .q-prog li.done::after { border-color: var(--white); background: var(--white); }
.q-prog b { font: 400 22px/1 "Bebas"; letter-spacing: 0; margin-right: 6px; vertical-align: -2px; }
.q-back { background: none; border: 1px solid var(--line); color: var(--white); min-height: 44px; padding: 0 18px; cursor: pointer; font: 600 13px/1 "Mont"; letter-spacing: .18em; text-transform: uppercase; transition: border-color .2s, background .2s; }
.q-back:hover { border-color: var(--white); }
.q-back { order: -1; }
.q-back[hidden] { display: none; }
.q-step { padding: clamp(24px, 3vw, 40px); }
.q-step[hidden] { display: none; }
.q-step.enter { animation: qIn .4s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateX(24px); } }
.q-step h3 { font-size: clamp(40px, 4.6vw, 68px); margin-bottom: 8px; }
.q-step h3:focus { outline: none; }
.q-sub { color: var(--fog); margin-bottom: 24px; }
.q-ages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 24px; }
.q-ages.kids { grid-template-columns: repeat(5, 1fr); }
.q-opt { text-align: left; background: transparent; border: 1px solid var(--line); color: var(--white); padding: 18px 18px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-height: 172px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s, transform .2s var(--ease); }
.q-opt:hover { border-color: var(--white); transform: translateY(-3px); }
.q-opt .meta { font-size: 11px; color: var(--fog); }
.q-opt .bebas { font-size: clamp(44px, 4.4vw, 64px); }
.q-opt small { margin-top: auto; font-size: 13px; color: rgba(var(--fg),.7); line-height: 1.35; }
.q-opt.adult { border-color: rgba(var(--fg),.5); }
.q-opt.adult .bebas { color: transparent; -webkit-text-stroke: 1.5px var(--white); }
.q-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.q-card { text-align: left; background: var(--ink); border: 1px solid var(--line); color: var(--white); padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-height: 260px; transition: border-color .2s, transform .2s var(--ease), background .2s; }
.q-card:hover { border-color: var(--white); transform: translateY(-3px); }
.q-card .qc-name { font: 400 clamp(34px, 3vw, 44px)/.9 "Bebas"; text-transform: uppercase; }
.q-card .qc-time { font-weight: 700; font-size: 15px; line-height: 1.4; }
.q-card .qc-time > span { display: block; }
.q-card .qc-coach { color: var(--fog); font-size: 14px; }
.q-card .qc-note { font: 600 11px/1.3 "Mont"; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }
.q-card .qc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.q-card .qc-price { font: 400 40px/.9 "Bebas"; white-space: nowrap; }
.q-card .qc-price small { display: block; font: 600 11px/1.2 "Mont"; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); margin-top: 6px; white-space: normal; }
.q-card .qc-price.ask { font: 700 15px/1.3 "Mont"; white-space: normal; }
.q-card .qc-go { font: 900 italic 13px/1 "Mont"; text-transform: uppercase; white-space: nowrap; }
.q-card .qc-free { align-self: flex-start; }
.q-card.box { border-color: rgba(var(--fg),.55); }
.q-card.box:hover { border-color: var(--box-text); }
.q-card.box .qc-name, .q-card.box .qc-go { color: var(--box-text); }
.q-res { display: grid; grid-template-columns: 7fr 5fr; gap: 32px clamp(24px, 4vw, 64px); align-items: center; }
.q-res-h { font: 600 13px/1 "Mont"; letter-spacing: .22em; }
.qr-name { font-size: clamp(56px, 7vw, 112px); margin: 12px 0 14px; }
.qr-info { font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); }
.qr-info > span { display: block; }
.qr-coach { color: var(--fog); margin-top: 6px; }
.qr-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.qr-tel { display: contents; }
/* заявка на шаге 3: имя + телефон */
.lead-form { margin-top: 28px; display: grid; gap: 14px; max-width: 640px; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-form label > .meta { display: block; margin-bottom: 6px; }
.lead-form input:not([type=checkbox]) { width: 100%; min-height: 56px; padding: 0 16px; background: transparent; border: 1px solid var(--line); color: var(--white); font: 600 18px/1 "Mont"; border-radius: 0; }
.lead-form input:not([type=checkbox]):focus { border-color: var(--white); outline: none; }
.lead-form input[aria-invalid="true"] { border-color: #ff6b5b; }
.lf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* поле-ловушка для ботов */
.lf-ok { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(var(--fg),.8); }
.lf-ok input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--white); flex: none; }
.lead-form .btn { justify-self: start; }
.lf-msg { font-weight: 700; }
.lf-msg:empty { display: none; }
.lead-form.sent .lf-row, .lead-form.sent .lf-ok, .lead-form.sent .btn { display: none; }
.lead-form + .qr-act { margin-top: 24px; gap: 10px 12px; }
.q-res.box .qr-name { color: var(--box-text); }
.qr-gift { background: var(--white); color: var(--ink); padding: clamp(24px, 3vw, 36px); position: relative; overflow: hidden; }
.qr-gift[hidden] { display: none; }
.qr-gift b { display: block; font: 400 clamp(120px, 14vw, 220px)/.8 "Bebas"; letter-spacing: -.02em; }
.qr-gift .rub { font-size: .5em; vertical-align: .5em; margin-left: .06em; }
.qr-gift p { font-size: clamp(18px, 1.8vw, 24px); margin-top: 12px; }
.q-restart { background: none; border: 0; color: var(--fog); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; margin-top: 24px; font-size: 14px; padding: 6px 0; }
.q-restart:hover { color: var(--white); }
.signup-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; color: var(--fog); }
.signup-alt .tel { font: 400 clamp(28px, 2.6vw, 38px)/1 "Bebas"; text-decoration: none; color: var(--white); }

/* ===== вопросы ===== */
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 32px clamp(24px, 4vw, 64px); }
.faq-grid .h2 { font-size: clamp(56px, 8vw, 128px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0 18px; font: 400 clamp(26px, 2.6vw, 38px)/1 "Bebas"; text-transform: uppercase; transition: padding .25s var(--ease), color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 22px; height: 22px; background: linear-gradient(var(--white), var(--white)) center / 100% 2px no-repeat, linear-gradient(var(--white), var(--white)) center / 2px 100% no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { padding-left: 8px; }
.faq details > div { padding: 0 48px 24px 0; color: rgba(var(--fg),.82); max-width: 44em; }
.faq details[open] > div { animation: faqIn .35s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
.faq details a { color: var(--white); }

/* ===== контакты ===== */
.contacts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }
.contacts dl { display: grid; gap: 28px; align-content: start; }
.contacts dt { margin-bottom: 6px; }
.contacts dd { font: 400 clamp(32px, 3.4vw, 48px)/1 "Bebas"; }
.contacts dd a { text-decoration: none; }
.contacts .c-main dd { font-size: clamp(44px, 5vw, 72px); }
.contacts .c-small dd { font-size: clamp(24px, 2.2vw, 30px); }
.contacts dd.addr-sub { font: 500 17px/1.45 "Mont"; margin-top: 8px; max-width: 26em; }
.contacts dd a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.map { min-height: 420px; position: relative; display: grid; place-items: center; background: var(--coal) url("../img/building.webp") center 45% / cover; }
.map::before { content: ""; position: absolute; inset: 0; background: rgba(var(--bg),.62); }
.map.loaded::before { display: none; }
.map-load { position: relative; z-index: 1; min-height: 56px; padding: 0 28px; background: var(--white); color: var(--ink); border: 2px solid var(--white); font: 900 italic 16px/1 "Mont"; text-transform: uppercase; cursor: pointer; }
.map-load:hover { background: transparent; color: var(--white); }
.map-note { position: absolute; z-index: 1; left: 0; right: 0; bottom: 72px; text-align: center; color: var(--fog); }
.map.loaded .map-note, .map.loaded .map-load { display: none; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.map-link { position: absolute; z-index: 2; left: 16px; bottom: 16px; background: var(--white); color: var(--ink); padding: 12px 16px; text-decoration: none; }
.map-link:hover { background: var(--ink); color: var(--white); }

/* ===== подвал ===== */
.foot { border-top: 1px solid var(--line); padding-block: 48px 32px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: start; }
.foot img { height: 56px; width: auto; margin-bottom: 16px; }
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot ul a { text-decoration: none; color: rgba(var(--fg),.8); }
.foot ul a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.foot .tel { font: 400 34px/1 "Bebas"; text-decoration: none; display: block; margin-bottom: 8px; }
.legal { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 12px; color: var(--fog); border-top: 1px solid var(--line); padding-top: 16px; }
.legal a { color: var(--fog); }

/* ===== внутренние страницы ===== */
.page-hero { min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 120px 48px; overflow: hidden; }
.page-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(24px, 4vw, 64px); align-items: end; }
.crumbs { display: flex; gap: 10px; color: var(--fog); margin-bottom: 20px; }
.crumbs a { color: var(--fog); text-decoration: none; }
.crumbs a:hover { color: var(--white); }
.page-title { font-size: clamp(80px, 13vw, 210px); }
.page-hero .lead { margin-top: 20px; color: rgba(var(--fg),.86); }
.shots { position: relative; height: clamp(380px, 46vw, 600px); }
.shot { position: absolute; background-size: cover; background-position: center; box-shadow: 0 30px 60px rgba(0,0,0,.5); transition: transform .6s var(--ease), clip-path .7s var(--ease); clip-path: inset(0); }
.shot:nth-child(1) { inset: 0 18% 22% 0; transform: rotate(-3deg); }
.shot:nth-child(2) { inset: 34% 0 0 30%; transform: rotate(4deg); border: 6px solid var(--ink); }
.shots:hover .shot:nth-child(1) { transform: rotate(-5deg) translate(-8px, -6px); }
.shots:hover .shot:nth-child(2) { transform: rotate(6deg) translate(8px, 6px); }
.shot-tag { position: absolute; z-index: 2; left: 8%; bottom: 10%; transform: rotate(var(--tilt)); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { text-decoration: none; border: 1px solid var(--line); padding: 10px 14px; font: 600 12px/1 "Mont"; letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; }
.jump a:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.ladder { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: end; }
.step { border-left: 1px solid var(--line); padding: 0 20px 24px; position: relative; transition: background .25s; }
.step:hover { background: rgba(var(--fg),.04); }
.step:nth-child(1) { min-height: 240px; } .step:nth-child(2) { min-height: 290px; } .step:nth-child(3) { min-height: 340px; }
.step:nth-child(4) { min-height: 390px; } .step:nth-child(5) { min-height: 440px; }
.step::before { content: ""; position: absolute; left: -1px; right: 0; top: 0; height: 2px; background: var(--white); }
.step .age { display: block; font: 400 clamp(52px, 5.4vw, 84px)/.85 "Bebas"; padding-top: 18px; }
.step b { display: block; font: 900 italic 15px/1.2 "Mont"; text-transform: uppercase; margin: 14px 0 8px; }
.step p { font-size: 14px; color: rgba(var(--fg),.78); }
.step .tag { margin-top: 12px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(24px, 4vw, 72px); align-items: center; }
.split.rev > :first-child { order: 2; }
.split h2 { font-size: clamp(52px, 7vw, 112px); margin-bottom: 20px; }
.split p { color: rgba(var(--fg),.82); margin-bottom: 14px; max-width: 34em; }
.split-photo { min-height: 520px; background-size: cover; background-position: center; position: relative; transition: clip-path .6s var(--ease); clip-path: inset(0); }
.split-photo .tag { position: absolute; left: 16px; bottom: 16px; }
.ticks { list-style: none; display: grid; gap: 0; margin-top: 20px; }
.ticks li { border-top: 1px solid var(--line); padding: 14px 0 14px 34px; position: relative; color: rgba(var(--fg),.86); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 12px; height: 12px; border: 2px solid var(--white); transform: rotate(45deg); }
.ticks li b { color: var(--white); }

.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp > div { border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }
.cmp > div:first-child { background: var(--white); color: var(--ink); border-color: var(--white); }
.cmp h3 { font: 400 clamp(44px, 4.6vw, 72px)/.88 "Bebas"; text-transform: uppercase; margin: 10px 0 16px; }
.cmp p { font-size: 16px; }
.cmp > div:first-child .meta { color: var(--inv-muted); }
.cmp > div:last-child p { color: rgba(var(--fg),.82); }

.band-cta { border-block: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.band-cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.band-cta h2 { font-size: clamp(48px, 6.4vw, 100px); }
.band-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; }

.soon { border: 1px dashed rgba(var(--fg),.4); padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; }
.soon h3 { font: 400 clamp(40px, 4vw, 64px)/.9 "Bebas"; text-transform: uppercase; }
.soon p { color: rgba(var(--fg),.8); margin-top: 8px; max-width: 36em; }

/* утилиты (вместо style="" — его запрещает CSP) */
.mt { margin-top: 20px; }
.mt-xl { margin-top: clamp(48px, 6vw, 96px); }
.h3x { font-size: clamp(44px, 5vw, 80px); margin-bottom: 16px; }
.band-sub { max-width: 34em; margin-top: 12px; }
.band-sub + .punch { margin-top: 16px; }               /* «Обучение»: подарок за предзапись */

/* ===== «живое»: скрытие только при .anim на <html> (ставит скрипт) ===== */
.rise { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.anim .rise:not(.in) { opacity: 0; transform: translateY(24px); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .04em .03em; margin: -.06em -.04em -.03em; }
.w > span { display: inline-block; transition: transform var(--t) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.anim .words:not(.in) .w > span { transform: translateY(112%); }
.anim .cur:not(.in), .anim .dir:not(.in) .dir-photo, .anim .trip:not(.in) figure, .anim .shots:not(.in) .shot { clip-path: inset(100% 0 0 0); }
.anim .qualities:not(.in) li { opacity: 0; transform: translateX(-28px); }


/* стрелка «наверх» — появляется после первого экрана */
.to-top { position: fixed; z-index: 80; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; display: grid; place-items: center; background: var(--white); color: var(--ink); border: 2px solid var(--white); font: 900 22px/1 "Mont"; text-decoration: none; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease), background .2s, color .2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--ink); color: var(--white); }

/* баннер cookie (только когда подключена Метрика) */
.cookie { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-left: auto; background: var(--coal); border: 1px solid var(--line); padding: 20px; display: grid; gap: 14px; font-size: 14px; }
.cookie p { color: rgba(var(--fg),.85); }
.cookie-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie .btn { min-height: 44px; padding: 0 18px; font-size: 13px; }

/* ===== светлая тема: html[data-theme="light"] (ставит boot.js из сохранённого выбора, переключает кнопка в шапке) ===== */
:root[data-theme="light"] {
  --ink: #f3f2ee; --coal: #e6e5e0; --coal2: #dcdbd5; --white: #0b0b0b; --fog: #6b6965;
  --fg: 11,11,11; --bg: 243,242,238; --card: 233,232,227;
  --line: rgba(11,11,11,.16); --inv-muted: #c9c7c1; --box: var(--white); --box-text: var(--white);
  color-scheme: light;
}
/* «тёмные зоны» — остаются как в тёмной теме: карточки на фото, тренеры на чёрном фоне, бумажный блок «Больше, чем тренировки» */
:root[data-theme="light"] :is(.dir, .coach, .pb-photo, .paper) {
  --ink: #0b0b0b; --coal: #161616; --coal2: #1d1d1d; --white: #fff; --fog: #8c8a86;
  --fg: 255,255,255; --bg: 11,11,11; --card: 22,22,22;
  --line: rgba(255,255,255,.16); --inv-muted: #3a3936; --box: var(--white); --box-text: var(--white);
  color: var(--white);
}
:root[data-theme="light"] .paper { color: var(--ink); }
:root[data-theme="light"] .hp g { stroke: #0b0b0b; }                               /* узор с формы — тёмными линиями */
:root[data-theme="light"] img[src*="-white"] { filter: invert(1); }                /* белые логотипы → чёрные */
:root[data-theme="light"] .hero-shots i { filter: saturate(.9) contrast(1.05); }/* плавная смена темы — только в момент переключения */
.theme-swap, .theme-swap *, .theme-swap *::before, .theme-swap *::after { transition: background-color .45s, color .45s, border-color .45s, fill .45s, stroke .45s !important; }

/* кнопка темы в шапке: луна в тёмной теме, солнце в светлой */
.theme-btn { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--white); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.theme-btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-btn .sun, :root[data-theme="light"] .theme-btn .moon { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: block; }

/* ===== страница «Детям» ===== */
/* первый экран: стопка «полароидов»; верхний снимок улетает и уходит вниз стопки (js) */
.polas { position: relative; height: clamp(420px, 44vw, 600px); }
.pola { --r: 0deg; --x: 0px; --y: 0px; position: absolute; left: 50%; top: 50%; width: clamp(240px, 24vw, 340px); margin: 0; background: #f4f3ef; padding: 14px 14px 0; box-shadow: 0 30px 60px rgba(0,0,0,.55);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); transition: transform .8s var(--ease), opacity .6s var(--ease); }
.pola i { display: block; aspect-ratio: 4 / 5; background-position: center; background-size: cover; background-repeat: no-repeat; }
.pola figcaption { font: 400 30px/1 "Bebas"; text-transform: uppercase; color: var(--ink); text-align: center; padding: 14px 4px 16px; }
.pola.p1 { --r: -5deg; --x: -14px; --y: 6px; }
.pola.p2 { --r: 4deg;  --x: 18px;  --y: -10px; }
.pola.p3 { --r: -2deg; --x: -4px;  --y: -16px; }
.pola.p4 { --r: 7deg;  --x: 22px;  --y: 12px; }
.pola.p5 { --r: -8deg; --x: -24px; --y: -4px; }
.pola.p6 { --r: 3deg;  --x: 8px;   --y: 14px; }
.pola.fly { transform: translate(-50%, -50%) translate(110%, -28%) rotate(26deg); opacity: 0; }
.polas .shot-tag { left: 4%; bottom: 6%; }

/* квадраты с фактами: подсветка перебегает по очереди (js: [data-cycle]) */
.sq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.sq.six { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.sq.wide { grid-template-columns: repeat(6, 1fr); }
.sq > div { aspect-ratio: 1; border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; transition: background .5s var(--ease), color .5s var(--ease), border-color .5s, transform .5s var(--ease); }
.sq.four > div { aspect-ratio: auto; min-height: 170px; padding: 22px; }
.sq b { font-size: clamp(30px, 3vw, 48px); }
.sq span { font-size: 13px; line-height: 1.3; color: rgba(var(--fg),.75); transition: color .5s; }
.sq > div.on, .sq > div:hover { background: var(--white); color: var(--ink); border-color: var(--white); transform: translateY(-4px); }
.sq > div.on span, .sq > div:hover span { color: var(--inv-muted); }

/* вырезанная фигура на графитовой плашке с ромбом */
.cut-photo { position: relative; min-height: 460px; background: var(--coal); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; isolation: isolate; }
.cut-photo::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; top: 14%; border: 2px solid rgba(var(--fg),.16); transform: rotate(45deg); z-index: -1; }
.cut-photo img { height: 440px; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
.cut-photo .tag { position: absolute; left: 16px; top: 16px; }

/* ГТО: четыре шага сезона, полоса сверху заполняется по очереди */
.gto-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px clamp(24px, 4vw, 64px); align-items: end; }
.gto-head p { color: rgba(var(--fg),.82); }
.gto-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; margin-top: clamp(28px, 3vw, 44px); }
.gto-grid .split-photo { min-height: 100%; }
.gto-steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; counter-reset: g; }
.gto-steps li { counter-increment: g; position: relative; border: 1px solid var(--line); padding: 24px; transition: background .3s, color .3s; }
.gto-steps li::before { content: "0" counter(g); display: block; font: 400 64px/.8 "Bebas"; color: transparent; -webkit-text-stroke: 1.2px rgba(var(--fg),.5); margin-bottom: 18px; }
.gto-steps li::after { content: ""; position: absolute; left: -1px; top: -1px; height: 2px; width: 0; background: var(--white); transition: width .8s var(--ease); }
.gto-steps.in li::after { width: calc(100% + 2px); }
.gto-steps.in li:nth-child(2)::after { transition-delay: .3s; }
.gto-steps.in li:nth-child(3)::after { transition-delay: .6s; }
.gto-steps.in li:nth-child(4)::after { transition-delay: .9s; }
.gto-steps .meta { font-size: 11px; color: var(--fog); }
.gto-steps b { display: block; font: 900 italic 18px/1.2 "Mont"; text-transform: uppercase; margin: 8px 0; }
.gto-steps p { font-size: 15px; color: rgba(var(--fg),.8); }
.gto-steps li:hover { background: var(--white); color: var(--ink); }
.gto-steps li:hover::before { -webkit-text-stroke-color: var(--ink); }
.gto-steps li:hover p, .gto-steps li:hover .meta { color: var(--inv-muted); }

/* ОФП vs кроссфит: переключатель, текст и полосы перестраиваются */
.vs { border: 1px solid var(--line); padding: clamp(24px, 3vw, 44px); }
.vs-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.vs-head .h3x { margin: 0; }
.vs-switch { position: relative; display: inline-flex; border: 1px solid var(--white); }
.vs-switch::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--white); transform: skewX(-9deg) scaleX(1.04); transition: left .5s var(--ease); }
.vs[data-mode="cross"] .vs-switch::before { left: 50%; }
.vs-switch button { position: relative; z-index: 1; min-width: 150px; padding: 16px 24px; background: none; border: 0; color: var(--white); font: 900 italic 16px/1 "Mont"; text-transform: uppercase; cursor: pointer; transition: color .4s; }
.vs-switch button[aria-pressed="true"] { color: var(--ink); }
.vs-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(24px, 4vw, 64px); margin-top: clamp(24px, 3vw, 40px); align-items: start; }
.vs-text { display: grid; }
.vs-text > div { grid-area: 1 / 1; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s; }
.vs[data-mode="ofp"] [data-for="cross"], .vs[data-mode="cross"] [data-for="ofp"] { opacity: 0; transform: translateX(28px); visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
.vs-text .meta { color: var(--fog); }
.vs-text b { display: block; font-size: clamp(48px, 5vw, 80px); margin: 10px 0 14px; }
.vs-text p { color: rgba(var(--fg),.84); }
.vs-bars { list-style: none; display: grid; gap: 18px; padding-top: 8px; }
.vs-bars span { display: block; margin-bottom: 8px; font: 600 12px/1 "Mont"; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }
.vs-bars i { display: block; height: 16px; background: rgba(var(--fg),.08); transform: skewX(-12deg); }
.vs-bars i::before { content: ""; display: block; height: 100%; width: var(--w, 0); background: var(--white); transition: width .9s var(--ease); }
.vs[data-mode="ofp"] .b-tech { --w: 95%; }   .vs[data-mode="cross"] .b-tech { --w: 95%; }
.vs[data-mode="ofp"] .b-tempo { --w: 40%; }  .vs[data-mode="cross"] .b-tempo { --w: 85%; }
.vs[data-mode="ofp"] .b-load { --w: 45%; }   .vs[data-mode="cross"] .b-load { --w: 75%; }
.vs[data-mode="ofp"] .b-switch { --w: 22%; } .vs[data-mode="cross"] .b-switch { --w: 92%; }
.vs-path { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); padding-top: 20px; }
.vs-path span { font: 400 clamp(28px, 2.6vw, 40px)/1 "Bebas"; text-transform: uppercase; }
.vs-path i { position: relative; flex: 0 0 clamp(80px, 12vw, 180px); height: 2px; background: rgba(var(--fg),.25); overflow: hidden; }
.vs-path i::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: var(--white); animation: path 1.8s var(--ease) infinite; }
@keyframes path { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.vs-path small { font-size: 14px; }

/* бокс: вырезанный боксёр на наклонной полосе */
.box-sec { border-block: 1px solid var(--line); overflow: hidden; isolation: isolate; padding-bottom: 0; }
.box-sec .split { align-items: end; }
.box-sec .split > div:first-child { padding-bottom: var(--section); }
.box-sec h2 { font-size: clamp(52px, 7vw, 112px); margin: 18px 0 24px; }
.box-teams-list { list-style: none; margin-bottom: 14px; }
.box-teams-list li { display: grid; gap: 4px; border-top: 1px solid var(--line); padding: 16px 0; }
.box-teams-list b { font: 400 clamp(28px, 2.6vw, 40px)/1 "Bebas"; color: var(--box-text); }
.box-teams-list span { color: rgba(var(--fg),.85); }
.box-sec .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.box-cut { position: relative; display: flex; justify-content: center; }
.box-cut::before { content: ""; position: absolute; inset: 12% 0 0 8%; background: var(--box); clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%); z-index: -1; }
.box-cut img { max-height: 640px; width: auto; height: auto; }
.box-cut.white::before { background: var(--white); }

/* родителям: фото + плашки с живыми рисунками (на ПК — при наведении, на телефоне — всегда) */
.parents { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.parents .split-photo { min-height: 100%; background-position: center 30%; }
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pc { border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.pc:hover, .pc:focus-visible { border-color: var(--white); background: rgba(var(--fg),.04); transform: translateY(-4px); }
.pc b { font-size: clamp(32px, 2.6vw, 42px); }
.pc p { font-size: 14px; color: rgba(var(--fg),.8); }
.pc a { color: var(--white); }
.pc-art { width: 100%; height: 72px; margin-bottom: 8px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pc-art * { animation-play-state: paused !important; }
.pc:hover .pc-art *, .pc:focus-visible .pc-art * { animation-play-state: running !important; }
@media (hover: none) { .pc-art * { animation-play-state: running !important; } }
.run .rn { animation: rn-x 3.4s linear infinite; }
.run .r2 { animation-delay: -1.15s; } .run .r3 { animation-delay: -2.3s; }
.run .fa, .run .fb { animation: rn-f .36s steps(1) infinite; }
.run .fb { animation-delay: -.18s; }
@keyframes rn-x { from { transform: translateX(-24px); } to { transform: translateX(164px); } }
@keyframes rn-f { 0% { opacity: 1; } 50% { opacity: 0; } }
.ball .bl { fill: var(--white); animation: bounce .45s cubic-bezier(.5,0,.75,0) infinite alternate; }
.ball .mat { fill: rgba(var(--fg),.12); transform-box: fill-box; transform-origin: center bottom; animation: squish .45s cubic-bezier(.5,0,.75,0) infinite alternate; }
@keyframes bounce { to { transform: translateY(20px); } }
@keyframes squish { 0%, 85% { transform: none; } 100% { transform: scaleY(.6); } }
.pair .ad { animation: adult 2.8s var(--ease) infinite alternate; }
.pair .hand { animation: hand 2.8s var(--ease) infinite alternate; }
.pair .ch { animation: child 2.8s var(--ease) infinite alternate; }
@keyframes adult { 0%, 20% { transform: none; opacity: 1; } 100% { transform: translateX(-24px); opacity: .3; } }
@keyframes hand { 0%, 15% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes child { 0%, 20% { transform: none; } 100% { transform: translateX(18px); } }
.bars rect { fill: rgba(var(--fg),.18); transform-box: fill-box; transform-origin: center bottom; animation: grow 1.4s var(--ease) infinite alternate; }
.bars rect:nth-of-type(2) { animation-delay: .15s; } .bars rect:nth-of-type(3) { animation-delay: .3s; } .bars rect:nth-of-type(4) { animation-delay: .45s; }
@keyframes grow { from { transform: scaleY(.3); } to { transform: none; } }
.eye .lid { transform-box: fill-box; transform-origin: center; animation: blink 2.6s infinite; }
.eye .pu { fill: var(--white); animation: look 2.6s ease-in-out infinite; }
@keyframes blink { 0%, 44%, 54%, 100% { transform: none; } 49% { transform: scaleY(.08); } }
@keyframes look { 0%, 100% { transform: none; } 25% { transform: translateX(-14px); } 75% { transform: translateX(14px); } }
.pin .pn { animation: pin .6s var(--ease) infinite alternate; }
.pin .pn circle { fill: var(--white); }
.pin .sh { fill: rgba(var(--fg),.2); stroke: none; transform-box: fill-box; transform-origin: center; animation: pin-sh .6s var(--ease) infinite alternate; }
@keyframes pin { to { transform: translateY(-10px); } }
@keyframes pin-sh { to { transform: scaleX(.55); opacity: .5; } }

/* что взять с собой: три живых рисунка */
.bring { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bi { border: 1px solid var(--line); padding: clamp(24px, 2.6vw, 36px); transition: border-color .3s, transform .3s var(--ease); }
.bi:hover { border-color: var(--white); transform: translateY(-4px); }
.bi-art { display: block; width: 140px; height: 140px; margin-bottom: 20px; fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.bi b { display: block; font-size: clamp(44px, 4vw, 64px); margin-bottom: 10px; }
.bi p { font-size: 16px; color: rgba(var(--fg),.82); }
.shirt { transform-origin: 50% 16%; animation: sway 2.6s ease-in-out infinite alternate; }
.shirt .logo { fill: var(--white); }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.shoe .sn { transform-box: fill-box; transform-origin: center bottom; animation: step 1.4s var(--ease) infinite; }
.shoe .mv { animation: mv 1.4s var(--ease) infinite; }
@keyframes step { 0%, 100% { transform: none; } 40% { transform: translate(6px, -12px) rotate(-7deg); } }
@keyframes mv { 0%, 100% { opacity: 0; transform: translateX(12px); } 40% { opacity: .8; transform: none; } }
.bottle .wt { fill: rgba(var(--fg),.85); stroke: none; animation: wave 2.4s linear infinite; }
@keyframes wave { to { transform: translateX(-60px); } }

/* персонально с Павлом Черновым («Детям») */
.pers-band { border-block: 1px solid var(--line); }
.pb-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 32px clamp(24px, 4vw, 72px); align-items: center; }
.pb-photo { background: var(--coal); aspect-ratio: 4 / 5; max-height: 600px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.pb-photo img { height: 92%; width: auto; max-width: none; }
.pers-band h2 { font-size: clamp(52px, 7vw, 112px); margin-bottom: 32px; }

/* ===== «Взрослым» и «Обучение» ===== */
/* первый экран: вырезанная фигура на мягком зернистом свечении */
.hero-cut { position: relative; height: clamp(440px, 50vw, 660px); display: flex; align-items: flex-end; justify-content: center; isolation: isolate; }
.hero-cut img { position: relative; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom;
  -webkit-mask: linear-gradient(180deg, #000 82%, transparent); mask: linear-gradient(180deg, #000 82%, transparent); }
.hero-cut .glow { position: absolute; inset: 4% -12% 0; z-index: -1; background: radial-gradient(closest-side, rgba(var(--fg),.26), rgba(var(--fg),.07) 55%, transparent 78%); }
.hero-cut .glow::after { content: ""; position: absolute; inset: 0; opacity: .7; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 78%); mask: radial-gradient(closest-side, #000 30%, transparent 78%); }
.anim .hero-cut .glow { animation: glow 5s ease-in-out infinite alternate; }
@keyframes glow { from { transform: scale(.95); opacity: .8; } to { transform: scale(1.05); opacity: 1; } }
.hero-cut .shot-tag { left: 0; bottom: 10%; }

/* зачем взрослому ОФП */
.why-ofp .lead { color: rgba(var(--fg),.8); margin-bottom: clamp(28px, 3vw, 44px); }
.wo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wo { border: 1px solid var(--line); padding: clamp(22px, 2.4vw, 32px); position: relative; overflow: hidden; transition: background .35s, color .35s, transform .35s var(--ease); }
.wo .n { font: 400 clamp(64px, 6vw, 96px)/.8 "Bebas"; color: transparent; -webkit-text-stroke: 1.2px rgba(var(--fg),.5); display: block; margin-bottom: 22px; transition: -webkit-text-stroke-color .35s; }
.wo h4 { font: 400 clamp(30px, 2.6vw, 40px)/.92 "Bebas"; text-transform: uppercase; margin-bottom: 12px; }
.wo p { font-size: 15px; color: rgba(var(--fg),.8); transition: color .35s; }
.wo:hover { background: var(--white); color: var(--ink); transform: translateY(-4px); }
.wo:hover .n { -webkit-text-stroke-color: var(--ink); }
.wo:hover p { color: var(--inv-muted); }

/* бокс для взрослых — широкий блок: фото, логотипы, форматы групп */
.box-wide { border-block: 1px solid var(--line); }
.box-wide .wrap { max-width: 1680px; }
.bw-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 32px clamp(24px, 4vw, 72px); align-items: stretch; }
.bw-photo { min-height: 640px; background-size: cover; background-position: center 30%; clip-path: inset(0); transition: clip-path .6s var(--ease); box-shadow: inset 0 -4px 0 var(--box); }
/* вырезанная группа — просто фигуры, без фона */
.bw-cut { display: flex; align-items: flex-end; justify-content: center; min-height: 520px; }
.bw-cut img { position: relative; width: 100%; max-width: 920px; height: auto; }
.bw-text { display: flex; flex-direction: column; justify-content: center; }
.box-wide h2 { font-size: clamp(56px, 7vw, 120px); margin-bottom: 24px; }
.bw-logos { display: flex; gap: 28px; align-items: center; margin-bottom: 24px; }
.bw-logos img { height: clamp(64px, 6vw, 92px); width: auto; }
.bw-groups { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bw-groups li { font: 900 italic 14px/1 "Mont"; text-transform: uppercase; padding: 12px 16px; border: 1px solid var(--box); color: var(--box-text); transform: skewX(-9deg); transition: background .25s, color .25s; }
.bw-groups li:hover { background: var(--box); color: var(--ink); }
.box-wide .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* пять принципов: фото «прилипает», линия слева растёт по мере прокрутки */
#method { isolation: isolate; overflow: hidden; }
.pr-ghost { bottom: auto; top: 40px; right: -.02em; }
.pr-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 32px clamp(24px, 4vw, 72px); align-items: start; }
.pr-photo { position: sticky; top: 100px; min-height: 560px; background-size: cover; background-position: center; clip-path: inset(0); transition: clip-path .6s var(--ease); }
.pr-photo .tag { position: absolute; left: 16px; bottom: 16px; }
.pr-list { --p: 0; list-style: none; position: relative; padding-left: 32px; display: grid; gap: 12px; }
.pr-list::before, .pr-list::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
.pr-list::after { background: var(--white); transform-origin: top; transform: scaleY(var(--p)); }
.pr { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 20px clamp(16px, 2vw, 32px); align-items: start; border: 1px solid var(--line); padding: clamp(20px, 2.4vw, 32px); transition: background .35s, color .35s, transform .5s var(--ease), opacity .5s var(--ease); }
.pr { margin-left: var(--m, 0px); }
.pr::before { content: ""; position: absolute; left: calc(-39px - var(--m, 0px)); top: 34px; width: 12px; height: 12px; border: 2px solid var(--white); background: var(--ink); transform: rotate(45deg); transition: background .3s; }
.pr.in::before { background: var(--white); }
.anim .pr.rise:not(.in) { transform: translateX(48px); }
.pr:nth-child(2) { --m: 24px; } .pr:nth-child(3) { --m: 48px; } .pr:nth-child(4) { --m: 24px; }
.pr-n { font-size: clamp(64px, 6vw, 100px); line-height: .8; color: transparent; -webkit-text-stroke: 1.2px var(--white);
  background: linear-gradient(100deg, var(--white) 45%, transparent 55%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position 1.2s var(--ease) .2s; }
.pr.in .pr-n { background-position: 0 0; }
.pr h3 { font: 400 clamp(32px, 3vw, 48px)/.92 "Bebas"; text-transform: uppercase; margin-bottom: 10px; }
.pr p { color: rgba(var(--fg),.8); font-size: 16px; transition: color .35s; }
.pr:hover { background: var(--white); color: var(--ink); }
.pr:hover .pr-n { -webkit-text-stroke-color: var(--ink); background-image: linear-gradient(100deg, var(--ink) 45%, transparent 55%); }
.pr:hover p { color: var(--inv-muted); }

/* страница «Контакты» */
.contacts-page { padding-top: clamp(120px, 14vw, 180px); min-height: 100svh; }
.contacts-page .page-title { margin-bottom: clamp(36px, 5vw, 72px); }

/* опыт Павла: фото семинара + плашки фактов (при наведении — белые) */
.exp-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 12px; }
.exp-grid .split-photo { min-height: 100%; }
.exp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex { border: 1px solid var(--line); padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 10px; transition: background .35s, color .35s, transform .35s var(--ease); }
.ex b { font-size: clamp(36px, 3.4vw, 56px); }
.ex .meta { color: var(--fog); font-size: 11px; }
.ex p { font-size: 15px; color: rgba(var(--fg),.8); transition: color .35s; }
.ex.wide { border-color: rgba(var(--fg),.4); }
.ex:hover { background: var(--white); color: var(--ink); transform: translateY(-4px); }
.ex:hover p, .ex:hover .meta { color: var(--inv-muted); }

/* книга: крупнее, на развороте — темы */
.book.big { width: min(360px, 70vw); }
.book-toc { list-style: none; counter-reset: t; display: grid; gap: 0; margin: 10px 0; }
.book-toc li { counter-increment: t; display: flex; gap: 10px; font: 600 13px/1.3 "Mont"; color: var(--inv-muted); padding: 7px 0; border-bottom: 1px solid rgba(var(--bg),.14); }
.book-toc li::before { content: counter(t, upper-roman); font: 400 18px/1 "Bebas"; color: var(--ink); min-width: 22px; }

.faq-cut { height: auto; width: min(100%, 340px); margin-top: 32px; -webkit-mask: linear-gradient(180deg, #000 72%, transparent); mask: linear-gradient(180deg, #000 72%, transparent); }

/* фоны фото (вынесены из style="" ради CSP) */
.bg-pola-1 { background-image: url("../img/pola-1.webp"); }
.bg-pola-2 { background-image: url("../img/pola-2.webp"); }
.bg-pola-3 { background-image: url("../img/pola-3.webp"); }
.bg-pola-4 { background-image: url("../img/pola-4.webp"); }
.bg-pola-5 { background-image: url("../img/pola-5.webp"); }
.bg-pola-6 { background-image: url("../img/pola-6.webp"); }
.bg-ofp-wall { background-image: url("../img/ofp-wall.webp"); background-position: center 35%; }
.bg-gto { background-image: url("../img/gto.webp"); }
.bg-parents-kid { background-image: url("../img/parents-kid.webp"); }
.bg-principles { background-image: url("../img/principles.webp"); }
.bg-box-women { background-image: url("../img/box-women.webp"); }
.bg-seminar { background-image: url("../img/seminar.webp"); }
.bg-box-kids { background-image: url("../img/box-kids.webp"); }
.bg-egor-group { background-image: url("../img/egor-group.webp"); }
.bg-grass { background-image: url("../img/grass.webp"); }
.bg-hall { background-image: url("../img/hall.webp"); }
.bg-mats { background-image: url("../img/mats.webp"); }
.bg-stage { background-image: url("../img/stage.webp"); }
.bg-warmup { background-image: url("../img/warmup.webp"); }
.bg-kids { background-image: url("../img/hero-kids.webp"); background-position: center 30%; }
.bg-team { background-image: url("../img/team-crew.webp"); }
.bg-ofp-kids { background-image: url("../img/ofp-kids.webp"); background-position: center 40%; }
.bg-cross { background-image: url("../img/cross.webp"); }
.bg-box-boys { background-image: url("../img/box-boys.webp"); background-position: center 30%; }
.bg-life-youth { background-image: url("../img/life-youth.webp"); }
.bg-life-nature { background-image: url("../img/life-nature.webp"); }
.bg-life-dk { background-image: url("../img/life-dk.webp"); }
.bg-life-family { background-image: url("../img/life-family.webp"); background-position: center 60%; }
.bg-life-holidays { background-image: url("../img/life-holidays.webp"); }
.bg-life-street { background-image: url("../img/life-street.webp"); }
.bg-life-arena { background-image: url("../img/life-arena.webp"); }
.bg-reviews-joy { background-image: url("../img/reviews-joy.webp"); }
.bg-coach-knyazev { background: var(--coal) url("../img/coach-knyazev.webp?v=2") center 20% / cover no-repeat; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band-track { animation: none; }
  .sched:not([hidden]) .row, .q-step.enter, .faq details[open] > div, .hp, .streaks i, .rot > span, .over .sweep, .signup-title .fill, .life-car, .coach::before, .hero-shots i, .pc-art *, .bi-art, .bi-art *, .vs-path i::before, .hero-cut .glow { animation: none; }
  .over .sweep, .signup-title .fill { background-position: 0 0; }
  .life-run { overflow-x: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ===== планшет ===== */
@media (max-width: 1180px) {
  .nav { display: none; }
  .top-cta { display: none; }
  .top-mini { display: inline-flex; margin-left: auto; }
  .burger { display: block; }
  .top.open { background: var(--ink); }
  .top.open .nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 76px; left: 0; right: 0; height: calc(100svh - 76px); background: var(--ink); padding: 24px var(--gutter); gap: 0; overflow-y: auto; }
  .top.open .nav a { font: 400 48px/1.1 "Bebas"; text-transform: uppercase; letter-spacing: 0; padding: 6px 0; color: var(--white); }
  .top.open .nav a[aria-current="page"]::after { display: none; }
  .top.open .nav .nav-cta { display: block; margin-top: 24px; }
  .top.open .nav .btn { font: 900 italic 16px/1 "Mont"; width: 100%; padding: 0 20px; }
}
@media (max-width: 1024px) {
  .hero-grid, .page-hero-grid, .teaser-grid, .problem, .approach, .contacts, .faq-grid, .q-res, .split { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  .doors { grid-template-columns: 1fr 1fr; }
  .dirs { grid-template-columns: 1fr 1fr; }
  .dir, .dir:nth-child(1), .dir:nth-child(2) { grid-column: span 1; min-height: 400px; }
  .approach-photo, .split-photo { min-height: 380px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(n+3) { margin-top: 28px; border-top: 1px solid var(--line); }
  .cards3, .reviews { grid-template-columns: 1fr 1fr; }
  .prices { grid-template-columns: 1fr 1fr; }
  .coaches { grid-template-columns: 1fr 1fr; }
  .car-track { grid-auto-columns: calc((100% - 12px) / 2); }
  .q-ages, .q-ages.kids { grid-template-columns: repeat(3, 1fr); }
  .ladder { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .step, .step:nth-child(n) { min-height: 0; padding-bottom: 20px; }
  .shots { height: 420px; }
  .gto-head, .gto-grid, .vs-body, .parents { grid-template-columns: 1fr; }
  .gto-grid .split-photo, .parents .split-photo { min-height: 380px; }
  .pcards { grid-template-columns: 1fr 1fr; }
  .sq.four { grid-template-columns: 1fr 1fr; }
  .wo-grid { grid-template-columns: 1fr 1fr; }
  .sq.wide { grid-template-columns: repeat(3, 1fr); }
  .bw-grid, .pr-grid, .pb-grid, .exp-grid { grid-template-columns: 1fr; }
  .exp-grid .split-photo { min-height: 420px; }
  .bw-photo, .bw-cut { min-height: 320px; }
  .pr-photo { position: relative; top: 0; min-height: 380px; }
  .pr:nth-child(n) { --m: 0px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
/* ===== телефон ===== */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .top .wrap { height: 64px; gap: 10px; }
  .top .logo img { height: 40px; }
  .top .top-mini { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .top.open .nav { top: 64px; height: calc(100svh - 64px); }
  .hero { padding-bottom: 20px; }
  .hero-shots { --hs-o: .3; inset: 0; clip-path: none; -webkit-mask: linear-gradient(180deg, #000 0, transparent 70%); mask: linear-gradient(180deg, #000 0, transparent 70%); }
  .why-top { padding-right: 0; }
  .why-coach { top: -24px; right: calc(var(--gutter) * -1); width: 46vw; height: 340px; opacity: .32; }
  .reviews-photo { aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
  .polas { height: 440px; }
  .pola { width: 60vw; }
  .sq, .sq.six, .sq.wide { grid-template-columns: 1fr 1fr; }
  .cut-photo { min-height: 380px; }
  .cut-photo img { height: 360px; }
  .pcards, .gto-steps, .bring { grid-template-columns: 1fr; }
  .vs-switch button { min-width: 0; padding: 14px 18px; font-size: 14px; }
  .box-sec .split > div:first-child { padding-bottom: 0; }
  .box-cut img { max-height: 440px; }
  .faq-cut { width: 220px; }
  .wo-grid, .exp { grid-template-columns: 1fr; }
  .hero-cut { height: 420px; }
  .pr { grid-template-columns: 1fr; gap: 12px; }
  .pb-photo { max-height: 440px; }
  .hero-title { font-size: 24vw; }
  .hero-rot { font-size: 9.4vw; }
  .page-title { font-size: 20vw; }
  .hero-cta, .hero-cta .btn, .signup-alt .btn, .qr-act .btn, .band-cta .actions, .band-cta .btn { width: 100%; }
  .doors { grid-template-columns: 1fr; }
  .door { padding: 16px 18px; }
  .door b { font-size: 46px; }
  .scroll-cue { display: none; }
  .bands { height: 130px; }
  .dirs, .cards3, .reviews, .prices, .prices.two, .coaches, .formats, .cmp, .paper ul.life-list, .facts4 { grid-template-columns: 1fr; }
  .dir, .dir:nth-child(n) { grid-column: auto; min-height: 380px; padding: 22px; }
  .format, .format + .format { padding: 22px 0 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .coach { min-height: 500px; padding: 22px; }
  .car-track { grid-auto-columns: 84%; }
  .car-btn { width: 48px; height: 48px; }
  .book { margin-left: 0; }
  .tabs button { padding: 12px 16px 10px; }
  .sched .row, .sched.wide-time .row { grid-template-columns: 1fr; gap: 4px; }
  .sched .row b { font-size: 26px; }
  .sched .row i { font-size: 14px; }
  .price { min-height: 0; padding: 24px; }
  .q-head { padding: 16px; }
  .q-prog { flex-basis: 100%; order: 3; }
  .q-prog li { font-size: 10px; letter-spacing: .14em; }
  .q-step { padding: 20px 16px 24px; }
  .q-ages, .q-ages.kids { grid-template-columns: 1fr 1fr; }
  .q-opt { min-height: 140px; padding: 14px; }
  .q-groups { grid-template-columns: 1fr; }
  .q-card { min-height: 0; }
  .signup-alt .tel { width: 100%; text-align: center; }
  .lf-row { grid-template-columns: 1fr; }
  #prices .prices { grid-template-columns: 1fr; }
  .lead-form .btn { justify-self: stretch; }
  .faq details > div { padding-right: 0; }
  .ladder { grid-template-columns: 1fr 1fr; }
  .shots { height: 340px; }
  .soon { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ===== телефон — компактнее (пользователь, 2026-10-30: «громоздкая, сделать менее массивной»):
   меньше пустоты между блоками, заголовки и кнопки скромнее, длинные стопки карточек — листаются вбок ===== */
@media (max-width: 767px) {
  :root { --section: 52px; }
  body { font-size: 15px; line-height: 1.5; }
  .h2 { font-size: 46px; }
  .sec-head { margin-bottom: 22px; gap: 10px; }
  .lead { font-size: 16px; }
  .btn { min-height: 48px; padding: 0 20px; font-size: 14px; gap: 10px; }
  .btn-xl { min-height: 54px; padding: 0 22px; font-size: 15px; }
  .hero-free { font-size: 12px; padding: 7px 12px 6px; margin-bottom: 14px; }
  .hero-title { font-size: 21vw; }
  .hero-rot { font-size: 8vw; }
  .hero-cta { gap: 8px; }
  .page-title { font-size: 17vw; }
  .doors { gap: 8px; }
  .door { padding: 12px 16px; }
  .door b { font-size: 34px; }
  .door small { font-size: 12px; }
  .bands { height: 92px; margin-block: 0; }
  .band { padding: 10px 0 8px; }
  .band li { font-size: 22px; }
  .band li::after { width: 8px; height: 8px; margin: 0 14px .14em; }
  .statement { font-size: 26px; }
  .why-coach { height: 260px; }
  /* «Почему мы» 01–03 и отзывы — лента с прокруткой пальцем вместо длинной стопки */
  .cards3, .reviews, .pcards, .bring, .gto-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .cards3::-webkit-scrollbar, .reviews::-webkit-scrollbar, .pcards::-webkit-scrollbar, .bring::-webkit-scrollbar, .gto-steps::-webkit-scrollbar { display: none; }
  .cards3 > *, .reviews > *, .pcards > *, .bring > *, .gto-steps > * { flex: 0 0 78%; scroll-snap-align: start; }
  .pc-art { height: 56px; }
  .pc, .gto-steps li { padding: 18px; }
  .pc b { font-size: 28px; }
  .gto-steps li::before { font-size: 44px; margin-bottom: 10px; }
  .bi { padding: 18px; }
  .bi-art { width: 72px; height: 72px; margin-bottom: 12px; }
  .bi b { font-size: 32px; margin-bottom: 6px; }
  .bi p { font-size: 14px; }
  .cards3 { margin-top: 28px; }
  .card { padding: 18px; }
  .card .n { font-size: 46px; margin-bottom: 12px; }
  .review { padding: 18px; min-height: 0; gap: 12px; }
  .stats { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .stat { padding: 14px 12px 12px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat b { font-size: 46px; }
  .dir, .dir:nth-child(n) { min-height: 290px; padding: 18px; }
  .dir h3 { font-size: 38px; margin-bottom: 8px; }
  .dir p { font-size: 14px; }
  .coach { min-height: 420px; padding: 18px; }
  .coach h3 { font-size: 34px; }
  .price { padding: 18px; gap: 14px; }
  .price b.bebas { font-size: 58px; }
  .price.free b.bebas { font-size: 48px; }
  .q-opt { min-height: 104px; padding: 12px; gap: 6px; }
  .q-opt .bebas { font-size: 34px; }
  .faq summary { font-size: 22px; padding: 16px 0 12px; }
  .band-cta h2 { font-size: 46px; }
  .ghost-word { display: none; }
  .sq > div { padding: 10px; }
  .polas { height: 380px; }
  .cut-photo { min-height: 320px; }
  .cut-photo img { height: 300px; }
  .box-cut img, .pb-photo { max-height: 360px; }
  .hero-cut { height: 340px; }
  /* расписание: время слева, группа и тренер справа — строка вдвое ниже */
  .sched .row, .sched.wide-time .row { grid-template-columns: 92px 1fr; gap: 2px 12px; padding: 12px 0; }
  .sched.wide-time .row { grid-template-columns: 1fr; }
  .sched .row b { font-size: 20px; grid-row: span 2; }
  .sched.wide-time .row b { grid-row: auto; }
  .sched .row span { font-size: 14px; }
  .sched .row i { font-size: 13px; }
}