Refine hero logo placement

css/style.css

@@ -74,6 +74,19 @@ body {
     height: 100%;
     object-fit: cover;
     opacity: 0.26;
+    z-index: 0;
+}
+
+.hero-brand-slide::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(105deg, rgba(70, 150, 205, 0.56) 0%, rgba(86, 128, 205, 0.44) 46%, rgba(115, 92, 175, 0.36) 100%);
+}
+
+.hero-brand-slide > img {
+    opacity: 0.18;
 }
 
 .hero-content {
@@ -98,11 +111,14 @@ body {
 }
 
 .hero-brand-content {
+    max-width: 920px;
+    padding-left: 82px;
+}
+
+.hero-brand-heading {
     display: flex;
     align-items: center;
     gap: 34px;
-    max-width: 920px;
-    padding-left: 82px;
 }
 
 .hero-brand-logo {
@@ -113,8 +129,13 @@ body {
     filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
 }
 
-.hero-brand-copy {
-    min-width: 0;
+.hero-brand-heading h1 {
+    margin-bottom: 0;
+}
+
+.hero-brand-btn {
+    margin-top: 28px;
+    margin-left: 214px;
 }
 
 /* 按钮样式 */
@@ -294,15 +315,22 @@ body {
 /* 响应式设计 */
 @media (max-width: 768px) {
     .hero-brand-content {
-        gap: 20px;
         padding-left: 32px;
         padding-right: 20px;
     }
 
+    .hero-brand-heading {
+        gap: 20px;
+    }
+
     .hero-brand-logo {
         width: 128px;
     }
 
+    .hero-brand-btn {
+        margin-left: 148px;
+    }
+
     .hero-content h1 {
         font-size: 2rem;
     }
@@ -336,6 +364,9 @@ body {
 
     .hero-brand-content {
         padding-left: 20px;
+    }
+
+    .hero-brand-heading {
         gap: 14px;
     }
 
@@ -344,6 +375,11 @@ body {
         max-width: 28vw;
     }
 
+    .hero-brand-btn {
+        margin-top: 20px;
+        margin-left: 108px;
+    }
+
     .hero-content h1 {
         font-size: 1.5rem;
     }

index.html

@@ -95,11 +95,11 @@
             <!-- 第一张：公司理念 -->
             <div class="hero-slide hero-brand-slide active">
                 <div class="hero-content hero-brand-content">
-                    <img class="hero-brand-logo" src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo">
-                    <div class="hero-brand-copy">
+                    <div class="hero-brand-heading">
+                        <img class="hero-brand-logo" src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo">
                         <h1>海古纪 · 生命孪生体系——生命从此被计算</h1>
-                        <button class="btn-primary">了解更多</button>
                     </div>
+                    <button class="btn-primary hero-brand-btn">了解更多</button>
                 </div>
                 <img src="公司资料/产品/HSmaster/图片/育种发展流程-从人工选择到智能育种.png" alt="从人工选择到智能育种">
             </div>