/* ============================================================
   nav.css
   ============================================================ */

/* 公告栏 */
.announce{
  position:fixed;top:0;left:0;right:0;z-index:1001;
  background:linear-gradient(90deg,#3730d4,#5b21b6,#3730d4);
  text-align:center;padding:9px 20px;
  font-size:13px;color:rgba(255,255,255,.9);letter-spacing:.02em;
}
.announce a{color:#5eead4;text-decoration:underline;text-underline-offset:2px}
.announce a:hover{color:#fff}

/* Nav */
.nav{
  position:fixed;top:36px;left:0;right:0;z-index:1000;
  height:68px;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  transition:background .35s var(--ease),border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(13,10,46,.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom-color:rgba(255,255,255,.08);
}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:11px}
.nav-logo-icon{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#00e5c9,#3730d4);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:#fff;
}
.nav-logo-text{font-size:19px;font-weight:700;color:#fff}

/* Links */
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;color:rgba(255,255,255,.85);transition:color .2s;display:flex;align-items:center;gap:4px}
.nav-links a:hover{color:#fff}
.arr{font-size:10px;opacity:.6}

/* Right */
.nav-right{display:flex;align-items:center;gap:14px}
.nav-lang{display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.8);cursor:pointer}
.nav-lang svg{width:17px;height:17px}

/* CTA 呼吸灯 */
.nav-cta{
  background:#fff;color:#160d45;
  font-size:14px;font-weight:700;
  padding:10px 26px;border-radius:999px;
  display:inline-flex;align-items:center;cursor:pointer;
  animation:breathe 2.8s ease-in-out infinite;
  transition:transform .2s var(--ease),box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-2px) scale(1.03);animation-play-state:paused;box-shadow:0 8px 32px rgba(255,255,255,.3)}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 4px 14px rgba(255,255,255,.12)}
  50%{box-shadow:0 0 0 5px rgba(255,255,255,.1),0 4px 22px rgba(255,255,255,.25)}
}

/* Download icon */
.nav-dl{
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.nav-dl:hover{background:rgba(255,255,255,.1);border-color:#fff}
.nav-dl svg{width:16px;height:16px;color:#fff}

/* Hamburger */
.nav-ham{display:none;flex-direction:column;gap:5px;padding:6px;cursor:pointer}
.nav-ham span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.nav-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0}
.nav-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.nav-mob{
  position:fixed;top:104px;left:0;right:0;z-index:999;
  background:rgba(13,10,46,.98);backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 0 18px;
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.nav-mob.open{opacity:1;pointer-events:auto;transform:none}
.nav-mob a{display:block;padding:13px 24px;font-size:15px;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.06);transition:color .2s,background .2s}
.nav-mob a:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav-mob .mob-cta{margin:12px 24px 0;background:#fff;color:#160d45;border-radius:999px;text-align:center;font-weight:700;padding:12px;display:block;border:none}

@media(max-width:960px){
  .nav{padding:0 20px}
  .nav-links,.nav-lang,.nav-cta{display:none}
  .nav-ham{display:flex}
}
@media(max-width:480px){
  .announce{font-size:11.5px;padding:8px 16px}
}
