/* ==========================================================
   INTEGRATIONS
========================================================== */

.integrations{
    position:relative;
    padding:140px 0;
    overflow:hidden;
}

.integrations::before{
    content:"";
    position:absolute;
    inset:-250px;
    background:
        radial-gradient(circle at 20% 20%,rgba(108,99,255,.08),transparent 40%),
        radial-gradient(circle at 80% 80%,rgba(37,99,235,.08),transparent 40%);
    z-index:-1;
}

.integrations .container{
    max-width:1280px;
    margin:auto;
    padding:0 30px;
}

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

.integrations__header{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:80px;

}

.integrations__subtitle{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#EEF3FF;

    color:#2563EB;

    font-weight:700;

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.12em;

}

.integrations__title{

    margin-top:22px;

    font-size:3.2rem;

    line-height:1.1;

    color:#111827;

    font-weight:800;

}

.integrations__description{

    margin-top:22px;

    color:#64748B;

    font-size:1.1rem;

    line-height:1.9;

}

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

.integrations__grid{

    display:grid;

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

    gap:28px;

}

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

.integration{

    background:#fff;

    border-radius:24px;

    padding:34px;

    border:1px solid rgba(37,99,235,.08);

    transition:.35s;

    box-shadow:

        0 25px 60px rgba(15,23,42,.06);

}

.integration:hover{

    transform:translateY(-10px);

    border-color:#6C63FF;

    box-shadow:

        0 45px 80px rgba(108,99,255,.15);

}

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

.integration__icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    background:linear-gradient(135deg,#6C63FF,#2563EB);

}

.integration__icon img{

    width:34px;

    height:34px;

}

.integration h3{

    font-size:1.35rem;

    color:#111827;

    margin-bottom:12px;

}

.integration p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:18px;

}

.integration span{

    display:inline-block;

    padding:7px 14px;

    border-radius:999px;

    background:#EEF3FF;

    color:#2563EB;

    font-size:.78rem;

    font-weight:700;

}

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

.integrations__footer{

    margin-top:90px;

    text-align:center;

}

.integrations__footer p{

    color:#64748B;

    font-size:1rem;

    margin-bottom:28px;

}

.integrations__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    background:linear-gradient(135deg,#6C63FF,#2563EB);

    transition:.35s;

    box-shadow:

        0 25px 50px rgba(108,99,255,.25);

}

.integrations__button:hover{

    transform:translateY(-4px);

    box-shadow:

        0 35px 70px rgba(108,99,255,.35);

}

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

@media(max-width:1100px){

.integrations__grid{

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

}

}

@media(max-width:700px){

.integrations{

padding:90px 0;

}

.integrations__title{

font-size:2.3rem;

}

.integrations__grid{

grid-template-columns:1fr;

}

.integration{

padding:28px;

}

}