*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}

body{

min-height:100vh;

display:flex;
flex-direction:column;
align-items:center;

padding-top:60px;
padding-bottom:40px;

color:white;

background:linear-gradient(
270deg,
#070707,
#40434E,
#C297B8,
#DE89BE
);

background-size:600% 600%;
animation:gradientMove 10s ease infinite;

gap:20px;

}

@keyframes gradientMove{

0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}

}

.title{

font-size:34px;
font-weight:700;
color:#FDCFF3;
text-align:center;

}

.subtitle{

opacity:0.85;
text-align:center;

}

.tagline{

font-size:14px;
opacity:0.7;
text-align:center;

}

/* Glass Card */

.card{

width:300px;
padding:25px;

background:rgba(255,255,255,0.05);

backdrop-filter:blur(12px);

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,0.5);

display:flex;
flex-direction:column;
gap:12px;

}

.heading{

font-size:20px;
font-weight:bold;
color:#FDCFF3;

}

input{

padding:10px;
border:none;
border-radius:6px;

}

button{

padding:10px;

background:#DE89BE;

border:none;

border-radius:6px;

color:white;

font-weight:600;

cursor:pointer;

transition:0.3s;

}

button:hover{

background:#C297B8;

}

#qrWrapper{

display:flex;
justify-content:center;
margin-top:10px;

}

#qrCode{

background:white;
padding:10px;
border-radius:8px;

}

footer{

margin-top:30px;
font-size:13px;
opacity:0.7;
text-align:center;

}