.nx-header{
  position:fixed;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  width:min(928px,calc(100% - 48px));
  height:68px;
  z-index:1000;
  display:flex;
  align-items:center;
  padding:0 10px 0 28px;
  border:1px solid var(--nx-header-border);
  border-radius:999px;
  background:rgba(24,21,38,.62);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:
    0 12px 45px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(233,239,249,.06);
  transition:top .38s cubic-bezier(.2,.8,.2,1),
             transform .38s cubic-bezier(.2,.8,.2,1),
             background .3s ease,
             border-color .3s ease,
             box-shadow .3s ease;
}
.nx-header:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(158,123,183,.10),transparent 38%,rgba(158,123,183,.06));
}
.nx-header.is-scrolled{
  top:12px;
  background:rgba(18,16,29,.82);
  border-color:rgba(185,143,224,.52);
  box-shadow:0 16px 55px rgba(0,0,0,.34),0 0 28px rgba(158,123,183,.08);
}
.nx-header.is-hidden{
  top:-92px !important;
}
.nx-header-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
  z-index:1;
}
.nx-logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--nx-light);
  flex-shrink:0;
}
.nx-logo-img{
  height:34px;
  width:auto;
  display:block;
}
.nx-nav{
  display:flex;
  align-items:center;
  gap:27px;
  margin-left:auto;
}
.nx-nav-link{
  position:relative;
  padding:25px 0;
  color:#e9eff9;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  transition:color .25s ease;
}
.nx-nav-link:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:17px;
  width:0;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#9e7bb7,#9e7bb7);
  transform:translateX(-50%);
  transition:width .28s ease;
}
.nx-nav-link:hover,
.nx-nav-link.is-active{color:#fff}
.nx-nav-link:hover:after,
.nx-nav-link.is-active:after{width:18px}
.nx-header-cta{
  position:relative;
  overflow:hidden;
  min-width:134px;
  height:44px;
  padding:0 23px;
  border:0;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(100deg,#2b1e51,#9e7bb7);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 0 22px rgba(111,61,220,.34);
  transition:transform .25s ease,box-shadow .25s ease;
}
.nx-header-cta:before{
  content:"";
  position:absolute;
  top:0;
  left:-70%;
  width:45%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
.nx-header-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 28px rgba(111,61,220,.48);
}
.nx-header-cta:hover:before{left:130%}
.nx-menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(158,123,183,.42);
  border-radius:50%;
  background:rgba(43,30,81,.45);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nx-menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(158,123,183,.42);
  border-radius:50%;
  background:rgba(43,30,81,.45);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.nx-menu-toggle:active{
  background:rgba(158,123,183,.28);
}
.nx-menu-toggle:hover,
.nx-menu-toggle:focus{
  background-color:rgba(43,30,81,.45);
  color:inherit;
}
.nx-menu-toggle span{
  display:block;
  width:17px;
  height:1.5px;
  background:#e9eff9;
  transition:transform .3s ease,opacity .3s ease;
}
.nx-mobile-panel{
  display:none;
}

@media(max-width:800px){
  .nx-header{
    width:calc(100% - 28px);
    height:62px;
    top:14px;
    padding:0 8px 0 20px;
  }
  .nx-header.is-scrolled{top:9px}
  .nx-logo-img{height:30px}
  .nx-nav,.nx-header-cta{display:none}
  .nx-menu-toggle{display:flex}
  .nx-mobile-panel{
    position:absolute;
    top:70px;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:10px;
    border:1px solid rgba(158,123,183,.38);
    border-radius:22px;
    background:rgba(18,16,29,.94);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 20px 55px rgba(0,0,0,.38);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.98);
    transform-origin:top center;
    transition:opacity .25s ease,visibility .25s ease,transform .25s ease;
  }
  .nx-header.menu-open .nx-mobile-panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
  .nx-mobile-link{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:0 16px;
    border-radius:14px;
    color:#e9eff9;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:background .2s ease,color .2s ease;
  }
  .nx-mobile-link:hover,.nx-mobile-link.is-active{
    color:#fff;
    background:rgba(158,123,183,.12);
  }
  .nx-mobile-contact{
    margin-top:6px;
    min-height:48px;
    border:0;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(100deg,#2b1e51,#9e7bb7);
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
  }
  .nx-header.menu-open .nx-menu-toggle span:first-child{
    transform:translateY(3.25px) rotate(45deg);
  }
  .nx-header.menu-open .nx-menu-toggle span:last-child{
    transform:translateY(-3.25px) rotate(-45deg);
  }
}
@media(prefers-reduced-motion:reduce){
  .nx-header{transition:none}
}

.nx-header{
  top:24px;
  width:min(980px,calc(100% - 48px));
  height:72px;
  background:rgba(24,21,38,.78);
  border-color:rgba(158,123,183,.46);
}
.nx-header.is-scrolled{top:14px;background:rgba(24,21,38,.92)}
.nx-nav{gap:30px}
.nx-logo-img{height:38px}
.nx-header-cta{
  background:linear-gradient(100deg,#2b1e51,#9e7bb7);
  box-shadow:0 0 24px rgba(158,123,183,.22);
}
.nx-header-cta:hover{box-shadow:0 10px 30px rgba(158,123,183,.30)}

@media(max-width:800px){
  .nx-header{top:14px;height:62px;width:calc(100% - 28px)}
  .nx-header.is-scrolled{top:9px}
  .nx-logo-img{height:30px}
}