:root{
  --bg-light: #f0f0f0;
  --bg-sage:  #d0e0d0;
  --accent-teal: #30a0b0;
  --accent-dark: #507090;
  --text: #111827;
}

/* Page background: soft sage radial accents + light neutral base */
html,body{
  height:100%;
  margin:0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(208,224,208,0.90) 0%, rgba(208,224,208,0.65) 14%, rgba(240,240,240,0) 40%),
    radial-gradient(circle at 82% 88%, rgba(48,160,176,0.06) 0%, rgba(240,240,240,0) 20%),
    linear-gradient(180deg, var(--bg-light) 0%, #e9efeb 100%);
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header / logo area — center-aligned, transparent so page BG shows */
.site-header, header {
  background: transparent !important;
  padding: 2rem 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1.5rem;
}

/* Circular badge behind the logo (matching the logo circle) */
.logo-circle{
  width:120px;
  height:120px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 35% 30%, var(--bg-sage) 0%, rgba(208,224,208,0.95) 40%, rgba(240,240,240,0.0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.15));
  box-shadow: 0 8px 20px rgba(80,112,144,0.10);
  flex-shrink:0;
}

/* logo inside the badge */
.logo-circle img{
  width:78%;       /* scale the logo to sit nicely inside the circle */
  height:auto;
  display:block;
}

/* Styling for textual brand on sides (if you have "BRAIN" / "LINKS" text) */
.brand-text {
  font-weight:800;
  letter-spacing: 2px;
  font-size:1.5rem;
  color: #0b1720;
}

/* Subtle card styling so boxes contrast well on the new background */
.card, .job-card, .panel {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(80,112,144,0.06);
  padding: 1rem;
}

/* Make sure nav items & links are readable */
a, .nav-link {
  color: var(--accent-dark);
}