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

html{
    scroll-behavior:smooth;
}

body{
    background:#09111f;
    color:#fff;
    overflow-x:hidden;
}

body.dark{
    background:#05080f;
}

.background{
    position:fixed;
    width:100%;
    height:100%;
    z-index:-1;

    background:
    radial-gradient(circle at top left,#1f4fd8 0%,transparent 40%),
    radial-gradient(circle at bottom right,#00d4ff 0%,transparent 30%),
    linear-gradient(135deg,#081120,#0e1d38,#081120);

    animation:fundo 20s linear infinite;
}

@keyframes fundo{

0%{
filter:hue-rotate(0deg);
}

100%{
filter:hue-rotate(360deg);
}

}

header{

position:fixed;
top:0;
left:0;
width:100%;

padding:18px 8%;

display:flex;
justify-content:space-between;
align-items:center;

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

backdrop-filter:blur(18px);

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

z-index:999;

}

.logo{

display:flex;
align-items:center;
gap:15px;

}

.logo-icon{

width:55px;
height:55px;

border-radius:50%;

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

background:#ff9800;

font-size:25px;

color:white;

}

.logo h2{

font-size:26px;

}

.logo span{

font-size:13px;

opacity:.8;

}

nav{

display:flex;
gap:30px;

}

nav a{

text-decoration:none;

color:white;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#ff9800;

}

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:120px 8%;

}

.glass{

max-width:900px;

padding:60px;

border-radius:30px;

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

backdrop-filter:blur(25px);

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

box-shadow:0 20px 60px rgba(0,0,0,.35);

text-align:center;

animation:subir 1s ease;

}

@keyframes subir{

from{

opacity:0;
transform:translateY(60px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.glass h1{

font-size:58px;

line-height:1.1;

margin-bottom:25px;

}

.glass p{

font-size:20px;

opacity:.9;

margin-bottom:35px;

}

.buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

padding:18px 35px;

border-radius:50px;

background:white;

color:#111;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.btn:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.whats{

background:#25D366;

color:white;

}

.cards{

display:grid;

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

gap:30px;

padding:80px 8%;

}

.card{

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

backdrop-filter:blur(15px);

padding:35px;

border-radius:20px;

text-align:center;

transition:.4s;

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

}

.card:hover{

transform:translateY(-12px);

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

}

.card i{

font-size:50px;

color:#ff9800;

margin-bottom:20px;

}

.card h3{

margin-bottom:12px;

font-size:22px;

}
.titulo{

text-align:center;

font-size:40px;

margin-bottom:45px;

}

#contato{

padding:90px 8%;

}


.contact-grid{

display:grid;

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

gap:25px;

}


.contact-grid a{

text-decoration:none;

color:white;

padding:25px;

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

border-radius:20px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:15px;

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

backdrop-filter:blur(15px);

transition:.4s;

font-weight:600;

}


.contact-grid a:hover{

transform:translateY(-8px) scale(1.03);

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

}


.contact-grid i{

font-size:35px;

color:#ff9800;

}


.extras{

margin-top:50px;

display:grid;

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

gap:30px;

}


.extras>div{

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

border-radius:25px;

padding:30px;

text-align:center;

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

backdrop-filter:blur(15px);

}


.extras h3{

margin-bottom:15px;

color:#ff9800;

}


#contador{

font-size:45px;

font-weight:800;

}


#qrcode{

display:flex;

justify-content:center;

margin-top:15px;

}


#qrcode img{

padding:10px;

background:white;

border-radius:15px;

}


.download-buttons{

margin-top:40px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}


.download-buttons button{

border:none;

cursor:pointer;

padding:16px 35px;

border-radius:50px;

background:#ff9800;

color:white;

font-size:16px;

font-weight:700;

transition:.3s;

}


.download-buttons button:hover{

transform:translateY(-5px);

box-shadow:0 15px 30px rgba(255,152,0,.35);

}



footer{

margin-top:50px;

padding:40px 8%;

background:rgba(0,0,0,.35);

text-align:center;

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

line-height:2;

}


.floating{

position:fixed;

right:25px;

bottom:25px;

width:70px;

height:70px;

background:#25D366;

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

text-decoration:none;

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

z-index:999;

animation:pulsar 2s infinite;

}


@keyframes pulsar{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.7);

}


70%{

box-shadow:0 0 0 25px rgba(37,211,102,0);

}


100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}



/* animação de entrada */

.card,
.contact-grid a,
.extras>div{

opacity:0;

transform:translateY(40px);

animation:aparecer .8s forwards;

}


.card:nth-child(1){

animation-delay:.1s;

}

.card:nth-child(2){

animation-delay:.2s;

}

.card:nth-child(3){

animation-delay:.3s;

}

.card:nth-child(4){

animation-delay:.4s;

}


@keyframes aparecer{

to{

opacity:1;

transform:translateY(0);

}

}



/* BOTÃO TEMA */

.theme{

position:fixed;

top:100px;

right:25px;

width:45px;

height:45px;

border-radius:50%;

border:none;

cursor:pointer;

background:white;

color:#111;

z-index:999;

}



/* MOBILE */

@media(max-width:900px){


header{

padding:15px 5%;

}


.logo h2{

font-size:20px;

}


.logo span{

display:none;

}


nav{

display:none;

}


.hero{

padding:100px 5% 50px;

}


.glass{

padding:35px 25px;

}


.glass h1{

font-size:36px;

}


.glass p{

font-size:16px;

}


.cards{

padding:50px 5%;

}


#contato{

padding:60px 5%;

}


.titulo{

font-size:32px;

}


.floating{

width:60px;

height:60px;

font-size:30px;

right:18px;

bottom:18px;

}

}


/* MODO CLARO */

body.light{

background:#f4f7fb;

color:#111;

}


body.light header{

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

}


body.light nav a{

color:#111;

}


body.light .glass,
body.light .card,
body.light .contact-grid a,
body.light .extras>div{

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

color:#111;

}


body.light footer{

background:#ddd;

color:#333;

}