.vexon-orbit-wrap{
  position:relative;
  width:420px;
  height:420px;
  margin:34px auto 8px;
  border-radius:50%;
  background:
    radial-gradient(circle at center,rgba(39,230,211,.18),transparent 34%),
    radial-gradient(circle at center,rgba(26,140,255,.12),transparent 58%);
}

.vexon-orbit-wrap::before,
.vexon-orbit-wrap::after{
  content:"";
  position:absolute;
  inset:34px;
  border-radius:50%;
  border:1px solid rgba(39,230,211,.22);
  box-shadow:0 0 36px rgba(39,230,211,.12);
}

.vexon-orbit-wrap::after{
  inset:82px;
  border-color:rgba(255,255,255,.08);
}

.vexon-orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:146px;
  height:146px;
  border-radius:50%;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035)),
    #07111f;
  border:1px solid rgba(39,230,211,.45);
  box-shadow:
    0 0 40px rgba(39,230,211,.25),
    inset 0 0 28px rgba(39,230,211,.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:5;
}

.vexon-orbit-core strong{
  color:#27e6d3;
  font-size:26px;
  letter-spacing:3px;
  text-shadow:0 0 18px rgba(39,230,211,.6);
}

.vexon-orbit-core span{
  margin-top:8px;
  color:#9fb1c7;
  font-size:11px;
}

.vexon-orbit-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  animation:vexonOrbitRotate 28s linear infinite;
}

.vexon-orbit-item{
  position:absolute;
  left:50%;
  top:50%;
  width:128px;
  min-height:78px;
  margin-left:-64px;
  margin-top:-39px;
  padding:12px 10px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  border:1px solid rgba(39,230,211,.28);
  box-shadow:0 16px 42px rgba(0,0,0,.30),0 0 22px rgba(39,230,211,.10);
  backdrop-filter:blur(14px);
  text-align:center;
  animation:vexonOrbitCounter 28s linear infinite;
}

.vexon-orbit-item b{
  display:block;
  font-size:20px;
  margin-bottom:5px;
}

.vexon-orbit-item strong{
  display:block;
  color:#27e6d3;
  font-size:14px;
  margin-bottom:4px;
}

.vexon-orbit-item span{
  color:#b9c6d6;
  font-size:11px;
}

.item-1{transform:rotate(0deg) translateX(180px) rotate(0deg);}
.item-2{transform:rotate(60deg) translateX(180px) rotate(-60deg);}
.item-3{transform:rotate(120deg) translateX(180px) rotate(-120deg);}
.item-4{transform:rotate(180deg) translateX(180px) rotate(-180deg);}
.item-5{transform:rotate(240deg) translateX(180px) rotate(-240deg);}
.item-6{transform:rotate(300deg) translateX(180px) rotate(-300deg);}

@keyframes vexonOrbitRotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes vexonOrbitCounter{
  from{rotate:0deg;}
  to{rotate:-360deg;}
}

@media(max-width:768px){
  .vexon-orbit-wrap{
    width:320px;
    height:320px;
    margin:28px auto 4px;
  }

  .vexon-orbit-core{
    width:118px;
    height:118px;
  }

  .vexon-orbit-core strong{
    font-size:21px;
  }

  .vexon-orbit-item{
    width:104px;
    min-height:68px;
    margin-left:-52px;
    margin-top:-34px;
    padding:10px 8px;
  }

  .vexon-orbit-item strong{
    font-size:12px;
  }

  .vexon-orbit-item span{
    font-size:10px;
  }

  .item-1{transform:rotate(0deg) translateX(138px) rotate(0deg);}
  .item-2{transform:rotate(60deg) translateX(138px) rotate(-60deg);}
  .item-3{transform:rotate(120deg) translateX(138px) rotate(-120deg);}
  .item-4{transform:rotate(180deg) translateX(138px) rotate(-180deg);}
  .item-5{transform:rotate(240deg) translateX(138px) rotate(-240deg);}
  .item-6{transform:rotate(300deg) translateX(138px) rotate(-300deg);}
}