精準複刻這個單頁創意工作室頁尾。這是忠實還原任務，不是重新設計。完全照樣實作所提供的內容、素材、CSS 與互動。只建這個頁尾頁面。保持本機；不要發佈或部署。不要新增頁首、hero、卡片、表單、區塊、按鈕、連結、動畫或多餘文案。 下方附上的原始快照為權威規格。請完全照抄，僅在必要時調整 import 路徑或框架接線。不要用近似字體、其他 logo、庫存影片或通用的眼睛跟隨效果來替代。 1. 整體外觀：整頁是一個頁尾，含左側資訊欄、置中手寫 logo、右側聯絡式文字欄（含三個社群圖示）與一段薰衣草色角色影片。桌面寬度時影片在所有內容後方填滿視窗。行動裝置上內容堆疊，影片在正常文件流中出現於其後。構圖寬鬆極簡，文字極深，影片上不加任何色調、遮罩、漸層、模糊或覆蓋層。沒有外部連結或真實聯絡去向。導覽式標籤、聯絡文案、社群圖示與 logo 為靜態顯示元素，非可點錨點。不要杜撰去向、電郵、電話、WhatsApp 動作或社群帳號。不要在任何介面或中繼資料顯示 Truus。 2. 精確可見文案：保留拼字、大小寫、標點、彎引號、星號與換行。左徽章：“have a fresh idea?”。左標題：“imagination” /“meets craft”。標籤：“Made”、“Story”、“In the lab”、“Say hey”。右徽章：“say hey”。右標題：“let’s team up!” /“bring us your idea*”。小註：“*good things start with one spark. let’s make yours.”。社群圖示順序：LinkedIn、Instagram、TikTok，使用所附的精確 SVG，無文字標籤與連結。中央 logo 為 BrandLogo 中的描邊手寫 SVG Logoipsum（viewBox 169×40）；fill 設為 currentColor 以繼承 #080909。不要描摹或重製 logo。 3. 精確字體與色彩：標題 Epilogue Black 900；其餘 DM Sans Regular 400；使用真實字型檔與 font-synthesis: none。下載 DMSans-Regular.woff2 與 Epilogue-Black.woff2 並以 @font-face 搭配 font-display: swap 本機供應。文字與 logo #080909；桌面備援背景 #dfe4f2；徽章 #f7f8fa；行動背景 #f0eefa。無陰影、裝飾邊框、卡片或漸層。 4. 精確桌面版面（>700px）：全域 box-sizing border-box；body 無邊距、min-height 100vh。footer position relative、min-height 100vh、padding-top 6.54vw、isolation isolate、overflow hidden。左區塊：margin-left 8.65vw、width 25vw；徽章 pill 100px、高 1.9vw、padding .39vw .61vw、字 .88vw；標題 margin-top 1.45vw、字 1.66vw 權重 900；導覽縱向 flex gap .93vw、margin-top 1.3vw、字 1.075vw。logo absolute left 40.33vw top 7.7vw width 17vw。右區塊 absolute left 74.3vw top 6.54vw；小註 margin 1.05vw 0 0 字 .733vw；社群列 flex gap 1.43vw、圖示 1.71vw。保留這些 vw 值與精確三欄配置。影片層：wrapper absolute inset 0 z-index -1 pointer-events none；影片 object-fit cover center 位於文字後方，無獨立瞳孔 canvas。 5. 精確行動版面（≤700px），僅在 @media(max-width:700px) 內：背景 #f0eefa；footer 縱向 flex gap 36px、min-height 100svh、padding 40px 24px 0；顯示順序 logo、左、右、影片；logo static width 210px max-width 75%；徽章高 30px 字 14px；標題 clamp(22px,6.3vw,30px)；導覽兩欄格線 column-gap 24px 字 17px 每個標籤 min-height 44px（第一列 Made/Story，第二列 In the lab/Say hey）；小註 max-width 34ch 字 14px 正常換行；社群列 gap 18px wrapper 44×44px 圖示 30×30px 第一個 wrapper margin-left -7px；影片 wrapper relative order 3 width calc(100%+48px) aspect-ratio 4/3 margin-top -16px，於內容下方滿版出血。 6. 精確影片素材：使用完整、逐字的 CloudFront URL，不要替換片段、省略路徑段、跳脫底線或改檔名。來源 1920×1080、24fps、約 7.041667 秒：極淡薰衣草背景上一隻毛絨薰衣草色角色抱著粉紅愛心，眼睛繞圈。下載為 public/footer-background.mp4，並以下列指令建立 public/footer-scrub.mp4：ffmpeg -hide_banner -loglevel error -i public/footer-background.mp4 -an -c:v libx264 -preset fast -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart public/footer-scrub.mp4。保留尺寸、fps、時長、色彩與構圖；all-intra 編碼用於響應式隨機定位。元素須有 muted、playsInline 與 preload="auto"，無原生控制項、音訊、海報或可見載入 UI。 7. 精確桌面滑鼠互動：影片刮動 — 游標移動時選出角色所錄瞳孔朝向游標的影格。不要重繪瞳孔或用 CSS 動畫眼睛。使用所附 gaze-frames.json。眼睛中點在 1920×1080 影格為 (948,418)；cover 縮放 max(w/1920,h/1080)；eyeX = rect.left + rect.width/2 + (948-960)*scale；eyeY = rect.top + rect.height/2 + (418-540)*scale；由游標座標相減；8px 半徑內忽略；atan2(dy,dx) 正規化至 [0,2π)；找出圓周角差最小的列；使用 time + 1/240 秒；僅當差值 > 1/48 秒、有影格資料且無定位進行中才定位；夾限至 duration - 1/24；以 requestAnimationFrame 合併；不要內插；桌面影片從 0 暫停開始並停在所選影格；resize 與 scroll 時重算；被動監聽器，卸載時全部移除。基本方向：右 2.54167s、下 0.33333s、左 1.0s、上 1.70833s。 8. 行動播放：≤700px 停用指標定位；內容下方影片正常靜音循環播放；尊重 prefers-reduced-motion 而暫停；若無法自動播放則保留可見影格，不顯示錯誤或強制控制項。使用 matchMedia change 監聽器在 700px 斷點正確切換。 9. 語意與中繼資料：footer 帶 aria-label="Footer"；影片 wrapper aria-hidden="true" 且 pointer-events:none；logo wrapper role="img" aria-label="Studio logo" 且 SVG aria-hidden；社群 wrapper 標籤 LinkedIn、Instagram、TikTok。語言 en。標題：Studio — Footer。描述：Fresh ideas, imagination, and creative collaboration。favicon：同一 logo /logo.svg，fill #080909。 10. 實作限制：使用 React 與 TypeScript 搭配一般 CSS；參考為 App Router 風格的 app/page.tsx、app/layout.tsx 與客戶端影片元件。環境支援時保留所提供原始碼。此頁不需動畫函式庫、UI 框架或 canvas。使用精確原始檔；取得兩個字型與來源影片；public/logo.svg 由 BrandLogo 的 SVG 將 fillRule/clipRule 轉回 fill-rule/clip-rule 並設 #080909，保留 viewBox 與 path。成功建置並檢查基本方向視線對映、行動堆疊、320px/390px 寬換行與 700px 以上桌面版面。驗證時不要變更內容。全部保持本機；不要發佈或部署。