@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  --rose-gold:#D11E69;--rose-gold-light:#F06292;--rose-gold-dark:#9C0D4D;
  --cream:#FFFFFF;--cream-dark:#F8FDFF;
  --navy:#0084B4;--navy-light:#3ABEF9;
  --text-body:#2D3436;--text-muted:#636E72;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:'Raleway',sans-serif;background:var(--cream);color:var(--text-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;color:var(--navy)}
.gradient-text{background:linear-gradient(135deg,var(--navy),var(--rose-gold),var(--navy-light),var(--rose-gold));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 4s ease infinite}
@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
section{padding:5rem 0}
section#hero{padding-top: 0}
@media(max-width:768px){section{padding:3.5rem 0}}

/* Topbar */
#topbar{background:var(--navy);color:rgba(255,255,255,.8);font-family:'Raleway',sans-serif;font-size:.8rem;padding:.6rem 0}
#topbar a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s}
#topbar a:hover{color:var(--rose-gold-light)}
#topbar svg{color:var(--rose-gold)}

/* Nav */
#main-nav{background:rgba(248,253,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(209,30,105,.2);position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s,transform .3s}
#main-nav.scrolled{background:rgba(248,253,255,.98);box-shadow:0 4px 30px rgba(0,132,180,.12)}
.nav-link{font-weight:500;font-size:.9rem;color:var(--navy);text-decoration:none;position:relative;padding-bottom:2px;transition:color .2s}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--rose-gold);transition:width .3s}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link:hover,.nav-link.active{color:var(--rose-gold-dark)}
.nav-cta{background:var(--rose-gold);color:#fff;font-weight:600;font-size:.85rem;padding:.55rem 1.4rem;border-radius:9999px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px rgba(209,30,105,.4),0 0 20px rgba(209,30,105,.3);position:relative;overflow:hidden}
.nav-cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}
.nav-cta:hover::before{left:100%}
.nav-cta:active{transform:scale(.95)}
.nav-cta:hover{background:var(--rose-gold-dark);transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px rgba(209,30,105,.5),0 0 30px rgba(209,30,105,.4)}

/* Mobile menu */
#mobile-menu{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1);background:rgba(248,253,255,.98);backdrop-filter:blur(16px);border-top:1px solid rgba(209,30,105,.15)}
#mobile-menu.open{max-height:400px}
#mobile-menu a{display:block;padding:1rem 1.5rem;font-weight:500;color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(209,30,105,.08);transition:color .2s,background .2s;min-height:48px;align-items:center}
#mobile-menu a:hover{color:var(--rose-gold-dark);background:var(--cream-dark)}
@media(max-width:768px){
  #mobile-menu.open{max-height:500px}
  #mobile-menu a{padding:1.25rem 1.5rem;font-size:1rem}
}

/* Hero — editorial split layout */
#hero {
  background: linear-gradient(135deg, rgba(0,132,180,.85), rgba(58,190,249,.75)), url('sahara2026.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: .5;
  z-index: 0;
}
.hero-orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;will-change:transform }
.hero-orb-1 { width:700px;height:700px;background:rgba(209,30,105,.14);top:-20%;right:-10%;animation:parallax-float-1 20s ease-in-out infinite }
.hero-orb-2 { width:500px;height:500px;background:rgba(58,190,249,.8);bottom:-15%;left:-5%;animation:parallax-float-2 25s ease-in-out infinite }
@keyframes parallax-float-1{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-20px) scale(1.05)}50%{transform:translate(-20px,30px) scale(.95)}75%{transform:translate(-30px,-10px) scale(1.02)}}
@keyframes parallax-float-2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-25px,20px) scale(1.03)}66%{transform:translate(20px,-25px) scale(.97)}}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
  padding: 2.5rem 0 3rem;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.hero-photo-col { display:none; }
.hero-text-col { padding-right: 0; max-width: 800px; margin: 0 auto; transform: translateZ(20px); }

/* Hero mobile improvements */
@media(max-width:768px){
  #hero{min-height:auto;padding:5rem 0 7rem}
  .hero-grid{padding:1.5rem 0 2.5rem}
  .hero-text-col{padding-right:0;padding:0 0.5rem}
  .hero-orb-1{width:450px;height:450px;top:-15%;right:-25%}
  .hero-orb-2{width:350px;height:350px;bottom:-15%;left:-20%}
  .hero-kicker{margin-bottom:1.25rem}
  .hero-sub{margin-bottom:1.75rem}
  .hero-ctas{margin-bottom:2.25rem}
  .hero-stats{padding-top:1.25rem}
  .hero-marquee-strip{padding:.6rem 0}
}

@media(max-width:480px){
  #hero{padding:4rem 0 6rem}
  .hero-grid{padding:1rem 0 2rem}
  .hero-text-col{padding:0 0.25rem}
  .hero-orb-1{width:350px;height:350px;top:-10%;right:-35%}
  .hero-orb-2{width:280px;height:280px;bottom:-10%;left:-25%}
  .hero-kicker{margin-bottom:1rem}
  .hero-sub{margin-bottom:1.5rem}
  .hero-ctas{margin-bottom:1.75rem}
  .hero-stats{gap:1rem;padding-top:1rem}
}
.hero-kicker {
  font-family: 'Raleway', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose-gold);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2rem;
  animation: slide-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateX(-30px);
}
@keyframes slide-in-left {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}
.hero-kicker::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--rose-gold);
  flex-shrink: 0;
}
.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 2rem;
  animation: kinetic-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(40px) rotateX(-10deg);
}
.hero-h1 em { font-style: italic; color: var(--rose-gold-light); background:linear-gradient(90deg,var(--rose-gold-light),var(--rose-gold),var(--rose-gold-light));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:text-shimmer 3s linear infinite }
@keyframes text-shimmer{0%{background-position:0% center}100%{background-position:200% center}}
@keyframes kinetic-reveal {
  0% { opacity: 0; transform: translateY(40px) rotateX(-10deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); }
}
.hero-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 1.15rem;
  color: rgba(255,255,255,.7);
  line-height: 1.8;
  max-width: 600px;
  margin-bottom: 2.5rem;
  animation: fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  opacity: 0;
  transform: translateY(20px);
}
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-service-line {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2.5rem;
  font-family: 'Raleway', sans-serif;
  font-size: .9rem;
  color: rgba(255,255,255,.45);
  animation: fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  opacity: 0;
  transform: translateY(20px);
}
.hero-cycle-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  height: 32px;
}
.hero-cycle-inner {
  display: flex;
  flex-direction: column;
}
.hero-cycle-inner span {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  height: 32px;
  line-height: 32px;
  display: block;
  flex-shrink: 0;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 3rem;
  animation: fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
  opacity: 0;
  transform: translateY(20px);
}
.hero-stats {
  display: flex;
  gap: 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.75rem;
}
.hero-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: .2rem;
}
.hero-stat-num span { color: var(--rose-gold-light); }
.hero-stat-label {
  font-family: 'Raleway', sans-serif;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hero-photo-col {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-left: 2rem;
  transform: translateZ(40px);
}
.hero-photo-frame {
  position: relative;
  width: 420px;
  max-width: 100%;
  padding: 4px;
  background: linear-gradient(135deg, var(--rose-gold), var(--rose-gold-light), var(--navy-light), var(--rose-gold));
  background-size: 400% 400%;
  animation: gradient-border 8s ease infinite;
  border-radius: 8px;
}
@keyframes gradient-border {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-photo-frame::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: 4px;
  z-index: 1;
}
.hero-photo-frame::after {
  content: '';
  position: absolute;
  inset: -8px;
  background: linear-gradient(45deg, var(--rose-gold), transparent, var(--navy-light), transparent, var(--rose-gold));
  background-size: 400% 400%;
  animation: glow-rotate 4s linear infinite;
  border-radius: 12px;
  z-index: 0;
  opacity: .6;
}
@keyframes glow-rotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
.hero-photo-img {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: 4px;
  display: block;
  filter: saturate(.9);
}
.hero-name-card {
  position: absolute;
  top: 1.5rem;
  left: -2rem;
  background: var(--rose-gold);
  color: white;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(209,30,105,.4);
  min-width: 200px;
}
.hero-name-card p:first-child { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 700; margin-bottom: .15rem; }
.hero-name-card p:last-child { font-size: .72rem; opacity: .85; letter-spacing: .04em; }

.hero-marquee-strip {
  background: rgba(209,30,105,.08);
  border-top: 1px solid rgba(209,30,105,.15);
  padding: .85rem 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.hero-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.hero-marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 2.5rem;
  font-family: 'Raleway', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-dot {
  width: 4px; height: 4px;
  background: var(--rose-gold);
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.section-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-gold);margin-bottom:.5rem;display:block}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:var(--navy);line-height:1.2;position:relative;display:inline-block;background:linear-gradient(135deg,var(--navy),var(--rose-gold),var(--navy));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:title-gradient 6s ease infinite}
@keyframes title-gradient{0%,100%{background-position:0% center}50%{background-position:100% center}}
.section-title::after{content:'';position:absolute;bottom:-8px;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--rose-gold),var(--rose-gold-light));transition:width .6s cubic-bezier(0.16,1,0.3,1)}
.revealed .section-title::after{width:60px}
.divider{width:60px;height:3px;background:linear-gradient(90deg,var(--rose-gold),var(--rose-gold-light));border-radius:9999px;margin:.75rem auto 0}

.treatment-card{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:1.75rem;border:1px solid rgba(209,30,105,.12);box-shadow:0 2px 20px rgba(0,132,180,.06);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s;position:relative;overflow:hidden;cursor:pointer}
.treatment-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(209,30,105,.05),transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.treatment-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(209,30,105,.1) 0%,transparent 70%);opacity:0;transition:opacity .5s;pointer-events:none}
.treatment-card:hover::before{opacity:1}
.treatment-card:hover::after{opacity:1}
.treatment-card:hover{transform:translateY(-12px) rotateX(2deg);box-shadow:0 25px 50px rgba(0,132,180,.15),0 0 30px rgba(209,30,105,.1);border-color:rgba(209,30,105,.4)}
.card-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--cream-dark),var(--cream));border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--rose-gold-dark);margin-bottom:1.25rem;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px rgba(209,30,105,.15)}
.treatment-card:hover .card-icon{background:linear-gradient(135deg,var(--rose-gold),var(--rose-gold-dark));color:#fff;transform:scale(1.1) rotate(5deg);box-shadow:0 8px 25px rgba(209,30,105,.4)}
.card-title{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600;color:var(--navy);margin-bottom:.5rem}
.card-desc{font-size:.875rem;color:var(--text-muted);line-height:1.6;margin-bottom:1.25rem}
.card-link{font-size:.85rem;font-weight:600;color:var(--rose-gold-dark);display:flex;align-items:center;gap:.35rem;transition:gap .3s,transform .3s}
.treatment-card:hover .card-link{gap:.8rem;transform:translateX(5px)}

#about{background:var(--cream)}
.doctor-photo-wrap{background:linear-gradient(135deg,var(--cream-dark),#fff);border:3px solid transparent;border-radius:20px;padding:1rem;box-shadow:0 20px 60px rgba(0,132,180,.1),0 0 40px rgba(209,30,105,.1);animation:gentle-float 6s ease-in-out infinite;position:relative;overflow:hidden;background-clip:padding-box}
.doctor-photo-wrap::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(209,30,105,.1),transparent 30%);animation:rotate-glow 8s linear infinite;pointer-events:none}
.doctor-photo-wrap::after{content:'';position:absolute;inset:-3px;background:linear-gradient(45deg,var(--rose-gold),var(--rose-gold-light),var(--navy-light),var(--rose-gold));background-size:400% 400%;animation:doctor-border 6s ease infinite;border-radius:20px;z-index:-1}
@keyframes doctor-border{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes gentle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes rotate-glow{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.credential-badge{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(209,30,105,.2);border-radius:10px;font-size:.875rem;font-weight:500;color:var(--navy);box-shadow:0 2px 10px rgba(0,132,180,.05);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.credential-badge::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(209,30,105,.1),transparent);transition:left .5s}
.credential-badge:hover::before{left:100%}
.credential-badge:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,132,180,.1);border-color:rgba(209,30,105,.4)}
.credential-badge svg{color:var(--rose-gold);flex-shrink:0;transition:transform .3s}
.credential-badge:hover svg{transform:scale(1.2) rotate(10deg)}

#reviews{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);position:relative;perspective:1000px}
#reviews::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;opacity:.5}
.review-card{background:rgba(255,255,255,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:1.75rem;border:1px solid rgba(209,30,105,.12);box-shadow:0 4px 20px rgba(0,132,180,.06);transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;transform-style:preserve-3d;animation:card-float 6s ease-in-out infinite}
.review-card:nth-child(1){animation-delay:0s}
.review-card:nth-child(2){animation-delay:1s}
.review-card:nth-child(3){animation-delay:2s}
@keyframes card-float{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-10px) rotateX(3deg)}}
.review-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--rose-gold),var(--rose-gold-light),var(--rose-gold));transform:translateX(-100%);transition:transform .4s cubic-bezier(0.16,1,0.3,1)}
.review-card:hover::before{transform:translateX(0)}
.review-card:hover{transform:translateY(-15px) rotateY(5deg) scale(1.02);box-shadow:0 25px 60px rgba(0,132,180,.2),0 0 40px rgba(209,30,105,.15);animation-play-state:paused}
.review-stars{color:#F5A623;display:flex;gap:2px;margin-bottom:1rem}

#appointment{background:linear-gradient(135deg,var(--navy),var(--navy-light));position:relative;overflow:hidden;scroll-margin-top:80px;transition:all .5s cubic-bezier(.4,0,.2,1)}
#appointment.target-section{animation:section-highlight 1s ease-out}
@keyframes section-highlight{0%{transform:scale(.98);opacity:.8}50%{transform:scale(1.02);opacity:1}100%{transform:scale(1);opacity:1}}
#appointment::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(209,30,105,.2) 0%,transparent 70%);top:-200px;right:-100px;border-radius:50%;animation:pulse-glow 4s ease-in-out infinite}
#appointment::after{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(58,190,249,.15) 0%,transparent 70%);bottom:-100px;left:-50px;border-radius:50%;animation:pulse-glow 5s ease-in-out infinite 1s}
@keyframes pulse-glow{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:.9}}

#contact{background:var(--cream);position:relative}
#contact::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D11E69' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.contact-card{background:rgba(255,255,255,.75);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:14px;padding:1.25rem 1.5rem;border:1px solid rgba(209,30,105,.15);box-shadow:0 2px 15px rgba(0,132,180,.05);display:flex;align-items:flex-start;gap:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.contact-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--rose-gold),var(--rose-gold-light));transform:scaleY(0);transition:transform .3s cubic-bezier(0.16,1,0.3,1)}
.contact-card:hover::before{transform:scaleY(1)}
.contact-card:hover{box-shadow:0 12px 35px rgba(0,132,180,.12),0 0 20px rgba(209,30,105,.08);transform:translateY(-5px) translateX(3px)}
.contact-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--cream-dark),var(--cream));border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--rose-gold-dark);flex-shrink:0;transition:all .3s cubic-bezier(.4,0,.2,1)}
.contact-card:hover .contact-icon{transform:scale(1.1) rotate(-5deg);background:linear-gradient(135deg,var(--rose-gold),var(--rose-gold-dark));color:#fff;box-shadow:0 4px 15px rgba(209,30,105,.3)}
.form-input{width:100%;padding:.75rem 1rem;border-radius:10px;border:1.5px solid rgba(209,30,105,.25);font-size:.9rem;color:var(--navy);background:#fff;outline:none;font-family:'Raleway',sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}
.form-input:focus{border-color:var(--rose-gold);box-shadow:0 0 0 3px rgba(209,30,105,.15),0 4px 20px rgba(209,30,105,.1);transform:translateY(-2px)}
.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--navy);margin-bottom:.4rem;letter-spacing:.02em}
.map-wrap{border-radius:16px;overflow:hidden;border:2px solid rgba(209,30,105,.2);box-shadow:0 8px 30px rgba(0,132,180,.1)}

.btn-primary{background:linear-gradient(135deg,var(--rose-gold),var(--rose-gold-dark));color:#fff;font-weight:600;padding:.8rem 2rem;border-radius:9999px;border:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px rgba(209,30,105,.4),0 0 30px rgba(209,30,105,.2);display:inline-flex;align-items:center;gap:.5rem;font-family:'Raleway',sans-serif;text-decoration:none;position:relative;overflow:hidden;transform-style:preserve-3d}
.btn-primary::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}
.btn-primary:hover::before{width:300px;height:300px}
.btn-primary:hover{transform:translateY(-3px) scale(1.02) rotateX(5deg);box-shadow:0 8px 30px rgba(209,30,105,.5),0 0 40px rgba(209,30,105,.3)}
.btn-secondary{background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff;font-weight:600;padding:.75rem 2rem;border-radius:9999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;font-family:'Raleway',sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;transform-style:preserve-3d}
.btn-secondary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.btn-secondary:hover::before{left:100%}
.btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px) rotateY(-3deg);box-shadow:0 8px 25px rgba(255,255,255,.15)}

/* Chatbot Styles */
#chatbot-container{position:fixed;bottom:20px;right:20px;z-index:9999;font-family:'Raleway',sans-serif}
.chatbot-toggle-btn{width:60px;height:60px;background:linear-gradient(135deg,var(--rose-gold),var(--rose-gold-dark));border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 20px rgba(209,30,105,.4);transition:all .3s cubic-bezier(.4,0,.2,1);animation:chatbot-pulse 2s ease-in-out infinite}
.chatbot-toggle-btn:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(209,30,105,.5)}
@keyframes chatbot-pulse{0%,100%{box-shadow:0 4px 20px rgba(209,30,105,.4)}50%{box-shadow:0 4px 30px rgba(209,30,105,.6)}}
.chatbot-window{position:absolute;bottom:80px;right:0;width:380px;max-width:calc(100vw - 40px);background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.15);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s cubic-bezier(.4,0,.2,1)}
.chatbot-window.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.chatbot-header{background:linear-gradient(135deg,var(--navy),var(--navy-light));padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}
.chatbot-header-content{display:flex;align-items:center;gap:1rem}
.chatbot-avatar{width:40px;height:40px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--rose-gold-light)}
.chatbot-title h3{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;color:#fff;margin:0}
.chatbot-status{font-size:.75rem;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:.4rem}
.chatbot-status::before{content:'';width:6px;height:6px;background:#4ade80;border-radius:50%;animation:status-pulse 1.5s ease-in-out infinite}
@keyframes status-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.chatbot-close-btn{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s;display:flex;align-items:center;justify-content:center}
.chatbot-close-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.chatbot-messages{height:350px;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,253,255,.95))}
.chatbot-messages::-webkit-scrollbar{width:6px}
.chatbot-messages::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}
.chatbot-messages::-webkit-scrollbar-thumb{background:var(--rose-gold);border-radius:3px}
.chatbot-message{display:flex;gap:.75rem;animation:message-slide-in .3s ease-out}
@keyframes message-slide-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.bot-message{flex-direction:row}
.user-message{flex-direction:row-reverse}
.message-content{max-width:80%;padding:.875rem 1rem;border-radius:16px;font-size:.9rem;line-height:1.6}
.bot-message .message-content{background:linear-gradient(135deg,var(--cream-dark),#fff);border:1px solid rgba(209,30,105,.15);color:var(--text-body);border-bottom-left-radius:4px}
.user-message .message-content{background:linear-gradient(135deg,var(--rose-gold),var(--rose-gold-dark));color:#fff;border-bottom-right-radius:4px}
.chatbot-input-area{padding:1rem;background:rgba(255,255,255,.95);border-top:1px solid rgba(209,30,105,.1)}
.chatbot-suggestions{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.suggestion-btn{background:rgba(209,30,105,.08);border:1px solid rgba(209,30,105,.2);color:var(--rose-gold-dark);padding:.5rem .875rem;border-radius:20px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;font-family:'Raleway',sans-serif}
.suggestion-btn:hover{background:var(--rose-gold);color:#fff;border-color:var(--rose-gold)}
.chatbot-input-wrapper{display:flex;gap:.5rem}
.chatbot-input-wrapper input{flex:1;padding:.75rem 1rem;border:1.5px solid rgba(209,30,105,.2);border-radius:12px;font-size:.9rem;outline:none;transition:all .2s;font-family:'Raleway',sans-serif;background:#fff}
.chatbot-input-wrapper input:focus{border-color:var(--rose-gold);box-shadow:0 0 0 3px rgba(209,30,105,.1)}
.chatbot-send-btn{width:44px;height:44px;background:linear-gradient(135deg,var(--rose-gold),var(--rose-gold-dark));border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.chatbot-send-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px rgba(209,30,105,.3)}
.chatbot-send-btn:disabled{opacity:.5;cursor:not-allowed}
.typing-indicator{display:flex;gap:.3rem;padding:.5rem}
.typing-indicator span{width:8px;height:8px;background:var(--rose-gold);border-radius:50%;animation:typing-bounce 1.4s ease-in-out infinite}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes typing-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:768px){.chatbot-window{width:calc(100vw - 40px);max-width:350px;right:0;height:500px}.chatbot-messages{height:350px}}

footer{background:var(--navy);color:rgba(255,255,255,.7)}
footer h3,footer h4{color:#fff}
.footer-link{color:rgba(255,255,255,.65);text-decoration:none;font-size:.875rem;transition:color .2s}
.footer-link:hover{color:var(--rose-gold-light)}
.social-btn{width:38px;height:38px;border-radius:9999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;position:relative;overflow:hidden}
.social-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;transform:translate(-50%,-50%);transition:width .4s,height .4s}
.social-btn:hover::before{width:80px;height:80px}
.social-btn:hover{background:var(--rose-gold);border-color:var(--rose-gold);color:#fff;transform:translateY(-3px) scale(1.1);box-shadow:0 8px 25px rgba(209,30,105,.4)}

#whatsapp-float{position:fixed;bottom:5rem;right:1.5rem;z-index:100;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 30px rgba(37,211,102,.3);cursor:pointer;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);animation:whatsapp-pulse 2s ease-in-out infinite}
#whatsapp-float:hover{transform:scale(1.15) rotate(10deg);box-shadow:0 8px 30px rgba(37,211,102,.6),0 0 40px rgba(37,211,102,.4)}
@keyframes whatsapp-pulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 30px rgba(37,211,102,.3)}50%{box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 50px rgba(37,211,102,.5)}}

#back-to-top{position:fixed;bottom:1.5rem;right:1.5rem;z-index:100;width:44px;height:44px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;border:none;box-shadow:0 4px 15px rgba(0,132,180,.3),0 0 25px rgba(0,132,180,.2);opacity:0;pointer-events:none;transform:translateY(10px);transition:all .3s cubic-bezier(.4,0,.2,1)}
#back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
#back-to-top:hover{background:var(--rose-gold-dark);transform:translateY(-3px) scale(1.1);box-shadow:0 8px 25px rgba(209,30,105,.4),0 0 35px rgba(209,30,105,.3)}

.reveal{opacity:0;transform:translateY(40px) rotateX(-5deg);transition:all .8s cubic-bezier(0.16,1,0.3,1)}
.reveal.revealed{opacity:1;transform:translateY(0) rotateX(0)}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}.reveal-delay-6{transition-delay:.6s}

.form-success{background:#F0FDF4;border:1.5px solid #86EFAC;border-radius:10px;padding:1rem;color:#166534;font-size:.9rem;font-weight:500;display:none;align-items:center;gap:.5rem}
.form-success.show{display:flex}
.form-error{background:#FEF2F2;border:1.5px solid #FCA5A5;border-radius:10px;padding:1rem;color:#991B1B;font-size:.85rem;display:none;margin-top:.5rem}
.form-error.show{display:block}

/* Mobile Responsive Improvements */
@media(max-width:768px){
  .container{padding:0 1.25rem}
  
  /* Navigation */
  #main-nav{padding:.75rem 0}
  .nav-cta{padding:.6rem 1.25rem;font-size:.85rem}
  
  /* Hero */
  .hero-text-col{padding-right:0;padding:1.25rem 0}
  .hero-h1{font-size:2.25rem;line-height:1.15}
  .hero-sub{font-size:.95rem;max-width:100%;line-height:1.6}
  .hero-ctas{flex-direction:column;width:100%;gap:.75rem}
  .hero-ctas .btn-primary,.hero-ctas .btn-secondary{width:100%;justify-content:center;padding:.85rem 1.5rem}
  .hero-stats{flex-wrap:wrap;gap:1.25rem}
  .hero-stat-num{font-size:1.5rem}
  
  /* Sections */
  .section-title{font-size:2rem;line-height:1.2}
  
  /* Treatment Cards */
  .treatment-card{padding:1.5rem}
  .card-icon{width:48px;height:48px}
  
  /* About Section */
  .doctor-photo-wrap{max-width:100%;margin:0 auto}
  
  /* Contact Section */
  .contact-card{flex-direction:column;padding:1.25rem}
  .contact-icon{width:40px;height:40px}
  
  /* Forms */
  .form-input{font-size:.9rem;padding:.75rem 1rem}
  
  /* Footer */
  footer{padding:3.5rem 0 2.5rem}
  
  /* Floating Buttons */
  #whatsapp-float{width:52px;height:52px;bottom:4.5rem;right:1.25rem}
  #back-to-top{width:44px;height:44px;bottom:1.25rem;right:1.25rem}

  /* Touch-friendly improvements */
  a,button{min-height:48px;min-width:48px;display:inline-flex;align-items:center;justify-content:center}
  .nav-link,.nav-cta{min-height:auto;min-width:auto}
  
  /* Grid layouts */
  .treatment-grid{grid-template-columns:1fr;gap:1rem}
  
  /* Images */
  img{max-width:100%;height:auto}

  /* Booking form improvements */
  #booking-form{gap:1rem}
  .form-group{margin-bottom:.75rem}
  
  /* Section spacing */
  section{padding:4rem 0}
}

@media(max-width:480px){
  .container{padding:0 1rem}
  .hero-h1{font-size:1.85rem;line-height:1.15}
  .hero-sub{font-size:.9rem;line-height:1.55}
  .hero-kicker{font-size:.68rem}
  .section-title{font-size:1.75rem;line-height:1.2}
  .treatment-card{padding:1.25rem}
  .btn-primary,.btn-secondary{padding:.75rem 1.5rem;font-size:.9rem}
  
  /* Map */
  .map-wrap{height:280px}

  /* Extra small touch targets */
  .social-btn{width:42px;height:42px}
  #whatsapp-float{width:48px;height:48px}
  
  /* Text adjustments */
  body{font-size:.95rem;line-height:1.6}
  .hero-service-line{font-size:.85rem}
  
  /* Section spacing */
  section{padding:3.5rem 0}
  
  /* Grid gap */
  .treatment-grid{gap:.75rem}
}

/* Table Scroll for Mobile */
@media(max-width:768px){
  .db-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .db-table{min-width:800px}
  .db-table th,.db-table td{padding:.5rem;font-size:.8rem}
  .db-table th{white-space:nowrap}
}