:root {
  --clinical-blue: #0B5ED7;
  --health-teal: #00B4A0;
  --deep-navy: #0A1F44;
  --pure-white: #FFFFFF;
  --cloud-gray: #F4F5F7;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--cloud-gray);
  color: var(--deep-navy);
}

.hero {
  text-align: center;
  padding: 3rem 1.5rem;
  background: linear-gradient(135deg, var(--clinical-blue), var(--health-teal));
  color: white;
}

.hero img {
  max-width: 100%;
  height: auto;
}

.hero h1 {
  font-size: 2.4rem;
  margin-top: 1rem;
}

.tagline {
  font-size: 1.2rem;
}

.subtagline {
  font-style: italic;
  opacity: 0.9;
}

nav {
  background: var(--deep-navy);
  padding: 0.75rem;
  text-align: center;
}

nav a {
  color: white;
  margin: 0 1rem;
  text-decoration: none;
  font-weight: 500;
}

.content {
  max-width: 900px;
  margin: auto;
  padding: 2.5rem 1.5rem;
}

.highlight {
  background: white;
  padding: 2.5rem;
  border-top: 4px solid var(--health-teal);
}

footer {
  background: var(--deep-navy);
  color: #ccc;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.9rem;
}