/* =====================================================
RESET
===================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:#000;

    color:#FFF;

    overflow-x:hidden;

}

/* =====================================================
BACKGROUND
===================================================== */

.background{

    position:fixed;

    inset:0;

    background:url("../assets/bg.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.08);

    opacity:.08;

    filter:blur(3px);

    z-index:-3;

}

.overlay{

    position:fixed;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,.35),

        rgba(0,0,0,.88)

    );

    backdrop-filter:blur(3px);

    z-index:-2;

}

/* =====================================================
CONTAINER
===================================================== */

.container{

    width:100%;

    max-width:430px;

    margin:auto;

    min-height:100vh;

    padding:

        110px
        22px
        40px;

}

/* =====================================================
NOTIFICATION
===================================================== */

.notification{

    position:fixed;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    max-width:420px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:18px;

    background:

    rgba(18,18,18,.72);

    border:

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

    backdrop-filter:

    blur(18px);

    box-shadow:

    0 12px 35px rgba(0,0,0,.35);

    transition:

    opacity .45s,

    transform .45s;

    z-index:999;

}

.notification-avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:

    linear-gradient(

        180deg,

        #ff4040,

        #850000

    );

}

.notification-avatar span{

    font-size:17px;

    font-weight:700;

}

.notification-content{

    flex:1;

    display:flex;

    flex-direction:column;

}

.notification-content strong{

    font-size:13px;

    font-weight:600;

}

.notification-content span{

    margin-top:2px;

    font-size:12px;

    color:rgba(255,255,255,.72);

}

.notification-time{

    font-size:11px;

    font-weight:700;

    color:#42F58A;

}/* =====================================================
HERO
===================================================== */

.hero{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.profile{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.profile-border{

    width:132px;

    height:132px;

    padding:5px;

    border-radius:50%;

    background:

    linear-gradient(

        180deg,

        #ff4747,

        #790000

    );

    box-shadow:

    0 0 20px rgba(255,0,0,.35),

    0 0 70px rgba(255,0,0,.18);

}

.profile-image{

    width:100%;

    height:100%;

    border-radius:50%;

    object-fit:cover;

    background:#111;

    display:block;

}

.hero h1{

    margin-top:22px;

    font-size:34px;

    font-weight:700;

    line-height:1.1;

}

.verified{

    margin-top:14px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:

    8px 16px;

    border-radius:999px;

    background:

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

    border:

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

    backdrop-filter:blur(10px);

    color:#49E37D;

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

}

.hero-description{

    margin-top:18px;

    max-width:320px;

    font-size:15px;

    line-height:1.6;

    color:

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

}

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

.cards{

    margin-top:42px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    text-decoration:none;

    color:#FFF;

    padding:20px;

    border-radius:22px;

    background:rgba(22,22,22,.72);

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

    backdrop-filter:blur(22px);

    transition:.35s;

}

.card:hover{

    transform:translateY(-4px);

}

.card-primary{

    background:

    linear-gradient(

        180deg,

        #d50000,

        #780000

    );

    border:none;

    box-shadow:

    0 14px 35px rgba(255,0,0,.35);

}

.card-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.card-icon{

    width:48px;

    height:48px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

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

}

.card-primary .card-icon{

    background:

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

}

.card-icon img{

    width:24px;

    height:24px;

    object-fit:contain;

}

.card-text{

    display:flex;

    flex-direction:column;

}

.card-text small{

    font-size:11px;

    letter-spacing:1px;

    text-transform:uppercase;

    opacity:.75;

}

.card-text strong{

    margin-top:4px;

    font-size:17px;

    font-weight:600;

}

.card-arrow{

    font-size:24px;

    font-weight:700;

    opacity:.7;

    transition:.3s;

}

.card:hover .card-arrow{

    transform:translateX(6px);

    opacity:1;

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

footer{

    margin-top:50px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:20px;

    padding-bottom:30px;

}

.footer-copy{

    font-size:12px;

    color:rgba(255,255,255,.45);

}

.footer-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    margin-top:4px;

}

.footer-logo img{

    width:72px;

    opacity:.78;

    transition:.35s;

}

.footer-logo:hover img{

    opacity:1;

    transform:scale(1.05);

}

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

@keyframes glow{

    0%{

        box-shadow:

        0 0 18px rgba(255,0,0,.25),

        0 0 45px rgba(255,0,0,.10);

    }

    50%{

        box-shadow:

        0 0 32px rgba(255,0,0,.50),

        0 0 85px rgba(255,0,0,.20);

    }

    100%{

        box-shadow:

        0 0 18px rgba(255,0,0,.25),

        0 0 45px rgba(255,0,0,.10);

    }

}

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero{

    animation:fadeUp .6s ease;

}

.cards{

    animation:fadeUp .9s ease;

}

.notification{

    animation:fadeUp .5s ease;

}

/* =====================================================
SCROLL
===================================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#0a0a0a;

}

::-webkit-scrollbar-thumb{

    background:#8a0000;

    border-radius:30px;

}

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

@media(max-width:480px){

    .container{

        padding:

        105px
        18px
        28px;

    }

    .profile-border{

        width:112px;

        height:112px;

    }

    .hero h1{

        font-size:28px;

    }

    .hero-description{

        font-size:14px;

        max-width:290px;

    }

    .card{

        padding:16px;

        border-radius:22px;

    }

    .card-icon{

        width:44px;

        height:44px;

    }

    .card-icon img{

        width:22px;

        height:22px;

    }

    .card-text strong{

        font-size:16px;

    }

    .notification{

        width:94%;

        padding:12px 14px;

    }

}

@media(min-width:768px){

    .container{

        max-width:450px;

    }

}.card-primary{

    animation:pulseRed 2.5s infinite;

}

@keyframes pulseRed{

    0%{

        box-shadow:0 12px 30px rgba(255,0,0,.25);

    }

    50%{

        box-shadow:0 16px 42px rgba(255,0,0,.50);

    }

    100%{

        box-shadow:0 12px 30px rgba(255,0,0,.25);

    }

}