精准复刻这个单页创意工作室页脚。这是忠实还原任务，不是重新设计。完全照样实现所提供的内容、素材、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 以上桌面布局。验证时不要更改内容。全部保持在本地；不要发布或部署。