/* ===============================
   RESET + BASE
================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.AbCdEfGhIjKl{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0b0f14;
  color: #e6edf3;
  line-height: 1.65;
  overflow-x: hidden;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

a{ color: inherit; }

:root{
  --bg: #0b0f14;
  --bg2:#0f141b;
  --card:#111821;
  --card2:#101720;
  --text:#e6edf3;
  --muted:#b6c2cf;
  --muted2:#c4d0db;
  --line: rgba(255,255,255,.06);
  --line2: rgba(255,255,255,.10);
  --accent:#7ee787;
  --accent2:#4ade80;
  --radius: 16px;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* ===============================
   GLOBAL CONTAINER (БЕЗ КОНФЛІКТІВ)
   Не стилізуємо пачку класів одразу, бо вони в HTML
   використовуються в різних ролях.
================================ */
header > .YzAbCdEfGhIj,
main.KlMnOpQrStUv,
footer.StUvWxYzAbCd > .EfGhIjKlMnOp,
section > .IjKlMnOpQrSt,
section > .StUvWxYzAbCd,
section > .OpQrStUvWxYz,
section > .KlMnOpQrStUv,
section > .QrStUvWxYzAb,
section > .CdEfGhIjKlMn,
section > .MnOpQrStUvWx,
section > .EfGhIjKlMnOp{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===============================
   HEADER + NAV
================================ */
header.MnOpQrStUvWx{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(10,14,20,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

header.MnOpQrStUvWx > .YzAbCdEfGhIj{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
}

header .KlMnOpQrStUv{
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .4px;
}

/* desktop nav */
header nav.UvWxYzAbCdEf{
  display: block;
}

header nav.UvWxYzAbCdEf ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

header nav.UvWxYzAbCdEf a{
  text-decoration: none;
  color: #c9d1d9;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: .2s ease;
  border: 1px solid transparent;
}

header nav.UvWxYzAbCdEf a:hover{
  color: var(--accent);
  border-color: rgba(126,231,135,.22);
  background: rgba(126,231,135,.06);
}

/* burger toggle (твоя розмітка: input#nav-toggle + label + nav) */
#nav-toggle{
  display: none;
}

header label.IjKlMnOpQrSt{
  display: none; /* показуємо в mobile */
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: rgba(255,255,255,.03);
}

header label.IjKlMnOpQrSt span{
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  opacity: .9;
}

/* ===============================
   MAIN / SECTIONS
================================ */
main.KlMnOpQrStUv{ padding-bottom: 30px; }

section{ padding: 74px 0; }

section h2{
  margin: 0 0 18px;
  font-size: 30px;
  line-height: 1.2;
}

section p{
  margin: 0 0 14px;
  color: var(--muted);
}

/* ===============================
   HERO
================================ */
section#SectionHeroAnchor{
  padding: 78px 0 56px;
}

#SectionHeroAnchor .UvWxYzAbCdEf{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

#SectionHeroAnchor .UvWxYzAbCdEf a{
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: #dbe6ef;
  font-size: 14px;
  transition: .2s ease;
}

#SectionHeroAnchor .UvWxYzAbCdEf a:hover{
  border-color: rgba(126,231,135,.25);
  background: rgba(126,231,135,.06);
  color: var(--accent);
}

/* дві колонки hero */
#SectionHeroAnchor .CdEfGhIjKlMn{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}

#SectionHeroAnchor h1.YzAbCdEfGhIj{
  margin: 0 0 16px;
  font-size: 44px;
  line-height: 1.1;
}

#SectionHeroAnchor .MnOpQrStUvWx p{ color: var(--muted); }

#SectionHeroAnchor .MnOpQrStUvWx a.UvWxYzAbCdEf{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  text-decoration: none;
  color: #06210f;
  font-weight: 800;
  padding: 14px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  border: 0;
  box-shadow: 0 14px 40px rgba(126,231,135,.18);
  transition: .2s ease;
}

#SectionHeroAnchor .MnOpQrStUvWx a.UvWxYzAbCdEf:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(126,231,135,.26);
}

/* ===============================
   REVIEWS
================================ */
#SectionReviewsAnchor{
  background: var(--bg2);
}

#SectionReviewsAnchor h2{
  text-align: center;
  margin-bottom: 34px;
}

/* сітка відгуків */
#SectionReviewsAnchor .QrStUvWxYzAb .CdEfGhIjKlMn{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

#SectionReviewsAnchor .QrStUvWxYzAb .CdEfGhIjKlMn > div{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

#SectionReviewsAnchor p{ color: var(--muted2); }
#SectionReviewsAnchor span{ color: #9fb0c0; }

/* ===============================
   PRICING
================================ */
#SectionPriceAnchor .OpQrStUvWxYz > h2{
  text-align: center;
  margin-bottom: 26px;
}

#SectionPriceAnchor .MnOpQrStUvWx{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

#SectionPriceAnchor .MnOpQrStUvWx > div{
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: none;
  transition: .2s ease;
}

#SectionPriceAnchor .MnOpQrStUvWx > div:hover{
  transform: translateY(-4px);
  border-color: rgba(126,231,135,.28);
}

#SectionPriceAnchor h3{ margin: 0 0 10px; }
#SectionPriceAnchor ul{ margin: 14px 0 0; padding-left: 18px; }
#SectionPriceAnchor li{ margin-bottom: 8px; color: var(--muted); }

#SectionPriceAnchor a{
  display: inline-flex;
  justify-content: center;
  margin-top: 14px;
  text-decoration: none;
  background: rgba(126,231,135,.12);
  border: 1px solid rgba(126,231,135,.25);
  color: var(--accent);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  transition: .2s ease;
}

#SectionPriceAnchor a:hover{
  background: rgba(126,231,135,.18);
}

/* ===============================
   TARGET
================================ */
#SectionTargetAnchor .KlMnOpQrStUv{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 34px;
  align-items: start;
}

#SectionTargetAnchor .KlMnOpQrStUv img{
  border-radius: 18px;
  box-shadow: var(--shadow);
}

#SectionTargetAnchor ul{
  margin: 12px 0 0;
  padding-left: 18px;
}
#SectionTargetAnchor li{ margin-bottom: 10px; color: var(--muted); }

/* ===============================
   EXPERT QUOTE
================================ */
#SectionExpertAnchor{
  background: var(--bg2);
}

#SectionExpertAnchor blockquote.OpQrStUvWxYz{
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 18px;
  padding: 30px;
  box-shadow: var(--shadow);
  font-size: 18px;
}

#SectionExpertAnchor cite{
  display: block;
  margin-top: 18px;
  color: #9fb0c0;
}

/* ===============================
   BENEFITS
================================ */
#SectionBenefitsAnchor .KlMnOpQrStUv{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items: center;
}

#SectionBenefitsAnchor ul{
  margin: 12px 0 0;
  padding-left: 18px;
}
#SectionBenefitsAnchor li{ margin-bottom: 10px; color: var(--muted); }

/* ===============================
   TEXT SECTIONS (3 блоки)
================================ */
section.EfGhIjKlMnOp,
section.CdEfGhIjKlMn,
section.AbCdEfGhIjKl{
  background: transparent;
}

section.EfGhIjKlMnOp ul,
section.AbCdEfGhIjKl ol{
  margin: 12px 0 0;
  padding-left: 18px;
}

section.EfGhIjKlMnOp li,
section.AbCdEfGhIjKl li{
  margin-bottom: 10px;
  color: var(--muted);
}

/* ===============================
   FAQ
================================ */
#SectionFaqAnchor .IjKlMnOpQrSt{
  display: grid;
  gap: 12px;
}

#SectionFaqAnchor details{
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}

#SectionFaqAnchor summary{
  cursor: pointer;
  font-weight: 800;
  color: #dbe6ef;
}

#SectionFaqAnchor details p{
  margin-top: 10px;
  color: var(--muted);
}

/* ===============================
   FORM
================================ */
#SectionContactAnchor form.YzAbCdEfGhIj{
  margin-top: 22px;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
}

#SectionContactAnchor label{
  display: block;
  margin-bottom: 8px;
  color: #d5dee7;
  font-weight: 700;
  font-size: 14px;
}

#SectionContactAnchor input,
#SectionContactAnchor textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: #0c1218;
  color: var(--text);
  outline: none;
}

#SectionContactAnchor input:focus,
#SectionContactAnchor textarea:focus{
  border-color: rgba(126,231,135,.45);
  box-shadow: 0 0 0 4px rgba(126,231,135,.10);
}

#SectionContactAnchor .UvWxYzAbCdEf{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#SectionContactAnchor .UvWxYzAbCdEf input{
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

#SectionContactAnchor .UvWxYzAbCdEf a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(126,231,135,.45);
}
#SectionContactAnchor .UvWxYzAbCdEf a:hover{
  border-bottom-color: transparent;
}

#SectionContactAnchor button.GhIjKlMnOpQr{
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  border: 0;
  color: #06210f;
  font-weight: 900;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: .2s ease;
}

#SectionContactAnchor button.GhIjKlMnOpQr:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(126,231,135,.22);
}

/* ===============================
   FOOTER
================================ */
footer.StUvWxYzAbCd{
  background: #070b10;
  border-top: 1px solid var(--line);
  padding: 36px 0;
  text-align: center;
}

footer.StUvWxYzAbCd p{
  margin: 8px 0;
  color: #b8c4cf;
}

footer.StUvWxYzAbCd .AbCdEfGhIjKl{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 12px;
}

footer.StUvWxYzAbCd a{
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(126,231,135,.18);
  background: rgba(126,231,135,.06);
}

footer.StUvWxYzAbCd a:hover{
  background: rgba(126,231,135,.10);
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 980px){
  #SectionHeroAnchor .CdEfGhIjKlMn{ grid-template-columns: 1fr; }
  #SectionTargetAnchor .KlMnOpQrStUv{ grid-template-columns: 1fr; }
  #SectionBenefitsAnchor .KlMnOpQrStUv{ grid-template-columns: 1fr; }

  #SectionReviewsAnchor .QrStUvWxYzAb .CdEfGhIjKlMn{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #SectionPriceAnchor .MnOpQrStUvWx{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  header label.IjKlMnOpQrSt{ display: flex; }

  /* ховаємо nav по дефолту в мобільному */
  header nav.UvWxYzAbCdEf{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    background: rgba(11,15,20,.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 14px 20px 18px;
  }

  header nav.UvWxYzAbCdEf ul{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* відкриття меню */
  #nav-toggle:checked ~ nav.UvWxYzAbCdEf{
    display: block;
  }

  #SectionHeroAnchor h1.YzAbCdEfGhIj{ font-size: 36px; }

  #SectionReviewsAnchor .QrStUvWxYzAb .CdEfGhIjKlMn{
    grid-template-columns: 1fr;
  }

  #SectionPriceAnchor .MnOpQrStUvWx{
    grid-template-columns: 1fr;
  }
}