@font-face{font-family:'AlibabaPuHuiTi';src:url('https://cdn.jsdelivr.net/npm/c1-alibaba-puhui-ti/fonts/AlibabaPuHuiTi-3-35-Thin.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'AlibabaPuHuiTi';src:url('https://cdn.jsdelivr.net/npm/c1-alibaba-puhui-ti/fonts/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'AlibabaPuHuiTi';src:url('https://cdn.jsdelivr.net/npm/c1-alibaba-puhui-ti/fonts/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'AlibabaPuHuiTi','PingFang SC','Hiragino Sans GB','Microsoft YaHei UI','Microsoft YaHei',sans-serif;background:#fff;color:#1a1a1a;line-height:1.85;font-size:19px;letter-spacing:.3px}
.wrap{max-width:1000px;margin:0 auto;padding:0 28px}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,232,240,.7);height:64px;display:flex;align-items:center}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-l{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-l .b{width:34px;height:34px;border-radius:7px;overflow:hidden;flex-shrink:0;line-height:0}
.nav-l .b svg{display:block;width:100%;height:100%}
.nav-l .t{font-size:20px;font-weight:700;color:#0f172a}
.nav-r a{color:#1e293b;text-decoration:none;font-size:16px;font-weight:600;padding:8px 20px;border:2px solid #1e293b;border-radius:8px;transition:all .2s}
.nav-r a:hover{background:#0f172a;color:#fff}

/* Hero */
.hero{padding:100px 0 56px;background:linear-gradient(180deg,#f8fafc 0%,#fff 60%);text-align:center}
.hero h1{font-size:38px;font-weight:700;color:#0f172a;line-height:1.25;letter-spacing:-.5px;margin-bottom:14px}
.hero p{font-size:18px;color:#555;max-width:600px;margin:0 auto;line-height:1.8}
.hero .tag{display:inline-block;padding:4px 14px;border-radius:4px;background:#f1f5f9;font-size:15px;color:#1e293b;letter-spacing:1.5px;font-weight:600;margin-bottom:16px}

/* Sections */
section{padding:72px 0}
.sec-h{margin-bottom:48px}
.sec-h h2{font-size:30px;font-weight:700;color:#0f172a;margin-bottom:10px;letter-spacing:-.3px}
.sec-h p{font-size:17px;color:#666;line-height:1.7}
.bg-gray{background:#f8fafc}

/* Feature grid */
.f-g{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.f-c{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:32px 28px;transition:all .25s}
.f-c:hover{box-shadow:0 6px 24px rgba(0,0,0,.05)}
.f-c .n{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#1e293b,#0f172a);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin-bottom:14px;box-shadow:0 4px 12px rgba(30,41,59,.12)}
.f-c h4{font-size:19px;font-weight:700;color:#0f172a;margin-bottom:6px}
.f-c p{font-size:16px;color:#555;line-height:1.7}

/* Data wall */
.data-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;background:#F1F5F9;border-radius:14px;padding:40px 32px}
.d-i .n{font-size:36px;font-weight:700;color:#0f172a}
.d-i .n span{font-size:18px;color:#1e293b;font-weight:700}
.d-i .l{font-size:16px;color:#555;margin-top:2px}

/* CTA */
.cta-sec{text-align:center;padding:72px 0;background:#0f172a;color:#fff}
.cta-sec h2{font-size:30px;font-weight:700;margin-bottom:12px}
.cta-sec p{font-size:17px;color:rgba(255,255,255,.6);margin-bottom:28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 34px;background:#1e293b;color:#fff;border-radius:10px;font-size:17px;font-weight:700;text-decoration:none;transition:all .2s}
.cta-btn:hover{background:#0f172a}
.cta-btn-s{display:inline-flex;align-items:center;gap:8px;padding:14px 34px;background:transparent;color:rgba(255,255,255,.8);border-radius:10px;font-size:17px;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.3);transition:all .2s;margin-left:12px}
.cta-btn-s:hover{border-color:rgba(255,255,255,.6);color:#fff}

/* Language Switch */
.lang-sw{display:flex;align-items:center;gap:2px;margin-left:16px;font-size:12px;font-weight:600;user-select:none;flex-shrink:0}
.lang-sw .lo{cursor:pointer;padding:3px 7px;border-radius:4px;color:#94a3b8;transition:all .2s;letter-spacing:.5px}
.lang-sw .lo.active{color:#0f172a;background:#f1f5f9}
.lang-sw .lo:hover{color:#0f172a}
.lang-sw .ls{color:#cbd5e1;font-size:10px}

/* Footer */
.footer{background:#0f172a;padding:48px 0 0}
.footer .wrap{text-align:center}
.foot-bot{padding:20px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.foot-bot a{color:rgba(255,255,255,.5);text-decoration:none}
.foot-bot a:hover{color:rgba(255,255,255,.7)}

/* Process flow */
.proc{display:flex;align-items:flex-start;justify-content:center;gap:8px;flex-wrap:wrap}
.proc .st{text-align:center;min-width:110px;flex:1}
.proc .st .ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#1e293b,#0f172a);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:17px;color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(30,41,59,.1)}
.proc .st h5{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:3px}
.proc .st p{font-size:15px;color:#666;line-height:1.5}
.proc .ar{display:flex;align-items:center;padding-top:10px;color:#ccc;font-size:16px}

/* Result card */
.rs-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rs-c{text-align:center;padding:32px 20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px}
.rs-c .n{font-size:38px;font-weight:700;color:#0f172a}
.rs-c .l{font-size:16px;color:#1e293b;font-weight:600;margin-top:4px}
.rs-c .d{font-size:15px;color:#666;margin-top:6px}

/* Quote */
.quote{max-width:700px;margin:24px auto 0;padding:32px 36px;background:#f1f5f9;border-radius:12px;border-left:4px solid #1e293b}
.quote p{font-size:17px;color:#444;line-height:1.9;font-style:italic}
.quote .qo{font-size:15px;color:#888;margin-top:12px;text-align:right}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.tags span{padding:5px 14px;border-radius:5px;background:#F1F5F9;font-size:15px;color:#475569;font-weight:500}

/* Back link */
.back{display:inline-flex;align-items:center;gap:6px;color:#1e293b;text-decoration:none;font-size:15px;font-weight:600;margin-bottom:24px}
.back:hover{color:#0f172a}

@media(max-width:768px){
  .wrap{padding:0 20px}
  .hero h1{font-size:28px}
  .f-g{grid-template-columns:1fr}
  .data-g{grid-template-columns:repeat(2,1fr);padding:28px 20px}
  .rs-g{grid-template-columns:1fr}
  .proc{flex-direction:column;align-items:center}
  .proc .ar{transform:rotate(90deg);padding:4px 0}
  .mockup{height:200px!important;padding:40px 20px!important}
  .mod-g{grid-template-columns:1fr!important}
  .role-g{grid-template-columns:1fr!important}
  .flow-h{flex-direction:column;gap:4px!important}
  .two-col{grid-template-columns:1fr!important}
  .benefit-g{grid-template-columns:1fr!important}
  .faq-g{padding:0!important}
}

/* ===== Mockup / Screenshot Placeholder ===== */
.mockup{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;height:320px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#94a3b8;font-size:16px;font-weight:500;text-align:center;padding:40px 20px;margin:20px 0;transition:all .25s}
.mockup:hover{border-color:#94a3b8;background:#eef2f6}
.mockup .m-icon{font-size:48px;opacity:.5}
.mockup .m-label{font-size:14px;color:#94a3b8;font-weight:400;letter-spacing:.3px}
.mockup-sm{height:200px}
.mockup-lg{height:400px}

/* ===== Feature Module Grid ===== */
.mod-g{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.mod-c{border:1px solid #e2e8f0;border-radius:12px;padding:28px 24px;background:#fff;transition:all .25s}
.mod-c:hover{box-shadow:0 4px 20px rgba(0,0,0,.04)}
.mod-h{font-size:18px;font-weight:700;color:#0f172a;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #1e293b;display:flex;align-items:center;gap:8px}
.mod-ul{list-style:none;padding:0;margin:0}
.mod-ul li{padding:6px 0;font-size:15px;color:#555;line-height:1.6;padding-left:20px;position:relative}
.mod-ul li:before{content:'';position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:#cbd5e1}

/* ===== Role Value Cards ===== */
.role-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.role-c{border:1px solid #e2e8f0;border-radius:12px;padding:28px 22px;text-align:center;background:#fff;transition:all .25s}
.role-c:hover{box-shadow:0 6px 24px rgba(0,0,0,.05)}
.role-c .r-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#1e293b,#0f172a);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:22px;color:#fff;box-shadow:0 4px 12px rgba(30,41,59,.12)}
.role-c h4{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:6px}
.role-c p{font-size:15px;color:#666;line-height:1.7;margin:0}

/* ===== Two Column Layout ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.two-col .tc-t h3{font-size:22px;font-weight:700;color:#0f172a;margin-bottom:10px}
.two-col .tc-t p{font-size:16px;color:#555;line-height:1.85}

/* ===== Benefit Grid ===== */
.benefit-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit-c{text-align:center;padding:28px 20px}
.benefit-c .bn{font-size:38px;font-weight:700;color:#0f172a;letter-spacing:-1px}
.benefit-c .bn span{font-size:18px;color:#1e293b;font-weight:700}
.benefit-c .bl{font-size:16px;color:#1e293b;font-weight:600;margin-top:4px}
.benefit-c .bd{font-size:14px;color:#888;margin-top:4px;line-height:1.6}

/* ===== FAQ ===== */
.faq-g{max-width:720px;margin:0 auto;padding:0 20px}
.faq-item{border:1px solid #e2e8f0;border-radius:10px;margin-bottom:12px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;font-size:16px;font-weight:600;color:#0f172a;background:#fafbfc;transition:background .2s;user-select:none}
.faq-q:hover{background:#f1f5f9}
.faq-q .fa{font-size:12px;color:#94a3b8;transition:transform .2s}
.faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:all .25s;font-size:15px;color:#555;line-height:1.75;border-top:0 solid #e2e8f0}
.faq-item.open .faq-q .fa{transform:rotate(180deg)}
.faq-item.open .faq-a{padding:16px 20px;max-height:300px;border-top-width:1px}

/* ===== Horizontal Flow ===== */
.flow-h{display:flex;align-items:flex-start;justify-content:center;gap:8px;flex-wrap:wrap}
.flow-h .fh-st{text-align:center;min-width:100px;flex:1}
.flow-h .fh-st .fh-ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#1e293b,#0f172a);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:16px;color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(30,41,59,.1)}
.flow-h .fh-st h5{font-size:15px;font-weight:600;color:#0f172a;margin-bottom:2px}
.flow-h .fh-st p{font-size:13px;color:#888;line-height:1.4;margin:0}
.flow-h .fh-ar{display:flex;align-items:center;padding-top:10px;color:#ccc;font-size:14px}

/* ===== Compare Table ===== */
.comp-t{width:100%;border-collapse:collapse;font-size:15px;margin:20px 0}
.comp-t th,.comp-t td{padding:12px 16px;text-align:left;border-bottom:1px solid #e2e8f0}
.comp-t th{background:#f8fafc;font-weight:700;color:#0f172a;font-size:14px;letter-spacing:.5px}
.comp-t tr:hover td{background:#fafbfc}
.comp-t .yes{color:#059669;font-weight:600}
.comp-t .no{color:#94a3b8}

/* ===== Scenario Cards ===== */
.scen-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scen-c{border:1px solid #e2e8f0;border-radius:12px;padding:28px 24px;text-align:center;background:#fff;transition:all .25s}
.scen-c:hover{box-shadow:0 6px 24px rgba(0,0,0,.04)}
.scen-c .s-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#1e293b,#0f172a);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;color:#fff;box-shadow:0 4px 12px rgba(30,41,59,.12)}
.scen-c h4{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:6px}
.scen-c p{font-size:15px;color:#666;line-height:1.7;margin:0}

@media(max-width:1024px){
  .mod-g{grid-template-columns:1fr}
  .role-g{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .benefit-g{grid-template-columns:repeat(2,1fr)}
  .scen-g{grid-template-columns:repeat(2,1fr)}
}

/* ===== Highlights Row ===== */
.hl-g{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;padding:20px 0}
.hl-i{text-align:center;min-width:120px}
.hl-n{font-size:32px;font-weight:700;color:#0f172a}
.hl-n span{font-size:16px;color:#1e293b;font-weight:700}
.hl-l{font-size:15px;color:#555;margin-top:2px}

/* ===== Timeline ===== */
.tl{position:relative;padding-left:32px;border-left:3px solid #1e293b;margin:24px 0}
.tl-i{margin-bottom:28px;position:relative}
.tl-i:before{content:'';position:absolute;left:-38px;top:4px;width:14px;height:14px;border-radius:50%;background:#1e293b;border:3px solid #fff;box-shadow:0 0 0 2px #1e293b}
.tl-i:last-child{margin-bottom:0}
.tl-d{font-size:14px;color:#94a3b8;margin-bottom:2px}
.tl-h{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}
.tl-p{font-size:15px;color:#666;line-height:1.6;margin:0}

/* ===== Section Divider ===== */
.divider{height:1px;background:linear-gradient(90deg,transparent,#e2e8f0,transparent);margin:8px 0}

/* ===== Responsive Images ===== */
.img-showcase{width:100%;max-width:660px;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid #e2e8f0;background:#fff}
.showcase-main,.showcase-thumb{width:100%;height:auto;display:block;object-fit:contain}
.img-card{max-width:480px;margin:0 auto;border-radius:10px;overflow:hidden;border:1px solid #e2e8f0;background:#fff;transition:box-shadow .25s}
.img-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.two-col .img-card img{width:100%;height:auto;display:block}
.img-label{padding:8px 14px;font-size:13px;color:var(--text-secondary,#475569);background:var(--bg-cool,#f8fafc);border-top:1px solid var(--border,#e2e8f0);text-align:center;font-weight:500;letter-spacing:.3px}

/* ===== Phone Screenshot Size Limit ===== */
.img-showcase img[src*="app_desktop"],
.img-showcase img[src*="discover_clients"],
.img-showcase img[src*="visit_template"],
.img-showcase img[src*="erp_sale"],
.img-showcase img[src*="erp_data"],
.img-showcase img[src*="check_account"],
.img-showcase img[src*="sale_top"],
.img-showcase img[src*="erp_order"],
.img-showcase img[src*="sellers_data"],
.img-showcase img[src*="dashboard_overview"]{max-width:240px!important;width:240px!important;height:auto;margin:0 auto;display:block}
.two-col img[src*="app_desktop"],
.two-col img[src*="discover_clients"],
.two-col img[src*="visit_template"],
.two-col img[src*="erp_sale"],
.two-col img[src*="erp_data"],
.two-col img[src*="check_account"],
.two-col img[src*="sale_top"],
.two-col img[src*="erp_order"],
.two-col img[src*="sellers_data"],
.two-col img[src*="dashboard_overview"]{max-width:200px!important;width:200px!important;height:auto;margin:0 auto;display:block}

/* ===== Inline Icons ===== */
.icon-circle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#f1f5f9;font-size:14px;flex-shrink:0}

/* ===== Contrast Section ===== */
.contrast-g{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contrast-c{border-radius:12px;padding:32px 28px}
.contrast-c.old{background:#fff6f5;border:1px solid #fee2e2}
.contrast-c.new{background:#f0fdf4;border:1px solid #bbf7d0}
.contrast-c h4{font-size:17px;font-weight:700;margin-bottom:12px}
.contrast-c.old h4{color:#dc2626}
.contrast-c.new h4{color:#16a34a}
.contrast-c ul{list-style:none;padding:0;margin:0}
.contrast-c li{padding:5px 0;font-size:15px;color:#555;padding-left:20px;position:relative}
.contrast-c.old li:before{content:'✗';position:absolute;left:0;color:#f87171}
.contrast-c.new li:before{content:'✓';position:absolute;left:0;color:#4ade80}