/* ============================================================
   斐绩咨询 · 统一导航栏样式
   由 index.html 与 about.html 共用
   依赖各页面 :root 中的 --terra / --ink / --line / --paper 变量
   ============================================================ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(251, 247, 242, 0.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.nav.scrolled { box-shadow: 0 1px 20px rgba(46, 41, 37, 0.06); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }

.nav-brand { display: flex; align-items: center; cursor: pointer; }
.nav-brand img { height: 40px; display: block; }

.nav-links { display: flex; gap: 28px; align-items: center; }

.nav-link {
  font-size: 14px; color: var(--ink-soft); font-weight: 500;
  transition: color .2s; position: relative; white-space: nowrap;
}
.nav-link:hover { color: var(--terra); }
.nav-link.active { color: var(--terra); font-weight: 600; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--terra);
  border-radius: 1px; transition: width .25s;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---- 中 / EN 切换（仅 index.html 显示）---- */
.lang-toggle {
  display: flex; align-items: center; gap: 2px;
  background: rgba(46, 41, 37, 0.06); border-radius: 999px; padding: 3px;
  cursor: pointer; user-select: none;
}
.lang-btn {
  font-size: 12px; font-weight: 700; padding: 4px 12px;
  border-radius: 999px; color: var(--muted);
  transition: all .2s; letter-spacing: .05em;
}
.lang-btn.active { background: var(--ink); color: #fff; }
body[data-lang="off"] .lang-toggle { display: none; }

/* ---- 移动端汉堡按钮 ---- */
.nav-mobile-toggle {
  display: none; flex-direction: column; gap: 4px;
  cursor: pointer; padding: 6px;
}
.nav-mobile-toggle span {
  width: 20px; height: 2px; background: var(--ink);
  border-radius: 1px; transition: .3s;
}

/* ---- 响应式 ---- */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    background: var(--paper); padding: 24px 28px;
    gap: 16px; border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-mobile-toggle { display: flex; }

  .nav-link { font-size: 16px; width: 100%; }
  .nav-link::after { display: none; }
  .nav-link.active { border-left: 2px solid var(--terra); padding-left: 12px; }

  body[data-lang="off"] .lang-toggle { display: none; }
}

@media (max-width: 560px) {
  .nav-links { padding: 20px; }
}