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

body{

    font-family:Segoe UI, Arial, sans-serif;

    background:#111;
    color:white;

    min-height:100vh;

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

    overflow-x:hidden;
    overflow-y:auto;
}

.overlay{

    position:fixed;

    width:100%;
    height:100%;

    background:

    linear-gradient(
    rgba(0,0,0,.78),
    rgba(0,0,0,.88));

    z-index:1;
}

.container{

    position:relative;
    z-index:2;

    width:90%;
    max-width:900px;

    text-align:center;

    padding:50px;
    margin:40px auto;
}

.banner{

    width:100%;
    max-width:350px;

    border-radius:12px;

    box-shadow:
    0 0 35px rgba(255,180,0,.35);

    margin-bottom:35px;
}

h1{

    font-size:52px;

    color:#FFD24A;

    margin-bottom:15px;
}

h2{

    font-size:28px;

    margin-bottom:20px;

    font-weight:400;
}

p{

    color:#CCCCCC;

    line-height:1.8;

    font-size:18px;
}

.status{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

.card{

    background:#222;

    border-left:5px solid #FFD24A;

    border-radius:8px;

    padding:18px;

    min-width:220px;

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

    transition:.3s;
}

.card:hover{

    transform:translateY(-5px);

    background:#2c2c2c;
}

.footer{

    margin-top:55px;

    color:#888;

    font-size:14px;
}

@media (max-width:768px){

    body{
        align-items:flex-start;
    }

    .container{
        padding:30px 20px;
        margin:30px auto;
    }

    .banner{
        width:220px;
    }

    h1{
        font-size:34px;
    }

    h2{
        font-size:22px;
    }

    p{
        font-size:16px;
    }

    .status{
        flex-direction:column;
        gap:15px;
    }

    .card{
        width:100%;
        min-width:0;
    }

}