.home { padding-top: 24px; }
.home h1 { font-size: clamp(2.4rem, 10vw, 4rem); line-height: 1.05; margin: clamp(24px, 8vh, 72px) 0 12px; }
.home h1 span { color: var(--muted); font-weight: 500; }
.home .lead { max-width: 34em; margin-bottom: 40px; font-size: 1.1rem; }

.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.app-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}

.app-card:hover, .app-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.app-card .icon { margin-bottom: 12px; font-size: 2rem; line-height: 1; }
.app-card h2 { margin: 0 0 6px; font-size: 1.2rem; }
.app-card p { margin: 0 0 16px; color: var(--muted); font-size: 0.95rem; }
.app-card .host { margin-top: auto; color: var(--accent); font-size: 0.85rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .app-card { transition: none; }
  .app-card:hover, .app-card:focus-visible { transform: none; }
}