feat: optimize homepage layout

src/components/Footer.astro

@@ -7,7 +7,7 @@ import { site } from "../data/site";
   <div class="container footer-grid">
     <div class="footer-brand">
       <a href="/" class="footer-logo" aria-label="智引未来首页"><img src={logo.src} width="775" height="199" loading="lazy" alt="智引未来" /></a>
-      <p>科技蓝为品牌基底，增长绿为业务引擎。让企业在AI与社媒搜索中持续被看见、被理解、被推荐。</p>
+      <p>让企业在AI与社媒搜索中持续被看见、被理解、被推荐。</p>
       <div class="footer-tags"><span>GEO</span><span>SMO</span><span>AI全域优化</span></div>
     </div>
     <div><h2>探索智引</h2><a href="/about/">关于我们</a><a href="/methodology/">服务方法</a><a href="/articles/">洞察中心</a><a href="/faq/">常见问题</a></div>

src/pages/index.astro

@@ -32,6 +32,7 @@ const jsonLd = {
   <Header />
   <main id="main-content">
     <section class="hero">
+      <div class="hero__grid-lines" aria-hidden="true"></div>
       <div class="container hero__grid">
         <div class="hero__content" data-reveal>
           <h1>智引未来，让品牌<br /><em>被每一个搜索看见</em></h1>
@@ -66,7 +67,6 @@ const jsonLd = {
     </section>
 
     <section id="technology" class="section-pad tech-section">
-      <div class="tech-grid-lines"></div>
       <div class="container tech-layout">
         <div><SectionHeading eyebrow="TECHNOLOGY FOUNDATION" title="数据不是装饰，而是每次判断的起点" description="从跨平台采集、语义溯源到时序分析，五项自研能力支撑GEO与SMO的监测、诊断和复盘。" light /><a class="text-link text-link--light" href="/about/#technology">查看自研技术 <span>↗</span></a></div>
         <div class="tech-stack">{site.about.technologies.map((item, index) => <div data-reveal><span>0{index + 1}</span><strong>{item}</strong><i></i></div>)}</div>

src/styles/global.css

@@ -99,8 +99,9 @@ h1, h2, h3, strong { line-height: 1.25; }
 .header-cta { margin-left: 18px; }
 .mobile-nav { display: none; margin-left: auto; }
 
-.hero { position: relative; overflow: hidden; padding: 86px 0 0; background: #fff; }
-.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(430px,.94fr); align-items: center; gap: 0; min-height: 590px; }
+.hero { position: relative; overflow: hidden; padding: 72px 0 0; background: #fff; }
+.hero__grid-lines { position: absolute; z-index: 1; inset: 0; opacity: .58; pointer-events: none; background-image: linear-gradient(rgba(20,115,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(20,115,230,.07) 1px,transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg,#000 0,#000 45%,transparent 62%); }
+.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(430px,.94fr); align-items: center; gap: 0; min-height: 590px; }
 .hero__content { position: relative; z-index: 3; padding: 0 34px 60px 0; }
 .hero h1 { margin-bottom: 28px; color: var(--text-primary); font-size: clamp(48px, 5.3vw, 76px); font-weight: 760; letter-spacing: -.055em; line-height: 1.12; }
 .hero h1 em { color: transparent; background: var(--gradient-brand); background-clip: text; -webkit-background-clip: text; font-style: normal; }
@@ -161,15 +162,14 @@ h1, h2, h3, strong { line-height: 1.25; }
 .support-service-grid p { margin: 0; color: var(--text-secondary); font-size: 13px; }
 .support-service-grid i { color: var(--brand-blue); font-style: normal; font-size: 20px; }
 
-.tech-section { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(20,115,230,.3), transparent 35%), var(--dark-bg); }
-.tech-grid-lines { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(67,212,232,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(67,212,232,.6) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, transparent, #000 40%, #000); }
+.tech-section { position: relative; overflow: hidden; color: #fff; background: var(--dark-bg); }
 .tech-layout { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
 .tech-layout .text-link { margin-top: 30px; }
 .tech-stack { border-top: 1px solid rgba(255,255,255,.16); }
 .tech-stack > div { display: grid; grid-template-columns: 42px 1fr 60px; align-items: center; min-height: 76px; border-bottom: 1px solid rgba(255,255,255,.14); }
 .tech-stack span { color: var(--brand-cyan); font-size: 11px; }
 .tech-stack strong { color: rgba(255,255,255,.9); font-size: 15px; }
-.tech-stack i { height: 3px; background: linear-gradient(90deg,var(--brand-blue),var(--brand-teal)); transform-origin: left; transition: transform .3s; }
+.tech-stack i { height: 3px; background: var(--brand-teal); transform-origin: left; transition: transform .3s; }
 .tech-stack > div:hover i { transform: scaleX(1.35); }
 .tech-data-row { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 76px; border: 1px solid rgba(255,255,255,.12); }
 .tech-data-row > div { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-right: 1px solid rgba(255,255,255,.12); }
@@ -177,14 +177,20 @@ h1, h2, h3, strong { line-height: 1.25; }
 .tech-data-row strong { color: var(--brand-cyan); font-size: 14px; letter-spacing: .08em; }
 .tech-data-row span { color: rgba(255,255,255,.58); font-size: 12px; }
 
-.workflow-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
-.workflow-grid article { padding: 32px 28px; border-right: 1px solid var(--border-default); }
-.workflow-grid article:last-child { border-right: 0; }
-.workflow-grid article > div { display: flex; justify-content: space-between; margin-bottom: 40px; }
-.workflow-grid article span { color: var(--brand-blue); font-size: 12px; font-weight: 700; }
-.workflow-grid article i { color: var(--brand-teal); font-style: normal; }
-.workflow-grid h3 { margin-bottom: 12px; font-size: 24px; }
-.workflow-grid p { margin: 0; color: var(--text-secondary); font-size: 14px; }
+.workflow-grid { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--border-default); background: #edf4fc; }
+.workflow-grid article { position: relative; min-height: 280px; padding: 30px 42px 30px 30px; overflow: hidden; }
+.workflow-grid article::before { position: absolute; z-index: 0; inset: 0 5px 0 0; content: ""; background: #fff; clip-path: polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%); transition: background .25s; }
+.workflow-grid article:nth-child(2)::before { background: #f7fbff; }
+.workflow-grid article:nth-child(3)::before { background: #f4fbf8; }
+.workflow-grid article:last-child::before { right: 0; clip-path: none; }
+.workflow-grid article:hover::before { background: #f5f9fe; }
+.workflow-grid article:nth-child(3):hover::before { background: #eef9f4; }
+.workflow-grid article > * { position: relative; z-index: 1; }
+.workflow-grid article > div { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 42px; }
+.workflow-grid article span { color: var(--brand-blue); font-size: 38px; font-weight: 720; letter-spacing: -.06em; line-height: 1; }
+.workflow-grid article i { margin-top: 7px; color: var(--brand-teal); font-size: 17px; font-style: normal; line-height: 1; }
+.workflow-grid h3 { margin-bottom: 13px; font-size: 23px; letter-spacing: -.02em; }
+.workflow-grid p { max-width: 235px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.85; }
 
 .scenario-section { background: linear-gradient(90deg,#f8fbff 0,#f8fbff 45%,#f1fbf8 100%); }
 .scenario-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
@@ -527,16 +533,15 @@ h1, h2, h3, strong { line-height: 1.25; }
   .section-pad { padding: 82px 0; }
   .hero { padding-top: 60px; }
   .hero__grid,.service-hero__inner,.contact-hero__grid { grid-template-columns: 1fr; }
-  .hero__content { padding-bottom: 0; }
+  .hero__content { padding-right: 0; padding-bottom: 0; }
   .hero-platform-flow { width: min(100%,620px); margin: 0 auto 55px; }
   .stat-grid { grid-template-columns: repeat(2,1fr); }
   .stat-grid > div:nth-child(2) { border-right: 0; }
   .engine-grid { grid-template-columns: 1fr; }
   .tech-layout,.scenario-layout,.about-intro-layout,.delivery-layout,.visit-grid,.service-cap-layout,.service-feature-layout { grid-template-columns: 1fr; }
   .tech-data-row,.workflow-grid,.method-flow,.process-grid { grid-template-columns: repeat(2,1fr); }
-  .tech-data-row > div:nth-child(2),.workflow-grid article:nth-child(2),.process-grid article:nth-child(2) { border-right: 0; }
-  .tech-data-row > div:nth-child(-n+2),.workflow-grid article:nth-child(-n+2),.process-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
-  .workflow-grid article:nth-child(-n+2) { border-bottom-color: var(--border-default); }
+  .tech-data-row > div:nth-child(2),.process-grid article:nth-child(2) { border-right: 0; }
+  .tech-data-row > div:nth-child(-n+2),.process-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
   .service-detail { grid-template-columns: 1fr; }
   .service-detail--reverse .service-detail__visual { order: 0; }
   .connection-map { grid-template-columns: repeat(2,1fr); gap: 14px; }
@@ -565,6 +570,7 @@ h1, h2, h3, strong { line-height: 1.25; }
   .mobile-nav nav { top: 68px; max-height: calc(100vh - 68px); }
   .section-pad { padding: 66px 0; }
   .section-heading h2 { font-size: 34px; }
+  #workflow .section-heading h2 { font-size: 32px; letter-spacing: -.045em; }
   .section-heading p { font-size: 15px; }
   .section-intro-row { align-items: flex-start; flex-direction: column; margin-bottom: 38px; }
   .hero { padding-top: 42px; }
@@ -582,9 +588,8 @@ h1, h2, h3, strong { line-height: 1.25; }
   .support-service-grid,.scenario-grid,.service-cap-grid,.delivery-grid,.principle-grid,.contact-grid,.article-grid,.advantage-grid { grid-template-columns: 1fr; }
   .tech-layout,.scenario-layout,.about-intro-layout,.delivery-layout,.visit-grid,.service-cap-layout,.service-feature-layout { gap: 46px; }
   .tech-data-row,.workflow-grid,.method-flow,.process-grid { grid-template-columns: 1fr; }
-  .tech-data-row > div,.workflow-grid article,.process-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
-  .workflow-grid article { border-bottom-color: var(--border-default); }
-  .tech-data-row > div:last-child,.workflow-grid article:last-child,.process-grid article:last-child { border-bottom: 0; }
+  .tech-data-row > div,.process-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
+  .tech-data-row > div:last-child,.process-grid article:last-child { border-bottom: 0; }
   .service-detail { padding: 16px; border-radius: 14px; }
   .service-detail__visual { min-height: 370px; }
   .service-detail__content { padding: 14px 10px 22px; }