.network-operations-status{
  position:relative;
  overflow:hidden;
  margin-bottom:54px;
  border:1px solid rgba(94,169,231,.25);
  border-radius:22px;
  background:
    radial-gradient(circle at 82% 12%,rgba(17,132,255,.20),transparent 30%),
    linear-gradient(145deg,#061a33,#0a2c52 58%,#061a33);
  box-shadow:0 28px 70px rgba(7,34,65,.18);
}
.network-operations-status:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(86,178,251,.14) 1px,transparent 1px);
  background-size:27px 27px;
  mask-image:linear-gradient(to right,transparent,#000 60%,transparent);
}
.network-operations-status-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:34px;
  align-items:center;
  padding:30px 32px 26px;
  border-bottom:1px solid rgba(108,179,232,.16);
}
.network-operations-status-head h2{
  color:#fff;
  font-size:36px;
  letter-spacing:-.035em;
  margin:8px 0 10px;
}
.network-operations-status-head p{
  max-width:720px;
  margin:0;
  color:#9fb8cc;
  line-height:1.62;
}
.network-operations-overall{
  display:flex;
  align-items:center;
  gap:14px;
  justify-self:end;
  min-width:300px;
  padding:17px 18px;
  border:1px solid rgba(86,195,148,.23);
  border-radius:14px;
  background:rgba(6,39,70,.82);
}
.network-operations-overall-dot,
.network-operations-state-dot{
  width:12px;
  height:12px;
  flex:0 0 auto;
  border-radius:50%;
  background:#37d785;
  box-shadow:0 0 0 5px rgba(55,215,133,.12),0 0 12px rgba(55,215,133,.75);
}
.network-operations-overall strong,
.network-operations-overall small{display:block}
.network-operations-overall strong{color:#fff;font-size:14px}
.network-operations-overall small{color:#82a0b7;font-size:10px;margin-top:4px}
.network-operations-status.has-incident .network-operations-overall{
  border-color:rgba(255,100,115,.28);
  background:rgba(75,20,31,.38);
}
.network-operations-status.has-incident .network-operations-overall-dot{
  background:#ff6473;
  box-shadow:0 0 0 5px rgba(255,100,115,.12),0 0 12px rgba(255,100,115,.75);
}
.network-operations-region-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.network-operations-region{
  min-height:230px;
  padding:27px 26px 25px;
  border-right:1px solid rgba(108,179,232,.14);
  display:flex;
  flex-direction:column;
}
.network-operations-region:last-child{border-right:0}
.network-operations-region-icon{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  background:linear-gradient(135deg,#0c75ef,#20b9ff);
  box-shadow:0 14px 28px rgba(12,117,239,.22);
}
.network-operations-region-icon span{
  width:17px;
  height:17px;
  border:3px solid #fff;
  border-radius:50%;
  position:relative;
}
.network-operations-region-icon span:after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  top:3px;
  left:3px;
}
.network-operations-region-copy{flex:1}
.network-operations-region-copy small{
  color:#4bc5ff;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:9px;
  font-weight:900;
}
.network-operations-region-copy h3{
  color:#fff;
  font-size:23px;
  margin:8px 0 9px;
}
.network-operations-region-copy p{
  color:#91abc0;
  line-height:1.58;
  margin:0;
}
.network-operations-region-state{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:21px;
  padding-top:17px;
  border-top:1px solid rgba(108,179,232,.13);
}
.network-operations-region-state strong{
  color:#d9e8f2;
  font-size:12px;
}
.network-operations-region.is-offline{
  background:linear-gradient(180deg,rgba(114,18,35,.18),rgba(45,16,25,.12));
}
.network-operations-region.is-offline .network-operations-state-dot{
  background:#ff6473;
  box-shadow:0 0 0 5px rgba(255,100,115,.12),0 0 12px rgba(255,100,115,.75);
}
.network-operations-region.is-offline .network-operations-region-state strong{
  color:#ff9ca5;
}
.network-operations-status-foot{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:19px 27px;
  border-top:1px solid rgba(108,179,232,.14);
  background:rgba(5,28,53,.62);
}
.network-operations-status-foot strong,
.network-operations-status-foot span{display:block}
.network-operations-status-foot strong{color:#d9e8f2;font-size:12px}
.network-operations-status-foot span{color:#7996ad;font-size:10px;margin-top:4px}
.network-operations-status-foot a{
  color:#51c6ff;
  font-weight:850;
  font-size:11px;
  text-decoration:none;
  white-space:nowrap;
}
.network-operations-status.is-unavailable .network-operations-overall{
  border-color:rgba(255,189,89,.28);
}
.network-operations-status.is-unavailable .network-operations-overall-dot{
  background:#ffbd59;
  box-shadow:0 0 0 5px rgba(255,189,89,.12),0 0 12px rgba(255,189,89,.65);
}
@media(max-width:980px){
  .network-operations-status-head{grid-template-columns:1fr}
  .network-operations-overall{justify-self:start;min-width:0}
  .network-operations-region-grid{grid-template-columns:1fr}
  .network-operations-region{min-height:0;border-right:0;border-bottom:1px solid rgba(108,179,232,.14)}
  .network-operations-region:last-child{border-bottom:0}
}
@media(max-width:680px){
  .network-operations-status-head{padding:24px 20px}
  .network-operations-status-head h2{font-size:31px}
  .network-operations-overall{width:100%}
  .network-operations-region{padding:23px 20px}
  .network-operations-status-foot{align-items:flex-start;flex-direction:column;padding:18px 20px}
}


/* Subtle operational pulse for online status indicators */
@keyframes tritonStatusPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(55,215,133,.10),
      0 0 10px rgba(55,215,133,.55);
  }
  50% {
    box-shadow:
      0 0 0 7px rgba(55,215,133,.04),
      0 0 16px rgba(55,215,133,.80);
  }
}

.network-operations-overall-dot,
.network-operations-region:not(.is-offline) .network-operations-state-dot {
  animation: tritonStatusPulse 3.2s ease-in-out infinite;
}

.network-operations-region.is-offline .network-operations-state-dot,
.network-operations-status.has-incident .network-operations-overall-dot,
.network-operations-status.is-unavailable .network-operations-overall-dot {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .network-operations-overall-dot,
  .network-operations-state-dot {
    animation: none !important;
  }
}