:root {
  --lx-navy: #0d1b3e;
  --lx-navy-2: #12285c;
}

html { scroll-behavior: smooth; }
body { scroll-padding-top: 70px; }

/* App bar */
#appbar {
  background-color: rgba(13, 27, 62, 0.92);
  backdrop-filter: blur(6px);
  transition: background-color 0.3s ease;
}
#appbar .nav-link { color: rgba(255, 255, 255, 0.8); }
#appbar .nav-link:hover,
#appbar .nav-link.active { color: #fff; }

/* Hero */
.hero {
  position: relative;
  min-height: 88vh;
  padding-top: 70px;
  background: linear-gradient(135deg, var(--lx-navy), var(--lx-navy-2)),
              url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 27, 62, 0.85) 0%, rgba(13, 27, 62, 0.35) 100%);
}

/* Value cards in About */
.value-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  padding: 1rem;
}

/* Audience role icons */
.role-icon { font-size: 2rem; line-height: 1; margin-bottom: 0.5rem; }

/* CTA band */
.cta {
  background: linear-gradient(135deg, var(--lx-navy-2), var(--lx-navy));
}

.card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card:hover { transform: translateY(-3px); }