/* v8: graphics and UI panels are separate, never covered */
.hero {
  grid-template-columns: minmax(0, .9fr) minmax(620px, 1.1fr);
  gap: 5vw;
}

.hero-visual {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(190px, .58fr) minmax(430px, 1.42fr);
  align-items: center;
  gap: 18px;
}

.hero-network-art {
  position: static;
  width: 100%;
  height: 430px;
  max-width: 100%;
  object-fit: contain;
  transform: none;
  opacity: 1;
}

.hero-visual .finspay-console {
  width: 100%;
  margin: 0;
  transform: none;
  align-self: center;
}

.platform-visual {
  grid-template-columns: minmax(280px, .62fr) minmax(680px, 1.38fr);
  gap: 5vw;
}

.platform-image {
  min-height: 0;
  display: grid;
  grid-template-rows: 285px auto;
  gap: 18px;
}

.platform-art {
  position: static;
  width: 100%;
  height: 285px;
  object-fit: contain;
  transform: none;
  opacity: 1;
}

.platform-image .pipeline-board {
  width: 100%;
  margin: 0;
  transform: none;
}

@media (max-width: 1250px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { grid-template-columns: minmax(180px, .45fr) minmax(500px, 1.55fr); max-width: 960px; }
  .platform-visual { grid-template-columns: 1fr; }
  .platform-image { max-width: 980px; }
}

@media (max-width: 760px) {
  .hero-visual { min-height: 0; grid-template-columns: 1fr; gap: 12px; }
  .hero-network-art { height: 270px; }
  .hero-visual .finspay-console { width: 100%; margin: 0; transform: none; }
  .platform-image { grid-template-rows: 220px auto; }
  .platform-art { width: 100%; height: 220px; transform: none; }
  .platform-image .pipeline-board { width: 100%; margin: 0; transform: none; }
}