:root {
  color-scheme: dark;
  background: #011534;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 280px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #011534;
}

.landing {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: 100%;
  place-items: center;
  overflow: hidden;
}

.landing::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgb(1 21 52 / 10%) 0 18%, rgb(1 21 52 / 52%) 72%),
    linear-gradient(180deg, rgb(1 21 52 / 8%), rgb(1 21 52 / 38%));
  content: "";
}

.landing__scene {
  position: absolute;
  z-index: 0;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.04);
}

.landing__brand {
  position: relative;
  z-index: 2;
  width: clamp(140px, 22vw, 260px);
  height: auto;
  filter: drop-shadow(0 16px 38px rgb(1 21 52 / 70%));
}

@media (max-aspect-ratio: 3 / 4) {
  .landing__scene {
    inset: -6%;
    width: 112%;
    height: 112%;
    object-position: 52% center;
  }
}