/* ============================================================
   INDORE AMBULANCE SERVICES — DESIGN TOKENS
   60% light foundation / 30% medical blue / 10% emergency red
   ============================================================ */
:root {
  /* 60% - Light foundation */
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --surface: #F1F5F9;
  --surface-light: #EAF1F8;
  --card: #FFFFFF;
  --card-hover: #F7FAFD;
  --border: #DCE6F2;
  --divider: #E8EEF5;

  /* 30% - Medical blue */
  --primary: #0F4C9C;
  --primary-dark: #0A356D;
  --primary-light: #E8F2FF;
  --primary-soft: #D7E8FF;
  --primary-hover: #155CB8;
  --primary-active: #083060;

  --secondary: #1E6FD9;
  --secondary-light: #F2F8FF;
  --secondary-border: #BFD8FF;

  /* 10% - Emergency red */
  --accent: #E53935;
  --accent-dark: #C62828;
  --accent-light: #FFF1F1;
  --accent-soft: #FFE2E2;
  --accent-hover: #D32F2F;

  /* Text */
  --text: #1E293B;
  --text-heading: #0F172A;
  --text-light: #475569;
  --text-muted: #64748B;
  --text-disabled: #94A3B8;
  --text-white: #FFFFFF;

  /* Status */
  --success: #16A34A;
  --success-light: #ECFDF3;
  --warning: #F59E0B;
  --warning-light: #FFF7E6;
  --danger: #DC2626;
  --danger-light: #FEF2F2;
  --info: #0284C7;
  --info-light: #F0F9FF;

  /* Emergency */
  --ambulance-red: #E53935;
  --medical-blue: #0F4C9C;
  --medical-white: #FFFFFF;
  --emergency-dark: #10243E;

  /* Buttons */
  --btn-primary: var(--primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-danger: var(--accent);
  --btn-danger-hover: var(--accent-hover);
  --btn-light: #FFFFFF;
  --btn-light-hover: #F8FAFC;

  /* Icons */
  --icon-primary: var(--primary);
  --icon-danger: var(--accent);
  --icon-light: #94A3B8;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,76,156,.06);
  --shadow-sm: 0 4px 12px rgba(15,76,156,.08);
  --shadow-md: 0 10px 25px rgba(15,76,156,.12);
  --shadow-lg: 0 20px 50px rgba(15,76,156,.15);
  --shadow-red: 0 12px 30px rgba(229,57,53,.15);

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Transitions */
  --transition: all .3s ease;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  color: var(--text-heading);
}

::selection { background: var(--primary-soft); color: var(--primary-dark); }

:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   SIGNATURE ELEMENT — EKG / VITALS PULSE LINE
   Used as a section divider + hero accent + loading heartbeat.
   Encodes "vital signs" — the one thing every ambulance ride
   is fundamentally about: keeping the line moving.
   ============================================================ */
.ekg-line {
  width: 100%;
  height: 48px;
  display: block;
  overflow: visible;
}
.ekg-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: ekg-draw 3.2s ease-in-out infinite;
}
@keyframes ekg-draw {
  0%   { stroke-dashoffset: 1200; opacity: 0.2; }
  8%   { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  75%  { stroke-dashoffset: -1200; opacity: 0.15; }
  100% { stroke-dashoffset: -1200; opacity: 0; }
}
.ekg-dot {
  fill: var(--accent);
  animation: ekg-pulse 1.6s ease-in-out infinite;
}
@keyframes ekg-pulse {
  0%, 100% { r: 3; opacity: 1; }
  50% { r: 5; opacity: 0.5; }
}

/* Thin static EKG divider used between sections */
.ekg-divider { color: var(--border); }

/* ============================================================
   REUSABLE COMPONENT CLASSES
   ============================================================ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--text-white);
  box-shadow: var(--shadow-red);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-secondary {
  background: var(--bg);
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-secondary:hover { background: var(--primary-light); transform: translateY(-2px); }
.btn-ghost-white {
  background: rgba(255,255,255,0.12);
  color: var(--text-white);
  border: 1.5px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
}
.btn-ghost-white:hover { background: rgba(255,255,255,0.22); }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  background: var(--card-hover);
}

/* Section eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
}

/* Fade-up scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image zoom-on-hover container */
.img-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.img-zoom img { transition: transform .6s ease; }
.img-zoom:hover img { transform: scale(1.08); }

/* Floating action buttons */
.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}
.fab:hover { transform: scale(1.08); }
.fab-call { background: var(--primary); color: var(--text-white); }
.fab-whatsapp { background: #25D366; color: var(--text-white); }

@keyframes ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229,57,53,0.45); }
  70% { box-shadow: 0 0 0 14px rgba(229,57,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}
.fab-pulse { animation: ring-pulse 2.2s infinite; }

/* Sticky mobile call bar */
.mobile-callbar {
  box-shadow: 0 -6px 20px rgba(15,76,156,0.12);
}

/* FAQ accordion chevron rotation */
.faq-toggle[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-toggle .faq-chevron { transition: transform .3s ease; }
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

/* Stat counter */
.stat-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--primary);
}

/* Gradient wash used sparingly behind hero only */
.hero-gradient {
  background: linear-gradient(160deg, var(--emergency-dark) 0%, var(--primary-dark) 45%, var(--primary) 100%);
}

/* Marquee for trust strip */
.marquee-track {
  animation: marquee 22s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}