/* Hero SaaS premium: dashboard fixo, cards orbitando sem virar */
.hero__orbit--outer{animation:hero-orbit-ring 76s linear infinite}
.hero__orbit--inner{animation:hero-orbit-ring-reverse 64s linear infinite}
.hero__right:after{content:"";position:absolute;z-index:0;left:50%;top:50%;width:390px;height:390px;transform:translate(-50%,-50%);border-radius:50%;background:#2a78ed12;filter:blur(28px)}
.orbit-dot{animation:hero-orbit-pulse 2.5s ease-in-out infinite}.orbit-dot--two,.orbit-dot--four{animation-delay:1s}

.product{height:28px}
.product img{display:block;width:100%;height:30px;object-fit:contain;object-position:center}

.orbit-card{
  --orbit-radius:302px;
  --orbit-duration:76s;
  --orbit-angle:0deg;
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  z-index:3;
  transform:translate(-50%,-50%) rotate(var(--orbit-angle));
  animation:hero-orbit-path var(--orbit-duration) linear infinite;
}

.orbit-card--top{--orbit-angle:8deg}
.orbit-card--right{--orbit-angle:98deg}
.orbit-card--bottom{--orbit-angle:188deg}
.orbit-card--left{--orbit-angle:278deg}

.product-node{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:250px;
  width:280px;
  height:136px;
  padding:16px 22px;
  overflow:visible;
  background:#fff;
  border:1px solid #cfe0ff;
  border-radius:24px;
  box-shadow:0 32px 72px rgba(18,59,132,.26),0 18px 42px rgba(32,76,255,.18),0 0 0 1px rgba(255,255,255,.86) inset;
  text-decoration:none;
  transform:translate(-50%,-50%) translateY(calc(var(--orbit-radius) * -1)) rotate(calc(var(--orbit-angle) * -1));
  animation:hero-orbit-counter var(--orbit-duration) linear infinite;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
}

.product-node img{
  display:block;
  width:100%;
  height:74px;
  object-fit:contain;
  object-position:center;
  transform:scale(1.16);
}

.product-node__copy,
.product-node strong,
.product-node small{display:none}
.product-node__tagline{display:block;margin-top:6px;font-size:10px;line-height:1.2;text-align:center;color:#5c7098;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.node-icon{display:none}

.product-node:hover{
  box-shadow:0 38px 82px rgba(32,76,255,.34),0 22px 44px rgba(18,59,132,.24),0 0 0 1px rgba(255,255,255,.92) inset;
  transform:translate(-50%,-50%) translateY(calc(var(--orbit-radius) * -1)) rotate(calc(var(--orbit-angle) * -1)) scale(1.03);
}

@keyframes hero-orbit-ring{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes hero-orbit-ring-reverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes hero-orbit-path{
  from{transform:translate(-50%,-50%) rotate(var(--orbit-angle))}
  to{transform:translate(-50%,-50%) rotate(calc(var(--orbit-angle) + 360deg))}
}
@keyframes hero-orbit-counter{
  from{transform:translate(-50%,-50%) translateY(calc(var(--orbit-radius) * -1)) rotate(calc(var(--orbit-angle) * -1))}
  to{transform:translate(-50%,-50%) translateY(calc(var(--orbit-radius) * -1)) rotate(calc((var(--orbit-angle) * -1) - 360deg))}
}
@keyframes hero-orbit-pulse{50%{box-shadow:0 0 0 8px #dceaff99,0 0 18px #2676ef}}

@media(max-width:1200px){
  .orbit-card{--orbit-duration:88s;--orbit-radius:278px}
  .hero__orbit--outer{animation-duration:88s}
  .hero__orbit--inner{animation-duration:74s}
  .product-node{width:264px;height:128px}
}

@media(max-width:768px){
  .hero__orbit--outer,.hero__orbit--inner,.orbit-card,.product-node{animation:none}
  .product-node{
    min-width:210px;
    width:236px;
    height:116px;
    padding:14px 18px;
    transform:translate(-50%,-50%);
    transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);
  }
  .product-node img{height:60px}
  .product-node__tagline{font-size:9px}
  .product-node:hover{transform:translate(-50%,-50%) scale(1.03)}
  .orbit-card--top{left:50%;top:11%}
  .orbit-card--right{left:82%;top:47%}
  .orbit-card--bottom{left:50%;top:82%}
  .orbit-card--left{left:18%;top:47%}
  .orbit-card--top .product-node,
  .orbit-card--right .product-node,
  .orbit-card--bottom .product-node,
  .orbit-card--left .product-node{animation:hero-float-card 5.5s ease-in-out infinite}
  .orbit-card--right .product-node{animation-delay:.8s}
  .orbit-card--bottom .product-node{animation-delay:1.6s}
  .orbit-card--left .product-node{animation-delay:2.4s}
}

@keyframes hero-float-card{
  50%{transform:translate(-50%,-54%)}
}
