@charset "UTF-8";
/* ==========================================================================
   ABAY TEAM — design tokens & base styles
   Palette from brand book: 55% black / 35% white / 10% red accent.
   Display: Unbounded (Cyrillic-ready, bold/blocky). Body: Inter.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --black: #000000;
  --surface-1: #0c0c0c;
  --surface-2: #141414;
  --surface-3: #1d1d1d;
  --border: #2a2a2a;
  --white: #ffffff;
  --muted: #a3a3a3;
  --muted-2: #737373;
  --red: #ff0000;
  --red-dark: #a60000;
  --red-grad: linear-gradient(135deg, #ff0000 0%, #a60000 100%);

  --font-display: 'Unbounded', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 140px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --container: 1240px;
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-fast: 180ms;
  --dur-med: 340ms;
  --dur-slow: 620ms;

  --header-h: 84px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--header-h);
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; cursor: pointer; touch-action: manipulation; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; touch-action: manipulation; }
h1,h2,h3,h4{ margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.06; overflow-wrap: break-word; word-break: normal; }
p{ margin: 0; }
input, textarea, select{ font-family: inherit; font-size: 16px; }

::selection{ background: var(--red); color: var(--white); }

:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 900px){
  .container{ padding-inline: var(--space-7); }
}

section{ position: relative; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before{
  content: '';
  width: 22px;
  height: 2px;
  background: var(--red-grad);
  display: inline-block;
}

.h-xl{ font-size: clamp(30px, 9.5vw, 92px); }
/* Below 640px, cap growth at a flat 9vw (not the 9.5vw clamp target) — with the
   container's 24px side padding, 9.5vw lets an unbroken 11-character word like
   "ВОСПИТЫВАЕМ" outgrow the line on wider phones (390-430px) even though it was
   fine at 375px. 9vw keeps every phone width in that range safely under the
   available line width instead of only fixing the narrowest ones. */
@media (max-width: 640px){ .h-xl{ font-size: 7.6vw; } }
.h-lg{ font-size: clamp(26px, 6.5vw, 58px); }
.h-md{ font-size: clamp(22px, 4.5vw, 36px); }
.h-sm{ font-size: clamp(18px, 3vw, 24px); }

.lede{
  font-size: clamp(16px, 2vw, 19px);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.65;
}

.text-accent{ color: var(--red); }

.claw-mark{
  position: relative;
}

/* ----- Buttons ----- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 17px 30px;
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  text-align: center;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: var(--red-grad);
  color: var(--white);
  box-shadow: 0 8px 24px -8px rgba(255,0,0,.55);
}
.btn-primary:hover{ box-shadow: 0 10px 30px -6px rgba(255,0,0,.7); transform: translateY(-1px); }
.btn-outline{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.28);
}
.btn-outline:hover{ border-color: var(--white); background: rgba(255,255,255,.06); }
.btn-light{
  background: var(--white);
  color: var(--black);
}
.btn-light:hover{ background: #eee; transform: translateY(-1px); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 12px 22px; min-height: 40px; font-size: 14px; }

.btn svg{ width: 20px; height: 20px; flex-shrink: 0; }

/* ----- Header ----- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background var(--dur-fast) var(--ease);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand img{ height: 30px; width: auto; }

.main-nav{
  display: none;
}
.main-nav ul{
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.main-nav a{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 2px;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--white); }
.main-nav a[aria-current="page"]::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--red-grad);
}
@media (min-width: 1080px){
  .main-nav{ display: block; }
}

.header-actions{ display: flex; align-items: center; gap: var(--space-4); }
.header-phone{ display: none; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.header-phone:hover{ color: var(--white); }
@media (min-width: 1080px){ .header-phone{ display: inline-flex; } }
.header-cta{ display: none; }
@media (min-width: 640px){ .header-cta{ display: inline-flex; } }

.nav-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--white);
  cursor: pointer;
}
@media (min-width: 1080px){ .nav-toggle{ display: none; } }
.nav-toggle svg{ width: 22px; height: 22px; }

.mobile-nav{
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--black);
  z-index: 99;
  padding: var(--space-6) var(--space-5) var(--space-8);
  overflow-y: auto;
  display: none;
}
.mobile-nav.is-open{ display: block; }
.mobile-nav ul{ display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-nav a{
  display: block;
  padding: 16px 4px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.mobile-nav a[aria-current="page"]{ color: var(--red); }
.mobile-nav .btn{ margin-top: var(--space-6); }
body.nav-open{ overflow: hidden; }

/* ----- Hero ----- */
.hero{
  position: relative;
  min-height: min(880px, 100svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg{
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
}
/* Desktop swaps in a version of the photo padded with extra space at the
   bottom (see <picture> in markup). That extra height means cover crops
   vertically instead of horizontally, so the fist-bump/faces can be pushed
   above the headline instead of sitting behind it. Mobile swaps in a
   dedicated portrait crop already centered on the fist-bump, so plain
   center/cover is enough — no per-device guesswork on a wide source image. */
@media (min-width: 641px){
  .hero-bg img{ object-position: 50% 5%; }
}
.hero-bg::after{
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.86) 38%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.75) 100%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 55%);
}
.hero-content{
  position: relative;
  z-index: 1;
  padding-block: var(--space-9) var(--space-8);
  width: 100%;
}
.hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}
.hero-badge svg{ width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (max-width: 560px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
}
.hero-scroll{
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-6);
  z-index: 1;
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
@media (min-width: 900px){ .hero-scroll{ display: flex; } }
.hero-scroll::after{
  content: '';
  width: 1px; height: 50px;
  background: linear-gradient(var(--muted), transparent);
}

/* ----- Inner page banner ----- */
.page-banner{
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-banner .hero-bg img{ object-position: 50% 35%; }
.page-banner .hero-content{ padding-block: var(--space-8) var(--space-7); }
.page-banner .hero-bg::after{
  background:
    linear-gradient(0deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.68) 32%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.22) 100%),
    rgba(0,0,0,.45);
}

/* ----- Sections ----- */
.section{ padding-block: var(--space-8); }
.section-tight{ padding-block: var(--space-6); }
.section-head{
  max-width: 720px;
  margin-bottom: var(--space-6);
}
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head > .eyebrow{ margin-bottom: var(--space-3); }
.section-head > h2{ margin-bottom: var(--space-4); }

.bg-surface{ background: var(--surface-1); }
.bg-white-block{ background: var(--white); color: var(--black); }
.bg-white-block .muted{ color: #555; }

/* ----- Grid helpers ----- */
.grid{ display: grid; gap: var(--space-5); }
.grid-2{ grid-template-columns: repeat(1, 1fr); }
.grid-3{ grid-template-columns: repeat(1, 1fr); }
.grid-4{ grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px){
  .grid-2{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
  .grid-4{ grid-template-columns: repeat(4, 1fr); }
}

/* ----- Cards ----- */
.card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.card:hover{ border-color: rgba(255,0,0,.4); transform: translateY(-4px); }
.card-icon{
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--red-grad);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}
.card-icon svg{ width: 26px; height: 26px; color: var(--white); }
.card h3{ font-size: 19px; margin-bottom: var(--space-3); text-transform: none; letter-spacing: 0; }
.card p{ color: var(--muted); font-size: 15px; line-height: 1.6; }

/* value strip */
.value-row{
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.value-row:last-child{ border-bottom: none; }
.value-row .num{
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--red);
  flex-shrink: 0;
  width: 34px;
}

/* ----- Trainer card ----- */
.trainer-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.trainer-card:hover{ transform: translateY(-4px); border-color: rgba(255,0,0,.4); }
.trainer-photo{
  aspect-ratio: 1/1;
  background: var(--surface-3);
  position: relative;
  overflow: hidden;
}
@media (min-width: 780px){ .trainer-photo{ aspect-ratio: 4/5; } }
.trainer-photo img{ width: 100%; height: 100%; object-fit: cover; }
.trainer-photo .ph{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
}
.trainer-photo .ph svg{ width: 84px; height: 84px; color: rgba(255,255,255,.14); }
.trainer-rank{
  position: absolute;
  top: var(--space-4); left: var(--space-4);
  background: var(--red-grad);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
}
.trainer-body{ padding: var(--space-5); }
.trainer-body h3{ font-size: 21px; text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.trainer-role{ color: var(--red); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); display: block; }
.trainer-body p{ color: var(--muted); font-size: 14.5px; margin-bottom: var(--space-4); }
.trainer-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.tag{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

/* ----- Gallery ----- */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 700px){
  .gallery-grid{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
  .gallery-grid a:nth-child(5n+1){ grid-column: span 2; grid-row: span 2; }
}
.gallery-grid a{
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: zoom-in;
}
@media (min-width: 700px){ .gallery-grid a{ aspect-ratio: auto; } }
.gallery-grid img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.gallery-grid a:hover img{ transform: scale(1.06); }
.gallery-grid a::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.5), transparent 45%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.gallery-grid a:hover::after{ opacity: 1; }

/* ----- Lightbox ----- */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.lightbox.is-open{ display: flex; }
.lightbox img{ max-width: min(1100px, 92vw); max-height: 86vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox-close{
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox-close svg{ width: 20px; height: 20px; }

/* ----- Article cards ----- */
.article-card{
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
  height: 100%;
}
.article-card:hover{ transform: translateY(-4px); border-color: rgba(255,0,0,.4); }
.article-thumb{ aspect-ratio: 16/10; overflow: hidden; background: var(--surface-3); }
.article-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.article-card:hover .article-thumb img{ transform: scale(1.05); }
.article-body{ padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.article-cat{ font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.article-body h3{ font-size: 19px; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.article-body p{ color: var(--muted); font-size: 14.5px; flex: 1; }
.article-meta{ display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 13px; margin-top: auto; }
.article-read{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--white); margin-top: var(--space-2); }
.article-read svg{ width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.article-card:hover .article-read svg{ transform: translateX(4px); }

/* ----- Article page (reading) ----- */
.article-hero{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}
.article-prose{
  max-width: 720px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.8;
  color: #d8d8d8;
}
.article-prose h2{
  font-family: var(--font-display);
  text-transform: none;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--white);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  letter-spacing: 0;
  font-weight: 700;
}
.article-prose p{ margin-bottom: var(--space-5); }
.article-prose ul{ margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: 10px; }
.article-prose li{ padding-left: 26px; position: relative; }
.article-prose li::before{
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px;
  background: var(--red-grad);
  border-radius: 2px;
  transform: rotate(45deg);
}
.article-prose blockquote{
  border-left: 3px solid var(--red);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  margin: var(--space-6) 0;
  font-family: var(--font-display);
  text-transform: none;
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--white);
  letter-spacing: 0;
  line-height: 1.4;
}
.article-topmeta{
  display: flex; align-items: center; gap: var(--space-3);
  max-width: 720px; margin: 0 auto var(--space-6);
  color: var(--muted); font-size: 14px;
}
.article-topmeta .dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }
.back-link{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 14px; font-weight: 600;
  margin-bottom: var(--space-6);
  transition: color var(--dur-fast) var(--ease);
}
.back-link:hover{ color: var(--white); }
.back-link svg{ width: 16px; height: 16px; }

/* ----- Pricing ----- */
.price-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  position: relative;
}
.price-card.featured{ border-color: var(--red); background: linear-gradient(180deg, rgba(255,0,0,.09), var(--surface-2) 40%); }
.price-card .badge-best{
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--red-grad); color: var(--white);
  font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.price-card h3{ font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--muted); margin-bottom: var(--space-3); }
.price-amount{ font-family: var(--font-display); font-size: 40px; margin-bottom: var(--space-1); }
.price-amount span{ font-size: 15px; color: var(--muted); font-family: var(--font-body); font-weight: 500; }
.price-note{ color: var(--muted-2); font-size: 13px; margin-bottom: var(--space-5); }
.price-feats{ display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-6); flex: 1; }
.price-feats li{ display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: #ddd; }
.price-feats svg{ width: 18px; height: 18px; color: var(--red); flex-shrink: 0; margin-top: 2px; }

.schedule-table{ width: 100%; border-collapse: collapse; }
.schedule-table th, .schedule-table td{
  padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14.5px;
}
.schedule-table th{ color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.schedule-table td.day{ font-weight: 700; }
.table-wrap{ overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.table-wrap .schedule-table{ min-width: 560px; }

/* ----- Merch ----- */
.merch-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.merch-photo{ aspect-ratio: 3/4; overflow: hidden; background: var(--surface-3); flex-shrink: 0; }
.merch-photo.merch-soon{ display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%); }
.merch-photo.merch-soon svg{ width: 25%; height: 25%; color: rgba(255,255,255,.16); }
.merch-photo img{ width: 100%; height: 100%; object-fit: cover; }
.merch-body{ padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.merch-body > a{ margin-top: auto; }
.merch-body h3{ font-size: 18px; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.merch-body p{ color: var(--muted); font-size: 14px; margin-bottom: var(--space-4); }
.merch-price{ font-family: var(--font-display); font-size: 20px; margin-bottom: var(--space-4); }

/* ----- Reviews carousel ----- */
.reviews-head{
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.reviews-rating{ display: flex; align-items: center; gap: 12px; }
.reviews-rating .num{ font-family: var(--font-display); font-size: 40px; line-height: 1; }
.reviews-stars{ display: flex; gap: 3px; }
.reviews-stars svg{ width: 16px; height: 16px; color: var(--red); }
.reviews-rating-sub{ color: var(--muted); font-size: 13.5px; }
.reviews-rating-sub a{ color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.reviews-nav{ display: flex; gap: 8px; }
.reviews-nav button{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--white);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.reviews-nav button:hover{ background: var(--surface-3); border-color: rgba(255,0,0,.4); }
.reviews-nav button svg{ width: 17px; height: 17px; }
.reviews-track{
  display: flex; gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x proximity;
  scroll-padding-left: var(--space-5);
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar{ display: none; }
.review-card{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 300px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.review-card .stars{ display: flex; gap: 3px; }
.review-card .stars svg{ width: 14px; height: 14px; color: var(--red); }
.review-card p{ font-size: 14.5px; line-height: 1.6; color: #ddd; flex: 1; }
.review-card .who{ display: flex; align-items: center; gap: 10px; margin-top: auto; }
.review-card .avatar{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--red-grad); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; flex-shrink: 0;
}
.review-card .who-name{ font-size: 13.5px; font-weight: 700; }
.review-card .who-meta{ font-size: 12px; color: var(--muted-2); display: flex; align-items: center; gap: 5px; }
.review-card .who-meta svg{ width: 12px; height: 12px; color: var(--red); }
@media (max-width: 640px){ .review-card{ width: 250px; } }

/* ----- Testimonials / trust strip ----- */
.trust-strip{
  display: flex; flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-item{ display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.trust-item svg{ width: 20px; height: 20px; color: var(--red); flex-shrink: 0; }

/* ----- Stats ----- */
.stat{ text-align: left; }
.stat .n{ font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 54px); line-height: 1; }
.stat .l{ color: var(--muted); font-size: 14px; margin-top: 8px; }

/* ----- CTA band ----- */
.cta-band{
  border-radius: var(--radius-lg);
  background: var(--red-grad);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2{ color: var(--white); margin-bottom: var(--space-5); }
.cta-band p{ color: rgba(255,255,255,.9); max-width: 56ch; margin-inline: auto; margin-bottom: var(--space-5); }
.cta-band .btn-light{ margin-inline: auto; }

/* ----- Footer ----- */
.site-footer{
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  padding-block: var(--space-8) var(--space-6);
}
.footer-grid{
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}
@media (min-width: 780px){
  .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-brand img{ height: 30px; margin-bottom: var(--space-4); }
.footer-brand p{ color: var(--muted); font-size: 14px; max-width: 34ch; }
.footer-col h4{ font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--space-4); font-weight: 700; }
.footer-col ul{ display: flex; flex-direction: column; gap: 11px; }
.footer-col a{ font-size: 14.5px; color: #ddd; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover{ color: var(--red); }
.footer-social{ display: flex; gap: 10px; margin-top: var(--space-4); }
.footer-social a{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg{ width: 18px; height: 18px; }
.footer-bottom{
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: center; align-items: center;
  text-align: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  color: var(--muted-2); font-size: 13px;
}

/* ----- Sticky mobile CTA ----- */
.mobile-cta{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 12px var(--space-4);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
@media (min-width: 640px){ .mobile-cta{ display: none; } }
.mobile-cta .btn{ flex: 1; }
body.has-mobile-cta{ padding-bottom: 76px; }

/* ----- Reveal on scroll ----- */
[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; }
}

/* ----- Breadcrumb-ish / misc ----- */
.divider{ height: 1px; background: var(--border); border: none; margin: 0; }
.muted{ color: var(--muted); }
.center{ text-align: center; }
.mt-8{ margin-top: var(--space-8); }
.flex-center{ display: flex; align-items: center; justify-content: center; }

/* ----- Form ----- */
.field{ margin-bottom: var(--space-5); }
.field label{ display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea{
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--white);
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus{ border-color: var(--red); outline: none; }
.field textarea{ min-height: 120px; resize: vertical; }
.field-required::after{ content: ' *'; color: var(--red); }

/* ----- Video showcase ----- */
.video-block{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/8;
}
.video-block img{ width: 100%; height: 100%; object-fit: cover; }
.video-block::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.65) 100%);
}
.video-play{
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  color: var(--white);
  text-align: center;
}
.video-play .play-btn{
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.video-play .play-btn svg{ width: 28px; height: 28px; margin-left: 4px; }
.video-block:hover .play-btn{ transform: scale(1.08); background: rgba(255,0,0,.45); border-color: var(--red); }
.video-play p{ font-size: 13.5px; color: rgba(255,255,255,.85); max-width: 34ch; }
.video-badge{
  position: absolute; top: var(--space-5); left: var(--space-5); z-index: 1;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  padding: 8px 15px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.22);
}

/* ----- Statement band (white) ----- */
.statement-band{ padding-block: var(--space-9); text-align: center; }
.statement-band .h-lg{ max-width: 20ch; margin-inline: auto; }

/* ----- Accordion (FAQ) ----- */
.accordion{ border-top: 1px solid var(--border); }
.accordion details{ border-bottom: 1px solid var(--border); padding-block: 22px; }
.accordion summary{
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--font-display); font-size: clamp(16px, 2vw, 19px); font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.accordion summary::-webkit-details-marker{ display: none; }
.accordion summary .icon{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.accordion summary .icon svg{ width: 15px; height: 15px; }
.accordion details[open] summary .icon{ background: var(--red-grad); transform: rotate(45deg); }
.accordion .a-body{ color: var(--muted); font-size: 15px; line-height: 1.7; margin-top: 14px; padding-right: 50px; max-width: 62ch; }

/* ----- Compact hierarchy sections (replaces the old full-screen paging) -----
   Paging forced every section to the same 100vh weight, which is exactly
   why the page read as flat / no hierarchy: equal height = equal importance.
   Hierarchy here comes from contrast instead — one dominant hero, then
   deliberately tight, lower-weight sections sized to their own content. */
.tight{ padding-block: var(--space-6); }
.tight .section-head{ margin-bottom: var(--space-5); }

/* ----- Compact feature row (icon + short line, not big cards) ----- */
.feature-row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-5);
}
@media (min-width: 780px){ .feature-row{ grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.feature-item{ display: flex; align-items: flex-start; gap: 12px; }
.feature-item .ico{
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--red-grad);
  display: flex; align-items: center; justify-content: center;
}
.feature-item .ico svg{ width: 17px; height: 17px; color: var(--white); }
.feature-item h3{ font-size: 14.5px; text-transform: none; letter-spacing: 0; margin-bottom: 3px; font-family: var(--font-body); font-weight: 700; }
.feature-item p{ font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Explore tiles */
.explore-grid{ display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 780px){ .explore-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 560px){ .explore-grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .explore-grid-4{ grid-template-columns: repeat(4, 1fr); } }
.explore-tile{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  display: flex; align-items: flex-end;
  padding: var(--space-5);
}
@media (min-width: 780px){ .explore-tile{ aspect-ratio: 4/3; } }
.explore-tile img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.explore-tile::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.15) 60%); }
.explore-tile:hover img{ transform: scale(1.08); }
.explore-tile-body{ position: relative; z-index: 1; }
.explore-tile-body span{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); display: block; margin-bottom: 6px; }
.explore-tile-body h3{ font-size: 21px; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.explore-tile-body .go{ display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--white); }
.explore-tile-body .go svg{ width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.explore-tile:hover .go svg{ transform: translateX(4px); }

/* Soft edge fade so a standalone photo blends into the black page background
   instead of ending on a hard rectangular line. Layer on top of the img. */
.photo-fade{ position: relative; overflow: hidden; }
.photo-fade::after{
  content: '';
  position: absolute; inset: -2px;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, var(--black) 100%);
  pointer-events: none;
}

/* ----- Photo placeholder (spot reserved for a future real/generated photo) ----- */
.photo-placeholder{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px),
    linear-gradient(160deg, #262626 0%, #121212 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px;
  padding: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.photo-placeholder::before{
  content: 'Фото';
  position: absolute; top: 20px; left: 20px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .1em; font-weight: 700; text-transform: uppercase;
  color: var(--red);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 13px; border-radius: 999px;
}
.photo-placeholder svg{ width: 46px; height: 46px; color: rgba(255,255,255,.3); flex-shrink: 0; }
.photo-placeholder span{
  font-size: 13.5px; color: rgba(255,255,255,.55);
  max-width: 38ch; line-height: 1.5;
}
.photo-placeholder b{ color: rgba(255,255,255,.82); font-weight: 700; }

/* Hero/page-banner headlines are bottom-anchored and can run 2-3 lines,
   so a centered caption sits right behind the text. Push the caption into
   the clear zone at the top of the banner instead of the middle. */
.hero .photo-placeholder,
.page-banner .photo-placeholder,
.explore-tile .photo-placeholder{
  align-items: flex-start; justify-content: flex-start;
  text-align: left;
  padding: 62px 24px 24px;
  gap: 10px;
}
.explore-tile .photo-placeholder{ padding: 20px; gap: 8px; }
.explore-tile .photo-placeholder svg{ width: 26px; height: 26px; }
.explore-tile .photo-placeholder span{ font-size: 11.5px; max-width: 20ch; }
.explore-tile .photo-placeholder::before{ top: 14px; left: 14px; font-size: 10px; padding: 4px 10px; }
.hero .photo-placeholder span{ max-width: 40ch; }
.hero .photo-placeholder svg,
.page-banner .photo-placeholder svg{ width: 30px; height: 30px; }
.hero .photo-placeholder span,
.page-banner .photo-placeholder span{ max-width: 30ch; font-size: 12.5px; }

/* Map placeholder */
.map-frame{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16/11;
}
.map-frame iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }

/* ----- Mobile density pass -----
   Same spacing tokens as desktop made the phone version feel just as long
   and heavy to scroll through. Redefining the tokens here tightens every
   section, card and gap that uses them in one place. */
@media (max-width: 640px){
  :root{
    --header-h: 68px;
    --space-6: 20px;
    --space-7: 28px;
    --space-8: 36px;
    --space-9: 48px;
  }
  .brand img{ height: 24px; }
  .card{ padding: var(--space-5); }
  .card-icon{ width: 40px; height: 40px; margin-bottom: var(--space-3); }
  .card-icon svg{ width: 20px; height: 20px; }
  .card h3{ font-size: 16px; margin-bottom: 6px; }
  .card p{ font-size: 13.5px; }
  .trainer-body{ padding: var(--space-4); }
  .trainer-body h3{ font-size: 17px; }
  .trainer-body p{ font-size: 13.5px; margin-bottom: var(--space-3); }
  .gallery-grid{ gap: var(--space-2); }
  .hero-content{ padding-block: var(--space-7) var(--space-6); }
  .hero-badges{ gap: 8px; }
  .hero-badge{ padding: 7px 12px; font-size: 12px; }
  .value-row{ padding-block: var(--space-3); gap: var(--space-3); }
  .cta-band{ padding: var(--space-6) var(--space-4); }
  .cta-band h2, .cta-band p{ margin-bottom: var(--space-3); }
  .accordion summary{ font-size: 15.5px; }
  .accordion details{ padding-block: 16px; }
  .explore-tile{ padding: var(--space-4); }
  .explore-tile-body h3{ font-size: 17px; }
}