:root { --ink:#172033; --muted:#667085; --line:#d0d5dd; --brand:#0f766e; --soft:#f5fbf9; --good:#067647; }
        * { box-sizing:border-box; }
        body { margin:0; font-family:Arial, "Microsoft YaHei", sans-serif; color:var(--ink); background:#f7f9fc; }
        header { background:#fff; border-bottom:1px solid var(--line); }
        .wrap { width:min(1080px, calc(100% - 32px)); margin:0 auto; }
        .topbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
        .brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:900; color:var(--ink); }
        .brand img { width:36px; height:36px; object-fit:contain; }
        nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
        a { color:var(--brand); font-weight:800; text-decoration:none; }
        a:hover { text-decoration:underline; }
        main { padding:34px 0 52px; }
        .hero { min-height:360px; display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:center; }
        h1 { margin:0 0 14px; font-size:42px; line-height:1.12; letter-spacing:0; }
        .lead { margin:0; color:#475467; font-size:18px; line-height:1.8; }
        .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
        .btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; border-radius:8px; padding:0 18px; background:var(--brand); color:#fff; }
        .btn.secondary { background:#fff; color:var(--brand); border:1px solid var(--line); }
        .hero-card { background:linear-gradient(135deg, #ecfdf3, #eff6ff); border:1px solid #c7eadc; border-radius:8px; padding:24px; }
        .hero-card h2 { margin:0 0 14px; font-size:20px; }
        .stat-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
        .stat { background:rgba(255,255,255,.72); border:1px solid rgba(208,213,221,.72); border-radius:8px; padding:14px; }
        .stat b { display:block; font-size:24px; color:var(--brand); margin-bottom:4px; }
        .stat span { color:var(--muted); font-size:14px; line-height:1.5; }
        section { margin-top:28px; }
        .section-title { margin:0 0 16px; font-size:26px; }
        .grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
        .card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px; box-shadow:0 10px 24px rgba(15,23,42,.04); }
        .card h3 { margin:0 0 8px; font-size:17px; }
        .card p { margin:0; color:var(--muted); line-height:1.7; font-size:14px; }
        .band { background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px; }
        .steps { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; counter-reset:step; }
        .step { position:relative; background:var(--soft); border:1px solid #c7eadc; border-radius:8px; padding:18px; }
        .step::before { counter-increment:step; content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; font-weight:900; margin-bottom:12px; }
        .step b { display:block; margin-bottom:6px; }
        .step span { color:var(--muted); line-height:1.65; font-size:14px; }
        footer { border-top:1px solid var(--line); padding:22px 0; color:var(--muted); background:#fff; text-align:center; }
        @media (max-width:820px) {
            .topbar { flex-direction:column; align-items:flex-start; padding:14px 0; }
            .hero { grid-template-columns:1fr; min-height:auto; }
            h1 { font-size:32px; }
            .grid, .steps { grid-template-columns:1fr; }
            .stat-grid { grid-template-columns:1fr; }
        }