/* =========================
   ViSiB Integrations Module
   v29.6.1
   ========================= */

.v27-integrations-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
}

.v27-orbit{
  position:relative;
  min-height:420px;
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,229,255,.16),transparent 28%),
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px);
  box-shadow:0 30px 90px rgba(0,0,0,.36);
  overflow:hidden;
}

.v27-orbit::before{
  content:"";
  position:absolute;
  inset:50px;
  border-radius:50%;
  border:1px dashed rgba(0,229,255,.28);
  animation:v27Spin 28s linear infinite;
}

.v27-orbit::after{
  content:"";
  position:absolute;
  inset:100px;
  border-radius:50%;
  border:1px dashed rgba(255,64,129,.22);
  animation:v27SpinReverse 34s linear infinite;
}

.v27-core{
  position:absolute;
  left:50%;
  top:50%;
  width:128px;
  height:128px;
  transform:translate(-50%,-50%);
  border-radius:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#00E5FF,#6C63FF,#FF4081);
  color:#fff;
  box-shadow:
    0 0 34px rgba(0,229,255,.48),
    0 0 80px rgba(108,99,255,.32);
  z-index:3;
}

.v27-core strong{
  font-size:24px;
  line-height:1;
}

.v27-core span{
  font-size:13px;
  font-weight:800;
  opacity:.88;
}

.v27-node{
  position:absolute;
  z-index:2;
  padding:12px 16px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 46px rgba(0,0,0,.28);
  animation:v27Float 4.8s ease-in-out infinite;
}

.v27-node.tg{left:9%;top:18%;color:#00E5FF}
.v27-node.wa{right:9%;top:20%;color:#25D366;animation-delay:.4s}
.v27-node.vk{left:10%;bottom:24%;color:#4C8BF5;animation-delay:.8s}
.v27-node.max{right:10%;bottom:23%;color:#fff;animation-delay:1.2s}
.v27-node.ig{left:37%;top:7%;color:#FF4081;animation-delay:1.6s}
.v27-node.wc{left:39%;bottom:8%;color:#28c840;animation-delay:2s}

.v27-flow{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.v27-flow-row{
  position:relative;
  display:flex;
  gap:16px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}

.v27-flow-row span{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(0,229,255,.12);
  color:#00E5FF;
  font-weight:900;
  box-shadow:0 0 20px rgba(0,229,255,.18);
}

.v27-flow-row.active{
  border-color:rgba(0,229,255,.45);
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    0 0 36px rgba(0,229,255,.18);
}

.v27-flow-row b{
  color:#fff;
  font-size:17px;
}

.v27-flow-row p{
  color:#cbd5e1;
  margin-top:4px;
  line-height:1.5;
  font-size:14px;
}

.v27-flow-row:hover,
.v27-orbit:hover{
  transform:translateY(-4px);
  box-shadow:
    0 25px 80px rgba(0,0,0,.35),
    0 0 35px rgba(0,229,255,.18);
}

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

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

@keyframes v27Float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

@media(max-width:900px){
  .v27-integrations-wrap{
    grid-template-columns:1fr;
  }

  .v27-orbit{
    min-height:360px;
  }
}

@media(max-width:560px){
  .v27-orbit{
    min-height:320px;
  }

  .v27-node{
    font-size:12px;
    padding:9px 11px;
  }

  .v27-core{
    width:104px;
    height:104px;
    border-radius:28px;
  }
}