:root {
  --color-primary-dark: #0A1F44;
  --color-primary-accent: #00C2CB;
  --color-bg: #F2F4F7;
  --color-card: #FFFFFF;
  --color-text: #2D3648;
  --color-error: #E63946;
  --color-success: #2ECC71;
}

html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: radial-gradient(120% 120% at 10% 10%, rgba(0, 194, 203, 0.08), transparent),
              radial-gradient(100% 100% at 90% 10%, rgba(10, 31, 68, 0.08), transparent),
              var(--color-bg);
  color: var(--color-text);
  padding-bottom: 120px; /* prevent footer overlap */
}

a {
  color: var(--color-primary-dark);
}

a.btn-primary, .btn-primary {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary-accent));
  border: none;
  color: #fff;
}

a.btn-primary:hover, .btn-primary:hover {
  opacity: 0.9;
}

.navbar {
  background: var(--color-primary-dark);
}

.navbar-brand, .nav-link, .navbar-text {
  color: #f9fbff !important;
}

.nav-link.active {
  color: var(--color-primary-accent) !important;
}

.navbar .nav-link {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

@media (max-width: 991.98px) {
  .navbar .nav-link {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Ensure mobile menu icon is visible on dark navbar */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.6);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card {
  background: var(--color-card);
  border: 1px solid rgba(10, 31, 68, 0.06);
  box-shadow: 0 12px 30px rgba(10, 31, 68, 0.08);
  border-radius: 16px;
}

.badge-accent {
  background-color: var(--color-primary-accent);
  color: #0A1F44;
}

.hero {
  padding: 3rem 1rem;
  background: linear-gradient(180deg, rgba(10, 31, 68, 0.92) 0%, rgba(10, 31, 68, 0.8) 100%);
  color: #f9fbff;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(160% 140% at 80% 20%, rgba(0, 194, 203, 0.3), transparent 45%);
  pointer-events: none;
}

.section-title {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.footer {
  background: #0c234f;
  color: #cdd7f2;
  padding: 1.5rem 0;
}

.footer a {
  color: var(--color-primary-accent);
}

.spinner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 68, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.spinner-overlay.active {
  display: flex;
}