#hero {
  isolation: isolate;
  background-color: #030303;
}

#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(3, 5, 8, 0.98) 0%, rgba(3, 5, 8, 0.86) 31%, rgba(3, 5, 8, 0.24) 51%, rgba(3, 5, 8, 0.04) 82%, rgba(3, 5, 8, 0.16) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.3) 100%),
    url("/assets/hero-earth-bg-image123-20260515.png");
  background-position: center right, center right, right 48%;
  background-size: cover, cover, auto 100%;
  background-repeat: no-repeat;
  opacity: 1;
}

#hero .grid-overlay {
  z-index: 1;
}

#hero > .section-container {
  z-index: 10;
}

@media (max-width: 1023px) {
  #hero::after {
    background-position: center right, center right, 66% center;
    background-size: cover, cover, auto 100%;
    opacity: 0.5;
  }
}

@media (max-width: 767px) {
  #hero::after {
    background-position: center right, center right, 72% 34%;
    background-size: cover, cover, auto 100%;
    opacity: 0.34;
  }
}

@media (min-width: 1024px) {
  #hero > .section-container > div {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.68fr) !important;
    gap: clamp(3.2rem, 4.8vw, 5.2rem) !important;
    align-items: center;
  }

  #hero > .section-container > div > div {
    grid-column: auto !important;
  }

  #hero > .section-container > div > div:nth-child(2) {
    justify-content: flex-end;
    padding-top: clamp(1.2rem, 3.4vh, 2.6rem);
  }

  #hero > .section-container > div > div:nth-child(2) > div {
    width: min(30.7vw, 464px) !important;
    max-width: 464px !important;
    gap: 10px !important;
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel {
    min-height: 188px !important;
    padding: 24px !important;
    border-radius: 8px;
    border-color: rgba(255, 255, 255, 0.16);
    background:
      radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.08), transparent 19%),
      radial-gradient(circle at 82% 0%, rgba(255, 102, 0, 0.13), transparent 36%),
      linear-gradient(135deg, rgba(31, 31, 31, 0.86), rgba(8, 10, 12, 0.76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 70px rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(24px) saturate(112%);
    backdrop-filter: blur(24px) saturate(112%);
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel .hud-label {
    color: rgba(255, 255, 255, 0.62);
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel::before {
    content: "";
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.24);
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.8 2.5 15.2 0 18M12 3c-2.5 2.8-2.5 15.2 0 18'/%3E%3C/svg%3E");
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 19v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='10' cy='7' r='3'/%3E%3Cpath d='M20 19v-2a4 4 0 0 0-3-3.9M16 4.2a3 3 0 0 1 0 5.6'/%3E%3C/svg%3E");
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v4M22 12h-4M12 22v-4M2 12h4'/%3E%3C/svg%3E");
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19V5M4 19h16'/%3E%3Cpath d='M8 15l3-3 3 2 5-6'/%3E%3Cpath d='M17 8h2v2'/%3E%3C/svg%3E");
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel:nth-child(5)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='4' width='14' height='16' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h4'/%3E%3C/svg%3E");
  }

  #hero > .section-container > div > div:nth-child(2) .glass-panel:nth-child(6)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.6 5.5 5.9.9-4.3 4.2 1 5.9L12 16.7 6.8 19.5l1-5.9-4.3-4.2 5.9-.9L12 3z'/%3E%3C/svg%3E");
  }
}