/* Triton illustrative network activity map */
.call-activity-section{
  background:
    radial-gradient(circle at 70% 10%,rgba(13,127,255,.18),transparent 34%),
    linear-gradient(180deg,#061a33,#041426);
  color:#fff;
}
.call-activity-section .section-head h2,
.call-activity-section .section-head p{color:#fff}
.call-activity-section .section-head p{opacity:.76}
.activity-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:22px;
  align-items:stretch;
}
.activity-map-card{
  position:relative;
  min-height:570px;
  border:1px solid rgba(91,174,244,.24);
  border-radius:20px;
  background:
    linear-gradient(rgba(21,78,126,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,78,126,.07) 1px,transparent 1px),
    linear-gradient(180deg,#08213f,#05182e);
  background-size:28px 28px,28px 28px,auto;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
  overflow:hidden;
}
.activity-map-top{
  position:absolute;
  z-index:5;
  left:18px;right:18px;top:16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
}
.activity-map-title{
  display:flex;align-items:center;gap:9px;
  font-weight:900;font-size:13px;
}
.activity-map-title i{
  width:9px;height:9px;border-radius:50%;
  background:#39dc82;box-shadow:0 0 12px #39dc82;
}
.activity-map-controls{display:flex;align-items:center;gap:9px}
.activity-map-controls button{
  border:1px solid rgba(105,177,238,.34);
  background:#0a2a4d;color:#bcd3e8;
  border-radius:999px;padding:7px 11px;
  font-size:10px;font-weight:900;cursor:pointer;
}
.activity-map-controls button:hover{border-color:#4ec9ff;color:#fff}
.activity-map-svg{
  position:absolute;
  inset:60px 16px 18px;
  width:calc(100% - 32px);
  height:calc(100% - 78px);
}
.activity-us{
  fill:#0b315d;
  stroke:#1d80d3;
  stroke-width:2;
  filter:drop-shadow(0 0 18px rgba(18,119,215,.18));
}
.activity-state-lines{
  fill:none;
  stroke:rgba(112,180,236,.14);
  stroke-width:1;
}
.activity-metro-ring{
  fill:none;
  stroke:#43c9ff;
  stroke-width:1.4;
  opacity:.28;
}
.activity-metro-label{
  fill:#8eb6d6;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
}
.activity-switch circle:first-child{
  fill:#0d7fff;
  stroke:#fff;
  stroke-width:2;
  filter:drop-shadow(0 0 9px #209cff);
}
.activity-switch circle:last-of-type{fill:#fff}
.activity-switch text{
  fill:#fff;font-size:10px;font-weight:900;
}
.call-pulse{
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
}
.call-pulse .pulse-core{
  fill:#41caff;
  filter:drop-shadow(0 0 7px #41caff);
}
.call-pulse .pulse-ring{
  fill:none;
  stroke:#41caff;
  stroke-width:2;
  animation:activityRing 2.8s ease-out forwards;
}
.call-pulse.success .pulse-core{fill:#38db87;filter:drop-shadow(0 0 8px #38db87)}
.call-pulse.success .pulse-ring{stroke:#38db87}
.call-pulse.metro .pulse-core{r:5}
.call-arc{
  fill:none;
  stroke:#49caff;
  stroke-width:2;
  stroke-dasharray:7 9;
  opacity:.72;
  animation:activityArc 2.8s linear forwards;
  filter:drop-shadow(0 0 5px rgba(73,202,255,.6));
}
.activity-side{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.activity-panel{
  border:1px solid rgba(91,174,244,.21);
  border-radius:16px;
  background:linear-gradient(180deg,#0a294b,#071d36);
  padding:18px;
}
.activity-panel h3{margin:0 0 12px;font-size:17px;color:#fff}
.activity-panel p{font-size:13px;color:#a7bdd0;margin:0}
.activity-counter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.activity-counter{
  padding:13px;
  border-radius:11px;
  background:#09233f;
  border:1px solid rgba(93,170,231,.14);
}
.activity-counter small,.activity-counter b{display:block}
.activity-counter small{font-size:9px;color:#7f9db8;text-transform:uppercase;letter-spacing:.06em}
.activity-counter b{font-size:22px;margin-top:4px}
.activity-feed{display:grid;gap:8px}
.activity-feed-item{
  display:grid;
  grid-template-columns:10px 1fr auto;
  gap:9px;align-items:center;
  padding:9px 0;
  border-bottom:1px solid rgba(112,169,217,.1);
}
.activity-feed-item:last-child{border-bottom:0}
.activity-feed-item i{
  width:8px;height:8px;border-radius:50%;
  background:#41caff;box-shadow:0 0 8px #41caff;
}
.activity-feed-item strong,.activity-feed-item span{display:block}
.activity-feed-item strong{font-size:11px}
.activity-feed-item span,.activity-feed-item time{font-size:9px;color:#819bb2}
.activity-legend{display:flex;flex-wrap:wrap;gap:11px;margin-top:12px}
.activity-legend span{font-size:10px;color:#8fa9c0}
.activity-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.legend-call{background:#41caff;box-shadow:0 0 7px #41caff}
.legend-route{background:#38db87;box-shadow:0 0 7px #38db87}
.activity-disclaimer{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:18px;padding:13px 15px;
  border-radius:12px;
  background:rgba(12,54,94,.68);
  color:#9fb5c8;font-size:11px;
}
.activity-disclaimer strong{color:#d9e9f6}

/* Homepage teaser */
.home-activity-teaser{
  background:
    radial-gradient(circle at 70% 15%,rgba(13,127,255,.14),transparent 35%),
    linear-gradient(180deg,#071d38,#06172c);
  color:#fff;
}
.home-activity-teaser h2,.home-activity-teaser p{color:#fff}
.home-activity-teaser p{opacity:.78}
.home-activity-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:36px;
  align-items:center;
}
.home-activity-card{
  min-height:390px;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(91,174,244,.24);
  background:
    linear-gradient(rgba(21,78,126,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,78,126,.06) 1px,transparent 1px),
    #061a32;
  background-size:24px 24px;
  box-shadow:0 25px 60px rgba(0,0,0,.22);
}
.home-activity-card .activity-map-svg{
  inset:18px;
  width:calc(100% - 36px);
  height:calc(100% - 36px);
}
.home-activity-stat{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;margin:22px 0;
}
.home-activity-stat div{
  padding:13px;border-radius:11px;
  background:rgba(10,43,78,.8);
  border:1px solid rgba(94,166,226,.17);
}
.home-activity-stat small,.home-activity-stat b{display:block}
.home-activity-stat small{font-size:9px;color:#8da7bf}
.home-activity-stat b{font-size:18px;margin-top:3px}
@keyframes activityRing{
  0%{r:5;opacity:.95}
  72%{r:14;opacity:.35}
  100%{r:19;opacity:0}
}
@keyframes activityArc{
  0%{stroke-dashoffset:40;opacity:0}
  18%{opacity:.8}
  82%{opacity:.65}
  100%{stroke-dashoffset:-38;opacity:0}
}
@media(max-width:980px){
  .activity-shell,.home-activity-layout{grid-template-columns:1fr}
  .activity-map-card{min-height:520px}
}
@media(max-width:680px){
  .activity-map-card{min-height:400px}
  .activity-side{grid-template-columns:1fr}
  .activity-map-top{align-items:flex-start}
  .activity-map-controls{flex-direction:column;align-items:flex-end}
  .home-activity-stat{grid-template-columns:1fr}
  .home-activity-card{min-height:300px}
}
@media(prefers-reduced-motion:reduce){
  .call-pulse .pulse-ring,.call-arc{animation:none!important}
}


/* v2 route behavior */
.activity-map-svg{overflow:visible}
.call-arc{
  stroke-width:1.8;
  opacity:.74;
}
.call-pulse.switch-origin .pulse-core{
  fill:#38db87;
  filter:drop-shadow(0 0 9px #38db87);
}
.call-pulse.switch-origin .pulse-ring{stroke:#38db87}


/* v3 true contiguous U.S. outline */
.activity-us{
  stroke-linejoin:round;
  stroke-linecap:round;
}


/* Final network-page polish */
.activity-switch circle:first-child{
  transform-box:fill-box;
  transform-origin:center;
  animation:switchHeartbeat 2.8s ease-in-out infinite;
}
.activity-switch:nth-of-type(2) circle:first-child{animation-delay:-.9s}
.activity-switch:nth-of-type(3) circle:first-child{animation-delay:-1.8s}

.call-arc{
  animation:activityArcFade 2.85s ease-out forwards;
}

.call-arc.failover-leg{
  stroke:#ffbf47;
  stroke-width:2.8;
  opacity:.95;
  filter:drop-shadow(0 0 7px rgba(255,191,71,.75));
  animation:failoverArcFade 4.8s ease-out forwards;
}
.call-arc.alternate-leg{
  stroke:#55e59a;
  filter:drop-shadow(0 0 7px rgba(85,229,154,.75));
}

.route-packet{
  fill:#fff;
  stroke:#43caff;
  stroke-width:2;
  filter:drop-shadow(0 0 8px #43caff);
}
.route-packet.failover-packet{
  fill:#fff7d5;
  stroke:#ffbf47;
  filter:drop-shadow(0 0 9px #ffbf47);
}

.call-pulse.failover-origin .pulse-core{
  fill:#ffbf47;
  filter:drop-shadow(0 0 9px #ffbf47);
}
.call-pulse.failover-origin .pulse-ring{stroke:#ffbf47}
.call-pulse.alternate-switch .pulse-core{
  fill:#55e59a;
  filter:drop-shadow(0 0 10px #55e59a);
}
.call-pulse.alternate-switch .pulse-ring{stroke:#55e59a}
.call-pulse.failover-destination .pulse-core{
  fill:#55e59a;
  filter:drop-shadow(0 0 9px #55e59a);
}

.route-status-card{
  position:absolute;
  z-index:7;
  left:20px;
  bottom:20px;
  max-width:420px;
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 15px;
  border:1px solid rgba(77,197,255,.32);
  border-radius:13px;
  background:rgba(5,28,53,.93);
  box-shadow:0 16px 35px rgba(0,0,0,.22);
  color:#fff;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease,border-color .28s ease;
  pointer-events:none;
}
.route-status-card.visible{
  opacity:1;
  transform:translateY(0);
}
.route-status-card>i{
  flex:0 0 auto;
  width:10px;
  height:10px;
  margin-top:4px;
  border-radius:50%;
  background:#42caff;
  box-shadow:0 0 10px #42caff;
}
.route-status-card strong,
.route-status-card span{display:block}
.route-status-card strong{font-size:12px}
.route-status-card span{
  margin-top:3px;
  color:#9fb7cc;
  font-size:10px;
  line-height:1.35;
}
.route-status-card.failover{
  border-color:rgba(255,191,71,.55);
}
.route-status-card.failover>i{
  background:#ffbf47;
  box-shadow:0 0 11px #ffbf47;
}
.route-status-card.failover strong{color:#ffe09b}

@keyframes switchHeartbeat{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px #249fff)}
  45%{transform:scale(1)}
  58%{transform:scale(1.24);filter:drop-shadow(0 0 15px #45c7ff)}
  72%{transform:scale(1.07)}
}
@keyframes activityArcFade{
  0%{stroke-dashoffset:44;opacity:0}
  15%{opacity:.86}
  62%{opacity:.66}
  100%{stroke-dashoffset:-42;opacity:0}
}
@keyframes failoverArcFade{
  0%{stroke-dashoffset:48;opacity:0}
  12%{opacity:.96}
  74%{opacity:.78}
  100%{stroke-dashoffset:-55;opacity:0}
}

@media(max-width:680px){
  .route-status-card{
    left:12px;
    right:12px;
    bottom:12px;
    max-width:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .activity-switch circle:first-child,
  .call-arc,
  .call-arc.failover-leg{
    animation:none!important;
  }
}