/* ==========================================
   ZAYOK NEXUS - Coming Soon Page
   Version 1.2
========================================== */

/* RESET */

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

/* BODY */

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(135deg,#F8FBFF,#EEF7FF);

    min-height:100vh;

    overflow-x:hidden;
    overflow-y:auto;

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

    color:#0D1B2D;

    position:relative;

}

/* CONTAINER */

.container{

    width:100%;
    min-height:100vh;

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

    padding:50px 20px;

}

/* CARD */

.card{

    width:700px;
    max-width:92%;

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

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

    border-radius:30px;

    padding:45px 55px;

    text-align:center;

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

    position:relative;

    z-index:10;

}

/* LOGO */

.logo{

    width:330px;
    max-width:100%;

    margin-bottom:18px;

    animation:logoFloat 6s ease-in-out infinite;

}

/* BADGE */

.badge{

    display:inline-block;

    padding:12px 24px;

    background:#EEF4FF;

    color:#2563EB;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

}

/* HEADING */

h1{

    font-size:50px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:20px;

}

h1 span{

    color:#2563EB;

}

/* DESCRIPTION */

.description{

    max-width:560px;

    margin:0 auto 35px;

    font-size:19px;

    line-height:1.8;

    color:#666;

}

/* COUNTDOWN */

.countdown{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:35px;

}

/* TIME BOX */

.time-box{

    width:95px;
    height:95px;

    background:#fff;

    border-radius:20px;

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

    box-shadow:
        0 10px 25px rgba(0,0,0,.06);

    transition:.35s ease;

}

.time-box:hover{

    transform:translateY(-6px);

}

.time-box h2{

    font-size:36px;

    color:#2563EB;

    font-weight:700;

}

.time-box p{

    font-size:13px;

    color:#777;

    margin-top:6px;

}

/* BUTTON */

.button{

    display:inline-block;

    text-decoration:none;

    padding:18px 48px;

    border-radius:999px;

    background:linear-gradient(90deg,#2563EB,#00A79D);

    color:white;

    font-weight:600;

    font-size:17px;

    transition:.35s ease;

}

.button:hover{

    transform:translateY(-4px);

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

}

/* FOOTER */

.footer-text{

    margin-top:28px;

    color:#777;

    letter-spacing:2px;

    font-size:14px;

}

/* BACKGROUND BLOBS */

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.28;

    z-index:0;

}

.blob1{

    width:420px;
    height:420px;

    background:#2563EB;

    top:-140px;
    left:-120px;

    animation:float1 12s ease-in-out infinite;

}

.blob2{

    width:340px;
    height:340px;

    background:#7C3AED;

    bottom:-120px;
    right:-120px;

    animation:float2 15s ease-in-out infinite;

}

.blob3{

    width:280px;
    height:280px;

    background:#00A79D;

    top:120px;
    right:150px;

    animation:float3 18s ease-in-out infinite;

}

/* ANIMATIONS */

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes float1{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-40px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes float2{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(35px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes float3{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-35px);

    }

    100%{

        transform:translateX(0);

    }

}

/* MOBILE */

@media (max-width:768px){

    .card{

        width:95%;

        padding:35px 25px;

    }

    .logo{

        width:220px;

    }

    .badge{

        font-size:12px;

        padding:10px 18px;

    }

    h1{

        font-size:32px;

    }

    .description{

        font-size:16px;

        line-height:1.7;

    }

    .countdown{

        display:grid;

        grid-template-columns:repeat(4,1fr);

        gap:10px;

        margin-bottom:30px;

    }

    .time-box{

        width:100%;

        height:80px;

    }

    .time-box h2{

        font-size:28px;

    }

    .time-box p{

        font-size:12px;

    }

    .button{

        display:block;

        width:85%;

        margin:0 auto;

        text-align:center;

        font-size:16px;

        padding:16px 24px;

    }

    .footer-text{

        font-size:13px;

    }

}