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

/* BODY */
body{
    font-family: Arial, sans-serif;
    background: radial-gradient(circle at top, #1a1a1a, #0b0b0b);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    overflow:hidden;
}

/* FUNDO PREMIUM */
.bg-overlay{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(245,197,66,0.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(245,197,66,0.05), transparent 40%);
    z-index:-1;
}

/* CONTAINER */
.container{
    width:100%;
    max-width:420px;
    padding:20px;
}
/* BANNER PROFISSIONAL */
.banner{
    position:fixed;
    inset:0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.75), #0b0b0b),
        url('./img/banner.png');
    background-size:cover;
    background-position:center;
    z-index:-2;
}
.banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6); /* escurece o banner */
}


/* CARD */
.card{

    padding:35px;
    border-radius:20px;
    border:1px solid #1a1a1a;
    box-shadow:0 25px 60px rgba(0,0,0,0.7);
    text-align:center;
    .card{
    background:rgba(0,0,0,0.65);
    backdrop-filter: blur(10px);
   
}
}

/* LOGO */
.logo-text{
    font-size:34px;
    font-weight:bold;
    color:#f5c542; /* simples e funcional */
    margin-bottom:10px;
}
/* TEXTO INSTAGRAM */
.insta-text{
    margin-top:20px;
    font-size:13px;
    color:#888;
}

/* SUBTEXTO */
.subtitle{
    color:#888;
    margin-bottom:25px;
    font-size:14px;
}

/* BOTÕES */
.btn{
    width:100%;
    padding:15px;
    margin-top:12px;
    border:none;
    border-radius:12px;
    font-size:16px;
    cursor:pointer;
    transition:0.25s;
}

.btn.primary{
    background:#f5c542;
    color:#000;
    font-weight:bold;
}

.btn.primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(245,197,66,0.3);
}

.btn.secondary{
    background:#1a1a1a;
    color:#fff;
    border:1px solid #333;
}

.btn.secondary:hover{
    background:#222;
}

/* FOOTER */
.footer{
    margin-top:25px;
    text-align:center;
}


/* LINK */
.footer a{
    color:#777;
    text-decoration:none;
    font-size:14px;
    transition:0.2s;
}

.footer a:hover{
    color:#f5c542;
}