:root{
  --glass-bg: rgba(255,255,255,.55);
  --glass-border: rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}


/* === Bootstrap variable overrides (dark) === */
html[data-theme="dark"]{
  /* These align Bootstrap components (cards/buttons/text-muted) with our dark theme */
  --bs-body-color: rgba(233,238,252,.92);
  --bs-body-color-rgb: 233,238,252;
  --bs-body-bg: #0b1220;
  --bs-body-bg-rgb: 11,18,32;

  --bs-emphasis-color: rgba(233,238,252,.98);
  --bs-emphasis-color-rgb: 233,238,252;

  --bs-secondary-color: rgba(233,238,252,.72);
  --bs-secondary-color-rgb: 233,238,252;

  --bs-tertiary-color: rgba(233,238,252,.60);
  --bs-tertiary-color-rgb: 233,238,252;

  --bs-border-color: rgba(255,255,255,.12);
  --bs-border-color-translucent: rgba(255,255,255,.10);

  --bs-link-color: rgba(233,238,252,.92);
  --bs-link-hover-color: rgba(233,238,252,.98);
}
/* Ensure Bootstrap "text-muted" stays readable in dark */
html[data-theme="dark"] .text-muted{
  color: rgba(233,238,252,.72) !important;
}
/* Cards and sections inherit properly */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-soft{
  color: rgba(233,238,252,.92);
}
/* === END Bootstrap variable overrides (dark) === */

html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="dark"] body{ background:#0b1220; color:#e9eefc; }
html[data-theme="dark"] .text-muted{ color: rgba(233,238,252,.75)!important; }
html[data-theme="dark"] .navbar-glass{
  background: rgba(16, 24, 40, .55);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .card-soft{
  background: rgba(16, 24, 40, .55);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .site-footer{ border-color: rgba(255,255,255,.10); background: rgba(16,24,40,.55); }

body{ background:#f7f8fb; }

.nav-spacer{ height: 78px; }

.navbar-glass{
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}

.brand-text{ font-weight: 800; letter-spacing: .2px; }

.hero-illustration{
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(13,110,253,.15), rgba(25,135,84,.12));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}

.card-soft{
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.65);
}

.icon-pill{
  width: 44px; height: 44px; border-radius: 14px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(13,110,253,.12);
  border: 1px solid var(--glass-border);
}
.icon-pill i{ font-size: 20px; }

.site-footer{
  border-top: 1px solid var(--glass-border);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.navbar .dropdown-menu{ min-width: 190px; }


/* === Navbar readability fixes === */
.navbar-glass .navbar-brand,
.navbar-glass .navbar-brand:hover{
  color: rgba(11,18,32,.92);
}

.navbar-glass .nav-link{
  color: rgba(11,18,32,.72);
  font-weight: 600;
}

.navbar-glass .nav-link:hover,
.navbar-glass .nav-link:focus{
  color: rgba(11,18,32,.92);
}

.navbar-glass .nav-link.active{
  color: rgba(11,18,32,.95);
  text-decoration: underline;
  text-underline-offset: 6px;
}

html[data-theme="dark"] .navbar-glass .navbar-brand,
html[data-theme="dark"] .navbar-glass .navbar-brand:hover{
  color: rgba(233,238,252,.95);
}

html[data-theme="dark"] .navbar-glass .nav-link{
  color: rgba(233,238,252,.70);
}

html[data-theme="dark"] .navbar-glass .nav-link:hover,
html[data-theme="dark"] .navbar-glass .nav-link:focus{
  color: rgba(233,238,252,.92);
}

html[data-theme="dark"] .navbar-glass .nav-link.active{
  color: rgba(233,238,252,.98);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Make toggler icon visible on dark glass */
html[data-theme="dark"] .navbar-glass .navbar-toggler{
  border-color: rgba(255,255,255,.22);
}
html[data-theme="dark"] .navbar-glass .navbar-toggler-icon{
  filter: invert(1) grayscale(1);
  opacity: .9;
}