:root { --theme:#2563eb; --ink:#1f2937; --muted:#6b7280; --bg:#ffffff; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
header.site .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;font-size:20px;color:var(--theme)}
nav a{margin-left:18px;color:var(--ink);text-decoration:none;font-size:14px}
.hero{padding:72px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--theme) 10%,#fff),#fff)}
.hero h1{font-size:44px;margin:0 0 12px} .hero p{font-size:18px;color:var(--muted);max-width:640px}
.section{padding:48px 0} .section h2{font-size:28px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid #eee;border-radius:14px;padding:20px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.btn{display:inline-block;background:var(--theme);color:#fff;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:600}
.faq li{margin:8px 0} .faq a{color:var(--theme);font-weight:600}
.cf-wrap{max-width:560px}
footer.site{padding:32px 0;border-top:1px solid #eee;color:var(--muted);font-size:13px}
.demo-ribbon{background:#111;color:#fff;text-align:center;font-size:12px;padding:6px}
.demo-ribbon a{color:#fff;text-decoration:underline}