.brand-logo {
  width: 215px;
  height: 72px;
  background: transparent;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}

.logo-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.logo-window img {
  position: absolute;
  width: 205px;
  height: auto;
  max-width: none;
  left: 5px;
  top: -13px;
  object-fit: contain;
}

.footer-brand {
  width: 245px;
  height: 88px;
}

.footer-brand .logo-window img {
  width: 235px;
  left: 5px;
  top: -16px;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("hero-saudi-future-panorama.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: .56;
  filter: saturate(.82) contrast(1.06);
  mix-blend-mode: normal;
  pointer-events: none;
}

.hero-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 17, 31, .9) 0%, rgba(7, 17, 31, .62) 45%, rgba(7, 17, 31, .35) 100%);
}

.hero-visual {
  position: relative;
  z-index: 2;
  width: min(40vw, 560px);
  margin: 0 auto;
  padding: 0;
  filter: drop-shadow(0 30px 38px rgba(0, 0, 0, .32));
  animation: heroFloat 6s ease-in-out infinite;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 18% 8% 5%;
  border: 1px solid rgba(73, 229, 197, .28);
  border-radius: 50%;
  z-index: -1;
  animation: heroPulse 4s ease-in-out infinite;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  animation: heroDrift 8s ease-in-out infinite;
}

.hero-visual img[src="hero-digital-hand-transparent.png"] {
  width: min(100%, 540px);
  margin: 0 auto;
  filter: drop-shadow(0 24px 34px rgba(0, 214, 221, .2));
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(0.6deg); }
  50% { transform: translateY(-14px) rotate(-0.6deg); }
}

@keyframes heroDrift {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(7px) scale(1.015); }
}

@keyframes heroPulse {
  0%, 100% { opacity: .35; transform: scale(.96); }
  50% { opacity: .75; transform: scale(1.05); }
}

@media (max-width: 900px) {
  .brand-logo {
    width: 174px;
    height: 62px;
  }

  .logo-window img {
    width: 168px;
    left: 3px;
    top: -10px;
  }

  .footer-brand {
    width: 225px;
    height: 84px;
  }

  .footer-brand .logo-window img {
    width: 218px;
    left: 3px;
    top: -14px;
  }

  .hero-visual {
    width: min(88vw, 520px);
    margin-top: 3rem;
  }

  .hero-background {
    background-position: 38% center;
    opacity: .22;
  }

  .hero-background::after {
    background: linear-gradient(180deg, rgba(7, 17, 31, .82) 0%, rgba(7, 17, 31, .55) 55%, rgba(7, 17, 31, .72) 100%);
  }
}

@media (max-width: 560px) {
  .hero-visual {
    width: min(90vw, 390px);
    padding: 0;
  }

  .hero-visual img {
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .hero-visual img,
  .hero-visual::after {
    animation: none;
  }
}