.hero-art {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(5, 5, 5, 0.18)),
    url("assets/hero-aerial-roof.png") center center / cover;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}

.hero-art::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(0deg, rgba(5, 5, 5, 0.42), transparent 46%);
  content: "";
}

.hero-art::after {
  position: absolute;
  left: 8%;
  right: 0;
  bottom: 0;
  height: 38%;
  background:
    linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.48)),
    repeating-linear-gradient(168deg, rgba(255, 255, 255, 0.15) 0 2px, transparent 2px 42px);
  mix-blend-mode: soft-light;
  content: "";
}

.roof-shine {
  display: none;
}

.roof-card {
  position: absolute;
  inset: auto 34px 34px auto;
  width: min(330px, 62%);
  min-height: 154px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 14px;
  background: rgba(5, 5, 5, 0.56);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

.roof-card::before {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(244, 201, 93, 0.42);
  border-radius: 10px;
  content: "";
}

.badge {
  position: static;
  display: grid;
  min-height: 154px;
  place-items: center;
  padding: 24px;
  color: #f4c95d;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(244, 201, 93, 0.28);
}

@keyframes heroRoofShine {
  0%,
  100% {
    opacity: 0.32;
    transform: translateX(-8%) rotate(-12deg);
  }

  50% {
    opacity: 1;
    transform: translateX(8%) rotate(-12deg);
  }
}

@media (max-width: 900px) {
  .hero-art {
    min-height: 380px;
    clip-path: none;
  }

  .roof-card {
    right: 18px;
    bottom: 18px;
    width: min(310px, calc(100% - 36px));
  }
}