/* ── GLOBALS ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── NAVBAR ──────────────────────────────────────────────────────────────── */
#navbar {
  background: transparent;
  transition: background .3s, box-shadow .3s;
}
#navbar.scrolled {
  background: rgba(26, 58, 92, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  opacity: 0;
  animation: fadeInUp .6s ease forwards;
}

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── STAT CARDS ──────────────────────────────────────────────────────────── */
.stat-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
}

/* ── FLASH MESSAGES ──────────────────────────────────────────────────────── */
.flash-msg {
  animation: fadeInUp .3s ease forwards;
}

/* ── PROSE ───────────────────────────────────────────────────────────────── */
.prose p { margin-bottom: 1.2rem; line-height: 1.8; }

/* ── SCROLL BAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }