/* Hianma commercial page — extend the Roles background slightly upward.
   Layout-only correction: no copy, asset, route or product logic changes. */

/* The previous section boundary must not remain visible when #roles is the active anchor. */
body .hm-marketing #roles {
  position: relative;
  z-index: 1;
  border-top: 0 !important;
}

body .hm-marketing #roles::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 29px;
  background: #f8fafc;
  pointer-events: none;
  z-index: 0;
}

body .hm-marketing #roles > .hm-container {
  position: relative;
  z-index: 1;
}

/* Airier Roles composition: move the whole upper content group (copy + approved artwork)
   upward without changing document flow. The cards stay exactly where they are, so the
   visual breathing room between the upper group and the cards increases naturally. */
body .hm-marketing #roles .hm-split-heading {
  transform: translateY(-20px);
}

/* Roles card accents mirror the approved 03-roles artwork.
   Card 1 remains Hianma blue. Cards 2/3/4 use orange, violet and green respectively. */
body .hm-marketing #roles .hm-role-index {
  display: none !important;
}

body .hm-marketing #roles .hm-role-card:nth-child(2) .hm-role-icon {
  color: #f0a500 !important;
  background: rgba(252, 206, 89, .17) !important;
}
body .hm-marketing #roles .hm-role-card:nth-child(2) .hm-role-line {
  background: linear-gradient(90deg, #f0a500, #fcce59) !important;
  opacity: .82 !important;
}

body .hm-marketing #roles .hm-role-card:nth-child(3) .hm-role-icon {
  color: #8b5cf6 !important;
  background: rgba(187, 138, 251, .16) !important;
}
body .hm-marketing #roles .hm-role-card:nth-child(3) .hm-role-line {
  background: linear-gradient(90deg, #8b5cf6, #bb8afb) !important;
  opacity: .82 !important;
}

body .hm-marketing #roles .hm-role-card:nth-child(4) .hm-role-icon {
  color: #10b981 !important;
  background: rgba(95, 243, 188, .17) !important;
}
body .hm-marketing #roles .hm-role-card:nth-child(4) .hm-role-line {
  background: linear-gradient(90deg, #10b981, #5ff3bc) !important;
  opacity: .82 !important;
}

/* Short desktop/laptop screens benefit from a touch more separation while preserving fit. */
@media (min-width: 1121px) and (max-height: 850px) {
  body .hm-marketing #roles .hm-split-heading {
    transform: translateY(-24px);
  }
}

@media (max-width: 1120px) {
  body .hm-marketing #roles::before {
    top: -22px;
    height: 23px;
  }

  body .hm-marketing #roles .hm-split-heading {
    transform: translateY(-14px);
  }
}

@media (max-width: 760px) {
  body .hm-marketing #roles::before {
    top: -16px;
    height: 17px;
  }

  body .hm-marketing #roles .hm-split-heading {
    transform: translateY(-8px);
  }
}