*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Montserrat,sans-serif;
background:#0b0b0f;
color:#fff;
min-height:100vh;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.bg{
position:fixed;inset:-20%;
background:
radial-gradient(circle at 30% 30%,rgba(255,255,255,.10),transparent 25%),
radial-gradient(circle at 70% 70%,rgba(124,92,255,.18),transparent 30%);
animation:move 10s ease-in-out infinite alternate;
}
.grid{
position:fixed;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size:50px 50px;
}
@keyframes move{
from{transform:translate(-50px,-30px)}
to{transform:translate(50px,30px)}
}
.container{
position:relative;
z-index:2;
text-align:center;
width:90%;
max-width:1200px;
}
.logo{
width:260px;
filter:drop-shadow(0 0 30px rgba(255,255,255,.15));
margin-bottom:20px;
}
.eyebrow{
letter-spacing:6px;
color:#9d9d9d;
margin-bottom:25px;
}
h1{
font-size:clamp(48px,9vw,120px);
font-weight:800;
line-height:1;
background:linear-gradient(90deg,#fff,#b9b9b9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:20px;
}
.sub{
font-size:22px;
color:#bdbdbd;
margin-bottom:60px;
}
.countdown{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
.card{
width:170px;
height:170px;
border-radius:30px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
justify-content:center;
transition:.3s;
}
.card:hover{
transform:translateY(-8px);
border-color:rgba(255,255,255,.25);
}
.card span{
font-size:64px;
font-weight:800;
}
.card small{
letter-spacing:4px;
color:#9a9a9a;
margin-top:10px;
}
.status{
margin-top:40px;
color:#8cffb5;
letter-spacing:3px;
font-size:14px;
}
@media(max-width:768px){
.logo{width:180px}
.card{width:130px;height:130px}
.card span{font-size:44px}
.sub{font-size:18px}
}