.control-room {
  background:
    radial-gradient(circle at 74% 42%, rgba(205, 255, 88, 0.24), transparent 27%),
    radial-gradient(circle at 22% 24%, rgba(39, 207, 183, 0.1), transparent 30%),
    linear-gradient(120deg, #020907 0%, #062118 48%, #030806 100%);
}

.control-room::after {
  background: linear-gradient(112deg, transparent 0 36%, rgba(217, 255, 120, 0.11) 47%, transparent 58%);
}

.hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: 34px;
}

.cube-art-showcase {
  min-height: 620px;
  display: grid;
  place-items: center;
  overflow: visible;
  isolation: isolate;
  perspective: 1200px;
  perspective-origin: 50% 44%;
}

.cube-art-showcase::before {
  content: "";
  position: absolute;
  inset: 7% -3% 7% -5%;
  border-radius: 44px;
  background:
    radial-gradient(circle at 56% 42%, rgba(218, 255, 108, 0.28), transparent 23%),
    radial-gradient(circle at 47% 57%, rgba(28, 158, 94, 0.24), transparent 38%),
    radial-gradient(circle at 70% 36%, rgba(239, 255, 178, 0.12), transparent 22%);
  filter: blur(13px);
  opacity: 0.88;
  z-index: -2;
}

.cube-art-showcase::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 1%;
  bottom: 10%;
  height: 24%;
  background: radial-gradient(ellipse, rgba(205, 255, 94, 0.2), rgba(8, 71, 52, 0.12) 42%, transparent 72%);
  filter: blur(12px);
  transform: rotateX(62deg);
  z-index: -1;
}

.cube-art-shell {
  position: absolute;
  inset: 4% -1% 8% -3%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
  filter: saturate(1.05) contrast(1.03);
  animation: premiumCubeFloat 7.5s ease-in-out infinite;
}

.cube-art-shell::before {
  content: "";
  position: absolute;
  width: min(72%, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 255, 93, 0.28), rgba(34, 146, 87, 0.16) 34%, transparent 70%);
  filter: blur(36px);
  z-index: 0;
}

.cube-art-shell::after {
  content: "";
  position: absolute;
  width: min(56%, 540px);
  height: 17%;
  bottom: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(203, 255, 92, 0.18), rgba(11, 43, 31, 0.32) 43%, transparent 74%);
  filter: blur(12px);
  z-index: 1;
}

.cube-main-art,
.cube-glow-layer {
  position: absolute;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.cube-glow-layer {
  display: none !important;
}

.cube-main-art {
  z-index: 2;
  width: min(100%, 600px);
  max-width: none;
  transform: translate3d(2%, -1%, 80px) rotateX(2deg) rotateY(-8deg) rotateZ(-0.8deg);
  transform-origin: 50% 54%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter:
    drop-shadow(0 44px 58px rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 42px rgba(202, 255, 82, 0.28));
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 900ms ease;
  animation: cubeImageGlow 6.4s ease-in-out infinite;
}

.business-cube-rotator {
  --cube-size: min(64vw, 430px);
  --cube-depth: calc(var(--cube-size) / 2);
  position: absolute;
  z-index: 2;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  will-change: transform, filter;
  transform: rotateX(-8deg) rotateY(-12deg) rotateZ(-0.8deg);
  transition:
    transform 1250ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1250ms ease;
  filter:
    drop-shadow(0 44px 62px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 34px rgba(207, 255, 92, 0.2));
}

.business-cube-rotator[data-cube-step="websites"] {
  transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}

.business-cube-rotator[data-cube-step="branding"] {
  transform: rotateX(0deg) rotateY(720deg) rotateZ(0deg);
}

.business-cube-rotator[data-cube-step="growth"] {
  transform: rotateX(0deg) rotateY(1080deg) rotateZ(0deg);
}

.business-cube-rotator[data-cube-step="systems"] {
  transform: rotateX(360deg) rotateY(1080deg) rotateZ(0deg);
}

.business-cube-rotator[data-cube-step="leads"] {
  transform: rotateX(720deg) rotateY(1080deg) rotateZ(0deg);
}

.business-cube-logo-face,
.business-cube-service-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity 420ms ease;
}

.business-cube-service-face {
  backface-visibility: hidden;
}

.business-cube-logo-face {
  transform: translateZ(var(--cube-depth));
  z-index: 2;
}

.business-cube-logo-face::before {
  content: "";
  position: absolute;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 255, 92, 0.16), rgba(12, 74, 53, 0.1) 42%, transparent 70%);
  filter: blur(22px);
  transform: translateZ(-18px);
}

.business-cube-rotator:not([data-cube-step="front"]) .business-cube-logo-face {
  opacity: 0;
}

.business-cube-rotator .cube-main-art {
  position: relative;
  width: min(108%, 470px);
  max-width: 100%;
  transform: none;
}

.business-cube-service-face {
  align-content: center;
  justify-items: start;
  gap: 14px;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgba(226, 255, 150, 0.42);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 0, rgba(218, 255, 104, 0.3), transparent 34%),
    linear-gradient(145deg, rgba(11, 86, 62, 0.96), rgba(3, 20, 15, 0.94));
  color: #f7fff2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -38px 68px rgba(0, 0, 0, 0.3),
    0 30px 64px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  opacity: 0;
}

.business-cube-rotator[data-cube-step="front"] .business-cube-service-face {
  opacity: 0;
}

.business-cube-rotator[data-cube-step="websites"] .cube-face-right,
.business-cube-rotator[data-cube-step="branding"] .cube-face-back,
.business-cube-rotator[data-cube-step="growth"] .cube-face-left,
.business-cube-rotator[data-cube-step="systems"] .cube-face-top,
.business-cube-rotator[data-cube-step="leads"] .cube-face-bottom {
  opacity: 1;
}

.business-cube-service-face::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(226, 255, 150, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 44%),
    linear-gradient(90deg, rgba(226, 255, 150, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(226, 255, 150, 0.08) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  pointer-events: none;
}

.business-cube-service-face span,
.business-cube-service-face strong,
.business-cube-service-face small {
  position: relative;
  z-index: 1;
}

.business-cube-service-face span {
  color: #cef17b;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
}

.business-cube-service-face strong {
  max-width: 11ch;
  font-size: clamp(27px, 4.2vw, 42px);
  line-height: 0.98;
  letter-spacing: 0;
}

.business-cube-service-face small {
  color: rgba(247, 255, 242, 0.72);
  font-size: clamp(13px, 1.35vw, 16px);
  font-weight: 850;
  line-height: 1.35;
}

.business-cube-service-face.cube-face-right {
  transform: translateZ(var(--cube-depth));
}

.business-cube-service-face.cube-face-back {
  transform: translateZ(var(--cube-depth));
}

.business-cube-service-face.cube-face-left {
  transform: translateZ(var(--cube-depth));
}

.business-cube-service-face.cube-face-top {
  transform: translateZ(var(--cube-depth));
}

.business-cube-service-face.cube-face-bottom {
  transform: translateZ(var(--cube-depth));
}

.cube-light {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 3;
}

.cube-light-one {
  width: 30%;
  height: 7%;
  top: 29%;
  right: 27%;
  background: linear-gradient(90deg, transparent, rgba(245, 255, 188, 0.64), transparent);
  filter: blur(14px);
  opacity: 0.86;
  transform: rotate(-18deg) translateX(-16%);
  animation: cubeSheen 7.2s ease-in-out infinite;
}

.cube-light-two {
  width: 8px;
  height: 45%;
  right: 30%;
  bottom: 22%;
  background: linear-gradient(180deg, transparent, rgba(211, 255, 85, 0.5), rgba(255, 255, 220, 0.36), transparent);
  filter: blur(7px);
  opacity: 0.58;
  animation: cubeEdgePulse 5.8s ease-in-out infinite;
}

.cube-grid-floor {
  position: absolute;
  left: 16%;
  right: 13%;
  bottom: 12%;
  height: 24%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent, rgba(229, 255, 152, 0.08), transparent),
    repeating-radial-gradient(ellipse at center, rgba(210, 255, 92, 0.18) 0 1px, transparent 1px 46px);
  opacity: 0.36;
  transform: rotateX(66deg);
  z-index: 0;
}

.cube-art-showcase .hero-data-card-a {
  right: 2%;
  top: 82px;
  width: min(248px, 42%);
  background: linear-gradient(135deg, rgba(246, 255, 235, 0.94), rgba(221, 255, 175, 0.82));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.cube-art-showcase .hero-console {
  right: 2%;
  bottom: 44px;
  width: min(330px, 66%);
  background: linear-gradient(135deg, rgba(5, 24, 19, 0.74), rgba(10, 52, 40, 0.68));
  box-shadow: 0 36px 82px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@keyframes premiumCubeFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotateX(0.8deg) rotateY(-1.1deg);
  }
}

@keyframes cubeImageGlow {
  0%, 100% {
    filter:
      drop-shadow(0 44px 58px rgba(0, 0, 0, 0.56))
      drop-shadow(0 0 38px rgba(200, 255, 77, 0.26));
  }
  50% {
    filter:
      drop-shadow(0 52px 68px rgba(0, 0, 0, 0.6))
      drop-shadow(0 0 58px rgba(210, 255, 88, 0.4));
  }
}

@keyframes cubeSheen {
  0%, 100% {
    opacity: 0.18;
    transform: rotate(-18deg) translateX(-30%);
  }
  42%, 58% {
    opacity: 0.88;
  }
  70% {
    opacity: 0.22;
    transform: rotate(-18deg) translateX(34%);
  }
}

@keyframes cubeEdgePulse {
  0%, 100% {
    opacity: 0.38;
    transform: translateY(10px);
  }
  50% {
    opacity: 0.72;
    transform: translateY(-6px);
  }
}

@keyframes businessCubeRotate {
  0%, 9% {
    transform: rotateX(-8deg) rotateY(-12deg) rotateZ(-0.8deg);
  }
  16%, 25% {
    transform: rotateX(-3deg) rotateY(-90deg) rotateZ(-0.8deg);
  }
  32%, 41% {
    transform: rotateX(-3deg) rotateY(-180deg) rotateZ(-0.8deg);
  }
  48%, 57% {
    transform: rotateX(-3deg) rotateY(-270deg) rotateZ(-0.8deg);
  }
  64%, 73% {
    transform: rotateX(-90deg) rotateY(-10deg) rotateZ(0deg);
  }
  80%, 89% {
    transform: rotateX(90deg) rotateY(-10deg) rotateZ(0deg);
  }
  96%, 100% {
    transform: rotateX(-8deg) rotateY(-372deg) rotateZ(-0.8deg);
  }
}

@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .cube-art-showcase {
    min-height: 520px;
    width: min(100%, 820px);
    margin-inline: auto;
  }

  .cube-art-shell {
    inset: -3% -13% 4% -13%;
  }

  .cube-main-art {
    width: min(128%, 700px);
  }

  .business-cube-rotator {
    --cube-size: min(72vw, 400px);
    width: var(--cube-size);
    height: var(--cube-size);
  }

  .business-cube-rotator .cube-main-art {
    width: min(110%, 430px);
  }

}

@media (max-width: 760px) {
  .cube-art-showcase {
    min-height: 320px;
    margin-top: -8px;
    overflow: visible;
  }

  .hero-grid {
    overflow: visible;
  }

  .cube-art-shell {
    inset: -12% -6% 4% -6%;
  }

  .cube-main-art {
    width: min(94vw, 360px);
    transform: translate3d(0, 0, 80px) rotateX(2deg) rotateY(-8deg) rotateZ(-0.8deg);
  }

  .business-cube-rotator {
    --cube-size: min(58vw, 218px);
    width: var(--cube-size);
    height: var(--cube-size);
  }

  .business-cube-rotator .cube-main-art {
    width: min(108%, 236px);
    transform: none;
  }

  .business-cube-service-face {
    width: auto;
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
    opacity: 0;
  }

  .business-cube-service-face span {
    font-size: 10px;
  }

  .business-cube-service-face strong {
    max-width: 10ch;
    font-size: 19px;
    line-height: 1;
  }

  .business-cube-service-face small {
    font-size: 11px;
    line-height: 1.28;
  }

  .cube-art-showcase::before {
    inset: -6% -30% -8% -30%;
  }

  .cube-art-showcase::after {
    bottom: 2%;
  }

  .cube-art-showcase .hero-data-card-a,
  .cube-light-one,
  .cube-light-two {
    display: none;
  }

  .cube-art-showcase .hero-console {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
  }

  .cube-grid-floor {
    left: 0;
    right: 0;
    bottom: 4%;
  }

  .cube-art-shell::after {
    bottom: 4%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cube-art-shell,
  .cube-main-art,
  .cube-light-one,
  .cube-light-two {
    animation: none !important;
  }
}