/* Dark-plum art direction shared by the Technology and Ugo illustrations. */
.stack-band {
  overflow: hidden;
  background:
    radial-gradient(ellipse 48% 68% at 22% 52%, rgba(68, 34, 75, .23), transparent 76%),
    linear-gradient(120deg, rgba(39, 25, 46, .35), transparent 57%);
}

.stack-visual { min-width: 0; }
.stack-visual h2 { max-width: 16ch; }
.stack-visual__art {
  display: block;
  width: min(115%, 570px);
  max-width: none;
  height: auto;
  margin: 12px 0 -40px -28px;
  opacity: .74;
  filter: saturate(.74) brightness(.8);
  pointer-events: none;
}

.software-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 0;
  background:
    radial-gradient(ellipse 64% 110% at 79% 51%, rgba(68, 34, 75, .3), transparent 72%),
    linear-gradient(110deg, #130d18 0%, #1b1122 55%, #120d17 100%);
}
.software-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 430px;
}
.software-cta__inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, #130d18 4%, rgba(19, 13, 24, .88) 44%, transparent);
  pointer-events: none;
}
.software-cta__copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 30px;
  width: min(44%, 500px);
  padding-block: 72px;
}
.software-cta__copy h2 {
  max-width: 14ch;
  font-size: clamp(2.3rem, 3.7vw, 3.55rem);
}
.software-cta__copy .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.software-cta__art {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: translateY(-50%);
  opacity: .82;
  filter: saturate(.8) brightness(.84);
  pointer-events: none;
}

@media (max-width: 899px) {
  .stack-visual__art {
    width: min(100%, 520px);
    max-height: 400px;
    object-fit: contain;
    object-position: left center;
    margin: 10px 0 0 -14px;
  }
}

@media (max-width: 1099px) {
  .software-cta__inner {
    display: block;
    min-height: 0;
    padding-top: 68px;
  }
  .software-cta__inner::after { display: none; }
  .software-cta__copy {
    width: min(100%, 620px);
    padding-block: 0;
  }
  .software-cta__copy h2 { max-width: 17ch; }
  .software-cta__art {
    position: relative;
    top: auto;
    left: auto;
    width: 780px;
    height: 300px;
    object-fit: cover;
    object-position: center;
    margin: 2px 0 0 clamp(-300px, calc(43vw - 455px), -68px);
    transform: none;
  }
}

@media (max-width: 640px) {
  .software-cta__inner { padding-top: 64px; }
  .software-cta__copy { gap: 26px; }
  .software-cta__copy h2 { max-width: 15ch; }
  .software-cta__copy .actions { gap: 10px; }
  .software-cta__art { margin-top: 18px; }
}

/* Soft edges: the illustrations never end in a hard line, whatever the screen width. */
.stack-visual__art {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 24%), linear-gradient(to bottom, transparent, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, transparent, #000 24%), linear-gradient(to bottom, transparent, #000 16%);
  mask-composite: intersect;
}
.software-cta__art {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 18%);
  mask-image: linear-gradient(to left, transparent, #000 18%);
}