feat(web): add happiness three pillars section with dimension mapping

Add 幸福三支柱 section between Products and Wuxing Philosophy sections on the landing page.

Three pillar cards with mapping to five dimensions:
- 衣食无忧 → 身 + 富 (保命保财, 家庭物理底盘)
- 受人尊敬 → 智 + 行 (内外兼修, 社会价值彰显)
- 子女传承 → 心 + 智 (爱与智慧, 传承有质量)

CSS: responsive pillar card layout with hover effects, dimension badge colors matching the five-dimension scheme, mobile breakpoints at 768px and 480px.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

web/css/style.css

@@ -747,6 +747,156 @@ ul { list-style: none; }
 }
 
 /* 幸福三支柱 */
+.section-pillars {
+  background: linear-gradient(180deg, var(--bg-body) 0%, var(--color-primary-light) 100%);
+}
+
+.pillars-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.pillar-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2xl);
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+
+.pillar-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--pillar-color, var(--color-primary));
+  opacity: .6;
+  transition: opacity var(--transition-normal);
+}
+
+.pillar-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-md);
+  border-color: transparent;
+}
+
+.pillar-card:hover::before {
+  opacity: 1;
+}
+
+.pillar-main {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+  margin-bottom: var(--space-lg);
+}
+
+.pillar-left {
+  flex-shrink: 0;
+  min-width: 160px;
+  text-align: center;
+}
+
+.pillar-name {
+  font-size: var(--font-size-h3);
+  font-weight: 700;
+  color: var(--pillar-color, var(--color-primary));
+  margin-bottom: var(--space-xs);
+}
+
+.pillar-subtitle {
+  font-size: var(--font-size-tiny);
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+.pillar-arrow {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  color: var(--color-text-muted);
+}
+
+.pillar-dimensions {
+  display: flex;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+.pillar-dim-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: .5em 1.25em;
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  color: #fff;
+  background: var(--dim-color);
+  white-space: nowrap;
+}
+
+.pillar-dim-badge .dim-sub {
+  font-weight: 400;
+  font-size: var(--font-size-tiny);
+  opacity: .85;
+}
+
+.pillar-interpretation {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: 1.8;
+  padding-top: var(--space-lg);
+  border-top: 1px dashed var(--color-border-light);
+}
+
+.pillar-interpretation strong {
+  color: var(--color-text-primary);
+}
+
+/* Pillar-specific colors */
+.pillar-card--material { --pillar-color: #FF8C42; }
+.pillar-card--respect  { --pillar-color: #6366F1; }
+.pillar-card--legacy   { --pillar-color: #FF6B9D; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .pillar-main {
+    flex-direction: column;
+    text-align: center;
+    gap: var(--space-md);
+  }
+  .pillar-arrow {
+    transform: rotate(90deg);
+  }
+  .pillar-dimensions {
+    justify-content: center;
+  }
+  .pillar-left {
+    min-width: auto;
+  }
+}
+
+@media (max-width: 480px) {
+  .pillar-card {
+    padding: var(--space-lg);
+  }
+  .pillar-dim-badge {
+    padding: .4em 1em;
+    font-size: var(--font-size-tiny);
+  }
+  .pillar-dimensions {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
 /* ----------------------------------------------------------
    9. Footer
    ---------------------------------------------------------- */

web/index.html

@@ -362,6 +362,89 @@
     </div>
   </section>
 
+  <!-- ==================== Three Pillars of Happiness ==================== -->
+  <section class="section section-pillars" id="pillars">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-tag">目标体系</span>
+        <h2 class="section-title">幸福三支柱</h2>
+        <p class="section-subtitle">目标指引方向 · 五维落地执行</p>
+        <p class="section-desc">
+          三大目标支柱指引家庭幸福方向，扩展至五维行动体系落地执行。
+          每一支柱映射两个核心维度，从愿景到行动，让幸福可感知、可衡量、可持续。
+        </p>
+      </div>
+
+      <div class="pillars-grid">
+        <!-- 衣食无忧 -->
+        <div class="pillar-card pillar-card--material reveal">
+          <div class="pillar-main">
+            <div class="pillar-left">
+              <div class="pillar-name">衣食无忧</div>
+              <div class="pillar-subtitle">物质生存基础</div>
+            </div>
+            <div class="pillar-arrow">✕</div>
+            <div class="pillar-dimensions">
+              <span class="pillar-dim-badge" style="--dim-color:#FF8C42; background:#FF8C42">
+                身 <span class="dim-sub">主动健康</span>
+              </span>
+              <span class="pillar-dim-badge" style="--dim-color:#F59E0B; background:#F59E0B">
+                富 <span class="dim-sub">利他创富</span>
+              </span>
+            </div>
+          </div>
+          <div class="pillar-interpretation">
+            <strong>身</strong>是无忧的根基——无病无灾才有底气；<strong>富</strong>是无忧的源泉——持续进账才有保障。两者结合，既保命又保财，构成家庭坚实的物理底盘。
+          </div>
+        </div>
+
+        <!-- 受人尊敬 -->
+        <div class="pillar-card pillar-card--respect reveal">
+          <div class="pillar-main">
+            <div class="pillar-left">
+              <div class="pillar-name">受人尊敬</div>
+              <div class="pillar-subtitle">社会价值认同</div>
+            </div>
+            <div class="pillar-arrow">➡️</div>
+            <div class="pillar-dimensions">
+              <span class="pillar-dim-badge" style="--dim-color:#6366F1; background:#6366F1">
+                智 <span class="dim-sub">赋能未来</span>
+              </span>
+              <span class="pillar-dim-badge" style="--dim-color:#10B981; background:#10B981">
+                行 <span class="dim-sub">人际和谐</span>
+              </span>
+            </div>
+          </div>
+          <div class="pillar-interpretation">
+            <strong>智</strong>是受人尊敬的内核——真才实学与健全人格赢得认可；<strong>行</strong>是受人尊敬的外显——和睦友善与广结善缘积累声望。内外兼修，社会价值自然彰显。
+          </div>
+        </div>
+
+        <!-- 子女传承 -->
+        <div class="pillar-card pillar-card--legacy reveal">
+          <div class="pillar-main">
+            <div class="pillar-left">
+              <div class="pillar-name">子女传承</div>
+              <div class="pillar-subtitle">生命延续与期望</div>
+            </div>
+            <div class="pillar-arrow">➡️</div>
+            <div class="pillar-dimensions">
+              <span class="pillar-dim-badge" style="--dim-color:#FF6B9D; background:#FF6B9D">
+                心 <span class="dim-sub">大爱相随</span>
+              </span>
+              <span class="pillar-dim-badge" style="--dim-color:#6366F1; background:#6366F1">
+                智 <span class="dim-sub">赋能未来</span>
+              </span>
+            </div>
+          </div>
+          <div class="pillar-interpretation">
+            传承不仅是血脉，更是爱与智慧。<strong>心</strong>负责凝聚家族情感纽带，让子女感受温暖与归属；<strong>智</strong>负责赋予子女立足未来的核心竞争力，让传承有质量。
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- ==================== Wuxing Philosophy ==================== -->
   <section class="section section-wuxing" id="wuxing">
     <div class="container">