
/* Page-specific additions. Core site styling comes from assets/style.css?v=10 */
.network-hero .hero-inner{align-items:center}
.network-dashboard .dash-window{min-height:430px}
.network-dashboard .dash-main{overflow:hidden}
.switch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.switch-card{position:relative;background:#0c2a4c;border:1px solid rgba(99,166,228,.18);border-radius:10px;padding:12px 10px 10px}
.switch-card .status-dot{position:absolute;right:10px;top:10px;width:8px;height:8px;border-radius:50%;background:#32d77d;box-shadow:0 0 12px #32d77d}
.switch-card b,.switch-card small,.switch-card strong{display:block}
.switch-card b{font-size:13px}.switch-card small{font-size:9px;color:#8da8c2;margin:4px 0}.switch-card strong{font-size:10px;color:#4ae28c}
.network-map-panel{background:#071e39;border:1px solid rgba(99,166,228,.16);border-radius:10px;padding:8px}
.network-map-panel svg{width:100%;height:220px}
.us-shape{fill:#0b315d;stroke:#177bd2;stroke-width:2}
.net-line{fill:none;stroke:#4dc6ff;stroke-width:4;filter:drop-shadow(0 0 6px #1d9cff)}
.map-node circle:first-child{fill:#0879ef;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 8px #249fff)}
.map-node circle:nth-child(2){fill:#fff}
.map-node text{fill:#fff;font-size:11px;font-weight:800}
.network-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.network-metrics div{background:#0a2748;border-radius:8px;padding:10px}
.network-metrics small,.network-metrics b{display:block}.network-metrics small{font-size:9px;color:#8ea8c0}.network-metrics b{font-size:13px}
.network-location-cards{grid-template-columns:repeat(3,1fr)}
.location-card{text-align:left}
.location-symbol{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:20px;margin-bottom:18px;box-shadow:0 10px 25px rgba(10,118,244,.25)}
.dallas-symbol{background:linear-gradient(135deg,#0d7fff,#39baff)}
.chicago-symbol{background:linear-gradient(135deg,#5365ff,#22b4d9)}
.la-symbol{background:linear-gradient(135deg,#7b4fff,#0da5ff)}
.location-tag{display:inline-block;margin-top:8px;padding:5px 9px;border-radius:999px;background:#eaf4ff;color:#1165b4;font-size:11px;font-weight:800}
.smart-ha-section:before{pointer-events:none!important}
.ha-flow{background:linear-gradient(180deg,rgba(11,41,75,.95),rgba(5,24,46,.95));border:1px solid rgba(104,170,231,.23);border-radius:16px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center}
.flow-title{font-weight:900;color:#4ec6ff;margin-bottom:16px}
.flow-box{min-width:220px;padding:10px 18px;border-radius:8px;background:#0a2d55;border:1px solid #467bad;text-align:center;font-weight:800}
.flow-box small{display:block;font-size:10px;color:#9cb5cd;margin-top:2px}
.flow-arrow{font-size:24px;color:#57c8ff}
.decision-box{width:135px;height:80px;display:grid;place-items:center;text-align:center;background:#0b2b50;border:1px solid #6ebaf6;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);font-size:12px;font-weight:800;margin:8px}
.flow-choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;margin:8px 0}
.flow-choices>div{display:flex;flex-direction:column;align-items:center;gap:7px}.choice{font-size:10px;font-weight:900}.yes{color:#43df8a}.no{color:#ff7474}.success{border-color:#38bc77}.alternate,.disaster{background:#0d3768}
.outage-cards{grid-template-columns:repeat(4,1fr)}
.portal-network-split{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:center}
.single-column{grid-template-columns:1fr!important}
@media(max-width:980px){
  .switch-grid,.network-location-cards,.outage-cards{grid-template-columns:1fr 1fr}
  .portal-network-split{grid-template-columns:1fr}
}
@media(max-width:680px){
  .switch-grid,.network-location-cards,.outage-cards,.flow-choices{grid-template-columns:1fr}
  .network-dashboard .dash-side{display:none}
  .network-map-panel svg{height:180px}
}


/* Interactive network animation */
.network-map-panel{position:relative;overflow:hidden}
.network-map-panel:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(41,163,255,.08),transparent 62%);
}
.net-line{
  stroke-dasharray:10 14;
  animation:routeFlow 2.4s linear infinite;
  transition:opacity .35s ease,stroke-width .35s ease,filter .35s ease;
}
.route-la-dal{animation-delay:-.8s}
.route-dal-chi{animation-delay:-1.6s}
.map-node{
  cursor:pointer;
  outline:none;
  transition:opacity .3s ease,filter .3s ease;
}
.map-node circle:first-child{
  transform-box:fill-box;
  transform-origin:center;
  animation:nodePulse 2s ease-in-out infinite;
}
.map-node[data-region="chicago"] circle:first-child{animation-delay:-.65s}
.map-node[data-region="los-angeles"] circle:first-child{animation-delay:-1.3s}
.map-node:hover circle:first-child,
.map-node:focus circle:first-child{
  animation-duration:.8s;
  filter:drop-shadow(0 0 14px #4bc5ff);
}
.network-map-panel[data-focus="dallas"] .map-node:not([data-region="dallas"]),
.network-map-panel[data-focus="chicago"] .map-node:not([data-region="chicago"]),
.network-map-panel[data-focus="los-angeles"] .map-node:not([data-region="los-angeles"]){
  opacity:.34;
}
.network-map-panel[data-focus="dallas"] .route-la-chi,
.network-map-panel[data-focus="chicago"] .route-la-dal,
.network-map-panel[data-focus="los-angeles"] .route-dal-chi{
  opacity:.18;
}
.network-map-panel.failover-dallas .map-node[data-region="dallas"],
.network-map-panel.failover-chicago .map-node[data-region="chicago"],
.network-map-panel.failover-los-angeles .map-node[data-region="los-angeles"]{
  opacity:.2;
  filter:grayscale(1);
}
.network-map-panel.failover-dallas .route-la-dal,
.network-map-panel.failover-dallas .route-dal-chi,
.network-map-panel.failover-chicago .route-la-chi,
.network-map-panel.failover-chicago .route-dal-chi,
.network-map-panel.failover-los-angeles .route-la-chi,
.network-map-panel.failover-los-angeles .route-la-dal{
  opacity:.16;
}
.network-map-panel.failover-dallas .route-la-chi,
.network-map-panel.failover-chicago .route-la-dal,
.network-map-panel.failover-los-angeles .route-dal-chi{
  stroke:#43df8a;
  stroke-width:6;
  filter:drop-shadow(0 0 10px #43df8a);
  opacity:1;
  animation-duration:1.15s;
}
.network-demo-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
  padding:8px 10px;
  border-radius:8px;
  background:#0a2748;
  color:#a9bfd5;
  font-size:10px;
}
.network-demo-status .demo-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#32d77d;
  box-shadow:0 0 10px #32d77d;
  flex:0 0 auto;
}
.network-demo-status button{
  margin-left:auto;
  border:0;
  background:transparent;
  color:#55c7ff;
  font:700 10px/1 inherit;
  cursor:pointer;
  padding:2px 0;
}
.network-dashboard.demo-paused .net-line,
.network-dashboard.demo-paused .map-node circle:first-child{
  animation-play-state:paused;
}
.switch-card.demo-dimmed{
  opacity:.42;
  filter:grayscale(.85);
}
.switch-card.demo-active{
  border-color:#42da8b;
  box-shadow:0 0 0 1px rgba(66,218,139,.2),0 0 18px rgba(66,218,139,.16);
}
@keyframes routeFlow{
  to{stroke-dashoffset:-48}
}
@keyframes nodePulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.16);opacity:.78}
}
@media(prefers-reduced-motion:reduce){
  .net-line,.map-node circle:first-child{animation:none!important}
  .network-demo-status button{display:none}
}
