.navbar{
  top:0;
  width:100%;
  height:125px;
  display:flex;
  align-items:center;
  z-index:100;
  position: relative;
}

.nav-inner{
  width:100%;
  max-width:1450px;
  padding:0 36px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.logo-mark{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-mark img{
  height:38px;
}

.center-menu{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
}

.nav-link{
  position:relative;
  color:var(--nav-text);
  font-size:16px;
  text-decoration:none;
  cursor:pointer;
  transition:.25s;
}

.nav-link.active{
  color:var(--nav-active);
  font-weight:600;
}


.nav-link:hover::after,
.nav-link.active::after{
  width:100%;
}

.nav-item-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.nav-link-with-dropdown{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  cursor:pointer;
  display: flex;
  align-items: center;
}

.nav-link-with-dropdown svg{
  margin-left: 10px;
  stroke: #818182;
}

.nav-link.active svg {
  stroke: rgba(255, 255, 255, 1);
}

.mega-dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,8px);
  min-width:380px;
  max-width:430px;
  background:rgba(23, 23, 25, 0.5);
  backdrop-filter: blur(6.9px);
  -webkit-backdrop-filter: blur(6.9px); 
  border-radius:10px;
  border:1px solid rgba(39, 40, 41, 1);
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  z-index:180;
}

.nav-item-dropdown:hover .mega-dropdown{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.mega-row{
  display:flex;
  gap:12px;
  justify-content:space-between;
}

.mega-row-center{
  justify-content:center;
}

.mega-row-center .mega-pill{
  flex:0 0 auto;
  min-width:220px;
}

.mega-pill{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border-radius: 8px;
  border:1px solid transparent;
  cursor:pointer;
  color:rgba(255, 255, 255, 1);
  text-decoration: none;
  font-size:15px;
  font-weight: 500;
  white-space:nowrap;
  justify-content: center;
}

.mega-pill:hover{
  background: rgba(39, 40, 41, 1);
}



.mega-pill .icon{
  width:22px;
  height:22px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:flex-end;
}

.lang-dropdown{
  position:relative;
  display: none;
}

.lang-trigger{
  cursor:pointer;
  color:#d1d5db;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:16px;
}

.lang-panel{
  position:absolute;
  right:0;
  top:42px;
  width:340px;
  height:160px;
  background:var(--dropdown-bg);
  border-radius:16px;
  padding:20px 24px;
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  display:none;
  flex-direction:column;
  z-index:200;
}

.lang-dropdown.open .lang-panel{
  display:flex;
}

.btn-custom{
  position:relative;
  border-radius:9999px;
  border:1px solid hsla(0,0%,100%,.05);
  padding:.8rem 1.2rem;
  font-weight:500;
  color:hsla(0,0%,100%,.5);
  background:transparent;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
  display:inline-flex;
  text-decoration:none;
}

.btn-custom::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:75%;
  height:1px;
  transform:translateX(-50%);
  opacity:.6;
  transition:opacity 1s ease,filter 1s ease;
  background:radial-gradient(circle,rgba(144,0,255,1) 1%,rgba(144,0,255,.08) 95%,rgba(144,0,255,.04) 100%);
  filter:drop-shadow(0 0 0 rgba(144,0,255,0));
  pointer-events:none;
}

.btn-custom:hover{
  border-color:hsla(0,0%,100%,.1);
  color:#fff;
}

.btn-custom:hover::after{
  opacity:1;
  filter:drop-shadow(0 0 7px rgba(144,0,255,1));
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
}

.hamburger span{
  width:24px;
  height:3px;
  background:#fff;
  border-radius:3px;
}

.mobile-menu{
  position:fixed;
  top:0;
  right:-100%;
  width:300px;
  height:100vh;
  background:rgba(10,10,15,.95);
  backdrop-filter:blur(18px);
  padding:40px 28px;
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:.35s ease;
  z-index:300;
}

.mobile-menu.open{
  right:0;
}

.mobile-menu a{
  color:#fff;
  font-size:20px;
  text-decoration:none;
}

.mobile-close{
  font-size:32px;
  margin-bottom:20px;
  cursor:pointer;
}

.mobile-item{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mobile-link{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  padding:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.mobile-link .arrow{
  font-size:18px;
  opacity:.7;
}

.mobile-sub{
  display:none;
  flex-direction:column;
  gap:16px;
  padding-left:10px;
}

.mobile-sub img {
  margin-right: 10px;
}

.mobile-item.open .mobile-sub{
  display:flex;
}

.mobile-sub a{
  font-size:16px;
  color:#d1d5db;
  display: flex;
  align-items: center;
}

.lang-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.lang-option{
  width:140px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(255,255,255,0.06);
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  color:#fff;
  font-size:15px;
  transition:.15s;
}

.lang-option:hover{
  background:rgba(255,255,255,0.12);
}

.lang-option.active{
  background:rgba(34,197,94,0.18);
  border-color:rgba(34,197,94,0.55);
  color:#bbf7d0;
}

.info-text{
  text-align:center;
  color:#a1a1aa;
  font-size:13px;
  margin:6px 0;
}

.currency-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.currency-option{
  width:85px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  color:#fff;
  border:1px solid transparent;
  font-size:13px;
  cursor:pointer;
  transition:.15s;
}

.currency-option:hover{
  background:rgba(255,255,255,0.12);
}

.currency-option.active{
  background:rgba(144,0,255,0.22);
  border-color:rgba(144,0,255,0.6);
  color:#f3e8ff;
}


@media(max-width:1100px){
  .navbar{height:120px}
  .nav-inner{display:flex;justify-content:space-between;padding:0 22px}
  .center-menu{display:none}
  .hamburger{display:flex}
  .mega-dropdown{display:none!important}
}

@media(max-width:700px){
  .navbar{height:95px}
  .btn-custom{display:none}
}

@media(max-width:480px){
  .navbar{height:82px}
  .logo-mark{width:34px;height:34px}
  .lang-trigger{font-size:14px}
  .hamburger span{width:22px}
  .mobile-menu{width:260px;padding:32px 22px}
  .mobile-menu a,
  .mobile-link{font-size:18px}
}

@media(min-width:1101px){
  .mobile-menu{
    right:-100%;
    pointer-events:none;
    opacity:0;
  }

  .mobile-menu.open{
    right:-100%;
  }
}