/* =========================================
   JS SOFTWARE
   PREMIUM VISUAL DETAILS
========================================= */


/* =========================================
   HERO LIGHT
========================================= */

.hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -220px;
    bottom: -240px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 140, 255, 0.09),
            transparent 68%
        );

    pointer-events: none;

    animation:
        glowPulse 5s ease-in-out infinite;
}


/* =========================================
   BRAND LIGHT
========================================= */

.brand-mark {
    position: relative;
}

.brand-mark::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    right: -8px;
    top: 1px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 12px
        rgba(105, 216, 255, 0.8);

    opacity: 0.8;
}


/* =========================================
   PREMIUM TEXT SELECTION
========================================= */

::selection {
    background:
        rgba(77, 184, 255, 0.25);

    color:
        #ffffff;
}


/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background:
        #030711;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        rgba(77, 184, 255, 0.25);
}

::-webkit-scrollbar-thumb:hover {
    background:
        rgba(77, 184, 255, 0.45);
}


/* =========================================
   SUBTLE GLASS
========================================= */

.glass {
    background:
        rgba(255, 255, 255, 0.025);

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.18);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================
   FOCUS
========================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        2px solid
        var(--blue-light);

    outline-offset:
        4px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .brand-mark::after {
        width: 6px;
        height: 6px;

        right: -6px;
    }

}