.security-art{
    position:relative;
    min-height:465px;
    display:grid;
    place-items:center
}
.seal-ring{
    width:255px;
    height:255px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:radial-gradient(circle,rgba(137,103,219,.4),rgba(89,50,193,.08));
    box-shadow:0 0 0 35px rgba(255,255,255,.03),0 0 0 70px rgba(255,255,255,.02)
}
.seal-ring span{
    position:absolute;
    top:73px;
    color:#c9b5e5;
    font-size:8px;
    letter-spacing:.14em
}
.seal-ring strong{
    width:135px;
    height:135px;
    display:grid;
    place-items:center;
    border-radius:35px;
    color:#fff;
    background:linear-gradient(145deg,#6c43cf,#30126f);
    font:700 28px "Space Grotesk";
    text-align:center;
    line-height:1
}
.secure-dot{
    position:absolute;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    background:#25134d
}
.dot-a{
    left:50px;
    top:80px
}
.dot-b{
    right:40px;
    top:160px
}
.dot-c{
    left:100px;
    bottom:35px
}
.security-content>p{
    color:rgba(255,255,255,.63);
    font-size:18px;
    line-height:1.7
}
@media(max-width:1080px){
.security-grid{
        grid-template-columns:1fr
    }
}
@media(max-width:700px){
.security-badges{
        grid-template-columns:1fr
    }
    .security-art{
        min-height:330px
    }
}



















.security{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:radial-gradient(circle at 18% 50%,rgba(182,97,218,.22),transparent 33%),#140a2e;


    padding:110px 0;

    background:

    radial-gradient(
    circle at 15% 50%,
    rgba(137,103,219,.30),
    transparent 35%
    ),

    linear-gradient(
    135deg,
    #16052f,
    #0c0520
    );

    overflow:hidden;
}



    .security-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    align-items:center;
    gap:75px;


    display:grid;

    /* Os selos so podem crescer na horizontal se a coluna da direita
       crescer junto - por isso o split saiu de .9/1.1 com 90px de calha
       para .8/1.2 com 64px. A coluna da esquerda fica com ~470px, ainda
       acima dos 430px fixos da .security-network, entao a arte nao corta. */
    grid-template-columns:

    1.2fr .8fr;

    gap:64px;

    align-items:center;
}




    /* =====================
       NETWORK
    ===================== */


    /* Canvas da rede escalado em ~1.16 (430 -> 500). Os nos, o nucleo e
       os aneis abaixo seguem o mesmo fator - as posicoes sao px cravados
       neste canvas, entao crescer so a moldura desalinharia a composicao.
       Cabe na coluna de 470px transbordando ~15px para cada lado, que
       caem na calha de 64px e na margem externa da secao. */
    .security-network{

    position:relative;

    width:500px;

    height:500px;

    margin:auto;

    }



    .security-circle{

    position:absolute;

    border-radius:50%;

    border:

    1px solid rgba(200,170,255,.18);

    }



    .circle-one{

    inset:52px;

    }


    .circle-two{

    inset:116px;

    }




    .security-core{


    position:absolute;

    top:50%;

    left:50%;


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



    width:210px;

    height:210px;


    border-radius:52px;



    background:

    linear-gradient(
    145deg,
    #7848e0,
    #5125b7
    );



    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;



    box-shadow:

    0 41px 93px rgba(100,50,220,.5);


    }



    .security-core img{

    width:110px;

    filter:

    brightness(0) invert(1);

    }



    .security-core span{

    margin-top:12px;

    color:white;

    font-size:15px;

    font-weight:700;

    }




    .security-logo-node{


    position:absolute;


    width:110px;

    height:76px;


    display:flex;

    align-items:center;

    justify-content:center;



    background:white;


    border-radius:21px;



    box-shadow:

    0 23px 47px rgba(0,0,0,.18);


    }



    .security-logo-node img{

    max-width:81px;

    max-height:41px;

    object-fit:contain;

    }



    .node-google{

    top:17px;

    left:50%;

    transform:translateX(-50%);

    }



    .node-aws{

    right:23px;

    top:50%;

    }



    .node-blockchain{

    left:47px;

    bottom:87px;

    }



    .node-serpro{

    right:93px;

    bottom:47px;

    }

    .node-icpbrasil{

        left:58px;

    top:140px;

        }

    /* Movimento contínuo e discreto da rede de segurança. */
    .security-core{
        animation:security-core-pulse 4.8s ease-in-out infinite;
    }

    .security-circle{
        animation:security-ring-pulse 5.4s ease-in-out infinite;
    }

    .circle-two{animation-delay:-2.7s}

    .security-logo-node{
        animation:security-node-float 4.4s ease-in-out infinite;
        will-change:transform;
    }

    .node-google{
        animation-name:security-node-float-centered;
        animation-delay:-.8s;
    }

    .node-aws{animation-delay:-1.6s}
    .node-blockchain{animation-delay:-2.4s}
    .node-serpro{animation-delay:-3.2s}
    .node-icpbrasil{animation-delay:-4s}

    @keyframes security-core-pulse{
        0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 35px 80px rgba(100,50,220,.5)}
        50%{transform:translate(-50%,-50%) scale(1.035);box-shadow:0 40px 94px rgba(135,82,238,.66)}
    }

    @keyframes security-ring-pulse{
        0%,100%{transform:scale(1);opacity:.55}
        50%{transform:scale(1.035);opacity:1}
    }

    @keyframes security-node-float{
        0%,100%{transform:translateY(0)}
        50%{transform:translateY(-10px)}
    }

    @keyframes security-node-float-centered{
        0%,100%{transform:translateX(-50%) translateY(0)}
        50%{transform:translateX(-50%) translateY(-10px)}
    }

    @media(prefers-reduced-motion:reduce){
        .security-core,.security-circle,.security-logo-node{animation:none}
    }





    .security-node{


    position:absolute;

    top:40px;

    left:50%;

    transform:translateX(-50%);


    padding:12px 22px;


    border-radius:999px;


    background:

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



    border:

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



    color:#d9caff;

    font-weight:800;

    font-size:14px;

    }




    .security-check{


    position:absolute;


    left:50px;

    top:120px;


    width:42px;

    height:42px;


    border-radius:50%;


    background:#5932c1;


    color:white;


    display:flex;

    align-items:center;

    justify-content:center;


    }



    /* =====================
     TEXTO
    ===================== */


    .security-content 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;



    margin:25px 0;



    color:white;


    }


    .security-content h2 em{
    color:#d8a3ee;



    display:block;

    font-style:normal;

    color:#c88cff;
}



    .security-content p{


    font-size:18px;


    line-height:1.7;


    color:#bdb4ce;


    max-width:620px;


    }




    /* =====================
     CARDS
    ===================== */


    .security-badges{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:30px;



    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:14px;


    margin-top:45px;
}



    .security-badges article{
    padding:18px 12px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:15px;
    background:rgba(255,255,255,.04);
    text-align:center;



    padding:22px;


    min-height:140px;



    border-radius:22px;



    background:

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



    border:

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


    transition:.3s;
}



    .security-badges article:hover{


    transform:
    translateY(-6px);


    border-color:#9c6cff;


    }



    .security-badges strong{
    display:block;

    font:700 23px "Space Grotesk";



    display:block;


    color:white;


    font-size:18px;


    margin-bottom:12px;
}



    .security-badges span{
    display:block;

    margin-top:6px;
    color:rgba(255,255,255,.48);
    font-size:8px;



    font-size:13px;


    line-height:1.5;


    color:#b4a9c8;
}




    /* =====================
     LOGOS
    ===================== */


    .security-partners{


    display:flex;

    align-items:center;

    gap:25px;


    margin-top:35px;


    }



    .security-partners img{


    height:28px;


    max-width:90px;


    object-fit:contain;


    filter:
    grayscale(100%)
    brightness(0)
    invert(1);


    opacity:.72;


    transition:.3s;


    }


    .security-partners img:hover{


    filter:
    grayscale(100%)
    brightness(0)
    invert(1);

    opacity:1;

    }

    @media(min-width:701px){
    .security-partners{
    justify-content:center;
    }
    }






    @media(max-width:1000px){


    .security-grid{

    grid-template-columns:1fr;

    }



    .security-badges{

    grid-template-columns:

    repeat(2,1fr);

    }
}



    @media(max-width:600px){


    .security-network{

    width:300px;

    height:300px;

    }



    .security-badges{

    grid-template-columns:1fr;

    }



    .security-partners{

    flex-wrap:wrap;

    }
}

/* Composição compacta da seção de segurança em telas menores. */
@media(max-width:700px){
    .security{
        padding:72px 0;
    }

    .security-grid{
        gap:40px;
    }

    .security-art{
        min-height:280px;
    }

    .security-network{
        width:280px;
        height:280px;
    }

    .security-core{
        width:150px;
        height:150px;
        border-radius:38px;
    }

    .security-core img{width:78px}

    .security-logo-node{
        width:78px;
        height:54px;
        border-radius:15px;
    }

    .security-logo-node img{
        max-width:58px;
        max-height:28px;
    }

    .node-google{top:-4px}
    .node-aws{top:112px;right:-4px}
    .node-blockchain{bottom:44px;left:-4px}
    .node-serpro{right:24px;bottom:-4px}
    .node-icpbrasil{top:103px;left:-4px}

    .security-content{
        text-align:center;
    }

    .security-content p{
        margin-right:auto;
        margin-left:auto;
    }

    .security-badges{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-top:24px;
    }

    .security-badges article{
        padding:16px 10px;
    }

    .security-badges strong{
        font-size:18px;
    }

    .security-partners{
        justify-content:center;
        margin-top:28px;
    }
}

/* Espelhamento da composicao: o bloco de texto/selos passa para a
   esquerda e a arte da rede para a direita. A troca e feita por 'order'
   porque o HTML mantem a arte primeiro; fica escopada acima de 1080px,
   que e onde a grade ainda tem duas colunas - abaixo disso ela vira 1fr
   e a ordem do DOM (arte, depois texto) continua valendo. */
@media(min-width:1081px){
    .security-art{order:2}
    .security-content{order:1}
}

/* Fundo da antiga LP: base clara com painel roxo curvo à direita. */
.security{
    color:var(--purple-dark);
    background:#fff;
}

.security::before{
    content:"";
    position:absolute;
    z-index:0;
    top:24%;
    left:50%;
    width:50%;
    height:76%;
    border-radius:min(32vw,438px) 0 0 0;
    background:linear-gradient(180deg,#8967db -61.3%,#5932c1 25.09%,#27115f 100%);
}

.security .security-grid{
    position:relative;
    z-index:1;
    padding-top:210px;
}

.security-heading{
    position:absolute;
    top:-45px;
    right:0;
    left:0;
    max-width:1100px;
    margin:0 auto;
    text-align:center;
}

.security-heading h2 em{display:inline}

/* O paragrafo saiu do .security-heading e virou irmao dos selos, logo
   acima deles. Por isso repete a largura e o recuo do bloco de faixas -
   fica centralizado sobre elas, e nao no meio da coluna inteira. */
.security-content>p{
    width:min(100%,600px);
    margin:0 auto 26px 0;
    color:var(--muted);
    text-align:justify;
    hyphens:auto;
}

/* O respiro do topo foi calibrado quando o paragrafo ficava cravado em
   top:300px dentro do .security-heading; com ele de volta ao fluxo, logo
   abaixo do titulo, sobrava vao antes dos selos - dai a folga menor. */
.security .security-grid{padding-top:240px}

.security-content{text-align:center}

/* Titulo pareado com o da secao de recursos (.home-page .value-title):
   mesma familia, mesmo clamp de tamanho, mesma cor e a mesma largura
   de linha, para os dois cabecalhos da pagina quebrarem no mesmo ritmo.
   A margem vertical de 25px continua, senao o kicker acima cola no h2.
   O <em> daqui faz o papel do <strong> de la - mesmo peso e mesma cor. */
.security-content h2{
    max-width:900px;
    margin:25px auto;
    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;
    text-align:center;
    text-wrap:pretty;
    color:var(--purple-dark);
}

.security-content h2 em{
    font-weight:700;
    color:var(--purple);
}
/* As margens auto saem daqui: esta regra vinha depois da que alinha o
   paragrafo com os selos e recentralizava ele na coluna inteira. */
.security-content p{color:var(--muted)}

/* O anel da rede voltou a ficar sobre o painel roxo depois do
   espelhamento, entao o contorno claro do estilo base serve de novo -
   o roxo rgba(89,50,193,.18) que valia no fundo branco sumiria ali. */

/* Selos na horizontal: uma coluna de quatro faixas ocupando a largura
   toda, com o titulo a esquerda e a descricao a direita dentro de cada
   card. A regra fica fora de media query e depois dos breakpoints
   acima, entao vence tambem os `repeat(2,1fr)` e `1fr` deles. */
.security-badges{
    grid-template-columns:1fr;
    gap:12px;
    width:min(100%,600px);
    margin-right:auto;
}

/* A fileira de logos acompanha a largura e o recuo dos selos, senao
   ficaria centralizada na coluna inteira e desalinhada deles. */
.security-partners{
    width:min(100%,600px);
    margin-right:auto;
}

/* Sobe o conjunto sem mexer na altura da linha: com 'position:relative'
   + 'top' o deslocamento e visual, entao a grade (align-items:center)
   nao recentraliza o bloco e engole metade do ajuste, como aconteceria
   com margem negativa. O .security-heading nao acompanha - ele e
   absoluto e se posiciona pela .security, nao por estes irmaos. */
.security-content>p,
.security-badges,
.security-partners,
.security-art{
    position:relative;
    top:-50px;
}

/* O deslocamento para a esquerda so entra quando o container ja bateu
   no teto de 1240px e sobra folga ate a borda da tela - abaixo disso a
   .container so tem 21px de cada lado e o card encostaria no limite,
   com a .security cortando o excesso no overflow:hidden. */
@media(min-width:1360px){
    .security-content>p,
    .security-badges,
    .security-partners{
        margin-left:-40px;
    }
}

.security-badges article{
    display:flex;
    align-items:center;
    gap:24px;
    min-height:0;
    padding:20px 26px;
    text-align:left;
    background:rgba(25,13,57,.84);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 16px 34px rgba(39,17,95,.22);
}

.security-badges strong{
    flex:0 0 190px;
    margin-bottom:0;
    color:#fff;
    font-size:20px;
}

.security-badges span{
    flex:1;
    margin-top:0;
    color:#c8bddb;
    font-size:14px;
}

@media(max-width:700px){
    .security-badges article{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        min-height:0;
        padding:18px 18px;
    }

    .security-badges strong{flex:0 0 auto}

    .security .security-grid{padding-top:250px}

    .security-heading{top:-20px}

    .security-content>p{
        margin-bottom:20px;
    }

    .security::before{
        top:36%;
        left:18%;
        width:82%;
        height:64%;
        border-radius:190px 0 0 0;
    }
}