增加服务入口图片卡片

styles.css

@@ -313,6 +313,14 @@ h1 {
   margin-bottom: 22px;
 }
 
+.section-note {
+  max-width: 420px;
+  margin-bottom: 0;
+  color: var(--muted);
+  line-height: 1.7;
+  text-align: right;
+}
+
 h2 {
   margin-bottom: 0;
   font-size: clamp(1.9rem, 3vw, 3rem);
@@ -323,45 +331,69 @@ h2 {
 .services {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 18px;
+  gap: 20px;
 }
 
 .service-card {
   position: relative;
-  display: flex;
-  min-height: 206px;
-  flex-direction: column;
-  padding: 24px;
+  display: block;
+  min-height: 280px;
   overflow: hidden;
-  background: var(--panel);
+  background: #0f1d34;
   border: 1px solid var(--line);
-  border-radius: 18px;
-  box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
+  border-radius: 20px;
+  box-shadow: 0 18px 42px rgba(38, 57, 96, 0.16);
   transition:
     transform 180ms ease,
     border-color 180ms ease,
     box-shadow 180ms ease;
 }
 
-.service-card::after {
+.service-card::before {
   position: absolute;
-  right: -34px;
-  bottom: -34px;
-  width: 112px;
-  height: 112px;
-  border-radius: 999px;
-  opacity: 0.12;
+  inset: 0;
+  z-index: 1;
+  background:
+    linear-gradient(180deg, rgba(8, 21, 44, 0.02) 12%, rgba(8, 21, 44, 0.42) 54%, rgba(8, 21, 44, 0.9) 100%),
+    linear-gradient(135deg, rgba(36, 107, 254, 0.24), transparent 54%);
   content: "";
+  transition: opacity 180ms ease;
 }
 
 .service-card:hover,
 .service-card:focus-visible {
-  transform: translateY(-6px);
+  transform: translateY(-8px);
   border-color: rgba(36, 107, 254, 0.28);
-  box-shadow: 0 22px 52px rgba(57, 83, 132, 0.16);
+  box-shadow: 0 28px 62px rgba(38, 57, 96, 0.2);
   outline: none;
 }
 
+.service-card:hover img,
+.service-card:focus-visible img {
+  transform: scale(1.06);
+}
+
+.service-card img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 280px;
+  object-fit: cover;
+  transition: transform 260ms ease;
+}
+
+.service-content {
+  position: absolute;
+  inset: auto 0 0;
+  z-index: 2;
+  display: flex;
+  min-height: 55%;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 22px;
+  color: #fff;
+}
+
 .service-icon {
   display: inline-flex;
   width: fit-content;
@@ -371,49 +403,29 @@ h2 {
   justify-content: center;
   padding: 0 12px;
   margin-bottom: auto;
-  border-radius: 10px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 999px;
   font-size: 0.82rem;
   font-weight: 900;
+  backdrop-filter: blur(12px);
 }
 
 .service-title {
-  margin-top: 42px;
-  color: #14233f;
+  margin-top: 74px;
+  color: #fff;
   font-size: 1.18rem;
   font-weight: 900;
 }
 
 .service-desc {
   margin-top: 8px;
-  color: var(--muted);
+  color: rgba(255, 255, 255, 0.78);
   font-size: 0.94rem;
   line-height: 1.55;
 }
 
-.accent-blue .service-icon,
-.accent-blue::after {
-  color: var(--blue);
-  background: rgba(36, 107, 254, 0.1);
-}
-
-.accent-green .service-icon,
-.accent-green::after {
-  color: var(--green);
-  background: rgba(25, 185, 130, 0.12);
-}
-
-.accent-orange .service-icon,
-.accent-orange::after {
-  color: var(--orange);
-  background: rgba(255, 138, 61, 0.12);
-}
-
-.accent-purple .service-icon,
-.accent-purple::after {
-  color: var(--purple);
-  background: rgba(120, 100, 246, 0.12);
-}
-
 .record {
   justify-content: center;
   gap: 16px;
@@ -453,6 +465,15 @@ h2 {
   .services {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .section-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .section-note {
+    text-align: left;
+  }
 }
 
 @media (max-width: 560px) {
@@ -509,6 +530,11 @@ h2 {
     grid-template-columns: 1fr;
   }
 
+  .service-card,
+  .service-card img {
+    min-height: 230px;
+  }
+
   .record {
     align-items: center;
     flex-direction: column;