你是一位拥有15年经验的高端品牌设计师，精通可持续品牌设计、叙事型网页设计。请帮我创建一个精美的单页品牌官网。
Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills， then deploy to EdgeOne Makers.

## 品牌信息
- 品牌名称：BEAN JOURNEY
- 品牌定位：咖啡溯源与可持续贸易平台
- 核心主题：讲述从种子到杯子的完整咖啡旅程，强调可持续种植、公平贸易、社会影响力
- Slogan：每一颗咖啡豆，都承载着土地与人的故事
- 品牌色系：深咖啡棕#1A0F0A（主色）、焦糖色#C47A3A（强调色）、琥珀金#E8A849（点缀色）、奶油白#F5EFE6（背景）、森林绿#2D4A3E（可持续主题色）
- 英文字体：Playfair Display（衬线标题）；中文字体：Noto Serif SC（正文）
- 整体调性：温暖、有机、高级感、有社会价值主张

## 页面结构（共7个板块，按顺序排列）

### 1. 导航栏
- 固定顶部，初始透明背景
- 滚动后变为深咖啡色半透明玻璃质感（blur+rgba背景）
- 左侧Logo（BEAN JOURNEY，其中JOURNEY用琥珀金色）
- 右侧导航链接：产地 / 旅程 / 公平贸易 / 产品 / 可持续

### 2. Hero区（全屏高度）
- 深咖啡色背景，带微妙纹理
- 右下角有抽象咖啡豆SVG图形（半透明）
- 右上角有装饰性几何图案
- 内容居中靠左（不是完全居中，靠左30%）
- 小标签：Sustainable Coffee · Ethical Trade（带圆点前缀）
- 大标题（2行）："每一颗咖啡豆\n都承载着土地与人的故事"，使用Playfair Display斜体
- 描述段落（200字以内）：说明品牌使命
- 两个CTA按钮：主按钮（琥珀金底，深色字）+ 次按钮（透明边框白字）
- 底部有滚动指示器（Scroll + 竖线动画）

### 3. 影响数据区（深色背景）
- 背景色：#1A0F0A（深咖啡）
- 标题："我们创造的影响力"（英文标签：Global Impact）
- 4个数据卡片横排：47家合作农场 / 12，000+农户家庭 / 40%收购溢价 / 100%可溯源
- 数据卡片：数字用琥珀金、超大字号，hover时有上浮+边框高亮效果
- 卡片之间有细线分隔

### 4. 产地展示区（浅色背景）
- 标题：精选产地 · 独特风味
- 三个产地卡片网格（3列）：
  - 埃塞俄比亚耶加雪菲（Africa标签，黄色渐变背景）
  - 哥伦比亚慧兰（South America标签，绿色渐变背景）
  - 危地马拉安提瓜（Central America标签，棕色渐变背景）
- 每个卡片包含：
  - 渐变色块区（带产地图标SVG + 地区标签）
  - 产区名（中英文）
  - 描述文字（150字）
  - 三个标签（处理法/风味/认证）
  - 数据行（海拔 + 品种）
- hover时卡片整体上浮+阴影加深

### 5. 溯源时间轴区（白色背景）
- 标题：从种子到杯子的旅程
- 中央垂直时间轴线（渐变色：焦糖→琥珀→透明）
- 5个步骤，左右交替排列：
  - 01 可持续种植（遮荫种植/有机/生物多样性）
  - 02 手工采摘与初加工（批次独立/可追溯）
  - 03 专业杯测与分级（Q Grader/85+评分）
  - 04 公平贸易定价（高于市场40%/无中间商）
  - 05 新鲜烘焙直发（48h内烘焙/充氮保鲜/扫码溯源）
- 每个步骤：数字超大+琥珀金 / 标题 / 描述 / 两侧连接线

### 6. 公平贸易区（森林绿深色背景）
- 左：可视化面板（2x2网格）：
  - 40% Fair Trade Premium（大字横跨）
  - 直接贸易
  - 社区基金
  - 生态补偿
- 右：详细说明：
  - 标题：不但是一杯好咖啡，更是一份对世界的承诺
  - 4条承诺列表（带绿色圆形图标）：
    - 价格透明：公开成本结构
    - 性别平等：支持女性农户
    - 儿童权利：支持子女教育
    - 年度审计：第三方公开报告

### 7. 产品展示区（浅色背景）
- 标题：精选咖啡豆
- 三个产品卡片（3列）：
  - 黎明曙光（Best Seller标签，棕色渐变）
  - 森林深处（Limited标签，绿色渐变）
  - 火山余烬（琥珀色渐变）
- 每个卡片：
  - 渐变图块（无真实图片）
  - 产品名（中英文）
  - 产地来源
  - 风味描述
  - 价格 + 按钮（立即选购）

### 8. 可持续发展承诺区（白色背景）
- 标题：可持续发展承诺
- 三个卡片横排：
  - 再生农业（时钟图标）
  - 绿色供应链（堆叠图标）
  - 社区共建（人群图标）
- 底部有彩色横条（hover时出现）

### 9. CTA区（深色背景）
- 全宽背景，中心内容
- 标题："让每一杯咖啡\n都成为改变的力量"
- 主CTA按钮（琥珀金）

### 10. Footer（最深咖啡色背景）
- Logo + 链接 + 版权
- 底部标注：Powered by EdgeOne Makers（带图标）

## 技术要求
- 纯HTML/CSS/JS，无任何框架依赖
- 响应式：桌面端1200px，移动端375px完美适配
- 动画：滚动触发渐入（Intersection Observer）、导航玻璃效果、卡片hover上浮、滚动指示器动画
- 平滑滚动（scroll-behavior: smooth）
- 语义化HTML标签
- 所有SVG图标内联（不要外部依赖）
- 无Console报错

## 配色精确值（必须严格使用）
```css
:root {
  --espresso: #1A0F0A;      /* 深咖啡，主背景 */
  --roast: #3D2314;         /* 烘焙棕 */
  --caramel: #C47A3A;       /* 焦糖，CTA/强调 */
  --amber: #E8A849;         /* 琥珀金，数据高亮 */
  --cream: #F5EFE6;         /* 奶油白，浅色背景 */
  --parchment: #E8DCC8;     /* 羊皮纸色 */
  --sage: #6B8F71;          /* 鼠尾草绿 */
  --forest: #2D4A3E;        /* 森林绿 */
  --white: #FFEF9;          /* 暖白 */
  --text: #2C1F17;          /* 正文深棕 */
  --text-light: #7A6A5E;    /* 正文浅棕 */
}