:root{--primary:#2d89ef;--primary-dark:#1e5faf;--muted:#f4f8ff;--card:#fff;--shadow:0 12px 30px rgba(16,30,60,.09)}
*{box-sizing:border-box}body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--muted);color:#222}
.side-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:1200}
.side-nav button{background:var(--primary);color:#fff;border:none;padding:10px 14px;border-radius:30px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)}
.side-nav button img{width:16px;height:16px}
.hero{background-image:linear-gradient(rgba(14,34,66,.45),rgba(14,34,66,.45)),url('/static/images/hero.jpg');background-size:cover;background-position:center;padding:120px 18px;text-align:center;color:#fff}
.hero h1{font-size:44px;margin:0;font-weight:800}
.hero p{margin:12px 0 18px;color:rgba(255,255,255,.9)}
.hero-btn{background:#fff;color:var(--primary);padding:12px 24px;border-radius:28px;border:none;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(45,137,239,.12)}
.section-inner{max-width:1150px;margin:0 auto;padding:0 12px}
h2{color:var(--primary);text-align:center;margin-bottom:18px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.service-card{background:var(--card);padding:22px;border-radius:14px;box-shadow:var(--shadow);cursor:pointer;transition:all .18s}
.service-card:hover{transform:translateY(-6px)}
.doctor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.doc-card{background:var(--card);padding:18px;border-radius:14px;box-shadow:var(--shadow);text-align:center}
.doc-card img{width:130px;height:130px;border-radius:999px;object-fit:cover;margin-bottom:10px}
.appointment-card{background:var(--card);padding:20px;border-radius:12px;box-shadow:var(--shadow);max-width:780px;margin:0 auto}
.field{margin-bottom:12px}
.field label{display:block;margin-bottom:6px;font-weight:600}
.field input,.field select{width:100%;padding:10px;border-radius:10px;border:1px solid #e6f0ff}
.time-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.time-slot{padding:8px 12px;border-radius:10px;background:#f6fbff;border:1px solid #e6f4ff;cursor:pointer}
.time-slot.selected{background:var(--primary);color:#fff;border-color:var(--primary)}
footer{background:linear-gradient(90deg,var(--primary),var(--primary-dark));padding:26px;color:#fff;margin-top:40px;text-align:center}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1500}
.modal{background:#fff;padding:18px;border-radius:12px;max-width:640px;width:94%;box-shadow:0 30px 80px rgba(0,0,0,.2)}
.close-btn{position:absolute;right:12px;top:10px;border:none;background:#f2f2f2;padding:6px;border-radius:8px;cursor:pointer}
@media(max-width:800px){.hero{padding:70px 14px}.hero h1{font-size:28px}.side-nav{right:8px} .section-inner{padding:0 10px}}