/* v6 visual layering and typography refinements */
.hero h1 {
  font-size: clamp(38px, 3.6vw, 58px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

.hero-slides { min-height: 420px; }

.hero-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-network-art {
  position: absolute;
  width: 112%;
  max-width: none;
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
  opacity: .78;
}

.hero-visual .finspay-console {
  position: relative;
  width: 86%;
  margin-top: 86px;
  z-index: 2;
  background: rgba(5, 25, 60, .84);
  backdrop-filter: blur(12px);
}

.platform-image {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.platform-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .72;
}

.platform-image .pipeline-board {
  position: relative;
  width: 88%;
  margin-top: 165px;
  z-index: 2;
  background: rgba(5, 25, 60, .84);
  backdrop-filter: blur(12px);
}

@media (max-width: 760px) {
  .hero h1 { font-size: 36px; }
  .hero-slides { min-height: 520px; }
  .hero-visual { min-height: 600px; }
  .hero-network-art { width: 150%; right: -28%; opacity: .62; }
  .hero-visual .finspay-console { width: 100%; margin-top: 125px; }
  .platform-image { min-height: 620px; }
  .platform-art { width: 150%; left: -25%; opacity: .56; }
  .platform-image .pipeline-board { width: 100%; margin-top: 175px; }
}