.integrations{
    position:relative;
    margin-top:-1px;
    overflow:hidden;
    background:#fff
}

/* Mantem o titulo de integrações na mesma escala e familia das
   chamadas principais da LP. */
.integrations .section-heading h2{
    font-family:"Plus Jakarta Sans","Space Grotesk",Nunito,sans-serif;
    font-size:clamp(30px,3.4vw,46px);
    font-weight:500;
    line-height:1.22;
    letter-spacing:-.02em;
    color:var(--purple-dark);
}

.integrations .section-heading h2 em{
    display:block;
    color:#5932c1;
    font-style:normal;
}
.integration-map{
    position:relative;
    height:430px;
    margin-top:15px
}
.map-glow{
    position:absolute;
    inset:14% 10%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(137,103,219,.25),transparent 67%);
    filter:blur(18px)
}
.integration-map:before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:70%;
    height:1px;
    background:linear-gradient(90deg,transparent,#d7cdec,transparent);
    transform:translate(-50%,-50%) rotate(18deg)
}
.integration-map:after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:70%;
    height:1px;
    background:linear-gradient(90deg,transparent,#d7cdec,transparent);
    transform:translate(-50%,-50%) rotate(18deg);

    transform:translate(-50%,-50%) rotate(-20deg);
}
.hub-logo{
    position:absolute;
    display:grid;
    place-items:center;
    border:1px solid #ebe5f3;
    background:#fff;
    box-shadow:0 15px 40px rgba(65,40,111,.08);

    left:50%;
    top:50%;
    width:105px;
    height:105px;
    border-radius:28px;
    transform:translate(-50%,-50%);
}
.hub-logo img{
    width:50px
}
.node{
    position:absolute;
    display:grid;
    place-items:center;
    border:1px solid #ebe5f3;
    background:#fff;
    box-shadow:0 15px 40px rgba(65,40,111,.08);

    min-width:110px;
    height:55px;
    padding:0 14px;
    border-radius:17px;
    font-size:10px;
    font-weight:900;
}
.n1{
    left:10%;
    top:17%
}
.n2{
    left:31%;
    top:5%
}
.n3{
    right:25%;
    top:9%
}
.n4{
    right:8%;
    top:28%
}
.n5{
    left:13%;
    bottom:18%
}
.n6{
    left:38%;
    bottom:4%
}
.n7{
    right:28%;
    bottom:7%
}
.n8{
    right:8%;
    bottom:22%
}
.integration-columns{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px
}
.integration-columns h3{
    font-size:16px
}
.integration-columns p{
    color:var(--muted);
    font-size:11px
}
@media(max-width:1080px){
    .integration-columns{
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:700px){
.integration-columns{
        grid-template-columns:1fr
    }
    .integration-map{
        height:500px
    }
    .node{
        min-width:90px
    }
    .n1{
        left:0
    }
    .n4{
        right:0
    }
    .n5{
        left:0
    }
    .n8{
        right:0
    }
}










        .enterprise-network{

            height:620px;

            position:relative;

            margin-top:80px;

            }



            .enterprise-center img{

            width:75px;

            }


            .enterprise-center strong{

            font-size:22px;

            margin-top:12px;

            }


            .enterprise-center span{

            font-size:12px;

            color:#8d829f;

            }



            .enterprise-node:hover{

            transform:translateY(-8px);

            border-color:#6d40d2;

            }





            .integration-message{


            max-width:850px;

            margin:0 auto;


            text-align:center;


            font-size:20px;


            line-height:1.6;


            color:#716781;


            }





            .integration-features{


            display:grid;


            grid-template-columns:

            repeat(4,1fr);


            gap:25px;


            margin-top:70px;


            }



            .integration-features article{


            padding:32px;


            border-radius:24px;


            border:1px solid #ebe2fb;


            background:white;


            }



            .integration-features i{


            font-size:32px;

            color:#6238ce;

            }


            .integration-features h3{


            font-size:20px;

            margin-top:20px;


            }



            .integration-features p{


            color:#77708d;

            line-height:1.6;


            }



            @media(max-width:900px){

            .enterprise-network{

            display:none;

            }


            .integration-features{

            grid-template-columns:1fr;

            }
}


.network-lines span:nth-child(1){
    width:300px;
    transform:rotate(45deg);
}

.network-lines span:nth-child(2){
    width:300px;
    transform:rotate(-45deg);
}

.network-lines span:nth-child(3){
    width:300px;
    transform:rotate(-10deg);
}

.network-lines span:nth-child(4){
    width:300px;
    transform:rotate(20deg);
}

.network-lines span:nth-child(5){
    width:300px;
    transform:rotate(-125deg);
}

.network-lines span:nth-child(6){
    width:300px;
    transform:rotate(200deg);
}

.network-lines span:nth-child(7){
    width:300px;
    transform:rotate(165deg);
}

.network-lines span:nth-child(8){
    width:300px;
    transform:rotate(125deg);
}


.enterprise-node i{

            font-size:28px;

            color:#6338cc;


    font-size:24px;
}


.enterprise-node strong{

            font-size:15px;

            display:block;


    font-size:14px;
}


.enterprise-node small{

            font-size:12px;

            color:#8b819b;


    font-size:11px;
}



.gov{

            left:43%;

            top:5%;

    left:50%;
    top:3%;
    transform:translateX(-50%);

    left:30%;
    top:10%;
    transform:translateX(-50%);
}


.api{

            right:30%;

            top:18%;

    right:27%;
    top:14%;

    right:25%;
    top:12%;
}


.cloud{

            right:32%;

            bottom:5%;

    right:35%;
    bottom:3%;

    right:22%;
    bottom:8%;
}


.ibm{

            left:32%;

            bottom:5%;

    left:35%;
    bottom:3%;

    left:22%;
    bottom:8%;
}


.sap{

            left:8%;

            top:35%;

    left:7%;
    top:42%;

    left:15%;
    top:30%;
}


.servicenow{

            right:8%;

            top:35%;

    right:7%;
    top:42%;

    right:15%;
    top:40%;
}


.ged{

            left:18%;

            bottom:18%;

    left:16%;
    bottom:15%;

    left:15%;
    bottom:30%;
}


.teams{

            right:18%;

            bottom:18%;

    right:15%;
    bottom:15%;

    right:15%;
    bottom:25%;
}



.enterprise-center{


            position:absolute;

            left:50%;
            top:50%;

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


            width:220px;

            height:220px;


            border-radius:50px;


            background:white;


            border:1px solid #e8defa;


            box-shadow:

            0 30px 80px rgba(90,50,190,.18);


            display:flex;

            align-items:center;

            justify-content:center;

            flex-direction:column;

    left:50%;
    top:50%;


width:200px;
height:200px;

border-radius:45px;
}



.network-lines span{

            position:absolute;

            left:50%;
            top:50%;

            height:1px;

            background:
            linear-gradient(
            90deg,
            transparent,
            #d8c8fa,
            transparent
            );

            transform-origin:left center;


    position:absolute;

    left:50%;
    top:50%;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #d8c8fa,
        transparent
    );

    transform-origin:left center;

    opacity:.7;


    animation:pulseLine 4s infinite alternate;
}


    @keyframes pulseLine {

    from {
    opacity:.25;
    }

    to {
    opacity:.7;
    }

    }


    .enterprise-node{


            position:absolute;


            display:flex;

            align-items:center;

            gap:14px;


            background:white;


            padding:18px 22px;


            border-radius:18px;


            border:1px solid #e8def8;


            box-shadow:

            0 15px 35px rgba(90,50,190,.08);


            transition:.3s;


    padding:16px 20px;

    border-radius:16px;


        animation:
        floatNode 6s ease-in-out infinite;
}


        @keyframes floatNode {

        0%,100%{
        transform:translateY(0);
        }

        50%{
        transform:translateY(-6px);
        }

        }

/* Composição própria para celular: preserva todas as integrações sem
   reduzir a rede desktop a uma miniatura ilegível. */
@media(max-width:700px){
    .integrations{
        padding:76px 0 84px;
    }

    .integrations .section-heading{
        text-align:center;
    }

    .integrations .section-heading .section-kicker{
        margin-inline:auto;
    }

    .integrations .section-heading h2{
        max-width:360px;
        margin:18px auto 16px;
        font-size:clamp(30px,9vw,38px);
        line-height:1.12;
    }

    .integrations .section-heading h2 em{
        display:inline;
    }

    .integrations .section-heading p{
        max-width:340px;
        margin-inline:auto;
        font-size:16px;
        line-height:1.55;
    }

    .enterprise-network{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        height:auto;
        margin-top:40px;
    }

    .network-lines{
        display:none;
    }

    .enterprise-center{
        position:relative;
        left:auto;
        top:auto;
        grid-column:1/-1;
        width:150px;
        height:126px;
        margin:0 auto 16px;
        border-radius:32px;
        transform:none;
        box-shadow:0 20px 48px rgba(89,50,193,.18);
    }

    .enterprise-center img{
        width:52px;
    }

    .enterprise-center strong{
        margin-top:7px;
        font-size:17px;
    }

    .enterprise-center span{
        max-width:110px;
        margin-top:2px;
        text-align:center;
        font-size:9px;
        line-height:1.25;
    }

    .enterprise-node,
    .gov,
    .api,
    .cloud,
    .ibm,
    .sap,
    .servicenow,
    .ged,
    .teams{
        position:relative;
        inset:auto;
        width:100%;
        min-width:0;
        min-height:82px;
        padding:12px 10px;
        gap:9px;
        border-radius:17px;
        transform:none;
        animation-duration:5s;
    }

    .enterprise-node:hover{
        transform:none;
    }

    .enterprise-node:nth-of-type(even){
        animation-delay:-2.5s;
    }

    .enterprise-node i{
        flex:0 0 auto;
        font-size:22px;
    }

    .enterprise-node div{
        min-width:0;
    }

    .enterprise-node strong{
        font-size:11px;
        line-height:1.2;
    }

    .enterprise-node small{
        display:block;
        margin-top:3px;
        font-size:9px;
        line-height:1.25;
    }

    .integration-message{
        margin-top:38px;
        font-size:16px;
        line-height:1.55;
    }

    .integration-features{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
        margin-top:38px;
    }

    .integration-features article{
        display:grid;
        grid-template-columns:48px minmax(0,1fr);
        column-gap:13px;
        padding:19px;
        border-radius:20px;
        box-shadow:0 12px 30px rgba(89,50,193,.06);
    }

    .integration-features i{
        grid-row:1/3;
        width:48px;
        height:48px;
        display:grid;
        place-items:center;
        border-radius:15px;
        background:#f3edff;
        font-size:24px;
    }

    .integration-features h3{
        margin:1px 0 0;
        font-size:16px;
        line-height:1.25;
    }

    .integration-features p{
        margin:6px 0 0;
        font-size:12px;
        line-height:1.45;
    }
}

/* ============================================================
   FUNDO ESCURO — a banda da secao "Soluções por área" da LP antiga
   (.ref-practice-bg, css/home/home.css:149): #27115f chapado com
   40px de raio. La havia uma textura por cima (.ref-practice-bg__waves,
   waves-red.png) que nao existe mais no repositorio, entao a cor
   chapada e o que aquele fundo de fato renderiza hoje.

   Como o fundo inverteu, todo o conteudo da secao vira claro. As
   cores de texto seguem as ja usadas nos blocos escuros da LP
   (#c88cff, #c8bddb, #b4a9c8, #b79bff).
   ============================================================ */
.integrations{
    /* era -1px para emendar branco com branco; agora a secao e um
       bloco escuro proprio e o -1px comeria o canto arredondado */
    margin-top:0;
    border-radius:clamp(28px,2.2vw,40px);
    background:#27115f;
}

/* mesmos valores de .section-kicker.light (css/base/typography.css:34) */
.integrations .section-kicker{
    color:#dfd3f4;
    background:rgba(255,255,255,.08);
}

.integrations .section-heading h2{color:#fff}
.integrations .section-heading h2 em{color:#c88cff}
.integrations .section-heading p{color:#c8bddb}

/* --- rede de integracoes --- */
.enterprise-center{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 30px 80px rgba(9,3,23,.45);
}

.enterprise-center strong{color:#fff}
.enterprise-center span{color:#b4a9c8}

.enterprise-node{
    background:rgba(25,13,57,.72);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 15px 35px rgba(9,3,23,.35);
}

.enterprise-node:hover{border-color:#9c6cff}
.enterprise-node i{color:#b79bff}
.enterprise-node strong{color:#fff}
.enterprise-node small{color:#b4a9c8}

/* os fios eram #d8c8fa sobre branco: sumiriam no roxo escuro */
.network-lines span{
    background:linear-gradient(90deg,transparent,rgba(183,155,255,.5),transparent);
}

.integration-message{color:#c8bddb}

/* --- cards de recurso: mesma pele dos cards da secao de seguranca --- */
.integration-features article{
    background:rgba(25,13,57,.84);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 16px 34px rgba(9,3,23,.30);
}

.integration-features i{color:#b79bff}
.integration-features h3{color:#fff}
.integration-features p{color:#c8bddb}

@media(max-width:700px){
    .integrations{
        border-radius:26px;
    }

    .enterprise-center{
        box-shadow:0 20px 48px rgba(9,3,23,.40);
    }

    .integration-features article{
        box-shadow:0 12px 30px rgba(9,3,23,.28);
    }

    /* o quadrado do icone era #f3edff (quase branco) */
    .integration-features i{
        background:rgba(255,255,255,.08);
    }
}