/* ==========================================================================
   Hero radial hub diagram — ported from the Leapforce .dc.html reference.
   A central "Corporate AI asset" hub with 7 orbiting capability labels.
   Each spoke has a grey base line + a green overlay line that draws in
   (stroke-dashoffset 1 → 0) as its label becomes active. The active label
   cycles every 2.6s and also responds to hover (see hub.js).
   The 1360×780 stage keeps the reference's exact coordinates and is scaled
   to fit its container by JS.
   ========================================================================== */
.hub-diagram {
  width: 100%;
  position: relative; /* Setup for absolute centering */
  overflow: visible; /* Allow diagram to scale beyond bounding box without clipping */
}

.hub-diagram__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1360px;
  height: 780px;
  transform-origin: center center; /* Scale from the true center */
}

.hub-diagram__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* green overlay spoke — hidden until its label is active, then draws in */
.hub-diagram__spoke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s ease;
}

.hub-diagram__spoke.is-active {
  stroke-dashoffset: 0;
}

.hub-diagram__label {
  position: absolute;
  font-family: "Cabin", sans-serif;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 500;
  color: #9aa2ad;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.45s ease, color 0.45s ease;
}

.hub-diagram__label.is-active {
  font-weight: 800;
  color: #0b1220;
  transform: scale(1.06);
}

/* label 4 (self-hosting) is a permanently emphasised item in the design */
.hub-diagram__label--strong {
  font-weight: 800;
  color: #0b1220;
}

.hub-diagram__hub {
  position: absolute;
  box-sizing: border-box;
  left: 580px;
  top: 270px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #1e56e0;
  background: #fcfbf8;
  box-shadow: 0 6px 30px rgba(15, 122, 103, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  gap: 5px;
}

.hub-diagram__hub-title {
  font-family: "Cabin", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #0b1220;
}

.hub-diagram__hub-sub {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: #98a0ab;
}

@media (prefers-reduced-motion: reduce) {
  .hub-diagram__spoke,
  .hub-diagram__label {
    transition: none;
  }
}