/* **********************************************************
   INTEGRATIONS SECTION -- PREMIUM REDESIGN
   Hub . Satellites . Double Marquee . Stats Bar
********************************************************** */

/*  Section wrapper  */
.integ-section{
  padding:100px 0 80px;
  position:relative;overflow:hidden;
  z-index:1;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(124,58,237,.04) 30%,
    rgba(67,97,238,.04) 70%,
    transparent 100%
  );
}

/* Background orbs */
.integ-orb{
  position:absolute;border-radius:50%;
  filter:blur(100px);pointer-events:none;
}
.integ-orb-1{
  width:600px;height:600px;
  top:-200px;left:-200px;
  background:radial-gradient(circle,rgba(124,58,237,.18) 0%,transparent 70%);
  animation:orbFloat1 18s ease-in-out infinite;
}
.integ-orb-2{
  width:500px;height:500px;
  bottom:-150px;right:-150px;
  background:radial-gradient(circle,rgba(0,229,255,.12) 0%,transparent 70%);
  animation:orbFloat2 14s ease-in-out infinite;
}

/*  Hub  */
.integ-hub{
  position:relative;
  width:400px;height:400px;
  margin:56px auto 64px;
  display:flex;align-items:center;justify-content:center;
}

/* Pulsing rings */
.integ-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(124,58,237,.18);
  animation:ringExpand 3.6s ease-in-out infinite;
  pointer-events:none;
}
.integ-ring-1{width:100%;height:100%;animation-delay:0s}
.integ-ring-2{width:72%;height:72%;animation-delay:1.2s;border-color:rgba(0,229,255,.15)}
.integ-ring-3{width:44%;height:44%;animation-delay:2.4s;border-color:rgba(247,37,133,.12)}
@keyframes ringExpand{
  0%  {opacity:0;  transform:scale(.92)}
  30% {opacity:1;  transform:scale(1)}
  70% {opacity:.6; transform:scale(1)}
  100%{opacity:0;  transform:scale(1.06)}
}

/*  Centre badge -- UNIQUE spinning border animation  */
/* Wrapper that holds the spinning conic gradient border */
.integ-hub-core-wrap{
  position:relative;z-index:10;
  width:108px;height:108px;
  border-radius:28px;
  padding:2px;                          /* border thickness */
  background:conic-gradient(
    from 0deg,
    #7c3aed 0%,
    #00e5ff 25%,
    #f72585 50%,
    #4361ee 75%,
    #7c3aed 100%
  );
  animation:spinBorder 3s linear infinite;
  will-change:transform;
}
@keyframes spinBorder{
  from{ filter:hue-rotate(0deg)   }
  to  { filter:hue-rotate(360deg) }
}

.integ-hub-core{
  width:100%;height:100%;
  border-radius:26px;
  background:linear-gradient(135deg,#0e0728,#1a0a3d);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  cursor:default;
}

/* Animated inner radial sweep */
.integ-hub-core::before{
  content:'';
  position:absolute;inset:0;border-radius:26px;
  background:conic-gradient(
    from var(--a,0deg) at 50% 50%,
    transparent 0deg,
    rgba(124,58,237,.35) 60deg,
    rgba(0,229,255,.2)  120deg,
    transparent 180deg
  );
  animation:sweepInner 2.4s linear infinite;
  pointer-events:none;
}
@keyframes sweepInner{
  from{ --a:0deg   }
  to  { --a:360deg }
}
/* Fallback for browsers without @property */
.integ-hub-core::before{
  animation:sweepFallback 2.4s linear infinite;
}
@keyframes sweepFallback{
  0%  {transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* Data dots that ping outward */
.integ-hub-core::after{
  content:'';
  position:absolute;
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan),0 0 20px var(--cyan);
  animation:dataPing 1.8s ease-out infinite;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
@keyframes dataPing{
  0%  {width:8px;height:8px;opacity:1}
  60% {width:60px;height:60px;opacity:.2}
  100%{width:80px;height:80px;opacity:0}
}

.integ-hub-logo{
  font-family:var(--fh);font-size:2rem;font-weight:800;
  position:relative;z-index:2;
  background:linear-gradient(135deg,#fff,var(--violet-lt));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  animation:logoColorCycle 4s ease-in-out infinite;
}
@keyframes logoColorCycle{
  0%,100%{filter:drop-shadow(0 0 6px rgba(124,58,237,.8))}
  50%    {filter:drop-shadow(0 0 12px rgba(0,229,255,.9))}
}
.integ-hub-name{
  font-size:.7rem;font-weight:700;
  color:rgba(255,255,255,.9);letter-spacing:.06em;
  position:relative;z-index:2;
}
.integ-hub-tag{
  font-size:.55rem;color:rgba(255,255,255,.5);
  background:rgba(0,0,0,.3);border-radius:20px;padding:2px 7px;margin-top:3px;
  position:relative;z-index:2;
  border:1px solid rgba(255,255,255,.08);
}

/*  Satellite icons  */
.hub-satellite{
  position:absolute;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:default;
  animation:satOrbit 8s ease-in-out infinite;
}
.hub-satellite:nth-child(5) {animation-delay:0s}
.hub-satellite:nth-child(6) {animation-delay:.7s}
.hub-satellite:nth-child(7) {animation-delay:1.4s}
.hub-satellite:nth-child(8) {animation-delay:2.1s}
.hub-satellite:nth-child(9) {animation-delay:2.8s}
.hub-satellite:nth-child(10){animation-delay:3.5s}
.hub-satellite:nth-child(11){animation-delay:4.2s}
.hub-satellite:nth-child(12){animation-delay:4.9s}

/* Scale pulse -- different from hero's Y float */
@keyframes satOrbit{
  0%,100%{ transform:var(--sat-pos,none) scale(1);    opacity:1   }
  50%    { transform:var(--sat-pos,none) scale(1.08); opacity:.85 }
}

/* Connector lines */
.hub-satellite::before{
  content:'';position:absolute;
  width:1px;height:60px;
  background:linear-gradient(to bottom,rgba(124,58,237,.4),transparent);
  bottom:100%;left:50%;transform:translateX(-50%);
  pointer-events:none;
  animation:linePulse 2s ease-in-out infinite;
}
@keyframes linePulse{
  0%,100%{opacity:.4;background:linear-gradient(to bottom,rgba(124,58,237,.4),transparent)}
  50%    {opacity:1; background:linear-gradient(to bottom,rgba(0,229,255,.7),transparent)}
}

.hub-sat-icon{
  width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(124,58,237,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  backdrop-filter:blur(12px);
  transition:all .3s ease;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.hub-satellite:hover .hub-sat-icon{
  background:rgba(0,229,255,.12);
  border-color:rgba(0,229,255,.5);
  transform:scale(1.18);
  box-shadow:0 0 22px rgba(0,229,255,.4);
}
.hub-sat-lbl{
  font-size:.58rem;font-weight:600;color:#c0bada;
  white-space:nowrap;letter-spacing:.04em;
}

/* Satellite positions */
.hub-pos-1{top:0;left:50%;transform:translateX(-50%) translateY(-175px)}
.hub-pos-2{top:50%;right:0;transform:translateY(-50%) translateX(175px)}
.hub-pos-3{bottom:0;left:50%;transform:translateX(-50%) translateY(175px)}
.hub-pos-4{top:50%;left:0;transform:translateY(-50%) translateX(-175px)}
.hub-pos-5{top:13%;right:13%;transform:translate(100px,-100px)}
.hub-pos-6{bottom:13%;right:13%;transform:translate(100px,100px)}
.hub-pos-7{bottom:13%;left:13%;transform:translate(-100px,100px)}
.hub-pos-8{top:13%;left:13%;transform:translate(-100px,-100px)}

/*  Marquee  */
.integ-marquee-wrap{
  position:relative;
  margin:0 0 64px;
  overflow:hidden;
}
.integ-fade-l,.integ-fade-r{
  position:absolute;top:0;bottom:0;width:140px;z-index:3;pointer-events:none;
}
.integ-fade-l{left:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 100%)}
.integ-fade-r{right:0;background:linear-gradient(-90deg,var(--bg) 0%,transparent 100%)}

.integ-row{display:flex;padding:10px 0;overflow:hidden}
.integ-track{display:flex;gap:16px;width:max-content}
.integ-track-left {animation:integScrollLeft  32s linear infinite}
.integ-track-right{animation:integScrollRight 28s linear infinite}
.integ-track-left:hover,
.integ-track-right:hover{animation-play-state:paused}

@keyframes integScrollLeft {
  0%  {transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes integScrollRight{
  0%  {transform:translateX(-50%)}
  100%{transform:translateX(0)}
}

/* Logo cards */
.integ-card{
  position:relative;
  width:100px;height:100px;flex-shrink:0;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  cursor:pointer;
  transition:all .35s ease;
  overflow:hidden;
}
.integ-card:hover{
  border-color:rgba(0,229,255,.4);
  background:rgba(0,229,255,.06);
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 16px 40px rgba(0,229,255,.18),0 0 0 1px rgba(0,229,255,.15);
}
.integ-card-inner{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:16px;position:relative;z-index:1;
}
.integ-card-inner img{
  width:100%;height:100%;
  object-fit:contain;
  filter:brightness(.7) saturate(.6);
  transition:filter .35s ease;
}
.integ-card:hover .integ-card-inner img{filter:brightness(1) saturate(1)}
.integ-card-glow{
  position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(circle at 50% 0%,rgba(0,229,255,.2) 0%,transparent 70%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.integ-card:hover .integ-card-glow{opacity:1}
.integ-card::after{
  content:'';position:absolute;
  left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.7),transparent);
  top:-100%;
}
.integ-card:hover::after{animation:scanLine .6s ease forwards}
@keyframes scanLine{from{top:-100%}to{top:200%}}

/*  Stats bar  */
.integ-stats-bar{
  display:flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:wrap;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(124,58,237,.18);
  border-radius:20px;padding:28px 32px;
  position:relative;overflow:hidden;
  margin-top:16px;
}
.integ-stats-bar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(124,58,237,.4) 30%,rgba(0,229,255,.4) 70%,transparent 95%);
}
.integ-stat-pill{text-align:center;padding:0 40px;flex:1;min-width:140px}
.isp-num{
  display:block;
  font-family:var(--fh);font-size:1.7rem;font-weight:800;
  background:var(--gall);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;background-size:200%;
  animation:gradShift 5s ease infinite;
  line-height:1;margin-bottom:5px;
}
.isp-lbl{font-size:.78rem;color:#c0bada;font-weight:500;letter-spacing:.02em}
.isp-sep{
  width:1px;height:40px;
  background:linear-gradient(to bottom,transparent,rgba(124,58,237,.3),transparent);
}

/*  Responsive  */
@media(max-width:1024px){
  .integ-hub{width:320px;height:320px}
  .hub-pos-1{transform:translateX(-50%) translateY(-140px)}
  .hub-pos-2{transform:translateY(-50%) translateX(140px)}
  .hub-pos-3{transform:translateX(-50%) translateY(140px)}
  .hub-pos-4{transform:translateY(-50%) translateX(-140px)}
  .hub-pos-5{transform:translate(80px,-80px)}
  .hub-pos-6{transform:translate(80px,80px)}
  .hub-pos-7{transform:translate(-80px,80px)}
  .hub-pos-8{transform:translate(-80px,-80px)}
  .integ-card{width:86px;height:86px}
}
@media(max-width:768px){
  .integ-hub{width:260px;height:260px;margin:40px auto 48px}
  .hub-pos-1{transform:translateX(-50%) translateY(-110px)}
  .hub-pos-2{transform:translateY(-50%) translateX(110px)}
  .hub-pos-3{transform:translateX(-50%) translateY(110px)}
  .hub-pos-4{transform:translateY(-50%) translateX(-110px)}
  .hub-pos-5,.hub-pos-6,.hub-pos-7,.hub-pos-8{display:none}
  .integ-hub-core-wrap{width:88px;height:88px;border-radius:22px}
  .integ-hub-core{border-radius:20px}
  .integ-hub-logo{font-size:1.6rem}
  .integ-card{width:76px;height:76px;border-radius:14px}
  .integ-stats-bar{gap:16px;flex-direction:column;padding:24px}
  .isp-sep{width:80px;height:1px;background:linear-gradient(to right,transparent,rgba(124,58,237,.3),transparent)}
  .integ-stat-pill{padding:8px 0}
}