:root{
    --blue:#3ba7ff;
    --purple:#9f5fff;
    --cyan:#53e8ff;
    --panel:#050811ee;
}

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

body{
    font-family:'Inter',sans-serif;
    min-height:100vh;
    overflow:hidden;
    color:white;
}

.background{
    position:fixed;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.35),
                    rgba(0,0,0,.55)
    ),
    url("../assets/quantum-bg.png");

    background-size:cover;
    background-position:center;
    z-index:-2;
}

.overlay{
    position:fixed;
    inset:0;

    background:
    radial-gradient(
        circle at center,
        rgba(58,167,255,.15),
                    transparent 40%
    );

    z-index:-1;
}

.container{
    width:100%;
    min-height:100vh;

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

    padding:20px;
}

.card{
    width:100%;
    max-width:650px;

    background:var(--panel);

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

    border-radius:24px;

    padding:50px;

    backdrop-filter:blur(14px);

    box-shadow:
    0 0 30px rgba(59,167,255,.2),
    0 0 80px rgba(159,95,255,.15);
}

.logo{
    display:block;
    margin:0 auto 20px;
    width:120px;
}

h1{
    text-align:center;
    font-family:'Orbitron',sans-serif;
    font-size:2.8rem;
    letter-spacing:.15em;
}

.subtitle{
    text-align:center;
    margin-top:15px;
    color:#b7c3dd;
}

.social-grid{
    margin-top:35px;

    display:grid;
    gap:15px;
}

.social-btn{
    display:flex;
    justify-content:center;
    align-items:center;

    text-decoration:none;

    color:white;

    padding:18px;

    border-radius:14px;

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

    background:
    linear-gradient(
        180deg,
        rgba(12,20,35,.95),
                    rgba(5,8,15,.95)
    );

    transition:.25s ease;
}

.social-btn:hover{
    transform:translateY(-3px);

    border-color:var(--cyan);

    box-shadow:
    0 0 20px rgba(83,232,255,.2);
}

footer{
    margin-top:30px;
    text-align:center;
    color:#94a2c2;
    font-size:.85rem;
}

@media(max-width:768px){

    .card{
        padding:30px;
    }

    h1{
        font-size:1.8rem;
    }

    .logo{
        width:90px;
    }
}