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

body{

font-family:'Poppins',sans-serif;
height:100vh;
overflow:hidden;
background:#07111f;
color:#fff;

}

.background{

position:absolute;
width:100%;
height:100%;
background:
linear-gradient(135deg,#061428,#0b2f4d,#163f64,#0b2035);
background-size:300% 300%;
animation:bg 12s ease infinite;

}

@keyframes bg{

0%{
background-position:left;
}

50%{
background-position:right;
}

100%{
background-position:left;
}

}

.hero{

position:relative;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;

}

.glass{

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

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

backdrop-filter:blur(20px);

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

border-radius:25px;

padding:60px;

text-align:center;

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

animation:up 1s;

}

@keyframes up{

from{

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

}

to{

opacity:1;
transform:translateY(0);

}

}

.logo{

font-size:60px;
margin-bottom:15px;

}

h3{

color:#ffb547;

letter-spacing:4px;

font-weight:600;

margin-bottom:15px;

}

h1{

font-size:46px;

font-weight:700;

margin-bottom:20px;

line-height:1.3;

}

p{

opacity:.8;

line-height:1.8;

margin-bottom:30px;

}

.countdown{

display:flex;

justify-content:center;

gap:25px;

margin:35px 0;

}

.countdown div{

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

padding:18px;

width:100px;

border-radius:15px;

}

.countdown span{

font-size:38px;

font-weight:700;

display:block;

color:#ffb547;

}

.progress{

height:12px;

background:#1f3552;

border-radius:100px;

overflow:hidden;

margin:25px 0;

}

.progress-bar{

width:78%;

height:100%;

background:linear-gradient(90deg,#ffb547,#ff6b00);

animation:load 3s infinite alternate;

}

@keyframes load{

from{

width:68%;

}

to{

width:78%;

}

}

.status{

font-size:15px;

margin-bottom:35px;

}

form{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

}

input{

padding:16px 20px;

width:340px;

border:none;

outline:none;

border-radius:40px;

font-size:15px;

}

button{

padding:16px 35px;

border:none;

border-radius:40px;

background:#ffb547;

color:#07111f;

font-weight:600;

cursor:pointer;

transition:.3s;

}

button:hover{

background:white;

transform:translateY(-3px);

}

.floating{

position:absolute;

bottom:-200px;

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

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

}

.floating1{

left:8%;

width:140px;

height:260px;

animation:float1 18s linear infinite;

}

.floating2{

right:12%;

width:180px;

height:340px;

animation:float2 25s linear infinite;

}

.floating3{

left:65%;

width:110px;

height:220px;

animation:float3 20s linear infinite;

}

@keyframes float1{

to{

transform:translateY(-130vh);

}

}

@keyframes float2{

to{

transform:translateY(-140vh);

}

}

@keyframes float3{

to{

transform:translateY(-120vh);

}

}

@media(max-width:768px){

.glass{

padding:40px 25px;

}

h1{

font-size:32px;

}

.countdown{

gap:10px;

}

.countdown div{

width:70px;

padding:12px;

}

.countdown span{

font-size:24px;

}

input{

width:100%;

}

button{

width:100%;

}

}