/* =========================================================
   ISTOREA SMART MOVE — v1.4.1
   Compact comparison layout with reference-style motion.
   Created and Designed by Kshitiz Jain
   ========================================================= */

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

.ism-section {
    --ism-bg:#030303;
    --ism-gold:#DDB54B;
    --ism-white:#F4EFE7;
    --ism-muted:#C9C7C3;

    position:relative;

    width:100% !important;
    max-width:100% !important;

    min-height:720px;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:var(--ism-bg);

    color:var(--ism-white);

    isolation:isolate;
}


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

.ism-media,
.ism-media picture,
.ism-media > picture > img,
.ism-overlay {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
}

.ism-media {
    z-index:0;

    overflow:hidden;
}

.ism-media picture,
.ism-media > picture > img {
    display:block;
}

.ism-media > picture > img {
    object-fit:cover;
    object-position:center;

    transform:scale(1.025);

    filter:
        saturate(.72)
        brightness(.72);

    transition:
        transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.ism-section.is-visible .ism-media > picture > img {
    transform:scale(1);
}

.ism-overlay {
    background:
        radial-gradient(
            circle at 50% 24%,
            rgba(221,181,75,.075),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.68) 33%,
            rgba(0,0,0,.70) 65%,
            rgba(0,0,0,.91) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.54) 0%,
            rgba(0,0,0,.18) 50%,
            rgba(0,0,0,.50) 100%
        );
}


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

.ism-inner {
    position:relative;

    z-index:2;

    width:
        min(
            1160px,
            calc(100% - 44px)
        );

    margin:0 auto;

    padding:
        44px
        0
        46px;
}


/* =========================================================
   HEADING
   ========================================================= */

.ism-head {
    position:relative;

    text-align:center;

    opacity:0;

    transform:
        translate3d(
            0,
            20px,
            0
        );

    transition:
        opacity .65s ease,
        transform .72s cubic-bezier(.2,.75,.2,1);
}

.ism-section.is-visible .ism-head {
    opacity:1;

    transform:none;
}

.ism-eyebrow {
    margin:
        0
        0
        12px;

    color:var(--ism-gold);

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

    font-size:12px;

    font-weight:700;

    line-height:1;

    letter-spacing:.33em;

    text-transform:uppercase;
}

.ism-head h2 {
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            52px,
            5vw,
            76px
        );

    font-weight:700;

    line-height:.88;

    letter-spacing:-.052em;

    text-transform:uppercase;
}

.ism-head h2 span,
.ism-head h2 em {
    display:block;

    font-style:normal;
}

.ism-head h2 span {
    color:var(--ism-white);
}

.ism-head h2 em {
    margin-top:4px;

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


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

.ism-compare {
    position:relative;

    width:
        min(
            980px,
            100%
        );

    margin:
        37px
        auto
        0;

    display:grid;

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

    gap:34px;

    align-items:stretch;
}


/* =========================================================
   VS
   ========================================================= */

.ism-vs {
    position:absolute;

    left:50%;
    top:50%;

    z-index:20;

    width:50px;
    height:50px;

    display:flex;

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

    border:
        1px solid
        rgba(221,181,75,.55);

    border-radius:50%;

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

    box-shadow:
        0
        0
        0
        6px
        rgba(3,3,3,.60),
        0
        0
        28px
        rgba(221,181,75,.11);

    transform:
        translate(
            -50%,
            -50%
        )
        scale(.82);

    opacity:0;

    transition:
        opacity .5s ease .25s,
        transform .6s cubic-bezier(.2,.8,.2,1) .25s;
}

.ism-section.is-visible .ism-vs {
    opacity:1;

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

.ism-vs span {
    color:var(--ism-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:14px;

    font-weight:700;

    line-height:1;

    letter-spacing:.06em;
}


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

.ism-card {
    position:relative;

    min-width:0;

    height:440px;

    overflow:hidden;

    border-radius:26px;

    background:
        rgba(10,10,11,.87);

    box-shadow:
        0
        26px
        60px
        rgba(0,0,0,.32);

    opacity:0;

    transform:
        translate3d(
            0,
            30px,
            0
        );

    transition:
        opacity .65s ease,
        transform .7s cubic-bezier(.2,.78,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}

.ism-card--offline {
    border:
        1px solid
        rgba(255,255,255,.16);

    transition-delay:.08s;
}

.ism-card--online {
    border:
        1px solid
        rgba(221,181,75,.54);

    box-shadow:
        0
        26px
        60px
        rgba(0,0,0,.34),
        0
        0
        28px
        rgba(221,181,75,.07);

    transition-delay:.16s;
}

.ism-section.is-visible .ism-card {
    opacity:1;

    transform:none;
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.ism-card-photo {
    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

    background:#090909;
}

.ism-card-photo img {
    display:block;

    width:100%;
    height:100%;

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

    transform:scale(1.035);

    filter:
        saturate(.72)
        brightness(.54);

    transition:
        transform .8s cubic-bezier(.2,.75,.2,1),
        filter .55s ease;
}

.ism-photo-shade {
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.22) 0%,
            rgba(0,0,0,.50) 28%,
            rgba(0,0,0,.88) 58%,
            rgba(0,0,0,.985) 100%
        );

    transition:
        background .45s ease;
}

.ism-card--offline .ism-photo-shade {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.34) 0%,
            rgba(0,0,0,.65) 30%,
            rgba(0,0,0,.93) 60%,
            rgba(0,0,0,.99) 100%
        );
}


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

.ism-card-top {
    position:relative;

    z-index:3;

    min-height:120px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:
        25px
        27px
        17px;

    border-bottom:
        1px solid
        rgba(255,255,255,.095);
}

.ism-card-symbol {
    width:58px;
    height:58px;

    flex:
        0
        0
        58px;

    display:flex;

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

    border-radius:50%;

    transition:
        transform .45s cubic-bezier(.2,.75,.2,1),
        box-shadow .35s ease,
        background .35s ease;
}

.ism-card-symbol svg {
    width:31px;
    height:31px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

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

.ism-card-symbol--offline {
    color:
        rgba(244,239,231,.78);

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

    background:
        rgba(30,30,33,.65);
}

.ism-card-symbol--online {
    color:#111;

    border:
        1px solid
        rgba(221,181,75,.84);

    background:
        linear-gradient(
            145deg,
            #F1D878,
            #D7AB3D
        );

    box-shadow:
        0
        12px
        28px
        rgba(221,181,75,.18);
}

.ism-card-symbol--online svg {
    fill:#111;

    stroke:#111;
}

.ism-card-heading {
    min-width:0;
}

.ism-card-heading h3 {
    margin:0;

    color:var(--ism-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:28px;

    font-weight:700;

    line-height:1;

    letter-spacing:-.025em;

    text-transform:uppercase;
}

.ism-card--online .ism-card-heading h3 {
    color:var(--ism-gold);
}

.ism-card-heading p {
    margin:
        8px
        0
        0;

    color:
        rgba(201,199,195,.67);

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

    font-size:9px;

    font-weight:700;

    line-height:1;

    letter-spacing:.24em;

    text-transform:uppercase;
}


/* =========================================================
   ROWS
   ========================================================= */

.ism-card ul {
    position:relative;

    z-index:3;

    list-style:none;

    margin:0;
    padding:
        8px
        25px
        14px;
}

.ism-card li {
    min-height:52px;

    display:grid;

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

    gap:10px;

    align-items:center;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);

    color:
        rgba(244,239,231,.90);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:15px;

    line-height:1.25;

    transition:
        transform .28s ease,
        border-color .28s ease,
        color .28s ease;
}

.ism-card li:last-child {
    border-bottom:0;
}

.ism-status {
    width:20px;
    height:20px;

    display:flex;

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

    border-radius:50%;

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

    font-size:13px;

    font-weight:700;

    line-height:1;
}

.ism-status--bad {
    color:
        rgba(244,239,231,.54);

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

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

.ism-status--good {
    color:#111;

    border:
        1px solid
        rgba(221,181,75,.72);

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

.ism-row-icon {
    width:30px;
    height:30px;

    display:flex;

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

    color:
        rgba(244,239,231,.65);
}

.ism-card--online .ism-row-icon {
    color:var(--ism-gold);
}

.ism-row-icon svg {
    width:23px;
    height:23px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.65;

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

.ism-row-text {
    min-width:0;
}


/* =========================================================
   DESKTOP HOVER — REFERENCE-STYLE RESPONSE
   ========================================================= */

@media
(hover:hover)
and
(pointer:fine) {

    .ism-card:hover {
        transform:
            translate3d(
                0,
                -8px,
                0
            )
            !important;
    }

    .ism-card--offline:hover {
        border-color:
            rgba(255,255,255,.30);

        box-shadow:
            0
            34px
            78px
            rgba(0,0,0,.42);
    }

    .ism-card--online:hover {
        border-color:
            rgba(221,181,75,.90);

        box-shadow:
            0
            36px
            82px
            rgba(0,0,0,.42),
            0
            0
            42px
            rgba(221,181,75,.15);
    }

    .ism-card:hover .ism-card-photo img {
        transform:scale(1.085);

        filter:
            saturate(.90)
            brightness(.66);
    }

    .ism-card--online:hover .ism-photo-shade {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.14) 0%,
                rgba(0,0,0,.42) 29%,
                rgba(0,0,0,.82) 57%,
                rgba(0,0,0,.975) 100%
            );
    }

    .ism-card:hover .ism-card-symbol {
        transform:
            translateY(-3px)
            rotate(-5deg)
            scale(1.06);
    }

    .ism-card--online:hover .ism-card-symbol {
        box-shadow:
            0
            16px
            38px
            rgba(221,181,75,.28);
    }

    .ism-card:hover li {
        border-color:
            rgba(255,255,255,.12);
    }

    .ism-card li:hover {
        transform:
            translateX(5px);
    }

    .ism-card--online li:hover {
        color:var(--ism-gold);
    }
}


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

@media
(max-width:1100px)
and
(min-width:768px) {

    .ism-section {
        min-height:680px;
    }

    .ism-inner {
        width:
            calc(100% - 34px);

        padding:
            40px
            0
            42px;
    }

    .ism-head h2 {
        font-size:
            clamp(
                48px,
                6vw,
                66px
            );
    }

    .ism-compare {
        width:
            min(
                900px,
                100%
            );

        gap:28px;

        margin-top:34px;
    }

    .ism-card {
        height:420px;

        border-radius:24px;
    }

    .ism-card-top {
        min-height:108px;

        padding:
            22px
            22px
            15px;
    }

    .ism-card-symbol {
        width:52px;
        height:52px;

        flex-basis:52px;
    }

    .ism-card-heading h3 {
        font-size:24px;
    }

    .ism-card ul {
        padding:
            7px
            20px
            12px;
    }

    .ism-card li {
        min-height:49px;

        grid-template-columns:
            20px
            30px
            1fr;

        gap:8px;

        font-size:14px;
    }
}


/* =========================================================
   MOBILE — compact, editorial, no overflow
   ========================================================= */

@media
(max-width:767px) {

    .ism-section {
        width:100% !important;
        max-width:100% !important;

        min-height:0;

        overflow:hidden !important;
    }

    .ism-media > picture > img {
        object-position:center;

        filter:
            saturate(.64)
            brightness(.56);
    }

    .ism-overlay {
        background:
            radial-gradient(
                circle at 50% 10%,
                rgba(221,181,75,.055),
                transparent 22%
            ),
            linear-gradient(
                180deg,
                rgba(0,0,0,.82) 0%,
                rgba(0,0,0,.78) 36%,
                rgba(0,0,0,.94) 100%
            );
    }

    .ism-inner {
        width:
            calc(100% - 24px);

        max-width:100%;

        padding:
            34px
            0
            38px;
    }

    .ism-eyebrow {
        margin-bottom:9px;

        font-size:9px;

        letter-spacing:.28em;
    }

    .ism-head h2 {
        font-size:
            clamp(
                36px,
                10.7vw,
                46px
            );

        line-height:.91;
    }

    .ism-head h2 em {
        margin-top:3px;
    }

    .ism-compare {
        width:100%;

        margin-top:27px;

        display:flex;

        flex-direction:column;

        gap:34px;
    }

    .ism-vs {
        position:absolute;

        left:50%;
        top:50%;

        width:42px;
        height:42px;
    }

    .ism-vs span {
        font-size:11px;
    }

    .ism-card {
        width:100%;

        height:auto;
        min-height:0;

        border-radius:21px;

        transform:
            translate3d(
                0,
                22px,
                0
            );
    }

    .ism-card-top {
        min-height:102px;

        gap:14px;

        padding:
            19px
            19px
            15px;
    }

    .ism-card-symbol {
        width:50px;
        height:50px;

        flex-basis:50px;
    }

    .ism-card-symbol svg {
        width:27px;
        height:27px;
    }

    .ism-card-heading h3 {
        font-size:23px;

        line-height:1.02;
    }

    .ism-card-heading p {
        margin-top:6px;

        font-size:8px;

        letter-spacing:.20em;
    }

    .ism-card ul {
        padding:
            5px
            16px
            14px;
    }

    .ism-card li {
        min-height:47px;

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

        gap:8px;

        font-size:13px;

        line-height:1.25;
    }

    .ism-status {
        width:18px;
        height:18px;

        font-size:11px;
    }

    .ism-row-icon {
        width:28px;
        height:28px;
    }

    .ism-row-icon svg {
        width:21px;
        height:21px;
    }

    /*
     * Make the image visible in the top third without sacrificing
     * row readability.
     */
    .ism-card-photo img {
        object-position:center 30%;

        filter:
            saturate(.72)
            brightness(.48);

        transform:scale(1.02);
    }

    .ism-photo-shade {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.16) 0%,
                rgba(0,0,0,.54) 27%,
                rgba(0,0,0,.92) 51%,
                rgba(0,0,0,.995) 100%
            );
    }

    .ism-card--offline .ism-photo-shade {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.28) 0%,
                rgba(0,0,0,.66) 27%,
                rgba(0,0,0,.95) 51%,
                rgba(0,0,0,.995) 100%
            );
    }
}


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

@media
(max-width:390px) {

    .ism-inner {
        width:
            calc(100% - 18px);

        padding:
            30px
            0
            34px;
    }

    .ism-head h2 {
        font-size:34px;
    }

    .ism-compare {
        margin-top:24px;

        gap:30px;
    }

    .ism-card-top {
        min-height:94px;

        padding:
            17px
            16px
            13px;
    }

    .ism-card-symbol {
        width:46px;
        height:46px;

        flex-basis:46px;
    }

    .ism-card-heading h3 {
        font-size:21px;
    }

    .ism-card ul {
        padding:
            4px
            14px
            12px;
    }

    .ism-card li {
        min-height:44px;

        font-size:12px;
    }
}


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

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

    .ism-head,
    .ism-card,
    .ism-vs,
    .ism-media > picture > img,
    .ism-card-photo img,
    .ism-card-symbol,
    .ism-card li {
        transition:none !important;

        transform:none !important;

        opacity:1 !important;
    }
}