/* =========================================================
   FIXED + SCOPED CSS (без конфліктів між однаковими класами)
   Працює з твоїм HTML без змін.
   ========================================================= */

/* -------- Base Reset -------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { padding-left: 0; }
button, input, textarea { font: inherit; }

/* -------- Theme Tokens -------- */
:root{
  --bg: #000F2B;
  --bg-2: #00153D;
  --panel: rgba(217,250,255,.05);
  --panel-2: rgba(217,250,255,.03);
  --line: rgba(217,250,255,.18);
  --line-2: rgba(217,250,255,.10);
  --text: #D9FAFF;
  --muted: rgba(217,250,255,.78);
  --muted-2: rgba(217,250,255,.60);
  --cta: #D9FAFF;
  --cta-text: #000F2B;

  --radius: 14px;
  --radius-sm: 10px;

  --shadow: 0 10px 40px rgba(0,0,0,.35);
  --shadow-soft: 0 0 30px rgba(217,250,255,.10);

  --container: 1200px;
  --px: 20px;

  --header-h: 80px;
}

/* -------- Body -------- */
body.AbCdEfGhIjKl{
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* -------- Global containers (тільки розмір, без layout) -------- */
.YzAbCdEfGhIj,
.UvWxYzAbCdEf,
.KlMnOpQrStUv{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--px);
}

/* =========================================================
   HEADER + NAV (все СКОПОВАНО всередині header.MnOpQrStUvWx)
   ========================================================= */
header.MnOpQrStUvWx{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;
  background: rgba(0, 15, 43, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(217,250,255,.20);
}

header.MnOpQrStUvWx > .YzAbCdEfGhIj{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

header.MnOpQrStUvWx .KlMnOpQrStUv{
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
}

/* checkbox ONLY by id (щоб не ламати інші .WxYzAbCdEfGh) */
#burger-toggle{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* burger label (у тебе class="IjKlMnOpQrSt") */
header.MnOpQrStUvWx label.IjKlMnOpQrSt{
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(217,250,255,.18);
  background: rgba(217,250,255,.03);
}

header.MnOpQrStUvWx label.IjKlMnOpQrSt span{
  width: 26px;
  height: 2px;
  background: var(--text);
  display: block;
  border-radius: 2px;
}

header.MnOpQrStUvWx nav.UvWxYzAbCdEf ul.GhIjKlMnOpQr{
  list-style: none;
  display: flex;
  gap: 18px;
  align-items: center;
}

header.MnOpQrStUvWx nav.UvWxYzAbCdEf ul.GhIjKlMnOpQr a{
  text-decoration: none;
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  opacity: .92;
  transition: .2s;
}

header.MnOpQrStUvWx nav.UvWxYzAbCdEf ul.GhIjKlMnOpQr a:hover{
  opacity: 1;
  text-shadow: 0 0 12px rgba(217,250,255,.55);
}

/* =========================================================
   SECTIONS - base spacing
   ========================================================= */
main section{
  padding: 100px 0;
}

#SectionHeroBlock{
  padding: calc(var(--header-h) + 80px) 0 90px;
}

/* =========================================================
   HERO
   ========================================================= */

/* Quick links container: div.WxYzAbCdEfGh в Hero */
#SectionHeroBlock .WxYzAbCdEfGh{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

#SectionHeroBlock .WxYzAbCdEfGh a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(217,250,255,.22);
  background: rgba(217,250,255,.03);
  text-decoration: none;
  font-size: .82rem;
  color: var(--text);
  transition: .2s;
}

#SectionHeroBlock .WxYzAbCdEfGh a:hover{
  background: rgba(217,250,255,.10);
  border-color: rgba(217,250,255,.40);
}

/* Hero row: div.EfGhIjKlMnOp */
#SectionHeroBlock .EfGhIjKlMnOp{
  display: flex;
  align-items: center;
  gap: 52px;
}

/* image column: div.QrStUvWxYzAb > img */
#SectionHeroBlock .QrStUvWxYzAb{
  flex: 1;
}
#SectionHeroBlock .QrStUvWxYzAb img{
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(217,250,255,.10);
}

/* text column: div.OpQrStUvWxYz */
#SectionHeroBlock .OpQrStUvWxYz{
  flex: 1.2;
}

#SectionHeroBlock h1.AbCdEfGhIjKl{
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 18px;
}

#SectionHeroBlock p.MnOpQrStUvWx,
#SectionHeroBlock p.YzAbCdEfGhIj,
#SectionHeroBlock p.KlMnOpQrStUv{
  margin-bottom: 16px;
  font-size: 1.1rem;
  color: var(--muted);
}

/* CTA link: a.WxYzAbCdEfGh в Hero (щоб не ламати інші) */
#SectionHeroBlock a.WxYzAbCdEfGh{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border-radius: 10px;
  background: var(--cta);
  color: var(--cta-text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  transition: .2s;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

#SectionHeroBlock a.WxYzAbCdEfGh:hover{
  box-shadow: 0 0 22px rgba(217,250,255,.60);
  transform: translateY(-1px);
}

/* =========================================================
   REVIEWS
   ========================================================= */
#SectionReviews{
  background: rgba(217, 250, 255, 0.03);
}

#SectionReviews h2.GhIjKlMnOpQr{
  text-align: center;
  margin-bottom: 44px;
  font-size: 2.2rem;
  letter-spacing: .2px;
}

#SectionReviews .StUvWxYzAbCd{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* review cards: direct children blocks (у тебе різні класи на кожній картці) */
#SectionReviews .StUvWxYzAbCd > div{
  flex: 1;
  min-width: 250px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

#SectionReviews .StUvWxYzAbCd p{
  font-style: italic;
  margin-bottom: 16px;
  color: var(--muted);
}

#SectionReviews .StUvWxYzAbCd span{
  display: block;
  font-weight: 800;
  color: var(--muted-2);
}

/* =========================================================
   PRICE
   ========================================================= */
#SectionPrice h2.QrStUvWxYzAb{
  text-align: center;
  margin-bottom: 44px;
  font-size: 2.2rem;
}

/* cards grid wrapper: div.CdEfGhIjKlMn (в середині Price) */
#SectionPrice .CdEfGhIjKlMn{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: stretch;
}

/* price cards are the direct children of that wrapper */
#SectionPrice .CdEfGhIjKlMn > div{
  flex: 1;
  min-width: 260px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  box-shadow: 0 12px 34px rgba(0,0,0,.20);
}

#SectionPrice .CdEfGhIjKlMn > div:hover{
  transform: translateY(-6px);
  border-color: rgba(217,250,255,.45);
  background: rgba(217,250,255,.05);
}

/* headings inside cards */
#SectionPrice h3{
  margin-bottom: 12px;
  font-size: 1.2rem;
}

/* price number: second line div under h3 (в тебе різні класи) */
#SectionPrice .CdEfGhIjKlMn > div > div{
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 18px;
  color: var(--text);
}

/* lists */
#SectionPrice ul{
  list-style: none;
  text-align: left;
  margin-bottom: 22px;
}

#SectionPrice li{
  padding: 10px 0;
  border-bottom: 1px solid rgba(217,250,255,.08);
  color: var(--muted);
}

/* buttons: links inside cards */
#SectionPrice .CdEfGhIjKlMn a{
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(217,250,255,.55);
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: .2s;
  background: transparent;
  color: var(--text);
}

#SectionPrice .CdEfGhIjKlMn a:hover{
  background: var(--cta);
  color: var(--cta-text);
  box-shadow: 0 0 18px rgba(217,250,255,.55);
}

/* =========================================================
   FOR WHOM
   ========================================================= */
#SectionForWhom h2.StUvWxYzAbCd{
  font-size: 2rem;
  text-align: center;
  margin-bottom: 18px;
}

#SectionForWhom p.EfGhIjKlMnOp{
  max-width: 900px;
  margin: 0 auto 34px;
  text-align: center;
  color: var(--muted);
  font-size: 1.05rem;
}

/* inner layout: div.QrStUvWxYzAb > div.CdEfGhIjKlMn contains img + ul */
#SectionForWhom .QrStUvWxYzAb .CdEfGhIjKlMn{
  display: flex;
  gap: 44px;
  align-items: center;
}

#SectionForWhom img.OpQrStUvWxYz{
  width: 50%;
  border-radius: var(--radius);
  border: 1px solid rgba(217,250,255,.12);
  box-shadow: var(--shadow-soft);
}

#SectionForWhom ul.AbCdEfGhIjKl{
  list-style: none;
  width: 50%;
}

#SectionForWhom ul.AbCdEfGhIjKl li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--muted);
}

#SectionForWhom ul.AbCdEfGhIjKl li::before{
  content: "❄";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text);
  opacity: .9;
}

/* =========================================================
   EXPERT
   ========================================================= */
#SectionExpert{
  background: var(--bg-2);
}

#SectionExpert .KlMnOpQrStUv{
  display: flex;
  gap: 56px;
  align-items: center;
}

/* expert image: img.WxYzAbCdEfGh only inside SectionExpert */
#SectionExpert img.WxYzAbCdEfGh{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid rgba(217,250,255,.14);
  box-shadow: var(--shadow);
}

#SectionExpert blockquote.IjKlMnOpQrSt{
  font-size: 1.35rem;
  font-style: italic;
  color: var(--muted);
}

#SectionExpert cite.UvWxYzAbCdEf{
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-weight: 900;
  color: var(--text);
  font-size: 1.05rem;
}

/* =========================================================
   “NEW POSSIBILITIES” section (та, що без id після експерта)
   ========================================================= */
main > section.GhIjKlMnOpQr{
  padding: 90px 0;
}
main > section.GhIjKlMnOpQr .StUvWxYzAbCd{
  display: flex;
  gap: 50px;
  align-items: center;
}
main > section.GhIjKlMnOpQr h2.QrStUvWxYzAb{
  font-size: 2.1rem;
  margin-bottom: 18px;
}
main > section.GhIjKlMnOpQr ul.CdEfGhIjKlMn{
  list-style: none;
}
main > section.GhIjKlMnOpQr ul.CdEfGhIjKlMn li{
  margin: 10px 0;
  color: var(--muted);
}
main > section.GhIjKlMnOpQr img.AbCdEfGhIjKl{
  border-radius: var(--radius);
  border: 1px solid rgba(217,250,255,.10);
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   FAQ
   ========================================================= */
#SectionFAQ h2.KlMnOpQrStUv{
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 30px;
}

#SectionFAQ .WxYzAbCdEfGh details{
  background: rgba(217,250,255,.05);
  border: 1px solid rgba(217,250,255,.10);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}

#SectionFAQ .WxYzAbCdEfGh summary{
  padding: 18px 18px;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}
#SectionFAQ .WxYzAbCdEfGh summary::-webkit-details-marker{ display:none; }

#SectionFAQ .WxYzAbCdEfGh details > div{
  padding: 0 18px 18px;
  color: var(--muted);
}

/* =========================================================
   EXTRA TEXT SECTIONS (3 штуки після FAQ)
   ========================================================= */
main > section.QrStUvWxYzAb,
main > section.KlMnOpQrStUv,
main > section.EfGhIjKlMnOp{
  padding: 80px 0;
}

main > section.QrStUvWxYzAb h2,
main > section.KlMnOpQrStUv h2,
main > section.EfGhIjKlMnOp h2{
  font-size: 2rem;
  margin-bottom: 14px;
}

main > section.QrStUvWxYzAb p,
main > section.KlMnOpQrStUv p,
main > section.EfGhIjKlMnOp p{
  color: var(--muted);
  margin-bottom: 14px;
}

main > section.KlMnOpQrStUv ul.GhIjKlMnOpQr{
  list-style: none;
  margin: 14px 0 16px;
}
main > section.KlMnOpQrStUv ul.GhIjKlMnOpQr li{
  color: var(--muted);
  margin: 10px 0;
  padding-left: 22px;
  position: relative;
}
main > section.KlMnOpQrStUv ul.GhIjKlMnOpQr li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text);
  opacity: .9;
}

/* =========================================================
   FORM
   ========================================================= */
#SectionForm h2.WxYzAbCdEfGh{
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 10px;
}
#SectionForm p.IjKlMnOpQrSt{
  text-align: center;
  color: var(--muted);
  max-width: 900px;
  margin: 0 auto 26px;
}

#SectionForm form.UvWxYzAbCdEf{
  max-width: 720px;
  margin: 0 auto;
  background: rgba(217,250,255,.02);
  border: 1px solid rgba(217,250,255,.12);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

#SectionForm form.UvWxYzAbCdEf > div{
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#SectionForm label{
  font-weight: 700;
  color: var(--text);
  opacity: .92;
}

#SectionForm input[type="text"],
#SectionForm input[type="email"],
#SectionForm textarea{
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(217,250,255,.20);
  background: rgba(0,15,43,.45);
  color: var(--text);
  outline: none;
}

#SectionForm textarea{
  min-height: 150px;
  resize: vertical;
}

#SectionForm button.IjKlMnOpQrSt{
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  background: var(--cta);
  color: var(--cta-text);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  cursor: pointer;
  transition: .2s;
}

#SectionForm button.IjKlMnOpQrSt:hover{
  box-shadow: 0 0 20px rgba(217,250,255,.60);
  transform: translateY(-1px);
}

#SectionForm .KlMnOpQrStUv label.WxYzAbCdEfGh{
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  color: var(--muted);
}

#SectionForm .KlMnOpQrStUv a{
  color: var(--text);
  text-decoration: underline;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.UvWxYzAbCdEf{
  background: #000511;
  padding: 56px 0;
  border-top: 1px solid rgba(217,250,255,.08);
  text-align: center;
}

footer.UvWxYzAbCdEf p{
  color: var(--muted);
  margin-bottom: 8px;
}

footer.UvWxYzAbCdEf a{
  color: rgba(217,250,255,.70);
  text-decoration: none;
}
footer.UvWxYzAbCdEf a:hover{
  color: var(--text);
  text-decoration: underline;
}

footer.UvWxYzAbCdEf .QrStUvWxYzAb{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px){
  #SectionHeroBlock .EfGhIjKlMnOp{ flex-direction: column; gap: 30px; }
  #SectionHeroBlock h1.AbCdEfGhIjKl{ font-size: 2.2rem; }
  #SectionForWhom .QrStUvWxYzAb .CdEfGhIjKlMn{ flex-direction: column; }
  #SectionForWhom img.OpQrStUvWxYz, #SectionForWhom ul.AbCdEfGhIjKl{ width: 100%; }
  #SectionExpert .KlMnOpQrStUv{ flex-direction: column; text-align: center; }
}

@media (max-width: 768px){
  /* burger visible */
  header.MnOpQrStUvWx label.IjKlMnOpQrSt{ display: flex; }

  /* nav becomes dropdown */
  header.MnOpQrStUvWx nav.UvWxYzAbCdEf{
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: rgba(0,15,43,.98);
    border-bottom: 1px solid rgba(217,250,255,.14);
    padding: 18px var(--px) 22px;
  }

  header.MnOpQrStUvWx nav.UvWxYzAbCdEf ul.GhIjKlMnOpQr{
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  #burger-toggle:checked ~ nav.UvWxYzAbCdEf{ display: block; }

  main > section.GhIjKlMnOpQr .StUvWxYzAbCd{ flex-direction: column; }
}