/* ============================================================
   CFO Pilot 官網（產品介紹站）
   與主系統 tokens.main.css 共用同一套視覺 token（機場／登機證語彙、
   香檳金強調色、無藍、深夜模式必備）。背景沿用登入頁 sky.ts 的
   「隨真實時間變色的高空雲海」，把整個首頁想成一張放大的登機證。
   ============================================================ */
:root{
  --e:cubic-bezier(.22,1,.36,1);
  --dur-fast:.25s; --dur:.45s; --dur-slow:.9s;

  --font-sans:"Space Grotesk","Noto Sans TC",system-ui,-apple-system,sans-serif;
  --font-tc:"Noto Sans TC",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --font-mono-tc:"JetBrains Mono","Noto Sans TC","PingFang TC","Noto Sans CJK TC","Microsoft JhengHei",ui-monospace,SFMono-Regular,monospace;

  --fs-display:clamp(34px,5.6vw,64px); --fs-h1:clamp(24px,3.2vw,34px);
  --fs-h2:20px; --fs-body:15px; --fs-sm:13px; --fs-xs:11.5px; --fs-micro:10px;
  --ls-caps:.16em;

  --bg:#f2f3f4; --surface:#ffffff; --surface-2:#fafbfb;
  --line:#e7e9eb; --line-strong:#d9dcdf;
  --hover-wash:rgba(20,22,25,.035);

  --ink:#111315; --ink-2:#22262a; --muted:#4f545a;
  --pos:#2f6b4f; --neg:#a9503a; --warn:#9a6b12;

  --r-sm:7px; --r:9px; --r-lg:14px; --r-xl:16px;
  --shadow:0 18px 44px -30px rgba(20,22,25,.28);
  --lift:0 10px 22px -12px rgba(20,22,25,.30), 0 2px 6px -3px rgba(20,22,25,.18);

  --accent:#b0894e; --accent-2:#8a6a38;

  --atb-barcode:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxMjAiIHZpZXdCb3g9IjAgMCAyMiAxMjAiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgZmlsbD0iIzE2MTgxYSI+PHJlY3QgeD0iOCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSIyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSI2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSI2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSI2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIiIHk9IjgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9IjEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMCIgeT0iMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMiIgeT0iMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIwIiB5PSIxNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIiIHk9IjE0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSIxNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSIxNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSIxNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSIxNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSIxNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIiIHk9IjE2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSIxNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSIxNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSIxNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSIxNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSIxNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSIxNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjE4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iMTgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI0IiB5PSIxOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSIxOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSIxOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iMjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSIyMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSIyMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSIyMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSIyMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjIyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOCIgeT0iMjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iMjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSIyNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9IjI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9IjI0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMjYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSIyNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSIyNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSIyNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSIyNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjI4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjI4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjI4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjI4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iMzAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSIzMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjMwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjMwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjMwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjMyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjMyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9IjMyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iMzQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSIzNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSIzNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSIzNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSIzNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSIzNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjM2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iMzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMCIgeT0iMzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMiIgeT0iMzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iMzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iMzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSIzOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjM4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9IjM4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjM4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9IjM4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjM4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iNDAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI0IiB5PSI0MCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSI0MCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjQyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjQyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjQyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjQyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iNDQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSI0NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSI0NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSI0NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSI0NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSI0NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjQ2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iNDYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI0IiB5PSI0NiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjQ2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOCIgeT0iNDYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iNDYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iNDYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSI0OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjQ4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjQ4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9IjQ4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iNTAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIwIiB5PSI1MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjUyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iNTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMiIgeT0iNTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iNTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iNTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iNTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIwIiB5PSI1NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIiIHk9IjU0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iNTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMCIgeT0iNTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMiIgeT0iNTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iNTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iNTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iNTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSI1NiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjU2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iNTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMCIgeT0iNTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMiIgeT0iNTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iNTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iNTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iNTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIwIiB5PSI1OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjU4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9IjU4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjU4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjU4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iNjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSI2MCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjYwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iNjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSI2MCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSI2MCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSI2MCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIiIHk9IjYyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOCIgeT0iNjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iNjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iNjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSI2NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSI2NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSI2NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSI2NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSI2NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSI2NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjY2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjY2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjY2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjY2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iNjgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSI2OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjY4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9IjY4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjY4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjY4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iNzAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI0IiB5PSI3MCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjcwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOCIgeT0iNzAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMCIgeT0iNzAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMiIgeT0iNzAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIwIiB5PSI3MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIiIHk9IjcyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iNzIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSI3MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSI3MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSI3MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSI3MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9Ijc0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9Ijc0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9Ijc0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9Ijc0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iNzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSI3NiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9Ijc2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOCIgeT0iNzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iNzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iNzYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSI3OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9Ijc4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iNzgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMiIgeT0iNzgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iNzgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iNzgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iNzgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSI4MCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjgwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iODIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSI4MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSI4MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSI4MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSI4MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSI4MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSI4MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSI4NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSI4NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSI4NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSI4NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9Ijg2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9Ijg2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9Ijg2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9Ijg2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9Ijg2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iODgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSI4OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9Ijg4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iODgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSI4OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSI4OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSI4OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSI4OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjkwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iOTAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMCIgeT0iOTAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iOTAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iOTAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iOTAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iOTAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI0IiB5PSI5MiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjkyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjkyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjkyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9IjkyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iOTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSI5NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSI5NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSI5NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSI5NCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9Ijk2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9Ijk2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9Ijk2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9Ijk2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iOTgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSI5OCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9Ijk4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9Ijk4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9Ijk4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9Ijk4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9Ijk4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iMTAwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjEwMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSIxMDAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iMTAwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMTAyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOCIgeT0iMTAyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9IjEwMiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSIxMDIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iMTAyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjEwMiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjEwNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIiIHk9IjEwNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSIxMDQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iMTA0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMjAiIHk9IjEwNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjEwNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjYiIHk9IjEwNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE2IiB5PSIxMDYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOCIgeT0iMTA2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iMTA4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMTA4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iMTA4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9IjEwOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyIiB5PSIxMDgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iMTA4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTYiIHk9IjEwOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE4IiB5PSIxMDgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMCIgeT0iMTA4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMCIgeT0iMTEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMTEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iMTEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTAiIHk9IjExMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE0IiB5PSIxMTAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyIiB5PSIxMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI0IiB5PSIxMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2IiB5PSIxMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4IiB5PSIxMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNCIgeT0iMTEyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTgiIHk9IjExMiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSIxMTIiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIwIiB5PSIxMTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI0IiB5PSIxMTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMCIgeT0iMTE0IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjExNCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjAiIHk9IjExNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIiIHk9IjExNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjExNiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwIiB5PSIxMTYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxNiIgeT0iMTE2IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMiIgeT0iMTE4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNCIgeT0iMTE4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNiIgeT0iMTE4IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTQiIHk9IjExOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjIwIiB5PSIxMTgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48L3N2Zz4=);
}

[data-theme="dark"]{
  --bg:#0f0e0c; --surface:#141210; --surface-2:#1a1815;
  --line:#241f18; --line-strong:#332d24; --hover-wash:rgba(255,255,255,.045);
  --ink:#f7f3ea; --ink-2:#e8e3d7; --muted:#c2bbaa;
  --pos:#46e08a; --neg:#ff5a4d; --warn:#f5b301;
  --shadow:0 30px 70px -34px rgba(0,0,0,.75);
  --lift:0 12px 26px -14px rgba(0,0,0,.85), 0 2px 6px -3px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
/* scroll-padding：錨點跳過去時，區塊不要被固定導覽列蓋住 */
html{scroll-behavior:smooth;background:#0f1218;scroll-padding-top:76px}
/* ⚠ 這裡**只能是 hidden，不能是 clip**：clip 會建立裁切脈絡，
   把 position:fixed 的天空 canvas 一起裁掉（捲下去整片變黑）。
   而 hidden 會讓 body 變成捲動容器、使錨點連結失效——那件事改用 JS 處理
   （intro.js 的「站內錨點」那一段），不要動這一行。 */
body{margin:0;background:transparent;color:var(--ink);font-family:var(--font-tc);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:color var(--dur) var(--e)}

/* ============================================================
   全站唯一一顆天空：固定在視窗後方，整頁共用同一個動畫。
   **時間由捲動位置決定**——捲到頂是日出、捲到底是日落，
   中間一路過白晝與黃金時刻。雲海本身仍持續往前流動（不捲也在動）。
   內容區塊是一片片浮在天空上的霧面玻璃，所以整趟捲動都看得到天色在變。
   ============================================================ */
/* ⚠ **不可以用 z-index:-1**。區塊那些玻璃板有 backdrop-filter，
   而 backdrop-filter 會建立 backdrop root，把負層的東西吃進去——
   canvas 照畫（抓得到像素），但畫面上整片變黑。
   所以天空放在第 0 層，內容一律 +1 疊上去，全部都在非負層。 */
.skyfix{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
h1,h2,h3{font-family:var(--font-sans);font-weight:600;margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.caps{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}
section{position:relative;z-index:1}
main{position:relative;z-index:1}
.secno{font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--accent)}

/* ── 共用 hover：灰底由左刷入 ── */
.wash{position:relative;isolation:isolate;overflow:hidden;transition:padding-left .55s var(--e)}
.wash::before{content:"";position:absolute;inset:0;z-index:0;background:var(--hover-wash);
  clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--e)}
.wash>*{position:relative;z-index:1}
.wash:hover::before{clip-path:inset(0 0 0 0)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:16px 0;
  transition:background var(--dur) var(--e),border-color var(--dur) var(--e),padding var(--dur) var(--e)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav.solid{background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-strong);padding:11px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{height:26px;width:auto;filter:brightness(0) invert(1);transition:filter var(--dur) var(--e)}
.nav.solid .brand-logo{filter:none}
[data-theme="dark"] .brand-logo,[data-theme="dark"] .nav.solid .brand-logo{filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-family:var(--font-tc);font-size:14px;color:rgba(255,255,255,.82);text-decoration:none;
  transition:color .2s}
.nav.solid .nav-links a{color:var(--muted)}
.nav-links a:hover{color:#fff}
.nav.solid .nav-links a:hover{color:var(--ink)}
.nav-cta{font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.03em;
  padding:8px 16px;border:1.5px solid rgba(255,255,255,.55);border-radius:3px;color:#fff!important;
  transition:background .2s,border-color .2s,color .2s!important}
.nav.solid .nav-cta{border-color:#3a3f45;color:var(--ink)!important}
.nav-cta:hover{background:rgba(255,255,255,.12)}
.nav.solid .nav-cta:hover{background:var(--hover-wash)}
/* 登入：純文字，不跟註冊搶 */
.nav-login{font-family:var(--font-tc);font-size:14px;color:rgba(255,255,255,.82);text-decoration:none;
  transition:color .2s}
.nav.solid .nav-login{color:var(--muted)}
.nav-login:hover{color:#fff}
.nav.solid .nav-login:hover{color:var(--ink)}
.theme-toggle{background:none;border:1px solid rgba(255,255,255,.4);border-radius:3px;color:#fff;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;
  transition:border-color .2s,background .2s,color .2s}
.nav.solid .theme-toggle{border-color:var(--line-strong);color:var(--ink)}
.theme-toggle:hover{background:rgba(255,255,255,.12)}
.nav.solid .theme-toggle:hover{background:var(--hover-wash)}
/* 漢堡按鈕與手機選單：桌機不出現 */
.nav-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:34px;height:30px;padding:0;cursor:pointer;background:none;border-radius:3px;
  border:1px solid rgba(255,255,255,.4);transition:border-color .2s,background .2s}
.nav-burger span{display:block;width:15px;height:1.5px;background:#fff;
  transition:transform .25s var(--e),opacity .18s linear,background .2s}
.nav.solid .nav-burger{border-color:var(--line-strong)}
.nav.solid .nav-burger span{background:var(--ink)}
.nav-burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-menu{display:none}
@media(max-width:820px){
  .nav-links a:not(.nav-cta){display:none}
  .nav-links{gap:12px}
  .nav-cta{padding:7px 13px}
  .nav-burger{display:flex}
  /* 選單掛在固定導覽列下面；.nav 本身是 fixed，就是它的定位基準 */
  /* 展開用 grid-template-rows 0fr→1fr：動得到 auto 高度，不必猜數字。
     這個寫法需要一層 .nm-inner 包住內容，直接放 <a> 會變成多個 row。 */
  .nav-menu{position:absolute;left:0;right:0;top:100%;
    background:color-mix(in srgb, var(--surface) 97%, transparent);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--e)}
  .nav-menu.open{grid-template-rows:1fr;border-bottom:1px solid var(--line-strong)}
  .nm-inner{overflow:hidden;min-height:0}
  .nav-menu a{display:block;padding:14px 24px;
    font-family:var(--font-tc);font-size:15px;color:var(--ink);text-decoration:none;
    border-top:1px solid var(--line)}
  .nav-menu a:first-child{border-top:0}
  /* display:block 會蓋掉 UA 的 [hidden]，而這一列裡有一個是按牌價決定要不要出現的 */
  .nav-menu a[hidden]{display:none}
  .nav-menu .nm-login{color:var(--accent);font-weight:600}
}
@media(prefers-reduced-motion:reduce){
  .nav-menu,.nav-menu a,.nav-burger span{transition:none}
}

/* ============================================================
   HERO — 大字標題直接疊在天空上（此時是日出）。
   一眼看懂、有願景就好；登機證在下面「產品預覽」。
   ============================================================ */
.hero{min-height:94vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;z-index:1;overflow:hidden;padding:120px 24px 90px;background:transparent;text-align:center}
/* 底部要淡回 0：天空現在是整頁連續的一片，
   遮罩若在區塊邊界直接切斷，會在畫面上留一條橫向的接縫。 */
.hero-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,8,12,.05) 0%, rgba(6,8,12,.26) 42%,
    rgba(6,8,12,.26) 74%, rgba(6,8,12,0) 100%)}
.hero-content{position:relative;z-index:1;max-width:920px;display:flex;flex-direction:column;align-items:center}
.hero-content .hero-kick{color:rgba(255,255,255,.8);margin-bottom:18px}
/* 主標第一行是 10 個字，字級上限要讓它整行放得下，不然會斷成孤字 */
/* 手機上第二行只會掉一個「析」字下來，很難看。
   560 以下手動斷在「會計／到」中間；560 以上本來就排得下一行，<br> 收起來。
   不用 text-wrap:balance——它會把已經排得下的那行也硬拆成兩行。 */
.mbr{display:none}
@media(max-width:559px){.mbr{display:inline}}
.hero-content h1{font-size:clamp(32px,5.2vw,60px);line-height:1.24;letter-spacing:-.01em;color:#fdfdfb;
  margin:0 0 14px;text-shadow:0 4px 50px rgba(0,0,0,.55)}
.hero-content h1 .hl{color:#e3bd85}
/* 英文副標：跟中文主標同一組訊息，只是換一種語言講一次 */
.hero-en{text-wrap:balance;font-family:var(--font-sans);font-size:14.5px;font-weight:500;letter-spacing:.04em;
  color:rgba(255,255,255,.68);margin:0 0 22px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
@media(max-width:640px){.hero-en{font-size:12.5px;letter-spacing:.02em}}
.hero-content .sub{text-wrap:pretty;font-family:var(--font-tc);font-size:17px;line-height:1.9;color:rgba(255,255,255,.88);
  max-width:44ch;margin:0 0 32px;text-shadow:0 2px 22px rgba(0,0,0,.4)}
@media(max-width:640px){.hero{padding:110px 20px 70px}.hero-content h1{font-size:clamp(26px,7.4vw,40px)}}

/* ============================================================
   產品預覽 — 登機證從首頁搬到這裡；玻璃感半透明卡，
   讓後方同一套雲海背景繼續透出來、繼續動
   ============================================================ */
.sect.showcase{overflow:hidden;padding:76px 20px 84px;background:transparent}
.showcase::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,8,12,0) 0%, rgba(6,8,12,.34) 20%,
    rgba(6,8,12,.34) 80%, rgba(6,8,12,0) 100%)}
.showcase .wrap{position:relative;z-index:1}
.showcase .sect-head .kick{color:rgba(255,255,255,.72)}
.showcase .sect-head h2{color:#fff;text-shadow:0 3px 30px rgba(0,0,0,.5)}
.showcase .sect-head p{color:rgba(255,255,255,.8)}
@media(max-width:640px){.showcase{padding:80px 0}}
/* ── 登機口看板：機場那種班表條，用來說明「這裡是登機門」 ── */
.gatesign{display:flex;align-items:center;gap:0;flex-wrap:wrap;
  width:min(1040px,100%);margin:0 auto 12px;border-radius:6px;overflow:hidden;
  background:rgba(18,20,23,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.78)}
.gatesign>span{padding:11px 18px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.gatesign>span+span{border-left:1px solid rgba(255,255,255,.14)}
.gs-gate{color:rgba(255,255,255,.6)}
.gs-gate b{font-size:15px;color:#fff;letter-spacing:.1em}
.gs-dest{flex:1;min-width:0}
.gs-dest b{font-family:var(--font-tc);letter-spacing:.02em;font-size:13.5px;color:#fff;font-weight:600}
.gs-dest i,.gs-status i{font-style:normal;color:rgba(255,255,255,.45);letter-spacing:.12em;font-size:10.5px}
.gs-status{color:var(--accent)}
.gs-status b{font-family:var(--font-tc);font-weight:600;font-size:13px;letter-spacing:.02em}
/* 翻牌：一格一片，中間那條就是翻牌機的接縫 */
.gatesign{perspective:520px}
.flap{position:relative;display:inline-block;text-align:center;
  background:rgba(255,255,255,.07);margin:0 .8px;padding:1px 2px;border-radius:1px;
  transform-origin:center top;backface-visibility:hidden}
.flap::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.5);pointer-events:none}
.flap.cjk{min-width:1em}
.flap.lat{min-width:.66em}
.flap.t{animation:flapdrop .14s cubic-bezier(.3,.8,.4,1)}
@keyframes flapdrop{from{transform:rotateX(-74deg);opacity:.3}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.flap.t{animation:none}}
/* 那顆閃的燈：登機中 */
.gs-status em{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 0 currentColor;animation:gpulse 2.4s ease-out infinite}
@keyframes gpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.gs-status em{animation:none}}
@media(max-width:720px){
  .gatesign{font-size:11px}
  .gs-dest{flex:1 0 100%;order:3;border-left:0!important;border-top:1px solid rgba(255,255,255,.14)}
}

/* 掃描條：滑到「登機」時掃過票面，像閘口在讀條碼 */
.scanline{position:absolute;top:0;bottom:0;left:0;width:120px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0%,color-mix(in srgb, var(--accent) 34%, transparent) 34%,color-mix(in srgb, var(--accent) 78%, transparent) 54%,color-mix(in srgb, var(--accent) 34%, transparent) 70%,transparent 100%)}

.hero-boardrow .sep{color:var(--muted)}
.hero-stub .val em{display:block;font-family:var(--font-tc);font-style:normal;font-size:11px;
  font-weight:400;letter-spacing:0;color:var(--muted);text-transform:none;margin-top:2px}

.hero-ticket{position:relative;z-index:1;display:grid;grid-template-columns:44px 1fr 200px;
  width:min(1040px,100%);margin:0 auto;align-items:stretch;
  background:color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);
  border:1px solid rgba(255,255,255,.4);border-radius:10px;overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.45)}
[data-theme="dark"] .hero-ticket{border-color:rgba(255,255,255,.14)}
.hero-coupon{position:relative;border-right:2px dashed var(--line-strong);
  background:color-mix(in srgb, var(--surface-2) 62%, transparent);
  display:flex;align-items:center;justify-content:center;padding:12px 0}
.hero-coupon .cpbar{position:absolute;left:7px;top:12px;bottom:108px;width:22px;
  background:var(--atb-barcode) center/100% 100% no-repeat;image-rendering:pixelated;opacity:.9}
.hero-coupon .cptext{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--font-mono-tc);
  font-size:8px;letter-spacing:.22em;color:var(--muted);white-space:nowrap}
.hero-main{position:relative;display:flex;flex-direction:column;min-width:0}
.hero-classmark{position:absolute;top:50%;right:14px;transform:translateY(-50%);z-index:0;
  font-family:var(--font-sans);font-weight:700;font-size:150px;line-height:.8;color:transparent;
  -webkit-text-stroke:2px var(--muted);opacity:.14;pointer-events:none;user-select:none}
.hero-tophead{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 11px;
  border-bottom:1px solid var(--line-strong);position:relative;z-index:1}
.hero-logo{height:26px;width:auto}
[data-theme="dark"] .hero-logo{filter:brightness(0) invert(1);opacity:.92}
/* 票面主體：文案在左，兩顆按鈕在右邊上下疊、與文案底部對齊。
   標題因此會斷成三行——這是刻意的，票才維持得住橫長的比例。 */
.hero-body{position:relative;z-index:1;padding:24px 30px 20px;flex:1;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 30px;align-items:end}
.hb-copy{min-width:0}
.hb-copy h1{margin-bottom:0}
.hero-body .hero-cta{flex-direction:column;align-items:stretch;gap:10px;margin:0;min-width:186px}
.hero-body .hero-cta .board,.hero-body .hero-cta .btn-outline{justify-content:center;text-align:center}
@media(max-width:760px){
  .hero-body{grid-template-columns:1fr;align-items:start}
  .hero-body .hero-cta{min-width:0}
}  /* 撐開，讓登機列貼齊票根底部 */
.hero-kick{display:block;margin-bottom:12px}
/* 票面標題比其他區塊小一號：這一句比較長，用 --fs-display 會斷成三行 */
.hero-body h1{font-size:clamp(21px,2.28vw,32px);line-height:1.24;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px}
.hl{color:var(--accent)}
.hero-body .sub{font-family:var(--font-tc);font-size:16px;line-height:1.85;color:var(--ink-2);max-width:46ch;margin:0 0 26px}
.hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.board{border:1.5px solid #3a3f45;background:var(--ink);color:var(--surface);font-family:var(--font-mono);
  font-size:13.5px;font-weight:700;letter-spacing:.06em;padding:12px 24px;border-radius:3px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .15s,transform .2s;
  position:relative;overflow:hidden;isolation:isolate}
.board:hover{transform:translateY(-2px)}
.board::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,color-mix(in srgb, var(--accent) 55%, transparent) 50%,transparent 100%);
  transform:translateX(-140%);animation:sheen 6s ease-in-out infinite}
.board:hover::before{animation:none;opacity:0}
@keyframes sheen{0%{transform:translateX(-140%)}18%{transform:translateX(240%)}100%{transform:translateX(240%)}}
.btn-outline{border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);
  font-family:var(--font-mono);font-size:13.5px;font-weight:600;letter-spacing:.03em;padding:12px 22px;
  border-radius:3px;text-decoration:none;transition:border-color .15s,background .15s}
.btn-outline:hover{border-color:var(--ink)}
.btn-outline.light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline.light:hover{border-color:#fff;background:rgba(255,255,255,.14)}
/* 欄位帶：橫著排。全部塞進右邊票根的話，一行一列會把票拉得又高又窄，
   登機證的比例就沒了——真的 ATB 票也是把欄位橫排在主聯下面。 */
.hero-fields{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1;
  border-top:1px solid var(--line-strong)}
.hf{padding:9px 14px 10px;border-left:1px solid var(--line);min-width:0}
.hf:first-child{padding-left:30px;border-left:0}
.hf .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--muted);display:block}
.hf .lbl i{font-style:normal;letter-spacing:.12em;opacity:.7;margin-left:4px}
.hf .val{display:block;font-family:var(--font-mono);font-size:14px;font-weight:700;
  margin-top:4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf .val em{display:block;font-family:var(--font-tc);font-style:normal;font-size:10.5px;font-weight:400;
  letter-spacing:0;color:var(--muted);text-transform:none;margin-top:2px}
@media(max-width:720px){
  .hero-fields{grid-template-columns:1fr 1fr}
  .hf:nth-child(3){padding-left:30px;border-left:0}
  .hf:nth-child(n+3){border-top:1px solid var(--line)}
}

.hero-boardrow{display:flex;align-items:center;gap:16px;padding:10px 30px;border-top:1px dashed var(--line);
  position:relative;z-index:1}
.hero-boardrow .stat{display:flex;align-items:center;gap:6px;color:var(--pos)}
.hero-boardrow .stat::before{content:'';width:6px;height:6px;background:currentColor}
.hero-stub{border-left:2px dashed var(--line-strong);
  background:color-mix(in srgb, var(--surface-2) 62%, transparent);display:flex;flex-direction:column}
.hero-stub .scap{padding:16px 16px 0;color:var(--muted)}
.hero-stub .sname{font-family:var(--font-mono);font-size:15px;font-weight:700;padding:8px 16px 12px;
  border-bottom:1px solid var(--line-strong)}
.hero-stub .srt{padding:7px 16px;border-bottom:1px solid var(--line-strong)}
.hero-stub .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--muted);display:block}
.hero-stub .lbl i{font-style:normal;letter-spacing:.12em;opacity:.7;margin-left:4px}
.hero-stub .val{font-family:var(--font-mono);font-size:13.5px;font-weight:700;margin-top:5px;text-transform:uppercase}
/* 票根下面那條碼：欄位少了以後留白太空，補一條真的票根會有的東西。
   不用左邊那張 22x120 的方塊碼——那是直的，拉成橫的會糊掉；
   這裡直接用漸層畫一維條碼。 */
.hero-stub .sbar{margin:auto 16px 11px;height:28px;opacity:.62;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 10px,
    var(--ink) 10px 13px, transparent 13px 15px, var(--ink) 15px 16px, transparent 16px 21px)}
.hero-stub .sfoot{padding:14px 16px;color:var(--muted);margin-top:auto;text-align:right}
@media(max-width:860px){
  .hero-ticket{grid-template-columns:1fr}
  .hero-coupon{display:none}
  .hero-stub{border-left:none;border-top:2px dashed var(--line-strong)}
  .hero-classmark{right:8px;font-size:104px}
  .hero-body{padding:28px 22px 16px}
}
.scrolldown{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:1;
  color:rgba(255,255,255,.6);font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  display:flex;flex-direction:column;align-items:center;gap:6px}
/* ── 起飛 ─────────────────────────────────────────────────
   一台白色小飛機沿著**自己的機頭方向**往前飛。
   先 rotate 再 translateX，位移就發生在旋轉後的座標系裡，
   所以它是「爬升」而不是平移——而且永遠不會有往下掉的動作。 */
.scrolldown .takeoff{display:block;color:#fff;line-height:0;height:20px}
.scrolldown .takeoff svg{display:block;transform:rotate(-32deg);opacity:.85;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
  animation:takeoff 3.6s cubic-bezier(.3,.05,.3,1) infinite}
@keyframes takeoff{
  0%   {transform:rotate(-32deg) translateX(-26px);opacity:0}
  16%  {opacity:.9}
  62%  {opacity:.9}
  100% {transform:rotate(-32deg) translateX(26px);opacity:0}
}

/* ============================================================
   一般小節：一片片浮在天空上的霧面玻璃「板」。
   板與板之間留縫、左右留邊——天色在縫裡一路從日出走到日落，
   而且整頁讀起來就是「模組一塊塊疊上去」。
   ============================================================ */
.sect{padding:9px 20px}
.plate{position:relative;max-width:1120px;margin:0 auto;padding:44px 42px 48px;border-radius:12px;
  /* 半透明：天色要透得過來。模糊拉大一階補回可讀性，
     深色模式再多留一點不透明度——亮天空襯淺色字比反過來吃虧。 */
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);backdrop-filter:blur(20px) saturate(1.1);
  border:1px solid color-mix(in srgb, var(--line-strong) 55%, transparent);
  box-shadow:0 22px 54px -34px rgba(0,0,0,.5)}
[data-theme="dark"] .plate{background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-color:rgba(255,255,255,.1)}
@media(max-width:640px){.sect{padding:7px 12px}.plate{padding:32px 18px 36px;border-radius:10px}}
.sect-head{max-width:660px;margin:0 auto 30px;text-align:center}
.sect-head .kick{display:block;margin-bottom:12px}
.sect-head h2{font-size:clamp(24px,3.4vw,36px);line-height:1.3;color:var(--ink)}
.sect-head p{margin:11px 0 0;color:var(--muted);font-size:14.5px;line-height:1.75}

/* ── 痛點：左右轉盤 ───────────────────────────────────────
   中間一張，左右各露半張，繞成一圈輪播。每張的位置由 JS 給的
   --dir（-1 左／0 中／1 右）、--s（縮放）、--o（透明度）決定，
   位移量 --gap 寫在容器上，手機版只要改那一個值。 */
.painwheel{--gap:44%;position:relative;max-width:900px;margin:0 auto;height:224px;perspective:1200px}
.paincard{position:absolute;inset:0;margin:auto;width:min(500px,72%);height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:26px 30px;border-radius:10px;
  background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:0 16px 36px -26px rgba(0,0,0,.4);backface-visibility:hidden;
  transform:translateX(calc(var(--dir,0) * var(--gap))) scale(var(--s,1)) rotateY(var(--r,0deg));
  opacity:var(--o,1);
  transition:transform .7s var(--e),opacity .7s var(--e),box-shadow .7s var(--e);
  cursor:pointer}
.paincard.front{box-shadow:0 26px 54px -28px rgba(0,0,0,.5);cursor:default}
.paincard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.paincard h3{font-size:19px;color:var(--ink);margin:0 0 9px;line-height:1.35}
.paincard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.8}

/* 左右鍵：壓在轉盤兩側，不吃卡片的點擊 */
.wheelnav{position:absolute;top:50%;transform:translateY(-50%);z-index:40;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:50%;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--ink-2);cursor:pointer;transition:border-color .25s var(--e),color .25s var(--e)}
.wheelnav:hover{border-color:var(--accent);color:var(--ink)}
.wheelnav.prev{left:0}
.wheelnav.next{right:0}

.paindots{display:flex;justify-content:center;gap:8px;margin-top:26px}
.paindots{gap:12px}
.paindots button{position:relative;width:7px;height:7px;padding:0;border-radius:50%;border:none;
  background:color-mix(in srgb, var(--muted) 38%, transparent);cursor:pointer;
  transition:background .3s var(--e),transform .3s var(--e)}
/* 點擊範圍撐開：7px 的點太難點中 */
.paindots button::after{content:'';position:absolute;inset:-9px}
.paindots button:hover{background:var(--accent)}
.paindots button.on{background:var(--ink);transform:scale(1.3)}

@media(max-width:820px){
  .painwheel{--gap:52%;height:300px}
  .paincard{width:min(440px,80%);padding:22px 22px}
  .paincard h3{font-size:17px}
  .wheelnav{width:34px;height:34px}
  /* 手機上兩側只留個影子就好，字全露出來反而吵。
     --o 是 JS 寫在 style 上的，所以這裡要 !important 才蓋得過。 */
  .paincard:not(.front){opacity:.3!important}
}
/* 轉盤左右露出的那兩張會超出版面。桌機看不出來（板子夠寬），
   但手機上它把整頁往右撐開，iOS 就會出現可以往右拖的空白。
   在這一段的板子上收邊：卡片切在面板邊緣，頁面不再被撐寬。 */
#why > .wrap{overflow:hidden}
@media(prefers-reduced-motion:reduce){.paincard{transition:none}}

/* ── 兩大主打 ── */
.feat-two{display:grid;grid-template-columns:1fr 1fr;max-width:960px;margin:0 auto;gap:0}
.feat-one{display:flex;gap:18px;align-items:flex-start;padding:6px 40px}
.feat-one+.feat-one{border-left:1px solid var(--line-strong)}
.featcode{display:block;color:var(--accent);margin-bottom:11px}
.feat-one h3{font-size:21px;margin:0 0 10px;color:var(--ink)}
.feat-one p{font-size:14.5px;color:var(--muted);line-height:1.85;margin:0}
@media(max-width:760px){.feat-two{grid-template-columns:1fr;gap:34px}.feat-one{padding:0}.feat-one+.feat-one{border-left:0;border-top:1px solid var(--line-strong);padding-top:26px}}

/* ── 三根柱子（對著上面三個問題）── */
.feat-three{display:grid;grid-template-columns:repeat(3,1fr);max-width:1040px;margin:0 auto}
.feat-three .feat-one{flex-direction:column;gap:0;padding:4px 28px}
.feat-three .feat-one+.feat-one{border-left:1px solid var(--line-strong)}
.feat-three h3{font-size:18px}
.feat-three p b{color:var(--ink-2)}
@media(max-width:860px){
  .feat-three{grid-template-columns:1fr;gap:32px}
  .feat-three .feat-one{padding:0}
  .feat-three .feat-one+.feat-one{border-left:0;border-top:1px solid var(--line-strong);padding-top:28px}
}

/* ── AI 辦公室：不列名冊也不數人頭，左邊一張桌子的線稿，右邊講規矩 ── */
.office{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;
  max-width:1040px;margin:0 auto}
.office-art{color:var(--ink);opacity:.82}
/* 沒有旁邊那欄文字時，圖自己置中站一排 */
.office-art.wide{max-width:660px;margin:0 auto 34px}
.desksvg .soft{fill:color-mix(in srgb, var(--ink) 5%, transparent)}
.desksvg{display:block;width:100%;height:auto}
/* 檯燈那圈光：淺色底下太搶，深色底下才給它多一點 */
.desksvg .glow{fill:color-mix(in srgb, var(--accent) 7%, transparent)}
.desksvg .chart{stroke:var(--accent)}
:root[data-theme="dark"] .desksvg .glow{fill:color-mix(in srgb, var(--accent) 10%, transparent)}
:root[data-theme="dark"] .office-art{opacity:.9}
.office-note{border-left:1px solid var(--line-strong);padding-left:26px}
.on-row{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:baseline;padding:14px 0}
.on-row+.on-row{border-top:1px solid var(--line)}
.on-row .cd{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--accent)}
.on-row span:last-child{font-size:13px;color:var(--muted);line-height:1.72}
.on-row b{display:block;color:var(--ink);font-weight:600;font-size:13.5px;margin-bottom:3px}
@media(max-width:860px){
  .office{grid-template-columns:1fr;gap:22px}
  .office-note{border-left:0;padding-left:0;border-top:1px solid var(--line-strong);padding-top:6px}
}

/* ── 基本方案內含：這批是核心功能，不收在手風琴裡 ── */
.basebox{max-width:1080px;margin:0 auto}
.basehead{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;padding:0 2px 13px}
.basehead .n{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.basehead h3{font-size:15.5px;margin:0;color:var(--ink)}
.basehead .basenote{font-size:12.5px;color:var(--muted);margin-left:auto}
.modintro{max-width:1080px;margin:40px auto 12px;display:flex;align-items:baseline;gap:13px;padding:0 2px}
.modintro .caps{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.modintro span+span{font-size:12.5px;color:var(--muted)}
@media(max-width:640px){.basehead .basenote{margin-left:0}}

/* ── 模組：類別列，滑過去才展開 ──────────────────────────
   收起來時每一列只有「類別 ＋ 模組名字」一行，滑過（或點一下）
   才把細項展開。高度用 grid-template-rows 0fr→1fr 過渡：
   它能動到 auto 高度，又不必像 max-height 那樣猜一個數字。
   卡片本身的進場交給 GSAP 做 stagger（見 intro.js）。 */
.modgroup{max-width:1080px;margin:0 auto;border-top:1px solid var(--line-strong)}
.modgroup:last-of-type{border-bottom:1px solid var(--line-strong)}
.modhead{display:flex;align-items:baseline;gap:14px;width:100%;
  padding:16px 6px;background:none;border:none;text-align:left;cursor:pointer;
  font-family:var(--font-tc);transition:padding-left .5s var(--e)}
.modgroup.open .modhead,.modhead:hover{padding-left:14px}
.modhead .n{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--accent);flex:0 0 auto}
.modhead h3{font-size:15.5px;color:var(--ink);margin:0;flex:0 0 auto}
.modpeek{flex:1;min-width:0;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .4s var(--e)}
.modgroup.open .modpeek{opacity:0}
.modmore{flex:0 0 auto;color:var(--muted);line-height:0;
  transition:transform .45s var(--e),color .3s var(--e)}
.modgroup.open .modmore{transform:rotate(180deg);color:var(--accent)}

.modbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e)}
.modgroup.open .modbody{grid-template-rows:1fr}
.modbodyinner{overflow:hidden;min-height:0}
.modgroup .cardslab{margin:0 0 18px;border-radius:3px}

.cardslab{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:3px}
.cardslab.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.cardslab.four{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.cardslab{grid-template-columns:1fr 1fr}}
/* .cardslab.four 的兩欄規則寫在 1020 那一段，選擇器比較 specific，
   手機上不補這一條的話會一直卡在兩欄，標題全部折行 */
@media(max-width:560px){.cardslab,.cardslab.four{grid-template-columns:1fr}}
.cardcell{position:relative;isolation:isolate;background:color-mix(in srgb, var(--surface) 62%, transparent);min-height:112px;
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  transition:transform .42s var(--e),box-shadow .42s var(--e),background .3s var(--e)}
.cardcell:hover{transform:translateY(-3px);box-shadow:var(--lift);z-index:4}
.cardface{position:relative;display:block;width:100%;height:100%;padding:16px 17px 19px;
  font-family:var(--font-tc);overflow:hidden;transition:padding-left .55s var(--e)}
.cardface::before{content:"";position:absolute;inset:0;z-index:0;background:var(--hover-wash);
  clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--e)}
.cardface>*{position:relative;z-index:1}
.cardcell:hover .cardface{padding-left:23px}
.cardcell:hover .cardface::before{clip-path:inset(0 0 0 0)}
.cardface .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--muted);
  transition:color .4s var(--e);text-transform:uppercase}
.cardcell:hover .cardface .n{color:var(--accent)}
.cardface .n.inbase{color:var(--accent);font-weight:600}
.cardface h4{font-size:15px;margin:12px 0 7px;font-weight:600;color:var(--ink)}
.cardface p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
@media(prefers-reduced-motion:reduce){.cardcell,.cardface{transition:background .2s linear}
  .cardcell:hover{transform:none;box-shadow:none}}
@media(max-width:760px){
  .modhead{flex-wrap:wrap;gap:8px 12px}
  .modpeek{flex:1 0 100%;white-space:normal}
}

/* ── 方案：基本方案 ＋ 加購模組 ＋ 全開版 ── */
.priceplan{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-strong);
  border-radius:3px;max-width:1000px;margin:0 auto}
@media(max-width:900px){.priceplan{grid-template-columns:1fr}}
.plan{padding:28px 26px;border-left:1px solid var(--line);position:relative}
.priceplan .plan:first-child{border-left:none}
@media(max-width:900px){.plan{border-left:none;border-top:1px solid var(--line)}.priceplan .plan:first-child{border-top:none}}
.plan.feat{background:color-mix(in srgb, var(--surface-2) 66%, transparent)}
.plan .tag{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.1em;padding:4px 10px;border-radius:0 0 0 4px}
.plan h3{font-size:17px;margin:0 0 6px;color:var(--ink)}
.plan .planmeta{font-size:12.5px;color:var(--muted);margin-bottom:18px;min-height:34px;line-height:1.6}
.plan .price{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ink)}
.plan .price .per{font-size:13px;font-weight:400;color:var(--muted)}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-direction:column;gap:9px}
.plan li{font-size:13px;color:var(--ink-2);padding-left:16px;position:relative;line-height:1.6}
.plan li::before{content:'—';position:absolute;left:0;color:var(--accent)}
.plan-cta{display:block;text-align:center;font-family:var(--font-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.03em;padding:10px;border:1.5px solid var(--line-strong);border-radius:3px;text-decoration:none;
  color:var(--ink);transition:border-color .15s,background .15s}
.plan-cta:hover{border-color:var(--accent)}
.plan.feat .plan-cta{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pricing-note{text-align:center;margin:22px auto 0;max-width:640px;font-size:13px;color:var(--muted)}
.pricing-fallback{text-align:center;color:var(--muted);font-size:14px;padding:40px 0}

/* ── 產品實拍 ──────────────────────────────────────────────
   這幾張是真的系統畫面（示範帳套、虛構客戶），不是示意圖。
   所以框要低調：畫面本身才是內容，邊框只負責把它從版面裡分出來。
   深色模式降一點亮度——一張全白的截圖擺在夜色版面上會刺眼，
   但不能壓太多，壓到看不清數字就本末倒置了。 */
.shotwrap{max-width:880px;margin:0 auto;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 20px 44px -30px rgba(0,0,0,.45)}
.shotwrap img{display:block;width:100%;height:auto}
[data-theme="dark"] .shotwrap{border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .shotwrap img{filter:brightness(.92) contrast(1.02)}
.shotcap{max-width:880px;margin:11px auto 0;text-align:center;
  font-family:var(--font-tc);font-size:12.5px;line-height:1.7;color:var(--muted)}
.shotcap b{font-weight:500;color:var(--ink)}
/* 手機：縮到 326px 寬的表格是讀不到的，縮圖只證明「有這個畫面」，
   證明不了「這個畫面在管什麼」。所以不縮——給它一個最小寬度，
   讓讀的人橫向滑過去看。橫向捲軸只在這一個框裡，整頁不會跟著跑。 */
@media(max-width:760px){
  .shotwrap{border-radius:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shotwrap img{width:760px;max-width:none}
  .shotcap{font-size:12px}
}

/* ── 家數級距表 ──────────────────────────────────────────────
   級距的**數量是後台決定的**（三檔或七檔都可能），所以這裡不能是
   「三張並排的卡」——那種版型一改檔數就散掉。一列一檔的表撐得住任何檔數，
   而且它本來就是讀的人在做的事：由上往下找自己那一行。 */
.tiertable{max-width:820px;margin:0 auto;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden}
.tierrow{display:grid;grid-template-columns:1.35fr 1fr 1fr;align-items:center;gap:16px;
  padding:15px 22px;border-top:1px solid color-mix(in srgb,var(--line-strong) 55%,transparent)}
.tierrow:first-child{border-top:none}
.tierhead{background:color-mix(in srgb,var(--ink) 4%,transparent);padding-top:11px;padding-bottom:11px}
.tierhead span{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.tierrow .tname{font-family:var(--font-tc);font-size:15px;color:var(--ink);font-weight:500}
.tierrow .tname i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px}
.tierrow .tfee{font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--ink)}
.tierrow .tfee em{font-style:normal;font-size:12px;font-weight:400;color:var(--muted);margin-left:7px}
.tierrow .tunit{font-family:var(--font-mono);font-size:13.5px;color:var(--muted)}
/* 最後一檔通常是「不限家數」，給它一點份量，因為那是談進來的人最後停的地方 */
.tierrow.top{background:color-mix(in srgb,var(--accent) 5%,transparent)}
@media(max-width:640px){
  .tierrow{grid-template-columns:1fr auto;gap:4px 14px;padding:14px 16px}
  .tierrow .tname{grid-column:1}
  .tierrow .tfee{grid-column:2;text-align:right}
  .tierrow .tunit{grid-column:1 / -1;font-size:12.5px}
  .tierhead{display:none}
}

/* ── 事務所 callout ── */
.firm-callout{max-width:900px;margin:0 auto;border:1px solid var(--line-strong);border-radius:6px;
  padding:36px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.firm-callout h3{font-size:20px;margin:0 0 8px;color:var(--ink)}
.firm-callout p{margin:0;font-size:14px;color:var(--muted);max-width:52ch;line-height:1.75}
.fc-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;flex:0 0 auto}
@media(max-width:640px){.fc-cta{width:100%}.fc-cta>a{flex:1 1 auto;text-align:center;justify-content:center}}

/* ── 尾聲 CTA：這裡天已經落到黃昏，玻璃板收掉、直接對著天空講最後一句 ── */
.cta-final{padding:104px 24px 112px;text-align:center;position:relative}
.cta-final h2{font-size:clamp(28px,4.4vw,46px);line-height:1.28;color:#fff;margin:0 auto 30px;max-width:17ch;
  text-shadow:0 3px 34px rgba(0,0,0,.55)}
.cta-final .hero-cta{justify-content:center}

/* ── Footer：夜色玻璃收尾（此時天空已經是日落之後）── */
.site-foot{position:relative;z-index:1;background:rgba(10,12,16,.62);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
.site-foot .foot-logo{filter:brightness(0) invert(1);opacity:.92}
.site-foot .foot-brand p{color:rgba(255,255,255,.6)}
.site-foot .foot-col h4{color:rgba(255,255,255,.5)}
.site-foot .foot-col a{color:rgba(255,255,255,.82)}
.site-foot .foot-col a:hover{color:#e3bd85}
.site-foot .foot-bottom{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.foot-inner{padding:44px 0 34px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
@media(max-width:760px){.foot-inner{grid-template-columns:1fr 1fr;}}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-logo{height:22px;width:auto}
[data-theme="dark"] .foot-logo{filter:brightness(0) invert(1)}
.foot-brand p{font-size:12.5px;color:var(--muted);max-width:30ch;line-height:1.7;margin:0}
.foot-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;margin:0 0 14px}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-2);text-decoration:none;margin-bottom:10px}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid var(--line-strong);padding:18px 0;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}

/* ── 捲動進場 ── */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .feat-one,.mod-group,.plan,.firm-callout{animation:rise both ease-out;animation-timeline:view();
      animation-range:entry 6% cover 24%}
  }
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--e),transform .7s var(--e)}
.reveal.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}

/* ============================================================
   事務所頁（firm.html）專用
   ============================================================ */
/* 子頁的首屏不用整個視窗高，下面還有內容要看 */
.hero-sub{min-height:auto;padding:150px 24px 84px}
.hero-sub .hero-content h1{font-size:clamp(30px,4.4vw,52px)}

/* 作業動線：一條軌道 ＋ 五個節點。軌道由 GSAP 從左畫到右，前緣帶一顆
   會發光的頭，走到哪個節點就把它彈出來、順帶擴散一圈（見 intro.js 的 flowline）。
   節點與光環是真的元素不是偽元素——GSAP 抓不到 ::before。
   沒有 JS 時軌道是灰的、節點是空心的，文字照樣看得到。 */
.flowline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  max-width:1080px;margin:0 auto;padding:30px 0 0;list-style:none}
/* 節點各自在自己那一欄的正中間（10%、30%…90%），軌道就從 10% 拉到 90%，
   整條在版面上是置中的——貼齊欄位左緣的話右邊會空一大截，看起來偏左。 */
.flowrail{position:absolute;left:10%;right:10%;top:6px;height:1px;background:var(--line-strong)}
.flowrail i{position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  background:var(--accent);transform:scaleX(0);transform-origin:left center}
/* 軌道前緣那顆光頭 */
.flowcomet{position:absolute;left:0;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--accent);opacity:0;pointer-events:none;
  box-shadow:0 0 12px 3px color-mix(in srgb, var(--accent) 65%, transparent)}
.flowline li{position:relative;padding:0 12px;min-width:0;text-align:center}
.fdot{position:absolute;left:50%;margin-left:-5.5px;top:-29px;width:11px;height:11px;
  box-sizing:border-box;border-radius:50%;background:var(--surface);
  border:1.5px solid var(--line-strong);z-index:2;
  transition:border-color .3s var(--e),background .3s var(--e)}
.flowline li.on .fdot{border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent)}
/* 節點亮起來時往外擴散的那一圈 */
.fring{position:absolute;left:50%;margin-left:-5.5px;top:-29px;width:11px;height:11px;
  border-radius:50%;border:1.5px solid var(--accent);opacity:0;pointer-events:none;z-index:1}
.flowline .fn{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:7px}
.flowline .fd{display:block;font-size:12.5px;line-height:1.7;color:var(--muted)}
@media(max-width:860px){
  /* 排成兩欄之後沒有軌道，節點回到文字左邊帶路，文字也跟著靠左 */
  .flowline{grid-template-columns:1fr 1fr;gap:24px 0;padding-top:0}
  .flowrail{display:none}
  .flowline li{padding:0 24px 0 18px;text-align:left}
  .fdot,.fring{left:0;margin-left:0;top:7px}
}
@media(max-width:520px){
  .flowline{grid-template-columns:1fr;gap:0}
  .flowline li{padding:14px 0 14px 18px;border-top:1px solid var(--line)}
  .flowline li:first-child{border-top:0;padding-top:0}
  .fdot,.fring{top:21px}
  .flowline li:first-child .fdot,.flowline li:first-child .fring{top:7px}
}

/* 報稅期別：一排標籤 */
.filerow{display:grid;grid-template-columns:repeat(6,1fr);max-width:1080px;margin:0 auto 26px;
  border:1px solid var(--line-strong);border-radius:3px;overflow:hidden}
.fitem{padding:13px 14px;border-left:1px solid var(--line);min-width:0;
  background:color-mix(in srgb, var(--surface) 55%, transparent)}
.fitem:first-child{border-left:0}
.fitem .fk{display:block;font-family:var(--font-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;color:var(--accent)}
.fitem .fl{display:block;font-size:13px;color:var(--ink);margin-top:6px}
.fitem .fc{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
@media(max-width:860px){.filerow{grid-template-columns:1fr 1fr 1fr}
  .fitem:nth-child(3n+1){border-left:0}
  .fitem:nth-child(n+4){border-top:1px solid var(--line)}}
@media(max-width:520px){.filerow{grid-template-columns:1fr 1fr}
  .fitem:nth-child(3n+1){border-left:1px solid var(--line)}
  .fitem:nth-child(odd){border-left:0}
  .fitem:nth-child(n+3){border-top:1px solid var(--line)}}

/* 沒有配圖時的條列：整段拉開、兩欄排 */
.office-note.cols{border-left:0;padding-left:0;max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.office-note.cols .on-row{padding:15px 0;border-top:1px solid var(--line)}
.office-note.cols .on-row:nth-child(-n+2){border-top:0;padding-top:0}
@media(max-width:760px){
  .office-note.cols{grid-template-columns:1fr;gap:0}
  .office-note.cols .on-row:nth-child(2){border-top:1px solid var(--line);padding-top:15px}
}

.ctasub{font-family:var(--font-tc);font-size:15px;line-height:1.9;color:rgba(255,255,255,.8);
  max-width:56ch;margin:0 auto 26px}

/* ── 事務所頁的卡片：標題放大，囉唆的說明滑過去才出現 ──────────
   說明**留在版面裡**只是隱形，不是收合——收合會在 hover 時把整排撐高，
   滑過去的時候底下整段一直跳。沒有滑鼠的裝置（手機、觸控）直接全顯示。 */
/* 沒滑到的時候只看得到標題，所以標題要在卡片正中間。
   說明留在版面裡（隱形），整組是置中的；idle 時由 JS 把整組往下推
   半個說明的高度，標題就落在正中央——滑上去推回 0，標題順勢上移、
   說明剛好補進下面。純 CSS 算不出「半個說明多高」，所以這一段交給 GSAP。 */
.hovercards .cardface{display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center}
/* 置中之後不能再讓 hover 把內容往右推——推了就不置中了 */
.hovercards .cardcell:hover .cardface{padding-left:17px}
.hovercards .cbody{width:100%}
.hovercards .cardface h4{font-size:18.5px;line-height:1.45;letter-spacing:-.01em;margin:13px 0 10px}
.hovercards .cardface p{font-size:13.5px;line-height:1.75}
/* 加上寬度條件：手機／平板固然沒有 hover，但「桌機把視窗拉窄」一樣是
   hover:hover，那時候卡片排成兩欄、字也大，藏起來只會變成看不到內容。 */
@media (hover:hover) and (pointer:fine) and (min-width:861px){
  .hovercards .cardface p{opacity:0;transform:translateY(7px);
    transition:opacity .3s var(--e),transform .38s var(--e)}
  .hovercards .cardcell:hover .cardface p,
  .hovercards .cardcell:focus-within .cardface p{opacity:1;transform:none}
}
@media(max-width:1020px){.hovercards .cardface h4{font-size:17px}}

/* ── 手機：卡片預設收起來 ──────────────────────────────────
   桌機是滑過去才顯示說明，手機沒有 hover，於是六張卡的說明**全部同時攤開**——
   一整頁的字牆，而那正是當初把說明藏起來要避免的事。
   手機的對應動作是「點一下」，所以這裡就照那個做：標題先全部看得到，
   想知道細節再點開。資訊沒有少，只是不再一次全倒出來。 */
@media(max-width:860px){
  /* 收起來之後卡片只剩一行標題，112px 的最小高度是替「標題＋說明」留的，
     這時候只是六塊空白。留給點擊的手指夠大就好 */
  .hovercards .cardcell{cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:76px}
  .hovercards .cardface{padding-top:16px;padding-bottom:16px}
  .hovercards .cardface h4{margin:10px 0 0;display:flex;align-items:center;
    justify-content:center;gap:9px}
  /* 右邊那個小箭頭：告訴人這張卡點得開，展開後轉成朝上 */
  .hovercards .cardface h4::after{content:'';flex:none;width:8px;height:8px;
    border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
    transform:translateY(-3px) rotate(45deg);transition:transform .32s var(--e)}
  .hovercards .cardcell.open .cardface h4::after{transform:translateY(1px) rotate(-135deg)}
  .hovercards .cardface p{max-height:0;opacity:0;overflow:hidden;margin:0;
    transition:max-height .4s var(--e),opacity .3s var(--e),margin .4s var(--e)}
  .hovercards .cardcell.open .cardface p{max-height:300px;opacity:1;margin:11px 0 0}
}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  .hovercards .cardface p,.hovercards .cardface h4::after{transition:none}
}
@media(prefers-reduced-motion:reduce){
  .hovercards .cardface p{opacity:1!important;transform:none!important}
  .hovercards .cardface::after{transition:none}
}

/* ── 聯絡頁的表單 ────────────────────────────────────── */
.ctform{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;max-width:820px;margin:0 auto}
/* 作者樣式的 display 會蓋掉 UA 的 [hidden]{display:none}——沒設定聯絡信箱時表單得真的收起來 */
.ctform[hidden]{display:none}
.ctform .f{display:flex;flex-direction:column;gap:7px;min-width:0}
.ctform .f.wide,.ctform .ctact,.ctform .cterr{grid-column:1 / -1}
.ctform .f>span{font-family:var(--font-tc);font-size:12.5px;color:var(--muted)}
.ctform .f>span i{font-style:normal;color:var(--accent);margin-left:6px;font-size:11px}
.ctform input,.ctform select,.ctform textarea{font:inherit;font-family:var(--font-tc);font-size:14px;
  color:var(--ink);background:color-mix(in srgb, var(--surface) 72%, transparent);
  border:1px solid var(--line-strong);border-radius:3px;padding:10px 12px;width:100%}
.ctform textarea{resize:vertical;line-height:1.7}
.ctform input:focus,.ctform select:focus,.ctform textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.ctact{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.ctdirect{font-family:var(--font-tc);font-size:12.5px;color:var(--muted)}
.ctdirect a{color:var(--accent);text-decoration:none}
.cterr{font-family:var(--font-tc);font-size:13px;color:var(--neg);margin:0}
.ctinfo{max-width:820px;margin:22px auto 0;font-family:var(--font-tc);font-size:13.5px;
  line-height:1.9;color:var(--muted);text-align:center}
.ctinfo a{color:var(--accent);text-decoration:none}
.ctinfo p{margin:0}
.ctinfo p+p{margin-top:5px}
.ctinfo .ctnote{font-size:12.5px;color:var(--muted)}
@media(max-width:640px){.ctform{grid-template-columns:1fr}}