/* The brand connects familiar services; all surfaces share one perspective. */
.feature-network {
  justify-content: space-between;
  gap: 20px;
  background:
    radial-gradient(ellipse at 57% 23%, rgba(192, 20, 51, .28), transparent 58%),
    linear-gradient(152deg, #21151d, #101012 80%);
}

/* Artwork occupies real layout space, including on narrow screens. */
.feature-network-art {
  position: relative;
  inset: auto;
  flex: 1;
  width: 100%;
  min-height: 320px;
  pointer-events: none;
}

.service-access-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.service-access-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse closest-side at 47% 53%, rgba(216, 26, 65, .19), transparent 100%);
}

.service-access-scene {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 14 / 9;
  transform: perspective(900px) rotateX(6deg) rotateY(-8deg) rotateZ(-4deg);
}

.service-access-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.service-access-route { stroke: rgba(235, 53, 85, .3); stroke-width: 1.2; }
.service-access-pulse { stroke: #ff7791; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 0; opacity: .85; }

.service-access-node {
  position: absolute;
  width: 17.2%;
  aspect-ratio: 1;
  border-radius: 22%;
  isolation: isolate;
}

.service-access-node::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(215, 53, 87, .28);
  background: linear-gradient(125deg, #51424b, #401422 57%, #791c34);
  box-shadow: 0 13px 19px rgba(9, 2, 6, .24);
  transform: translate(4px, 5px);
}

.service-access-node__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  border: 1px solid rgba(246, 210, 226, .25);
  background: linear-gradient(145deg, #373039, #19171d 38%, #110f15 80%);
  box-shadow: inset 0 1px 1px rgba(255, 229, 240, .15), inset 0 -1px 1px rgba(227, 38, 80, .22);
}

.service-access-node__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 244, 249, .08), transparent 45%);
}

.service-access-node img { display: block; width: 52%; height: 52%; object-fit: contain; filter: invert(96%) sepia(7%) saturate(460%) hue-rotate(285deg); }
.service-access-node--telegram { left: 47.2%; top: 13%; }
.service-access-node--youtube { left: 73.6%; top: 13%; }
.service-access-node--discord { left: 47.2%; top: 60%; }
.service-access-node--instagram { left: 73.6%; top: 60%; }

.service-access-node--brand { left: 9%; top: 34%; width: 20%; }
.service-access-node--brand::before { background: linear-gradient(130deg, #ba3153, #60142b); border-color: rgba(255, 113, 152, .4); }
.service-access-node--brand .service-access-node__face {
  border-color: rgba(255, 161, 186, .5);
  background: linear-gradient(145deg, #d02c50, #901b3c 65%, #60132c);
  box-shadow: inset 0 1px 1px rgba(255, 214, 229, .35), 0 0 28px rgba(194, 27, 67, .16);
}
.service-access-node--brand img { width: 55%; height: 55%; filter: none; }

@media (min-width: 769px) {
  .feature-grid { grid-template-rows: repeat(2, minmax(290px, auto)); }
}

/* Motion is limited to a short highlight on intentional desktop hover. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feature-network:hover .service-access-pulse { animation: service-access-signal 3.8s linear var(--route-delay) infinite; }
}

@keyframes service-access-signal { to { stroke-dashoffset: -100; } }

@media (max-width: 768px) {
  .feature-network { gap: 15px; }
  .feature-network-art { flex: none; min-height: 240px; }
  .service-access-scene { width: min(100%, 330px); }
  .service-access-node::before { transform: translate(3px, 4px); box-shadow: 0 9px 12px rgba(9, 2, 6, .22); }
}

@media (max-width: 420px) {
  .feature-network-art { min-height: 220px; }
  .service-access-scene { transform: perspective(900px) rotateX(4deg) rotateY(-5deg) rotateZ(-3deg); }
}