/* ==========================================================================
   Sapthagiri Multispeciality Hospital — Design System v2 "Premium Healthcare"
   Deep navy (#0F4C81) + teal-green (#00C897). Large whitespace, glassmorphism,
   soft shadows, rounded corners, animated gradients, floating sections.
   Layered on top of the Tailwind CDN. Dark-mode aware (html.dark).
   ==========================================================================
   Class names kept stable so existing markup keeps working:
     .btn .btn-primary .btn-brand .btn-outline .btn-white .btn-ghost
     .chip .chip-accent .eyebrow .card-soft .spec-card .spec-ico
     .glass .glass-strong  .grad-brand .grad-brand-accent .grad-text
     .hscroll .tab-btn .lightbox .skeleton .bento .masonry
     [data-reveal] .animate-floaty  + timeline / nav / bottom-nav helpers
   ========================================================================== */

/* ---- Base tone ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
::selection { background: color-mix(in srgb, var(--accent) 30%, #fff); color: var(--brand-dark); }
body { -webkit-font-smoothing: antialiased; }

/* Nice thin scrollbar */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 30%, transparent) transparent; }

/* ---- Buttons (pill, gradient, icon) ------------------------------------- */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; border-radius:9999px; padding:.85rem 1.6rem; line-height:1.1; letter-spacing:.01em;
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .2s ease, color .2s ease, filter .2s ease;
  cursor:pointer; white-space:nowrap; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn-sm { padding:.55rem 1.15rem; font-size:.875rem; }
.btn-lg { padding:1rem 2rem; font-size:1.05rem; }

/* Primary CTA = teal-green gradient */
.btn-primary { color:#052a20; background:linear-gradient(135deg,var(--accent),#33d9ae);
  box-shadow:0 16px 34px -14px color-mix(in srgb,var(--accent) 80%, transparent); }
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.03);
  box-shadow:0 22px 44px -14px color-mix(in srgb,var(--accent) 85%, transparent); }

/* Brand navy gradient */
.btn-brand { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:0 16px 34px -16px color-mix(in srgb,var(--brand) 85%, transparent); }
.btn-brand:hover { transform:translateY(-2px); filter:brightness(1.06); }

/* Glass outline (adapts to light/dark) */
.btn-outline { color:var(--brand-dark); background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
  border:1.5px solid color-mix(in srgb,var(--brand) 28%, transparent); }
.btn-outline:hover { border-color:var(--brand); background:#fff; transform:translateY(-2px); }
.dark .btn-outline { color:#dbeafe; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
.dark .btn-outline:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }

/* White (on dark/gradient heros) */
.btn-white { color:var(--brand-dark); background:#fff; box-shadow:0 14px 34px -16px rgba(2,32,54,.5); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(2,32,54,.55); }

/* Ghost */
.btn-ghost { color:var(--brand-dark); background:transparent; }
.btn-ghost:hover { background:color-mix(in srgb,var(--brand) 8%, transparent); }
.dark .btn-ghost { color:#cbd5e1; }
.dark .btn-ghost:hover { background:rgba(255,255,255,.08); }

/* ---- Colour + gradient helpers ------------------------------------------ */
.text-brand { color:var(--brand); }
.text-accent { color:var(--accent); }
.bg-brand { background:var(--brand); }
.bg-accent { background:var(--accent); }
.grad-brand { background:linear-gradient(120deg,var(--brand),var(--brand-dark)); }
.grad-brand-accent { background:linear-gradient(120deg,var(--brand),var(--accent)); }
.grad-hero { background:linear-gradient(120deg,var(--brand-dark),var(--brand) 45%,var(--accent) 130%); }
/* Animated gradient (use with .animate-gradient) */
.grad-animated { background:linear-gradient(120deg,var(--brand-dark),var(--brand),var(--accent),var(--brand));
  background-size:300% 300%; }
.animate-gradient { animation:gradient 12s ease infinite; }
@keyframes gradient { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
/* Gradient clipped text */
.grad-text { background:linear-gradient(120deg,var(--brand),var(--accent)); -webkit-background-clip:text;
  background-clip:text; color:transparent; }

/* ---- Glassmorphism ------------------------------------------------------ */
.glass { background:rgba(255,255,255,.65); backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 32px -12px rgba(9,30,66,.28); }
.glass-strong { background:rgba(255,255,255,.86); backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.7); }
.dark .glass { background:rgba(17,24,39,.55); border-color:rgba(255,255,255,.08); }
.dark .glass-strong { background:rgba(17,24,39,.8); border-color:rgba(255,255,255,.1); }

/* ---- Pills / chips ------------------------------------------------------ */
.chip { display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .95rem; border-radius:9999px;
  font-size:.8rem; font-weight:600; background:color-mix(in srgb,var(--brand) 10%, #fff); color:var(--brand-dark); }
.chip-accent { background:color-mix(in srgb,var(--accent) 16%, #fff); color:var(--accent-dark); }
.dark .chip { background:color-mix(in srgb,var(--brand) 30%, transparent); color:#bfdbfe; }
.dark .chip-accent { background:color-mix(in srgb,var(--accent) 22%, transparent); color:#8cead2; }

/* Section eyebrow */
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; color:var(--accent-dark); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
.eyebrow::before { content:""; width:1.75rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent)); }
.dark .eyebrow { color:#4bddb9; }

/* ---- Cards -------------------------------------------------------------- */
.card-soft { background:#fff; border:1px solid #eef2f7; border-radius:1.5rem;
  box-shadow:0 24px 60px -40px rgba(9,30,66,.35); transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease; }
.card-soft:hover { transform:translateY(-6px); box-shadow:0 34px 74px -34px rgba(9,30,66,.42); }
.dark .card-soft { background:#131c2e; border-color:rgba(255,255,255,.07); }

/* Specialty icon card */
.spec-card { display:flex; flex-direction:column; gap:.9rem; padding:1.75rem; background:#fff;
  border:1px solid #eef2f7; border-radius:1.5rem; transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
  box-shadow:0 20px 50px -42px rgba(9,30,66,.4); }
.spec-card:hover { transform:translateY(-8px); box-shadow:0 34px 66px -34px rgba(9,30,66,.45); }
.dark .spec-card { background:#131c2e; border-color:rgba(255,255,255,.07); }
.spec-ico { display:grid; place-items:center; width:3.75rem; height:3.75rem; border-radius:1.15rem;
  color:var(--brand); background:color-mix(in srgb,var(--brand) 10%, #fff); transition:all .3s ease; }
.spec-card:hover .spec-ico { color:#fff; background:linear-gradient(135deg,var(--brand),var(--accent)); transform:scale(1.08) rotate(-4deg); }
.dark .spec-ico { background:color-mix(in srgb,var(--brand) 32%, transparent); color:#8cd4ff; }

/* Stat / counter tile */
.stat-tile { position:relative; overflow:hidden; border-radius:1.5rem; padding:1.75rem 1.5rem; background:#fff;
  border:1px solid #eef2f7; box-shadow:0 22px 54px -40px rgba(9,30,66,.4); transition:transform .3s ease, box-shadow .3s ease; }
.stat-tile:hover { transform:translateY(-5px); box-shadow:0 30px 64px -34px rgba(9,30,66,.45); }
.dark .stat-tile { background:#131c2e; border-color:rgba(255,255,255,.07); }

/* ---- Floating navbar ---------------------------------------------------- */
.nav-floating { transition:transform .35s ease, box-shadow .35s ease, background .35s ease, backdrop-filter .35s ease, border-color .35s ease; }
/* Shrunk state toggled from JS by adding .is-scrolled */
.nav-shell { transition:padding .3s ease; }
.nav-scrolled .nav-shell { padding-top:.35rem; padding-bottom:.35rem; }
.nav-link { position:relative; }
.nav-link::after { content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav-link:hover::after, .nav-link.is-active::after { transform:scaleX(1); }

/* Mega menu */
.mega { opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .22s ease, transform .22s ease, visibility .22s; }
.has-mega:hover .mega, .mega.is-open { opacity:1; visibility:visible; transform:translateY(0); }

/* Search popup */
.search-pop { opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.search-pop.is-open { opacity:1; visibility:visible; transform:translateY(0); }

/* ---- Mobile bottom navigation ------------------------------------------- */
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  font-size:.68rem; font-weight:600; color:#64748b; transition:color .2s ease; }
.bottom-nav-item.is-active { color:var(--brand); }
.dark .bottom-nav-item { color:#94a3b8; }
.dark .bottom-nav-item.is-active { color:#4bddb9; }

/* ---- Timeline (facilities / about journey) ------------------------------ */
.timeline { position:relative; }
.timeline::before { content:""; position:absolute; left:1.35rem; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--brand),var(--accent)); opacity:.35; }
.timeline-item { position:relative; padding-left:3.75rem; padding-bottom:2rem; }
.timeline-dot { position:absolute; left:.35rem; top:.1rem; display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border-radius:9999px; color:#fff; background:linear-gradient(135deg,var(--brand),var(--accent));
  box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 12%, transparent); }

/* ---- Bento grid --------------------------------------------------------- */
.bento { display:grid; gap:1.1rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .bento { grid-template-columns:repeat(4,1fr); grid-auto-rows:11rem; } }
.bento-cell { position:relative; overflow:hidden; border-radius:1.5rem; }
.bento-tall { grid-row:span 2; }
.bento-wide { grid-column:span 2; }

/* ---- Masonry (gallery / testimonials) ----------------------------------- */
.masonry { columns:1; column-gap:1.1rem; }
@media (min-width:640px){ .masonry { columns:2; } }
@media (min-width:1024px){ .masonry { columns:3; } }
.masonry > * { break-inside:avoid; margin-bottom:1.1rem; }

/* ---- Scroll reveal ------------------------------------------------------ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.4,0,.2,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal][data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-reveal-delay="4"]{ transition-delay:.32s; }

/* ---- Banner carousel ---------------------------------------------------- */
.banner-track{ display:flex; transition:transform .8s cubic-bezier(.4,0,.2,1); will-change:transform; }
.banner-slide{ min-width:100%; }

/* ---- Horizontal scroller ------------------------------------------------ */
.hscroll{ display:flex; gap:1.35rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:.75rem; -ms-overflow-style:none; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ---- Tabs / filter pills ------------------------------------------------ */
.tab-btn{ padding:.55rem 1.2rem; border-radius:9999px; font-weight:600; font-size:.9rem; color:#475569;
  background:#fff; border:1px solid #e6ecf3; transition:all .18s ease; cursor:pointer; white-space:nowrap; }
.tab-btn:hover{ border-color:color-mix(in srgb,var(--brand) 34%,#fff); color:var(--brand-dark); }
.tab-btn.active{ color:#fff; background:linear-gradient(135deg,var(--brand),var(--accent)); border-color:transparent;
  box-shadow:0 12px 26px -14px color-mix(in srgb,var(--brand) 70%, transparent); }
.dark .tab-btn{ background:#131c2e; border-color:rgba(255,255,255,.1); color:#cbd5e1; }

/* ---- Floating input (label animates up) --------------------------------- */
.field { position:relative; }
.field > input, .field > select, .field > textarea {
  width:100%; border-radius:1rem; border:1.5px solid #e2e8f0; background:#fff; padding:1.35rem 1rem .55rem;
  font-size:.95rem; color:#0f172a; transition:border-color .2s ease, box-shadow .2s ease; }
.field > textarea { padding-top:1.6rem; }
.field > label { position:absolute; left:1rem; top:.95rem; color:#94a3b8; font-size:.95rem; pointer-events:none;
  transition:all .18s ease; }
.field > input:focus, .field > select:focus, .field > textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%, transparent); }
.field > input:focus + label, .field > input:not(:placeholder-shown) + label,
.field > textarea:focus + label, .field > textarea:not(:placeholder-shown) + label,
.field > select:focus + label, .field.filled > label {
  top:.4rem; font-size:.7rem; font-weight:600; color:var(--brand); }
.dark .field > input, .dark .field > select, .dark .field > textarea { background:#131c2e; border-color:rgba(255,255,255,.12); color:#e2e8f0; }

/* ---- Lightbox ----------------------------------------------------------- */
.lightbox{ position:fixed; inset:0; z-index:80; display:none; place-items:center; background:rgba(2,16,30,.94);
  backdrop-filter:blur(6px); padding:1.5rem; }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:1.25rem; box-shadow:0 40px 90px -30px rgba(0,0,0,.8); }

/* ---- Skeleton loader ---------------------------------------------------- */
.skeleton { position:relative; overflow:hidden; background:#e9eef5; border-radius:.75rem; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:shimmer 1.4s infinite; }
.dark .skeleton { background:#1e293b; }
@keyframes shimmer { 100%{ transform:translateX(100%);} }

/* ---- Utilities ---------------------------------------------------------- */
.line-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* Decorative animated blobs for section backgrounds */
.blob { position:absolute; filter:blur(60px); opacity:.5; border-radius:50%;
  animation:blob 14s ease-in-out infinite, floaty 8s ease-in-out infinite; }

@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.animate-floaty{ animation:floaty 4s ease-in-out infinite; }
@keyframes blob { 0%,100%{ border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;} 50%{ border-radius:58% 42% 37% 63% / 56% 59% 41% 44%;} }
@keyframes fade-up { 0%{ opacity:0; transform:translateY(20px);} 100%{ opacity:1; transform:translateY(0);} }
.animate-fade-up{ animation:fade-up .6s ease both; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .animate-floaty, .blob, .animate-gradient, .skeleton::after { animation:none !important; }
  html { scroll-behavior:auto; }
}