/* AI orbit — a glowing "AI" core with business-function cards that circle it and stay upright */
.aiorb{position:relative;padding:clamp(60px,6.5vw,100px) 0 clamp(60px,7vw,110px);background:linear-gradient(180deg,#f6f7fc 0%,#eef0f9 100%);overflow:hidden}
.aiorb__head{text-align:center;max-width:760px;margin:0 auto}
.aiorb__head .lead{margin-left:auto;margin-right:auto}

.aiorb__stage{container-type:inline-size;position:relative;width:min(100%,780px);aspect-ratio:1;margin:clamp(24px,4vw,48px) auto 0;--r:36cqw;--cw:25cqw;--spin:70s}
.aiorb__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side at 24% 42%,rgba(124,92,255,.18),transparent 70%),radial-gradient(closest-side at 80% 36%,rgba(255,120,150,.13),transparent 70%)}
.aiorb__track{position:absolute;left:50%;top:50%;width:calc(var(--r)*2);height:calc(var(--r)*2);translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(110,86,232,.28)}
.aiorb__track--in{width:calc(var(--r)*1.18);height:calc(var(--r)*1.18);border-style:solid;border-color:rgba(42,166,192,.16)}

/* centre */
.aiorb__core{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:17cqw;height:17cqw;translate:-50% -50%;border-radius:50%;color:#fff;font:700 clamp(22px,4.6cqw,38px) var(--ff-h);letter-spacing:.02em;background:radial-gradient(circle at 35% 28%,#5fe6ff 0%,#22b8f2 38%,#2b6df0 100%);box-shadow:0 0 0 2.2cqw rgba(60,150,245,.28),0 0 0 4.6cqw rgba(60,150,245,.14),0 18px 50px -8px rgba(43,109,240,.65)}
.aiorb__core::before{content:"";position:absolute;inset:-2.2cqw;border-radius:50%;border:2px solid rgba(60,150,245,.35);animation:aiPulse 3.2s ease-out infinite}
.aiorb__core::after{content:"";position:absolute;inset:-4.6cqw;border-radius:50%;border:2px solid rgba(60,150,245,.2);animation:aiPulse 3.2s 1.1s ease-out infinite}
@keyframes aiPulse{from{transform:scale(.92);opacity:.9}to{transform:scale(1.25);opacity:0}}

/* ring of cards: the ring turns, each card turns back so text stays level */
.aiorb__ring{position:absolute;inset:0;z-index:3;animation:aiSpin var(--spin) linear infinite}
.aiorb__stage:hover .aiorb__ring,.aiorb__stage:hover .aiorb__card>div{animation-play-state:paused}
.aiorb__card{position:absolute;left:50%;top:50%;width:var(--cw);margin:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r)*-1)) rotate(calc(var(--a)*-1))}
.aiorb__card>div{display:flex;flex-direction:column;align-items:center;gap:.8cqw;padding:2.2cqw 1.4cqw 2cqw;text-align:center;border-radius:2.4cqw;background:rgba(255,255,255,.92);border:1px solid rgba(17,25,61,.06);box-shadow:0 18px 38px -22px rgba(17,25,61,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:aiSpin var(--spin) linear infinite reverse;transition:box-shadow .3s}
.aiorb__card>div:hover{box-shadow:0 22px 44px -18px rgba(110,86,232,.55)}
.aiorb__ico{display:grid;place-items:center;width:7cqw;height:7cqw;border-radius:2cqw;background:var(--grad-ico);color:#fff}
.aiorb__ico svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aiorb__card h3{margin:0;font:600 clamp(11px,2.2cqw,17px) var(--ff-h);color:var(--ink)}
.aiorb__card p{margin:0;font-size:clamp(9.5px,1.75cqw,13px);line-height:1.35;color:var(--muted)}
@keyframes aiSpin{to{transform:rotate(360deg)}}
/* the card's own position uses transform, so the spin is applied to its wrapper ring + inner div only */

@media (max-width:600px){
  .aiorb__stage{--r:35cqw;--cw:27cqw}
  .aiorb__card p{display:none}
  .aiorb__ico{width:8cqw;height:8cqw}
}
@media (prefers-reduced-motion:reduce){
  .aiorb__ring,.aiorb__card>div,.aiorb__core::before,.aiorb__core::after{animation:none}
}