@charset "utf-8";

* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:'Inter',sans-serif;background:#f6f9fc;color:#1b2945;overflow-x:hidden;line-height:1.6;/* 国际排版标准：全局正文默认行高 1.6*/;}
h1,h2,h3,h4,h5,h6 {line-height:1.25;/* 国际排版标准：标题采用紧凑行高 1.25*/;}
.container {width:94%;max-width:1500px;margin:auto;}
a {text-decoration:none;}
.topbar {background:#ffffff;padding:12px 0;border-bottom:1px solid #eef2f7;}
.topbar-flex {display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#334155;}
.top-icons {display:flex;gap:30px;}
.top-icons i {color:#34b54a;margin-right:8px;}
header {background:#fff;position:sticky;top:0;z-index:999;box-shadow:0 4px 20px rgba(0,0,0,0.03);}
.navbar {display:flex;justify-content:space-between;align-items:center;padding:15px 0;}
.logo {display:flex;align-items:center;}
/* 修复LOGO显示，确保比例正常*/.logo img {height:55px;width:auto;object-fit:contain;display:block;}
/* ================= 二级下拉菜单样式 =================*/nav ul {display:flex;list-style:none;gap:34px;align-items:center;}
nav > ul > li {position:relative;padding:10px 0;/* 增加感应区域*/;}
nav a {font-weight:600;color:#1b2945;transition:color 0.3s;display:flex;align-items:center;}
nav a:hover {color:#35b54a;}
.nav-arrow {font-size:11px;margin-left:6px;color:#94a3b8;transition:transform 0.3s ease;}
nav > ul > li:hover .nav-arrow {transform:rotate(180deg);color:#35b54a;}
/* 下拉框面板*/.dropdown {position:absolute;top:100%;left:-15px;/* 对齐微调*/    background:#ffffff;min-width:230px;box-shadow:0 15px 35px rgba(0,0,0,0.08);border-radius:12px;padding:12px 0;opacity:0;visibility:hidden;transform:translateY(15px);transition:all 0.3s cubic-bezier(0.165,0.84,0.44,1);z-index:1000;border:1px solid #eef2f7;display:flex;flex-direction:column;gap:0;}
nav > ul > li:hover .dropdown {opacity:1;visibility:visible;transform:translateY(0);}
.dropdown li {padding:0;width:100%;}
.dropdown a {padding:12px 24px;display:block;font-weight:500;font-size:14px;color:#334155;transition:all 0.3s ease;}
.dropdown a:hover {background:#f8fafc;color:#35b54a;padding-left:28px;/* 悬停文字轻微右移动效*/;}
/* ==================================================*/.quote-btn {background:#35b54a;color:#fff;padding:14px 28px;border-radius:50px;font-weight:700;transition:transform 0.3s,box-shadow 0.3s;}
.quote-btn:hover {transform:translateY(-2px);box-shadow:0 8px 20px rgba(53,181,74,0.3);}
.hero {width:100%;position:relative;}
.slider {position:relative;width:100%;height:720px;overflow:hidden;}
.slide {position:absolute;inset:0;opacity:0;transition:1s;}
.slide.active {opacity:1;z-index:2;}
.slide img {width:100%;height:100%;object-fit:cover;}
.overlay {position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.2));display:flex;align-items:center;}
.hero-content {max-width:1200px;margin-left:8%;color:#fff;}
.hero-content h1 {font-size:64px;white-space:nowrap;line-height:1.15;/* 超大标题标准行高，避免在小屏换行时上下割裂*/    font-weight:900;margin-bottom:24px;}
.hero-content p {font-size:20px;line-height:1.6;margin-bottom:30px;max-width:650px;}
.hero-buttons {display:flex;gap:16px;}
.btn {padding:16px 30px;border-radius:12px;font-weight:700;display:inline-block;transition:all 0.3s;}
.btn-green {background:#35b54a;color:#fff;}
.btn-green:hover {background:#2c9c3e;}
.btn-white {background:#fff;color:#0b63d8;}
.btn-white:hover {background:#f0f0f0;}
.arrow {position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;z-index:10;color:#1b2945;transition:background 0.3s,color 0.3s;}
.arrow:hover {background:#35b54a;color:#fff;}
.left {left:30px;}
.right {right:30px;}
.stats {margin-top:-24px;/* 下移版块，减少对主轮播图的遮挡，让视觉更透气*/    position:relative;z-index:20;}
.stats-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;/* 增加卡片间距，拉开呼吸感*/;}
.stat {background:#fff;padding:32px 24px;/* 国际UI规范：恢复饱满的宽高比例，提供恰到好处的留白*/    border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.06);/* 阴影更加柔和宽广，提升高级感*/    text-align:center;transition:all .4s cubic-bezier(0.165,0.84,0.44,1);/* 国际大厂常用的丝滑贝塞尔悬停动画*/    cursor:pointer;}
.stat:hover {transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.1);}
.stat i {font-size:42px;/* 图标尺寸适中，精致而不喧宾夺主*/    color:#35b54a;margin-bottom:16px;}
.stat h2 {font-size:32px;font-weight:800;color:#0f172a;/* 使用更深邃的颜色增强数据对比度*/    margin-bottom:8px;line-height:1.2;}
.stat p {font-size:14px;font-weight:700;color:#64748b;text-transform:uppercase;/* B2B独立站常用手法：标签大写化，提升专业度与秩序感*/    letter-spacing:0.5px;}
.section {padding:90px 0;}
.section-title {text-align:center;margin-bottom:45px;}
.section-title h2 {font-size:52px;margin-bottom:16px;}
.section-title p {font-size:18px;color:#64748b;max-width:850px;margin:auto;}
/* 分类标签样式*/.category-tabs {display:flex;justify-content:center;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap;}
.tab-btn {background:transparent;border:2px solid #e2e8f0;color:#64748b;padding:10px 26px;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s ease;font-family:inherit;}
.tab-btn:hover {border-color:#35b54a;color:#35b54a;}
.tab-btn.active {background:#35b54a;border-color:#35b54a;color:#fff;box-shadow:0 4px 15px rgba(53,181,74,0.3);}
/* ================= 卡片容器 & 精准显示4张 & 悬浮箭头 =================*/.products-wrap,.projects-wrap {position:relative;/* 左右留一点空间给箭头，防止遮挡卡片*/    padding:0 10px;}
.products,.projects {display:flex;gap:24px;/* 卡片之间的间距*/    overflow-x:auto;scroll-behavior:smooth;padding-bottom:24px;padding-top:10px;/* 隐藏横向滚动条*/    scrollbar-width:none;-ms-overflow-style:none;}
.products::-webkit-scrollbar,.projects::-webkit-scrollbar {display:none;}
/* 核心优化：确保正好显示完整的4张卡片。   计算公式:(100%总宽 - 3个间距的宽度) / 4*/.product-card,.project {flex:0 0 calc((100% - 72px) / 4);background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.05);transition:all .35s ease;cursor:pointer;}
.product-card:hover,.project:hover {transform:translateY(-10px);box-shadow:0 18px 40px rgba(0,0,0,.12);}
.product-card img,.project img {width:100%;height:230px;object-fit:cover;}
.product-body,.project-body {padding:24px;}
.product-body h3,.project-body h3 {color:#35b54a;margin-bottom:12px;font-size:24px;line-height:1.3;}
.product-body p,.project-body p {line-height:1.6;color:#475569;font-size:15px;}
/* 箭头采用绝对定位悬浮在最左和最右两侧的中央*/.arrow-mini {cursor:pointer;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 8px 25px rgba(0,0,0,0.15);transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#0b63d8;position:absolute;top:calc(50% - 12px);/* 居中对齐，减去下方留白的一半*/    transform:translateY(-50%);z-index:10;}
.arrow-mini.prev-btn {left:-15px;}
.arrow-mini.next-btn {right:-15px;}
.arrow-mini:hover {background:#0b63d8;color:#fff;transform:translateY(-50%) scale(1.08);}
/* 查看更多按钮容器*/.view-all-container {display:flex;justify-content:center;margin-top:15px;}
.more-btn {background:#35b54a;color:#fff;padding:14px 32px;border-radius:50px;font-weight:700;transition:background 0.3s,box-shadow 0.3s;}
.more-btn:hover {background:#2c9c3e;box-shadow:0 8px 20px rgba(53,181,74,0.3);}
/* 切换时的淡入动画*/@keyframes fadeInScale {from {opacity:0;transform:scale(0.95);}
                         to {opacity:1;transform:scale(1);}
;}
.animate-fade {animation:fadeInScale 0.4s ease forwards;}
.solutions {background:#fbfdff;}
.solution-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.solution {background:#fff;padding:34px 20px;border-radius:22px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.05);transition:all .35s ease;cursor:pointer;}
.solution:hover {transform:translateY(-10px);box-shadow:0 18px 40px rgba(0,0,0,.12);}
.solution i {font-size:42px;color:#35b54a;margin-bottom:16px;}
.contact {padding:100px 0;background:linear-gradient(135deg,#0b63d8,#35b54a);}
.contact-wrap {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.contact-text {color:#fff;}
.contact-text h2 {font-size:54px;margin-bottom:20px;line-height:1.15;}
.contact-text p {font-size:18px;line-height:1.6;opacity:0.9;}
.contact-form {background:#fff;padding:40px;border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,0.15);}
.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
input,textarea {padding:12px 16px;/* 国际标准高度：上下12px内边距，使总高度约为48px*/    border-radius:8px;/* B2B常用的硬朗小圆角，替换过于圆润的12px*/    border:1px solid #cbd5e1;font-family:inherit;font-size:16px;/* 国际无障碍及移动端标准：至少16px，防止iOS输入时强制缩放屏幕*/    line-height:1.5;background:#f8fafc;color:#1e293b;transition:all 0.3s ease;}
/* 增加符合 WCAG 国际标准的焦点(Focus)光圈，提升无障碍体验*/input:focus,textarea:focus {outline:none;border-color:#35b54a;background:#ffffff;box-shadow:0 0 0 3px rgba(53,181,74,0.15);}
input::placeholder,textarea::placeholder {color:#94a3b8;}
textarea {grid-column:1 / -1;min-height:120px;resize:vertical;}
.submit {grid-column:1 / -1;background:#35b54a;color:#fff;border:none;padding:14px 24px;/* 匹配输入框的标准高度*/    border-radius:8px;font-weight:700;font-size:16px;cursor:pointer;transition:all 0.3s ease;}
.submit:hover {background:#2b963d;box-shadow:0 8px 20px rgba(53,181,74,0.25);transform:translateY(-2px);}
footer {background:#071d48;color:#fff;padding:80px 0 30px;}
.footer-grid {display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:30px;}
.footer-logo-wrapper {background:#fff;display:inline-block;padding:10px 20px;border-radius:12px;margin-bottom:18px;}
.footer-logo-wrapper img {height:40px;object-fit:contain;}
.socials {display:flex;gap:12px;margin-bottom:22px;}
.social {width:42px;height:42px;border-radius:50%;background:#35b54a;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;transition:transform 0.3s,background 0.3s;cursor:pointer;}
.social:hover {transform:translateY(-5px);background:#2c9c3e;}
footer h4 {margin-bottom:18px;font-size:18px;}
footer ul {list-style:none;}
footer li {margin-bottom:12px;opacity:.88;transition:opacity 0.3s,padding-left 0.3s;cursor:pointer;line-height:1.5;/* 列表文字稍紧凑，增加连贯性*/;}
footer li:hover {opacity:1;padding-left:5px;color:#35b54a;}
.copy {margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);text-align:center;opacity:.7;font-size:14px;}
/* 响应式调整，确保不同设备上的展示正常*/@media(max-width:1100px) {.stats-grid,.solution-grid,.footer-grid {grid-template-columns:repeat(2,1fr);}
    .contact-wrap {grid-template-columns:1fr;}
    .product-card,.project {/* 平板展示3个*/        flex:0 0 calc((100% - 48px) / 3);}
;}
@media(max-width:768px) {nav,.top-icons {display:none;}
    .hero-content h1 {font-size:44px;white-space:normal;}
    .stats-grid,.solution-grid,.footer-grid,.form-grid {grid-template-columns:1fr;}
    .slider {height:620px;}
    .hero-content p {white-space:normal;}
    .product-card,.project {/* 手机展示1个或2个*/        flex:0 0 calc((100% - 24px) / 2);}
    .arrow-mini {display:none;/* 手机端使用原生滑动即可*/;}
;}
@media(max-width:500px) {.product-card,.project {flex:0 0 100%;}
;}