产品落地页产品系统

面向工具类 / SaaS 类 App 的产品官网，核心任务是在应用商店之外完成 "种草 → 下载转化"。这类页面常见于效率工具、习惯打卡、笔记类产品，目标用户是手机端为主的年轻用户，所以页面要短、情绪要暖、CTA 要醒目。

Hero 区：左侧衬线大标题 + 双 CTA（开始使用 / 看看怎么用），右侧一个纯 CSS 手绘的手机 mockup，圆环进度显示 "今日完成 72%"，下方是 4 条待办（已完成两条打勾划线）。
• 功能三卡：极简打卡、温和复盘、数据本地存储，分别配图标和一句话。
• 三步用法：写一件小事 → 每天打勾 → 周日看回顾，编号 01/02/03 横向排列。
• 用户评价：大引号卡片，一句用户证言。
• 底部 CTA 块：鼠尾草绿圆角卡片 + "免费下载" 按钮，直接引导转化。
• 顶部吸顶导航毛玻璃，锚点平滑滚动。

纯 HTML + CSS 单文件，无框架、无构建、无外部图片。
• CSS conic-gradient 绘制圆环进度（72% 分两段拼色）。
• 纯 CSS 手绘手机模型：圆角机身 + 刘海槽 + 屏幕内 UI（待办行、圆形打卡按钮），不依赖任何图片素材。
• Flexbox / Grid 布局，CSS 变量统一配色（鼠尾草绿 + 奶油底）。
• 响应式断点 860px，手机端 Hero 自动上下堆叠、功能卡单列。
• 字体搭配：Noto Serif SC 大标题 + Noto Sans SC 正文，和个人主页保持视觉一致。