:root{
  --ink:#182233;
  --ink-soft:#4b5468;
  --paper:#FBF7F1;
  --paper-line:#E7DFD2;
  --navy:#131B2E;
  --navy-soft:#232E48;
  --gold:#D7A13B;
  --gold-soft:#F1DDAE;
  --mauve:#B5658F;
  --mauve-soft:#EBD2DF;
  --ivory:#F5F0E6;
  --shadow: 0 30px 60px -20px rgba(19,27,46,0.45);
}
*{box-sizing:border-box;}
html,body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 15%, rgba(213,161,59,0.10), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(181,101,143,0.12), transparent 45%),
    #EDE7DA;
  font-family:'Manrope',sans-serif;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 16px;
}
.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.scene{
  width:360px;
  max-width:88vw;
  height:600px;
  perspective:2000px;
}
.card{
  position:relative;
  width:100%;
  height:100%;
  transition:transform .8s cubic-bezier(.22,.9,.32,1);
  transform-style:preserve-3d;
  cursor:pointer;
}
.card.flipped{ transform:rotateY(180deg); }
.face{
  position:absolute;
  inset:0;
  border-radius:26px;
  backface-visibility:hidden;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
/* ---------- FRONT ---------- */
.front{
  background:var(--paper);
  border:1px solid var(--paper-line);
  padding:34px 26px 24px;
  align-items:center;
  text-align:center;
}
.front::before{
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:180px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle, var(--gold-soft) 0%, transparent 70%);
  opacity:.8;
}
.front::after{
  content:"";
  position:absolute;
  bottom:-70px; left:-70px;
  width:200px; height:200px;
  border-radius:50%;
  background:radial-gradient(circle, var(--mauve-soft) 0%, transparent 70%);
  opacity:.75;
}
.photo-ring{
  position:relative;
  z-index:2;
  width:132px;height:132px;
  border-radius:50%;
  padding:5px;
  background:conic-gradient(from 200deg, var(--gold) 0%, var(--mauve) 50%, var(--gold) 100%);
  margin-bottom:16px;
}
.photo-inner{
  width:100%;height:100%;
  border-radius:50%;
  background:var(--ivory);
  border:4px solid var(--paper);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.photo-inner svg{ width:72%; height:72%; color:#9a8a6e; }
.name{
  position:relative;z-index:2;
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:26px;
  letter-spacing:.2px;
  margin:0 0 4px;
  color:var(--navy);
}
.degree{
  position:relative;z-index:2;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.4px;
  color:var(--ink-soft);
  margin:0;
}
.regno{
  position:relative;z-index:2;
  font-size:11px;
  color:#8b8371;
  letter-spacing:.5px;
  margin-top:4px;
  font-weight:600;
}
.pulse-divider{
  position:relative;z-index:2;
  width:100%;
  height:26px;
  margin:16px 0 14px;
}
.hospital-row{
  position:relative;z-index:2;
  display:flex;
  gap:10px;
  width:100%;
  justify-content:center;
  margin-bottom:18px;
}
.h-pill{
  flex:1;
  border-radius:14px;
  padding:10px 8px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--paper-line);
  min-height:92px;
}
.h-pill span{ font-size:9px; font-weight:700; letter-spacing:.6px; color:#a89a76; text-transform:uppercase;}
.h-pill img{ max-width:100%; max-height:56px; width:auto; object-fit:contain; }
.eyebrow{
  position:relative;z-index:2;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:#a89a76;
  margin-bottom:10px;
}
.services{
  position:relative;z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:center;
}
.chip{
  font-size:10.8px;
  font-weight:600;
  padding:6px 11px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--paper-line);
  color:var(--navy-soft);
}
.flip-hint{
  position:relative;z-index:2;
  margin-top:auto;
  padding-top:14px;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:700;
  color:#b3a684;
  display:flex;
  align-items:center;
  gap:6px;
}
.flip-hint svg{ width:12px;height:12px; }

/* ---------- BACK ---------- */
.back{
  transform:rotateY(180deg);
  background:linear-gradient(165deg, var(--navy) 0%, #1a2740 60%, var(--navy-soft) 100%);
  color:var(--ivory);
  padding:26px 24px 20px;
}
.monogram{
  width:52px;height:52px;
  border-radius:50%;
  margin:0 auto 10px;
  background:linear-gradient(135deg, var(--gold), var(--mauve));
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:18px;
  color:#181425;
}
.back-title{
  text-align:center;
  font-family:'Fraunces',serif;
  font-size:18px;
  font-weight:600;
  margin:0 0 2px;
}
.back-sub{
  text-align:center;
  font-size:10.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#9AA6C4;
  margin-bottom:14px;
  font-weight:700;
}
.quick-row{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.quick{
  flex:1;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-decoration:none;
  color:var(--ivory);
}
.quick svg{ width:15px;height:15px; color:var(--gold); }
.quick span{ font-size:9px; font-weight:700; letter-spacing:.3px; text-align:center; line-height:1.2;}

.hosp-block{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:9px;
}
.hosp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.hosp-name{
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.3px;
}
.hosp-block.daya .hosp-name{ color:#F1C471; }
.hosp-block.vidya .hosp-name{ color:#E3A8C6; }
.hosp-time{
  font-size:9.5px;
  font-weight:700;
  padding:3px 8px;
  border-radius:20px;
  background:rgba(255,255,255,0.10);
  color:#D8DEEC;
  display:flex;
  align-items:center;
  gap:4px;
}
.hosp-time svg{ width:10px;height:10px; }
.hosp-addr{
  font-size:10.3px;
  line-height:1.45;
  color:#C7CEE1;
  margin:0 0 7px;
}
.hosp-tels{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tel-link{
  font-size:10.3px;
  font-weight:700;
  color:var(--ivory);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(255,255,255,0.08);
  padding:4px 9px;
  border-radius:20px;
}
.tel-link svg{ width:10px;height:10px; color:#8FE3B0; }

.social-row{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:12px 0 14px;
}
.social-row a{
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--ivory);
  text-decoration:none;
}
.social-row a svg{ width:15px;height:15px; }

.btn-row{
  display:flex;
  gap:9px;
  margin-top:auto;
}
.btn{
  flex:1;
  border:none;
  border-radius:13px;
  padding:12px 8px;
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  text-decoration:none;
}
.btn svg{ width:14px;height:14px; }
.btn.primary{
  background:linear-gradient(135deg, var(--gold), #c98a2c);
  color:#1a1408;
}
.btn.secondary{
  background:rgba(255,255,255,0.09);
  color:var(--ivory);
  border:1px solid rgba(255,255,255,0.22);
}
.toast{
  position:fixed;
  bottom:26px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--navy);
  color:var(--ivory);
  padding:11px 20px;
  border-radius:30px;
  font-size:12.5px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:all .35s ease;
  box-shadow:0 15px 30px -10px rgba(0,0,0,.4);
  z-index:50;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.tap-note{
  font-size:11.5px;
  color:#8a8265;
  font-weight:600;
  letter-spacing:.2px;
}
@media (max-width:400px){
  .scene{ height:620px; }
}