feat: 新增常見問題（FAQ）區塊

[dean9703111]

🎯 為什麼要這樣做

Landing page 缺少 FAQ 區塊，使用者在購買決策前常有疑問無處查詢，導致轉換率下降。本 PR 新增手風琴式 FAQ 元件，涵蓋產品差異、試用方案、資料安全等六大常見問題，並整合至導覽列。

⚠️ 修改的內容

FAQ 元件

• 修改方向：新增功能
• 內容：
  • 建立手風琴展開／收合互動，支援多項同時展開
  • 預設六組問答資料，涵蓋產品差異、免費試用、資料匯入、安全性、整合工具、方案變更
  • 使用 aria-expanded 確保無障礙語意正確

頁面整合

• 修改方向：整合元件至主頁面
• 內容：
  • 將 FAQ 區塊插入 Pricing 與 CallToAction 之間
  • 在導覽列新增「常見問答」連結，錨點指向 #faq

FAQ 樣式

• 修改方向：新增樣式
• 內容：
  • 使用 CSS 自訂屬性（design token）實作卡片邊框、背景色、過渡動畫
  • 展開狀態以 max-height + opacity 實現平滑動畫
  • 開啟項目高亮邊框（--color-primary-glow）
  • 新增 640px 以下的 RWD 縮排調整

🧪 測試步驟

測試案例 1：手風琴展開與收合

1. 開啟首頁，捲動至常見問答區塊
2. 點擊任一問題
3. 預期結果：答案區域平滑展開，圖示由 + 變為 −，邊框高亮

測試案例 2：多項同時展開

1. 依序點擊多個不同問題
2. 預期結果：每個被點擊的問題皆獨立展開，不互相關閉

測試案例 3：再次點擊收合

1. 點擊已展開的問題
2. 預期結果：答案區域平滑收合，圖示恢復為 +

測試案例 4：導覽列錨點跳轉

1. 點擊導覽列「常見問答」連結
2. 預期結果：頁面平滑捲動至 FAQ 區塊

測試案例 5：RWD 行動裝置顯示

1. 縮小視窗至 375px 寬度（或使用 DevTools 模擬）
2. 展開任一問題
3. 預期結果：問題文字、內距正確縮小，版面無溢出