把结构要求写清楚再让模型出码，一次就能拿到可直接上线的玻璃拟态首屏，不用反复调样式。
你是一名资深前端工程师。请输出一个可直接运行的玻璃拟态（Glassmorphism）落地页 Hero 区块。
【设计要求】
- 布局：左侧文案 + 右侧悬浮卡片，窄屏自动上下堆叠
- 背景：深色渐变 + 两团彩色光晕（filter: blur(90px) 以上）
- 卡片：backdrop-filter: blur(18px)，1px 半透明描边，圆角 24px
- 主按钮用渐变色，hover 有 2px 上浮与阴影变化
- 所有样式写在同一个 <style> 里，不引入任何外部依赖
【技术约束】
- 使用语义化 HTML5 标签
- 颜色用 CSS 变量集中管理
- 支持 prefers-reduced-motion
- 兼容 iOS Safari，补 -webkit-backdrop-filter
【输出顺序】
1. 先用 3 行说明你将采用的布局结构
2. 再给出完整可运行代码
3. 最后列出 3 个可继续优化的点
我的场景：{产品或活动名称}，主色调 {主色}，核心卖点 {一句话}。
先看模型给的结构说明，符合预期再复制代码。
光晕颜色控制在两种以内，多了页面会显脏。
上线前在真机 Safari 上确认模糊滤镜的滚动静默。
玻璃拟态翻车通常不在模糊本身，而在于光晕太杂、层级不够，结果整块糊成一团。这条提示词把光晕数量、模糊半径、描边透明度都写成了硬约束。
「两团光晕 + blur 90px」是经验值的下限：再多颜色就会互相污染，再少就没有体积感。要求模型先复述结构，是为了在你复制代码前就能判断思路对不对，省一轮返工。
如果生成的卡片边缘发灰，让它把描边改成 rgba(255,255,255,.18) 并把卡片背景压到 rgba(255,255,255,.06)，一般就能恢复通透感。
按平台爆款结构出完整分镜脚本，开头 3 秒钩子、中段节奏、结尾引导一句不缺，直接能拍。
把书面材料改成自然口语口播稿，短句、有呼吸感、念出来不打结，还带情绪起伏标记。
纯 CSS 实现纵向视差与呼吸光晕，不引第三方库，移动端也不掉帧。
按"一句卖点—三层论证—打消顾虑"的金字塔结构写详情页，每个卖点都有证据支撑，不是空喊。
鼠标跟随倾斜 + 高光反射的 3D 卡片，用 transform 3D 实现，交互手感接近原生应用。
生成 15 分钟一轮的直播话术脚本，憋单、放单、逼单节奏齐全，还带互动问题和违禁词自查。