:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --soft:#0b3b48;
  --card:#0b2430;
  --text:#e5e7eb;
  --muted:#cbd5e1;
  --sub:#94a3b8;
  --accent:#22c55e;
  --accent2:#38bdf8;
  --danger:#ff5a4f;
  --border:rgba(148,163,184,.18);
  --shadow:0 20px 45px rgba(2,6,23,.35);
  --radius:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1100px 700px at 18% 10%, rgba(56,189,248,.18), transparent 60%),
             radial-gradient(900px 500px at 85% 20%, rgba(34,197,94,.14), transparent 62%),
             var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
img{max-width:100%;height:auto;display:block}

.wrap{width:min(1120px, calc(100% - 32px)); margin:0 auto;}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,32,.8);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand__dot{width:12px;height:12px;border-radius:50%; background:linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow:0 0 0 6px rgba(56,189,248,.12)}
.brand__name{font-weight:700; letter-spacing:.2px; font-size:18px}

.topbar__nav{display:flex; align-items:center; gap:18px;}
.topbar__nav a{font-size:14px; color:rgba(226,232,240,.92); text-decoration:none; padding:8px 10px; border-radius:12px;}
.topbar__nav a:hover{background:rgba(148,163,184,.10)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:16px; padding:12px 16px; font-weight:700; border:1px solid transparent; text-decoration:none; cursor:pointer;}
.btn--primary{background:linear-gradient(135deg, var(--accent2), var(--accent)); color:#06121a; box-shadow:0 16px 28px rgba(34,197,94,.18);}
.btn--primary:hover{filter:brightness(1.03)}
.btn--ghost{border-color:rgba(226,232,240,.20); background:rgba(15,23,42,.35)}
.btn--ghost:hover{background:rgba(15,23,42,.55)}

/* Hero */
.hero{padding:26px 0 8px;}
.hero__grid{display:grid; grid-template-columns: 1.05fr 1fr; gap:26px; align-items:stretch;}
.hero__left{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow)}
.hero__pain{width:100%; height:100%; object-fit:cover;}

.hero__right{display:flex; flex-direction:column; gap:14px;}
.pill{display:inline-flex; width:fit-content; align-items:center; gap:10px; border:1px solid rgba(56,189,248,.22); background:rgba(15,23,42,.35); padding:8px 12px; border-radius:999px; color:rgba(226,232,240,.95); font-size:13px}

.hero__title{font-size:40px; line-height:1.12; margin:0; letter-spacing:-.5px;}
.hero__subtitle{margin:0; font-size:18px; color:rgba(226,232,240,.92)}

.ticks{list-style:none; padding:0; margin:6px 0 0; display:grid; gap:10px;}
.ticks li{position:relative; padding-left:30px; color:rgba(226,232,240,.92); font-size:16px}
.ticks li:before{content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.30); color:var(--accent); font-weight:900}

.hero__card{
  margin-top:4px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(15,23,42,.62), rgba(11,36,48,.62));
  box-shadow:var(--shadow);
  padding:16px;
}

.product{display:flex; align-items:center; gap:14px;}
.product__img{width:180px; flex:0 0 auto; filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));}
.product__meta{flex:1}

.badgeRow{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px}
.badge{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(226,232,240,.16); background:rgba(2,6,23,.22); color:rgba(226,232,240,.92)}

.note{margin-top:6px; padding:12px 14px; border-radius:16px; border:1px dashed rgba(226,232,240,.20); background:rgba(2,6,23,.20); color:rgba(226,232,240,.92)}
.note--small{font-size:13px}

.form{margin-top:12px; display:grid; gap:10px;}
.field{display:grid; gap:6px}
.field span{font-size:13px; color:rgba(226,232,240,.86)}
input,select,textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(226,232,240,.16);
  background:rgba(2,6,23,.35);
  color:var(--text);
  padding:12px 12px;
  font-size:16px;
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(56,189,248,.45); box-shadow:0 0 0 4px rgba(56,189,248,.12)}

.form__note{margin:0; color:rgba(148,163,184,.92); font-size:12px}
.form__note a{color:rgba(56,189,248,.95)}

.trust{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:10px}
.trust__item{padding:10px 12px; border-radius:16px; background:rgba(15,23,42,.35); border:1px solid rgba(226,232,240,.12); color:rgba(226,232,240,.92); font-size:13px}

/* Sections */
.section{padding:52px 0}
.section--soft{background:radial-gradient(900px 500px at 15% 20%, rgba(56,189,248,.12), transparent 65%),
             radial-gradient(700px 400px at 85% 30%, rgba(34,197,94,.10), transparent 70%),
             rgba(15,23,42,.35);
  border-top:1px solid rgba(226,232,240,.08);
  border-bottom:1px solid rgba(226,232,240,.08);
}

.h2{font-size:30px; margin:0 0 16px; letter-spacing:-.3px}
.lead{margin:0 0 24px; color:rgba(226,232,240,.88); font-size:18px}
.lead--center{text-align:center; max-width:820px; margin-left:auto; margin-right:auto}

.cards{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px}
.card{border:1px solid var(--border); background:rgba(2,6,23,.20); border-radius:var(--radius); padding:14px; box-shadow:0 14px 28px rgba(2,6,23,.22)}
.card--symptom{display:grid; gap:10px; align-content:start}
.card--symptom .icon{width:42px;height:42px;border-radius:14px; display:grid; place-items:center; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.22)}
.card--symptom p{margin:0; color:rgba(226,232,240,.92); font-size:15px}

.ctaRow{margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border-radius:var(--radius); border:1px solid rgba(226,232,240,.12); background:rgba(2,6,23,.18)}
.ctaRow__title{margin:0; font-weight:700}
.ctaRow__sub{margin:6px 0 0; color:rgba(148,163,184,.95)}

.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:18px}
.step{display:flex; gap:12px; padding:16px; border-radius:var(--radius); border:1px solid rgba(226,232,240,.12); background:rgba(2,6,23,.18)}
.step__num{width:38px; height:38px; border-radius:16px; display:grid; place-items:center; font-weight:900; color:#06121a; background:linear-gradient(135deg, var(--accent2), var(--accent))}
.step h3{margin:0 0 6px; font-size:18px}
.step p{margin:0; color:rgba(226,232,240,.88)}

.split{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:start}
.bullets{margin:0; padding-left:18px; color:rgba(226,232,240,.92); font-size:16px}
.bullets li{margin:10px 0}

.miniCta{margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border-radius:var(--radius); border:1px solid rgba(56,189,248,.22); background:rgba(15,23,42,.35)}
.miniCta__title{font-weight:800}
.miniCta__sub{color:rgba(148,163,184,.92); margin-top:4px}

.sideProduct{border-radius:var(--radius); overflow:hidden; border:1px solid rgba(226,232,240,.10); background:linear-gradient(180deg, rgba(11,36,48,.5), rgba(15,23,42,.5)); padding:18px}
.sideProduct img{width:100%; filter:drop-shadow(0 18px 18px rgba(0,0,0,.32))}

/* Doctors */
.doctorGrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:18px}
.doctor{display:grid; gap:12px}
.doctor__img{width:100%; height:260px; object-fit:cover; object-position:50% 18%; border-radius:18px; border:1px solid rgba(226,232,240,.12)}
/* Точне кадрування під завантажені фото (фокус на обличчі) */
.doctorGrid .doctor:nth-child(1) .doctor__img{object-position:50% 20%}
.doctorGrid .doctor:nth-child(2) .doctor__img{object-position:50% 10%}
.doctorGrid .doctor:nth-child(3) .doctor__img{object-position:50% 18%}
.doctor__name{font-weight:800; margin:0}
.doctor__role{margin:2px 0 0; color:rgba(148,163,184,.92); font-size:14px}
.doctor__text{margin:0; color:rgba(226,232,240,.90)}

/* Reviews */
.reviewHeader{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ratingBig{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; border:1px solid rgba(226,232,240,.12); background:rgba(2,6,23,.18)}
.ratingBig__score{font-weight:900; font-size:26px}
.stars{letter-spacing:2px; color:#fbbf24; font-size:16px}
.ratingBig__meta{color:rgba(148,163,184,.95); font-size:13px}

.reviewGrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:18px}
.review{display:flex; gap:14px}
.review__img{width:92px; height:92px; border-radius:20px; object-fit:cover; border:1px solid rgba(226,232,240,.12); flex:0 0 auto}
.review__name{margin:0; font-weight:800}
.review__meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px}
.review__meta .score{font-weight:800; color:rgba(226,232,240,.95)}
.review__text{margin:10px 0 0; color:rgba(226,232,240,.90)}

/* FAQ */
.faq{display:grid; gap:10px; max-width:900px}
.faqItem{border:1px solid rgba(226,232,240,.12); border-radius:18px; overflow:hidden; background:rgba(2,6,23,.18)}
.faqBtn{width:100%; text-align:left; padding:14px 16px; background:transparent; border:0; color:var(--text); font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px}
.faqBtn span:last-child{opacity:.75}
.faqPanel{max-height:0; overflow:hidden; transition:max-height .28s ease;}
.faqPanel__inner{padding:0 16px 14px; color:rgba(226,232,240,.90)}
.faqItem.is-open .faqPanel{max-height:260px}

/* Order bottom */
.orderGrid{display:grid; grid-template-columns: .95fr 1.05fr; gap:18px; align-items:stretch}
.orderImg{border-radius:var(--radius); border:1px solid rgba(226,232,240,.10); overflow:hidden; background:rgba(2,6,23,.18); display:grid; place-items:center; padding:16px; box-shadow:var(--shadow)}
.orderImg img{width:100%; max-width:440px; filter:drop-shadow(0 18px 18px rgba(0,0,0,.32))}

/* Footer */
.footer{padding:34px 0 60px; border-top:1px solid rgba(226,232,240,.08); background:rgba(2,6,23,.10)}
.footer__grid{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer__brand{font-weight:900; font-size:18px; margin-bottom:6px}
.footer__links{display:flex; flex-direction:column; gap:10px}
.footer__links a{color:rgba(226,232,240,.85); text-decoration:none}
.footer__links a:hover{text-decoration:underline}
.muted{color:rgba(148,163,184,.95); font-size:13px}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:100;}
.modal.is-open{display:block}
.modal__overlay{position:absolute; inset:0; background:rgba(2,6,23,.72)}
.modal__card{position:relative; margin:56px auto; width:min(720px, calc(100% - 32px)); background:rgba(15,23,42,.95); border:1px solid rgba(226,232,240,.14); border-radius:22px; padding:18px 18px 16px; box-shadow:var(--shadow)}
.modal__title{margin:6px 0 12px}
.modal__content{color:rgba(226,232,240,.90)}
.modal__content h4{margin:14px 0 8px}
.modal__content p{margin:0 0 10px}
.modal__close{position:absolute; right:14px; top:12px; width:40px; height:40px; border-radius:14px; border:1px solid rgba(226,232,240,.16); background:rgba(2,6,23,.18); color:var(--text); cursor:pointer}

/* Toast */
.toast{position:fixed; right:16px; bottom:16px; padding:12px 14px; background:rgba(15,23,42,.92); color:#fff; border-radius:16px; z-index:9999; max-width:min(360px, calc(100% - 32px)); box-shadow:0 14px 28px rgba(2,6,23,.35)}

/* Sticky CTA (mobile) */
.stickyCta{position:fixed; left:16px; right:16px; bottom:14px; display:none; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:18px; text-decoration:none; color:#06121a; background:linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow:0 16px 30px rgba(34,197,94,.22); z-index:60}
.stickyCta__sub{font-size:12px; opacity:.8}



/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__left{max-height:360px}
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .doctorGrid{grid-template-columns:1fr}
  .reviewGrid{grid-template-columns:1fr}
  .orderGrid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .topbar__nav{display:none}
  .stickyCta{display:flex}
  .hero__title{font-size:34px}
}

@media (max-width: 420px){
  .wrap{width:calc(100% - 24px)}
  .hero__title{font-size:30px}
  input,select{font-size:16px}
}


/* Reviews extras */
.reviewsHead{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.review__body{display:flex; flex-direction:column; gap:8px}
.review__text{margin:0; color:rgba(226,232,240,.90)}
.packsGallery{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.packsGallery img{width:58px; height:58px; border-radius:16px; object-fit:cover; border:1px solid rgba(226,232,240,.12); background:rgba(2,6,23,.25)}

.packBlock{margin-top:10px; padding:10px; border:1px dashed rgba(226,232,240,.22); border-radius:18px; background:rgba(2,6,23,.18); display:flex; justify-content:center; align-items:center}
.packBlock img{width:100%; max-width:260px; height:auto; border-radius:16px; object-fit:cover; border:1px solid rgba(226,232,240,.12)}


/* Price box near order forms */
.priceBox{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  margin:10px 0 12px;
}
.priceBox__title{
  font-weight:800;
}
.priceBox__row{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.priceBox__old{
  text-decoration:line-through;
  opacity:0.85;
  font-weight:700;
  color:#ffffff;
}
.priceBox__new{
  font-weight:900;
  color:var(--danger);
}

.priceBox__timer{
  font-size:13px;
  font-weight:700;
  color:rgba(226,232,240,.90);
  opacity:0.9;
  white-space:nowrap;
}

.countdown{
  color: var(--danger);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.countdown.is-tick{
  animation: countdownPop .22s ease-out;
}
@keyframes countdownPop{
  from{ transform: translateY(-1px) scale(1.06); }
  to{ transform: translateY(0) scale(1); }
}
@media (max-width: 520px){
  .priceBox__timer{white-space:normal}
}


.form__underbtn{
  margin:8px 0 0;
  font-size:13px;
  opacity:0.85;
}