/* Shared screenshot-style header and navigation */
body{
  background:#0f3157;
  color:#eef5ff;
}

header.site-header,
header.topbar{
  background:#07172d;
  border-bottom:1px solid rgba(151,185,230,.18);
  box-shadow:none;
  padding:0;
  text-align:left;
}

.site-header .topbar,
header.topbar{
  width:100%;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:0 52px;
}

.brand,
.logo{
  color:#eef5ff;
  font-size:1.45rem;
  font-weight:800;
  letter-spacing:.2px;
  text-decoration:none;
}

.site-header nav,
header.topbar nav,
.mainnav{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 18px;
  background:transparent;
  backdrop-filter:none;
  padding:0;
  border-bottom:0;
}

.site-header nav a,
header.topbar nav a,
.mainnav a{
  color:#aebfda;
  text-decoration:none;
  padding:10px 12px;
  border:0;
  border-radius:999px;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:0;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}

.site-header nav a:hover,
header.topbar nav a:hover,
.mainnav a:hover{
  color:#eef5ff;
  background:rgba(103,164,255,.14);
  transform:translateY(-1px);
}

.site-header nav a.active,
header.topbar nav a.active,
.mainnav a.active{
  background:#67a4ff;
  color:#07172d;
}

@media (max-width:768px){
  .site-header .topbar,
  header.topbar{
    min-height:auto;
    align-items:flex-start;
    flex-direction:column;
    padding:22px 24px;
    gap:16px;
  }

  .site-header nav,
  header.topbar nav,
  .mainnav{
    justify-content:flex-start;
    width:100%;
  }
}

@media (max-width:480px){
  .site-header .topbar,
  header.topbar{
    padding:20px 18px;
  }

  .brand,
  .logo{
    font-size:1.25rem;
  }

  .site-header nav,
  header.topbar nav,
  .mainnav{
    gap:8px;
  }

  .site-header nav a,
  header.topbar nav a,
  .mainnav a{
    padding:9px 11px;
    font-size:.9rem;
  }
}