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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Manrope',sans-serif;
    background:#FFFFFF;
    color:#2A2A2A;
    overflow-x:hidden;
    line-height:1.6;

    background-image:

radial-gradient(
circle at top left,
rgba(107,76,246,.05),
transparent 35%
),

radial-gradient(
circle at bottom right,
rgba(107,76,246,.05),
transparent 30%
);

background-attachment:fixed;

}

body::before{

content:"";

position:fixed;

width:100%;

height:100%;

background-image:

linear-gradient(
rgba(0,0,0,.02) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(0,0,0,.02) 1px,
transparent 1px
);

background-size:80px 80px;

z-index:-10;

opacity:.35;

pointer-events:none;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;
    color:inherit;

}

button{

    font-family:inherit;
    cursor:pointer;
    border:none;
    background:none;

}

ul{

    list-style:none;

}


/*==================================================
            VARIÁVEIS
==================================================*/

:root{

    --primary:#6B4CF6;
    --primary-light:#8E73FF;
    --secondary:#F5F2FF;

    --text:#242424;
    --text-light:#6B6B6B;

    --white:#FFFFFF;

    --border:#ECECEC;

    --shadow:0 15px 45px rgba(38,38,38,.07);

    --radius:24px;

    --transition:.35s;

    --container:1280px;

}


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

.container{

    width:min(90%,var(--container));
    margin:auto;

}


/*==================================================
                SECTION
==================================================*/

.section{

    padding:180px 0;

}


/*==================================================
            BACKGROUND
==================================================*/

.background-blur{

    position:fixed;

    border-radius:50%;

    filter:blur(180px);

    z-index:-5;

    opacity:.45;

}

.background-blur-left{

    width:500px;
    height:500px;

    background:#A88BFF;

    left:-220px;
    top:-150px;

}

.background-blur-right{

    width:650px;
    height:650px;

    background:#E7E0FF;

    right:-250px;
    top:450px;

}


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

.header{

    position:fixed;

    width:100%;

    left:0;

    top:0;

    z-index:999;

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(0,0,0,.04);

}


.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:92px;

}


.logo{

    display:flex;
    align-items:center;

}

.logo img{

    width:100%;
    max-width:160px;   
    height:auto;
    display:block;

}


.nav-menu{

    display:flex;

    align-items:center;

    gap:48px;

}


.nav-menu a{

    color:var(--text);

    font-weight:600;

    transition:var(--transition);

    position:relative;

}


.nav-menu a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:var(--primary);

    left:0;

    bottom:-8px;

    transition:.3s;

}


.nav-menu a:hover{

    color:var(--primary);

}


.nav-menu a:hover::after{

    width:100%;

}


.menu-mobile{

    display:none;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    font-weight:700;

    transition:.35s;

}


.btn-primary{

    background:linear-gradient(135deg,var(--primary),var(--primary-light));

    color:#FFF;

    box-shadow:0 20px 45px rgba(107,76,246,.25);

}


.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 30px 60px rgba(107,76,246,.35);

}


.btn-secondary{

    border:1px solid var(--border);

    color:var(--text);

    background:#FFF;

}


.btn-secondary:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}


.btn-light{

    background:#FFF;

    color:var(--primary);

}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding:180px 0 140px;

}


.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:140px;

}


.hero-content{

    position:relative;

    z-index:10;

}


.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:#F3EEFF;

    color:var(--primary);

    font-weight:700;

    margin-bottom:30px;

}


.hero h1{

    font-size:74px;

    letter-spacing:-2px;

    max-width:650px;

    line-height:1.08;

    color:var(--text);

    margin-bottom:28px;

    font-weight:800;

}


.hero h1 span{

    color:var(--primary);

}


.hero p{

    max-width:620px;

    line-height:1.9;

    color:var(--text-light);

    font-size:20px;

    margin-bottom:42px;

}


.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:50px;

}


.hero-benefits{

    display:grid;

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

    gap:18px;

}


.benefit-item{

    display:flex;

    align-items:center;

    gap:14px;

    font-weight:600;

    color:var(--text);

}

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

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:720px;

}


.hero-visual::before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(107,76,246,.18),
    transparent 72%);

    z-index:-2;

}


.hero-visual::after{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    border-radius:50%;

    background:#EFEAFF;

    filter:blur(120px);

    z-index:-3;

}


.hero-image{

    width:100%;

    max-width:760px;

    animation:float 7s ease-in-out infinite;

    position:relative;

    z-index:5;

    filter:drop-shadow(
0 45px 90px rgba(107,76,246,.16)
);

}


/*==================================================
            FLOATING CARDS
==================================================*/

.floating-card{

    position:absolute;

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

    border-radius:30px;

    padding:28px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    backdrop-filter:blur(25px);

    backdrop-filter:blur(25px);

    transition:.4s;

    z-index:20;

}


.floating-card:hover{

    transform:translateY(-8px);

}


.card-title{

    display:block;

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

    margin-bottom:8px;

}


.floating-card strong{

    display:block;

    font-size:2rem;

    color:var(--text);

    margin-bottom:6px;

}


.floating-card small{

    color:var(--text-light);

    font-size:.92rem;

}


.performance-card{

    top:50px;

    left:-10px;

    width:220px;

}


.security-card{

    right:-20px;

    top:180px;

    width:240px;

}


.hosting-card{

    bottom:80px;

    left:40px;

    width:230px;

}


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

.section-header{

    max-width:720px;

    margin-bottom:80px;

}


.section-header.center{

    text-align:center;

    margin-left:auto;

    margin-right:auto;

}


.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    background:#F3EEFF;

    color:var(--primary);

    border-radius:999px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:24px;

}


.section-header h2{

    font-size:3rem;

    line-height:1.2;

    margin-bottom:20px;

    color:var(--text);

    font-weight:800;

}


.section-header p{

    font-size:1.1rem;

    color:var(--text-light);

}


/*==================================================
                ABOUT
==================================================*/

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}


.about-content h3{

    font-size:2.6rem;

    line-height:1.2;

    margin-bottom:28px;

    font-weight:800;

    color:var(--text);

}


.about-content p{

    font-size:1.05rem;

    color:var(--text-light);

    margin-bottom:24px;

}


.about-image{

    position:relative;

}


.about-image::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    background:linear-gradient(
    135deg,
    rgba(107,76,246,.15),
    rgba(107,76,246,.02));

    border-radius:32px;

    transform:rotate(-4deg);

    z-index:-1;

}


.about-image img{

    border-radius:28px;

    box-shadow:0 30px 70px rgba(0,0,0,.08);

}


/*==================================================
            NUMBERS
==================================================*/

.numbers-grid{

    display:grid;

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

    gap:28px;

    margin-top:90px;

}


.number-card{

    background:#FFFFFF;

    border-radius:28px;

    padding:42px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.05);

    transition:.4s;

}


.number-card:hover{

    transform:translateY(-10px);

}


.number-card h4{

    color:var(--primary);

    font-size:2.8rem;

    margin-bottom:12px;

}


.number-card span{

    color:var(--text-light);

    font-weight:600;

}


/*==================================================
            SERVICES
==================================================*/

.services{

    background:#FBFBFD;

}


.services-grid{

    display:grid;

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

    gap:42px;

}


.service-card{

    background:#FFFFFF;

    border-radius:30px;

    padding:55px;

    transition:.45s;

    border:1px solid #EEEEEE;

    position:relative;

    overflow:hidden;

}


.service-card::before{

    content:"";

    position:absolute;

    width:100%;

    height:5px;

    background:linear-gradient(
    90deg,
    var(--primary),
    #A687FF);

    left:0;

    top:0;

    transform:scaleX(0);

    transition:.4s;

    transform-origin:left;

}


.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(0,0,0,.08);

}


.service-card:hover::before{

    transform:scaleX(1);

}


.service-icon{

    width:74px;

    height:74px;

    border-radius:20px;

    background:#F4F0FF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:2rem;

    margin-bottom:28px;

}


.service-card h3{

    font-size:1.55rem;

    margin-bottom:18px;

    color:var(--text);

}


.service-card p{

    color:var(--text-light);

    line-height:1.8;

}

/*==================================================
                BENEFITS
==================================================*/

.benefits{

    position:relative;

    overflow:hidden;

}

.benefits-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:center;

}

.benefits-content h2{

    font-size:3rem;

    line-height:1.2;

    margin:22px 0 28px;

    font-weight:800;

}

.benefits-content p{

    color:var(--text-light);

    margin-bottom:45px;

    font-size:1.08rem;

}

.benefits-list{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.benefits-list li{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.icon-check{

    width:56px;

    height:56px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    flex-shrink:0;

    position:relative;

    box-shadow:0 15px 35px rgba(107,76,246,.18);

}

.icon-check::before{

    content:"✓";

    color:#FFF;

    font-size:22px;

    font-weight:bold;

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

}

.benefits-list strong{

    display:block;

    margin-bottom:6px;

    font-size:1.1rem;

}

.benefits-list span{

    color:var(--text-light);

    line-height:1.7;

}

.benefits-visual{

    position:relative;

}

.benefits-visual img{

    border-radius:30px;

    box-shadow:0 35px 80px rgba(0,0,0,.08);

}

.benefits-visual::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:#E8DEFF;

    border-radius:50%;

    filter:blur(100px);

    right:-80px;

    bottom:-80px;

    z-index:-1;

}


/*==================================================
                PROCESS
==================================================*/

.process{

    background:#FBFBFD;

}

.timeline{

    margin-top:80px;

    display:flex;

    flex-direction:column;

    gap:35px;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:61px;

    top:40px;

    bottom:40px;

    width:2px;

    background:#E5DFFF;

    z-index:0;


}

.timeline-item{

    display:flex;

    gap:55px;

    align-items:flex-start;

    background:#FFF;

    border-radius:28px;

    padding:35px;

    box-shadow:0 18px 45px rgba(0,0,0,.05);

    transition:.4s;

    position:relative;

    z-index:2;

}

.timeline-item:hover{

    transform:translateX(8px);

}

.timeline-number{

    width:80px;

    height:80px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    font-weight:800;

    flex-shrink:0;

    z-index:3;

    position:relative;

}

.timeline-item h3{

    margin-bottom:12px;

    font-size:1.5rem;

}

.timeline-item p{

    color:var(--text-light);

    line-height:1.8;

}


/*==================================================
                MANIFESTO
==================================================*/

.manifesto{

    padding:180px 0;

    background:linear-gradient(
        135deg,
        #5B33F0,
        #8E73FF
    );

    position:relative;

    overflow:hidden;

}

.manifesto::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

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

    right:-250px;

    top:-250px;

}

.manifesto-content{

    max-width:760px;

    position:relative;

    z-index:2;

}

.manifesto-content span{

    color:#D8CFFF;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.manifesto-content h2{

    font-size:4rem;

    color:#FFF;

    line-height:1.15;

    margin:30px 0;

    font-weight:800;

}

.manifesto-content p{

    color:#F3F0FF;

    font-size:1.15rem;

    line-height:2;

    margin-bottom:50px;

}


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

.cta{

    padding-top:140px;

}

.cta-box{

    background:#FFF;

    border-radius:40px;

    padding:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    box-shadow:0 30px 70px rgba(0,0,0,.07);

    position:relative;

    overflow:hidden;

}

.cta-box::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:#EEE6FF;

    filter:blur(100px);

    right:-100px;

    bottom:-100px;

}

.cta-text{

    max-width:650px;

    position:relative;

    z-index:2;

}

.cta-text span{

    color:var(--primary);

    font-weight:700;

}

.cta-text h2{

    font-size:3rem;

    margin:20px 0;

    line-height:1.2;

}

.cta-text p{

    color:var(--text-light);

}

.cta-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

    position:relative;

    z-index:2;

}


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

.faq{

    background:#FBFBFD;

}

.faq-container{

    max-width:900px;

    margin:80px auto 0;

}

.faq-item{

    background:#FFF;

    border-radius:24px;

    margin-bottom:24px;

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

    overflow:hidden;

    transition:.35s;

}

.faq-item:hover{

    transform:translateY(-4px);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 35px;

    font-size:1.1rem;

    font-weight:700;

}

.faq-icon{

    font-size:1.7rem;

    color:var(--primary);

    transition:.35s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 35px 30px;

    color:var(--text-light);

    line-height:1.8;

}

.faq-item.active .faq-answer{

    max-height:300px;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

}


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

.footer{

    background:#171717;

    color:#FFF;

    padding-top:150px;

}

.footer-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.5fr;

    gap:60px;

    padding-bottom: 100px;

}

.footer-brand img{

    width:180px;

    margin-bottom:28px;

}

.footer-brand p{

    color:#BDBDBD;

    line-height:1.9;

}

.footer h3{

    margin-bottom:28px;

    font-size:1.15rem;

}

.footer ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer li{

    color:#BDBDBD;

}

.footer a{

    color:#BDBDBD;

    transition:.3s;

}

.footer a:hover{

    color:#FFFFFF;

}

.footer-social{

    display:flex;

    gap:18px;

    margin-top:28px;

}

.footer-bottom{

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

    padding:30px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-bottom p{

    color:#9B9B9B;

}

.footer-bottom-links{

    display:flex;

    gap:25px;

}


/*==================================================
                SCROLL TOP
==================================================*/

.scroll-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#FFF;

    font-size:1.4rem;

    box-shadow:0 20px 40px rgba(107,76,246,.3);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

}


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

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
                RESPONSIVO
==================================================*/

@media(max-width:1200px){

.hero-grid,
.about-grid,
.benefits-grid{

grid-template-columns:1fr;

}

.hero-content{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-benefits{

max-width:650px;

margin:auto;

margin-top:40px;

}

.hero-visual{

margin-top:70px;

}

.cta-box{

flex-direction:column;

text-align:center;

}

.footer-top{

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

}

}

@media(max-width:992px){

.section{

padding:100px 0;

}

.hero h1{

font-size:52px;

}

.section-header h2{

font-size:2.5rem;

}

.manifesto-content h2{

font-size:3rem;

}

.nav-menu{

display:none;

}

.menu-mobile{

display:flex;

flex-direction:column;

gap:6px;

}

.menu-mobile span{

width:28px;

height:3px;

background:#333;

border-radius:999px;

}

.services-grid{

grid-template-columns:1fr;

}

.numbers-grid{

grid-template-columns:1fr;

}

.footer-top{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

gap:20px;

text-align:center;

}

}

@media(max-width:768px){

.hero{

padding-top:140px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.hero-benefits{

grid-template-columns:1fr;

}

.timeline-item{

flex-direction:column;

}

.timeline::before{

display:none;

}

.manifesto{

padding:120px 0;

}

.manifesto-content h2{

font-size:2.5rem;

}

.cta-box{

padding:45px;

}

.cta-text h2{

font-size:2.2rem;

}

}

@media(max-width:576px){

.container{

width:92%;

}

.hero h1{

font-size:36px;

}

.section-header h2{

font-size:2rem;

}

.about-content h3{

font-size:2rem;

}

.benefits-content h2{

font-size:2rem;

}

.manifesto-content h2{

font-size:2rem;

}

.cta-text h2{

font-size:2rem;

}

.btn{

width:100%;

}

.scroll-top{

right:20px;

bottom:20px;

}

}