:root {
  /* Ground & accent */
  --navy: #00276f;
  --navy-hover: #0a3480;
  --coral: #ff6b6b;
  --coral-light: #ff8a7d;
  --periwinkle: #afbbed;
  --white: #ffffff;

  /* Alpha layers over navy */
  --fill-card: rgba(255, 255, 255, 0.04);
  --fill-hover-soft: rgba(255, 255, 255, 0.05);
  --fill-hover: rgba(255, 255, 255, 0.10);
  --rule-chrome: rgba(255, 255, 255, 0.12);
  --rule-grid: rgba(255, 255, 255, 0.14);
  --border-card: rgba(255, 255, 255, 0.16);
  --border-frame: rgba(255, 255, 255, 0.18);
  --text-faint: rgba(255, 255, 255, 0.28);
  --text-numeral: rgba(255, 255, 255, 0.32);
  --text-meta: rgba(255, 255, 255, 0.42);
  --text-meta-2: rgba(255, 255, 255, 0.45);
  --text-inactive: rgba(255, 255, 255, 0.55);
  --header-fill: rgba(0, 39, 111, 0.92);

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #00276f !important;
  color: #afbbed !important;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

::selection {
  background: var(--coral);
  color: var(--navy);
}

:focus-visible {
  outline: 2px solid var(--coral-light);
  outline-offset: 3px;
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Hover transitions */
[style*="border:1px solid"], [style*="background:rgba(255,255,255,0.04)"] {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Button & Card Interactivity Classes */
.btn-pill-primary {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 50px;
  background: #ff6b6b;
  border: 2px solid #ff6b6b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-pill-primary:hover {
  background: #00276f !important;
  color: #ff6b6b !important;
}

.btn-pill-ghost {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 50px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-pill-ghost:hover {
  background: #fff !important;
  color: #00276f !important;
  border-color: #fff !important;
}

.card-hover:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: #ff6b6b !important;
}

.bond-hover:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

.opaque-hover:hover {
  background: #0a3480 !important;
}

.nav-link:hover {
  color: #ffffff !important;
}

.title-link:hover {
  color: #ff8a7d !important;
}

.badge-icon:hover {
  opacity: 0.75 !important;
}

/* Media Queries for Signal Design */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .shot {
    max-width: 380px;
    justify-self: start;
  }
  .tiles {
    grid-template-columns: 1fr 1fr !important;
  }
  .posts {
    grid-template-columns: 1fr 1fr !important;
  }
  .adv, .edu {
    grid-template-columns: 1fr !important;
  }
  .nums {
    grid-template-columns: 1fr 1fr !important;
  }
  .logos {
    grid-template-columns: 1fr 1fr !important;
  }
  .two {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  header .wrap {
    padding: 0 16px !important;
    gap: 12px !important;
  }
  header nav {
    gap: 12px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.8px !important;
  }
  .mega {
    font-size: 46px !important;
    line-height: 52px !important;
  }
  .tiles, .nums, .posts, .logos, .adv, .edu, .bonds {
    grid-template-columns: 1fr !important;
  }
  .wrap {
    padding: 0 20px !important;
  }
}

@media (max-width: 380px) {
  header nav {
    gap: 8px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.4px !important;
  }
}