:root { --primary: #6d28d9; --bg: #f5f6fa; --text: #1f1b33; --muted: #6b6785; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 2rem; gap: 1rem; flex-wrap: wrap; }
.top nav a { margin-left: 1.5rem; color: var(--text); text-decoration: none; }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 4rem 2rem; max-width: 960px; }
.hero h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); margin: .5rem 0; font-weight: 800; }
.hero p { font-size: 1.25rem; color: var(--muted); }
.pill { align-self: flex-start; background: color-mix(in srgb, var(--primary) 15%, white); color: var(--primary); padding: .4rem 1rem; border-radius: 99px; font-weight: 700; }
footer { padding: 1.5rem 2rem; color: var(--muted); }