*{margin:0;padding:0;box-sizing:border-box;}
body{text-align:center;font-family:Arial,Helvetica,sans-serif;}
.wrap{position:relative;max-width:720px;margin:0 auto;}
.bg-img{width:100%;display:block;}

.block{position:absolute;width:720px;text-align:center;}
.input-top{top:45%;}
.input-bottom{top:85%;}
.block img{padding:20px;margin: 0 auto;}

.glow-box{position:absolute;top:17%;width:720px;text-align:center;
  animation:spin 7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* pulse button */
.pulse{animation:zoom 1.1s infinite;}
@keyframes zoom{0%,100%{transform:scale(.9);}50%{transform:scale(1);}}

/* input field */
.field{
  width:80%;height:8%;
  border:2px solid #4e93ea;border-radius:1rem;
  padding:1.5rem 2rem;
  font-size:28px;text-align:center;
  margin-top:1rem;background:#c7c6cb;
}

/* popup */
.popup{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);z-index:9999;}
.popup-box{padding:30px;font-size:35px;color:#fff;
  background:rgba(0,0,0,.85);border-radius:10px;text-align:center;}

/* overlay */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);z-index:9999;color:#fff;}
.card{background:#094c89;border-radius:12px;padding:32px 18px;max-width:680px;margin:20px;}
.card h2{font-size:30px;font-weight:bold;margin-bottom:18px;}
.card p{font-size:22px;margin-bottom:18px;}

.step{margin-bottom:16px;}
.bar{background:#eee;border-radius:8px;height:16px;overflow:hidden;}
.bar span{display:block;width:0;height:100%;background:#00dcf4;border-radius:8px;transition:width .3s;}

.btn{display:flex;justify-content:center;align-items:center;cursor:pointer;border:none;}
.green{background:#15a223;color:#fff;font-size:26px;padding:12px 0;border-radius:8px;width:100%;}