/* =========================================================
   SRS HOSPITAL — DESIGN TOKENS
   ========================================================= */
:root{
  --primary: #0B6EFD;
  --primary-dark: #0952C7;
  --primary-light: #E8F1FF;
  --secondary: #13B981;
  --secondary-light: #E4F9F0;
  --emergency: #EF4444;
  --emergency-dark: #C62828;
  --bg: #F8FAFC;
  --ink: #0F1B2D;
  --muted: #5C6B7A;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 20px 45px -20px rgba(15,27,45,0.18);
  --shadow-card: 0 10px 30px -12px rgba(15,27,45,0.15);
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', sans-serif;
  color: var(--ink);
  background: var(--bg);
}
h1,h2,h3,h4,.font-display{ font-family:'Poppins', sans-serif; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   GRADIENT / GLASS UTILITIES
   ========================================================= */
.grad-primary{ background: linear-gradient(135deg, var(--primary) 0%, #3B8BFF 55%, var(--secondary) 100%); }
.grad-dark-overlay{ background: linear-gradient(180deg, rgba(11,20,38,0.15) 0%, rgba(8,15,28,0.78) 100%); }

.glass{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.5);
}
.glass-dark{
  background: rgba(15,27,45,0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
}

/* =========================================================
   HEADER
   ========================================================= */
#site-header{ transition: all .35s ease; }
#site-header.scrolled{
  box-shadow: 0 8px 30px -12px rgba(15,27,45,0.15);
}
.nav-link{ position:relative; font-weight:500; color:var(--ink); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0%; height:2px;
  background: var(--primary); transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color: var(--primary); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .85rem 1.75rem; border-radius: 999px; font-weight:600; font-size:.95rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--primary); color:#fff; box-shadow: 0 12px 26px -10px rgba(11,110,253,0.55); }
.btn-primary:hover{ background: var(--primary-dark); }
.btn-emergency{ background: var(--emergency); color:#fff; box-shadow: 0 12px 26px -10px rgba(239,68,68,0.55); }
.btn-emergency:hover{ background: var(--emergency-dark); }
.btn-whatsapp{ background: #25D366; color:#fff; box-shadow: 0 12px 26px -10px rgba(37,211,102,0.55); }
.btn-whatsapp:hover{ background:#1ebe5a; }
.btn-outline{ border:1.5px solid rgba(15,27,45,0.15); color:var(--ink); background:#fff; }
.btn-outline:hover{ border-color: var(--primary); color: var(--primary); }
.btn-outline-white{ border:1.5px solid rgba(255,255,255,0.5); color:#fff; background:transparent; }
.btn-outline-white:hover{ background: rgba(255,255,255,0.15); }

/* =========================================================
   CARDS
   ========================================================= */
.card-soft{
  background:#fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform .35s ease, box-shadow .35s ease;
  border: 1px solid rgba(15,27,45,0.04);
}
.card-soft:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }

.icon-tile{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--primary-light); color: var(--primary);
  font-size:1.35rem; flex-shrink:0;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.card-soft:hover .icon-tile{ background: var(--primary); color:#fff; transform: rotate(-6deg) scale(1.08); }

/* service / facility image hover zoom */
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition: transform .6s ease; }
.img-zoom:hover img{ transform: scale(1.08); }

/* =========================================================
   TRUST BADGE PILLS
   ========================================================= */
.trust-pill{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:999px;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(8px);
  font-size:.82rem; font-weight:600; color: var(--ink);
  box-shadow: 0 6px 16px -8px rgba(15,27,45,0.25);
}
.trust-pill i{ color: var(--secondary); }

/* =========================================================
   FLOATING EMERGENCY CARD (hero)
   ========================================================= */
.float-card{
  animation: floatY 4.5s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

/* =========================================================
   COUNTER / SCROLL ANIMATIONS
   ========================================================= */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-stagger > * { opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal-stagger.is-visible > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .19s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .26s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .33s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .40s; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: .47s; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay: .54s; }

/* =========================================================
   FLOATING WHATSAPP + CALL BUTTONS
   ========================================================= */
.floating-actions{ position:fixed; right:18px; bottom:22px; z-index:60; display:flex; flex-direction:column; gap:12px; }
.floating-actions a{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem; box-shadow: 0 14px 30px -10px rgba(15,27,45,0.4);
  transition: transform .25s ease;
}
.floating-actions a:hover{ transform: scale(1.1); }
.fab-whatsapp{ background:#25D366; }
.fab-call{ background: var(--emergency); animation: pulseRing 2.2s infinite; }
@keyframes pulseRing{
  0%{ box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(239,68,68,0); }
  100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-item .faq-chevron{ transition: transform .3s ease; }
.faq-item.open .faq-chevron{ transform: rotate(180deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-item.open .faq-answer{ max-height: 320px; }

/* =========================================================
   MOBILE MENU
   ========================================================= */
#mobile-menu{ transform: translateX(100%); transition: transform .4s cubic-bezier(.16,1,.3,1); }
#mobile-menu.open{ transform: translateX(0); }

/* =========================================================
   GALLERY LIGHTBOX
   ========================================================= */
#lightbox{ background: rgba(8,15,28,0.92); }
.gallery-item{ cursor:pointer; }

/* =========================================================
   SECTION EYEBROW
   ========================================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--primary); background: var(--primary-light);
  padding:.4rem .9rem; border-radius:999px;
}

/* Custom scrollbar for a premium feel */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#EEF2F7; }
::-webkit-scrollbar-thumb{ background: var(--primary); border-radius:10px; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--primary); outline-offset: 2px;
}

/* Line clamp helper */
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Aspect helper for image placeholders when a photo is missing */
.img-fallback{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
  color: var(--primary); font-size:2rem;
}