/* Service detail hero B — Digital Products & Platforms */
.digital-products-hero-b {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100dvh - 72px);
  padding: clamp(3.2rem, 5.2vw, 5.7rem) 0 clamp(2rem, 3.5vw, 3.25rem);
  background:
    radial-gradient(circle at 76% 36%, rgba(99, 102, 241, 0.13), transparent 28%),
    linear-gradient(118deg, #fff 0%, #fdfdff 58%, #f3f5ff 100%);
}



.digital-products-hero-b::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -12rem;
  top: -17rem;
  width: 38rem;
  aspect-ratio: 1;
  border: 1px solid rgba(99, 102, 241, 0.08);
  border-radius: 50%;
}

.digital-products-hero-b__main {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(37rem, 1.18fr);
  align-items: center;
  gap: clamp(2.5rem, 4vw, 5rem);
}

.digital-products-hero-b__eyebrow { display: flex; align-items: center; gap: 1.35rem; color: #4f56ff; }
.digital-products-hero-b__eyebrow > span { display: grid; width: 3.8rem; aspect-ratio: 1; place-items: center; border: 1px solid #e3e6ff; border-radius: .8rem; background: rgba(255,255,255,.86); box-shadow: 0 .7rem 1.8rem rgba(48,60,142,.12); }
.digital-products-hero-b__eyebrow p { font-size: .76rem; font-weight: 650; letter-spacing: .25em; text-transform: uppercase; }

.digital-products-hero-b__title { max-width: 39rem; margin-top: 2rem; color: #08133b; font-size: clamp(3rem, 3.6vw, 4.65rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
.digital-products-hero-b__title span { color: #8953eb; }
.digital-products-hero-b__description { max-width: 37rem; margin-top: 1.7rem; color: #526083; font-size: clamp(.98rem, 1.05vw, 1.16rem); line-height: 1.6; text-wrap: pretty; }
.digital-products-hero-b__actions { display: flex; flex-wrap: wrap; gap: 1.35rem; margin-top: 2rem; }
.digital-products-hero-b__actions a { min-height: 4.15rem; border-radius: .65rem; padding-inline: 1.7rem; }
.digital-products-hero-b__actions a:first-child { background: linear-gradient(135deg, #3159ff, #633bff); }

.digital-products-hero-b__visual { position: relative; min-height: 36rem; perspective: 75rem; }
.digital-products-hero-b__connectors { position: absolute; inset: 7% 2% 7% 3%; opacity: .66; background-image: radial-gradient(circle, #7078ff 1.2px, transparent 1.6px); background-size: 9px 9px; mask-image: linear-gradient(90deg, transparent 0 10%, #000 22% 82%, transparent 95%); }

.digital-products-hero-b__dashboard { position: absolute; z-index: 3; left: 17%; top: 18%; display: grid; grid-template-columns: 3rem 1fr; width: 66%; height: 58%; overflow: hidden; border: 1px solid rgba(255,255,255,.92); border-radius: 1rem; background: #fff; box-shadow: 0 2rem 3.5rem rgba(71,77,167,.2), 0 0 0 .45rem rgba(108,118,255,.07); transform: rotateX(2deg) rotateY(-5deg) rotateZ(1.2deg); }
.digital-products-hero-b__dashboard > aside { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 1rem .6rem; background: linear-gradient(#12295a, #071a42); color: #87a4ff; }
.digital-products-hero-b__dashboard > aside svg { color: white; }
.digital-products-hero-b__dashboard > aside i { width: .75rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: .2rem; }
.digital-products-hero-b__dashboard-body { padding: 1.1rem; }
.digital-products-hero-b__dashboard-body > header { display: flex; align-items: center; justify-content: space-between; color: #08133b; font-size: .72rem; }
.digital-products-hero-b__dashboard-body > header span { border: 1px solid #e3e7f5; border-radius: .4rem; padding: .35rem .55rem; color: #647094; font-size: .42rem; }
.digital-products-hero-b__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: .8rem; }
.digital-products-hero-b__metrics article { position: relative; display: grid; gap: .18rem; min-width: 0; border: 1px solid #ebedf7; border-radius: .45rem; padding: .55rem; }
.digital-products-hero-b__metrics small { color: #8390ae; font-size: .38rem; }
.digital-products-hero-b__metrics strong { color: #08133b; font-size: .68rem; }
.digital-products-hero-b__metrics em { position: absolute; right: .45rem; bottom: .55rem; color: #15a56b; font-size: .35rem; font-style: normal; }
.digital-products-hero-b__chart { position: relative; height: 8rem; margin-top: .65rem; border: 1px solid #ebedf7; border-radius: .5rem; padding: .5rem; overflow: hidden; }
.digital-products-hero-b__chart small { color: #546080; font-size: .4rem; }
.digital-products-hero-b__chart svg { position: absolute; inset: 1.3rem .5rem .2rem; width: calc(100% - 1rem); height: calc(100% - 1.5rem); }
.digital-products-hero-b__dashboard-lower { display: grid; grid-template-columns: 1fr .65fr; gap: .55rem; margin-top: .55rem; }
.digital-products-hero-b__dashboard-lower > div { min-height: 4.2rem; border: 1px solid #ebedf7; border-radius: .5rem; padding: .6rem; color: #08133b; font-size: .46rem; }
.digital-products-hero-b__dashboard-lower > div:first-child { display: grid; gap: .35rem; }
.digital-products-hero-b__dashboard-lower > div:first-child i { height: .25rem; border-radius: 1rem; background: linear-gradient(90deg, #6070ff 58%, #edf0f9 58%); }
.digital-products-hero-b__segment { position: relative; }
.digital-products-hero-b__segment::before { content: ""; position: absolute; width: 2.8rem; aspect-ratio: 1; left: 50%; bottom: .3rem; border: .55rem solid #6470ff; border-right-color: #dce1ff; border-radius: 50%; transform: translateX(-50%); }
.digital-products-hero-b__segment strong { position: absolute; left: 50%; bottom: 1.15rem; z-index: 1; font-size: .45rem; transform: translateX(-50%); }

.digital-products-hero-b__phone { position: absolute; z-index: 4; right: 1%; top: 6%; width: 20%; height: 57%; overflow: hidden; border: .35rem solid #edf0f8; border-radius: 1.35rem; background: #fff; color: #08133b; box-shadow: 0 1.5rem 3rem rgba(53,63,140,.16); transform: rotate(5deg); }
.digital-products-hero-b__phone > header { display: flex; justify-content: space-between; padding: .8rem .7rem .55rem; border-bottom: 1px solid #eef0f7; font-size: .45rem; }
.digital-products-hero-b__phone > h2 { margin: .8rem .75rem 0; font-size: .65rem; }
.digital-products-hero-b__phone > p { margin: .2rem .75rem 0; color: #7b86a3; font-size: .36rem; }
.digital-products-hero-b__phone > article { position: relative; display: grid; gap: .45rem; margin: .65rem; border: 1px solid #eceefa; border-radius: .55rem; padding: .65rem; box-shadow: 0 .6rem 1.2rem rgba(70,77,145,.08); }
.digital-products-hero-b__phone article small { color: #717d9d; font-size: .36rem; }
.digital-products-hero-b__phone article strong { font-size: .8rem; }
.digital-products-hero-b__phone article svg { position: absolute; right: .45rem; bottom: .55rem; width: 3.2rem; }
.digital-products-hero-b__activity { display: grid; grid-template-columns: .5rem 1fr; gap: .55rem; margin: .8rem; }
.digital-products-hero-b__activity i { width: .38rem; aspect-ratio: 1; border-radius: .1rem; background: #6270ff; }
.digital-products-hero-b__activity span { height: .28rem; margin-top: .07rem; border-radius: 1rem; background: #e9ecf5; }
.digital-products-hero-b__phone footer { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-around; height: 2.8rem; border-top: 1px solid #eef0f7; }
.digital-products-hero-b__phone footer i { width: .5rem; aspect-ratio: 1; border: 1px solid #8290b1; border-radius: .15rem; }
.digital-products-hero-b__phone footer b { display: grid; width: 1.55rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #5665ff; color: white; }

.digital-products-hero-b__platform { position: absolute; z-index: 0; left: 7%; right: 3%; bottom: 3%; height: 22%; border: 1px solid rgba(255,255,255,.9); border-radius: 50% 50% 1.3rem 1.3rem / 30% 30% 1.3rem 1.3rem; background: linear-gradient(165deg, rgba(255,255,255,.9), rgba(164,176,255,.4)); box-shadow: 0 1.1rem 0 -.15rem rgba(132,149,255,.16), 0 1.8rem 2.5rem rgba(72,82,176,.18); transform: perspective(36rem) rotateX(58deg); }
.digital-products-hero-b__services, .digital-products-hero-b__api, .digital-products-hero-b__data { position: absolute; z-index: 4; bottom: 7%; border: 1px solid rgba(255,255,255,.94); border-radius: .8rem; background: rgba(255,255,255,.92); box-shadow: 0 1rem 2rem rgba(68,76,155,.17); color: #08133b; }
.digital-products-hero-b__services { left: 12%; display: grid; gap: .32rem; width: 27%; padding: .75rem; transform: rotate(4deg); }
.digital-products-hero-b__services > b { font-size: .55rem; }
.digital-products-hero-b__services span { display: flex; justify-content: space-between; font-size: .38rem; }
.digital-products-hero-b__services i { border-radius: 1rem; background: #e4f8ef; color: #16855a; padding: .1rem .3rem; font-size: .3rem; font-style: normal; }
.digital-products-hero-b__api { left: 48%; display: grid; width: 12%; min-width: 5.2rem; aspect-ratio: .9; place-items: center; align-content: center; gap: .45rem; font-size: .55rem; text-align: center; transform: rotate(4deg); }
.digital-products-hero-b__api svg, .digital-products-hero-b__data svg { color: #5262ff; }
.digital-products-hero-b__data { right: 10%; display: grid; grid-template-columns: 1fr auto; align-items: center; width: 24%; padding: .8rem; font-size: .55rem; transform: rotate(4deg); }

.digital-products-hero-b__callout { position: absolute; z-index: 6; display: flex; align-items: center; gap: .7rem; max-width: 12rem; border: 1px solid #e1e4ff; border-radius: .75rem; background: rgba(255,255,255,.9); box-shadow: 0 .8rem 1.9rem rgba(61,69,150,.13); padding: .8rem 1rem; color: #5262ff; }
.digital-products-hero-b__callout b { color: #0d1a4a; font-size: .72rem; line-height: 1.25; }
.digital-products-hero-b__callout--top-left { left: 12%; top: 1%; }
.digital-products-hero-b__callout--top-right { right: 23%; top: -5%; }
.digital-products-hero-b__callout--left { left: -4%; top: 48%; }
.digital-products-hero-b__callout--right { right: -4%; top: 67%; }

.digital-products-hero-b__benefits { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(1.5rem, 3vh, 3rem); }
.digital-products-hero-b__benefit { display: flex; align-items: flex-start; gap: 1.15rem; min-width: 0; padding: .3rem 1.8rem; border-left: 1px solid rgba(64,74,163,.16); }
.digital-products-hero-b__benefit:first-child { border-left: 0; padding-left: 0; }
.digital-products-hero-b__benefit > span { display: grid; flex: 0 0 4rem; aspect-ratio: 1; place-items: center; border-radius: .75rem; background: #f0f0ff; color: #142b91; }
.digital-products-hero-b__benefit h2 { color: #08133b; font-size: .9rem; font-weight: 700; }
.digital-products-hero-b__benefit p { margin-top: .55rem; color: #667292; font-size: .76rem; line-height: 1.55; }

@media (max-width: 1160px) {
  .digital-products-hero-b { min-height: auto; }
  .digital-products-hero-b__main { grid-template-columns: 1fr; }
  .digital-products-hero-b__copy { max-width: 43rem; }
  .digital-products-hero-b__visual { width: min(100%, 53rem); margin: 1rem auto 0; }
  .digital-products-hero-b__benefits { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .digital-products-hero-b__benefit:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 640px) {
  .digital-products-hero-b { padding-top: 2.6rem; }
  .digital-products-hero-b__eyebrow { gap: .8rem; }
  .digital-products-hero-b__eyebrow > span { width: 3.1rem; }
  .digital-products-hero-b__eyebrow p { font-size: .62rem; letter-spacing: .17em; }
  .digital-products-hero-b__title { font-size: clamp(2.55rem, 12vw, 3.55rem); }
  .digital-products-hero-b__actions { display: grid; }
  .digital-products-hero-b__actions a { width: 100%; min-height: 3.6rem; }
  .digital-products-hero-b__visual { min-height: 27rem; }
  .digital-products-hero-b__dashboard { left: 3%; top: 22%; width: 78%; height: 53%; grid-template-columns: 2rem 1fr; }
  .digital-products-hero-b__dashboard > aside { gap: 1rem; padding-inline: .4rem; }
  .digital-products-hero-b__dashboard-body { padding: .55rem; }
  .digital-products-hero-b__dashboard-body > header span { display: none; }
  .digital-products-hero-b__metrics { gap: .2rem; }
  .digital-products-hero-b__metrics article { padding: .3rem; }
  .digital-products-hero-b__metrics em { display: none; }
  .digital-products-hero-b__chart { height: 5.7rem; }
  .digital-products-hero-b__dashboard-lower { display: none; }
  .digital-products-hero-b__phone { right: 0; top: 11%; width: 25%; height: 48%; }
  .digital-products-hero-b__phone > article, .digital-products-hero-b__activity { margin-inline: .35rem; }
  .digital-products-hero-b__platform { bottom: 4%; }
  .digital-products-hero-b__services { left: 5%; width: 34%; bottom: 8%; }
  .digital-products-hero-b__api { left: 43%; bottom: 7%; transform: scale(.78) rotate(4deg); }
  .digital-products-hero-b__data { right: 0; width: 30%; bottom: 8%; }
  .digital-products-hero-b__data svg { width: 1.8rem; }
  .digital-products-hero-b__callout { padding: .55rem .65rem; }
  .digital-products-hero-b__callout b { font-size: .55rem; }
  .digital-products-hero-b__callout--top-left { left: 0; }
  .digital-products-hero-b__callout--top-right { right: 3%; }
  .digital-products-hero-b__callout--left, .digital-products-hero-b__callout--right { display: none; }
  .digital-products-hero-b__benefits { grid-template-columns: 1fr; gap: 0; margin-top: .5rem; }
  .digital-products-hero-b__benefit, .digital-products-hero-b__benefit:nth-child(3) { border-left: 0; border-top: 1px solid rgba(64,74,163,.14); padding: 1rem 0; }
  .digital-products-hero-b__benefit:first-child { border-top: 0; }
  .digital-products-hero-b__benefit > span { flex-basis: 3.6rem; }
}