ul.services{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:860px){ul.services{grid-template-columns:repeat(3,1fr);gap:24px}}
ul.services>li{position:relative;overflow:hidden;border-radius:28px;background:#fff;aspect-ratio:4/5;min-height:420px;box-shadow:0 18px 40px rgba(13,14,19,.08);transition:transform .5s cubic-bezier(.2,1.3,.3,1),box-shadow .3s}
@media (min-width:860px){ul.services>li{aspect-ratio:3/4}}
@media (hover:hover){ul.services>li:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(13,14,19,.12)}}
ul.services>li>a{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;padding:28px 20px 20px;border-bottom:0}
ul.services>li strong{font-size:min(7.2vw,2.2rem);margin-bottom:8px}
ul.services>li span{font-size:1rem;line-height:1.4;max-width:30ch}
ul.services>li .demo{flex:1 1 auto;width:100%;height:auto;margin:0;padding:12px 0 0;align-items:center;justify-content:center;transform:scale(1.3)}
ul.services>li .demo--chat{width:min(80%,260px);margin:0 auto;align-content:center;transform:scale(1.1)}
ul.services>li .demo--cards .pc{left:calc(50% - 26px);top:calc(50% - 37px)}
ul.services>li .demo--chat .b1{background:#EDEFF2}
/* picture cards: the picture IS the card (owner rule, memory 12). It fills the card edge to edge inside its rounded corners. No gradient, no shadow, black text (owner, 2026-10-11: the pictures are light, so the text stays black). */
ul.services>li .svc__img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;object-position:center top;background:#E4E6EB}
ul.services>li:has(.svc__img)>a{justify-content:flex-end;padding:24px 22px 28px;background:none}
ul.services>li:has(.svc__img) strong,ul.services>li:has(.svc__img) span{position:relative;z-index:2;color:#0D0E13;text-shadow:none}