/* V24 / A shared JavaScript clock sends one platform signal across the globe. */
#top .hero-platform-network {
  position: relative;
  container-type: inline-size;
  container-name: hero-signals;
  z-index: 5;
  width: 100%;
  max-width: 510px;
  height: 320px;
  flex: none;
  overflow: visible;
  pointer-events: none;
}
#top .hero-platform-network .hero-network-core { display: none; }
#top .hero-platform-network .hero-platform-routes {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#top .hero-platform-network .hero-platform-routes path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  animation: none;
  transition: none;
}
#top .hero-platform-network .hero-signal-trail { stroke: #ABC1E8; stroke-width: 1.15px; }
#top .hero-platform-network .hero-signal-beam { stroke: #2457E6; stroke-width: 1.8px; stroke-dasharray: 100 100; }
#top .hero-platform-network .hero-signal-dot { fill: #2457E6; stroke: #FFFFFF; stroke-width: 1.8px; filter: drop-shadow(0 0 4px #2457E670); }
#top .hero-platform-network .hero-signal-ring { fill: #2457E610; stroke: #6B96F0; stroke-width: 1px; }

/* The CSS position is always the destination centre. The clock owns all travel. */
#top .hero-platform-network .hero-network-platform {
  --signal-tile-width: 70px;
  --signal-tile-height: 74px;
  position: absolute;
  z-index: 2;
  left: clamp(calc(var(--signal-tile-width) / 2 + 8px), var(--signal-slot-x, 50%), calc(100% - var(--signal-tile-width) / 2 - 8px));
  top: clamp(calc(var(--signal-tile-height) / 2 + 8px), var(--signal-slot-y, 50%), calc(100% - var(--signal-tile-height) / 2 - 8px));
  right: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: var(--signal-tile-width);
  height: var(--signal-tile-height);
  min-height: 0;
  gap: 6px;
  padding: 9px 4px 8px;
  border: 1px solid #D4DFF0;
  border-radius: 12px;
  background: #FFFFFFF7;
  color: #334155;
  box-shadow: 0 8px 24px -17px #31568F4D, 0 1px 3px #14171D04;
  opacity: 1;
  transform: translate(calc(-50% + var(--signal-shift-x, 0px)), calc(-50% + var(--signal-shift-y, 0px) + var(--signal-float-y, 0px))) rotate(var(--signal-angle, 0deg)) scale(var(--signal-scale, 1));
  transform-origin: center;
  animation: none;
  transition: none;
}
#top .hero-platform-network .hero-network-platform > img { display: block; flex: none; width: 28px; height: 28px; object-fit: contain; border-radius: 5px; }
#top .hero-platform-network .hero-network-platform > span { display: block; max-width: none; color: #34445D; font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; white-space: nowrap; }
#top .hero-platform-network.is-sequenced .hero-network-platform { opacity: var(--signal-opacity, 0); will-change: transform, opacity; }
#top .hero-platform-network .hero-network-platform--x { --signal-slot-x: 32%; --signal-slot-y: 11%; --signal-angle: -3.5deg; }
#top .hero-platform-network .hero-network-platform--instagram { --signal-slot-x: 74%; --signal-slot-y: 19%; --signal-angle: 2.5deg; }
#top .hero-platform-network .hero-network-platform--tiktok { --signal-slot-x: 12%; --signal-slot-y: 37%; --signal-angle: -2.3deg; }
#top .hero-platform-network .hero-network-platform--youtube { --signal-slot-x: 90%; --signal-slot-y: 48%; --signal-angle: 3.2deg; }
#top .hero-platform-network .hero-network-platform--facebook { --signal-slot-x: 25%; --signal-slot-y: 63%; --signal-angle: 2.1deg; }
#top .hero-platform-network .hero-network-platform--whatsapp { --signal-slot-x: 65%; --signal-slot-y: 62%; --signal-angle: -2.6deg; }
#top .hero-platform-network .hero-network-platform--telegram { --signal-slot-x: 44%; --signal-slot-y: 88%; --signal-angle: -3deg; }
#top .hero-platform-network .hero-network-platform--linkedin { --signal-slot-x: 87%; --signal-slot-y: 85%; --signal-angle: 2.8deg; }

/* A complete eight-platform map remains available before the clock starts. */
#top .hero-platform-network:not(.is-sequenced) .hero-network-platform,
#top .hero-platform-network.is-static-eight .hero-network-platform {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--signal-angle, 0deg)) scale(1);
  will-change: auto;
}
#top .hero-platform-network.is-static-eight .hero-platform-routes { opacity: 0; }

@media (max-width: 1190px) and (min-width: 701px) {
  #top .hero-platform-network { height: 310px; }
}
@media (max-width: 700px) {
  #top .hero-platform-network { max-width: 410px; height: 300px; }
  #top .hero-platform-network .hero-network-platform { --signal-tile-width: 60px; --signal-tile-height: 66px; gap: 5px; padding: 7px 3px; border-radius: 10px; }
  #top .hero-platform-network .hero-network-platform > img { width: 26px; height: 26px; }
  #top .hero-platform-network .hero-network-platform > span { font-size: 10px; }
}
@media (max-width: 380px) {
  #top .hero-platform-network { height: 285px; }
  #top .hero-platform-network .hero-network-platform { --signal-tile-width: 55px; --signal-tile-height: 62px; padding-inline: 3px; gap: 4px; border-radius: 9px; }
  #top .hero-platform-network .hero-network-platform > img { width: 25px; height: 25px; }
}

/* Desktop's two-column hero can contain a phone-sized globe as well. */
@container hero-signals (max-width: 380px) {
  #top .hero-platform-network .hero-network-platform { --signal-tile-width: 60px; --signal-tile-height: 66px; gap: 5px; padding: 7px 3px; border-radius: 10px; }
  #top .hero-platform-network .hero-network-platform > img { width: 26px; height: 26px; }
  #top .hero-platform-network .hero-network-platform > span { font-size: 10px; }
}
@container hero-signals (max-width: 310px) {
  #top .hero-platform-network .hero-network-platform { --signal-tile-width: 55px; --signal-tile-height: 62px; gap: 4px; border-radius: 9px; }
  #top .hero-platform-network .hero-network-platform > img { width: 25px; height: 25px; }
  #top .hero-platform-network .hero-network-platform--whatsapp { --signal-slot-x: 60%; }
}

/* No second animation clock: paused sequences preserve the JS-supplied frame. */
html.motion-paused #top .hero-platform-network * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #top .hero-platform-network .hero-network-platform,
  #top .hero-platform-network.is-sequenced .hero-network-platform {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--signal-angle, 0deg)) scale(1);
    animation: none !important;
    transition: none;
    will-change: auto;
  }
  #top .hero-platform-network .hero-platform-routes { opacity: 0; }
}