web: 五维卡片SVG插图 - 船体上宽下窄/¥抽象为帆/鱼放大

web/css/style.css

@@ -320,7 +320,7 @@ ul { list-style: none; }
 
 .btn-primary {
   background: var(--color-primary);
-  color: #1a1a1a;
+  color: #fff;
   border-color: var(--color-primary);
 }
 
@@ -333,7 +333,7 @@ ul { list-style: none; }
 
 .btn-outline {
   background: var(--color-primary);
-  color: #1a1a1a;
+  color: #fff;
   border-color: var(--color-primary);
 }
 
@@ -662,6 +662,16 @@ ul { list-style: none; }
   border: 1px solid var(--color-border-light);
 }
 
+.stat-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  transition: transform var(--transition-normal);
+}
+.stat-link:hover {
+  transform: translateY(-3px);
+}
+
 .stat-num {
   display: block;
   font-size: 2rem;
@@ -678,84 +688,8 @@ ul { list-style: none; }
 }
 
 /* 幸福三支柱 */
-.pillar-section {
-  margin-top: var(--space-3xl);
-  text-align: center;
-}
-
-.pillar-heading {
-  font-size: 1.35rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-2xl);
-  position: relative;
-  display: inline-block;
-}
-.pillar-heading::after {
-  content: '';
-  display: block;
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
-  border-radius: 2px;
-  margin: var(--space-sm) auto 0;
-}
-
-.pillar-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-xl);
-  max-width: 960px;
-  margin: 0 auto;
-}
-
-.pillar-card {
-  background: var(--bg-surface);
-  border-radius: var(--radius-lg);
-  padding: var(--space-2xl) var(--space-lg);
-  text-align: center;
-  border: 1px solid var(--color-border-light);
-  transition: transform .3s ease, box-shadow .3s ease;
-}
-.pillar-card:hover {
-  transform: translateY(-6px);
-  box-shadow: var(--shadow-lg);
-}
-
-.pillar-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  background: var(--pillar-bg, var(--color-primary-light));
-  margin-bottom: var(--space-md);
-}
-
-.pillar-card h4 {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--pillar-color, var(--color-primary));
-  margin-bottom: var(--space-sm);
-}
-
-.pillar-card p {
-  font-size: var(--font-size-small);
-  color: var(--color-text-secondary);
-  line-height: 1.7;
-  margin: 0;
-}
-
-@media (max-width: 768px) {
-  .pillar-grid {
-    grid-template-columns: 1fr;
-    gap: var(--space-lg);
-  }
-}
-
 /* ----------------------------------------------------------
-    9. Core Products Section
+   9. Footer
    ---------------------------------------------------------- */
 .section-products {
   background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--bg-body) 100%);
@@ -884,6 +818,28 @@ ul { list-style: none; }
   transition: all var(--transition-normal);
 }
 
+.dim-bg-illustration {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 28%;
+  pointer-events: none;
+  opacity: 0.3;
+  transition: opacity var(--transition-normal);
+  mask-image: linear-gradient(to top, black 0%, black 50%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to top, black 0%, black 50%, transparent 100%);
+}
+.dim-bg-illustration svg {
+  width: 100%;
+  height: 100%;
+  color: var(--dim-color);
+  display: block;
+}
+.dimension-card:hover .dim-bg-illustration {
+  opacity: 0.3;
+}
+
 .dimension-card::before {
   content: '';
   position: absolute;
@@ -996,6 +952,90 @@ ul { list-style: none; }
   line-height: 1.7;
 }
 
+/* Loop flow — 科学成长闭环 */
+.loop-flow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+.loop-step {
+  flex: 1;
+  min-width: 200px;
+  max-width: 260px;
+  background: var(--bg-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl) var(--space-lg);
+  border: 1px solid var(--color-border-light);
+  text-align: left;
+  transition: transform .3s ease, box-shadow .3s ease;
+}
+.loop-step:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+.loop-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-md);
+}
+.loop-icon {
+  color: var(--step-color);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: var(--step-bg);
+}
+.loop-step h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin-bottom: 0;
+}
+.loop-step p {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+  margin-bottom: var(--space-md);
+}
+.loop-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: .3em;
+}
+.loop-tags span {
+  font-size: 11px;
+  padding: .2em .6em;
+  border-radius: var(--radius-full);
+  background: var(--step-bg);
+  color: var(--step-color);
+  font-weight: 500;
+}
+.loop-arrow {
+  font-size: 1.5rem;
+  color: var(--color-text-muted);
+  align-self: center;
+  flex-shrink: 0;
+}
+
+@media (max-width: 900px) {
+  .loop-flow {
+    flex-direction: column;
+    align-items: center;
+  }
+  .loop-arrow {
+    transform: rotate(90deg);
+    margin: 0;
+  }
+}
+
 /* ----------------------------------------------------------
     12. AI Technology Section
    ---------------------------------------------------------- */

web/index.html

@@ -390,6 +390,28 @@
       <div class="dimension-grid">
         <!-- 身(土) — 01 -->
         <div class="dimension-card" style="--dim-color: #5D4037; --dim-bg: #F5EFEB;">
+          <div class="dim-bg-illustration">
+            <svg viewBox="0 0 200 80" fill="none">
+              <defs>
+                <g id="sh1"><rect x="-1.5" y="-1" width="3" height="5" rx=".5" fill="currentColor"/><path d="M-5,-1 C-5,-7 5,-7 5,-1 Z" fill="currentColor"/></g>
+                <g id="sh2"><rect x="-1" y="-.5" width="2" height="3.5" rx=".5" fill="currentColor"/><path d="M-3.5,-.5 C-3.5,-5 3.5,-5 3.5,-.5 Z" fill="currentColor"/></g>
+                <g id="sh3"><rect x="-2" y="-1.5" width="4" height="6" rx=".5" fill="currentColor"/><path d="M-6,-1.5 C-6,-8 6,-8 6,-1.5 Z" fill="currentColor"/></g>
+              </defs>
+              <path d="M0 75 C25 55 45 65 65 45 C85 30 110 50 135 35 C155 22 175 42 200 32 L200 80 L0 80 Z" fill="currentColor" opacity=".35"/>
+              <path d="M0 78 C30 58 55 68 80 52 C105 38 130 58 155 42 C175 28 200 38 200 38 L200 80 L0 80 Z" fill="currentColor" opacity=".25"/>
+              <path d="M0 80 C40 62 70 72 95 58 C120 45 150 62 180 50 C195 42 200 55 200 55 L200 80 L0 80 Z" fill="currentColor" opacity=".18"/>
+              <g transform="translate(125,52)" opacity=".75"><path d="M0 -18 L-8 0 L8 0 Z" fill="currentColor"/><rect x="-1.5" y="0" width="3" height="10" fill="currentColor" rx="1"/></g>
+              <g transform="translate(145,48)" opacity=".68"><path d="M0 -20 L-10 0 L10 0 Z" fill="currentColor"/><rect x="-2" y="0" width="4" height="12" fill="currentColor" rx="1"/></g>
+              <g transform="translate(168,50)" opacity=".6"><path d="M0 -16 L-7 0 L7 0 Z" fill="currentColor"/><rect x="-1.5" y="0" width="3" height="9" fill="currentColor" rx="1"/></g>
+              <g transform="translate(185,54)" opacity=".55"><path d="M0 -14 L-6 0 L6 0 Z" fill="currentColor"/><rect x="-1.5" y="0" width="3" height="8" fill="currentColor" rx="1"/></g>
+              <g transform="translate(110,56)" opacity=".5"><path d="M0 -18 L-8 0 L8 0 Z" fill="currentColor"/><rect x="-1.5" y="0" width="3" height="10" fill="currentColor" rx="1"/></g>
+              <g transform="translate(132,58)" opacity=".45"><path d="M0 -15 L-7 0 L7 0 Z" fill="currentColor"/><rect x="-1.5" y="0" width="3" height="8" fill="currentColor" rx="1"/></g>
+              <use href="#sh3" transform="translate(115,62)" opacity=".55"/><use href="#sh1" transform="translate(138,64)" opacity=".48"/>
+              <use href="#sh2" transform="translate(155,66)" opacity=".40"/><use href="#sh1" transform="translate(178,62)" opacity=".50"/>
+              <use href="#sh3" transform="translate(190,60)" opacity=".42"/><use href="#sh2" transform="translate(82,66)" opacity=".35"/>
+              <path d="M105 78 C112 75 120 77 128 74 C135 71 142 73 150 70 C160 67 170 68 178 71 C185 73 192 76 200 74" stroke="currentColor" stroke-width="1" opacity=".15" fill="none"/>
+            </svg>
+          </div>
           <h3 class="dim-title">
             <span class="dim-emoji">🌏</span>
             <span style="color:var(--dim-color);font-size:1.35rem;font-weight:800">身</span> · 主动健康
@@ -414,6 +436,71 @@
 
         <!-- 智(金) — 02 -->
         <div class="dimension-card" style="--dim-color: #C0A060; --dim-bg: #F9F4EC;">
+          <div class="dim-bg-illustration">
+            <svg viewBox="0 0 200 80" fill="none">
+              <defs>
+                <pattern id="dg" width="8" height="8" patternUnits="userSpaceOnUse"><circle cx="4" cy="4" r=".5" fill="currentColor" opacity=".25"/></pattern>
+                <g id="f1"><text font-family="Times,serif" font-style="italic" font-size="14" text-anchor="middle" dominant-baseline="central" fill="currentColor">π</text></g>
+                <g id="f2"><text font-family="Times,serif" font-style="italic" font-size="11" text-anchor="middle" dominant-baseline="central" fill="currentColor">E=mc<tspan baseline-shift="super" font-size="7">2</tspan></text></g>
+                <g id="f3"><text font-family="Times,serif" font-style="italic" font-size="12" text-anchor="middle" dominant-baseline="central" fill="currentColor">F=ma</text></g>
+                <g id="f4"><text font-family="Times,serif" font-style="italic" font-size="9" text-anchor="middle" dominant-baseline="central" fill="currentColor">F=Gm<tspan baseline-shift="sub" font-size="6">1</tspan>m<tspan baseline-shift="sub" font-size="6">2</tspan>/r<tspan baseline-shift="super" font-size="6">2</tspan></text></g>
+                <g id="f5"><text font-family="Times,serif" font-style="italic" font-size="10" text-anchor="middle" dominant-baseline="central" fill="currentColor">a<tspan baseline-shift="super" font-size="6.5">2</tspan>+b<tspan baseline-shift="super" font-size="6.5">2</tspan>=c<tspan baseline-shift="super" font-size="6.5">2</tspan></text></g>
+                <g id="f6"><text font-family="Times,serif" font-style="italic" font-size="12" text-anchor="middle" dominant-baseline="central" fill="currentColor">PV=nRT</text></g>
+                <g id="f7"><text font-family="Times,serif" font-style="italic" font-size="9" text-anchor="middle" dominant-baseline="central" fill="currentColor">sin<tspan baseline-shift="super" font-size="6">2</tspan>θ+cos<tspan baseline-shift="super" font-size="6">2</tspan>θ=1</text></g>
+                <g id="f8"><text font-family="Times,serif" font-style="italic" font-size="9" text-anchor="middle" dominant-baseline="central" fill="currentColor">e<tspan baseline-shift="super" font-size="6">iπ</tspan>+1=0</text></g>
+                <g id="f9"><text font-family="Times,serif" font-style="italic" font-size="13" text-anchor="middle" dominant-baseline="central" fill="currentColor">∫f(x)dx</text></g>
+                <g id="f10"><text font-family="Times,serif" font-style="italic" font-size="12" text-anchor="middle" dominant-baseline="central" fill="currentColor">E=hν</text></g>
+              </defs>
+              <rect width="200" height="80" fill="url(#dg)" opacity=".12"/>
+              <g opacity=".35">
+                <use href="#f1" transform="translate(14,42) scale(.32) rotate(-8)"/>
+                <use href="#f3" transform="translate(48,44) scale(.28) rotate(10)"/>
+                <use href="#f1" transform="translate(82,41) scale(.35)"/>
+                <use href="#f6" transform="translate(112,43) scale(.55) rotate(-12)"/>
+                <use href="#f10" transform="translate(148,40) scale(.50)"/>
+                <use href="#f2" transform="translate(178,44) scale(.48) rotate(8)"/>
+              </g>
+              <g opacity=".50">
+                <use href="#f9" transform="translate(8,52) scale(.42) rotate(-5)"/>
+                <use href="#f5" transform="translate(44,50) scale(.40)"/>
+                <use href="#f8" transform="translate(78,53) scale(.38) rotate(7)"/>
+                <use href="#f3" transform="translate(108,51) scale(.82) rotate(-8)"/>
+                <use href="#f10" transform="translate(148,54) scale(.75)"/>
+                <use href="#f1" transform="translate(180,49) scale(.78) rotate(15)"/>
+              </g>
+              <g opacity=".65">
+                <use href="#f1" transform="translate(10,60) scale(.55)"/>
+                <use href="#f4" transform="translate(52,58) scale(.50) rotate(-6)"/>
+                <use href="#f6" transform="translate(90,61) scale(.52)"/>
+                <use href="#f2" transform="translate(118,59) scale(1.15) rotate(6)"/>
+                <use href="#f7" transform="translate(156,62) scale(1.10)"/>
+                <use href="#f9" transform="translate(180,58) scale(1.18) rotate(-10)"/>
+                <use href="#f3" transform="translate(36,57) scale(.52)"/>
+                <use href="#f5" transform="translate(70,60) scale(.48)"/>
+              </g>
+              <g opacity=".80">
+                <use href="#f10" transform="translate(6,70) scale(.72) rotate(-10)"/>
+                <use href="#f1" transform="translate(34,68) scale(.68)"/>
+                <use href="#f8" transform="translate(66,71) scale(.62) rotate(8)"/>
+                <use href="#f6" transform="translate(100,69) scale(.95) rotate(-5)"/>
+                <use href="#f4" transform="translate(122,71) scale(1.30)"/>
+                <use href="#f2" transform="translate(152,68) scale(1.25) rotate(6)"/>
+                <use href="#f9" transform="translate(176,70) scale(1.28)"/>
+                <use href="#f5" transform="translate(56,68) scale(.65)"/>
+              </g>
+              <g opacity=".95">
+                <use href="#f2" transform="translate(14,78) scale(1.0)"/>
+                <use href="#f9" transform="translate(46,76) scale(.95) rotate(-8)"/>
+                <use href="#f3" transform="translate(76,79) scale(.92)"/>
+                <use href="#f6" transform="translate(106,77) scale(1.50) rotate(6)"/>
+                <use href="#f4" transform="translate(132,79) scale(2.40)"/>
+                <use href="#f1" transform="translate(166,76) scale(2.30) rotate(-10)"/>
+                <use href="#f7" transform="translate(18,77) scale(.90)"/>
+                <use href="#f8" transform="translate(56,78) scale(.88) rotate(8)"/>
+                <use href="#f10" transform="translate(88,76) scale(.92)"/>
+              </g>
+            </svg>
+          </div>
           <h3 class="dim-title">
             <span class="dim-emoji">⚔️</span>
             <span style="color:var(--dim-color);font-size:1.35rem;font-weight:800">智</span> · 赋能未来
@@ -438,6 +525,58 @@
 
         <!-- 富(水) — 03 -->
         <div class="dimension-card" style="--dim-color: #0EA5E9; --dim-bg: #ECFEFF;">
+          <div class="dim-bg-illustration">
+            <svg viewBox="0 0 200 80" fill="none">
+              <defs>
+                <g id="boat"><path d="M0,3 L-9,-10 L9,-10 Z" fill="currentColor"/><line x1="-7" y1="-4" x2="7" y2="-4" stroke="currentColor" stroke-width="1.2"/><path d="M-13,3 L10,3 L8,7 L-11,7 Z" fill="currentColor"/><path d="M-15,7 Q-10,8 -5,7 Q0,6 5,7 Q10,8 15,7" stroke="currentColor" stroke-width=".6" fill="none" opacity=".4"/></g>
+                <g id="df"><text font-family="Georgia,serif" font-size="14" text-anchor="middle" dominant-baseline="central" fill="currentColor">$</text></g>
+              </defs>
+              <path d="M0 52 Q25 44 50 50 Q75 56 100 48 Q125 40 150 46 Q175 52 200 44 L200 80 L0 80Z" fill="currentColor" opacity=".1"/>
+              <path d="M0 60 Q30 52 60 58 Q90 64 120 56 Q150 48 180 54 Q195 57 200 52 L200 80 L0 80Z" fill="currentColor" opacity=".16"/>
+              <path d="M0 68 Q35 60 70 66 Q105 72 140 62 Q170 55 200 62 L200 80 L0 80Z" fill="currentColor" opacity=".22"/>
+              <path d="M0 74 Q40 68 80 74 Q120 80 160 70 Q182 64 200 70 L200 80 L0 80Z" fill="currentColor" opacity=".28"/>
+              <use href="#boat" transform="translate(24,58) scale(1.1) rotate(-3)"/>
+              <use href="#boat" transform="translate(85,66) scale(.96) rotate(2)"/>
+              <use href="#boat" transform="translate(155,62) scale(1.95) rotate(-2)"/>
+              <g opacity=".30">
+                <use href="#df" transform="translate(8,48) scale(.30) rotate(15)"/>
+                <use href="#df" transform="translate(28,52) scale(.33) rotate(-10)"/>
+                <use href="#df" transform="translate(48,46) scale(.27) rotate(20)"/>
+                <use href="#df" transform="translate(68,50) scale(.32) rotate(-15)"/>
+                <use href="#df" transform="translate(108,44) scale(.36) rotate(12)"/>
+                <use href="#df" transform="translate(138,48) scale(.29) rotate(-8)"/>
+                <use href="#df" transform="translate(168,46) scale(.33) rotate(18)"/>
+                <use href="#df" transform="translate(188,52) scale(.30) rotate(-12)"/>
+              </g>
+              <g opacity=".45">
+                <use href="#df" transform="translate(16,56) scale(.45) rotate(-18)"/>
+                <use href="#df" transform="translate(42,58) scale(.42) rotate(8)"/>
+                <use href="#df" transform="translate(62,54) scale(.39) rotate(-6)"/>
+                <use href="#df" transform="translate(78,60) scale(.48) rotate(15)"/>
+                <use href="#df" transform="translate(114,56) scale(.53) rotate(-10)"/>
+                <use href="#df" transform="translate(144,58) scale(.45) rotate(12)"/>
+                <use href="#df" transform="translate(178,54) scale(.42) rotate(-14)"/>
+              </g>
+              <g opacity=".60">
+                <use href="#df" transform="translate(10,64) scale(.57) rotate(10)"/>
+                <use href="#df" transform="translate(34,66) scale(.53) rotate(-8)"/>
+                <use href="#df" transform="translate(54,62) scale(.60) rotate(15)"/>
+                <use href="#df" transform="translate(98,68) scale(.54) rotate(-12)"/>
+                <use href="#df" transform="translate(124,64) scale(.63) rotate(8)"/>
+                <use href="#df" transform="translate(158,66) scale(.57) rotate(-16)"/>
+                <use href="#df" transform="translate(184,62) scale(.53) rotate(12)"/>
+              </g>
+              <g opacity=".80">
+                <use href="#df" transform="translate(22,72) scale(.75) rotate(-6)"/>
+                <use href="#df" transform="translate(46,74) scale(.83) rotate(12)"/>
+                <use href="#df" transform="translate(72,70) scale(.72) rotate(-10)"/>
+                <use href="#df" transform="translate(104,76) scale(.78) rotate(8)"/>
+                <use href="#df" transform="translate(134,72) scale(.90) rotate(-14)"/>
+                <use href="#df" transform="translate(164,74) scale(.83) rotate(6)"/>
+                <use href="#df" transform="translate(190,70) scale(.75) rotate(-8)"/>
+                <use href="#df" transform="translate(76,72) scale(.68) rotate(18)"/>
+              </g>
+          </div>
           <h3 class="dim-title">
             <span class="dim-emoji">💧</span>
             <span style="color:var(--dim-color);font-size:1.35rem;font-weight:800">富</span> · 利他创富
@@ -462,6 +601,68 @@
 
         <!-- 行(木) — 04 -->
         <div class="dimension-card" style="--dim-color: #10B981; --dim-bg: #ECFDF5;">
+          <div class="dim-bg-illustration">
+            <svg viewBox="0 0 200 80" fill="none">
+              <defs>
+                <g id="s1"><circle cx="0" cy="-7" r="3.5" fill="currentColor"/><path d="M-4,-3 L-3,5 L3,5 L4,-3 Z" fill="currentColor"/><path d="M-4,-2 L-8,0 M4,-2 L8,0" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round"/><path d="M-2,5 L-4,12 M2,5 L4,12" stroke="currentColor" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
+                <g id="s2"><circle cx="0" cy="-7" r="3.5" fill="currentColor"/><path d="M-4,-3 L-3,5 L3,5 L4,-3 Z" fill="currentColor"/><path d="M-4,-2 L-9,-3 M4,-2 L9,-3" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round"/><path d="M-2,5 L-5,12 M2,5 L3,12" stroke="currentColor" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
+                <g id="s3"><circle cx="0" cy="-7" r="3.5" fill="currentColor"/><path d="M-4,-3 L-3,5 L3,5 L4,-3 Z" fill="currentColor"/><path d="M-4,-2 L-7,-4 M4,-2 L7,-4" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round"/><path d="M-1,5 L-3,12 L-1,14 M2,5 L4,12 L2,14" stroke="currentColor" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
+              </defs>
+              <g opacity=".40" fill="currentColor" stroke="currentColor">
+                <use href="#s1" transform="translate(2,48) scale(.26)"/><use href="#s2" transform="translate(11,46) scale(.28)"/>
+                <use href="#s3" transform="translate(20,47) scale(.24)"/><use href="#s1" transform="translate(29,48) scale(.27)"/>
+                <use href="#s2" transform="translate(38,46) scale(.25)"/><use href="#s3" transform="translate(47,47) scale(.29)"/>
+                <use href="#s1" transform="translate(56,48) scale(.24)"/><use href="#s2" transform="translate(65,46) scale(.28)"/>
+                <use href="#s3" transform="translate(74,47) scale(.26)"/><use href="#s1" transform="translate(83,48) scale(.25)"/>
+                <use href="#s2" transform="translate(92,46) scale(.27)"/>
+                <use href="#s3" transform="translate(101,47) scale(.43)"/><use href="#s1" transform="translate(110,48) scale(.50)"/>
+                <use href="#s2" transform="translate(119,46) scale(.47)"/><use href="#s3" transform="translate(128,47) scale(.45)"/>
+                <use href="#s1" transform="translate(137,48) scale(.49)"/><use href="#s2" transform="translate(146,46) scale(.43)"/>
+                <use href="#s3" transform="translate(155,47) scale(.50)"/><use href="#s1" transform="translate(164,48) scale(.45)"/>
+                <use href="#s2" transform="translate(173,46) scale(.49)"/><use href="#s3" transform="translate(182,47) scale(.47)"/>
+                <use href="#s1" transform="translate(191,48) scale(.43)"/>
+              </g>
+              <g opacity=".50" fill="currentColor" stroke="currentColor">
+                <use href="#s3" transform="translate(5,55) scale(.36)"/><use href="#s1" transform="translate(16,53) scale(.39)"/>
+                <use href="#s2" transform="translate(27,54) scale(.34)"/><use href="#s3" transform="translate(38,56) scale(.38)"/>
+                <use href="#s1" transform="translate(49,54) scale(.36)"/><use href="#s2" transform="translate(60,55) scale(.35)"/>
+                <use href="#s3" transform="translate(71,53) scale(.39)"/><use href="#s1" transform="translate(82,56) scale(.37)"/>
+                <use href="#s2" transform="translate(93,54) scale(.35)"/>
+                <use href="#s3" transform="translate(104,55) scale(.68)"/><use href="#s1" transform="translate(115,53) scale(.61)"/>
+                <use href="#s2" transform="translate(126,56) scale(.70)"/><use href="#s3" transform="translate(137,54) scale(.65)"/>
+                <use href="#s1" transform="translate(148,55) scale(.63)"/><use href="#s2" transform="translate(159,53) scale(.68)"/>
+                <use href="#s3" transform="translate(170,56) scale(.67)"/><use href="#s1" transform="translate(181,54) scale(.63)"/>
+                <use href="#s2" transform="translate(192,55) scale(.68)"/>
+              </g>
+              <g opacity=".60" fill="currentColor" stroke="currentColor">
+                <use href="#s2" transform="translate(7,63) scale(.52)"/><use href="#s1" transform="translate(20,61) scale(.55)"/>
+                <use href="#s3" transform="translate(33,64) scale(.48)"/><use href="#s2" transform="translate(46,62) scale(.53)"/>
+                <use href="#s1" transform="translate(59,63) scale(.50)"/><use href="#s3" transform="translate(72,61) scale(.56)"/>
+                <use href="#s2" transform="translate(85,64) scale(.49)"/><use href="#s1" transform="translate(98,62) scale(.54)"/>
+                <use href="#s3" transform="translate(111,63) scale(.92)"/><use href="#s2" transform="translate(124,61) scale(.99)"/>
+                <use href="#s1" transform="translate(137,64) scale(.86)"/><use href="#s3" transform="translate(150,62) scale(.95)"/>
+                <use href="#s2" transform="translate(163,63) scale(.90)"/><use href="#s1" transform="translate(176,61) scale(.99)"/>
+                <use href="#s3" transform="translate(189,64) scale(.94)"/>
+              </g>
+              <g opacity=".70" fill="currentColor" stroke="currentColor">
+                <use href="#s1" transform="translate(6,71) scale(.74)"/><use href="#s3" transform="translate(22,73) scale(.68)"/>
+                <use href="#s2" transform="translate(38,70) scale(.78)"/><use href="#s1" transform="translate(54,72) scale(.72)"/>
+                <use href="#s3" transform="translate(70,71) scale(.76)"/><use href="#s2" transform="translate(86,73) scale(.70)"/>
+                <use href="#s1" transform="translate(102,70) scale(1.40)"/><use href="#s3" transform="translate(118,72) scale(1.33)"/>
+                <use href="#s2" transform="translate(134,71) scale(1.30)"/><use href="#s1" transform="translate(150,73) scale(1.37)"/>
+                <use href="#s3" transform="translate(166,70) scale(1.40)"/><use href="#s2" transform="translate(182,72) scale(1.30)"/>
+                <use href="#s1" transform="translate(198,71) scale(1.33)"/>
+              </g>
+              <g opacity=".80" fill="currentColor" stroke="currentColor">
+                <use href="#s2" transform="translate(6,80) scale(1.05)"/><use href="#s1" transform="translate(24,78) scale(1.12)"/>
+                <use href="#s3" transform="translate(42,80) scale(.98)"/><use href="#s2" transform="translate(60,78) scale(1.08)"/>
+                <use href="#s1" transform="translate(78,80) scale(1.02)"/><use href="#s3" transform="translate(96,78) scale(1.15)"/>
+                <use href="#s2" transform="translate(114,80) scale(1.89)"/><use href="#s1" transform="translate(132,78) scale(1.98)"/>
+                <use href="#s3" transform="translate(150,80) scale(1.80)"/><use href="#s2" transform="translate(168,78) scale(2.02)"/>
+                <use href="#s1" transform="translate(186,80) scale(1.91)"/>
+              </g>
+            </svg>
+          </div>
           <h3 class="dim-title">
             <span class="dim-emoji">🌿</span>
             <span style="color:var(--dim-color);font-size:1.35rem;font-weight:800">行</span> · 人际和谐
@@ -485,7 +686,73 @@
         </div>
 
         <!-- 心(火) — 05 -->
-        <div class="dimension-card" style="--dim-color: #EF4444; --dim-bg: #FEF2F2;">
+        <div class="dimension-card" style="--dim-color: #EF4444; --dim-bg: #FFF1F0;">
+          <div class="dim-bg-illustration">
+            <svg viewBox="0 0 200 80" fill="none">
+              <defs>
+                <g id="h1"><path d="M0,-9 C-5,-4 -7,2 -4,5 C-2,7 0,6 0,6 C0,6 2,7 4,5 C7,2 5,-4 0,-9 Z" fill="currentColor"/></g>
+                <g id="h2"><path d="M0,-7 C-4,-3 -5,1 -3,4 C-1,5 0,5 0,5 C0,5 1,5 3,4 C5,1 4,-3 0,-7 Z" fill="currentColor"/></g>
+                <g id="h3"><path d="M0,-5 C-3,-2 -4,1 -2,3 C-1,4 0,3 0,3 C0,3 1,4 2,3 C4,1 3,-2 0,-5 Z" fill="currentColor"/></g>
+                <g id="h4"><path d="M0,-11 C-6,-5 -8,2 -5,6 C-3,8 0,7 0,7 C0,7 3,8 5,6 C8,2 6,-5 0,-11 Z" fill="currentColor"/></g>
+                <g id="h5"><path d="M0,-12 C-3,-6 -5,1 -3,5 C-1,7 0,6 0,6 C0,6 1,7 3,5 C5,1 3,-6 0,-12 Z" fill="currentColor"/></g>
+                <g id="h6"><path d="M0,-7 L1.8,-2 L7,-2 L3,1.5 L5,7 L0,4 L-5,7 L-3,1.5 L-7,-2 L-1.8,-2 Z" fill="currentColor"/></g>
+                <g id="h7"><path d="M0,-7 L1,-2 L6,-1 L1,0 L0,5 L-1,0 L-6,-1 L-1,-2 Z" fill="currentColor"/></g>
+                <g id="h8"><path d="M0,-5 L1.2,-1.5 L4.5,-1 L2,1 L3,4.5 L0,3 L-3,4.5 L-2,1 L-4.5,-1 L-1.2,-1.5 Z" fill="currentColor"/></g>
+                <g id="h9"><path d="M-4,0 L4,0 M0,-4 L0,4" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round"/></g>
+                <g id="h10"><circle cx="-2" cy="-3" r="1.8" fill="currentColor"/><circle cx="2" cy="1" r="1.4" fill="currentColor"/><circle cx="-1" cy="3" r="1" fill="currentColor"/></g>
+              </defs>
+              <g opacity=".40">
+                <use href="#h1" transform="translate(4,46) scale(.22)"/><use href="#h4" transform="translate(12,44) scale(.24)"/>
+                <use href="#h7" transform="translate(20,48) scale(.20)"/><use href="#h2" transform="translate(28,45) scale(.23)"/>
+                <use href="#h5" transform="translate(36,47) scale(.21)"/><use href="#h8" transform="translate(44,43) scale(.25)"/>
+                <use href="#h3" transform="translate(52,46) scale(.22)"/><use href="#h6" transform="translate(60,44) scale(.24)"/>
+                <use href="#h9" transform="translate(68,48) scale(.20)"/><use href="#h1" transform="translate(76,45) scale(.23)"/>
+                <use href="#h4" transform="translate(84,47) scale(.21)"/><use href="#h7" transform="translate(92,43) scale(.25)"/>
+                <use href="#h2" transform="translate(100,46) scale(.38)"/><use href="#h5" transform="translate(108,44) scale(.42)"/>
+                <use href="#h8" transform="translate(116,48) scale(.39)"/><use href="#h3" transform="translate(124,45) scale(.40)"/>
+                <use href="#h6" transform="translate(132,47) scale(.36)"/><use href="#h9" transform="translate(140,43) scale(.44)"/>
+                <use href="#h1" transform="translate(148,46) scale(.38)"/><use href="#h4" transform="translate(156,44) scale(.42)"/>
+                <use href="#h7" transform="translate(164,48) scale(.39)"/><use href="#h2" transform="translate(172,45) scale(.40)"/>
+                <use href="#h5" transform="translate(180,47) scale(.36)"/><use href="#h8" transform="translate(188,43) scale(.44)"/>
+                <use href="#h3" transform="translate(196,46) scale(.38)"/>
+              </g>
+              <g opacity=".55">
+                <use href="#h10" transform="translate(6,54) scale(.34)"/><use href="#h4" transform="translate(18,52) scale(.37)"/>
+                <use href="#h2" transform="translate(30,56) scale(.33)"/><use href="#h7" transform="translate(42,53) scale(.38)"/>
+                <use href="#h5" transform="translate(54,55) scale(.35)"/><use href="#h1" transform="translate(66,51) scale(.39)"/>
+                <use href="#h8" transform="translate(78,56) scale(.32)"/><use href="#h3" transform="translate(90,54) scale(.36)"/>
+                <use href="#h10" transform="translate(102,52) scale(.58)"/><use href="#h4" transform="translate(114,56) scale(.62)"/>
+                <use href="#h2" transform="translate(126,53) scale(.60)"/><use href="#h7" transform="translate(138,55) scale(.56)"/>
+                <use href="#h5" transform="translate(150,51) scale(.63)"/><use href="#h1" transform="translate(162,56) scale(.57)"/>
+                <use href="#h8" transform="translate(174,54) scale(.61)"/><use href="#h3" transform="translate(186,52) scale(.59)"/>
+              </g>
+              <g opacity=".70">
+                <use href="#h6" transform="translate(6,62) scale(.46)"/><use href="#h9" transform="translate(20,64) scale(.42)"/>
+                <use href="#h2" transform="translate(34,61) scale(.48)"/><use href="#h10" transform="translate(48,63) scale(.44)"/>
+                <use href="#h4" transform="translate(62,60) scale(.50)"/><use href="#h1" transform="translate(76,65) scale(.43)"/>
+                <use href="#h7" transform="translate(90,62) scale(.47)"/><use href="#h5" transform="translate(104,64) scale(.82)"/>
+                <use href="#h8" transform="translate(118,61) scale(.76)"/><use href="#h3" transform="translate(132,63) scale(.80)"/>
+                <use href="#h9" transform="translate(146,60) scale(.85)"/><use href="#h2" transform="translate(160,65) scale(.78)"/>
+                <use href="#h10" transform="translate(174,62) scale(.82)"/><use href="#h4" transform="translate(188,64) scale(.76)"/>
+              </g>
+              <g opacity=".85">
+                <use href="#h5" transform="translate(6,72) scale(.68)"/><use href="#h8" transform="translate(22,70) scale(.72)"/>
+                <use href="#h2" transform="translate(38,74) scale(.65)"/><use href="#h10" transform="translate(54,71) scale(.70)"/>
+                <use href="#h4" transform="translate(70,73) scale(.66)"/><use href="#h1" transform="translate(86,70) scale(.74)"/>
+                <use href="#h7" transform="translate(102,72) scale(1.30)"/><use href="#h5" transform="translate(118,74) scale(1.23)"/>
+                <use href="#h8" transform="translate(134,71) scale(1.28)"/><use href="#h2" transform="translate(150,73) scale(1.25)"/>
+                <use href="#h10" transform="translate(166,70) scale(1.34)"/><use href="#h4" transform="translate(182,72) scale(1.27)"/>
+              </g>
+              <g opacity=".95">
+                <use href="#h3" transform="translate(6,80) scale(.95)"/><use href="#h6" transform="translate(24,78) scale(1.02)"/>
+                <use href="#h9" transform="translate(42,80) scale(.90)"/><use href="#h1" transform="translate(60,78) scale(1.05)"/>
+                <use href="#h7" transform="translate(78,80) scale(.98)"/><use href="#h5" transform="translate(96,78) scale(1.00)"/>
+                <use href="#h8" transform="translate(114,80) scale(1.72)"/><use href="#h2" transform="translate(132,78) scale(1.83)"/>
+                <use href="#h10" transform="translate(150,80) scale(1.62)"/><use href="#h4" transform="translate(168,78) scale(1.90)"/>
+                <use href="#h7" transform="translate(186,80) scale(1.75)"/>
+              </g>
+            </svg>
+          </div>
           <h3 class="dim-title">
             <span class="dim-emoji">🔥</span>
             <span style="color:var(--dim-color);font-size:1.35rem;font-weight:800">心</span> · 大爱相随