:root {
  --page-bg: #020404;
  --stage-bg: #020404;
  --grid-perspective: 1250px;
  --tile-perspective: 760px;
  --tile-depth: 4px;
  --tile-radius: 6px;
  --tile-border: 1px solid rgba(188, 231, 229, 0.18);
  --tile-shadow:
    0 18px 30px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.44);
  --tile-sheen:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255, 255, 255, 0.34), transparent 25%),
    linear-gradient(138deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.045) 33%, rgba(0, 0, 0, 0.28));
  --spine-size: 1px;
  --spine-color: rgba(210, 236, 233, 0.26);
  --spine-opacity: 0.4;
  --spine-active-color: rgba(217, 246, 243, 0.88);
  --spine-active-opacity: 0.86;
  --spine-active-shadow:
    0 0 10px rgba(73, 204, 204, 0.34),
    0 0 15px rgba(217, 154, 70, 0.18);
  --axle-size: 4px;
  --axle-color: rgba(213, 236, 233, 0.54);
  --axle-opacity: 0.46;
  --axle-shadow: 0 0 8px rgba(86, 192, 190, 0.16);
  --axle-active-color: rgba(235, 252, 249, 0.96);
  --axle-active-opacity: 0.94;
  --axle-active-shadow:
    0 0 9px rgba(83, 213, 211, 0.36),
    0 0 16px rgba(222, 155, 67, 0.18);
  --wordmark-color: #f2f7f6;
  --wordmark-weight: 470;
  --wordmark-shadow:
    0 0 14px rgba(204, 238, 235, 0.22),
    0 16px 38px rgba(0, 0, 0, 0.88);
  --wordmark-offset-y: 0.2vh;
}

body.splash {
  background: #020404;
}

.stage {
  background:
    linear-gradient(112deg, transparent 10%, rgba(203, 139, 55, 0.12) 34%, transparent 56%),
    linear-gradient(248deg, transparent 17%, rgba(46, 181, 190, 0.14) 43%, transparent 69%),
    linear-gradient(180deg, #040707 0%, #010202 100%);
}

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

.stage::before {
  z-index: 0;
  background:
    linear-gradient(105deg, transparent 14%, rgba(229, 160, 73, 0.16) 37%, transparent 55%),
    linear-gradient(252deg, transparent 21%, rgba(57, 198, 200, 0.14) 45%, transparent 70%);
  filter: blur(28px);
  opacity: 0.74;
}

.stage::after {
  z-index: 6;
  background:
    radial-gradient(ellipse 46% 25% at 50% 51%, rgba(1, 3, 3, 0.22), rgba(1, 3, 3, 0.06) 56%, transparent 78%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 17% 83%, rgba(0, 0, 0, 0.72)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.58), transparent 19% 75%, rgba(0, 0, 0, 0.76));
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.7);
}

.tile-grid {
  inset: -13vh -9vw;
  z-index: 2;
  transform: translate3d(0, -1vh, 0) rotateX(42deg) rotateZ(-7deg) scale(1.13);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.tile-grid::before {
  z-index: 4;
  background:
    linear-gradient(110deg, transparent 16%, rgba(233, 166, 82, 0.24) 36%, transparent 54%),
    linear-gradient(250deg, transparent 23%, rgba(74, 215, 216, 0.2) 45%, transparent 69%);
  mix-blend-mode: screen;
}

.tile-grid::after {
  z-index: 5;
  background:
    radial-gradient(ellipse at center, transparent 0 34%, rgba(0, 0, 0, 0.24) 67%, rgba(0, 0, 0, 0.74) 100%);
}

.tile {
  opacity: 0.72;
  transition: opacity 150ms ease;
}

.tile:nth-child(4n) {
  opacity: 0.54;
}

.tile:nth-child(5n + 2) {
  opacity: 0.62;
}

.tile:nth-child(9n + 4) {
  opacity: 0.82;
}

.tile:nth-child(13n + 7) {
  opacity: 0.42;
}

.tile-face::before {
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--tile-radius) - 1px);
  background:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255, 255, 255, 0.22), transparent 26%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045) 47%, transparent 65%);
  opacity: 0.54;
  pointer-events: none;
  content: "";
}

.tile-front {
  background:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255, 255, 255, 0.16), transparent 27%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 38%, rgba(0, 0, 0, 0.38)),
    var(--tile-front);
}

.tile-back {
  border-color: rgba(238, 229, 198, 0.38);
  background:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255, 255, 255, 0.42), transparent 27%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 37%, rgba(0, 0, 0, 0.2)),
    var(--tile-back);
  box-shadow:
    0 0 22px rgba(71, 202, 201, 0.18),
    0 0 28px rgba(222, 155, 67, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.tile.is-active {
  z-index: 2;
  opacity: 1;
}

.tile.is-active .tile-face {
  border-color: rgba(233, 249, 247, 0.52);
}

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

.wordmark-wrap {
  min-width: min(68vw, 740px);
  padding: 2.5rem 3rem;
}

.wordmark {
  font-size: 4.9rem;
  letter-spacing: 0;
}

@media (max-width: 680px) {
  .tile-grid {
    inset: -9vh -23vw;
    transform: translate3d(0, -1vh, 0) rotateX(37deg) rotateZ(-8deg) scale(1.08);
  }

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

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