/* ============================================================
   VRMOTO — СТИЛІ
   Порядок: змінні → база → шапка → головна сцена → секції → підвал
   Кольори й шрифти міняються у блоці :root нижче.
   ============================================================ */

:root{
  /* --- Кольори --- */
  --bg:        #050506;
  --bg-2:      #0b0b0d;
  --surface:   #121215;
  --surface-2: #17171b;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --text:      #f2f2f4;
  --muted:     #8b8b95;
  --red:       #e10600;
  --red-2:     #ff2a1f;

  /* --- Шрифти ---
     Хочеш жорсткіший «мотоциклетний» вигляд?
     Заміни Unbounded на Oswald у рядку --font-head
     і в посиланні на шрифти в index.html                */
  --font-head: 'Unbounded', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* --- Розміри --- */
  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 48px);
  --radius: 16px;

}

*,*::before,*::after{ box-sizing:border-box; }

/* Атрибут hidden має перемагати будь-який display у класах.
   Без цього екран успіху форми видно одразу. */
[hidden]{ display:none !important; }

/* Шапка — position:fixed, тому не займає місця в потоці документа:
   без цього після кліку на пункт меню (або посилання "Записатися")
   заголовок секції-цілі виїжджав ПІД шапку (~77px) і був наполовину
   схований під нею — scroll-padding-top зсуває будь-який перехід
   на якір рівно на висоту шапки з запасом. */
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,canvas,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

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

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

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }


/* ============ ЛОГОТИП ============ */
.logo{
  font-family:var(--font-head);
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
}
.logo__vr{ color:var(--red); text-shadow:0 0 18px rgba(225,6,0,.55); }
.logo__moto{ color:#fff; }
.logo--big{ font-size:clamp(30px,7vw,46px); }


/* ============ КНОПКИ ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 24px;
  border:1px solid transparent; border-radius:10px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  letter-spacing:.01em; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease,
             transform .2s ease, box-shadow .2s ease;
}
.btn--sm{ min-height:40px; padding:0 18px; font-size:14px; }
.btn--lg{ min-height:56px; padding:0 30px; font-size:16px; }
.btn--wide{ width:100%; }

.btn--primary{ background:var(--red); color:#fff; box-shadow:0 6px 26px -8px rgba(225,6,0,.75); }
.btn--primary:hover{ background:#ff1408; transform:translateY(-2px); box-shadow:0 12px 34px -10px rgba(225,6,0,.9); }
.btn--primary:active{ transform:translateY(0); }

.btn--ghost{ background:rgba(255,255,255,.03); border-color:var(--line-2); color:var(--text); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }

/* У хіро ця кнопка стоїть не на суцільному темному тлі, а над
   світлиною мотоцикла й підлогою під ним — той самий майже прозорий
   фон і ледь помітна рамка, що чудово читаються деінде на рівному
   чорному, там губляться майже до невидимості. Перша спроба (темна
   підкладка з розмиттям) не спрацювала — на й так темному тлі хіро
   вона просто виглядала як «затемнена пляма», а не як кнопка. Замість
   того щоб намагатись підлаштуватись під те, що позаду (світла підлога
   чи темний мотоцикл), кнопка тепер сама достатньо світла й непрозора,
   щоб чітко читатись у БУДЬ-якому місці хіро. */
.hero__actions .btn--ghost{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4);
  color:#fff;
  box-shadow:0 4px 18px -6px rgba(0,0,0,.6);
}
.hero__actions .btn--ghost:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); }

.btn__ico{ width:18px; height:18px; fill:currentColor; }
.btn__spinner{ display:none; width:17px; height:17px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn.is-loading .btn__spinner{ display:block; }


/* ============ ПРЕЛОАДЕР ============ */
.preloader{
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .55s ease, visibility .55s ease;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ display:grid; gap:22px; justify-items:center; }
.preloader__bar{ width:min(220px,50vw); height:2px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0%; background:var(--red); box-shadow:0 0 14px var(--red-2); transition:width .25s ease; }


/* ============ ШАПКА ============ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid var(--line);
}
.header.is-stuck{
  background:rgba(5,5,6,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.header__in{
  max-width:var(--wrap); margin:0 auto; padding:16px var(--pad);
  display:flex; align-items:center; gap:28px;
  /* space-between потрібен саме для мобільного, де меню приховане:
     без нього телефон і бургер тиснуться до логотипа */
  justify-content:space-between;
}
.nav{ display:flex; gap:28px; margin-left:auto; }
.nav a{
  position:relative; font-size:15px; font-weight:500; color:var(--muted);
  transition:color .2s ease; padding:4px 0;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--red); transition:right .25s ease;
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ right:0; }

.header__right{ display:flex; align-items:center; gap:14px; }
.header__phone{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600; color:var(--text);
  transition:color .2s ease;
}
.header__phone svg{ width:17px; height:17px; fill:var(--red); }
.header__phone:hover{ color:var(--red-2); }

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--line-2); border-radius:10px;
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:12px; right:12px; height:2px; background:var(--text);
  border-radius:2px; transition:transform .3s ease, opacity .2s ease;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }


/* ============ МОБІЛЬНЕ МЕНЮ ============ */
.mobmenu{
  position:fixed; inset:0; z-index:99;
  background:rgba(5,5,6,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:40px;
  padding:100px var(--pad) 40px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
}
.mobmenu.is-open{ opacity:1; visibility:visible; transform:none; }
.mobmenu__nav{ display:grid; gap:6px; }
.mobmenu__nav a{
  font-family:var(--font-head); font-weight:700; font-size:clamp(26px,8vw,38px);
  padding:10px 0; border-bottom:1px solid var(--line);
  transition:color .2s ease, padding-left .2s ease;
}
.mobmenu__nav a:hover,.mobmenu__nav a:active{ color:var(--red); padding-left:10px; }
.mobmenu__foot{ display:grid; gap:18px; }
.mobmenu__soc{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }


/* ============================================================
   ГОЛОВНА СЦЕНА З МОТОЦИКЛОМ
   ============================================================ */
/* .hero__stage нижче навмисно узятий у 100svh (не 100vh) — під час
   з'явився коментар про це раніше. Але сам .hero (той блок, що й
   задає, СКІЛЬКИ прокрутки триває розліт) досі рахувався від звичайних
   vh — а на мобільному Safari звичайні vh рахуються від НАЙБІЛЬШОГО
   можливого вʼюпорта (як коли адресний рядок уже сховався), тоді як
   сама сцена (100svh) — від НАЙМЕНШОГО. Ця розбіжність і давала
   ефект «на самому старті/фіналі сцени щось не збігається»: смуга
   прокрутки виявлялась довшою чи коротшою за те, на що розрахований
   сам пінінг, і фінальний кадр розльоту міг ще стирчати поверх
   наступної секції. svh-фолбек — той самий прийом, що й нижче,
   вирівнює обидва числа під одну базу. */
.hero{ position:relative; height:250vh; height:250svh; }

/* Сцена — сітка з трьох рядів: заголовок / мотоцикл / підзаголовок і кнопки.
   Середній ряд віддається під фото, а його точний розмір рахує main.js
   (layoutStage). Завдяки цьому текст фізично не може наїхати на техніку
   на жодному розмірі екрана. */
.hero__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--bg);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:clamp(70px,9.5vh,104px) 0 clamp(60px,8vh,78px);
}

/* --- Фон студії: суцільний, той самий колір, що й тіло сторінки —
   без переходу відтінку за шапкою й заголовком. --- */
.stage__sky{
  position:absolute; inset:0; z-index:1;
  background:var(--bg);
}

/* --- Підлога на всю ширину екрана.
   Градієнт повторює справжні кольори підлоги з фотографії, а JS ставить
   його точно там, де стоїть мотоцикл. Саме тому шва між «фото» і
   сторінкою більше немає — фотографії-прямокутника просто не існує. --- */
.stage__floor{
  position:absolute; left:0; right:0; z-index:2;
  /* top і background-image задає layoutStage() у main.js */
  bottom:0;
  pointer-events:none;
}

/* Затемнення далеких країв підлоги — без нього вона виглядає пласкою */
.stage__vignette{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  /* Спад має бути ДУЖЕ плавним. З різким переходом край еліпса
     читається як межа прямокутника на підлозі. */
  background:
    radial-gradient(102% 86% at 50% 72%,
      rgba(5,5,6,0) 0%, rgba(5,5,6,.10) 38%, rgba(5,5,6,.34) 62%,
      rgba(5,5,6,.68) 84%, rgba(5,5,6,.94) 100%),
    linear-gradient(to bottom, rgba(5,5,6,.55) 0%, rgba(5,5,6,0) 26%);
}

/* затемнення низу, щоб кнопки читались поверх підлоги.
   БУВ БАГ: z-index:7 — той самий, що й у .hero__copy/.hero__bottom/
   .scrollhint нижче. При однаковому z-index CSS малює елементи в
   порядку DOM, а ::after завжди йде ОСТАННІМ серед вмісту свого
   елемента (як «останній child») — тобто це затемнення насправді
   малювалось ПОВЕРХ тексту й кнопок, а не позаду них, як стверджує
   власний коментар вище. Саме тому кнопки (і підказка «Гортай вниз»)
   виглядали затемненими незалежно від того, який фон їм задати. Тепер
   z-index:6 — той самий рівень, що й у віньєтки (.stage__vignette),
   яка вже коректно позаду тексту. */
.hero__stage::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:30vh;
  background:linear-gradient(to bottom, rgba(5,5,6,0) 0%, rgba(5,5,6,.5) 48%, rgba(5,5,6,.92) 100%);
  pointer-events:none; z-index:6;
}

/* ПОРЯДОК ШАРІВ СЦЕНИ (z-index)
   1 фон · 2 підлога · 3 нижня підсвітка · 5 об'єкти
   (усередині: 1 тінь · 2 іскри · 3 мотоцикл · 4 розліт · 5 спалах) ·
   6 туман (навмисно ПОВЕРХ мотоцикла, z-index вищий за об'єкти —
   стелиться по землі, закриває низ коліс, а не ховається за ними) ·
   6 віньєтка (той самий z-index, що й туман, але пізніше в DOM — і
   так лягає над ним) · 7 затемнення низу · 7-8 текст · 9 виноски */

/* --- Нижня підсвітка, є з першої секунди --- */
/* М'яка світлова пляма на підлозі під мотоциклом.
   Розмір і положення задає layoutStage() — прив'язка саме до лінії,
   де колеса торкаються підлоги. Раніше це була коробка біля низу
   екрана, і затемнення підлоги зрізало її, лишаючи світлу смугу. */
.stage__underglow{
  position:absolute;
  /* left / top / width / height задає layoutStage() у main.js */
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,255,255,.26) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 72%);
  filter:blur(34px);
  opacity:0;
  z-index:3;
  pointer-events:none;
  animation:breathe 9s ease-in-out infinite;
  transition:opacity 1.4s ease;
}
/* Це коло ніколи не вимикається (is-lit ставиться раз і назавжди),
   а .hero__stage — position:sticky всередині 250vh-блока: щойно
   користувач гортає нижче головного екрана, коло фізично йде з
   екрана, але анімація (transform+filter:blur щокадру) й далі крутиться
   вічно на задньому плані — це зайве постійне навантаження на всю
   решту сторінки. main.js додає is-offscreen, щойно .hero повністю
   виїжджає з вʼюпорта, — тут просто ставимо анімацію на паузу. */
.hero__stage.is-offscreen .stage__underglow{ animation-play-state:paused; }
.hero__stage.is-lit .stage__underglow{ opacity:1; }
/* Раніше тут ще й анімувався сам filter:blur (34px→40px) — саме ЗМІНА
   радіуса розмиття, а не сам факт його наявності, змушує браузер
   перераховувати блюр щокадру (це вже дорого само по собі, а тут ще й
   безперервно, поки сцена у вʼюпорті). Тепер розмиття лишається
   сталим (задане в .stage__underglow вище), у keyframes — тільки
   transform: він іде через композитор майже безкоштовно, і того
   самого ефекту «дихання» цілком досить без перерахунку розмиття.
   (opacity сюди свідомо не додаємо: її окремо контролює transition
   на .is-lit для плавної появи — анімація перекрила б цю появу.) */
@keyframes breathe{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%    { transform:translateX(-50%) scale(1.04,1.1); }
}

/* --- Легкий туман над підлогою: три розмиті плями, що повільно
   дрейфують управо-вліво в різному темпі — саме різнобій робить його
   живим, а не одним прямокутником, що ходить туди-сюди. Завжди
   активний (на відміну від диму з вихлопа), тому — CSS, не canvas:
   вічний rAF-цикл на canvas коштував би постійного навантаження на
   всю решту прокрутки сторінки (той самий клас багу, що вже ловили
   на .stage__underglow) — а transform/opacity-анімація майже
   безкоштовна, бо йде через композитор. --- */
.stage__fog{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  /* Вище за .stage__frame (5) — туман стелиться по землі, тож має
     закривати НИЗ мотоцикла (колеса, нижню частину коліс), а не
     ховатись повністю позаду нього. Той самий z-index, що й у
     .stage__vignette — але віньєтка йде пізніше в DOM, тому й далі
     лягає зверху (затемнює краї понад туманом теж). */
  z-index:6; overflow:hidden; pointer-events:none;
}
.stage__fog__layer{
  position:absolute; left:-20%; right:-20%; height:100%;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(40% 60% at 20% 90%,  rgba(255,255,255,.5), transparent 70%),
    radial-gradient(45% 55% at 80% 85%,  rgba(255,255,255,.5), transparent 70%);
  /* Розмиття 18px саме собою вже сильно «розводить» плями (та сама
     пастка, що й з тінню під колесами вище) — тому початковий колір
     свідомо набагато яскравіший, ніж на вигляд треба: після розмиття +
     opacity нижче лишається саме легка, ледь помітна імла, а не нуль. */
  filter:blur(18px);
  opacity:.8;
  animation:fogDrift 26s ease-in-out infinite;
}
.stage__fog__layer--2{ animation-duration:34s; animation-delay:-8s; opacity:.6; }
.stage__fog__layer--3{ animation-duration:20s; animation-delay:-14s; opacity:.65; }
@keyframes fogDrift{
  0%,100%{ transform:translateX(-6%); }
  50%    { transform:translateX(6%); }
}
/* Той самий хук, що вже є для підсвітки — щойно сцена йде за екран
   під час прокрутки нижче, туман теж стає на паузу. */
.hero__stage.is-offscreen .stage__fog__layer{ animation-play-state:paused; }

/* --- Зона об'єктів. Масштабується від точки контакту коліс із підлогою,
       щоб при віддаленні камери мотоцикл не «злітав» над підлогою. --- */
.stage__frame{
  position:absolute; z-index:5;
  /* left / top / width / height задає layoutStage() у main.js */
  left:0; top:0; width:0; height:0;
  transform:scale(var(--frame-scale,1));
  transform-origin:50% 88%;
  will-change:transform;
}
.stage__layer{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;
}

/* Тінь мотоциклу — під усім іншим. Плавно проявляється разом з
   мотоциклом (див. .stage__bike нижче), але БЕЗ підйому: тінь — це
   плаский відбиток на підлозі, і якби вона теж «підіймалась» разом з
   мотоциклом, це виглядало б так, ніби вона злітає над підлогою,
   замість того щоб на ній лежати. */
.stage__shadow{
  z-index:1;
  opacity:0;
  transition:opacity 1s ease;
}
.hero__stage.is-revealed .stage__shadow{ opacity:1; }

/* Іскри при розльоті на деталі (spark.js, колишній cloth.js) — та сама
   «оверсайз»-геометрія канвасу, що була в тканини, лишена без змін. */
.stage__spark{
  position:absolute;
  left:-30%; top:-46%;
  width:160%; height:200%;
  /* Обов'язково: глобальне правило img,svg,canvas{max-width:100%} інакше
     обрізає полотно з 160% до ширини кадру. */
  max-width:none;
  z-index:2;
  pointer-events:none;
}
.stage__spark.is-gone{ display:none; }

/* Мотоцикл — окремий об'єкт. Плавно проявляється з легким підйомом —
   той самий візуальний почерк, що й у каскаду тексту хіро нижче
   (.hero__eyebrow і т.д.), лише трохи повільніше й з більшим підйомом,
   бо це найбільший об'єкт сцени. Стартує одночасно з текстом
   (transition-delay не задано = 0s) — мотоцикл і текст проявляються
   як єдина сцена. */
.stage__bike{
  z-index:3;
  opacity:0; transform:translateY(32px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.16,.8,.3,1);
}
.hero__stage.is-revealed .stage__bike{ opacity:1; transform:none; }

/* Полотно розльоту саме порожнє, поки прогрес=0 (explode.js нічого
   не малює) — окремого opacity-перемикання більше не треба. */
.stage__exploded{ z-index:6; }

/* Спалах у момент розльоту */
.stage__flash{
  position:absolute; inset:0; z-index:7;
  background:radial-gradient(45% 45% at 50% 52%, rgba(255,255,255,.5), transparent 70%);
  opacity:0; pointer-events:none; mix-blend-mode:screen;
}


/* ---- Текст головного екрана ---- */
/* Заголовок — угорі, над мотоциклом.
   Підзаголовок і кнопки — унизу, під ним. Так текст ніколи
   не наїжджає на техніку, а композиція читається як у автобрендів. */
.hero__copy{
  grid-row:1; position:relative; z-index:7;
  width:100%; max-width:1000px; margin:0 auto; padding:0 var(--pad);
  text-align:center;
}
/* Ледь помітне затемнення під заголовком, щоб літери не змагалися
   зі світлою підлогою на низьких екранах.
   Раніше розмір рахувався у % від висоти .hero__copy — на вузьких
   екранах, де рядки заголовка переносяться й контейнер вищий, той самий
   відсоток розтягував пляму на десятки зайвих пікселів і вона наїжджала
   на фото мотоцикла (видимий «шов»). Тепер відступи фіксовані в px —
   пляма завжди на однакову, передбачувану відстань більша за сам текст,
   незалежно від того, скільки рядків він займає. */
.hero__copy::before{
  content:''; position:absolute; z-index:-1;
  inset:-14px -10%;
  background:radial-gradient(58% 58% at 50% 50%, rgba(5,5,6,.72) 0%, rgba(5,5,6,0) 72%);
  pointer-events:none;
}
.hero__eyebrow{
  margin:0 0 14px;
  font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--red-2);
}
/* Об'єм заголовка: градієнтна заливка по літерах + двошарова тінь.
   Тінь робимо через filter:drop-shadow, а не text-shadow — text-shadow
   не працює разом із градієнтом, залитим у текст.

   Сам drop-shadow навмисно винесено на окрему обгортку .hero__titleFx,
   а не лишено прямо на .hero__title: поєднання background-clip:text
   (градієнтна заливка) і filter на ОДНОМУ елементі — відомий тригер
   бага рендеринга в Chrome/Chromium, коли великий розмитий drop-shadow
   рахується тайлами і на межі тайлів проступає тонкий горизонтальний
   «шов» прямо крізь текст. Порахувати тінь на елементі-обгортці, який
   градієнта й background-clip не має, — той самий візуальний результат
   (drop-shadow все одно йде по силуету літер), але без багованого шляху
   рендерингу. */
.hero__titleFx{
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))
         drop-shadow(0 18px 40px rgba(0,0,0,.9));
}
.hero__title{
  font-family:var(--font-head); font-weight:800;
  font-size:clamp(25px, 3.2vw, 44px);
  line-height:1.16; letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
  background:linear-gradient(180deg, #ffffff 0%, #f4f4f6 40%, #b7b7c0 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
/* акцент лишається червоним попри градієнтну заливку */
.hero__title .accent{
  -webkit-background-clip:initial; background-clip:initial;
  background:none;
}
.hero__title--sm{ font-size:clamp(23px,2.8vw,38px); }
.hero__title .accent{ color:var(--red); text-shadow:0 0 30px rgba(225,6,0,.5); }

.hero__bottom{
  grid-row:3; position:relative; z-index:7;
  width:100%; max-width:860px; margin:0 auto; padding:0 var(--pad);
  display:grid; gap:20px; justify-items:center;
  text-align:center;
}
.hero__sub{
  margin:0; color:#c8c8d0;
  font-size:clamp(14px,1.4vw,17px); line-height:1.6;
  /* підзаголовок лежить на світлій підлозі — без тіні він тоне */
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 6px 22px rgba(0,0,0,.9);
}
.hero__actions{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}

/* Каскадна поява.
   Заголовок винесено окремо: у нього filter зайнятий тінню, і якби він
   потрапив у цю групу, поява стерла б тінь разом із розмиттям. */
.hero__eyebrow,.hero__sub,.hero__actions{
  opacity:0; transform:translateY(24px); filter:blur(8px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,.8,.3,1), filter .9s ease;
}
.hero__title{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,.8,.3,1);
}
.hero__stage.is-revealed .hero__eyebrow{ opacity:1; transform:none; filter:none; transition-delay:0s; }
.hero__stage.is-revealed .hero__title  { opacity:1; transform:none; transition-delay:.1s; }
.hero__stage.is-revealed .hero__sub    { opacity:1; transform:none; filter:none; transition-delay:.25s; }
.hero__stage.is-revealed .hero__actions{ opacity:1; transform:none; filter:none; transition-delay:.35s; }

/* Текст стану «розліт» */
.hero__explodedcopy{
  position:absolute; z-index:7;
  left:50%; top:clamp(76px,11vh,120px); transform:translateX(-50%);
  width:100%; max-width:820px; padding:0 var(--pad);
  text-align:center;
  opacity:0; pointer-events:none;
}

/* ---- Виноски до деталей ---- */
.callouts{
  position:absolute; inset:0; z-index:8;
  pointer-events:none; opacity:0;
  transition:opacity .4s ease;
}
.callouts.is-on{ opacity:1; }
.callouts__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* Довжину лінії та її «промальовування» задає main.js (layoutCallouts) */
.callouts__svg path{
  fill:none; stroke:rgba(255,255,255,.34); stroke-width:1;
  transition:stroke-dashoffset .6s cubic-bezier(.16,.8,.3,1);
}

.callout__dot{
  position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--red);
  box-shadow:0 0 0 3px rgba(225,6,0,.22), 0 0 16px rgba(225,6,0,.9);
  opacity:0; transform:scale(.3);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,1.4,.4,1);
}
.callout__dot::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(225,6,0,.5);
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%  { transform:scale(.6); opacity:.9; }
  70% { transform:scale(2.1); opacity:0; }
  100%{ transform:scale(2.1); opacity:0; }
}

/* Крапки на деталях без ліній-виносок — тільки мобільний (увімкнено
   нижче, у медіа-запиті). На десktopі повні лінії й так є (.callout),
   цей шар там просто не показуємо, щоб не дублювати ті самі крапки
   двічі. Позиціонування — layoutStageDots() у main.js, та сама
   формула, що й для .callout__dot вище. */
.stagedots{ position:absolute; inset:0; z-index:8; pointer-events:none; display:none; }
.stagedots i{
  position:absolute; width:19px; height:19px; margin:-9.5px 0 0 -9.5px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--red); font-style:normal;
  font-family:var(--font-head); font-weight:700; font-size:10px; color:#fff;
  box-shadow:0 0 0 3px rgba(225,6,0,.22), 0 0 16px rgba(225,6,0,.9);
  opacity:0; transform:scale(.3);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,1.4,.4,1);
}
.stagedots i::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(225,6,0,.5);
  animation:ping 2.4s ease-out infinite;
}
.stagedots.is-on i{ opacity:1; transform:scale(1); }

.callout__label{
  position:absolute; max-width:290px;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.16,.8,.3,1);
}
.callout__label b{
  display:block;
  font-family:var(--font-head); font-weight:600; font-size:14px;
  line-height:1.3; letter-spacing:-.01em; color:var(--text);
  margin-bottom:3px;
}
.callout__label i{
  display:block; font-style:normal; font-size:12px; color:var(--muted); line-height:1.45;
}
/* Номер картки — тільки мобільний варіант (сітка нижче в медіа-запиті);
   на десктопі й так є пряма лінія від крапки до підпису, цифра там
   зайва. */
.callout__num{ display:none; }
.callout__label--left{ text-align:right; transform-origin:100% 50%; }
.callout__label--right{ text-align:left; }

.callout.is-on .callout__dot{ opacity:1; transform:scale(1); }
.callout.is-on .callout__label{ opacity:1; transform:none; }


/* ============================================================
   ЗАГАЛЬНІ СЕКЦІЇ
   ============================================================ */
.section{ position:relative; padding:clamp(70px,10vw,130px) 0; }
.section--alt{ background:var(--bg-2); }
.section--alt::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.shead{ max-width:760px; margin:0 auto clamp(40px,5vw,64px); text-align:center; }
.shead__eyebrow{
  margin:0 0 14px;
  font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--red-2);
}
.shead__title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(26px,3.6vw,44px); line-height:1.18; letter-spacing:-.025em;
  margin:0 0 16px; text-wrap:balance;
}
.shead__note{ margin:0; color:var(--muted); font-size:16px; }
.shead__note a{ color:var(--text); border-bottom:1px solid var(--red); }
.shead__note a:hover{ color:var(--red-2); }

/* поява секцій при скролі — opacity й transform навмисно на ОДНІЙ
   кривій (раніше opacity йшла на "ease", а зсув — на іншій кривій:
   на око це читалось як «спалахнуло», бо прозорість домальовувалась
   швидше за рух). Одна й та сама плавна крива для обох — і триває
   трохи довше, щоб рух встигав прочитатись, а не сприймався як стрибок. */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}


/* ============ ЗИМІВЛЯ (акцентний банер над сіткою послуг) ============ */
.winter{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px;
  margin-bottom:22px; padding:34px clamp(24px,4vw,44px);
  border-radius:20px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(78,166,255,.16) 0%, transparent 55%),
    linear-gradient(180deg, #10151c 0%, #0b0e13 100%);
  border:1px solid rgba(120,180,255,.22);
}
/* тонке морозне світіння по контуру — щоб блок читався як «інше, особливе» */
.winter::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg, rgba(120,190,255,.55), transparent 40%, transparent 70%, rgba(120,190,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.winter__icon{
  display:grid; place-items:center; flex:0 0 auto;
  width:60px; height:60px; border-radius:16px;
  background:rgba(120,190,255,.12); color:#8ec7ff;
}
.winter__icon svg{ width:30px; height:30px; }
.winter__body{ min-width:0; }
.winter__eyebrow{
  display:block; margin:0 0 8px;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#8ec7ff;
}
.winter__title{
  font-family:var(--font-head); font-weight:700; font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-.02em; margin:0 0 8px;
}
.winter__lead{ margin:0 0 14px; color:var(--muted); font-size:15px; max-width:56ch; }
.winter__list{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 20px;
}
.winter__list li{
  position:relative; padding-left:20px;
  font-size:14px; color:var(--text); line-height:1.4;
}
.winter__list li::before{
  content:''; position:absolute; left:0; top:7px;
  width:7px; height:7px; border-radius:50%;
  background:#8ec7ff; box-shadow:0 0 8px rgba(142,199,255,.7);
}
.winter__cta{
  display:grid; justify-items:end; gap:10px; flex:0 0 auto; text-align:right;
}
.winter__price{ font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--muted); white-space:nowrap; }

@media (max-width:900px){
  .winter{ grid-template-columns:1fr; text-align:left; gap:18px; padding:24px 20px; }
  .winter__cta{ justify-items:start; text-align:left; }
  .winter__list{ grid-template-columns:1fr; }
}


/* ============ ПОСЛУГИ ============ */
.services{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.scard{
  position:relative; display:flex; flex-direction:column;
  padding:28px 26px 26px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.scard::before{
  content:''; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  opacity:0; transition:opacity .3s ease;
}
.scard:hover{ border-color:var(--line-2); transform:translateY(-4px); background:var(--surface-2); }
.scard:hover::before{ opacity:1; }
.scard__num{
  font-family:var(--font-head); font-size:12px; font-weight:600;
  color:var(--red); letter-spacing:.1em; margin-bottom:14px;
}
.scard h3{
  font-family:var(--font-head); font-weight:600; font-size:19px; line-height:1.3;
  letter-spacing:-.015em; margin:0 0 10px;
}
.scard p{ margin:0 0 22px; color:var(--muted); font-size:15px; line-height:1.6; flex:1; }
.scard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:18px; border-top:1px solid var(--line);
}
.scard__price{ font-family:var(--font-head); font-weight:600; font-size:16px; }
.scard__price small{ display:block; font-family:var(--font-body); font-weight:400; font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.scard__price.is-empty{ color:var(--muted); font-size:14px; font-weight:400; font-family:var(--font-body); }
.scard__link{ font-size:14px; font-weight:600; color:var(--red-2); white-space:nowrap; transition:gap .2s ease; }
.scard__link:hover{ text-decoration:underline; }

.services__foot{
  margin:36px 0 0; text-align:center; color:var(--muted); font-size:15px;
}
.services__noscript{ color:var(--muted); line-height:2; }


/* ============ ПРО НАС ============ */
.about{
  display:grid; gap:clamp(32px,5vw,64px);
  grid-template-columns:1.25fr .95fr; align-items:start;
}
.about__text p{ color:var(--muted); font-size:16px; }
.about__text strong{ color:var(--text); font-weight:600; }
.about__soclabel{
  margin:0 0 16px; font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.soccard{
  display:flex; align-items:center; gap:16px;
  padding:20px 22px; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.soccard:hover{ transform:translateY(-3px); border-color:var(--line-2); background:var(--surface-2); }
.soccard__ico{
  display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px;
  border-radius:12px; background:rgba(255,255,255,.05);
}
.soccard__ico svg{ width:22px; height:22px; fill:var(--text); }
.soccard--tiktok:hover .soccard__ico{ background:linear-gradient(135deg,#25f4ee33,#fe2c5533); }
.soccard--ig:hover .soccard__ico{ background:linear-gradient(135deg,#f9ce3433,#ee2a7b33,#6228d733); }
.soccard__body{ display:grid; gap:2px; }
.soccard__body b{ font-family:var(--font-head); font-weight:600; font-size:16px; }
.soccard__body i{ font-style:normal; font-size:14px; color:var(--muted); }
.soccard__arrow{ margin-left:auto; color:var(--muted); font-size:18px; transition:transform .25s ease, color .25s ease; }
.soccard:hover .soccard__arrow{ transform:translate(3px,-3px); color:var(--red-2); }


/* ============ ЗАСНОВНИК ============ */
.founder{
  display:grid; gap:clamp(32px,5vw,64px);
  grid-template-columns:.85fr 1.15fr; align-items:center;
}
.founder__media img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line);
}
.founder__text p{ color:var(--muted); font-size:16px; }
.founder__text strong{ color:var(--text); font-weight:600; }
.founder__tagline{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--font-head); font-weight:600; font-size:18px;
  line-height:1.4; letter-spacing:-.01em; color:var(--text) !important;
}
.founder__quote{
  margin-top:10px; font-size:13px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--red-2) !important;
}


/* ============ ПЕРЕВАГИ ============ */
.adv{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.adv__card{
  position:relative; padding:34px 28px 30px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s ease, transform .25s ease;
}
.adv__card:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.adv__num{
  display:block; font-family:var(--font-head); font-weight:800; font-size:44px;
  line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(225,6,0,.55);
  margin-bottom:20px;
}
.adv__card h3{ font-family:var(--font-head); font-weight:600; font-size:20px; margin:0 0 12px; letter-spacing:-.015em; }
.adv__card p{ margin:0; color:var(--muted); font-size:15px; }


/* ============ ГАЛЕРЕЯ ============ */
.gallery{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.gcard{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s ease, transform .25s ease;
}
.gcard:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.gcard img{ width:100%; height:100%; object-fit:cover; }
.gcard__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:34px 18px 16px;
  background:linear-gradient(to top, rgba(5,5,6,.92), transparent);
  font-size:14px; font-weight:600;
}
/* порожній слот */
.gcard--empty{ display:grid; place-items:center; gap:12px; }
.gcard--empty .gcard__ph{
  display:grid; place-items:center; gap:12px; padding:24px; text-align:center;
}
.gcard--empty svg{ width:34px; height:34px; fill:rgba(255,255,255,.14); }
.gcard--empty span{ font-size:13px; color:rgba(255,255,255,.28); }
.gcard--empty .gcard__cap{ background:none; color:var(--muted); font-weight:500; }
/* порівняння до/після */
.gcard__pair{ position:absolute; inset:0; }
.gcard__pair .gcard__after{ position:absolute; inset:0; clip-path:inset(0 0 0 50%); }
.gcard__range{
  position:absolute; inset:0; z-index:4; width:100%; margin:0;
  opacity:0; cursor:ew-resize;
}
.gcard__handle{
  position:absolute; top:0; bottom:0; left:50%; z-index:3; width:2px;
  background:var(--red); box-shadow:0 0 14px rgba(225,6,0,.8);
  pointer-events:none;
}
.gcard__handle::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; border:2px solid var(--red);
  background:rgba(5,5,6,.7); backdrop-filter:blur(4px);
}
.gcard__tag{
  position:absolute; top:12px; z-index:3;
  padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(5,5,6,.72); backdrop-filter:blur(6px); border:1px solid var(--line-2);
}
.gcard__tag--before{ left:12px; }
.gcard__tag--after{ right:12px; color:var(--red-2); border-color:rgba(225,6,0,.4); }


/* ============ ВІДГУКИ ============ */
.reviews{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.rcard{
  display:flex; flex-direction:column; gap:16px; padding:28px 26px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s ease, transform .25s ease;
}
.rcard:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.rcard__stars{ display:flex; gap:3px; }
.rcard__stars svg{ width:15px; height:15px; fill:var(--red); }
.rcard__text{ margin:0; flex:1; font-size:15px; line-height:1.65; color:var(--text); }
.rcard__who{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line); }
.rcard__ava{
  display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px;
  border-radius:50%; background:rgba(225,6,0,.14); color:var(--red-2);
  font-family:var(--font-head); font-weight:700; font-size:15px;
}
.rcard__name{ font-weight:600; font-size:15px; line-height:1.3; }
.rcard__bike{ font-size:13px; color:var(--muted); }
.rcard--empty .rcard__text{ color:rgba(255,255,255,.24); font-style:italic; }
.rcard--empty .rcard__ava{ background:rgba(255,255,255,.05); color:rgba(255,255,255,.2); }
.rcard--empty .rcard__name{ color:rgba(255,255,255,.28); }
.rcard--empty .rcard__stars svg{ fill:rgba(255,255,255,.14); }


/* ============ КОНТАКТИ ============ */
.contacts{
  display:grid; gap:clamp(24px,4vw,40px);
  grid-template-columns:1.15fr .85fr; align-items:stretch;
  margin-bottom:clamp(40px,6vw,72px);
}
.contacts__map{
  position:relative; min-height:420px;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--surface);
}
.contacts__map iframe{
  width:100%; height:100%; min-height:420px; border:0;
  filter:invert(92%) hue-rotate(180deg) contrast(.92) saturate(.6) brightness(.92);
}
.contacts__info{ display:grid; gap:26px; align-content:start; }
.cinfo{ display:grid; gap:5px; }
.cinfo__label{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red-2); margin-bottom:5px;
}
.cinfo__val{ margin:0; font-family:var(--font-head); font-weight:600; font-size:19px; letter-spacing:-.015em; }
.cinfo__sub{ margin:0; color:var(--muted); font-size:15px; }
.cinfo__note{ margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.5; }
.cinfo__link{ margin-top:6px; font-size:14px; font-weight:600; color:var(--red-2); }
.cinfo__link:hover{ text-decoration:underline; }
.cinfo__phone{ font-family:var(--font-head); font-weight:700; font-size:23px; letter-spacing:-.02em; transition:color .2s ease; }
.cinfo__phone:hover{ color:var(--red-2); }

.hrow{ display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px solid var(--line); font-size:15px; }
.hrow:last-child{ border-bottom:0; }
.hrow span:first-child{ color:var(--muted); }
.hrow.is-off span:last-child{ color:rgba(255,255,255,.32); }

.status{ display:flex; align-items:center; gap:9px; margin:10px 0 0; font-size:14px; font-weight:600; }
.status i{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex:0 0 8px; }
.status.is-open i{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); animation:pulse 2.4s ease-in-out infinite; }
.status.is-open span{ color:#22c55e; }
.status.is-closed i{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.16); }
.status.is-closed span{ color:var(--muted); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

.msgrow{ display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; }
.msg{
  display:inline-flex; align-items:center; gap:8px;
  min-height:42px; padding:0 15px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  font-size:14px; font-weight:600;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.msg svg{ width:17px; height:17px; fill:currentColor; }
.msg:hover{ transform:translateY(-2px); border-color:var(--line-2); background:var(--surface-2); }
.msg--tg:hover{ color:#2aabee; }
.msg--vb:hover{ color:#7360f2; }
.msg--ig:hover{ color:#e1306c; }
.msg--tt:hover{ color:#25f4ee; }
.msgrow--sm .msg{ min-height:36px; padding:0 12px; font-size:13px; }


/* ============ ФОРМА ============ */
.formwrap{
  position:relative;
  padding:clamp(28px,4vw,48px);
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  overflow:hidden;
}
.formwrap::before{
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
}
.formwrap__head{ margin-bottom:28px; }
.formwrap__head h3{ font-family:var(--font-head); font-weight:700; font-size:clamp(21px,2.6vw,28px); margin:0 0 8px; letter-spacing:-.02em; }
.formwrap__head p{ margin:0; color:var(--muted); font-size:15px; }

.form{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.field{ display:grid; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:13px; font-weight:600; color:var(--muted); }
.field label i{ color:var(--red); font-style:normal; }
.field input,.field textarea{
  width:100%; padding:14px 16px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:15px;
  transition:border-color .2s ease, background .2s ease;
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.22); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--red); background:#0a0a0c; }
.field.is-error input,.field.is-error textarea{ border-color:#ef4444; }
.field__err{ font-size:12px; color:#ef4444; min-height:0; opacity:0; transition:opacity .2s ease; }
.field.is-error .field__err{ opacity:1; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__submit{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px; }
.form__note{ margin:0; flex:1; min-width:220px; font-size:12px; color:var(--muted); line-height:1.5; }

.formdone{ display:grid; gap:14px; justify-items:center; text-align:center; padding:clamp(20px,4vw,40px) 0; }
.formdone__ico svg{ width:66px; height:66px; fill:none; stroke:#22c55e; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.formdone__ico circle{ stroke-dasharray:151; stroke-dashoffset:151; animation:draw .6s ease forwards; }
.formdone__ico path{ stroke-dasharray:36; stroke-dashoffset:36; animation:draw .35s ease .5s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.formdone h3{ font-family:var(--font-head); font-weight:700; font-size:24px; margin:0; }
.formdone p{ margin:0; color:var(--muted); max-width:420px; }


/* ============ ПІДВАЛ ============ */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding:clamp(48px,6vw,72px) 0 0; }
.footer__in{ display:grid; gap:36px; grid-template-columns:1.4fr .8fr 1fr; padding-bottom:44px; }
.footer__col{ display:grid; gap:10px; align-content:start; }
.footer__desc{ margin:8px 0 0; color:var(--muted); font-size:14px; max-width:320px; }
.footer__label{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.footer__col a{ font-size:15px; color:var(--muted); transition:color .2s ease; width:fit-content; }
.footer__col a:hover{ color:var(--text); }
.footer__col > span{ font-size:15px; color:var(--muted); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:26px; border-top:1px solid var(--line);
  font-size:13px; color:rgba(255,255,255,.32);
}


/* ============ ПЛАВАЮЧА КНОПКА (мобільна) ============ */
.fab{
  position:fixed; z-index:90; right:16px; bottom:16px;
  display:none; align-items:center; gap:9px;
  height:52px; padding:0 20px;
  background:var(--red); color:#fff; border-radius:999px;
  font-size:15px; font-weight:600;
  box-shadow:0 10px 30px -8px rgba(225,6,0,.9);
  opacity:0; transform:translateY(80px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.16,.8,.3,1);
}
.fab svg{ width:19px; height:19px; fill:currentColor; }
.fab.is-on{ opacity:1; transform:none; }


/* ============================================================
   АДАПТИВ
   ============================================================ */
/* Між 900 і 1150 px меню, телефон і кнопка не вміщались в один рядок */
@media (max-width:1150px){
  .header__in{ gap:18px; }
  .nav{ gap:20px; }
  .nav a{ white-space:nowrap; font-size:14px; }
  .header__phone span{ display:none; }
  .header__phone{ width:42px; height:42px; justify-content:center;
                  border:1px solid var(--line-2); border-radius:10px; }
}

@media (max-width:1100px){
  .about{ grid-template-columns:1fr; }
  .founder{ grid-template-columns:1fr; }
  .founder__media img{ max-width:360px; margin:0 auto; }
  .contacts{ grid-template-columns:1fr; }
  .contacts__map,.contacts__map iframe{ min-height:340px; }
  .footer__in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  body{ font-size:16px; }

  .nav{ display:none; }
  .header__phone span{ display:none; }
  .header__phone{ width:44px; height:44px; justify-content:center; border:1px solid var(--line-2); border-radius:10px; }
  .header__right .btn--primary{ display:none; }
  .burger{ display:block; }

  .hero{ height:230vh; height:230svh; }
  .hero__bottom{ gap:16px; }
  .hero__stage::after{ height:44vh; }

  /* Виноски на мобільному: та сама лінія-до-деталі, що на десктопі,
     тут не влізе (підписи наклались би одне на одного на вузькому
     екрані) — тому ті самі підписи йдуть звичайним стовпчиком під
     схемою розльоту, без ліній і крапок. Координати їм не потрібні —
     main.js (layoutCallouts) на мобільному їх просто не рахує, тут
     керує лише CSS.
     Сітка притиснута до самого низу сцени (раніше тут був відступ 3%
     "про запас" під підказку "Гортай вниз" — підказку прибрали зовсім,
     запас більше не потрібен, і кожен зайвий піксель тут — це піксель
     відстані від розібраного мотоцикла над карткою). */
  .callouts{
    position:absolute; inset:auto 0 0 0; z-index:8;
    display:grid; grid-template-columns:1fr 1fr; gap:5px;
    padding:0 16px calc(6px + env(safe-area-inset-bottom));
  }
  .callouts__svg{ display:none; }
  .callout{ position:static; }
  .callout__dot{ display:none; }
  .callout__label{
    position:relative; max-width:none !important; width:auto !important;
    display:block; text-align:left; transform-origin:0 50%;
    /* Розібраний мотоцикл на реальному телефоні виявився більшим, ніж
       у будь-якому емуляторі тут — деталі тепер сягають зони карток
       знизу, і світлі частини фото просвічували крізь майже прозорий
       фон картки (.05 alpha), тож текст губився. Непрозорий темний фон
       + розмиття того, що під карткою, — картка читається однаково
       чітко, хай навіть під нею опиниться яскрава деталь мотоцикла. */
    background:rgba(9,9,11,.86); backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--line-2); box-shadow:0 4px 16px rgba(0,0,0,.35);
    border-radius:8px; padding:6px 22px 6px 8px;
  }
  .callout__label--left, .callout__label--right{ text-align:left; }
  .callout__label b{ font-size:11.5px; line-height:1.25; }
  /* Той самий номер, що й на крапці над деталлю (stagedots) —
     кружечок у кутку картки, щоб було видно, яка картка якій деталі
     відповідає. */
  .callout__num{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:6px; right:6px; width:15px; height:15px;
    border-radius:50%; background:var(--red); color:#fff;
    font-family:var(--font-head); font-weight:700; font-size:9px;
  }
  /* Короткий тег категорії ("Сезон", "Гальма" тощо) під заголовком —
     на мобільному, де кожен зайвий рядок висоти множиться на 8 карток
     одразу, прибираємо: номер + заголовок і так однозначно показують,
     яка картка яка (номер збігається з крапкою на фото). */
  .callout__label i{ display:none; }


  .form{ grid-template-columns:1fr; }
  .fab{ display:flex; }
  .stagedots{ display:block; }

  /* Графік роботи в підвалі — текст, зібраний з config.js, тож його
     довжина непередбачувана (щойно міняли графік кілька разів поспіль,
     і рядок то коротшав, то довшав). Замість підганяти ширину під
     конкретний текст щоразу — на мобільному, де поверх підвалу
     плаває кнопка "Записатися" (.fab), просто ставимо рядки
     .footer__bottom один під одним на всю ширину (замість боротьби
     за один рядок з space-between) і додаємо знизу запас, що
     гарантовано більший за висоту самої кнопки (52px + 16px відступ) —
     тепер підвал не заходить під неї, хай яким довгим стане текст. */
  .footer__bottom{ flex-direction:column; align-items:flex-start; padding-bottom:84px; }

  /* Було: auto-fit(300px) → на вузькому екрані завжди 1 колонка,
     і 13+ карток послуг перетворювались на нескінченну стрічку.
     Дві компактні колонки — і сторінка вдвічі коротша. */
  .services{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .scard{ padding:18px 14px 16px; }
  .scard__num{ font-size:11px; margin-bottom:8px; }
  .scard h3{ font-size:15px; line-height:1.25; margin-bottom:6px; }
  .scard p{
    margin:0 0 14px; font-size:13px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;   /* довгий опис не розтягує сусідню картку у сітці */
  }
  .scard__foot{
    flex-direction:column; align-items:flex-start; gap:8px;
    padding-top:12px;
  }
  .scard__price{ font-size:14px; }
  .scard__link{ font-size:13px; }

  .footer__in{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:600px){
  .hero__actions{ flex-direction:column; align-items:center; gap:10px; width:100%; }
  .hero__actions .btn{ width:min(320px,100%); }
  .hero__title{ font-size:clamp(22px,6.2vw,30px); }
  .hero__sub{ font-size:14px; }
  .hero__sub br{ display:none; }
  .section{ padding:64px 0; }
  .cinfo__phone{ font-size:20px; }
}


/* ============ ЗМЕНШЕНИЙ РУХ ============ */
@media (prefers-reduced-motion: reduce){
  .stage__underglow{ animation:none; }
  .stage__fog__layer{ animation:none; }
  .callout__dot::after{ animation:none; }
  .stagedots i::after{ animation:none; }
  .status.is-open i{ animation:none; }
  .btn:hover,.scard:hover,.adv__card:hover,.gcard:hover,.rcard:hover,.soccard:hover{ transform:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}