:root {
  --navy-900: #0B1F3A;
  --navy-800: #12274A;
  --navy-700: #1A2F59;
  --blue-500: #2563EB;
  --blue-300: #60A5FA;
  --green-cta: #16A34A;
  --green-cta-hover: #12813C;
  --slate-100: #F1F5F9;
  --slate-300: #CBD5E1;
  --slate-700: #334155;
  --white: #FFFFFF;
}

.btn-cta {
  background: var(--green-cta);
  color: var(--white);
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  border:0;
  box-shadow: 0 8px 20px rgba(22,163,74,0.25);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-cta:hover {
  background: var(--green-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(22,163,74,0.35);
}
.badge {
  background: rgba(255,255,255,.12);
  color:#cfe3ff;
  border:1px solid rgba(255,255,255,.2);
  padding:.25rem .5rem;
  border-radius:.5rem;
  font-size:.75rem;
}
.hero {
  background: radial-gradient(1600px 800px at 60% -200px, #1c3b7a 0%, var(--navy-900) 60%);
  color: var(--white);
}
.card {
  background: var(--white);
  border: 1px solid var(--slate-300);
  border-radius: 1rem;
  padding: 1.25rem;
}

.hero-image {
  /* solid color fallback so even the worst browsers don’t look blank */
  background-color: #0B1F3A;

  /* main background for modern browsers */
  background-image:
    linear-gradient(rgba(11,31,58,0.70), rgba(11,31,58,0.70)),
    url('/assets/img/hero.jpg');  /* <-- NOTE: absolute path now */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}


/* Utility tweaks for mobile spacing */
.container-pad {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .container-pad {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}