.top {
  max-width: 1040px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
}

.hero {
  min-height: calc(100vh - 160px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 20px;
}

.hero h1 {
  font: 700 clamp(40px, 6.4vw, 78px)/1.04 var(--display);
  letter-spacing: -0.03em; margin: 0 0 26px;
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
}

.lead { font-size: clamp(16px, 1.6vw, 20px); color: var(--text-2); max-width: 640px; margin: 0 0 14px;
  animation: rise .8s .08s cubic-bezier(.2, .7, .2, 1) both; }
.note { font-size: 14px; color: var(--text-3); margin: 0 0 34px; animation: rise .8s .14s both; }
.actions { display: flex; gap: 14px; animation: rise .8s .2s both; }

.error {
  margin-top: 26px; padding: 10px 16px; border-radius: 10px; font-size: 14px;
  color: var(--bad-text); background: rgba(208, 59, 59, 0.08); border: 1px solid rgba(208, 59, 59, 0.3);
}

.foot { text-align: center; color: var(--text-3); font-size: 13px; padding: 24px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .hero * { animation: none !important; } }