:root {
  --navy:        #0B2550;
  --blue:        #1A56A0;
  --blue-mid:    #2371C8;
  --sky:         #4A9FE0;
  --sky-light:   #7BBFEE;
  --pale:        #EBF4FB;
  --pale2:       #F4F9FD;
  --white:       #FFFFFF;
  --dark:        #0B1E3A;
  --text:        #2C3E5A;
  --text-light:  #6B7FA0;
  --border:      rgba(26,86,160,0.14);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--pale2);
  color:var(--text);
  overflow-x:hidden;
}

/* ─── HERO ────────────────────────────── */
.hero {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:calc(100vh - 74px - 44px);
  overflow:hidden;
}

.hero-left {
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 60px 80px 80px;
}

.hero-tag {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pale); border:1px solid rgba(26,86,160,.2);
  color:var(--blue); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:7px 16px; border-radius:100px;
  margin-bottom:30px; width:fit-content;
  animation:fadeUp .7s ease both;
}
.hero-tag::before {
  content:''; width:6px; height:6px;
  background:var(--blue-mid); border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.7)}
}

.hero-h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(40px,4.2vw,60px);
  font-weight:700; line-height:1.1; color:var(--navy);
  margin-bottom:22px;
  animation:fadeUp .7s .1s ease both;
}
.hero-h1 em { font-style:italic; color:var(--blue-mid); }

.hero-sub {
  font-size:16px; font-weight:300; line-height:1.75;
  color:var(--text-light); max-width:430px;
  margin-bottom:44px;
  animation:fadeUp .7s .2s ease both;
}

.hero-btns {
  display:flex; gap:14px; flex-wrap:wrap;
  animation:fadeUp .7s .3s ease both;
}
.btn-primary {
  background:var(--blue); color:var(--white);
  padding:15px 34px; border-radius:100px;
  font-size:14px; font-weight:500; text-decoration:none;
  letter-spacing:.03em; transition:all .25s;
  box-shadow:0 8px 28px rgba(26,86,160,.3);
  border:none; cursor:pointer; font-family:inherit;
}
.btn-primary:hover {
  background:var(--blue-mid);
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(26,86,160,.38);
}
.btn-secondary {
  display:flex; align-items:center; gap:10px;
  color:var(--text); font-size:14px; font-weight:500;
  text-decoration:none; padding:15px 22px;
  border-radius:100px; border:1.5px solid var(--border);
  transition:all .25s;
}
.btn-secondary:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.btn-arrow {
  width:28px; height:28px; background:var(--pale);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; transition:background .25s;
}
.btn-secondary:hover .btn-arrow { background:var(--blue); color:white; }

.hero-stats {
  display:flex; gap:40px; margin-top:56px; padding-top:36px;
  border-top:1px solid var(--border);
  animation:fadeUp .7s .4s ease both;
}
.stat-num {
  font-family:'Playfair Display',serif;
  font-size:30px; font-weight:700; color:var(--navy); line-height:1;
}
.stat-label { font-size:12px; color:var(--text-light); margin-top:4px; }

/* Hero right */
.hero-right {
  background:var(--navy);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-right img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:0.92;
}
.hero-bg-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
}
.hero-bg-ring:nth-child(1){width:560px;height:560px}
.hero-bg-ring:nth-child(2){width:380px;height:380px}
.hero-bg-ring:nth-child(3){width:200px;height:200px}

.hero-eye-wrap {
  position:relative; z-index:2;
  animation:fadeIn 1s .3s ease both;
}

.float-card {
  position:absolute; z-index:3;
  background:white; border-radius:16px;
  padding:16px 22px;
  box-shadow:0 16px 48px rgba(0,0,0,.2);
  min-width:210px;
}
.float-card.c1 { bottom:52px; left:-28px; animation:fadeUp .8s .6s ease both; }
.float-card.c2 { top:56px; right:-20px; animation:fadeUp .8s .8s ease both;
  background:var(--blue); color:white; min-width:180px; }

.float-card-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--pale); display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-right:14px; flex-shrink:0;
}
.float-card-row { display:flex; align-items:center; }
.float-card-title { font-weight:600; font-size:13px; color:var(--navy); }
.float-card-sub { font-size:11px; color:var(--text-light); margin-top:2px; }
.float-card.c2 .float-card-title { font-size:11px; color:rgba(255,255,255,.65); font-weight:400; margin-bottom:3px; }
.float-card.c2 .float-card-val {
  font-family:'Playfair Display',serif;
  font-size:20px; font-weight:700; color:white;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ─── SHARED SECTION ─────────────────── */
section { padding:96px 80px; }

.section-tag {
  font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-mid);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.section-tag::before { content:''; width:26px; height:2px; background:var(--blue-mid); flex-shrink:0; }
.section-h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,2.8vw,42px); font-weight:700;
  line-height:1.2; color:var(--navy); margin-bottom:14px;
}
.section-sub {
  font-size:16px; color:var(--text-light);
  line-height:1.75; max-width:520px; margin-bottom:52px;
}

/* ─── SERVICES ───────────────────────── */
.services { background:var(--white); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.svc-card {
  border:1.5px solid var(--border); border-radius:20px;
  padding:34px; background:var(--pale2);
  transition:all .3s; position:relative; overflow:hidden; cursor:default;
}
.svc-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.svc-card:hover {
  border-color:rgba(26,86,160,.28);
  box-shadow:0 14px 44px rgba(26,86,160,.1);
  transform:translateY(-4px);
}
.svc-card:hover::after { transform:scaleX(1); }

.svc-icon {
  width:50px; height:50px; background:var(--pale);
  border-radius:13px; display:flex; align-items:center;
  justify-content:center; margin-bottom:22px; font-size:21px;
  transition:background .3s;
}
.svc-card:hover .svc-icon { background:var(--blue); }
.svc-title {
  font-family:'Playfair Display',serif;
  font-size:19px; font-weight:600; color:var(--navy); margin-bottom:10px;
}
.svc-desc { font-size:14px; color:var(--text-light); line-height:1.7; }

/* ─── ABOUT ──────────────────────────── */
.about {
  background:var(--navy); color:white;
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center; padding:96px 80px;
}
.about .section-tag { color:var(--sky-light); }
.about .section-tag::before { background:var(--sky-light); }
.about .section-h2 { color:white; }
.about .section-sub { color:rgba(255,255,255,.5); margin-bottom:36px; }

.about-list { list-style:none; display:flex; flex-direction:column; gap:16px; }
.about-item { display:flex; gap:14px; font-size:14px; color:rgba(255,255,255,.72); line-height:1.65; align-items:flex-start; }
.about-dot {
  width:20px; height:20px; flex-shrink:0; border-radius:50%;
  background:var(--blue-mid); display:flex; align-items:center;
  justify-content:center; font-size:10px; color:white; margin-top:2px;
}
.about-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); padding:8px 16px;
  border-radius:100px; font-size:12px; color:white;
  font-weight:500; margin-top:30px;
}

.about-boxes { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.abox {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:30px 26px; transition:background .3s;
}
.abox:hover { background:rgba(74,159,224,.12); }
.abox.wide { grid-column:1/-1; display:flex; align-items:center; gap:22px; }
.abox-num {
  font-family:'Playfair Display',serif;
  font-size:40px; font-weight:700; color:var(--sky); line-height:1;
}
.abox-label { font-size:12px; color:rgba(255,255,255,.45); margin-top:4px; }

/* ─── DOCTOR ─────────────────────────── */
.doctor {
  display:grid; grid-template-columns:1fr 1.2fr;
  min-height:560px; overflow:hidden;
  background:var(--white); padding:0;
}
.doc-img-side {
  background:var(--pale);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; min-height:560px;
  padding:40px;
}
.doc-img-side img {
  width:240px !important;
  height:290px !important;
  object-fit:cover !important;
  object-position:center top !important;
  border-radius:20px !important;
  position:relative !important;
  inset:auto !important;
  opacity:1 !important;
  box-shadow:0 20px 60px rgba(26,86,160,0.15) !important;
}
.doc-img-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--pale) 0%,rgba(74,159,224,.18) 100%);
}
.doc-placeholder {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--blue); opacity:.4;
}
.doc-placeholder svg { width:90px; height:90px; }
.doc-placeholder span { font-size:13px; letter-spacing:.06em; }

.doc-content {
  padding:76px 68px;
  display:flex; flex-direction:column; justify-content:center;
}
.doc-name {
  font-family:'Playfair Display',serif;
  font-size:34px; font-weight:700; color:var(--navy); margin-bottom:4px;
}
.doc-title {
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-mid); font-weight:500; margin-bottom:26px;
}
.doc-bio { font-size:15px; line-height:1.8; color:var(--text-light); margin-bottom:30px; }
.doc-creds { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:38px; }
.cred {
  padding:6px 15px; border-radius:100px;
  border:1.5px solid var(--border);
  font-size:12px; color:var(--text); font-weight:500;
  background:var(--pale2);
}

/* ─── MICROPULSE ─────────────────────── */
.micropulse {
  background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);
  color:white; display:flex; align-items:center;
  justify-content:space-between; gap:60px; padding:80px;
}
.micropulse .section-tag { color:rgba(255,255,255,.55); }
.micropulse .section-tag::before { background:rgba(255,255,255,.35); }
.micropulse .section-h2 { color:white; }
.micropulse-desc { font-size:16px; color:rgba(255,255,255,.6); line-height:1.75; max-width:480px; margin-bottom:34px; }
.mp-orb {
  flex-shrink:0; width:240px; height:240px; border-radius:50%;
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.mp-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
}
.mp-ring:nth-child(1){width:180px;height:180px}
.mp-ring:nth-child(2){width:240px;height:240px}
.mp-ring:nth-child(3){
  width:300px;height:300px;
  border-style:dashed; animation:spin 22s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.mp-icon { font-size:58px; position:relative; z-index:2; }

/* ─── REVIEWS ────────────────────────── */
.reviews { background:var(--pale); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-card {
  background:var(--white); border-radius:20px; padding:34px;
  box-shadow:0 4px 20px rgba(26,86,160,.07);
  transition:transform .3s, box-shadow .3s;
}
.review-card:hover { transform:translateY(-4px); box-shadow:0 12px 38px rgba(26,86,160,.13); }
.review-stars { color:var(--blue-mid); font-size:15px; margin-bottom:18px; letter-spacing:2px; }
.review-text {
  font-family:'Playfair Display',serif;
  font-size:16px; font-style:italic; color:var(--text);
  line-height:1.7; margin-bottom:26px;
}
.review-author { display:flex; align-items:center; gap:13px; }
.review-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); color:white;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px;
}
.review-name { font-weight:600; font-size:14px; color:var(--navy); }
.review-date { font-size:11px; color:var(--text-light); }

/* ─── CONTACT ────────────────────────── */
.contact {
  background:var(--white);
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:start; padding:96px 80px;
}
.info-block {
  display:flex; align-items:flex-start; gap:16px;
  margin-bottom:22px; padding:22px;
  border-radius:14px; border:1.5px solid var(--border);
  background:var(--pale2); transition:border-color .2s;
}
.info-block:hover { border-color:rgba(26,86,160,.28); }
.info-icon {
  width:44px; height:44px; flex-shrink:0;
  background:var(--pale); border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.info-label { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-light); margin-bottom:3px; }
.info-value { font-size:15px; font-weight:500; color:var(--navy); }
.info-value a { color:inherit; text-decoration:none; }
.info-value a:hover { color:var(--blue-mid); }

.contact-form { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:12px; font-weight:500; color:var(--text); letter-spacing:.04em; }
.form-input, .form-select, .form-textarea {
  padding:13px 16px; border:1.5px solid var(--border);
  border-radius:11px; font-size:14px; font-family:inherit;
  color:var(--text); background:var(--pale2);
  transition:border-color .2s, box-shadow .2s; outline:none; width:100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,86,160,.1);
}
.form-textarea { resize:vertical; min-height:110px; }

.page-hero{background:var(--navy);padding:80px 80px 68px;color:white;margin-top:74px;}
.page-hero .section-tag{color:var(--sky-light);}
.page-hero .section-tag::before{background:var(--sky-light);}
.page-hero h1{font-family:'Playfair Display',serif;font-size:clamp(36px,4vw,52px);font-weight:700;line-height:1.15;color:white;margin-bottom:18px;}
.page-hero p{font-size:17px;color:rgba(255,255,255,.6);line-height:1.75;max-width:600px;}
.cond{padding:80px;}
.cond:nth-of-type(even){background:var(--pale2);}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.slist{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.slist li{display:flex;gap:12px;font-size:15px;color:var(--text-light);line-height:1.6;}
.slist li span{color:var(--blue);font-weight:700;flex-shrink:0;}
.tbox{background:var(--pale);border-radius:20px;padding:32px;margin-bottom:20px;}
.titem{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px;}
.titem:last-child{margin-bottom:0;}
.ticon{width:42px;height:42px;background:var(--blue);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.ttitle{font-size:15px;font-weight:600;color:var(--navy);display:block;margin-bottom:4px;}
.tdesc{font-size:14px;color:var(--text-light);line-height:1.65;}
.cbox{border-radius:20px;padding:28px;background:var(--navy);color:white;}
.cbox p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.72);margin:0;}
.cbox strong{color:white;}
.divider{height:2px;background:var(--border);margin:0 80px;}
.cta-strip{background:var(--blue);padding:60px 80px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta-strip h2{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;color:white;margin-bottom:10px;}
.cta-strip p{font-size:16px;color:rgba(255,255,255,.7);max-width:480px;margin:0;}

/* ── MOBILE RESPONSIVE ─────────────────────────── */
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 40px 24px 32px; }
  .hero-right { min-height: 280px; }
  .hero-h1 { font-size: 34px; }
  .hero-sub { font-size: 15px; }
  .hero-stats { gap: 24px; }
  .float-card.c1 { left: 12px; bottom: 16px; min-width: 180px; }
  .float-card.c2 { right: 8px; top: 16px; min-width: 160px; }

  section { padding: 56px 24px; }
  .services-grid, .reviews-grid { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; padding: 56px 24px; gap: 40px; }
  .about-boxes { grid-template-columns: 1fr 1fr; }
  .abox.wide { grid-column: 1/-1; }
  .doctor { grid-template-columns: 1fr; }
  .doc-img-side { min-height: 300px; }
  .micropulse { flex-direction: column; padding: 56px 24px; gap: 32px; }
  .mp-orb { width: 160px; height: 160px; }
  .contact { grid-template-columns: 1fr; padding: 56px 24px; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }

  .page-hero { padding: 56px 24px 48px; }
  .cgrid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .cond { padding: 56px 24px !important; }
  .divider { margin: 0 24px !important; }
  .cta-strip { padding: 48px 24px; flex-direction: column; text-align: center; }
  .cta-strip h2 { font-size: 24px; }
}
@media (max-width: 480px) {
  .hero-h1 { font-size: 28px; }
  .section-h2 { font-size: 26px; }
  .hero-btns { flex-direction: column; }
  .btn-primary, .btn-secondary { text-align: center; justify-content: center; }
}
