/* ══════════════════════════════════════════════════════════
   RealLingo — shared "network diagram" hero visual for the
   Business pages (Translator / KOL-KOC / Talent). Each page wires
   its own nodes/labels into this shared component language:
   glowing hub, connected nodes, flowing dashed lines, hover tooltips.
   Business palette only: RealLingo Black (#111216) + Yellow (#ffeb99).
══════════════════════════════════════════════════════════ */
.bn-stage {
    position: relative; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 45%, rgba(255,235,153,.06), transparent 65%);
    border-radius: 4px;
}
.bn-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bn-lines path {
    fill: none; stroke: rgba(255,235,153,.28); stroke-width: 1;
    stroke-dasharray: 2 6; stroke-linecap: round;
    animation: bnFlow 1.8s linear infinite;
}
.bn-lines path.bn-line-quiet { stroke: rgba(255,255,255,.12); animation-duration: 3s; }
@keyframes bnFlow { to { stroke-dashoffset: -16; } }

.bn-node {
    position: absolute; z-index: 2; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    text-decoration: none; cursor: default;
}
.bn-node-dot {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.bn-node:hover .bn-node-dot { transform: scale(1.16); border-color: rgba(255,235,153,.6); box-shadow: 0 0 22px rgba(255,235,153,.35); }
.bn-node.hub .bn-node-dot {
    width: 62px; height: 62px; font-size: 1.6rem;
    background: var(--yellow); border-color: var(--yellow); color: var(--dark);
    animation: bnHubPulse 3s ease-in-out infinite;
}
@keyframes bnHubPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,235,153,.45); }
    50%      { box-shadow: 0 0 0 14px rgba(255,235,153,0); }
}
.bn-node.matched .bn-node-dot { border-color: var(--yellow); box-shadow: 0 0 18px rgba(255,235,153,.5); animation: bnHubPulse 2.2s ease-in-out infinite; }

.bn-node-label {
    font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    padding: .2rem .55rem; border-radius: 100px; white-space: nowrap;
}
.bn-node.hub .bn-node-label { color: var(--yellow); background: rgba(255,235,153,.1); border-color: rgba(255,235,153,.25); }

.bn-tooltip {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px);
    background: #fff; color: var(--dark); font-size: .72rem; font-weight: 600; line-height: 1.4;
    padding: .5rem .7rem; border-radius: 8px; width: max-content; max-width: 160px;
    box-shadow: 0 10px 24px rgba(0,0,0,.3);
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 5;
}
.bn-node:hover .bn-tooltip { opacity: 1; transform: translate(-50%, 0); }

.bn-badge {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: #fff; font-size: .68rem; font-weight: 700;
    padding: .3rem .6rem; border-radius: 100px; backdrop-filter: blur(4px);
    animation: bnBadgeFloat 4s ease-in-out infinite;
}
@keyframes bnBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.bn-spark { width: 34px; height: 16px; }
.bn-spark path { fill: none; stroke: var(--yellow); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1100px) {
    .bn-node-label { font-size: .64rem; }
}