/* ===================== 基础 ===================== */
:root{
    --primary:#2C3E50;
    --text:#2C3E50;
    --text-2:#5D6D7E;
    --muted:#95A5A6;
    --bg:#FFFFFF;
    --bg-gray:#F7F7F7;
    --line:#E5E8EB;
    --maxw:1000px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
    font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;
    color:var(--text);background:var(--bg);line-height:1.85;font-size:15px;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ===================== 导航 ===================== */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:#fff;border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:18px;font-weight:700;color:var(--primary);letter-spacing:1px}
.menu{display:flex;gap:4px}
.nav-link{padding:8px 18px;font-size:15px;color:var(--text-2)}
.nav-link:hover{color:var(--primary)}
.nav-link.active{color:var(--primary);font-weight:700}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--primary)}

/* ===================== Hero ===================== */
.hero{
    background:var(--primary);color:#fff;text-align:center;
    padding:120px 24px 100px;margin-top:64px;
}
.hero-inner h1{font-size:50px;font-weight:700;letter-spacing:4px;margin-bottom:16px}
.hero-inner h2{font-size:40px;font-weight:400;letter-spacing:3px;margin-bottom:24px}
.hero-inner .slogan{font-size:22px;letter-spacing:4px;margin-bottom:12px}
.hero-inner .company{font-size:14px;color:rgba(255,255,255,.75);letter-spacing:2px}

/* ===================== Section ===================== */
.section{padding:70px 0}
.section-gray{background:var(--bg-gray)}
.section-head{text-align:center;margin-bottom:50px}
.section-head .no{display:block;font-size:14px;color:var(--muted);letter-spacing:2px;margin-bottom:6px}
.section-title{font-size:36px;font-weight:400;color:var(--primary);letter-spacing:2px;margin-bottom:6px}
.section-en{font-size:13px;letter-spacing:3px;color:var(--muted)}

/* ===================== Block ===================== */
.block{padding:34px 0}
.block-title{font-size:22px;font-weight:700;color:var(--primary);margin-bottom:16px}
.block-sub{font-size:15px;color:var(--text-2);margin-bottom:18px}
.block-text p{margin-bottom:12px;color:var(--text-2)}
.block-text b{color:var(--primary)}
.block-img img{border:1px solid var(--line)}
.block-img.center{max-width:760px;margin:18px auto}
.block-img.center img{margin:0 auto}
.caption{text-align:center;font-size:13px;color:var(--muted);margin-top:8px}
.sub-title{font-size:17px;font-weight:700;color:var(--primary);margin:22px 0 12px}
.emphasis{font-size:18px;font-weight:700;color:var(--primary);margin-top:14px;letter-spacing:1px}
.quote{font-size:16px;color:var(--primary);margin-bottom:12px;padding-left:12px;border-left:3px solid var(--primary)}

/* 图文左右 */
.grid-text-img,.grid-img-text{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.grid-img-text .block-img{order:1}
.grid-img-text .block-text{order:2}

/* 多列 */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2 .item,.grid-3 .item,.grid-4 .item{background:var(--bg);border:1px solid var(--line);padding:20px}
.grid-2 .item h4,.grid-3 .item h4,.grid-4 .item h4{font-size:16px;color:var(--primary);margin-bottom:10px;font-weight:700}
.grid-3 .item h4 span{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px;letter-spacing:1px}
.grid-2 .item p,.grid-3 .item p{font-size:14px;color:var(--text-2)}
.grid-2 .item ul,.grid-4 .item ul{font-size:14px;color:var(--text-2)}
.grid-2 .item ul li,.grid-4 .item ul li,.grid-img-text .block-text ul li,.grid-text-img .block-text ul li{padding:3px 0 3px 14px;position:relative}
.grid-2 .item ul li::before,.grid-4 .item ul li::before,.block-text ul li::before{content:"·";position:absolute;left:2px;color:var(--primary)}

/* 编号列表 */
.num-list{counter-reset:n}
.num-list li{padding:6px 0 6px 30px;position:relative;color:var(--text-2);font-size:15px}
.num-list li::before{counter-increment:n;content:counter(n,decimal-leading-zero);position:absolute;left:0;top:6px;color:var(--primary);font-weight:700;font-size:14px}
.num-list.cols-2{columns:2;column-gap:40px}
.num-list.cols-2 li{break-inside:avoid}

/* 客户声音 */
.voice-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;font-size:15px;color:var(--text-2)}
.voice-list li{padding:10px 0 10px 16px;border-left:2px solid var(--primary)}

/* 手机截图 */
.phones{display:flex;gap:24px;justify-content:center;margin:18px 0}
.phones img{height:380px;width:auto;border:1px solid var(--line)}

/* 标签行 */
.tags{text-align:center;font-size:14px;color:var(--text-2);letter-spacing:1px;margin:14px 0}

/* 数据流 */
.data-flow{text-align:center;font-size:15px;color:var(--primary);margin:18px 0;letter-spacing:1px}

/* 产品优势 - 数字化优势 / 设计优势 卡片 */
.sub-label{font-size:14px;color:var(--muted);letter-spacing:2px;margin-bottom:6px}
.adv-cards-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:18px 0}
.adv-card-5{background:var(--bg);border:1px solid var(--line);padding:18px 14px;text-align:center}
.adv-card-5 h4{font-size:15px;color:var(--primary);margin-bottom:8px}
.adv-card-5 p{font-size:13px;color:var(--text-2);line-height:1.6}

/* 产品优势 - 04设计亮点 */
.highlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin:18px 0}
.highlight-text p{font-size:15px;color:var(--text-2);margin-bottom:10px;line-height:1.8}
.highlight-img img{border:1px solid var(--line)}

/* ===================== Footer ===================== */
.footer{background:var(--primary);color:rgba(255,255,255,.7);text-align:center;padding:36px 24px}
.footer-name{color:#fff;font-size:16px;margin-bottom:6px}
.footer-slogan{font-size:13px;margin-bottom:10px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.4)}

/* ===================== Back top ===================== */
.back-top{
    position:fixed;right:20px;bottom:20px;width:42px;height:42px;
    background:var(--primary);color:#fff;border:none;font-size:18px;cursor:pointer;
    opacity:0;visibility:hidden;transition:opacity .3s;z-index:90;
}
.back-top.show{opacity:1;visibility:visible}

/* ===================== 响应式 ===================== */
@media(max-width:900px){
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .grid-3{grid-template-columns:1fr}
    .adv-cards-5{grid-template-columns:repeat(2,1fr)}
    .highlight-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    .section{padding:50px 0}
    .menu{
        position:fixed;top:0;right:-100%;width:70%;max-width:280px;height:100vh;
        background:#fff;flex-direction:column;justify-content:center;gap:4px;padding:40px;
        transition:right .3s;z-index:99;box-shadow:-2px 0 10px rgba(0,0,0,.08);
    }
    .menu.open{right:0}
    .nav-link{font-size:16px;padding:12px;text-align:center}
    .nav-toggle{display:flex;z-index:100}
    .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-toggle.open span:nth-child(2){opacity:0}
    .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .grid-text-img,.grid-img-text,.grid-2{grid-template-columns:1fr}
    .grid-img-text .block-img,.grid-img-text .block-text{order:0}
    .num-list.cols-2{columns:1}
    .voice-list{grid-template-columns:1fr}
    .hero-inner h1{font-size:38px}
    .hero-inner h2{font-size:28px}
    .phones{flex-direction:row;overflow-x:auto;justify-content:flex-start}
    .phones img{height:300px}
}