@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@700;800&display=swap');
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0F172A;background:#ffffff}
a{color:#0EA5E9;text-decoration:none}header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid #e5e7eb;z-index:10}
.nav{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-family:"Inter Tight",Inter,sans-serif;letter-spacing:-.3px}
.logo img{width:28px;height:28px}.nav a{margin-left:18px;font-weight:600;color:#0F172A}
.nav .cta{padding:10px 16px;background:linear-gradient(90deg,#0EA5E9,#10B981);color:#fff;border-radius:999px}
.hero{max-width:1120px;margin:0 auto;padding:80px 20px 40px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-family:"Inter Tight";font-size:44px;line-height:1.1;margin:0 0 12px}.hero p{color:#475569;font-size:18px;margin:0 0 22px}
.buttons{display:flex;gap:12px;flex-wrap:wrap}.btn{padding:12px 18px;border-radius:12px;font-weight:700}
.btn-primary{background:linear-gradient(90deg,#0EA5E9,#10B981);color:#fff}.btn-secondary{background:#eef2f6;color:#0F172A}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.section{padding:54px 20px}.container{max-width:1120px;margin:0 auto}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#ecfeff;color:#006b7f;font-weight:700;font-size:12px}
pre,code{background:#0b1220;color:#e5e7eb;padding:14px;border-radius:12px;display:block;overflow:auto}
footer{margin-top:40px;background:#0b1220;color:#94a3b8}.footer-inner{max-width:1120px;margin:0 auto;padding:28px 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.footer-inner a{color:#cbd5e1}small a{opacity:.9}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}