/* ==========================================================
   Advanced Dentistry by Dr. Hargun — Premium Stylesheet
   Primary: #4E1E72   Secondary: #000000
   ========================================================== */

:root{
  --primary:#4E1E72;
  --primary-dark:#38154f;
  --primary-light:#F4EEF9;
  --primary-lighter:#FBF9FD;
  --black:#0A0A0A;
  --text:#1E1B22;
  --text-muted:#6B6470;
  --white:#ffffff;
  --border:#E7E1ED;
  --gold:#C9A227;
  --radius:14px;
  --radius-lg:24px;
  --shadow-sm:0 2px 10px rgba(20,10,30,.06);
  --shadow-md:0 10px 30px rgba(20,10,30,.10);
  --shadow-lg:0 20px 60px rgba(20,10,30,.16);
  --font-head:'Playfair Display', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --container:1220px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--text);
  background:var(--white); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}

h1,h2,h3,h4{font-family:var(--font-head); font-weight:600; color:var(--black); margin:0 0 .5em; line-height:1.2}
h1{font-size:clamp(2.2rem,4.5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
p{margin:0 0 1em; color:var(--text-muted)}

.section{padding:88px 0}
.section-sm{padding:56px 0}
.section-tinted{background:var(--primary-lighter)}
.section-dark{background:var(--black); color:#eee}
.section-dark h2, .section-dark h3{color:#fff}
.section-dark p{color:#c9c3cf}

.eyebrow{
  display:inline-block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary); font-weight:700; margin-bottom:14px;
}
.section-head{max-width:720px; margin:0 auto 48px; text-align:center}
.section-head.left{margin:0 0 40px; text-align:left}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:100px; font-weight:600; font-size:.95rem;
  cursor:pointer; border:1px solid transparent; transition:all .25s ease; white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn-outline{background:transparent; color:var(--black); border-color:var(--black)}
.btn-outline:hover{background:var(--black); color:#fff}
.btn-white{background:#fff; color:var(--primary)}
.btn-white:hover{background:var(--primary-light); transform:translateY(-2px)}
.btn-whatsapp{background:#25D366; color:#fff}
.btn-whatsapp:hover{background:#1eb958; transform:translateY(-2px)}
.btn-sm{padding:10px 20px; font-size:.85rem}
.btn-block{width:100%}

/* Top bar */
.top-bar{background:var(--black); color:#eae6ee; font-size:.82rem}
.top-bar-inner{display:flex; justify-content:space-between; align-items:center; padding:9px 24px; flex-wrap:wrap; gap:6px}
.top-bar a{color:#eae6ee; margin-left:16px}
.top-bar a:hover{color:var(--gold)}
.rating-badge{color:var(--gold); font-weight:600; margin-right:8px}

/* Header */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}
.brand-logo{height:46px}
.brand-text{font-family:var(--font-head); font-weight:700; font-size:1.35rem; color:var(--primary)}
.main-nav{display:flex; align-items:center; gap:30px}
.main-nav a{font-size:.95rem; font-weight:500; color:var(--text); position:relative; padding:6px 0}
.main-nav a:not(.btn):after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--primary);transition:width .25s}
.main-nav a:not(.btn):hover:after, .main-nav a.active:not(.btn):after{width:100%}
.main-nav a.active:not(.btn){color:var(--primary)}
.nav-cta{margin-left:8px}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px}
.hamburger span{width:26px; height:2px; background:var(--black); border-radius:2px; transition:.25s}

/* Hero */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(10,10,10,.55), rgba(78,30,114,.65)), var(--hero-img, linear-gradient(135deg,#2b1240,#4E1E72)) center/cover no-repeat;
  color:#fff;
}
.hero-inner{max-width:760px; padding:120px 24px 90px}
.hero .eyebrow{color:var(--gold)}
.hero h1{color:#fff}
.hero p.lead{color:#e9e2f2; font-size:1.15rem; max-width:600px}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px}
.hero-rating{display:flex; align-items:center; gap:10px; margin-top:34px; color:#f1ecf7; font-size:.92rem}
.hero-rating .stars{color:var(--gold); letter-spacing:2px}

/* Trust strip */
.trust-strip{background:var(--primary); color:#fff}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.trust-item{padding:30px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.15)}
.trust-item:last-child{border-right:none}
.trust-item strong{display:block; font-family:var(--font-head); font-size:1.15rem; margin-bottom:4px}
.trust-item span{font-size:.85rem; color:#e6dcf1}

/* About */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.about-media{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
.about-media img{aspect-ratio:4/5; object-fit:cover; width:100%}
.about-content .stats{display:flex; gap:30px; margin:26px 0}
.about-content .stat strong{display:block; font-family:var(--font-head); font-size:1.6rem; color:var(--primary)}
.about-content .stat span{font-size:.82rem; color:var(--text-muted)}

/* Services grid */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.service-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; height:100%;
}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.service-card .thumb{aspect-ratio:4/3; overflow:hidden; background:var(--primary-light)}
.service-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.service-card:hover .thumb img{transform:scale(1.08)}
.service-card .body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.service-card h3{font-size:1.08rem; margin:0}
.service-card p{font-size:.9rem; margin:0; flex:1}
.price-old{text-decoration:line-through; color:var(--text-muted); font-size:.85rem; margin-right:6px}
.price-new{color:var(--primary); font-weight:700; font-size:1.05rem}
.price-save{background:var(--primary-light); color:var(--primary); font-size:.72rem; padding:2px 8px; border-radius:100px; margin-left:6px}
.price-contact{color:var(--text-muted); font-size:.9rem; font-style:italic}
.service-card .view-link{font-weight:600; color:var(--primary); font-size:.88rem; display:inline-flex; align-items:center; gap:6px}
.services-cta{text-align:center; margin-top:44px}

/* Why choose */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.why-card{padding:32px 26px; border-radius:var(--radius); background:#fff; border:1px solid var(--border); text-align:center}
.why-card .icon{width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1.4rem; font-weight:700}

/* Before/after */
.ba-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.ba-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:#fff}
.ba-images{display:grid; grid-template-columns:1fr 1fr}
.ba-images figure{margin:0; position:relative}
.ba-images img{aspect-ratio:1/1; object-fit:cover; width:100%}
.ba-images figcaption{position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.65); color:#fff; font-size:.68rem; padding:2px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:.05em}
.ba-body{padding:18px}
.ba-disclaimer{font-size:.78rem; color:var(--text-muted); text-align:center; max-width:640px; margin:36px auto 0; font-style:italic}

/* Process */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative}
.process-step{text-align:center; padding:0 12px}
.process-num{width:52px; height:52px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:var(--font-head); font-weight:700}

/* Doctor */
.doctor-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center}
.doctor-media img{border-radius:var(--radius-lg); aspect-ratio:3/4; object-fit:cover; width:100%; box-shadow:var(--shadow-lg)}
.doctor-content .designation{color:var(--primary); font-weight:600; margin-bottom:14px}
.doctor-meta{display:flex; gap:26px; flex-wrap:wrap; margin-top:18px}
.doctor-meta div strong{display:block; color:var(--black); font-size:.9rem}
.doctor-meta div span{font-size:.8rem; color:var(--text-muted)}

/* Testimonials */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.testi-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px}
.testi-card .stars{color:var(--gold); letter-spacing:2px; display:block; margin-bottom:14px}
.testi-card .who{display:flex; align-items:center; gap:12px; margin-top:18px}
.testi-card .who img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.testi-card .who strong{display:block; font-size:.92rem}
.testi-card .who span{font-size:.76rem; color:var(--text-muted)}

/* Awards */
.awards-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.award-card{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; text-align:center}
.award-card img{aspect-ratio:1/1; object-fit:cover; width:100%}
.award-card .cap{padding:14px}
.award-card .cap strong{display:block; font-size:.9rem}
.award-card .cap span{font-size:.75rem; color:var(--text-muted)}

/* CTA band */
.cta-band{background:var(--primary); color:#fff; text-align:center; border-radius:var(--radius-lg); padding:60px 40px; margin:0 24px}
.cta-band h2{color:#fff}
.cta-band .actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:24px}

/* Forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.form-group{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.form-group.full{grid-column:1/-1}
label{font-size:.85rem; font-weight:600; color:var(--black)}
input, select, textarea{
  padding:13px 16px; border:1px solid var(--border); border-radius:10px; font-family:var(--font-body);
  font-size:.95rem; background:#fff; color:var(--text); transition:border-color .2s;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary)}
textarea{resize:vertical; min-height:110px}
.form-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:44px; box-shadow:var(--shadow-sm)}
.form-note{font-size:.8rem; color:var(--text-muted); margin-top:6px}
.alert{padding:16px 20px; border-radius:10px; margin-bottom:24px; font-size:.92rem}
.alert-success{background:#EAF7EE; color:#1B7A3C; border:1px solid #C7EAD1}
.alert-error{background:#FDEDED; color:#B23A3A; border:1px solid #F5C6C6}

/* Contact page */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start}
.contact-info-item{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--border)}
.contact-info-item .ico{width:42px;height:42px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700}
.map-embed{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); margin-top:24px}
.map-embed iframe{width:100%; height:320px; border:0}

/* Page header (inner pages) */
.page-header{
  padding:80px 0 60px; text-align:center;
  background:linear-gradient(180deg, rgba(10,10,10,.6), rgba(78,30,114,.75)), var(--page-bg, linear-gradient(135deg,#2b1240,#4E1E72)) center/cover no-repeat;
  color:#fff;
}
.page-header h1{color:#fff; margin-bottom:6px}
.page-header p{color:#e9e2f2; margin:0}
.breadcrumb{font-size:.82rem; color:#d9cfe6; margin-top:10px}
.breadcrumb a{color:#f1ecf7}

/* Service detail */
.service-detail-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:50px; align-items:start}
.service-hero-img{border-radius:var(--radius-lg); overflow:hidden; margin-bottom:30px; box-shadow:var(--shadow-md)}
.service-hero-img img{width:100%; aspect-ratio:16/9; object-fit:cover}
.sidebar-card{background:var(--primary-light); border-radius:var(--radius-lg); padding:30px}
.sidebar-card h4{margin-bottom:16px}
.related-services a{display:block; padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem; font-weight:500}

/* Booking confirmation */
.confirm-box{max-width:560px; margin:0 auto; text-align:center; padding:60px 24px}
.confirm-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 24px}
.booking-summary{text-align:left; background:var(--primary-light); border-radius:var(--radius); padding:24px; margin:24px 0}
.booking-summary div{display:flex; justify-content:space-between; padding:6px 0; font-size:.92rem}
.booking-summary strong{color:var(--black)}

/* Footer */
.site-footer{background:var(--black); color:#cfc9d6; padding-top:70px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px}
.footer-logo{height:42px; margin-bottom:16px; filter:brightness(0) invert(1)}
.footer-brand{font-family:var(--font-head); font-size:1.3rem; color:#fff; margin-bottom:16px}
.footer-desc{font-size:.88rem; color:#a9a2b3}
.footer-social{display:flex; gap:10px; margin-top:16px}
.footer-social a{width:36px; height:36px; border-radius:50%; border:1px solid #3a3340; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700}
.footer-social a:hover{background:var(--primary); border-color:var(--primary)}
.site-footer h4{color:#fff; font-family:var(--font-body); font-size:.92rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px}
.site-footer ul li{margin-bottom:10px; font-size:.88rem}
.site-footer ul li a:hover{color:var(--gold)}
.footer-contact li{color:#a9a2b3}
.footer-bottom{border-top:1px solid #232025; padding:20px 0}
.footer-bottom-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:#8b8492}
.footer-legal a{color:#8b8492}
.footer-legal a:hover{color:var(--gold)}

/* Floating buttons */
.float-btn{
  position:fixed; right:22px; z-index:90; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); color:#fff;
  transition:transform .2s;
}
.float-btn:hover{transform:scale(1.08)}
.float-whatsapp{background:#25D366; bottom:92px}
.float-call{background:var(--primary); bottom:22px}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none}}

/* Responsive */
@media (max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid, .process-grid, .awards-grid{grid-template-columns:repeat(2,1fr)}
  .ba-grid, .testi-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid, .doctor-grid, .contact-grid, .service-detail-grid{grid-template-columns:1fr; gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .main-nav{
    position:fixed; inset:0 0 0 30%; background:#fff; flex-direction:column; align-items:flex-start;
    padding:100px 30px 30px; gap:22px; transform:translateX(100%); transition:transform .3s ease; box-shadow:var(--shadow-lg);
  }
  .main-nav.open{transform:translateX(0)}
  .hamburger{display:flex}
  .nav-cta{margin-left:0}
  .services-grid, .why-grid, .process-grid, .awards-grid, .ba-grid, .testi-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .top-bar-inner{flex-direction:column; align-items:flex-start}
  .hero-inner{padding:100px 20px 70px}
  .cta-band{margin:0 16px; padding:44px 24px}
  .footer-bottom-inner{flex-direction:column; align-items:flex-start}
}