/* -- RESPONSIVE -- */
@media (max-width: 900px) {
  .navbar { margin-top: 0; padding: 10px 0; top: 0; }
  .hero-inner, .doctor-inner, .faq-inner, .clinic-inner { grid-template-columns: 1fr; }
  .hero-inner { gap: 30px; }
  .hero-visual { order: -1; max-width: 320px; margin: 0 auto; }
  .proc-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .stats-row { gap: 16px; }
  .nav-links { display: flex; justify-content: flex-end; }
  .nav-links li:not(.mobile-call-only) { display: none; }
  .nav-links .mobile-call-only { display: list-item; }
  .logo-mark { width: 110px; }
  .hero-card { left: -10px; bottom: -14px; padding: 12px 14px; }
  .hero-card2 { right: -10px; top: 16px; padding: 12px 14px; }
  .hero-card .card-num { font-size: 24px; }
  .hero-card2 .card-text { font-size: 12px; }
  .hero-card2 .card-label { font-size: 10px; }
  .doctor-img-wrap, .clinic-visual { max-width: 520px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  body { padding-top: 56px; }
  .procedures, .doctor, .why-us, .gallery, .testimonials, .faq, .clinic { padding: 50px 0; }
  .hero { padding: 36px 0 28px; }
  .hero-inner { gap: 18px; }
  .proc-grid, .gallery-grid, .why-grid, .clinic-features { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(30px, 9vw, 42px); margin-bottom: 14px; }
  .hero-desc, .section-sub { font-size: 15px; }
  .hero-desc { margin-bottom: 22px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas { margin-bottom: 24px; }
  .hero-ctas a { width: 100%; justify-content: center; }
  .hero-badge { margin-bottom: 14px; padding: 7px 14px; font-size: 11px; }
  .hero-trust { gap: 10px; }
  .trust-item { width: 100%; }
  .hero-visual { max-width: 100%; }
  .hero-img-wrap { aspect-ratio: 1 / 1.02; }
  .hero-card { left: 8px; bottom: -10px; padding: 10px 12px; }
  .hero-card2 { right: 8px; top: 8px; padding: 10px 12px; }
  .hero-card .card-num { font-size: 22px; }
  .hero-card .card-label, .hero-card2 .card-label { font-size: 10px; }
  .hero-card2 .card-text { font-size: 11px; }
  .doctor-img-wrap, .clinic-visual { max-width: 100%; }
  .stats-row { flex-wrap: wrap; gap: 12px; }
  .stat-box { flex: 1 1 calc(50% - 12px); min-width: 140px; }
  .testimonials-carousel .owl-nav { gap: 8px; }
  .testimonials-carousel .owl-nav button.owl-prev,
  .testimonials-carousel .owl-nav button.owl-next { width: 38px; height: 38px; font-size: 18px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .final-cta { padding: 72px 0; }
  .final-cta p { font-size: 16px; }
  .final-cta-btns { flex-direction: column; align-items: stretch; }
  .final-cta-btns a { width: 100%; justify-content: center; }
  .sticky-bar { font-size: 11px; gap: 12px; padding: 8px 12px; }
  .sticky-bar a { font-size: 11px; }
  body { padding-bottom: 76px; }
  .mobile-bottom-cta { display: flex; flex-direction: row; align-items: center; gap: 10px; }
  .mobile-bottom-cta a { flex: 1 1 0; font-size: 14px; padding: 12px 8px; }
  .float-wa { bottom: 90px; }
}

@media (max-width: 420px) {
  .navbar { margin-top: 0; padding: 8px 0; top: 0; }
  .logo-mark { width: 96px; }
  .hero { padding: 30px 0 22px; }
  .hero-card { left: 8px; bottom: -10px; }
  .hero-card2 { right: 8px; top: 8px; }
  .stat-box { flex-basis: 100%; }
  .mobile-bottom-cta { padding: 8px 10px; gap: 8px; }
  .mobile-bottom-cta a { font-size: 12px; padding: 10px 6px; }
}