:root {
  --page-bg: #05070a;
  --stage-bg: #05070a;
  --grid-perspective: 1180px;
  --tile-perspective: 760px;
  --tile-depth: 5px;
  --tile-radius: 3px;
  --tile-border: 1px solid rgba(98, 158, 205, 0.11);
  --tile-shadow:
    0 15px 24px rgba(0, 0, 0, 0.58),
    0 3px 7px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --tile-sheen:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255, 255, 255, 0.09), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01) 42%, rgba(0, 0, 0, 0.34));
  --spine-size: 1px;
  --spine-color: rgba(74, 139, 168, 0.34);
  --spine-opacity: 0.38;
  --spine-active-color: #28d2f6;
  --spine-active-opacity: 0.94;
  --spine-active-shadow:
    0 0 7px rgba(40, 210, 246, 0.82),
    0 0 18px rgba(22, 126, 184, 0.42);
  --axle-size: 4px;
  --axle-color: rgba(69, 143, 177, 0.54);
  --axle-opacity: 0.44;
  --axle-shadow: 0 0 7px rgba(17, 119, 164, 0.24);
  --axle-active-color: #38d8f8;
  --axle-active-opacity: 1;
  --axle-active-shadow:
    0 0 7px rgba(56, 216, 248, 0.92),
    0 0 17px rgba(12, 137, 202, 0.54);
  --wordmark-color: #edf4f7;
  --wordmark-weight: 340;
  --wordmark-offset-y: -0.04em;
  --wordmark-shadow:
    0 0 18px rgba(51, 189, 226, 0.1),
    0 14px 38px rgba(0, 0, 0, 0.86);
}

body.splash {
  background: #05070a;
}

.stage {
  background:
    radial-gradient(ellipse 54% 30% at 50% 50%, #111a20 0%, rgba(7, 11, 15, 0.92) 48%, rgba(1, 2, 4, 0.98) 100%),
    linear-gradient(180deg, #080c10, #020304);
}

.stage::before,
.stage::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
}

.stage::before {
  background:
    radial-gradient(ellipse 37% 15% at 50% 50%, rgba(2, 5, 8, 0.32), transparent 72%),
    linear-gradient(112deg, transparent 18%, rgba(20, 114, 151, 0.07) 42%, transparent 63%);
}

.stage::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 17%, transparent 83%, rgba(0, 0, 0, 0.5)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 20%, transparent 72%, rgba(0, 0, 0, 0.66));
}

.tile-grid {
  inset: -2.5vh -2.5vw;
  width: 105vw;
  height: 105vh;
}

.tile-grid::before {
  background:
    radial-gradient(ellipse 27% 15% at 50% 49%, rgba(0, 0, 0, 0.34), transparent 72%),
    linear-gradient(90deg, rgba(27, 147, 190, 0.08), transparent 14%, transparent 86%, rgba(27, 147, 190, 0.06));
}

.tile-grid::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 14%),
    radial-gradient(ellipse at center, transparent 0 43%, rgba(0, 0, 0, 0.38) 80%);
}

.tile-face {
  outline: 1px solid rgba(0, 0, 0, 0.7);
}

.tile-front {
  background:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(110, 155, 178, 0.08), transparent 27%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%, rgba(0, 0, 0, 0.34)),
    var(--tile-front);
}

.tile-back {
  border-color: rgba(48, 200, 235, 0.48);
  background:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(240, 253, 255, 0.38), transparent 27%),
    linear-gradient(180deg, rgba(236, 251, 255, 0.26), transparent 24%, rgba(0, 34, 70, 0.32)),
    var(--tile-back);
  box-shadow:
    0 0 18px rgba(34, 181, 221, 0.28),
    0 14px 25px rgba(0, 0, 0, 0.62),
    inset 0 0 22px rgba(41, 187, 220, 0.18);
}

.tile.is-active .tile-face {
  border-color: rgba(64, 211, 242, 0.5);
}

.brand-lockup {
  z-index: 8;
}

.wordmark-wrap {
  min-width: min(74vw, 900px);
  padding: 2.75rem 3rem;
}

.wordmark {
  font-size: 5rem;
  line-height: 1;
  letter-spacing: 0;
  font-variation-settings: "wght" 340;
}

@media (max-width: 640px) {
  .tile-grid {
    inset: -1.5vh -8vw;
    width: 116vw;
  }

  .wordmark-wrap {
    min-width: min(88vw, 560px);
    padding: 2rem 1rem;
  }

  .wordmark {
    font-size: 2.5rem;
  }
}