.network-presence {
  --ras-map-sky: #009CDE;
  --ras-map-sky-strong: #009CDE;
  --ras-map-ink: #53565A;
  --ras-map-muted: #53565A;
  --blue: #009CDE;
}

.network-presence, .network-presence * { box-sizing: border-box; }
.network-presence { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.5; color: #53565A; background: #fff; }
.network-presence a { color: inherit; }
.network-presence button { font-family: inherit; }

.network-presence {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: #050608;
}

.ras-network-map {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, rgba(0, 82, 255, 0.13), transparent 35%),
    #070a0f;
}

.network-map-meta {
  position: absolute;
  z-index: 5;
  top: 36px;
  right: max(48px, calc((100vw - 1440px) / 2));
  color: #6f747d;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.network-world-map {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: default;
}

.network-map-camera {
  transform-origin: center;
}

.network-world-countries path {
  fill: rgba(255, 255, 255, 0.085);
  stroke: transparent;
  stroke-width: 0;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.35s ease, filter 0.35s ease;
}

.network-world-countries path.active {
  stroke: #70bfff;
  stroke-width: 1.15;
  filter: drop-shadow(0 0 2px rgba(112, 191, 255, 0.35));
}

.network-routes path {
  fill: none;
  stroke: rgba(0, 82, 255, 0.24);
  stroke-width: 1.1;
  stroke-dasharray: 3 6;
  vector-effect: non-scaling-stroke;
}

.network-local-routes {
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.network-local-routes.visible {
  opacity: 1;
}

.network-local-routes line {
  stroke: rgba(126, 164, 255, 0.28);
  stroke-width: 0.72;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}

.network-office-points .office {
  cursor: pointer;
  outline: none;
}

.network-office-hit {
  fill: transparent;
}

.network-office-halo {
  fill: rgba(0, 82, 255, 0.08);
  stroke: rgba(0, 82, 255, 0.3);
  stroke-width: 0.8;
  transition: 0.3s ease;
}

.network-office-core {
  fill: #fff;
  transition: 0.3s ease;
}

.network-office-points .office:hover .network-office-halo,
.network-office-points .office:focus .network-office-halo,
.network-office-points .office.active .network-office-halo {
  fill: rgba(0, 82, 255, 0.28);
  stroke: #3975ff;
  r: 6px;
}

.network-office-points .office:hover .network-office-core,
.network-office-points .office:focus .network-office-core,
.network-office-points .office.active .network-office-core {
  fill: var(--blue);
  r: 2.8px;
  filter: drop-shadow(0 0 4px #0052ff);
}

.network-office-tooltip {
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: left bottom;
  transition: opacity 0.22s ease;
}

.network-office-tooltip rect {
  fill: rgba(8, 11, 16, 0.94);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.network-office-tooltip text {
  fill: #fff;
  font-size: 11px;
  font-weight: 500;
}

.network-office-points .office:hover .network-office-tooltip,
.network-office-points .office:focus .network-office-tooltip {
  opacity: 1;
}

.network-country-labels g {
  cursor: pointer;
}

.network-country-labels text {
  fill: #858b95;
  font-size: 11.5px;
  font-weight: 450;
  letter-spacing: 0.025em;
  user-select: none;
  paint-order: stroke;
  stroke: #070a0f;
  stroke-width: 3px;
  stroke-linejoin: round;
  transition: 0.3s ease;
}

.network-country-labels g:hover text,
.network-country-labels g.active text {
  fill: #fff;
}

.network-zoom-controls {
  position: absolute;
  z-index: 5;
  right: 38px;
  top: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: rgba(7, 10, 15, 0.58);
  backdrop-filter: blur(16px);
}

.network-zoom-controls button {
  width: 45px;
  height: 43px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: 0.25s ease;
}

.network-zoom-controls button:last-child {
  border-bottom: 0;
  color: #8e949d;
  font-size: 17px;
}

.network-zoom-controls button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.network-map-status {
  position: absolute;
  z-index: 5;
  left: max(48px, calc((100vw - 1440px) / 2));
  top: 42px;
  bottom: 42px;
  width: clamp(370px, 24vw, 410px);
  padding: 22px 22px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(7, 10, 15, 0.76);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
  scrollbar-color: rgba(112, 191, 255, 0.35) transparent;
}

.network-map-status::-webkit-scrollbar { width: 4px; }
.network-map-status::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(112, 191, 255, 0.35); }

.network-map-counters {
  position: absolute;
  z-index: 5;
  left: clamp(24px, 3.6vw, 64px);
  top: 50%;
  display: grid;
  gap: clamp(24px, 4.85vh, 42px);
  width: clamp(180px, 24.2vw, 330px);
  transform: translateY(-50%);
  pointer-events: none;
}

.network-counter {
  display: grid;
  gap: 6px;
  padding-bottom: clamp(18px, 2.8vh, 28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.network-counter:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.network-counter strong {
  color: #fff;
  font-size: clamp(55px, 6.85vw, 88px);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.network-counter > span {
  color: #858b95;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 450;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.network-map-close {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  width: 32px;
  height: 32px;
  margin: -8px -8px -24px auto;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  color: #aeb4bd;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.network-map-close:hover,
.network-map-close:focus-visible {
  border-color: rgba(112, 191, 255, 0.58);
  background: rgba(0, 82, 255, 0.14);
  color: #fff;
  transform: scale(1.04);
  outline: none;
}

.network-map-status > span {
  display: block;
  margin-bottom: 8px;
  color: #707680;
  font-size: 9px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.network-map-status > strong {
  display: block;
  font-size: 24px;
  font-weight: 500;
}

.network-map-status > strong {
  margin-bottom: 22px;
}

.network-presence-section {
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.network-presence-section + .network-presence-section {
  margin-top: 20px;
}

.network-presence-section h3 {
  margin: 0 0 11px;
  color: #c3c8cf;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.network-presence-section h3 b { color: #fff; font-weight: 600; }

.network-city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.network-city-list button {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: transparent;
  color: #9ca3ad;
  font-size: 10px;
  cursor: pointer;
}

.network-city-list button:hover,
.network-city-list button.active {
  border-color: rgba(112, 191, 255, 0.7);
  background: rgba(0, 82, 255, 0.16);
  color: #fff;
}

.network-office-detail {
  padding: 14px 0 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.network-office-detail:first-of-type { border-top: 0; }
.network-office-detail h4 { margin: 0 0 7px; color: #fff; font-size: 13px; font-weight: 500; }
.network-office-detail p { margin: 4px 0; color: #9299a3; font-size: 11px; line-height: 1.45; }
.network-office-detail a { display: block; margin-top: 5px; color: #70bfff; font-size: 10px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.network-office-detail a:hover { color: #fff; }

.network-map-hint {
  position: absolute;
  z-index: 5;
  right: 43px;
  bottom: 46px;
  margin: 0;
  color: #656b74;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.network-presence { background: #fff; }
.ras-network-map {
  background:
    radial-gradient(circle at 49% 52%, rgba(0, 156, 222, 0.16), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
}
.network-world-countries path {
  fill: rgba(83, 86, 90, 0.08);
  stroke: rgba(83, 86, 90, 0.04);
  stroke-width: 0.3;
}
.network-world-countries path.active {
  stroke: #009CDE;
  filter: drop-shadow(0 0 3px rgba(0, 156, 222, 0.38));
}
.network-routes path { stroke: rgba(0, 156, 222, 0.46); }
.network-local-routes line { stroke: rgba(0, 156, 222, 0.34); }
.network-office-halo {
  fill: rgba(0, 156, 222, 0.16);
  stroke: rgba(0, 156, 222, 0.56);
}
.network-office-core { fill: #53565A; }
.network-office-points .office:hover .network-office-halo,
.network-office-points .office:focus .network-office-halo,
.network-office-points .office.active .network-office-halo {
  fill: rgba(0, 156, 222, 0.34);
  stroke: #009CDE;
}
.network-office-points .office:hover .network-office-core,
.network-office-points .office:focus .network-office-core,
.network-office-points .office.active .network-office-core {
  fill: #53565A;
  filter: drop-shadow(0 0 4px rgba(0, 156, 222, 0.75));
}
.network-office-tooltip rect {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(0, 156, 222, 0.42);
}
.network-office-tooltip text,
.network-country-labels text {
  fill: #53565A;
  stroke: #fff;
}
.network-country-labels g:hover text,
.network-country-labels g.active text { fill: #53565A; }
.network-map-counters,
.network-map-counters *,
.network-map-status,
.network-map-status *,
.network-map-hint { color: #53565A; }
.network-counter { border-bottom-color: rgba(83, 86, 90, 0.10); }
.network-counter strong,
.network-counter span,
.network-map-status > span,
.network-map-status > strong,
.network-presence-section h3,
.network-presence-section h3 b,
.network-office-detail h4,
.network-office-detail p,
.network-office-detail a,
.network-city-list button { color: #53565A; }
.network-map-status {
  border-color: rgba(83, 86, 90, 0.14);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.12);
  scrollbar-color: rgba(0, 156, 222, 0.48) transparent;
}
.network-map-status::-webkit-scrollbar-thumb { background: rgba(0, 156, 222, 0.48); }
.network-map-close {
  border-color: rgba(83, 86, 90, 0.18);
  background: rgba(255, 255, 255, 0.9);
  color: #53565A;
}
.network-map-close:hover,
.network-map-close:focus-visible {
  border-color: rgba(0, 156, 222, 0.75);
  background: rgba(0, 156, 222, 0.14);
  color: #53565A;
}
.network-presence-section,
.network-office-detail { border-top-color: rgba(83, 86, 90, 0.14); }
.network-city-list button { border-color: rgba(83, 86, 90, 0.18); }
.network-city-list button:hover,
.network-city-list button.active {
  border-color: rgba(0, 156, 222, 0.78);
  background: rgba(0, 156, 222, 0.14);
  color: #53565A;
}



/* Integration with the existing page and responsive office details. */
.network-presence .network-map-viewport { height: 100%; }
.network-presence .network-presence-section { padding: 17px 0 0; }
.network-presence .network-office-detail h4 { line-height: 1.4; }
.network-presence .network-country-labels g:focus-visible text { fill: #009cde; }
@media (max-width: 991px) {
  .network-presence, .ras-network-map { height: auto; min-height: 0; overflow: visible; }
  .network-presence .network-map-viewport { overflow-x: auto; }
  .network-presence .network-world-map { width: 100%; min-width: 850px; height: 540px; }
  .network-presence .network-map-counters { position: static; width: auto; margin: 24px; transform: none; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .network-presence .network-counter { padding-bottom: 0; border: 0; }
  .network-presence .network-counter strong { font-size: clamp(36px, 7vw, 55px); }
  .network-presence .network-counter > span { font-size: 11px; }
  .network-presence .network-map-status { position: relative; inset: auto; width: auto; max-height: 560px; margin: 20px 16px; }
  .network-presence .network-map-hint { position: static; margin: 20px 16px; padding-bottom: 20px; text-align: center; }
}