/* =======================================
RESET
======================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



body{

    background:var(--black);

    color:var(--white);

    font-family:var(--text);

    overflow-x:hidden;

}



/* =======================================
CONTAINER
======================================= */

.container{

    width:min(1200px,90%);

    margin:auto;

}



/* =======================================
IMAGENS
======================================= */

img{

    width:100%;

    display:block;

}

.about img{

    width:50%;

    border-radius:30px;

    display:block;

    object-fit:cover;

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);

}


/* =======================================
LINKS
======================================= */

a{

    text-decoration:none;

    color:inherit;

}



/* =======================================
LISTAS
======================================= */

ul{

    list-style:none;

}



/* =======================================
SECTIONS
======================================= */

section{

    padding:

    var(--section)

    0;

}



/* =======================================
TÍTULOS
======================================= */

h1,h2,h3{

    font-family:var(--title);

    font-weight:400;

    text-transform:uppercase;

    line-height:1;

}



h1{

    font-size:

    var(--hero-title);

}



h2{

    font-size:

    var(--title-size);

}



p{

    color:#d5d5d5;

    line-height:1.8;

}



/* =======================================
BOTÕES
======================================= */

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

    15px 40px;

    background:

    var(--purple);

    color:white;

    border-radius:

    999px;

    transition:

    var(--transition);

}



.btn-primary:hover{

    transform:

    translateY(-4px);

    box-shadow:

    var(--glow);

}



.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

    15px 40px;

    border:

    1px solid
    white;

    border-radius:

    999px;

    transition:

    var(--transition);

}



.btn-secondary:hover{

    background:white;

    color:black;

}



/* =======================================
SELEÇÃO
======================================= */

::selection{

    background:

    var(--purple);

    color:white;

}

/* =======================================
HEADER
======================================= */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    background:rgba(8,8,8,.45);

    backdrop-filter:blur(15px);

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

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.logo{

    font-family:var(--title);

    font-size:2rem;

    letter-spacing:2px;

    color:white;

}

.menu{

    display:flex;

    gap:30px;

}

.menu a{

    font-size:1.9rem;

    font-weight:300;

    letter-spacing:8px;

    text-transform:uppercase;

    color:white;

}

.menu a:hover{

    color:var(--purple);

    transform:scale(1.05);

}

.menu a:hover{

    color:var(--pink);
    transform:translateX(8px);

}

.btn-header{

    background:var(--purple);

    color:white;

    padding:12px 28px;

    border-radius:50px;

    transition:.3s;

}

.btn-header:hover{

    transform:translateY(-3px);

    box-shadow:var(--glow);

}

.menu-mobile{

    display:none;

}



/* =======================================
HERO
======================================= */

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:50px;

    width:min(1200px,90%);

    margin:auto;

}

.hero-left{

    z-index:2;

}

.subtitle{

    display:inline-block;

    margin-bottom:20px;

    color:var(--green);

    letter-spacing:3px;

}

.hero h1{

    margin-bottom:25px;

}

.hero h1 span{

    color:var(--purple);

}

.hero p{

    max-width:500px;

    margin-bottom:35px;

    font-size:1.1rem;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.hero-right{

    position:relative;

}

.hero-right img{

    width:100%;

    border-radius:25px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.4);

}



/* =======================================
FUNDO GRADIENTE
======================================= */

.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:

    radial-gradient(

    var(--purple),

    transparent 70%

    );

    top:-120px;

    right:-100px;

    opacity:.35;

    filter:blur(90px);

}



.hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:

    radial-gradient(

    var(--pink),

    transparent 70%

    );

    bottom:0;

    left:-100px;

    opacity:.25;

    filter:blur(80px);

}



/* =======================================
MARQUEE
======================================= */

.marquee{

    overflow:hidden;

    border-top:1px solid rgba(255,255,255,.08);

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

    padding:20px 0;

    white-space:nowrap;

    background:#111;

}

.marquee div{

    display:inline-block;

    animation:marquee 25s linear infinite;

    font-family:var(--title);

    font-size:2rem;

    color:var(--pink);

    letter-spacing:3px;

}

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* =======================================
HEADER SCROLL
======================================= */

.header.scroll{

    background:rgba(8,8,8,.95);

    backdrop-filter:blur(20px);

    box-shadow:

    0 10px 30px rgba(0,0,0,.25);

}



/* =======================================
ANIMAÇÕES INICIAIS
======================================= */

.services article,
.gallery .item,
.about,
.steps div,
.cards article,
details,
.cta,
.section-title{

    opacity:0;

    transform:translateY(50px);

    transition:.8s;

}



.show{

    opacity:1 !important;

    transform:translateY(0) !important;

}

/* =======================================
LIGHTBOX
======================================= */

.lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:99999;

}



.lightbox.active{

    opacity:1;

    visibility:visible;

}



.lightbox-image{

    width:90%;

    max-width:800px;

    max-height:90vh;

    border-radius:20px;

    box-shadow:

    0 0 40px rgba(0,0,0,.5);

}



.close-lightbox{

    position:absolute;

    top:30px;

    right:40px;

    color:white;

    font-size:3rem;

    cursor:pointer;

}

/* =======================================
FAQ
======================================= */

#faq details{

    background:#111;

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

    border-radius:20px;

    padding:24px;

    margin-bottom:18px;

    transition:.3s;

}

#faq details:hover{

    border-color:var(--purple);

    transform:translateX(8px);

}

#faq summary{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

#faq summary::after{

    content:"+";

    color:var(--purple);

    font-size:2rem;

    transition:.3s;

}

#faq details[open] summary::after{

    transform:rotate(45deg);

}

#faq summary::-webkit-details-marker{

    display:none;

}

#faq p{

    margin-top:30px;

}

#faq span{

    font-size:1.5rem;

    color:var(--purple);

    letter-spacing:4px;

    text-transform:uppercase;

}

#faq h2{

    font-size:3rem;

    line-height:1;

    margin:10px 0 50px;

    text-transform:uppercase;

}

/* =======================================
SERVIÇOS
======================================= */

.services{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.services article{

    background:#111;

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

    border-radius:25px;

    padding:35px;

    transition:.35s;

}

.services article:hover{

    transform:translateY(-8px);

    border-color:var(--purple);

    box-shadow:
    0 0 25px rgba(154,0,255,.2);

}

.services h3{

    font-size:2rem;

    margin-bottom:15px;

    color:white;

}

.services p{

    color:#bdbdbd;

    margin-bottom:20px;

}

.services article::after{

    content:"→";

    font-size:2rem;

    color:var(--pink);

}

#servicos span{

    display:block;

    font-size:1.8rem;

    font-weight:600;

    color:var(--green);

    letter-spacing:3px;

    margin-bottom:20px;

}

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

.about{

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:80px;

}



.about img{

    width:100%;

    max-width:500px;

    border-radius:30px;

    display:block;

    margin:auto;

}



.about span{

    display:block;

    color:var(--purple);

    font-size:1.2rem;

    letter-spacing:6px;

    margin-bottom:20px;

    text-transform:uppercase;

}



.about h2{

    font-family:var(--title);

    font-size:5rem;

    line-height:.95;

    text-transform:uppercase;

    margin-bottom:30px;

}



.about p{

    font-size:1.15rem;

    color:#d5d5d5;

    max-width:520px;

    line-height:1.8;

}

/* =======================================
PROCESSO
======================================= */

#process{

    text-align:center;

}

#process .section-subtitle{

    font-size:1.5rem;

    color:var(--purple);

    letter-spacing:4px;

    text-transform:uppercase;

}

#process h2{

    font-size:5.5rem;

    line-height:1;

    margin:10px 0 60px;

    text-transform:uppercase;

}

.timeline{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    flex-wrap:nowrap;

    margin-top:70px;

}

.step{

    width:180px;

    height:220px;

    background:#111;

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

    border-radius:25px;

    padding:30px;

    text-align:center;

    z-index:2;

}

.step:hover{

    transform:translateY(-8px);

    border-color:var(--purple);

    box-shadow:0 0 25px rgba(154,0,255,.25);

}

.number{

    font-size:3rem;

    color:var(--purple);

    font-family:var(--title);

    margin-bottom:20px;

}

.connector{

    width:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#a100ff;

    font-size:2rem;

    font-weight:bold;

}

.connector::before{

    content:"➜";

}

.testimonials{

    text-align:center;

}

.testimonials h2{

    font-size:5rem;

    margin-bottom:70px;

}

.cards{

    display:grid;

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

    gap:25px;

}



.cards article{

    background:#111;

    padding:35px;

    border-radius:25px;

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

}



.cards article:hover{

    transform:translateY(-8px);

    border-color:var(--purple);

}



.cards p{

    font-size:1.2rem;

    margin-top:20px;

}



.cta a{

    display:inline-block;

    margin-top:30px;

    padding:18px 42px;

    background:var(--purple);

    border-radius:50px;

    color:white;

    text-decoration:none;

    transition:.3s;

}

.cta a:hover{

    transform:translateY(-5px);

    box-shadow:0 0 20px rgba(154,0,255,.35);

}

.cta{

    padding:180px 0;

}

footer{

    padding:120px 0 60px;

    text-align:center;

}

footer h2{

    font-size:5rem;

}

footer p{

    color:#bdbdbd;

    margin:15px 0;

}

footer nav{

    margin:25px 0;

}

footer nav a{

    margin:0 15px;

    color:white;

    text-decoration:none;

}

footer nav a:hover{

    color:var(--purple);

}

footer{

    border-top:1px solid rgba(255,255,255,.08);

}

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

.cta span{

    display:block;

    font-size:1.7rem;

    color:var(--purple);

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.cta h2{

    font-size:7rem;

    line-height:.95;

    text-transform:uppercase;

    margin-bottom:25px;

    max-width:1100px;

}

.cta p{

    font-size:1.5rem;

    color:#d0d0d0;

    margin-bottom:40px;

}