/* Animated control-plane hub: one security layer over three clouds. */
.cp-diagram { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line-2); border-radius: 14px; background: radial-gradient(400px 200px at 50% 50%, #ff6a1a12, transparent), #0b0d10; }
.cp-diagram svg { width: 100%; height: auto; overflow: visible; }
.cp-orbit { fill: none; stroke: var(--line-2); stroke-dasharray: 2 6; animation: cp-spin 40s linear infinite; transform-origin: 200px 130px; }
.cp-link { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.cp-flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 160; animation: cp-flow 2.4s linear infinite; }
.cp-flow--2 { animation-delay: -.8s; }
.cp-flow--3 { animation-delay: -1.6s; }
.cp-node circle { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1.5; }
.cp-node text, .cp-core text { fill: var(--text); font-family: var(--font); font-size: 12px; font-weight: 700; text-anchor: middle; }
.cp-core rect { fill: var(--accent); filter: drop-shadow(0 0 18px #ff6a1a88); }
.cp-core text { fill: #140a03; font-size: 14px; font-weight: 850; }
.cp-core .cp-core__sub { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cp-chips li { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font-family: var(--font-mono); font-size: .68rem; }
@keyframes cp-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -166; } }
@keyframes cp-spin { to { transform: rotate(360deg); } }