.landing { text-align: center; padding-top: 56px; }
.landing .logo {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--gold), 0 0 48px rgba(229, 169, 60, 0.35), 0 0 90px rgba(91, 61, 245, 0.3);
}
.landing h1 { font-size: 40px; margin-top: 26px; }
.tagline { font-size: 18px; color: var(--text); max-width: 560px; margin: 10px auto 4px; }
.tagline-hi { color: var(--muted); margin: 0 auto 34px; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  text-align: left;
  margin-bottom: 30px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.card:hover, .card:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; }
.card span { color: var(--muted); font-size: 14px; }
.note.small { font-size: 13.5px; color: var(--muted); text-align: left; }
footer { color: var(--muted); font-size: 13px; margin-top: 26px; }
@media (max-width: 480px) {
  .landing { padding-top: 32px; }
  .landing h1 { font-size: 32px; }
}