/* ==========================================================================
   TOPBAR + HEADER
   ========================================================================== */
.topbar{
  background: var(--color-ink);
  color: #fff;
  font-size: 13.5px;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 32px;
  padding-top: 9px;
  padding-bottom: 9px;
  flex-wrap: wrap;
}
.topbar a{
  color: rgba(255,255,255,.85);
  transition: color .2s ease;
}
.topbar a:hover{ color: var(--color-accent); }
.topbar strong{ color: var(--color-accent); }

.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled{
  border-bottom-color: var(--color-border);
  box-shadow: 0 12px 30px -24px rgba(20,25,43,.4);
}
.site-header .container{
  display:flex;
  align-items:center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand img{ height: 32px; width:auto; }

.main-nav{
  display:flex;
  align-items:center;
  gap: 30px;
  margin-left: 12px;
  flex: 1;
}
.main-nav a{
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
  padding: 8px 0;
  position: relative;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.main-nav a:hover::after,
.main-nav a.is-active::after{
  transform: scaleX(1);
  transform-origin: left;
}
.main-nav a.is-active{ color: var(--color-primary); }

.header-actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:6px;
}
.nav-toggle span{
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transition: transform .3s ease, opacity .3s ease;
}