/* ╔═══════════════════════════════════════════════════════╗
   ║  hero.css — light medical hero, 2-col layout          ║
   ╚═══════════════════════════════════════════════════════╝ */

.hero {
  background: var(--grad-hero);
  padding-top: calc(68px + var(--sp-16));
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero::before {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(30,58,122,.06) 0%, transparent 70%);
  top: -80px; right: -100px;
}
.hero::after {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(192,32,51,.04) 0%, transparent 70%);
  bottom: 80px; left: -60px;
}

.hero-inner {
  max-width: 1180px; margin-inline: auto;
  padding-inline: var(--sp-8); padding-bottom: var(--sp-16);
  display: grid; grid-template-columns: 1fr 380px;
  gap: var(--sp-16); align-items: center;
  position: relative; z-index: 1;
}

/* ── Eyebrow ───────────────────────────────────────────── */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--navy-50);
  color: var(--navy-700);
  font-size: .85rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--navy-100);
}
.hero-eyebrow img { width: 20px; height: 20px; }

.hero h1 { margin-bottom: var(--sp-6); color: var(--gray-900); }
.hero h1 em { color: var(--navy-700); font-style: italic; }

.hero-lead {
  font-size: 1.15rem; color: var(--gray-600);
  max-width: 520px; margin-bottom: var(--sp-8); line-height: 1.8;
}

/* Trust badges */
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.hbadge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--white); border: 1px solid var(--warm-200);
  color: var(--gray-800); font-size: .82rem; font-weight: 600;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
}
.hbadge i { color: var(--navy-700); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* ── Right column ──────────────────────────────────────── */
.hero-aside { display: flex; flex-direction: column; gap: var(--sp-4); }

.stat-card {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--white); border: 1px solid var(--warm-200);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }

.stat-icon {
  width: 44px; height: 44px;
  background: var(--navy-50); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-700); font-size: 1.1rem; flex-shrink: 0;
}
.stat-card div strong {
  display: block; font-size: 1.1rem; font-weight: 700;
  color: var(--gray-900); line-height: 1.2; font-family: var(--font-display);
}
.stat-card div span { font-size: .82rem; color: var(--gray-400); }

/* Countdown box — red accent to match logo */
.countdown-box {
  background: var(--navy-700);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  color: var(--white); text-align: center;
}
.countdown-label {
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  opacity: .75; margin-bottom: var(--sp-4); color: var(--white);
}
.countdown-row { display: flex; justify-content: center; gap: var(--sp-3); }
.cd-unit {
  display: flex; flex-direction: column; align-items: center;
  min-width: 54px; background: rgba(255,255,255,.15);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-2);
}
.cd-unit span {
  font-family: var(--font-display); font-size: 1.6rem;
  font-weight: 600; color: var(--white); line-height: 1;
}
.cd-unit small {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.65); margin-top: var(--sp-1);
}

.hero-wave { margin-top: var(--sp-8); line-height: 0; }
.hero-wave svg { width: 100%; height: 60px; display: block; }