@charset "utf-8";
/* ============================================================
   首页新版样式（2026-11-06）
   配色沿用站点主色绿 #009b4c，结构参考阿里云首页框架：
   首屏 → 数据 → 场景入口 → 产品矩阵 → 服务能力 → 案例 → 资讯 → 行动区
   全部使用 hp- 前缀，不改动原有 index.css 规则
   ============================================================ */

.hp-hero,
.hp-stats,
.hp-sec,
.hp-cta,
.hp-tags,
.hp-prod-card,
.hp-quick-grid a,
.hp-svc-card,
.hp-case-card,
.hp-news-item,
.hp-btn{
    box-sizing:border-box;
}

.hp-wrap{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:0 40px;
}

/* ---------- 按钮 ---------- */
.hp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:52px;
    padding:0 30px;
    border-radius:10px;
    font-size:16px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    transition:transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.hp-btn i{font-size:14px;}
.hp-btn:hover{transform:translateY(-1px);}
.hp-btn-main{
    background:#009b4c;
    color:#fff;
    box-shadow:0 8px 20px rgba(0,155,76,.28);
}
.hp-btn-main:hover{
    background:#008843;
    box-shadow:0 12px 26px rgba(0,155,76,.34);
}
.hp-btn-ghost{
    color:#fff;
    border:1px solid rgba(255,255,255,.38);
    background:rgba(255,255,255,.06);
}
.hp-btn-ghost:hover{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.62);
}
.hp-btn-white{
    background:#fff;
    color:#04663a;
}
.hp-btn-white:hover{background:#f2fbf6;}
.hp-btn-line{
    color:#fff;
    border:1px solid rgba(255,255,255,.55);
}
.hp-btn-line:hover{background:rgba(255,255,255,.14);}

/* ---------- 首屏 ---------- */
.hp-hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(1100px 520px at 88% -10%, rgba(0,196,110,.34), transparent 62%),
        radial-gradient(760px 420px at 12% 108%, rgba(0,155,76,.26), transparent 66%),
        linear-gradient(128deg, #052a1d 0%, #064c31 52%, #04713f 100%);
    color:#fff;
}
.hp-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
    pointer-events:none;
}
.hp-hero-in{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    padding-top:78px;
    padding-bottom:96px;
}
.hp-hero-l{max-width:760px;}
.hp-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 14px;
    margin-bottom:22px;
    border-radius:999px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.16);
    font-size:13px;
    letter-spacing:.4px;
    color:#d9f3e4;
}
.hp-title{
    font-size:52px;
    line-height:1.24;
    font-weight:700;
    letter-spacing:-.5px;
    margin-bottom:22px;
}
.hp-title span{color:#5fe0a0;}
.hp-sub{
    font-size:16px;
    line-height:1.85;
    color:rgba(255,255,255,.82);
    max-width:660px;
    margin-bottom:34px;
}
.hp-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:18px;
}
.hp-hero-note{
    font-size:13px;
    color:rgba(255,255,255,.55);
    letter-spacing:.3px;
}

/* 首屏右侧能力卡 */
.hp-hero-r{width:400px;flex:0 0 auto;}
.hp-hero-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    padding:26px 26px 10px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.hp-hero-card h2{
    font-size:15px;
    font-weight:600;
    color:#fff;
    letter-spacing:.5px;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.hp-hero-card ul{display:grid;gap:2px;}
.hp-hero-card li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.hp-hero-card li:last-child{border-bottom:0;}
.hp-hero-card li i{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:rgba(0,196,110,.18);
    color:#5fe0a0;
    font-size:15px;
}
.hp-hero-card li b{
    display:block;
    font-size:15px;
    font-weight:600;
    margin-bottom:3px;
    color:#fff;
}
.hp-hero-card li span{
    display:block;
    font-size:13px;
    line-height:1.6;
    color:rgba(255,255,255,.62);
}

/* ---------- 数据条 ---------- */
.hp-stats{
    position:relative;
    z-index:3;
    margin-top:-46px;
    padding-bottom:0;
}
.hp-stats-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border:1px solid #e8efeb;
    border-radius:16px;
    box-shadow:0 16px 40px rgba(9,58,39,.1);
    overflow:hidden;
}
.hp-stats-list li{
    padding:30px 24px;
    text-align:center;
    border-right:1px solid #eef3f0;
}
.hp-stats-list li:last-child{border-right:0;}
.hp-stats-list b{
    display:block;
    font-size:38px;
    font-weight:700;
    line-height:1.1;
    color:#065c36;
    letter-spacing:-.5px;
    white-space:nowrap;
}
.hp-unit{
    font-size:16px;
    font-weight:500;
    margin-left:3px;
    color:#009b4c;
}
/* 修正：.hp-stats-list span 的 display:block 会命中 .hp-unit，导致「年 / + / 州市」掉到下一行 */
.hp-stats-list span.hp-unit{
    display:inline;
    margin-top:0;
    font-size:16px;
    font-weight:500;
    color:#009b4c;
}
.hp-stats-list span{
    display:block;
    margin-top:8px;
    font-size:14px;
    color:#68786f;
}

/* ---------- 区块通用 ---------- */
.hp-sec{padding:84px 0;}
.hp-head{margin-bottom:40px;}
.hp-head h2{
    font-size:34px;
    line-height:1.35;
    font-weight:700;
    color:#12211c;
    letter-spacing:-.3px;
}
.hp-head p{
    margin-top:12px;
    font-size:16px;
    color:#68786f;
}
.hp-head-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}
.hp-more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    color:#009b4c;
    white-space:nowrap;
    padding-bottom:4px;
}
.hp-more i{font-size:12px;transition:transform .25s;}
.hp-more:hover i{transform:translateX(4px);}

/* ---------- 场景入口 ---------- */
.hp-quick{padding-bottom:72px;}
.hp-quick-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;
}
.hp-quick-grid a{
    display:block;
    padding:24px 20px;
    background:#fff;
    border:1px solid #e8efeb;
    border-radius:14px;
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
.hp-quick-grid a i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-bottom:16px;
    border-radius:12px;
    background:#eaf7f0;
    color:#009b4c;
    font-size:18px;
    transition:background .25s, color .25s;
}
.hp-quick-grid a b{
    display:block;
    font-size:17px;
    font-weight:600;
    color:#12211c;
    margin-bottom:6px;
}
.hp-quick-grid a span{
    display:block;
    font-size:13px;
    line-height:1.6;
    color:#7b8a82;
}
.hp-quick-grid a:hover{
    transform:translateY(-4px);
    border-color:#bfe6d2;
    box-shadow:0 14px 30px rgba(9,58,39,.1);
}
.hp-quick-grid a:hover i{
    background:#009b4c;
    color:#fff;
}

/* ---------- 产品矩阵 ---------- */
.hp-prod{background:#f5f8f6;}
.hp-prod-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.hp-prod-card{
    display:block;
    background:#fff;
    border:1px solid #e8efeb;
    border-radius:16px;
    overflow:hidden;
    transition:transform .28s, box-shadow .28s, border-color .28s;
}
.hp-prod-pic{
    height:210px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:linear-gradient(180deg, #fbfdfc, #f1f6f3);
}
.hp-prod-pic img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    transition:transform .35s;
}
.hp-prod-txt{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:20px 24px;
    border-top:1px solid #eef3f0;
}
.hp-prod-txt b{
    font-size:18px;
    font-weight:600;
    color:#12211c;
}
.hp-prod-txt span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#84968c;
    transition:color .25s;
}
.hp-prod-txt span i{font-size:11px;transition:transform .25s;}
.hp-prod-card:hover{
    transform:translateY(-5px);
    border-color:#bfe6d2;
    box-shadow:0 18px 38px rgba(9,58,39,.12);
}
.hp-prod-card:hover .hp-prod-pic img{transform:scale(1.05);}
.hp-prod-card:hover .hp-prod-txt span{color:#009b4c;}
.hp-prod-card:hover .hp-prod-txt span i{transform:translateX(3px);}

/* ---------- 服务能力 ---------- */
.hp-svc-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.hp-svc-card{
    padding:32px 28px;
    background:#fff;
    border:1px solid #e8efeb;
    border-radius:16px;
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
.hp-svc-card i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:20px;
    border-radius:14px;
    background:#eaf7f0;
    color:#009b4c;
    font-size:21px;
}
.hp-svc-card b{
    display:block;
    font-size:19px;
    font-weight:600;
    color:#12211c;
    margin-bottom:10px;
}
.hp-svc-card p{
    font-size:14px;
    line-height:1.85;
    color:#68786f;
}
.hp-svc-card:hover{
    transform:translateY(-4px);
    border-color:#bfe6d2;
    box-shadow:0 16px 34px rgba(9,58,39,.1);
}

/* ---------- 工程案例 ---------- */
.hp-case{background:#f5f8f6;}
.hp-case-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.hp-case-card{
    display:block;
    background:#fff;
    border:1px solid #e8efeb;
    border-radius:16px;
    overflow:hidden;
    transition:transform .28s, box-shadow .28s, border-color .28s;
}
.hp-case-pic{
    aspect-ratio:16/10;
    overflow:hidden;
    background:#eef3f0;
}
.hp-case-pic img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s;
}
.hp-case-card h3{
    padding:18px 22px 20px;
    font-size:16px;
    font-weight:500;
    line-height:1.55;
    color:#1b2b24;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.hp-case-card:hover{
    transform:translateY(-5px);
    border-color:#bfe6d2;
    box-shadow:0 18px 38px rgba(9,58,39,.12);
}
.hp-case-card:hover .hp-case-pic img{transform:scale(1.06);}

/* ---------- 资讯 ---------- */
.hp-news-wrap{
    display:flex;
    gap:56px;
    align-items:flex-start;
}
.hp-news-l{
    width:340px;
    flex:0 0 340px;
    padding-top:6px;
}
.hp-news-l h2{
    font-size:32px;
    line-height:1.4;
    font-weight:700;
    color:#12211c;
}
.hp-news-l p{
    margin-top:16px;
    font-size:15px;
    line-height:1.9;
    color:#68786f;
}
.hp-news-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px;
}
.hp-news-links a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border:1px solid #e2ebe6;
    border-radius:999px;
    font-size:14px;
    color:#3d4f47;
    transition:all .25s;
}
.hp-news-links a i{font-size:11px;}
.hp-news-links a:hover{
    border-color:#009b4c;
    color:#009b4c;
    background:#f2fbf6;
}
.hp-news-r{
    flex:1;
    min-width:0;
    border-top:1px solid #e8efeb;
}
.hp-news-item{
    display:flex;
    align-items:center;
    gap:20px;
    padding:20px 6px;
    border-bottom:1px solid #e8efeb;
    transition:background .2s, padding .2s;
}
.hp-news-pic{
    width:132px;
    height:82px;
    flex:0 0 132px;
    border-radius:10px;
    overflow:hidden;
    background:#eef3f0;
}
.hp-news-pic img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s;
}
.hp-news-txt{flex:1;min-width:0;}
.hp-news-txt h3{
    font-size:16px;
    font-weight:500;
    line-height:1.6;
    color:#1b2b24;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.hp-news-item time{
    flex:0 0 auto;
    font-size:13px;
    color:#8a9a91;
    font-variant-numeric:tabular-nums;
}
.hp-news-item:hover{background:#fafcfb;}
.hp-news-item:hover .hp-news-pic img{transform:scale(1.06);}
.hp-news-item:hover .hp-news-txt h3{color:#009b4c;}

/* ---------- 行动区 ---------- */
.hp-cta{
    background:
        radial-gradient(720px 320px at 82% 0%, rgba(0,196,110,.3), transparent 60%),
        linear-gradient(120deg, #052a1d 0%, #06502f 100%);
    color:#fff;
}
.hp-cta-in{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding-top:58px;
    padding-bottom:58px;
}
.hp-cta h2{
    font-size:30px;
    font-weight:700;
    margin-bottom:12px;
}
.hp-cta p{
    font-size:15px;
    color:rgba(255,255,255,.76);
    line-height:1.8;
}
.hp-cta-btns{
    display:flex;
    gap:14px;
    flex:0 0 auto;
}

/* ---------- 热门标签 ---------- */
.hp-tags{
    padding:34px 0 46px;
    background:#fff;
    border-top:1px solid #eef3f0;
}
.hp-tags .hp-wrap{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}
.hp-tags-t{
    font-size:13px;
    color:#8a9a91;
    margin-right:6px;
}
.hp-tags a{
    display:inline-block;
    padding:7px 14px;
    background:#f5f8f6;
    border-radius:999px;
    font-size:13px;
    color:#4a5b53;
    transition:all .22s;
}
.hp-tags a:hover{
    background:#009b4c;
    color:#fff;
}

/* ---------- 关于追风 ---------- */
.hp-about{
    padding:84px 0;
    background:#fff;
}
.hp-about-in{
    display:flex;
    gap:64px;
    align-items:flex-start;
}
.hp-about-l{flex:1;min-width:0;}
.hp-kicker{
    display:inline-block;
    font-size:13px;
    letter-spacing:1px;
    color:#009b4c;
    padding:6px 12px;
    border-radius:999px;
    background:#eaf7f0;
    margin-bottom:16px;
}
.hp-about-l h2{
    font-size:32px;
    line-height:1.4;
    font-weight:700;
    color:#12211c;
    margin-bottom:20px;
}
.hp-about-txt{
    font-size:15px;
    line-height:1.95;
    color:#5c6d64;
}
.hp-about-txt img{display:none;}
.hp-about-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:24px;
    font-size:15px;
    color:#009b4c;
}
.hp-about-link i{font-size:12px;transition:transform .25s;}
.hp-about-link:hover i{transform:translateX(4px);}
/* 注意：.hp-about-r 是 div，四张卡在它里面的 ul>li。
   网格必须挂在 ul 上——挂在外层 div 时整个 ul 只占一列（250px），
   四张卡会在窄列里竖排，gap 完全不作用于 li，边框彼此贴合。 */
.hp-about-r{
    width:520px;
    flex:0 0 520px;
}
.hp-about-r ul{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin:0;
    padding:0;
    list-style:none;
}
.hp-about-r li{
    margin:0;
    padding:24px 22px;
    background:#f7faf8;
    border:1px solid #e8efeb;
    border-radius:14px;
}
.hp-about-r b{
    display:block;
    font-size:17px;
    font-weight:600;
    color:#0d3a28;
    margin-bottom:8px;
}
.hp-about-r span{
    display:block;
    font-size:13px;
    line-height:1.75;
    color:#6b7c73;
}
@media (max-width:1200px){
    .hp-about-in{flex-direction:column;gap:32px;}
    .hp-about-r{width:100%;flex:none;}
}
@media (max-width:900px){
    .hp-about{padding:60px 0;}
    .hp-about-l h2{font-size:26px;}
    /* 单列排列后拉开卡片间距，否则四张要点卡边框相接 */
    .hp-about-r ul{grid-template-columns:1fr;gap:24px;}
    .hp-about-r li{padding:22px 20px;}
}

/* ---------- 响应式 ---------- */
@media (max-width:1520px){
    .hp-wrap{max-width:1200px;}
    .hp-title{font-size:46px;}
    .hp-hero-in{gap:40px;}
    .hp-hero-r{width:340px;}
    .hp-quick-grid a{padding:22px 16px;}
    .hp-quick-grid a span{font-size:12.5px;}
}
@media (max-width:1200px){
    .hp-wrap{padding-left:24px;padding-right:24px;}
    .hp-quick-grid{grid-template-columns:repeat(3,1fr);}
    .hp-hero-in{
        flex-direction:column;
        align-items:flex-start;
        gap:36px;
        padding-top:44px;
        padding-bottom:72px;
    }
    .hp-hero-l{max-width:100%;}
    .hp-hero-r{width:100%;}
    .hp-hero-card ul{
        grid-template-columns:repeat(2,1fr);
        display:grid;
        gap:0 24px;
    }
    .hp-title{font-size:40px;}
    .hp-stats-list b{font-size:32px;}
    .hp-prod-grid,
    .hp-case-grid{grid-template-columns:repeat(2,1fr);}
    .hp-svc-grid{grid-template-columns:repeat(2,1fr);}
    .hp-news-wrap{flex-direction:column;gap:32px;}
    .hp-news-l{width:100%;flex:none;}
    .hp-cta-in{flex-direction:column;align-items:flex-start;gap:26px;}
}
@media (max-width:900px){
    .hp-sec{padding:60px 0;}
    .hp-head h2{font-size:27px;}
    .hp-head-row{flex-direction:column;align-items:flex-start;gap:14px;}
    .hp-title{font-size:32px;}
    .hp-sub{font-size:15px;}
    .hp-stats-list{grid-template-columns:repeat(2,1fr);}
    .hp-stats-list li:nth-child(2){border-right:0;}
    .hp-stats-list li:nth-child(1),
    .hp-stats-list li:nth-child(2){border-bottom:1px solid #eef3f0;}
    .hp-stats-list li{padding:22px 16px;}
    .hp-prod-pic{height:170px;}
    .hp-quick-grid{grid-template-columns:repeat(2,1fr);}
    .hp-news-item{gap:14px;}
    .hp-news-pic{width:104px;height:68px;flex:0 0 104px;}
    .hp-news-item time{display:none;}
}
@media (max-width:640px){
    .hp-wrap{padding-left:18px;padding-right:18px;}
    .hp-title{font-size:27px;line-height:1.34;}
    .hp-actions{width:100%;}
    .hp-btn{width:100%;height:48px;font-size:15px;}
    .hp-hero-in{padding-top:40px;padding-bottom:64px;}
    .hp-hero-card{padding:20px 18px 6px;}
    .hp-hero-card ul{grid-template-columns:1fr;}
    /* 单品卡改两列，避免首页在手机上过长 */
    .hp-prod-grid,
    .hp-case-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .hp-svc-grid{grid-template-columns:1fr;}
    .hp-prod-pic{height:124px;padding:12px;}
    .hp-prod-txt{padding:12px 12px 14px;justify-content:flex-start;}
    .hp-prod-txt b{font-size:15px;line-height:1.4;}
    .hp-prod-txt span{display:none;}
    .hp-case-card h3{padding:12px 12px 14px;font-size:14px;line-height:1.5;}
    .hp-svc-card{padding:26px 22px;}
    .hp-cta-btns{width:100%;flex-direction:column;}
    .hp-tags{padding:26px 0 36px;}
}


/* ===== 场景区块与下屏留白 2026-11-06 =====
   原 .hp-quick{padding-bottom:0} 把 .hp-sec 的 84px 底部内边距清零，
   六张场景卡直接贴住下一屏的产品体系区块，视觉上被"切断"。
   桌面 72px、平板 48px、手机 36px，与全站区块节奏保持一致。 */
@media screen and (max-width:1200px){
    .hp-quick{padding-bottom:48px;}
}
@media screen and (max-width:768px){
    .hp-quick{padding-bottom:36px;}
}