*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
font-family:Inter,sans-serif;
background:#f8f8f6;
color:#111;
display:flex;
justify-content:center;
align-items:center;
}
.bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at 15% 20%,rgba(0,0,0,.03),transparent 35%),
radial-gradient(circle at 85% 80%,rgba(0,0,0,.02),transparent 40%),
linear-gradient(135deg,#fafaf8,#f2f2ee,#ffffff);
}
main{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.quote-wrap{
height:120px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:10px;
}
#phrase{
font-family:'Cormorant Garamond',serif;
font-size:clamp(2.4rem,4.8vw,5.8rem);
font-weight:300;
letter-spacing:.03em;
text-align:center;
max-width:1000px;
transition:opacity .8s;
}
.label-top,.label-bottom{
letter-spacing:.35em;
font-size:.7rem;
color:#777;
}
.label-top{margin-bottom:18px}
.label-bottom{margin-top:18px}
.card{
background:white;
padding:16px;
border-radius:32px;
box-shadow:0 30px 100px rgba(0,0,0,.08);
transition:.4s;
}
.card:hover{
transform:translateY(-2px);
}
.qr{
width:240px;
display:block;
border-radius:18px;
}
footer{
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%);
width:min(92%,1200px);
display:flex;
justify-content:space-between;
align-items:flex-end;
}
.socials{
display:flex;
gap:24px;
}
.socials a{
text-decoration:none;
font-size:.75rem;
letter-spacing:.22em;
color:#666;
}
.socials a:hover{color:#000}
.legal{
text-align:right;
font-size:.72rem;
letter-spacing:.18em;
color:#888;
line-height:1.8;
}