.hero { max-width: 900px; margin: 80px auto; padding: 0 16px; text-align: center; }
.hero h1 { font-size: 48px; margin: 0 0 12px; }
.hero p { margin: 0 0 24px; color: var(--muted); }
.hero .cta { display: inline-flex; gap: 12px; }
.hero .cta a { text-decoration: none; padding: 10px 16px; border: 1px solid var(--surface-strong); background: var(--surface); color: var(--text); border-radius: 12px; }
.hero .cta a.primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border: 0; }
.features { max-width: 900px; margin: 40px auto; padding: 0 16px; display: grid; gap: 12px; }
.features .card { border: 1px solid var(--surface-strong); background: var(--surface); border-radius: 16px; padding: 16px; }
footer { text-align:center; color: var(--muted); margin: 40px 0; }