diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 57d8e55..11f428e 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -198,14 +198,59 @@ img { max-width: 100%; display: block; }
 .hero {
   position: relative;
   min-height: 100vh;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: start;
-  gap: 40px;
-  padding: calc(var(--nav-height) + 40px) 24px 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: calc(var(--nav-height) + 52px) 24px 80px;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.hero-bg-shapes {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.hero-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  z-index: 1;
+}
+
+.hero-top {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 32px 48px;
+}
+
+.hero-content {
+  min-width: 0;
+}
+
+.hero-bottom {
+  margin-top: 40px;
+}
+
+.hero-visual {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+}
+
+.globe-container {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  overflow: visible;
 }
 
 .hero-bg-shapes .shape {
@@ -302,7 +347,7 @@ img { max-width: 100%; display: block; }
 .hero-subtitle {
   font-size: 1.1rem;
   color: var(--text-secondary);
-  margin-bottom: 36px;
+  margin-bottom: 0;
   max-width: 480px;
   line-height: 1.8;
 }
@@ -310,7 +355,7 @@ img { max-width: 100%; display: block; }
 .hero-actions {
   display: flex;
   gap: 16px;
-  margin-bottom: 48px;
+  margin-bottom: 32px;
   flex-wrap: wrap;
 }
 
@@ -391,23 +436,6 @@ img { max-width: 100%; display: block; }
 }
 
 /* Globe Visual */
-.hero-visual {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  position: relative;
-  /* 与左侧 hero-badge 等高，使地球与标题「用一行代码 环游世界」顶部对齐 */
-  padding-top: 58px;
-  width: 100%;
-}
-
-.globe-container {
-  position: relative;
-  width: 100%;
-  max-width: 420px;
-  margin: 0;
-}
-
 .globe-svg {
   width: 100%;
   height: auto;
@@ -481,9 +509,9 @@ img { max-width: 100%; display: block; }
   margin-top: 2px;
 }
 
-.fc-1 { top: 8%; right: -5%; animation-delay: 0s; }
-.fc-2 { top: 42%; left: -12%; animation-delay: -1.5s; }
-.fc-3 { bottom: 8%; right: 0; animation-delay: -3s; }
+.fc-1 { top: 5%; right: -8%; animation-delay: 0s; }
+.fc-2 { top: 38%; left: -14%; animation-delay: -1.5s; }
+.fc-3 { bottom: 10%; right: -2%; animation-delay: -3s; }
 
 @keyframes cardFloat {
   0%, 100% { transform: translateY(0); }
@@ -1120,17 +1148,17 @@ img { max-width: 100%; display: block; }
 
 /* ===== Responsive ===== */
 @media (max-width: 1024px) {
-  .hero {
+  .hero-top {
     grid-template-columns: 1fr;
     text-align: center;
-    padding-top: calc(var(--nav-height) + 20px);
+    gap: 28px;
   }
 
-  .hero-subtitle { margin: 0 auto 36px; }
+  .hero-subtitle { margin: 0 auto; max-width: 100%; }
   .hero-actions { justify-content: center; }
   .hero-stats { justify-content: center; }
-  .hero-visual { order: -1; padding-top: 0; margin-bottom: 8px; }
-  .globe-container { max-width: 300px; margin: 0 auto; }
+  .hero-visual { order: -1; }
+  .globe-container { max-width: 280px; }
 
   .dest-grid { grid-template-columns: repeat(2, 1fr); }
   .tools-grid { grid-template-columns: repeat(2, 1fr); }
diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
index 2a6f0f2..b1cae96 100644
--- a/frontend/src/components/Hero.tsx
+++ b/frontend/src/components/Hero.tsx
@@ -63,76 +63,86 @@ export default function Hero({ stats }: Props) {
       <div className="hero-bg-shapes">
         <div className="shape shape-1" /><div className="shape shape-2" /><div className="shape shape-3" />
       </div>
-      <div className="hero-content">
-        <div className="hero-badge reveal">
-          <span className="badge-dot" />
-          🚀 全球 {stats.total_nomads} 数字游民正在路上
-        </div>
-        <h1 className="hero-title reveal">
-          用一行代码<br /><span className="gradient-text">环游世界</span> 🌏
-        </h1>
-        <p className="hero-subtitle reveal">
-          <span id="typewriter" /><span className="typewriter-cursor">|</span>
-        </p>
-        <div className="hero-actions reveal">
-          <a href="#destinations" className="btn btn-primary">
-            <span>探索目的地</span>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
-          </a>
-          <a href="#calculator" className="btn btn-ghost"><span>🧮 费用计算</span></a>
-          <button className="btn btn-ghost hero-matcher-btn" onClick={() => {
-            window.dispatchEvent(new CustomEvent("open-matcher"));
-          }}><span>🎯 智能匹配</span></button>
-        </div>
-        <div className="hero-stats reveal">
-          <div className="stat-item">
-            <span className="stat-number" data-target={stats.countries}>0</span>
-            <span className="stat-label">🗺️ 可探索国家</span>
+
+      <div className="hero-inner">
+        <div className="hero-top">
+          <div className="hero-content">
+            <div className="hero-badge reveal">
+              <span className="badge-dot" />
+              🚀 全球 {stats.total_nomads} 数字游民正在路上
+            </div>
+            <h1 className="hero-title reveal">
+              用一行代码<br /><span className="gradient-text">环游世界</span> 🌏
+            </h1>
+            <p className="hero-subtitle reveal">
+              <span id="typewriter" /><span className="typewriter-cursor">|</span>
+            </p>
           </div>
-          <div className="stat-divider" />
-          <div className="stat-item">
-            <span className="stat-number" data-target={stats.avg_cost}>0</span>
-            <span className="stat-label">💰 平均月生活费 (千元)</span>
+
+          <div className="hero-visual reveal">
+            <div className="globe-container">
+              <svg className="globe-svg" viewBox="0 0 400 400">
+                <defs>
+                  <radialGradient id="globeGlow" cx="50%" cy="50%" r="50%">
+                    <stop offset="0%" stopColor="#4ECDC4" stopOpacity="0.3" />
+                    <stop offset="100%" stopColor="#4ECDC4" stopOpacity="0" />
+                  </radialGradient>
+                  <linearGradient id="orbitGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stopColor="#FF6B6B" /><stop offset="100%" stopColor="#4ECDC4" />
+                  </linearGradient>
+                </defs>
+                <circle cx="200" cy="200" r="160" fill="url(#globeGlow)" />
+                <circle cx="200" cy="200" r="120" fill="none" stroke="rgba(78,205,196,0.2)" strokeWidth="1" />
+                <ellipse cx="200" cy="200" rx="120" ry="40" fill="none" stroke="rgba(78,205,196,0.3)" strokeWidth="1.5" className="orbit-ring" />
+                <ellipse cx="200" cy="200" rx="40" ry="120" fill="none" stroke="rgba(255,107,107,0.3)" strokeWidth="1.5" className="orbit-ring orbit-ring-2" />
+                <path d="M160 140 Q180 130 200 135 Q220 128 240 140 Q250 155 245 170 Q235 185 220 190 Q200 195 185 188 Q165 180 160 165 Z" fill="rgba(78,205,196,0.4)" className="continent" />
+                <g className="nomad-dots">
+                  <circle cx="180" cy="155" r="5" fill="#FF6B6B" className="pulse-dot" />
+                  <circle cx="260" cy="215" r="5" fill="#FFE66D" className="pulse-dot" />
+                  <circle cx="145" cy="225" r="5" fill="#4ECDC4" className="pulse-dot" />
+                  <circle cx="220" cy="175" r="5" fill="#A78BFA" className="pulse-dot" />
+                </g>
+                <path d="M180 155 Q220 140 260 215" fill="none" stroke="url(#orbitGrad)" strokeWidth="2" strokeDasharray="6 4" className="flight-path" />
+              </svg>
+              <div className="floating-cards">
+                <div className="float-card fc-1">🏝️ 巴厘岛<br /><small>WiFi 98Mbps</small></div>
+                <div className="float-card fc-2">☕ 里斯本<br /><small>€800/月</small></div>
+                <div className="float-card fc-3">🏔️ 清迈<br /><small>⭐ 4.9</small></div>
+              </div>
+            </div>
           </div>
-          <div className="stat-divider" />
-          <div className="stat-item">
-            <span className="stat-number" data-target={stats.satisfaction}>0</span>
-            <span className="stat-label">😊 生活满意度 %</span>
-          </div>
-        </div>
-      </div>
-      <div className="hero-visual reveal">
-        <div className="globe-container">
-          <svg className="globe-svg" viewBox="0 0 400 400">
-            <defs>
-              <radialGradient id="globeGlow" cx="50%" cy="50%" r="50%">
-                <stop offset="0%" stopColor="#4ECDC4" stopOpacity="0.3" />
-                <stop offset="100%" stopColor="#4ECDC4" stopOpacity="0" />
-              </radialGradient>
-              <linearGradient id="orbitGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" stopColor="#FF6B6B" /><stop offset="100%" stopColor="#4ECDC4" />
-              </linearGradient>
-            </defs>
-            <circle cx="200" cy="200" r="160" fill="url(#globeGlow)" />
-            <circle cx="200" cy="200" r="120" fill="none" stroke="rgba(78,205,196,0.2)" strokeWidth="1" />
-            <ellipse cx="200" cy="200" rx="120" ry="40" fill="none" stroke="rgba(78,205,196,0.3)" strokeWidth="1.5" className="orbit-ring" />
-            <ellipse cx="200" cy="200" rx="40" ry="120" fill="none" stroke="rgba(255,107,107,0.3)" strokeWidth="1.5" className="orbit-ring orbit-ring-2" />
-            <path d="M160 140 Q180 130 200 135 Q220 128 240 140 Q250 155 245 170 Q235 185 220 190 Q200 195 185 188 Q165 180 160 165 Z" fill="rgba(78,205,196,0.4)" className="continent" />
-            <g className="nomad-dots">
-              <circle cx="180" cy="155" r="5" fill="#FF6B6B" className="pulse-dot" />
-              <circle cx="260" cy="215" r="5" fill="#FFE66D" className="pulse-dot" />
-              <circle cx="145" cy="225" r="5" fill="#4ECDC4" className="pulse-dot" />
-              <circle cx="220" cy="175" r="5" fill="#A78BFA" className="pulse-dot" />
-            </g>
-            <path d="M180 155 Q220 140 260 215" fill="none" stroke="url(#orbitGrad)" strokeWidth="2" strokeDasharray="6 4" className="flight-path" />
-          </svg>
-          <div className="floating-cards">
-            <div className="float-card fc-1">🏝️ 巴厘岛<br /><small>WiFi 98Mbps</small></div>
-            <div className="float-card fc-2">☕ 里斯本<br /><small>€800/月</small></div>
-            <div className="float-card fc-3">🏔️ 清迈<br /><small>⭐ 4.9</small></div>
+        </div>
+
+        <div className="hero-bottom reveal">
+          <div className="hero-actions">
+            <a href="#destinations" className="btn btn-primary">
+              <span>探索目的地</span>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
+            </a>
+            <a href="#calculator" className="btn btn-ghost"><span>🧮 费用计算</span></a>
+            <button className="btn btn-ghost hero-matcher-btn" onClick={() => {
+              window.dispatchEvent(new CustomEvent("open-matcher"));
+            }}><span>🎯 智能匹配</span></button>
+          </div>
+          <div className="hero-stats">
+            <div className="stat-item">
+              <span className="stat-number" data-target={stats.countries}>0</span>
+              <span className="stat-label">🗺️ 可探索国家</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat-item">
+              <span className="stat-number" data-target={stats.avg_cost}>0</span>
+              <span className="stat-label">💰 平均月生活费 (千元)</span>
+            </div>
+            <div className="stat-divider" />
+            <div className="stat-item">
+              <span className="stat-number" data-target={stats.satisfaction}>0</span>
+              <span className="stat-label">😊 生活满意度 %</span>
+            </div>
           </div>
         </div>
       </div>
+
       <div className="scroll-indicator">
         <span>向下滚动</span>
         <div className="scroll-arrow">