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

body {

    font-family: 'Poppins', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0f172a, #111827, #1e293b);
    position: relative;

}

/* Animated Background */

body::before {

    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, #2563eb, #06b6d4, #2563eb, #0ea5e9);
    animation: gradientMove 18s linear infinite;
    opacity: .12;

}

@keyframes gradientMove {

    0% {
        transform: translate(-25%, -25%) rotate(0deg);
    }

    100% {
        transform: translate(-25%, -25%) rotate(360deg);
    }

}

/* Blur Circle */

.bg-shape {

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

}

.shape1 {

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

}

.shape2 {

    width: 350px;
    height: 350px;
    background: #06b6d4;
    bottom: -120px;
    right: -120px;

}

/* Card */

.card {

    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 760px;

    padding: 70px 60px;

    border-radius: 30px;

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

    backdrop-filter: blur(25px);

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

    box-shadow: 0 25px 70px rgba(0, 0, 0, .35);

    text-align: center;

}

/* Logo */

.logo {

    width: 170px;
    margin-bottom: 30px;

}

/* Badge */

.badge {

    display: inline-block;

    padding: 10px 22px;

    background: rgba(37, 99, 235, .18);

    color: #7dd3fc;

    border: 1px solid rgba(125, 211, 252, .4);

    border-radius: 50px;

    font-size: 14px;

    margin-bottom: 25px;

}

/* Heading */

h1 {

    font-size: 60px;

    line-height: 1.1;

    color: #fff;

    font-weight: 800;

    margin-bottom: 20px;

}

h1 span {

    display: block;

    background: linear-gradient(90deg, #38bdf8, #2563eb);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

p {

    font-size: 18px;

    color: #cbd5e1;

    line-height: 1.8;

    max-width: 620px;

    margin: auto;

    margin-bottom: 45px;

}

/* Notify */

.notify-box {

    display: flex;

    gap: 15px;

    justify-content: center;

}

.notify-box input {

    width: 100%;

    max-width: 400px;

    padding: 17px 22px;

    border: none;

    outline: none;

    border-radius: 50px;

    background: #fff;

    font-size: 15px;

}

.notify-box button {

    padding: 17px 35px;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    font-size: 15px;

    font-weight: 600;

    background: linear-gradient(90deg, #2563eb, #06b6d4);

    color: #fff;

    transition: .35s;

}

.notify-box button:hover {

    transform: translateY(-3px);

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

}

/* Divider */

.divider {

    width: 120px;

    height: 1px;

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

    margin: 40px auto;

}

/* Contact */

.contact {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;

    margin-bottom: 30px;

}

.contact a {

    color: #e2e8f0;

    text-decoration: none;

    font-size: 15px;

}

.contact i {

    margin-right: 8px;

    color: #38bdf8;

}

/* Social */

.social {

    display: flex;

    justify-content: center;

    gap: 18px;

}

.social a {

    width: 50px;

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

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

    color: #fff;

    font-size: 18px;

    transition: .3s;

}

.social a:hover {

    background: linear-gradient(90deg, #2563eb, #06b6d4);

    transform: translateY(-5px);

}

/* Responsive */

@media (max-width:768px){

    body{
        padding:20px 12px;
    }

    .coming-soon{
        min-height:100dvh;
        padding:20px 12px;
    }

    .card{
        width:100%;
        max-width:100%;
        padding:40px 20px;
        border-radius:20px;
    }

    h1{
        font-size:36px;
    }

    p{
        font-size:16px;
    }

    .notify-box{
        flex-direction:column;
    }

    .notify-box input,
    .notify-box button{
        width:100%;
    }

}

@media(max-width:480px) {

    h1 {

        font-size: 30px;

    }

    p {

        font-size: 15px;

    }

    .badge {

        font-size: 12px;

    }

}