:root {
    --brand: #6C63FF;
    --brand-2: #00D1B2;
    --brand-gradient: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}

html, body {
    scroll-padding-top: 80px
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
    text-rendering: optimizeLegibility;
}

#mainNav {
    transition: background-color .25s ease, box-shadow .25s ease
}

    #mainNav.scrolled {
        box-shadow: 0 .25rem 1rem rgba(0,0,0,.08)
    }

.nav-link {
    font-weight: 500
}

.hero {
    position: relative;
    background: var(--brand-gradient);
    color: #fff;
    overflow: clip;
}

    .hero::before {
        content: "";
        position: absolute;
        inset: -10% -20% -20% -20%;
        background: radial-gradient(600px 300px at 10% 25%, rgba(255,255,255,.18), transparent 60%), radial-gradient(600px 300px at 90% 15%, rgba(255,255,255,.12), transparent 60%), radial-gradient(700px 400px at 50% 100%, rgba(0,0,0,.15), transparent 60%);
        pointer-events: none;

    }

.glass {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
}

.btn-gradient {
    background: var(--brand-gradient);
    border: 0;
    color: #fff !important;
    box-shadow: 0 .5rem 1.25rem rgba(108,99,255,.25);
}

    .btn-gradient:hover {
        filter: brightness(.98)
    }

.gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.feature-card, .product-card {
    transition: transform .18s ease, box-shadow .18s ease;
}

    .feature-card:hover, .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.08);
    }

#backToTop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .2s ease;
}

    #backToTop.show {
        opacity: 1;
        visibility: visible;
        transform: none
    }

.rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: .25rem;
}

    .rating input {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

    .rating label {
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: inline-grid;
        place-items: center;
        color: #adb5bd;
        transition: transform .1s ease;
    }

        .rating label:hover {
            transform: scale(1.08)
        }

        .rating label svg {
            width: 24px;
            height: 24px;
            fill: currentColor
        }

        .rating input:checked ~ label,
        .rating label:hover,
        .rating label:hover ~ label {
            color: #ffb400
        }



.footer-link {
    color: inherit;
    opacity: .8;
    text-decoration: none
}



    .footer-link:hover {
        opacity: 1;
        text-decoration: underline
    }

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}



/* Social Media Icons*/

.footer-link {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    transition: 0.3s ease;
}

    /* Facebook Blue */
    .footer-link.facebook {
        color: #1877F2;
    }

    /* X Black */
    .footer-link.x {
        color: #000000;
    }

    /* Hover effect */
/*    .footer-link:hover {
        transform: scale(1.15);
        opacity: 0.8;
    }*/