:root {
  color-scheme: dark;
  --navy-950: #030814;
  --navy-900: #071427;
  --navy-800: #0c2038;
  --silver-100: #f3f5f7;
  --silver-300: #cfd6dd;
  --silver-500: #8895a3;
  --gold: #c6a45b;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--navy-950);
}

body {
  min-height: 100vh;
  margin: 0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--silver-100);
  background:
    radial-gradient(circle at 50% 20%, rgba(198, 164, 91, 0.12), transparent 34rem),
    linear-gradient(145deg, var(--navy-900) 0%, var(--navy-950) 62%, #02050d 100%);
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 70%);
}

.landing {
  display: grid;
  min-height: 100vh;
  padding: clamp(2rem, 6vw, 5rem);
  place-items: center;
}

.content {
  width: min(100%, 58rem);
  text-align: center;
}

.logo {
  display: block;
  width: min(82vw, 31rem);
  height: auto;
  margin: 0 auto clamp(1.35rem, 4vw, 2.25rem);
  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.28));
}

.status {
  margin: 0;
  color: var(--silver-300);
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .landing {
    align-items: start;
    padding: 3.5rem 1.25rem;
  }

  .logo {
    width: min(74vw, 18rem);
  }
}