.service-showcase{padding:24px 24px 0;scroll-margin-top:24px}
.service-showcase__heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.service-panels{display:flex;min-height:560px;height:min(70vh,680px);gap:2px}
.service-panel{position:relative;isolation:isolate;display:flex;align-items:flex-end;flex:1 1 0;min-width:0;overflow:hidden;color:#fff;text-decoration:none;background:#102743;transition:flex-grow .65s cubic-bezier(.22,1,.36,1)}
.service-panel img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.service-panel--systems img{object-position:70% center}
.service-panel--web img{object-position:52% 45%}
.service-panel--chatbots img{object-position:65% center}
.service-panel--combo img{object-position:60% center}
.service-panel::before,.service-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.service-panel::before{background:linear-gradient(180deg,#06182f08 10%,#06182f55 40%,#041326f2 100%)}
.service-panel::after{background:#06182f42;transition:opacity .5s ease}
.service-panel__content{width:100%;padding:32px 28px}
.service-panel h3{font-size:clamp(26px,2.5vw,40px);font-weight:500;line-height:1.12;letter-spacing:-1px;max-width:350px;margin:0;text-wrap:balance}
.service-panel__description{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s ease,opacity .35s ease}
.service-panel__description>div{overflow:hidden}
.service-panel__description p{padding-top:22px;max-width:340px;font-size:16px;line-height:1.65;color:#e0eaf6;margin:0}
.service-panel__link{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:14px;font-weight:500;line-height:1.5}
.service-panel__link span{color:#a8c8ff;font-size:23px;transition:transform .3s ease}
.service-panel:focus-visible{outline:3px solid #a8c8ff;outline-offset:-5px}
.service-panel:focus-visible::after{opacity:0}
.service-panel:focus-visible .service-panel__description{grid-template-rows:1fr;opacity:1}
@media(min-width:1001px){
  .service-panel:focus-visible{flex-grow:2.5}
  @media(hover:hover) and (pointer:fine){
    .service-panel:hover{flex-grow:2.5}
    .service-panel:hover::after{opacity:0}
    .service-panel:hover img{transform:scale(1.035)}
    .service-panel:hover .service-panel__description{grid-template-rows:1fr;opacity:1}
    .service-panel:hover .service-panel__link span{transform:translate(3px,-3px)}
  }
}
@media(max-width:1000px),(hover:none){
  .service-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;min-height:0}
  .service-panel{min-height:440px}
  .service-panel__description{grid-template-rows:1fr;opacity:1}
  .service-panel::after{opacity:0}
  .service-panel h3{font-size:32px}
}
@media(max-width:600px){
  .service-showcase{padding:12px 12px 0;scroll-margin-top:12px}
  .service-panels{grid-template-columns:1fr;gap:12px}
  .service-panel{min-height:440px}
  .service-panel__content{padding:28px}
  .service-panel__description p{font-size:15px;padding-top:16px}
  .service-panel__link{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){
  .service-panel,.service-panel img,.service-panel::after,.service-panel__description,.service-panel__link span{transition:none}
  .service-panel:hover img{transform:none}
}