*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


:root{

    --bg:#05070d;

    --gold:#ffc400;

    --yellow:#ffe600;

    --white:#fff;

    --text:#b8c1d0;

}



body{

    min-height:100vh;

    background:var(--bg);

    color:white;

    overflow-x:hidden;

}







/* ===========================
 FUNDO PREMIUM
=========================== */


body::before{


content:"";

position:fixed;

inset:0;


background:

radial-gradient(
circle at 50% 10%,
rgba(255,196,0,.20),
transparent 35%
),

radial-gradient(
circle at 20% 80%,
rgba(255,196,0,.08),
transparent 40%
);


z-index:-3;


}



body::after{


content:"";

position:fixed;

inset:0;


background:

radial-gradient(
circle,
transparent 40%,
rgba(0,0,0,.75)
);


z-index:-2;


}




.particles{


position:fixed;

inset:0;


background-image:


radial-gradient(#ffc400 1px,transparent 1px),

radial-gradient(#ffe600 1px,transparent 1px);


background-size:

120px 120px,

180px 180px;


background-position:

0 0,

70px 60px;


opacity:.35;


animation:particles 25s linear infinite;


z-index:-1;


}




@keyframes particles{


from{

transform:translateY(0);

}


to{

transform:translateY(-150px);

}

}








.container{


width:100%;

max-width:520px;

margin:auto;


padding:25px 20px 50px;


}









/* ===========================
 TOPO
=========================== */


.badge{


margin:auto;

margin-bottom:30px;


width:max-content;

max-width:100%;


padding:10px 18px;


border-radius:30px;


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


border:1px solid rgba(255,196,0,.15);


display:flex;

align-items:center;

gap:10px;


font-size:14px;


backdrop-filter:blur(10px);


}



.badge span{


width:10px;

height:10px;


border-radius:50%;


background:#00ff88;


box-shadow:0 0 15px #00ff88;


}







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


.logo-area{


height:230px;


display:flex;

justify-content:center;

align-items:center;


position:relative;


}



.logo-glow{


position:absolute;


width:150px;


height:150px;


border-radius:50%;


background:

radial-gradient(
circle,
rgba(255,196,0,.45),
transparent 70%
);


filter:blur(35px);


animation:pulse 3s infinite;


}



.logo-neon{


width:280px;


height:280px;


object-fit:contain;


position:relative;


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

/* Alterar borda LOGO */

filter:

drop-shadow(0 0 8px #ffc400)

drop-shadow(0 0 20px #ffc400);


}




@keyframes float{


50%{

transform:translateY(-15px);

}


}




@keyframes pulse{


50%{

transform:scale(1.15);

opacity:1;

}


}








h1{


text-align:center;

font-size:42px;

font-weight:900;


}



h1 strong{


color:var(--yellow);


text-shadow:

0 0 15px rgba(255,230,0,.5);


}




.subtitle{


text-align:center;

color:var(--text);


line-height:1.7;


margin:20px 0 30px;


}









/* MEMBROS */


.members{


display:flex;

justify-content:center;

align-items:center;


gap:15px;


margin-bottom:35px;


}



.avatars{


display:flex;

}



.avatars span{


width:38px;

height:38px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


font-weight:bold;


background:linear-gradient(
135deg,
#ffc400,
#ff8800
);


border:2px solid #05070d;


margin-left:-8px;


}




.glass-card{

    display:flex;

    align-items:center;

    gap:15px;


    width:100%;


    padding:18px;


    margin-bottom:15px;


    border-radius:22px;


    text-decoration:none;


    color:white !important;


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


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


    backdrop-filter:blur(15px);


    transition:.3s;


}

.glass-card > i{

    margin-left:auto;

    font-size:18px;

    color:#ffffff;

}

.glass-card > i{

    margin-left:auto;

    width:35px;

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#ffc400;

}


/* LOGO TELEGRAM... */

.glass-card:hover{


    transform:translateY(-5px);


    border-color:#ffc400;


    box-shadow:

    0 10px 30px rgba(255,196,0,.15);


}




.glass-card h3{


    color:white;


}



.glass-card p{


    color:#9ca8ba;


}


.glass-card i{


    color:white;


}




/* BOTÕES */


.main-btn{


height:68px;


display:flex;

align-items:center;

justify-content:center;


gap:12px;


border-radius:35px;


text-decoration:none;


color:white;


font-weight:bold;


font-size:18px;


margin-bottom:18px;


transition:.3s;


}



.main-btn:hover{


transform:translateY(-4px);


}



.whatsapp{


background:#17dd67;


box-shadow:0 0 25px rgba(23,221,103,.4);


}


.telegram{


background:#159ee9;


box-shadow:0 0 25px rgba(21,158,233,.4);


}









/* TITULOS */


.section-title{


display:flex;

align-items:center;


gap:15px;


margin:45px 0 25px;


}



.section-title span{


height:1px;


background:rgba(255,196,0,.3);


flex:1;


}


.section-title h2{


font-size:18px;


white-space:nowrap;


}










/* ===========================
 OFERTAS
=========================== */


.offer-card{


display:flex;


align-items:center;


gap:15px;


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


border:1px solid rgba(255,196,0,.15);


border-left:4px solid #ff8c00;


border-radius:20px;


padding:15px;


margin-bottom:15px;


backdrop-filter:blur(15px);


}



.offer-card img{


width:65px;


height:65px;


object-fit:contain;


}



.offer-info{


flex:1;


}



.offer-info h3{


font-size:16px;


margin-bottom:10px;


}



.prices{


display:flex;

align-items:center;


gap:10px;


}


.old-price{


text-decoration:line-through;


color:#777;


font-size:14px;


}



.prices strong{


font-size:24px;


color:#ff9800;


}



.prices b{


background:#512000;


color:#ff9b3d;


padding:5px 8px;


border-radius:8px;


font-size:13px;


}






.notice-offer{


text-align:center;


padding:25px;


border-radius:20px;


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


border:1px solid rgba(255,196,0,.2);


color:#b58cff;


font-size:20px;


font-weight:bold;


margin-bottom:20px;


}



.notice-offer span{


display:block;


font-size:14px;


color:#999;


margin-top:10px;


}








/* ===========================
 DEPOIMENTOS
=========================== */


.testimonial{


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


border:1px solid rgba(255,196,0,.15);


border-radius:20px;


padding:20px;


margin-bottom:15px;


}



.stars{


color:#ff9800;


font-size:20px;


margin-bottom:15px;


}



.testimonial p{


color:#d0d6e0;


line-height:1.6;


font-size:16px;


}



.testimonial span{


display:block;


margin-top:15px;


color:#777;


}









/* LOGO PARCEIROS */


.partners{


    display:grid;


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


    gap:16px;


    width:100%;


}



.partner-card{


    height:110px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:22px;


    background:

    rgba(255,255,255,.04);


    border:

    1px solid rgba(255,196,0,.15);


}



.partner-card img{


    width:110px;


    height:60px;


    object-fit:contain;


}



/* ajuste PARCEIROS para celular */

@media(max-width:600px){


.partners{


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


}



.partner-card img{


width:90px;


}



}






/* FAQ */


.faq-item{


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


border-radius:18px;


margin-bottom:12px;


overflow:hidden;


}



.faq-item button{


width:100%;


padding:20px;


background:none;


border:0;


color:white;


display:flex;


justify-content:space-between;


font-weight:bold;


}



.faq-item p{


display:none;


padding:0 20px 20px;


color:#aaa;


}



.faq-item.active p{


display:block;


}






footer{


text-align:center;


margin-top:40px;


color:#8994a8;


font-size:13px;


}




@media(max-width:420px){


.logo-neon{

width:170px;

height:170px;

}


h1{

font-size:34px;

}


.offer-card img{

width:55px;

height:55px;

}


}