:root {
--accent: #5b8def;
--bg: #0f172a;
--bg2: #1e293b;
--text: #f1f5f9;
--muted: #94a3b8;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: -apple-system, "Segoe UI", Inter, sans-serif;
background: var(--bg);
color: var(--text);
}
.hero {
min-height: 70vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, var(--bg), var(--bg2));
}
.badge {
background: rgba(91, 141, 239, 0.15);
border: 1px solid var(--accent);
color: var(--accent);
padding: 6px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 24px;
}
h1 {
font-size: 3rem;
max-width: 800px;
margin: 0 0 16px;
}
.subtitle {
color: var(--muted);
font-size: 1.2rem;
max-width: 600px;
}
.cta {
margin-top: 32px;
background: var(--accent);
color: white;
padding: 14px 32px;
border-radius: 10px;
text-decoration: none;
font-weight: 700;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
padding: 60px 40px;
max-width: 1000px;
margin: 0 auto;
}
.card {
background: var(--bg2);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 14px;
padding: 28px;
}
.card h3 { color: var(--accent); margin-top: 0; }
.card p { color: var(--muted); line-height: 1.5; }
.how {
max-width: 700px;
margin: 0 auto;
padding: 40px 20px 80px;
}
.how h2 { font-size: 2rem; }
.how ol { color: var(--muted); line-height: 2; font-size: 1.05rem; }
.how code { background: var(--bg2); padding: 2px 8px; border-radius: 6px; color: var(--accent); }
.note { color: var(--muted); font-style: italic; margin-top: 24px; }
footer {
text-align: center;
padding: 24px;
color: var(--muted);
border-top: 1px solid rgba(148, 163, 184, 0.15);
font-size: 0.9rem;