:root { --bg:#f6f8f7; --surface:#fff; --text:#16211c; --muted:#596861; --line:#dce7e0; --green:#059669; --wash:#ecfdf5; --shadow:0 24px 60px rgb(19 48 34 / .08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft Yahei",sans-serif; line-height:1.6; }
.grid { position:fixed; inset:0; z-index:-2; background-image:linear-gradient(rgb(10 80 45 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(10 80 45 / .035) 1px,transparent 1px); background-size:48px 48px; }
.glow { position:fixed; z-index:-1; top:-320px; left:50%; width:820px; height:720px; border-radius:50%; transform:translateX(-50%); background:#9cf0c5; filter:blur(180px); opacity:.38; }
.container { width:min(1160px,calc(100% - 48px)); margin:auto; }
.header { position:sticky; top:0; z-index:10; border-bottom:1px solid rgb(220 231 224 / .82); background:rgb(246 248 247 / .82); backdrop-filter:blur(16px); }
nav { position:relative; display:flex; align-items:center; min-height:72px; gap:24px; }.brand { display:inline-flex; align-items:center; }.brand img { width:auto; height:42px; }.links { position:absolute; left:50%; display:flex; gap:30px; color:var(--muted); font-size:14px; transform:translateX(-50%); }.links a,.links a:any-link { color:var(--muted) !important; text-decoration:none; transition:color .2s ease; }.links a:visited { color:var(--muted) !important; }.links a:hover,.links a:any-link:hover { color:var(--green) !important; }
.lang { margin-left:auto; }.lang,.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 16px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--surface); font-size:14px; font-weight:700; text-decoration:none; transition:color .2s ease,background .2s ease,border-color .2s ease; }.lang:visited,.button:visited { color:var(--text) !important; }.lang:hover,.button:hover { border-color:#a7e8c8; background:var(--wash); }.button.primary { border:0; color:#fff; background:linear-gradient(135deg,#047857,#10b981 62%,#34d399); }.button.primary:visited { color:#fff !important; }
.hero { padding:112px 0 88px; text-align:center; }.badge { display:inline-flex; align-items:center; gap:8px; margin-bottom:26px; border:1px solid rgb(5 150 105 / .35); border-radius:999px; padding:6px 13px; color:#047857; background:rgb(236 253 245 / .78); font-size:13px; font-weight:650; }.badge::before { content:""; width:7px; height:7px; border-radius:99px; background:#10b981; box-shadow:0 0 0 4px rgb(16 185 129 / .15); }h1 { max-width:860px; margin:0 auto 22px; font-size:clamp(42px,6.1vw,72px); line-height:1.05; letter-spacing:-.065em; }.gradient { background:linear-gradient(135deg,#047857,#10b981 58%,#14b8a6); -webkit-background-clip:text; background-clip:text; color:transparent; }.lead { max-width:700px; margin:auto; color:var(--muted); font-size:18px; }.actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }.trusted { display:flex; justify-content:center; flex-wrap:wrap; gap:9px 18px; margin-top:52px; color:#75847c; font-size:13px; }.trusted strong { color:#48574f; }.trusted span { display:inline-flex; align-items:center; gap:7px; }.trusted i { width:5px; height:5px; border-radius:50%; background:#6ee7b7; }
section { padding:84px 0; }.heading { max-width:700px; margin:0 auto 42px; text-align:center; }.kicker { display:block; margin-bottom:12px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.heading h2 { margin:0 0 12px; font-size:clamp(30px,4vw,46px); letter-spacing:-.045em; line-height:1.12; }.heading p { margin:0; color:var(--muted); font-size:17px; }.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.card { min-height:202px; border:1px solid var(--line); border-radius:16px; padding:24px; background:rgb(255 255 255 / .86); }.card:hover { border-color:#a7e8c8; box-shadow:var(--shadow); transform:translateY(-3px); transition:.2s; }.icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:17px; border-radius:11px; color:var(--green); background:var(--wash); font-size:21px; }.card h3 { margin:0 0 9px; font-size:17px; }.card p { margin:0; color:var(--muted); font-size:14px; }
.matrix-shell { overflow:auto; border:1px solid var(--line); border-radius:18px; padding:20px; background:var(--surface); box-shadow:var(--shadow); }.matrix { display:grid; min-width:680px; grid-template-columns:180px repeat(3,1fr); overflow:hidden; border:1px solid var(--line); border-radius:11px; }.matrix>* { min-height:72px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px; }.matrix>:nth-child(4n) { border-right:0; }.matrix>:nth-last-child(-n+4) { border-bottom:0; }.head { min-height:auto; background:#f1f6f3; font-size:13px; font-weight:800; }.req { display:flex; align-items:center; font-size:14px; font-weight:800; }.pill { display:inline-block; margin:2px 4px 2px 0; border-radius:6px; padding:3px 8px; font-size:12px; font-weight:650; }.done { color:#047857; background:#dff8ea; }.waiting { border:1px dashed #d99a4c; color:#a16207; }.progress { color:#0f766e; background:#d8fbf4; }.failed { color:#b91c1c; background:#fee2e2; }
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }.step { position:relative; min-height:180px; border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--surface); }.number { display:grid; place-items:center; width:30px; height:30px; margin-bottom:18px; border-radius:8px; color:#fff; background:linear-gradient(135deg,#047857,#10b981); font-size:13px; font-weight:800; }.step h3 { margin:0 0 7px; font-size:16px; }.step p { margin:0; color:var(--muted); font-size:13px; }.step:not(:last-child)::after { position:absolute; top:50%; right:-10px; z-index:1; content:"→"; color:#34d399; font-size:20px; font-weight:800; }.cta { margin:22px 0 80px; border:1px solid #b9eed2; border-radius:24px; padding:72px 28px; text-align:center; background:radial-gradient(circle at 50% 0,#d9fae8 0,transparent 58%),var(--surface); }.cta h2 { max-width:650px; margin:0 auto 12px; font-size:clamp(30px,4vw,46px); letter-spacing:-.045em; line-height:1.14; }.cta p { max-width:570px; margin:auto; color:var(--muted); font-size:17px; }footer { border-top:1px solid var(--line); padding:32px 0 42px; color:#7a8880; font-size:13px; text-align:center; }
@media(max-width:900px) { .links { display:none; }.cards { grid-template-columns:1fr 1fr; }.steps { grid-template-columns:repeat(3,1fr); }.step:nth-child(3)::after { display:none; } }
@media(max-width:620px) { .container { width:min(100% - 32px,1160px); }nav { min-height:64px; }.brand img { height:35px; }.hero { padding:76px 0 58px; }.lead { font-size:16px; }.trusted { margin-top:34px; }section { padding:58px 0; }.cards,.steps { grid-template-columns:1fr; }.step { min-height:auto; }.step::after { display:none; }.cta { margin-bottom:44px; padding:54px 20px; }.matrix-shell { margin:0 -4px; padding:10px; } }