.blocknet-topology {
  position: relative;
  display: grid;
  min-height: 570px;
  grid-template-rows: 170px 88px 132px 72px 108px;
  margin-top: 18px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(75, 220, 255, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(75, 220, 255, 0.12), transparent 30%),
    linear-gradient(rgba(75, 220, 255, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75, 220, 255, 0.034) 1px, transparent 1px),
    linear-gradient(145deg, rgba(4, 18, 26, 0.96), rgba(2, 9, 14, 0.985));
  background-size: auto, 42px 42px, 42px 42px, auto;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 22px 50px rgba(0, 0, 0, 0.24);
}

.blocknet-topology::before {
  position: absolute;
  top: 207px;
  left: 50%;
  width: 430px;
  height: 205px;
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
  border: 1px solid rgba(75, 220, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(75, 220, 255, 0.012), 0 0 70px rgba(75, 220, 255, 0.045);
}

.blocknet-topology__flows {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.topology-flow {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 9;
  opacity: 0.72;
  animation: topology-flow 12s linear infinite;
  vector-effect: non-scaling-stroke;
}

.topology-flow--cyan { stroke: #4bdcff; filter: drop-shadow(0 0 5px rgba(75, 220, 255, 0.5)); }
.topology-flow--blue { stroke: #7396ff; filter: drop-shadow(0 0 5px rgba(91, 135, 255, 0.5)); }
.topology-flow--green { stroke: #55f5ac; filter: drop-shadow(0 0 5px rgba(85, 245, 172, 0.5)); }

.blocknet-topology__apps,
.blocknet-topology__protocol,
.blocknet-topology__infrastructure {
  position: relative;
  z-index: 2;
}

.blocknet-topology__apps {
  display: grid;
  grid-row: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.topology-product {
  --node-rgb: 75, 220, 255;
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 74px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 14px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--node-rgb), 0.28);
  border-radius: 17px;
  background:
    radial-gradient(circle at 14% 45%, rgba(var(--node-rgb), 0.14), transparent 32%),
    linear-gradient(145deg, rgba(var(--node-rgb), 0.07), rgba(2, 9, 14, 0.94) 56%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 16px 32px rgba(0, 0, 0, 0.2);
}

.topology-product::after {
  position: absolute;
  right: 15px;
  bottom: 13px;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: rgb(var(--node-rgb));
  box-shadow: 0 0 13px rgb(var(--node-rgb));
}

.topology-product--core { --node-rgb: 91, 135, 255; }
.topology-product--dex { --node-rgb: 85, 245, 172; }
.topology-product__type { grid-column: 1 / -1; color: rgb(var(--node-rgb)); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.13em; }
.topology-product__logo { display: grid; width: 62px; height: 62px; grid-row: 2 / 5; place-items: center; align-self: center; border: 1px solid rgba(var(--node-rgb), 0.3); border-radius: 17px; background: rgba(var(--node-rgb), 0.07); box-shadow: 0 0 24px rgba(var(--node-rgb), 0.1); }
.topology-product__logo img { width: 42px; max-height: 45px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(var(--node-rgb), 0.38)); }
.topology-product__logo--wide img { width: 58px; max-height: 42px; }
.topology-product__logo--blockdx img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(85, 245, 172, 0.32)); }
.topology-product h3 { margin: 13px 0 3px; color: #f1f8fb; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.12rem, 1.8vw, 1.42rem); line-height: 1; }
.topology-product p { margin: 0; color: #91a6b2; font-size: 0.72rem; line-height: 1.45; }
.topology-product > b { align-self: end; margin-top: 6px; color: rgba(var(--node-rgb), 0.86); font-size: 0.52rem; letter-spacing: 0.13em; }

.blocknet-topology__protocol {
  display: grid;
  grid-row: 3;
  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 18px;
  margin: 0 115px;
  padding: 19px 22px;
  border: 1px solid rgba(75, 220, 255, 0.42);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(75, 220, 255, 0.14), transparent 58%),
    linear-gradient(135deg, rgba(8, 31, 42, 0.98), rgba(3, 13, 19, 0.98));
  box-shadow: 0 0 42px rgba(75, 220, 255, 0.1), inset 0 1px rgba(255, 255, 255, 0.05);
}

.topology-protocol__heading { display: flex; min-width: 0; flex-direction: column; }
.topology-protocol__heading > span { color: var(--block-green); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.14em; }
.topology-protocol__heading > strong { margin-top: 6px; color: #f2fbff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1; }
.topology-protocol__heading > small { margin-top: 7px; color: #829aa7; font-size: 0.67rem; line-height: 1.4; }

.topology-protocol__modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.topology-protocol__modules > span {
  display: grid;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 7px;
  padding: 10px;
  border: 1px solid rgba(85, 245, 172, 0.16);
  border-radius: 11px;
  background: rgba(2, 9, 14, 0.5);
}

.topology-protocol__modules i { display: grid; width: 28px; height: 28px; grid-row: 1 / 3; place-items: center; color: #071511; font-size: 0.67rem; font-style: normal; font-weight: 900; border-radius: 9px; background: var(--block-green); box-shadow: 0 0 15px rgba(85, 245, 172, 0.22); }
.topology-protocol__modules b { align-self: end; color: #dff8ea; font-size: 0.68rem; }
.topology-protocol__modules small { align-self: start; color: #8ba2ad; font-size: 0.56rem; line-height: 1.35; white-space: normal; }

.blocknet-topology__infrastructure {
  display: grid;
  grid-row: 5;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 0 65px;
}

.topology-infra {
  --infra-rgb: 75, 220, 255;
  display: grid;
  min-width: 0;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 17px;
  border: 1px solid rgba(var(--infra-rgb), 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--infra-rgb), 0.075), rgba(2, 9, 14, 0.94));
}

.topology-infra--nodes { --infra-rgb: 85, 245, 172; }
.topology-infra__icon { display: grid; width: 48px; height: 48px; place-items: center; color: rgb(var(--infra-rgb)); font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 900; border: 1px solid rgba(var(--infra-rgb), 0.34); border-radius: 50%; background: rgba(var(--infra-rgb), 0.07); box-shadow: 0 0 20px rgba(var(--infra-rgb), 0.1); }
.topology-infra small { color: rgb(var(--infra-rgb)); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.13em; }
.topology-infra h3 { margin: 4px 0 3px; color: #eff8fb; font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; line-height: 1; }
.topology-infra p { margin: 0; color: #879da9; font-size: 0.68rem; line-height: 1.42; }

@keyframes topology-flow { to { stroke-dashoffset: -170; } }

@media (max-width: 900px) {
  .blocknet-topology { min-height: 715px; grid-template-rows: 310px 58px 150px 58px 120px; }
  .blocknet-topology__apps { grid-template-columns: 1fr; gap: 9px; }
  .topology-product { min-height: 94px; grid-template-columns: 62px minmax(0, 1fr); padding: 12px 14px; }
  .topology-product__logo { width: 52px; height: 52px; }
  .topology-product__type { grid-column: 2; }
  .topology-product h3 { margin-top: 4px; }
  .topology-product p { display: none; }
  .blocknet-topology__flows { display: none; }
  .blocknet-topology__protocol { grid-row: 3; grid-template-columns: 1fr; gap: 10px; margin: 0 35px; padding: 15px 18px; }
  .blocknet-topology__infrastructure { grid-row: 5; margin: 0; }
  .blocknet-topology__protocol::before,
  .blocknet-topology__infrastructure::before { position: absolute; top: -43px; left: 50%; content: "↓"; transform: translateX(-50%); color: var(--block-cyan); font-size: 1.4rem; text-shadow: 0 0 12px rgba(75, 220, 255, 0.6); }
  .blocknet-topology__infrastructure::before { color: var(--block-green); }
}

@media (max-width: 620px) {
  .blocknet-topology { min-height: 950px; grid-template-rows: 310px 46px 295px 46px 235px; padding: 10px; border-radius: 17px; }
  .blocknet-topology__protocol { margin: 0; }
  .topology-protocol__heading { text-align: center; }
  .topology-protocol__modules { grid-template-columns: 1fr; gap: 5px; }
  .topology-protocol__modules > span { min-height: 59px; grid-template-rows: 1fr 1fr; }
  .topology-protocol__modules i { grid-row: 1 / 3; }
  .topology-protocol__modules b { align-self: end; }
  .topology-protocol__modules small { display: block; align-self: start; font-size: 0.53rem; }
  .blocknet-topology__infrastructure { grid-template-columns: 1fr; gap: 9px; }
  .topology-infra { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .topology-flow { animation: none; }
}