:root { --blue:#1769e0; --ink:#172033; --muted:#60708d; --line:#e7ecf5; --panel:#ffffff; --bg:#f5f8fd; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.top { color:#fff; background:linear-gradient(115deg,#0b57c9,#287fe9); }
.wrap { width:min(1100px,calc(100% - 32px)); margin:auto; }
.nav { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { font-size:20px; font-weight:800; letter-spacing:.3px; }
.navlinks { display:flex; gap:20px; font-size:14px; opacity:.96; }
.hero { padding:58px 0 50px; color:#fff; background:linear-gradient(115deg,#0b57c9,#287fe9); }
.hero h1 { max-width:760px; margin:0 0 14px; font-size:clamp(31px,7vw,48px); line-height:1.18; }
.hero p { max-width:710px; margin:0; font-size:18px; opacity:.93; }
.badge { display:inline-block; margin-bottom:15px; padding:5px 11px; border:1px solid rgba(255,255,255,.45); border-radius:999px; font-size:13px; }
.main { padding:42px 0 58px; }
.section { margin:0 0 36px; }
.section h2 { margin:0 0 10px; font-size:27px; }
.section > p { margin:0 0 20px; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { padding:23px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 7px 24px rgba(24,61,120,.05); }
.card h3 { margin:0 0 8px; font-size:19px; }
.card p,.card li { color:var(--muted); font-size:15px; }
.card ul { margin:8px 0 0; padding-left:19px; }
.flow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.step { position:relative; min-height:118px; padding:18px; border-radius:14px; background:#edf4ff; }
.step strong { display:block; margin-bottom:7px; color:var(--blue); font-size:18px; }
.notice { padding:18px 20px; border-left:4px solid var(--blue); border-radius:8px; background:#eaf2ff; color:#3b4c69; }
.cta { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; border-radius:16px; background:#172c52; color:#fff; }
.cta p { margin:5px 0 0; color:#dbe8ff; }
.button { display:inline-block; flex:0 0 auto; padding:10px 17px; border-radius:9px; background:#fff; color:#1159c7; font-weight:700; }
.pagehead { padding:38px 0 30px; background:#edf4ff; }
.pagehead h1 { margin:0 0 8px; font-size:34px; }
.pagehead p { margin:0; color:var(--muted); }
.list { display:grid; gap:14px; }
.list .card { display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:start; }
.list .tag { color:var(--blue); font-weight:800; }
.paybox { max-width:720px; margin:auto; padding:28px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.paybox h2 { margin-top:0; }
.payrow { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px dashed var(--line); }
.payrow:last-child { border-bottom:0; }
.footer { padding:25px 0; color:#7a879e; background:#fff; border-top:1px solid var(--line); font-size:14px; }
@media (max-width:760px) { .wrap { width:min(100% - 24px,1100px); } .nav { min-height:58px; } .navlinks { gap:12px; font-size:13px; } .hero { padding:42px 0 38px; } .hero p { font-size:16px; } .grid,.flow { grid-template-columns:1fr; } .list .card { grid-template-columns:1fr; gap:5px; } .cta { display:block; } .cta .button { margin-top:16px; } .section h2 { font-size:24px; } }