.status-page {
  min-height: calc(100vh - 90px);
  display: grid;
  place-items: center;
  padding: 80px 20px;
  background:
    linear-gradient(rgba(11, 17, 59, 0.92), rgba(11, 17, 59, 0.96)),
    url("../../img/heroes/hero-img-1.jpg") center / cover;
}

.status-card {
  width: min(100%, 720px);
  padding: clamp(35px, 7vw, 80px) clamp(25px, 7vw, 75px);
  border: 1px solid rgba(233, 193, 118, 0.3);
  border-radius: 14px;
  background: rgba(21, 30, 84, 0.9);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  color: var(--white);
  text-align: center;
}

.status-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--accent-gold);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.status-card h1 {
  margin-bottom: 20px;
  color: var(--white);
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.status-card h1 span {
  color: var(--accent-gold);
}

.status-card p {
  max-width: 560px;
  margin: 0 auto 32px;
  color: #cbd5e1;
  font-size: 1.08rem;
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.status-actions .btn-outline {
  color: var(--white);
}

@media (max-width: 768px) {
  .status-page {
    min-height: calc(100vh - 75px);
    padding: 50px 16px;
  }

  .status-actions {
    flex-direction: column;
  }

  .status-actions .btn {
    width: 100%;
  }
}