/* Editable hero technology graphic */
.hero-tech-visual {
  --hero-blue: var(--blue, #1A56DB);
  --hero-blue-soft: #60A5FA;
  --hero-cyan: #22D3EE;
  --hero-violet: #8B5CF6;
  --hero-pink: #EC4899;
  --hero-warm: #F59E0B;
  --hero-green: #10B981;
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  position: relative;
  width: min(100%, 660px);
  aspect-ratio: 1.12 / 1;
  margin: 0 auto;
  transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0);
  transform-style: preserve-3d;
  isolation: isolate;
  pointer-events: auto;
}

.hero-tech-visual::before,
.hero-tech-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.hero-tech-visual::before {
  inset: 7% 0 8% 1%;
  background:
    radial-gradient(circle at 52% 42%, rgba(26, 86, 219, .14), transparent 32%),
    radial-gradient(circle at 78% 38%, rgba(168, 85, 247, .12), transparent 31%),
    radial-gradient(circle at 78% 68%, rgba(245, 158, 11, .10), transparent 27%);
  filter: blur(4px);
}

.hero-tech-visual::after {
  right: 0;
  top: 5%;
  width: 62%;
  height: 62%;
  border: 1px solid rgba(26, 86, 219, .08);
  opacity: .7;
}

.hero-tech-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .34;
  pointer-events: none;
  animation: hero-aura-breathe 7s ease-in-out infinite;
  z-index: 1;
}

.hero-tech-aura-blue {
  width: 44%;
  height: 44%;
  left: 34%;
  top: 30%;
  background: rgba(26, 86, 219, .42);
}

.hero-tech-aura-violet {
  width: 32%;
  height: 32%;
  right: 17%;
  top: 31%;
  background: rgba(139, 92, 246, .22);
  animation-delay: -2s;
}

.hero-tech-aura-warm {
  width: 28%;
  height: 28%;
  right: 12%;
  bottom: 18%;
  background: rgba(245, 158, 11, .17);
  animation-delay: -3.5s;
}

.hero-tech-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .68;
  z-index: 2;
  animation: hero-network-drift 9s ease-in-out infinite;
}

.hero-tech-orbit {
  position: absolute;
  left: 53%;
  top: 50%;
  border-radius: 50%;
  border: 2px solid rgba(26, 86, 219, .18);
  transform-origin: center;
  z-index: 5;
  pointer-events: none;
}

.hero-tech-orbit-one {
  --orbit-start: -18deg;
  width: 104%;
  height: 52%;
  border-color: rgba(26, 86, 219, .36);
  animation: hero-orbit-spin 16s linear infinite;
}

.hero-tech-orbit-two {
  --orbit-start: 19deg;
  width: 96%;
  height: 44%;
  border-color: rgba(96, 165, 250, .28);
  animation: hero-orbit-spin 21s linear infinite reverse;
}

.hero-tech-orbit-three {
  --orbit-start: -3deg;
  width: 98%;
  height: 40%;
  border-color: rgba(245, 158, 11, .30);
  animation: hero-orbit-spin 24s linear infinite;
}

.hero-tech-orbit-four {
  --orbit-start: -35deg;
  width: 90%;
  height: 58%;
  border-color: rgba(16, 185, 129, .24);
  animation: hero-orbit-spin 28s linear infinite reverse;
}

.hero-tech-dot {
  position: absolute;
  right: -10px;
  top: 50%;
  width: clamp(14px, 2.2vw, 24px);
  height: clamp(14px, 2.2vw, 24px);
  border-radius: 999px;
  transform: translateY(-50%);
  box-shadow: 0 16px 34px rgba(26, 86, 219, .18);
}

.hero-tech-dot-blue {
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 8%, #60A5FA 26%, #1A56DB 68%, #183B9D 100%);
}

.hero-tech-dot-violet {
  width: clamp(10px, 1.6vw, 18px);
  height: clamp(10px, 1.6vw, 18px);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 10%, #A78BFA 30%, #6D28D9 100%);
}

.hero-tech-dot-warm {
  width: clamp(12px, 1.8vw, 20px);
  height: clamp(12px, 1.8vw, 20px);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 8%, #FDBA74 28%, #F59E0B 100%);
}

.hero-tech-dot-green {
  width: clamp(12px, 1.9vw, 22px);
  height: clamp(12px, 1.9vw, 22px);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 8%, #6EE7B7 28%, #10B981 100%);
}

.hero-tech-stage {
  --cube-size: clamp(88px, 10.8vw, 136px);
  --cube-half: calc(var(--cube-size) / 2);
  position: absolute;
  left: 53%;
  top: 51%;
  width: 56%;
  height: 56%;
  transform: translate(-50%, -50%) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
  transform-style: preserve-3d;
  z-index: 4;
  transition: transform .18s ease-out;
}

.hero-tech-glass,
.hero-tech-platform {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 34px;
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-28deg);
  transform-style: preserve-3d;
}

.hero-tech-glass {
  width: 83%;
  height: 83%;
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.24));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 28px 70px rgba(26, 86, 219, .12),
    0 0 0 1px rgba(26, 86, 219, .06);
  backdrop-filter: blur(14px);
  animation: hero-glass-float 6.5s ease-in-out infinite;
}

.hero-tech-platform {
  width: 75%;
  height: 54%;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(239,246,255,.68));
  border: 1px solid rgba(147, 197, 253, .34);
  box-shadow: 0 28px 70px rgba(26, 86, 219, .16);
}

.hero-tech-platform-back {
  top: 58%;
  animation: hero-platform-back 7s ease-in-out infinite;
}

.hero-tech-platform-front {
  top: 68%;
  width: 82%;
  height: 44%;
  background: linear-gradient(135deg, rgba(219,234,254,.76), rgba(255,255,255,.54));
  border-color: rgba(26, 86, 219, .22);
  box-shadow: 0 34px 80px rgba(26, 86, 219, .18);
  animation: hero-platform-front 7s ease-in-out infinite;
}

.hero-tech-cube {
  position: absolute;
  left: 50%;
  top: 45%;
  width: var(--cube-size);
  height: var(--cube-size);
  transform: translate(-50%, -50%) rotateX(-24deg) rotateY(38deg) rotateZ(0deg);
  transform-style: preserve-3d;
  animation: hero-cube-float 6.2s ease-in-out infinite;
}

.hero-tech-cube-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.58);
  background: linear-gradient(135deg, rgba(26,86,219,.94), rgba(96,165,250,.86) 45%, rgba(139,92,246,.72));
  box-shadow: inset 0 0 22px rgba(255,255,255,.28);
}

.hero-tech-cube-front {
  transform: translateZ(var(--cube-half));
  background: linear-gradient(135deg, #1A56DB 0%, #3887F7 42%, #8B5CF6 72%, #F59E0B 100%);
}

.hero-tech-cube-back {
  transform: rotateY(180deg) translateZ(var(--cube-half));
  background: linear-gradient(135deg, rgba(26,86,219,.6), rgba(147,197,253,.32));
}

.hero-tech-cube-right {
  transform: rotateY(90deg) translateZ(var(--cube-half));
  background: linear-gradient(135deg, rgba(96,165,250,.78), rgba(245,158,11,.68));
}

.hero-tech-cube-left {
  transform: rotateY(-90deg) translateZ(var(--cube-half));
  background: linear-gradient(135deg, rgba(15,23,42,.08), rgba(26,86,219,.76));
}

.hero-tech-cube-top {
  transform: rotateX(90deg) translateZ(var(--cube-half));
  background: linear-gradient(135deg, #93C5FD 0%, #8B5CF6 55%, #EC4899 100%);
}

.hero-tech-cube-bottom {
  transform: rotateX(-90deg) translateZ(var(--cube-half));
  background: linear-gradient(135deg, rgba(15,23,42,.18), rgba(26,86,219,.42));
}

.hero-tech-particle {
  position: absolute;
  border-radius: 999px;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 16px 30px rgba(26,86,219,.16);
  animation: hero-particle-float 6s ease-in-out infinite;
}

.hero-tech-particle-one {
  left: 21%;
  bottom: 23%;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 8%, #6EE7B7 28%, #10B981 100%);
}

.hero-tech-particle-two {
  left: 43%;
  top: 20%;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 8%, #60A5FA 28%, #1A56DB 100%);
  animation-delay: -1.1s;
}

.hero-tech-particle-three {
  right: 17%;
  top: 31%;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 8%, #FCA5A5 28%, #EF4444 100%);
  animation-delay: -2.2s;
}

.hero-tech-particle-four {
  right: 9%;
  bottom: 39%;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 8%, #FDE68A 28%, #F59E0B 100%);
  animation-delay: -3.3s;
}

.hero-tech-particle-five {
  right: 31%;
  bottom: 17%;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 10%, #F9A8D4 26%, #EC4899 100%);
  animation-delay: -4.4s;
}

.hero-tech-visual.is-loaded .hero-tech-stage,
.hero-tech-visual.is-loaded .hero-tech-orbit,
.hero-tech-visual.is-loaded .hero-tech-network,
.hero-tech-visual.is-loaded .hero-tech-particle {
  animation-play-state: running;
}

.hero-tech-visual.is-paused *,
.hero-tech-visual.is-paused::before,
.hero-tech-visual.is-paused::after {
  animation-play-state: paused !important;
}

@keyframes hero-orbit-spin {
  from { transform: translate(-50%, -50%) rotate(var(--orbit-start)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orbit-start) + 360deg)); }
}

@keyframes hero-cube-float {
  0%, 100% { transform: translate(-50%, -50%) rotateX(-24deg) rotateY(38deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotateX(-18deg) rotateY(48deg) translateY(-14px); }
}

@keyframes hero-glass-float {
  0%, 100% { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-28deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-28deg) translateY(-10px); }
}

@keyframes hero-platform-back {
  0%, 100% { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-28deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-28deg) translateY(8px); }
}

@keyframes hero-platform-front {
  0%, 100% { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-28deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-28deg) translateY(14px); }
}

@keyframes hero-particle-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7px, -12px, 0) scale(1.05); }
}

@keyframes hero-aura-breathe {
  0%, 100% { transform: scale(1); opacity: .27; }
  50% { transform: scale(1.08); opacity: .42; }
}

@keyframes hero-network-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .52; }
  50% { transform: translate3d(8px, -8px, 0); opacity: .82; }
}

@media (max-width: 1024px) {
  .hero-tech-visual {
    width: min(100%, 560px);
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tech-visual,
  .hero-tech-visual *,
  .hero-tech-visual::before,
  .hero-tech-visual::after {
    animation: none !important;
    transition: none !important;
  }
}