/* ===========================
   Reset
=========================== */

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

html{
    font-size:16px;
}

body{
    font-family:'Poppins',sans-serif;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    background:#081827;
    position:relative;
}

/* ===========================
   Background
=========================== */

.background{
    position:fixed;
    inset:0;
    overflow:hidden;
    background:
        linear-gradient(135deg,#06121d 0%,#0b2440 45%,#081827 100%);
}

.background::before,
.background::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.background::before{
    width:35vw;
    height:35vw;
    min-width:250px;
    min-height:250px;
    max-width:500px;
    max-height:500px;

    top:-10%;
    right:-8%;

    background:#18c5d8;
    opacity:.28;
}

.background::after{
    width:40vw;
    height:40vw;
    min-width:300px;
    min-height:300px;
    max-width:550px;
    max-height:550px;

    bottom:-15%;
    left:-10%;

    background:#2563eb;
    opacity:.22;
}

/* ===========================
   Card
=========================== */

.container{

    position:relative;
    z-index:2;

    width:min(92%,760px);

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

    text-align:center;

    border-radius:28px;

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

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

    backdrop-filter:blur(18px);

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

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

}

/* ===========================
   Logo
=========================== */

.logo{

    font-size:clamp(26px,3vw,42px);

    font-weight:700;

    margin-bottom:35px;

    letter-spacing:.5px;

}

.logo span{

    color:#26d6c6;

}

/* ===========================
   Title
=========================== */

h1{

    font-size:clamp(42px,7vw,82px);

    line-height:1.1;

    font-weight:700;

    margin-bottom:20px;

}

/* ===========================
   Description
=========================== */

p{

    width:min(100%,620px);

    margin:auto;

    color:#d7d7d7;

    line-height:1.9;

    font-size:clamp(15px,2vw,18px);

}

/* ===========================
   Domain
=========================== */

.domain{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:40px;

    padding:15px 30px;

    max-width:100%;

    border-radius:50px;

    background:linear-gradient(135deg,#2563eb,#22d3ee);

    font-size:clamp(13px,2vw,17px);

    font-weight:600;

    letter-spacing:.5px;

    word-break:break-word;

    box-shadow:
        0 12px 30px rgba(34,211,238,.25);

}

/* ===========================
   Loader
=========================== */

.loader{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:45px;

}

.loader span{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#26d6c6;

    animation:bounce 1.2s infinite ease-in-out;

}

.loader span:nth-child(2){

    animation-delay:.2s;

}

.loader span:nth-child(3){

    animation-delay:.4s;

}

@keyframes bounce{

    0%,80%,100%{

        transform:scale(.5);

        opacity:.4;

    }

    40%{

        transform:scale(1.35);

        opacity:1;

    }

}

/* ===========================
   Tablet
=========================== */

@media (max-width:768px){

    body{

        padding:20px;

    }

    .container{

        border-radius:22px;

    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width:480px){

    body{

        overflow:auto;

    }

    .container{

        padding:28px 20px;

    }

    .domain{

        width:100%;

        padding:14px 18px;

    }

}