.pdu-site-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px clamp(20px,4vw,58px);
  border-bottom:1px solid transparent;
  background:rgba(2,10,20,.74);
  backdrop-filter:blur(18px)
}

.pdu-site-header.scrolled{
  border-color:var(--line);
  box-shadow:0 12px 35px rgba(0,0,0,.25)
}

.pdu-brand{
  display:flex;
  align-items:center;
  gap:16px
}

.pdu-brand-mark{
  color:transparent;
  background:linear-gradient(180deg,#fff,#8eb6d8);
  -webkit-background-clip:text;
  background-clip:text;
  font-size:2.2rem;
  font-weight:800;
  letter-spacing:-.1em
}

.pdu-brand-copy{
  display:grid;
  gap:3px
}

.pdu-brand-copy small{
  color:var(--cyan);
  font-size:.68rem
}

.pdu-nav{
  display:flex;
  align-items:center;
  gap:6px
}

.pdu-nav a{
  padding:9px 12px;
  border-radius:10px;
  color:#aec4d2;
  font-size:.82rem
}

.pdu-nav a:hover,
.pdu-nav a.active{
  color:#fff;
  background:rgba(255,255,255,.06)
}

.pdu-nav .pdu-nav-cta{
  color:#03101b;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  font-weight:800
}

.pdu-menu-toggle{
  display:none;
  border:0;
  color:#fff;
  background:transparent;
  font-size:1.5rem
}

@media(max-width:820px){
  .pdu-menu-toggle{display:block}

  .pdu-nav{
    position:absolute;
    top:72px;
    left:18px;
    right:18px;
    display:none;
    align-items:stretch;
    flex-direction:column;
    padding:13px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#061625;
    box-shadow:var(--shadow)
  }

  .pdu-nav.open{display:flex}
}