/* Compare page — platform visual section wrapper (reuses homepage hero-visual) */

.cmp-platform-visual {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  padding: 0 0.5rem;
}

.cmp-platform-visual__bg {
  position: absolute;
  inset: -1.5rem -1rem;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.cmp-platform-visual__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 85%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(64, 80, 208, 0.09) 0%, transparent 68%);
  filter: blur(14px);
}

.cmp-platform-visual__grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 48%, #000 18%, transparent 78%);
}

.cmp-platform-visual .hero-visual {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .cmp-platform-visual {
    max-width: 28rem;
    padding: 0;
  }

  .cmp-platform-visual .hv-card--crm { right: 0; }
  .cmp-platform-visual .hv-card--support { left: -2%; }
}