:root {
  --page-bg: #eff4ff;
  --card-border: #d7e3ff;
  --brand-dark: #111827;
  --brand-soft: #f3f8ff;
  --brand-primary: #0d6efd;
  --brand-primary-soft: #dbeafe;
  --brand-accent: #14b8a6;
}

body {
  background:
    radial-gradient(circle at 10% 10%, rgba(13, 110, 253, 0.12), transparent 32%),
    radial-gradient(circle at 90% 0%, rgba(20, 184, 166, 0.12), transparent 28%),
    var(--page-bg);
  color: #1f2937;
  position: relative;
}

.hero-card,
.policy-card,
.quick-nav-card {
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background-color: #fff;
}

.hero-card {
  background: linear-gradient(135deg, #ffffff 0%, #edf4ff 52%, #e9fcf8 100%);
  box-shadow: 0 10px 30px rgba(33, 37, 41, 0.08);
}

.hero-title {
  color: var(--brand-dark);
  font-weight: 700;
}

.section-title {
  font-size: 1.1rem;
  letter-spacing: 0.2px;
}

.quick-nav {
  top: 1rem;
}

.quick-nav-card {
  background-color: var(--brand-soft);
  box-shadow: 0 8px 24px rgba(13, 110, 253, 0.08);
}

.nav-pills .nav-link {
  color: #334155;
  text-align: left;
  border: 1px solid #dde7fb;
  background-color: #fff;
  margin-bottom: 0.35rem;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
  border-color: #bfd4ff;
  background-color: #f3f8ff;
}

.nav-pills .nav-link.active {
  background-color: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.28);
  transform: translateX(2px);
}

.policy-section {
  scroll-margin-top: 120px;
}

.policy-intro {
  border-left: 4px solid var(--brand-primary);
  padding-left: 1rem;
}

.policy-section {
  border: 1px solid #e2ebff;
  border-radius: 0.75rem;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.04);
}

@media (min-width: 768px) {
  .policy-section {
    padding: 1.25rem;
  }
}

.policy-section .section-title {
  color: #0f3d87;
}

.contact-panel {
  background: linear-gradient(135deg, #f4f9ff 0%, #eefdf9 100%);
  border-color: #cfe2ff;
}

.btn-primary-soft {
  --bs-btn-color: #0b3b8a;
  --bs-btn-bg: var(--brand-primary-soft);
  --bs-btn-border-color: #c6dbff;
  --bs-btn-hover-color: #0a2f6c;
  --bs-btn-hover-bg: #cfe2ff;
  --bs-btn-hover-border-color: #b8d1ff;
  --bs-btn-active-color: #0a2f6c;
  --bs-btn-active-bg: #bdd7ff;
  --bs-btn-active-border-color: #a8c8ff;
}
