/* =========================================================
   MAGIC iCREATIVE
   PASTEL MAGIC THEME
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --bg-lavender: #F3E9FF;
    --bg-pink: #FDEBF4;
    --bg-blue: #EEF6FF;
    --bg-white: #FFFFFF;

    --text-deep-purple: #4C327C;
    --text-purple: #62458E;
    --text-soft-purple: #7C6A99;
    --text-muted: #9486AA;

    --accent-purple: #7B3CE6;
    --accent-pink: #D23FA5;
    --accent-gold: #F4B42D;
    --accent-blue: #4CA8F5;
    --accent-cyan: #64D7EA;

    --soft-border: #E7D9F3;

    --gradient-pastel:
        linear-gradient(
            135deg,
            #F3E9FF 0%,
            #FDEBF4 40%,
            #EEF6FF 75%,
            #FFFFFF 100%
        );

    --gradient-purple-pink:
        linear-gradient(
            90deg,
            #7B3CE6 0%,
            #A347DA 48%,
            #D23FA5 100%
        );

    --gradient-gold:
        linear-gradient(
            90deg,
            #FFD76A 0%,
            #F4B42D 55%,
            #E9A31C 100%
        );

    --shadow-soft:
        0 12px 35px
        rgba(76, 50, 124, 0.08);

    --shadow-medium:
        0 15px 45px
        rgba(76, 50, 124, 0.13);
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--gradient-pastel);

    color:
        var(--text-deep-purple);

    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.page-wrap {
    width: 100%;
    min-height: 40vh;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: relative;
    z-index: 1000;

    width: 100%;

    background:
        rgba(255, 255, 255, 0.78);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    border-bottom:
        1px solid
        rgba(123, 60, 230, 0.10);

    box-shadow:
        0 5px 20px
        rgba(76, 50, 124, 0.07);

    overflow: hidden;
}


/* =========================================================
   NAVIGATION BACKGROUND
   ========================================================= */

.navigation-background {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(243, 233, 255, 0.78),
            rgba(253, 235, 244, 0.70),
            rgba(238, 246, 255, 0.74)
        ),
        url("../img/navigation-background.png");

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    pointer-events:
        none;
}


/* =========================================================
   HEADER CONTAINER
   ========================================================= */

.header-container {
    position: relative;
    z-index: 2;

    width:
        min(1400px, 94%);

    margin:
        0 auto;

    padding:
        14px 0;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(260px, 1fr)
        auto;

    align-items:
        center;

    gap:
        26px;
}


/* =========================================================
   BRAND ZONE
   ========================================================= */

.brand-zone {
    display: flex;
    align-items: center;

    gap: 15px;
}

.brand-link {
    display: flex;
    align-items: center;

    transition:
        transform 0.2s ease;
}

.brand-link:hover {
    transform:
        translateY(-2px);
}

.developer-logo,
.sharielshariel-logo {
    width: auto;

    max-width: 175px;
    max-height: 62px;

    object-fit: contain;
}

.magic-icreative-logo {
    width: auto;

    max-width: 215px;
    max-height: 72px;

    object-fit: contain;
}

.brand-separator {
    width: 2px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-blue),
            var(--accent-purple),
            var(--accent-pink),
            var(--accent-gold)
        );

    opacity: 0.58;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-wrap {
    position: relative;

    width: 100%;
    max-width: 520px;

    justify-self: center;
}

.search-wrap input {
    width: 100%;

    padding:
        12px
        18px
        12px
        44px;

    border:
        1px solid
        rgba(123, 60, 230, 0.16);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.90);

    color:
        var(--text-deep-purple);

    outline: none;

    box-shadow:
        0 5px 16px
        rgba(76, 50, 124, 0.05);
}

.search-wrap input:focus {
    border-color:
        var(--accent-purple);

    box-shadow:
        0 0 0 4px
        rgba(123, 60, 230, 0.08);
}

.search-icon {
    position: absolute;

    left: 17px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--accent-purple);
}


/* =========================================================
   HEADER RIGHT
   ========================================================= */

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}


/* =========================================================
   LANGUAGE
   ========================================================= */

.language-switch {
    display: flex;
    align-items: center;

    gap: 7px;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        7px
        12px;

    border:
        1px solid
        rgba(123, 60, 230, 0.13);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.90);

    color:
        var(--text-deep-purple);

    font-weight: 800;
}

.lang-btn img {
    width: 27px;
    height: 18px;

    object-fit: cover;

    border-radius: 3px;
}


/* =========================================================
   USER
   ========================================================= */

.user-pill {
    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        7px
        12px
        7px
        7px;

    border:
        1px solid
        rgba(123, 60, 230, 0.10);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.82);
}

.avatar {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--gradient-purple-pink);

    color: #FFFFFF;

    font-weight: 800;
}

.user-copy {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.user-copy small {
    margin-top: 3px;

    color:
        var(--text-soft-purple);
}


/* =========================================================
   MAIN NAV
   ========================================================= */

.main-nav {
    position: relative;
    z-index: 2;

    width:
        min(1400px, 94%);

    margin:
        0 auto;

    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;

    flex-wrap: wrap;

    border-top:
        1px solid
        rgba(123, 60, 230, 0.06);
}

.main-nav > a {
    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        9px
        14px;

    border-radius:
        14px;

    color:
        var(--text-deep-purple);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.main-nav > a:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(243, 233, 255, 0.95),
            rgba(253, 235, 244, 0.90)
        );
}

.main-nav > a.active {
    background:
        linear-gradient(
            135deg,
            rgba(243, 233, 255, 0.98),
            rgba(253, 235, 244, 0.92)
        );

    color:
        var(--accent-purple);
}

.main-nav > a > span:last-child {
    display: flex;
    flex-direction: column;

    line-height: 1.05;
}

.main-nav b {
    font-size: 0.94rem;
}

.main-nav small {
    margin-top: 3px;

    color:
        var(--text-soft-purple);

    font-size: 0.67rem;
}

.nav-icon {
    width: 23px;
    height: 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:
        var(--accent-purple);
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.promo-carousel {
    position: relative;

    width: 100%;

    height:
        clamp(
            480px,
            41.67vw,
            800px
        );

    min-height: 480px;
    max-height: 800px;

    overflow: hidden;

    background:
        var(--gradient-pastel);
}

.carousel-track,
.carousel-slide {
    width: 100%;
    height: 100%;
}

.carousel-track {
    position: relative;
}

.carousel-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

.carousel-slide > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.video-slide {
    background:
        #201735;
}

.video-slide video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   CAROUSEL OVERLAY
   ========================================================= */

.carousel-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(76, 50, 124, 0.65),
            rgba(123, 60, 230, 0.24),
            rgba(255, 255, 255, 0.03)
        );
}

.carousel-overlay.soft {
    background:
        linear-gradient(
            270deg,
            rgba(76, 50, 124, 0.60),
            rgba(210, 63, 165, 0.20),
            rgba(255, 255, 255, 0.03)
        );
}


/* =========================================================
   CAROUSEL CONTENT
   ========================================================= */

.carousel-content {
    position: relative;
    z-index: 3;

    width:
        min(1200px, 88%);

    height: 100%;

    margin:
        0 auto;

    padding:
        70px
        40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    color:
        #FFFFFF;
}

.carousel-content.right {
    align-items: flex-end;

    text-align: right;
}

.carousel-kicker {
    margin-bottom: 12px;

    font-weight: 800;

    letter-spacing: 0.12em;
}

.carousel-content h1,
.carousel-content h2 {
    margin:
        0 0 18px;

    max-width: 760px;

    font-size:
        clamp(
            2.2rem,
            5vw,
            4.5rem
        );

    line-height: 1.05;
}

.carousel-content p {
    margin:
        0 0 28px;

    max-width: 680px;

    font-size:
        clamp(
            1rem,
            1.6vw,
            1.25rem
        );
}


/* =========================================================
   CAROUSEL BUTTON
   ========================================================= */

.carousel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        13px
        25px;

    border-radius:
        999px;

    background:
        var(--gradient-gold);

    color:
        #3B285E;

    font-weight: 900;

    box-shadow:
        0 10px 28px
        rgba(244, 180, 45, 0.25);
}


/* =========================================================
   CAROUSEL ARROWS
   ========================================================= */

.carousel-arrow {
    position: absolute;

    top: 50%;

    z-index: 10;

    width: 48px;
    height: 48px;

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 50%;

    background:
        var(--gradient-purple-pink);

    color:
        #FFFFFF;

    font-size: 2rem;
}

.carousel-prev {
    left: 24px;
}

.carousel-next {
    right: 24px;
}


/* =========================================================
   CAROUSEL DOTS
   ========================================================= */

.carousel-dots {
    position: absolute;

    bottom: 24px;
    left: 50%;

    z-index: 10;

    transform:
        translateX(-50%);

    display: flex;

    gap: 10px;
}

.carousel-dot {
    width: 11px;
    height: 11px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.55);
}

.carousel-dot.active {
    background:
        var(--accent-gold);
}


/* =========================================================
   BRAND STRIP
   ========================================================= */

.brand-strip {
    width:
        min(1200px, 92%);

    margin:
        44px auto;

    padding:
        34px;

    display: grid;

    grid-template-columns:
        minmax(170px, 240px)
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 34px;

    border:
        1px solid
        rgba(123, 60, 230, 0.09);

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            rgba(243, 233, 255, 0.90),
            rgba(253, 235, 244, 0.88),
            rgba(238, 246, 255, 0.92)
        );

    box-shadow:
        var(--shadow-soft);
}

.brand-strip-logo {
    width: 100%;
    max-width: 230px;

    object-fit: contain;
}

.brand-strip-copy h2 {
    margin:
        0 0 10px;

    color:
        var(--text-deep-purple);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2.45rem
        );
}

.brand-strip-copy p {
    margin: 0;

    color:
        var(--text-soft-purple);
}

.brand-strip-actions {
    display: flex;
    justify-content: flex-end;
}


/* =========================================================
   SOFT BUTTON
   ========================================================= */

.soft-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        12px
        20px;

    border:
        1px solid
        rgba(123, 60, 230, 0.12);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.70);

    color:
        var(--text-deep-purple);

    font-weight: 800;
}


/* =========================================================
   QUICK ACCESS
   ========================================================= */

.quick-access-grid {
    width:
        min(1200px, 92%);

    margin:
        0 auto 64px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;
}

.quick-access-card {
    min-height: 180px;

    padding: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px solid
        rgba(123, 60, 230, 0.08);

    border-radius:
        24px;

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        var(--shadow-soft);
}

.quick-icon {
    margin-bottom: 14px;

    font-size: 2.4rem;
}

.quick-access-card strong {
    margin-bottom: 7px;

    color:
        var(--text-deep-purple);

    font-size: 1.15rem;
}

.quick-access-card small {
    color:
        var(--text-soft-purple);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    width: 100%;

    min-height: 310px;

    display: flex;
    align-items: center;

    background-image:
        linear-gradient(
            90deg,
            rgba(243, 233, 255, 0.76),
            rgba(253, 235, 244, 0.72),
            rgba(238, 246, 255, 0.76)
        ),
        url("../img/footer-background.png");

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    border-top:
        1px solid
        rgba(123, 60, 230, 0.08);
}


/* =========================================================
   FOOTER INNER
   ========================================================= */

.footer-inner {
    width:
        min(1500px, 90%);

    margin:
        0 auto;

    padding:
        48px 0;

    display: grid;

    grid-template-columns:
        minmax(330px, 1.2fr)
        auto
        minmax(280px, 0.85fr);

    align-items: center;

    gap:
        55px;
}


/* =========================================================
   FOOTER BRAND
   ========================================================= */

.footer-brand {
    display: flex;
    align-items: center;

    gap: 24px;
}

.site-footer-logo {
    width: auto;

    max-width: 220px;
    max-height: 150px;

    object-fit: contain;
}

.footer-brand-copy strong {
    display: block;

    margin-bottom: 8px;

    color:
        var(--text-deep-purple);

    font-size: 1.35rem;
}

.footer-brand-copy p {
    margin: 0;

    color:
        var(--text-soft-purple);

    font-size: 1rem;
}


/* =========================================================
   FOOTER LINKS
   ========================================================= */

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        12px
        28px;

    flex-wrap: wrap;
}

.footer-links a {
    position: relative;

    padding:
        8px 0;

    color:
        var(--text-deep-purple);

    font-size: 0.98rem;

    font-weight: 800;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 3px;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background:
        var(--gradient-purple-pink);

    transition:
        width 0.2s ease;
}

.footer-links a:hover {
    color:
        var(--accent-pink);

    transform:
        translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}


/* =========================================================
   FOOTER DEVELOPER
   ========================================================= */

.footer-developer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.footer-developer-link {
    display: flex;
    align-items: center;

    gap: 18px;
}

.footer-developer-logo {
    width: auto;

    max-width: 110px;
    max-height: 90px;

    object-fit: contain;
}

.footer-developer-copy {
    display: flex;
    flex-direction: column;

    line-height: 1.25;
}

.footer-developer-copy small {
    margin-bottom: 4px;

    color:
        var(--text-soft-purple);

    font-size: 0.84rem;
}

.footer-developer-copy strong {
    color:
        var(--text-deep-purple);

    font-size: 1.05rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .header-container {
        grid-template-columns:
            1fr
            auto;
    }

    .brand-zone {
        grid-column:
            1 / -1;

        justify-content:
            center;
    }

    .search-wrap {
        max-width: none;
    }

    .brand-strip {
        grid-template-columns:
            190px
            1fr;
    }

    .brand-strip-actions {
        grid-column:
            1 / -1;

        justify-content:
            center;
    }

    .footer-inner {
        grid-template-columns:
            1fr
            1fr;

        gap:
            35px;
    }

    .footer-links {
        grid-column:
            1 / -1;

        grid-row:
            2;
    }
}


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

@media (max-width: 768px) {

    .header-container {
        width: 94%;

        display: flex;
        flex-direction: column;

        gap: 14px;
    }

    .brand-zone {
        justify-content: center;
    }

    .developer-logo,
    .sharielshariel-logo {
        max-width: 125px;
    }

    .magic-icreative-logo {
        max-width: 155px;
    }

    .search-wrap {
        width: 100%;
        max-width: none;
    }

    .header-right {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;
    }

    .main-nav {
        justify-content: center;
    }


    .promo-carousel {
        height: 460px;
        min-height: 460px;
    }

    .carousel-content,
    .carousel-content.right {
        width: 92%;

        padding:
            48px
            24px;

        align-items: center;

        text-align: center;
    }


    .brand-strip {
        grid-template-columns:
            1fr;

        text-align: center;
    }

    .brand-strip-logo {
        margin:
            0 auto;
    }

    .brand-strip-actions {
        justify-content: center;
    }


    .quick-access-grid {
        grid-template-columns:
            1fr;
    }


    .site-footer {
        min-height: auto;
    }

    .footer-inner {
        width: 92%;

        padding:
            50px 0;

        grid-template-columns:
            1fr;

        gap: 34px;

        text-align: center;
    }

    .footer-brand {
        flex-direction: column;

        gap: 15px;
    }

    .site-footer-logo {
        max-width: 190px;
    }

    .footer-links {
        grid-column: auto;
        grid-row: auto;

        gap:
            8px
            20px;
    }

    .footer-developer {
        justify-content: center;
    }

    .footer-developer-link {
        flex-direction: column;
    }

    .footer-developer-logo {
        max-width: 105px;
    }

    .footer-developer-copy {
        align-items: center;
    }
}


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

@media (max-width: 480px) {

    .brand-zone {
        flex-direction: column;
    }

    .brand-separator {
        display: none;
    }

    .developer-logo,
    .sharielshariel-logo {
        max-width: 130px;
    }

    .magic-icreative-logo {
        max-width: 160px;
    }

    .language-switch {
        width: 100%;

        justify-content: center;
    }

    .promo-carousel {
        height: 420px;
        min-height: 420px;
    }

    .carousel-content h1,
    .carousel-content h2 {
        font-size:
            clamp(
                1.8rem,
                10vw,
                2.5rem
            );
    }

    .footer-links {
        flex-direction: column;

        gap: 6px;
    }
}
/* =========================================================
   MAGIC iCREATIVE
   MARKETPLACE + HELP + LOGIN
   ADDITIONS
   ========================================================= */


/* =========================================================
   COMMON SECTION KICKER
   ========================================================= */

.section-kicker {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--accent-purple);

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   MARKETPLACE HERO
   ========================================================= */

.marketplace-hero {
    width: 100%;

    padding:
        55px
        0
        35px;

    background:
        linear-gradient(
            135deg,
            rgba(243, 233, 255, 0.72),
            rgba(253, 235, 244, 0.78),
            rgba(238, 246, 255, 0.78)
        );
}


.marketplace-hero-inner {
    width: min(1200px, 92%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    align-items: center;

    gap: 40px;
}


.marketplace-hero-copy {
    max-width: 720px;
}


.marketplace-hero-copy h1 {
    margin:
        0
        0
        14px;

    color: var(--text-deep-purple);

    font-size:
        clamp(
            2.2rem,
            5vw,
            4rem
        );

    line-height: 1.05;
}


.marketplace-hero-copy p {
    margin: 0;

    max-width: 680px;

    color: var(--text-soft-purple);

    font-size: 1.08rem;
    line-height: 1.7;
}


/* IMPORTANT:
   prevents the Magic iCreative logo from becoming gigantic */
.marketplace-hero-logo {
    width: 100%;
    max-width: 280px;
    max-height: 220px;

    margin-left: auto;

    object-fit: contain;
}


/* =========================================================
   MARKETPLACE TYPE CARDS
   ========================================================= */

.marketplace-type-grid {
    width: min(1200px, 92%);

    margin:
        38px
        auto;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;
}


.marketplace-type-card {
    min-height: 170px;

    padding: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px solid
        rgba(123, 60, 230, 0.09);

    border-radius: 24px;

    background:
        rgba(255, 255, 255, 0.76);

    box-shadow:
        var(--shadow-soft);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


.marketplace-type-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(123, 60, 230, 0.20);

    box-shadow:
        var(--shadow-medium);
}


.marketplace-type-icon {
    display: block;

    margin-bottom: 13px;

    font-size: 2.35rem;
}


.marketplace-type-card strong {
    margin-bottom: 7px;

    color: var(--text-deep-purple);

    font-size: 1.15rem;
}


.marketplace-type-card small {
    color: var(--text-soft-purple);
}


/* =========================================================
   MARKETPLACE FILTERS
   ========================================================= */

.marketplace-filter-panel {
    width: min(1200px, 92%);

    margin:
        0
        auto
        40px;

    padding: 22px;

    border:
        1px solid
        rgba(123, 60, 230, 0.08);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 8px 25px
        rgba(76, 50, 124, 0.06);
}


.marketplace-filter-form {
    display: grid;

    grid-template-columns:
        minmax(250px, 2fr)
        minmax(150px, 0.8fr)
        minmax(150px, 0.8fr)
        minmax(150px, 0.8fr)
        auto
        auto;

    align-items: center;

    gap: 12px;
}


.marketplace-search-field input,
.marketplace-filter-form select {
    width: 100%;
    min-height: 46px;

    padding:
        10px
        14px;

    border:
        1px solid
        var(--soft-border);

    border-radius: 14px;

    background: #ffffff;

    color: var(--text-deep-purple);

    outline: none;
}


.marketplace-search-field input:focus,
.marketplace-filter-form select:focus {
    border-color: var(--accent-purple);

    box-shadow:
        0 0 0 4px
        rgba(123, 60, 230, 0.08);
}


.primary-button {
    min-height: 46px;

    padding:
        11px
        22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 14px;

    background:
        var(--gradient-purple-pink);

    color: #ffffff;

    font-weight: 800;

    box-shadow:
        0 8px 22px
        rgba(123, 60, 230, 0.16);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.primary-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(123, 60, 230, 0.23);
}


.filter-clear-button {
    min-height: 46px;

    padding:
        11px
        18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(123, 60, 230, 0.13);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.85);

    color: var(--text-deep-purple);

    font-weight: 700;
}


/* =========================================================
   MARKETPLACE PRODUCTS
   ========================================================= */

.marketplace-products {
    width: min(1400px, 94%);

    margin:
        45px
        auto
        70px;
}


.marketplace-section-heading {
    margin-bottom: 26px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


.marketplace-section-heading h2 {
    margin: 5px 0 0;

    color: var(--text-deep-purple);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );
}


.marketplace-result-count {
    padding:
        8px
        14px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.72);

    color: var(--text-soft-purple);

    font-size: 0.88rem;
    font-weight: 700;
}


.product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 22px;
}


.product-card {
    overflow: hidden;

    border:
        1px solid
        rgba(123, 60, 230, 0.08);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.83);

    box-shadow:
        var(--shadow-soft);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.product-card:hover {
    transform: translateY(-5px);

    box-shadow:
        var(--shadow-medium);
}


.product-cover {
    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--bg-lavender),
            var(--bg-pink),
            var(--bg-blue)
        );
}


.product-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.product-cover-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 3rem;
}


.product-type-badge {
    position: absolute;

    left: 12px;
    bottom: 12px;

    padding:
        6px
        10px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.90);

    color: var(--accent-purple);

    font-size: 0.73rem;
    font-weight: 800;
}


.product-card-body {
    padding: 18px;
}


.product-category {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--accent-pink);

    font-size: 0.75rem;
    font-weight: 800;

    text-transform: uppercase;
}


.product-card-body h3 {
    margin:
        0
        0
        7px;

    color: var(--text-deep-purple);

    font-size: 1.05rem;
}


.product-theme {
    margin:
        0
        0
        9px;

    color: var(--accent-purple);

    font-size: 0.88rem;
}


.product-description {
    margin:
        0
        0
        13px;

    color: var(--text-soft-purple);

    font-size: 0.88rem;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


.product-meta {
    margin-bottom: 14px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    color: var(--text-muted);

    font-size: 0.78rem;
}


.product-price {
    margin-bottom: 14px;

    color: var(--text-deep-purple);

    font-size: 1.25rem;
    font-weight: 900;
}


.full-button {
    width: 100%;
}


/* =========================================================
   EMPTY MARKETPLACE
   ========================================================= */

.marketplace-empty-state {
    padding:
        60px
        30px;

    text-align: center;

    border:
        1px dashed
        rgba(123, 60, 230, 0.18);

    border-radius: 26px;

    background:
        rgba(255, 255, 255, 0.58);
}


.marketplace-empty-icon {
    margin-bottom: 15px;

    font-size: 2.8rem;
}


.marketplace-empty-state h2 {
    margin:
        0
        0
        10px;

    color: var(--text-deep-purple);
}


.marketplace-empty-state p {
    margin:
        0
        0
        22px;

    color: var(--text-soft-purple);
}


/* =========================================================
   HELP HERO
   ========================================================= */

.help-hero {
    padding:
        58px
        0
        42px;

    background:
        linear-gradient(
            135deg,
            rgba(243, 233, 255, 0.76),
            rgba(253, 235, 244, 0.78),
            rgba(238, 246, 255, 0.78)
        );
}


.help-hero-copy {
    width: min(1000px, 90%);

    margin: 0 auto;

    text-align: center;
}


.help-hero-copy h1 {
    margin:
        5px
        0
        15px;

    color: var(--text-deep-purple);

    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );
}


.help-hero-copy p {
    max-width: 700px;

    margin: 0 auto;

    color: var(--text-soft-purple);

    font-size: 1.05rem;
    line-height: 1.7;
}


/* =========================================================
   HELP VIDEO SECTION
   ========================================================= */

.help-video-section {
    width: min(1200px, 92%);

    margin:
        48px
        auto;
}


.help-section-heading {
    margin-bottom: 26px;

    text-align: center;
}


.help-section-heading h2 {
    margin:
        6px
        0
        9px;

    color: var(--text-deep-purple);

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.3rem
        );
}


.help-section-heading p {
    margin: 0;

    color: var(--text-soft-purple);
}


.help-video-carousel {
    display: flex;

    gap: 18px;

    overflow-x: auto;

    padding:
        6px
        4px
        18px;

    scroll-snap-type: x mandatory;

    scrollbar-width: thin;
}


.help-video-card {
    flex:
        0 0
        310px;

    min-height: 110px;

    padding: 12px;

    display: grid;

    grid-template-columns:
        110px
        minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    border:
        1px solid
        rgba(123, 60, 230, 0.10);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.86);

    color: var(--text-deep-purple);

    text-align: left;

    box-shadow:
        var(--shadow-soft);

    scroll-snap-align: start;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.help-video-card:hover {
    transform: translateY(-3px);

    box-shadow:
        var(--shadow-medium);
}


.help-video-preview {
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--bg-lavender),
            var(--bg-pink),
            var(--bg-blue)
        );
}


.help-play-button {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--gradient-purple-pink);

    color: #ffffff;

    font-size: 1rem;

    box-shadow:
        0 6px 16px
        rgba(123, 60, 230, 0.18);
}


.help-video-copy {
    display: flex;
    flex-direction: column;
}


.help-video-copy strong {
    color: var(--text-deep-purple);

    line-height: 1.25;
}


.help-video-copy small {
    margin-top: 5px;

    color: var(--text-soft-purple);
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-section {
    width: min(900px, 92%);

    margin:
        55px
        auto
        75px;
}


.faq-list {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.faq-item {
    overflow: hidden;

    border:
        1px solid
        rgba(123, 60, 230, 0.09);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.78);

    box-shadow:
        0 6px 20px
        rgba(76, 50, 124, 0.05);
}


.faq-item summary {
    padding:
        18px
        20px;

    color: var(--text-deep-purple);

    font-weight: 800;

    cursor: pointer;

    list-style: none;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item summary::after {
    content: "+";

    float: right;

    color: var(--accent-purple);

    font-size: 1.35rem;
}


.faq-item[open] summary::after {
    content: "−";
}


.faq-answer {
    padding:
        0
        20px
        20px;

    color: var(--text-soft-purple);

    line-height: 1.7;
}


.faq-answer p {
    margin: 0;
}


/* =========================================================
   VIDEO MODAL
   ========================================================= */

.help-video-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;
}


.help-video-modal.open {
    display: flex;
}


.help-video-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(35, 20, 55, 0.68);

    backdrop-filter: blur(6px);
}


.help-video-modal-content {
    position: relative;
    z-index: 2;

    width: min(900px, 94vw);

    padding: 25px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #faf4ff,
            #f5fbff
        );

    box-shadow:
        0 30px 90px
        rgba(35, 20, 55, 0.34);
}


.help-video-modal-content h3 {
    margin:
        0
        45px
        18px
        0;

    color: var(--text-deep-purple);
}


.help-video-modal-content video {
    display: block;

    width: 100%;
    max-height: 72vh;

    border-radius: 16px;

    background: #000000;
}


.help-video-close {
    position: absolute;

    top: 14px;
    right: 16px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background:
        var(--gradient-purple-pink);

    color: #ffffff;

    font-size: 1.5rem;
}


/* =========================================================
   LOGIN / AUTH PAGE
   ========================================================= */

.auth-page {
    width: 100%;
    min-height: 720px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(500px, 1fr);

    background: #ffffff;
}


/* LEFT SIDE */

.auth-brand-panel {
    padding:
        55px
        clamp(35px, 5vw, 90px);

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #F3E9FF 0%,
            #FDEBF4 48%,
            #EEF6FF 100%
        );
}


.auth-logo {
    width: 100%;
    max-width: 340px;
    max-height: 300px;

    margin:
        0
        auto
        35px;

    object-fit: contain;
}


.auth-brand-copy {
    max-width: 560px;
}


.auth-brand-copy h1 {
    margin:
        0
        0
        22px;

    color: var(--text-deep-purple);

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.2rem
        );

    line-height: 1.15;
}


.auth-brand-copy p {
    margin:
        0
        0
        34px;

    color: var(--text-soft-purple);

    font-size: 1.15rem;
    line-height: 1.8;
}


.auth-brand-copy em {
    color: var(--text-purple);

    font-family: Georgia, serif;

    font-size: 1.08rem;
}


/* RIGHT SIDE */

.auth-form-panel {
    padding:
        55px
        clamp(40px, 6vw, 100px);

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        rgba(255, 255, 255, 0.94);
}


.auth-section {
    width: 100%;
    max-width: 650px;

    margin:
        0
        auto;
}


.auth-section h2 {
    margin:
        0
        0
        5px;

    color: var(--text-deep-purple);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.4rem
        );
}


.auth-section > p {
    margin:
        0
        0
        20px;

    color: var(--text-soft-purple);
}


.auth-form {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


.auth-form label {
    display: flex;
    flex-direction: column;

    gap: 7px;

    color: var(--text-deep-purple);

    font-weight: 600;
}


.auth-form input {
    width: 100%;
    min-height: 52px;

    padding:
        12px
        15px;

    border:
        1px solid
        var(--soft-border);

    border-radius: 14px;

    background: #ffffff;

    color: var(--text-deep-purple);

    outline: none;
}


.auth-form input:focus {
    border-color: var(--accent-purple);

    box-shadow:
        0 0 0 4px
        rgba(123, 60, 230, 0.08);
}


.auth-login-button,
.auth-register-button {
    width: 100%;
    min-height: 54px;

    border: 0;
    border-radius: 14px;

    font-size: 1.05rem;
    font-weight: 900;

    cursor: pointer;
}


.auth-login-button {
    background:
        var(--gradient-purple-pink);

    color: #ffffff;
}


.auth-register-button {
    background:
        var(--gradient-gold);

    color: #33214e;
}


.auth-divider {
    width: 100%;
    max-width: 650px;

    margin:
        38px
        auto;

    display: flex;
    align-items: center;

    gap: 16px;

    color: var(--text-soft-purple);
}


.auth-divider::before,
.auth-divider::after {
    content: "";

    height: 1px;

    flex: 1;

    background:
        var(--soft-border);
}


.form-message {
    margin-bottom: 16px;

    padding:
        12px
        14px;

    border-radius: 12px;

    font-size: 0.9rem;
}


.form-message.error {
    background:
        rgba(210, 63, 165, 0.08);

    color: #9F246F;
}


.form-message.success {
    background:
        rgba(76, 168, 245, 0.10);

    color: #235E91;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .product-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .marketplace-filter-form {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 900px) {

    .marketplace-hero-inner {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .marketplace-hero-copy {
        margin: 0 auto;
    }

    .marketplace-hero-logo {
        max-width: 230px;

        margin: 0 auto;
    }


    .product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        min-height: auto;

        padding:
            45px
            30px;

        text-align: center;
    }

    .auth-logo {
        max-width: 260px;

        margin-bottom: 25px;
    }

    .auth-brand-copy {
        margin: 0 auto;
    }

    .auth-form-panel {
        padding:
            45px
            30px;
    }

}


@media (max-width: 768px) {

    .marketplace-type-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-filter-form {
        grid-template-columns: 1fr;
    }

    .help-video-card {
        flex-basis: 280px;
    }

}


@media (max-width: 560px) {

    .product-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-section-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .auth-brand-copy h1 {
        font-size: 2.3rem;
    }

}
/* =========================================================
   BILINGUAL NAVIGATION
   English above / Spanish below
   ========================================================= */

.main-nav > a {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 54px;

    padding:
        8px
        14px;

    border-radius: 14px;

    color:
        var(--text-deep-purple);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.main-nav > a:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(243, 233, 255, 0.96),
            rgba(253, 235, 244, 0.92),
            rgba(238, 246, 255, 0.92)
        );

    box-shadow:
        0 6px 18px
        rgba(76, 50, 124, 0.07);
}


.main-nav > a.active {
    background:
        linear-gradient(
            135deg,
            rgba(243, 233, 255, 0.98),
            rgba(253, 235, 244, 0.96)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(123, 60, 230, 0.09);
}


/* Navigation icon */

.nav-icon {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:
        var(--accent-purple);

    font-size: 1rem;
}


/* English + Spanish */

.nav-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;

    line-height: 1.05;
}


.nav-en {
    color:
        var(--text-deep-purple);

    font-size: 0.95rem;
    font-weight: 800;
}


.nav-es {
    margin-top: 4px;

    color:
        var(--text-soft-purple);

    font-size: 0.68rem;
    font-weight: 600;
}


/* Active navigation */

.main-nav > a.active .nav-en {
    color:
        var(--accent-purple);
}


/* =========================================================
   BILINGUAL HEADINGS
   ========================================================= */

.bilingual-heading {
    display: flex;
    flex-direction: column;
}


.heading-en {
    margin: 0;

    color:
        var(--text-deep-purple);
}


.heading-es {
    margin:
        5px
        0
        18px;

    color:
        var(--text-purple);

    font-size:
        1.05rem;

    font-weight:
        600;
}


.description-en {
    margin:
        0
        0
        5px;

    color:
        var(--text-deep-purple);

    line-height:
        1.6;
}


.description-es {
    margin: 0;

    color:
        var(--text-soft-purple);

    line-height:
        1.6;
}


/* =========================================================
   SMALL BILINGUAL LABEL
   ========================================================= */

.label-en {
    display: block;

    color:
        var(--text-deep-purple);

    font-weight:
        700;
}


.label-es {
    display: block;

    margin-top: 2px;

    color:
        var(--text-soft-purple);

    font-size:
        0.78rem;
}


/* =========================================================
   FOOTER BILINGUAL
   ========================================================= */

.footer-spanish-tagline {
    display: block;

    margin-top: 5px;

    color:
        var(--text-soft-purple);

    font-size:
        0.82rem;
}


.footer-developer-copy {
    display: flex;
    flex-direction: column;
}


.footer-developer-copy > small {
    color:
        var(--text-soft-purple);
}


.footer-developer-copy > strong {
    margin-top: 2px;

    color:
        var(--text-deep-purple);
}


.footer-developer-es {
    margin-top: 4px;

    color:
        var(--text-soft-purple);

    font-size:
        0.72rem;
}


/* =========================================================
   MOBILE BILINGUAL NAVIGATION
   ========================================================= */

@media (max-width: 768px) {

    .main-nav {
        width: 96%;

        justify-content: center;

        gap: 4px;
    }


    .main-nav > a {
        padding:
            7px
            9px;
    }


    .nav-en {
        font-size:
            0.84rem;
    }


    .nav-es {
        font-size:
            0.62rem;
    }

}
/* Active navigation */

.main-nav > a.active .nav-en {
    color:
        var(--accent-purple);
}


/* =========================================================
   BILINGUAL HEADINGS
   ========================================================= */

.bilingual-heading {
    display: flex;
    flex-direction: column;
}


.heading-en {
    margin: 0;

    color:
        var(--text-deep-purple);
}


.heading-es {
    margin:
        5px
        0
        18px;

    color:
        var(--text-purple);

    font-size:
        1.05rem;

    font-weight:
        600;
}


.description-en {
    margin:
        0
        0
        5px;

    color:
        var(--text-deep-purple);

    line-height:
        1.6;
}


.description-es {
    margin: 0;

    color:
        var(--text-soft-purple);

    line-height:
        1.6;
}


/* =========================================================
   SMALL BILINGUAL LABEL
   ========================================================= */

.label-en {
    display: block;

    color:
        var(--text-deep-purple);

    font-weight:
        700;
}


.label-es {
    display: block;

    margin-top: 2px;

    color:
        var(--text-soft-purple);

    font-size:
        0.78rem;
}


/* =========================================================
   FOOTER BILINGUAL
   ========================================================= */

.footer-spanish-tagline {
    display: block;

    margin-top: 5px;

    color:
        var(--text-soft-purple);

    font-size:
        0.82rem;
}


.footer-developer-copy {
    display: flex;
    flex-direction: column;
}


.footer-developer-copy > small {
    color:
        var(--text-soft-purple);
}


.footer-developer-copy > strong {
    margin-top: 2px;

    color:
        var(--text-deep-purple);
}


.footer-developer-es {
    margin-top: 4px;

    color:
        var(--text-soft-purple);

    font-size:
        0.72rem;
}


/* =========================================================
   MOBILE BILINGUAL NAVIGATION
   ========================================================= */

@media (max-width: 768px) {

    .main-nav {
        width: 96%;

        justify-content: center;

        gap: 4px;
    }


    .main-nav > a {
        padding:
            7px
            9px;
    }


    .nav-en {
        font-size:
            0.84rem;
    }


    .nav-es {
        font-size:
            0.62rem;
    }

}