/* ==========================================================================
   Busi.bio — Dot pattern background + screenshot illustration
   --------------------------------------------------------------------------
   The dot grid (2px dots, 22px spacing) mirrors the artwork used across the
   auth pages, the landing hero and the contact page so every "image area"
   sits on the same texture.
   ========================================================================== */

/* ------------------------------ dot pattern ------------------------------ */

.busi-dots-bg {
    background-color: #f7f7fb;
    background-image:
        radial-gradient(circle at 1px 1px, #d6d3e6 1px, transparent 1.6px);
    background-size: 22px 22px;
    background-position: 0 0;
    background-repeat: repeat;
}

/* Same grid but tinted with the brand accent (landing hero). */
.busi-dots-bg--accent {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(32, 107, 196, .16) 1px, transparent 1.6px),
        radial-gradient(circle at 1px 1px, #d6d3e6 1px, transparent 1.6px);
    background-size: 22px 22px, 22px 22px;
}

/* ------------------------------- artwork --------------------------------- */

.busi-shot {
    position: relative;
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    background: #f7f7fb;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .04);
    border: 1px solid rgba(15, 23, 42, .06);
    line-height: 0;
}

.busi-shot img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Landing hero variant: a bit wider, with the floating accent cards. */
.busi-shot--hero {
    max-width: 560px;
}

@media (prefers-reduced-motion: no-preference) {
    .busi-shot {
        animation: busiShotFloat 7s ease-in-out infinite;
    }
}

@keyframes busiShotFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 640px) {
    .busi-shot {
        max-width: 100%;
    }
}