*{margin:0;padding:0;box-sizing:border-box}
body{
 font-family:'Poppins',sans-serif;
 background:linear-gradient(135deg,#07152d,#0f35a3,#1bb6d9);
 background-size:300% 300%;
 animation:bg 12s ease infinite;
 color:#fff;
 min-height:100vh;
 overflow-x:hidden;
}
@keyframes bg{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.background{
 position:fixed;inset:0;
 background:
 radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 35%),
 radial-gradient(circle at 80% 30%,rgba(255,255,255,.08),transparent 30%),
 radial-gradient(circle at 50% 80%,rgba(255,255,255,.08),transparent 30%);
 z-index:-1;
}
.hero{
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:60px 20px;
}
.container{
 width:100%;
 max-width:1200px;
 text-align:center;
}
.logo{
 width:260px;
 max-width:90%;
 margin-bottom:25px;
}
.badge{
 display:inline-block;
 background:#fff;
 color:#0f35a3;
 padding:10px 22px;
 border-radius:50px;
 font-weight:600;
 margin-bottom:30px;
}
h1{
 font-size:clamp(2.4rem,5vw,4.8rem);
 font-weight:800;
 line-height:1.15;
 margin-bottom:25px;
}
p{
 max-width:760px;
 margin:0 auto;
 color:#e8eefc;
 line-height:1.8;
 font-size:1.08rem;
}
#countdown{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:20px;
 max-width:720px;
 margin:50px auto;
}
#countdown div{
 background:rgba(255,255,255,.12);
 backdrop-filter:blur(16px);
 border:1px solid rgba(255,255,255,.15);
 border-radius:22px;
 padding:28px;
}
#countdown span{
 display:block;
 font-size:2.4rem;
 font-weight:700;
}
#countdown small{
 color:#d8e3ff;
}
.progress-area{
 max-width:700px;
 margin:40px auto;
}
.progress{
 height:14px;
 border-radius:20px;
 overflow:hidden;
 background:rgba(255,255,255,.15);
}
.progress-bar{
 width:78%;
 height:100%;
 background:linear-gradient(90deg,#00d4ff,#7df9ff);
 animation:progress 3s ease-in-out infinite alternate;
}
@keyframes progress{
from{width:74%}
to{width:82%}
}
.progress-area span{
 display:block;
 margin-top:12px;
 opacity:.9;
}
.features{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:24px;
 margin:70px 0;
}
.card{
 background:rgba(255,255,255,.10);
 backdrop-filter:blur(18px);
 border:1px solid rgba(255,255,255,.14);
 border-radius:24px;
 padding:35px 24px;
 transition:.35s;
}
.card:hover{
 transform:translateY(-8px);
 background:rgba(255,255,255,.16);
}
.card i{
 font-size:2rem;
 margin-bottom:18px;
 color:#8be9ff;
}
.card h3{
 margin-bottom:10px;
}
.subscribe{
 background:rgba(255,255,255,.10);
 border:1px solid rgba(255,255,255,.15);
 border-radius:30px;
 padding:45px 25px;
 max-width:850px;
 margin:0 auto 60px;
 backdrop-filter:blur(20px);
}
.subscribe h2{
 font-size:2rem;
 margin-bottom:10px;
}
form{
 display:flex;
 gap:15px;
 justify-content:center;
 flex-wrap:wrap;
 margin-top:30px;
}
input{
 width:360px;
 max-width:100%;
 padding:18px;
 border:none;
 border-radius:14px;
 outline:none;
 font-size:1rem;
}
button{
 padding:18px 34px;
 border:none;
 border-radius:14px;
 background:#fff;
 color:#0f35a3;
 font-weight:700;
 cursor:pointer;
 transition:.3s;
}
button:hover{
 transform:translateY(-3px);
}
.social{
 display:flex;
 justify-content:center;
 gap:18px;
 margin:45px 0;
}
.social a{
 width:55px;height:55px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 background:rgba(255,255,255,.12);
 color:#fff;
 text-decoration:none;
 transition:.3s;
}
.social a:hover{
 background:#fff;
 color:#0f35a3;
 transform:translateY(-5px);
}
footer{
 opacity:.8;
 padding-bottom:20px;
}
@media(max-width:768px){
#countdown{grid-template-columns:repeat(2,1fr)}
h1{font-size:2.3rem}
.subscribe{padding:35px 20px}
}
@media(max-width:480px){
#countdown{grid-template-columns:1fr}
form{flex-direction:column}
button,input{width:100%}
}