.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #07100d;
}

.hero-shade {
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 12, 11, .98) 0%, rgba(7, 12, 11, .87) 42%, rgba(7, 12, 11, .15) 77%, rgba(7, 12, 11, .42) 100%);
}

.perception-figure {
  margin: 0;
}

.perception-map {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid #c0c9c3;
  background: #0b1512;
}

.map-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(105, 224, 189, .34) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 224, 189, .34) 1px, transparent 1px);
  background-size: 36px 36px;
}

.sensor-core {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  width: 112px;
  height: 70px;
  place-content: center;
  color: #07110d;
  background: var(--green);
  text-align: center;
  transform: translate(-50%, -50%) skew(-6deg);
}

.sensor-core span {
  font-size: 15px;
  font-weight: 800;
}

.sensor-core small {
  font: 700 8px monospace;
}

.sensor-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(105, 224, 189, .7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: sensor-pulse 3.4s ease-out infinite;
}

.ring-one {
  width: 220px;
  height: 220px;
}

.ring-two {
  width: 360px;
  height: 360px;
  animation-delay: 1.2s;
}

.sensor-node {
  position: absolute;
  z-index: 2;
  padding: 8px 11px;
  border-left: 3px solid var(--orange);
  color: #eaf2ee;
  background: #16221e;
  font-size: 12px;
}

.node-camera { left: 10%; top: 18%; }
.node-lidar { right: 9%; top: 24%; }
.node-position { left: 8%; bottom: 17%; }
.node-state { right: 10%; bottom: 15%; }

.perception-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #bbc4be;
  color: #59645e;
  font-size: 12px;
}

.perception-figure figcaption span {
  color: #18765f;
  font: bold 10px monospace;
}

@keyframes sensor-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

@media (max-width: 900px) {
  .hero-shade {
    background: linear-gradient(90deg, rgba(7, 12, 11, .96), rgba(7, 12, 11, .60));
  }
}

@media (max-width: 560px) {
  .perception-map { min-height: 350px; }
  .ring-two { width: 290px; height: 290px; }
  .sensor-node { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sensor-ring { animation: none; opacity: .65; }
}