body{
margin:0;
font-family:'Segoe UI',sans-serif;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#ffd1dc,#ffe6eb);
overflow:hidden;
}

/* floating hearts */

.bg-heart{
position:absolute;
opacity:0.35;
animation:float 5s linear infinite;
}

@keyframes float{
from{transform:translateY(100vh);}
to{transform:translateY(-10vh);}
}

/* card */

.card{
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
text-align:center;
width:380px;
position:relative;
z-index:2;
}

img{
width:150px;
margin-bottom:20px;
}

.buttons{
display:flex;
justify-content:space-between;
margin-top:25px;
}

button{
border:none;
padding:14px 26px;
border-radius:40px;
font-size:18px;
cursor:pointer;
transition:0.2s;
min-width:110px;
}

#yes{
background:#2ecc71;
color:white;
}

#no{
background:#ff4d4d;
color:white;
}

#agree{
background:#ff4d6d;
color:white;
margin-top:20px;
}

#continue{
background:#2ecc71;
color:white;
margin-top:20px;
}

/* scan */

.scan{
font-size:22px;
}

/* certificate */

.certificate{
background:#fffdf7;
padding:35px;
border-radius:16px;
border:4px solid gold;
box-shadow:0 10px 30px rgba(0,0,0,0.2), 0 0 15px rgba(255,215,0,0.5);
text-align:center;
}

.certificate h2{
font-size:28px;
}

.certificate p{
font-size:18px;
line-height:1.6;
}

/* final */

.final{
font-size:40px;
text-align:center;
color:white;
margin-top:20%;
}

.heart{
position:fixed;
font-size:25px;
animation:floatUp 3s linear forwards;
}

@keyframes floatUp{
from{transform:translateY(0);}
to{transform:translateY(-900px);opacity:0;}
}

.confetti{
position:fixed;
width:10px;
height:10px;
top:0;
animation:fall 3s linear forwards;
}

@keyframes fall{
to{transform:translateY(900px) rotate(720deg);opacity:0;}
}