:root{
  /* Innovation palette (bright route on deep navy/black) */
  --nav-bg: rgba(8,10,20,.94);   /* deep navy-black */
  --map-grid: rgba(255,255,255,.06);
  --map-minor: rgba(255,255,255,.12);
  --map-major: rgba(255,255,255,.22);
  --route: #ffcc00;              /* vivid route line */
  --route-glow: rgba(255,204,0,.65);
  --brand-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

#site-navbar{
  background: var(--nav-bg);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}

#site-navbar #navCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:-1;
  opacity:.9; /* keep readable but visible */
}

/* links */
#site-navbar .nav-link{ color:rgba(255,255,255,.9) }
#site-navbar .nav-link.active{ color:#fff; border-bottom:2px solid var(--route) }


.about-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}