.hero { padding: 58px 0 48px; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 82% 24%, rgba(47, 107, 79, 0.09), transparent 28rem); }
.hero h1 { max-width: 22ch; }
.hero-copy { max-width: 62ch; margin-top: 14px; color: var(--text-soft); }
.hero-stats { display: flex; gap: 32px; margin-top: 24px; }
.stat-num { display: block; color: var(--accent-dark); font-size: 1.7rem; font-weight: 750; }
.stat-label { color: var(--text-soft); font-size: 0.78rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cat-card { display: flex; flex-direction: column; gap: 8px; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: box-shadow 0.15s, transform 0.15s; }
.cat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.cat-card .icon { color: var(--accent-dark); font-size: 1.35rem; }
.cat-card .name { font-size: 0.9rem; font-weight: 650; }
.cat-card .count { color: var(--text-soft); font-size: 0.76rem; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hero-stats { gap: 20px; } .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }