:root {
    --blue: #002b7f;
    --lightblue: #bed9f3;
    --violet: #7c3aed;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body { font-family: "Poppins", system-ui, sans-serif; background: #FFFFFF; overflow: hidden;position: relative; }
#bg-canvas { position: fixed; inset: 0; z-index: 0;}
.overlay { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem 1.5rem; gap: 1.75rem; }

.badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 999px; background: var(--lightblue); color: var(--blue); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); animation: pulse 1.8s ease-in-out infinite; }

.profile {display: flex; flex-direction: column; align-items: center; gap: .5rem;}
h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--blue); }
h1 .last { display: block; }
h1 .gradient { background: linear-gradient(135deg, var(--blue), var(--violet) 60%, #9f7aea); -webkit-background-clip: text; background-clip: text; color: transparent; }

.note { max-width: 34rem; font-size: 0.95rem; line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.5rem; }

.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 999px; background: var(--violet); color: #FFFFFF; text-decoration: none; font-weight: 600; box-shadow: 0 18px 40px -18px rgba(124, 58, 237, 0.7); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -18px rgba(124, 58, 237, 0.85); }

.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lightblue); color: var(--blue); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.icon-link:hover { background: var(--blue); color: #FFFFFF; transform: translateY(-2px); }
.icon-link svg { width: 22px; height: 22px; }

footer { position: fixed; bottom: 1.25rem; left: 0; right: 0; z-index: 1; text-align: center; font-size: 0.75rem;  }

@media (max-width: 480px) {
.actions { flex-direction: column; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}