任務：生成高品質 Landing Page（可選樣式 A/B/C/D，含專屬視覺氛圍）
角色
你是全球首席前端網頁設計專家及頂尖的創意總監。請根據以下「品牌資訊」與「網頁樣式」，直接生成一個完整、單檔、具備完美響應式設計的 index.html 檔案。你必須根據用戶提供的「品牌名稱與主題描述」，自動推導視覺策略，確保視覺層次豐富、動態流暢且具備極強的轉換力。
填寫參數-品牌資訊（請填寫中括弧內容）
- 品牌名稱與主題描述：[例如：沐石·湯宿 : 頂級溫泉飯店]
- 關鍵價值主張：[例如：尊榮至上 ｜ 極致品味 ｜ 絕對私密]
- 訪客行動 (CTA)：[例如：立即預訂]
- 網頁樣式選擇 (A/B/C/D)：[請輸入 A / B / C 或 D]
網頁樣式選項定義
A — 專業清新 SaaS 版 (Modern SaaS)
- 視覺氛圍：清新、專業、現代感。使用柔和光暈與微粒子裝飾。
- 英雄區 (Hero)：SVG 漸層遮罩 + 緩慢浮動的抽象幾何圖形。
- 色彩與排版：明亮背景 (#F8FAFC), 品牌色點綴。使用大留白與柔和陰影。
- 微互動：優雅的淡入動畫、卡片輕微位移 (Hover Tilt)。
B — 高端暗黑奢華版 (Quiet Luxury)
- 視覺氛圍：尊榮、神祕、極致質感。參考頂級精品或飯店風格。
- 英雄區 (Hero)：深色大理石紋理 (Dark Marble) + 金屬色流光 (Gold/Champagne) 遮罩。
- 色彩與排版：暗黑色調 (#0D0D12), 襯線體 (Serif) 與無襯線體混搭，創造強烈層次。
- 微互動：細膩的逐字浮現動畫、自訂游標特效 (mix-blend-mode: difference)。
C — 科技未來衝擊版 (Tech Impact)
- 視覺氛圍：前衛、炫酷、數位感。具備強烈的視覺震撼力。
- 英雄區 (Hero)：WebGL / Three.js 粒子系統或 3D 抽象物件，隨滑鼠追蹤互動。
- 色彩與排版：超高對比、霓虹發光效果、深邃背景。
- 微互動：按鈕磁吸效果 (Magnetic Pull)、1px 邊框光束動畫 (Border Beam)。
D — 復古文藝質感版 (Vintage Artsy)
- 視覺氛圍：溫暖、人文、具備厚重的故事感。
- 英雄區 (Hero)：暖色調紙張紋理背景 + 具備膠卷感的顆粒 (Grain) 噪點。
- 色彩與排版：暖奶油色 (#F5F0E8), 深勃艮第紅或亞麻色。非對稱網格排版。
- 微互動：平滑的捲動進場動畫、圖片濾鏡切換。
執行規範（必須嚴格遵守）
1. 圖片資產規範
- 嚴禁佔位符：必須從 Unsplash 取得真實高品質圖片網址。
- 氛圍一致性：搜尋關鍵字必須精準結合「選定樣式的視覺氛圍」+「品牌名稱與主題描述」。
- 圖像層次：Hero 背景圖需搭配漸層遮罩，確保文字絕對清晰可讀。
- **真實圖片必須確保來源網址可以讀取
- 使用 Iconify Icons
2. UI 系統與功能
- 導覽列 (Navbar)：包含品牌名稱、3–4 個錨點連結及一個顯眼的 CTA 按鈕。
- 內容佈局：包含 Hero 區 (SVG動畫+真實圖片背景)、價值主張區（3 張精美卡片）、最終吸引行動區與頁尾。
- 磨砂玻璃 (Glassmorphism)：卡片應使用適度的背景模糊與邊框發亮效果。
- 雜訊質感：除 A 選項外，全站應套用輕微的噪點紋理 (Noise Texture) 以提升品質。
3. 技術規格
- 單檔輸出：包含所有 CSS/JS/HTML。
- CDN 庫：Tailwind CSS, GSAP, Iconify-icon, Three.js,Anime.js,Google Fonts。
- 靜默執行：不要詢問任何問題，請直接根據「品牌名稱與主題描述」與選定的「網頁樣式」，生成令人驚艷的最終作品。
執行指令
請讀取以上配置，開始生成專業 Landing Page。