/* AeroPacer 共用導覽列（2026-09-10 蘋果式重做）：一條薄薄的毛玻璃列、連結置中、一顆膠囊 CTA；
   手機＝從列下方滑出的整片選單，大字一列一項。各頁的舊 .topbar 規則保留不動，這裡用更高的特異性蓋過。
   引用方式：<link rel="stylesheet" href="/assets/nav.css"> 放在頁面 <style> 之後。 */
header.topbar{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:none;margin:0;padding:0 max(20px,calc((100% - 1100px) / 2));height:56px;
  background:color-mix(in srgb,var(--ground) 80%,transparent);
  backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
header.topbar .logo{font-size:0;letter-spacing:0}
header.topbar .logo svg{height:22px;width:auto;display:block}
header.topbar .topnav{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
header.topbar .topnav .menu{display:flex;align-items:center;gap:2px;margin:0 auto}
/* tokens.css 的 .topbar nav a 把連結釘成 34px 高＋細框＋line-height:1，這裡全部放開（手機選單一列 20px 字要 50px 高） */
header.topbar .topnav .nl{color:var(--muted);font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:99px;background:none;
  display:inline-flex;align-items:center;height:auto;line-height:1.3;border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;text-decoration:none;letter-spacing:.01em;white-space:nowrap;
  transition:color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
header.topbar .topnav .nl:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
header.topbar .topnav .nl[aria-current="page"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
header.topbar .cta-s,header.topbar .topnav .cta-s{background:var(--accent);color:var(--cta-ink);border:0;border-radius:99px;padding:7px 15px;
  font-size:13.5px;font-weight:700;line-height:1.3;white-space:nowrap;text-decoration:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background-color var(--dur-1) var(--ease-out)}
header.topbar .cta-s:hover,header.topbar .topnav .cta-s:hover{background:var(--accent-bright);color:var(--cta-ink);border-color:transparent}
header.topbar .menubtn{display:none;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer;padding:0;
  align-items:center;justify-content:center;backdrop-filter:none;-webkit-backdrop-filter:none;flex:none}
header.topbar .menubtn svg{width:22px;height:22px;transition:transform var(--dur-2) var(--ease-out)}
header.topbar .menubtn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);border-color:transparent}
@media (max-width:760px){
  header.topbar{height:52px;padding:0 14px 0 16px;gap:8px}
  header.topbar .topnav{justify-content:flex-end}   /* 選單抽離後只剩 CTA＋漢堡，要靠右不是置中（教練 2026-09-10 手機截圖） */
  header.topbar .menubtn{display:inline-flex}
  header.topbar .topnav.open .menubtn svg{display:none}
  header.topbar .topnav.open .menubtn::before{content:"✕";font-size:18px;font-weight:700;line-height:1}
  header.topbar .topnav .menu{position:fixed;left:0;right:0;top:52px;margin:0;flex-direction:column;align-items:stretch;gap:0;
    padding:6px 20px 20px;background:var(--ground);   /* 選單本體不透明：首頁 hero 的大字會從半透明底透出來（2026-09-10 實測） */
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-pop);
    transform:translateY(-10px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
  header.topbar .topnav.open .menu{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
  header.topbar .topnav .nl{font-size:20px;font-weight:800;color:var(--ink);padding:15px 2px;border-radius:0;display:flex;
    border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:none}
  header.topbar .topnav .nl:hover{background:none;color:var(--accent)}
  header.topbar .topnav .nl[aria-current="page"]{background:none;color:var(--accent)}
  header.topbar .topnav .nl:last-child{border-bottom:0}
  header.topbar .cta-s,header.topbar .topnav .cta-s{padding:7px 13px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){ header.topbar .topnav .menu,header.topbar .menubtn svg{transition:none} }