/* =====================================================
   CARE DENTAL — OPTIMIZED CORE ENHANCEMENT CSS
   Version: 2.0 | Performance + Premium Visual Layer
===================================================== */

/* 1. CSS CUSTOM PROPERTIES EXTENSION */
:root {
  --opt-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --opt-transition-med: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --opt-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --opt-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);
  --opt-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
  --opt-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --opt-glow-blue: 0 0 30px rgba(0, 207, 255, 0.3);
  --opt-glow-pink: 0 0 30px rgba(236, 72, 153, 0.3);
  --opt-glow-green: 0 0 30px rgba(37, 211, 102, 0.3);
  --opt-radius-card: 20px;
  --opt-radius-btn: 12px;
}

/* 2. PERFORMANCE: CONTENT-VISIBILITY FOR OFFSCREEN SECTIONS */
.about-section,
.why-section,
.triage-section,
.tech-section,
.journey-section,
.awards-section,
.listings-section,
.quiz-section,
.makeover-section,
.treatment-explorer-section,
.models-preview-section,
.doc-videos-section,
.video-section,
.testimonials-section,
.faq-section,
.contact-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* 3. GLOBAL */
html { scroll-behavior: smooth; }
::selection { background: rgba(0, 207, 255, 0.3); color: #fff; }
::-moz-selection { background: rgba(0, 207, 255, 0.3); color: #fff; }

/* 4. ENHANCED SCROLL PROGRESS BAR */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #00cfff 0%, #0070ff 30%, #a855f7 60%, #ec4899 80%, #00cfff 100%);
  background-size: 200% 100%;
  animation: progressGradientShift 3s linear infinite;
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(0, 207, 255, 0.6), 0 0 20px rgba(0, 207, 255, 0.3);
}

@keyframes progressGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 5. SERVICE CARDS */
.service-card {
  position: relative;
  transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med), border-color var(--opt-transition-med) !important;
  will-change: transform;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 207, 255, 0.06), rgba(0, 91, 255, 0.03));
  opacity: 0;
  transition: opacity var(--opt-transition-med);
  z-index: 0;
  border-radius: inherit;
}
.service-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 60px rgba(0, 207, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4) !important; border-color: rgba(0, 207, 255, 0.4) !important; }
.service-card:hover::before { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }
.service-card:hover .service-icon-3d { transform: scale(1.15) rotate(-5deg); box-shadow: 0 0 30px rgba(0, 207, 255, 0.4); }
.service-icon-3d { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }

/* 6. DOCTOR CARDS */
.doctor-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.doctor-card:hover { transform: translateY(-6px); box-shadow: 0 30px 80px rgba(0, 207, 255, 0.15) !important; }
.doctor-photo { transition: transform var(--opt-transition-slow) !important; }
.doctor-card:hover .doctor-photo { transform: scale(1.03); }

/* 7. STAT COUNTERS */
.stat-num { display: inline-block; transition: transform 0.3s ease; }
.stat-strip-item:hover .stat-num { transform: scale(1.1); color: #00cfff; }
.stat-strip-item { transition: transform var(--opt-transition-med) !important; }
.stat-strip-item:hover { transform: translateY(-3px); }

/* 8. NAVBAR */
.navbar { transition: background var(--opt-transition-med), box-shadow var(--opt-transition-med), backdrop-filter var(--opt-transition-med) !important; }
.nav-link { position: relative; transition: color var(--opt-transition-fast) !important; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0%; height: 2px; background: linear-gradient(90deg, #00cfff, #0072ff); border-radius: 2px; transition: width var(--opt-transition-med); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* 9. FLOATING WHATSAPP */
.fab-btn.whatsapp { position: relative; overflow: visible !important; }
.fab-btn.whatsapp::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.5); animation: waPulseRing 2s ease-out infinite; }
.fab-btn.whatsapp::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.25); animation: waPulseRing 2s ease-out infinite 0.4s; }
@keyframes waPulseRing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }

/* 10. SCROLL TO TOP */
.fab-btn.scroll-top { opacity: 0; transform: translateY(20px) scale(0.8); transition: opacity var(--opt-transition-med), transform var(--opt-transition-med), box-shadow var(--opt-transition-fast) !important; pointer-events: none; }
.fab-btn.scroll-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.fab-btn.scroll-top:hover { box-shadow: 0 8px 25px rgba(0, 207, 255, 0.5) !important; transform: translateY(-3px) scale(1.05) !important; }

/* 11. TICKER STRIP FADE EDGES */
.ticker-strip { position: relative; overflow: hidden; }
.ticker-strip::before, .ticker-strip::after { content: ''; position: absolute; top: 0; width: 80px; height: 100%; z-index: 2; pointer-events: none; }
.ticker-strip::before { left: 0; background: linear-gradient(90deg, #050c1a, transparent); }
.ticker-strip::after { right: 0; background: linear-gradient(-90deg, #050c1a, transparent); }

/* 12. TECH CARDS */
.tech-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med), border-color var(--opt-transition-med) !important; position: relative; overflow: hidden; }
.tech-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, rgba(0, 207, 255, 0.08), transparent 30%); animation: techCardRotate 6s linear infinite; opacity: 0; transition: opacity var(--opt-transition-med); }
.tech-card:hover::before { opacity: 1; }
.tech-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 50px rgba(0, 207, 255, 0.2), 0 0 0 1px rgba(0, 207, 255, 0.3) !important; border-color: rgba(0, 207, 255, 0.4) !important; }
@keyframes techCardRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tech-card-icon { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.tech-card:hover .tech-card-icon { transform: scale(1.15) rotate(-8deg); box-shadow: 0 0 25px rgba(0, 207, 255, 0.5) !important; }

/* 13. SECTION TAG SHIMMER */
.section-tag { position: relative; overflow: hidden; }
.section-tag::before { content: ''; position: absolute; top: 50%; left: -100%; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 207, 255, 0.4)); animation: tagLineSlide 2s ease-in-out infinite alternate; }
@keyframes tagLineSlide { 0% { left: -100%; opacity: 0; } 100% { left: 150%; opacity: 1; } }

/* 14. TESTIMONIAL CARDS */
.testimonial-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med), border-color var(--opt-transition-med) !important; }
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 207, 255, 0.15) !important; border-color: rgba(0, 207, 255, 0.3) !important; }

/* 15. FAQ ITEMS */
.faq-item { transition: border-color var(--opt-transition-med), box-shadow var(--opt-transition-med), transform var(--opt-transition-med) !important; }
.faq-item:hover { border-color: rgba(0, 207, 255, 0.3) !important; transform: translateX(4px); }
.faq-item.active { box-shadow: 0 8px 30px rgba(0, 207, 255, 0.1) !important; border-color: rgba(0, 207, 255, 0.4) !important; }
.faq-chevron { transition: transform var(--opt-transition-med) !important; }
.faq-item.active .faq-chevron { transform: rotate(180deg); }

/* 16. GALLERY BENTO */
.gbento-item { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.gbento-item:hover { transform: scale(1.02); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(0, 207, 255, 0.4) !important; z-index: 2; }
.gbento-img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.gbento-item:hover .gbento-img { transform: scale(1.08) !important; }

/* 17. AWARD CARDS */
.award-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med), border-color var(--opt-transition-med) !important; }
.award-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 20px 50px rgba(0, 207, 255, 0.15) !important; border-color: rgba(0, 207, 255, 0.4) !important; }
.award-icon { transition: transform var(--opt-transition-med) !important; display: inline-block; }
.award-card:hover .award-icon { transform: scale(1.2) rotate(-5deg); }

/* 18. CONTACT CARDS */
.contact-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med), border-color var(--opt-transition-med) !important; }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 207, 255, 0.15) !important; border-color: rgba(0, 207, 255, 0.3) !important; }

/* 19. LISTING CARDS */
.listing-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med), border-color var(--opt-transition-med) !important; }
.listing-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0, 207, 255, 0.18) !important; border-color: rgba(0, 207, 255, 0.4) !important; }

/* 20. HERO DUO FLOAT */
.hero-duo-frame { animation: heroDuoFloat 6s ease-in-out infinite; }
@keyframes heroDuoFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }

/* 21. BUTTONS */
.btn-primary, .btn-ghost, .btn-nav, .btn-book-doctor { position: relative; overflow: hidden; }
.btn-primary::after, .btn-ghost::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity var(--opt-transition-fast); }
.btn-primary:hover::after, .btn-ghost:hover::after { opacity: 1; }
.btn-primary:active, .btn-ghost:active { transform: scale(0.97) !important; }

/* 22. GALLERY SHIMMER */
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
.gbento-shimmer { background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%); background-size: 400% 100%; animation: shimmer 2.5s infinite; }

/* 23. JOURNEY ITEMS */
.journey-item { transition: transform var(--opt-transition-med) !important; }
.journey-item:hover { transform: translateX(8px); }
.journey-node { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.journey-item:hover .journey-node { transform: scale(1.15); box-shadow: 0 0 25px rgba(0, 207, 255, 0.5) !important; }

/* 24. TRUST BADGES */
.trust-badge-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.trust-badge-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 207, 255, 0.2) !important; }

/* 25. HERO PILLS */
.hero-pill { transition: transform var(--opt-transition-fast), box-shadow var(--opt-transition-fast) !important; }
.hero-pill:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(0, 207, 255, 0.3) !important; }

/* 26. PRELOADER EXIT */
#preloader.hidden { animation: preloaderExit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes preloaderExit { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.95); pointer-events: none; } }

/* 27. CHATBOT BUBBLE */
.chatbot-bubble { box-shadow: 0 8px 25px rgba(0, 207, 255, 0.35) !important; transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.chatbot-bubble:hover { transform: scale(1.1) translateY(-3px) !important; box-shadow: 0 16px 40px rgba(0, 207, 255, 0.5) !important; }

/* 28. WHY FEATURES */
.why-feature { transition: transform var(--opt-transition-med), background var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; border-radius: 12px; padding: 12px; }
.why-feature:hover { background: rgba(0, 207, 255, 0.04); transform: translateX(8px); box-shadow: inset 0 0 0 1px rgba(0, 207, 255, 0.15); }
.why-feature-icon { transition: transform var(--opt-transition-med) !important; }
.why-feature:hover .why-feature-icon { transform: scale(1.15) rotate(-8deg); }

/* 29. FOOTER LINKS */
.footer-col ul li a { position: relative; padding-left: 0; transition: padding-left var(--opt-transition-fast), color var(--opt-transition-fast) !important; }
.footer-col ul li a:hover { padding-left: 8px; color: #00cfff !important; }

/* 30. SKIP NAV */
.skip-nav { position: fixed; top: -100px; left: 16px; z-index: 99999; background: #00cfff; color: #050c1a; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: top 0.3s ease; }
.skip-nav:focus { top: 16px; }

/* 31. EMERGENCY BANNER */
.emergency-banner { animation: emergencyPulse 3s ease-in-out infinite !important; }
@keyframes emergencyPulse { 0%, 100% { box-shadow: 0 2px 20px rgba(239, 68, 68, 0.3); } 50% { box-shadow: 0 4px 30px rgba(239, 68, 68, 0.6); } }

/* 32. EXPLORER CARDS */
.explorer-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.explorer-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(0, 207, 255, 0.2) !important; }

/* 33. MOBILE QUICK BAR */
.bar-btn { transition: transform var(--opt-transition-fast), background var(--opt-transition-fast) !important; }
.bar-btn:active { transform: scale(0.92) !important; }

/* 34. SYMPTOM CHIPS */
.symptom-chip { transition: transform var(--opt-transition-fast), box-shadow var(--opt-transition-fast), background var(--opt-transition-fast) !important; }
.symptom-chip:hover { transform: translateY(-4px) scale(1.03) !important; }
.symptom-chip.selected { animation: chipSelectPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes chipSelectPop { 0% { transform: scale(0.95); } 60% { transform: scale(1.08); } 100% { transform: scale(1.04); } }

/* 35. MODEL PREVIEW CARDS */
.model-preview-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.model-preview-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(0, 207, 255, 0.2) !important; }

/* 36. SPEC CHIPS */
.spec-chip { transition: transform var(--opt-transition-fast), box-shadow var(--opt-transition-fast) !important; }
.spec-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 207, 255, 0.25) !important; }

/* 37. DOC VIDEO CARDS */
.doc-video-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.doc-video-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 207, 255, 0.15) !important; }

/* 38. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-duo-frame { animation: none !important; }
  .fab-btn.whatsapp::before, .fab-btn.whatsapp::after { animation: none !important; }
  .ticker-inner { animation-play-state: paused !important; }
}

/* 39. PRINT STYLES */
@media print {
  .navbar, .emergency-banner, .floating-actions, .chatbot-wrapper, .mobile-quick-bar, #scrollProgress, .custom-cursor, .cursor-follower, #particleCanvas { display: none !important; }
  body { background: white !important; color: black !important; }
}

/* 40. SECTION ENTRANCE ANIMATIONS */
.opt-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.opt-reveal.revealed { opacity: 1; transform: translateY(0); }
.opt-reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.opt-reveal-left.revealed { opacity: 1; transform: translateX(0); }
.opt-reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.opt-reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* 41. GRADIENT TEXT ANIMATION */
.gradient-text { background-size: 200% 100%; animation: gradientTextShift 4s ease-in-out infinite alternate; }
@keyframes gradientTextShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* 42. LIVE STATUS BADGE */
.live-status-badge.open .live-status-dot { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: liveStatusPulse 2s infinite !important; }
@keyframes liveStatusPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* 43. HERO BADGE */
.hero-badge { animation: heroBadgePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes heroBadgePop { from { opacity: 0; transform: scale(0.8) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* 44. VIDEO PLAYER */
.video-player-card { transition: box-shadow var(--opt-transition-med), transform var(--opt-transition-med) !important; }
.video-player-card:hover { box-shadow: 0 30px 80px rgba(0, 207, 255, 0.2) !important; transform: translateY(-4px); }

/* 45. QUIZ OPTIONS */
.quiz-opt-card { transition: transform var(--opt-transition-fast), box-shadow var(--opt-transition-fast), border-color var(--opt-transition-fast) !important; }
.quiz-opt-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 30px rgba(0, 207, 255, 0.2) !important; }

/* 46. MOBILE IMPROVEMENTS */
@media (max-width: 768px) {
  .tech-card::before { display: none; }
  .hero-duo-frame { animation-duration: 8s !important; }
  .faq-question { min-height: 56px; }
  .gallery-pill { min-height: 40px; padding: 8px 14px !important; }
  .doctor-photo { max-width: 100%; height: auto; }
  .hero-stats-strip { flex-wrap: wrap !important; gap: 16px !important; }
  .stat-strip-divider { display: none !important; }
}

@media (max-width: 480px) {
  .hero-pill { font-size: 0.8rem !important; padding: 6px 12px !important; }
  .duo-info-banner { flex-direction: column !important; gap: 12px !important; }
}

/* 47. SCROLL INDICATOR */
.scroll-indicator { animation: scrollIndicatorBounce 2s ease-in-out infinite !important; }
@keyframes scrollIndicatorBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* 48. ABOUT FLOAT CARDS */
.about-float-card { transition: transform var(--opt-transition-med), box-shadow var(--opt-transition-med) !important; }
.about-float-card.card-a { animation: floatCardA 5s ease-in-out infinite; }
.about-float-card.card-b { animation: floatCardB 6s ease-in-out infinite; }
@keyframes floatCardA { 0%, 100% { transform: translate(-10%, 70%) rotate(-3deg); } 50% { transform: translate(-10%, 65%) rotate(-3deg) translateY(-6px); } }
@keyframes floatCardB { 0%, 100% { transform: translate(10%, 80%) rotate(3deg); } 50% { transform: translate(10%, 75%) rotate(3deg) translateY(-6px); } }
.about-float-card:hover { transform: scale(1.06) !important; box-shadow: 0 20px 50px rgba(0, 207, 255, 0.3) !important; }

/* 49. LOGO VERIFIED BADGE */
.logo-verified-tag { animation: verifiedBadgePulse 3s ease-in-out infinite !important; }
@keyframes verifiedBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 207, 255, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(0, 207, 255, 0); } }

/* 50. SECTION DIVIDER */
.section-divider { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(0, 207, 255, 0.3), rgba(168, 85, 247, 0.3), transparent); margin: 0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO VIDEO GUARANTEE — hospital-tour-4k.mp4
   Ensures background video is always visible and covering
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-video-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

#heroBgVideo {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* Ensure poster image shows while video loads */
#heroBgVideo::before {
  content: '';
  display: block;
}