.hero {
  --hero-u: max(0.62px, min(1px, (50vw - 56px) / 522, (100vh - 230px) / 455));
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  object-position: center;
}

.hero__noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../assets/images/hero-noise.png");
  background-size: 256px 256px;
  background-repeat: repeat;
  opacity: 0.05;
  pointer-events: none;
  animation: grain-shift 1s steps(8) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__noise {
    animation: none;
  }
}

.hero__line {
  position: absolute;
  background: var(--color-gray-400);
}
.hero__line--v-top {
  left: 50%;
  top: calc(50% - 224 * var(--hero-u));
  bottom: 0;
  width: 1px;
}
.hero__line--h-right {
  left: calc(50% + 368 * var(--hero-u));
  right: 0;
  top: 50%;
  height: 1px;
}
.hero__line--h-left {
  left: 0;
  right: calc(50% + 368 * var(--hero-u));
  top: 50%;
  height: 1px;
}

.hero__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(736 * var(--hero-u));
  height: calc(455 * var(--hero-u));
  border: 1px solid var(--color-gray-300);
  background: var(--color-card-bg);
  backdrop-filter: blur(43px);
  -webkit-backdrop-filter: blur(43px);
}

.hero__dot {
  position: absolute;
  width: calc(8 * var(--hero-u));
  height: calc(8 * var(--hero-u));
  border-radius: 50%;
  background: var(--color-gray-100);
}
.hero__dot--tl {
  left: calc(-4 * var(--hero-u));
  top: calc(-4 * var(--hero-u));
}
.hero__dot--bl {
  left: calc(-4 * var(--hero-u));
  bottom: calc(-4 * var(--hero-u));
}
.hero__dot--tr {
  right: calc(-4 * var(--hero-u));
  top: calc(-4 * var(--hero-u));
}
.hero__dot--br {
  right: calc(-4 * var(--hero-u));
  bottom: calc(-4 * var(--hero-u));
}

.hero__logo-mark {
  position: absolute;
  left: calc(60 * var(--hero-u));
  top: calc(38 * var(--hero-u));
  width: calc(616 * var(--hero-u));
  height: calc(237 * var(--hero-u));
}

.hero__blurb {
  position: absolute;
  left: calc(59 * var(--hero-u));
  top: calc(315 * var(--hero-u));
  width: calc(300 * var(--hero-u));
  font-size: calc(24.7 * var(--hero-u));
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-gray-b5);
}
.hero__blurb-highlight {
  color: var(--color-white);
}

.hero__stack {
  position: absolute;
  left: calc(24 * var(--hero-u));
  top: calc(406 * var(--hero-u));
  font-size: calc(23.4 * var(--hero-u));
  font-weight: 700;
  letter-spacing: calc(-0.83 * var(--hero-u));
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}
.hero__stack span {
  margin-inline: calc(7 * var(--hero-u));
}

.hero__signature {
  position: absolute;
  left: calc(476 * var(--hero-u));
  top: calc(303 * var(--hero-u));
  width: calc(288 * var(--hero-u));
  height: calc(106 * var(--hero-u));
}

.hero__signature-icon {
  position: absolute;
  left: calc(757 * var(--hero-u));
  top: calc(346 * var(--hero-u));
  width: calc(133 * var(--hero-u));
  height: calc(78 * var(--hero-u));
}

.hero__slots {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2.8vw, 40px);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15.37px;
  font-weight: 600;
  white-space: nowrap;
}
.hero__slots-label {
  color: var(--color-gray-200);
}
.hero__slots-label strong {
  font-weight: 700;
  color: var(--color-white);
}
.hero__slots-meter {
  letter-spacing: 1.1px;
}
.hero__slots-meter-filled {
  color: var(--color-accent-orange-alt);
}
.hero__slots-meter-empty {
  color: var(--color-gray-600);
}
.hero__slots-count {
  color: var(--color-white);
}