:root{
    --primary:#ffffff;
    --secondary:rgba(255,255,255,.78);
    --glass:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.15);
}

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

html,
body{
    width:100%;
    height:100%;
}

body{
    font-family:"Inter",sans-serif;
    overflow:hidden;
    color:var(--primary);
    background:#000;
}

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

.background{
    position:fixed;
    inset:-5%;

    background:
        linear-gradient(
            rgba(8,12,18,.55),
            rgba(8,12,18,.75)
        ),
        url("background-4k.jpg");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transform:scale(1.08);

    will-change:transform;

    z-index:-1;

    animation:zoomAnimation 30s ease-in-out infinite alternate;
}

@keyframes zoomAnimation{

    from{
        transform:scale(1.08);
    }

    to{
        transform:scale(1.15);
    }

}

/* =====================================
   LOGO
===================================== */

.logo{
    position:fixed;

    top:clamp(18px,3vw,40px);
    left:clamp(18px,3vw,50px);

    z-index:100;

    font-size:clamp(.8rem,1vw,1rem);
    font-weight:600;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:rgba(255,255,255,.9);
}

/* =====================================
   CONTENT
===================================== */

.container{
    min-height:100dvh;

    display:flex;

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

    padding:30px;
}

.card{

    width:min(90vw,850px);

    padding:clamp(28px,5vw,70px);

    text-align:center;

    background:var(--glass);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:28px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

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

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

    color:var(--secondary);

    font-size:.8rem;

    letter-spacing:.18em;

    margin-bottom:30px;
}

h1{

    font-size:clamp(2.2rem,7vw,5.8rem);

    line-height:1.05;

    font-weight:300;

    margin-bottom:28px;
}

.separator{

    width:90px;
    height:1px;

    margin:35px auto;

    background:rgba(255,255,255,.25);
}

p{

    max-width:650px;

    margin:auto;

    color:var(--secondary);

    line-height:1.9;

    font-size:clamp(1rem,1.4vw,1.15rem);
}

.mt{
    margin-top:24px;
}

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

.footer{

    position:fixed;

    left:0;
    right:0;

    bottom:clamp(15px,3vw,30px);

    text-align:center;

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

    font-size:.9rem;

    padding:0 20px;
}

/* =====================================
   MOBILE
===================================== */

@media (max-width:768px){

    body{
        overflow:auto;
    }

    .card{
        width:95vw;
    }

    .badge{
        font-size:.7rem;
    }

}

@media (max-width:480px){

    .container{
        padding:20px;
    }

    .card{
        padding:28px 20px;
    }

}