feat: Apple HIG 风格全面重设计首页

- 采用系统字体栈（SF Pro on Apple 设备），移除 Outfit 字体依赖
- 纯黑 Hero + 30% 透明度背景图，极简遮罩层
- Apple 标准 48px 导航栏，saturate(180%) blur(20px)
- 药丸形按钮，980px 内容宽度约束
- 100px section padding，Apple 级留白
- scale(1.02) 悬停效果替代 translateY 位移
- 单一蓝色强调色 #0071e3，去除多色方案
- 精简动画：仅保留 fade-in 滚动揭示
- 标题使用句号结尾的 Apple 文案风格

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: kevinten10

content/zh/_index.html

@@ -6,39 +6,35 @@
 <!-- ==================== HERO ==================== -->
 <section class="capa-hero">
   <div class="capa-hero__bg"></div>
-  <div class="capa-hero__grid"></div>
   <div class="capa-hero__overlay"></div>
   <div class="capa-hero__content">
-    <div class="capa-hero__badge">Cloud Application API</div>
+    <p class="capa-hero__eyebrow">Cloud Application API</p>
     <h1 class="capa-hero__title">
-      Capa: <em>云应用 API 层</em>
+      Capa.<br><em>云应用 API 层。</em>
     </h1>
     <p class="capa-hero__subtitle">
-      基于 Mecha 架构的多运行时 SDK<br>
-      让 Java 应用轻松实现跨云部署 — 一次编写，随处运行
+      基于 Mecha 架构的多运行时 SDK。<br>
+      一次编写，随处运行。
     </p>
     <div class="capa-hero__actions">
       <a href="/blog/2022/01/18/capa-mecha-sdk-of-cloud-application-api/" class="capa-btn capa-btn--primary">
-        <i class="fas fa-book-open"></i> 核心文章
+        阅读核心文章
       </a>
       <a href="/docs/gettingstarted/" class="capa-btn capa-btn--outline">
-        快速开始 <i class="fas fa-arrow-right"></i>
-      </a>
-      <a href="https://github.com/capa-cloud/capa-java" class="capa-btn capa-btn--outline">
-        <i class="fab fa-github"></i> GitHub
+        快速开始
       </a>
     </div>
   </div>
-  <div class="capa-hero__scroll"><span></span></div>
+  <div class="capa-hero__scroll"></div>
 </section>
 
 <!-- ==================== ARCHITECTURE ==================== -->
 <section class="capa-arch">
   <div class="capa-reveal">
-    <div class="capa-section-label">Architecture</div>
-    <h2 class="capa-section-title">为什么选择 Capa？</h2>
+    <div class="capa-section-label">架构</div>
+    <h2 class="capa-section-title">统一 API，解耦基础设施。</h2>
     <p class="capa-section-desc">
-      统一的 API 层，让应用与基础设施解耦，通过 SPI 插件机制适配不同云平台。
+      通过标准 API + SPI 插件机制，让应用与云平台彻底解耦。
     </p>
   </div>
   <div class="capa-arch__img capa-reveal capa-reveal-delay-1">
@@ -48,39 +44,38 @@ <h2 class="capa-section-title">为什么选择 Capa？</h2>
 
 <!-- ==================== FEATURES ==================== -->
 <section class="capa-features">
-  <div class="capa-divider"></div>
   <div class="capa-features__grid">
     <div class="capa-feature capa-reveal">
       <div class="capa-feature__icon" style="background: #e3f2fd; color: #1565c0;">
         <i class="fas fa-cloud"></i>
       </div>
       <h3 class="capa-feature__title">跨云部署</h3>
-      <p class="capa-feature__desc">一套代码，同时部署到阿里云、AWS、腾讯云等多个云平台，无需修改业务逻辑。</p>
+      <p class="capa-feature__desc">一套代码，同时部署到阿里云、AWS、腾讯云，无需修改业务逻辑。</p>
     </div>
     <div class="capa-feature capa-reveal capa-reveal-delay-1">
       <div class="capa-feature__icon" style="background: #ede7f6; color: #6a1b9a;">
         <i class="fas fa-layer-group"></i>
       </div>
       <h3 class="capa-feature__title">Mecha 架构</h3>
-      <p class="capa-feature__desc">基于 Service Mesh 理念演进，将基础设施能力下沉到 SDK，应用只需关注业务逻辑。</p>
+      <p class="capa-feature__desc">基于 Service Mesh 演进，将基础设施能力下沉到 SDK，应用只需关注业务。</p>
     </div>
     <div class="capa-feature capa-reveal capa-reveal-delay-2">
       <div class="capa-feature__icon" style="background: #e8f5e9; color: #2e7d32;">
         <i class="fas fa-code"></i>
       </div>
       <h3 class="capa-feature__title">标准 API</h3>
-      <p class="capa-feature__desc">统一的标准 API 层，支持 RPC、Configuration、Pub/Sub、State、Telemetry 等分布式能力。</p>
+      <p class="capa-feature__desc">统一的 API 层，支持 RPC、Configuration、Pub/Sub、State 等能力。</p>
     </div>
   </div>
 </section>
 
 <!-- ==================== FEATURED ARTICLE ==================== -->
 <section class="capa-article">
   <div class="capa-reveal" style="text-align: center;">
-    <div class="capa-section-label" style="color: var(--capa-cyan);">Deep Dive</div>
-    <h2 class="capa-section-title" style="color: #fff;">深度阅读</h2>
-    <p class="capa-section-desc" style="color: rgba(255,255,255,0.45);">
-      了解 Capa 的设计哲学、架构实践与未来方向
+    <div class="capa-section-label" style="color: #2997ff;">深度阅读</div>
+    <h2 class="capa-section-title" style="color: #f5f5f7;">设计哲学与生产实践。</h2>
+    <p class="capa-section-desc" style="color: var(--apple-gray);">
+      了解 Capa 的架构设计与未来方向。
     </p>
   </div>
   <div class="capa-article__card capa-reveal capa-reveal-delay-1">
@@ -93,7 +88,7 @@ <h3 class="capa-article__title">
       </h3>
       <p class="capa-article__excerpt">
         从 Service Mesh 到 Multi-Runtime，深入解析 Mecha 架构的设计哲学。了解 Capa 如何通过标准 API + SPI 插件机制，
-        实现一套代码跨云部署。涵盖 RPC、配置中心、消息队列、可观测性等核心能力设计，以及携程私有云与 AWS 的生产实践。
+        实现一套代码跨云部署。涵盖 RPC、配置中心、消息队列、可观测性等核心能力设计。
       </p>
       <div class="capa-article__tags">
         <span class="capa-article__tag">Mecha 架构</span>
@@ -111,9 +106,9 @@ <h3 class="capa-article__title">
 
 <!-- ==================== CODE EXAMPLE ==================== -->
 <section class="capa-code">
-  <div class="capa-reveal" style="text-align: center; margin-bottom: 2.8rem;">
-    <div class="capa-section-label">Quick Start</div>
-    <h2 class="capa-section-title">简洁的 API 设计</h2>
+  <div class="capa-reveal" style="text-align: center; margin-bottom: 48px;">
+    <div class="capa-section-label">快速开始</div>
+    <h2 class="capa-section-title">简洁、直觉、强大。</h2>
   </div>
   <div class="capa-code__grid">
     <div class="capa-code__block capa-reveal">
@@ -156,9 +151,9 @@ <h3 class="capa-code__right-title">丰富的分布式能力</h3>
 <!-- ==================== COMMUNITY ==================== -->
 <section class="capa-community">
   <div class="capa-reveal">
-    <div class="capa-section-label">Community</div>
-    <h2 class="capa-section-title">加入社区</h2>
-    <p class="capa-section-desc">与开发者一起探讨 Mecha 架构和云原生技术</p>
+    <div class="capa-section-label">社区</div>
+    <h2 class="capa-section-title">一起探索云原生的未来。</h2>
+    <p class="capa-section-desc">与开发者一起探讨 Mecha 架构和云原生技术。</p>
   </div>
   <div class="capa-community__grid">
     <a class="capa-community__card capa-reveal" href="https://github.com/capa-cloud/capa-java" target="_blank" rel="noopener">
@@ -179,7 +174,7 @@ <h4>联系我们</h4>
   </div>
 </section>
 
-<!-- Scroll reveal script -->
+<!-- Scroll reveal -->
 <script>
 (function() {
   var els = document.querySelectorAll('.capa-reveal');
@@ -191,7 +186,7 @@ <h4>联系我们</h4>
         observer.unobserve(entry.target);
       }
     });
-  }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
+  }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
   els.forEach(function(el) { observer.observe(el); });
 })();
 </script>