/* Explain: Viewport-safe centered layout for the digital contact card */
.contact-card-shell {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    place-items: center;
    padding: 1rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, var(--secondary-color) 0, transparent 30%),
        radial-gradient(circle at 92% 18%, var(--glow-color) 0, transparent 26%),
        linear-gradient(145deg, var(--background-color), var(--surface-color));
}

.contact-card-shell::before,
.contact-card-shell::after {
    position: absolute;
    width: 18rem;
    height: 18rem;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    content: "";
    opacity: 0.7;
}

.contact-card-shell::before {
    top: -8rem;
    left: -7rem;
}

.contact-card-shell::after {
    right: -9rem;
    bottom: -6rem;
}

@media (max-width: 480px) {
    .contact-card-shell {
        padding: clamp(0.45rem, 2.5vw, 0.85rem);
    }
}