@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Michroma&display=swap');

:root{
  --brand:#3938c4;
  --bg:#0d1020;
  --surface:#15192b;
  --surface-2:#1b2035;
  --border:#292f49;
  --text:#f5f6fa;
  --muted:#a7aec1;
  --success:#52d59b;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
body{background:radial-gradient(circle at 15% 0%,rgba(57,56,196,.22),transparent 35%),var(--bg)}
.wrap{width:min(1080px,calc(100% - 40px));margin:auto}
header{padding:32px 0;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:48px;height:48px}
.brand strong{font-family:Michroma,sans-serif;font-size:20px;font-weight:400}
main{padding:80px 0}
.hero{max-width:780px}
.eyebrow{display:inline-flex;padding:7px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:13px}
h1{font-family:Michroma,sans-serif;font-weight:400;font-size:clamp(34px,5vw,62px);line-height:1.12;margin:22px 0}
p{color:var(--muted);font-size:18px;line-height:1.65}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:12px;text-decoration:none;font-weight:600;border:1px solid var(--border);color:var(--text);background:var(--surface-2)}
.btn.primary{background:var(--brand);border-color:var(--brand)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:70px}
.card{padding:22px;border-radius:18px;border:1px solid var(--border);background:var(--surface)}
.card h2{font-size:16px;margin:0 0 8px}
.card p{font-size:14px;margin:0}
footer{padding:28px 0 40px;color:var(--muted);font-size:13px}
code{font-family:ui-monospace,monospace}
@media(max-width:760px){.grid{grid-template-columns:1fr}main{padding:50px 0}.brand strong{font-size:15px}}