feat: 更新首页的样式

src/styles/global.css

@@ -110,13 +110,13 @@ button {
   align-items: center;
   gap: 8px;
   white-space: nowrap;
-  font-size: 16px;
+  font-size: 24px;
   font-weight: 700;
   letter-spacing: 0.01em;
 }
 
 .brand-copy strong {
-  color: var(--brand-strong);
+  color: #1f2430;
 }
 
 .brand-copy span {
@@ -133,7 +133,7 @@ button {
 .nav-link {
   position: relative;
   padding: 8px 0;
-  font-size: 13px;
+  font-size: 18px;
   font-weight: 700;
   color: #44423f;
   letter-spacing: 0.04em;
@@ -215,6 +215,13 @@ button {
   padding: 92px 0 60px;
 }
 
+.index-hero {
+  background-image: url('/images/index-hero-bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
 .hero.centered {
   text-align: center;
 }
@@ -243,8 +250,8 @@ button {
 .hero-subtitle {
   max-width: 640px;
   margin: 18px auto 0;
-  color: #a7a29e;
-  font-size: 14px;
+  color: #2875FF;
+  font-size: 30px;
   line-height: 1.9;
   letter-spacing: 0.04em;
 }
@@ -363,29 +370,6 @@ button {
   overflow: hidden;
 }
 
-.art-panel::before,
-.art-panel::after {
-  content: "";
-  position: absolute;
-  border-radius: 999px;
-}
-
-.art-panel::before {
-  width: 240px;
-  height: 240px;
-  top: -80px;
-  right: -60px;
-  background: radial-gradient(circle, rgba(122, 160, 255, 0.26), rgba(122, 160, 255, 0));
-}
-
-.art-panel::after {
-  width: 180px;
-  height: 180px;
-  left: -50px;
-  bottom: -40px;
-  background: radial-gradient(circle, rgba(242, 136, 119, 0.18), rgba(242, 136, 119, 0));
-}
-
 .art-panel img {
   width: 100%;
   height: auto;
@@ -504,6 +488,53 @@ button {
   max-width: 540px;
 }
 
+/* 展示型卡片（师资亮点 / 学习体验） */
+.showcase-card {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* 图片区域：标题叠在图片上方 */
+.showcase-hero {
+  position: relative;
+}
+
+.showcase-hero img {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+  display: block;
+}
+
+.showcase-title {
+  position: absolute;
+  top: 28px;
+  left: 32px;
+  margin: 0;
+  color: #4986CB;
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  z-index: 1;
+}
+
+/* 文字区域 */
+.showcase-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 28px 34px 34px;
+}
+
+.card-action {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: auto;
+  padding-top: 24px;
+}
+
 .quote-card {
   padding: 48px;
   text-align: center;
@@ -787,24 +818,36 @@ button {
 /* ========== Bento 网格（首页"我们的优势"） ========== */
 .bento-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
-  grid-template-rows: auto auto;
   gap: 24px;
 }
 
-.bento-grid .bento-hero {
-  grid-row: 1 / 2;
-  grid-column: 1 / 2;
+/* 左图右文卡片 */
+.index-left-right {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 0;
+  overflow: hidden;
+  max-height: 480px;
 }
 
-.bento-grid .bento-side {
-  grid-row: 1 / 2;
-  grid-column: 2 / 3;
+.index-left-right .bento-hero {
+  min-height: 320px;
+}
+
+.index-left-right .bento-hero .art-panel {
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+
+.index-left-right .bento-side {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 40px 56px;
 }
 
 .bento-grid .bento-row {
-  grid-row: 2 / 3;
-  grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
@@ -972,7 +1015,6 @@ button {
 }
 
 .card-with-thumb .card-thumb {
-  padding: 28px 24px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -980,7 +1022,6 @@ button {
 }
 
 .card-with-thumb .card-thumb img {
-  max-height: 160px;
   object-fit: contain;
 }
 
@@ -1125,25 +1166,15 @@ button {
     max-width: none;
   }
 
-  .bento-grid {
+  .index-left-right {
     grid-template-columns: 1fr;
   }
 
-  .bento-grid .bento-hero,
-  .bento-grid .bento-side {
-    grid-column: 1;
-  }
-
-  .bento-grid .bento-hero {
-    grid-row: auto;
-  }
-
-  .bento-grid .bento-side {
-    grid-row: auto;
+  .index-left-right .bento-side {
+    padding: 28px;
   }
 
   .bento-grid .bento-row {
-    grid-column: 1;
     grid-template-columns: 1fr;
   }
 
@@ -1191,7 +1222,7 @@ button {
 
   .brand-copy {
     gap: 6px;
-    font-size: 14px;
+    font-size: 24px;
   }
 
   .hero-actions {