@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

:root{

--orange:#ff6b00;
--black:#050505;
--white:#ffffff;
--gray:#d4d4d8;

}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
overflow-x:hidden;

}

.container{

width:90%;
max-width:1300px;
margin:auto;

}

header{

position:fixed;
top:0;
left:0;

width:100%;

background:rgba(0,0,0,.75);

backdrop-filter:blur(12px);

border-bottom:1px solid rgba(255,255,255,.05);

z-index:999;

}

.header-content{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

height:60px;

}

nav{

display:flex;
gap:40px;

}

nav a{

color:white;
text-decoration:none;
font-weight:500;

}

.btn-menu{

background:var(--orange);

padding:14px 22px;

border-radius:8px;

color:white;

text-decoration:none;

font-weight:600;

}

.hero{

min-height:100vh;

display:flex;

align-items:center;

background-image:url('../img/fundo-1.png');

background-size:cover;

background-position:center;

position:relative;

}

.hero::before{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.80),
rgba(0,0,0,.20)
);

}

.hero-content{

position:relative;

z-index:2;

max-width:700px;

}

.hero-tag{

color:var(--orange);

font-weight:700;

display:block;

margin-bottom:20px;

}

.hero h1{

font-size:76px;

line-height:1.05;

color:white;

margin-bottom:25px;

}

.hero h1 span{

display:block;

color:var(--orange);

}

.hero p{

color:#e4e4e7;

font-size:24px;

line-height:1.8;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:15px;

}

.btn-primary{

background:var(--orange);

padding:18px 32px;

border-radius:10px;

color:white;

text-decoration:none;

font-weight:600;

display:inline-block;

}

.btn-secondary{

border:1px solid rgba(255,255,255,.25);

padding:18px 32px;

border-radius:10px;

color:white;

text-decoration:none;

display:inline-block;

}
/* ===================================
DIFERENCIAIS
=================================== */

.diferenciais{

    position:relative;

}

.bg-diferenciais{

    width:100%;
    display:block;

}

.diferenciais-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;

}

.diferenciais-texto{

    max-width:600px;

    margin-left:50px;

}

.diferenciais-texto span{

    color:#ff6b00;

    font-weight:700;

    letter-spacing:1px;

}

.diferenciais-texto h2{

    font-size:64px;

    line-height:1.1;

    color:white;

    margin:20px 0;

}

.diferenciais-texto p{

    font-size:22px;

    line-height:1.8;

    color:#e4e4e7;

}

/* ===================================
CLIENTES
=================================== */

.clientes{

    padding:120px 0;

    background:#f8f8f8;

    overflow:hidden;

}

.clientes h2{

    font-size:56px;

    margin:20px 0;

    color:#111;

}

.clientes-desc{

    font-size:20px;

    color:#52525b;

    margin-bottom:60px;

}

.clientes-slider{

    width:100%;

    overflow:hidden;

}

.clientes-track{

    display:flex;

    align-items:center;

    gap:120px;

    width:max-content;

    animation:scrollClientes 25s linear infinite;

}

.clientes-track img{

    height:120px;

    width:auto;

    opacity:.85;

    transition:.3s;

}

.clientes-track img:hover{

    opacity:1;

    transform:scale(1.05);

}

@keyframes scrollClientes{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}
/* ===================================
SOBRE
=================================== */

.sobre{

    padding:120px 0;

    background:white;

}

.sobre h2{

    font-size:56px;

    line-height:1.2;

    margin:20px 0 30px;

    max-width:800px;

}

.sobre p{

    font-size:20px;

    line-height:2;

    color:#52525b;

    max-width:900px;

    margin-bottom:25px;

}

/* ===================================
CTA
=================================== */

.cta{

    padding:120px 0;

    background-image:url('../img/fundo-4.png');

    background-size:cover;

    background-position:center;

    position:relative;

}

.cta::before{

    content:'';

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

}

.cta-box{

    position:relative;

    z-index:2;

    max-width:700px;

}

.cta h2{

    color:white;

    font-size:68px;

    line-height:1.1;

    margin-bottom:25px;

}

.cta p{

    color:#e4e4e7;

    font-size:22px;

    line-height:1.8;

    margin-bottom:40px;

}

/* ===================================
FOOTER
=================================== */

footer{

    background:#050505;

    padding:70px 0;

    text-align:center;

}

.footer-logo{

    height:80px;

    margin-bottom:25px;

}

.footer-content p{

    color:#a1a1aa;

    max-width:500px;

    margin:auto;

    line-height:1.8;

}

/* ===================================
TABLET
=================================== */

@media(max-width:992px){

    .hero h1{
        font-size:58px;
    }

    .hero p{
        font-size:20px;
    }

    .diferenciais-texto{
        max-width:450px;
        margin-left:30px;
    }

    .diferenciais-texto h2{
        font-size:46px;
    }

    .diferenciais-texto p{
        font-size:18px;
    }

    .clientes h2{
        font-size:42px;
    }

}

/* ===================================
CELULAR
=================================== */

@media(max-width:768px){

    /* HEADER */

    nav,
    .btn-menu{
        display:none;
    }

    .header-content{
        justify-content:center;
    }

    .logo{
        height:50px;
    }

    /* HERO */

    .hero{
        min-height:100vh;
        padding:120px 0 60px;
        background-position:center right;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-tag{
        font-size:13px;
    }

    .hero h1{
        font-size:42px;
        line-height:1.1;
    }

    .hero p{
        font-size:18px;
        line-height:1.6;
    }

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

    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }

    /* DIFERENCIAIS */

    .bg-diferenciais{
        min-height:500px;
        object-fit:cover;
    }

    .diferenciais-overlay{
        align-items:flex-start;
        padding-top:50px;
    }

    .diferenciais-texto{
        margin-left:20px;
        max-width:320px;
    }

    .diferenciais-texto h2{
        font-size:30px;
        margin:15px 0;
    }

    .diferenciais-texto p{
        font-size:16px;
        line-height:1.6;
    }

    /* CLIENTES */

    .clientes{
        padding:80px 0;
    }

    .clientes h2{
        font-size:32px;
        line-height:1.2;
    }

    .clientes-desc{
        font-size:16px;
        margin-bottom:40px;
    }

    .clientes-track{
        gap:50px;
    }

    .clientes-track img{
        height:70px;
    }

}