.services-intro{max-width:650px;margin-top:20px;color:#a9bdd0;font-size:18px;line-height:1.65}
.services{font-family:"Segoe UI Variable","Aptos Display","Inter","Segoe UI",sans-serif}
.section-heading h2{font-weight:780;letter-spacing:-.055em}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-grid article{min-height:330px;display:flex;flex-direction:column;position:relative;overflow:hidden;background-color:#071522;background-image:linear-gradient(180deg,rgba(3,11,22,.48) 0%,rgba(3,12,24,.88) 47%,rgba(4,13,25,.98) 100%),url('../service-background-sprite.png');background-repeat:no-repeat;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.service-grid article:nth-child(1){background-size:100% 100%,400% 200%;background-position:0 0,0 0}
.service-grid article:nth-child(2){background-size:100% 100%,400% 200%;background-position:0 0,33.333% 0}
.service-grid article:nth-child(3){background-size:100% 100%,400% 200%;background-position:0 0,66.666% 0}
.service-grid article:nth-child(4){background-size:100% 100%,400% 200%;background-position:0 0,100% 0}
.service-grid article:nth-child(5){background-size:100% 100%,400% 200%;background-position:0 0,0 100%}
.service-grid article:nth-child(6){background-size:100% 100%,400% 200%;background-position:0 0,33.333% 100%}
.service-grid article:nth-child(7){background-size:100% 100%,400% 200%;background-position:0 0,66.666% 100%}
.service-grid article:nth-child(8){background-size:100% 100%,400% 200%;background-position:0 0,100% 100%}
.service-grid article:hover{transform:translateY(-7px) scale(1.01);border-color:#54cfff;box-shadow:0 28px 70px #000b,0 0 35px #1c72d955}
.service-grid article h3{margin:20px 0 12px;line-height:1.12;font-size:25px;font-weight:760;letter-spacing:-.025em;background:linear-gradient(90deg,#fff,#cce7ff 65%,#d7c8ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.service-grid article>p{margin:0;color:#e2edf6;font-size:16px;line-height:1.58;font-weight:520;text-shadow:0 2px 12px #000}
.service-highlight{position:relative;padding:13px 14px 13px 17px;border-left:3px solid #59ccff;border-radius:0 9px 9px 0;background:linear-gradient(90deg,rgba(13,73,122,.72),rgba(25,27,70,.48));box-shadow:0 8px 26px #0005,inset 0 1px #ffffff10;backdrop-filter:blur(7px)}
.service-top{display:flex;align-items:center;gap:10px}
.service-top>svg{width:22px}
.service-top>span{padding:6px 10px;border:1px solid #4c95c977;border-radius:999px;background:rgba(4,27,50,.72);color:#8dddff;font-size:10px;font-weight:850;letter-spacing:.14em;box-shadow:0 0 18px #1688ff22}
.service-top>.service-emoji{margin-left:auto}
.service-emoji{font-size:24px;filter:drop-shadow(0 0 10px #1688ff88)}
.service-grid article>small{display:block;margin-top:auto;padding:14px 15px;border:1px solid #52608a88;border-radius:10px;background:linear-gradient(135deg,rgba(10,23,45,.9),rgba(34,17,65,.78));backdrop-filter:blur(9px);color:#b9cce0;font-size:13px;line-height:1.55}
.service-grid article>small strong{display:block;margin-bottom:6px;color:#a8cfff;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.coverage{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.coverage>div{display:flex;align-items:center;gap:18px;min-height:180px;padding:28px;border:1px solid #315774;border-radius:14px;background:linear-gradient(90deg,rgba(2,12,25,.96),rgba(4,18,37,.67)),url('../erp-server-network-background.png') center/cover;box-shadow:0 18px 50px #0008,inset 0 1px #ffffff0d;overflow:hidden}
.coverage>div:first-child{background-image:linear-gradient(90deg,rgba(2,10,23,.98) 0%,rgba(3,15,31,.82) 52%,rgba(3,14,29,.38) 100%),url('../attendance-mini-map.png');background-position:center;background-size:cover;border-color:#268dc288}
.coverage>div>span{font-size:34px;filter:drop-shadow(0 0 12px #1688ff77)}
.coverage p{margin:0;color:#c8d9e7;line-height:1.55;text-shadow:0 2px 15px #000}
.coverage strong{display:block;margin-bottom:4px;color:#f5f9ff;font-size:17px}
.services-compact{padding-top:70px}
@media(max-width:900px){.coverage{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.service-grid{grid-template-columns:1fr}.coverage>div{align-items:flex-start;padding:20px}.services-intro{font-size:16px}}