:root{--bg:#0b0f14;--bg2:#0f151e;--card:#0f141c;--line:#1f2933;--text:#e7eaf0;--muted:#a8b3c2;--primary:#2b6cb0;--primary-2:#3b82f6;--glow:rgba(59,130,246,.25)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,rgba(59,130,246,.1),transparent),radial-gradient(900px 500px at 100% 0,rgba(99,102,241,.10),transparent),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;font-size:16px;line-height:1.6}
.container{max-width:1160px;margin:0 auto;padding:24px}
header{text-align:center;padding:42px 0}
header h1{margin:0 0 6px 0;font-size:36px;letter-spacing:.5px}
.subtitle{color:var(--muted)}
.hero{background:linear-gradient(180deg,rgba(16,23,34,.6) 0%,rgba(16,23,34,.2) 100%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:240px;background:radial-gradient(60% 120% at 50% 100%,var(--glow),transparent)}
.hero-inner{padding:44px 0}
.hero-actions{margin:18px 0}
.btn{display:inline-block;border:1px solid var(--line);border-radius:12px;color:var(--text);padding:12px 18px;text-decoration:none;background:linear-gradient(180deg,var(--bg2),var(--card));transition:all .2s ease}
.btn:hover{transform:translateY(-1px);border-color:#2a3340}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff;box-shadow:0 8px 30px -10px var(--glow)}
.btn.primary:hover{filter:brightness(1.05)}
.mini-hint{color:#8fa6c0;font-size:12px}
.card{background:linear-gradient(180deg,rgba(15,20,28,.75),rgba(15,20,28,.55));border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:18px 0;backdrop-filter:saturate(140%) blur(6px);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px -18px var(--glow)}
.card h2{margin-top:0}
.link{color:#9ec5ff;text-decoration:none}
.link:hover{text-decoration:underline}
.bullets{margin:8px 0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:8px}
.feature{background:linear-gradient(180deg,rgba(15,20,28,.85),rgba(15,20,28,.65));border:1px solid var(--line);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden}
.feature::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:160px;background:radial-gradient(50% 100% at 50% 100%,var(--glow),transparent)}
.feature h3{margin:4px 0 6px 0}
footer.container.small{text-align:center;color:var(--muted)}
code{background:#0c0f13;border:1px solid #22262e;border-radius:8px;padding:2px 6px}
@media (max-width:640px){header h1{font-size:28px}.container{padding:18px}.card{padding:18px 16px}}