.dark-value{
    padding:60px 0;
    color:#fff;
    background:radial-gradient(circle at 50% -20%,rgba(137,103,219,.3),transparent 35%),#150b31;

    padding:100px 0;


    padding:100px 0;

    background:
    radial-gradient(
        circle at top center,
        rgba(137,103,219,.18),
        transparent 45%
    ),
    #17082f;
}

/* =========================================================
   DELINEADO DO RODAPE DA HERO - entalhe central de 320px
   Reaproveitado da LP anterior (.features__notch--top). La eram
   dois <svg> soltos no HTML; aqui a geometria entra por mascara e
   a cor fica no token, entao a marcacao nao muda e o entalhe
   acompanha qualquer troca de --purple-dark.
   O desenho e pintado com o roxo da hero DENTRO do topo desta
   secao: e o que faz a borda da hero descer numa aba central.
   A faixa de 1px que corre pelos 320px sela a emenda entre as
   duas secoes - por isso nao aparece fio de fundo sob os ombros.
   Escopado em .home-page porque a pagina de IA tambem usa
   .dark-value e carrega este mesmo arquivo.
   ========================================================= */
.home-page .dark-value{
    position:relative;
    overflow:hidden;
    padding:130px 0 150px;
}

.home-page .dark-value::before{
    content:"";
    position:absolute;
    top:-1px;
    left:50%;
    transform:translateX(-50%);
    width:320px;
    height:60px;
    background:var(--purple-dark);
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%2060%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M0%2C0%20H320%20V1%20C250%2C1%20232%2C1%20212%2C14%20C192%2C27%20184%2C58%20160%2C58%20C136%2C58%20128%2C27%20108%2C14%20C88%2C1%2070%2C1%200%2C1%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/320px 60px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%2060%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M0%2C0%20H320%20V1%20C250%2C1%20232%2C1%20212%2C14%20C192%2C27%20184%2C58%20160%2C58%20C136%2C58%20128%2C27%20108%2C14%20C88%2C1%2070%2C1%200%2C1%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/320px 60px no-repeat;
    pointer-events:none
}

.home-page .dark-value::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:50%;
    transform:translateX(-50%);
    width:320px;
    height:60px;
    background:#e8dffa;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%2060%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M0%2C60%20H320%20V59%20C250%2C59%20232%2C59%20212%2C46%20C192%2C33%20184%2C2%20160%2C2%20C136%2C2%20128%2C33%20108%2C46%20C88%2C59%2070%2C59%200%2C59%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/320px 60px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%2060%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M0%2C60%20H320%20V59%20C250%2C59%20232%2C59%20212%2C46%20C192%2C33%20184%2C2%20160%2C2%20C136%2C2%20128%2C33%20108%2C46%20C88%2C59%2070%2C59%200%2C59%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/320px 60px no-repeat;
    pointer-events:none;
}

.home-page .value-title{
    max-width:900px;
    margin:0 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);
}

.home-page .value-title strong{
    font-weight:700;
    color:var(--purple);
}

/* Linha de apoio sob o titulo, no mesmo eixo central. Vem da LP
   anterior (.features__lead); aqui o corpo fica em --muted porque
   esta variante da secao roda sobre fundo claro. */
.home-page .value-lead{
    max-width:62ch;
    margin:18px auto 0;
    font-size:17px;
    line-height:1.6;
    text-align:center;
    text-wrap:pretty;
    color:var(--muted);
}

.home-page .value-grid{
    margin-top:42px;
}

@media(max-width:900px){
    .home-page .dark-value{
        padding:96px 0 120px;
    }
}

.value-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;

    margin-top:42px;

    display:grid;

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


    margin-top:60px;

    display:grid;

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



.value-grid article{
    padding:15px 22px;
    border-right:1px solid rgba(255,255,255,.1);


    padding:0 35px;

    min-height:260px;

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


    padding:0 35px;

    min-height:270px;

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



.value-grid article:last-child{
    border-right:0;


    border-right:none;


    border-right:none;
}



/* ICONES */

.value-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    margin-bottom:22px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    color:#d5b8f4;
    font-size:20px;


    width:54px;
    height:54px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:16px;

    border:
    1px solid rgba(182,97,218,.35);


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


    color:#d6b6ff;

    font-size:25px;

    margin-bottom:32px;


    width:58px;

    height:58px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    background:
    linear-gradient(
        145deg,
        rgba(182,97,218,.22),
        rgba(89,50,193,.18)
    );


    border:
    1px solid rgba(182,97,218,.35);


    color:#d8b7ff;


    margin-bottom:30px;


    transition:.3s ease;
}



.value-icon i{

    font-size:30px;

}



.value-grid article:hover .value-icon{

    transform:
    translateY(-5px);


    background:
    linear-gradient(
        145deg,
        rgba(182,97,218,.35),
        rgba(89,50,193,.25)
    );


    box-shadow:

    0 20px 40px rgba(182,97,218,.22);

}



/* TITULOS */

.value-grid h3{
    margin:0;
    font-size:14px;


    font-family:"Space Grotesk";

    font-size:22px;

    line-height:1.2;

    color:#fff;

    margin-bottom:16px;


    font-family:
    "Space Grotesk",
    sans-serif;


    font-size:23px;

    line-height:1.2;


    color:#fff;


    margin-bottom:15px;
}



.value-grid h3 span{

    color:#b661da;


    color:#b661da;
}



/* TEXTO */

.value-grid p{
    margin:9px 0 0;
    color:rgba(255,255,255,.55);
    font-size:10px;
    line-height:1.6;


    color:#aaa2bc;

    font-size:15px;

    line-height:1.7;

    max-width:230px;


    color:#aaa0bd;


    font-size:15px;


    line-height:1.65;


    max-width:220px;
}
@media(max-width:1080px){
    .value-grid{
        grid-template-columns:repeat(3,1fr)
    }
    .value-grid article:nth-child(3){
        border-right:0
    }
}
@media(max-width:700px){
    .value-grid{
        grid-template-columns:1fr
    }
    .value-grid article{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.1)
    }
}

.home-page .value-more{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:max-content;
    height:62px;
    margin:28px auto 0;
    padding:0 30px;
    border-radius:999px;
    box-shadow:inset 0 0 0 1px rgba(39,17,95,.28);
    color:var(--purple-dark);
    font-size:16px;
    font-weight:700;
    white-space:nowrap;
    transition:background-color .2s ease, color .2s ease, transform .2s ease;
}

.home-page .value-more:hover{
    transform:translateY(-2px);
    background:rgba(89,50,193,.07);
    color:var(--purple-dark);
}

.home-page .value-more:focus-visible{
    outline:3px solid rgba(89,50,193,.3);
    outline-offset:4px;
}

.home-page .value-more svg{
    flex-shrink:0;
}

@media(max-width:700px){
    .home-page .value-more{
        width:100%;
        height:56px;
        margin-top:24px;
        padding:0 18px;
        font-size:15px;
    }
}

/* ============================================================
   SEGUNDA SECAO EM CLARO - #FCFBFE, como na LP anterior
   Na LP anterior a segunda secao (.features, mesmo id=recursos)
   era clara: #FCFBFE. Aqui ela nascera escura, com o texto e os
   cards calibrados para fundo escuro - trocar so o fundo deixaria
   tudo ilegivel, entao a paleta de frente vem junto.
   As cores nao foram inventadas: seguem a convencao que a propria
   pagina ja usa nas secoes claras (ver .feature-showcase) -
   ícone em --purple sobre #eee9fa, bordas em --line, corpo em
   --muted e titulo em --ink.
   Escopado em .home-page porque a pagina de IA reaproveita
   .dark-value em outra secao (#inteligencia), que segue escura.
   ============================================================ */
.home-page .dark-value{
    color:var(--ink);
    background:#FCFBFE;
}

.home-page .value-grid article{
    border-right-color:var(--line);
}

.home-page .value-icon{
    background:#eee9fa;
    border-color:var(--line);
    color:var(--purple);
}

.home-page .value-grid article:hover .value-icon{
    background:#e4dbf7;
    box-shadow:0 20px 40px rgba(89,50,193,.14);
}

.home-page .value-grid h3{
    color:var(--ink);
}

.home-page .value-grid h3 span{
    color:var(--purple);
}

.home-page .value-grid p{
    color:var(--muted);
}

@media(max-width:900px){
    .home-page .value-title{
        max-width:720px;
    }
}

@media(max-width:700px){
    .home-page .value-grid article{
        border-bottom-color:var(--line);
    }
}

/* Cards da LP anterior: xadrez claro/roxo, agora com o ícone centralizado
   no topo de cada card conforme o novo layout. */
.home-page .value-grid{
    grid-template-columns:repeat(6,1fr);
    gap:16px;
}

.home-page .value-grid .value-card{
    display:flex;
    flex-direction:column;
    min-height:230px;
    padding:24px 22px;
    border:0;
    border-radius:30px;
    text-align:left;
}

.home-page .value-card--claro{
    background:var(--soft2);
    color:var(--ink);
}

.home-page .value-card--escuro{
    background:var(--purple-dark);
    color:#fff;
}

.home-page .value-grid .value-card .value-icon{
    align-self:center;
    margin:0 auto 22px;
    background:#fff;
    border-color:rgba(89,50,193,.14);
    color:var(--purple);
}

.home-page .value-grid .value-card--escuro .value-icon{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.16);
    color:#e0cdfd;
}

.home-page .value-grid .value-card h3{
    margin:0;
    font-size:20px;
    font-weight:700;
    line-height:1.2;
    color:inherit;
}

.home-page .value-grid .value-card h3 span{
    color:var(--purple);
}

.home-page .value-grid .value-card--escuro h3 span{
    color:#e0cdfd;
}

.home-page .value-grid .value-card p{
    max-width:none;
    margin:12px 0 0;
    font-size:13.5px;
    line-height:1.55;
    color:var(--muted);
}

.home-page .value-grid .value-card--escuro p{
    color:rgba(255,255,255,.74);
}

@media(max-width:1100px){
    .home-page .value-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:700px){
    .home-page .value-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .home-page .value-grid .value-card{
        min-height:190px;
        padding:20px 18px;
        border-bottom:0;
    }

    .home-page .value-grid .value-card h3{
        font-size:19px;
    }

    .home-page .value-grid .value-card p{
        font-size:14px;
    }
}

@media(max-width:460px){
    .home-page .value-grid{
        grid-template-columns:1fr;
    }

    .home-page .value-grid .value-card{
        min-height:0;
    }
}

/* Cartões compactos no mobile: leitura rápida, como componentes de app. */
@media(max-width:700px){
    .home-page .value-grid .value-card{
        min-height:0;
        padding:16px;
        border-radius:18px;
    }

    .home-page .value-grid .value-card .value-icon{
        width:44px;
        height:44px;
        margin:0 auto 14px;
        border-radius:12px;
        font-size:20px;
    }

    .home-page .value-grid .value-card .value-icon i{
        font-size:22px;
    }

    .home-page .value-grid .value-card h3{
        font-size:16px;
        line-height:1.25;
    }

    .home-page .value-grid .value-card p{
        margin-top:8px;
        font-size:12px;
        line-height:1.45;
    }
}

/* Benefícios em lista compacta e legível no celular. */
@media(max-width:700px){
    .home-page .dark-value{
        padding:88px 0 104px;
    }

    .home-page .value-title{
        max-width:350px;
        font-size:clamp(29px,8.5vw,36px);
        line-height:1.14;
    }

    .home-page .value-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-top:34px;
    }

    .home-page .value-grid .value-card{
        display:flex;
        flex-direction:column;
        min-height:0;
        padding:16px 13px;
        border-radius:20px;
        text-align:left;
    }

    .home-page .value-grid .value-card .value-icon{
        align-self:center;
        width:48px;
        height:48px;
        margin:0 auto 13px;
        border-radius:14px;
    }

    .home-page .value-grid .value-card .value-icon i{
        font-size:23px;
    }

    .home-page .value-grid .value-card h3{
        font-size:15px;
        line-height:1.22;
    }

    .home-page .value-grid .value-card p{
        margin-top:6px;
        font-size:11px;
        line-height:1.45;
    }
}

/* Cards com a mesma altura da LP de referencia. O icone funciona como
   assinatura visual no canto inferior direito, sem alterar o fluxo do
   titulo e da descricao. Este bloco consolida os ajustes anteriores. */
.home-page .value-grid .value-card{
    position:relative;
    height:190px;
    min-height:190px;
    padding:22px 20px;
}

.home-page .value-grid .value-card .value-icon{
    position:absolute;
    right:14px;
    bottom:14px;
    width:36px;
    height:36px;
    margin:0;
    border-radius:11px;
}

.home-page .value-grid .value-card .value-icon i{
    font-size:20px;
}

.home-page .value-grid .value-card p{
    margin-top:8px;
    font-size:12px;
    line-height:1.4;
}

@media(max-width:700px){
    .home-page .value-grid .value-card{
        height:190px;
        min-height:190px;
        padding:16px 13px;
    }

    .home-page .value-grid .value-card .value-icon{
        right:13px;
        bottom:13px;
        width:34px;
        height:34px;
        margin:0;
        border-radius:10px;
    }

    .home-page .value-grid .value-card .value-icon i{
        font-size:19px;
    }
}

/* O hover antigo foi criado quando os icones ficavam no topo. Agora que
   eles ocupam o canto inferior, permanecem fixos e conservam o contraste. */
.home-page .value-grid .value-card:hover .value-icon{
    transform:none;
    background:#fff;
    border-color:rgba(89,50,193,.14);
    color:var(--purple);
    box-shadow:none;
}

.home-page .value-grid .value-card--escuro:hover .value-icon{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.16);
    color:#e0cdfd;
}