/* ═══════════════════════════════════════════════════════════
   ETAP 2 — КРАСИВІ ФОНИ ДЛЯ ВСІХ СЕКЦІЙ + ВИПРАВЛЕННЯ
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   STICKY МЕНЮ ЗАВЖДИ ПОВЕРХ ВСЬОГО
═══════════════════════════════════════ */
.kb-nav{
  z-index:9999 !important;
  position:sticky !important;
  top:0 !important;
  background:#fff !important;
}
.kb-nav.scrolled{
  box-shadow:0 4px 20px rgba(0,0,0,.15) !important;
}

/* Усі секції — нижче меню */
.i-hero,.i-adv,.i-svc,.i-pr,.i-cert,.i-rev,.i-faq,.i-map,.i-form-s,.i-foot,
.ifbti-hero,.ifbti-adv,.ifbti-svc,.ifbti-pr,.ifbti-certs,.ifbti-rev,.ifbti-faq{
  z-index:1 !important;
  position:relative;
}

/* Псевдоелементи секцій ще нижче */
.i-cert::before,.i-cert::after,
.i-rev::before,.i-rev::after,
.i-faq::before,.i-faq::after,
.i-form-s::before,.i-form-s::after,
.i-hero::before,.i-hero::after,
.i-pr::before,.i-pr::after,
.i-svc::before,
.i-map::before,.i-map::after,
.i-foot::before,.i-foot::after{
  z-index:0 !important;
}


/* ═══════════════════════════════════════
   ЗАМІНА $ НА ₴ ГЛОБАЛЬНО
═══════════════════════════════════════ */
/* Якщо десь є HTML-текст з $ біля ціни */
[data-currency="dollar"],
.currency-dollar{
  font-size:0 !important;
}
[data-currency="dollar"]::before,
.currency-dollar::before{
  content:'₴' !important;
  font-size:1rem;
  font-weight:inherit;
  color:inherit;
}

/* Якщо в SVG є <text>$</text> — приховуємо і додаємо ₴ */
svg text[data-symbol="dollar"]{
  display:none;
}


/* ═══════════════════════════════════════
   HERO — анімований градієнт + фігури
═══════════════════════════════════════ */
.i-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#1a1668 0%,#2d2486 40%,#4338a8 100%) !important;
  padding:80px 0 100px !important;
}
.i-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 15% 20%,rgba(245,196,0,.22),transparent 30%),
    radial-gradient(ellipse at 85% 80%,rgba(115,96,242,.18),transparent 35%);
  pointer-events:none;
}
.i-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  opacity:.5;
}
.i-hero .iw{position:relative;z-index:3}


/* ═══════════════════════════════════════
   ПЕРЕВАГИ
═══════════════════════════════════════ */
.i-adv{
  background:linear-gradient(180deg,#fff 0%,#f8f9fd 100%) !important;
  padding:30px 0;
  border-bottom:1px solid #eaeaf0;
  position:relative;
  overflow:hidden;
}
.i-adv::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#2d2486 0%,#f5c400 50%,#2d2486 100%);
}


/* ═══════════════════════════════════════
   ПОСЛУГИ — світлий з точковою сіткою
═══════════════════════════════════════ */
.i-svc{
  position:relative;
  padding:90px 0;
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#f5f6fc 100%) !important;
}
.i-svc-bg{display:none !important}
.i-svc::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,#d4d6e8 1px,transparent 1px);
  background-size:30px 30px;
  opacity:.4;
  pointer-events:none;
}
.i-svc .iw{position:relative;z-index:2}


/* ═══════════════════════════════════════
   ЦІНИ — багатий темний градієнт
═══════════════════════════════════════ */
.i-pr{
  position:relative;
  padding:90px 0;
  overflow:hidden;
  background:linear-gradient(135deg,#0e0c3d 0%,#1a1668 40%,#2d2486 75%,#3d2a8e 100%) !important;
}
.i-pr-bg{display:none !important}
.i-pr::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(ellipse at 20% 30%,rgba(245,196,0,.18),transparent 35%),
    radial-gradient(ellipse at 80% 70%,rgba(115,96,242,.22),transparent 40%);
  pointer-events:none;
}
.i-pr::after{
  content:'₴';
  position:absolute;
  top:50%;right:-80px;
  transform:translateY(-50%);
  font-size:600px;
  font-weight:900;
  color:rgba(245,196,0,.05);
  pointer-events:none;
  line-height:1;
  font-family:Arial,sans-serif;
}
.i-pr .iw{position:relative;z-index:2}


/* ═══════════════════════════════════════
   СЕРТИФІКАТИ
═══════════════════════════════════════ */
.i-cert{
  position:relative;
  padding:90px 0;
  overflow:hidden;
  background:linear-gradient(135deg,#fffdf5 0%,#fff8e7 50%,#fffdf5 100%) !important;
}
.i-cert::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(245,196,0,.12) 0%,transparent 30%),
    radial-gradient(circle at 80% 70%,rgba(245,196,0,.08) 0%,transparent 30%);
  pointer-events:none;
}
.i-cert::after{
  content:'';
  position:absolute;
  top:10%;right:5%;
  width:120px;height:120px;
  background:linear-gradient(135deg,#f5c400,transparent);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  opacity:.1;
  pointer-events:none;
}
.i-cert .iw{position:relative;z-index:2}


/* ═══════════════════════════════════════
   ВІДГУКИ — темний фіолетовий з зірками
═══════════════════════════════════════ */
.i-rev{
  position:relative;
  padding:90px 0;
  overflow:hidden;
  background:linear-gradient(135deg,#16145a 0%,#2d2486 50%,#16145a 100%) !important;
}
.i-rev::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 10% 20%,rgba(245,196,0,.15),transparent 30%),
    radial-gradient(circle at 90% 80%,rgba(115,96,242,.2),transparent 30%);
  pointer-events:none;
}
.i-rev::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%,rgba(245,196,0,.4),transparent),
    radial-gradient(2px 2px at 60% 70%,rgba(245,196,0,.3),transparent),
    radial-gradient(1px 1px at 50% 50%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 80% 10%,rgba(255,255,255,.4),transparent),
    radial-gradient(2px 2px at 15% 80%,rgba(245,196,0,.3),transparent);
  background-size:300px 300px,250px 250px,180px 180px,220px 220px,280px 280px;
  pointer-events:none;
  opacity:.6;
}
.i-rev .iw{position:relative;z-index:2}
.i-rev .ih h2{color:#fff !important}
.i-rev .ih p{color:#c0c0e0 !important}
.i-rev .ih .iln{background:linear-gradient(90deg,#f5c400,rgba(245,196,0,.25)) !important}


/* ═══════════════════════════════════════
   FAQ — світло-блакитний
═══════════════════════════════════════ */
.i-faq{
  position:relative;
  padding:90px 0;
  overflow:hidden;
  background:linear-gradient(180deg,#f0f4fc 0%,#e8eef9 100%) !important;
}
.i-faq::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 0% 0%,rgba(45,36,134,.04) 0%,transparent 50%),
    radial-gradient(circle at 100% 100%,rgba(115,96,242,.06) 0%,transparent 50%);
  pointer-events:none;
}
.i-faq .iw{position:relative;z-index:2}


/* ═══════════════════════════════════════
   КАРТА
═══════════════════════════════════════ */
.i-map{
  position:relative;
  padding:90px 0;
  overflow:hidden;
  background:linear-gradient(135deg,#f5f6fc 0%,#eef0f9 60%,#f5f6fc 100%) !important;
}
.i-map::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:300px;height:300px;
  background:linear-gradient(135deg,rgba(45,36,134,.08),transparent);
  clip-path:polygon(0 0,100% 0,0 100%);
  pointer-events:none;
}
.i-map::after{
  content:'';
  position:absolute;
  bottom:0;right:0;
  width:300px;height:300px;
  background:linear-gradient(315deg,rgba(245,196,0,.1),transparent);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  pointer-events:none;
}
.i-map .iw{position:relative;z-index:2}


/* ═══════════════════════════════════════
   ФОРМА
═══════════════════════════════════════ */
.i-form-s{
  position:relative;
  padding:90px 0;
  overflow:hidden;
  background:linear-gradient(135deg,#16145a 0%,#2d2486 50%,#4338a8 100%) !important;
}
.i-form-s::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(245,196,0,.18),transparent 35%),
    radial-gradient(circle at 80% 80%,rgba(115,96,242,.22),transparent 35%);
  pointer-events:none;
}
.i-form-s::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(3px 3px at 15% 25%,rgba(245,196,0,.35),transparent),
    radial-gradient(2px 2px at 75% 70%,rgba(255,255,255,.3),transparent),
    radial-gradient(2px 2px at 45% 85%,rgba(245,196,0,.25),transparent),
    radial-gradient(4px 4px at 90% 30%,rgba(115,96,242,.4),transparent);
  background-size:400px 400px,350px 350px,300px 300px,450px 450px;
  pointer-events:none;
  opacity:.7;
}
.i-form-s .iw{position:relative;z-index:2}


/* ═══════════════════════════════════════
   ФУТЕР
═══════════════════════════════════════ */
.i-foot{
  position:relative;
  background:linear-gradient(180deg,#0a0928 0%,#0d0c35 50%,#0a0928 100%) !important;
  color:#d7daf5;
  padding:60px 0 24px;
  overflow:hidden;
}
.i-foot::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#2d2486 0%,#f5c400 50%,#2d2486 100%);
}
.i-foot .iw{position:relative;z-index:2}


/* ═══════════════════════════════════════
   АДАПТИВ
═══════════════════════════════════════ */
@media(max-width:768px){
  .i-hero{padding:60px 0 70px !important}
  .i-svc,.i-pr,.i-cert,.i-rev,.i-faq,.i-map,.i-form-s{padding:60px 0 !important}
  .i-pr::after{font-size:300px;right:-40px}
}


/* ═══════════════════════════════════════════════════════════
   ВИПРАВЛЕННЯ: МЕНЮ ЗАВЖДИ ПОВЕРХ ВСІХ СЕКЦІЙ
   ═══════════════════════════════════════════════════════════ */

/* 1. Sticky-меню — максимальний z-index */
.kb-nav,
.kb-nav.scrolled,
#kb-nav,
div.kb-nav,
.bti-nav-wrap{
  z-index:99999 !important;
  position:sticky !important;
  top:0 !important;
  background:#fff !important;
  isolation:isolate; /* створює новий контекст стекування */
}

/* 2. УСІ СЕКЦІЇ — обов'язково нижче меню */
main,
main#ifbti-main,
.i-hero,
.i-adv,
.i-svc,
.i-pr,
.i-cert,
.i-rev,
.i-faq,
.i-map,
.i-form-s,
.i-foot,
section,
footer,
.ifbti-hero,
.ifbti-adv,
.ifbti-svc,
.ifbti-pr,
.ifbti-certs,
.ifbti-rev,
.ifbti-faq{
  z-index:1 !important;
}

/* 3. Скидаємо position relative якщо треба */
main#ifbti-main{
  position:relative;
  z-index:1 !important;
}

/* 4. Псевдоелементи (фони, водяні знаки) — найнижче */
.i-hero::before,.i-hero::after,
.i-svc::before,.i-svc::after,
.i-pr::before,.i-pr::after,
.i-cert::before,.i-cert::after,
.i-rev::before,.i-rev::after,
.i-faq::before,.i-faq::after,
.i-map::before,.i-map::after,
.i-form-s::before,.i-form-s::after,
.i-foot::before,.i-foot::after,
.i-adv::before{
  z-index:0 !important;
}

/* 5. Контент всередині секцій (.iw) — над псевдоелементами але під меню */
.i-hero .iw,
.i-svc .iw,
.i-pr .iw,
.i-cert .iw,
.i-rev .iw,
.i-faq .iw,
.i-map .iw,
.i-form-s .iw,
.i-foot .iw,
.i-adv .iw{
  position:relative;
  z-index:2 !important;
}

/* 6. Додаткова перевірка для скрол-меню */
body.scrolled .kb-nav,
.kb-nav.scrolled{
  box-shadow:0 4px 20px rgba(0,0,0,.15) !important;
  background:#fff !important;
}



/* ═══════════════════════════════════════════════════════════
   ОСТАТОЧНЕ ВИПРАВЛЕННЯ: FIXED МЕНЮ
   ═══════════════════════════════════════════════════════════ */

/* Меню - position fixed, завжди вгорі */
html body .kb-nav,
html body #kb-nav,
html body div.kb-nav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:2147483647 !important;
  background:#ffffff !important;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

/* Скидаємо sticky якщо було */
.kb-nav.sticky,
.kb-nav{
  position:fixed !important;
}

/* Компенсуємо висоту меню — додаємо відступ зверху до body */
body{
  padding-top:58px !important;
}

/* На мобільних меню може бути іншої висоти */
@media(max-width:768px){
  body{
    padding-top:60px !important;
  }
}

/* Всі секції — нижче меню */
section,
.i-hero,.i-adv,.i-svc,.i-pr,.i-cert,.i-rev,.i-faq,.i-map,.i-form-s,.i-foot,
footer{
  position:relative;
  z-index:1 !important;
}

/* Псевдоелементи секцій */
section::before,section::after,
.i-cert::before,.i-cert::after,
.i-rev::before,.i-rev::after,
.i-faq::before,.i-faq::after{
  z-index:0 !important;
}

/* Скидаємо isolation і contain якщо було */
main,
#ifbti-main,
#page,
.site{
  isolation:auto !important;
  contain:none !important;
  transform:none !important;
  filter:none !important;
}