/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{
    padding-top:30px;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    color:#fff;

    background:
    radial-gradient(circle at top right,#8B5CF6 0%,transparent 25%),
    radial-gradient(circle at bottom left,#2B0F55 0%,transparent 45%),
    linear-gradient(180deg,#0D0817,#12071F);

}

/* LINKS */

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

img{
    display:block;
    max-width:100%;
}

/* CONTAINER */

.container{

    width:min(1280px,92%);
    margin:auto;

}

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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    backdrop-filter:blur(18px);

    background:rgba(13,8,23,.72);

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

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

    transition:.35s;

}

.nav{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*==========================================
LOGO
==========================================*/

.logo{

    font-size:40px;

    font-weight:800;

    letter-spacing:-1px;

    cursor:pointer;

}

.logo span{

    color:#A855F7;

}

/*==========================================
MENU
==========================================*/

.menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.menu a{

    color:#fff;

    opacity:.88;

    font-weight:600;

    transition:.30s;

}

.menu a:hover{

    color:#C084FC;

    opacity:1;

}



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

.btn-login,
.btn-outline{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    padding:18px 34px;

    border-radius:14px;

    font-size:17px;

    font-weight:700;

    transition:.30s;

}

.btn-login{

    color:#fff;

    background:linear-gradient(
        90deg,
        #7C3AED,
        #A855F7
    );

    box-shadow:
    0 18px 40px rgba(124,58,237,.35);

}

.btn-login:hover{

    transform:translateY(-4px);

    box-shadow:
    0 28px 55px rgba(124,58,237,.55);

}

.btn-outline{

    color:#fff;

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

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

}

.btn-outline:hover{

    transform:translateY(-4px);

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

    border-color:#A855F7;

}


/*==========================================
HERO
==========================================*/
/*==============================
NOTEBOOK FLUTUANDO
==============================*/

/*==============================
EFEITO HOVER NOTEBOOK
==============================*/

.hero-image{

    position:relative;

    top:-60px;

    transition:transform .5s ease;

}

.hero-image img{

    width:115%;

    max-width:none;

    transition:all .45s ease;

    filter:
        drop-shadow(0 35px 80px rgba(0,0,0,.45))
        drop-shadow(0 0 35px rgba(168,85,247,.25));

}

/* Hover */

.hero-image:hover img{

    transform:
        scale(1.03)
        rotate(-1deg);

    filter:
        drop-shadow(0 40px 90px rgba(0,0,0,.50))
        drop-shadow(0 0 60px rgba(168,85,247,.55));

}

@keyframes notebookFloat{

    0%{

        transform:translateY(0px) rotate(0deg);

    }

    25%{

        transform:translateY(-6px) rotate(.3deg);

    }

    50%{

        transform:translateY(-12px) rotate(0deg);

    }

    75%{

        transform:translateY(-6px) rotate(-.3deg);

    }

    100%{

        transform:translateY(0px) rotate(0deg);

    }

}

.hero{

    min-height:calc(100vh - 82px);

    display:flex;

    align-items:center;

    padding:110px 0 50px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

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

.badge{

    display:inline-block;

    padding:12px 22px;

    border-radius:30px;

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

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

    font-size:14px;

    font-weight:600;

}

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

.hero h1{

    margin:28px 0;

    font-size:74px;

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:800;

}

.hero h1 span{

    color:#A855F7;

}

.hero p{

    max-width:580px;

    color:#d9d9d9;

    font-size:22px;

    line-height:1.8;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:35px;

    justify-content:flex-start;

    align-items:center;

}

.btn-login,
.btn-outline{

    width:auto;

    min-width:240px;

    max-width:280px;

    padding:18px 36px;

    text-align:center;

}

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

.hero-image{

    position:relative;

}

.hero-image::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    background:#7C3AED;

    filter:blur(180px);

    opacity:.22;

    left:50%;

    top:50%;

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

    z-index:-1;

}

.hero-image img{

    width:115%;

    max-width:950px;

    margin-left:-40px;

    filter:

    drop-shadow(
        0 40px 80px
        rgba(124,58,237,.45)
    );

}

/*==========================================
ALERTAS
==========================================*/

.alert{

    width:min(500px,90%);

    margin:110px auto 20px;

    padding:16px;

    text-align:center;

    border-radius:14px;

    background:#991b1b;

}


/*==========================================
ESTATÍSTICAS
==========================================*/

.stats{

    padding:70px 0;

}

.stats-grid{

    display:grid;

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

    gap:25px;

}

.stat-card{

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

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

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:#A855F7;

    box-shadow:0 25px 55px rgba(124,58,237,.25);

}

.stat-card h2{

    font-size:44px;

    color:#A855F7;

    margin-bottom:10px;

}

.stat-card p{

    color:#d6d6d6;

}

/*==========================================
SEÇÕES
==========================================*/

.section{

    padding:100px 0;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:48px;

    margin-bottom:15px;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:#cfcfcf;

    line-height:1.8;

}

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

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.card{

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

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

    border-radius:22px;

    padding:35px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    border-color:#A855F7;

    box-shadow:0 25px 55px rgba(124,58,237,.20);

}

.card-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#7C3AED,#A855F7);

    font-size:34px;

    margin-bottom:25px;

}

.card h3{

    font-size:24px;

    margin-bottom:15px;

}

.card p{

    color:#cfcfcf;

    line-height:1.8;

}

/*==========================================
MARKETPLACE
==========================================*/

.marketplace{

    padding:100px 0;

}

.products{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.product{

    overflow:hidden;

    background:#171025;

    border-radius:22px;

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

    transition:.35s;

}

.product:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(124,58,237,.20);

}

.product img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

}

.product-info{

    padding:25px;

}

.product-info h4{

    font-size:20px;

    margin-bottom:10px;

}

.price{

    color:#A855F7;

    font-size:28px;

    font-weight:700;

    margin:15px 0;

}

.buy{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:15px;

    border-radius:12px;

    background:linear-gradient(90deg,#7C3AED,#A855F7);

    color:#fff;

    font-weight:700;

}

/*==========================================
COMUNIDADES
==========================================*/

.communities{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}

.community{

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

    border-radius:20px;

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

    padding:30px;

    transition:.3s;

}

.community:hover{

    transform:translateY(-8px);

    border-color:#A855F7;

}

.community h3{

    margin:18px 0;

    font-size:24px;

}

.community span{

    color:#A855F7;

    font-weight:700;

}

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

.cta{

    text-align:center;

    padding:120px 0;

}

.cta h2{

    font-size:54px;

    margin-bottom:25px;

}

.cta p{

    max-width:750px;

    margin:auto;

    color:#d5d5d5;

    line-height:1.8;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

}




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

footer{

    margin-top:80px;

    padding:35px 20px;

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

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

}

.footer-container{

    max-width:1280px;

    margin:auto;

    text-align:center;

}

footer p{

    color:#BDB8CC;

    font-size:16px;

    line-height:1.9;

}

footer strong{

    color:#FFFFFF;

}

footer span{

    color:#A855F7;

    font-weight:600;

}


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

@media (max-width:768px){

footer{

    margin-top:50px;

    padding:30px 15px;

}

footer p{

    font-size:14px;

    line-height:1.8;

}

}

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

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.float{

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

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/*==========================================
SCROLLBAR
==========================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0D0817;

}

::-webkit-scrollbar-thumb{

    background:#7C3AED;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#A855F7;

}

/*==========================================
MENU MOBILE
==========================================*/

.menu-mobile{
    display:none;
}

/*=============================
MOBILE
=============================*/

@media (max-width:768px){

    .menu{

        position:fixed;

        top:72px;

        left:0;

        width:100%;

        height:calc(100vh - 72px);

        background:#12071F;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        padding-top:45px;

        gap:28px;

        transform:translateY(-120%);

        transition:.35s;

        z-index:9999;

    }

    .menu.active{

        transform:translateY(0);

    }

    .menu-mobile{

        display:block;

        font-size:38px;

        cursor:pointer;

    }

    .hero{

        min-height:auto;

        padding-top:90px;

        padding-bottom:30px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero h1{

        font-size:48px;

    }

    .hero p{

        font-size:18px;

        max-width:100%;

    }

    .hero-buttons{

        justify-content:center;

        flex-direction:column;

        align-items:center;

    }

    .btn-login,
    .btn-outline{

        width:100%;

        max-width:360px;

    }

    .hero-image{

        margin-top:35px;

    }

    .hero-image img{

        width:100%;

        max-width:420px;

        margin:auto;

    }

    .stats-grid{

        grid-template-columns:1fr 1fr;

    }

   

}

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

@media(max-width:480px){

.logo{

    font-size:30px;

}

.hero h1{

    font-size:40px;

}

.hero p{

    font-size:17px;

}

.hero-image img{

    max-width:350px;

}

.stats-grid{

    grid-template-columns:1fr;

}

.section-title h2{

    font-size:34px;

}

.card{

    padding:25px;

}

.cta h2{

    font-size:36px;

}


}

/*==========================================
DESKTOP GRANDE
==========================================*/

@media(min-width:1400px){

.container{

    max-width:1400px;

}

.hero h1{

    font-size:88px;

}

.hero-image{

    display:flex;
    justify-content:center;
    align-items:flex-start;

    margin-top:-60px;

}

}


/*======================================================
  AMIGOSHOME - STYLE.CSS
  PARTE 4
======================================================*/

/*==========================================
EFEITOS GLOBAIS
==========================================*/

::selection{
    background:#A855F7;
    color:#fff;
}

section{
    position:relative;
    overflow:hidden;
}

/*==========================================
GRADIENTES
==========================================*/

.blur-purple{

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:#7C3AED;

    filter:blur(180px);

    opacity:.18;

    pointer-events:none;

}

.blur-left{

    left:-180px;
    bottom:-120px;

}

.blur-right{

    right:-180px;
    top:-120px;

}

/*==========================================
GLASS CARD
==========================================*/

.glass{

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

    backdrop-filter:blur(18px);

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

    border-radius:22px;

}

/*==========================================
HOVER GERAL
==========================================*/

.card,
.product,
.community,
.stat-card{

    transition:
    transform .35s,
    box-shadow .35s,
    border-color .35s;

}

.card:hover,
.product:hover,
.community:hover,
.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(124,58,237,.25);

}

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

.btn-login,
.buy{

    position:relative;

    overflow:hidden;

}

.btn-login::before,
.buy::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.30),
        transparent
    );

    transition:.6s;

}

.btn-login:hover::before,
.buy:hover::before{

    left:100%;

}

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

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*==========================================
ÍCONE FLUTUANTE
==========================================*/

.float-slow{

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

}

@keyframes floatSlow{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

/*==========================================
FADE
==========================================*/

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}

/*==========================================
LOADING
==========================================*/

.preloader{

    position:fixed;

    inset:0;

    background:#0D0817;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999999;

}

.loader{

    width:70px;

    height:70px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.10);

    border-top:5px solid #A855F7;

    animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

@media(max-width:360px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.logo{

font-size:26px;

}

.btn-login,
.btn-outline{

font-size:15px;

padding:16px 24px;

}

}


/*==========================================
LOGIN PREMIUM
==========================================*/

.login-box{

    width:100%;
    max-width:460px;

    margin:25px auto 60px;

    padding:45px;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 40px rgba(124,58,237,.15);

}

@media (max-width:768px){

    .login-box{

        margin:20px auto 40px;

        padding:35px 25px;

    }

}

.login-box h2{

    text-align:center;

    margin-bottom:35px;

    color:#fff;

    font-size:32px;

    font-weight:700;

}

.form-control{

    width:100%;

    padding:16px 18px;

    margin-bottom:18px;

    border-radius:14px;

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

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

    color:#fff;

    font-size:16px;

    transition:.30s;

}

.form-control::placeholder{

    color:#BBB;

}

.form-control:focus{

    outline:none;

    border-color:#A855F7;

    box-shadow:0 0 20px rgba(168,85,247,.35);

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

}

.btn-login{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    background:linear-gradient(90deg,#7C3AED,#A855F7);

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 15px 35px rgba(124,58,237,.35);

}

.btn-login:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 40px rgba(124,58,237,.55);

}

.alert{

    padding:16px;

    margin-bottom:25px;

    border-radius:14px;

    background:rgba(220,38,38,.18);

    border:1px solid rgba(220,38,38,.35);

    color:#FFDADA;

    text-align:center;

}

.login-footer{

    margin-top:25px;

    text-align:center;

    color:#CFCFCF;

}

.login-footer a{

    color:#A855F7;

    font-weight:600;

    transition:.3s;

}

.login-footer a:hover{

    color:#C084FC;

}


/* reCAPTCHA */

.g-recaptcha{

    display:flex;
    justify-content:center;
    margin:25px 0;

}

/* Mobile */

@media (max-width:480px){

    .g-recaptcha{

        transform:scale(.88);

        transform-origin:center;

    }

}

.form-control{

    width:100%;

    height:64px;

    padding:0 22px;

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

    border-radius:18px;

    background:#2B243A;

    color:#fff;

    font-size:20px;

    outline:none;

    transition:.3s;

}

.form-control:focus{

    border-color:#A855F7;

    box-shadow:0 0 20px rgba(168,85,247,.25);

}

select.form-control{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 20px center;

    padding-right:55px;

}

select option{

    background:#2B243A;

    color:#ffffff;

}