/* Digital transformation services — Figma 419:2465. */
.solutions-section{--solution-width:345px;--solution-height:381px;--solution-offset:66px;--solution-gap:21px;padding:110px 0 120px;background:var(--blue-soft);overflow:hidden}
.solutions-heading{display:flex;flex-direction:column;align-items:center;gap:17px}
.service-marks{display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,6vw,60px);width:100%;margin:0 0 30px;padding:0;list-style:none}
.service-marks li{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.01em;color:#3A6DC0;text-align:center;white-space:nowrap}
.service-mark-icon{display:flex;align-items:center;justify-content:center;width:45.6px;height:45.6px;color:var(--blue)}
.service-mark-icon svg{width:100%;height:100%;display:block}
.solutions-heading .eyebrow{color:var(--blue);margin:0;font:600 12px/1.4 Inter,var(--font);letter-spacing:1.6px}
.solutions-heading h2{font-size:52px;line-height:1.32;font-weight:600;letter-spacing:-1.1px;color:#151a21}
.solutions-heading>p:not(.eyebrow){margin:0;font-size:20px;line-height:1.7;font-weight:400;color:#6b7280}
.solutions-body{margin-top:90px}
.solutions-track{display:flex;gap:var(--solution-gap);align-items:flex-start;width:100%;height:calc(var(--solution-height) + var(--solution-offset));overflow:auto hidden;scrollbar-width:none;scroll-behavior:auto;overscroll-behavior-x:contain;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.solutions-track::-webkit-scrollbar{display:none}.solutions-track.is-dragging{cursor:grabbing}
.solution-card{position:relative;flex:0 0 var(--solution-width);height:var(--solution-height);border-radius:18px;overflow:hidden;background:#fff;box-shadow:9.284px 9.284px 27.853px #00000003;color:#fff;isolation:isolate}
.solution-metaverse,.solution-factory,.solution-uxbx{margin-top:var(--solution-offset)}
.solutions-track.has-motion .solution-card{margin-top:0;transform:translateY(var(--solution-y,0px))}
.solutions-track.has-motion .solution-card>.solution-image,.solutions-track.has-motion .solution-image-crop{transform:scale(var(--solution-zoom,1));transform-origin:center}
.solution-card>.solution-image,.solution-image-crop{scale:1;transition:scale .6s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover) and (pointer:fine){.solution-card:hover>.solution-image,.solution-card:hover>.solution-image-crop{scale:1.2}}
.solution-image,.solution-image-crop,.solution-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.solution-image{object-fit:cover;object-position:center bottom;max-width:none}
.solution-metaverse .solution-image,.solution-chatbot .solution-image,.solution-cloud .solution-image{object-fit:fill}
.solution-ai .solution-image{width:103.26%;height:101.38%;left:-2.17%;object-position:center}
.solution-uxbx .solution-image{width:109%;left:-5.06%;object-position:center}
.solution-factory .solution-image-crop{left:-1.3%;width:101.1%;height:101%}
.solution-factory .solution-image{inset:auto;left:-120.51%;top:-37.84%;width:300%;height:170.37%;object-fit:fill}
.solution-overlay{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.72) 68%,#101010 100%)}
/* Every service card shares the same neutral black gradient. */
.solution-icon{position:absolute;right:22.5px;top:22.5px;width:76.5px;height:82.5px;pointer-events:none}
.solution-copy{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;gap:12px;padding:0 33px 51px;pointer-events:none}
.solution-copy h3{font-size:22.282px;font-weight:800;line-height:25.068px;letter-spacing:0;color:#fff}
.solution-copy p{font-size:16.712px;font-weight:600;line-height:27.853px;letter-spacing:-.025em;word-break:keep-all;color:#fff}
.solutions-footer{position:relative;display:flex;align-items:center;justify-content:center;margin-top:90px;min-height:52px}
.solutions-cta{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:52px;padding:10px 18px 13px;border-radius:99px;background:var(--blue);color:white;font-size:18px;font-weight:600;line-height:24px;transition:background .2s}
.solutions-cta img{width:20px;height:20px;flex:none}.solutions-cta:hover{background:var(--blue-hover)}
.solutions-nav{position:absolute;right:var(--gutter);display:flex;align-items:center;gap:12px}
.solutions-nav button{display:grid;place-items:center;flex:none;width:52px;height:52px;background:#fff;color:#000;border-radius:50%;padding:0;transition:background .2s}
.solutions-nav button:hover{background:#f8fafc}.solutions-nav img{width:26px;height:26px;filter:brightness(0)}.solutions-prev img{transform:rotate(180deg)}
.solutions-nav .solutions-pause{width:32px;height:32px;border:1px solid #368ff650;background:transparent;color:var(--blue);font:500 12px Inter,var(--font)}.solutions-nav .solutions-pause:hover{background:#368ff612}
@media(max-width:1100px){.solutions-section{padding-block:90px}.solutions-heading h2{font-size:40px}.solutions-heading>p:not(.eyebrow){font-size:18px}.solutions-body{margin-top:64px}.solutions-footer{margin-top:64px}}
@media(max-width:768px){.solutions-section{--solution-width:300px;--solution-height:366px;--solution-offset:40px;--solution-gap:16px;padding-block:72px}.solutions-heading{gap:14px}.solutions-heading h2{font-size:32px;line-height:1.38;letter-spacing:-.7px;max-width:450px;word-break:keep-all}.solutions-heading>p:not(.eyebrow){font-size:16px;max-width:370px;word-break:keep-all}.solutions-body{margin-top:48px}.solution-icon{width:66px;height:71px;top:20px;right:20px}.solution-copy{padding:0 26px 36px;gap:12px}.solution-copy h3{font-size:21px;line-height:1.3}.solution-copy p{font-size:15px;line-height:1.7;letter-spacing:-.03em}.solutions-footer{margin-top:44px;flex-wrap:wrap;gap:28px}.solutions-cta{font-size:16px;min-height:48px;gap:16px}.solutions-nav{position:static;justify-content:center;flex-basis:100%}.solutions-nav button{width:46px;height:46px}.solutions-nav .solutions-pause{width:32px;height:32px}}
@media(max-width:360px){.solutions-section{--solution-width:260px;--solution-height:366px}.solutions-heading h2{font-size:28px}.solution-copy{padding-inline:22px}.solution-copy p{font-size:14px}.solution-copy h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.solutions-cta,.solutions-nav button,.solution-card>.solution-image,.solution-image-crop{transition:none}}
