.hero{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.hero h1{margin:0 0 6px;font-size:20px}
.hero p{margin:0;color:var(--muted)}
.hero-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;background:var(--accent);color:#fff;border:1px solid var(--accent)}
.cta.ghost{background:#fff;color:var(--text);border:1px solid var(--border)}
.gridcards{margin-top:14px}
.gridcards h2{margin:0 0 10px}
.cards{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:6px}
.card-top{display:flex;align-items:center;justify-content:space-between}
.emoji{font-size:20px}
.tag{font-size:11px;color:var(--muted);border:1px solid var(--border);padding:3px 10px;border-radius:999px}
.card small{color:var(--muted)}