/* Navigation bar + mobile menu */
nav {
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:20;
  background:#06080dcc;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}

nav .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:16px
}

.logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  font-size:19px
}

.logo i {
  width:26px;
  height:26px;
  border-radius:7px;
  background:linear-gradient(135deg,var(--cy),var(--bl));
  clip-path:polygon(0 100%,35% 0,55% 0,25% 100%,60% 100%,100% 0,100% 100%)
}

.links {
  display:flex;
  gap:30px;
  font-size:15px;
  color:#c2d8e6
}

.links a {
  padding:6px 0;
  border-bottom:1px solid transparent
}

.links a:hover,.links a.on {
  color:#fff;
  border-color:var(--cy)
}

.navr {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:15px
}

nav {
  position:sticky
}

nav {
  transition:background .3s,box-shadow .3s
}

nav.sc {
  background:#060a14ee;
  box-shadow:0 10px 40px #00000066
}

.menu {
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0e1c2aaa;
  align-content:center;
  justify-items:center;
  gap:5px;
  cursor:pointer
}

.menu span {
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  transition:transform .3s
}

nav.open .menu span:first-child {
  transform:translateY(3.5px) rotate(45deg)
}

nav.open .menu span:last-child {
  transform:translateY(-3.5px) rotate(-45deg)
}

.res-dropdown:hover .dropdown-content { display: flex !important; }
.res-item:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }

.res-dropdown:focus-within .dropdown-content, .res-dropdown:active .dropdown-content { display: flex !important; }