/* =========================================================
   APP ELEVASIGN
   ========================================================= */

.app-showcase{
    position:relative;
    overflow:hidden;

    padding:96px 0;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(137,103,219,.12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #fbf9ff 100%
        );
}


/* =========================================================
   GRID
   ========================================================= */

.app-showcase-grid{
    position:relative;
    z-index:1;

    display:grid;

    grid-template-columns:
        minmax(340px,.82fr)
        minmax(0,1.18fr);

    align-items:center;

    gap:56px;
}


/* =========================================================
   COPY
   ========================================================= */

.app-showcase-copy{
    min-width:0;
    max-width:590px;
}


.app-showcase-copy h2{
    max-width:580px;

    margin:20px 0 0;

    font-family:
        "Plus Jakarta Sans",
        "Space Grotesk",
        Nunito,
        sans-serif;

    font-size:
        clamp(30px,3vw,42px);

    font-weight:500;

    line-height:1.12;

    letter-spacing:-.025em;

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

.app-showcase-copy h2 > span{
    display:block;
    white-space:nowrap;
}


.app-showcase-copy h2 em{
    display:block;

    color:#5932c1;

    font-style:normal;
}


.app-showcase-copy > p{
    max-width:560px;

    margin:24px 0 0;

    color:#756b89;

    font-size:18px;

    line-height:1.62;
}


/* =========================================================
   FEATURES
   ========================================================= */

.app-showcase-features{
    display:grid;

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

    gap:12px 20px;

    margin-top:28px;
}


.app-showcase-features > div{
    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#302b45;

    font-size:15px;

    font-weight:650;

    line-height:1.45;
}


.app-showcase-features i{
    flex:0 0 auto;

    margin-top:1px;

    color:#5932c1;

    font-size:20px;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.app-showcase-actions{
    display:flex;

    align-items:center;

    gap:22px;

    margin-top:38px;
}


.app-store-button{
    display:inline-flex;

    align-items:center;

    gap:12px;

    min-height:58px;

    padding:0 20px;

    border-radius:16px;

    color:#fff;

    background:#171222;

    text-decoration:none;

    box-shadow:
        0 16px 34px
        rgba(17,12,29,.16);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


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

    box-shadow:
        0 22px 40px
        rgba(17,12,29,.22);
}


.app-store-button > i{
    font-size:27px;
}


.app-store-button span{
    display:flex;

    flex-direction:column;

    gap:1px;
}


.app-store-button small{
    color:#bcb7c7;

    font-size:8px;

    line-height:1;
}


.app-store-button strong{
    color:#fff;

    font-size:15px;

    line-height:1.15;
}


/* QR */

.app-showcase-qr{
    display:flex;

    align-items:center;

    gap:10px;
}


.app-showcase-qr img{
    width:64px;
    height:64px;

    object-fit:contain;

    padding:5px;

    border:
        1px solid #e9e1f7;

    border-radius:13px;

    background:#fff;

    box-shadow:
        0 10px 24px
        rgba(89,50,193,.08);
}


.app-showcase-qr span{
    max-width:90px;

    color:#8a8098;

    font-size:10px;

    font-weight:650;

    line-height:1.35;
}


/* =========================================================
   VISUAL
   ========================================================= */

.app-showcase-visual{
    position:relative;

    min-width:0;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;
}


.app-showcase-glow{
    position:absolute;

    width:80%;
    aspect-ratio:1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(137,103,219,.22),
            rgba(137,103,219,.07) 48%,
            transparent 72%
        );

    filter:blur(10px);
}


.app-device-art{
    position:relative;

    z-index:2;

    width:100%;

    max-width:700px;

    margin-right:0;
}


.app-device-art img{
    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(
            0 34px 48px
            rgba(52,24,105,.17)
        );
}


/* =========================================================
   CARDS FLUTUANTES
   ========================================================= */

.app-floating-card{
    position:absolute;

    z-index:4;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    border:
        1px solid rgba(89,50,193,.12);

    border-radius:16px;

    background:
        rgba(255,255,255,.92);

    backdrop-filter:blur(14px);

    box-shadow:
        0 18px 44px
        rgba(60,31,110,.12);
}


.app-floating-card > i{
    width:36px;
    height:36px;

    display:grid;

    place-items:center;

    flex:0 0 auto;

    border-radius:11px;

    color:#5932c1;

    background:#efe8fd;

    font-size:18px;
}


.app-floating-card div{
    display:flex;

    flex-direction:column;

    gap:2px;
}


.app-floating-card strong{
    color:#2a203b;

    font-size:11px;

    font-weight:800;
}


.app-floating-card span{
    color:#8d8499;

    font-size:8.5px;

    font-weight:600;
}


.app-floating-card--one{
    top:13%;
    left:0;
}


.app-floating-card--two{
    right:0;
    bottom:14%;
}


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

@media(max-width:1080px){

    .app-showcase{
        padding:82px 0;
    }


    .app-showcase-grid{
        grid-template-columns:
            minmax(320px,.92fr)
            minmax(0,1.08fr);

        gap:38px;
    }


    .app-device-art{
        width:100%;

        margin-right:0;
    }

}


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

@media(max-width:900px){

    .app-showcase-grid{
        grid-template-columns:1fr;

        gap:34px;
    }


    .app-showcase-copy{
        max-width:720px;
    }


    .app-showcase-copy h2{
        max-width:650px;
    }


    .app-showcase-visual{
        min-height:auto;
    }


    .app-device-art{
        max-width:620px;

        margin:0 auto;
    }


    .app-floating-card--one{
        top:8%;
        left:4%;
    }


    .app-floating-card--two{
        right:4%;
        bottom:8%;
    }

}


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

@media(max-width:700px){

    .app-showcase{
        padding:60px 0 66px;

        background:
            radial-gradient(
                circle at 80% 48%,
                rgba(137,103,219,.13),
                transparent 34%
            ),
            #faf8ff;
    }


    .app-showcase-copy{
        text-align:center;
    }


    .app-showcase-copy .section-kicker{
        margin-inline:auto;
    }


    .app-showcase-copy h2{
        max-width:360px;

        margin:16px auto 0;

        font-size:
            clamp(27px,7.5vw,32px);

        line-height:1.1;
    }


    .app-showcase-copy h2 em{
        display:block;
    }


    .app-showcase-copy > p{
        max-width:340px;

        margin:18px auto 0;

        font-size:16px;

        line-height:1.58;
    }


    .app-showcase-features{
        grid-template-columns:1fr;

        max-width:350px;

        margin:
            24px auto 0;

        text-align:left;
    }


    .app-showcase-actions{
        flex-direction:column;

        margin-top:28px;
    }


    .app-store-button{
        width:100%;

        max-width:260px;

        justify-content:center;
    }


    .app-showcase-qr{
        flex-direction:column;

        text-align:center;
    }


    .app-showcase-qr img{
        width:76px;
        height:76px;
    }


    .app-showcase-qr span{
        max-width:none;
    }


    .app-device-art{
        width:102%;

        margin-left:-1%;
    }


    .app-floating-card{
        display:none;
    }

}







/* =========================================================
   APP STORES
   ========================================================= */

.app-showcase-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:14px;

    margin-top:28px;
}

.app-store-button{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;

    gap:13px;

    min-width:210px;
    min-height:66px;

    padding:0 24px;

    border-radius:18px;

    color:#fff;
    background:#17121f;

    text-decoration:none;

    box-shadow:
        0 12px 28px
        rgba(23,18,31,.10);

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

.app-store-button:hover{
    color:#fff;
    background:#21192d;

    transform:translateY(-2px);

    box-shadow:
        0 17px 34px
        rgba(23,18,31,.16);
}


/* ícone da loja */
.app-store-button > i:first-child{
    flex:0 0 auto;

    width:34px;

    font-size:32px;
    line-height:1;

    color:#fff;

    text-align:center;
}


/* textos */
.app-store-button > span{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:1px;

    line-height:1.05;
}

.app-store-button small{
    color:rgba(255,255,255,.68);

    font-size:10px;
    font-weight:500;
}

.app-store-button strong{
    color:#fff;

    font-size:18px;
    font-weight:750;

    letter-spacing:-.02em;
}


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

@media(max-width:640px){

    .app-showcase-actions{
        display:grid;

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

        gap:10px;
    }

    .app-store-button{
        width:100%;
        min-width:0;

        min-height:60px;

        padding:0 14px;

        border-radius:15px;
    }

    .app-store-button > i:first-child{
        width:28px;

        font-size:27px;
    }

    .app-store-button strong{
        font-size:15px;
    }

    .app-store-button small{
        font-size:8px;
    }

}

@media(max-width:400px){

    .app-showcase-actions{
        grid-template-columns:1fr;
    }

}