/* HUG AppWorks · Hero Transparency v3.3.2
   Slightly lighter than v3.3.1.
   Only the navy frame and four inner panels are changed.
   Logo, text and buttons remain fully opaque. */

.hero-with-video .hero-system {
  background:
    radial-gradient(circle at 50% 46%, rgba(112, 39, 238, 0.21), transparent 30%),
    radial-gradient(circle at 18% 18%, rgba(91, 126, 211, 0.10), transparent 26%),
    linear-gradient(
      145deg,
      rgba(7, 16, 48, 0.74) 0%,
      rgba(11, 22, 48, 0.72) 56%,
      rgba(24, 20, 58, 0.70) 100%
    ) !important;
  border-color: rgba(120, 92, 255, 0.26) !important;
  box-shadow:
    0 30px 82px rgba(8, 12, 35, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

.hero-with-video .mini-cell {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 26% 20%, rgba(153, 119, 255, 0.09), transparent 52%),
    linear-gradient(
      180deg,
      rgba(13, 28, 73, 0.34) 0%,
      rgba(10, 19, 54, 0.26) 100%
    ) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.10) !important;
}

.hero-with-video .mini-cell:hover {
  background:
    radial-gradient(circle at 28% 22%, rgba(166, 130, 255, 0.15), transparent 52%),
    linear-gradient(
      180deg,
      rgba(21, 39, 91, 0.44) 0%,
      rgba(12, 24, 65, 0.34) 100%
    ) !important;
}

.hero-with-video .hero-icon,
.hero-with-video .hero-icon img,
.hero-with-video .hero-system .orbit {
  opacity: 1 !important;
}


/* V3.3.3 · Center capability buttons inside each of the four panels */
.hero-with-video .hero-system .orbit {
  min-height: 46px !important;
  padding: 11px 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}

/* Exact visual center of each quadrant */
.hero-with-video .orbit-a {
  top: 25% !important;
  left: 25% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.hero-with-video .orbit-b {
  top: 25% !important;
  left: 75% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.hero-with-video .orbit-c {
  top: 75% !important;
  left: 25% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.hero-with-video .orbit-d {
  top: 75% !important;
  left: 75% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* Keep the small hover lift without losing the centered position */
.hero-with-video .hero-system .orbit:hover,
.hero-with-video .hero-system .orbit:focus-visible {
  transform: translate(-50%, calc(-50% - 2px)) !important;
}

@media (max-width: 820px) {
  .hero-with-video .hero-system .orbit {
    min-height: 42px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 520px) {
  .hero-with-video .hero-system .orbit {
    min-height: 36px !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
  }
}