.bridge-diagram{height:440px}
.diagram-center{width:174px;height:174px;padding:22px;background:#fff}
.diagram-center img{width:136px;margin:0}
.diagram-center strong{display:none}
.diagram-node{width:126px;height:126px;padding:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;line-height:1.15}
.diagram-node span{font-size:.84rem;font-weight:950}
.diagram-node small{display:block;max-width:98px;font-size:.64rem;font-weight:700;line-height:1.3;opacity:.86}
.node-brand{left:2%;top:5%}
.node-web{right:2%;top:5%}
.node-client{left:2%;bottom:5%}
.node-support{right:2%;bottom:5%;background:#1a7f73;border:1px solid rgba(255,255,255,.22);color:#fff}
.bridge-diagram svg{stroke:rgba(137,216,207,.34);stroke-width:1.8;stroke-dasharray:6 9}

@media (max-width:760px){
  .bridge-diagram{height:500px;max-width:430px;margin-inline:auto}
  .diagram-center{width:154px;height:154px;padding:20px}
  .diagram-center img{width:120px}
  .diagram-node{width:112px;height:112px;padding:12px}
  .diagram-node span{font-size:.78rem}
  .diagram-node small{max-width:88px;font-size:.59rem}
  .node-brand{left:0;top:4%}
  .node-web{right:0;top:4%}
  .node-client{left:0;bottom:4%}
  .node-support{right:0;bottom:4%}
}

@media (max-width:420px){
  .bridge-diagram{height:450px}
  .diagram-center{width:138px;height:138px;padding:17px}
  .diagram-center img{width:108px}
  .diagram-node{width:100px;height:100px;padding:10px}
  .diagram-node span{font-size:.72rem}
  .diagram-node small{max-width:78px;font-size:.54rem}
}