/* Software development hero (hb3 · MacBook + phone)
   From WDI Hero Banners 2426–2458. Main SiteHeader outside; no in-hero nav.
   Scoped under #wdi-wf-page. */

@keyframes hb3Wave {
  to {
    transform: translate3d(-3%, -2%, 0) rotate(-2deg)
  }
}

#wdi-wf-page .hbm-eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-figtree), system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #E0204F
}

#wdi-wf-page .hbm-eye::before,
#wdi-wf-page .hbm-eye::after {
  content: "";
  width: 30px;
  height: 1px;
  border-radius: 0;
  box-shadow: none;
  background: #F92F64;
  opacity: .55
}

#wdi-wf-page section.hb3 {
  position: relative;
  overflow: hidden;
  background: #fff !important;
  color: #0B0C0E !important;
  font-family: var(--font-figtree), system-ui, sans-serif;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  text-align: left !important;
  box-sizing: border-box
}

#wdi-wf-page .hb3-wave {
  position: absolute;
  right: -14%;
  bottom: -6%;
  width: min(118%, 1500px);
  opacity: 1;
  pointer-events: none;
  animation: hb3Wave 22s ease-in-out infinite alternate
}

#wdi-wf-page .hb3-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .96) 34%, rgba(255, 255, 255, .35) 58%, rgba(255, 255, 255, 0) 72%)
}

#wdi-wf-page .hb3-in {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: clamp(64px, 7vw, 110px) clamp(24px, 5.5vw, 128px);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  box-sizing: border-box
}

#wdi-wf-page .hb3-copy {
  text-align: left
}

#wdi-wf-page section.hb3 .hb3-h {
  margin: 18px 0 22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: clamp(38px, 4.3vw, 66px) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
  color: #0B0C0E !important;
  max-width: 22ch !important;
  text-align: left !important
}

#wdi-wf-page section.hb3 .hb3-h em {
  font-style: normal;
  background: linear-gradient(90deg, #F92F64, #A24BFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

#wdi-wf-page .hb3-p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: #5F636B
}

#wdi-wf-page .hb3-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px
}

#wdi-wf-page .hb3-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform .3s, background .3s, color .3s, border-color .3s
}

#wdi-wf-page .hb3-btn svg {
  width: 16px;
  height: 16px
}

#wdi-wf-page .hb3-btn.pri {
  background: #F92F64;
  color: #fff;
  border: none
}

#wdi-wf-page .hb3-btn.pri:hover {
  background: #0B0C0E;
  transform: translateY(-2px)
}

#wdi-wf-page .hb3-btn.sec {
  border: 1px solid rgba(11, 12, 14, .16);
  color: #0B0C0E;
  background: rgba(255, 255, 255, .7)
}

#wdi-wf-page .hb3-btn.sec:hover {
  border-color: #0B0C0E
}

#wdi-wf-page .hb3-art {
  position: relative;
  height: clamp(440px, 42vw, 620px)
}

/* MacBook Pro — bleeds off the right edge */
#wdi-wf-page .mbp {
  position: absolute;
  left: 14%;
  top: 4%;
  width: 118%;
  filter: drop-shadow(0 40px 60px rgba(11, 12, 14, .28))
}

#wdi-wf-page .mbp-lid {
  position: relative;
  aspect-ratio: 2286 / 1490;
  background: #0A0A0B;
  border-radius: 22px 22px 6px 6px;
  padding: 2.2% 2.2% 3%;
  box-shadow: inset 0 0 0 2px #2b2b2e, inset 0 0 0 4px #0A0A0B, 0 0 0 1px #6b6b70;
  box-sizing: border-box
}

#wdi-wf-page .mbp-cam {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11%;
  height: 3.2%;
  background: #0A0A0B;
  border-radius: 0 0 10px 10px;
  z-index: 2
}

#wdi-wf-page .mbp-scr {
  position: relative;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #F7F6F9
}

#wdi-wf-page .mbp-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block
}

#wdi-wf-page .mbp-base {
  position: relative;
  height: clamp(12px, 1.4vw, 20px);
  margin: 0 -5%;
  background: linear-gradient(180deg, #d9dade, #a8a9ae 60%, #7d7e83);
  border-radius: 2px 2px 18px 18px
}

#wdi-wf-page .mbp-base span {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 14%;
  height: 40%;
  background: #9c9da2;
  border-radius: 0 0 8px 8px
}

/* iPhone 16 Pro */
#wdi-wf-page .hb3-phone {
  position: absolute;
  left: 0;
  bottom: -2%;
  width: clamp(170px, 15.5vw, 250px);
  aspect-ratio: 1406 / 2822;
  z-index: 3;
  filter: drop-shadow(0 34px 44px rgba(11, 12, 14, .32))
}

#wdi-wf-page .hb3-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block
}

#wdi-wf-page .hb3-scr {
  position: absolute;
  inset: 3.4% 6.2%;
  border-radius: 11% / 5.4%;
  overflow: hidden;
  background: #fff;
  container-type: inline-size
}

#wdi-wf-page .ph-wrap {
  position: absolute;
  inset: 0;
  padding: 0 7cqw;
  color: #0B0C0E
}

#wdi-wf-page .ph-splash {
  display: grid;
  place-items: center;
  padding: 0 14cqw !important;
  background: #fff
}

#wdi-wf-page .ph-splash img {
  width: 100%;
  height: auto
}

@media (max-width: 1000px) {
  #wdi-wf-page .hb3-in {
    grid-template-columns: 1fr;
    padding: clamp(48px, 8vw, 80px) clamp(20px, 5vw, 40px)
  }

  #wdi-wf-page .hb3-wash {
    background: linear-gradient(180deg, #fff 40%, rgba(255, 255, 255, .4))
  }

  #wdi-wf-page .hb3-art {
    height: clamp(360px, 70vw, 520px)
  }

  #wdi-wf-page .mbp {
    left: 18%;
    width: 96%
  }
}

@media (max-width: 600px) {
  #wdi-wf-page .mbp {
    display: none
  }

  #wdi-wf-page .hb3-phone {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0
  }
}

@media (prefers-reduced-motion: reduce) {
  #wdi-wf-page .hb3-wave {
    animation: none
  }
}