*{box-sizing:border-box}
:root{--blue:#1428ff;--dark:#0b1020;--muted:#667085}
body{
  margin:0; min-height:100vh; display:grid; place-items:center; overflow:hidden;
  font-family:Arial,Helvetica,sans-serif; color:var(--dark);
  background:linear-gradient(135deg,#eef1ff 0%,#fff 48%,#f1f7ff 100%);
}
main{
  position:relative; z-index:2; width:min(760px,92%); padding:40px 20px;
  text-align:center;
}
.logo{
  width:135px;height:135px;object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(20,40,255,.18));
}
.pill{
  display:inline-block;margin-top:5px;padding:7px 14px;border-radius:99px;
  background:#fff;border:1px solid #e4e7ec;color:var(--blue);
  font-weight:800;font-size:12px;letter-spacing:1.5px;
}
h1{
  margin:16px 0 12px;font-size:clamp(40px,7vw,68px);line-height:1.02;
  letter-spacing:-2.5px;
}
h1 span{color:var(--blue)}
.sub{
  max-width:620px;margin:0 auto;color:var(--muted);
  font-size:17px;line-height:1.6;
}
.timer{
  display:flex;justify-content:center;gap:10px;margin:30px 0 22px;
}
.timer div{
  min-width:105px;padding:17px 8px;background:rgba(255,255,255,.9);
  border:1px solid #e5e7eb;border-radius:17px;
  box-shadow:0 9px 26px rgba(16,24,40,.07);
}
.timer b{display:block;color:var(--blue);font-size:34px}
.timer span{
  color:#98a2b3;font-size:10px;text-transform:uppercase;
  letter-spacing:1px;
}
button{
  border:0;border-radius:16px;padding:15px 25px;cursor:pointer;
  background:var(--blue);color:#fff;font-weight:900;font-size:15px;
  box-shadow:0 10px 25px rgba(20,40,255,.25);
  transition:.15s;
}
button:hover{transform:translateY(-2px) rotate(-1deg)}
button:active{transform:scale(.95) rotate(2deg)}
.clicks{font-size:13px;color:#7b8494;margin:12px 0}
.fun{
  display:inline-block;min-height:22px;color:#475467;font-weight:700;
  background:#fff;padding:8px 12px;border-radius:10px;border:1px solid #eaecf0;
}
footer{margin-top:34px;color:#7b8494;font-size:12px}

.confetti span{
  position:fixed;z-index:1;font-size:32px;opacity:.8;
  animation:float 5s ease-in-out infinite;
}
.confetti span:nth-child(1){top:10%;left:8%}
.confetti span:nth-child(2){top:18%;right:9%;animation-delay:.5s}
.confetti span:nth-child(3){bottom:15%;left:12%;animation-delay:1s}
.confetti span:nth-child(4){bottom:8%;right:10%;animation-delay:1.5s}
.confetti span:nth-child(5){top:45%;left:3%;animation-delay:2s}
.confetti span:nth-child(6){top:50%;right:3%;animation-delay:2.5s}

@keyframes float{
  0%,100%{transform:translateY(0) rotate(-8deg)}
  50%{transform:translateY(-18px) rotate(8deg)}
}
@media(max-width:600px){
  .logo{width:105px;height:105px}
  .timer{gap:5px}
  .timer div{min-width:72px;padding:14px 5px}
  .timer b{font-size:24px}
  .timer span{font-size:9px}
}