/* WIST-IT 2026 — Quiet technical illustration for managed IT section.
   No KPI/dashboard mockup; the diagram is conceptual, not live service telemetry. */
.managed .managed-signal {
  position: relative;
  align-self: start;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: clamp(510px, 39vw, 680px);
  overflow: hidden;
  border: 1px solid rgba(205, 227, 208, .09);
  background: linear-gradient(155deg, #111a15 0%, #101713 52%, #111b16 100%);
}
.managed .managed-signal::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.18;
  background-image: linear-gradient(to right,rgba(177,204,170,.09) 1px,transparent 1px), linear-gradient(to bottom,rgba(177,204,170,.09) 1px,transparent 1px);
  background-size: 90px 90px;
  -webkit-mask-image: radial-gradient(ellipse at center,#000 4%,transparent 75%);
  mask-image: radial-gradient(ellipse at center,#000 4%,transparent 75%);
}
.managed .signal-top,
.managed .signal-foot {
  position: relative;
  z-index: 3;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:24px 27px;
  color:#819489;
  font:600 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform: uppercase;
  letter-spacing:.125em;
}
.managed .signal-top>span:last-child,
.managed .signal-foot>span:last-child {color:#a8c3a5;}
.managed .signal-foot{border-top:1px solid rgba(205,227,208,.065)}
.managed .signal-stage{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:425px;
}
.managed .signal-lines{
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  inset:0;
  overflow:visible;
}
.managed .signal-lines path{
  fill:none;
  stroke:#779a80;
  stroke-width:1;
  stroke-opacity:.42;
  vector-effect:non-scaling-stroke;
}
.managed .signal-lines .signal-hairline{stroke-opacity:.12;stroke-dasharray:4 11}
.managed .signal-lines .signal-terminal{
  fill:#9ecf85;
  opacity:.8;
}
.managed .signal-lines .signal-terminal-halo{
  fill:none;stroke:#94c17c;stroke-opacity:.22;stroke-width:1;
}
.managed .signal-center {
  position:absolute;
  z-index:1;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:clamp(178px,18vw,258px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.managed .signal-center::before,
.managed .signal-center::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.managed .signal-center::before{
  inset:0;
  border:1px solid rgba(164,192,164,.26);
  box-shadow:0 0 0 29px rgba(155,212,93,.015),0 0 0 64px rgba(155,212,93,.008);
}
.managed .signal-center::after{
  inset:16%;
  border:1px solid rgba(164,192,164,.17);
}
.managed .signal-center-line{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px dashed rgba(141,188,135,.13);
  animation:wistOrbit 55s linear infinite;
}
.managed .signal-center-line::after{
  content:"";
  position:absolute;
  top:14%;left:14%;
  width:5px;height:5px;border-radius:50%;
  background:#97bc83;
  box-shadow:0 0 13px rgba(155,212,93,.35);
}
.managed .signal-center-label{
  position:relative;
  display:grid;
  place-items:center;
  gap:12px;
  text-align:center;
}
.managed .signal-center-label::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:#9ac981;
  box-shadow:0 0 0 8px rgba(154,201,129,.07),0 0 22px rgba(154,201,129,.26);
  animation:wistSoftPulse 4.5s ease-in-out infinite;
}
.managed .signal-center-label span{
  color:#d8e1d8;
  font-size:clamp(15px,1.45vw,23px);
  font-weight:450;
  line-height:1.28;
  letter-spacing:-.03em;
}
.managed .signal-node{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font:500 clamp(10px,.77vw,12px)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.05em;
  color:#a6b6a9;
}
.managed .signal-node::before{
  content:"";
  display:block;
  width:5px;height:5px;
  flex:0 0 5px;
  border-radius:50%;
  background:#93b783;
}
.managed .node-clients{left:11%;top:13%}
.managed .node-server{right:10%;top:21%}
.managed .node-network{right:12%;bottom:17%}
@keyframes wistOrbit {to{transform:rotate(360deg)}}
@keyframes wistSoftPulse {50%{box-shadow:0 0 0 12px rgba(154,201,129,.015),0 0 25px rgba(154,201,129,.11);opacity:.68}}
@media (max-width:1100px){
 .managed .managed-signal{min-height:clamp(420px,64vw,610px)}
 .managed .signal-stage{min-height:330px}
 .managed .signal-center{width:clamp(170px,30vw,245px)}
}
@media (max-width:760px){
 .managed .managed-signal{min-height:390px}
 .managed .signal-top,.managed .signal-foot{padding:18px 17px;font-size:9px;gap:10px}
 .managed .signal-stage{min-height:275px}
 .managed .signal-center{width:165px}
 .managed .signal-center-label span{font-size:16px}
 .managed .signal-node{font-size:9px}
 .managed .node-clients{left:5%;top:12%}
 .managed .node-server{right:5%;top:21%}
 .managed .node-network{right:6%;bottom:13%}
}
@media (max-width:420px){
 .managed .managed-signal{min-height:350px}
 .managed .signal-stage{min-height:245px}
 .managed .signal-center{width:142px}
 .managed .signal-center-label span{font-size:14px}
 .managed .signal-node{font-size:8px}
}
@media (prefers-reduced-motion: reduce){
 .managed .signal-center-line,.managed .signal-center-label::before{animation:none!important}
}