/*
|--------------------------------------------------------------------------
| SHENDY TECH — WHY US
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   ROOT
   ========================================================================== */

body.st-site .st-why {

    --why-dark: #021844;
    --why-blue: #062b66;

    --why-gold: #f8b400;
    --why-gold-light: #ffc936;

    --why-muted: #6d7d92;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding-block:
        clamp(
            95px,
            9vw,
            145px
        );

    color:
        var(--why-dark);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 58%,
            #f0f6ff 100%
        );

    isolation: isolate;
}


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

body.st-site
.st-why-grid-bg {

    position: absolute;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    opacity: .9;

    background-image:
        linear-gradient(
            rgba(
                6,
                43,
                102,
                .03
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                6,
                43,
                102,
                .03
            )
            1px,
            transparent
            1px
        );

    background-size:
        55px
        55px;
}


/* ==========================================================================
   GLOWS
   ========================================================================== */

body.st-site
.st-why-glow {

    position: absolute;

    z-index: -4;

    pointer-events: none;

    border-radius: 50%;

    filter:
        blur(120px);
}


body.st-site
.st-why-glow-gold {

    width: 570px;
    height: 570px;

    inset-inline-start: -350px;
    inset-block-start: 18%;

    background:
        rgba(
            248,
            180,
            0,
            .11
        );
}


body.st-site
.st-why-glow-blue {

    width: 650px;
    height: 650px;

    inset-inline-end: -390px;
    inset-block-end: -230px;

    background:
        rgba(
            55,
            121,
            226,
            .10
        );
}


/* ==========================================================================
   WATERMARK
   ========================================================================== */

body.st-site
.st-why-watermark {

    position: absolute;

    inset-block-start: 40px;
    inset-inline-start: -25px;

    z-index: -2;

    pointer-events: none;

    user-select: none;

    color:
        rgba(
            2,
            24,
            68,
            .018
        );

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

    font-size:
        clamp(
            120px,
            17vw,
            300px
        );

    font-weight: 900;

    line-height: .8;

    letter-spacing: -12px;

    white-space: nowrap;
}


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

body.st-site
.st-why-top {

    display: flex;

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

    gap: 30px;

    margin-block-end:
        clamp(
            55px,
            6vw,
            85px
        );

    padding-block-end: 22px;

    border-block-end:
        1px solid
        rgba(
            6,
            43,
            102,
            .075
        );
}


body.st-site
.st-why-top-label {

    display: flex;

    align-items: center;

    gap: 12px;
}


body.st-site
.st-why-top-label > span {

    width: 38px;
    height: 2px;

    border-radius: 99px;

    background:
        var(--why-gold);
}


body.st-site
.st-why-top-label > strong {

    color:
        var(--why-dark);

    font-size: 10px;

    font-weight: 900;
}


body.st-site
.st-why-top-code {

    display: flex;

    align-items: center;

    gap: 10px;

    direction: ltr;

    color:
        rgba(
            2,
            24,
            68,
            .30
        );

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

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


body.st-site
.st-why-top-code i {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--why-gold);
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

body.st-site
.st-why-layout {

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            480px,
            .88fr
        );

    align-items: center;

    gap:
        clamp(
            65px,
            7vw,
            125px
        );
}


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

body.st-site
.st-why-copy {

    min-width: 0;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

body.st-site
.st-why-eyebrow {

    max-width: 650px;

    display: flex;

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

    gap: 25px;

    margin-block-end: 23px;
}


body.st-site
.st-why-eyebrow > span {

    color:
        var(--why-gold);

    font-size: 11px;

    font-weight: 900;
}


body.st-site
.st-why-eyebrow > strong {

    color:
        rgba(
            2,
            24,
            68,
            .24
        );

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

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* ==========================================================================
   TITLE
   ========================================================================== */

body.st-site
.st-why-title {

    max-width: 720px;

    margin:
        0
        0
        26px;

    color:
        var(--why-dark);

    font-size:
        clamp(
            47px,
            4.7vw,
            76px
        );

    font-weight: 900;

    line-height: 1.17;

    letter-spacing: -2.6px;

    text-wrap: balance;
}


html[dir="rtl"]
body.st-site
.st-why-title {

    line-height: 1.38;

    letter-spacing: 0;
}


body.st-site
.st-why-title > span {

    position: relative;


    width: fit-content;

    color:
        var(--why-gold);
}


html[dir="rtl"]
body.st-site
.st-why-title > span {

    margin-inline-start: auto;
}


body.st-site
.st-why-title > span::after {

    content: "";

    position: absolute;

    inset-inline-start: 0;
    inset-block-end: -5px;

    width: 34%;
    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--why-gold),
            transparent
        );
}


html[dir="rtl"]
body.st-site
.st-why-title > span::after {

    inset-inline-start: auto;
    inset-inline-end: 0;

    background:
        linear-gradient(
            -90deg,
            var(--why-gold),
            transparent
        );
}


/* ==========================================================================
   CUSTOM TITLE
   ========================================================================== */

body.st-site
.st-why-custom-title {

    max-width: 620px;

    margin:
        -8px
        0
        18px;

    color:
        var(--why-blue);

    font-size: 14px;

    font-weight: 800;

    line-height: 1.8;
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

body.st-site
.st-why-description {

    max-width: 640px;

    margin: 0;

    color:
        var(--why-muted);

    font-size:
        clamp(
            14px,
            1.15vw,
            17px
        );

    font-weight: 500;

    line-height: 2;

    text-wrap: pretty;
}


/* ==========================================================================
   REASONS
   ========================================================================== */

body.st-site
.st-why-reasons {

    display: grid;

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

    gap: 11px;

    max-width: 680px;

    margin-block-start: 36px;
}


body.st-site
.st-why-reason {

    min-height: 88px;

    display: grid;

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

    align-items: center;

    gap: 12px;

    padding:
        15px;

    border:
        1px solid
        rgba(
            6,
            43,
            102,
            .07
        );

    border-radius: 17px;

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

    backdrop-filter:
        blur(12px);

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

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


body.st-site
.st-why-reason:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(
            248,
            180,
            0,
            .24
        );

    box-shadow:
        0 16px 32px
        rgba(
            2,
            24,
            68,
            .06
        );
}


body.st-site
.st-why-reason-icon {

    width: 41px;
    height: 41px;

    display: flex;

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

    border-radius: 13px;

    color:
        var(--why-dark);

    background:
        linear-gradient(
            135deg,
            #fff3c7,
            #ffdc69
        );
}


body.st-site
.st-why-reason-icon svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


body.st-site
.st-why-reason > div:last-child {

    min-width: 0;
}


body.st-site
.st-why-reason > div:last-child > span {

    display: block;

    margin-block-end: 4px;

    color:
        #a6b0be;

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

    font-size: 7px;

    font-weight: 900;
}


body.st-site
.st-why-reason > div:last-child > strong {

    display: block;

    color:
        var(--why-dark);

    font-size: 11px;

    font-weight: 800;

    line-height: 1.65;
}


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

body.st-site
.st-why-visual {

    position: relative;

    min-width: 0;

    min-height: 600px;

    display: flex;

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

    perspective: 1400px;
}


/* ==========================================================================
   ORBITS
   ========================================================================== */

body.st-site
.st-why-orbit {

    position: absolute;

    inset-inline-start: 50%;
    inset-block-start: 50%;

    pointer-events: none;

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );
}


body.st-site
.st-why-orbit-one {

    width: 560px;
    height: 560px;

    border:
        1px dashed
        rgba(
            6,
            43,
            102,
            .12
        );

    animation:
        stWhyOrbit
        40s
        linear
        infinite;
}


body.st-site
.st-why-orbit-two {

    width: 440px;
    height: 440px;

    border:
        1px solid
        rgba(
            6,
            43,
            102,
            .055
        );

    animation:
        stWhyOrbitReverse
        34s
        linear
        infinite;
}


@keyframes stWhyOrbit {

    to {

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(360deg);
    }

}


@keyframes stWhyOrbitReverse {

    to {

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(-360deg);
    }

}


/* ==========================================================================
   COMMAND CARD
   ========================================================================== */

body.st-site
.st-why-command {

    position: relative;

    z-index: 5;

    width:
        min(
            100%,
            500px
        );

    min-height: 520px;

    overflow: hidden;

    padding: 25px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 34px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #010b25,
            #021844 55%,
            #07306c
        );

    box-shadow:
        0 45px 100px
        rgba(
            2,
            24,
            68,
            .23
        );

    transform-style:
        preserve-3d;

    transition:
        transform .3s ease;
}


body.st-site
.st-why-command::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .48;

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

    background-size:
        34px
        34px;
}


body.st-site
.st-why-command::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    inset-inline-end: -220px;
    inset-block-start: -180px;

    border-radius: 50%;

    pointer-events: none;

    background:
        rgba(
            248,
            180,
            0,
            .16
        );

    filter:
        blur(70px);
}


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

body.st-site
.st-why-command-head {

    position: relative;

    z-index: 3;

    display: flex;

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

    gap: 20px;

    padding-block-end: 20px;

    border-block-end:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );
}


body.st-site
.st-why-command-brand {

    width: 220px;
}


body.st-site
.st-why-command-brand img {

    width: 100%;
    height: auto;
}


body.st-site
.st-why-command-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        7px
        9px;

    border-radius: 99px;

    color:
        #68e9af;

    background:
        rgba(
            50,
            212,
            142,
            .08
        );

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

    font-size: 6px;

    font-weight: 900;
}


body.st-site
.st-why-command-status i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #37dc93;

    box-shadow:
        0 0 0 4px
        rgba(
            55,
            220,
            147,
            .10
        );
}


/* ==========================================================================
   COMMAND LABEL
   ========================================================================== */

body.st-site
.st-why-command-label {

    position: relative;

    z-index: 3;

    margin-block-start: 25px;
}


body.st-site
.st-why-command-label > span {

    display: block;

    color:
        var(--why-gold);

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

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.4px;
}


body.st-site
.st-why-command-label > strong {

    display: block;

    margin-block-start: 4px;

    color:
        rgba(
            255,
            255,
            255,
            .63
        );

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* ==========================================================================
   CORE
   ========================================================================== */

body.st-site
.st-why-core {

    position: relative;

    z-index: 3;

    height: 235px;

    margin-block:
        20px
        10px;
}


body.st-site
.st-why-core::before {

    content: "";

    position: absolute;

    inset-inline-start: 50%;
    inset-block-start: 50%;

    width: 180px;
    height: 180px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );
}


body.st-site
.st-why-core::after {

    content: "";

    position: absolute;

    inset-inline-start: 50%;
    inset-block-start: 50%;

    width: 125px;
    height: 125px;

    border:
        1px dashed
        rgba(
            248,
            180,
            0,
            .25
        );

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    animation:
        stWhyCoreSpin
        25s
        linear
        infinite;
}


@keyframes stWhyCoreSpin {

    to {

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(360deg);
    }

}


body.st-site
.st-why-core-center {

    position: absolute;

    inset-inline-start: 50%;
    inset-block-start: 50%;

    z-index: 4;

    width: 88px;
    height: 88px;

    display: flex;

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

    flex-direction: column;

    border:
        1px solid
        rgba(
            248,
            180,
            0,
            .28
        );

    border-radius: 27px;

    color:
        var(--why-gold);

    background:
        linear-gradient(
            145deg,
            rgba(
                248,
                180,
                0,
                .13
            ),
            rgba(
                255,
                255,
                255,
                .035
            )
        );

    box-shadow:
        0 18px 35px
        rgba(
            0,
            0,
            0,
            .16
        );

    transform:
        translate(
            -50%,
            -50%
        );
}


body.st-site
.st-why-core-center span {

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

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1.2px;
}


body.st-site
.st-why-core-center strong {

    margin-block-start: 2px;

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

    font-size: 28px;

    font-weight: 900;
}


/* ==========================================================================
   NODES
   ========================================================================== */

body.st-site
.st-why-core-node {

    position: absolute;

    z-index: 5;

    min-width: 100px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 13px;

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

    backdrop-filter:
        blur(10px);

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


body.st-site
.st-why-core-node > span {

    display: block;

    color:
        var(--why-gold);

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

    font-size: 6px;

    font-weight: 900;
}


body.st-site
.st-why-core-node > strong {

    display: block;

    margin-block-start: 3px;

    color:
        rgba(
            255,
            255,
            255,
            .78
        );

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

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .7px;
}


body.st-site
.st-why-node-one {

    inset-inline-start: 0;
    inset-block-start: 26px;
}


body.st-site
.st-why-node-two {

    inset-inline-end: 0;
    inset-block-start: 72px;
}


body.st-site
.st-why-node-three {

    inset-inline-start: 38px;
    inset-block-end: 13px;
}


/* ==========================================================================
   SYSTEM BARS
   ========================================================================== */

body.st-site
.st-why-system-bars {

    position: relative;

    z-index: 3;

    display: grid;

    gap: 11px;
}


body.st-site
.st-why-system-bars > div {

    display: grid;

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

    align-items: center;

    gap: 12px;
}


body.st-site
.st-why-system-bars span {

    color:
        rgba(
            255,
            255,
            255,
            .44
        );

    font-size: 8px;

    font-weight: 700;
}


body.st-site
.st-why-system-bars i {

    height: 5px;

    overflow: hidden;

    border-radius: 99px;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );
}


body.st-site
.st-why-system-bars b {

    display: block;

    width:
        var(--bar);

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--why-gold),
            #ffe17e
        );
}


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

body.st-site
.st-why-command-footer {

    position: relative;

    z-index: 3;

    display: flex;

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

    gap: 20px;

    margin-block-start: 22px;

    padding-block-start: 18px;

    border-block-start:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    font-family:
        "Inter",
        sans-serif;
}


body.st-site
.st-why-command-footer span {

    color:
        rgba(
            255,
            255,
            255,
            .31
        );

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1px;
}


body.st-site
.st-why-command-footer strong {

    color:
        var(--why-gold);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* ==========================================================================
   FLOATING CHIPS
   ========================================================================== */

body.st-site
.st-why-chip {

    position: absolute;

    z-index: 9;

    min-height: 37px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding-inline: 12px;

    border:
        1px solid
        rgba(
            6,
            43,
            102,
            .08
        );

    border-radius: 99px;

    color:
        var(--why-dark);

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

    box-shadow:
        0 15px 32px
        rgba(
            2,
            24,
            68,
            .09
        );

    backdrop-filter:
        blur(12px);

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

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

    font-size: 7px;

    font-weight: 900;

    white-space: nowrap;
}


body.st-site
.st-why-chip i {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--why-gold);
}


body.st-site
.st-why-chip-one {

    inset-inline-start: -25px;
    inset-block-start: 80px;
}


body.st-site
.st-why-chip-two {

    inset-inline-end: -25px;
    inset-block-start: 245px;
}


body.st-site
.st-why-chip-three {

    inset-inline-start: 25px;
    inset-block-end: 35px;
}


/* ==========================================================================
   PROCESS
   ========================================================================== */

body.st-site
.st-why-process {

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto;

    align-items: center;

    gap: 16px;

    margin-block-start:
        clamp(
            70px,
            7vw,
            105px
        );

    padding:
        23px
        27px;

    border:
        1px solid
        rgba(
            6,
            43,
            102,
            .07
        );

    border-radius: 21px;

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

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


body.st-site
.st-why-process-item {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}


body.st-site
.st-why-process-item > span {

    color:
        var(--why-gold);

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

    font-size: 8px;

    font-weight: 900;
}


body.st-site
.st-why-process-item > div {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


body.st-site
.st-why-process-item strong {

    color:
        var(--why-dark);

    font-size: 10px;

    font-weight: 900;
}


body.st-site
.st-why-process-item small {

    color:
        #8491a3;

    font-size: 7px;

    font-weight: 700;
}


body.st-site
.st-why-process-line {

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                6,
                43,
                102,
                .14
            ),
            rgba(
                6,
                43,
                102,
                .025
            )
        );
}


/* ==========================================================================
   LAPTOP
   ========================================================================== */

@media (max-width: 1280px) {

    body.st-site
    .st-why-layout {

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

        gap: 55px;
    }


    body.st-site
    .st-why-title {

        font-size:
            clamp(
                43px,
                4.2vw,
                61px
            );
    }


    body.st-site
    .st-why-command {

        width: 450px;

        max-width: 100%;
    }


    body.st-site
    .st-why-orbit-one {

        width: 500px;
        height: 500px;
    }


    body.st-site
    .st-why-orbit-two {

        width: 390px;
        height: 390px;
    }

}


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

@media (max-width: 980px) {

    body.st-site
    .st-why {

        padding-block:
            82px;
    }


    body.st-site
    .st-why-layout {

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

        gap: 60px;
    }


    body.st-site
    .st-why-copy {

        max-width: 760px;

        margin-inline: auto;

        text-align: center;
    }


    body.st-site
    .st-why-eyebrow {

        max-width: 620px;

        margin-inline: auto;
    }


    body.st-site
    .st-why-title {

        max-width: 720px;

        margin-inline: auto;

        font-size:
            clamp(
                43px,
                7vw,
                58px
            );
    }


    body.st-site
    .st-why-title > span {

        margin-inline: auto;
    }


    body.st-site
    .st-why-custom-title,

    body.st-site
    .st-why-description {

        margin-inline: auto;
    }


    body.st-site
    .st-why-reasons {

        max-width: 680px;

        margin-inline: auto;
    }


    body.st-site
    .st-why-visual {

        min-height: 580px;
    }


    body.st-site
    .st-why-command {

        width:
            min(
                92%,
                500px
            );
    }

}


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

@media (max-width: 700px) {

    body.st-site
    .st-why {

        min-height: 0 !important;

        padding-block:
            60px !important;
    }


    body.st-site
    .st-why-watermark {

        inset-block-start: 25px;

        font-size: 95px;

        letter-spacing: -5px;
    }


    /* ----------------------------------------------------------------------
       Top
       ---------------------------------------------------------------------- */

    body.st-site
    .st-why-top {

        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

        margin-block-end: 39px;

        padding-block-end: 17px;
    }


    body.st-site
    .st-why-top-code {

        font-size: 5.5px;

        gap: 7px;
    }


    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    body.st-site
    .st-why-layout {

        display: grid;

        grid-template-columns: 1fr;

        gap: 45px;

        height: auto !important;

        min-height: 0 !important;
    }


    /* ----------------------------------------------------------------------
       Copy
       ---------------------------------------------------------------------- */

    body.st-site
    .st-why-copy {

        width: 100%;

        max-width: 100%;

        text-align: center;
    }


    body.st-site
    .st-why-eyebrow {

        max-width: 100%;

        margin-block-end: 18px;
    }


    body.st-site
    .st-why-eyebrow > span {

        font-size: 9px;
    }


    body.st-site
    .st-why-title {

        max-width: 345px;

        margin:
            0
            auto
            18px;

        font-size:
            clamp(
                34px,
                10vw,
                42px
            );

        line-height: 1.23;
    }


    html[dir="rtl"]
    body.st-site
    .st-why-title {

        line-height: 1.42;
    }


    body.st-site
    .st-why-custom-title {

        max-width: 340px;

        margin-inline: auto;

        font-size: 12px;

        text-align: center;
    }


    body.st-site
    .st-why-description {

        max-width: 340px;

        margin-inline: auto;

        font-size: 12.5px;

        line-height: 1.9;

        text-align: center;
    }


    /* ----------------------------------------------------------------------
       Reasons
       ---------------------------------------------------------------------- */

    body.st-site
    .st-why-reasons {

        width: 100%;

        max-width: 350px;

        grid-template-columns:
            1fr;

        gap: 8px;

        margin:
            29px
            auto
            0;
    }


    body.st-site
    .st-why-reason {

        min-height: 69px;

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

        gap: 10px;

        padding:
            12px;

        text-align: start;

        border-radius: 15px;
    }


    body.st-site
    .st-why-reason:hover {

        transform: none;
    }


    body.st-site
    .st-why-reason-icon {

        width: 36px;
        height: 36px;

        border-radius: 11px;
    }


    body.st-site
    .st-why-reason-icon svg {

        width: 16px;
        height: 16px;
    }


    body.st-site
    .st-why-reason > div:last-child > strong {

        font-size: 10px;
    }


    /* ----------------------------------------------------------------------
       Visual
       ---------------------------------------------------------------------- */

    body.st-site
    .st-why-visual {

        width: 100%;

        min-height: 0 !important;

        padding-block:
            15px;

        margin-inline: auto;
    }


    body.st-site
    .st-why-command {

        width: 100%;

        max-width: 350px;

        min-height: 0;

        margin-inline: auto;

        padding: 18px;

        border-radius: 23px;

        transform: none !important;
    }


    body.st-site
    .st-why-command-brand {

        width: 170px;
    }


    body.st-site
    .st-why-command-status {

        padding:
            6px
            7px;

        font-size: 5px;
    }


    body.st-site
    .st-why-command-label {

        margin-block-start: 18px;
    }


    body.st-site
    .st-why-core {

        height: 205px;

        margin-block:
            13px
            5px;
    }


    body.st-site
    .st-why-core::before {

        width: 150px;
        height: 150px;
    }


    body.st-site
    .st-why-core::after {

        width: 105px;
        height: 105px;
    }


    body.st-site
    .st-why-core-center {

        width: 76px;
        height: 76px;

        border-radius: 22px;
    }


    body.st-site
    .st-why-core-center strong {

        font-size: 23px;
    }


    body.st-site
    .st-why-core-node {

        min-width: 82px;

        padding:
            8px
            9px;
    }


    body.st-site
    .st-why-core-node > strong {

        font-size: 6px;
    }


    body.st-site
    .st-why-node-one {

        inset-block-start: 20px;
    }


    body.st-site
    .st-why-node-two {

        inset-block-start: 65px;
    }


    body.st-site
    .st-why-node-three {

        inset-inline-start: 23px;
    }


    body.st-site
    .st-why-system-bars > div {

        grid-template-columns:
            100px
            1fr;

        gap: 8px;
    }


    body.st-site
    .st-why-system-bars span {

        font-size: 6px;
    }


    /* ----------------------------------------------------------------------
       Floating Chips
       ---------------------------------------------------------------------- */

    body.st-site
    .st-why-chip {

        min-height: 28px;

        padding-inline: 8px;

        font-size: 5px;
    }


    body.st-site
    .st-why-chip-one {

        inset-inline-start: -3px;
        inset-block-start: 0;
    }


    body.st-site
    .st-why-chip-two,

    body.st-site
    .st-why-chip-three {

        display: none;
    }


    /* ----------------------------------------------------------------------
       Orbits
       ---------------------------------------------------------------------- */

    body.st-site
    .st-why-orbit-one {

        width: 330px;
        height: 330px;

        max-width: 90vw;
    }


    body.st-site
    .st-why-orbit-two {

        width: 250px;
        height: 250px;

        max-width: 70vw;
    }


    /* ----------------------------------------------------------------------
       Process
       ---------------------------------------------------------------------- */

    body.st-site
    .st-why-process {

        width: 100%;

        display: grid;

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

        gap: 3px;

        margin-block-start: 45px;

        padding:
            14px
            7px;

        border-radius: 17px;
    }


    body.st-site
    .st-why-process-line {

        display: none;
    }


    body.st-site
    .st-why-process-item {

        flex-direction: column;

        justify-content: center;

        gap: 4px;

        text-align: center;
    }


    body.st-site
    .st-why-process-item > div {

        align-items: center;
    }


    body.st-site
    .st-why-process-item > span {

        font-size: 6px;
    }


    body.st-site
    .st-why-process-item strong {

        font-size: 7px;
    }


    body.st-site
    .st-why-process-item small {

        font-size: 5px;
    }

}


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

@media (max-width: 420px) {

    body.st-site
    .st-why {

        padding-block:
            52px !important;
    }


    body.st-site
    .st-why-title {

        max-width: 315px;

        font-size: 32px;
    }


    body.st-site
    .st-why-description {

        max-width: 315px;

        font-size: 12px;
    }


    body.st-site
    .st-why-reasons {

        max-width: 320px;
    }


    body.st-site
    .st-why-command {

        max-width: 320px;

        padding:
            16px;
    }


    body.st-site
    .st-why-command-brand {

        width: 150px;
    }


    body.st-site
    .st-why-system-bars > div {

        grid-template-columns:
            88px
            1fr;
    }


    body.st-site
    .st-why-process-item small {

        display: none;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    body.st-site
    .st-why-orbit,

    body.st-site
    .st-why-core::after {

        animation:
            none !important;
    }


    body.st-site
    .st-why-command,

    body.st-site
    .st-why-reason {

        transition:
            none !important;
    }

}