/* Spider Studios software hero — final image version */
.software-native .top-stage{
  position:relative!important;
  overflow:hidden!important;
  background:none!important;
  background-image:none!important;
  min-height:0!important;
  height:auto!important;
}
.software-native .top-stage::before,
.software-native .top-stage::after{
  content:none!important;
  display:none!important;
}

.sw-image-hero{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,41%) minmax(0,59%)!important;
  align-items:center!important;
  gap:0!important;
  height:520px!important;
  min-height:0!important;
  padding:0 0 0 4.2vw!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 14% 26%,rgba(246,68,168,.06),transparent 30%),
    radial-gradient(circle at 74% 18%,rgba(74,151,255,.09),transparent 30%),
    linear-gradient(90deg,#fbf9ff 0%,#f7f8ff 42%,#eef5ff 100%)!important;
}

.sw-image-hero__copy{
  position:relative!important;
  z-index:4!important;
  max-width:730px!important;
  padding-right:22px!important;
}
.sw-image-hero__eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  margin:0 0 14px!important;
  padding:9px 20px!important;
  border-radius:999px!important;
  background:rgba(244,66,164,.075)!important;
  border:1px solid rgba(244,66,164,.12)!important;
  color:#d83a9d!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}
.sw-image-hero h1{
  margin:0 0 10px!important;
  color:#182b63!important;
  font-size:clamp(50px,3.85vw,72px)!important;
  line-height:.96!important;
  letter-spacing:-.052em!important;
  font-weight:800!important;
}
.sw-image-hero h1 strong{
  display:block!important;
  font-weight:800!important;
}
.sw-image-hero h2{
  margin:0 0 18px!important;
  max-width:700px!important;
  font-size:clamp(31px,2.55vw,48px)!important;
  line-height:1.06!important;
  letter-spacing:-.04em!important;
  font-weight:800!important;
  background:linear-gradient(90deg,#7650ed 0%,#5e5bf2 48%,#3598fb 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.sw-image-hero p{
  max-width:660px!important;
  margin:0!important;
  color:#667792!important;
  font-size:16px!important;
  line-height:1.55!important;
}

.sw-image-hero__visual{
  position:relative!important;
  z-index:2!important;
  height:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  overflow:hidden!important;
}
.sw-image-hero__visual img{
  display:block!important;
  width:auto!important;
  height:100%!important;
  min-width:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center right!important;
  margin:0 -1px 0 0!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
}
.sw-image-hero__visual::before{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  left:-1px!important;
  top:0!important;
  bottom:0!important;
  width:96px!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(248,248,255,1) 0%,
    rgba(248,248,255,.72) 28%,
    rgba(248,248,255,.22) 66%,
    rgba(248,248,255,0) 100%)!important;
}
.sw-image-hero__visual::after{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:34px!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(245,247,255,.45),rgba(245,247,255,0))!important;
}

@media(max-width:1200px){
  .sw-image-hero{
    grid-template-columns:1fr!important;
    height:auto!important;
    padding:32px 5vw 36px!important;
    gap:22px!important;
  }
  .sw-image-hero__copy{max-width:900px!important;padding-right:0!important}
  .sw-image-hero__visual{height:auto!important}
  .sw-image-hero__visual img{
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
  }
  .sw-image-hero__visual::before{width:60px!important}
}
@media(max-width:700px){
  .sw-image-hero{padding:26px 18px 30px!important;gap:18px!important}
  .sw-image-hero h1{font-size:clamp(40px,12vw,58px)!important}
  .sw-image-hero h2{font-size:clamp(27px,8vw,38px)!important}
  .sw-image-hero p{font-size:15px!important}
  .sw-image-hero__eyebrow{font-size:10px!important;padding:8px 15px!important}
  .sw-image-hero__visual::before{width:36px!important;opacity:.7!important}
}

/* v1.1 — carousel integration polish */
.software-native .software-hero-carousel{
  margin:0!important;
  padding:0 0 16px!important;
  background:linear-gradient(180deg,#f8f9ff 0%,#f3f6ff 100%)!important;
}
.software-native .software-hero-carousel__frame{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:0 0 24px 24px!important;
  border-top:0!important;
  border-left:0!important;
  border-right:0!important;
  box-shadow:0 18px 46px rgba(28,40,92,.10)!important;
}
.software-native .software-hero-carousel__slide img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
@media(max-width:900px){.software-native .software-hero-carousel{padding:0 0 12px!important}.software-native .software-hero-carousel__frame{border-radius:0 0 18px 18px!important}}
@media(max-width:620px){.software-native .software-hero-carousel{padding:0 0 8px!important}.software-native .software-hero-carousel__frame{border-radius:0!important}}

/* v1.2 — viewport-fit banner sizing */
.software-native .software-hero-carousel{
  padding:8px 16px 16px!important;
}
.software-native .software-hero-carousel__frame{
  width:min(calc(100% - 40px),1320px)!important;
  max-width:1320px!important;
  margin:0 auto!important;
  aspect-ratio:16/9!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
@media (max-width:1600px) and (min-width:1201px){
  .software-native .software-hero-carousel__frame{
    width:min(calc(100% - 36px),1120px)!important;
    max-width:1120px!important;
  }
}
@media (max-width:1200px) and (min-width:901px){
  .software-native .software-hero-carousel__frame{
    width:min(calc(100% - 32px),960px)!important;
    max-width:960px!important;
  }
}
@media (max-width:900px){
  .software-native .software-hero-carousel{padding:6px 10px 12px!important}
  .software-native .software-hero-carousel__frame{width:100%!important;max-width:100%!important;border-radius:18px!important}
}
@media (max-width:620px){
  .software-native .software-hero-carousel{padding:0 0 8px!important}
  .software-native .software-hero-carousel__frame{width:100%!important;max-width:100%!important;border-radius:0!important}
}