.services-section{
position:relative;
padding:120px 0;
background:
radial-gradient(circle at 12% 0%, rgba(95,201,223,.12), transparent 18%),
radial-gradient(circle at 88% 14%, rgba(17,143,166,.10), transparent 20%);
overflow:hidden;
}

.services-section::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
radial-gradient(circle at 22% 16%, rgba(95,201,223,.10), transparent 20%);
background-size:56px 56px, 56px 56px, auto;
mask-image:none;
opacity:0;
pointer-events:none;
}

.services-shell{
position:relative;
z-index:1;
min-width:0;
}

.services-heading{
max-width:720px;
margin:0 auto 64px;
text-align:center;
}

.services-kicker{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 16px;
margin-bottom:18px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(95,201,223,.16);
color:#d7f6fb;
font-size:14px;
}

.services-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#78e4f3;
box-shadow:0 0 12px rgba(120,228,243,.9);
}

.services-heading .section-title{
margin:0 0 16px;
font-size:42px;
font-weight:700;
line-height:1.2;
color:#f6fdff;
text-shadow:0 8px 28px rgba(0,0,0,.16);
}

.services-divider{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:0 0 18px;
}

.services-divider-line{
width:150px;
height:4px;
border-radius:999px;
background:linear-gradient(90deg, #1da6bf, #83e6f2, #1da6bf);
box-shadow:0 0 14px rgba(29,166,191,.34);
}

.services-divider-dot{
width:9px;
height:9px;
border-radius:50%;
background:#71dbe9;
box-shadow:0 0 12px rgba(113,219,233,.6);
}

.services-heading .section-text{
margin:0;
font-size:17px;
line-height:1.9;
color:rgba(232,244,247,.82);
}

.services-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:28px;
min-width:0;
}

.service-card{
position:relative;
display:flex;
flex-direction:column;
min-height:320px;
padding:30px;
border-radius:30px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.10);
box-shadow:
0 1px 0 rgba(255,255,255,.12) inset,
0 24px 60px rgba(0,0,0,.16);
backdrop-filter:blur(12px);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
overflow:hidden;
min-width:0;
}

.service-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:linear-gradient(90deg, #26bdd8, #97f3ff, #26bdd8);
box-shadow:0 0 14px rgba(38,189,216,.42);
}

.service-card::after{
content:"";
position:absolute;
top:0;
left:-24%;
width:24%;
height:2px;
background:linear-gradient(90deg, rgba(41,183,208,0), rgba(210,252,255,.98), rgba(41,183,208,0));
box-shadow:0 0 10px rgba(151,243,255,.58);
border-radius:0;
filter:blur(.5px);
opacity:1;
animation:serviceBeam 3.4s linear infinite;
pointer-events:none;
}

.service-card:hover{
transform:translateY(-8px);
border-color:rgba(17,143,166,.16);
box-shadow:
0 1px 0 rgba(255,255,255,.14) inset,
0 30px 70px rgba(0,0,0,.22);
}

.service-card:hover::after{
animation-duration:1.6s;
}

.service-card-featured{
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border-color:rgba(255,255,255,.10);
box-shadow:
0 1px 0 rgba(255,255,255,.12) inset,
0 24px 60px rgba(0,0,0,.16);
}

.service-card-featured::before{
background:linear-gradient(90deg, #26bdd8, #97f3ff, #26bdd8);
box-shadow:0 0 14px rgba(38,189,216,.42);
}

.service-card-featured::after{
background:linear-gradient(90deg, rgba(41,183,208,0), rgba(185,248,255,1), rgba(41,183,208,0));
box-shadow:0 0 18px rgba(151,243,255,.95);
opacity:1;
}

.service-card-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
margin-bottom:28px;
}

.service-index{
font-size:22px;
font-weight:800;
line-height:1;
color:rgba(255,255,255,.22);
}

.service-card-featured .service-index{
color:rgba(255,255,255,.3);
}

.service-icon-wrap{
display:flex;
align-items:center;
justify-content:center;
width:76px;
height:76px;
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.service-card-featured .service-icon-wrap{
background:linear-gradient(180deg, rgba(17,143,166,.08), rgba(95,201,223,.04));
border-color:rgba(17,143,166,.08);
box-shadow:0 10px 30px rgba(17,143,166,.08);
}

.service-icon{
width:34px;
height:34px;
color:#1598b0;
stroke-width:1.8;
}

.service-card-featured .service-icon{
color:#1598b0;
}

.service-icon path,
.service-icon line,
.service-icon circle,
.service-icon rect,
.service-icon polyline{
stroke-dasharray:140;
stroke-dashoffset:140;
animation:serviceIconDraw 4.8s ease-in-out infinite;
}

.service-icon-wrap{
animation:serviceIconFloat 4.6s ease-in-out infinite;
}

.service-card:nth-child(2) .service-icon-wrap{
animation-delay:.3s;
}

.service-card:nth-child(3) .service-icon-wrap{
animation-delay:.6s;
}

.service-card:nth-child(4) .service-icon-wrap{
animation-delay:.9s;
}

.service-card:nth-child(5) .service-icon-wrap{
animation-delay:1.2s;
}

.service-card:nth-child(6) .service-icon-wrap{
animation-delay:1.5s;
}

.service-title{
margin:0 0 14px;
font-size:22px;
font-weight:700;
line-height:1.35;
color:#fff;
overflow-wrap:anywhere;
}

.service-card-featured .service-title{
color:#f7fdff;
}

.service-desc{
margin:0 0 28px;
font-size:15px;
line-height:2;
color:rgba(232,244,247,.72);
}

.service-card-featured .service-desc{
color:rgba(232,244,247,.8);
}

.service-meta{
margin-top:auto;
display:flex;
align-items:center;
justify-content:flex-start;
gap:14px;
flex-wrap:wrap;
}

.service-chip{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
color:#d9f7fb;
font-size:13px;
font-weight:700;
}

.service-card-featured .service-chip{
background:rgba(95,201,223,.1);
border-color:rgba(95,201,223,.16);
color:#eefcff;
}

@keyframes serviceBeam{
from{
transform:translateX(0);
}
to{
transform:translateX(520%);
}
}

@keyframes serviceIconDraw{
0%{
stroke-dashoffset:140;
opacity:.45;
}
35%{
stroke-dashoffset:0;
opacity:1;
}
70%{
stroke-dashoffset:0;
opacity:1;
}
100%{
stroke-dashoffset:140;
opacity:.45;
}
}

@keyframes serviceIconFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-5px);
}
}

@media (max-width: 1100px){
.services-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 900px){
.services-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 767px){
.services-section{
padding:88px 0;
}

.services-heading{
margin-bottom:42px;
}

.section-title{
font-size:32px;
}

.services-grid{
grid-template-columns:1fr;
gap:20px;
}

.service-card{
min-height:auto;
padding:24px;
border-radius:24px;
}

.service-icon-wrap{
width:68px;
height:68px;
}
}
