.hero-character {
  position: absolute;
  z-index: 4;
  right: -2%;
  bottom: -9%;
  width: 95%;
  height: auto;
  max-height: 112%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  filter: drop-shadow(0 15px 16px rgba(38, 57, 47, .12));
}
.hero-selfie { right: auto; left: 50%; bottom: -5%; width: 90%; max-height: 108%; transform: translateX(-50%); }
.hero-geometry { position: absolute; z-index: 3; inset: 0; pointer-events: none; overflow: hidden; }
.hero-geometry span { position: absolute; display: block; }
.geo-ring { width: 66%; aspect-ratio: 1; left: 17%; top: 14%; border: 2px solid rgba(73, 113, 102, .27); border-radius: 50%; }
.geo-sun { width: 94px; height: 94px; left: 7%; bottom: 13%; border-radius: 50%; background: rgba(255, 205, 95, .72); }
.geo-tile { width: 82px; height: 82px; right: 9%; top: 15%; background: rgba(112, 86, 220, .17); transform: rotate(26deg); }
.geo-line { width: 43%; height: 2px; right: 5%; bottom: 18%; background: rgba(37, 99, 82, .32); transform: rotate(-29deg); transform-origin: right center; }
@media (max-width: 800px) { .hero-selfie { right: auto; left: 50%; bottom: -7%; width: 98%; max-height: 113%; transform: translateX(-50%); } .geo-sun { width: 58px; height: 58px; } .geo-tile { width: 58px; height: 58px; } }
@media (max-width: 800px) {
  .hero-character { right: -5%; bottom: -11%; width: 106%; max-height: 118%; }
}