/* ===== VST custom (поверх Webflow) ===== */

/* Задача 1: liquid glass подложка меню при скролле.
   Класс .nav-active вешает assets/js/slater/58006.js (Navigation) */
.nav {
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav.nav-active {
  background: rgba(255, 255, 255, .55) !important;
  background-color: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
  backdrop-filter: blur(22px) saturate(1.8) !important;
  box-shadow: 0 6px 24px rgba(20, 20, 43, .08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .4) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.nav-active { background: rgba(255, 255, 255, .94); }
}
/* тёмная тема ОС не должна ломать читаемость — фон остаётся светлым, как весь сайт */

/* Задача 5: приглушить фоновое видео hero — мягче, не такое явное */
.w-background-video video {
  filter: saturate(.5) brightness(.8) contrast(.95);
}
/* лёгкая вуаль поверх видео (под контентом) */
.w-background-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,12,34,.30), rgba(24,12,34,.16));
  pointer-events: none;
  z-index: 1;
}
.w-background-video { position: relative; }
.w-background-video > *:not(video) { position: relative; z-index: 2; }
/* фирменный градиент поверх — слегка ослабить, чтобы видео не «кричало» */
.hero-bg-gd { opacity: .82; }

/* Главная: компактный hero — быстрее скролл до цен (только страница главной) */
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block,
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block__img {
  min-height: 0 !important;
  height: auto !important;
}
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block__container {
  padding-top: 120px !important;
  padding-bottom: 48px !important;
  min-height: 0 !important;
}
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block__title {
  font-size: clamp(28px, 2.8vw, 40px) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
@media (max-width: 991px) {
  html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block__title { white-space: normal; }
}
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block__txt-w {
  max-width: 1000px !important;
}
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block__desc {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* Задача 11: подсветка активного раздела в меню */
.nav .nav__link.w--current .nav__link-txt,
.nav .nav__link.w--current {
  color: #e6007e !important;
  font-weight: 600;
}
.nav .nav__d-drop-link.w--current {
  color: #e6007e !important;
  font-weight: 600;
}
/* если активная страница внутри дропдауна — подсветить и его тогл */
.nav .nav__d-link:has(.w--current) .nav__link-txt {
  color: #e6007e;
  font-weight: 600;
}

/* Задача 12: аккуратный выпадающий блок меню */
.nav .nav__d-drop {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  border-radius: 16px;
  border: 1px solid rgba(107, 4, 207, .08);
  box-shadow: 0 18px 44px rgba(31, 15, 55, .14), 0 2px 8px rgba(31, 15, 55, .06);
  overflow: visible;
  margin-top: 8px;
  min-width: 240px;
  animation: vstDropIn .22s cubic-bezier(.3, .9, .3, 1);
}
@keyframes vstDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* невидимый мостик — ховер не срывается в зазоре между пунктом и меню */
.nav .nav__d-drop::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
.nav .nav__d-drop-list {
  padding: 8px;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}
.nav .nav__d-drop-link {
  border-radius: 10px;
  padding: 10px 14px;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav .nav__d-drop-link:hover {
  background: rgba(107, 4, 207, .07);
  color: #6b04cf;
  padding-left: 18px;
}

/* (3) hero главной ещё компактнее: высота = текст + отступы */
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block__container {
  padding-top: 40px !important;
  padding-bottom: 130px !important; /* карточки цен наезжают на низ блока */
  justify-content: center !important;
  min-height: 0 !important;
}
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block {
  padding-top: 84px !important; /* под фиксированное меню */
  padding-bottom: 0 !important;
}

/* (8) «Більше ніж просто АЗС»: цены временно скрыты (только главная) */
html[data-wf-page="69a41d8a17a33608a04c0aee"] .product-promo__price-w { display: none !important; }

/* (10) отступ между серым блоком футера и низом страницы = 48px (24 паддинг + 24 марджин) */
.footer { margin-bottom: 24px; }

/* (11) живой градиент в hero — эффект «эмбеда» */
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-bg-gd {
  background: linear-gradient(115deg, #ff7a18, #ff2d78 30%, #c437ff 62%, #ff7a18 95%) !important;
  background-size: 320% 320% !important;
  animation: vstGradientShift 16s ease-in-out infinite;
  opacity: .85;
}
@keyframes vstGradientShift {
  0%   { background-position: 0% 40%; }
  50%  { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}


/* сабтайтл hero без тени (по фидбеку) */
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block__desc {
  text-shadow: none;
  font-weight: 500;
}


/* Ambilight-подсветка hero-блока на фоне страницы */
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block {
  position: relative;
  z-index: 0;
}
html[data-wf-page="69a41d8a17a33608a04c0aee"] .hero-block::before {
  content: "";
  position: absolute;
  inset: 48px -12px 6px -12px; /* свечение только по бокам, сверху фон белый */
  border-radius: 44px;
  background: linear-gradient(115deg, #ff7a18, #ff2d78 30%, #c437ff 62%, #ff7a18 95%);
  background-size: 320% 320%;
  filter: blur(24px);
  opacity: .2;
  z-index: -1;
  animation: vstGradientShift 16s ease-in-out infinite;
  pointer-events: none;
}

/* «Про VST в цифрах»: фиксированная высота — контент ниже не скачет */
.numbers-w {
  min-height: 250px;
}
@media (max-width: 767px) {
  .numbers-w { min-height: 300px; }
}
.numbers-w .numbers-track { align-items: flex-start; }



/* Hero подстраниц: высота как на главной, текст по центру */
.section-hero.sub-page .hero-block.is-sub-page {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 84px !important;
  padding-bottom: 0 !important;
}
.section-hero.sub-page .hero-block__container {
  min-height: 0 !important;
  padding-top: 56px !important;
  padding-bottom: 64px !important;
  justify-content: center !important;
}
.section-hero.sub-page .hero-block__title {
  font-size: clamp(28px, 2.8vw, 40px) !important;
  line-height: 1.2 !important;
}
.section-hero.sub-page .hero-block__desc {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* Чекбоксы фильтров карьеры: убрать серую обводку */
.filter-check .w-checkbox-input {
  border: 1px solid #efe9f4 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* «Особистий кабінет»: родной градиент кнопки (обводка через padding),
   на ховере градиент медленно течёт по обводке; без свечения */
.nav__btn-w .button-p,
.footer-btn-w .button-p {
  background-image: linear-gradient(135deg, #f60, #f06 26%, #9731ff 51%, #f06 76%, #f60) !important;
  background-size: 300% 300% !important;
  background-position: 0% 50%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.nav__btn-w .button-p:hover,
.footer-btn-w .button-p:hover {
  animation: vstBorderFlow 5s linear infinite;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(151, 49, 255, .15);
}
@keyframes vstBorderFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}