/* ============================================================
   nav-lithos.css — lithos 风格毛玻璃胶囊导航（全站共用）
   首页 index.html 与全部内页引用同一份，保证导航完全同步。
   .inv 反色态仅首页翻页 JS 使用（白底屏时切白玻璃）。
   ============================================================ */

.nav { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; align-items:center; gap:2px; max-width:calc(100vw - 32px);
  padding:7px 9px 7px 20px; border-radius:999px;
  background:rgba(10,10,10,.42); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .5s, border-color .5s; }
.nav .logo { font-weight:600; font-size:14.5px; letter-spacing:.14em; color:#fff;
  text-decoration:none; margin-right:12px; transition:color .5s; }
.nav a.item { font-size:13px; color:rgba(255,255,255,.72); text-decoration:none;
  padding:7px 12px; border-radius:999px; transition:all .2s; white-space:nowrap; }
.nav a.item:hover { color:#fff; background:rgba(255,255,255,.1); }
.nav a.item.active { color:#111; background:#fff; }
.nav .cta { margin-left:8px; font-size:13px; font-weight:600; color:#111; text-decoration:none;
  background:#fff; padding:8px 18px; border-radius:999px; transition:all .2s; white-space:nowrap; }
.nav .cta:hover { transform:scale(1.04); }

/* ---------- 下拉菜单（信息绑定 / 常用链接） ---------- */
.nav .dd { position:relative; }
.nav .dd-trigger { display:flex; align-items:center; gap:5px; font-family:inherit;
  font-size:13px; line-height:inherit; color:rgba(255,255,255,.72); background:none; border:0; cursor:pointer;
  padding:7px 12px; border-radius:999px; transition:all .2s; white-space:nowrap; }
.nav .dd-trigger svg { width:9px; height:9px; stroke:currentColor; stroke-width:2.4;
  fill:none; transition:transform .25s; margin-top:1px; }
.nav .dd:hover .dd-trigger, .nav .dd:focus-within .dd-trigger {
  color:#fff; background:rgba(255,255,255,.1); }
.nav .dd:hover .dd-trigger svg, .nav .dd:focus-within .dd-trigger svg { transform:rotate(180deg); }
.nav .dd-menu { position:absolute; top:100%; left:50%; margin-top:10px;
  transform:translateX(-50%) translateY(6px); min-width:190px;
  background:rgba(15,15,15,.92); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:8px; list-style:none;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s; }
/* 桥接触发器与菜单之间的 10px 悬停断档 */
.nav .dd-menu::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
.nav .dd:hover .dd-menu, .nav .dd:focus-within .dd-menu {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav .dd-menu a { display:block; padding:8px 14px; font-size:12.5px;
  color:rgba(255,255,255,.72); text-decoration:none; border-radius:10px;
  white-space:nowrap; transition:all .15s; }
.nav .dd-menu a:hover { color:#fff; background:rgba(255,255,255,.08); }

/* ---------- 反色态（首页白底翻页屏时由 JS 切换 .inv） ---------- */
.nav.inv { background:rgba(255,255,255,.68); border-color:rgba(0,0,0,.08); }
.nav.inv .logo { color:#111; }
.nav.inv a.item { color:rgba(0,0,0,.62); }
.nav.inv a.item:hover { color:#111; background:rgba(0,0,0,.06); }
.nav.inv a.item.active { color:#fff; background:#111; }
.nav.inv .cta { background:#111; color:#fff; }
.nav.inv .dd-trigger { color:rgba(0,0,0,.62); }
.nav.inv .dd:hover .dd-trigger, .nav.inv .dd:focus-within .dd-trigger {
  color:#111; background:rgba(0,0,0,.06); }
.nav.inv .dd-menu { background:rgba(255,255,255,.95); border-color:rgba(0,0,0,.08); }
.nav.inv .dd-menu a { color:rgba(0,0,0,.62); }
.nav.inv .dd-menu a:hover { color:#111; background:rgba(0,0,0,.05); }

/* ---------- 移动端汉堡菜单（≤900px 才出现） ---------- */
.nav .burger { display:none; width:38px; height:38px; margin-left:4px; flex:0 0 auto;
  align-items:center; justify-content:center; border:0; border-radius:999px;
  background:none; color:#fff; cursor:pointer; transition:background .2s; }
.nav .burger svg { width:18px; height:12px; stroke:currentColor; stroke-width:1.8;
  fill:none; stroke-linecap:round; }
.nav .burger:active { background:rgba(255,255,255,.12); }
.nav.inv .burger { color:#111; }
.nav.inv .burger:active { background:rgba(0,0,0,.08); }

.nav .burger-menu { position:absolute; top:calc(100% + 10px); right:0;
  width:min(86vw, 320px); max-height:72vh; overflow-y:auto;
  background:rgba(15,15,15,.94); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:10px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s, transform .25s, visibility .25s; }
.nav.open .burger-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav .burger-menu a { display:block; padding:11px 14px; font-size:14px;
  color:rgba(255,255,255,.78); text-decoration:none; border-radius:12px;
  transition:background .15s, color .15s; }
.nav .burger-menu a:hover, .nav .burger-menu a:active { color:#fff; background:rgba(255,255,255,.08); }
.nav .burger-menu a.active { color:#e8823a; }
.nav .burger-menu .b-cap { padding:12px 14px 4px; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; color:rgba(255,255,255,.4); }
.nav.inv .burger-menu { background:rgba(255,255,255,.96); border-color:rgba(0,0,0,.08); }
.nav.inv .burger-menu a { color:rgba(0,0,0,.7); }
.nav.inv .burger-menu a:hover, .nav.inv .burger-menu a:active { color:#111; background:rgba(0,0,0,.05); }
.nav.inv .burger-menu a.active { color:#e8823a; }
.nav.inv .burger-menu .b-cap { color:rgba(0,0,0,.4); }

/* ---------- 响应式：子元素顺序 logo,item×8,dd×2,item(联系),cta,burger,burger-menu ----------
   1180 档藏两个下拉和「联系我们」（倒数第 2 个 a，避开 cta）；
   900 档只留 logo + CTA + 汉堡（面板平铺全部导航与外链） */
@media (max-width:1420px){ .nav a.item, .nav .dd-trigger { font-size:12px; padding:6px 9px; } .nav .logo { margin-right:8px; } }
@media (max-width:1180px){ .nav > .dd, .nav > a:nth-last-child(4) { display:none; } }
@media (max-width:900px){
  .nav a.item, .nav .dd { display:none; }
  .nav { padding-right:12px; }
  .nav .burger { display:flex; }
}