nav .nav-links{
  display:flex !important;
  gap:1rem;
  margin-left:auto;
  transition:transform .3s ease,opacity .3s ease;
}

.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(0,116,255,0.35);
  background:rgba(0,0,0,0.45);
  color:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}

.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:#fff;
  margin:4px 0;
  border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;
}

.nav-toggle:hover{
  background:rgba(0,116,255,0.2);
  border-color:rgba(0,116,255,0.6);
  transform:translateY(-1px);
}

.nav-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

body.nav-open{overflow:hidden;}

@media (max-width:768px){
  nav{gap:0.6rem;}
  nav .nav-links{
    position:fixed;
    top:72px;
    left:1.25rem;
    right:1.25rem;
    background:rgba(2,11,24,0.95);
    border:1px solid rgba(0,116,255,0.4);
    border-radius:18px;
    padding:1.5rem;
    display:flex !important;
    flex-direction:column;
    gap:1rem;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.65);
    opacity:0;
    pointer-events:none;
    transform:translateY(-12px);
    margin-left:0 !important;
  }
  nav .nav-links.open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  nav .nav-links a{font-size:1.1rem;}
  .nav-toggle{display:flex;}
}
