/* =========================================================
   THE VERY — женский зал, Краснодар
   Стратегия цвета: drenched oxblood + фирменный красный
   Шрифты: Onest (текст, тяжёлые заголовки) + Prata (акценты)
   ========================================================= */

:root{
  /* поверхности */
  --bg:        oklch(0.148 0.030 18);
  --bg-deep:   oklch(0.105 0.024 18);
  --surface:   oklch(0.198 0.038 17);
  --surface-2: oklch(0.245 0.046 17);
  --line:      oklch(0.315 0.050 17);
  --line-soft: oklch(0.255 0.040 17);

  /* текст на тёмном */
  --ink:   oklch(0.972 0.010 30);
  --ink-2: oklch(0.858 0.020 22);
  --ink-3: oklch(0.712 0.028 22);

  /* бренд */
  --red:      oklch(0.585 0.216 26);
  --red-hi:   oklch(0.672 0.190 28);
  --red-mid:  oklch(0.500 0.192 26);
  --red-deep: oklch(0.430 0.170 25);
  --blush:    oklch(0.880 0.055 20);

  /* светлая секция */
  --paper:      oklch(0.968 0.012 22);
  --paper-2:    oklch(0.930 0.016 22);
  --paper-ink:  oklch(0.205 0.035 20);
  --paper-ink2: oklch(0.420 0.030 20);
  --paper-line: oklch(0.855 0.020 22);

  /* типографика */
  --f-text: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* у Prata нет знака рубля, поэтому вторым идёт Onest, а не засечный шрифт */
  --f-grace: 'Prata', 'Onest', 'Times New Roman', Georgia, serif;

  --t-hero: clamp(2.6rem, 7.4vw, 5.6rem);
  --t-h2:   clamp(1.9rem, 4.2vw, 3.4rem);
  --t-h3:   clamp(1.15rem, 1.7vw, 1.4rem);
  --t-lead: clamp(1.02rem, 1.35vw, 1.22rem);
  --t-body: clamp(0.98rem, 1.1vw, 1.05rem);
  --t-sm:   0.875rem;
  --t-xs:   0.78rem;

  /* ритм */
  --sp-sec: clamp(4.5rem, 9vw, 9rem);
  --wrap: 1240px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --r-s: 6px;
  --r-m: 14px;
  --r-l: 22px;

  --ease: cubic-bezier(.16,.84,.34,1);
  --dur: .5s;

  --z-sticky: 30;
  --z-head: 40;
  --z-mobnav: 50;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;

}
/* зерно поверх всего, чтобы плоские заливки не выглядели цифровыми */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
img{max-width:100%; display:block}
[hidden]{display:none !important}
a{color:inherit}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-0.03em; line-height:1.04}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--red-hi); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.skip{position:absolute; left:-9999px; top:0; z-index:99; background:var(--red); color:#fff; padding:.7rem 1.1rem}
.skip:focus{left:.6rem; top:.6rem}

.h2{font-size:var(--t-h2); font-weight:800; letter-spacing:-0.035em}
.lead{font-size:var(--t-lead); color:var(--ink-2); max-width:56ch; margin-top:1rem; line-height:1.55}

/* ---------- логотип ---------- */
.mark{text-decoration:none; display:inline-block}
.mark-box{
  display:inline-flex; align-items:baseline; gap:.42em;
  border:1px solid var(--red); border-radius:5px;
  padding:.42em .62em .38em;
  font-size:.85rem; line-height:1;
}
.mark-the{font-weight:300; letter-spacing:.22em; color:var(--red-hi); font-size:.72em}
.mark-very{font-weight:400; letter-spacing:.30em; color:var(--ink); font-size:1em}

/* ---------- кнопки ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.82em 1.35em; border-radius:999px; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:var(--t-sm); letter-spacing:-0.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform .25s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-red{--btn-bg:var(--red); --btn-fg:oklch(0.995 0 0); --btn-bd:var(--red)}
.btn-red:hover{--btn-bg:var(--red-hi); --btn-bd:var(--red-hi)}
.btn-ghost{--btn-bg:transparent; --btn-bd:var(--line)}
.btn-ghost:hover{--btn-bd:var(--red-hi); --btn-bg:oklch(0.585 0.216 26 / .12)}
.btn-dark{--btn-bg:var(--bg-deep); --btn-fg:var(--ink); --btn-bd:var(--bg-deep)}
.btn-dark:hover{--btn-bg:oklch(0.06 0.02 18)}
.btn-lg{padding:1.02em 1.8em; font-size:1rem}
.btn-sm{padding:.68em 1.05em; font-size:.82rem}
.btn-full{width:100%}
.btn-icon{padding:.9em; aspect-ratio:1}

/* ---------- шапка ---------- */
.site-head{
  position:fixed; inset:0 0 auto; z-index:var(--z-head);
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.stuck{
  background:oklch(0.148 0.030 18 / .88);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.head-in{display:flex; align-items:center; gap:1.4rem; height:74px}
.nav{display:none; gap:1.5rem; margin-inline:auto; font-size:.9rem; font-weight:500}
.nav a{text-decoration:none; color:var(--ink-2); transition:color .3s var(--ease); position:relative}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--red); transition:right .4s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.head-cta{display:none; align-items:center; gap:1rem; margin-left:auto}
.tel-link{text-decoration:none; font-weight:600; font-size:.9rem; color:var(--ink); font-variant-numeric:tabular-nums}
.tel-link:hover{color:var(--red-hi)}
.burger{
  margin-left:auto; width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  background:oklch(0.148 0.030 18 / .6); display:grid; place-content:center; gap:5px; cursor:pointer;
}
.burger span{display:block; width:17px; height:1.5px; background:var(--ink); transition:transform .35s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
.mobnav{
  position:fixed; inset:74px 0 auto; z-index:var(--z-mobnav);
  background:var(--bg-deep); border-bottom:1px solid var(--line-soft);
  padding:1.2rem var(--gut) 1.7rem; display:grid; gap:.2rem;
}
.mobnav a{padding:.75rem 0; text-decoration:none; font-size:1.06rem; font-weight:500; border-bottom:1px solid var(--line-soft)}
.mobnav .btn{margin-top:1rem; border-bottom:0}
@media (min-width:1024px){
  .burger,.mobnav{display:none !important}
  .nav,.head-cta{display:flex}
}

/* ---------- герой ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:clamp(6.2rem,17vh,9rem) 0 clamp(2.6rem,6vw,4.5rem); overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:76% 26%; filter:grayscale(1) contrast(1.12) brightness(.72)}
.hero-media::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(94deg, var(--bg) 0%, var(--bg) 24%, oklch(0.148 0.030 18 / .94) 48%, oklch(0.148 0.030 18 / .50) 70%, transparent 93%),
    linear-gradient(180deg, oklch(0.148 0.030 18 / .72) 0%, oklch(0.148 0.030 18 / .18) 34%, oklch(0.148 0.030 18 / .78) 82%, var(--bg) 100%);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(85% 65% at 90% 20%, oklch(0.585 0.216 26 / .42) 0%, transparent 62%);
  mix-blend-mode:screen;
}
@media (max-width:899px){
  .hero-media::before{
    background:linear-gradient(180deg, oklch(0.148 0.030 18 / .68) 0%, oklch(0.148 0.030 18 / .30) 26%, oklch(0.148 0.030 18 / .88) 62%, var(--bg) 100%);
  }
}
.hero-in{position:relative; z-index:1; width:100%}
.hero-kick{font-size:var(--t-xs); letter-spacing:.19em; text-transform:uppercase; color:var(--blush); font-weight:600}
.hero-h1{margin-top:1.1rem; font-size:var(--t-hero); font-weight:900; letter-spacing:-0.045em}
.hero-h1 .l1,.hero-h1 .l2{display:block}
.hero-h1 .l2{font-family:var(--f-grace); font-weight:400; letter-spacing:-0.015em; color:var(--red-hi); margin-top:.06em}
.hero-sub{margin-top:1.5rem; max-width:43ch; font-size:var(--t-lead); color:var(--ink-2); line-height:1.55}
.hero-btns{margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.75rem}
.hero-facts{
  margin-top:clamp(2.6rem,5vw,4rem); display:grid; gap:1.4rem 1.1rem;
  grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); padding-top:1.6rem;
}
.hero-facts li{display:flex; flex-direction:column; gap:.15rem}
.hero-facts b{font-family:var(--f-grace); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.hero-facts span{font-size:var(--t-sm); color:var(--ink-3); line-height:1.35}
.hero-badge{
  position:absolute; right:var(--gut); top:clamp(6rem,12vh,8.5rem); z-index:1;
  display:none; max-width:210px; text-align:right;
  border-right:1px solid var(--red); padding-right:.9rem;
}
.hero-badge span{display:block; font-weight:600; font-size:.95rem}
.hero-badge em{display:block; font-style:normal; font-size:var(--t-xs); color:var(--ink-3); margin-top:.25rem; line-height:1.4}
@media (min-width:600px){ .hero-facts{grid-template-columns:repeat(4,1fr)} }
@media (min-width:900px){ .hero-badge{display:block} }

/* ---------- бегущая строка ---------- */
.ticker{
  background:var(--red); color:oklch(0.995 0 0);
  padding:.72rem 0; overflow:hidden; border-block:1px solid oklch(0.43 0.17 25);
}
.ticker-row{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:slide 46s linear infinite;
  font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.ticker-row i{font-style:normal; opacity:.6; font-size:.7em}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- правила клуба ---------- */
.rules{padding:var(--sp-sec) 0}
.rules-head{max-width:70ch}
.rules-grid{margin-top:clamp(2.2rem,4vw,3.4rem); display:grid; gap:1rem; grid-template-columns:1fr}
.rule{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-m);
  padding:clamp(1.4rem,2.4vw,2rem);
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.rule:hover{border-color:var(--red); background:var(--surface-2); transform:translateY(-2px)}
.rule h3{font-size:var(--t-h3); font-weight:700; margin-bottom:.6rem}
.rule p{color:var(--ink-2); font-size:var(--t-body)}
.rule-big h3{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.rule-wide{background:var(--bg-deep); border-color:var(--line)}
.rule-wide h3{font-family:var(--f-grace); font-weight:400; letter-spacing:-0.01em; font-size:clamp(1.6rem,3vw,2.3rem); color:var(--blush)}
.rule-wide p{font-size:var(--t-lead); max-width:62ch}
.rule-photo{margin:0; border-radius:var(--r-m); overflow:hidden; min-height:230px; position:relative; background:var(--surface)}
.rule-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.9); transition:transform 1.1s var(--ease), filter .6s var(--ease)}
.rule-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg, oklch(0.585 0.216 26 / .30), oklch(0.105 0.024 18 / .55)); mix-blend-mode:multiply}
.rule-photo:hover img{transform:scale(1.04)}
@media (min-width:680px){
  .rules-grid{
    grid-template-columns:repeat(4,1fr);
    grid-template-areas:"big big photo photo" "a a b b" "c c d d" "wide wide wide wide";
  }
}
@media (min-width:1000px){
  .rules-grid{
    grid-template-columns:repeat(6,1fr);
    grid-template-areas:
      "big big big big photo photo"
      "a a b b photo photo"
      "c c c d d d"
      "wide wide wide wide wide wide";
  }
}
@media (min-width:680px){
  .rule-big{grid-area:big} .rule-photo{grid-area:photo}
  .rules-grid > .rule:nth-of-type(2){grid-area:a}
  .rules-grid > .rule:nth-of-type(3){grid-area:b}
  .rules-grid > .rule:nth-of-type(4){grid-area:c}
  .rules-grid > .rule:nth-of-type(5){grid-area:d}
  .rule-wide{grid-area:wide}
}

/* ---------- бесплатная тренировка ---------- */
.offer{background:var(--red-mid); color:oklch(0.995 0 0); padding:var(--sp-sec) 0; position:relative; overflow:hidden}
.offer::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 62% at 86% 6%, oklch(0.64 0.21 30 / .60), transparent 62%);
}
.offer-in{position:relative; display:grid; gap:clamp(2.4rem,5vw,4rem); align-items:start}
.offer-h{font-size:clamp(2rem,4.6vw,3.5rem); font-weight:800; line-height:1.02}
.offer-h .free{font-family:var(--f-grace); font-weight:400; letter-spacing:-0.01em}
.offer .lead{color:oklch(0.99 0.02 30 / .95); max-width:44ch}
.offer .btn-dark{margin-top:1.9rem}
.offer-note{margin-top:1rem; font-size:var(--t-sm); color:oklch(0.99 0.02 30 / .90); max-width:38ch}
.steps{display:grid; gap:.2rem}
.steps li{display:flex; gap:1.2rem; padding:1.2rem 0; border-top:1px solid oklch(0.99 0.02 30 / .30)}
.steps li:last-child{border-bottom:1px solid oklch(0.99 0.02 30 / .30)}
.steps .num{
  font-family:var(--f-grace); font-size:1.5rem; line-height:1; flex:0 0 auto;
  width:1.8em; color:oklch(0.99 0.02 30 / .86)
}
.steps h3{font-size:1.08rem; font-weight:700; margin-bottom:.35rem}
.steps p{font-size:var(--t-sm); color:oklch(0.99 0.02 30 / .94); line-height:1.55}
@media (min-width:960px){ .offer-in{grid-template-columns:1fr 1.05fr} }

/* ---------- форматы ---------- */
.formats{padding:var(--sp-sec) 0}
.fmt-grid{margin-top:clamp(2.2rem,4vw,3.4rem); display:grid; gap:1rem; grid-template-columns:1fr}
.fmt{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-m);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.fmt:hover{border-color:var(--red); transform:translateY(-3px)}
.fmt img{width:100%; aspect-ratio:16/10; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.86); transition:transform 1.1s var(--ease), filter .6s var(--ease)}
.fmt:hover img{transform:scale(1.045); filter:grayscale(.75) contrast(1.06) brightness(.92)}
.fmt-body{padding:clamp(1.3rem,2.2vw,1.8rem); display:flex; flex-direction:column; gap:.6rem; flex:1}
.fmt h3{font-size:var(--t-h3); font-weight:700}
.fmt p{color:var(--ink-2); font-size:var(--t-body)}
.fmt-price{margin-top:auto; padding-top:.7rem; font-weight:700; font-size:1.12rem; color:var(--ink) !important; font-variant-numeric:tabular-nums}
.fmt-price span{display:block; font-weight:400; font-size:var(--t-xs); color:var(--ink-3); letter-spacing:.02em}
.fmt-flat{background:var(--bg-deep)}
@media (min-width:680px){
  .fmt-grid{grid-template-columns:repeat(6,1fr); grid-template-areas:"h h h h a a" "b b b c c c" "d d d e e e"}
  .fmt-hero{grid-area:h; flex-direction:row; align-items:stretch}
  .fmt-hero img{width:50%; aspect-ratio:auto; height:100%}
  .fmt-hero .fmt-body{width:50%; justify-content:center}
  .fmt-hero h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
  .fmt-grid > .fmt:nth-of-type(2){grid-area:a}
  .fmt-grid > .fmt:nth-of-type(3){grid-area:b}
  .fmt-grid > .fmt:nth-of-type(4){grid-area:c}
  .fmt-grid > .fmt:nth-of-type(5){grid-area:d}
  .fmt-grid > .fmt:nth-of-type(6){grid-area:e}
}

/* ---------- цены (светлая секция) ---------- */
.prices{background:var(--paper); color:var(--paper-ink); padding:var(--sp-sec) 0}
.prices .h2{color:var(--paper-ink)}
.prices .lead{color:var(--paper-ink2)}
.tabs{margin-top:clamp(2rem,3.5vw,3rem)}
.tabbar{display:flex; flex-wrap:wrap; gap:.5rem; border-bottom:1px solid var(--paper-line); padding-bottom:1.1rem}
.tab{
  padding:.62em 1.1em; border-radius:999px; border:1px solid var(--paper-line);
  background:transparent; color:var(--paper-ink2); font-weight:600; font-size:var(--t-sm); cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tab:hover{border-color:var(--red-deep); color:var(--paper-ink)}
.tab.is-on{background:var(--red-deep); border-color:var(--red-deep); color:oklch(0.995 0 0)}
.panel{padding-top:.6rem}
.panel[hidden]{display:none}
.plist li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.15rem 0; border-bottom:1px solid var(--paper-line);
}
.plist h3{font-size:1.06rem; font-weight:600; letter-spacing:-0.015em}
.plist p{font-size:var(--t-sm); color:var(--paper-ink2); margin-top:.2rem}
.plist b{
  font-family:var(--f-grace); font-weight:400; font-size:clamp(1.25rem,2.4vw,1.7rem);
  white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
.plist .free-b{color:var(--red-deep)}
.prices-note{margin-top:1.4rem; font-size:var(--t-sm); color:var(--paper-ink2)}

/* ---------- отзывы ---------- */
.reviews{padding:var(--sp-sec) 0; background:var(--bg-deep)}
.rev-head{max-width:70ch}
.rev-grid{margin-top:clamp(2rem,3.5vw,3rem); display:grid; gap:1rem; grid-template-columns:1fr}
.rev{
  margin:0; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-m);
  padding:clamp(1.4rem,2.2vw,1.9rem); display:flex; flex-direction:column; gap:1rem;
}
.rev p{color:var(--ink-2); font-size:var(--t-body); line-height:1.65}
.rev cite{
  font-style:normal; font-weight:600; font-size:var(--t-sm); margin-top:auto;
  display:flex; align-items:baseline; gap:.6rem;
}
.rev cite span{font-weight:400; font-size:var(--t-xs); color:var(--ink-3)}
.rev-lead{background:transparent; border-color:var(--red)}
.rev-lead p{font-family:var(--f-grace); font-weight:400; font-size:clamp(1.1rem,1.9vw,1.45rem); line-height:1.5; color:var(--ink)}
.rev-links{margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.7rem}
@media (min-width:760px){
  .rev-grid{grid-template-columns:repeat(3,1fr)}
  .rev-lead{grid-column:span 3}
}

/* ---------- клубы ---------- */
.clubs{padding:var(--sp-sec) 0}
.club-grid{margin-top:clamp(2rem,3.5vw,3rem); display:grid; gap:1.4rem; grid-template-columns:1fr}
.club{border:1px solid var(--line-soft); border-radius:var(--r-l); overflow:hidden; background:var(--surface)}
.club-photo{margin:0; position:relative; aspect-ratio:16/9}
.club-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(1.06) contrast(1.12)}
.club-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, oklch(0.198 0.038 17 / .12) 0%, transparent 38%, oklch(0.198 0.038 17 / .55) 78%, oklch(0.198 0.038 17 / .96) 100%)}
.club-rate{
  position:absolute; left:1.1rem; top:1.1rem; z-index:1;
  background:oklch(0.105 0.024 18 / .72); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:.42rem .95rem;
  font-size:var(--t-xs); color:var(--ink-2); display:flex; align-items:baseline; gap:.45rem;
}
.club-rate b{font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums}
.club-body{padding:clamp(1.4rem,2.4vw,2rem)}
.club h3{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800}
.club-addr{margin-top:.4rem; color:var(--blush); font-size:var(--t-lead)}
.club-feat{margin-top:1.3rem; display:grid; gap:.55rem}
.club-feat li{padding-left:1.4rem; position:relative; color:var(--ink-2); font-size:var(--t-sm)}
.club-feat li::before{content:"✳"; position:absolute; left:0; top:0; color:var(--red-hi); font-size:.8em}
.club-btns{margin-top:1.7rem; display:flex; flex-wrap:wrap; gap:.6rem}
@media (min-width:860px){ .club-grid{grid-template-columns:1fr 1fr} }

/* ---------- FAQ ---------- */
.faq{padding:var(--sp-sec) 0; background:var(--bg-deep)}
.faq-in{display:grid; gap:clamp(1.8rem,3vw,3rem)}
.faq-list{display:grid}
.faq details{border-top:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none; cursor:pointer; padding:1.2rem 2.6rem 1.2rem 0; position:relative;
  font-weight:600; font-size:clamp(1rem,1.5vw,1.14rem); transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-hi)}
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:13px; height:13px;
  background:
    linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 13px no-repeat;
  transform:translateY(-50%); transition:transform .4s var(--ease); color:var(--red-hi);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.faq details p{padding:0 2.6rem 1.4rem 0; color:var(--ink-2); max-width:70ch}
@media (min-width:900px){ .faq-in{grid-template-columns:.8fr 1.4fr; align-items:start} }

/* ---------- запись ---------- */
.signup{padding:var(--sp-sec) 0}
.signup-in{display:grid; gap:clamp(2.2rem,4vw,3.5rem); align-items:start}
.signup-alt{margin-top:2rem; display:grid; gap:.7rem}
.signup-alt a{color:var(--ink-2); font-size:var(--t-sm); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:.15rem; transition:color .3s var(--ease), border-color .3s var(--ease)}
.signup-alt a:hover{color:var(--red-hi); border-color:var(--red-hi)}
.form{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:clamp(1.4rem,3vw,2.2rem); display:grid; gap:1.1rem}
.field{display:grid; gap:.45rem; border:0; padding:0; margin:0; min-width:0}
.field label,.field legend{font-size:var(--t-sm); font-weight:600; color:var(--ink-2); padding:0}
.field .opt{font-weight:400; color:var(--ink-3)}
.field input[type=text],.field input[type=tel],.field textarea{
  width:100%; background:var(--bg-deep); border:1px solid var(--line);
  border-radius:var(--r-s); padding:.85rem 1rem; color:var(--ink); font:inherit; font-size:1rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{resize:vertical; min-height:64px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3); opacity:1}
.field input:focus,.field textarea:focus{border-color:var(--red); outline:none; background:oklch(0.105 0.024 18)}
.field input[aria-invalid="true"]{border-color:var(--red-hi)}
.radios{display:flex; flex-wrap:wrap; gap:.5rem}
.radios label{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:.6rem 1rem;
  font-size:var(--t-sm); font-weight:500; color:var(--ink-2);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.radios input{accent-color:var(--red); margin:0}
.radios label:has(input:checked){border-color:var(--red); color:var(--ink); background:oklch(0.585 0.216 26 / .12)}
.agree{display:flex; gap:.7rem; align-items:flex-start; font-size:.82rem; color:var(--ink-3); line-height:1.5; cursor:pointer}
.agree input{margin-top:.25rem; accent-color:var(--red); flex:0 0 auto}
.agree a{color:var(--ink-2)}
.form-msg{font-size:var(--t-sm); min-height:1.2em}
.form-msg.ok{color:var(--blush)}
.form-msg.err{color:var(--red-hi)}
@media (min-width:900px){ .signup-in{grid-template-columns:1fr 1fr} }

/* ---------- подвал ---------- */
.foot{background:var(--bg-deep); border-top:1px solid var(--line-soft); padding-top:clamp(3rem,5vw,4.5rem)}
.foot-in{display:grid; gap:2.2rem; grid-template-columns:1fr}
.foot-brand p{margin-top:1.1rem; color:var(--ink-3); font-size:var(--t-sm)}
.foot-col h3{font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:.8rem}
.foot-col h3.mt{margin-top:1.6rem}
.foot-col p{font-size:var(--t-sm); color:var(--ink-2); margin-bottom:.9rem}
.foot-col a{text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .3s var(--ease), color .3s var(--ease)}
.foot-col a:hover{color:var(--red-hi); border-color:var(--red-hi)}
.req{color:var(--ink-3) !important; font-size:var(--t-xs) !important; line-height:1.6}
.foot-bottom{
  margin-top:clamp(2.5rem,4vw,3.5rem); padding-block:1.4rem; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:1rem; font-size:var(--t-xs); color:var(--ink-3);
}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--red-hi)}
@media (min-width:760px){ .foot-in{grid-template-columns:1.4fr 1fr 1fr 1fr} }

/* ---------- липкая кнопка на мобильных ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
  display:flex; gap:.6rem; padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:oklch(0.105 0.024 18 / .92); backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.sticky-cta.show{transform:none}
.sticky-cta[hidden]{display:none}
@media (min-width:1024px){ .sticky-cta{display:none !important} }

/* ---------- появление при скролле ---------- */
.js .r{opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.js .r.in{opacity:1; transform:none}
.a1,.a2,.a3,.a4,.a5,.a6{animation:rise .95s var(--ease) both}
.a2{animation-delay:.07s} .a3{animation-delay:.14s} .a4{animation-delay:.24s}
.a5{animation-delay:.34s} .a6{animation-delay:.44s}
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

@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 .r{opacity:1; transform:none}
  .ticker-row{animation:none}
  .sticky-cta{transition:none}
}
