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

body{
    font-family:Inter,Arial,sans-serif;
    background:#07111d;
    color:white;
    min-height:100vh;
    overflow:hidden;
}

.background{
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at top,#0077ff33,transparent 50%),
    radial-gradient(circle at bottom,#00bfff22,transparent 50%);
    animation:move 12s ease infinite alternate;
}

@keyframes move{
    from{
        transform:translateY(-20px);
    }
    to{
        transform:translateY(20px);
    }
}

.hero{
    position:relative;
    z-index:1;
    min-height:100vh;

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

    text-align:center;

    padding:2rem;
}

.logo{
    width:220px;
    margin-bottom:2rem;
}

.badge{
    background:#2b7fff;
    padding:.45rem .9rem;
    border-radius:999px;
    font-size:.8rem;
    margin-bottom:1rem;
}

h1{
    font-size:3rem;
    margin-bottom:1rem;
}

p{
    max-width:650px;
    color:#cfd8e3;
    line-height:1.7;
    font-size:1.1rem;
}

.spinner{
    margin-top:3rem;
    width:42px;
    height:42px;
    border:4px solid rgba(255,255,255,.2);
    border-top-color:white;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}