/* =====================================================================
   375 PADEL CLUB — design system
   Brand: премиальный падел-клуб, Минск. Тёмная база + court-green + electric lime.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;
  --ink:        #0A0E0C;     /* near-black base */
  --ink-2:      #101713;
  --panel:      #121A16;
  --panel-2:    #18221C;
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.06);

  --court:      #0E5C3A;     /* deep court green */
  --court-2:    #12A862;     /* vivid green */
  --lime:       #C6FF3D;     /* electric lime accent */
  --lime-soft:  #d8ff7a;

  --cream:      #F3F5EE;
  --text:       #ECF1EA;
  --muted:      #9DA8A0;
  --muted-2:    #6E7A72;

  --radius:     22px;
  --radius-sm:  14px;
  --radius-lg:  34px;
  --maxw:       1200px;
  --gut:        clamp(18px, 4vw, 48px);

  --shadow:     0 30px 80px -30px rgba(0,0,0,.7);
  --shadow-lime:0 18px 50px -18px rgba(198,255,61,.45);

  --font:       "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display:    "Unbounded", var(--font);

  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  font-family:var(--font);
  background:var(--ink);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }
a,button,input,select,textarea{ touch-action:manipulation }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--lime);
  outline-offset:4px;
}
ul{ list-style:none }
section{ position:relative }
section[id]{ scroll-margin-top:88px }
::selection{ background:var(--lime); color:#0a0e0c }

.skip-link{
  position:fixed;
  z-index:1000;
  left:16px;
  top:12px;
  padding:10px 16px;
  border-radius:999px;
  background:var(--lime);
  color:var(--ink);
  font-weight:800;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0) }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lime);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--lime); display:inline-block }
.section-head{ max-width:680px; margin-bottom:clamp(34px,5vw,60px) }
.section-head h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem, 4.6vw, 3.2rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:.5rem 0 .8rem;
}
.section-head p{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.12rem) }
.pad{ padding-block:clamp(64px, 9vw, 130px) }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:.98rem; letter-spacing:.01em;
  padding:15px 26px; border-radius:100px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px }
.btn-lime{ background:var(--lime); color:#0a0e0c; box-shadow:var(--shadow-lime) }
.btn-lime:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 24px 60px -16px rgba(198,255,61,.6) }
.btn-ghost{ border:1.5px solid var(--line); color:var(--text); background:rgba(255,255,255,.02) }
.btn-ghost:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-3px) }
.btn-dark{ background:var(--panel-2); color:var(--text); border:1px solid var(--line) }
.btn-dark:hover{ transform:translateY(-3px); border-color:var(--lime) }
.btn-block{ width:100% }
.btn-lg{ padding:18px 34px; font-size:1.05rem }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .35s, backdrop-filter .35s, border-color .35s, padding .35s;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(10,14,12,.82);
  backdrop-filter:saturate(160%) blur(16px);
  border-color:var(--line-2);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:22px; padding-block:16px; max-width:1420px }
.logo{ display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.02em }
.logo .mark{
  font-family:var(--display); font-weight:700; font-size:1.5rem;
  color:#0a0e0c; background:var(--lime);
  width:48px; height:48px; border-radius:13px;
  display:grid; place-items:center; line-height:1;
  box-shadow:var(--shadow-lime);
}
.logo .name{ font-size:.84rem; line-height:1.15; text-transform:uppercase; letter-spacing:.16em }
.logo .name b{ display:block; font-size:1.02rem; letter-spacing:.04em }
.logo .name span{ color:var(--muted); font-weight:600; font-size:.66rem }
.nav{ display:flex; align-items:center; gap:22px }
.nav a.link{ font-size:.88rem; white-space:nowrap; font-weight:600; color:var(--muted); transition:color .2s; position:relative }
.nav a.link:hover{ color:var(--text) }
.nav a.link::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--lime); transition:width .25s var(--ease);
}
.nav a.link:hover::after{ width:100% }
.header-cta{ display:flex; align-items:center; gap:12px }
.burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line); align-items:center; justify-content:center }
.burger span{ display:block; width:20px; height:2px; background:var(--text); position:relative; transition:.3s }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); transition:.3s }
.burger span::before{ top:-6px } .burger span::after{ top:6px }
body.menu-open .burger span{ background:transparent }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg) }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg) }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:55; background:rgba(8,12,10,.97); backdrop-filter:blur(10px);
  transform:translateY(-100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column; justify-content:safe center; gap:6px; padding:90px var(--gut) 40px;
  overflow-y:auto; /* контент клипуется внутри своей коробки → ничего не «вытекает» за закрытый drawer */
  overscroll-behavior:contain;
}
body.menu-open .drawer{ transform:translateY(0) }
.drawer a{ font-family:var(--display); font-size:2rem; font-weight:600; padding:12px 0; border-bottom:1px solid var(--line-2) }
.drawer a:last-of-type{ border:none }
.drawer .drawer-foot{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:clamp(40px,6vw,72px) }
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(120% 90% at 80% 10%, rgba(18,168,98,.20), transparent 55%),
  linear-gradient(180deg, rgba(10,14,12,.55) 0%, rgba(10,14,12,.35) 35%, rgba(10,14,12,.92) 92%);
}
.hero-court{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.9 }
.hero-glow{
  position:absolute; width:60vw; height:60vw; max-width:760px; max-height:760px; right:-10%; top:-15%;
  background:radial-gradient(circle, rgba(198,255,61,.16), transparent 65%); filter:blur(20px); z-index:0;
  animation:floaty 9s ease-in-out infinite;
}
@keyframes floaty{ 50%{ transform:translateY(28px) } }
.hero-inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px }
.chip{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  padding:8px 14px; border-radius:100px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); backdrop-filter:blur(6px); letter-spacing:.02em;
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime) }
.hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.6rem, 8vw, 6.2rem); line-height:.98; letter-spacing:-.02em;
  text-wrap:balance;
}
.hero h1 .accent{ color:var(--lime) }
.hero p.lead{ margin-top:20px; max-width:560px; font-size:clamp(1.04rem,1.6vw,1.22rem); color:#d6ddd6 }
.lead-sm{ display:none } /* короткий вариант лида — только на телефонах */
.hero-actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.hero-actions .note{ font-size:.84rem; color:var(--muted); display:flex; align-items:center; gap:7px }
.hero-actions .note b{ color:var(--text) }

/* marquee */
.marquee{ overflow:hidden; border-block:1px solid var(--line-2); background:var(--ink-2); padding-block:16px }
.marquee-track{ display:flex; gap:46px; width:max-content; animation:scrollx 26s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes scrollx{ to{ transform:translateX(-50%) } }
.marquee-item{ display:inline-flex; align-items:center; gap:14px; font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--muted) }
.marquee-item svg{ width:18px; color:var(--lime) }
.marquee-item .x{ color:var(--lime) }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden }
.stat{ background:var(--ink); padding:clamp(24px,3vw,38px) clamp(18px,2.4vw,30px) }
.stat .num{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,4.4vw,3rem); line-height:1; color:var(--lime) }
.stat .lbl{ margin-top:10px; color:var(--muted); font-size:.92rem; font-weight:600 }

/* ---------- Features / about ---------- */
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center }
.feature-list{ display:grid; gap:14px; margin-top:26px }
.feature{ display:flex; gap:16px; padding:18px 20px; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--panel); transition:border-color .25s, transform .25s }
.feature:hover{ border-color:var(--line); transform:translateX(4px) }
.feature .ic{ flex:none; width:46px; height:46px; border-radius:12px; background:rgba(198,255,61,.12); display:grid; place-items:center; color:var(--lime) }
.feature .ic svg{ width:22px; height:22px }
.feature h3{ font-size:1.02rem; margin-bottom:3px; font-weight:700 }
.feature p{ color:var(--muted); font-size:.92rem }
.about-visual{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:420px; box-shadow:var(--shadow) }
.about-visual img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0 }
.about-visual .duo{ position:absolute; inset:0; background:linear-gradient(160deg, rgba(14,92,58,.5), rgba(10,14,12,.2) 40%, rgba(198,255,61,.12)); mix-blend-mode:multiply }
.about-visual .tag{ position:absolute; left:18px; bottom:18px; z-index:2; background:rgba(10,14,12,.7); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:14px; padding:14px 18px }
.about-visual .tag b{ font-family:var(--display); color:var(--lime); font-size:1.3rem }
.about-visual .tag span{ display:block; color:var(--muted); font-size:.82rem }

/* ---------- Services ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.card{
  position:relative; border:1px solid var(--line-2); border-radius:var(--radius); padding:30px 26px;
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
  overflow:hidden; transition:transform .3s var(--ease), border-color .3s;
}
.card::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 50% -10%, rgba(198,255,61,.10), transparent 60%); opacity:0; transition:opacity .3s }
.card:hover{ transform:translateY(-6px); border-color:var(--line) }
.card:hover::before{ opacity:1 }
.card .ic{ width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); display:grid; place-items:center; color:var(--lime); margin-bottom:18px }
.card .ic svg{ width:26px; height:26px }
.card h3{ font-size:1.22rem; margin-bottom:8px }
.card p{ color:var(--muted); font-size:.94rem }
.card .meta{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--lime); font-size:.9rem }

/* ---------- Pricing ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.price{ border:1px solid var(--line-2); border-radius:var(--radius); padding:30px 28px; background:var(--panel); display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s }
.price:hover{ transform:translateY(-6px) }
.price.featured{ border-color:var(--lime); background:linear-gradient(180deg, rgba(198,255,61,.07), var(--panel)); box-shadow:var(--shadow-lime) }
.price .badge{ align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#0a0e0c; background:var(--lime); padding:5px 11px; border-radius:100px; margin-bottom:14px }
.price h3{ font-size:1.18rem }
.price .amount{ font-family:var(--display); font-weight:700; font-size:2.4rem; margin:14px 0 2px; line-height:1 }
.price .amount small{ font-family:var(--font); font-size:.9rem; color:var(--muted); font-weight:600 }
.price .per{ color:var(--muted); font-size:.86rem; margin-bottom:18px }
.price ul{ display:grid; gap:11px; margin-bottom:24px }
.price li{ display:flex; gap:10px; font-size:.92rem; color:#cdd5cd }
.price li svg{ flex:none; width:18px; height:18px; color:var(--lime); margin-top:2px }
.price .btn{ margin-top:auto }
.price-note{ margin-top:18px; color:var(--muted-2); font-size:.82rem; text-align:center }

/* ---------- Coaches / pro ---------- */
.pro{ background:
  linear-gradient(180deg, var(--ink), var(--ink-2));
}
.pro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,54px); align-items:center }
.pro-points{ display:grid; gap:18px; margin-top:26px }
.pro-point{ display:flex; gap:14px; align-items:flex-start }
.pro-point .n{ font-family:var(--display); color:var(--lime); font-weight:700; font-size:1.1rem; flex:none; width:34px }
.pro-point h3{ font-size:1.04rem; margin-bottom:2px; font-weight:700 }
.pro-point p{ color:var(--muted); font-size:.92rem }
.pro-visual{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:440px; box-shadow:var(--shadow) }
.pro-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.pro-visual .duo{ position:absolute; inset:0; background:linear-gradient(200deg, rgba(10,14,12,.15), rgba(14,92,58,.55)); mix-blend-mode:multiply }

/* ---------- Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px }
.shot{ position:relative; border-radius:var(--radius-sm); overflow:hidden; background:var(--panel) }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(10,14,12,.5)), linear-gradient(140deg, rgba(14,92,58,.28), rgba(198,255,61,.08)); mix-blend-mode:multiply; transition:opacity .3s }
.shot:hover img{ transform:scale(1.06) }
.shot.tall{ grid-row:span 2 }
.shot.wide{ grid-column:span 2 }
.gallery-note{ margin-top:18px; color:var(--muted-2); font-size:.82rem; text-align:center }

/* ---------- Booking ---------- */
.booking{ background:var(--ink-2) }
.book-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.5vw,44px); align-items:start }
.book-panel{ border:1px solid var(--line-2); border-radius:var(--radius); padding:clamp(26px,3vw,38px); background:var(--panel) }
.book-panel h3{ font-family:var(--display); font-size:1.4rem; margin-bottom:6px }
.book-panel > p{ color:var(--muted); font-size:.94rem; margin-bottom:22px }
.book-online .yc-card{ border:1px dashed var(--line); border-radius:var(--radius-sm); padding:22px; text-align:center; background:rgba(255,255,255,.02) }
.book-online .yc-card .big{ font-family:var(--display); font-size:1.6rem; color:var(--lime); margin-bottom:6px }
.yc-frame-wrap{ margin-top:18px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line-2); display:none }
.yc-frame-wrap.open{ display:block }
.yc-frame-wrap iframe{ width:100%; height:560px; border:0; background:#fff }
.steps{ display:grid; gap:14px; margin-top:24px }
.step{ display:flex; gap:14px; align-items:flex-start }
.step .n{ flex:none; width:30px; height:30px; border-radius:50%; background:rgba(198,255,61,.14); color:var(--lime); display:grid; place-items:center; font-weight:800; font-size:.85rem }
.step p{ font-size:.92rem; color:#cdd5cd } .step p b{ color:var(--text) }

/* form */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.field{ margin-bottom:14px }
.field.full{ grid-column:1/-1 }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:7px }
.field input,.field select,.field textarea{
  width:100%; padding:14px 15px; border-radius:12px; border:1px solid var(--line);
  background:var(--ink); color:var(--text); font-size:.96rem; font-family:inherit; transition:border-color .2s, background .2s;
}
.field textarea{ resize:vertical; min-height:78px }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--lime); background:#0c120e }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:3px solid var(--lime); outline-offset:2px }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239DA8A0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center }
.form-msg{ font-size:.86rem; margin-top:6px; min-height:18px }
.form-msg.ok{ color:var(--lime) } .form-msg.err{ color:#ff7d7d }
.alt-contacts{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px }
.alt-contacts a{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; padding:10px 14px; border:1px solid var(--line); border-radius:100px; color:var(--muted); transition:.2s }
.alt-contacts a:hover{ border-color:var(--lime); color:var(--lime) }
.alt-contacts a svg{ width:16px; height:16px }

/* ---------- Community ---------- */
.community{ position:relative; overflow:hidden }
.community .panel{
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(14,92,58,.35), var(--panel) 60%);
  padding:clamp(34px,5vw,64px); display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center;
}
.community h2{ font-family:var(--display); font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.05; margin-bottom:14px }
.community p{ color:#cdd5cd; max-width:520px }
.community .cta-col{ display:flex; flex-direction:column; gap:12px }

/* ---------- FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px }
.faq-item{ border-bottom:1px solid var(--line-2) }
.faq-q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-weight:700; font-size:1.02rem }
.faq-q .pm{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.3s; color:var(--lime) }
.faq-item.open .pm{ transform:rotate(45deg); background:var(--lime); color:#0a0e0c; border-color:var(--lime) }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease) }
.faq-a p{ color:var(--muted); font-size:.94rem; padding-bottom:20px }

/* ---------- Contacts ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,3vw,40px); align-items:stretch }
.contact-card{ border:1px solid var(--line-2); border-radius:var(--radius); padding:clamp(26px,3vw,36px); background:var(--panel); display:flex; flex-direction:column; gap:20px }
.contact-row{ display:flex; gap:14px; align-items:flex-start }
.contact-row .ic{ flex:none; width:44px; height:44px; border-radius:12px; background:rgba(198,255,61,.12); color:var(--lime); display:grid; place-items:center }
.contact-row .ic svg{ width:20px; height:20px }
.contact-row .lbl{ font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em }
.contact-row .val{ font-size:1.05rem; font-weight:600 }
.contact-row a.val:hover{ color:var(--lime) }
.map-wrap{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-2); min-height:380px; position:relative }
.map-wrap iframe{ width:100%; height:100%; min-height:380px; border:0; filter:grayscale(.2) }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line-2); padding-block:48px 30px; background:var(--ink) }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; margin-bottom:34px }
.footer p.desc{ color:var(--muted); font-size:.9rem; max-width:330px; margin-top:14px }
.footer .fh{ font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:14px; font-weight:700 }
.footer a.fl{ display:block; color:#cdd5cd; font-size:.94rem; padding:6px 0; transition:color .2s }
.footer a.fl:hover{ color:var(--lime) }
.socials{ display:flex; gap:10px; margin-top:16px }
.socials a{ width:42px; height:42px; border-radius:12px; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:.25s }
.socials a:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-3px) }
.socials a svg{ width:19px; height:19px }
.footer-bottom{ border-top:1px solid var(--line-2); padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:var(--muted-2); font-size:.82rem }

/* ---------- Floating book button ---------- */
.fab{ position:fixed; right:16px; bottom:16px; z-index:50; display:none; opacity:0; transform:translateY(18px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease) }
.fab.show{ opacity:1; transform:none; pointer-events:auto }
.fab .btn{ box-shadow:var(--shadow-lime); padding:14px 22px }

/* ---------- Toast ---------- */
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%); z-index:80; background:var(--panel-2); border:1px solid var(--lime); color:var(--text); padding:14px 20px; border-radius:14px; font-size:.92rem; font-weight:600; box-shadow:var(--shadow); transition:transform .4s var(--ease); max-width:90vw }
.toast.show{ transform:translate(-50%,0) }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } .hero-glow,.marquee-track{ animation:none } }

/* Шапка: на планшете/узком десктопе (≤1180) сворачиваем меню в бургер —
   чтобы текст меню не наезжал на логотип/кнопку и не «дёргался» при подгрузке шрифтов (FOUT) */
@media (max-width: 1400px){
  .nav .link{ display:none }
  .header-cta .btn-ghost{ display:none }
  .burger{ display:flex }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav .link{ display:none }
  .header-cta .btn-ghost{ display:none }
  .burger{ display:flex }
  .about-grid,.pro-grid,.book-grid,.contact-grid,.community .panel{ grid-template-columns:1fr }
  .pro-visual{ order:-1; min-height:320px }
  .cards,.price-grid{ grid-template-columns:1fr 1fr }
  .stats{ grid-template-columns:1fr 1fr }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px }
  .footer-top{ grid-template-columns:1fr 1fr }
  .fab{ display:block }
}
@media (max-width: 600px){
  .cards,.price-grid,.faq-grid,.footer-top{ grid-template-columns:1fr }
  .form-row{ grid-template-columns:1fr }
  .stats{ grid-template-columns:1fr 1fr }
  .shot.wide{ grid-column:span 2 } .shot.tall{ grid-row:span 1 }
  /* первый экран = ровно высота экрана; размеры привязаны и к ширине, и к высоте,
     чтобы всё помещалось одинаково на любом телефоне (от 320×568 до 430×932) */
  .hero{ align-items:flex-end; min-height:100svh; padding-top:70px; padding-bottom:clamp(12px,3.2svh,42px) }
  .hero-badges{ gap:7px; margin-bottom:clamp(6px,2svh,20px) }
  .chip{ padding:6px 10px; font-size:.7rem }
  .hero h1{ font-size:clamp(1.6rem, min(8.6vw,5svh), 3.3rem); line-height:1.0 }
  .hero p.lead{ font-size:clamp(.82rem, min(3.7vw,1.95svh), 1.12rem); margin-top:clamp(6px,1.5svh,18px); line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden }
  .lead-lg{ display:none } .lead-sm{ display:inline } /* на телефонах — короткий лид */
  .hero-actions{ flex-direction:column; align-items:stretch; gap:clamp(8px,1.4svh,12px); margin-top:clamp(10px,2.2svh,28px) }
  .hero-actions .btn{ width:100% }
  .hero-actions .btn-lg{ padding:clamp(11px,1.5svh,16px) 20px; font-size:1rem }
  .hero-actions .note{ justify-content:center; margin-top:2px; font-size:.8rem }
  .marquee-item{ font-size:.92rem }
  /* declutter header on phones — booking lives in drawer + FAB */
  .header-cta .btn-lime{ display:none }
  /* drawer CTAs: full width, allow wrap */
  .drawer .drawer-foot{ flex-direction:column }
  .drawer .drawer-foot .btn{ width:100%; white-space:normal }
}

/* ===== Низкие по высоте экраны (низкие телефоны + ландшафт) =====
   Привязка к ВЫСОТЕ: ужимаем первый экран, чтобы всё влезало в 100svh. */
@media (max-height: 700px){
  .hero{ padding-top:64px; padding-bottom:12px }
  .hero-badges{ margin-bottom:6px }
  .hero h1{ font-size:clamp(1.4rem, min(7.4vw,5svh), 2.6rem); line-height:1.0 }
  .hero p.lead{ font-size:clamp(.78rem, min(3.4vw,2svh), 1rem); margin-top:6px; line-height:1.32; -webkit-line-clamp:3 }
  .hero-actions{ margin-top:9px; gap:8px }
  .hero-actions .btn-lg{ padding:10px 18px; font-size:.94rem }
  .hero-actions .note{ font-size:.76rem }
}
/* Ландшафт телефона: широкий, но очень низкий — CTA в ряд, лид прячем */
@media (max-height: 520px) and (min-width: 560px){
  .hero{ align-items:center; padding-top:66px; padding-bottom:18px }
  .hero h1{ font-size:clamp(1.5rem, 5.4vw, 2.6rem) }
  .hero p.lead{ display:none }
  .hero-actions{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px }
  .hero-actions .btn{ width:auto }
}

/* =====================================================================
   Motion hero — scroll choreography inspired by premium product sites.
   Static by default; the long pinned story is enabled only by JS when
   GSAP is available and the user is not in reduced/save-data mode.
   ===================================================================== */
.motion-hero{
  display:block;
  min-height:100svh;
  height:100svh;
  padding:0 !important;
  overflow:hidden;
  overflow:clip;
  background:#050706;
  isolation:isolate;
}
.motion-enabled .motion-hero{ height:420svh; overflow:visible }
.motion-stage{
  position:relative;
  width:100%;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  background:#050706;
  isolation:isolate;
}
.motion-enabled .motion-stage{ position:relative; top:auto }

.motion-portrait{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#111 }
.motion-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(2,5,4,.35), transparent 27%),
    linear-gradient(90deg, rgba(4,7,5,.16), transparent 54%),
    linear-gradient(180deg, transparent 48%, rgba(3,5,4,.86) 100%);
}
.motion-portrait .hero-court{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 31%;
  opacity:1;
  transform-origin:50% 42%;
  will-change:transform,filter,opacity;
}
.motion-shade{
  position:absolute;
  inset:-12%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 53% 40%, rgba(198,255,61,.09), transparent 28%),
    radial-gradient(circle at center, transparent 18%, rgba(3,5,4,.18) 55%, #030504 88%);
}
.motion-court-grid{
  position:absolute;
  z-index:2;
  right:-8vw;
  top:11vh;
  width:min(54vw,760px);
  color:rgba(198,255,61,.22);
  transform:perspective(720px) rotateX(64deg) rotateZ(-9deg);
  transform-origin:center;
  pointer-events:none;
}
.motion-court-grid svg{ width:100%; height:auto }
.motion-topline{
  position:absolute;
  z-index:5;
  top:104px;
  left:var(--gut);
  right:var(--gut);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  color:rgba(255,255,255,.78);
  font:700 .62rem/1.2 var(--font);
  letter-spacing:.16em;
  text-transform:uppercase;
  pointer-events:none;
}
.motion-topline span:nth-child(2){ text-align:center }
.motion-topline span:last-child{ text-align:right }

.motion-intro{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:clamp(24px,5vh,58px);
  width:100%;
  transform:translateX(-50%);
  will-change:transform,opacity;
}
.motion-intro .hero-badges{ margin-bottom:clamp(10px,1.8vh,20px) }
.motion-intro h1{
  max-width:820px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(4.2rem,12vw,10.4rem);
  line-height:.76;
  letter-spacing:-.065em;
  text-transform:uppercase;
}
.motion-title-line{ display:block }
.motion-title-outline{
  color:transparent;
  -webkit-text-stroke:clamp(1px,.12vw,2px) rgba(236,241,234,.96);
  text-stroke:clamp(1px,.12vw,2px) rgba(236,241,234,.96);
}
.motion-intro p.lead{
  max-width:610px;
  margin-top:clamp(14px,2vh,24px);
  color:rgba(236,241,234,.88);
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.motion-intro .hero-actions{ margin-top:clamp(18px,3vh,32px) }

.motion-product{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.motion-racket{
  width:min(42vw,610px);
  max-height:82svh;
  object-fit:contain;
  opacity:0;
  visibility:hidden;
  filter:drop-shadow(0 42px 72px rgba(0,0,0,.66));
  transform-origin:50% 52%;
  will-change:transform,opacity;
}
.motion-phase,
.motion-finale,
.motion-spec{
  opacity:0;
  visibility:hidden;
  will-change:transform,opacity;
}
.motion-phase{
  position:absolute;
  z-index:6;
  left:max(var(--gut),6vw);
  top:25%;
  max-width:min(42vw,560px);
  pointer-events:none;
}
.motion-phase-index{
  display:block;
  margin-bottom:18px;
  color:var(--lime);
  font:800 .68rem/1 var(--font);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.motion-phase h2,
.motion-finale h2{
  font-family:var(--display);
  font-size:clamp(2.6rem,5.5vw,5.8rem);
  line-height:.88;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.motion-phase h2 em,
.motion-finale h2 em{ color:var(--lime); font-style:normal }
.motion-phase p,
.motion-finale p{
  max-width:470px;
  margin-top:22px;
  color:#aeb8b0;
  font-size:clamp(.96rem,1.2vw,1.08rem);
}

.motion-spec{
  position:absolute;
  z-index:7;
  width:min(260px,22vw);
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.25);
  pointer-events:none;
}
.motion-spec::before{
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:34%;
  height:3px;
  background:var(--lime);
}
.motion-spec > span{ color:var(--lime); font:800 .64rem/1 var(--font); letter-spacing:.14em }
.motion-spec b{ display:block; margin:10px 0 4px; font-family:var(--display); font-size:clamp(1rem,1.5vw,1.45rem) }
.motion-spec small{ display:block; color:#879188; font-size:.76rem; line-height:1.45 }
.motion-spec-a{ left:7vw; top:20vh }
.motion-spec-b{ right:6vw; top:27vh }
.motion-spec-c{ right:8vw; bottom:14vh }

.motion-finale{
  position:absolute;
  z-index:8;
  left:50%;
  top:50%;
  width:min(900px,calc(100% - 2 * var(--gut)));
  transform:translate(-50%,-45%);
  text-align:center;
  pointer-events:none;
}
.motion-finale h2{ font-size:clamp(3.5rem,8.4vw,8rem) }
.motion-finale p{ margin:22px auto 30px }
.motion-at-end .motion-finale{ pointer-events:auto }

.motion-scroll-cue{
  position:absolute;
  z-index:9;
  right:var(--gut);
  bottom:34px;
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.68);
  font:700 .62rem/1 var(--font);
  letter-spacing:.15em;
  pointer-events:none;
}
.motion-scroll-cue i{ position:relative; width:46px; height:1px; background:rgba(255,255,255,.32); overflow:hidden }
.motion-scroll-cue i::after{ content:""; position:absolute; inset:0; background:var(--lime); transform:translateX(-100%); animation:motionCue 1.8s ease-in-out infinite }
@keyframes motionCue{ 55%,100%{ transform:translateX(100%) } }
.motion-progress{
  position:absolute;
  z-index:9;
  right:14px;
  top:22%;
  bottom:22%;
  width:2px;
  background:rgba(255,255,255,.12);
  pointer-events:none;
}
.motion-progress i{ display:block; width:100%; height:100%; background:var(--lime); transform:scaleY(0); transform-origin:top; will-change:transform }

@media (max-width:900px){
  .motion-enabled .motion-hero{ height:380svh }
  .motion-topline{ grid-template-columns:1fr 1fr; top:92px }
  .motion-topline span:nth-child(2){ text-align:right }
  .motion-topline span:last-child{ display:none }
  .motion-court-grid{ width:82vw; right:-25vw; top:19vh }
  .motion-intro h1{ font-size:clamp(4rem,17vw,8rem) }
  .motion-racket{ width:min(62vw,560px); max-height:74svh }
  .motion-phase{ max-width:58vw; top:22% }
  .motion-spec{ width:28vw }
  .motion-spec-a{ left:var(--gut); top:18vh }
  .motion-spec-b{ right:var(--gut); top:24vh }
  .motion-spec-c{ right:var(--gut); bottom:12vh }
}

@media (max-width:600px){
  .motion-enabled .motion-hero{ height:340svh }
  .motion-stage{ min-height:100svh }
  .motion-portrait .hero-court{ object-position:49% center }
  .motion-topline{ left:18px; right:18px; top:78px; font-size:.53rem; letter-spacing:.1em }
  .motion-court-grid{ width:112vw; right:-50vw; top:24vh; opacity:.7 }
  .motion-intro{
    bottom:18px;
    padding-inline:18px;
  }
  .motion-intro .hero-badges{ gap:6px; margin-bottom:10px }
  .motion-intro .chip{ padding:6px 9px; font-size:.62rem }
  .motion-intro .chip:nth-child(3){ display:none }
  .motion-intro h1{ font-size:clamp(3.5rem,22vw,6.3rem); line-height:.78 }
  .motion-intro p.lead{ margin-top:12px; font-size:.84rem; line-height:1.42; -webkit-line-clamp:3 }
  .motion-intro .hero-actions{ margin-top:14px; gap:7px }
  .motion-intro .hero-actions .btn-lg{ padding:11px 18px; font-size:.88rem }
  .motion-intro .hero-actions .note{ display:none }
  .motion-racket{ width:80vw; max-height:65svh }
  .motion-phase{ left:18px; top:17%; max-width:calc(100% - 36px) }
  .motion-phase h2{ font-size:clamp(2.35rem,10.5vw,3.8rem); max-width:360px }
  .motion-phase p{ max-width:280px; margin-top:14px; font-size:.82rem }
  .motion-spec{ width:42vw; padding-top:9px }
  .motion-spec b{ margin-top:7px; font-size:.92rem }
  .motion-spec small{ font-size:.66rem }
  .motion-spec-a{ left:18px; top:16vh }
  .motion-spec-b{ right:18px; top:auto; bottom:19vh }
  .motion-spec-c{ left:18px; right:auto; bottom:8vh }
  .motion-finale{ width:calc(100% - 36px) }
  .motion-finale h2{ font-size:clamp(3rem,14vw,5.1rem) }
  .motion-finale p{ margin:16px auto 24px; font-size:.88rem }
  .motion-scroll-cue{ right:18px; bottom:18px; font-size:.54rem }
  .motion-progress{ display:none }
}

@media (max-height:650px){
  .motion-intro p.lead{ display:none }
  .motion-intro .hero-actions{ margin-top:12px; flex-direction:row }
  .motion-intro .hero-actions .btn{ width:auto }
  .motion-intro .hero-actions .note{ display:none }
  .motion-phase{ top:19% }
  .motion-phase p{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .motion-hero{ height:auto !important; min-height:100svh }
  .motion-stage{ position:relative !important; min-height:100svh }
  .motion-product,.motion-phase,.motion-specs,.motion-finale,.motion-progress{ display:none }
  .motion-scroll-cue{ display:none }
  .motion-portrait .hero-court{ transform:none !important; filter:none !important }
}

/* ---------- Logo image (брендовый логотип CLUB 375) ---------- */
.logo-img{ height:46px; width:auto; max-width:none; display:block }
.footer .logo-img{ height:52px }
@media (max-width:600px){ .logo-img{ height:38px } }

/* ---------- Header social icons ---------- */
.soc-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  color:var(--muted); background:rgba(255,255,255,.02); transition:color .2s, border-color .2s, transform .25s var(--ease);
}
.soc-ic svg{ width:19px; height:19px }
.soc-ic:hover{ color:var(--lime); border-color:var(--lime); transform:translateY(-2px) }
@media (max-width:600px){ .soc-ic{ display:none } }

/* ---------- Booking calculator modal ---------- */
.calc-overlay{
  position:fixed; inset:0; z-index:90; background:rgba(6,9,7,.78);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  overflow-y:auto; overscroll-behavior:contain;
}
.calc-overlay[hidden]{ display:none }
.calc-modal{
  position:relative; width:100%; max-width:560px; margin:auto;
  background:var(--ink-2, #10150f); border:1px solid var(--line); border-radius:var(--radius, 20px);
  padding:clamp(22px,4vw,36px); box-shadow:0 40px 120px -30px rgba(0,0,0,.8);
}
.calc-modal h3{ font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0 0 6px }
.calc-sub{ color:var(--muted); font-size:.92rem; margin:0 0 18px }
.calc-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); color:var(--muted); background:transparent; font-size:1rem;
  display:grid; place-items:center; transition:color .2s, border-color .2s;
}
.calc-close:hover{ color:var(--lime); border-color:var(--lime) }
.calc-total{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:6px 0 16px;
  background:rgba(198,255,61,.05);
}
.calc-total span{ color:var(--muted); font-size:.9rem; font-weight:600 }
.calc-total b{ font-family:var(--display); font-size:1.5rem; color:var(--lime) }
.calc-total small{ color:var(--muted); font-size:.8rem; flex-basis:100%; margin-top:2px }
.calc-check{ display:flex; align-items:center; gap:9px; cursor:pointer; font-weight:600 }
.calc-check input{ width:18px; height:18px; accent-color:var(--lime) }
.calc-racket-field select:disabled{ opacity:.45 }
.calc-note{ margin:12px 0 0; color:var(--muted); font-size:.8rem; text-align:center }
.field .opt{ color:var(--muted); font-weight:500 }

/* ---------- Cookie bar ---------- */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  max-width:720px; margin-inline:auto;
  background:rgba(12,17,13,.96); border:1px solid var(--line); border-radius:16px;
  padding:14px 18px; box-shadow:0 24px 80px -20px rgba(0,0,0,.7);
  backdrop-filter:blur(10px);
}
.cookie-bar[hidden]{ display:none }
.cookie-bar p{ margin:0; flex:1 1 300px; font-size:.86rem; color:var(--muted) }
.cookie-bar p a{ color:var(--lime); text-decoration:underline }
.cookie-bar .btn{ padding:10px 22px; font-size:.9rem }

/* Мобильные тап-мишени на главной: текстовые ссылки ≥32px */
@media (max-width:500px){
  .price-note a, .gallery-note a, .contact-row a.val, .contact-row .val a,
  .footer-legal-links a, .footer .fl, .req-mini a{ display:inline-block; padding-block:8px }
  .motion-scroll-cue{ display:none }
  .contact-row .val{ align-items:center }
}