diff --git a/content/docs/en/copy-to-word.md b/content/docs/en/copy-to-word.md
new file mode 100644
index 0000000..2dab050
--- /dev/null
+++ b/content/docs/en/copy-to-word.md
@@ -0,0 +1,66 @@
+---
+title: Copy to Word
+description: Export recognized formulas directly into Microsoft Word as editable equations
+slug: copy-to-word
+date: 2026-03-25
+tags: [export, Word, DOCX]
+order: 4
+---
+
+# Copy to Word
+
+TexPixel can export your recognized formulas directly into Microsoft Word as native, editable equations — not images. This means you can continue editing the formula inside Word after export.
+
+## How to Export to Word
+
+1. Upload your formula image and wait for recognition to complete.
+2. Click the **Export** button in the result panel.
+3. Select **DOCX** from the file export options.
+4. Download the file and open it in Microsoft Word.
+
+The downloaded `.docx` file contains your formula as a native Word equation (OMML format), which Word renders using its built-in equation editor.
+
+## Why Use DOCX Export?
+
+| Method | Editable in Word | Renders Correctly | Copy-Paste |
+|---|---|---|---|
+| Screenshot / image | No | Yes | No |
+| LaTeX string | No (without plugin) | No | Yes |
+| DOCX export | **Yes** | **Yes** | N/A |
+
+The DOCX format is ideal when you need to:
+- Submit homework or reports as Word documents
+- Share formulas with colleagues who don't use LaTeX
+- Continue editing the formula after export
+
+## Inserting into an Existing Document
+
+If you want to insert a formula into an existing Word document rather than starting fresh:
+
+1. Open the downloaded `.docx` file in Word.
+2. Select the equation and copy it (`Ctrl+C` / `Cmd+C`).
+3. Paste it into your target document (`Ctrl+V` / `Cmd+V`).
+
+Word preserves the equation formatting during paste.
+
+## Mixed Content (Text + Formulas)
+
+If your upload contains a mix of regular text and formulas (e.g., a textbook page), use DOCX export — it's the only format that handles mixed content correctly. LaTeX and MathML export are only available for pure-formula results.
+
+> **Note:** For mixed-content results, LaTeX/MathML export is disabled. Use DOCX to get a properly formatted document with both text and equations.
+
+## Compatibility
+
+DOCX export is compatible with:
+- Microsoft Word 2016 and later (Windows and Mac)
+- Google Docs (equations render as images when imported)
+- LibreOffice Writer (partial support)
+
+## Tips
+
+- After pasting into Word, double-click the equation to open the equation editor and make changes.
+- If the formula looks different from expected, try re-uploading a higher-resolution image for a more accurate recognition result.
+
+---
+
+[Try exporting a formula to Word →](/app)
diff --git a/content/docs/en/image-to-latex.md b/content/docs/en/image-to-latex.md
new file mode 100644
index 0000000..182c247
--- /dev/null
+++ b/content/docs/en/image-to-latex.md
@@ -0,0 +1,80 @@
+---
+title: Image to LaTeX
+description: How to convert any formula image into clean LaTeX code with TexPixel
+slug: image-to-latex
+date: 2026-03-25
+tags: [LaTeX, tutorial]
+order: 2
+---
+
+# Image to LaTeX
+
+TexPixel's core feature is converting formula images — from photos, scans, or screenshots — directly into LaTeX code you can paste anywhere.
+
+## How It Works
+
+1. **Upload your image** — Drag and drop a JPG or PNG into the upload zone, or click to browse. You can also paste from your clipboard.
+2. **AI processes it** — Our model detects the formula region, runs OCR, and generates structured LaTeX in under a second.
+3. **Copy the result** — Click the copy button next to the LaTeX output. Paste directly into Overleaf, VS Code, Word, or any LaTeX editor.
+
+## Input Requirements
+
+| Requirement | Details |
+|---|---|
+| File formats | JPG, PNG |
+| Max file size | 10 MB |
+| Recommended DPI | 150 DPI or higher |
+| Background | White or light backgrounds work best |
+
+## What Gets Recognized
+
+TexPixel handles a wide range of mathematical content:
+
+- **Algebra** — equations, inequalities, polynomials
+- **Calculus** — derivatives, integrals, limits
+- **Matrices** — 2×2 up to large arrays
+- **Greek letters** — α, β, γ, Σ, Π, and more
+- **Subscripts and superscripts** — `x_i^2`, `a_{n+1}`
+- **Fractions** — `\frac{a}{b}`, nested fractions
+- **Square roots and radicals** — `\sqrt{x}`, `\sqrt[n]{x}`
+
+## Example
+
+Uploading an image of the quadratic formula gives you:
+
+```latex
+x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+```
+
+An image of an integral:
+
+```latex
+\int_0^\infty e^{-x^2}\, dx = \frac{\sqrt{\pi}}{2}
+```
+
+## Tips for Best Results
+
+- **Use clear images** — avoid blur, shadows, or low contrast
+- **Crop tightly** — the less background, the better the focus
+- **Dark ink on white paper** — ideal for handwritten formulas
+- **Avoid rotated images** — keep the formula horizontal
+- **One formula per image** — for complex multi-part work, crop each formula separately
+
+## Limitations
+
+- Extremely faint or pencil-written formulas may have lower accuracy
+- Hand-drawn arrows or annotation marks outside the formula may be ignored
+- Very large matrices (10×10+) may have reduced accuracy
+
+## Copy Options
+
+After recognition, you can copy output in multiple formats:
+
+- **LaTeX** — raw LaTeX string
+- **MathML** — for web embedding
+- **Markdown** — `$...$` inline or `$$...$$` block
+- **Plain text** — Unicode approximation
+
+---
+
+Ready to try it? [Upload a formula image now →](/app)
diff --git a/content/docs/en/ocr-accuracy.md b/content/docs/en/ocr-accuracy.md
new file mode 100644
index 0000000..19bcdc5
--- /dev/null
+++ b/content/docs/en/ocr-accuracy.md
@@ -0,0 +1,79 @@
+---
+title: OCR Accuracy
+description: Understanding TexPixel recognition accuracy and how to get the best results
+slug: ocr-accuracy
+date: 2026-03-25
+tags: [accuracy, tips]
+order: 5
+---
+
+# OCR Accuracy
+
+TexPixel achieves industry-leading accuracy on mathematical formula recognition — but accuracy isn't uniform across all input types. This guide explains what affects accuracy and how to maximize it.
+
+## Accuracy by Formula Type
+
+| Formula Type | Typical Accuracy |
+|---|---|
+| Printed formulas (textbooks, papers) | 95–99% |
+| Clean handwritten formulas | 88–95% |
+| Scanned documents (300 DPI+) | 93–98% |
+| Photos of whiteboards | 82–92% |
+| Low-resolution images (< 72 DPI) | 60–80% |
+
+These are approximate ranges. Individual results depend heavily on image quality.
+
+## Factors That Affect Accuracy
+
+### Image Quality
+
+The single biggest factor. A blurry, low-resolution, or poorly lit image will always produce worse results than a clean scan.
+
+- **Resolution** — 150 DPI or higher is recommended. 300 DPI is ideal for documents.
+- **Contrast** — dark ink on a white background gives the clearest signal to the model.
+- **Sharpness** — avoid motion blur or out-of-focus shots.
+
+### Formula Complexity
+
+Simple single-line equations are recognized with near-perfect accuracy. More complex structures may have occasional errors:
+
+- Multi-line equation systems
+- Large matrices (6×6 or larger)
+- Heavily nested fractions (3+ levels deep)
+- Non-standard notation or custom symbols
+
+### Handwriting Style
+
+Printed (typed) formulas outperform handwritten ones, but TexPixel handles handwriting well when:
+
+- Letters are clearly formed and not connected (print style, not cursive)
+- Variables are written in distinct sizes (clearly different x and × for example)
+- Spacing between symbols is consistent
+
+### What Reduces Accuracy
+
+- **Rotated images** — formulas at an angle are harder to parse
+- **Overlapping elements** — crossed-out work, annotations, or arrows near symbols
+- **Pencil on paper** — low contrast; try increasing image brightness/contrast before uploading
+- **Multiple formulas in one image** — crop to the specific formula you need
+- **Decorative fonts** — calligraphic or stylized mathematical writing
+
+## Improving Results
+
+If you're getting errors, try these steps in order:
+
+1. **Increase image resolution** — scan at 300 DPI instead of 150 DPI
+2. **Improve contrast** — use a photo editor to increase brightness and contrast
+3. **Crop tightly** — remove surrounding text and whitespace
+4. **Straighten the image** — correct rotation before uploading
+5. **Re-photograph** — better lighting, closer distance, sharper focus
+
+## Reporting Errors
+
+Found a formula type that TexPixel consistently gets wrong? Let us know — accuracy feedback directly improves the model over time.
+
+Contact us at: [support@texpixel.com](mailto:support@texpixel.com)
+
+---
+
+[Upload a formula and test accuracy →](/app)
diff --git a/content/docs/en/pdf-extraction.md b/content/docs/en/pdf-extraction.md
new file mode 100644
index 0000000..bfb02e8
--- /dev/null
+++ b/content/docs/en/pdf-extraction.md
@@ -0,0 +1,75 @@
+---
+title: PDF Extraction
+description: Extract and convert formulas from PDF documents automatically with TexPixel
+slug: pdf-extraction
+date: 2026-03-25
+tags: [PDF, extraction]
+order: 6
+---
+
+# PDF Extraction
+
+TexPixel can process entire PDF documents and extract every formula from every page — automatically. This is useful for textbooks, research papers, or any multi-page document with mathematical content.
+
+## How to Extract from a PDF
+
+1. Click the upload zone or drag and drop your PDF file.
+2. TexPixel detects all pages and identifies formula regions.
+3. Each recognized formula is listed in the result panel.
+4. Copy individual formulas or export the entire document as DOCX.
+
+## What Gets Extracted
+
+TexPixel identifies formulas in PDFs regardless of whether they were:
+- Typeset in LaTeX (rendered as vector math)
+- Embedded as images (scanned pages)
+- A mix of both
+
+For vector PDFs (generated from LaTeX or Word), recognition accuracy is typically 95%+. For scanned/image PDFs, accuracy follows the same image quality guidelines as regular image uploads.
+
+## Supported PDF Types
+
+| Type | Description | Accuracy |
+|---|---|---|
+| Vector PDF | Created from LaTeX, Word, or typesetting tools | 95–99% |
+| Scanned PDF (high quality) | 300 DPI scan of printed text | 90–97% |
+| Scanned PDF (low quality) | < 150 DPI or poor contrast | 60–80% |
+| Photo PDF | Photographed pages embedded as images | 75–90% |
+
+## File Limits
+
+- **Max file size:** 20 MB
+- **Max pages:** 50 pages per upload (Pro plan: unlimited)
+- **Processing time:** ~2–5 seconds per page
+
+For documents exceeding these limits, split the PDF into smaller chunks before uploading.
+
+## Exporting PDF Results
+
+After extraction, you can export in several ways:
+
+- **Copy individual formula** — click any recognized formula to copy its LaTeX
+- **DOCX export** — download the full document with formulas as native Word equations
+- **Batch copy** — copy all formulas as a list (Pro feature)
+
+## Tips for Better PDF Results
+
+- **Use the original PDF**, not a re-scanned copy — vector PDFs give the best results
+- **Avoid password-protected PDFs** — these cannot be processed
+- **Crop pages** if a PDF has wide margins with no content — smaller pages process faster
+- **Split by chapter** for very large documents to stay within page limits
+
+## Common Issues
+
+**"No formulas found"**
+The PDF may be encrypted, have formulas stored as complex vector paths, or use non-standard encoding. Try converting the page to a PNG image and uploading that instead.
+
+**Formulas recognized but garbled**
+This often happens with very low DPI scans. Try using a PDF scanner app to rescan at 300 DPI before uploading.
+
+**Processing is slow**
+Large PDFs with many pages can take 30–60 seconds. This is normal. The result will appear when processing is complete.
+
+---
+
+[Upload a PDF and extract formulas →](/app)
diff --git a/content/docs/zh/copy-to-word.md b/content/docs/zh/copy-to-word.md
new file mode 100644
index 0000000..19d744e
--- /dev/null
+++ b/content/docs/zh/copy-to-word.md
@@ -0,0 +1,66 @@
+---
+title: 导出到 Word
+description: 将识别的公式直接导出到 Microsoft Word 中作为可编辑方程
+slug: copy-to-word
+date: 2026-03-25
+tags: [导出, Word, DOCX]
+order: 4
+---
+
+# 导出到 Word
+
+TexPixel 可以将识别的公式直接导出到 Microsoft Word 中作为原生可编辑方程——而不是图片。这意味着导出后你可以在 Word 中继续编辑公式。
+
+## 如何导出到 Word
+
+1. 上传公式图片并等待识别完成。
+2. 点击结果面板中的**导出**按钮。
+3. 从文件导出选项中选择 **DOCX**。
+4. 下载文件并在 Microsoft Word 中打开。
+
+下载的 `.docx` 文件包含以原生 Word 方程（OMML 格式）表示的公式，Word 使用内置方程编辑器渲染。
+
+## 为什么使用 DOCX 导出？
+
+| 方式 | Word 中可编辑 | 正确渲染 | 复制粘贴 |
+|---|---|---|---|
+| 截图/图片 | 否 | 是 | 否 |
+| LaTeX 字符串 | 否（无插件） | 否 | 是 |
+| DOCX 导出 | **是** | **是** | N/A |
+
+DOCX 格式非常适合以下情况：
+- 提交 Word 格式的作业或报告
+- 与不使用 LaTeX 的同事共享公式
+- 导出后继续编辑公式
+
+## 插入到现有文档
+
+如果你想将公式插入现有 Word 文档而不是新建文档：
+
+1. 在 Word 中打开下载的 `.docx` 文件。
+2. 选中方程并复制（`Ctrl+C` / `Cmd+C`）。
+3. 粘贴到目标文档（`Ctrl+V` / `Cmd+V`）。
+
+Word 在粘贴时保留方程格式。
+
+## 混合内容（文字 + 公式）
+
+如果上传内容包含普通文字和公式的混合（例如教材页面），请使用 DOCX 导出——这是唯一能正确处理混合内容的格式。LaTeX 和 MathML 导出仅适用于纯公式结果。
+
+> **注意：** 对于混合内容结果，LaTeX/MathML 导出不可用。请使用 DOCX 获取包含文字和方程的格式正确文档。
+
+## 兼容性
+
+DOCX 导出与以下软件兼容：
+- Microsoft Word 2016 及更高版本（Windows 和 Mac）
+- Google 文档（导入时方程渲染为图片）
+- LibreOffice Writer（部分支持）
+
+## 提示
+
+- 粘贴到 Word 后，双击方程打开方程编辑器进行修改。
+- 如果公式与预期不同，请尝试上传更高分辨率的图片以获得更准确的识别结果。
+
+---
+
+[尝试将公式导出到 Word →](/app)
diff --git a/content/docs/zh/image-to-latex.md b/content/docs/zh/image-to-latex.md
new file mode 100644
index 0000000..d64f73a
--- /dev/null
+++ b/content/docs/zh/image-to-latex.md
@@ -0,0 +1,80 @@
+---
+title: 图片转 LaTeX
+description: 如何使用 TexPixel 将任意公式图片转换为干净的 LaTeX 代码
+slug: image-to-latex
+date: 2026-03-25
+tags: [LaTeX, 教程]
+order: 2
+---
+
+# 图片转 LaTeX
+
+TexPixel 的核心功能是将公式图片——来自照片、扫描件或截图——直接转换为可以粘贴到任何地方的 LaTeX 代码。
+
+## 使用方法
+
+1. **上传图片** — 将 JPG 或 PNG 拖拽到上传区域，或点击浏览文件。也可以直接从剪贴板粘贴。
+2. **AI 处理** — 模型检测公式区域，运行 OCR，在不到一秒内生成结构化 LaTeX。
+3. **复制结果** — 点击 LaTeX 输出旁的复制按钮，直接粘贴到 Overleaf、VS Code、Word 或任意 LaTeX 编辑器。
+
+## 输入要求
+
+| 要求 | 详情 |
+|---|---|
+| 文件格式 | JPG、PNG |
+| 最大文件大小 | 10 MB |
+| 推荐分辨率 | 150 DPI 或更高 |
+| 背景 | 白色或浅色背景效果最佳 |
+
+## 支持识别的内容
+
+TexPixel 可处理多种数学内容：
+
+- **代数** — 方程、不等式、多项式
+- **微积分** — 导数、积分、极限
+- **矩阵** — 2×2 到大型数组
+- **希腊字母** — α、β、γ、Σ、Π 等
+- **上下标** — `x_i^2`、`a_{n+1}`
+- **分数** — `\frac{a}{b}`、嵌套分数
+- **根号** — `\sqrt{x}`、`\sqrt[n]{x}`
+
+## 示例
+
+上传二次公式图片，输出：
+
+```latex
+x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+```
+
+上传积分图片：
+
+```latex
+\int_0^\infty e^{-x^2}\, dx = \frac{\sqrt{\pi}}{2}
+```
+
+## 获得最佳结果的技巧
+
+- **使用清晰图片** — 避免模糊、阴影或低对比度
+- **紧密裁剪** — 背景越少，焦点越准确
+- **白纸深色墨水** — 手写公式的理想条件
+- **避免旋转图片** — 保持公式水平
+- **每张图片一个公式** — 对于复杂的多部分作业，分别裁剪每个公式
+
+## 局限性
+
+- 非常淡或铅笔书写的公式准确率可能较低
+- 公式外的手绘箭头或注释标记可能被忽略
+- 非常大的矩阵（10×10 以上）可能准确率降低
+
+## 复制选项
+
+识别完成后，可以多种格式复制输出：
+
+- **LaTeX** — 原始 LaTeX 字符串
+- **MathML** — 用于网页嵌入
+- **Markdown** — 行内 `$...$` 或块级 `$$...$$`
+- **纯文本** — Unicode 近似表示
+
+---
+
+准备好了吗？[立即上传公式图片 →](/app)
diff --git a/content/docs/zh/ocr-accuracy.md b/content/docs/zh/ocr-accuracy.md
new file mode 100644
index 0000000..f9e1d3e
--- /dev/null
+++ b/content/docs/zh/ocr-accuracy.md
@@ -0,0 +1,79 @@
+---
+title: 识别准确率
+description: 了解 TexPixel 识别准确率及如何获得最佳效果
+slug: ocr-accuracy
+date: 2026-03-25
+tags: [准确率, 技巧]
+order: 5
+---
+
+# 识别准确率
+
+TexPixel 在数学公式识别方面达到行业领先的准确率——但准确率在不同输入类型之间并不统一。本指南解释影响准确率的因素以及如何最大化识别效果。
+
+## 按公式类型的准确率
+
+| 公式类型 | 典型准确率 |
+|---|---|
+| 印刷体公式（教材、论文） | 95–99% |
+| 清晰手写公式 | 88–95% |
+| 扫描文档（300 DPI+） | 93–98% |
+| 白板照片 | 82–92% |
+| 低分辨率图片（< 72 DPI） | 60–80% |
+
+这些是大致范围，实际结果在很大程度上取决于图片质量。
+
+## 影响准确率的因素
+
+### 图片质量
+
+这是最重要的单一因素。模糊、低分辨率或光线不佳的图片效果始终不如清晰扫描件。
+
+- **分辨率** — 建议 150 DPI 或更高，文档理想为 300 DPI
+- **对比度** — 白色背景上的深色墨水为模型提供最清晰的信号
+- **清晰度** — 避免运动模糊或对焦不准
+
+### 公式复杂度
+
+简单的单行方程识别准确率接近完美。更复杂的结构可能偶有错误：
+
+- 多行方程组
+- 大矩阵（6×6 或更大）
+- 深度嵌套分数（3 层以上）
+- 非标准符号或自定义符号
+
+### 手写风格
+
+印刷体（打字）公式优于手写体，但当以下条件满足时，TexPixel 能很好地处理手写：
+
+- 字母清晰成形且不连笔（印刷体，而非草书）
+- 变量写成明显不同的大小（例如 x 和 × 清晰区分）
+- 符号间距一致
+
+### 降低准确率的因素
+
+- **旋转图片** — 倾斜的公式更难解析
+- **重叠元素** — 划掉的内容、注释或符号附近的箭头
+- **纸上铅笔** — 对比度低；上传前可尝试增加图片亮度/对比度
+- **一张图片多个公式** — 裁剪到你需要的具体公式
+- **装饰字体** — 花体或风格化数学书写
+
+## 提高识别效果
+
+如果识别出错，按以下顺序尝试：
+
+1. **提高图片分辨率** — 用 300 DPI 扫描代替 150 DPI
+2. **改善对比度** — 使用图片编辑器提高亮度和对比度
+3. **紧密裁剪** — 去除周围文字和空白
+4. **矫正图片** — 上传前纠正旋转
+5. **重新拍摄** — 更好的光线、更近的距离、更清晰的对焦
+
+## 反馈错误
+
+发现 TexPixel 持续识别错误的公式类型？请告知我们——准确率反馈直接改进模型。
+
+联系我们：[support@texpixel.com](mailto:support@texpixel.com)
+
+---
+
+[上传公式测试识别准确率 →](/app)
diff --git a/content/docs/zh/pdf-extraction.md b/content/docs/zh/pdf-extraction.md
new file mode 100644
index 0000000..be140c8
--- /dev/null
+++ b/content/docs/zh/pdf-extraction.md
@@ -0,0 +1,75 @@
+---
+title: PDF 公式提取
+description: 使用 TexPixel 自动从 PDF 文档中提取并转换公式
+slug: pdf-extraction
+date: 2026-03-25
+tags: [PDF, 提取]
+order: 6
+---
+
+# PDF 公式提取
+
+TexPixel 可以处理完整的 PDF 文档，自动从每一页提取所有公式。这对教材、研究论文或任何包含数学内容的多页文档非常有用。
+
+## 如何从 PDF 提取
+
+1. 点击上传区域或将 PDF 文件拖拽到其中。
+2. TexPixel 检测所有页面并识别公式区域。
+3. 每个识别的公式列在结果面板中。
+4. 复制单个公式或将整个文档导出为 DOCX。
+
+## 提取内容
+
+无论 PDF 中的公式是如何生成的，TexPixel 都能识别：
+- 用 LaTeX 排版（渲染为矢量数学）
+- 嵌入为图片（扫描页面）
+- 两种混合
+
+对于矢量 PDF（由 LaTeX 或 Word 生成），识别准确率通常为 95% 以上。对于扫描/图片 PDF，准确率遵循与普通图片上传相同的图片质量准则。
+
+## 支持的 PDF 类型
+
+| 类型 | 描述 | 准确率 |
+|---|---|---|
+| 矢量 PDF | 由 LaTeX、Word 或排版工具创建 | 95–99% |
+| 扫描 PDF（高质量） | 印刷文字的 300 DPI 扫描 | 90–97% |
+| 扫描 PDF（低质量） | < 150 DPI 或对比度差 | 60–80% |
+| 照片 PDF | 嵌入为图片的拍照页面 | 75–90% |
+
+## 文件限制
+
+- **最大文件大小：** 20 MB
+- **最大页数：** 每次上传 50 页（专业版：无限制）
+- **处理时间：** 每页约 2–5 秒
+
+对于超出限制的文档，上传前将 PDF 分割成较小的部分。
+
+## 导出 PDF 识别结果
+
+提取后，可以多种方式导出：
+
+- **复制单个公式** — 点击任意识别的公式复制其 LaTeX
+- **DOCX 导出** — 下载包含原生 Word 方程的完整文档
+- **批量复制** — 将所有公式复制为列表（专业版功能）
+
+## 提高 PDF 识别效果的技巧
+
+- **使用原始 PDF**，而非重新扫描的副本——矢量 PDF 效果最佳
+- **避免密码保护的 PDF**——这类文件无法处理
+- 如果 PDF 有很宽的空白边距，**裁剪页面**——较小的页面处理更快
+- 对于非常大的文档，**按章节分割**以保持在页数限制内
+
+## 常见问题
+
+**"未找到公式"**
+PDF 可能已加密，公式可能以复杂矢量路径存储，或使用了非标准编码。尝试将页面转换为 PNG 图片后再上传。
+
+**公式已识别但内容乱码**
+这通常发生在非常低 DPI 的扫描件上。尝试在上传前使用 PDF 扫描应用以 300 DPI 重新扫描。
+
+**处理速度慢**
+包含多页的大型 PDF 可能需要 30–60 秒。这是正常的，处理完成后结果会显示。
+
+---
+
+[上传 PDF 提取公式 →](/app)
diff --git a/docs/superpowers/plans/2026-03-26-landing-refactor.md b/docs/superpowers/plans/2026-03-26-landing-refactor.md
new file mode 100644
index 0000000..0dda0e2
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-26-landing-refactor.md
@@ -0,0 +1,1523 @@
+# Landing Page Refactor Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace all marketing home components with the UI from `texpixel-landing.html`, preserving exact visual fidelity while integrating with React Router, AuthContext, and existing app infrastructure.
+
+**Architecture:** Extract the reference HTML's `<style>` block into a scoped `landing.css` (imported only in `MarketingLayout`), convert each HTML section into a focused React component, and convert the reference's `<script>` behaviors into `useEffect` hooks and a shared `useScrollReveal` hook.
+
+**Tech Stack:** React 18, TypeScript, React Router v6, Tailwind CSS (workspace only), custom CSS (marketing only), `useAuth` / `useLanguage` contexts.
+
+**Spec:** `docs/superpowers/specs/2026-03-26-landing-refactor-design.md`
+**Reference:** `texpixel-landing.html` (lines 10-1593 = CSS, lines 1602-2183 = HTML, lines 2185-2289 = JS)
+
+---
+
+## File Map
+
+### Create
+- `src/styles/landing.css` — all marketing CSS, scoped under `.marketing-page`
+- `src/hooks/useScrollReveal.ts` — IntersectionObserver for `.reveal` elements
+- `src/components/home/ProductSuiteSection.tsx` — `.product-suite` section
+- `src/components/home/ShowcaseSection.tsx` — `.showcase` section
+- `src/components/home/TestimonialsSection.tsx` — `.user-love` carousel section
+- `src/components/home/DocsSeoSection.tsx` — `.docs-seo` section
+
+### Modify
+- `index.html` — add Lora + JetBrains Mono fonts
+- `src/components/layout/MarketingLayout.tsx` — import CSS, add `.marketing-page` wrapper + glow blobs
+- `src/components/layout/MarketingNavbar.tsx` — replace with reference nav design
+- `src/components/layout/Footer.tsx` — replace with reference footer design
+- `src/components/home/HeroSection.tsx` — replace with reference hero + typing effect
+- `src/components/home/FeaturesSection.tsx` — replace with reference core features
+- `src/components/home/PricingSection.tsx` — replace with reference pricing
+- `src/pages/HomePage.tsx` — update section order, add new sections, add scroll reveal
+- `src/lib/translations.ts` — remove dead `contact` key from `marketing.nav`
+
+### Delete
+- `src/components/home/HowItWorksSection.tsx`
+- `src/components/home/ContactSection.tsx`
+
+---
+
+## Task 1: Add Fonts to index.html
+
+**Files:**
+- Modify: `index.html:15`
+
+- [ ] **Step 1: Add Lora and JetBrains Mono to the Google Fonts link**
+
+Replace the existing fonts line (line 15) in `index.html`:
+```html
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet" />
+```
+With:
+```html
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+```
+
+- [ ] **Step 2: Verify build still passes**
+
+```bash
+npm run typecheck
+```
+Expected: no errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add index.html
+git commit -m "feat: add Lora and JetBrains Mono fonts for landing page"
+```
+
+---
+
+## Task 2: Extract Landing CSS
+
+**Files:**
+- Create: `src/styles/landing.css`
+
+- [ ] **Step 1: Create the styles directory and file**
+
+```bash
+mkdir -p src/styles
+```
+
+- [ ] **Step 2: Copy the CSS from the reference and apply scoping**
+
+Copy lines 10–1593 from `texpixel-landing.html` (everything inside the `<style>` tag) into `src/styles/landing.css`.
+
+Then apply these transformations to prevent workspace bleed:
+
+| Original selector | Replace with |
+|---|---|
+| `body {` | `.marketing-page {` |
+| `body::before {` | `.marketing-page::before {` |
+| `html { scroll-behavior: smooth; }` | Remove this line (already in `index.css` via Tailwind base) |
+| `section { position: relative; z-index: 1; }` | `.marketing-page section { position: relative; z-index: 1; }` |
+| `nav {` | `.marketing-page nav {` |
+| `footer {` (the footer padding rule) | `.marketing-page footer {` |
+
+Leave `:root { ... }` untouched — the variable names (`--primary`, `--bg`, etc.) don't conflict with the workspace's variables (`--color-primary`, `--color-bg`).
+
+All class-based selectors (`.hero`, `.btn`, `.product-card`, etc.) need no change — they are unique enough to not affect the workspace.
+
+At the very end of the file, add the scroll reveal animation rule used by JS:
+```css
+.reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.55s ease, transform 0.55s ease;
+}
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.reveal-delay-1 { transition-delay: 0.10s; }
+.reveal-delay-2 { transition-delay: 0.20s; }
+.reveal-delay-3 { transition-delay: 0.30s; }
+```
+
+- [ ] **Step 3: Verify the file exists**
+
+```bash
+ls src/styles/landing.css
+```
+Expected: file listed
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/styles/landing.css
+git commit -m "feat: extract landing page CSS from reference HTML"
+```
+
+---
+
+## Task 3: Update MarketingLayout
+
+**Files:**
+- Modify: `src/components/layout/MarketingLayout.tsx`
+
+- [ ] **Step 1: Replace MarketingLayout.tsx**
+
+```tsx
+import { Outlet } from 'react-router-dom';
+import MarketingNavbar from './MarketingNavbar';
+import Footer from './Footer';
+import '../../styles/landing.css';
+
+export default function MarketingLayout() {
+  return (
+    <div className="marketing-page">
+      <div className="glow-blob glow-blob-1" />
+      <div className="glow-blob glow-blob-2" />
+      <div className="glow-blob glow-blob-3" />
+      <MarketingNavbar />
+      <main>
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck passes**
+
+```bash
+npm run typecheck
+```
+Expected: no errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/layout/MarketingLayout.tsx
+git commit -m "feat: wire landing.css into MarketingLayout with .marketing-page scope"
+```
+
+---
+
+## Task 4: Create useScrollReveal Hook
+
+**Files:**
+- Create: `src/hooks/useScrollReveal.ts`
+
+- [ ] **Step 1: Create hooks directory and hook file**
+
+```typescript
+// src/hooks/useScrollReveal.ts
+import { useEffect } from 'react';
+
+export function useScrollReveal() {
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.classList.add('visible');
+            observer.unobserve(e.target);
+          }
+        });
+      },
+      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
+    );
+
+    document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+Expected: no errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/hooks/useScrollReveal.ts
+git commit -m "feat: add useScrollReveal hook for intersection-based fade-in"
+```
+
+---
+
+## Task 5: Replace MarketingNavbar
+
+**Files:**
+- Modify: `src/components/layout/MarketingNavbar.tsx`
+
+The reference navbar has: sticky bar, SVG logo, nav links, lang switch, user avatar dropdown (auth-aware), CTA button.
+
+- [ ] **Step 1: Replace MarketingNavbar.tsx**
+
+```tsx
+import { useState, useEffect, useRef } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useLanguage } from '../../contexts/LanguageContext';
+import { useAuth } from '../../contexts/AuthContext';
+
+export default function MarketingNavbar() {
+  const { language, setLanguage } = useLanguage();
+  const { user, signOut } = useAuth();
+  const location = useLocation();
+  const isHome = location.pathname === '/';
+  const [scrolled, setScrolled] = useState(false);
+  const [activeSection, setActiveSection] = useState('');
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const userMenuRef = useRef<HTMLDivElement>(null);
+
+  // Scroll: sticky style + active nav section
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 10);
+      if (!isHome) return;
+      let current = '';
+      document.querySelectorAll('section[id]').forEach((s) => {
+        if (window.scrollY >= (s as HTMLElement).offsetTop - 100) {
+          current = s.id;
+        }
+      });
+      setActiveSection(current);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isHome]);
+
+  // Close user menu on outside click
+  useEffect(() => {
+    const handle = (e: MouseEvent) => {
+      if (userMenuRef.current && !userMenuRef.current.contains(e.target as Node)) {
+        setUserMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handle);
+    return () => document.removeEventListener('mousedown', handle);
+  }, []);
+
+  const navLinks = [
+    { href: '/', label: language === 'zh' ? '首页' : 'Home', isRouter: true },
+    { href: '/docs', label: language === 'zh' ? '文档' : 'Docs', isRouter: true },
+    { href: '/blog', label: language === 'zh' ? '博客' : 'Blog', isRouter: true },
+  ];
+
+  const anchorLinks = isHome
+    ? [{ href: '#pricing', label: language === 'zh' ? '价格' : 'Pricing' }]
+    : [];
+
+  return (
+    <nav style={{ opacity: scrolled ? 1 : undefined }}>
+      <div className="nav-inner">
+        <Link to="/" className="nav-logo">
+          <div className="logo-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+              <path d="M4 6h16M4 10h10M4 14h12M4 18h8" />
+            </svg>
+          </div>
+          <span style={{ fontFamily: "'Lora', serif" }}>TexPixel</span>
+        </Link>
+
+        <ul className="nav-links">
+          {navLinks.map((link) => (
+            <li key={link.href}>
+              <Link
+                to={link.href}
+                className={location.pathname === link.href ? 'active' : ''}
+              >
+                {link.label}
+              </Link>
+            </li>
+          ))}
+          {anchorLinks.map((link) => (
+            <li key={link.href}>
+              <a
+                href={link.href}
+                className={activeSection === link.href.slice(1) ? 'active' : ''}
+              >
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <div className="nav-right">
+          <button
+            className="lang-switch"
+            onClick={() => setLanguage(language === 'zh' ? 'en' : 'zh')}
+          >
+            {language === 'zh' ? 'EN' : '中文'}
+          </button>
+
+          {user ? (
+            <div className="nav-user" ref={userMenuRef} style={{ position: 'relative' }}>
+              <div
+                className="nav-avatar"
+                onClick={() => setUserMenuOpen((o) => !o)}
+                style={{ cursor: 'pointer' }}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                  <circle cx="12" cy="8" r="4" />
+                  <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
+                </svg>
+              </div>
+              {userMenuOpen && (
+                <div className="nav-user-menu" style={{ display: 'block' }}>
+                  <div className="nav-menu-divider" />
+                  <Link to="/app" className="nav-menu-item" onClick={() => setUserMenuOpen(false)}>
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                      <rect x="2" y="3" width="20" height="14" rx="2" />
+                      <path d="M8 21h8M12 17v4" />
+                    </svg>
+                    {language === 'zh' ? '启动应用' : 'Launch App'}
+                  </Link>
+                  <div className="nav-menu-divider" />
+                  <button
+                    className="nav-menu-item nav-menu-logout"
+                    onClick={() => { signOut(); setUserMenuOpen(false); }}
+                    style={{ background: 'none', border: 'none', width: '100%', textAlign: 'left', cursor: 'pointer' }}
+                  >
+                    {language === 'zh' ? '退出登录' : 'Sign Out'}
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="nav-login-btn">
+              <Link to="/app" className="btn-cta" style={{ display: 'inline-block', lineHeight: '52px', padding: '0 24px', textDecoration: 'none' }}>
+                {language === 'zh' ? '免费试用' : 'Try Free'}
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+Expected: no errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/layout/MarketingNavbar.tsx
+git commit -m "feat: replace MarketingNavbar with reference design"
+```
+
+---
+
+## Task 6: Replace HeroSection
+
+**Files:**
+- Modify: `src/components/home/HeroSection.tsx`
+
+The hero has: left text column, right mock window with upload zone + typing LaTeX output.
+
+- [ ] **Step 1: Replace HeroSection.tsx**
+
+```tsx
+import { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+const LATEX_LINES = [
+  '<span class="code-kw">\\frac</span>{-b \\pm <span class="code-kw">\\sqrt</span>{b² - 4ac}}{2a}',
+  '<span class="code-kw">\\int</span>_0^1 x^2\\,dx',
+  '<span class="code-kw">\\sum</span>_{i=<span class="code-num">1</span>}^n \\frac{1}{i^2}',
+];
+
+export default function HeroSection() {
+  const { language } = useLanguage();
+  const codeRef = useRef<HTMLDivElement>(null);
+
+  // Typing cycling effect
+  useEffect(() => {
+    let idx = 0;
+    const interval = setInterval(() => {
+      idx = (idx + 1) % LATEX_LINES.length;
+      if (codeRef.current) {
+        codeRef.current.innerHTML = LATEX_LINES[idx] + '<span class="cursor-blink"></span>';
+      }
+    }, 3500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <section className="hero">
+      <div className="container">
+        <div className="hero-inner">
+          <div className="hero-left">
+            <h1 className="hero-title">
+              {language === 'zh' ? (
+                <>数学公式<br />秒级转换为<br /><em className="latex-word">LaTeX</em></>
+              ) : (
+                <>Math Formulas<br />Converted to<br /><em className="latex-word">LaTeX</em></>
+              )}
+            </h1>
+
+            <p className="hero-desc">
+              {language === 'zh'
+                ? 'AI 驱动的复杂数学公式识别，支持手写与论文截图，毫秒级输出 LaTeX、Markdown 与 Word 原生公式。'
+                : 'AI-powered recognition for complex math formulas. Supports handwriting and paper screenshots. Instant LaTeX, Markdown, and Word output.'}
+            </p>
+
+            <div className="hero-actions">
+              <Link to="/app" className="btn btn-primary">
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+                  <path d="M5 3l14 9-14 9V3z" />
+                </svg>
+                {language === 'zh' ? '免费试用 TexPixel' : 'Try TexPixel Free'}
+              </Link>
+              <a href="#products" className="btn btn-secondary">
+                {language === 'zh' ? '了解更多 →' : 'Learn More →'}
+              </a>
+            </div>
+
+            <div className="hero-trust">
+              <div className="trust-item">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+                  <circle cx="12" cy="12" r="10" /><path d="M12 8v4l3 3" />
+                </svg>
+                {language === 'zh' ? '秒级输出' : 'Sub-second output'}
+              </div>
+              <div className="trust-item">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                  <polyline points="14 2 14 8 20 8" />
+                </svg>
+                {language === 'zh' ? '支持 PDF · 手写 · 截图' : 'PDF · Handwriting · Screenshots'}
+              </div>
+              <div className="trust-item">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+                  <path d="M20 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" />
+                  <circle cx="12" cy="12" r="1" />
+                </svg>
+                {language === 'zh' ? '免费套餐可用' : 'Free plan available'}
+              </div>
+            </div>
+          </div>
+
+          <div className="hero-right">
+            <div className="mock-window">
+              <div className="window-topbar">
+                <div className="window-dots">
+                  <div className="window-dot wd-red" />
+                  <div className="window-dot wd-yellow" />
+                  <div className="window-dot wd-green" />
+                </div>
+                <div className="window-url">
+                  <svg className="url-lock" viewBox="0 0 12 14">
+                    <rect x="1" y="6" width="10" height="7" rx="2" />
+                    <path d="M3 6V4a3 3 0 0 1 6 0v2" fill="none" stroke="#8CC9BE" strokeWidth="1.4" />
+                  </svg>
+                  texpixel.com/app
+                </div>
+              </div>
+              <div className="window-body">
+                <div className="upload-zone">
+                  <div className="upload-icon-wrap">
+                    <svg viewBox="0 0 24 24">
+                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                      <polyline points="17 8 12 3 7 8" />
+                      <line x1="12" y1="3" x2="12" y2="15" />
+                    </svg>
+                  </div>
+                  <div className="upload-text">
+                    {language === 'zh' ? '点击、拖拽或粘贴文件开始解析' : 'Click, drag or paste a file to start'}
+                  </div>
+                  <div className="upload-sub">
+                    {language === 'zh' ? '支持 PNG · JPG · PDF · 手写截图' : 'PNG · JPG · PDF · Handwriting'}
+                  </div>
+                </div>
+
+                <div className="output-zone">
+                  <div className="output-header">
+                    <span className="output-label">LaTeX Output</span>
+                    <span className="output-badge">{language === 'zh' ? '识别完成' : 'Done'}</span>
+                  </div>
+                  <div
+                    className="output-code"
+                    ref={codeRef}
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML={{
+                      __html: LATEX_LINES[0] + '<span class="cursor-blink"></span>',
+                    }}
+                  />
+                  <div className="output-actions">
+                    <button className="output-btn output-btn-copy">
+                      {language === 'zh' ? '复制 LaTeX' : 'Copy LaTeX'}
+                    </button>
+                    <button className="output-btn output-btn-word">
+                      {language === 'zh' ? '复制到 Word' : 'Copy to Word'}
+                    </button>
+                  </div>
+                </div>
+
+                <div className="window-status">
+                  <div className="status-time">{language === 'zh' ? '识别耗时 0.38s' : 'Recognized in 0.38s'}</div>
+                  <div className="status-format">
+                    <div className="fmt-tag">LaTeX</div>
+                    <div className="fmt-tag">Markdown</div>
+                    <div className="fmt-tag">Word</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+Expected: no errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/home/HeroSection.tsx
+git commit -m "feat: replace HeroSection with reference design + typing effect"
+```
+
+---
+
+## Task 7: Create ProductSuiteSection
+
+**Files:**
+- Create: `src/components/home/ProductSuiteSection.tsx`
+
+- [ ] **Step 1: Create ProductSuiteSection.tsx**
+
+```tsx
+import { Link } from 'react-router-dom';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function ProductSuiteSection() {
+  const { language } = useLanguage();
+
+  return (
+    <section className="product-suite" id="products">
+      <div className="container">
+        <div className="section-header reveal">
+          <div className="eyebrow">Product Matrix</div>
+          <h2 className="section-title">
+            {language === 'zh' ? '覆盖所有公式工作流' : 'Built for every formula workflow'}
+          </h2>
+          <p className="section-desc">
+            {language === 'zh'
+              ? '从浏览器即取即用，到扩展一键复制，再到桌面端离线处理——一个工具，覆盖学生写作业、研究者整理文献、工程师记录推导的全部场景。'
+              : 'From instant browser use to one-click extension copy to offline desktop — one tool for students, researchers, and engineers.'}
+          </p>
+        </div>
+
+        <div className="cards-3">
+          <div className="product-card reveal reveal-delay-1">
+            <div className="card-icon icon-orange">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                <rect x="2" y="3" width="20" height="14" rx="2" />
+                <path d="M8 21h8M12 17v4" />
+              </svg>
+            </div>
+            <div className="card-title">Web App</div>
+            <div className="card-desc">
+              {language === 'zh'
+                ? '浏览器内即时识别，无需安装。上传截图或手写图片，秒级输出 LaTeX。'
+                : 'Instant recognition in browser, no install needed. Upload screenshot or handwriting, get LaTeX in seconds.'}
+            </div>
+            <Link to="/app" className="card-link">
+              {language === 'zh' ? '浏览器即时识别 →' : 'Instant formula recognition in browser →'}
+            </Link>
+          </div>
+
+          <div className="product-card reveal reveal-delay-2">
+            <div className="card-icon icon-teal">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                <polyline points="14 2 14 8 20 8" />
+                <path d="M8 13h8M8 17h5" />
+              </svg>
+            </div>
+            <div className="card-title">Extension</div>
+            <div className="card-desc">
+              {language === 'zh'
+                ? '浏览器扩展，一键将 ChatGPT、Claude 输出的公式复制为 Word 原生数学公式。'
+                : 'Browser extension — one-click copy of formulas from ChatGPT or Claude as native Word equations.'}
+            </div>
+            <a href="#" className="card-link">
+              {language === 'zh' ? '从 LLM 复制公式到 Word →' : 'Copy formulas from LLMs to Word →'}
+            </a>
+          </div>
+
+          <div className="product-card reveal reveal-delay-3">
+            <div className="card-icon icon-lavender">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                <rect x="2" y="3" width="20" height="14" rx="2" />
+                <path d="M2 8h20M8 3v5" />
+              </svg>
+            </div>
+            <div className="card-title">Desktop</div>
+            <div className="card-desc">
+              {language === 'zh'
+                ? '桌面端离线处理，适合论文批量提取与隐私保护场景，一次购买终身使用。'
+                : 'Offline desktop app for batch PDF extraction and privacy-sensitive work. One-time purchase.'}
+            </div>
+            <a href="#pricing" className="card-link">
+              {language === 'zh' ? '查看桌面版定价 →' : 'See Desktop pricing →'}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+Expected: no errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/home/ProductSuiteSection.tsx
+git commit -m "feat: add ProductSuiteSection"
+```
+
+---
+
+## Task 8: Replace FeaturesSection (Core Features)
+
+**Files:**
+- Modify: `src/components/home/FeaturesSection.tsx`
+
+- [ ] **Step 1: Replace FeaturesSection.tsx**
+
+```tsx
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function FeaturesSection() {
+  const { language } = useLanguage();
+
+  return (
+    <section className="core-features">
+      <div className="container">
+        <div className="section-header reveal">
+          <div className="eyebrow">Core Features</div>
+          <h2 className="section-title">
+            {language === 'zh'
+              ? '学生留下来的三个理由'
+              : 'Three reasons students stay with TexPixel'}
+          </h2>
+        </div>
+
+        <div className="cards-3">
+          <div className="feature-card reveal reveal-delay-1">
+            <div className="feature-mini">
+              <span className="feature-speed">⚡ t &lt; 1s</span>
+            </div>
+            <div className="card-title">{language === 'zh' ? '极速识别' : 'Sub-second Recognition'}</div>
+            <div className="card-desc">
+              {language === 'zh'
+                ? '上传截图，LaTeX 随即出现。拍下笔记，无需等待，直接复制。'
+                : 'Upload a screenshot, LaTeX appears instantly. Take a photo of your notes and copy right away.'}
+            </div>
+          </div>
+
+          <div className="feature-card reveal reveal-delay-2">
+            <div className="feature-mini" style={{ fontSize: '13px', color: 'var(--text-body)' }}>
+              <span style={{ fontFamily: "'JetBrains Mono', monospace", color: 'var(--primary)' }}>
+                \int_0^1 x^2 dx
+              </span>
+            </div>
+            <div className="card-title">{language === 'zh' ? '复杂公式支持' : 'Complex Formula Support'}</div>
+            <div className="card-desc">
+              {language === 'zh'
+                ? '矩阵、积分、求和、化学式全部支持。多行公式对齐、角标嵌套一次识别。'
+                : 'Matrices, integrals, summations, chemical formulas — all supported. Multi-line alignment and nested scripts in one pass.'}
+            </div>
+          </div>
+
+          <div className="feature-card reveal reveal-delay-3">
+            <div className="feature-mini">
+              <span style={{ fontFamily: "'JetBrains Mono', monospace", color: 'var(--text-body)', fontSize: '13px' }}>
+                \mathbf{'{A}'}<sup style={{ fontSize: '9px', color: 'var(--teal)' }}>−1</sup>b
+              </span>
+            </div>
+            <div className="card-title">{language === 'zh' ? '高准确度' : 'High Accuracy'}</div>
+            <div className="card-desc">
+              {language === 'zh'
+                ? '论文级别识别准确率。在 arXiv 截图测试集上准确率超过 95%，持续迭代提升中。'
+                : 'Publication-grade accuracy. Over 95% on arXiv screenshot benchmarks, continuously improving.'}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/home/FeaturesSection.tsx
+git commit -m "feat: replace FeaturesSection with reference core features design"
+```
+
+---
+
+## Task 9: Create ShowcaseSection
+
+**Files:**
+- Create: `src/components/home/ShowcaseSection.tsx`
+
+- [ ] **Step 1: Create ShowcaseSection.tsx**
+
+```tsx
+import { Link } from 'react-router-dom';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function ShowcaseSection() {
+  const { language } = useLanguage();
+
+  return (
+    <section className="showcase">
+      <div className="container">
+        <div className="section-header reveal">
+          <div className="eyebrow">Live Examples</div>
+          <h2 className="section-title">
+            {language === 'zh' ? '真实案例演示' : 'Try Real Examples'}
+          </h2>
+          <p className="section-desc">
+            {language === 'zh'
+              ? '看看 TexPixel 如何处理真实的论文截图与手写笔记。'
+              : 'See how TexPixel handles real paper screenshots and handwritten notes.'}
+          </p>
+        </div>
+
+        <div className="showcase-cards">
+          <div className="showcase-card reveal reveal-delay-1">
+            <div className="showcase-header">
+              <div className="showcase-tag">{language === 'zh' ? '复杂公式' : 'Complex Formula'}</div>
+              <div className="showcase-title">
+                {language === 'zh' ? '论文截图到可复制 LaTeX' : 'Paper Screenshot to Copyable LaTeX'}
+              </div>
+              <div className="showcase-sub">arXiv PDF · 0.41s</div>
+            </div>
+            <div className="showcase-body">
+              <div className="sc-input">
+                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '15px', opacity: 0.6 }}>
+                  ∑ ¹/ᵢ² · · · [{language === 'zh' ? '图片占位' : 'image placeholder'}]
+                </span>
+              </div>
+              <div className="sc-arrow">↓</div>
+              <div
+                className="sc-output"
+                dangerouslySetInnerHTML={{
+                  __html: '<span class="kw">\\sum</span>_{i=<span class="num">1</span>}^{n}<span class="kw">\\frac</span>{<span class="num">1</span>}{i^<span class="num">2</span>}',
+                }}
+              />
+            </div>
+            <div className="showcase-footer">
+              <Link to="/app" className="btn btn-secondary" style={{ height: '44px', fontSize: '14px', padding: '0 20px' }}>
+                {language === 'zh' ? '试试这个例子 →' : 'Try this example →'}
+              </Link>
+            </div>
+          </div>
+
+          <div className="showcase-card reveal reveal-delay-2">
+            <div className="showcase-header">
+              <div className="showcase-tag" style={{ background: 'rgba(140,201,190,0.15)', color: 'var(--teal)' }}>
+                {language === 'zh' ? '手写公式' : 'Handwritten Formula'}
+              </div>
+              <div className="showcase-title">
+                {language === 'zh' ? '课堂笔记到标准表达式' : 'Classroom Notes to Standard Expression'}
+              </div>
+              <div className="showcase-sub">{language === 'zh' ? '手机拍摄笔记 · 0.38s' : 'Phone photo of notes · 0.38s'}</div>
+            </div>
+            <div className="showcase-body">
+              <div className="sc-input">
+                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '15px', opacity: 0.6 }}>
+                  lim sin(x)/x [{language === 'zh' ? '手写' : 'handwritten'}]
+                </span>
+              </div>
+              <div className="sc-arrow">↓</div>
+              <div
+                className="sc-output"
+                dangerouslySetInnerHTML={{
+                  __html: '<span class="kw">\\lim</span>_{x<span class="br">\\to</span> <span class="num">0</span>}<span class="kw">\\frac</span>{<span class="kw">\\sin</span> x}{x}',
+                }}
+              />
+            </div>
+            <div className="showcase-footer">
+              <Link to="/app" className="btn btn-secondary" style={{ height: '44px', fontSize: '14px', padding: '0 20px' }}>
+                {language === 'zh' ? '试试这个例子 →' : 'Try this example →'}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/home/ShowcaseSection.tsx
+git commit -m "feat: add ShowcaseSection with formula examples"
+```
+
+---
+
+## Task 10: Create TestimonialsSection (Carousel)
+
+**Files:**
+- Create: `src/components/home/TestimonialsSection.tsx`
+
+- [ ] **Step 1: Create TestimonialsSection.tsx**
+
+6 testimonials, 3 visible at a time = 4 pages. Carousel uses CSS `transform: translateX` on a flex track.
+
+```tsx
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+const TESTIMONIALS = [
+  {
+    quote: '写论文的时候截图粘进去，LaTeX 就出来了。以前每个公式都要手敲，现在一个截图解决，省了我大概 40% 的时间。',
+    name: '林同学',
+    role: '数学系研究生 · 北京大学',
+    avatarBg: 'var(--teal)',
+    avatarColor: '#1a5c54',
+    avatarLetter: '林',
+    stars: '★★★★★',
+  },
+  {
+    quote: '手写推导拍一张，马上就是干净的 LaTeX。对我这种每天要整理大量笔记的人来说，真的是刚需级别的工具。',
+    name: '田晓雯',
+    role: '物理学博士候选人 · 清华大学',
+    avatarBg: 'var(--lavender)',
+    avatarColor: '#3d3870',
+    avatarLetter: '田',
+    stars: '★★★★★',
+  },
+  {
+    quote: "I use it every day for my thesis. The accuracy on complex integrals and matrix expressions is surprisingly good — way better than anything I've tried before.",
+    name: 'Sarah M.',
+    role: 'Applied Math PhD · MIT',
+    avatarBg: 'var(--rose)',
+    avatarColor: '#7a2e1e',
+    avatarLetter: 'S',
+    stars: '★★★★★',
+  },
+  {
+    quote: 'Desktop 版的离线功能对我来说很重要，论文数据不想上传到云端。买断价格也合理，不用每个月担心订阅。',
+    name: '陈博士',
+    role: '生物信息学研究员 · 中科院',
+    avatarBg: 'var(--gold)',
+    avatarColor: '#6f5800',
+    avatarLetter: '陈',
+    stars: '★★★★★',
+  },
+  {
+    quote: 'The browser extension is a game changer. I copy equations from Claude or ChatGPT straight into Word as native math — no more reformatting nightmares.',
+    name: 'Alex K.',
+    role: 'Engineering Student · TU Berlin',
+    avatarBg: '#8CB4C9',
+    avatarColor: '#1a3d52',
+    avatarLetter: 'A',
+    stars: '★★★★★',
+  },
+  {
+    quote: '教材扫描件里的公式以前完全没法用，现在截图一框就搞定。连化学方程式都能识别，超出我的预期。',
+    name: '王梓涵',
+    role: '化学工程本科 · 浙江大学',
+    avatarBg: '#C9A88C',
+    avatarColor: '#4a2e14',
+    avatarLetter: '王',
+    stars: '★★★★☆',
+  },
+];
+
+const VISIBLE = 3;
+const TOTAL = TESTIMONIALS.length;
+const PAGES = TOTAL - VISIBLE + 1; // 4
+
+export default function TestimonialsSection() {
+  const { language } = useLanguage();
+  const [currentPage, setCurrentPage] = useState(0);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const autoTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const goTo = useCallback((idx: number) => {
+    const clamped = Math.max(0, Math.min(idx, PAGES - 1));
+    setCurrentPage(clamped);
+    if (trackRef.current) {
+      const cardW = trackRef.current.parentElement!.offsetWidth;
+      const gap = 20;
+      const singleW = (cardW - gap * (VISIBLE - 1)) / VISIBLE;
+      const offset = clamped * (singleW + gap);
+      trackRef.current.style.transform = `translateX(-${offset}px)`;
+    }
+  }, []);
+
+  const resetAuto = useCallback(() => {
+    if (autoTimerRef.current) clearInterval(autoTimerRef.current);
+    autoTimerRef.current = setInterval(() => {
+      setCurrentPage((prev) => {
+        const next = (prev + 1) % PAGES;
+        goTo(next);
+        return next;
+      });
+    }, 5000);
+  }, [goTo]);
+
+  useEffect(() => {
+    resetAuto();
+    return () => { if (autoTimerRef.current) clearInterval(autoTimerRef.current); };
+  }, [resetAuto]);
+
+  useEffect(() => {
+    const handleResize = () => goTo(currentPage);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [currentPage, goTo]);
+
+  const handleGoTo = (idx: number) => {
+    goTo(idx);
+    resetAuto();
+  };
+
+  return (
+    <section className="user-love">
+      <div className="container">
+        <div className="section-header reveal">
+          <div className="eyebrow">User Love</div>
+          <h2 className="section-title">
+            {language === 'zh' ? '全球学生都在用' : 'Loved by students worldwide'}
+          </h2>
+          <p className="section-desc">
+            {language === 'zh' ? '来自真实用户的反馈。' : 'Feedback from real users.'}
+          </p>
+        </div>
+
+        <div className="testimonial-wrap reveal">
+          <div
+            className="testimonial-track"
+            ref={trackRef}
+            style={{ transition: 'transform 0.4s ease' }}
+          >
+            {TESTIMONIALS.map((t, i) => (
+              <div key={i} className="testimonial-card">
+                <div className="t-quote">"</div>
+                <p className="t-body">{t.quote}</p>
+                <div className="t-footer">
+                  <div
+                    className="t-avatar"
+                    style={{ background: t.avatarBg, color: t.avatarColor }}
+                  >
+                    {t.avatarLetter}
+                  </div>
+                  <div>
+                    <div className="t-name">{t.name}</div>
+                    <div className="t-role">{t.role}</div>
+                  </div>
+                  <div className="t-stars">{t.stars}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="testimonial-nav">
+            <button
+              className="t-nav-btn"
+              onClick={() => handleGoTo(currentPage - 1)}
+              aria-label={language === 'zh' ? '上一条' : 'Previous'}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M15 18l-6-6 6-6" />
+              </svg>
+            </button>
+            <div className="t-dots">
+              {Array.from({ length: PAGES }).map((_, i) => (
+                <div
+                  key={i}
+                  className={`t-dot${i === currentPage ? ' active' : ''}`}
+                  onClick={() => handleGoTo(i)}
+                />
+              ))}
+            </div>
+            <button
+              className="t-nav-btn"
+              onClick={() => handleGoTo(currentPage + 1)}
+              aria-label={language === 'zh' ? '下一条' : 'Next'}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M9 18l6-6-6-6" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+Expected: no errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/home/TestimonialsSection.tsx
+git commit -m "feat: add TestimonialsSection with auto-advancing carousel"
+```
+
+---
+
+## Task 11: Replace PricingSection
+
+**Files:**
+- Modify: `src/components/home/PricingSection.tsx`
+
+- [ ] **Step 1: Replace PricingSection.tsx**
+
+```tsx
+import { Link } from 'react-router-dom';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function PricingSection() {
+  const { language } = useLanguage();
+  const zh = language === 'zh';
+
+  return (
+    <section className="pricing" id="pricing">
+      <div className="container">
+        <div className="section-header reveal">
+          <div className="eyebrow">Pricing</div>
+          <h2 className="section-title">
+            {zh ? '选择适合你的方案' : 'Choose the plan that fits your workflow'}
+          </h2>
+          <p className="section-desc">
+            {zh ? '从免费试用到永久桌面版，按需选择，无需绑定订阅。' : 'From free trial to lifetime desktop — pick what fits, no subscription lock-in.'}
+          </p>
+        </div>
+
+        <div className="pricing-cards">
+          <div className="pricing-card reveal reveal-delay-1">
+            <div className="plan-name">Free</div>
+            <div className="plan-price">$<span style={{ fontSize: '44px', color: 'var(--text-strong)' }}>0</span></div>
+            <div className="plan-period">{zh ? '永久免费' : 'Forever free'}</div>
+            <div className="plan-desc">For first-time use and quick screenshots.</div>
+            <ul className="plan-features">
+              <li>{zh ? '每月 30 次识别' : '30 recognitions / month'}</li>
+              <li>LaTeX {zh ? '输出' : 'output'}</li>
+              <li>Web App {zh ? '访问' : 'access'}</li>
+              <li>{zh ? '基础公式支持' : 'Basic formula support'}</li>
+            </ul>
+            <Link to="/app" className="plan-btn">{zh ? '开始使用' : 'Get Started'}</Link>
+          </div>
+
+          <div className="pricing-card reveal reveal-delay-2">
+            <div className="plan-name">Monthly</div>
+            <div className="plan-price"><span>$</span>9</div>
+            <div className="plan-period">{zh ? '每月 / 随时取消' : '/month · cancel anytime'}</div>
+            <div className="plan-desc">Unlimited recognition for everyday study.</div>
+            <ul className="plan-features">
+              <li>{zh ? '无限次识别' : 'Unlimited recognitions'}</li>
+              <li>LaTeX + Markdown</li>
+              <li>{zh ? 'Word 原生公式' : 'Native Word equations'}</li>
+              <li>{zh ? '优先处理队列' : 'Priority queue'}</li>
+            </ul>
+            <Link to="/app" className="plan-btn">{zh ? '开始使用' : 'Get Started'}</Link>
+          </div>
+
+          <div className="pricing-card reveal reveal-delay-3">
+            <div className="plan-name">Quarterly</div>
+            <div className="plan-price"><span>$</span>24</div>
+            <div className="plan-period">{zh ? '每季 · 省 $3/月' : '/quarter · save $3/mo'}</div>
+            <div className="plan-desc">Best value for semester-long heavy usage.</div>
+            <ul className="plan-features">
+              <li>{zh ? '无限次识别' : 'Unlimited recognitions'}</li>
+              <li>{zh ? '全格式输出' : 'All output formats'}</li>
+              <li>{zh ? '批量 PDF 提取' : 'Batch PDF extraction'}</li>
+              <li>API {zh ? '访问（Beta）' : 'access (Beta)'}</li>
+            </ul>
+            <Link to="/app" className="plan-btn">{zh ? '开始使用' : 'Get Started'}</Link>
+          </div>
+
+          <div className="pricing-card featured reveal">
+            <div className="featured-badge">{zh ? '永久版' : 'Lifetime'}</div>
+            <div className="plan-name">Desktop</div>
+            <div className="plan-price"><span>$</span>79</div>
+            <div className="plan-period">{zh ? '一次购买 · 终身使用' : 'one-time · lifetime access'}</div>
+            <div className="plan-desc">Lifetime access for offline and sensitive files.</div>
+            <ul className="plan-features">
+              <li>{zh ? '完全离线运行' : 'Fully offline'}</li>
+              <li>{zh ? '无限次识别' : 'Unlimited recognitions'}</li>
+              <li>{zh ? '批量 PDF 处理' : 'Batch PDF processing'}</li>
+              <li>{zh ? '本地隐私保护' : 'Local privacy'}</li>
+              <li>{zh ? '终身免费更新' : 'Lifetime free updates'}</li>
+            </ul>
+            <Link to="/app" className="plan-btn featured-btn">{zh ? '购买桌面版' : 'Buy Desktop'}</Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/home/PricingSection.tsx
+git commit -m "feat: replace PricingSection with reference 4-tier pricing design"
+```
+
+---
+
+## Task 12: Create DocsSeoSection
+
+**Files:**
+- Create: `src/components/home/DocsSeoSection.tsx`
+
+- [ ] **Step 1: Create DocsSeoSection.tsx**
+
+```tsx
+import { Link } from 'react-router-dom';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+const GUIDES = [
+  {
+    icon: <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>,
+    icon2: <polyline points="14 2 14 8 20 8"/>,
+    titleEn: 'How to convert image to LaTeX',
+    titleZh: '图片转 LaTeX 完整指南',
+    metaEn: '5 min read · Most popular',
+    metaZh: '5 分钟 · 最受欢迎',
+  },
+  {
+    icon: <><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 9h8M8 12h6M8 15h4"/></>,
+    titleEn: 'Copy formula to Word — native equation format',
+    titleZh: '复制公式到 Word — 原生公式格式',
+    metaEn: '4 min read · Extension users',
+    metaZh: '4 分钟 · 扩展用户',
+  },
+  {
+    icon: <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></>,
+    titleEn: 'OCR math formula guide — accuracy tips',
+    titleZh: 'OCR 数学公式指南 — 提高准确度',
+    metaEn: '6 min read · Power users',
+    metaZh: '6 分钟 · 进阶用户',
+  },
+  {
+    icon: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M10 12l2 2 4-4"/></>,
+    titleEn: 'PDF formula extraction — batch workflow',
+    titleZh: 'PDF 公式批量提取工作流',
+    metaEn: '8 min read · Desktop users',
+    metaZh: '8 分钟 · 桌面版用户',
+  },
+];
+
+export default function DocsSeoSection() {
+  const { language } = useLanguage();
+  const zh = language === 'zh';
+
+  return (
+    <section className="docs-seo" id="docs">
+      <div className="container">
+        <div className="section-header reveal">
+          <div className="eyebrow">Guides</div>
+          <h2 className="section-title">Image to LaTeX Guides</h2>
+          <p className="section-desc">
+            {zh
+              ? '为学生、研究者和数学写作者准备的一步步工作流指南。'
+              : 'Step-by-step workflows for students, researchers, and anyone writing math.'}
+          </p>
+        </div>
+
+        <div className="doc-cards reveal">
+          {GUIDES.map((g, i) => (
+            <Link key={i} to="/docs" className="doc-card">
+              <div className="doc-card-left">
+                <div className="doc-icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                    {g.icon}
+                    {g.icon2}
+                  </svg>
+                </div>
+                <div>
+                  <div className="doc-title">{zh ? g.titleZh : g.titleEn}</div>
+                  <div className="doc-meta">{zh ? g.metaZh : g.metaEn}</div>
+                </div>
+              </div>
+              <div className="doc-read">{zh ? '阅读指南 →' : 'Read Guide →'}</div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/home/DocsSeoSection.tsx
+git commit -m "feat: add DocsSeoSection with guide cards"
+```
+
+---
+
+## Task 13: Replace Footer
+
+**Files:**
+- Modify: `src/components/layout/Footer.tsx`
+
+- [ ] **Step 1: Replace Footer.tsx**
+
+```tsx
+import { Link } from 'react-router-dom';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function Footer() {
+  const { language } = useLanguage();
+  const zh = language === 'zh';
+
+  return (
+    <footer>
+      <div className="container">
+        <div className="footer-grid">
+          <div className="footer-brand">
+            <Link to="/" className="footer-logo">
+              <div className="logo-icon" style={{ width: '32px', height: '32px', borderRadius: '9px' }}>
+                <svg viewBox="0 0 24 24" style={{ width: '18px', height: '18px' }} fill="none" stroke="white" strokeWidth="2">
+                  <path d="M4 6h16M4 10h10M4 14h12M4 18h8" />
+                </svg>
+              </div>
+              <span>TexPixel</span>
+            </Link>
+            <p className="footer-tagline">
+              {zh ? '为学生、研究者和数学写作者而设计。' : 'Designed for students, researchers, and anyone writing math.'}
+            </p>
+          </div>
+
+          <div>
+            <div className="footer-col-title">Product</div>
+            <ul className="footer-links">
+              <li><Link to="/app">Web App</Link></li>
+              <li><a href="#">Extension</a></li>
+              <li><a href="#pricing">{zh ? '桌面版' : 'Desktop'}</a></li>
+              <li><a href="#">API (Beta)</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <div className="footer-col-title">Docs</div>
+            <ul className="footer-links">
+              <li><Link to="/docs">Image to LaTeX</Link></li>
+              <li><Link to="/docs">PDF to Markdown</Link></li>
+              <li><Link to="/docs">{zh ? '手写识别' : 'Handwritten OCR'}</Link></li>
+              <li><Link to="/docs">Word Equations</Link></li>
+            </ul>
+          </div>
+
+          <div>
+            <div className="footer-col-title">{zh ? '公司' : 'Company'}</div>
+            <ul className="footer-links">
+              <li><a href="#">{zh ? '关于我们' : 'About'}</a></li>
+              <li><a href="#pricing">{zh ? '价格' : 'Pricing'}</a></li>
+              <li><Link to="/blog">{zh ? '博客' : 'Blog'}</Link></li>
+              <li><a href="#">{zh ? '联系我们' : 'Contact'}</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <div className="footer-col-title">{zh ? '法律' : 'Legal'}</div>
+            <ul className="footer-links">
+              <li><a href="#">{zh ? '服务条款' : 'Terms of Service'}</a></li>
+              <li><a href="#">{zh ? '隐私政策' : 'Privacy Policy'}</a></li>
+              <li><a href="#">{zh ? 'Cookie 政策' : 'Cookie Policy'}</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="footer-bottom">
+          <div className="footer-copy">© 2026 TexPixel. All rights reserved.</div>
+          <div className="footer-made">
+            Made with{' '}
+            <svg viewBox="0 0 24 24" style={{ display: 'inline', width: '14px', height: '14px', verticalAlign: 'middle', fill: 'var(--rose)' }}>
+              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+            </svg>
+            {' '}{zh ? '为全球学生而作' : 'for students worldwide'}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+```bash
+npm run typecheck
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/layout/Footer.tsx
+git commit -m "feat: replace Footer with reference design"
+```
+
+---
+
+## Task 14: Update HomePage + Delete Old Components + Clean Translations
+
+**Files:**
+- Modify: `src/pages/HomePage.tsx`
+- Modify: `src/lib/translations.ts`
+- Delete: `src/components/home/HowItWorksSection.tsx`
+- Delete: `src/components/home/ContactSection.tsx`
+
+- [ ] **Step 1: Replace HomePage.tsx**
+
+```tsx
+import SEOHead from '../components/seo/SEOHead';
+import HeroSection from '../components/home/HeroSection';
+import ProductSuiteSection from '../components/home/ProductSuiteSection';
+import FeaturesSection from '../components/home/FeaturesSection';
+import ShowcaseSection from '../components/home/ShowcaseSection';
+import TestimonialsSection from '../components/home/TestimonialsSection';
+import PricingSection from '../components/home/PricingSection';
+import DocsSeoSection from '../components/home/DocsSeoSection';
+import { useScrollReveal } from '../hooks/useScrollReveal';
+import { useLanguage } from '../contexts/LanguageContext';
+
+export default function HomePage() {
+  const { t } = useLanguage();
+  useScrollReveal();
+
+  return (
+    <>
+      <SEOHead
+        title="TexPixel - AI Math Formula Recognition | LaTeX, MathML OCR Tool"
+        description={t.marketing.hero.subtitle}
+        path="/"
+      />
+      <HeroSection />
+      <div className="section-divider" />
+      <ProductSuiteSection />
+      <FeaturesSection />
+      <ShowcaseSection />
+      <div className="section-divider" />
+      <TestimonialsSection />
+      <div className="section-divider" />
+      <PricingSection />
+      <div className="section-divider" />
+      <DocsSeoSection />
+    </>
+  );
+}
+```
+
+- [ ] **Step 2: Remove dead `contact` keys from translations.ts**
+
+In `src/lib/translations.ts`:
+- Remove `contact: 'Contact',` from the `en.marketing.nav` block (around line 115)
+- Remove `contact: '联系我们',` from the `zh.marketing.nav` block (around line 297)
+- Remove the entire `en.marketing.contact` block (the object starting with `contact: { title:` around line 165–175)
+- Remove the entire `zh.marketing.contact` block (equivalent block in the zh section)
+
+- [ ] **Step 3: Delete old components**
+
+```bash
+rm src/components/home/HowItWorksSection.tsx
+rm src/components/home/ContactSection.tsx
+```
+
+- [ ] **Step 4: Verify typecheck and build**
+
+```bash
+npm run typecheck && npm run build
+```
+Expected: no TypeScript errors, build succeeds
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/pages/HomePage.tsx src/lib/translations.ts
+git rm src/components/home/HowItWorksSection.tsx src/components/home/ContactSection.tsx
+git commit -m "feat: wire all landing sections in HomePage, remove obsolete components"
+```
+
+---
+
+## Task 15: Verify CSS Scoping Does Not Break Workspace
+
+**Files:**
+- No code changes — verification only
+
+- [ ] **Step 1: Run the dev server and navigate to /app**
+
+```bash
+npm run dev
+```
+
+Open `http://localhost:5173/app` — verify:
+- The workspace `AppLayout` and `WorkspacePage` render correctly
+- No `.marketing-page` CSS rules leak (no warm beige background, no grid overlay on the workspace)
+
+- [ ] **Step 2: Navigate to / (home)**
+
+Open `http://localhost:5173/` — verify:
+- Background matches reference (`#FFFBF7` warm cream with grid pattern)
+- All three glow blobs visible as ambient background
+- Navbar, Hero, all sections, and Footer match the reference HTML visually
+
+- [ ] **Step 3: Run full build**
+
+```bash
+npm run build
+```
+Expected: success with no errors
+
+- [ ] **Step 4: Final commit**
+
+```bash
+git add -A
+git commit -m "chore: final verification — landing refactor complete"
+```
diff --git a/docs/superpowers/specs/2026-03-26-landing-refactor-design.md b/docs/superpowers/specs/2026-03-26-landing-refactor-design.md
new file mode 100644
index 0000000..ce1d28b
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-26-landing-refactor-design.md
@@ -0,0 +1,129 @@
+# Landing Page Refactor — Design Spec
+**Date:** 2026-03-26
+**Status:** Approved
+
+## Goal
+Replace all existing marketing home components with content and styles from `texpixel-landing.html`. The UI/UX must exactly match the reference file. The home page is a marketing/broadcast page; all CTAs navigate to `/app`.
+
+---
+
+## CSS Strategy
+- Extract the full `<style>` block (lines 10–1593) from `texpixel-landing.html` into `src/styles/landing.css`.
+- **Scope all rules** under a `.marketing-page` wrapper class to prevent bleed into the `/app` workspace.
+  - Body-level rules (`body { background }`, `body::before` grid overlay) are converted to `.marketing-page` and `.marketing-page::before` respectively.
+  - `:root` CSS variable declarations are kept as-is since landing variables use different names (`--primary`, `--bg`, etc.) from existing workspace variables (`--color-primary`, `--color-bg`). No conflict — they coexist.
+- **Do NOT import in `main.tsx`** — import directly in `MarketingLayout.tsx` via `import '../styles/landing.css'` so it only applies to marketing routes.
+- `MarketingLayout.tsx` wrapper div gets `className="marketing-page"`.
+- `index.css` Tailwind layer remains untouched.
+- Add Google Fonts to `index.html` `<head>`: Lora (serif, weights 400/600/700) and JetBrains Mono (monospace, weights 400/500). DM Sans already present.
+
+---
+
+## Component Mapping
+
+| Reference section | Target file | Action |
+|---|---|---|
+| `<nav>` | `src/components/layout/MarketingNavbar.tsx` | Replace |
+| `.hero` | `src/components/home/HeroSection.tsx` | Replace |
+| `.product-suite` | `src/components/home/ProductSuiteSection.tsx` | New |
+| `.core-features` | `src/components/home/FeaturesSection.tsx` | Replace |
+| `.showcase` | `src/components/home/ShowcaseSection.tsx` | New |
+| `.user-love` | `src/components/home/TestimonialsSection.tsx` | New |
+| `.pricing` | `src/components/home/PricingSection.tsx` | Replace |
+| `.docs-seo` | `src/components/home/DocsSeoSection.tsx` | New |
+| `<footer>` | `src/components/layout/Footer.tsx` | Replace |
+
+### Delete (no reference equivalent)
+- `src/components/home/HowItWorksSection.tsx`
+- `src/components/home/ContactSection.tsx`
+
+---
+
+## MarketingLayout.tsx
+- Wrap outlet in `<div className="marketing-page">` — applies scoped landing CSS
+- Render three `.glow-blob` divs (`.glow-blob-1`, `.glow-blob-2`, `.glow-blob-3`) as direct children of the `.marketing-page` wrapper — these are `position: fixed` ambient background elements visible across all marketing pages.
+
+---
+
+## HomePage.tsx
+Update to render sections in order:
+```
+HeroSection
+<div className="section-divider" />
+ProductSuiteSection
+FeaturesSection
+ShowcaseSection
+<div className="section-divider" />
+TestimonialsSection
+<div className="section-divider" />
+PricingSection
+<div className="section-divider" />
+DocsSeoSection
+```
+Section dividers are plain `<div className="section-divider" />` JSX inlined in `HomePage.tsx` — no abstraction needed.
+
+---
+
+## Navbar (MarketingNavbar.tsx)
+- Sticky, height 72px, backdrop blur on scroll (existing scroll state logic kept)
+- Logo: SVG icon (lines symbol) + "TexPixel" text — **remove `font-display` Tailwind class** from logo `<span>`, replace with `style={{ fontFamily: "'Lora', serif" }}` to avoid Plus Jakarta Sans conflict
+- Nav links: Home `/`, Docs `/docs`, Blog `/blog`, Pricing `#pricing` (anchor on home only), **no Contact link** — also remove the existing `anchorLinks` `#contact` entry
+- Right side:
+  - Lang switch button (existing `useLanguage` toggle)
+  - User avatar/menu using `const { user, signOut } = useAuth()` — show avatar dropdown when `user !== null`; show "登录/Login" CTA button when `user === null`
+  - Avatar dropdown items: "启动应用" → `/app`, then logout (calls `signOut()`). **No profile settings link** (route does not exist — omitted)
+  - "Try Free" CTA button → `/app`
+- i18n: `useLanguage` for all labels
+- Remove unused `t.marketing.nav.contact` references from this component
+
+---
+
+## JS Behaviors → React hooks/useEffect
+
+### Scroll Reveal Hook
+- **Create `src/hooks/` directory** (does not exist yet)
+- Create `src/hooks/useScrollReveal.ts` — sets up a single `IntersectionObserver` targeting all `.reveal` elements, adds `.visible` class on intersection
+- Called once in `HomePage.tsx` via `useScrollReveal()`
+
+### Nav Active on Scroll
+- `useEffect` in `MarketingNavbar.tsx` — watches `window.scroll`, adds `.active` class to nav link matching current section `id`
+
+### Testimonial Carousel (TestimonialsSection.tsx)
+- React state: `currentPage` (0-indexed), 6 cards, 3 visible, 4 pages
+- `useEffect` auto-advances every 5s, resets on manual navigation
+- Prev/Next buttons + rendered dots
+- Window resize recalcs slide offset
+
+### Typing Effect (HeroSection.tsx)
+- `useRef` on `.output-code` element
+- `useEffect` cycles through 3 LaTeX strings every 3500ms via `innerHTML` + cursor span
+
+---
+
+## CTA Links
+- "Try TexPixel", "Try Free", "Get Started" (Free/Monthly/Quarterly plans) → `<Link to="/app">`
+- "Buy Desktop" → `<Link to="/app">` (placeholder, no separate purchase flow)
+- Doc card links → `/docs`
+- Footer blog link → `/blog`
+- Pricing anchor `#pricing` → `<a href="#pricing">`
+
+---
+
+## Content / i18n
+- All text from the reference HTML is hardcoded in components (Chinese/English bilingual where reference already has it)
+- Existing `useLanguage` / `t` translations are used where keys already exist
+- New section text is **hardcoded** (not added to `translations.ts`) — the reference HTML content is the source of truth; full i18n for new sections is out of scope for this refactor
+
+---
+
+## Cleanup
+- Remove `contact` key from `marketing.nav` in `src/lib/translations.ts` (both `en` and `zh` blocks) — becomes dead code after ContactSection and `#contact` link are removed.
+
+---
+
+## What Does NOT Change
+- `src/App.tsx`, routing (`AppRouter.tsx`), auth system, workspace (`WorkspacePage`)
+- `index.css` Tailwind layer
+- Docs/Blog pages
+- `SEOHead` component usage in `HomePage.tsx`
+- `tailwind.config.js`
diff --git a/src/components/home/DocsSeoSection.tsx b/src/components/home/DocsSeoSection.tsx
index 344b428..86477ba 100644
--- a/src/components/home/DocsSeoSection.tsx
+++ b/src/components/home/DocsSeoSection.tsx
@@ -3,6 +3,7 @@ import { useLanguage } from '../../contexts/LanguageContext';
 
 const GUIDES = [
   {
+    slug: 'image-to-latex',
     svgPaths: (
       <>
         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@@ -15,6 +16,7 @@ const GUIDES = [
     metaZh: '5 分钟 · 最受欢迎',
   },
   {
+    slug: 'copy-to-word',
     svgPaths: (
       <>
         <rect x="4" y="4" width="16" height="16" rx="2"/>
@@ -27,6 +29,7 @@ const GUIDES = [
     metaZh: '4 分钟 · 扩展用户',
   },
   {
+    slug: 'ocr-accuracy',
     svgPaths: (
       <>
         <circle cx="11" cy="11" r="8"/>
@@ -39,6 +42,7 @@ const GUIDES = [
     metaZh: '6 分钟 · 进阶用户',
   },
   {
+    slug: 'pdf-extraction',
     svgPaths: (
       <>
         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@@ -71,7 +75,7 @@ export default function DocsSeoSection() {
 
         <div className="doc-cards reveal">
           {GUIDES.map((g, i) => (
-            <Link key={i} to="/docs" className="doc-card">
+            <Link key={i} to={`/docs/${g.slug}`} className="doc-card">
               <div className="doc-card-left">
                 <div className="doc-icon">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
diff --git a/src/pages/DocDetailPage.tsx b/src/pages/DocDetailPage.tsx
index 1f91d17..8b1b79d 100644
--- a/src/pages/DocDetailPage.tsx
+++ b/src/pages/DocDetailPage.tsx
@@ -1,35 +1,78 @@
 import { useEffect, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { ArrowLeft } from 'lucide-react';
 import SEOHead from '../components/seo/SEOHead';
 import { useLanguage } from '../contexts/LanguageContext';
 import { loadContent, type ContentItem } from '../lib/content';
 
+function estimateReadTime(html: string): number {
+  const text = html.replace(/<[^>]+>/g, '');
+  const words = text.split(/\s+/).filter(Boolean).length;
+  return Math.max(2, Math.round(words / 200));
+}
+
+function formatDate(dateStr: string, lang: string): string {
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return dateStr;
+  return d.toLocaleDateString(lang === 'zh' ? 'zh-CN' : 'en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
 export default function DocDetailPage() {
   const { slug } = useParams<{ slug: string }>();
   const { language } = useLanguage();
   const [content, setContent] = useState<ContentItem | null>(null);
+  const [notFound, setNotFound] = useState(false);
 
   useEffect(() => {
+    setContent(null);
+    setNotFound(false);
     if (slug) {
       loadContent('docs', language, slug)
         .then(setContent)
-        .catch(() => setContent(null));
+        .catch(() => setNotFound(true));
     }
   }, [slug, language]);
 
-  if (!content) {
+  const zh = language === 'zh';
+
+  if (notFound) {
     return (
-      <div className="max-w-3xl mx-auto py-20 px-6">
-        <div className="animate-pulse space-y-4">
-          <div className="h-4 bg-cream-200 rounded w-24" />
-          <div className="h-8 bg-cream-200 rounded w-3/4" />
-          <div className="h-4 bg-cream-200 rounded w-full" />
+      <div className="docs-detail">
+        <Link to="/docs" className="docs-back-link">
+          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" /></svg>
+          {zh ? '所有文档' : 'All docs'}
+        </Link>
+        <div style={{ textAlign: 'center', padding: '64px 0', color: 'var(--text-muted)' }}>
+          <p style={{ fontSize: '18px', marginBottom: '8px' }}>
+            {zh ? '文档未找到' : 'Doc not found'}
+          </p>
+          <Link to="/docs" style={{ color: 'var(--primary)', fontSize: '14px' }}>
+            {zh ? '返回文档中心 →' : 'Back to docs →'}
+          </Link>
         </div>
       </div>
     );
   }
 
+  if (!content) {
+    return (
+      <div className="docs-skeleton-wrap">
+        <div className="skeleton-line" style={{ width: '80px', height: '14px', marginBottom: '44px' }} />
+        <div className="skeleton-line" style={{ width: '60%', height: '44px', marginBottom: '16px' }} />
+        <div className="skeleton-line" style={{ width: '40%', height: '16px', marginBottom: '48px' }} />
+        <div className="skeleton-line" style={{ width: '100%', height: '16px' }} />
+        <div className="skeleton-line" style={{ width: '92%', height: '16px' }} />
+        <div className="skeleton-line" style={{ width: '96%', height: '16px' }} />
+        <div className="skeleton-line" style={{ width: '80%', height: '16px' }} />
+      </div>
+    );
+  }
+
+  const readTime = estimateReadTime(content.html);
+
   return (
     <>
       <SEOHead
@@ -37,29 +80,54 @@ export default function DocDetailPage() {
         description={content.meta.description}
         path={`/docs/${slug}`}
       />
-      <div className="max-w-3xl mx-auto py-16 lg:py-20 px-6">
-        {/* Back link */}
-        <Link
-          to="/docs"
-          className="inline-flex items-center gap-1.5 text-sm text-ink-muted hover:text-ink transition-colors mb-8"
-        >
-          <ArrowLeft size={14} />
-          {language === 'en' ? 'All docs' : '所有文档'}
+
+      <div className="docs-detail">
+        {/* Back */}
+        <Link to="/docs" className="docs-back-link">
+          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" /></svg>
+          {zh ? '所有文档' : 'All docs'}
         </Link>
 
-        {/* Doc body */}
-        <article
-          className="prose prose-lg prose-warm max-w-none
-            prose-headings:font-display prose-headings:tracking-tight
-            prose-h1:text-3xl prose-h1:font-bold
-            prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-10
-            prose-a:text-sage-700 prose-a:no-underline hover:prose-a:underline
-            prose-code:text-sage-700 prose-code:bg-sage-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-sm
-            prose-pre:bg-ink prose-pre:text-cream-100 prose-pre:rounded-xl
-            prose-img:rounded-xl
-            prose-blockquote:border-sage-300 prose-blockquote:bg-sage-50/30 prose-blockquote:rounded-r-xl prose-blockquote:py-1"
+        {/* Article header */}
+        <div className="docs-article-header">
+          {content.meta.tags.length > 0 && (
+            <div className="docs-article-tags">
+              {content.meta.tags.map(tag => (
+                <span key={tag} className="docs-tag">{tag}</span>
+              ))}
+            </div>
+          )}
+          <h1 className="docs-article-h1">{content.meta.title}</h1>
+          <div className="docs-meta-row">
+            <span>{formatDate(content.meta.date, language)}</span>
+            <span className="docs-meta-sep">·</span>
+            <span>{readTime} {zh ? '分钟阅读' : 'min read'}</span>
+          </div>
+        </div>
+
+        {/* Article body */}
+        <div
+          className="docs-prose"
           dangerouslySetInnerHTML={{ __html: content.html }}
         />
+
+        {/* CTA */}
+        <div className="docs-cta-box">
+          <div className="docs-cta-title">
+            {zh ? '准备好试试了吗？' : 'Ready to try it yourself?'}
+          </div>
+          <p className="docs-cta-desc">
+            {zh
+              ? '上传一张公式图片，秒级获得 LaTeX 输出——无需注册。'
+              : 'Upload a formula image and get LaTeX output in under a second — no sign-up needed.'}
+          </p>
+          <Link to="/app" className="btn btn-primary" style={{ display: 'inline-flex' }}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+              <path d="M5 3l14 9-14 9V3z" />
+            </svg>
+            {zh ? '免费试用 TexPixel' : 'Try TexPixel Free'}
+          </Link>
+        </div>
       </div>
     </>
   );
diff --git a/src/pages/DocsListPage.tsx b/src/pages/DocsListPage.tsx
index e6d2f9a..f722a15 100644
--- a/src/pages/DocsListPage.tsx
+++ b/src/pages/DocsListPage.tsx
@@ -1,10 +1,69 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { ArrowRight, BookOpen, FileText } from 'lucide-react';
 import SEOHead from '../components/seo/SEOHead';
 import { useLanguage } from '../contexts/LanguageContext';
 import { loadManifest, type ContentMeta } from '../lib/content';
 
+function estimateReadTime(desc: string): number {
+  return Math.max(2, Math.round(desc.split(/\s+/).length / 3));
+}
+
+const DOC_ICONS: Record<string, JSX.Element> = {
+  'getting-started': (
+    <>
+      <path d="M5 3l14 9-14 9V3z" />
+    </>
+  ),
+  'image-to-latex': (
+    <>
+      <rect x="3" y="3" width="18" height="14" rx="2" />
+      <path d="M3 9h18" />
+      <path d="M9 21l3-3 3 3" />
+    </>
+  ),
+  'supported-formats': (
+    <>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <path d="M8 13h8M8 17h5" />
+    </>
+  ),
+  'copy-to-word': (
+    <>
+      <rect x="4" y="4" width="16" height="16" rx="2" />
+      <path d="M8 9h8M8 12h6M8 15h4" />
+    </>
+  ),
+  'ocr-accuracy': (
+    <>
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.35-4.35" />
+    </>
+  ),
+  'pdf-extraction': (
+    <>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <path d="M14 2v6h6M10 12l2 2 4-4" />
+    </>
+  ),
+  faq: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </>
+  ),
+};
+
+function DocIcon({ slug }: { slug: string }) {
+  const paths = DOC_ICONS[slug] ?? DOC_ICONS['supported-formats'];
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+      {paths}
+    </svg>
+  );
+}
+
 export default function DocsListPage() {
   const { language } = useLanguage();
   const [docs, setDocs] = useState<ContentMeta[]>([]);
@@ -15,57 +74,63 @@ export default function DocsListPage() {
     });
   }, [language]);
 
+  const zh = language === 'zh';
+
   return (
     <>
-      <SEOHead title="Documentation" description="TexPixel documentation and guides" path="/docs" />
+      <SEOHead
+        title={zh ? 'TexPixel 文档中心' : 'TexPixel Documentation'}
+        description={zh ? '公式识别入门指南、格式说明与常见问题。' : 'Guides, format references, and answers for getting the most out of TexPixel.'}
+        path="/docs"
+      />
 
-      <div className="max-w-5xl mx-auto py-16 lg:py-20 px-6">
+      <div className="docs-page">
         {/* Header */}
-        <div className="mb-12">
-          <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-sage-50 border border-sage-100 rounded-full text-xs font-medium text-sage-700 mb-6">
-            <BookOpen size={13} />
-            {language === 'en' ? 'Documentation' : '文档中心'}
-          </div>
-          <h1 className="font-display text-4xl lg:text-5xl font-bold text-ink tracking-tight mb-4">
-            {language === 'en' ? 'Learn TexPixel' : '了解 TexPixel'}
+        <div className="docs-page-header">
+          <div className="eyebrow">{zh ? '文档中心' : 'Documentation'}</div>
+          <h1 className="docs-page-title">
+            {zh ? '学习 TexPixel' : 'Learn TexPixel'}
           </h1>
-          <p className="text-ink-secondary text-lg max-w-xl">
-            {language === 'en'
-              ? 'Everything you need to get started with formula recognition.'
-              : '公式识别入门所需的一切。'}
+          <p className="docs-page-subtitle">
+            {zh
+              ? '公式识别入门所需的一切——上传技巧、格式说明与常见问题。'
+              : 'Everything you need to get the most out of formula recognition — upload tips, format guides, and FAQs.'}
           </p>
         </div>
 
-        {/* Docs grid */}
-        <div className="space-y-4">
+        {/* List */}
+        <div className="docs-list">
           {docs.map((doc) => (
-            <Link
-              key={doc.slug}
-              to={`/docs/${doc.slug}`}
-              className="card p-6 flex items-start gap-5 group hover:border-sage-200 block"
-            >
-              <div className="w-11 h-11 bg-sage-50 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
-                <FileText size={20} className="text-sage-600" />
+            <Link key={doc.slug} to={`/docs/${doc.slug}`} className="docs-article-card">
+              <div className="docs-article-card-inner">
+                <div className="docs-article-icon">
+                  <DocIcon slug={doc.slug} />
+                </div>
+                <div className="docs-article-body">
+                  <div className="docs-article-title">{doc.title}</div>
+                  <div className="docs-article-desc">{doc.description}</div>
+                  <div className="docs-article-meta">
+                    {doc.tags.slice(0, 2).map(tag => (
+                      <span key={tag} className="docs-tag">{tag}</span>
+                    ))}
+                    <span className="docs-read-time">
+                      {estimateReadTime(doc.description)} {zh ? '分钟阅读' : 'min read'}
+                    </span>
+                  </div>
+                </div>
+                <svg className="docs-article-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M9 18l6-6-6-6" />
+                </svg>
               </div>
-              <div className="flex-1 min-w-0">
-                <h2 className="font-display text-lg font-semibold text-ink mb-1 group-hover:text-sage-700 transition-colors">
-                  {doc.title}
-                </h2>
-                <p className="text-ink-secondary text-sm leading-relaxed">{doc.description}</p>
-              </div>
-              <ArrowRight size={16} className="text-ink-muted group-hover:text-sage-600 transition-colors mt-1 flex-shrink-0" />
             </Link>
           ))}
-        </div>
 
-        {/* Empty state */}
-        {docs.length === 0 && (
-          <div className="card p-12 text-center">
-            <p className="text-ink-muted text-sm">
-              {language === 'en' ? 'Documentation coming soon.' : '文档即将发布。'}
-            </p>
-          </div>
-        )}
+          {docs.length === 0 && (
+            <div className="docs-empty">
+              {zh ? '文档即将发布。' : 'Documentation coming soon.'}
+            </div>
+          )}
+        </div>
       </div>
     </>
   );
diff --git a/src/styles/landing.css b/src/styles/landing.css
index 31ba32d..011b9d1 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -1571,3 +1571,402 @@
 .reveal-delay-3 { transition-delay: 0.30s; }
 
 @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+
+/* ═══════════════════════════════════════════════════════
+   DOCS PAGES
+   ═══════════════════════════════════════════════════════ */
+
+/* ── Docs list page ── */
+.docs-page {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 64px 24px 96px;
+}
+
+.docs-page-header {
+  margin-bottom: 52px;
+}
+
+.docs-page-header .eyebrow {
+  margin-bottom: 14px;
+}
+
+.docs-page-title {
+  font-family: 'Lora', serif;
+  font-size: 44px;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--text-strong);
+  margin-bottom: 14px;
+}
+
+.docs-page-subtitle {
+  font-size: 17px;
+  color: var(--text-body);
+  line-height: 1.65;
+  max-width: 480px;
+}
+
+.docs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.docs-article-card {
+  background: var(--elevated);
+  border: 1.5px solid var(--border);
+  border-radius: var(--r-l);
+  padding: 28px 32px;
+  text-decoration: none;
+  display: block;
+  transition: all 0.2s ease;
+  box-shadow: var(--shadow-soft);
+}
+
+.docs-article-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--primary-light);
+  box-shadow: var(--shadow-float);
+}
+
+.docs-article-card-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.docs-article-icon {
+  width: 46px;
+  height: 46px;
+  background: var(--warm-wash);
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.docs-article-icon svg {
+  width: 22px;
+  height: 22px;
+  stroke: var(--primary);
+  fill: none;
+  stroke-width: 1.8;
+}
+
+.docs-article-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.docs-article-title {
+  font-family: 'Lora', serif;
+  font-size: 19px;
+  font-weight: 700;
+  color: var(--text-strong);
+  margin-bottom: 6px;
+  letter-spacing: -0.01em;
+  transition: color 0.15s;
+}
+
+.docs-article-card:hover .docs-article-title {
+  color: var(--primary);
+}
+
+.docs-article-desc {
+  font-size: 14px;
+  color: var(--text-body);
+  line-height: 1.6;
+  margin-bottom: 12px;
+}
+
+.docs-article-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.docs-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 10px;
+  border-radius: 6px;
+  background: var(--warm-wash);
+  color: var(--primary);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: lowercase;
+}
+
+.docs-read-time {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.docs-article-arrow {
+  color: var(--text-muted);
+  flex-shrink: 0;
+  margin-top: 2px;
+  transition: color 0.15s, transform 0.15s;
+}
+
+.docs-article-card:hover .docs-article-arrow {
+  color: var(--primary);
+  transform: translateX(3px);
+}
+
+.docs-empty {
+  background: var(--elevated);
+  border: 1.5px solid var(--border);
+  border-radius: var(--r-l);
+  padding: 48px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 15px;
+}
+
+/* ── Docs detail page ── */
+.docs-detail {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 48px 24px 96px;
+}
+
+.docs-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  color: var(--text-muted);
+  text-decoration: none;
+  margin-bottom: 44px;
+  transition: color 0.15s;
+  font-weight: 500;
+}
+
+.docs-back-link:hover { color: var(--primary); }
+
+.docs-back-link svg {
+  width: 15px;
+  height: 15px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+}
+
+.docs-article-header {
+  margin-bottom: 44px;
+  padding-bottom: 36px;
+  border-bottom: 1px solid var(--border);
+}
+
+.docs-article-tags {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.docs-article-h1 {
+  font-family: 'Lora', serif;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--text-strong);
+  margin-bottom: 18px;
+}
+
+.docs-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--text-muted);
+  flex-wrap: wrap;
+}
+
+.docs-meta-sep { opacity: 0.4; }
+
+/* ── Docs prose body ── */
+.docs-prose {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 16px;
+  line-height: 1.8;
+  color: var(--text-body);
+}
+
+.docs-prose > h1:first-child { display: none; }
+
+.docs-prose h2 {
+  font-family: 'Lora', serif;
+  font-size: 26px;
+  font-weight: 700;
+  color: var(--text-strong);
+  margin: 52px 0 16px;
+  letter-spacing: -0.01em;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border);
+}
+
+.docs-prose h3 {
+  font-family: 'Lora', serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-strong);
+  margin: 32px 0 10px;
+}
+
+.docs-prose h4 {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-strong);
+  margin: 24px 0 8px;
+}
+
+.docs-prose p { margin-bottom: 20px; }
+
+.docs-prose ul,
+.docs-prose ol {
+  padding-left: 24px;
+  margin-bottom: 20px;
+}
+
+.docs-prose li { margin-bottom: 8px; }
+
+.docs-prose strong {
+  color: var(--text-strong);
+  font-weight: 600;
+}
+
+.docs-prose a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-decoration-color: var(--primary-light);
+  text-underline-offset: 3px;
+}
+
+.docs-prose a:hover { text-decoration-color: var(--primary); }
+
+.docs-prose code {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  background: var(--warm-wash);
+  color: var(--primary);
+  padding: 2px 7px;
+  border-radius: 6px;
+  word-break: break-all;
+}
+
+.docs-prose pre {
+  background: var(--text-strong);
+  color: #f1e6d8;
+  border-radius: var(--r-m);
+  padding: 20px 24px;
+  overflow-x: auto;
+  margin: 28px 0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.docs-prose pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+  font-size: inherit;
+  word-break: normal;
+}
+
+.docs-prose blockquote {
+  border-left: 3px solid var(--primary-light);
+  background: var(--warm-wash);
+  padding: 16px 20px;
+  border-radius: 0 var(--r-s) var(--r-s) 0;
+  margin: 28px 0;
+  color: var(--text-body);
+  font-style: italic;
+}
+
+.docs-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 28px 0;
+  font-size: 14px;
+}
+
+.docs-prose th {
+  background: var(--bg);
+  color: var(--text-strong);
+  font-weight: 700;
+  padding: 10px 16px;
+  text-align: left;
+  border: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.docs-prose td {
+  padding: 10px 16px;
+  border: 1px solid var(--border);
+  color: var(--text-body);
+  vertical-align: top;
+}
+
+.docs-prose tr:nth-child(even) td { background: var(--bg); }
+
+.docs-prose .katex-display {
+  margin: 32px 0;
+  overflow-x: auto;
+  padding: 20px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--r-m);
+}
+
+/* ── Docs CTA box ── */
+.docs-cta-box {
+  margin-top: 64px;
+  padding: 44px 48px;
+  background: linear-gradient(135deg, var(--warm-wash) 0%, var(--bg) 100%);
+  border: 1.5px solid var(--border);
+  border-radius: var(--r-xl);
+  text-align: center;
+}
+
+.docs-cta-title {
+  font-family: 'Lora', serif;
+  font-size: 26px;
+  font-weight: 700;
+  color: var(--text-strong);
+  margin-bottom: 10px;
+}
+
+.docs-cta-desc {
+  font-size: 15px;
+  color: var(--text-body);
+  margin-bottom: 28px;
+  line-height: 1.65;
+}
+
+/* ── Skeleton loader ── */
+.docs-skeleton-wrap {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 48px 24px;
+}
+
+.skeleton-line {
+  background: var(--border);
+  border-radius: 6px;
+  margin-bottom: 14px;
+  animation: skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 0.35; }
+}