*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f8fd;
    color:#1d2433;
    line-height:1.5;
}

.container{
    width:92%;
    max-width:1240px;
    margin:0 auto;
}

a{
    text-decoration:none;
}

/* TOPO */
.topo{
    position:sticky;
    top:0;
    z-index:999;
    background:#ffffff;
    box-shadow:0 2px 22px rgba(13,44,108,0.08);
}

.topo-conteudo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:16px 0;
}

.marca{
    display:flex;
    align-items:center;
    gap:14px;
    color:#0d2c6c;
    min-width:250px;
}

.logo{
    height:56px;
    width:auto;
    display:block;
    border-radius:10px;
}

.marca-texto{
    display:flex;
    flex-direction:column;
}

.marca-texto strong{
    font-size:21px;
    line-height:1;
}

.marca-texto span{
    font-size:13px;
    color:#647490;
    margin-top:4px;
}

.menu{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.menu a{
    color:#29426c;
    font-weight:700;
    font-size:15px;
    transition:0.3s;
}

.menu a:hover{
    color:#f4a300;
}

.topo-botoes{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.btn-crm,
.btn-topo{
    padding:12px 18px;
    border-radius:10px;
    font-weight:bold;
    transition:0.3s;
    white-space:nowrap;
}

.btn-crm{
    background:#0d2c6c;
    color:#ffffff;
}

.btn-topo{
    background:#f4a300;
    color:#102a57;
}

.btn-crm:hover,
.btn-topo:hover{
    opacity:0.88;
}

/* HERO */
.hero{
    background:linear-gradient(135deg,#0f2f6f 0%, #2f63c0 100%);
    padding:74px 0 82px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:34px;
    align-items:center;
}

.selo{
    display:inline-block;
    background:rgba(255,255,255,0.12);
    color:#ffffff;
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:bold;
    letter-spacing:0.7px;
    margin-bottom:18px;
}

.hero-texto h1{
    color:#ffffff;
    font-size:56px;
    line-height:1.05;
    margin-bottom:16px;
}

.hero-texto p{
    color:#e7efff;
    font-size:18px;
    max-width:700px;
    margin-bottom:28px;
}

.hero-botoes{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:28px;
}

.btn-principal,
.btn-secundario{
    padding:15px 24px;
    border-radius:10px;
    font-weight:bold;
    transition:0.3s;
}

.btn-principal{
    background:#f4a300;
    color:#102a57;
}

.btn-secundario{
    background:rgba(255,255,255,0.12);
    color:#ffffff;
    border:1px solid rgba(255,255,255,0.20);
}

.btn-principal:hover,
.btn-secundario:hover{
    opacity:0.9;
}

.hero-metricas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.metrica{
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:16px;
    padding:16px 18px;
    min-width:170px;
}

.metrica strong{
    display:block;
    color:#ffffff;
    font-size:26px;
    margin-bottom:4px;
}

.metrica span{
    color:#d7e5ff;
    font-size:14px;
}

.hero-card{
    background:#ffffff;
    border-radius:24px;
    padding:30px;
    box-shadow:0 18px 42px rgba(0,0,0,0.18);
}

.mini-titulo{
    display:inline-block;
    color:#f4a300;
    font-size:12px;
    font-weight:bold;
    letter-spacing:0.8px;
    margin-bottom:10px;
}

.hero-card h2{
    font-size:34px;
    color:#0d2c6c;
    margin-bottom:12px;
}

.hero-card p{
    color:#566782;
    margin-bottom:18px;
}

.hero-card ul{
    padding-left:18px;
    margin-bottom:22px;
}

.hero-card li{
    color:#24314c;
    margin-bottom:10px;
}

.btn-card-hero{
    display:inline-block;
    background:#0d2c6c;
    color:#ffffff;
    padding:14px 22px;
    border-radius:10px;
    font-weight:bold;
}

/* LINHA SEO */
.marcas-seo{
    background:#ffffff;
    border-bottom:1px solid #e5ebf6;
}

.marcas-seo-conteudo{
    padding:18px 0;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}

.marcas-seo span{
    background:#edf3ff;
    color:#25457d;
    padding:10px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:bold;
}

/* TÍTULOS */
.titulo-bloco{
    margin-bottom:36px;
}

.titulo-bloco span{
    display:block;
    color:#f4a300;
    font-size:13px;
    font-weight:bold;
    letter-spacing:0.8px;
    margin-bottom:10px;
}

.titulo-bloco h2{
    font-size:40px;
    color:#0d2c6c;
    margin-bottom:12px;
    line-height:1.1;
}

.titulo-bloco p{
    color:#66748f;
    font-size:16px;
    max-width:850px;
}

.titulo-bloco.central{
    text-align:center;
}

.titulo-bloco.branco h2,
.titulo-bloco.branco span{
    color:#ffffff;
}

/* SERVIÇOS */
.servicos{
    padding:84px 0;
}

.grid-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.card-servico{
    background:#ffffff;
    border:1px solid #e3e9f3;
    border-radius:20px;
    padding:28px 24px;
    box-shadow:0 12px 26px rgba(20,42,90,0.06);
    transition:0.3s;
}

.card-servico:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 32px rgba(20,42,90,0.10);
}

.icone{
    font-size:28px;
    margin-bottom:12px;
}

.card-servico h3{
    font-size:24px;
    color:#0d2c6c;
    margin-bottom:10px;
}

.card-servico p{
    color:#5d6d89;
    margin-bottom:18px;
    font-size:15px;
    min-height:92px;
}

.card-servico a{
    color:#1f4fa3;
    font-weight:bold;
}

/* SEO TEXTO */
.seo-texto{
    padding:0 0 84px;
}

.seo-texto-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:24px;
    align-items:start;
}

.seo-label{
    display:inline-block;
    color:#f4a300;
    font-size:13px;
    font-weight:bold;
    letter-spacing:0.8px;
    margin-bottom:10px;
}

.seo-texto h2{
    color:#0d2c6c;
    font-size:40px;
    line-height:1.12;
    margin-bottom:16px;
}

.seo-texto p{
    color:#62728e;
    margin-bottom:14px;
    font-size:16px;
}

.seo-box{
    background:#ffffff;
    border:1px solid #e3e9f3;
    border-radius:20px;
    padding:28px;
    box-shadow:0 10px 24px rgba(13,44,108,0.06);
}

.seo-box h3{
    color:#0d2c6c;
    font-size:26px;
    margin-bottom:14px;
}

.seo-box ul{
    padding-left:18px;
}

.seo-box li{
    color:#405272;
    margin-bottom:10px;
}

/* VANTAGENS */
.vantagens{
    background:linear-gradient(135deg,#0f2f6f 0%, #224f9d 100%);
    padding:84px 0;
}

.grid-vantagens{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.item-vantagem{
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:20px;
    padding:24px;
}

.item-vantagem h3{
    color:#ffffff;
    margin-bottom:10px;
    font-size:22px;
}

.item-vantagem p{
    color:#dce7ff;
    font-size:15px;
}

/* FAQ */
.faq{
    padding:84px 0;
    background:#ffffff;
}

.faq-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.faq-item{
    background:#f7faff;
    border:1px solid #e0e9f8;
    border-radius:18px;
    padding:24px;
}

.faq-item h3{
    color:#0d2c6c;
    font-size:22px;
    margin-bottom:10px;
}

.faq-item p{
    color:#5b6d88;
    font-size:15px;
}

/* REDES */
.redes{
    padding:0 0 84px;
    background:#ffffff;
}

.grid-redes{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.rede-card{
    border-radius:20px;
    padding:28px;
    color:#ffffff;
    min-height:160px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:0 14px 30px rgba(0,0,0,0.08);
}

.rede-card strong{
    font-size:26px;
}

.rede-card span{
    font-size:15px;
    opacity:0.95;
}

.rede-card.instagram{
    background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
}

.rede-card.facebook{
    background:linear-gradient(135deg,#1877f2,#0d52b9);
}

.rede-card.whatsapp{
    background:linear-gradient(135deg,#1fa855,#25d366);
}

/* CTA FINAL */
.cta-final{
    padding:0 0 84px;
}

.cta-final-box{
    background:#0d2c6c;
    border-radius:26px;
    padding:38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    box-shadow:0 18px 34px rgba(13,44,108,0.12);
}

.cta-final-texto span{
    color:#f4a300;
    font-size:12px;
    font-weight:bold;
    letter-spacing:0.7px;
}

.cta-final-texto h2{
    color:#ffffff;
    font-size:36px;
    margin:10px 0 12px;
    line-height:1.08;
}

.cta-final-texto p{
    color:#dce7ff;
    font-size:16px;
    max-width:780px;
}

.cta-final-botao a{
    display:inline-block;
    background:#f4a300;
    color:#102a57;
    padding:16px 26px;
    border-radius:10px;
    font-weight:bold;
    white-space:nowrap;
}

/* RODAPÉ */
.rodape{
    background:#0a1f48;
    padding:28px 0;
}

.rodape-conteudo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.rodape strong{
    color:#ffffff;
    display:block;
    margin-bottom:6px;
}

.rodape p{
    color:#c7d4ef;
    font-size:14px;
}

.rodape-links{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.rodape-links a{
    color:#ffffff;
    font-size:14px;
}

/* WHATS FIXO */
.whats-fixo{
    position:fixed;
    right:20px;
    bottom:20px;
    background:#25d366;
    color:#ffffff;
    padding:14px 18px;
    border-radius:999px;
    font-weight:bold;
    box-shadow:0 10px 25px rgba(0,0,0,0.20);
    z-index:9999;
}

/* RESPONSIVO */
@media(max-width:1100px){
    .hero-grid,
    .grid-cards,
    .grid-vantagens,
    .faq-grid,
    .grid-redes,
    .seo-texto-grid{
        grid-template-columns:1fr 1fr;
    }

    .hero-texto h1{
        font-size:44px;
    }
}

@media(max-width:900px){
    .topo-conteudo{
        flex-direction:column;
        align-items:flex-start;
    }

    .menu{
        width:100%;
    }

    .cta-final-box{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media(max-width:700px){
    .hero-texto h1{
        font-size:34px;
    }

    .titulo-bloco h2,
    .seo-texto h2,
    .cta-final-texto h2{
        font-size:28px;
    }

    .hero-grid,
    .grid-cards,
    .grid-vantagens,
    .faq-grid,
    .grid-redes,
    .seo-texto-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding:52px 0;
    }

    .servicos,
    .vantagens,
    .faq{
        padding:62px 0;
    }

    .menu{
        flex-direction:column;
        gap:12px;
    }

    .topo-botoes{
        width:100%;
    }

    .btn-crm,
    .btn-topo,
    .btn-principal,
    .btn-secundario,
    .cta-final-botao a{
        width:100%;
        text-align:center;
    }

    .hero-botoes{
        flex-direction:column;
    }

    .whats-fixo{
        right:14px;
        bottom:14px;
    }
}