着陆页 (codebyabdullah 风格) 是做什么的？
一个 index.html，无需构建步骤，直接部署为静态站点。让这些页面看起来像是定制构建而非模板构建的关键，是一套无例外执行的规则。规则如下。参考实现位于 templates/starter-dental.html：如有疑问，请阅读它是如何做的。
工作流程
- 简报（2 分钟）。 获取或确定并声明：利基市场、品牌名称（阿拉伯语 + 拉丁语）、城市、核心卖点（例如 "الكشف الأول مجاني"）以及主要操作（预约、报价、访问、下单）。将真实客户的内容（服务、电话、地址）作为数据放入；绝不虚构评价、评分、价格或人物。虚构的演示需在导航药丸中注明 "مثال · مشروع وهمي للعرض"。
- 选择利基套件，参考 references/niches.md：调色板、字体、3D 英雄构思、特色交互、章节顺序、JSON-LD 类型。如果该利基不存在，则使用相同的槽位自行设计。
- 先写文案。 在编写任何 CSS 之前，先使用 references/copywriting-ar.md 写出每一行。核心卖点在页面中出现 8–14 次。
- 从模板开始。 将
templates/starter-dental.html复制为<site>/index.html并重新定制：标记、字体、文案、章节，然后替换 3D 场景及特色交互。保留骨架、性能层级块、动效系统和无障碍降级。详见：references/design-system.md、references/page-structure.md、references/hero-3d-and-performance.md、references/motion.md、references/conversion.md。 - 使用工具进行质量检查。
node tools/shoot.js verify <site>在桌面端、手机端和静态层级下逐章节截图，并报告控制台错误和死锚点。检查所有截图。然后运行 references/qa-checklist.md。 - 资源。
node tools/shoot.js assets <site>渲染出hero-poster.webp、og.jpg和cover.webp。 - 部署。 每个站点拥有独立的 Git 仓库，在 Vercel 上静态部署，然后设置 canonical/OG/JSON-LD 指向真实 URL。参见 references/deploy-and-assets.md。
不可妥协的规则
<html lang="ar" dir="rtl">，仅使用逻辑 CSS 属性（margin-inline-start，绝不使用margin-left）。- 内容中无库存图片，无图像文件。 所有视觉效果均为程序生成：程序化 three.js、随滚动绘制的内联 SVG 线条画、Canvas 纹理。在页脚中予以说明。
- 每个利基市场有一个程序化 3D 对象，用于讲述价值主张，当英雄区固定时（扫描揭示牙齿，塔楼逐层亮起，卡片翻转展示证据）。它是故事，而非装饰。2–3 条固定的叙述逐字讲述故事。
- 每个品牌使用一个强调色，仅在标题中的
<em>、CTA 和小标记上使用。 - 大而紧密的阿拉伯语标题（
letter-spacing:-.035em），搭配拉丁展示体或等宽字体用于数字、章节编号和标签。 - 唯一的 CSS 缓动曲线（
--ease: cubic-bezier(.2,.75,.15,1)）和一个小型动效词汇表（单词遮罩揭示、固定水平滚动章节、滚动擦除提升、磁性按钮、跑马灯）。 - 移动端层级 v1 块（templates/perf-tier.html）在首次绘制前运行：
full桌面端，lite手机，static弱手机（海报图片，无 three.js）。h1 是 LCP 元素；3D 在文本绘制后的空闲时间构建。 - 无动效的完整页面：
prefers-reduced-motion和无 JS 两者均获得最终的、静态的、完全可读的布局。 - 沙特（Najdi）白色方言，专业且诚实："ليش"、"وش"、"عشان"、"الحين"。无夸张用语。
- 表单最多包含 3 个字段。一个浮动 CTA，在页面上有其他 CTA 时自动隐藏。
禁忌（这些特征会让页面看起来像模板）
- 库存图片、UI 中的表情符号、通用渐变斑点、多个强调色。
- 所有元素都添加动效：动效应跟随故事，然后退让。
- 仅桌面端的优化：像检查桌面端一样仔细检查手机和静态层级。
- 虚假社交证明：不虚构用户评价、星级评分、客户标志或价格。
- 使用
margin-left/right、text-align:left、仅 LTR 的图标（箭头必须指向 RTL 方向）。 - 不检查
shoot.js verify的每个截图就发布。