/* ===========================
   Google Font
=========================== */

body{
    opacity:0;
    transition:opacity .6s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

:root{
    --primary:#2563eb;
    --primary-light:#3b82f6;
    --bg:#050816;
    --card:#0b1220;
    --text:#ffffff;
    --muted:#94a3b8;
}

body{

    background:var(--bg);
    color:var(--text);
    overflow:hidden;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;

}

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

body::before{

    content:'';
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:40px 40px;

    opacity:.35;

    z-index:-2;

}

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

.glow{

    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    z-index:-1;

}

.glow1{

    width:320px;
    height:320px;
    background:#2563eb;
    top:-80px;
    left:-80px;

}

.glow2{

    width:300px;
    height:300px;
    background:#0ea5e9;
    right:-80px;
    bottom:-80px;

}

/* ===========================
   Hero
=========================== */

.hero{

    max-width:700px;
    text-align:center;
    animation:fadeUp .8s ease;

}

.logo{

    width:90px;
    margin:auto;
    margin-bottom:25px;
    animation:float 5s ease-in-out infinite;

}

/* ===========================
   Badge
=========================== */

.badge{

    background:rgba(37,99,235,.15);
    color:#60a5fa;
    border:1px solid rgba(37,99,235,.35);
    padding:10px 18px;
    font-size:14px;
    margin-bottom:25px;

}

/* ===========================
   Heading
=========================== */

h1{

    font-size:58px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;

}

h1 span{

    color:#60a5fa;

}

p{

    color:var(--muted);
    font-size:18px;
    line-height:1.8;
    max-width:620px;
    margin:auto;

}

/* ===========================
   Waitlist
=========================== */

.waitlist{

    margin-top:45px;
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;

}

.waitlist input{

    width:360px;
    height:58px;

    border:none;
    outline:none;

    border-radius:50px;

    padding:0 22px;

    background:#101827;
    color:white;

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

    transition:.3s;

}

.waitlist input:focus{

    border-color:#2563eb;
    box-shadow:0 0 20px rgba(37,99,235,.3);

}

.waitlist input::placeholder{

    color:#94a3b8;

}

.waitlist button{

    height:58px;
    padding:0 32px;

    border:none;
    border-radius:50px;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:white;
    font-weight:600;

    transition:.3s;

    box-shadow:0 15px 35px rgba(37,99,235,.3);

}

.waitlist button:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 45px rgba(37,99,235,.45);

}

/* ===========================
   Social Icons
=========================== */

.social{

    margin-top:45px;
    display:flex;
    justify-content:center;
    gap:18px;

}

.social a{

    width:46px;
    height:46px;

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

    border-radius:50%;

    color:white;

    background:#101827;

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

    transition:.3s;

    text-decoration:none;

}

.social a:hover{

    background:#2563eb;
    transform:translateY(-4px);

}

/* ===========================
   Footer
=========================== */

small{

    display:block;
    margin-top:45px;
    color:#64748b;
    font-size:14px;

}

/* ===========================
   Animations
=========================== */

@keyframes float{

    0%,100%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ===========================
   Responsive
=========================== */

@media(max-width:768px){

    h1{

        font-size:40px;

    }

    p{

        font-size:16px;

    }

    .waitlist{

        flex-direction:column;

    }

    .waitlist input{

        width:100%;

    }

    .waitlist button{

        width:100%;

    }

    .logo{

        width:75px;

    }

}

@media(max-width:480px){

    h1{

        font-size:32px;

    }

    p{

        font-size:15px;

    }

    .badge{

        font-size:13px;

    }

}