.hero {
  background: #f4f0e6;
}

.hero-copy {
  background: linear-gradient(145deg, #fbf8f0 0%, #f0eadc 100%);
}

.hero-visual {
  background:
    radial-gradient(circle at 78% 18%, #d5a96b 0 2px, transparent 3px),
    radial-gradient(circle at 60% 25%, #d5a96b 0 3px, transparent 5px),
    radial-gradient(circle at 87% 38%, #b57952 0 2px, transparent 4px),
    radial-gradient(ellipse at 70% 13%, #365b79 0%, #173651 38%, #10263b 73%);
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, #d6a26517 35.2%, transparent 35.7%),
              linear-gradient(180deg, transparent 0 61%, #07172599 100%);
  z-index: 1;
}

.sun { width: 310px; height: 310px; top: -83px; right: -30px; opacity: .22; background: #e0b26c; filter: blur(8px); }
.horizon { top: 51%; height: 100px; background: linear-gradient(100deg, #132f45, #2b5971 45%, #163a51); opacity: .72; }
.road { height: 50%; background: linear-gradient(105deg, #16364d, #0a1d2d 52%, #142e42); }
.road::after { background: #d8ad6d; opacity: .54; }

.car-photo {
  width: min(97%, 670px);
  right: -4%;
  bottom: 65px;
  z-index: 2;
  filter: drop-shadow(0 25px 18px #000b) brightness(.97) contrast(1.04);
}

.vehicle-note { z-index: 3; color: #eee8db; right: 27px; }

@media (max-width: 800px) {
  .car-photo { bottom: 50px; right: 0; }
}