/* Prevent mobile navbar and content from going outside the screen */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

#mainHeader {
    max-width: 100vw;
    width: 100%;
    left: 0;
    right: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

#navbar {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

#navbar .max-w-7xl {
    max-width: 100%;
    min-width: 0;
}

#navbar .flex.items-center.justify-between {
    min-width: 0;
    flex-wrap: nowrap;
}

#navbar [class*="lg:hidden"] a,
#navbar [class*="lg:hidden"] button {
    flex-shrink: 0;
}

#banner {
    --extra-space: 2px;
}

@media (min-width: 1024px) {
    #banner {
        --extra-space: 2px;
    }
}
.badge-glass {
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #414180;
    box-sizing: border-box;
    border-radius: 100px;
    padding: 8px 16px;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    background: linear-gradient(180deg, #FFFFFF 0%, #D7CFFF 100%);
    backdrop-filter: blur(2px);
}
.shine-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, rgba(7, 9, 18, 0.98) 0%, rgba(8, 10, 24, 0.97) 62%, rgba(18, 20, 40, 0.96) 100%);
}

.shine-button::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 62px;
    right: 340px;
    top: -10px;
    background: linear-gradient(180deg, rgba(80, 92, 255, 0) -57.95%, #6644FF 244.32%), #FFFFFF;
    opacity: 0.38;
    transform: skewX(20deg) translateX(0);
    transition: transform 1.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
    z-index: 2;
}

.shine-button:hover::before {
    transform: skewX(20deg) translateX(420px);
}

.shine-button::after {
    content: "";
    position: absolute;
    top: -70%;
    right: -12%;
    width: 38%;
    height: 250%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 20%,
            rgba(158, 151, 219, 0.22) 52%,
            rgba(255, 255, 255, 0.34) 66%,
            rgba(255, 255, 255, 0) 86%);
    transform: skewX(20deg);
    opacity: 0.75;
    pointer-events: none;
}

@supports (color: color(display-p3 1 1 1)) {
    .shine-button::before {
        background: linear-gradient(180deg, color(display-p3 0.325 0.357 1.000 / 0) -57.95%, color(display-p3 0.380 0.271 1.000) 244.32%), color(display-p3 1.000 1.000 1.000);
    }
}

/* Shared newsletter subscribe button */
.newsletter-subscribe-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    gap: 12px;
    width: 100%;
    height: 44px;
    background: linear-gradient(0deg, #ffffff, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 4px #d8cfff;
    border-radius: 42px;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s;
}

.newsletter-subscribe-btn:hover {
    opacity: 0.95;
    box-shadow: 0 0 0 4px #d8cfff, 0 2px 8px rgba(80, 92, 255, 0.2);
}

.newsletter-subscribe-btn .newsletter-subscribe-text {
    background: linear-gradient(180deg, #505cff 0%, #6644ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.newsletter-subscribe-btn img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}