/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }

/* COLORS */
:root{
  --dark-bg:#1f1f1f;
  --card-bg:#2b2b2b;
  --text:#fdfcfb;
  --muted:#b0b0b0;
  --accent:#f59e0b;
  --border:rgba(255,255,255,0.1);
}

/* BASE */
body { font-family:Inter,sans-serif; background:var(--dark-bg); color:var(--text); line-height:1.5; }
a { color:inherit; text-decoration:none; }

/* TOP BAR */
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 30px;background:#2b2b2b;position:relative; z-index:150;}
.top-left.logo{display:flex;align-items:center;}
.top-left.logo .logo-img{height:40px;width:auto;display:block;}
.top-right{display:flex;align-items:center;gap:16px;}
.top-right .phone{font-weight:600;color:#fff;}
.vk-link img{width:26px;height:26px;filter: invert(1);}

/* SCROLL NAV */
.scroll-nav{position:sticky;top:0;width:100%;background:rgba(43,31,24,0.9);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;gap:20px;padding:12px;z-index:120;}
.scroll-nav a{font-weight:500;color:#fff;white-space:nowrap;}
.scroll-nav a:hover{color:var(--accent);}

/* HERO */
.hero{position:relative;height:90vh;overflow:hidden;}
.hero video{width:100%;height:100%;object-fit:cover;}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);}
.hero-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;max-width:800px;}
.hero-text h1{font-size:38px;margin-bottom:10px;}
.hero-text p{font-size:18px;color: #f59e0b;}

/* SECTIONS */
.section{padding:80px 5%;}
.section h2{text-align:center;font-size:30px;margin-bottom:40px;position:relative;}
.section h2::after{content:'';display:block;width:50px;height:4px;background:var(--accent);margin:10px auto 0;border-radius:999px;}

/* SERVICES */
.services-clean { width:100%; max-width:none; margin:0 auto; padding:20px 2%; }
.services-clean h2 { text-align:center; margin-bottom:30px; }
.carousel-wrapper { display:flex; gap:0; }
.carousel-track { display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:10px; scroll-snap-type:x mandatory; }
.price-card { flex:0 0 auto; background:var(--card-bg); padding:20px; border-radius:15px; min-width:260px; scroll-snap-align:start; }
.group-title { font-size:20px; margin-bottom:10px; color:var(--accent); font-weight:700; }
.price-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:16px; }
.price-row span:last-child{color:var(--accent);font-weight:600;}

/* DOCTORS */
.doctor-card{width:260px;}
.doctor-card img{width:100%;height:280px;object-fit:cover;border-radius:15px;margin-bottom:10px;}
.doctor-card h3{color:var(--accent);margin-bottom:5px;font-weight:700;}
.doctor-card p{color:var(--muted);font-size:14px;}
.carousel{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px;}
.carousel::-webkit-scrollbar{height:6px;}
.carousel::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px;}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}

/* REVIEWS */
.review{background:var(--card-bg);padding:20px;border-radius:15px;text-align:center;margin:0 auto;max-width:800px;}
.review span.orange{color:var(--accent);font-weight:700;display:block;margin-top:5px;}

/* MAP */
#yandexMap { width:100%; height:500px; border-radius:15px; }

/* FOOTER */
footer{background:#000;color:#fff;padding:40px;text-align:center;border-radius:20px 20px 0 0;}

/* STICKY BUTTON */
.sticky-btn{position:fixed;bottom:25px;right:25px;background:var(--accent);color:#fff;padding:16px 28px;border-radius:40px;font-weight:700;text-decoration:none;box-shadow:0 10px 25px rgba(0,0,0,0.25);}

/* MOBILE */
@media(max-width:768px){
  .scroll-nav{gap:12px;}
  .scroll-nav a{font-size:12px;}
  .hero-text h1{font-size:28px;}
  .hero-text p{font-size:14px;}
  .price-row{font-size:14px;}
  .doctor-card{width:220px;}
  .doctor-card img{height:240px;}
}
 .modal {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.6);
  justify-content:center;
  align-items:center;
  z-index:200;
}
.modal-content {
  background:#2b2b2b;
  padding:30px;
  border-radius:15px;
  max-width:400px;
  width:90%;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:15px;
}
.modal-content input,
.modal-content textarea {
  padding:10px;
  border-radius:8px;
  border:none;
  font-size:14px;
}
.modal-content button {
  background:var(--accent);
  color:#fff;
  padding:12px;
  border:none;
  border-radius:10px;
  cursor:pointer;
}
.modal-content .close {
  align-self:flex-end;
  font-size:20px;
  cursor:pointer;
}
