:root{
  --red:#E31E24;
  --red-dark:#B8161B;
  --black:#141211;
  --black-2:#1B1918;
  --panel:#221F1E;
  --line:#37322F;
  --white:#FEFEFE;
  --grey:#A8A19C;
  --gold:#F5B942;
  --wa:#1FA855;
  --tg:#2AA5DC;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:"Montserrat","Segoe UI",Arial,sans-serif; line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%}
.container{max-width:1180px; margin:0 auto; padding:0 22px}

/* ─── header ─── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:40;
  transition:background .3s ease, box-shadow .3s ease;
  padding:14px 0;
}
.hdr.scrolled{background:rgba(20,18,17,.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line)}
.hdr .container{display:flex; align-items:center; gap:26px}
.hdr .brand, .hdr nav{transition:opacity .45s ease, transform .45s ease}
.hdr.idle .brand, .hdr.idle nav{opacity:0; transform:translateY(-16px); pointer-events:none}
.hdr.idle{background:transparent; box-shadow:none; backdrop-filter:none}
.hdr img{height:30px; display:block}
.hdr .club{font-weight:900; letter-spacing:.14em; font-size:15px}
nav{margin-left:auto; display:flex; gap:24px}
nav a{
  color:var(--grey); text-decoration:none; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; transition:color .2s;
  padding-bottom:3px;
}
nav a:hover{color:var(--white)}
nav a.act{color:var(--white); border-bottom:2px solid var(--red)}
.hdr .btn{padding:10px 18px; font-size:12px; width:auto}
@media (max-width:900px){ nav{display:none} }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:12px; border:none; cursor:pointer;
  font-size:14px; font-weight:800; font-family:inherit; color:#fff;
  text-transform:uppercase; letter-spacing:.05em; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .2s;
  will-change:transform;
}
.btn:hover{transform:translateY(-3px)}
.btn.red{background:var(--red); box-shadow:0 10px 30px rgba(227,30,36,.35)}
.btn.red:hover{background:var(--red-dark); box-shadow:0 16px 40px rgba(227,30,36,.45)}
.btn.wa{background:var(--wa); box-shadow:0 10px 30px rgba(31,168,85,.3)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--white); font-weight:600}
.btn.ghost:hover{border-color:var(--red)}

/* ─── hero (главная) ─── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:110px 0 70px; overflow:hidden;
}
.herovid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(.85);
}
#gears{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(90deg, rgba(20,18,17,.93) 0%, rgba(20,18,17,.78) 42%, rgba(20,18,17,.45) 100%),
    linear-gradient(rgba(20,18,17,.55) 0%, transparent 30%, transparent 70%, rgba(20,18,17,.9) 100%);
}
.hero .container{
  position:relative; z-index:2; display:grid; gap:60px;
  grid-template-columns:1.15fr .85fr; align-items:center;
}
@media (max-width:900px){
  .hero .container{grid-template-columns:1fr; gap:44px}
  .hero{padding-top:96px}
}
h1{
  font-size:clamp(38px,6vw,72px); line-height:1.02; font-weight:900;
  text-transform:uppercase; margin:0 0 22px; letter-spacing:-.01em;
}
h1 .r{color:var(--red)}
.hero p.lead{color:var(--grey); font-size:clamp(15px,1.6vw,18px); max-width:52ch; margin:0 0 34px}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap}
.stats{display:flex; gap:38px; margin-top:48px; flex-wrap:wrap}
.stat b{font-size:clamp(24px,3vw,34px); font-weight:900; display:block; font-variant-numeric:tabular-nums}
.stat b i{font-style:normal; color:var(--red)}
.stat span{font-size:12px; color:var(--grey); text-transform:uppercase; letter-spacing:.08em; font-weight:600}

/* ─── хлебные крошки ─── */
.crumbs{display:flex; gap:10px; align-items:center; font-size:12px; margin-bottom:16px; color:var(--grey); flex-wrap:wrap}
.crumbs a{color:var(--grey); text-decoration:none; transition:color .2s}
.crumbs a:hover{color:var(--white)}
.crumbs .sep{color:var(--red)}
.crumbs .cur{color:var(--white); font-weight:600}

/* ─── форма заявки ─── */
.lead-form{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:30px}
.lead-form label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--grey); margin-bottom:16px}
.lead-form input, .lead-form select, .lead-form textarea{
  display:block; width:100%; margin-top:8px; padding:14px 16px;
  background:var(--black-2); border:1px solid var(--line); border-radius:10px;
  color:var(--white); font:400 15px/1.4 "Montserrat","Segoe UI",Arial,sans-serif;
  transition:border-color .2s; outline:none; box-sizing:border-box;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{border-color:var(--red)}
.lead-form textarea{resize:vertical}
.lead-form button{width:100%; margin-top:4px}
.lead-form .hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; margin:0}
.lead-form .privacy{font-size:11.5px; color:var(--grey); margin:12px 0 0; text-align:center}

/* ─── pagehero (внутренние страницы) ─── */
.pagehero{
  position:relative; padding:160px 0 70px; overflow:hidden;
  border-bottom:1px solid var(--line); background:var(--black-2);
}
.pagehero h1{font-size:clamp(32px,5vw,58px); margin-bottom:14px}
.pagehero .lead{color:var(--grey); font-size:16px; max-width:60ch; margin:0; position:relative; z-index:2}
.pagehero .container{position:relative; z-index:2}
.pagehero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at 25% 30%, transparent 20%, rgba(20,18,17,.6) 100%);
}

/* load sequence */
.rise{opacity:0; transform:translateY(28px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.rise.d1{animation-delay:.1s} .rise.d2{animation-delay:.25s} .rise.d3{animation-delay:.4s}
.rise.d4{animation-delay:.55s} .rise.d5{animation-delay:.7s}
@keyframes rise{to{opacity:1; transform:none}}

/* ─── 3D-стопка карт ─── */
.cardwrap{perspective:1200px}
.cardstack{
  position:relative; aspect-ratio:1.586; max-width:440px; margin:0 auto;
  transform-style:preserve-3d; transition:transform .15s ease-out;
  animation:float 7s ease-in-out infinite; cursor:pointer;
}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.card3d{
  position:absolute; inset:0; border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .7s, box-shadow .7s;
  padding:24px 26px; display:flex; flex-direction:column; justify-content:space-between;
}
.card3d.pos0{z-index:3; transform:none; filter:none}
.card3d.pos1{z-index:2; transform:translate(30px,-30px) scale(.94) rotate(2.5deg); filter:brightness(.65)}
.card3d.pos2{z-index:1; transform:translate(58px,-58px) scale(.88) rotate(5deg); filter:brightness(.45)}
.skin-steel{background:linear-gradient(105deg,#4A4644 0%,#8D8885 18%,#55504D 38%,#A19B97 55%,#5C5754 72%,#857F7B 90%,#4A4644 100%)}
.skin-gold{background:linear-gradient(105deg,#6E5214 0%,#C9A24A 20%,#8F6D22 40%,#EBCB7C 58%,#A87F2A 78%,#7A5C18 100%)}
.skin-dark{background:linear-gradient(120deg,#3E3A42 0%,#28252C 55%,#443F48 100%)}
.card3d .prem{font-weight:800; font-size:17px; letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.5); align-self:center; margin-left:12px; margin-right:auto}
.cardcap{
  display:flex; justify-content:center; align-items:center; gap:16px; margin-top:20px;
  color:var(--grey); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
}
.cardcap .dots{display:flex; gap:7px}
.cardcap .dots i{width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .3s}
.cardcap .dots i.on{background:var(--red)}
.card3d .glare{
  position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 55%);
  opacity:0; transition:opacity .3s; mix-blend-mode:soft-light;
}
.card3d .row{display:flex; justify-content:space-between; align-items:flex-start; transform:translateZ(30px)}
.card3d img{height:26px; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.card3d .name{
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:clamp(15px,2vw,19px);
  text-shadow:0 1px 3px rgba(0,0,0,.55); transform:translateZ(24px);
}
.card3d .meta{display:flex; justify-content:space-between; align-items:flex-end; font-size:11px; color:#EFECEA; text-shadow:0 1px 2px rgba(0,0,0,.6); transform:translateZ(18px)}

/* ─── marquee ─── */
.marquee{
  background:var(--red); transform:rotate(-1.2deg) scale(1.02); overflow:hidden;
  padding:14px 0; margin:10px 0; position:relative; z-index:3;
}
.mq-track{display:flex; gap:0; width:max-content; animation:mq 22s linear infinite}
.mq-track span{
  font-weight:900; text-transform:uppercase; font-size:clamp(14px,1.8vw,20px);
  letter-spacing:.12em; white-space:nowrap; padding-right:28px;
}
.mq-track span::after{content:"⚙"; padding-left:28px; font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* ─── sections ─── */
section{padding:96px 0; position:relative}
.vidsection{overflow:hidden}
.vidsection .secvid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.vidsection::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(18,16,15,.9);
}
.vidsection > .container{position:relative; z-index:2}
.kicker{
  color:var(--red); font-weight:800; text-transform:uppercase; letter-spacing:.2em;
  font-size:12px; margin-bottom:14px; display:flex; align-items:center; gap:14px;
}
.kicker::before{content:""; width:34px; height:2px; background:var(--red)}
.pagehero .kicker::before{display:none}
h2{
  font-size:clamp(28px,4vw,48px); font-weight:900; text-transform:uppercase;
  line-height:1.06; margin:0 0 18px; letter-spacing:-.005em; text-wrap:balance;
}
.sub{color:var(--grey); max-width:62ch; font-size:16px; margin:0 0 44px}

/* двухколоночный сплит */
.split2{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
@media (max-width:900px){ .split2{grid-template-columns:1fr; gap:44px} }

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* benefit photos */
.photos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:700px){ .photos{grid-template-columns:1fr 1fr} .photos .ph:last-child{display:none} }
.ph{
  aspect-ratio:4/3; border-radius:16px; background:var(--panel); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--grey); position:relative; overflow:hidden;
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; text-align:center;
  transition:transform .35s ease, border-color .35s;
}
.ph:hover{transform:translateY(-6px) scale(1.02); border-color:var(--red)}
.ph::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(254,254,254,.06) 45%,transparent 60%);
  transform:translateX(-100%); animation:shimmer 3.4s ease infinite;
}
@keyframes shimmer{55%,100%{transform:translateX(100%)}}
.ph b{font-size:34px; display:block; margin-bottom:8px; opacity:.5}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.ph:hover img{transform:scale(1.06)}
.ph .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:26px 16px 12px;
  background:linear-gradient(transparent, rgba(20,18,17,.88));
  text-align:left; font-size:11.5px; letter-spacing:.1em; font-weight:700;
  color:var(--white); text-transform:uppercase;
}

/* plans */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
@media (max-width:860px){ .plans{grid-template-columns:1fr; max-width:440px; margin:0 auto} }
.plan{
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:34px 30px;
  position:relative; display:flex; flex-direction:column; gap:6px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
  will-change:transform;
}
.plan:hover{transform:translateY(-10px) rotateX(3deg); border-color:var(--red); box-shadow:0 24px 60px rgba(0,0,0,.5)}
.plan.hot{border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red), 0 20px 60px rgba(227,30,36,.15)}
.plan .flag{
  position:absolute; top:-13px; left:30px; background:var(--red); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 14px; border-radius:6px;
}
.plan .term{font-weight:900; text-transform:uppercase; font-size:17px; letter-spacing:.04em}
.plan .price{font-size:clamp(30px,3vw,38px); font-weight:900; margin:8px 0 2px; font-variant-numeric:tabular-nums}
.plan .price small{font-size:16px; font-weight:600; color:var(--grey)}
.plan .cb{color:var(--gold); font-weight:700; font-size:13px}
.plan ul{margin:16px 0 0; padding:0; list-style:none; color:var(--grey); font-size:13.5px}
.plan ul li{padding:7px 0; border-top:1px solid var(--line); display:flex; gap:10px}
.plan ul li::before{content:"✓"; color:var(--red); font-weight:800}
.plan .note{font-size:12px; color:var(--grey); margin-top:auto; padding-top:14px}

.program-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:44px}

/* prices */
.pricegrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px}
@media (max-width:760px){ .pricegrid{grid-template-columns:1fr} }
.pcard{
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:30px;
  transition:transform .35s ease, border-color .35s;
}
.pcard:hover{transform:translateY(-6px); border-color:var(--red)}
.pcard .pname{font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:15px; margin-bottom:18px; display:flex; align-items:center; gap:12px}
.pcard .pname::before{content:"⚙"; color:var(--red); font-size:20px}
.pcard .rowline{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-top:1px solid var(--line); font-size:14px}
.pcard .rowline .lbl{color:var(--grey)}
.pcard .old{text-decoration:line-through; text-decoration-color:var(--red); color:var(--grey); font-variant-numeric:tabular-nums}
.pcard .new{color:var(--red); font-weight:900; font-size:clamp(24px,2.6vw,30px); font-variant-numeric:tabular-nums}
.pcard .save{font-size:12px; color:var(--gold); font-weight:700}
.bigline{
  text-align:center; font-size:clamp(17px,2.2vw,22px); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; margin-top:20px;
}
.bigline .r{color:var(--red)}

/* team */
.teamgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
@media (max-width:860px){ .teamgrid{grid-template-columns:repeat(3,1fr)} }
.teamgrid.half{grid-template-columns:repeat(3,1fr); max-width:760px}
@media (max-width:640px){ .teamgrid.half{grid-template-columns:repeat(3,1fr)} }
.tcard{text-align:center; padding:22px 10px; border-radius:16px; background:var(--panel); border:1px solid var(--line); transition:transform .3s, border-color .3s}
.tcard:hover{transform:translateY(-6px); border-color:var(--red)}
.tcard .ava{
  width:76px; height:76px; border-radius:50%; margin:0 auto 12px;
  display:grid; place-items:center; font-weight:900; font-size:22px;
  background:radial-gradient(circle at 30% 30%, #3A3634, #242120);
  border:2px solid var(--line); overflow:hidden;
}
.tcard .ava img{width:100%; height:100%; object-fit:cover}
.tcard.mgr .ava{border-color:var(--red); color:var(--red)}
.tcard b{display:block; font-size:13.5px}
.tcard span{font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:.05em}
.quote{
  border-left:3px solid var(--red); padding:4px 0 4px 16px; margin:34px 0;
  font-size:15px; color:var(--grey); font-style:italic; max-width:60ch;
}

/* buy steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:st}
@media (max-width:820px){ .steps{grid-template-columns:1fr; max-width:460px; margin:0 auto} }
.stp{
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:30px;
  position:relative; counter-increment:st; overflow:hidden;
  transition:transform .35s, border-color .35s;
}
.stp:hover{transform:translateY(-8px); border-color:var(--red)}
.stp::before{
  content:counter(st,decimal-leading-zero); position:absolute; right:14px; top:2px;
  font-size:74px; font-weight:900; color:rgba(227,30,36,.16); line-height:1;
}
.stp b{display:block; font-size:16px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px}
.stp p{margin:0; color:var(--grey); font-size:14px}
.soonline{margin-top:26px; text-align:center; color:var(--grey); font-size:14px}
.soon{
  display:inline-block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(245,185,66,.4); padding:3px 10px; border-radius:6px;
  font-weight:800; margin-left:8px; vertical-align:middle;
}

/* contacts */
.contactgrid{display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:stretch}
@media (max-width:860px){ .contactgrid{grid-template-columns:1fr} }
.cpanel{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:34px}
.cpanel .addr{font-size:clamp(19px,2.4vw,26px); font-weight:900; text-transform:uppercase; line-height:1.2}
.cpanel .hours{color:var(--grey); margin:10px 0 26px; font-size:14px}
.cpanel .btn{width:100%; margin-bottom:10px}
.mapbox{border-radius:20px; overflow:hidden; border:1px solid var(--line); min-height:340px}
.mapbox iframe{width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.4) contrast(1.05)}

/* faq */
.faqwrap{max-width:760px}
details{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:22px 0; font-weight:800; font-size:16px; transition:color .2s;
}
summary:hover{color:var(--red)}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; color:var(--red); font-size:26px; font-weight:400; flex-shrink:0;
  transition:transform .3s ease;
}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 22px; color:var(--grey); font-size:14.5px; max-width:60ch}

/* footer */
footer{border-top:1px solid var(--line); padding:44px 0 110px; text-align:center; color:var(--grey); font-size:13px}
footer img{height:30px; display:block; margin:0 auto 12px}
footer .slg{text-transform:uppercase; letter-spacing:.3em; font-size:10px; font-weight:700; margin-bottom:18px}
footer .fnav{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:26px}
footer .fnav a{color:var(--grey); text-decoration:none; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:600}
footer .fnav a:hover{color:var(--white)}
footer .fcontacts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  max-width:1020px; margin:0 auto 28px; padding:0 22px;
}
@media (max-width:900px){ footer .fcontacts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ footer .fcontacts{grid-template-columns:1fr} }
footer .fc{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 14px}
footer .fc b{display:block; color:var(--white); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
footer .fc a{display:block; color:var(--red); font-weight:800; font-size:15.5px; text-decoration:none; margin-bottom:4px; font-variant-numeric:tabular-nums; white-space:nowrap}
footer .fc span{font-size:12px; color:var(--grey); line-height:1.45; display:block}
.teamgrid.four{grid-template-columns:repeat(4,1fr); max-width:960px}
@media (max-width:640px){ .teamgrid.four{grid-template-columns:repeat(2,1fr)} }

/* floating WA */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:60px; height:60px; border-radius:50%; background:var(--wa); color:#fff;
  display:grid; place-items:center; text-decoration:none; font-size:28px;
  box-shadow:0 12px 34px rgba(31,168,85,.45);
  animation:pulse 2.6s ease infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 12px 34px rgba(31,168,85,.45), 0 0 0 0 rgba(31,168,85,.4)}
  50%{box-shadow:0 12px 34px rgba(31,168,85,.45), 0 0 0 16px rgba(31,168,85,0)}
}
.citypick{
  position:fixed; right:22px; bottom:94px; z-index:50; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.6); min-width:220px;
}
.citypick.open{display:block}
.citypick a{
  display:block; padding:12px 16px; border-radius:10px; color:var(--white);
  text-decoration:none; font-weight:700; font-size:14px;
}
.citypick a:hover{background:rgba(31,168,85,.15)}
.citypick a span{display:block; font-size:11px; color:var(--grey); font-weight:400}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .reveal,.rise{opacity:1; transform:none}
}