/* ============================================================
   HERO + HEADER  (Figma node 180:2, фрейм 1440×810)
   Десктоп: абсолютные координаты по эталону 1440px.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 100%),
    var(--dark-1100);
}

/* ---------- Премиум-появление hero (каскад при загрузке) ---------- */
.hero__header, .h1, .hero__tagline, .hero__subheading, .trust, .hero__services, .hero__scene {
  transition: opacity .8s ease, filter .8s ease;
}
.hero:not(.is-in) .hero__header,
.hero:not(.is-in) .h1,
.hero:not(.is-in) .hero__tagline,
.hero:not(.is-in) .hero__subheading,
.hero:not(.is-in) .trust,
.hero:not(.is-in) .hero__services,
.hero:not(.is-in) .hero__scene { opacity: 0; filter: blur(10px); }
.hero.is-in .hero__header    { transition-delay: 0s; }
.hero.is-in .hero__scene     { transition-delay: .16s; }
.hero.is-in .h1              { transition-delay: .12s; }
.hero.is-in .hero__tagline   { transition-delay: .24s; }
.hero.is-in .hero__subheading{ transition-delay: .32s; }
.hero.is-in .trust           { transition-delay: .42s, .42s, 0s; }  /* opacity,filter = stagger; transform(hover) = мгновенно */
.hero.is-in .hero__services  { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .hero__header, .h1, .hero__tagline, .hero__subheading, .trust, .hero__services, .hero__scene { transition: none; }
}

/* Сцена 1440px, центрируется на широких экранах */
.stage {
  position: relative;
  width: var(--stage-w);
  height: 810px;
  margin: 0 auto;
}

/* ---------- Фоновые слои (прямые дети .hero — на весь экран, не масштабируются) ---------- */
.hero__backdrop {
  position: absolute; left: 50%; top: -28px;
  transform: translateX(-50%);
  width: calc(100% + 56px);            /* на всю ширину .hero (вьюпорт) + напуск (срезает скругления углов) */
  max-width: none;                     /* перебиваем ресет img{max-width:100%}, иначе фон режется по 1440 */
  height: calc(100% + 56px);           /* тянется на всю высоту hero + напуск сверху/снизу */
  object-fit: cover; object-position: center top;
  z-index: 0;
}
/* затемнение верха фона — гасит яркую полосу потолка гаража на backdrop */
.hero__shade {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 260px;
  z-index: 0;
  background: linear-gradient(180deg, var(--dark-1100) 0%, rgba(13,13,13,.55) 45%, transparent 100%);
  pointer-events: none;
}
.hero__glow {
  position: absolute; left: 24px; top: 156px;
  width: 1392px; height: 520px;      /* эталон 1440: как в макете (отступы 24) */
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  z-index: 1;
  /* картинка hero-glow-t.png — прозрачная (альфа по яркости), кладётся
     обычным наложением поверх фото. БЕЗ mix-blend-mode:screen — он зависел
     от stacking-context (.stage с transform) и давал чёрную плашку поверх фото. */
}
/* тянем на всю ширину ТОЛЬКО при >1440 (до 1920) */
@media (min-width: 1441px) {
  .hero__glow {
    left: 50%; transform: translateX(-50%);
    width: 100vw; border-radius: 0;
    /* object-fit:cover при 100vw кропит вертикальный фейд картинки → жёсткие
       края («чёрная полоска»). Маской возвращаем мягкое затухание сверху/снизу. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 78%, transparent 100%);
  }
}
.hero__glow img { width: 100%; height: 100%; object-fit: cover; }

.hero__pattern {
  position: absolute; left: 24px; top: 0;
  width: 1392px; height: 676px;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}
/* Сцена = многослойная (гараж + машина) для depth-параллакса */
.hero__scene {
  position: absolute; left: 50%; top: 167.26px;   /* поднята ~78px (опущена на 2px) */
  transform: translateX(-50%);
  width: 891px; height: 594px;
  z-index: 3;
  pointer-events: none;
}
.hero__scene-ref {                 /* призрак-референс для выравнивания (выключен) */
  position: absolute; left: 0; top: 0; width: 891px; opacity: 0;
  pointer-events: none;
}
.hero__layer {
  position: absolute; inset: 0;
  transition: transform .35s ease-out;
  will-change: transform;
}
.hero__layer--garage { transform: translate3d(calc(var(--mx, 0) *  6px), 0, 0); }   /* только по горизонтали */
.hero__layer--car    { transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) *  9px), 0); }

.hero__garage { position: absolute; left: 50%; bottom: 84px; width: 700px; margin-left: -350px; }
.hero__car {
  position: absolute; left: 50%; bottom: 44px; width: 272px; margin-left: -136px;
}

@media (prefers-reduced-motion: reduce) {
  .hero__layer { transform: none !important; }
  .hero__car { transition: none; }
}

/* ---------- Header ---------- */
.hero__header {
  position: absolute; left: 0; top: 0;
  width: 1440px;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 24px 24px 0;
  z-index: 20;
}

/* Навигация */
.nav {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--light-80);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav__link {
  font-family: var(--ff-body);
  font-weight: 400; font-size: 13px; line-height: 20px;
  letter-spacing: var(--ls-body); text-transform: uppercase;
  color: var(--light-600); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .18s ease;
}
.nav__link--active { font-weight: 700; color: var(--light-1000); letter-spacing: normal; }
.nav__link:hover { color: var(--light-1000); }
.nav__arrow { width: 14px; height: 14px; }
.nav__sep { width: 1px; height: 8px; background: var(--light-100); flex: none; }

/* Выпадающее меню «Usługi» */
.nav__has-menu { position: relative; display: inline-flex; align-items: center; }
.nav__trigger { padding: 0; }                         /* сброс кнопки; остальное от .nav__link */
.nav__arrow { transition: transform .2s ease; }
.nav__has-menu.is-open .nav__arrow { transform: rotate(180deg); }

/* Мега-меню «Usługi» — полноширинная панель с карточками услуг */
.mega {
  position: absolute; top: 84px; left: 0;
  width: 1440px;
  padding: 0 24px;
  z-index: 25;                       /* над контентом И над логотипом (логотип уходит под меню) */
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
  pointer-events: none;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.mega__panel {
  background: var(--dark-1000);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.mega__grid { display: flex; flex-wrap: wrap; align-content: center; gap: 12px; }
.svc-card {
  width: 327px;
  display: flex; align-items: center; gap: 16px;
  padding-right: 24px;
  border: 1px solid var(--light-40);
  border-radius: 8px;
  overflow: hidden;
  transition: background .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.svc-card:hover { background: var(--light-40); border-color: transparent; transform: scale(1.02); }
.svc-card__img { width: 144px; height: 108px; flex: none; object-fit: cover; }
.svc-card__title {
  flex: 1 1 0; min-width: 0;
  font-weight: 700; font-size: 15px; line-height: 20px;
  text-transform: uppercase; color: var(--light-1000); letter-spacing: normal; }

/* Логотип */
.hero__logo { width: 96px; height: 144px; flex: none; transition: transform .2s cubic-bezier(.34,1.56,.64,1); cursor: pointer; }
.hero__logo img { width: 96px; height: 144px; object-fit: contain; }
.hero__logo:hover { transform: scale(.93); }   /* «отдаление»/нажатие — обратно кнопкам, easing как у кнопок */

/* Контакты справа */
.contacts {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; width: auto; min-width: 423px;   /* PL = 423px jak dotąd; dłuższe języki (UA/RU) rosną, by strzałka się nie ucinała */
}
/* Телефон */
.callinfo { display: flex; align-items: stretch; }
.callinfo__icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px;
  background: var(--light-80);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--light-40);
  border-radius: 8px 0 0 8px;
  color: var(--light-1000);
}
.callinfo__icon .icon { width: 16px; height: 16px; flex: none; }
.callinfo__num {
  display: flex; align-items: center; padding: 12px 16px;
  background: var(--light-80);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 0 8px 8px 0;
  font-weight: 700; font-size: 14px; line-height: 20px;
  text-transform: uppercase; color: var(--light-1000); white-space: nowrap; letter-spacing: normal; }
/* Кнопка «Umów wizytę» в шапке */
.appt {
  display: flex; align-items: stretch; flex: none;   /* nie kurczyć — inaczej strzałka znika na dłuższych językach */
  border: 1px solid var(--light-1000); border-radius: 8px;
  overflow: hidden;                 /* обрезаем внутренние белые блоки по радиусу */
}
.appt__label {
  display: flex; align-items: center; padding: 12px 16px;
  background: var(--light-1000);
  border-right: 1px solid rgba(1,1,1,.04);
  font-weight: 700; font-size: 14px; line-height: 20px;
  text-transform: uppercase; color: var(--dark-1000); white-space: nowrap; letter-spacing: normal; }
.appt__icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; flex: none; background: var(--light-1000);
  color: var(--dark-1000);
}
/* Иконка-стрелка primary-кнопки: inline-SVG, морф » → ↗ на hover.
   Морфим сам путь (CSS `d`) — чистая геометрия без проблем с осью вращения. */
.btn-arrow { display: block; width: 14px; height: 14px; flex: none; }
.btn-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.btn-arrow__chev, .btn-arrow__diag {
  transition: opacity .25s ease, transform .3s cubic-bezier(.4,0,.2,1);
  transform-box: view-box; transform-origin: 8px 8px;
}
.btn-arrow__diag { opacity: 0; transform: translate(-2px, 2px) scale(.6); }   /* ↗ ждёт снизу-слева */
/* Язык */
/* Переключатель языка (выпадающий вниз) */
.lang { position: relative; width: 44px; height: 44px; flex: none; }
.lang__btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--light-80);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 8px;
  font-weight: 700; font-size: 14px; line-height: 20px;
  text-transform: uppercase; color: var(--light-1000);
  transition: background .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1); letter-spacing: normal; }
.lang__btn:hover { background: var(--light-100); transform: scale(1.02); }
.lang__menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  display: none; flex-direction: column; align-items: center; gap: 2px;
  width: 44px; padding: 4px;
  background: var(--light-80);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 8px;
  z-index: 40;
}
.lang.is-open .lang__menu { display: flex; }
.lang__opt {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-weight: 700; font-size: 14px; line-height: 20px; text-transform: uppercase;
  color: var(--light-600);
  transition: color .15s ease, background .15s ease; letter-spacing: normal; }
.lang__opt:hover { color: var(--light-1000); background: var(--light-40); }
.lang__div { width: 8px; height: 1px; background: var(--light-100); }

/* ---------- Контент hero ---------- */
.hero__content {
  position: absolute; left: 88px; top: 176px;
  width: 1264px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 339px;
  z-index: 10;
}
.hero__headline {
  display: flex; flex-direction: column; gap: 24px;
  flex: 1 1 0; min-width: 0;
}
.h1 {
  margin: 0; width: 438px;
  box-sizing: content-box;          /* чтобы padding не менял перенос */
  padding: 0 12px;                  /* запас под наклон италика → не режется по краям */
  transform: translateX(-12px);     /* визуально возвращаем на место (x=88) */
  font-family: var(--ff-display);
  font-weight: 700; font-style: italic;
  font-size: 116px; line-height: 116px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 38.834%, #787674 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; letter-spacing: normal; }
.hero__tagline { display: flex; align-items: center; gap: 12px; }
.hero__tagline-bar { width: 2px; height: 16px; border-radius: 100px; background: var(--accent); flex: none; }
.hero__tagline-text {
  font-weight: 700;                 /* весь тэглайн жирный */
  font-size: 16px; line-height: 28px; letter-spacing: .32px;
  text-transform: uppercase; color: var(--light-600); white-space: nowrap;
}
.hero__tagline-text b { font-weight: 700; color: var(--light-1000); letter-spacing: normal; }

.hero__intro {
  display: flex; flex-direction: column; align-items: flex-end; gap: 32px;
  width: 536px; flex: none;
}
.hero__subheading {
  width: 100%;
  font-weight: 400;                 /* база — обычный; жирные только в <b> */
  font-size: 32px; line-height: 40px; letter-spacing: var(--ls-body);
  text-align: right; color: var(--light-1000);
}
.hero__subheading b { font-weight: 700; letter-spacing: normal; }

/* Бейдж доверия Google */
.trust {
  display: flex; align-items: stretch; height: 73px;
}
.trust__main {
  display: flex; align-items: center; gap: 16px;
  padding: 4px 24px 4px 4px;
  background: var(--light-80);
  border-right: 1px solid var(--light-100);
  border-radius: 12px 0 0 12px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.trust__logo {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: #030303; border-radius: 8px; flex: none;
}
.trust__logo img { width: 28px; height: 28px; }
.trust__content { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.trust__label {
  font-size: 13px; line-height: 1; letter-spacing: var(--ls-body);
  text-transform: uppercase; color: var(--light-600); white-space: nowrap;
}
.trust__rating { display: flex; align-items: center; gap: 8px; }
.trust__score {
  font-weight: 700; font-size: 20px; line-height: 20px;
  text-transform: uppercase; color: var(--light-1000); letter-spacing: normal; }
.trust__stars { display: flex; align-items: center; gap: 2.947px; }
.trust__stars img { width: 14.737px; height: 14px; }
.trust__count { font-size: 16px; line-height: 20px; color: var(--light-600); white-space: nowrap; }
.trust__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 32px; background: var(--light-80);
  border-radius: 0 8px 8px 0; color: var(--light-1000);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.trust__arrow .icon { width: 10px; height: 10px; }

/* ---------- Нижний ряд: Umów wizytę + Wszystkie usługi ---------- */
.hero__services {
  position: absolute; left: 24px; bottom: 124px;
  width: 1392px;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 65px 64px;
  z-index: 10;
}
.btn-appt {
  display: inline-flex; align-items: stretch; height: 56px;
  border-radius: 8px; overflow: hidden;
}
.btn-appt__label {
  display: flex; align-items: center; padding: 12px 24px;
  background: var(--light-1000);
  border-right: 1px solid var(--dark-40);
  font-weight: 700; font-size: 14px; line-height: 24px;
  text-transform: uppercase; color: var(--dark-1000); white-space: nowrap; letter-spacing: normal; }
.btn-appt__icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; flex: none; background: var(--light-1000); color: var(--dark-1000);
}
/* стрелка primary-кнопки — двойная иконка, см. .btn-ico (морф » → ↗) */

.hero__services-right { width: 261px; display: flex; justify-content: center; }
.btn-circle {
  display: flex; align-items: center; justify-content: center;
  width: 188px; height: 188px;
  border-radius: 100px;
  border: 2px solid var(--accent);
  background: var(--dark-100);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.btn-circle__t { display: flex; flex-direction: column; align-items: center; }
.btn-circle__l1 {
  font-weight: 400; font-size: 16px; line-height: 24px;
  text-transform: uppercase; color: var(--light-1000);
}
.btn-circle__l2 {
  font-weight: 700; font-size: 16px; line-height: 24px;
  text-transform: uppercase; color: var(--light-1000); letter-spacing: normal; }
.btn-circle:hover {
  background:
    radial-gradient(70% 70% at 50% 58%, rgba(255,190,0,.34) 0%, rgba(255,190,0,.06) 65%, transparent 100%),
    var(--dark-100);
  border-color: var(--yellow);
  transform: scale(1.03);                         /* тактильное увеличение */
  box-shadow: 0 0 38px rgba(255,190,0,.18);       /* мягкое свечение */
}

/* Плавающая кнопка звонка */
.hero__call {
  position: fixed; right: 24px; bottom: 24px;
  width: 76px; height: 76px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  background: var(--light-1000);
  border: 4px solid var(--light-40);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--dark-1000);
  z-index: 90;
}
.hero__call .icon { width: 28px; height: 28px; }

/* ============================================================
   HOVER-СОСТОЯНИЯ  (из дизайн-системы, ноды 712:*)
   ============================================================ */
/* Primary «Umów wizytę»: » морфится в ↗ — передний шеврон гаснет,
   задний перетекает в наконечник (морф пути), диагональный шафт прочерчивается. */
.appt:hover .btn-arrow__chev, .btn-appt:hover .btn-arrow__chev, .book-btn:hover .btn-arrow__chev { opacity: 0; transform: translate(3px, -3px) scale(.6); }
.appt:hover .btn-arrow__diag, .btn-appt:hover .btn-arrow__diag, .book-btn:hover .btn-arrow__diag { opacity: 1; transform: translate(0, 0) scale(1); }

/* Тактильное увеличение primary-кнопок на hover (как у круга) */
.appt, .btn-appt { transition: var(--hover-transition); }
.appt:hover, .btn-appt:hover { transform: scale(1.02); }

/* Телефон: фон светлее + лёгкое тактильное увеличение */
.callinfo__icon, .callinfo__num { transition: background .18s ease; }
.callinfo:hover .callinfo__icon, .callinfo:hover .callinfo__num { background: var(--light-100); }
.callinfo { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.callinfo:hover { transform: scale(1.02); }

/* Язык — hover/состояния на .lang__btn и .lang__opt (см. блок переключателя выше) */

/* Бейдж доверия: фон светлее + тактильное увеличение + морф стрелки » → ↗ */
.trust__main, .trust__arrow { transition: background .18s ease; }
.trust:hover .trust__main, .trust:hover .trust__arrow { background: var(--light-100); }
/* reveal (opacity/filter) + hover (transform) вместе; задержка reveal не должна
   тормозить ховер → transform получает 0s delay в правиле .hero.is-in .trust ниже */
.trust { transition: opacity .8s ease, filter .8s ease, var(--hover-transition); }
/* плавное премиальное увеличение при ховере (как у кнопок) */
.trust:hover { transform: scale(1.02); }
.trust__arrow .btn-arrow { width: 12px; height: 12px; }
.trust:hover .btn-arrow__chev { opacity: 0; transform: translate(3px, -3px) scale(.6); }
.trust:hover .btn-arrow__diag { opacity: 1; transform: translate(0, 0) scale(1); }

/* Плавающая звонилка: лёгкий подъём + кольцо */
.hero__call { transition: transform .2s ease, box-shadow .2s ease; }
.hero__call:hover { transform: scale(1.04); box-shadow: 0 0 0 6px var(--light-40); }

/* ============================================================
   МОДАЛКА ЗАПИСИ (CTA)  — Figma 873:2456
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 1000;   /* выше закреплённого меню .navdock (z400) — оверлей перекрывает его */
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__overlay { position: absolute; inset: 0; background: rgba(15,15,15,.8); }
.modal__panel {
  position: relative; z-index: 1;
  width: 620px; max-width: 100%;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background-color: #191919;
  background-image: url('../../public/assets/bg/modal-bg.png');
  background-repeat: no-repeat; background-position: top center; background-size: cover;
  border-radius: 12px;
  padding: 48px;
  display: flex; flex-direction: column; gap: 32px; align-items: center;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.98);
  transition: transform .28s cubic-bezier(.34,1.4,.64,1);
}
.modal.is-open .modal__panel { transform: none; }
.modal__close {
  position: absolute; left: 24px; top: 24px;
  width: 32px; height: 32px; border-radius: 100px;
  background: var(--light-40);
  display: flex; align-items: center; justify-content: center;
  color: var(--light-600);
  transition: background .15s ease, color .15s ease;
}
.modal__close:hover { background: var(--light-100); color: var(--light-1000); }
.modal__close:hover .icon { background-color: var(--light-1000); }
.modal__close .icon { width: 11px; height: 11px; }

.modal__head { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.modal__title {
  margin: 0;
  font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: 56px; line-height: 56px; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 38.834%, #787674 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: normal; }
.modal__sub { font-weight: 700; font-size: 20px; line-height: 28px; color: var(--light-1000); max-width: 510px; letter-spacing: normal; }
.modal__sub-reg { font-weight: 400; }

.modal__options { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.book-group { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.book-opt {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding-top: 8px;
  border: 1px dashed var(--light-100); border-radius: 12px;
  background: var(--light-40);
}
.book-opt__label { font-size: 16px; line-height: 28px; color: var(--light-600); text-align: center; }
.book-opt__label b { font-weight: 700; color: var(--light-1000); letter-spacing: normal; }

.book-btn { display: flex; align-items: stretch; width: 100%; height: 72px; transition: var(--hover-transition); }
.book-btn:hover { transform: scale(1.02); }
.book-btn__main {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 24px;
  padding: 4px 24px 4px 4px;
  background: var(--light-1000);
  border-right: 1px solid rgba(15,15,15,.08);
  border-radius: 12px 0 0 12px;
}
.book-btn__ico {
  width: 64px; height: 64px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.book-btn__ico--dark { background: var(--dark-1000); color: #fff; }
.book-btn__ico--dark .icon { width: 32px; height: 32px; }
.book-btn__ico--booksy img { width: 64px; height: 64px; }
.book-btn__ico--light { background: #fff; color: var(--dark-1000); }
.book-btn__ico--light .icon { width: 28px; height: 28px; }
.book-btn__text {
  flex: 1 1 0; text-align: center;
  font-weight: 700; font-size: 18px; line-height: 28px;
  text-transform: uppercase; color: var(--dark-1000); letter-spacing: normal; }
.book-btn__arrow {
  width: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--light-1000); color: var(--dark-1000);
  border-radius: 0 8px 8px 0;
}
.book-btn__arrow .icon { width: 14px; height: 14px; }
.book-btn:hover .book-btn__main { background: #f0f0f0; }
.book-btn:hover .book-btn__arrow { background: #f0f0f0; }

/* Телефонный (ghost) вариант */
.book-btn--ghost .book-btn__main { background: var(--light-40); border-right-color: var(--light-80); }
.book-btn--ghost .book-btn__arrow { background: var(--light-40); color: var(--light-1000); }
.book-btn--ghost .book-btn__text--light { color: var(--light-1000); }
.book-btn--ghost:hover .book-btn__main,
.book-btn--ghost:hover .book-btn__arrow { background: var(--light-80); }

.modal__or { display: flex; align-items: center; gap: 24px; width: 100%; }
.modal__or-line { flex: 1 1 0; height: 0; border-top: 1px dashed var(--light-100); }
.modal__or-text { font-weight: 700; font-size: 16px; line-height: 28px; color: var(--light-1000); letter-spacing: normal; }
.modal__hr { width: 100%; height: 0; border-top: 1px dashed var(--light-100); }

/* ---------- Иконки-маски ---------- */
.icon--arrow-rr   { -webkit-mask-image: url('../../public/assets/icons/arrow-rr.svg');   mask-image: url('../../public/assets/icons/arrow-rr.svg'); }
.icon--arrow-ur   { -webkit-mask-image: url('../../public/assets/icons/arrow-ur.svg');   mask-image: url('../../public/assets/icons/arrow-ur.svg'); }
.icon--arrow-down { -webkit-mask-image: url('../../public/assets/icons/arrow-down.svg'); mask-image: url('../../public/assets/icons/arrow-down.svg'); }
.icon--call       { -webkit-mask-image: url('../../public/assets/icons/call.svg');       mask-image: url('../../public/assets/icons/call.svg'); }
.icon--menu       { -webkit-mask-image: url('../../public/assets/icons/menu.svg');       mask-image: url('../../public/assets/icons/menu.svg'); }

/* ============================================================
   АДАПТИВ — десктоп-планшет (769–1440px): пропорциональное
   масштабирование всей 1440-сцены (pixel-perfect не переписываем).
   --scale выставляет JS (innerWidth/1440), высота hero — тоже из JS.
   Фон (.hero__backdrop/.hero__shade) и звонилка вынесены из .stage,
   поэтому остаются на весь экран и не ужимаются.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1440px) {
  .hero { display: flex; flex-direction: column; align-items: center; }
  .stage {
    margin: 0; flex: none;
    transform: scale(var(--scale, 1));
    transform-origin: top center;
  }
}

/* ============================================================
   АДАПТИВ — мобильный hero (≤768px), Figma 477:601
   ============================================================ */
.hero__burger { display: none; }    /* десктоп: скрыт */

@media (max-width: 768px) {
  .stage {
    width: 100%; height: auto; margin: 0;
    display: flex; flex-direction: column; align-items: center;
    padding-bottom: 24px;
  }

  /* ---- фоновые слои: скруглённая карта с отступами 16px ---- */
  /* у <img> width:auto = интринсик (1440), а max-width:none убрал кап → задаём явные размеры */
  .hero__backdrop {
    left: 16px; top: 48px; right: auto; bottom: auto; transform: none;
    width: calc(100% - 32px); height: calc(100% - 64px);
    object-fit: cover; object-position: center top; border-radius: 24px;
  }
  .hero__pattern { display: none; }
  .hero__glow {
    left: 16px; right: 16px; top: auto; bottom: 16px; transform: none;
    width: auto; height: 600px; border-radius: 0 0 24px 24px;
  }
  .hero__glow img { object-position: center bottom; }

  /* ---- header: бургер | лого | PL ---- */
  .hero__header { position: static; order: 0; width: 100%; padding: 16px; align-items: center; }
  .nav { display: none; }
  .hero__burger {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: none;
    background: var(--light-80); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 8px; color: var(--light-1000);
  }
  .hero__burger .icon { width: 22px; height: 22px; }
  .hero__logo { width: 64px; height: 96px; }
  .hero__logo img { width: 64px; height: 96px; }
  .contacts { width: auto; min-width: 0; gap: 0; }   /* min-width:423 tylko desktop — na mobile zero, inaczej przełącznik języka wypada */
  .callinfo, .appt { display: none; }
  .lang, .lang__btn { width: 48px; height: 48px; }
  .lang__menu { width: 48px; }

  /* ---- разворачиваем обёртки в поток ---- */
  .hero__content, .hero__headline, .hero__intro, .hero__services { display: contents; }
  /* поднимаем контент над фоном/свечением (после display:contents z-index сбросился) */
  .hero__header, .h1, .hero__tagline, .hero__subheading, .btn-appt, .trust, .hero__scene { position: relative; z-index: 2; }

  /* ---- текст по центру ---- */
  .h1 {
    order: 1; box-sizing: border-box;
    width: 100%; max-width: 343px; padding: 0; transform: none; margin: 8px 0 0;
    font-size: 64px; line-height: 64px; text-align: center;
  }
  .hero__tagline { order: 2; justify-content: center; margin-top: 4px; }
  .hero__intro, .hero__subheading {
    order: 3; align-items: center;
  }
  .hero__subheading {
    width: 100%; max-width: 343px;
    font-size: 20px; line-height: 28px; letter-spacing: var(--ls-body); text-align: center;
    margin: 8px 0 0;
  }

  /* ---- CTA на всю ширину ---- */
  .hero__services-right { display: none; }      /* круг «Wszystkie usługi» — скрыт */
  .btn-appt { order: 4; width: 100%; max-width: 311px; height: 56px; margin-top: 24px; }
  .btn-appt__label { flex: 1 1 0; justify-content: center; }

  /* ---- бейдж доверия на всю ширину ---- */
  .trust { order: 5; width: 100%; max-width: 311px; height: 73px; margin-top: 16px; }
  .trust__main { flex: 1 1 0; border-radius: 12px; border-right: 0; }
  .trust__arrow { display: none; }

  /* ---- сцена (гараж+авто) внизу, одной картинкой ---- */
  .hero__scene {
    position: static; order: 10; transform: none; left: auto; top: auto;
    width: 116%; max-width: 470px; height: auto; margin-top: 8px;
  }
  .hero__scene-ref { display: block; opacity: 1; position: static; width: 100%; height: auto; }
  .hero__call { width: 60px; height: 60px; }
  .hero__call .icon { width: 24px; height: 24px; }
  .hero__layer--garage, .hero__layer--car { display: none; }

  /* ---- десктоп-меню скрыто (на мобиле — бургер) ---- */
  .mega { display: none; }
}
.icon--close      { -webkit-mask-image: url('../../public/assets/icons/icon-close.svg'); mask-image: url('../../public/assets/icons/icon-close.svg'); }
.icon--calendar   { -webkit-mask-image: url('../../public/assets/icons/icon-calendar.svg'); mask-image: url('../../public/assets/icons/icon-calendar.svg'); }

/* ============================================================
   АДАПТИВ — модалка записи на мобайле (≤768px), Figma 516:2090
   Та же модалка, на всю ширину, мельче шрифты/отступы.
   ============================================================ */
@media (max-width: 768px) {
  .modal { padding: 16px; align-items: center; }
  .modal__panel {
    width: 100%; max-height: calc(100vh - 32px);
    padding: 56px 16px 24px; gap: 24px; border-radius: 16px;   /* заголовок ниже — место под кнопку закрытия */
  }
  .modal__close { left: 16px; top: 16px; }
  .modal__head { gap: 16px; }
  .modal__title { font-size: 40px; line-height: 40px; }        /* Druk 40 (Figma 909:1563) */
  .modal__sub { font-size: 18px; line-height: 26px; max-width: 100%; }
  .modal__options { gap: 16px; }
  .book-group { gap: 12px; }
  .book-opt__label { font-size: 14px; line-height: 20px; padding: 0 8px; }

  .book-btn { height: 64px; }
  .book-btn__main { gap: 12px; padding: 4px 16px 4px 4px; }
  .book-btn__ico { width: 56px; height: 56px; }
  .book-btn__ico--booksy img { width: 56px; height: 56px; }
  .book-btn__ico--dark .icon { width: 28px; height: 28px; }
  .book-btn__ico--light .icon { width: 24px; height: 24px; }
  .book-btn__text { font-size: 15px; line-height: 20px; }
  .book-btn__arrow { width: 28px; }
  .book-btn__arrow .icon { width: 12px; height: 12px; }

  .modal__or { gap: 16px; }
  .modal__or-text { font-size: 15px; }
}