/* ============================================================
   ZUBOLEKAR.BG — BRAND OVERRIDE CSS v2
   Precision visual correction pass
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================
   1. BRAND COLOR TOKENS
   ========================================================== */
:root {
  --brand-50: #f0f7ff;
  --brand-100: #e0effe;
  --brand-200: #bae0fd;
  --brand-400: #38a9f8;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;
  --brand-900: #0c4a6e;
  --navy-900: #0a1a3a;
}

/* ==========================================================
   2. TYPOGRAPHY — ENFORCE OUTFIT / INTER HIERARCHY
   ========================================================== */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1e293b !important;
}

h1, h2, h3, h4, h5, h6,
[class*="font-display"],
[class*="font-headline"],
[class*="text-display"],
[class*="text-headline"] {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.025em;
  color: #0f172a !important;
}

[class*="font-label-mono"],
[class*="text-label-mono"],
[class*="font-mono"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* Nav/UI/form/table text = Inter, not Outfit */
nav a span:not(.material-symbols-outlined),
nav button span:not(.material-symbols-outlined),
table th, table td,
input, select, textarea,
[class*="font-body"],
[class*="font-button-text"] {
  font-family: 'Inter', ui-sans-serif, sans-serif !important;
}

/* PROTECT Material Icons — never override their font */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}

/* ==========================================================
   3. COLOR TOKEN REMAPPING
   ========================================================== */
.text-primary { color: #0284c7 !important; }
.bg-primary { background-color: #0284c7 !important; }
.border-primary { border-color: #0284c7 !important; }

.bg-primary-container { background-color: #0284c7 !important; }
.text-on-primary-container { color: #fff !important; }

.bg-action-blue { background-color: #0284c7 !important; }
.text-action-blue { color: #0284c7 !important; }

.bg-background, .bg-surface { background-color: #f8fafc !important; }
.bg-surface-container-lowest { background-color: #ffffff !important; }
.bg-surface-container-low { background-color: #f0f7ff !important; }
.bg-surface-container { background-color: #f1f5f9 !important; }
.bg-surface-container-high, .bg-surface-container-highest { background-color: #e2e8f0 !important; }

.text-on-surface { color: #0f172a !important; }
.text-on-surface-variant { color: #475569 !important; }
.text-on-background { color: #0f172a !important; }

.border-outline-variant { border-color: #cbd5e1 !important; }
.border-glass-border { border-color: rgba(203,213,225,0.4) !important; }

.bg-success-emerald { background-color: #059669 !important; }
.text-error { color: #dc2626 !important; }
.bg-error { background-color: #dc2626 !important; }
.bg-error-container { background-color: #fef2f2 !important; }
.text-on-error-container { color: #991b1b !important; }

/* ==========================================================
   4. BUTTONS — PREMIUM GRADIENT WITH DEPTH
   No flat cyan. No generic glow. Real depth.
   ========================================================== */

/* --- Primary CTA (Premium Landing Page Style) --- */
button.bg-action-blue,
a.bg-action-blue,
button[class*="bg-action-blue"],
a[class*="bg-action-blue"],
button.bg-primary,
a.bg-primary {
  background: linear-gradient(135deg, #1e3a8a 0%, #064e3b 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 6px !important; /* Sharper, like live site */
  box-shadow: 
    0 4px 14px 0 rgba(0,0,0,0.25),
    inset 0 1px 0 0 rgba(255,255,255,0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

button.bg-action-blue:hover,
a.bg-action-blue:hover,
button[class*="bg-action-blue"]:hover,
a[class*="bg-action-blue"]:hover,
button.bg-primary:hover,
a.bg-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #059669 100%) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px);
}

button.bg-action-blue:active,
a.bg-action-blue:active,
button.bg-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

/* Subtle gloss sweep effect for primary buttons */
button.bg-action-blue::after, a.bg-action-blue::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  transition: all 0.5s;
  pointer-events: none;
}

/* --- Primary Container pill buttons (active filter pills) --- */
button.bg-primary-container {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.15) inset,
    0 2px 6px -1px rgba(3,105,161,0.35) !important;
}

/* --- Secondary / Outline buttons --- */
button[class*="border-outline-variant"][class*="bg-surface-container-lowest"],
button[class*="bg-surface-container-highest"] {
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: all 0.15s ease !important;
}
button[class*="border-outline-variant"][class*="bg-surface-container-lowest"]:hover {
  background: #f0f7ff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

/* --- "Изчисти филтрите" — secondary brand button --- */
aside button[class*="bg-surface-container-highest"],
aside button[class*="bg-surface-variant"] {
  background: transparent !important;
  border: 1.5px solid #bae0fd !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
aside button[class*="bg-surface-container-highest"]:hover,
aside button[class*="bg-surface-variant"]:hover {
  background: #f0f7ff !important;
  border-color: #0284c7 !important;
}

/* --- Error/Emergency CTA --- */
button.bg-error, a.bg-error {
  background: linear-gradient(180deg, #ef4444, #dc2626, #b91c1c) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.12) inset,
    0 3px 8px -2px rgba(185,28,28,0.4) !important;
}

/* --- Ghost slot buttons (time slot pickers) --- */
button[class*="bg-primary/5"],
button[class*="bg-primary\\/5"] {
  background: #f0f7ff !important;
  color: #0284c7 !important;
  border: 1px solid #e0effe !important;
}
button[class*="bg-primary/5"]:hover,
button[class*="bg-primary\\/5"]:hover {
  background: #e0effe !important;
  border-color: #bae0fd !important;
}

/* --- Pagination active --- */
button.bg-action-blue[class*="rounded-full"][class*="w-10"],
button.bg-primary[class*="rounded-lg"][class*="w-10"] {
  background: linear-gradient(180deg, #0ea5e9, #0284c7) !important;
  box-shadow: 0 2px 6px rgba(2,132,199,0.35) !important;
  border-radius: 10px !important;
}


/* ==========================================================
   5. FILTER PANEL — CRISP LIGHT SURFACE
   No glass. No muddy gray. Clean brand-tinted surface.
   ========================================================== */

/* Kill liquid-glass on filter/sidebar panels */
aside .liquid-glass,
aside .glass-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important;
}

/* Filter headings — strong contrast */
aside h2, aside h3 {
  color: #0f172a !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}

/* Filter labels — clear and readable */
aside label[class*="font-button-text"] {
  color: #1e293b !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Filter option text — proper contrast */
aside span[class*="text-on-surface-variant"] {
  color: #334155 !important;
}

/* Checkboxes — brand colors */
aside input[type="checkbox"] {
  accent-color: #0284c7 !important;
  border-color: #94a3b8 !important;
}
aside input[type="checkbox"]:checked {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
}

/* Range slider */
aside input[type="range"] {
  accent-color: #0284c7 !important;
}

/* Emergency filter chip — tasteful red */
aside [class*="bg-error-container"] {
  background: #fef2f2 !important;
  border-color: rgba(220,38,38,0.15) !important;
}

/* Filter tune icon */
aside .text-action-blue {
  color: #0284c7 !important;
}


/* ==========================================================
   6. CRM SIDEBAR — CLEAN, HIGH-CONTRAST NAVY
   No muddy overlays. No gray haze. Premium app feel.
   ========================================================== */

/* CRM sidebar base — clean white with brand accent */
aside.fixed {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 1px 0 4px rgba(0,0,0,0.03) !important;
}

/* Logo in sidebar */
aside.fixed .text-primary {
  color: #0a1a3a !important;
  font-weight: 700 !important;
}

/* Doctor card in sidebar */
aside.fixed [class*="bg-surface-container-low"] {
  background: #f0f7ff !important;
  border-color: #e0effe !important;
}

/* Nav items — inactive: clear readable */
aside.fixed nav a {
  color: #475569 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}
aside.fixed nav a:hover {
  background: #f0f7ff !important;
  color: #0284c7 !important;
}

/* Nav items — active: clear brand state */
aside.fixed nav a[class*="text-action-blue"],
aside.fixed nav a[class*="font-bold"][class*="bg-secondary-container"] {
  background: linear-gradient(135deg, #e0effe, #f0f7ff) !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
  border-left: 3px solid #0284c7 !important;
  padding-left: 9px !important;
  box-shadow: 0 1px 3px rgba(2,132,199,0.08) !important;
}
aside.fixed nav a[class*="text-action-blue"] span.material-symbols-outlined,
aside.fixed nav a[class*="font-bold"][class*="bg-secondary-container"] span.material-symbols-outlined {
  color: #0284c7 !important;
}

/* Inactive nav icons — visible */
aside.fixed nav a span.material-symbols-outlined {
  color: #64748b !important;
}
aside.fixed nav a:hover span.material-symbols-outlined {
  color: #0284c7 !important;
}

/* "Нов Час" sidebar CTA */
aside.fixed button.bg-primary,
aside.fixed button[class*="bg-primary"] {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 55%, #0369a1 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 3px 10px -2px rgba(3,105,161,0.4) !important;
  border-radius: 12px !important;
}


/* ==========================================================
   7. GLASS USAGE RESTRICTIONS
   Glass = accent only. NOT for foundations.
   ========================================================== */

/* Kill glass on data containers (tables, cards with data) */
.glass-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important;
}

/* Kill liquid-glass on result cards and filter panels */
.liquid-glass {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* KEEP glass ONLY on top navigation + mobile bottom nav */
nav.fixed,
header.fixed,
footer.fixed {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-color: rgba(203,213,225,0.35) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Glass-bg for nav only */
.bg-glass-bg {
  background: rgba(255,255,255,0.88) !important;
}


/* ==========================================================
   8. SEARCH RESULT CARDS — CLEAN PREMIUM
   ========================================================== */

/* Result cards — solid white, subtle border, clean */
main .liquid-glass,
main .glass-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  transition: all 0.2s ease !important;
}
main .liquid-glass:hover,
main .glass-card:hover {
  border-color: rgba(2,132,199,0.25) !important;
  box-shadow: 0 4px 16px rgba(2,132,199,0.08), 0 2px 4px rgba(0,0,0,0.04) !important;
}

/* Availability time chips — cohesive */
span[class*="bg-primary-container/10"][class*="text-primary"] {
  background: #e0effe !important;
  border-color: #bae0fd !important;
  color: #0284c7 !important;
}
span[class*="bg-surface-container-low"][class*="text-on-surface-variant"][class*="font-label-mono"] {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

/* "Топ Специалист" badge */
[class*="bg-primary/10"][class*="text-primary"] {
  background: #e0effe !important;
  color: #0284c7 !important;
  border: 1px solid #bae0fd !important;
}


/* ==========================================================
   9. CRM / TABLES — SOLID, FUNCTIONAL, READABLE
   ========================================================== */

/* Table headers */
table thead tr {
  background: #f8fafc !important;
}
table th {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

/* Table rows — clean alternation on hover */
table tbody tr:hover {
  background: #f0f7ff !important;
}

/* Avatar initials */
[class*="bg-secondary-container"][class*="rounded-full"][class*="text-primary"] {
  background: #e0effe !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

/* --- High Contrast Status Badges --- */
[class*="bg-success-emerald/10"], 
[class*="bg-emerald-50"],
.bg-success-emerald {
  background-color: #059669 !important; /* Richer green for white text contrast */
  border: none !important;
}
[class*="text-success-emerald"],
.text-success-emerald {
  color: #ffffff !important; /* WHITE TEXT as requested */
  font-weight: 700 !important;
}

[class*="bg-error-container"],
.bg-error-container {
  background-color: #fee2e2 !important;
  border: 1px solid #fecaca !important;
}
[class*="text-on-error-container"],
.text-on-error-container {
  color: #991b1b !important;
  font-weight: 700 !important;
}

[class*="bg-surface-variant"],
[class*="bg-slate-100"] {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
[class*="text-on-surface-variant"] {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* Segment filter pills (Всички / Хронични / etc.) */
button[class*="bg-surface-container-low"][class*="text-on-surface-variant"][class*="rounded-full"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  transition: all 0.15s ease !important;
}
button[class*="bg-surface-container-low"][class*="text-on-surface-variant"][class*="rounded-full"]:hover {
  background: #f0f7ff !important;
  border-color: #bae0fd !important;
  color: #0284c7 !important;
}


/* ==========================================================
   10. NAVIGATION — TOP BAR
   ========================================================== */

/* Official Logo Style (from zubolekar.bg) */
nav .text-primary,
header .text-primary,
aside.fixed .text-primary {
  color: #1e293b !important; /* Dark Slate-800 */
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important; /* Font-black */
  letter-spacing: -0.05em !important; /* Tracking-tight */
  text-transform: lowercase !important;
  font-size: 24px !important;
}

/* Nav links */
nav a[class*="text-on-surface-variant"],
header a[class*="text-on-surface-variant"] {
  color: #475569 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}
nav a[class*="text-on-surface-variant"]:hover {
  color: #0284c7 !important;
}

/* Active nav link */
nav a[class*="border-b-2"][class*="text-action-blue"],
nav a[class*="border-action-blue"] {
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

/* Mobile bottom nav active pill */
nav.fixed.bottom-0 .bg-primary-container,
footer.fixed .bg-primary-container {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(2,132,199,0.3) !important;
}


/* ==========================================================
   11. HERO SECTION — PREMIUM REWRITE & GRADIENT
   ========================================================== */

section.relative.min-h-screen h1 {
  color: #0f172a !important; /* Exact text-slate-900 from landing page */
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 900 !important; /* font-black */
  letter-spacing: -0.05em !important; /* tracking-tighter */
  line-height: 1.1 !important; /* leading-tight */
  text-transform: uppercase !important;
}

/* Exact Landing Page Gradient (Cyan-500 to Emerald-500) */
section.relative.min-h-screen h1 span,
section.relative.min-h-screen h1 .text-primary {
  background: linear-gradient(to right, #0ea5e9 0%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
  filter: none !important; /* Remove any previous shadows to match clean live style */
}

section.relative.min-h-screen p {
  font-family: 'Inter', sans-serif !important;
  color: #475569 !important;
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  max-width: 600px;
}


/* ==========================================================
   12. SEARCH BAR — LUXURY EXPANSION
   ========================================================== */

/* Container expansion */
[class*="max-w-2xl"].mx-auto.relative.z-10 {
  max-width: 900px !important; /* More spacious */
}

/* The bar itself */
.glass-card.p-2.rounded-2xl {
  padding: 12px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.12) !important;
  display: flex !important;
  align-items: center !important;
}

/* Placeholder visibility */
input[placeholder*="Търсене"],
input[class*="placeholder:text-on-surface-variant"] {
  color: #1e293b !important;
  font-size: 16px !important;
  padding-left: 12px !important;
}
input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Redesigned Search Button (Integrated, not "glued") */
.glass-card button.bg-primary,
.glass-card button.bg-action-blue {
  height: 54px !important;
  padding: 0 32px !important;
  border-radius: 12px !important;
  margin-left: 8px !important;
  background: linear-gradient(135deg, #1e3a8a 0%, #064e3b 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.glass-card button.bg-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #059669 100%) !important;
  transform: scale(1.02) !important;
}


/* ==========================================================
   13. TRUST SECTION NUMBERS — gradient text
   ========================================================== */

[class*="text-display-lg"][class*="text-primary"] {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
}


/* ==========================================================
   14. FOOTER
   ========================================================== */
footer .text-primary { color: #0284c7 !important; }
footer [class*="hover:bg-primary"]:hover {
  background: #0284c7 !important;
}


/* ==========================================================
   15. FORM ELEMENTS
   ========================================================== */
input:focus, select:focus, textarea:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2,132,199,0.12) !important;
  outline: none !important;
}

*:focus-visible {
  outline: 2px solid rgba(2,132,199,0.4) !important;
  outline-offset: 2px !important;
}


/* ==========================================================
   16. VERIFIED BADGES
   ========================================================== */
[class*="bg-success-emerald"] {
  background: #059669 !important;
  box-shadow: 0 1px 4px rgba(5,150,105,0.3) !important;
}


/* ==========================================================
   17. MOTION — SUBTLE, PREMIUM RESTRAINT
   ========================================================== */
.group:hover { transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important; }

/* Card hover — subtle lift, no excessive movement */
.glass-card:hover, .liquid-glass:hover {
  transform: translateY(-2px);
}

/* Inner glow override — kill it, use real shadows */
.inner-glow {
  box-shadow: none !important;
}


/* ==========================================================
   18. SELECTION & SCROLLBAR
   ========================================================== */
::selection { background: #bae0fd; color: #0a1a3a; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* ==========================================================
   19. SECTION DIVIDER ACCENT
   ========================================================== */
.bg-primary-container.mx-auto.rounded-full {
  background: linear-gradient(90deg, #0ea5e9, #0284c7) !important;
  height: 3px !important;
}


/* ==========================================================
   20. STAR RATING — warm amber, not brand teal
   ========================================================== */
/* ==========================================================
   21. PREMIUM REDESIGN MODULES (HOMEPAGE)
   ========================================================== */

/* Animated Hero Gradient Background */
.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(52, 211, 153, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
  animation: float-glow 20s infinite alternate;
}

@keyframes float-glow {
  0% { transform: translate(-10%, -10%); }
  100% { transform: translate(20%, 15%); }
}

/* Premium Card (Glass-Tech Hybrid) */
.tech-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.tech-card:hover {
  transform: translateY(-8px);
  border-color: #0ea5e9 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02) !important;
}

/* Scroll Reveal Base */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* Premium Counter Number */
.stat-number {
  background: linear-gradient(135deg, #0a1a3a 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* Feature Step Line */
.step-line {
  position: relative;
}
.step-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #bae0fd, transparent);
  z-index: -1;
}

/* Emergency Priority Badge */
.emergency-pulse {
  position: relative;
}
.emergency-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: inherit;
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Section Title Emphasis */
/* Staggered Reveal Logic */
.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-item.active {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* Premium CTA Glow Overlay */
.cta-glow-btn {
  position: relative;
  overflow: hidden;
}
.cta-glow-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.cta-glow-btn:hover::after {
  opacity: 1;
}
/* ==========================================================
   14. SPECIALTY CARDS — PREMIUM UPGRADE
   ========================================================== */

.specialty-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06); /* Increased opacity for better distinction */
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12); /* Brighter border for "light shadow" effect */
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.specialty-card:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-12px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), 0 0 20px rgba(14, 165, 233, 0.1);
}

.specialty-title-gradient {
  background: linear-gradient(to right, #0ea5e9 0%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

.specialty-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
}

.specialty-card:hover::before {
  opacity: 1;
}

.specialty-icon-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  margin-bottom: 2rem;
  transition: all 0.4s ease;
}

.specialty-card:hover .specialty-icon-wrapper {
  background: white;
  transform: rotate(10deg);
}

.specialty-card:hover .material-symbols-outlined {
  color: #0f172a !important; /* Invert icon color on white bg */
}

.section-glow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% -20%, rgba(6, 182, 212, 0.15), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1), transparent 50%);
  pointer-events: none;
}