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

body{
background: radial-gradient(circle at top, #111827, #0b0f17);
color:white;
}

/* NAV */
nav{
position:fixed;
top:0;
width:100%;
background:rgba(0,0,0,.35);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.05);
padding:15px 0;
z-index:1000;
}

.nav-container{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 20px;
}

.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
letter-spacing:1px;
}

.brand img{
width:40px;
border-radius:50%;
}

/* HERO */
.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding-top:80px;
}

.hero-logo{
width:150px;
border-radius:50%;
margin-bottom:20px;
box-shadow:0 0 30px rgba(88,101,242,.4);
}

.hero h1{
font-size:52px;
letter-spacing:2px;
margin-bottom:10px;
}

.hero p{
opacity:.8;
margin-bottom:25px;
font-size:18px;
}

/* BUTTONS */
.btn{
padding:12px 22px;
margin:10px;
border-radius:12px;
text-decoration:none;
color:white;
display:inline-block;
transition:.25s;
font-weight:500;
}

.primary{
background:linear-gradient(135deg,#5865F2,#4752c4);
box-shadow:0 0 20px rgba(88,101,242,.35);
}

.primary:hover{
transform:translateY(-3px);
box-shadow:0 0 30px rgba(88,101,242,.6);
}

.secondary{
border:1px solid rgba(255,255,255,.3);
}

.secondary:hover{
background:rgba(255,255,255,.08);
transform:translateY(-3px);
}

/* SECTIONS (caso uses no futuro) */
section{
padding:80px 20px;
text-align:center;
}

/* CARDS */
.card{
background:rgba(255,255,255,.05);
backdrop-filter:blur(10px);
padding:20px;
border-radius:15px;
border:1px solid rgba(255,255,255,.05);
transition:.3s;
}

.card:hover{
transform:translateY(-5px);
border-color:rgba(88,101,242,.4);
}

/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:20px;
}

/* CENTER */
.center{
display:flex;
justify-content:center;
}

/* PRICING (caso uses depois) */
.pricing{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:20px;
}

.price-card{
background:rgba(255,255,255,.05);
padding:25px;
border-radius:15px;
transition:.3s;
border:1px solid rgba(255,255,255,.05);
}

.price-card:hover{
transform:scale(1.06);
border:1px solid #5865F2;
box-shadow:0 0 25px rgba(88,101,242,.25);
}

.featured{
border:2px solid #5865F2;
}

.price{
font-size:28px;
color:#5865F2;
font-weight:bold;
}

/* FOOTER */
footer{
text-align:center;
padding:20px;
opacity:.6;
}
/* 🎵 BOTÃO MÚSICA */
.music-btn{
position:fixed;
bottom:20px;
right:20px;
background:linear-gradient(135deg,#5865F2,#4752c4);
border:none;
color:white;
padding:12px 16px;
border-radius:50px;
cursor:pointer;
box-shadow:0 0 20px rgba(88,101,242,.4);
transition:.3s;
font-weight:500;
z-index:9999;
}

.music-btn:hover{
transform:scale(1.08);
box-shadow:0 0 30px rgba(88,101,242,.6);
}

/* 🌌 BACKGROUND ANIMADO */
.bg-animation{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
overflow:hidden;
background:radial-gradient(circle at top, rgba(88,101,242,.12), transparent 60%);
}

/* partículas */
.bg-animation::before,
.bg-animation::after{
content:"";
position:absolute;
width:200%;
height:200%;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.15), transparent),
radial-gradient(2px 2px at 60px 80px, rgba(88,101,242,.25), transparent),
radial-gradient(1px 1px at 120px 150px, rgba(255,255,255,.1), transparent),
radial-gradient(2px 2px at 200px 220px, rgba(88,101,242,.2), transparent);
background-repeat:repeat;
animation:moveStars 60s linear infinite;
opacity:.6;
}

.bg-animation::after{
animation-duration:120s;
opacity:.3;
}

@keyframes moveStars{
from{
transform:translateY(0px);
}
to{
transform:translateY(-1000px);
}
}