/* ==========================
   RESET
========================== */

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

html,body{
    width:100%;
    height:100%;
    overflow-x:hidden;
    font-family:"Plus Jakarta Sans",sans-serif;
}

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

body{

    background:
    radial-gradient(circle at top left,#3B82F6 0%,transparent 30%),
    radial-gradient(circle at bottom right,#2563EB 0%,transparent 35%),
    linear-gradient(135deg,#eef5ff,#dbeafe);

    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    position:relative;
    overflow:hidden;

}

.background span{

    position:absolute;
    border-radius:50%;
    animation:float 12s infinite ease-in-out;
    filter:blur(10px);

}

.background span:nth-child(1){

    width:350px;
    height:350px;

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

    left:-120px;
    top:-100px;

}

.background span:nth-child(2){

    width:250px;
    height:250px;

    background:rgba(59,130,246,.18);

    right:-80px;
    bottom:-60px;

    animation-delay:2s;

}

.background span:nth-child(3){

    width:180px;
    height:180px;

    background:rgba(96,165,250,.15);

    top:50%;
    left:8%;

    animation-delay:5s;

}

@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-35px);

}

}

/* ==========================
   HERO
========================== */

.hero{

    width:100%;
    padding:60px 20px;
    display:flex;
    justify-content:center;
    align-items:center;

}

/* ==========================
   CARD
========================== */

.glass-card{

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

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

    backdrop-filter:blur(18px);

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

    border-radius:35px;

    padding:55px;

    text-align:center;

    box-shadow:

    0 25px 70px rgba(37,99,235,.18),

    inset 0 1px rgba(255,255,255,.5);

}

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

.logo-box{

    margin-bottom:25px;

}

.logo-box img{

    width:170px;

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

    filter:drop-shadow(0 20px 30px rgba(37,99,235,.30));

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/* ==========================
   TAG
========================== */

.launch-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#2563EB;

    color:#fff;

    padding:10px 22px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:25px;

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

}

/* ==========================
   TEXT
========================== */

h1{

    font-size:90px;

    color:#2563EB;

    font-weight:800;

    line-height:1;

}

h2{

    margin-top:12px;

    font-size:34px;

    color:#111827;

    font-weight:800;

}

.glass-card p{

    margin:22px auto 35px;

    max-width:620px;

    color:#4B5563;

    line-height:1.9;

    font-size:18px;

}

/* ==========================
   COUNTDOWN
========================== */

.countdown{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.time-box{

    background:#fff;

    border-radius:20px;

    padding:25px 15px;

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

}

.time-box span{

    display:block;

    font-size:42px;

    color:#2563EB;

    font-weight:800;

}

.time-box small{

    color:#64748B;

    font-weight:600;

}

/* ==========================
   FEATURES
========================== */

.features{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.features div{

    background:#EFF6FF;

    color:#2563EB;

    padding:12px 20px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.features div:hover{

    background:#2563EB;

    color:#fff;

    transform:translateY(-4px);

}

/* ==========================
   SOCIAL
========================== */

.socials{

    display:flex;

    justify-content:center;

    gap:16px;

    margin-bottom:30px;

}

.socials a{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#fff;

    color:#2563EB;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    transition:.35s;

    text-decoration:none;

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

}

.socials a:hover{

    background:#2563EB;

    color:#fff;

    transform:translateY(-8px) rotate(360deg);

}

/* ==========================
   COPYRIGHT
========================== */

.copyright{

    color:#64748B !important;

    font-size:15px !important;

    margin-top:10px !important;

}

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

@media(max-width:768px){

.glass-card{

padding:40px 25px;

border-radius:25px;

}

.logo-box img{

width:120px;

}

h1{

font-size:62px;

}

h2{

font-size:26px;

}

.glass-card p{

font-size:16px;

line-height:1.7;

}

.countdown{

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

}

.time-box{

padding:20px;

}

.time-box span{

font-size:34px;

}

.features{

gap:10px;

}

.features div{

font-size:14px;

padding:10px 16px;

}

.socials{

flex-wrap:wrap;

}

.socials a{

width:50px;

height:50px;

font-size:18px;

}

}