/* Helper-based carousel copied into the home hero as real HTML/CSS, not images. */
html body .hero .dx-clean-card-carousel{
  --p:#7433ff;
  --p2:#a855ff;
  --ink:#071436;
  --muted:#65708b;
  --line:#eadcff;
  --green:#13b56a;
  --blue:#2377ff;
  --orange:#ff8a1e;
  --pink:#ff3f8f;
  max-width:900px !important;
  margin:0 auto !important;
  filter:drop-shadow(0 24px 54px rgba(112,51,255,.12)) !important;
}

@media(min-width:1400px){
  html body .hero > .container{
    max-width:1660px !important;
  }
}

@media(min-width:1200px){
  html body .hero .row.align-items-center{
    display:grid !important;
    grid-template-columns:minmax(560px,.85fr) minmax(860px,1.15fr) !important;
    align-items:center !important;
    column-gap:42px !important;
  }

  html body .hero .row.align-items-center > .col-lg-6{
    width:100% !important;
    max-width:100% !important;
    flex:none !important;
  }
}

html body .hero .dx-clean-card-carousel .carousel-inner{
  overflow:hidden !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body .hero .dx-clean-card-carousel .carousel-item{
  min-height:530px !important;
}

html body .hero .dx-clean-card-carousel .card-ui{
  box-sizing:border-box !important;
  height:530px !important;
  min-height:530px !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  position:relative !important;
  overflow:hidden !important;
  padding:30px 34px !important;
  background:
    radial-gradient(circle at 75% 12%,rgba(164,96,255,.18) 0 17%,transparent 18%),
    radial-gradient(circle at 91% 92%,rgba(164,96,255,.12) 0 20%,transparent 21%),
    linear-gradient(rgba(116,51,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(116,51,255,.04) 1px,transparent 1px),
    linear-gradient(135deg,#fff 0%,#fffcff 55%,#fbf7ff 100%) !important;
  background-size:100% 100%,100% 100%,44px 44px,44px 44px,100% 100% !important;
}

html body .hero .dx-clean-card-carousel .card-ui::after{
  content:"" !important;
  position:absolute !important;
  right:45px !important;
  top:55px !important;
  width:120px !important;
  height:80px !important;
  background-image:radial-gradient(#e7d8ff 2px,transparent 2px) !important;
  background-size:22px 22px !important;
  opacity:.7 !important;
  pointer-events:none !important;
}

html body .hero .dx-clean-card-carousel .pill-head{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  height:50px !important;
  padding:0 28px 0 12px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 8px 26px rgba(112,51,255,.10) !important;
  font-weight:900 !important;
  font-size:14px !important;
  color:var(--p) !important;
  position:relative !important;
  z-index:5 !important;
}

html body .hero .dx-clean-card-carousel .pill-head .ico{
  width:38px !important;
  height:38px !important;
  border-radius:14px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,var(--p),var(--p2)) !important;
  color:#fff !important;
  font-size:15px !important;
}

html body .hero .dx-clean-card-carousel .copy{
  position:relative !important;
  z-index:4 !important;
  width:45% !important;
}

html body .hero .dx-clean-card-carousel .title{
  margin:50px 0 16px !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:none !important;
  font-size:25px !important;
  line-height:1.16 !important;
  letter-spacing:0 !important;
  font-weight:950 !important;
  text-shadow:none !important;
}

html body .hero .dx-clean-card-carousel .title span{
  color:var(--p) !important;
  -webkit-text-fill-color:var(--p) !important;
}

html body .hero .dx-clean-card-carousel .carousel-item:nth-child(1) .title span{
  background:linear-gradient(90deg,#7433ff 0%,#a855ff 48%,#c85cff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

html body .hero .dx-clean-card-carousel .desc{
  max-width:410px !important;
  margin:0 0 20px !important;
  color:var(--muted) !important;
  font-size:11px !important;
  line-height:1.65 !important;
  font-weight:500 !important;
}

html body .hero .dx-clean-card-carousel .chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
}

html body .hero .dx-clean-card-carousel .chip{
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 18px !important;
  border-radius:22px !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 5px 18px rgba(65,40,140,.08) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:var(--ink) !important;
}

html body .hero .dx-clean-card-carousel .chip i{
  color:var(--p) !important;
}

html body .hero .dx-clean-card-carousel .chip-green,
html body .hero .dx-clean-card-carousel .chip-green i{
  color:var(--green) !important;
}

html body .hero .dx-clean-card-carousel .chip-orange,
html body .hero .dx-clean-card-carousel .chip-orange i{
  color:var(--orange) !important;
}

html body .hero .dx-clean-card-carousel .visual{
  position:absolute !important;
  right:34px !important;
  top:108px !important;
  width:52% !important;
  height:285px !important;
  z-index:3 !important;
}

html body .hero .dx-clean-card-carousel .dash{
  width:82% !important;
  height:268px !important;
  margin-left:64px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid var(--line) !important;
  border-radius:21px !important;
  box-shadow:0 20px 55px rgba(112,51,255,.12) !important;
  padding:27px 20px 18px 74px !important;
  position:relative !important;
}

html body .hero .dx-clean-card-carousel .dash-title{
  color:var(--ink) !important;
  font-size:15px !important;
  font-weight:950 !important;
  margin-bottom:10px !important;
}

html body .hero .dx-clean-card-carousel .side{
  position:absolute !important;
  left:22px !important;
  top:45px !important;
  width:40px !important;
  height:180px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,var(--p),var(--p2)) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:17px !important;
  padding-top:22px !important;
  color:#fff !important;
}

html body .hero .dx-clean-card-carousel .side i{
  color:#fff !important;
  font-size:14px !important;
}

html body .hero .dx-clean-card-carousel .stat{
  height:60px !important;
  border:1px solid var(--line) !important;
  border-radius:13px !important;
  background:#fff !important;
  padding:10px 12px !important;
  color:var(--ink) !important;
  font-size:10px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
}

html body .hero .dx-clean-card-carousel .stat b{
  font-size:11px !important;
  font-weight:950 !important;
}

html body .hero .dx-clean-card-carousel .mini-chart{
  height:78px !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#fff,#f4edff) !important;
  position:relative !important;
  overflow:hidden !important;
}

html body .hero .dx-clean-card-carousel .mini-low{
  height:48px !important;
}

html body .hero .dx-clean-card-carousel .mini-chart svg,
html body .hero .dx-clean-card-carousel .bigchart svg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

html body .hero .dx-clean-card-carousel .donut{
  width:78px !important;
  height:78px !important;
  border-radius:50% !important;
  background:conic-gradient(var(--p) 0 72%,#22c3bd 72% 100%) !important;
  display:grid !important;
  place-items:center !important;
  margin:auto !important;
  position:relative !important;
}

html body .hero .dx-clean-card-carousel .donut::after{
  content:"72%" !important;
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  background:#fff !important;
  display:grid !important;
  place-items:center !important;
  font-weight:950 !important;
  font-size:14px !important;
}

html body .hero .dx-clean-card-carousel .float{
  position:absolute !important;
  min-width:96px !important;
  min-height:78px !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:15px !important;
  box-shadow:0 14px 35px rgba(112,51,255,.14) !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  color:var(--p) !important;
  font-weight:900 !important;
  font-size:12px !important;
  padding:10px !important;
  z-index:4 !important;
}

html body .hero .dx-clean-card-carousel .float i{
  color:var(--p) !important;
  font-size:20px !important;
}

html body .hero .dx-clean-card-carousel .fl-user{left:-20px !important;top:78px !important;}
html body .hero .dx-clean-card-carousel .fl-cal{left:0 !important;top:180px !important;}
html body .hero .dx-clean-card-carousel .fl-ai{right:18px !important;top:-64px !important;}
html body .hero .dx-clean-card-carousel .fl-noti{right:-4px !important;top:116px !important;}
html body .hero .dx-clean-card-carousel .fl-api{right:6px !important;bottom:-2px !important;}

html body .hero .dx-clean-card-carousel .flow{
  height:300px !important;
}

html body .hero .dx-clean-card-carousel .orbit{
  position:absolute !important;
  right:92px !important;
  top:8px !important;
  width:310px !important;
  height:260px !important;
  border:2px dashed rgba(116,51,255,.45) !important;
  border-radius:50% !important;
}

html body .hero .dx-clean-card-carousel .flow-card{
  position:absolute !important;
  min-width:135px !important;
  height:58px !important;
  border-radius:15px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  box-shadow:0 12px 32px rgba(112,51,255,.12) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

html body .hero .dx-clean-card-carousel .flow-card i{
  font-size:17px !important;
}

html body .hero .dx-clean-card-carousel .lead{right:120px !important;top:0 !important;color:var(--p) !important;}
html body .hero .dx-clean-card-carousel .quote{right:28px !important;top:76px !important;color:var(--blue) !important;}
html body .hero .dx-clean-card-carousel .approval{right:210px !important;top:132px !important;color:var(--green) !important;}
html body .hero .dx-clean-card-carousel .invoice{right:112px !important;top:202px !important;color:var(--orange) !important;}
html body .hero .dx-clean-card-carousel .pay{right:18px !important;top:270px !important;color:var(--pink) !important;}
html body .hero .dx-clean-card-carousel .delivery{right:240px !important;bottom:2px !important;color:var(--p) !important;}
html body .hero .dx-clean-card-carousel .report{right:105px !important;bottom:-10px !important;color:var(--p) !important;}

html body .hero .dx-clean-card-carousel .module-wrap{
  height:300px !important;
}

html body .hero .dx-clean-card-carousel .module-orbit{
  position:absolute !important;
  right:54px !important;
  top:15px !important;
  width:330px !important;
  height:270px !important;
  border:1.5px dashed rgba(116,51,255,.40) !important;
  border-radius:50% !important;
}

html body .hero .dx-clean-card-carousel .module{
  position:absolute !important;
  width:102px !important;
  height:102px !important;
  border-radius:50% !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 14px 35px rgba(112,51,255,.12) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:var(--ink) !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
}

html body .hero .dx-clean-card-carousel .module i{
  font-size:28px !important;
  margin-bottom:7px !important;
}

html body .hero .dx-clean-card-carousel .hub{right:192px !important;top:116px !important;width:130px !important;height:130px !important;color:var(--ink) !important;}
html body .hero .dx-clean-card-carousel .mod-health{right:190px !important;top:0 !important;color:var(--green) !important;}
html body .hero .dx-clean-card-carousel .mod-school{right:55px !important;top:112px !important;color:var(--blue) !important;}
html body .hero .dx-clean-card-carousel .mod-crm{right:330px !important;top:112px !important;color:var(--pink) !important;}
html body .hero .dx-clean-card-carousel .mod-inv{right:275px !important;bottom:-4px !important;color:var(--orange) !important;}
html body .hero .dx-clean-card-carousel .mod-mobile{right:135px !important;bottom:-4px !important;color:var(--p) !important;}

html body .hero .dx-clean-card-carousel .analytics{
  width:54% !important;
  top:66px !important;
}

html body .hero .dx-clean-card-carousel .kpi-box{
  height:72px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  border-radius:13px !important;
  padding:12px !important;
  box-shadow:0 8px 24px rgba(65,40,140,.08) !important;
  color:var(--ink) !important;
  font-size:12px !important;
  line-height:1.12 !important;
  font-weight:900 !important;
}

html body .hero .dx-clean-card-carousel .kpi-box b{
  display:block !important;
  color:var(--ink) !important;
  font-size:12px !important;
  font-weight:950 !important;
}

html body .hero .dx-clean-card-carousel .kpi-box small{
  display:block !important;
  font-weight:900 !important;
}

html body .hero .dx-clean-card-carousel .purple{color:var(--p) !important;}
html body .hero .dx-clean-card-carousel .blue{color:var(--blue) !important;}
html body .hero .dx-clean-card-carousel .green{color:var(--green) !important;}
html body .hero .dx-clean-card-carousel .pink{color:var(--pink) !important;}

html body .hero .dx-clean-card-carousel .bigchart{
  height:145px !important;
  border:1px solid var(--line) !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#fff,#f4eaff) !important;
  position:relative !important;
  overflow:hidden !important;
  padding:14px !important;
  color:var(--ink) !important;
}

html body .hero .dx-clean-card-carousel .bigchart b{
  position:relative !important;
  z-index:2 !important;
  color:var(--ink) !important;
  font-size:13px !important;
  font-weight:950 !important;
}

html body .hero .dx-clean-card-carousel .small-panel{
  height:125px !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:0 8px 20px rgba(65,40,140,.08) !important;
  padding:12px !important;
  color:var(--ink) !important;
  font-weight:950 !important;
  font-size:10px !important;
  position:relative !important;
  overflow:hidden !important;
}

html body .hero .dx-clean-card-carousel .small-panel strong{
  display:block !important;
  color:var(--ink) !important;
  font-size:10px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  position:relative !important;
  z-index:2 !important;
}

html body .hero .dx-clean-card-carousel .small-panel .small-line{
  position:absolute !important;
  left:20px !important;
  right:20px !important;
  bottom:12px !important;
  height:44px !important;
}

html body .hero .dx-clean-card-carousel .map{
  height:56px !important;
  border-radius:12px !important;
  background:
    radial-gradient(circle at 35% 45%,var(--p) 0 6px,transparent 7px),
    radial-gradient(circle at 58% 55%,#b485ff 0 12px,transparent 13px),
    radial-gradient(circle at 48% 30%,#8d54ff 0 6px,transparent 7px),
    #f2e9ff !important;
}

html body .hero .dx-clean-card-carousel .pie{
  width:68px !important;
  height:68px !important;
  border-radius:50% !important;
  background:conic-gradient(from -70deg,var(--blue) 0 16%,#fff 16% 17%,#21c2bd 17% 44%,#fff 44% 45%,var(--p) 45% 72%,#fff 72% 73%,var(--pink) 73% 100%) !important;
  display:grid !important;
  place-items:center !important;
  margin:4px auto 0 !important;
  box-shadow:inset 0 0 0 1px rgba(116,51,255,.05),0 8px 18px rgba(116,51,255,.10) !important;
}

html body .hero .dx-clean-card-carousel .pie::after{
  content:"72%" !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:#fff !important;
  display:grid !important;
  place-items:center !important;
  color:var(--ink) !important;
  font-weight:950 !important;
  box-shadow:0 0 0 1px rgba(234,223,255,.78),0 4px 12px rgba(65,40,140,.08) !important;
}

html body .hero .dx-clean-card-carousel .category-panel .pie{
  position:absolute !important;
  left:14px !important;
  bottom:14px !important;
  margin:0 !important;
}

html body .hero .dx-clean-card-carousel .category-panel .pie::after{
  font-size:12px !important;
}

html body .hero .dx-clean-card-carousel .chart-legend{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  position:absolute !important;
  top:42px !important;
  right:10px !important;
  width:70px !important;
  display:grid !important;
  gap:4px !important;
  color:#64708e !important;
  font-size:7px !important;
  line-height:1 !important;
  font-weight:850 !important;
}

html body .hero .dx-clean-card-carousel .chart-legend li{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  white-space:nowrap !important;
  font-size:7px !important;
  line-height:1 !important;
  font-weight:850 !important;
}

html body .hero .dx-clean-card-carousel .chart-legend .sw{
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  flex:0 0 6px !important;
}

html body .hero .dx-clean-card-carousel .chart-legend .software{background:var(--blue) !important;}
html body .hero .dx-clean-card-carousel .chart-legend .services{background:#21c2bd !important;}
html body .hero .dx-clean-card-carousel .chart-legend .subscription{background:var(--p) !important;}
html body .hero .dx-clean-card-carousel .chart-legend .others{background:var(--pink) !important;}

html body .hero .dx-clean-card-carousel .flow-mobile-join{
  display:none !important;
}

html body .hero .dx-clean-card-carousel .prediction-panel .forecast-label{
  display:block !important;
  margin-top:14px !important;
  color:#68748f !important;
  font-size:7.5px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

html body .hero .dx-clean-card-carousel .prediction-panel b{
  display:block !important;
  margin-top:4px !important;
  color:var(--ink) !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

html body .hero .dx-clean-card-carousel .prediction-panel .forecast-growth{
  display:block !important;
  margin-top:6px !important;
  color:var(--green) !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

html body .hero .dx-clean-card-carousel .prediction-panel .prediction-line{
  left:12px !important;
  right:12px !important;
  bottom:7px !important;
  height:49px !important;
}

html body .hero .dx-clean-card-carousel .map-panel .world-map{
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  bottom:8px !important;
  width:calc(100% - 16px) !important;
  height:86px !important;
  background:transparent !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
}

html body .hero .dx-clean-card-carousel .world-map .map-land{
  fill:#9d62ff !important;
  opacity:.76 !important;
  stroke:#f9f5ff !important;
  stroke-width:.28 !important;
  stroke-linejoin:round !important;
}

html body .hero .dx-clean-card-carousel .world-map .map-land.soft{
  fill:#c7a8ff !important;
  opacity:.62 !important;
}

html body .hero .dx-clean-card-carousel .world-map .map-land.strong{
  fill:#7433ff !important;
  opacity:.88 !important;
}

html body .hero .dx-clean-card-carousel .world-map .map-dot{
  fill:#7433ff !important;
  opacity:.75 !important;
  filter:drop-shadow(0 2px 4px rgba(116,51,255,.22)) !important;
}

html body .hero .dx-clean-card-carousel .world-map .map-dot.bright{
  fill:#b485ff !important;
  opacity:.9 !important;
}

html body .hero .dx-clean-card-carousel .world-map .map-route{
  fill:none !important;
  stroke:#d9c8ff !important;
  stroke-width:1.2 !important;
  stroke-linecap:round !important;
  stroke-dasharray:5 6 !important;
  opacity:.62 !important;
}

html body .hero .dx-clean-card-carousel .carousel-control-prev,
html body .hero .dx-clean-card-carousel .carousel-control-next{
  opacity:1 !important;
  width:35px !important;
  height:35px !important;
  top:auto !important;
  bottom:24px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,var(--p),var(--p2)) !important;
  box-shadow:0 12px 25px rgba(112,51,255,.24) !important;
}

html body .hero .dx-clean-card-carousel .carousel-control-prev{left:auto !important;right:85px !important;}
html body .hero .dx-clean-card-carousel .carousel-control-next{right:28px !important;}

html body .hero .dx-clean-card-carousel .carousel-control-prev-icon,
html body .hero .dx-clean-card-carousel .carousel-control-next-icon{
  width:18px !important;
  height:18px !important;
}

html body .hero .dx-clean-card-carousel .carousel-indicators{
  bottom:30px !important;
  margin:0 !important;
  gap:12px !important;
}

html body .hero .dx-clean-card-carousel .carousel-indicators button{
  width:34px !important;
  height:6px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:99px !important;
  background:#dccbff !important;
  opacity:1 !important;
}

html body .hero .dx-clean-card-carousel .carousel-indicators button.active{
  background:var(--p) !important;
}

@media(max-width:1199px){
  html body .hero .dx-clean-card-carousel .card-ui{
    height:520px !important;
    min-height:520px !important;
  }

  html body .hero .dx-clean-card-carousel .title{
    font-size:28px !important;
  }

  html body .hero .dx-clean-card-carousel .visual{
    width:52% !important;
    right:24px !important;
  }

  html body .hero .dx-clean-card-carousel .copy{
    width:43% !important;
  }

  html body .hero .dx-clean-card-carousel .dash{
    margin-left:55px !important;
    width:82% !important;
  }

  html body .hero .dx-clean-card-carousel .flow-card{
    min-width:120px !important;
  }
}

@media(max-width:991px){
  html body .hero .dx-clean-card-carousel{
    max-width:720px !important;
    margin-top:28px !important;
  }

  html body .hero .dx-clean-card-carousel .card-ui{
    height:auto !important;
    min-height:720px !important;
  }

  html body .hero .dx-clean-card-carousel .copy{
    width:100% !important;
  }

  html body .hero .dx-clean-card-carousel .visual{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    margin-top:28px !important;
  }

  html body .hero .dx-clean-card-carousel .dash{
    margin:0 auto !important;
  }
}

@media(max-width:575px){
  html body .hero .dx-clean-card-carousel .card-ui{
    min-height:0 !important;
    padding:22px 18px 78px !important;
  }

  html body .hero .dx-clean-card-carousel .title{
    margin-top:30px !important;
    font-size:24px !important;
  }

  html body .hero .dx-clean-card-carousel .visual{
    display:none !important;
  }
}

/* V203: code-built carousel refinements matching the reference artwork. */
@media(min-width:992px){
  html body .hero .dx-clean-card-carousel{
    max-width:820px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-inner{
    border-radius:18px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-item{
    min-height:536px !important;
  }

  html body .hero .dx-clean-card-carousel .card-ui{
    height:536px !important;
    min-height:536px !important;
    padding:26px 28px !important;
    border-radius:18px !important;
    background:
      radial-gradient(circle at 75% 11%,rgba(164,96,255,.18) 0 17%,transparent 17.6%),
      radial-gradient(circle at 91% 94%,rgba(164,96,255,.12) 0 20%,transparent 20.7%),
      linear-gradient(rgba(116,51,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(116,51,255,.035) 1px,transparent 1px),
      linear-gradient(135deg,#fff 0%,#fffcff 56%,#fbf7ff 100%) !important;
    background-size:100% 100%,100% 100%,44px 44px,44px 44px,100% 100% !important;
  }

  html body .hero .dx-clean-card-carousel .pill-head{
    height:50px !important;
    min-width:228px !important;
    border-radius:18px !important;
    padding:0 24px 0 11px !important;
    font-size:13px !important;
  }

  html body .hero .dx-clean-card-carousel .pill-head .ico{
    width:38px !important;
    height:38px !important;
  }

  html body .hero .dx-clean-card-carousel .copy{
    width:38% !important;
  }

  html body .hero .dx-clean-card-carousel .title{
    margin:42px 0 16px !important;
    font-size:27px !important;
    line-height:1.16 !important;
  }

  html body .hero .dx-clean-card-carousel .desc{
    max-width:300px !important;
    margin-bottom:19px !important;
    font-size:12px !important;
    line-height:1.62 !important;
  }

  html body .hero .dx-clean-card-carousel .chips{
    max-width:315px !important;
    gap:11px !important;
  }

  html body .hero .dx-clean-card-carousel .chip{
    min-width:104px !important;
    height:39px !important;
    justify-content:center !important;
    padding:0 16px !important;
    font-size:11px !important;
  }

  html body .hero .dx-clean-card-carousel .visual{
    right:24px !important;
    top:90px !important;
    width:60% !important;
    height:370px !important;
  }

  html body .hero .dx-clean-card-carousel .dash{
    width:83% !important;
    height:278px !important;
    margin:38px 28px 0 auto !important;
    padding:24px 18px 18px 74px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr 1.18fr !important;
    gap:11px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .stat{
    height:62px !important;
    padding:10px 11px !important;
    font-size:9px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .stat small{
    display:block !important;
    margin-top:4px !important;
    color:var(--green) !important;
    font-size:8px !important;
    font-weight:950 !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .mini-chart{
    grid-column:span 2 !important;
    height:132px !important;
    padding:12px !important;
  }

  html body .hero .dx-clean-card-carousel .mini-chart strong,
  html body .hero .dx-clean-card-carousel .donut-panel strong,
  html body .hero .dx-clean-card-carousel .activity strong{
    display:block !important;
    color:var(--ink) !important;
    font-size:10px !important;
    font-weight:950 !important;
    margin-bottom:6px !important;
  }

  html body .hero .dx-clean-card-carousel .mini-chart .axis{
    position:absolute !important;
    left:16px !important;
    right:16px !important;
    bottom:7px !important;
    display:flex !important;
    justify-content:space-between !important;
    color:#6d7691 !important;
    font-size:7px !important;
    font-weight:850 !important;
  }

  html body .hero .dx-clean-card-carousel .donut-panel{
    height:132px !important;
    border:1px solid var(--line) !important;
    border-radius:14px !important;
    background:#fff !important;
    padding:12px 8px !important;
    position:relative !important;
    overflow:hidden !important;
    text-align:center !important;
  }

  html body .hero .dx-clean-card-carousel .donut-panel .donut{
    width:78px !important;
    height:78px !important;
    margin:9px auto 0 !important;
  }

  html body .hero .dx-clean-card-carousel .donut-panel ul{
    list-style:none !important;
    position:static !important;
    display:flex !important;
    justify-content:center !important;
    gap:5px !important;
    flex-wrap:wrap !important;
    margin:0 !important;
    padding:0 !important;
    color:#59637d !important;
    font-size:6px !important;
    font-weight:850 !important;
    line-height:1 !important;
  }

  html body .hero .dx-clean-card-carousel .donut-panel li::before{
    content:"" !important;
    display:inline-block !important;
    width:5px !important;
    height:5px !important;
    border-radius:50% !important;
    background:var(--p) !important;
    margin-right:4px !important;
  }

  html body .hero .dx-clean-card-carousel .donut-panel li:nth-child(2)::before{background:#22c3bd !important;}
  html body .hero .dx-clean-card-carousel .donut-panel li:nth-child(3)::before{background:#ff8a1e !important;}

  html body .hero .dx-clean-card-carousel .activity{
    grid-column:span 3 !important;
    height:72px !important;
    border:1px solid var(--line) !important;
    border-radius:14px !important;
    background:#fff !important;
    padding:10px 13px !important;
    color:var(--ink) !important;
    box-shadow:0 8px 18px rgba(65,40,140,.06) !important;
  }

  html body .hero .dx-clean-card-carousel .activity span{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    color:#293658 !important;
    font-size:8px !important;
    font-weight:850 !important;
    line-height:1.55 !important;
  }

  html body .hero .dx-clean-card-carousel .activity i{
    color:#2377ff !important;
    font-size:10px !important;
  }

  html body .hero .dx-clean-card-carousel .activity span:nth-child(3) i{
    color:#ff8a1e !important;
  }

  html body .hero .dx-clean-card-carousel .activity em{
    margin-left:auto !important;
    color:#65708b !important;
    font-style:normal !important;
    font-size:7px !important;
  }

  html body .hero .dx-clean-card-carousel .fl-user{left:-28px !important;top:76px !important;}
  html body .hero .dx-clean-card-carousel .fl-cal{left:2px !important;top:180px !important;}
  html body .hero .dx-clean-card-carousel .fl-ai{right:18px !important;top:-72px !important;}
  html body .hero .dx-clean-card-carousel .fl-noti{right:-2px !important;top:142px !important;}
  html body .hero .dx-clean-card-carousel .fl-api{right:8px !important;bottom:8px !important;}

  html body .hero .dx-clean-card-carousel .flow{
    top:44px !important;
    height:414px !important;
  }

  html body .hero .dx-clean-card-carousel .orbit{
    display:none !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines{
    position:absolute !important;
    right:-2px !important;
    top:2px !important;
    width:470px !important;
    height:392px !important;
    overflow:visible !important;
    z-index:1 !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines .flow-path{
    fill:none !important;
    stroke-width:1.65 !important;
    stroke-linecap:round !important;
    stroke-dasharray:5 6 !important;
    opacity:.72 !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines .purple{
    stroke:#7b3cff !important;
    marker-end:url(#flowArrowPurple) !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines .orange{
    stroke:#ff8a1e !important;
    marker-end:url(#flowArrowOrange) !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines .pink{
    stroke:#ff3f8f !important;
    marker-end:url(#flowArrowPink) !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines circle{
    fill:#a473ff !important;
    filter:drop-shadow(0 0 5px rgba(116,51,255,.28)) !important;
  }

  html body .hero .dx-clean-card-carousel .flow-card{
    width:136px !important;
    min-width:136px !important;
    height:58px !important;
    border-radius:14px !important;
    z-index:3 !important;
    box-shadow:0 14px 34px rgba(112,51,255,.14) !important;
    backdrop-filter:blur(8px) !important;
  }

  html body .hero .dx-clean-card-carousel .lead{right:270px !important;top:10px !important;}
  html body .hero .dx-clean-card-carousel .quote{right:94px !important;top:74px !important;}
  html body .hero .dx-clean-card-carousel .approval{right:270px !important;top:142px !important;color:var(--green) !important;background:#f9fffc !important;border-color:#bbf1d6 !important;}
  html body .hero .dx-clean-card-carousel .ai-approval{right:0 !important;top:184px !important;color:var(--p) !important;}
  html body .hero .dx-clean-card-carousel .invoice{right:206px !important;top:222px !important;color:var(--orange) !important;background:#fffaf5 !important;border-color:#ffd8bb !important;}
  html body .hero .dx-clean-card-carousel .pay{right:110px !important;top:292px !important;color:var(--pink) !important;background:#fff6fb !important;border-color:#ffd1e4 !important;}
  html body .hero .dx-clean-card-carousel .delivery{right:238px !important;bottom:0 !important;color:var(--p) !important;}
  html body .hero .dx-clean-card-carousel .report{right:88px !important;bottom:-4px !important;color:var(--p) !important;}

  html body .hero .dx-clean-card-carousel .invoice::before{
    content:"" !important;
    position:absolute !important;
    right:100% !important;
    top:50% !important;
    width:20px !important;
    border-top:1.65px dashed #ff8a1e !important;
    transform:translateY(-50%) !important;
    pointer-events:none !important;
  }

  html body .hero .dx-clean-card-carousel .delivery::after{
    content:"" !important;
    position:absolute !important;
    left:100% !important;
    top:50% !important;
    width:34px !important;
    border-top:1.65px dashed #7b3cff !important;
    transform:translateY(-50%) !important;
    pointer-events:none !important;
  }

  html body .hero .dx-clean-card-carousel .delivery::before{
    content:"" !important;
    position:absolute !important;
    right:100% !important;
    top:50% !important;
    width:30px !important;
    border-top:1.65px dashed #7b3cff !important;
    transform:translateY(-50%) !important;
    pointer-events:none !important;
  }

  html body .hero .dx-clean-card-carousel .module-wrap{
    top:48px !important;
    height:402px !important;
  }

  html body .hero .dx-clean-card-carousel .module-wrap::after{
    content:"" !important;
    position:absolute !important;
    right:14px !important;
    top:6px !important;
    width:190px !important;
    height:130px !important;
    background:
      radial-gradient(circle at 28px 26px,rgba(116,51,255,.09) 0 15px,transparent 16px),
      radial-gradient(circle at 64px 26px,rgba(116,51,255,.08) 0 15px,transparent 16px),
      radial-gradient(circle at 100px 26px,rgba(116,51,255,.13) 0 15px,transparent 16px),
      radial-gradient(circle at 46px 58px,rgba(116,51,255,.08) 0 15px,transparent 16px),
      radial-gradient(circle at 82px 58px,rgba(116,51,255,.12) 0 15px,transparent 16px),
      radial-gradient(circle at 118px 58px,rgba(116,51,255,.18) 0 15px,transparent 16px),
      radial-gradient(circle at 64px 90px,rgba(116,51,255,.08) 0 15px,transparent 16px),
      radial-gradient(circle at 100px 90px,rgba(116,51,255,.12) 0 15px,transparent 16px) !important;
    opacity:.75 !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  html body .hero .dx-clean-card-carousel .module-orbit{
    right:54px !important;
    top:72px !important;
    width:400px !important;
    height:282px !important;
  }

  html body .hero .dx-clean-card-carousel .module{
    width:108px !important;
    height:108px !important;
    z-index:2 !important;
  }

  html body .hero .dx-clean-card-carousel .hub{
    right:188px !important;
    top:166px !important;
    width:132px !important;
    height:132px !important;
  }

  html body .hero .dx-clean-card-carousel .mod-health{right:195px !important;top:0 !important;}
  html body .hero .dx-clean-card-carousel .mod-school{right:20px !important;top:142px !important;}
  html body .hero .dx-clean-card-carousel .mod-crm{right:400px !important;top:142px !important;}
  html body .hero .dx-clean-card-carousel .mod-inv{right:269px !important;bottom:-27px !important;}
  html body .hero .dx-clean-card-carousel .mod-mobile{right:106px !important;bottom:-27px !important;}

  html body .hero .dx-clean-card-carousel .analytics{
    top:34px !important;
    right:28px !important;
    width:58% !important;
    height:424px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .row{
    --bs-gutter-x:10px !important;
    --bs-gutter-y:10px !important;
  }

  html body .hero .dx-clean-card-carousel .kpi-box{
    height:76px !important;
    padding:12px !important;
  }

  html body .hero .dx-clean-card-carousel .bigchart{
    height:150px !important;
  }

  html body .hero .dx-clean-card-carousel .small-panel{
    height:130px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics-sales-col{
    flex:0 0 41.666667% !important;
    max-width:41.666667% !important;
  }

  html body .hero .dx-clean-card-carousel .analytics-ai-col{
    flex:0 0 25% !important;
    max-width:25% !important;
  }

  html body .hero .dx-clean-card-carousel .analytics-region-col{
    flex:0 0 33.333333% !important;
    max-width:33.333333% !important;
  }

  html body .hero .dx-clean-card-carousel .category-panel{
    padding:11px 10px !important;
  }

  html body .hero .dx-clean-card-carousel .category-panel .pie{
    left:11px !important;
    bottom:32px !important;
    width:64px !important;
    height:64px !important;
  }

  html body .hero .dx-clean-card-carousel .category-panel .pie::after{
    width:39px !important;
    height:39px !important;
  }

  html body .hero .dx-clean-card-carousel .category-panel .chart-legend{
    top:43px !important;
    right:4px !important;
    width:94px !important;
  }

  html body .hero .dx-clean-card-carousel .prediction-panel .prediction-line{
    height:48px !important;
    bottom:8px !important;
  }

  html body .hero .dx-clean-card-carousel .map-panel .world-map{
    height:86px !important;
    bottom:8px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-prev,
  html body .hero .dx-clean-card-carousel .carousel-control-next{
    width:36px !important;
    height:36px !important;
    bottom:18px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-prev{right:74px !important;}
  html body .hero .dx-clean-card-carousel .carousel-control-next{right:24px !important;}

  html body .hero .dx-clean-card-carousel .carousel-indicators{
    bottom:24px !important;
    gap:10px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-indicators button{
    width:22px !important;
    height:5px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-indicators button.active{
    width:25px !important;
  }
}

@media(min-width:992px) and (max-width:1399px){
  html body .hero .row.align-items-center{
    column-gap:24px !important;
    grid-template-columns:minmax(510px,.85fr) minmax(780px,1.15fr) !important;
  }
}

/* V217: responsive slider redesign for tablet/mobile. */
@media(max-width:991px){
  html body .hero .dx-clean-card-carousel{
    width:100% !important;
    max-width:min(680px,calc(100vw - 32px)) !important;
    margin:28px auto 0 !important;
    padding:0 !important;
    filter:drop-shadow(0 18px 40px rgba(112,51,255,.12)) !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-inner{
    border-radius:20px !important;
    border:1px solid rgba(139,63,242,.18) !important;
    background:#fff !important;
    overflow:hidden !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-item{
    min-height:0 !important;
  }

  html body .hero .dx-clean-card-carousel .card-ui{
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    padding:24px 22px 90px !important;
    border:0 !important;
    border-radius:20px !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 90% 14%,rgba(164,96,255,.16) 0 120px,transparent 122px),
      linear-gradient(rgba(116,51,255,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(116,51,255,.045) 1px,transparent 1px),
      linear-gradient(135deg,#fff 0%,#fffcff 58%,#f5efff 100%) !important;
    background-size:100% 100%,34px 34px,34px 34px,100% 100% !important;
  }

  html body .hero .dx-clean-card-carousel .card-ui::after{
    right:18px !important;
    top:18px !important;
    width:86px !important;
    height:62px !important;
    opacity:.35 !important;
  }

  html body .hero .dx-clean-card-carousel .pill-head{
    max-width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:auto !important;
    padding:7px 16px 7px 8px !important;
    gap:10px !important;
    border-radius:999px !important;
    white-space:normal !important;
    font-size:12px !important;
    line-height:1.18 !important;
  }

  html body .hero .dx-clean-card-carousel .pill-head .ico{
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
    border-radius:12px !important;
    font-size:13px !important;
  }

  html body .hero .dx-clean-card-carousel .copy{
    width:100% !important;
    max-width:560px !important;
    margin:0 auto !important;
    text-align:left !important;
  }

  html body .hero .dx-clean-card-carousel .title{
    max-width:100% !important;
    margin:26px 0 12px !important;
    font-size:clamp(24px,5vw,34px) !important;
    line-height:1.14 !important;
    text-wrap:balance !important;
  }

  html body .hero .dx-clean-card-carousel .desc{
    max-width:100% !important;
    margin:0 0 20px !important;
    font-size:13px !important;
    line-height:1.62 !important;
  }

  html body .hero .dx-clean-card-carousel .chips{
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  html body .hero .dx-clean-card-carousel .chip{
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    height:auto !important;
    justify-content:center !important;
    padding:10px 12px !important;
    font-size:12px !important;
    line-height:1.1 !important;
  }

  html body .hero .dx-clean-card-carousel .visual{
    display:none !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-prev,
  html body .hero .dx-clean-card-carousel .carousel-control-next{
    width:40px !important;
    height:40px !important;
    top:auto !important;
    bottom:24px !important;
    border-radius:50% !important;
    z-index:12 !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-prev{
    left:auto !important;
    right:76px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-next{
    right:24px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-indicators{
    left:22px !important;
    right:auto !important;
    bottom:38px !important;
    width:auto !important;
    margin:0 !important;
    justify-content:flex-start !important;
    gap:8px !important;
    z-index:11 !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-indicators button{
    width:18px !important;
    height:5px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-indicators button.active{
    width:28px !important;
  }
}

@media(max-width:575px){
  html body .hero .dx-clean-card-carousel{
    max-width:calc(100vw - 28px) !important;
    margin-top:24px !important;
  }

  html body .hero .dx-clean-card-carousel .card-ui{
    padding:20px 16px 86px !important;
    border-radius:18px !important;
  }

  html body .hero .dx-clean-card-carousel .pill-head{
    width:100% !important;
    justify-content:center !important;
    font-size:11px !important;
  }

  html body .hero .dx-clean-card-carousel .copy{
    text-align:center !important;
  }

  html body .hero .dx-clean-card-carousel .title{
    margin-top:22px !important;
    font-size:clamp(22px,7vw,28px) !important;
  }

  html body .hero .dx-clean-card-carousel .desc{
    font-size:12.5px !important;
  }

  html body .hero .dx-clean-card-carousel .chips{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  html body .hero .dx-clean-card-carousel .chip{
    min-height:39px !important;
    padding:9px 8px !important;
    font-size:11px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-indicators{
    left:16px !important;
    bottom:34px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-prev,
  html body .hero .dx-clean-card-carousel .carousel-control-next{
    width:38px !important;
    height:38px !important;
    bottom:22px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-prev{
    right:66px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-next{
    right:18px !important;
  }
}

/* V218: keep full slider artwork visible in responsive mode by scaling the visual stage. */
@media(max-width:991px){
  html body .hero .dx-clean-card-carousel{
    --dx-slider-art-scale:.78;
  }

  html body .hero .dx-clean-card-carousel .card-ui{
    padding-bottom:96px !important;
  }

  html body .hero .dx-clean-card-carousel .visual{
    display:block !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:50% !important;
    width:520px !important;
    max-width:none !important;
    height:calc(360px * var(--dx-slider-art-scale)) !important;
    min-height:0 !important;
    margin:24px 0 0 !important;
    overflow:visible !important;
    transform:translateX(-50%) scale(var(--dx-slider-art-scale)) !important;
    transform-origin:top center !important;
    z-index:4 !important;
  }

  html body .hero .dx-clean-card-carousel .dash{
    width:430px !important;
    height:278px !important;
    margin:18px auto 0 !important;
    padding:24px 18px 18px 72px !important;
  }

  html body .hero .dx-clean-card-carousel .fl-user{
    left:14px !important;
    top:82px !important;
  }

  html body .hero .dx-clean-card-carousel .fl-ai{
    right:12px !important;
    top:0 !important;
  }

  html body .hero .dx-clean-card-carousel .flow{
    height:360px !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines{
    display:block !important;
    position:absolute !important;
    left:24px !important;
    top:16px !important;
    width:470px !important;
    height:330px !important;
    overflow:visible !important;
  }

  html body .hero .dx-clean-card-carousel .flow-card{
    min-width:132px !important;
    width:132px !important;
    height:56px !important;
  }

  html body .hero .dx-clean-card-carousel .lead{right:200px !important;top:12px !important;}
  html body .hero .dx-clean-card-carousel .quote{right:26px !important;top:78px !important;}
  html body .hero .dx-clean-card-carousel .approval{right:212px !important;top:150px !important;}
  html body .hero .dx-clean-card-carousel .invoice{right:108px !important;top:228px !important;}
  html body .hero .dx-clean-card-carousel .pay{right:8px !important;top:296px !important;}
  html body .hero .dx-clean-card-carousel .delivery{right:284px !important;bottom:12px !important;}
  html body .hero .dx-clean-card-carousel .report{right:136px !important;bottom:8px !important;}

  html body .hero .dx-clean-card-carousel .module-wrap{
    height:360px !important;
  }

  html body .hero .dx-clean-card-carousel .module-orbit{
    right:58px !important;
    top:38px !important;
    width:390px !important;
    height:278px !important;
  }

  html body .hero .dx-clean-card-carousel .module{
    width:102px !important;
    height:102px !important;
  }

  html body .hero .dx-clean-card-carousel .hub{right:196px !important;top:142px !important;width:128px !important;height:128px !important;}
  html body .hero .dx-clean-card-carousel .mod-health{right:208px !important;top:12px !important;}
  html body .hero .dx-clean-card-carousel .mod-school{right:24px !important;top:136px !important;}
  html body .hero .dx-clean-card-carousel .mod-crm{right:388px !important;top:136px !important;}
  html body .hero .dx-clean-card-carousel .mod-inv{right:278px !important;bottom:10px !important;}
  html body .hero .dx-clean-card-carousel .mod-mobile{right:116px !important;bottom:10px !important;}

  html body .hero .dx-clean-card-carousel .analytics{
    width:520px !important;
    height:350px !important;
    top:auto !important;
    right:auto !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .row{
    --bs-gutter-x:8px !important;
    --bs-gutter-y:8px !important;
  }

  html body .hero .dx-clean-card-carousel .kpi-box{
    height:66px !important;
  }

  html body .hero .dx-clean-card-carousel .bigchart{
    height:130px !important;
  }

  html body .hero .dx-clean-card-carousel .small-panel{
    height:118px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-prev,
  html body .hero .dx-clean-card-carousel .carousel-control-next{
    bottom:24px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-indicators{
    bottom:38px !important;
  }
}

@media(max-width:575px){
  html body .hero .dx-clean-card-carousel{
    --dx-slider-art-scale:.58;
  }

  html body .hero .dx-clean-card-carousel .card-ui{
    padding-bottom:86px !important;
  }

  html body .hero .dx-clean-card-carousel .visual{
    margin-top:20px !important;
    height:calc(360px * var(--dx-slider-art-scale)) !important;
  }

  html body .hero .dx-clean-card-carousel .title{
    font-size:clamp(20px,6.3vw,25px) !important;
  }

  html body .hero .dx-clean-card-carousel .desc{
    margin-bottom:16px !important;
  }
}

/* V219: keep purple title words the same size and weight as the black heading text. */
html body .hero .dx-clean-card-carousel .title > span{
  display:inline !important;
  font:inherit !important;
  font-size:inherit !important;
  line-height:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  color:var(--p) !important;
  -webkit-text-fill-color:var(--p) !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
}

@media(max-width:575px){
  html body .hero .dx-clean-card-carousel .carousel-control-prev{
    right:128px !important;
  }

  html body .hero .dx-clean-card-carousel .carousel-control-next{
    right:76px !important;
  }
}

/* V221: mobile uses the same desktop artboards, scaled once instead of re-positioned. */
@media(max-width:991px){
  html body .hero .dx-clean-card-carousel{
    --dx-slider-art-scale:.78;
  }

  html body .hero .dx-clean-card-carousel .visual{
    width:520px !important;
    height:424px !important;
    margin:24px 0 -92px !important;
    transform:translateX(-50%) scale(var(--dx-slider-art-scale)) !important;
    transform-origin:top center !important;
  }

  html body .hero .dx-clean-card-carousel .dash{
    width:83% !important;
    height:278px !important;
    margin:38px 28px 0 auto !important;
    padding:24px 18px 18px 74px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr 1.18fr !important;
    gap:11px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .stat{
    height:62px !important;
    padding:10px 11px !important;
    font-size:9px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .mini-chart{
    grid-column:span 2 !important;
    height:132px !important;
    padding:12px !important;
  }

  html body .hero .dx-clean-card-carousel .donut-panel{
    height:132px !important;
    padding:12px 8px !important;
  }

  html body .hero .dx-clean-card-carousel .fl-user{left:-28px !important;top:76px !important;}
  html body .hero .dx-clean-card-carousel .fl-ai{right:18px !important;top:-72px !important;}

  html body .hero .dx-clean-card-carousel .flow{
    top:auto !important;
    height:414px !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines{
    right:-2px !important;
    top:2px !important;
    width:470px !important;
    height:392px !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines .flow-path{
    fill:none !important;
    stroke-width:1.65 !important;
    stroke-linecap:round !important;
    stroke-dasharray:5 6 !important;
    opacity:.72 !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines .purple{
    stroke:#7b3cff !important;
    marker-end:url(#flowArrowPurple) !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines .orange{
    stroke:#ff8a1e !important;
    marker-end:url(#flowArrowOrange) !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines .pink{
    stroke:#ff3f8f !important;
    marker-end:url(#flowArrowPink) !important;
  }

  html body .hero .dx-clean-card-carousel .flow-lines circle{
    fill:#a473ff !important;
    filter:drop-shadow(0 0 5px rgba(116,51,255,.28)) !important;
  }

  html body .hero .dx-clean-card-carousel .flow-card{
    width:136px !important;
    min-width:136px !important;
    height:58px !important;
  }

  html body .hero .dx-clean-card-carousel .flow::before,
  html body .hero .dx-clean-card-carousel .flow::after{
    content:"" !important;
    position:absolute !important;
    top:383px !important;
    border-top:1.65px dashed #7b3cff !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  html body .hero .dx-clean-card-carousel .flow::before{
    left:112px !important;
    width:42px !important;
  }

  html body .hero .dx-clean-card-carousel .flow::after{
    left:282px !important;
    width:18px !important;
  }

  html body .hero .dx-clean-card-carousel .lead{right:270px !important;top:10px !important;}
  html body .hero .dx-clean-card-carousel .quote{right:94px !important;top:74px !important;}
  html body .hero .dx-clean-card-carousel .approval{right:270px !important;top:142px !important;color:var(--green) !important;background:#f9fffc !important;border-color:#bbf1d6 !important;}
  html body .hero .dx-clean-card-carousel .ai-approval{right:0 !important;top:184px !important;color:var(--p) !important;}
  html body .hero .dx-clean-card-carousel .invoice{right:206px !important;top:222px !important;color:var(--orange) !important;background:#fffaf5 !important;border-color:#ffd8bb !important;}
  html body .hero .dx-clean-card-carousel .pay{right:110px !important;top:292px !important;color:var(--pink) !important;background:#fff6fb !important;border-color:#ffd1e4 !important;}
  html body .hero .dx-clean-card-carousel .delivery{right:238px !important;bottom:0 !important;color:var(--p) !important;}
  html body .hero .dx-clean-card-carousel .report{right:88px !important;bottom:-4px !important;color:var(--p) !important;}

  html body .hero .dx-clean-card-carousel .delivery::before{
    content:"" !important;
    position:absolute !important;
    right:100% !important;
    top:50% !important;
    width:24px !important;
    border-top:1.65px dashed #7b3cff !important;
    transform:translateY(-50%) !important;
    pointer-events:none !important;
  }

  html body .hero .dx-clean-card-carousel .delivery::after{
    content:"" !important;
    position:absolute !important;
    left:100% !important;
    top:50% !important;
    width:26px !important;
    border-top:1.65px dashed #7b3cff !important;
    transform:translateY(-50%) !important;
    pointer-events:none !important;
  }

  html body .hero .dx-clean-card-carousel .module-wrap{
    top:auto !important;
    height:402px !important;
  }

  html body .hero .dx-clean-card-carousel .module-wrap::after{
    right:14px !important;
    top:6px !important;
  }

  html body .hero .dx-clean-card-carousel .module-orbit{
    right:54px !important;
    top:72px !important;
    width:400px !important;
    height:282px !important;
  }

  html body .hero .dx-clean-card-carousel .module{
    width:108px !important;
    height:108px !important;
  }

  html body .hero .dx-clean-card-carousel .hub{right:188px !important;top:166px !important;width:132px !important;height:132px !important;}
  html body .hero .dx-clean-card-carousel .mod-health{right:195px !important;top:0 !important;}
  html body .hero .dx-clean-card-carousel .mod-school{right:20px !important;top:142px !important;}
  html body .hero .dx-clean-card-carousel .mod-crm{right:400px !important;top:142px !important;}
  html body .hero .dx-clean-card-carousel .mod-inv{right:269px !important;bottom:-27px !important;}
  html body .hero .dx-clean-card-carousel .mod-mobile{right:106px !important;bottom:-27px !important;}

  html body .hero .dx-clean-card-carousel .analytics{
    width:520px !important;
    height:424px !important;
    top:auto !important;
    right:auto !important;
  }
}

@media(max-width:575px){
  html body .hero .dx-clean-card-carousel{
    --dx-slider-art-scale:.58;
  }

  html body .hero .dx-clean-card-carousel .title{
    font-size:clamp(18px,5.55vw,21px) !important;
    line-height:1.15 !important;
    margin-top:18px !important;
  }

  html body .hero .dx-clean-card-carousel .desc{
    font-size:11.5px !important;
    line-height:1.58 !important;
  }

  html body .hero .dx-clean-card-carousel .visual{
    height:424px !important;
    margin:56px 0 -214px !important;
  }

  html body .hero .dx-clean-card-carousel .fl-user{
    left:8px !important;
    top:46px !important;
  }

  html body .hero .dx-clean-card-carousel .flow{
    height:414px !important;
    margin-top:28px !important;
    margin-bottom:-136px !important;
  }

  html body .hero .dx-clean-card-carousel .module-wrap{
    height:402px !important;
    margin-top:28px !important;
    margin-bottom:-126px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics{
    height:500px !important;
    margin-bottom:-166px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .kpi-box{
    height:98px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .bigchart{
    height:250px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .small-panel{
    height:134px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .category-panel{
    display:grid !important;
    grid-template-columns:72px 1fr !important;
    grid-template-rows:auto 1fr !important;
    column-gap:10px !important;
    align-items:center !important;
    padding:12px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .category-panel strong{
    grid-column:1 / -1 !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .category-panel .pie{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
    width:64px !important;
    height:64px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .category-panel .chart-legend{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:center !important;
    justify-self:start !important;
    width:auto !important;
    gap:5px !important;
  }
}

/* V235: larger analytics KPI text on tablet and mobile. */
@media(max-width:991px){
  html body .hero .dx-clean-card-carousel .analytics .kpi-box{
    height:92px !important;
    padding:13px 12px !important;
    font-size:15px !important;
    line-height:1.16 !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .kpi-box b{
    font-size:18px !important;
    line-height:1.05 !important;
    margin-top:3px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .kpi-box small{
    font-size:12px !important;
    line-height:1.1 !important;
    margin-top:6px !important;
  }
}

@media(max-width:575px){
  html body .hero .dx-clean-card-carousel .analytics .kpi-box{
    height:98px !important;
    font-size:16px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .kpi-box b{
    font-size:19px !important;
  }

  html body .hero .dx-clean-card-carousel .analytics .kpi-box small{
    font-size:12.5px !important;
  }
}

/* V238: mobile workflow join and dashboard chart axis alignment. */
@media(max-width:991px){
  html body .hero .dx-clean-card-carousel .flow-mobile-join{
    display:block !important;
    marker-end:none !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .stat{
    height:82px !important;
    padding:14px 13px !important;
    font-size:12px !important;
    line-height:1.12 !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .stat b{
    display:block !important;
    font-size:15px !important;
    line-height:1.05 !important;
    margin-top:3px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .stat small{
    display:block !important;
    margin-top:7px !important;
    font-size:10px !important;
    line-height:1 !important;
  }

  html body .hero .dx-clean-card-carousel .dash .mini-chart .axis{
    position:absolute !important;
    left:16px !important;
    right:16px !important;
    bottom:7px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    color:#6d7691 !important;
    font-size:7px !important;
    line-height:1 !important;
    font-weight:850 !important;
    white-space:nowrap !important;
  }

  html body .hero .dx-clean-card-carousel .dash .mini-chart .axis span{
    display:block !important;
    flex:0 0 auto !important;
  }
}

@media(max-width:575px){
  html body .hero .dx-clean-card-carousel .dash-grid .stat{
    height:86px !important;
    padding:15px 13px !important;
    font-size:12.5px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .stat b{
    font-size:16px !important;
  }

  html body .hero .dx-clean-card-carousel .dash-grid .stat small{
    font-size:10.5px !important;
  }
}

/* V244: replay animation for opening slide and every carousel change. */
@property --dx-donut-progress{
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .card-ui{
  animation:dxHomeSlideOpen .72s cubic-bezier(.18,.86,.28,1) both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .pill-head{
  animation:dxHomeFadeUp .62s cubic-bezier(.18,.86,.28,1) .05s both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .copy .title{
  animation:dxHomeFadeUp .72s cubic-bezier(.18,.86,.28,1) .12s both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .copy .desc{
  animation:dxHomeFadeUp .72s cubic-bezier(.18,.86,.28,1) .22s both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .chips .chip{
  animation:dxHomeChipPop .54s cubic-bezier(.2,.9,.25,1.12) both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .chips .chip:nth-child(1){animation-delay:.30s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .chips .chip:nth-child(2){animation-delay:.38s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .chips .chip:nth-child(3){animation-delay:.46s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .chips .chip:nth-child(4){animation-delay:.54s !important;}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .visual,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .dash,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .analytics{
  animation:dxHomeVisualZoom .78s cubic-bezier(.18,.86,.28,1) .16s both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .side{
  animation:dxHomeSideIn .64s cubic-bezier(.18,.86,.28,1) .34s both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .float{
  animation:dxHomeFloatIn .68s cubic-bezier(.18,.86,.28,1.08) both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .fl-user{animation-delay:.50s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .fl-ai{animation-delay:.62s !important;}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .dash-grid .stat,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .analytics .kpi-box{
  animation:dxHomeMetricPop .56s cubic-bezier(.18,.86,.28,1.08) both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .dash-grid .stat:nth-child(1),
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .analytics .col-3:nth-child(1) .kpi-box{animation-delay:.42s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .dash-grid .stat:nth-child(2),
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .analytics .col-3:nth-child(2) .kpi-box{animation-delay:.50s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .dash-grid .stat:nth-child(3),
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .analytics .col-3:nth-child(3) .kpi-box{animation-delay:.58s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .analytics .col-3:nth-child(4) .kpi-box{animation-delay:.66s !important;}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .mini-chart,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .donut-panel,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .bigchart,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .small-panel{
  animation:dxHomePanelRise .64s cubic-bezier(.18,.86,.28,1) both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .mini-chart,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .bigchart{animation-delay:.72s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .donut-panel,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .category-panel{animation-delay:.84s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .prediction-panel{animation-delay:.92s !important;}
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .map-panel{animation-delay:1s !important;}

html body .hero .dx-clean-card-carousel .donut[data-count-label]::after,
html body .hero .dx-clean-card-carousel .pie[data-count-label]::after{
  content:attr(data-count-label) !important;
}

html body .hero .dx-clean-card-carousel .donut{
  background:conic-gradient(var(--p) 0 var(--dx-donut-progress,72%),#22c3bd var(--dx-donut-progress,72%) 100%) !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .donut,
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .pie{
  animation:dxHomeDonutIn .72s cubic-bezier(.18,.86,.28,1.08) .92s both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .mini-chart svg path[stroke],
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .bigchart svg path[stroke],
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .prediction-line path[stroke]{
  animation:dxHomeLineDraw .82s cubic-bezier(.35,.82,.28,1) .72s both !important;
  clip-path:inset(0 100% 0 0);
  transform-box:fill-box !important;
  transform-origin:left center !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .prediction-line path[stroke]{
  animation-delay:.92s !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .mini-chart svg path:not([stroke]),
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .bigchart svg path:not([stroke]),
html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .prediction-line path:not([stroke]){
  transform-box:fill-box !important;
  transform-origin:center bottom !important;
  animation:dxHomeAreaLift .95s cubic-bezier(.18,.86,.28,1) .84s both !important;
}

html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate .world-map{
  animation:dxHomeMapFocus .78s cubic-bezier(.18,.86,.28,1) 1.08s both !important;
}

@keyframes dxHomeSlideOpen{
  0%{opacity:.35;transform:translateY(24px) scale(.965);filter:blur(4px);}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}

@keyframes dxHomeFadeUp{
  0%{opacity:0;transform:translateY(20px);}
  100%{opacity:1;transform:translateY(0);}
}

@keyframes dxHomeChipPop{
  0%{opacity:0;transform:translateY(14px) scale(.88);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes dxHomeVisualZoom{
  0%{opacity:0;transform:translateY(26px) scale(.92);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes dxHomeSideIn{
  0%{opacity:0;transform:translateX(-18px) scale(.95);}
  100%{opacity:1;transform:translateX(0) scale(1);}
}

@keyframes dxHomeFloatIn{
  0%{opacity:0;transform:translateY(24px) scale(.86);}
  72%{opacity:1;transform:translateY(-4px) scale(1.035);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes dxHomeMetricPop{
  0%{opacity:0;transform:translateY(18px) scale(.88);}
  70%{opacity:1;transform:translateY(-3px) scale(1.025);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes dxHomePanelRise{
  0%{opacity:0;transform:translateY(18px) scale(.965);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes dxHomeDonutIn{
  0%{opacity:0;transform:scale(.72) rotate(-22deg);}
  72%{opacity:1;transform:scale(1.05) rotate(4deg);}
  100%{opacity:1;transform:scale(1) rotate(0);}
}

@keyframes dxHomeLineDraw{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(8px);}
  24%{opacity:1;}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0);}
}

@keyframes dxHomeAreaLift{
  0%{opacity:0;transform:scaleY(.05);}
  100%{opacity:1;transform:scaleY(1);}
}

@keyframes dxHomeMapFocus{
  0%{opacity:0;transform:scale(.88);filter:blur(5px) saturate(.8);}
  100%{opacity:1;transform:scale(1);filter:blur(0) saturate(1);}
}

@media(prefers-reduced-motion:reduce){
  html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate *,
  html body .hero .dx-clean-card-carousel .carousel-item.dx-slide-animate{
    animation:none !important;
  }
}