/* Portada: hero con degradado, buscador, lista de ranking y bloques de llamada a la acción. */
.hero {
  padding: 5rem 0 3rem;
  background: radial-gradient(60% 80% at 20% 0, rgba(108, 123, 255, 0.2), transparent);
}
.hero p {
  max-width: 56ch;
}
.hero-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  max-width: 760px;
}
.hero-search .input {
  flex: 1 1 280px;
}
.rank-list {
  display: grid;
  gap: 0.5rem;
}
.cta {
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}