html, body {
margin: 0;
padding: 0;
height: 100%;
background: #000;
color: #fff;
font-family: 'Inter', sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 1.2s ease;
}

.container {
text-align: center;
}

h1 {
font-weight: 600;
font-size: 14px;
letter-spacing: 0.25em;
margin-bottom: 40px;
}

.qr {
width: 180px;
max-width: 60vw;
transition: transform 0.25s ease, opacity 0.25s ease;
}

.qr:hover {
transform: scale(1.05);
opacity: 0.85;
}

.hint {
font-size: 10px;
opacity: 0.4;
margin-top: 10px;
letter-spacing: 0.15em;
}

.services {
margin-top: 50px;
font-size: 12px;
letter-spacing: 0.2em;
opacity: 0.7;
line-height: 2;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

/* Subtle noise texture */
body::after {
content: "";
position: fixed;
inset: 0;
background: url('https://grainy-gradients.vercel.app/noise.svg');
opacity: 0.05;
pointer-events: none;
}