/* ═══════════════════════════════════════════════════════════════
   企订通 PC 端 - "去 AI 化"经典商务版
   原则：白底为主，少量经典色，无渐变，无粒子，无 emoji 装饰
   ═══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
    font-size: 14px; line-height: 1.7;
    color: #333; background: #fff;
}
a { color: #333; text-decoration: none; transition: color .2s; }
a:hover { color: #c00518; }
img { max-width: 100%; display: block; }
ul, li { list-style: none;}
button { font-family: inherit; border: 0; outline: 0; background: none; cursor: pointer;}

.container { max-width: 1200px; margin: 0 auto; padding: 0 15px;}

/* ───────── 顶部栏 ───────── */
.topbar { background: #f5f5f5; border-bottom: 1px solid #e8e8e8; font-size: 12px; color: #666;}
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 32px;}
.topbar .left, .topbar .right { display: flex; gap: 12px;}
.topbar a { color: #666;}
.topbar a:hover { color: #c00518;}

.header { background: #fff; border-bottom: 2px solid #c00518;}
.header .container { display: flex; align-items: center; height: 70px;}
.logo { display: flex; align-items: center; gap: 0; text-decoration: none;}
.logo img { height: 36px;}

.nav { display: flex; align-items: center; height: 70px; margin-left: 35px;}
.nav > li > a {
    display: block; padding: 0 18px; height: 70px; line-height: 70px;
    color: #333; font-size: 15px; font-weight: 500;
}
.nav > li > a:hover, .nav > li > a.active {
    color: #fff; background: #c00518;
}

.header .actions { margin-left: auto; display: flex; align-items: center; gap: 10px;}
.header .actions a {
    padding: 6px 14px; font-size: 13px; color: #555;
    border: 1px solid #ddd; border-radius: 3px; background: #fff;
}
.header .actions a.trial { background: #c00518; color: #fff; border-color: #c00518;}
.header .actions a.trial:hover { background: #a00413; border-color: #a00413;}
.header .actions a:hover { color: #c00518; border-color: #c00518;}

.nav .child-menu {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    background: #fff; border-top: 1px solid #eee; box-shadow: 0 4px 8px rgba(0,0,0,.06);
    z-index: 100;
}
.nav > li:hover .child-menu { display: block; }
.child-menu .inner { max-width: 1200px; margin: 0 auto; padding: 30px; display: flex; gap: 40px;}
.child-menu dl dt { color: #999; font-size: 12px; margin-bottom: 12px;}
.child-menu dl dd a { display: block; padding: 6px 0; font-size: 14px; color: #333; min-width: 140px;}
.child-menu dl dd a:hover { color: #c00518; padding-left: 4px;}

/* ───────── Banner 大图 ───────── */
.banner { background: #f0f4f8; height: 450px; position: relative; overflow: hidden;}
.banner .slide {
    height: 100%;
    background-image: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url('/assets/img/banner.svg');
    background-size: cover; background-position: center;
    display: flex; align-items: center;
}
.banner .text {
    background: rgba(255,255,255,.92);
    padding: 50px 70px; max-width: 500px; margin-left: 5%;
    border-left: 4px solid #c00518;
}
.banner h1 { font-size: 36px; font-weight: bold; color: #222; margin-bottom: 15px; line-height: 1.3;}
.banner p { font-size: 15px; color: #666; margin-bottom: 25px; line-height: 1.8;}
.banner .cta {
    display: inline-block; padding: 11px 30px; background: #c00518; color: #fff;
    font-size: 14px; border-radius: 3px;
}
.banner .cta:hover { background: #a00413; color: #fff;}
.banner .cta-ghost {
    display: inline-block; padding: 10px 28px; border: 1px solid #c00518; color: #c00518;
    font-size: 14px; border-radius: 3px; margin-left: 10px;
}
.banner .cta-ghost:hover { background: #c00518; color: #fff;}
.banner .dots { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;}
.banner .dots i {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.5); margin: 0 4px; cursor: pointer;
}
.banner .dots i.on { background: #c00518;}

/* ───────── 数据条 ───────── */
.stats { background: #fff; border-bottom: 1px solid #eee; padding: 30px 0;}
.stats .container { display: flex; justify-content: space-around;}
.stats .item { text-align: center; padding: 0 20px;}
.stats .item .v { font-size: 32px; font-weight: bold; color: #c00518; line-height: 1;}
.stats .item .l { font-size: 13px; color: #888; margin-top: 6px;}

/* ───────── 通用 section ───────── */
.section { padding: 60px 0;}
.section.alt { background: #f9f9f9;}
.section-title { text-align: center; margin-bottom: 40px;}
.section-title h2 { font-size: 26px; font-weight: bold; color: #222;}
.section-title .em { color: #c00518;}
.section-title p { color: #888; font-size: 14px; margin-top: 10px;}

/* ───────── 产品 3 列 ───────── */
.products { display: flex; gap: 20px;}
.product {
    flex: 1; padding: 30px; background: #fff; border: 1px solid #eee;
    transition: border-color .2s;
}
.product:hover { border-color: #c00518;}
.product .pic {
    height: 160px; background: #fafafa; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    color: #c00518; font-size: 60px; line-height: 1;
}
.product .pic svg { width: 64px; height: 64px; stroke: #c00518; fill: none; stroke-width: 1.5;}
.product h3 { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px;}
.product p { color: #777; font-size: 13px; line-height: 1.7; min-height: 65px;}
.product a.more { display: inline-block; padding: 6px 0; color: #c00518; font-size: 13px; margin-top: 10px; border-bottom: 1px solid #c00518;}

/* ───────── 行业方案 4 列 ───────── */
.industries { display: flex; gap: 20px;}
.industry {
    flex: 1; padding: 28px 20px; background: #fff;
    border: 1px solid #eee; text-align: center;
}
.industry:hover { border-color: #c00518;}
.industry .pic {
    height: 80px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.industry .pic svg { width: 48px; height: 48px; stroke: #c00518; fill: none; stroke-width: 1.5;}
.industry h4 { font-size: 16px; color: #333; margin-bottom: 8px;}
.industry p { font-size: 13px; color: #888;}

/* ───────── 客户案例 3 列 ───────── */
.cases { display: flex; gap: 20px;}
.case {
    flex: 1; background: #fff; border: 1px solid #eee;
    transition: border-color .2s;
}
.case:hover { border-color: #c00518;}
.case .pic {
    height: 180px; background: #fafafa; display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid #eee;
}
.case .pic svg { width: 64px; height: 64px; stroke: #c00518; fill: none; stroke-width: 1.5;}
.case .info { padding: 22px;}
.case .tag { display: inline-block; padding: 2px 8px; border: 1px solid #c00518; color: #c00518; font-size: 12px; margin-bottom: 10px;}
.case h4 { font-size: 16px; color: #333; margin-bottom: 8px;}
.case p { font-size: 13px; color: #777; line-height: 1.7; min-height: 65px;}

/* ───────── 横向解决方案 ───────── */
.flow-row { display: flex; align-items: center; margin-bottom: 30px; padding: 30px; background: #fff; border: 1px solid #eee;}
.flow-row:nth-child(even) { flex-direction: row-reverse;}
.flow-row .pic {
    flex: 0 0 320px; height: 200px; background: #fafafa; margin: 0 30px;
    display: flex; align-items: center; justify-content: center;
}
.flow-row .pic svg { width: 80px; height: 80px; stroke: #c00518; fill: none; stroke-width: 1.5;}
.flow-row .text { flex: 1;}
.flow-row .text h3 { font-size: 22px; color: #333; margin-bottom: 12px;}
.flow-row .text p { color: #777; margin-bottom: 16px; line-height: 1.8;}
.flow-row .text ul li { padding: 6px 0; color: #555; font-size: 13px; border-bottom: 1px dashed #eee;}
.flow-row .text ul li b { color: #c00518; margin-right: 12px;}

/* ───────── 加盟 4 步 ───────── */
.steps { display: flex; gap: 20px; counter-reset: step;}
.steps .step {
    flex: 1; padding: 30px 20px; background: #fff; border: 1px solid #eee;
    text-align: center; position: relative;
}
.steps .step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 38px; line-height: 38px; background: #c00518; color: #fff;
    border-radius: 50%; font-weight: bold; font-size: 16px;
}
.steps .step h4 { font-size: 16px; margin: 18px 0 8px; color: #333;}
.steps .step p { color: #888; font-size: 13px; line-height: 1.6;}

/* ───────── 信任墙 ───────── */
.trust-wall { padding: 30px 0; background: #f9f9f9; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.trust-wall .container { display: flex; flex-wrap: wrap; justify-content: space-between;}
.trust-wall .logo {
    width: 14%; padding: 0 10px; text-align: center; color: #bbb;
    font-size: 15px; font-weight: bold;
}

/* ───────── 红色 CTA banner ───────── */
.cta-banner { background: #c00518; color: #fff; padding: 50px 0; text-align: center;}
.cta-banner h2 { font-size: 28px; font-weight: bold; margin-bottom: 10px;}
.cta-banner p { font-size: 15px; margin-bottom: 20px; opacity: .9;}
.cta-banner .btn {
    display: inline-block; padding: 12px 36px; background: #fff; color: #c00518;
    font-size: 15px; font-weight: bold; border-radius: 3px;
}
.cta-banner .btn:hover { background: #ffd54f; color: #a00413;}

/* ───────── Footer ───────── */
.footer { background: #2d2d2d; color: #999; padding: 50px 0 0;}
.footer .container { display: flex; gap: 40px;}
.footer .col { flex: 1;}
.footer h5 { color: #fff; font-size: 15px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #444;}
.footer .col ul li { padding: 5px 0; font-size: 13px;}
.footer .col ul li a { color: #aaa;}
.footer .col ul li a:hover { color: #fff;}
.footer .contact p { padding: 5px 0; font-size: 13px;}
.footer .contact .phone { font-size: 24px; font-weight: bold; color: #fff; margin: 10px 0 6px;}
.footer .qr { display: flex; gap: 12px; margin-top: 16px;}
.footer .qr .img { width: 80px; height: 80px; background: #444;}
.copyright { text-align: center; padding: 20px 0; margin-top: 30px; border-top: 1px solid #444; font-size: 12px; color: #777;}

/* ───────── 子页面 banner ───────── */
.ban { background: #f0f4f8; padding: 50px 0; text-align: center; border-bottom: 1px solid #ddd;}
.ban h1 { font-size: 28px; color: #222; margin-bottom: 8px;}
.ban .crumb { color: #888; font-size: 13px;}
.ban .crumb a:hover { color: #c00518;}

/* ───────── 表单 ───────── */
.contact-grid { display: flex; gap: 20px; margin-bottom: 30px;}
.contact-card {
    flex: 1; padding: 30px 20px; background: #fff; border: 1px solid #eee;
    text-align: center;
}
.contact-card:hover { border-color: #c00518;}
.contact-card .ic {
    width: 56px; height: 56px; line-height: 56px; border-radius: 50%;
    border: 1px solid #c00518; color: #c00518; font-size: 22px;
    margin: 0 auto 14px;
}
.contact-card h4 { font-size: 16px; margin-bottom: 6px; color: #333;}
.contact-card p { font-size: 13px; color: #888; line-height: 1.7;}

.contact-form {
    max-width: 700px; margin: 0 auto; padding: 30px; background: #fff;
    border: 1px solid #eee;
}
.contact-form .row { margin-bottom: 16px;}
.contact-form label { display: block; font-size: 13px; color: #555; margin-bottom: 6px;}
.contact-form label .req { color: #c00518;}
.contact-form input, .contact-form select, .contact-form textarea {
    width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 3px;
    font-size: 14px; font-family: inherit;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
    border-color: #c00518; outline: 0;
}
.contact-form textarea { min-height: 100px;}
.contact-form .submit {
    display: block; width: 100%; padding: 12px; background: #c00518; color: #fff;
    border: 0; font-size: 15px; cursor: pointer;
}
.contact-form .submit:hover { background: #a00413;}

/* 响应式 */
@media (max-width: 768px) {
    .banner { height: auto; padding: 40px 0;}
    .banner .text { margin: 0 10px; padding: 30px;}
    .products, .industries, .cases, .flow-row, .stats .container { flex-direction: column; gap: 12px;}
    .stats .container { gap: 20px;}
    .nav, .header .actions { display: none;}
}