:root{
    --bg:#050811;
    --bg-soft:#0a0f1d;
    --card:#0d1527;
    --text:#ffffff;
    --muted:rgba(255,255,255,.7);
    --soft:rgba(255,255,255,.12);
    --accent:#00f0ff;
    --primary:#0076a8;
    --primary-dark:#004d70;
    --primary-rgb: 0, 118, 168;
}
/* ================= BASE ================= */
body{
    background:#fff;
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
}
section{
    padding:110px 0;
}
h1,h2,h3,h4{
    font-family:'Manrope',sans-serif;
}
/* ================= HERO ================= */
.hero-home {
    position:relative;
    overflow:hidden;
    min-height:760px;
    display:flex;
    align-items:center;
    background:
        url("https://zentrixtec.com.br/images/hero-shapes.svg") no-repeat center left,
        linear-gradient(90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.95) 35%,
            rgba(255,255,255,.78) 55%,
            rgba(255,255,255,.15) 72%,
            rgba(255,255,255,0) 100%
        ),
        url("https://zentrixtec.com.br/images/hero.png");
    background-size:
        auto,
        cover,
        cover;
    background-position:
        center,
        center,
        center;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;
}
.hero-home::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    left:-220px;
    top:-120px;
    border-radius:50%;
    background:radial-gradient(circle,
            rgba(24,77,182,.08),
            transparent 70%);
}
.hero-home .container{
    position:relative;
    z-index:2;
}
.hero-content{
    width:610px;
    padding:80px 0;
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    padding:12px 20px;
    border-radius:40px;
    background:#edf4ff;
    color:#1d3f92;
    font-size:.92rem;
    font-weight:600;
    margin-bottom:30px;
}
.hero-content h1{
    font-size:40px;
    line-height:1.08;
    font-weight:800;
    color:#13306d;
    margin-bottom:28px;
}
.hero-content p{
    font-size:20px;
    line-height:1.8;
    color:#555;
    max-width:560px;
    margin-bottom:40px;
}
.hero-buttons{
    display:flex;
    gap:18px;
    margin-bottom:45px;
}
.btn-primary{
    background:#123b91;
    color:#fff;
    padding:18px 34px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:12px;
    transition:.3s;
}
.btn-primary:hover{
    background:#0d2c6f;
    transform:translateY(-2px);
}
.btn-secondary{
    border:2px solid #c8d5ef;
    color:#123b91;
    background:#fff;
    padding:18px 34px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}
.btn-secondary:hover{
    background:#f4f8ff;
}
.hero-benefits{
    display:flex;
    gap:38px;
    flex-wrap:wrap;
}
.benefit{
    display:flex;
    align-items:center;
    gap:12px;
    color:#13306d;
    font-weight:600;
    font-size:.95rem;
}
.benefit i{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eef5ff;
    color:#123b91;
    font-size:18px;
}
/* RESPONSIVO */
@media(max-width:991px){
.hero-home{
    min-height:auto;
    background-position:75% center;
}
.hero-content{
    width:100%;
    padding:100px 0 70px;
}
.hero-content h1{
    font-size:2.8rem;
}
.hero-buttons{
    flex-direction:column;
}
.trust-grid{
    grid-template-columns:repeat(2,1fr);
}
.hero-benefits{
    gap:18px;
}
}
@media(max-width:640px){
.hero-home{
    background:
    linear-gradient(
        rgba(255,255,255,.92),
        rgba(255,255,255,.92)
    ),
    url("https://zentrixtec.com.br/images/hero.png");
    background-size:cover;
}
.hero-content h1{
    font-size:2.2rem;
}
.hero-content p{
    font-size:1.05rem;
}
.trust-grid{
    grid-template-columns:1fr;
}
.hero-benefits{
    display:grid;
    grid-template-columns:1fr 1fr;
}
}
/* ================= CTA ================= */
.cta{
    background:radial-gradient(circle at top, #002d45, #050811);
    color:#fff;
}
.cta-box{
    text-align:center;
    max-width:800px;
    margin:auto;
}
.cta-button{
    display:inline-block;
    margin-top:20px;
    padding:14px 26px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.cta-button:hover{
    transform:translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 118, 168, 0.4);
}
/* ================= RESPONSIVO ================= */
@media(max-width:991px){
    .hero-editorial{
        min-height:auto;
        padding:120px 0 180px;
    }
    .hero-grid{
        grid-template-columns:1fr;
        min-height:auto;
    }
    .hero-left h1{
        font-size:42px;
    }
    .hero-left p{
        font-size:18px;
    }
    .hero-micro{
        flex-direction:column;
        gap:20px;
    }
    .trust-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .trust-item{
        border-right:none;
    }
}
/* RESPONSIVO */
@media(max-width:900px){
    .audience-layout{
        grid-template-columns:1fr;
        gap:40px;
    }
    .audience-img{
        height:320px;
    }
}
.hero-actions{
    display:flex;
    gap:16px;
    margin-top:35px;
    flex-wrap:wrap;
}
.btn-primary{
    background:#0d6efd;
    color:#fff;
    border:none;
    border-radius:999px;
    padding:18px 30px;
    box-shadow:
    0 15px 35px rgba(13,110,253,.35);
}
.btn-primary:hover{
    transform:translateY(-4px);
    color:#fff;
}
.btn-primary i{
    transition:.3s;
}
.btn-primary:hover i{
    transform:translateX(4px);
}
.btn-ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    border-radius:999px;
    padding:18px 30px;
}
.btn-ghost:hover{
    background:rgba(255,255,255,.08);
    border-color:#fff;
    color:#fff;
}
/* ================= About ================= */
.about-home {
    padding: 100px 0;
    background: #fff;
}
.about-home .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}
.content-about {
    flex: 1;
    max-width: 600px;
}
.content-about h3 {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 15px;
}
.content-about h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
    margin-bottom: 25px;
}
.content-about p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 35px;
}
.hero-buttons {
    margin-top: 20px;
}
.img-office {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.img-office img {
    width: 100%;
    max-width: 560px;
    border-radius: 18px;
    display: block;
    object-fit: cover;
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
}
/* Responsivo */
@media (max-width: 991px) {
    .about-home .container {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    .content-about {
        max-width: 100%;
    }
    .hero-buttons {
        justify-content: center;
        display: flex;
    }
    .img-office {
        justify-content: center;
    }
    .img-office img {
        max-width: 100%;
    }
    .content-about h2 {
        font-size: 2rem;
    }
}
.services-home{
    padding:100px 0;
    background:#f8fafc;
}
.section-title{
    max-width:700px;
    margin:0 auto 60px;
    text-align:center;
}
.section-title h2{
    font-size:2.7rem;
    font-weight:700;
    color:#111;
    margin-bottom:15px;
}
.section-title p{
    color:#666;
    font-size:1.1rem;
    line-height:1.7;
}
.services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}
.service-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.06);
    transition:.35s;
    display:flex;
    flex-direction:column;
}
.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}
.service-icon{
    width:72px;
    height:72px;
    margin:30px auto 20px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),#6b7cff);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}
.service-card h3{
    text-align:center;
    font-size:1.45rem;
    color:#111;
    margin-bottom:18px;
    padding:0 25px;
}
.service-card p{
    text-align:center;
    color:#666;
    line-height:1.7;
    padding:0 25px;
    margin-bottom:30px;
}
.service-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    margin-top:auto;
    transition:.4s;
}
.service-card:hover img{
    transform:scale(1.05);
}
@media (max-width:1200px){
    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media (max-width:768px){
    .services-home{
        padding:70px 0;
    }
    .services-grid{
        grid-template-columns:1fr;
    }
    .section-title h2{
        font-size:2rem;
    }
}
.benefits{
    padding:110px 0;
    background:#fff;
}
.benefits .section-title{
    text-align:center;
    max-width:700px;
    margin:0 auto 80px;
}
.benefits .section-title span{
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:700;
    font-size:.9rem;
}
.benefits .section-title h2{
    margin:15px 0;
    font-size:2.8rem;
    color:#111;
}
.benefits .section-title p{
    color:#666;
    line-height:1.8;
}
.steps{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}
.steps::before{
    content:"";
    position:absolute;
    top:40px;
    left:12%;
    right:12%;
    height:3px;
    background:#dfe6ee;
    z-index:1;
}
.step{
    position:relative;
    text-align:center;
    z-index:2;
}
.step-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    border:8px solid #fff;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.step h3{
    font-size:1.35rem;
    color:#111;
    margin-bottom:15px;
}
.step p{
    color:#666;
    line-height:1.7;
    max-width:260px;
    margin:auto;
}
@media(max-width:991px){
    .steps{
        grid-template-columns:1fr;
        gap:60px;
    }
    .steps::before{
        display:none;
    }
}
.segments{
    padding:80px 0;
    background:#f8fafc;
}

.segments-grid{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:16px;
}

.enterprise{
    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;
    padding:20px 12px;
    text-align:center;
    transition:.3s;
}

.enterprise:hover{
    transform:translateY(-5px);
    border-color:var(--primary);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.enterprise-icon{
    width:52px;
    height:52px;
    margin:0 auto 14px;
    border-radius:50%;
    background:rgba(44,90,255,.08);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    transition:.3s;
}

.enterprise:hover .enterprise-icon{
    background:var(--primary);
    color:#fff;
}

.enterprise p{
    margin:0;
    font-size:.9rem;
    font-weight:600;
    line-height:1.35;
    color:#222;
}

@media(max-width:1400px){
    .segments-grid{
        grid-template-columns:repeat(4,1fr);
    }
}

@media(max-width:768px){
    .segments-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .segments-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .segments{
        padding:70px 0;
    }

}
.cta{
    background:
        linear-gradient(
            90deg,
            rgba(var(--primary-rgb), 1) 0%,
            rgba(var(--primary-rgb), .98) 18%,
            rgba(var(--primary-rgb), .92) 38%,
            rgba(var(--primary-rgb), .78) 55%,
            rgba(var(--primary-rgb), .55) 70%,
            rgba(var(--primary-rgb), .25) 85%,
            rgba(var(--primary-rgb), .05) 100%
        ),
        url("https://zentrixtec.com.br/images/consultants.png");

    background-size: cover;
    background-position: 70% center;
    background-repeat: no-repeat;
}

.cta .container{
    position:relative;
    z-index:2;
}

.cta-content{
    max-width:650px;
}

.cta-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:40px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    color:#fff;
    margin-bottom:25px;
}

.cta h2{
    color:#fff;
    font-size:3.2rem;
    line-height:1.2;
    margin-bottom:25px;
}

.cta p{
    color:rgba(255,255,255,.92);
    font-size:1.15rem;
    line-height:1.8;
    margin-bottom:40px;
}

.cta .btn-primary{
    background:#fff;
    color:var(--primary);
}
/* ================= BOTÕES ================= */
.btn-primary,
.btn-ghost,
.cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}
/* ================= RESPONSIVO ================= */
@media(max-width:1200px){
    .brands-grid{
        grid-template-columns:repeat(4,1fr);
    }
    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:991px){
    section{
        padding:80px 0;
    }
    .hero-left{
        max-width:100%;
    }
    .hero-left h1{
        font-size:46px;
    }
    .hero-left p{
        font-size:18px;
    }
    .hero-actions{
        flex-direction:column;
        align-items:flex-start;
    }
    .btn-primary,
    .btn-ghost{
        width:100%;
        justify-content:center;
    }
    .split-layout{
        grid-template-columns:1fr;
        gap:40px;
    }
    .feature-img{
        height:320px;
    }
    .why-grid{
        grid-template-columns:1fr;
    }
    .brands-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
@media(max-width:767px){
    .hero-editorial{
        padding:100px 0 160px;
    }
    .hero-left h1{
        font-size:36px;
        line-height:1.15;
    }
    .section-title h2,
    .split-content h2,
    .why-center h2,
    .cta-box h2{
        font-size:32px;
    }
    .trust-grid{
        grid-template-columns:1fr;
    }
    .services-grid{
        grid-template-columns:1fr;
    }
    .brands-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .brand-item{
        height:100px;
    }
    .hero-micro{
        gap:25px;
    }
    .cta-button{
        width:100%;
    }
}
/* ===================================================
   MOBILE
=================================================== */
@media (max-width: 768px) {

    html,
    body{
        overflow-x:hidden;
    }

    section{
        padding:70px 0;
    }

    /* Container */
    .container{
        padding-left:20px;
        padding-right:20px;
    }

    /* HERO */

    .hero-home{
        min-height:auto;
        background:
            linear-gradient(
                rgba(255,255,255,.94),
                rgba(255,255,255,.94)
            ),
            url("https://zentrixtec.com.br/images/hero.png");
        background-size:cover;
        background-position:center;
    }

    .hero-content{
        width:100%;
        padding:70px 0;
        text-align:center;
    }

    .hero-badge{
        margin:0 auto 25px;
        justify-content:center;
    }

    .hero-content h1{
        font-size:2rem;
        line-height:1.2;
        margin-bottom:20px;
    }

    .hero-content p{
        font-size:1rem;
        line-height:1.7;
        margin:0 auto 30px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons a,
    .btn-primary,
    .btn-secondary{
        width:100%;
        justify-content:center;
    }

    .hero-benefits{
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
        margin-top:35px;
    }

    .benefit{
        justify-content:flex-start;
    }

    /* ABOUT */

    .about-home .container{
        flex-direction:column;
        gap:40px;
        text-align:center;
    }

    .content-about h2{
        font-size:2rem;
    }

    .content-about p{
        font-size:1rem;
    }

    .img-office{
        justify-content:center;
    }

    /* TITULOS */

    .section-title{
        margin-bottom:45px;
    }

    .section-title h2{
        font-size:2rem;
        line-height:1.25;
    }

    .section-title p{
        font-size:1rem;
    }

    /* SERVIÇOS */

    .services-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .service-card img{
        height:200px;
    }

    /* BENEFÍCIOS */

    .steps{
        grid-template-columns:1fr;
        gap:45px;
    }

    .steps::before{
        display:none;
    }

    /* SEGMENTOS */

    .segments-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .enterprise{
        padding:18px 10px;
    }

    .enterprise p{
        font-size:.85rem;
    }

    /* CTA */

    .cta{
        background:
            linear-gradient(
                rgba(var(--primary-rgb), .95),
                rgba(var(--primary-rgb), .95)
            ),
            url("https://zentrixtec.com.br/images/consultants.png");

        background-position:center;
        background-size:cover;
    }

    .cta-content{
        max-width:100%;
        text-align:center;
    }

    .cta h2{
        font-size:2rem;
    }

    .cta p{
        font-size:1rem;
    }

    .cta .btn-primary{
        width:100%;
        justify-content:center;
    }

}

/* ===================================================
   CELULARES PEQUENOS
=================================================== */

@media (max-width:480px){

    .hero-content{
        padding:60px 0;
    }

    .hero-content h1{
        font-size:1.75rem;
    }

    .hero-content p{
        font-size:.95rem;
    }

    .content-about h2,
    .section-title h2,
    .benefits .section-title h2,
    .cta h2{
        font-size:1.75rem;
    }

    .segments-grid{
        grid-template-columns:1fr;
    }

    .step-icon{
        width:70px;
        height:70px;
        font-size:26px;
    }

    .service-card{
        border-radius:18px;
    }

}