/* 17-hero-subs */
.nav-hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nav-hero-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 100px; padding: 16px; border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(160deg, var(--sub-color), color-mix(in srgb, var(--sub-color) 30%, #fff));
  cursor: pointer; font: inherit; color: var(--sub-text); text-align: center;
}
.nav-hero-emoji { font-size: 32px; }
.nav-hero-title { font-size: 13px; font-weight: 700; }
@media (max-width: 640px) { .nav-hero-grid { grid-template-columns: repeat(2, 1fr); } }