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

.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:flex-start;

    background:#050505;

}

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

.hero-container{

    position: relative;

    left: -230px;

    width:100%;

    max-width:1280px;

    margin:0 auto;

    padding:40px 60px 220px;

    display:grid;

    grid-template-columns:650px 1fr;

    align-items:center;

    column-gap:150px;

    min-height:100vh;

}


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

.hero-left{

    max-width:650px;

    position:relative;

    z-index:20;

}

/*==========================================
    BADGE
==========================================*/

.badge{

    display:inline-block;

    padding:14px 28px;

    border:1px solid #00DA00;

    border-radius:40px;

    color:#00DA00;

    font-size:14px;

    letter-spacing:4px;

    font-weight:600;

    margin-bottom:35px;

}


/*==========================================
    TITLE
==========================================*/

.hero-left h1{

    display:flex;

    flex-direction:column;

    gap:18px;

    font-family:'Anton',sans-serif;

    font-size:108px;

    line-height:.88;

    letter-spacing:-1px;

    margin-bottom:12px;

}

.hero-left h1 .verde{

    display:inline-block;

    color:#00DA00;

    white-space:nowrap;

}


.hero-left h1 span{

    display:block;

    color:#00DA00;


}


.hero-left h2{

    font-size:46px;

    line-height:1.18;

    font-weight:700;

    margin-bottom:18px;

}


/*==========================================
    DESCRIPTION
==========================================*/

.hero-left p{

    font-size:19px;

    line-height:1.7;

    max-width:470px;

    color:#bdbdbd;

    margin-bottom:26px;

}

/*==========================================
    BUTTON
==========================================*/

.btn-principal{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:0 28px;

    width:auto;
    min-width:300px;

    height:64px;

    white-space:nowrap;

    background:linear-gradient(
    180deg,
   #00E000,
   #00C800
   );

    color:#000;

    border-radius:18px;

    font-weight:700;

    font-size:20px;

    text-decoration:none;

    transition:

    transform .30s ease,

    box-shadow .30s ease,

    background .30s ease;

    cursor:pointer;

}

.btn-principal:active{

transform:scale(.98);

}

.btn-principal:hover{

    transform:translateY(2px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.35),
    0 0 30px rgba(0,218,0,.28);

}

.btn-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    transition:transform .3s ease;

}

.btn-principal:hover .btn-arrow{

    transform:translateY(4px);

}

/*==========================================
    BENEFÍCIOS
==========================================*/

.beneficios{

    display:flex;

    gap:26px;

    margin-top:45px;

    color:white;

}


.beneficios div{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:19px;

}

.beneficios span{

    width:12px;

    height:12px;

    background:#00DA00;

    border-radius:50%;

}


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

.hero-right{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding-left:120px;

}

.hero-art{

    position:relative;

    width:640px;

    height:640px;

    animation:breath 8s ease-in-out infinite;

}

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

.hero-glow{

    position:absolute;

    width:760px;

    height:760px;

    left:50%;

    top:50%;

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

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(0,218,0,.16) 0%,

    rgba(0,218,0,.10) 35%,

    rgba(0,218,0,.04) 58%,

    transparent 82%);

    filter:blur(140px);

    z-index:0;

}

@keyframes pulseGlow{

    0%{

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

        opacity:.8;

    }

    50%{

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

        opacity:1;

    }

    100%{

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

        opacity:.8;

    }

}

.hero-scene{

    position:absolute;

    width:640px;

    height:auto;

    top:50%;

    left:-115px;

    transform:translateY(-50%);

    filter:

    drop-shadow(0 45px 70px rgba(0,0,0,.65))

    drop-shadow(0 0 40px rgba(255,120,0,.18))

    drop-shadow(0 0 90px rgba(255,160,0,.12));

    z-index:2;

    animation:floatHero 6s ease-in-out infinite;

}

@keyframes floatHero{

    0%{

        transform:translateY(-50%) rotate(-5deg);

    }

    50%{

        transform:translateY(-52%) rotate(-5deg);

    }

    100%{

        transform:translateY(-50%) rotate(-5deg);

    }

}

@keyframes breath{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.015);

    }

    100%{

        transform:scale(1);

    }

}

/*==========================================
    RAIOS
==========================================*/

.raio-left{

    left:-30px;

    bottom:90px;

    top:auto;

    width:130px;

    opacity:.04;

}

.raio-right{

    right:-30px;

    bottom:90px;

    top:auto;

    width:130px;

    opacity:.04;

}

.particulas{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:contain;

    opacity:.45;

    pointer-events:none;

    z-index:1;

}

/* ==========================================
   SEÇÃO HERO - FINAL
   Revisão concluída
========================================== */