/*========================*/

.services{

padding:140px 5%;

position:relative;

overflow:hidden;

}

/*========================*/

.services::before{

content:"";

position:absolute;

width:900px;

height:900px;

background:radial-gradient(circle,#29cfff33,transparent 70%);

left:-300px;

top:-300px;

filter:blur(60px);

pointer-events:none;

}

.services-header{
    max-width:750px;
    margin:auto;
    text-align:center;
    margin-bottom:290px; /* antes 90px */
    max-height: 100vh;
}

.badge{

display:inline-flex;

padding:12px 22px;

border-radius:999px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(30px);

border:1px solid rgba(255,255,255,.15);

color:#9defff;

margin-bottom:25px;

}

.services-header h2{

font-size:clamp(2.8rem,7vw,5rem);

line-height:1;

color:white;

margin-bottom:25px;

font-weight:800;

letter-spacing:-2px;

}

.services-header span{

background:linear-gradient(90deg,#ffffff,#76deff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.services-header p{

font-size:1.15rem;

line-height:1.9;

color:rgba(255,255,255,.7);

}

/*========================*/

.services-grid{

display:grid;

grid-template-columns:1fr;

gap:25px;

max-width:1300px;

margin:auto;

}

/*========================*/

.service{

position:relative;

padding: 20px;

overflow:hidden;

border-radius:32px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(24px);

border:1px solid rgba(255,255,255,.12);

transition:.5s;

}

.service::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

145deg,

rgba(255,255,255,.10),

transparent 35%

);

pointer-events:none;

}

.service:hover{

transform:translateY(-12px);

border-color:#56dfff;

box-shadow:

0 25px 80px rgba(0,180,255,.18);

}

/*========================*/
.featured{

    min-height:520px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:45px;

}

.light{

position:absolute;

width:350px;

height:350px;

background:#4ddfff;

border-radius:50%;

filter:blur(100px);

top:-120px;

right:-120px;

opacity:.35;

animation:moveLight 8s ease infinite;

}

@keyframes moveLight{

50%{

transform:translate(-40px,40px);

}

}

/*========================*/

.service-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}

.number{

font-size:4rem;

font-weight:800;

color:rgba(255,255,255,.06);

}

.icon{

width:78px;

height:78px;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

border-radius:24px;

background:rgba(255,255,255,.10);

backdrop-filter:blur(20px);

box-shadow:

0 0 30px rgba(0,200,255,.25);

}

.service h3{

font-size:2rem;

margin-bottom:20px;

color:white;

}

.service p{

color:rgba(255,255,255,.72);

line-height:1.9;

}

.service a{

margin-top:35px;

display:inline-flex;

text-decoration:none;

color:#86e8ff;

font-weight:600;

transition:.35s;

}

.service:hover a{

transform:translateX(8px);

}

/*========================*/

@media(min-width:900px){

.services-grid{

grid-template-columns:

1.4fr

1fr

1fr;

grid-auto-rows:260px;

}

.featured{

grid-row:span 2;

}

}