: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.13);
  --tile-shadow:
    0 18px 26px rgba(0, 0, 0, 0.64),
    0 3px 7px rgba(0, 0, 0, 0.86),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --tile-sheen:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 42%, rgba(0, 0, 0, 0.36)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.38));
  --spine-size: 2px;
  --spine-color: rgba(0, 186, 255, 0.88);
  --spine-opacity: 0.78;
  --axle-size: 5px;
  --axle-color: #0ac4ff;
  --axle-opacity: 0.9;
  --axle-shadow:
    0 0 7px rgba(0, 184, 255, 0.95),
    0 0 18px rgba(0, 126, 255, 0.58),
    0 0 30px rgba(0, 66, 255, 0.28);
  --wordmark-color: #edf6fb;
  --wordmark-weight: 320;
  --wordmark-offset-y: -0.06em;
  --wordmark-shadow:
    0 0 20px rgba(0, 183, 255, 0.18),
    0 16px 44px rgba(0, 0, 0, 0.88);
}

body.splash {
  background:
    radial-gradient(circle at 50% 49%, rgba(15, 28, 37, 0.96) 0 12%, rgba(5, 7, 10, 0.86) 34%, #020305 74%),
    #05070a;
}

.stage {
  background:
    radial-gradient(ellipse at center, rgba(15, 23, 29, 0.94) 0 18%, rgba(4, 7, 11, 0.82) 46%, #010204 78%),
    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 52vw 19vh at 50% 49%, rgba(2, 5, 8, 0.9), transparent 72%),
    radial-gradient(circle at 17% 27%, rgba(0, 183, 255, 0.12), transparent 18%),
    radial-gradient(circle at 79% 68%, rgba(0, 183, 255, 0.16), transparent 17%);
}

.stage::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.48)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.54), transparent 21%, transparent 70%, rgba(0, 0, 0, 0.66));
}

.tile-grid {
  inset: -2.5vh -2.5vw;
  width: 105vw;
  height: 105vh;
  filter: saturate(1.18) contrast(1.08);
}

.tile-grid::before {
  background:
    linear-gradient(90deg, rgba(0, 145, 255, 0.2), transparent 12%, transparent 88%, rgba(0, 145, 255, 0.12)),
    radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0.8) 0 17%, transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.52;
}

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

.tile {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.8));
}

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

.tile-front {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%, rgba(0, 0, 0, 0.35)),
    linear-gradient(115deg, rgba(89, 127, 151, 0.08), transparent 34%),
    var(--tile-front);
}

.tile-back {
  border-color: rgba(0, 203, 255, 0.56);
  background:
    linear-gradient(180deg, rgba(236, 251, 255, 0.38), transparent 21%, rgba(0, 34, 70, 0.36)),
    linear-gradient(90deg, rgba(0, 242, 255, 0.2), transparent 52%),
    var(--tile-back);
  box-shadow:
    0 0 22px rgba(0, 177, 255, 0.38),
    0 16px 28px rgba(0, 0, 0, 0.66),
    inset 0 0 28px rgba(0, 196, 255, 0.26);
}

.tile-spine {
  box-shadow:
    0 0 9px rgba(0, 199, 255, 0.9),
    0 0 22px rgba(0, 112, 255, 0.46);
}

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

.wordmark-wrap {
  min-width: min(76vw, 920px);
  padding: clamp(1.25rem, 3.8vw, 3.25rem);
}

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

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

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

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