/* ── Platform Section ── */
.plat-section{padding:80px 24px;background:linear-gradient(180deg,#0a0018 0%,#020010 100%);overflow:hidden;position:relative}
.plat-inner{max-width:1280px;margin:0 auto}
.plat-heading{text-align:center;margin-bottom:56px}
.plat-title{font-size:clamp(32px,4vw,52px);font-weight:800;color:#fff;margin:0 0 12px;line-height:1.1;letter-spacing:-0.02em}
.plat-title em{color:#5aeb9d;font-style:normal}
.plat-sub{font-size:16px;color:rgba(255,255,255,0.55);max-width:560px;margin:0 auto;line-height:1.6}

/* ══════════════════════════════════════════════════════
   Stage: all three elements are position:absolute so
   each is placed independently — no flex/grid conflict.

   Agent   → left:60px,  vertically centred
   Hub     → left:50%,   vertically centred  (always mid-way)
   Platforms → right:60px, vertically centred

   Canvas covers the whole stage for animated beams.
   ══════════════════════════════════════════════════════ */
.plat-stage{
  position:relative;
  height:460px;           /* fixed height keeps all absolute children stable */
  width:100%;
}
.plat-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ── Agent: left side, vertically centred ── */
.plat-node--agent{
  position:absolute;
  left:60px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}

/* ── Hub: EXACT horizontal centre, vertically centred ── */
.plat-node--hub{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}

/* ── Platforms: right side, vertically centred ── */
.plat-platforms{
  position:absolute;
  right:60px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}

/* ── Shared node styles ── */
.plat-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;}
.plat-node-ring{
  position:absolute;
  width:84px;height:84px;
  border-radius:50%;
  border:1.5px solid rgba(90,235,157,0.3);
  animation:platRingPulse 2.5s ease-in-out infinite;
}
.plat-node-core{
  width:64px;height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,#02006e,#5aeb9d);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 32px rgba(90,235,157,0.4),0 0 8px rgba(90,235,157,0.6);
  position:relative;z-index:1;
  flex-shrink:0;
}
.plat-node-label{font-size:12px;font-weight:600;color:rgba(255,255,255,0.7);text-align:center;white-space:nowrap;position:relative;z-index:1;letter-spacing:0.02em}

/* ── Signal Hub node (center) — was invisible: fixed ── */
.plat-node--hub .plat-node-ring{
  width:68px;height:68px;
  border-color:rgba(90,235,157,0.25);
  animation-delay:0.6s;
}
.plat-node--hub .plat-node-core{
  width:52px;height:52px;
  /* Was: dark navy #0d00b8→#02006e — near-invisible on dark bg. Now: visible gradient with glow */
  background:linear-gradient(135deg,#2600cc,#5aeb9d);
  box-shadow:0 0 24px rgba(90,235,157,0.35),0 0 6px rgba(90,235,157,0.5),inset 0 0 12px rgba(90,235,157,0.1);
}
.plat-node--hub .plat-node-label{color:rgba(255,255,255,0.65)}

/* ── Platforms column (right) ── */
.plat-platforms{display:flex;flex-direction:column;gap:10px;z-index:2;flex-shrink:0}
.plat-platform{
  display:flex;align-items:center;gap:12px;
  padding:9px 18px 9px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:14px;
  cursor:default;
  transition:border-color 0.2s,background 0.2s,transform 0.2s;
  animation:platFadeIn 0.5s ease both;
  animation-delay:var(--delay,0s);
  min-width:160px;
}
.plat-platform:hover{border-color:rgba(90,235,157,0.3);background:rgba(90,235,157,0.06);transform:translateX(-3px)}
.plat-platform-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.plat-platform span{font-size:13px;font-weight:500;color:rgba(255,255,255,0.8);white-space:nowrap}

/* ── Animations ── */
@keyframes platRingPulse{0%,100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.18);opacity:0.2}}
@keyframes platFadeIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* ── Responsive: stack vertically on mobile ── */
@media(max-width:900px){
  .plat-stage{
    flex-direction:column;
    min-height:auto;
    padding:32px 20px;
    gap:44px;
  }
  /* Hub back in normal flow (not absolute) */
  .plat-node--hub{
    position:static;
    transform:none;
  }
  .plat-platforms{
    margin-left:0;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    max-width:480px;
  }
  .plat-stage canvas{display:none}
  .plat-platform{
    flex-direction:column;
    gap:6px;
    padding:12px 10px;
    min-width:78px;
    text-align:center;
  }
  .plat-platform span{font-size:11px}
  .plat-node-ring{display:none}
  .plat-platform:hover{transform:none}
}
@media(max-width:600px){
  .plat-section{padding:52px 12px}
  .plat-platform{min-width:66px;padding:10px 8px}
  .plat-platforms{max-width:340px}
}