/* ==========================================================================
   SSI APP SECTION
   ========================================================================== */

.ssi-app {
    position: relative;

    overflow: hidden;

    padding:
        125px
        0
        135px;

    background:
        linear-gradient(
            145deg,
            #061426 0%,
            #0b1f3a 52%,
            #123661 100%
        );

    color:
        var(--ssi-color-white);
}

.ssi-app__background {
    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;
}

.ssi-app__grid {
    position:
        absolute;

    inset:
        0;

    opacity:
        0.25;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 92%
        );
}

.ssi-app__orb {
    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    filter:
        blur(8px);
}

.ssi-app__orb--one {
    top:
        -260px;

    right:
        -170px;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.18),
            transparent 70%
        );
}

.ssi-app__orb--two {
    bottom:
        -320px;

    left:
        -190px;

    background:
        radial-gradient(
            circle,
            rgba(220, 162, 56, 0.12),
            transparent 70%
        );
}

.ssi-app__container {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    align-items:
        center;

    gap:
        90px;
}


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

.ssi-app__content {
    max-width:
        650px;
}

.ssi-app__eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        22px;

    color:
        var(--ssi-color-accent-light);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}

.ssi-app__eyebrow::before {
    content:
        "";

    width:
        28px;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--ssi-color-accent);
}

.ssi-app__title {
    margin:
        0 0 25px;

    color:
        var(--ssi-color-white);

    font-family:
        "Manrope",
        sans-serif;

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

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.055em;
}

.ssi-app__title span {
    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #f4c766
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.ssi-app__description {
    max-width:
        620px;

    margin:
        0 0 34px;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size:
        1rem;

    line-height:
        1.8;
}


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

.ssi-app__features {
    display:
        grid;

    gap:
        11px;

    margin-bottom:
        34px;
}

.ssi-app__feature {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        11px 13px;

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

    border-radius:
        14px;

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

    transition:
        transform 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease;
}

.ssi-app__feature:hover {
    transform:
        translateX(6px);

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

    border-color:
        rgba(
            255,
            255,
            255,
            0.12
        );
}

.ssi-app__feature-icon {
    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        11px;

    background:
        rgba(
            59,
            130,
            246,
            0.13
        );

    color:
        var(--ssi-color-accent-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.62rem;

    font-weight:
        800;
}

.ssi-app__feature strong {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--ssi-color-white);

    font-size:
        0.78rem;

    font-weight:
        800;
}

.ssi-app__feature small {
    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            0.43
        );

    font-size:
        0.64rem;

    line-height:
        1.4;
}


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

.ssi-app__actions {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}

.ssi-app__download {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    min-height:
        58px;

    padding:
        0 18px;

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

    border-radius:
        16px;

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

    color:
        var(--ssi-color-white);

    box-shadow:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            0.14
        );

    backdrop-filter:
        blur(12px);

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

    transition:
        transform 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease;
}

.ssi-app__download:hover {
    transform:
        translateY(-3px);

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

    border-color:
        rgba(
            255,
            255,
            255,
            0.22
        );
}

.ssi-app__download-icon {
    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        var(--ssi-color-accent);

    color:
        var(--ssi-color-primary);

    font-size:
        0.72rem;
}

.ssi-app__download small {
    display:
        block;

    margin-bottom:
        2px;

    color:
        rgba(
            255,
            255,
            255,
            0.43
        );

    font-size:
        0.56rem;

    font-weight:
        700;
}

.ssi-app__download strong {
    display:
        block;

    color:
        var(--ssi-color-white);

    font-size:
        0.78rem;

    font-weight:
        800;
}

.ssi-app__download-arrow {
    margin-left:
        7px;

    color:
        var(--ssi-color-accent-light);

    font-size:
        1rem;
}

.ssi-app__secondary {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

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

    font-size:
        0.78rem;

    font-weight:
        800;

    transition:
        gap 250ms ease,
        color 250ms ease;
}

.ssi-app__secondary:hover {
    gap:
        12px;

    color:
        var(--ssi-color-white);
}


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

.ssi-app__visual {
    position:
        relative;

    min-height:
        610px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.ssi-app__phone-shadow {
    position:
        absolute;

    width:
        330px;

    height:
        110px;

    bottom:
        45px;

    border-radius:
        50%;

    background:
        rgba(
            0,
            0,
            0,
            0.30
        );

    filter:
        blur(25px);

    transform:
        scaleX(1.2);
}

.ssi-app__phone {
    position:
        relative;

    z-index:
        4;

    width:
        300px;

    height:
        585px;

    padding:
        10px;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius:
        40px;

    background:
        #020b18;

    box-shadow:
        0 40px 100px
        rgba(
            0,
            0,
            0,
            0.38
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.12
        );

    transform:
        rotate(3deg);

    animation:
        ssiAppPhoneFloat 5s
        ease-in-out
        infinite;

    transition:
        transform 500ms ease;
}

.ssi-app__visual:hover
.ssi-app__phone {
    transform:
        rotate(0deg)
        translateY(-7px);
}

.ssi-app__phone-notch {
    position:
        absolute;

    z-index:
        10;

    top:
        17px;

    left:
        50%;

    width:
        105px;

    height:
        25px;

    border-radius:
        999px;

    background:
        #020b18;

    transform:
        translateX(-50%);
}

.ssi-app__phone-screen {
    position:
        relative;

    height:
        100%;

    overflow:
        hidden;

    padding:
        38px 17px 18px;

    border-radius:
        31px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef4ff
        );

    color:
        var(--ssi-color-primary);
}


/* ==========================================================================
   PHONE TOP
   ========================================================================== */

.ssi-app__screen-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        19px;
}

.ssi-app__screen-top span {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #7b8798;

    font-size:
        0.48rem;

    font-weight:
        600;
}

.ssi-app__screen-top strong {
    display:
        block;

    color:
        var(--ssi-color-primary);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.8rem;

    font-weight:
        800;
}

.ssi-app__screen-avatar {
    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--ssi-color-primary);

    color:
        var(--ssi-color-white);

    font-size:
        0.62rem;

    font-weight:
        800;
}


/* ==========================================================================
   SCREEN BRAND
   ========================================================================== */

.ssi-app__screen-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        16px;

    padding:
        11px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        15px;

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

    box-shadow:
        0 8px 18px
        rgba(
            15,
            23,
            42,
            0.04
        );
}

.ssi-app__screen-brand img {
    width:
        38px;

    height:
        38px;

    object-fit:
        contain;
}

.ssi-app__screen-brand strong {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--ssi-color-primary);

    font-size:
        0.64rem;

    font-weight:
        800;
}

.ssi-app__screen-brand span {
    display:
        block;

    color:
        #8794a5;

    font-size:
        0.46rem;

    font-weight:
        600;
}


/* ==========================================================================
   PRIMARY SCREEN CARD
   ========================================================================== */

.ssi-app__screen-card {
    margin-bottom:
        15px;

    padding:
        15px;

    border-radius:
        17px;

    box-shadow:
        0 10px 25px
        rgba(
            11,
            31,
            58,
            0.12
        );
}

.ssi-app__screen-card--primary {
    background:
        linear-gradient(
            135deg,
            #0b1f3a,
            #1d4ed8
        );

    color:
        var(--ssi-color-white);
}

.ssi-app__screen-card > span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size:
        0.45rem;

    font-weight:
        700;
}

.ssi-app__screen-card strong {
    display:
        block;

    margin-bottom:
        11px;

    color:
        var(--ssi-color-white);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.78rem;

    font-weight:
        800;
}

.ssi-app__progress {
    width:
        100%;

    height:
        4px;

    margin-bottom:
        6px;

    border-radius:
        999px;

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

.ssi-app__progress span {
    display:
        block;

    width:
        68%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--ssi-color-accent);
}

.ssi-app__screen-card small {
    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size:
        0.43rem;

    font-weight:
        600;
}


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

.ssi-app__screen-label {
    margin:
        0
        0
        9px;

    color:
        #77869a;

    font-size:
        0.50rem;

    font-weight:
        800;
}

.ssi-app__screen-grid {
    display:
        grid;

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

    gap:
        7px;

    margin-bottom:
        10px;
}

.ssi-app__screen-grid div {
    padding:
        12px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        12px;

    background:
        #ffffff;
}

.ssi-app__screen-grid strong {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--ssi-color-primary);

    font-size:
        0.63rem;

    font-weight:
        800;
}

.ssi-app__screen-grid span {
    color:
        #8895a5;

    font-size:
        0.42rem;

    font-weight:
        600;
}


/* ==========================================================================
   SCREEN TEST
   ========================================================================== */

.ssi-app__screen-test {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        12px;

    border-radius:
        13px;

    background:
        var(--ssi-color-accent);

    color:
        var(--ssi-color-primary);
}

.ssi-app__screen-test small {
    display:
        block;

    margin-bottom:
        2px;

    font-size:
        0.42rem;

    font-weight:
        700;
}

.ssi-app__screen-test strong {
    display:
        block;

    font-size:
        0.62rem;

    font-weight:
        800;
}

.ssi-app__screen-test > span {
    width:
        26px;

    height:
        26px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

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

    font-size:
        0.72rem;
}


/* ==========================================================================
   FLOATING CARDS
   ========================================================================== */

.ssi-app__floating-card {
    position:
        absolute;

    z-index:
        8;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        175px;

    padding:
        12px;

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

    border-radius:
        15px;

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

    backdrop-filter:
        blur(16px);

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

    box-shadow:
        0 18px 40px
        rgba(
            0,
            0,
            0,
            0.18
        );

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

.ssi-app__floating-card--top {
    top:
        17%;

    right:
        -5%;
}

.ssi-app__floating-card--bottom {
    left:
        -5%;

    bottom:
        17%;

    animation-delay:
        -2.5s;
}

.ssi-app__floating-card > span {
    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(
            59,
            130,
            246,
            0.16
        );

    color:
        var(--ssi-color-accent-light);

    font-size:
        0.8rem;

    font-weight:
        800;
}

.ssi-app__floating-card strong {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--ssi-color-white);

    font-size:
        0.67rem;

    font-weight:
        800;
}

.ssi-app__floating-card small {
    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

    font-size:
        0.51rem;

    font-weight:
        600;
}


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

@media (max-width: 1000px) {

    .ssi-app {
        padding:
            105px
            0
            115px;
    }

    .ssi-app__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, 0.8fr);

        gap:
            50px;
    }

    .ssi-app__floating-card--top {
        right:
            -2%;
    }

    .ssi-app__floating-card--bottom {
        left:
            -2%;
    }
}

@media (max-width: 800px) {

    .ssi-app__container {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }

    .ssi-app__content {
        max-width:
            700px;
    }

    .ssi-app__visual {
        min-height:
            590px;
    }

    .ssi-app__phone {
        transform:
            rotate(2deg);
    }
}

@media (max-width: 600px) {

    .ssi-app {
        padding:
            80px
            0
            90px;
    }

    .ssi-app__title {
        font-size:
            clamp(
                2.6rem,
                14vw,
                4rem
            );
    }

    .ssi-app__description {
        font-size:
            0.94rem;
    }

    .ssi-app__actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .ssi-app__download,
    .ssi-app__secondary {
        justify-content:
            center;
    }

    .ssi-app__visual {
        min-height:
            560px;
    }

    .ssi-app__phone {
        width:
            270px;

        height:
            525px;

        border-radius:
            36px;
    }

    .ssi-app__phone-screen {
        padding:
            35px
            15px
            15px;

        border-radius:
            28px;
    }

    .ssi-app__floating-card {
        min-width:
            155px;

        padding:
            10px;
    }

    .ssi-app__floating-card--top {
        right:
            -3%;
    }

    .ssi-app__floating-card--bottom {
        left:
            -3%;
    }
}

@media (max-width: 420px) {

    .ssi-app__visual {
        min-height:
            520px;
    }

    .ssi-app__phone {
        width:
            245px;

        height:
            480px;
    }

    .ssi-app__floating-card {
        min-width:
            135px;
    }

    .ssi-app__floating-card--top {
        right:
            -7%;
    }

    .ssi-app__floating-card--bottom {
        left:
            -7%;
    }
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes ssiAppPhoneFloat {

    0%,
    100% {
        transform:
            rotate(3deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(3deg)
            translateY(-10px);
    }
}

@keyframes ssiAppFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-9px);
    }
}


@media (prefers-reduced-motion: reduce) {

    .ssi-app__phone,
    .ssi-app__floating-card {
        animation:
            none !important;
    }
}