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

/* ---------- Tokens ---------- */
:root{
  --ink:        #0A0E0C;     /* near-black base */
  --ink-2:      #10171 3;
  --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 }
ul{ list-style:none }
section{ position:relative }
::selection{ background:var(--lime); color:#0a0e0c }

/* ---------- 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; padding-block:16px }
.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:30px }
.nav a.link{ font-size:.92rem; 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 */
}
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{ outline:none; border-color:var(--lime); background:#0c120e }
.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: 1180px){
  .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 }
}