/* Landing: two stations, Random Hero and the tactical database. */
.hub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}
.hub-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 300px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.hub-card:hover {
  color: inherit;
  transform: translateY(-3px);
  border-color: var(--orange);
}
.hub-card__index {
  font-family: var(--font-head);
  font-size: 22px;
  letter-spacing: .14em;
  color: var(--orange);
}
.hub-card__roles { display: flex; gap: 10px; margin: 8px 0; }
.hub-card__roles img { width: 36px; height: 36px; }
.hub-card__title {
  font-size: clamp(42px, 5.4vw, 76px);
  color: #fff;
  text-transform: none;
  text-shadow: 0 0 22px rgba(0, 163, 224, .28);
}
.hub-card p { margin: 0; color: var(--text-dim); font-size: 18px; max-width: 36ch; }
.hub-card__sub {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan) !important;
  font-size: 22px !important;
}
.hub-card--spin { background:
  radial-gradient(420px 180px at 100% 0%, rgba(249, 158, 26, .16), transparent 70%),
  var(--panel);
}
.hub-card--data { background:
  radial-gradient(420px 180px at 0% 100%, rgba(0, 163, 224, .16), transparent 70%),
  var(--panel);
}
.hub-card--rates {
  grid-column: 1 / -1;
  min-height: 200px;
  background:
    radial-gradient(520px 200px at 90% 0%, rgba(0, 229, 153, .14), transparent 70%),
    var(--panel);
}

@media (max-width: 800px) {
  .hub { grid-template-columns: 1fr; }
  .hub-card { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card:hover { transform: none; }
}