/* v0.13: one canonical hero geometry on every page */
.hero, .software-hero, .about-hero, .contact-hero {
    min-height: 530px !important;
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.955) 31%,rgba(255,255,255,.72) 48%,rgba(255,255,255,.28) 70%,rgba(255,255,255,.17) 100%),
      url("../assets/brand/banner-main.png") !important;
    background-repeat: no-repeat !important;
    background-size: auto 100% !important;
    background-position: 50% 50% !important;
}
.hero-grid, .software-hero-grid, .about-hero-grid, .contact-hero-grid {
    min-height: 530px !important;
    align-items: center !important;
}
.hero-copy, .software-hero-copy, .about-hero-copy, .contact-hero-copy {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* v0.13 device: preserve the source screenshot ratio; never crop it */
.device-screen img, .gallery-device-screen img,
.product-real-screenshot, .home-real-screenshot {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: top center !important;
}
.device-shell, .gallery-device-shell {
    height: auto !important;
    aspect-ratio: auto !important;
}
.device-screen, .gallery-device-screen {
    height: auto !important;
}
.device-shell {
    padding: 9px;
    border-radius: 38px;
}
.device-screen { border-radius: 30px; }
.gallery-device-shell {
    padding: 6px;
    border-radius: 28px 28px 0 0;
}
.gallery-device-screen { border-radius: 22px 22px 0 0; }

@media (max-width:860px) {
  .hero,.software-hero,.about-hero,.contact-hero {
    min-height:620px !important;
    background-position:58% 50% !important;
  }
  .hero-grid,.software-hero-grid,.about-hero-grid,.contact-hero-grid {
    min-height:620px !important;
  }
}