.services{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,1.5vw,7px)}
.service{position:relative;height:clamp(52px,15vw,62px);padding:5px 2px;border:1px solid rgba(255,255,255,.12);border-radius:clamp(12px,3.5vw,16px);background:linear-gradient(145deg,rgba(18,22,19,.96),rgba(5,7,6,.98));color:#fff;overflow:hidden;transform:translateZ(0);transition:transform .14s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease;will-change:transform}
.service span{font-size:clamp(16px,5vw,21px);line-height:1;filter:saturate(.8);transition:transform .14s ease,filter .16s ease}.service small{max-width:100%;overflow:hidden;color:#f3f6f4;font-size:clamp(7px,2.25vw,9px);font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.service i{position:absolute;top:4px;right:5px;width:13px;height:13px;border-radius:50%;background:var(--lime);color:#071004;font:900 9px/13px inherit;text-align:center;opacity:0;transform:scale(.55);transition:opacity .14s ease,transform .14s ease}
.service.active{border-color:var(--lime);background:linear-gradient(145deg,rgba(184,255,56,.12),rgba(8,13,7,.98));color:var(--lime);box-shadow:0 0 0 1px rgba(184,255,56,.15),0 0 16px rgba(184,255,56,.2)}.service.active span{filter:saturate(1.25) drop-shadow(0 0 5px rgba(184,255,56,.5));transform:translateY(-1px) scale(1.04)}.service.active i{opacity:1;transform:scale(1)}.service:active{transform:translateZ(0) scale(.93)}
@media(max-width:350px){.services{gap:3px}.service{height:49px;padding-inline:1px}.service small{font-size:6.8px}.service i{top:3px;right:3px;width:11px;height:11px;font-size:8px;line-height:11px}}@media(prefers-reduced-motion:reduce){.service,.service span,.service i{transition-duration:.01ms!important}}