:root {
  --fallback-blue: #005fa9;
  --fallback-blue-strong: #004f8c;
  --fallback-text: #ffffff;
  --fallback-muted: #d8e9ff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.fallback-body {
  margin: 0;
  min-height: 100vh;
  font-family: "Bai Jamjuree", system-ui, sans-serif;
  color: var(--fallback-text);
  background:
    linear-gradient(130deg, rgba(12, 27, 49, 0.78), rgba(24, 42, 70, 0.68)),
    url("fallback_bg.jpg") center/cover no-repeat fixed;
}

.fallback-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 36px 20px;
}

.fallback-card {
  width: min(100%, 520px);
  background: rgba(0, 95, 169, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(8, 22, 43, 0.34);
  padding: 34px 32px;
  backdrop-filter: blur(2px);
}

.fallback-logo {
  display: block;
  width: 170px;
  margin: 0 auto 10px;
}

.fallback-kicker {
  margin: 0;
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 0.74rem;
  font-weight: 700;
  color: #c9e0ff;
}

.fallback-card h1 {
  margin: 10px 0;
  text-align: center;
  font-family: "kallisto", "Bai Jamjuree", system-ui, sans-serif;
  font-size: clamp(1.85rem, 4.2vw, 2.6rem);
  line-height: 1.08;
  font-weight: 600;
  color: #ffffff;
}

.fallback-description {
  margin: 0 0 16px;
  text-align: center;
  font-size: 0.98rem;
  color: var(--fallback-muted);
}

.fallback-contact-label {
  margin: 18px 0 6px;
  text-align: center;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9e0ff;
  font-weight: 700;
}

.fallback-contact {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
}

.fallback-contact a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.fallback-contact a:hover {
  color: #eaf3ff;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .fallback-card {
    padding: 24px 20px;
  }
}