/* ===========================================================
   Services
=========================================================== */

.services{

    min-height:85vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:120px 32px;

    position:relative;

    z-index:1;

}

.services-container{

    width:min(1000px,100%);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:28px;

}

.services-container > .trust-end{

    margin:-105px auto 48px;

}

.services-label{

    font-size:15px;

    letter-spacing:6px;

    opacity:.65;

}

.services-title{

    font-size:clamp(46px,6vw,72px);

    line-height:1.15;

    max-width:1200px;

}

.services-highlight{

    display:block;

    margin-top:12px;

    color:#ffffff;

    text-shadow:
        0 0 10px rgba(255,255,255,.18),
        0 0 22px rgba(170,200,255,.10);

}

/* ===========================================================
   Services Grid
=========================================================== */

.services-grid{

    margin-top:80px;

    width:100%;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}

.service{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:40px;

    border-radius:24px;

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

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

    transition:
        transform .45s cubic-bezier(.22,.8,.22,1),
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}



.service::before{

    content:"";

    position:absolute;

    inset:-35%;

    z-index:-1;

    background:radial-gradient(

        circle at 50% 15%,

        rgba(170,195,255,.11) 0%,

        rgba(170,195,255,.045) 30%,

        transparent 64%

    );

    opacity:0;

    transform:translateY(22px) scale(.92);

    transition:
        opacity .5s ease,
        transform .65s cubic-bezier(.22,.8,.22,1);

}




.service::after{

    content:"✦";

    position:absolute;

    top:24px;

    right:26px;

    font-size:13px;

    color:#EAF2FF;

    opacity:0;

    transform:
        translateY(8px)
        scale(.65)
        rotate(-18deg);

    text-shadow:
        0 0 8px rgba(205,220,255,.55),
        0 0 20px rgba(150,180,255,.22);

    transition:
        opacity .4s ease,
        transform .55s cubic-bezier(.22,.8,.22,1);

}




.service:hover{

    transform:translateY(-10px);

    border-color:rgba(210,225,255,.22);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 26px 80px rgba(0,0,0,.40),
        0 0 45px rgba(125,160,230,.055);

}

.service:hover::before{

    opacity:1;

    transform:translateY(0) scale(1);

}

.service:hover::after{

    opacity:.82;

    transform:
        translateY(0)
        scale(1)
        rotate(0);

}

.service-number{

    transition:
        color .4s ease,
        opacity .4s ease,
        transform .5s cubic-bezier(.22,.8,.22,1);

}

.service:hover .service-number{

    transform:translateY(-5px);

    color:rgba(220,230,255,.30);

}

.service-name{

    transition:
        color .4s ease,
        transform .45s ease;

}

.service:hover .service-name{

    color:#F7F9FF;

    transform:translateY(-2px);

}



.service:hover .service-link{

    color:#EAF2FF;

    transform:translateX(5px);

}

.service-description{

    font-size:18px;

    line-height:1.8;

    opacity:.72;

}

/* ===========================================================
   Tablet
=========================================================== */

.service-link{

    margin-top:auto;

    display:inline-flex;

    color:#fff;

    text-decoration:none;

    opacity:.72;

    transition:.3s;

}

.service-link:hover{

    opacity:1;

    transform:translateX(6px);

}


/* ===========================================================
   Tablet
=========================================================== */

@media (min-width:768px) and (max-width:1024px){

    .services{

        min-height:auto;

        padding:100px 28px;

    }


    .services-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:20px;

        margin-top:60px;

    }


    .service{

        min-height:300px;

        gap:16px;

        padding:28px;

        border-radius:22px;

    }


    .service:last-child{

        grid-column:1 / -1;

        width:calc((100% - 20px) / 2);

        justify-self:center;

    }


    .service-number{

        font-size:34px;

    }


    .service-name{

        font-size:24px;

    }


    .service-description{

        font-size:16px;

        line-height:1.65;

    }

}

/* ===========================================================
   Mobile
=========================================================== */

@media (max-width:768px){

    .services-container > .trust-end{

        margin-top:-97px;

        margin-bottom:24px;

    }

}

@media (max-width:767px){

    .services-container > .trust-end{

        margin-top:-57px;

    }

    .services{

        padding:90px 22px;

    }

    .services-title{

        display:block;

        font-size:clamp(34px,8.5vw,40px);

        line-height:1.12;

        text-wrap:wrap;

    }

    .services-title > span{

        display:inline;

    }

    .services-title > .services-highlight{

        display:block;

    }

    .services-grid{

        gap:14px;

        grid-template-columns:1fr;

        margin-top:30px;

    }

    .service{

        min-height:auto;

        width:calc(100% - 16px);

        max-width:360px;

        justify-self:center;

        padding:18px;

        gap:8px;

        border-radius:16px;

    }

    .service:hover{

        transform:none;

    }

    .service-number{

        font-size:22px;

        line-height:1;

        opacity:.42;

        letter-spacing:.08em;

    }

    .service-name{

        font-size:20px;

        line-height:1.18;

    }

    .service-description{

        max-width:290px;

        margin-inline:auto;

        font-size:15px;

        line-height:1.5;

    }

    .service:last-child{

        grid-column:auto;

    }

    .service-link{

    position:relative;

    margin-top:2px;

    align-self:center;

    font-size:15px;

    line-height:1.4;

    padding:2px 0;

    }

    .service-link::before{

        content:"";

        position:absolute;

        top:50%;

        left:50%;

        width:calc(100% + 24px);

        height:44px;

        transform:translate(-50%,-50%);

    }

}