/*==================== HERO SECTION ====================*/
.hero {
    position: relative;
    padding-block: 198px 0px;
    background: url('../image/bg-home.png') no-repeat center top;
    background-size: cover;
    overflow: hidden;
    text-align: center;
    color: #FFFFFF;

    .hero__container {


        /* Top Glass Badge */
        .hero__badge-wrapper {
            margin-bottom: 24px;
            display: flex;
            justify-content: center;
        }

        .hero__badge {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 11px 24.5px;
            background: #000F844F;
            border: 1px solid #484EB3;
            border-radius: 4px;
            backdrop-filter: blur(1px);
            -webkit-backdrop-filter: blur(1px);
            color: #FFFFFF;
            font-size: 18px;
            font-weight: var(--font-regular);
            letter-spacing: -0.2px;
        }

        /* Main Title */
        .hero__title {
            font-size: 48px;
            font-weight: var(--font-bold);
            color: #FFFFFF;
            line-height: 1.48;
            letter-spacing: -0.5px;
            margin-bottom: 64px;

            .hero__title-line {
                display: block;
            }

            .hero__highlight-box {
                display: inline-block;
                margin-top: 8px;
            }

            .hero__highlight {
                position: relative;
                display: inline-block;
                isolation: isolate;
                z-index: 1;
                color: #053DC8;
                font-size: 53px;
                font-weight: var(--font-bold);
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

                &::after {
                    position: absolute;
                    content: '';
                    display: block;
                    top: 50%;
                    left: 50%;
                    width: calc(100% + 36px);
                    height: calc(100% + 0px);
                    background-color: #FFFFFF;
                    z-index: -1;
                    transform: translate(-50%, -50%) rotate(-2.8deg);
                    border-radius: 10px;
                    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
                    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                }
            }
        }

        /* Video Wrapper & Device Frame */
        .hero__video-wrapper {
            max-width: 990px;
            width: 100%;
            margin-inline: auto;
            position: relative;
            z-index: 3;
        }

        .hero__device-frame {
            border: 10px solid #000000;
            border-radius: 28px 28px 0 0;
            overflow: hidden;
            background-color: #000000;
            box-shadow: 0px 4px 54px 0px #060C4E;
            position: relative;
        }

        .hero__video-container {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9.8;
            overflow: hidden;
            background-color: #000000;
            cursor: pointer;

            .hero__video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            /* Circular Play Button */
            .hero__play-btn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 84px;
                height: 84px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                border: none;
                outline: none;
                cursor: pointer;
                z-index: 6;
                transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

                &:hover {
                    transform: translate(-50%, -50%) scale(1.15);
                }

                &:active {
                    transform: translate(-50%, -50%) scale(0.95);
                }

                .hero__play-ring {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    animation: ringRotate 8s linear infinite;
                }

                .hero__play-circle {
                    width: 58px;
                    height: 58px;
                    border-radius: 50%;
                    background: #1352EE;
                    color: #FFFFFF;
                    font-size: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 6px 24px rgba(19, 82, 238, 0.5);
                    border: 2px solid rgba(255, 255, 255, 0.9);
                    transition: background-color 0.25s ease, box-shadow 0.25s ease;

                    i {
                        margin-left: 3px;
                    }

                    &:hover {
                        background-color: #053DC8;
                        box-shadow: 0 10px 32px rgba(19, 82, 238, 0.7);
                    }
                }
            }
        }
    }

    /* Bottom Gradient Overlay */
    .hero__bottom-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 175px;
        background: linear-gradient(180deg, rgba(4, 7, 129, 0) 28.45%, rgba(4, 7, 129, 0.7) 62.43%, #021389 84.59%);
        pointer-events: none;
        z-index: 5;
    }
}

/*=============== PROJECT NEEDS SECTION ===============*/
.project-needs {
    padding-block: 42px 58px;
    position: relative;
    overflow: hidden;


    .project-needs__header {
        text-align: center;
        margin-bottom: 74px;

        .project-needs__title {
            font-size: 32px;
            font-weight: 800;
            color: #316CFF;
            letter-spacing: -0.4px;
            position: relative;
            display: inline-block;
        }
    }

    .project-needs__diagram {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .project-needs__flow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
    }

    /* Individual Item */
    .project-needs__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

        &:hover {
            transform: translateY(-8px) scale(1.04);

            .project-needs__icon-box {
                border-color: #316CFF;
                box-shadow: 0 12px 28px rgba(49, 108, 255, 0.18);
                color: #1352EE;
                background-color: #FFFFFF;
            }

            .project-needs__label {
                color: #1352EE;
            }
        }

        /* Subtle Alternating Floating Animation */
        &:nth-child(odd) {
            animation: itemFloatOdd 4s ease-in-out infinite alternate;
        }

        &:nth-child(even) {
            animation: itemFloatEven 4.5s ease-in-out infinite alternate;
        }

        &:hover {
            animation-play-state: paused;
        }

        &:nth-child(1) {
            margin-inline-end: 21px;
        }

        &:nth-child(2) {
            margin-inline-end: 21px;
        }

        &:nth-child(7) {
            margin-inline-end: 21px;
        }

        &:nth-child(8) {
            margin-inline-end: 21px;
        }

    }

    /* Icon Box */
    .project-needs__icon-box {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        background-color: #FFFFFF;
        border: 0.73px solid #F6F6F6;
        box-shadow: 0px 0px 15.03px 0px #00000014;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: var(--text);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

        i {
            line-height: 1;
        }
    }

    /* Label */
    .project-needs__label {
        font-size: 14px;
        color: var(--text);
        font-weight: var(--font-bold);
        white-space: nowrap;
        transition: color 0.25s ease;
    }

    /* Connectors (Dotted Line) */
    .project-needs__connector {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 65px;
        flex-shrink: 0;

        .project-needs__dots {
            width: 100%;
            height: 12px;
            overflow: visible;

            line {
                animation: dotsFlow 2s linear infinite;
            }
        }

        &.project-needs__connector--right {
            .project-needs__dots line {
                animation-direction: reverse;
            }
        }
    }

    .project-needs__connector--right {
        .project-needs__dots line {
            animation-direction: reverse;
        }
    }

    /* Central Core / Sijil Logo Badge */
    .project-needs__core {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-inline: 4px;

        .project-needs__core-badge {
            width: 120px;
            height: 120px;
            border-radius: 31px;
            background: linear-gradient(89.19deg, #053DC8 18.75%, #316CFF 88.28%);
            box-shadow: 0px 0px 23.49px 0px #00000014;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            cursor: pointer;
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;

            &:hover {
                transform: scale(1.08);
                box-shadow: 0 12px 34px rgba(49, 108, 255, 0.35);
            }

            .project-needs__logo {
                max-width: 98px;
                height: auto;
                object-fit: contain;
                filter: brightness(0) invert(1);
                /* Pure white logo */
                user-select: none;
                pointer-events: none;
                transition: transform 0.3s ease;
            }

            &:hover .project-needs__logo {
                transform: scale(1.05);
            }
        }

        /* Pulsing Ambient Ring */
        .project-needs__core-ring {
            position: absolute;
            inset: -6px;
            border-radius: 32px;
            border: 2px solid #1352EE;
            pointer-events: none;
            z-index: 1;
            animation: coreRingPulse 2.8s ease-in-out infinite;
        }
    }
}

/*=============== PROBLEMS SECTION ===============*/
.problems {
    padding-block: 95px;
    background-color: var(--bg-secondry);

    .problems__container {

        .problems__header {
            text-align: center;
            margin-bottom: 56px;

            .problems__title {
                font-size: 42px;
                font-weight: var(--font-bold);
                color: var(--text);
                letter-spacing: -0.5px;
            }
        }

        .problems__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            align-items: stretch;
            justify-self: center;
            perspective: 1280px;
            width: 100%;
        }

        .problem__card-stack {
            position: relative;
            min-height: 533px;
            width: 385px;
            perspective: 1000px;
            user-select: none;
            transition: transform 0.3s ease;

            &:hover {
                transform: translateY(-4px);
            }

            /* Custom Background Circle Positions Per Card */
            &:nth-child(1) .problem__card-slide::before {
                top: -285px;
                left: -142%;
            }

            &:nth-child(2) .problem__card-slide::before {
                top: 117px;
                left: -87%;
                width: 539px;
                height: 456px;
            }

            &:nth-child(3) .problem__card-slide::before {
                top: 117px;
                left: 55%;
                width: 300px;
                height: 300px;
            }

            .problem__arrow-btn {
                position: absolute;
                top: 24px;
                left: 20px;
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background-color: #FFFFFF;
                border: none;
                outline: none;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 17px;
                cursor: pointer;
                box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
                transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background-color 0.25s ease,
                    box-shadow 0.25s ease;
                z-index: 10;

                /* Continuous pulsing radar ring to invite interaction */
                &::before {
                    content: '';
                    position: absolute;
                    inset: -4px;
                    border-radius: 50%;
                    border: 2px solid rgba(255, 255, 255, 0.85);
                    animation: arrowPulseRing 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
                    pointer-events: none;
                }

                &:hover {
                    transform: scale(1.14);
                    background-color: #FFFFFF;
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 0 16px rgba(255, 255, 255, 0.6);

                    i {
                        animation-play-state: paused;
                        transform: translateX(-6px);
                    }
                }

                &:active {
                    transform: scale(0.9);
                }

                i {
                    display: inline-block;
                    line-height: 1;
                    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                    animation: arrowFloatLeft 1.8s ease-in-out infinite;
                }
            }

            &.is-flipped {
                .problem__arrow-btn {
                    i {
                        animation: arrowFloatRight 1.8s ease-in-out infinite;
                    }

                    &:hover i {
                        animation-play-state: paused;
                        transform: rotate(180deg) translateX(-6px);
                    }
                }
            }

            .problem__card-slide {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                border-radius: 20px;
                overflow: hidden;
                box-sizing: border-box;
                will-change: transform, filter, opacity;
                transition: transform 0.55s cubic-bezier(0.34, 1.25, 0.64, 1),
                    filter 0.5s ease,
                    box-shadow 0.5s ease;

                /* Decorative Background Circle Outline */
                &::before {
                    content: '';
                    position: absolute;
                    top: -200px;
                    left: 50%;
                    width: 360px;
                    height: 360px;
                    border-radius: 50%;
                    border: 180.5px solid var(--card-circle-border, rgba(255, 255, 255, 0.16));
                    background: transparent;
                    pointer-events: none;
                    z-index: 1;
                }

                .problem__slide-body {
                    position: relative;
                    z-index: 2;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: 32px;
                    padding: 34px 15px 35px 15px;
                    box-sizing: border-box;
                }

                .problem__text {
                    text-align: right;

                    .problem__title {
                        font-size: 26px;
                        font-weight: var(--font-bold);
                        color: #FFFFFF;
                        margin-bottom: 10px;
                        line-height: 1.35;
                        padding-left: 52px;
                    }

                    .problem__desc {
                        font-size: 18px;
                        font-weight: var(--font-semi-bold);
                        color: var(--white);
                        padding-left: 5px;
                        line-height: 1.6;
                    }
                }

                .problem__tablet {
                    width: 100%;
                    height: 297px;
                    display: flex;
                    justify-content: center;
                    position: relative;
                    border-radius: 14px;
                    overflow: hidden;
                    cursor: zoom-in;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        border-radius: 12px;
                        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
                    }

                    &:hover img {
                        transform: scale(1.025);
                        filter: brightness(1.02);
                    }

                    .problem__zoom-btn {
                        position: absolute;
                        bottom: 25px;
                        right: 25px;
                        width: 38px;
                        height: 38px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.94);
                        backdrop-filter: blur(8px);
                        -webkit-backdrop-filter: blur(8px);
                        border: 1px solid rgba(255, 255, 255, 0.9);
                        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
                        cursor: pointer;
                        z-index: 5;
                        padding: 0;
                        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

                        i {
                            font-size: 15px;
                            line-height: 1;
                            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                        }

                        &:hover {
                            background: #FFFFFF;
                            transform: scale(1.14);
                            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);

                            i {
                                transform: scale(1.15);
                            }
                        }

                        &:active {
                            transform: scale(0.92);
                        }
                    }
                }
            }

            /* --- STATE 1: Slide A Front, Slide B Back --- */
            &:not(.is-flipped):not(.animating-to-b) {
                .problem__card-slide--a {
                    transform: translate3d(0, 0, 0);
                    z-index: 3;
                    filter: brightness(1);
                }

                .problem__card-slide--b {
                    transform: translate3d(6px, 12px, -20px) scale(0.98);
                    z-index: 1;
                    filter: brightness(0.82);
                    cursor: pointer;
                }
            }

            /* --- STATE 2: Slide B Front, Slide A Back --- */
            &.is-flipped:not(.animating-to-a) {
                .problem__card-slide--b {
                    transform: translate3d(0, 0, 0);
                    z-index: 3;
                    filter: brightness(1);
                }

                .problem__card-slide--a {
                    transform: translate3d(6px, 12px, -20px) scale(0.98);
                    z-index: 1;
                    filter: brightness(0.82);
                    cursor: pointer;
                }
            }

            /* --- ACTIVE ANIMATIONS: Card Deal Shuffle --- */
            &.animating-to-b {
                .problem__card-slide--b {
                    animation: cardBringToFront 0.55s cubic-bezier(0.34, 1.25, 0.64, 1) forwards;
                }

                .problem__card-slide--a {
                    animation: cardSendToBack 0.55s cubic-bezier(0.34, 1.25, 0.64, 1) forwards;
                }
            }

            &.animating-to-a {
                .problem__card-slide--a {
                    animation: cardBringToFront 0.55s cubic-bezier(0.34, 1.25, 0.64, 1) forwards;
                }

                .problem__card-slide--b {
                    animation: cardSendToBack 0.55s cubic-bezier(0.34, 1.25, 0.64, 1) forwards;
                }
            }
        }

        /* Color Variations */
        .problem__card-stack--blue {

            .problem__arrow-btn,
            .problem__zoom-btn {
                color: var(--cobalt-blue);
            }

            .problem__card--blue {
                background-color: var(--cobalt-blue);
                box-shadow: -14px 14px 0px 0px #0F2CB2;
            }

            .problem__card--blue-dark {
                background-color: #0F2CB2;
                box-shadow: -14px 14px 0px 0px var(--cobalt-blue);
            }
        }

        .problem__card-stack--purple {

            .problem__arrow-btn,
            .problem__zoom-btn {
                color: var(--heroic-blue);
            }

            .problem__card--purple {
                background-color: var(--heroic-blue);
                box-shadow: -14px 14px 0px 0px #2A18AD;
            }

            .problem__card--purple-dark {
                background-color: #2A18AD;
                box-shadow: -14px 14px 0px 0px var(--heroic-blue);
            }
        }
    }
}

/*==================== IMAGE ZOOM LIGHTBOX ====================*/
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        .image-lightbox__container {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
    }

    .image-lightbox__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(3, 7, 24, 0.86);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        cursor: zoom-out;
    }

    .image-lightbox__container {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 92vw;
        max-height: 90vh;
        transform: scale(0.92) translateY(12px);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1),
            opacity 0.3s ease;
    }

    .image-lightbox__close {
        position: absolute;
        top: -16px;
        left: -16px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #FFFFFF;
        color: #0F172A;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        z-index: 10;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
            background-color 0.2s ease,
            color 0.2s ease;

        &:hover {
            transform: scale(1.12) rotate(90deg);
            background-color: #EF4444;
            color: #FFFFFF;
        }

        &:active {
            transform: scale(0.9);
        }
    }

    .image-lightbox__header {
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
    }

    .image-lightbox__title {
        display: inline-block;
        padding: 6px 18px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.2px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .image-lightbox__content {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 90vw;
        max-height: 80vh;
        border-radius: 18px;
        padding: 2rem;
        overflow: hidden;
        box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);

        img {
            max-width: 100%;
            max-height: 80vh;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
            border-radius: 18px;
        }
    }
}

/*=============== ALL IN ONE ===============*/
@keyframes iconGlowPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.85)) brightness(1.2);
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)) brightness(1.08);
    }
}

.all__in__one {
    padding-block: 100px;
    scroll-margin-top: 100px;

    .all__in__one__container {

        .all__in__one__content {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 60px;
            position: relative;

            .all__in__one__info {
                max-width: 520px;
                width: 100%;

                .all__in__one__header {
                    margin-bottom: 48px;

                    .all__in__one__title {
                        font-size: 42px;
                        font-weight: var(--font-bold);
                        color: var(--text);
                        line-height: 1.3;
                    }
                }

                .all__in__one__list {
                    display: flex;
                    flex-direction: column;

                    .all__in__one__item {
                        display: flex;
                        align-items: flex-start;
                        gap: 20px;
                        border-bottom: 1px solid #E3E3E3;
                        padding-top: 24px;
                        padding-bottom: 44px;
                        max-width: 440px;
                        width: 100%;
                        opacity: 0.15;
                        transform: translateY(32px);
                        filter: blur(1px);
                        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                            transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                            filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                            border-color 0.4s ease;
                        will-change: opacity, transform;

                        &:first-child {
                            padding-top: 0;
                        }

                        &:last-child {
                            border-bottom: none;
                            padding-bottom: 10px;
                        }

                        &.is-revealed {
                            opacity: 0.5;
                            transform: translateY(0);
                            filter: blur(0);
                        }

                        &.is-active {
                            opacity: 1;
                            transform: translateY(0);
                            filter: blur(0);
                            border-bottom-color: var(--cobalt-blue, #3164E2);

                            .item__number {
                                color: var(--cobalt-blue, #3164E2);
                                transform: scale(1.15);
                                text-shadow: 0 4px 18px rgba(49, 100, 226, 0.35);
                            }

                            .item__body {
                                .item__title {
                                    color: var(--cobalt-blue, #3164E2);
                                }
                            }
                        }

                        .item__number {
                            font-size: 32px;
                            font-weight: 800;
                            color: #78787833;
                            transition: color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease;
                            transform-origin: right center;
                            line-height: 1;
                            min-width: 44px;
                        }

                        .item__body {
                            display: flex;
                            flex-direction: column;
                            gap: 8px;

                            .item__title {
                                font-size: 24px;
                                font-weight: var(--font-bold);
                                color: var(--text);
                                transition: color 0.35s ease;
                            }

                            .item__desc {
                                font-size: 16px;
                                color: #626262;
                                line-height: 1.65;
                            }
                        }
                    }
                }
            }

            .all__in__one__visual {
                position: sticky;
                top: 130px;
                max-width: 664px;
                width: 100%;
                height: 692px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--cobalt-blue);
                box-shadow: 14px 14px 0px 0px #3164E2;
                align-self: flex-start;

                img {
                    position: absolute;
                    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
                }

                .step-icon.icon-active {
                    animation: iconGlowPulse 2.2s infinite ease-in-out;
                    z-index: 5;
                }

                .print.icon-active {
                    transform: translateY(-50%) scale(1.18);
                }

                .casher.icon-active {
                    transform: translateY(-50%) scale(1.18);
                }

                .sale.icon-active,
                .internet.icon-active,
                .divces.icon-active,
                .chift.icon-active {
                    transform: scale(1.18);
                }

                .logo__about {
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 209px;
                    height: auto;
                }

                .print,
                .sale,
                .internet,
                .divces,
                .chift,
                .casher {
                    position: absolute;
                    width: 95px;
                    height: 95px;
                }

                .print {
                    top: 55%;
                    transform: translateY(-50%);
                    right: 45px;
                }

                .sale {
                    bottom: 67px;
                    right: 158px;
                }

                .internet {
                    top: 96px;
                    left: 93px;
                }

                .divces {
                    top: 85.5px;
                    right: 110px;
                }

                .chift {
                    bottom: 68px;
                    left: 68px;
                }

                .casher {
                    top: 58%;
                    transform: translateY(-50%);
                    left: 32px;
                }

            }
        }
    }
}

/*=============== BUSINESS SIZES / SOLUTIONS ===============*/
.business-sizes {
    padding-block: 80px;

    .business-sizes__container {
        max-width: 1310px;

        .business-sizes__banner {
            position: relative;
            background: #053DC8;
            border-radius: 30px;
            padding: 212px 60px 52px 60px;
            overflow: hidden;
        }

        /* Background Logo Overlay */
        .business-sizes__overlay {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 88%;
            max-width: 100%;
            min-height: 487px;
            pointer-events: none;
            z-index: 1;
            user-select: none;
        }

        /* Header Content */
        .business-sizes__header {
            position: relative;
            z-index: 2;
            text-align: center;
            margin-bottom: 71px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .business-sizes__title {
                font-size: 42px;
                font-weight: var(--font-bold);
                color: #FFFFFF;
                margin-bottom: 12px;
                letter-spacing: -0.5px;
            }

            .business-sizes__subtitle {
                font-size: 22px;
                color: #D5D5D5;
                margin-bottom: 41px;
                font-weight: var(--font-medium);
            }

            .business-sizes__btn {
                gap: 8px;
                padding: 8.5px 66.5px;
                height: 62px;
                background-color: #FFFFFF;
                color: var(--text);
                border-radius: 10px;
                font-size: 22px;
                font-weight: var(--font-bold);
                text-decoration: none;
                transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;

                i {
                    font-size: 24px;
                    transition: transform 0.2s ease;
                }

                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22);
                    background-color: #F8FAFC;

                    i {
                        transform: scale(1.15);
                    }
                }

                &:active {
                    transform: translateY(0);
                }
            }
        }

        /* 3 Solution Cards Grid */
        .business-sizes__grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            align-items: end;
        }

        .business-sizes__card {
            position: relative;
            max-width: 383px;
            width: 100%;
            background:
                linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(90deg, #4477F6 0%, #1688EE 50.38%, #8E80F9 100%) border-box;
            border: 4px solid transparent;
            border-radius: 20px;
            padding: 30px 19.5px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: box-shadow 0.3s ease;
            box-shadow: 0px 12px 34px 0px #0D369D;
            z-index: 1;

            &:hover {
                box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
            }

            /* Card Heights (من الشمال: 519px, 463px, 409px) */
            &.card--brands,
            &:nth-child(3) {
                height: 519px;
            }

            &.card--mall,
            &:nth-child(2) {
                height: 463px;
            }

            &.card--shops,
            &:nth-child(1) {
                height: 409px;
            }

            /* Distinct Image Sizing */
            .business-sizes__icon-box {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 18px;
                width: 100%;
            }

            /* 1. الأول من الشمال (البراندات): عرض 273px - طول 238px */
            .business-sizes__img--brands {
                width: 273px;
                height: 238px;
                object-fit: contain;
            }

            /* 2. التاني من الشمال (المولات): عرض 261px - طول 145px */
            .business-sizes__img--mall {
                width: 261px;
                height: 145px;
                object-fit: contain;
            }

            /* 3. التالتة من الشمال (المحلات): عرض 115px - طول 117px */
            .business-sizes__img--shops {
                width: 115px;
                height: 117px;
                object-fit: contain;
            }



            .business-sizes__card-title {
                font-size: 24px;
                font-weight: var(--font-bold);
                color: #2C3131;
                margin-bottom: 16px;
                line-height: 1.4;
            }

            .business-sizes__card-desc {
                font-size: 16px;
                color: #626262;
                line-height: 1.5;
                margin: 0;
                font-weight: var(--font-regular);
            }
        }
    }
}

/*=============== FEATURES ===============*/
.features {
    background-color: var(--bg-secondry);
    padding-block: 80px 146px;
    position: relative;
    width: 100%;

    .features__container {

        .features__content {
            display: flex;
            flex-direction: column;
            gap: 80px;

            .features__header {
                .header__text {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 22px;
                    text-align: right;

                    .features__badge {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: var(--blue);
                        color: #FFFFFF;
                        font-size: 40px;
                        font-weight: var(--font-medium);
                        padding: 0px 26px;
                        border-radius: 7px;
                        letter-spacing: -0.3px;
                    }

                    .features__subtitle {
                        font-size: 24px;
                        font-weight: var(--font-regular);
                        color: var(--text);
                        line-height: 1.5;
                    }
                }
            }

            .features__grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;

                .features__card {
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-radius: 20px;
                    padding: 60px 50px 60px 34px;
                    overflow: hidden;
                    border: 1px solid var(--text);
                    box-shadow: 0px 6px 0px 0px var(--text);

                    .card__content {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        text-align: right;
                        gap: 22px;
                        z-index: 2;
                        max-width: 280px;

                        .card__tag {
                            display: inline-block;
                            padding: 0px 8.5px;
                            border-radius: 7px;
                            font-size: 26px;
                            font-weight: var(--font-semi-bold);
                            white-space: nowrap;
                        }

                        .card__desc {
                            font-size: 20px;
                            line-height: 1.45;
                            color: var(--white);
                        }

                        .card__action {
                            display: flex;
                            align-items: center;

                            .card__play-btn {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: transparent;
                                border: none;
                                cursor: pointer;
                                padding: 0;
                                color: inherit;
                                width: 48px;
                                height: 48px;
                                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;

                                svg {
                                    display: block;
                                    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                                    width: 100%;
                                    height: 100%;
                                    object-fit: contain;
                                }

                                &:hover {
                                    transform: scale(1.18);
                                    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
                                }

                                &:active {
                                    transform: scale(0.92);
                                }
                            }
                        }
                    }

                    .card__img {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 220px;
                        height: auto;
                        flex-shrink: 0;
                        z-index: 2;

                        img {
                            max-width: 100%;
                            max-height: 100%;
                            object-fit: cover;
                            display: block;
                            transition: transform 0.3s ease;
                        }
                    }

                    cursor: pointer;

                    &:hover {
                        .card__img img {
                            transform: scale(1.04);
                        }

                        .card__action .card__play-btn {
                            transform: scale(1.12);
                        }
                    }
                }

                /* Color Variations */
                .features__card--blue {
                    background-color: var(--blue);
                    color: #FFFFFF;

                    .card__tag {
                        background-color: #FFFFFF;
                        color: var(--text);
                    }

                    .card__desc {
                        color: white;
                    }

                    .card__arrow {
                        color: #FFFFFF;
                    }
                }

                .features__card--white {
                    background-color: #FFFFFF;

                    .card__tag {
                        background-color: var(--blue);
                        color: #FFFFFF;
                    }

                    .card__desc {
                        color: var(--text) !important;
                    }

                    .card__arrow {
                        color: var(--text);
                    }
                }

                .features__card--heroic {
                    background-color: var(--heroic-blue);
                    color: #FFFFFF;

                    .card__tag {
                        background-color: #FFFFFF;
                        color: var(--text);
                    }

                    .card__desc {
                        color: #F3F4F6;
                    }

                    .card__arrow {
                        color: #FFFFFF;
                    }
                }
            }
        }
    }
}

/*==================== VIDEO GUIDE SECTION ====================*/
.video-guide {
    background: linear-gradient(58.59deg, #053DC8 10.26%, #1352EE 49.61%, #5500FF 94.99%);
    padding-block: 88px 128px;
    position: relative;
    overflow: hidden;

    .video-guide__container {

        .video-guide__card {
            position: relative;
            background-color: #FFFFFF;
            border-radius: 28px;
            padding: 18px 35px 31px 35px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border: 7px solid #E4E4E4;

            &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 18px;
                top: 100px;
                left: 0;
                background-color: #EBEBEB;
            }
        }

        .video-guide__title {
            font-size: 34px;
            font-weight: var(--font-bold);
            color: #373131;
            margin-bottom: 73px;
            letter-spacing: -0.3px;
        }

        .video-guide__action {
            margin-top: 45px;
            display: flex;
            justify-content: center;

            .video-guide__btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 8.5px 37px;
                background-color: #78788029;
                color: var(--text);
                border-radius: 6px;
                font-size: 22px;
                font-weight: var(--font-semi-bold);
                transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;

                .wave-icon {
                    transition: transform 0.3s ease;
                    transform: rotate(45deg);
                }

                &:hover {
                    background-color: #0F4CE3;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                    color: white;

                    .wave-icon {
                        transform: rotate(18deg) scale(1.15);
                    }
                }

                &:active {
                    transform: translateY(0);
                }
            }
        }
    }
}

/*==================== SHARED VIDEO PLAYER COMPONENT ====================*/
.video-guide__player {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0px 0px 2px 0px #969696BD;
    cursor: pointer;
    line-height: 0;

    .video-guide__video,
    .video-guide__yt-cover {
        width: 100%;
        height: 638px;
        display: block;
        object-fit: cover;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 18px;
    }

    .video-guide__play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background-color: #FF0000;
        border: none;
        outline: none;
        color: #FFFFFF;
        font-size: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 8px 25px rgba(255, 0, 0, 0.45);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
            background-color 0.25s ease,
            opacity 0.3s ease,
            visibility 0.3s ease;
        z-index: 5;

        i {
            margin-left: 3px;
            transition: transform 0.2s ease;
        }

        .play-btn__ripple {
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.6);
            animation: playRipple 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }

        &:hover {
            transform: translate(-50%, -50%) scale(1.12);
            background-color: #E60000;
            box-shadow: 0 10px 30px rgba(255, 0, 0, 0.6);
        }

        &:active {
            transform: translate(-50%, -50%) scale(0.95);
        }
    }

    /* Playing state: Center button MUST be completely hidden while playing */
    &.is-playing {
        .video-guide__play-btn {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            transform: translate(-50%, -50%) scale(0.65);
        }
    }

    /* Auto-hide controls when idle while playing */
    &.is-playing.is-idle {
        cursor: none;

        .video-guide__controls {
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
        }
    }

    /* Custom Video Controls Bar - Hidden initially until playback begins */
    .video-guide__controls {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        padding: 34px 18px 12px 18px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%);
        display: flex;
        flex-direction: column;
        gap: 8px;
        direction: ltr;
        line-height: normal;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        user-select: none;
    }

    /* Show controls when video is playing and not idle */
    &.is-playing:not(.is-idle) .video-guide__controls {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Progress / Seek Bar */
    .video-progress {
        position: relative;
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 4px;
        cursor: pointer;
        transition: height 0.15s ease;

        &:hover,
        &.is-scrubbing {
            height: 8px;

            .video-progress__thumb {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        .video-progress__buffered {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 4px;
            width: 0%;
            pointer-events: none;
        }

        .video-progress__filled {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: #FF0000;
            border-radius: 4px;
            width: 0%;
            pointer-events: none;
        }

        .video-progress__thumb {
            position: absolute;
            top: 50%;
            left: 0%;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #FFFFFF;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
            transform: translate(-50%, -50%) scale(0);
            pointer-events: none;
            transition: transform 0.15s ease;
        }
    }

    /* Controls Row */
    .video-controls__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .video-controls__left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .video-controls__right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .video-control-btn {
        background: transparent;
        border: none;
        outline: none;
        color: #FFFFFF;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        transition: transform 0.15s ease, color 0.15s ease;

        &:hover {
            transform: scale(1.15);
            color: #FF0000;
        }

        &:active {
            transform: scale(0.95);
        }
    }

    .video-time {
        font-size: 13px;
        font-family: monospace, sans-serif;
        color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        gap: 4px;
        user-select: none;
        direction: ltr;

        .time-separator {
            opacity: 0.5;
        }
    }

    /* Fullscreen handling */
    &:fullscreen,
    &:-webkit-full-screen {
        border-radius: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000000;

        .video-guide__video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 0;
        }
    }
}

/*==================== CUSTOM PLAN BUILDER ====================*/
.plan-builder {
    padding-block: 90px 76px;
    position: relative;

    .plan-builder__container {


        .plan-builder__card {
            background-color: #FFFFFF;
            border-radius: 24px;
            padding: 68px;
            box-shadow: 0px 1.42px 11.39px 0px #19213D0F;
            position: relative;
            max-width: 995px;
            width: 100%;
            margin: auto;
        }

        .plan-builder__header {
            margin-bottom: 51px;
            text-align: center;

            .plan-builder__title {
                font-size: 32px;
                font-weight: var(--font-bold);
                color: var(--text);
                margin-bottom: 10px;
                letter-spacing: -0.3px;
            }

            .plan-builder__subtitle {
                font-size: 20px;
                color: #8E8E93;
                font-weight: var(--font-regular);
                line-height: 1.5;
            }
        }

        /* Common Box */
        .plan-builder__box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            border-radius: 16px;
            padding: 30px 34px;
            border: 2px solid #F2F2F7;
            background-color: #FFFFFF;
            transition: all 0.25s ease;

            .plan-builder__box-info {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .plan-builder__box-title {
                font-size: 22.79px;
                font-weight: var(--font-bold);
                color: var(--text);
            }

            .plan-builder__box-desc {
                font-size: 20px;
                color: var(--text);
                font-weight: var(--font-regular);
                transition: color 0.2s ease;
            }

            &:hover {
                border: 2px solid #3B28CC;
                background-color: #F1EFFF;

                .plan-builder__stepper {
                    background-color: #FFFFFF !important;

                    .plan-builder__stepper-btn {
                        background-color: #ECEEF2 !important;
                        color: #475569 !important;
                        box-shadow: none !important;

                        &:hover:not(:disabled) {
                            background-color: #3B28CC !important;
                            color: #FFFFFF !important;
                            box-shadow: 0 3px 10px rgba(59, 40, 204, 0.3) !important;
                        }

                        &:active:not(:disabled) {
                            background-color: #2F1EB5 !important;
                            color: #FFFFFF !important;
                            transform: scale(0.92);
                        }
                    }
                }
            }
        }

        /* Branches Box (Highlighted purple/indigo border) */


        /* Subnotice */
        .plan-builder__subnotice {
            color: #EBA91C;
            font-size: 14px;
            font-weight: var(--font-regular);
            text-align: start;
            margin-block: 16px 36px;
            line-height: 1.6;
        }

        /* Duration Box (Soft background) */
        .plan-builder__box--duration {

            .plan-builder__period-pills {
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }

            .plan-builder__period-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 6px 18px;
                font-size: 14px;
                font-weight: 700;
                font-family: inherit;
                border-radius: 9999px;
                border: 1.5px solid #E2E8F0;
                background-color: #FFFFFF;
                color: #334155;
                cursor: pointer;
                transition: all 0.25s ease;
                outline: none;

                i {
                    font-size: 13px;
                    color: inherit;
                }

                &:hover:not(.is-active) {
                    border-color: #3B28CC;
                    color: #3B28CC;
                    background-color: #F3F1FD;
                }

                &.is-active {
                    background-color: #3B28CC !important;
                    border-color: #3B28CC !important;
                    color: #FFFFFF !important;
                    box-shadow: 0 4px 14px rgba(59, 40, 204, 0.35);

                    i {
                        color: #FFFFFF !important;
                    }
                }
            }

            .plan-duration-btn {
                transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
                outline: none !important;

                &:hover:not(.is-active) {
                    background-color: #F3F1FD !important;
                    border-color: #3B28CC !important;
                    color: #3B28CC !important;
                    transform: translateY(-2.5px);
                    box-shadow: 0 6px 18px rgba(59, 40, 204, 0.16) !important;

                    .discount-badge {
                        background-color: #3B28CC !important;
                        color: #FFFFFF !important;
                    }
                }

                &.is-active {
                    background-color: #3B28CC !important;
                    border-color: #3B28CC !important;
                    color: #FFFFFF !important;
                }
            }

            /* Duration Stepper - Distinct from branches stepper */
            .plan-builder__stepper {
                background-color: #F4F5F7;

                .plan-builder__stepper-btn {
                    background-color: #FFFFFF;
                    color: #475569;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
                    transition: all 0.2s ease;

                    &:hover:not(:disabled) {
                        background-color: #3B28CC !important;
                        color: #FFFFFF !important;
                        box-shadow: 0 3px 10px rgba(59, 40, 204, 0.3) !important;
                    }

                    &:active:not(:disabled) {
                        background-color: #2F1EB5 !important;
                        color: #FFFFFF !important;
                        transform: scale(0.92);
                    }

                    &:disabled {
                        opacity: 0.45;
                        cursor: not-allowed;
                        box-shadow: none;
                    }
                }

                .plan-builder__stepper-btn--plus,
                .plan-builder__stepper-btn--minus {
                    background-color: #FFFFFF;
                    color: #475569;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

                    &:hover:not(:disabled) {
                        background-color: #3B28CC !important;
                        color: #FFFFFF !important;
                        box-shadow: 0 3px 10px rgba(59, 40, 204, 0.3) !important;
                    }
                }
            }
        }

        /* Stepper Controls */
        .plan-builder__stepper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 31px;
            background-color: #F4F5F7;
            padding: 10px;
            border-radius: 16px;
            transition: all 0.25s ease;

            &:hover {
                background-color: #FFFFFF;

                .plan-builder__stepper-btn {
                    background-color: #ECEEF2;
                    color: #475569;
                    box-shadow: none;

                    &:hover:not(:disabled) {
                        background-color: #3B28CC;
                        color: #FFFFFF;
                        box-shadow: 0 3px 10px rgba(59, 40, 204, 0.3);
                    }
                }
            }

            .plan-builder__stepper-btn {
                width: 48px;
                height: 48px;
                border-radius: 8.5px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                cursor: pointer;
                transition: all 0.2s ease;
                user-select: none;
                border: none;
                font-family: inherit;
                background-color: #FFFFFF;
                color: #475569;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

                &:hover:not(:disabled) {
                    background-color: #3B28CC;
                    color: #FFFFFF;
                    box-shadow: 0 3px 10px rgba(59, 40, 204, 0.3);
                }

                &:active:not(:disabled) {
                    transform: scale(0.92);
                    background-color: #2F1EB5;
                    color: #FFFFFF;
                }

                &:disabled {
                    opacity: 0.45;
                    cursor: not-allowed;
                    box-shadow: none;
                }
            }

            .plan-builder__stepper-btn--plus,
            .plan-builder__stepper-btn--minus {
                background-color: #FFFFFF;
                color: #475569;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

                &:hover:not(:disabled) {
                    background-color: #3B28CC;
                    color: #FFFFFF;
                    box-shadow: 0 3px 10px rgba(59, 40, 204, 0.3);
                }
            }

            .plan-builder__stepper-val {
                font-size: 20px;
                font-weight: var(--font-medium);
                color: var(--text);
                min-width: 55px;
                text-align: center;
                white-space: nowrap;
                user-select: none;
            }
        }

        /* Total Price Row */
        .plan-builder__total-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-block: 60px;
            padding-inline: 4px;

            .plan-builder__total-label {
                font-size: 21.36px;
                font-weight: var(--font-bold);
                color: var(--text);
            }

            .plan-builder__savings-badge {
                display: none;
                align-items: center;
                background: rgba(235, 169, 28, 0.12);
                color: #EBA91C;
                font-weight: 700;
                font-size: 13.5px;
                padding: 5px 14px;
                border-radius: 9999px;
                border: 1px solid rgba(235, 169, 28, 0.35);

                i {
                    margin-left: 6px;
                    font-size: 10px;
                    background: #EBA91C;
                    color: #FFFFFF;
                    border-radius: 50%;
                    width: 18px;
                    height: 18px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            .plan-builder__total-price {
                display: inline-flex;
                align-items: baseline;
                gap: 6px;
                color: #1352EE;
                font-weight: 800;
            }

            .plan-builder__price-num {
                font-size: 31.5px;
                line-height: 1;
                letter-spacing: -0.5px;
                display: inline-block;
                transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;

                &.is-animating {
                    transform: scale(1.16);
                    color: #3B28CC;
                }
            }

            .plan-builder__price-currency {
                font-size: 28.5px;
                font-weight: var(--font-bold);
            }
        }

        /* CTA Button */
        .plan-builder__cta-btn {
            width: 100%;
            height: 62px;
            min-height: 62px;
            padding: 0 24px;
            border-radius: 6px;
            background: #3B28CC;
            color: #FFFFFF;
            font-size: 22px;
            font-weight: var(--font-semi-bold);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: 0.71px solid #D2CEFF;
            transition: all 0.25s ease;

            &:hover {
                box-shadow: 0 12px 28px rgba(59, 40, 204, 0.38);
                transform: translateY(-2px);
            }

            &:active {
                transform: translateY(0);
            }
        }

        /* Bottom Notes (Positioned outside the card) */
        .plan-builder__notes {
            max-width: 995px;
            width: 100%;
            margin: 32px auto 0;
            padding-inline: 4px;
            text-align: start;

            .plan-builder__notes-header {
                display: inline-flex;
                align-items: center;
                gap: 11px;
                color: #EBA91C;
                font-size: 22px;
                font-weight: var(--font-bold);
                margin-bottom: 12px;
            }

            .plan-builder__notes-list {
                display: flex;
                flex-direction: column;
                gap: 16px;

                li {
                    font-size: 18px;
                    color: var(--text);
                    line-height: 1.45;
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    &::before {
                        content: "";
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        background-color: #F6B528;
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
}

/*=============== FAQ / ACCORDION SECTION ===============*/
.faq {
    background-color: #3B28CC;
    padding-block: 60px 91px;
    position: relative;
    overflow: hidden;

    .faq__container {
        position: relative;
        max-width: 1070px;
        margin-inline: auto;
    }

    .faq__header {
        text-align: center;
        margin-bottom: 46px;

        .faq__title {
            color: #FFFFFF;
            font-size: 36px;
            font-weight: var(--font-bold);
            letter-spacing: -0.5px;
        }
    }

    .faq__wrapper {
        position: relative;
        width: 100%;
    }

    /* Top Left Speech Bubble Decor */
    .faq__bubble-decor--left {
        position: absolute;
        top: -15%;
        right: -15%;
        z-index: -1;
        pointer-events: none;
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
        animation: floatBubble 4s ease-in-out infinite alternate;

        img {
            width: 123px;
            height: auto;
            display: block;
        }
    }

    /* Bottom Right Watermark Bubble */
    .faq__bubble-decor--watermark {
        position: absolute;
        bottom: -50px;
        left: -60px;
        z-index: 0;
        pointer-events: none;
        transform: rotate(-10deg);
    }

    /* Accordion Stack */
    .faq__accordion {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .faq__item {
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #EBA91C;
        background-color: #FFFFFF;
        box-shadow: 0px 4px 14px 0px #21109F;
        transition: box-shadow 0.25s ease, transform 0.25s ease;

        &:not(.is-active):hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }

        /* Header Button */
        .faq__header-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 24px;
            background-color: #FFFFFF;
            border: none;
            outline: none;
            cursor: pointer;
            text-align: right;
            font-family: inherit;
            transition: background-color 0.25s ease, color 0.25s ease;

            .faq__question {
                font-size: 20px;
                font-weight: var(--font-semi-bold);
                color: var(--text);
                transition: color 0.25s ease;
                line-height: 1.5;
            }

            .faq__arrow {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: var(--text);
                transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
                flex-shrink: 0;
                margin-right: 12px;
            }
        }

        /* Content Area */
        .faq__content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            background-color: #FFFFFF;

            .faq__answer {
                padding: 6px 24px 22px 24px;

                p {
                    color: black;
                    font-size: 20px;
                    line-height: 1.35;
                    margin: 0;
                }
            }
        }

        /* Active State */
        &.is-active {

            .faq__header-btn {
                background-color: #EAA81B;

                .faq__question {
                    color: #FFFFFF;
                    font-weight: var(--font-bold);
                }

                .faq__arrow {
                    color: #FFFFFF;
                    transform: rotate(180deg);
                }
            }
        }
    }
}

/*=============== FREE TRIAL CTA BANNER ===============*/
.trial-cta {
    padding-block: 122px 95px;
    background-color: #F6F6F6;

    .trial-cta__container {
        max-width: 1125px;
        margin-inline: auto;
    }

    .trial-cta__card {
        background-color: #FFFFFF;
        border-radius: 24px;
        padding: 22px 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px -3px 22px 0px #71717A12;
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: 100%;

        &:hover {
            box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }
    }

    .trial-cta__content {
        flex: 1;
        max-width: 440px;

        .trial-cta__title {
            font-size: 28px;
            font-weight: var(--font-bold);
            color: var(--text);
            line-height: 1.4;
            margin-bottom: 21px;
            letter-spacing: -0.4px;

            .highlight {
                color: #F9AE35;
            }
        }

        .trial-cta__desc {
            font-size: 18px;
            color: #8E8E93;
            line-height: 1.45;
            margin-bottom: 31px;
            font-weight: var(--font-medium);
        }

        .trial-cta__action {
            .trial-cta__btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 8.5px 35.5px;
                max-width: 241px;
                width: 100%;
                background: linear-gradient(180deg, #053DC8 0%, #1A0BBD 100%);
                color: #FFFFFF;
                border-radius: 6px;
                font-size: 22px;
                font-weight: var(--font-medium);
                text-decoration: none;
                transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;

                &:hover {
                    transform: translateY(-2px);
                    background: linear-gradient(135deg, #0029DE 0%, #001F9E 100%);
                }

                &:active {
                    transform: translateY(0);
                }
            }
        }
    }

    .trial-cta__visual {
        position: absolute;
        top: -20px;
        left: 40px;
        flex-shrink: 0;
        width: 341px;
        display: flex;
        align-items: center;
        justify-content: center;

        .trial-cta__img {
            width: 100%;
            height: auto;
            max-height: 311px;
            object-fit: contain;
            filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.08));
            transition: transform 0.35s ease;

            &:hover {
                transform: scale(1.03) rotate(-1deg);
            }
        }
    }
}

/*==================== FEATURE VIDEO MODAL POPUP ====================*/
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;

    &.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .video-modal__backdrop {
        position: absolute;
        inset: 0;
        background-color: rgba(15, 23, 42, 0.82);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
    }

    .video-modal__container {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 840px;
        margin: auto;
    }

    .video-modal__dialog {
        background-color: #0F172A;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
        transform: scale(0.92) translateY(24px);
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    &.is-open .video-modal__dialog {
        transform: scale(1) translateY(0);
    }

    .video-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        background: linear-gradient(58.59deg, #053DC8 10.26%, #1352EE 49.61%, #5500FF 94.99%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 4px 20px rgba(5, 61, 200, 0.25);

        .video-modal__title-box {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .video-modal__badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 14px;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.22);
            color: #FFFFFF;
            font-size: 11.5px;
            font-weight: 700;
            border: 1px solid rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(8px);
            letter-spacing: -0.2px;
        }

        .video-modal__title {
            font-size: 16.5px;
            font-weight: 700;
            color: #FFFFFF;
            margin: 0;
            letter-spacing: -0.2px;
        }

        .video-modal__close {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.18);
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.25);
            outline: none;
            transition: all 0.25s ease;

            &:hover {
                background-color: #EF4444;
                border-color: #EF4444;
                transform: rotate(90deg) scale(1.08);
            }
        }
    }

    .video-modal__player {
        border-radius: 0;

        .video-guide__video {
            border-radius: 0;
            max-height: 68vh;
        }
    }
}


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

/*=============== 1200px BREAKPOINT ===============*/
@media (max-width: 1200px) {

    /*=============== HERO SECTION ===============*/
    .hero {
        padding-block: 165px 0px;

        .hero__container {

            /* Top Glass Badge */
            .hero__badge-wrapper {
                margin-bottom: 22px;
            }

            .hero__badge {
                padding: 10px 22px;
                font-size: 16.5px;
            }

            /* Main Title */
            .hero__title {
                font-size: 42px;
                margin-bottom: 52px;

                .hero__highlight {
                    font-size: 46px;

                    &::after {
                        width: calc(100% + 30px);
                        height: calc(100% + 8px);
                    }
                }
            }

            /* Video Wrapper & Device Frame */
            .hero__video-wrapper {
                max-width: 880px;
            }

            .hero__device-frame {
                border-width: 9px;
                border-radius: 24px 24px 0 0;
            }

            .hero__video-container {
                .hero__play-btn {
                    width: 78px;
                    height: 78px;

                    .hero__play-circle {
                        width: 54px;
                        height: 54px;
                        font-size: 18px;
                    }
                }
            }
        }

        /* Bottom Gradient Overlay */
        .hero__bottom-overlay {
            height: 320px;
        }
    }

    /*=============== PROJECT NEEDS SECTION ===============*/
    .project-needs {
        padding-block: 38px 52px;

        .project-needs__header {
            margin-bottom: 64px;

            .project-needs__title {
                font-size: 28px;
            }
        }

        .project-needs__flow {
            gap: 16px;
        }

        .project-needs__item {
            gap: 7px;

            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(7),
            &:nth-child(8) {
                margin-inline-end: 16px;
            }

            .project-needs__icon-box {
                width: 66px;
                height: 66px;
                border-radius: 18px;
                font-size: 25px;
            }

            .project-needs__label {
                font-size: 13.5px;
            }
        }

        .project-needs__connector {
            width: 55px;
        }

        .project-needs__core {
            .project-needs__core-badge {
                width: 110px;
                height: 110px;
                border-radius: 28px;

                .project-needs__logo {
                    max-width: 88px;
                }
            }
        }
    }

    /*=============== PROBLEMS SECTION ===============*/
    .problems {
        padding-block: 75px;

        .problems__container {
            .problems__header {
                margin-bottom: 48px;

                .problems__title {
                    font-size: 36px;
                }
            }

            .problems__grid {
                gap: 20px;
            }

            .problem__card-stack {
                width: 100%;
                min-height: 500px;

                .problem__card-slide {
                    .problem__slide-body {
                        padding: 28px 14px 28px 14px;
                        gap: 24px;
                    }

                    .problem__text {
                        .problem__title {
                            font-size: 23px;
                            padding-left: 46px;
                        }

                        .problem__desc {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }

    /*=============== ALL IN ONE ===============*/
    .all__in__one {
        padding-block: 85px;

        .all__in__one__container {
            .all__in__one__content {
                gap: 40px;

                .all__in__one__info {
                    max-width: 480px;

                    .all__in__one__header {
                        margin-bottom: 36px;

                        .all__in__one__title {
                            font-size: 36px;
                        }
                    }

                    .all__in__one__list {
                        .all__in__one__item {
                            padding-bottom: 24px;
                            margin-bottom: 24px;

                            .item__number {
                                font-size: 24px;
                            }

                            .item__body {
                                .item__title {
                                    font-size: 21px;
                                }

                                .item__desc {
                                    font-size: 15px;
                                }
                            }
                        }
                    }
                }

                .all__in__one__visual {
                    max-width: 540px;
                    height: 560px;

                    .logo__about {
                        width: 170px;
                    }

                    .print,
                    .sale,
                    .internet,
                    .divces,
                    .chift,
                    .casher {
                        width: 80px;
                        height: 80px;
                    }
                }
            }
        }
    }

    /*=============== BUSINESS SIZES / SOLUTIONS ===============*/
    .business-sizes {
        padding-block: 65px;

        .business-sizes__container {
            .business-sizes__banner {
                padding: 140px 40px 48px 40px;
                border-radius: 24px;
            }

            .business-sizes__header {
                margin-bottom: 52px;

                .business-sizes__title {
                    font-size: 34px;
                }

                .business-sizes__subtitle {
                    font-size: 19px;
                    margin-bottom: 32px;
                }

                .business-sizes__btn {
                    height: 56px;
                    padding: 8px 48px;
                    font-size: 19px;
                }
            }

            .business-sizes__grid {
                gap: 24px;
            }

            .business-sizes__card {
                padding: 26px 16px;

                .business-sizes__img--shops {
                    width: 100px;
                }

                .business-sizes__img--mall {
                    width: 220px;
                }

                .business-sizes__img--brands {
                    width: 180px;
                }

                .business-sizes__card-title {
                    font-size: 21px;
                }

                .business-sizes__card-desc {
                    font-size: 15px;
                }
            }
        }
    }

    /*=============== FEATURES ===============*/
    .features {
        padding-block: 60px 100px;

        .features__container {
            .features__content {
                gap: 50px;

                .features__header {
                    .header__text {
                        .features__badge {
                            font-size: 32px;
                            padding: 0px 20px;
                        }

                        .features__subtitle {
                            font-size: 20px;
                        }
                    }
                }

                .features__grid {
                    gap: 24px;

                    .features__card {
                        padding: 40px 30px;

                        .card__content {
                            gap: 16px;
                            max-width: 250px;

                            .card__tag {
                                font-size: 22px;
                            }

                            .card__desc {
                                font-size: 17px;
                            }
                        }

                        .card__img {
                            width: 170px;
                        }
                    }
                }
            }
        }
    }

    /*=============== VIDEO GUIDE ===============*/
    .video-guide {
        padding-block: 70px 100px;

        .video-guide__container {
            .video-guide__card {
                padding: 18px 30px 28px 30px;
                border-radius: 24px;
                border-width: 6px;

                &::after {
                    top: 86px;
                    height: 15px;
                }
            }

            .video-guide__title {
                font-size: 30px;
                margin-bottom: 62px;
            }

            .video-guide__player {

                .video-guide__video,
                .video-guide__yt-cover {
                    height: 520px;
                }

                .video-guide__play-btn {
                    width: 62px;
                    height: 62px;
                    font-size: 20px;
                }
            }

            .video-guide__action {
                margin-top: 36px;

                .video-guide__btn {
                    padding: 8px 32px;
                    font-size: 20px;
                }
            }
        }
    }

    /*=============== PLAN BUILDER ===============*/
    .plan-builder {
        padding-block: 50px 85px;

        .plan-builder__container {
            .plan-builder__card {
                padding: 48px 50px;
                max-width: 920px;
            }

            .plan-builder__header {
                margin-bottom: 34px;

                .plan-builder__title {
                    font-size: 30px;
                }

                .plan-builder__subtitle {
                    font-size: 17px;
                }
            }

            .plan-builder__box {
                padding: 24px 28px;

                .plan-builder__box-title {
                    font-size: 21px;
                }

                .plan-builder__box-desc {
                    font-size: 18px;
                }
            }

            .plan-builder__box--duration {
                .plan-builder__period-pills {
                    gap: 16px;
                }

                .plan-builder__period-btn {
                    padding: 9px 15px;
                    font-size: 16px;
                }
            }

            .plan-builder__stepper {
                gap: 24px;

                .plan-builder__stepper-btn {
                    width: 44px;
                    height: 44px;
                }

                .plan-builder__stepper-val {
                    font-size: 18.5px;
                }
            }

            .plan-builder__subnotice {
                margin-block: 14px 30px;
                font-size: 13.5px;
            }

            .plan-builder__total-row {
                margin-block: 48px;

                .plan-builder__total-label {
                    font-size: 19.5px;
                }

                .plan-builder__price-num {
                    font-size: 29px;
                }

                .plan-builder__price-currency {
                    font-size: 26px;
                }
            }

            .plan-builder__cta-btn {
                height: 62px;
                min-height: 62px;
                padding: 0 22px;
                font-size: 21px;
            }

            .plan-builder__notes {
                max-width: 920px;

                .plan-builder__notes-header {
                    font-size: 20px;
                }

                .plan-builder__notes-list {
                    li {
                        font-size: 16.5px;
                    }
                }
            }
        }
    }

    /*=============== FAQ SECTION ===============*/
    .faq {
        padding-block: 55px 80px;

        .faq__container {
            max-width: 950px;
        }

        .faq__header {
            margin-bottom: 40px;

            .faq__title {
                font-size: 32px;
            }
        }

        .faq__bubble-decor--left {
            top: -12%;
            right: -8%;

            img {
                width: 105px;
            }
        }

        .faq__accordion {
            gap: 14px;
        }

        .faq__item {
            .faq__header-btn {
                padding: 15px 22px;

                .faq__question {
                    font-size: 19px;
                }
            }

            .faq__content {
                .faq__answer {
                    padding: 6px 22px 20px 22px;

                    p {
                        font-size: 18px;
                    }
                }
            }
        }
    }

    /*=============== TRIAL CTA ===============*/
    .trial-cta {
        padding-block: 85px 75px;

        .trial-cta__container {
            max-width: 980px;
        }

        .trial-cta__card {
            padding: 20px 40px;
            border-radius: 20px;
        }

        .trial-cta__content {
            max-width: 420px;

            .trial-cta__title {
                font-size: 26px;
                margin-bottom: 16px;
            }

            .trial-cta__desc {
                font-size: 16px;
                margin-bottom: 24px;
            }

            .trial-cta__action {
                .trial-cta__btn {
                    font-size: 20px;
                    padding: 8px 30px;
                    max-width: 220px;
                }
            }
        }

        .trial-cta__visual {
            width: 300px;
            top: -18px;
            left: 30px;

            .trial-cta__img {
                max-height: 280px;
            }
        }
    }

    /*=============== VIDEO MODAL ===============*/
    .video-modal {
        .video-modal__container {
            max-width: 800px;
        }

        .video-modal__player {
            .video-guide__video {
                max-height: 64vh;
                height: auto;
                aspect-ratio: 16 / 9;
            }
        }
    }
}


/*=============== 991px BREAKPOINT (iPad) ===============*/
@media (max-width: 991px) {

    /*=============== HERO SECTION ===============*/
    .hero {
        padding-block: 140px 0px;

        .hero__container {

            /* Top Glass Badge */
            .hero__badge-wrapper {
                margin-bottom: 20px;
            }

            .hero__badge {
                padding: 9px 20px;
                font-size: 15px;
            }

            /* Main Title */
            .hero__title {
                font-size: 36px;
                line-height: 1.85;
                margin-bottom: 46px;

                .hero__highlight-box {
                    margin-top: 6px;
                }

                .hero__highlight {
                    display: inline-block !important;
                    position: relative !important;
                    isolation: isolate !important;
                    z-index: 1 !important;
                    font-size: 40px;

                    &::after {
                        position: absolute !important;
                        content: '' !important;
                        display: block !important;
                        top: 50% !important;
                        left: 50% !important;
                        width: calc(100% + 28px) !important;
                        height: calc(100% + 0px) !important;
                        background-color: #FFFFFF !important;
                        z-index: -1 !important;
                        transform: translate(-50%, -50%) rotate(-2.8deg) !important;
                        border-radius: 8px !important;
                    }
                }
            }

            /* Video Wrapper & Device Frame */
            .hero__video-wrapper {
                max-width: 840px;
                width: 92%;
            }

            .hero__device-frame {
                border: 8px solid #000000;
                border-radius: 20px 20px 0 0;
            }

            .hero__video-container {
                aspect-ratio: 16 / 9.8;

                .hero__play-btn {
                    width: 72px;
                    height: 72px;

                    .hero__play-circle {
                        width: 50px;
                        height: 50px;
                        font-size: 17px;
                    }
                }
            }
        }

        /* Bottom Gradient Overlay */
        .hero__bottom-overlay {
            height: 260px;
        }
    }

    /*=============== PROJECT NEEDS SECTION ===============*/
    .project-needs {
        padding-block: 34px 48px;

        .project-needs__header {
            margin-bottom: 52px;

            .project-needs__title {
                font-size: 26px;
            }
        }

        .project-needs__flow {
            gap: 12px;
        }

        .project-needs__item {
            gap: 6px;

            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(7),
            &:nth-child(8) {
                margin-inline-end: 12px;
            }

            .project-needs__icon-box {
                width: 62px;
                height: 62px;
                border-radius: 17px;
                font-size: 23px;
            }

            .project-needs__label {
                font-size: 12.5px;
            }
        }

        .project-needs__connector {
            width: 44px;
        }

        .project-needs__core {
            .project-needs__core-badge {
                width: 100px;
                height: 100px;
                border-radius: 26px;

                .project-needs__logo {
                    max-width: 80px;
                }
            }
        }
    }

    /*=============== PROBLEMS SECTION ===============*/
    .problems {
        padding-block: 65px;

        .problems__container {
            .problems__header {
                margin-bottom: 44px;

                .problems__title {
                    font-size: 32px;
                }
            }

            .problems__grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 28px;
                justify-items: center;
            }

            .problem__card-stack {
                width: 100%;
                max-width: 380px;
                min-height: 480px;

                /* Center 3rd deck in row 2 */
                &:nth-child(3) {
                    grid-column: 1 / -1;
                }

                .problem__card-slide {
                    .problem__slide-body {
                        padding: 26px 14px 26px 14px;
                        gap: 22px;
                    }

                    .problem__text {
                        .problem__title {
                            font-size: 22px;
                            padding-left: 44px;
                        }

                        .problem__desc {
                            font-size: 15px;
                        }
                    }
                }
            }
        }
    }

    /*=============== ALL IN ONE ===============*/
    .all__in__one {
        padding-block: 70px;

        .all__in__one__container {
            .all__in__one__content {
                flex-direction: column-reverse;
                align-items: center;
                gap: 48px;

                .all__in__one__info {
                    max-width: 560px;
                    width: 100%;
                    margin-inline: auto;

                    .all__in__one__header {
                        margin-bottom: 36px;
                        text-align: right;

                        .all__in__one__title {
                            font-size: 32px;

                            br {
                                display: none;
                            }
                        }
                    }

                    .all__in__one__list {
                        .all__in__one__item {
                            opacity: 1 !important;
                            transform: none !important;
                            filter: none !important;
                            transition: none !important;
                            will-change: auto !important;
                            max-width: 100%;
                            width: 100%;
                            padding-bottom: 22px;
                            margin-bottom: 22px;
                            gap: 14px;
                            border-bottom: 1px solid #E3E3E3 !important;

                            &:last-child {
                                border-bottom: none !important;
                                margin-bottom: 0 !important;
                                padding-bottom: 0 !important;
                            }

                            .item__number {
                                font-size: 24px;
                                color: var(--cobalt-blue, #3164E2) !important;
                                transform: none !important;
                                text-shadow: none !important;
                                opacity: 1 !important;
                            }

                            .item__body {
                                .item__title {
                                    font-size: 20px;
                                    color: var(--text) !important;
                                }

                                .item__desc {
                                    font-size: 15px;
                                }
                            }
                        }
                    }
                }

                .all__in__one__visual {
                    position: relative !important;
                    top: auto !important;
                    align-self: center !important;
                    max-width: 560px !important;
                    width: 100% !important;
                    height: 380px !important;
                    box-shadow: 12px 12px 0px 0px #3164E2;

                    .logo__about {
                        width: 220px;
                    }

                    .print,
                    .sale,
                    .internet,
                    .divces,
                    .chift,
                    .casher {
                        width: 62px;
                        height: 62px;
                    }

                    .print {
                        top: 50%;
                        right: 7%;
                        transform: translateY(-50%);
                    }

                    .sale {
                        bottom: 12%;
                        right: 23%;
                    }

                    .internet {
                        top: 15%;
                        left: 16%;
                    }

                    .divces {
                        top: 13%;
                        right: 20%;
                    }

                    .chift {
                        bottom: 12%;
                        left: 18%;
                    }

                    .casher {
                        top: 50%;
                        left: 5%;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }

    /*=============== BUSINESS SIZES / SOLUTIONS ===============*/
    .business-sizes {
        padding-block: 55px;

        .business-sizes__container {
            .business-sizes__banner {
                padding: 100px 30px 44px 30px;
                border-radius: 22px;
            }

            .business-sizes__header {
                margin-bottom: 44px;

                .business-sizes__title {
                    font-size: 28px;
                    line-height: 1.35;
                }

                .business-sizes__subtitle {
                    font-size: 16px;
                    margin-bottom: 26px;
                }

                .business-sizes__btn {
                    height: 50px;
                    padding: 6px 36px;
                    font-size: 17px;
                    border-radius: 8px;

                    i {
                        font-size: 20px;
                    }
                }
            }

            .business-sizes__grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
                justify-items: center;
            }

            .business-sizes__card {
                max-width: 320px;
                padding: 24px 16px;
                border-radius: 18px;
                height: auto !important;

                /* Center 3rd card in row 2 */
                &:nth-child(3) {
                    grid-column: 1 / -1;
                }

                .business-sizes__img--shops {
                    width: 90px;
                    height: auto;
                }

                .business-sizes__img--mall {
                    width: 180px;
                    height: auto;
                }

                .business-sizes__img--brands {
                    width: 150px;
                    height: auto;
                }

                .business-sizes__card-title {
                    font-size: 19px;
                    margin-bottom: 12px;
                }

                .business-sizes__card-desc {
                    font-size: 13.5px;
                    line-height: 1.5;
                }
            }
        }
    }

    /*=============== FEATURES ===============*/
    .features {
        padding-block: 50px 80px;

        .features__container {
            .features__content {
                gap: 44px;

                .features__header {
                    .header__text {
                        .features__badge {
                            font-size: 26px;
                            padding: 2px 18px;
                            border-radius: 6px;
                        }

                        .features__subtitle {
                            font-size: 17px;
                        }
                    }
                }

                .features__grid {
                    grid-template-columns: 1fr;
                    gap: 24px;

                    .features__card {
                        max-width: 100%;
                        width: 100%;
                        margin-inline: auto;
                        padding: 28px 26px;
                        border-radius: 18px;

                        /* Order: Invoices (2) -> Inventory (1) -> Reports (4) -> Customers (3) -> Alerts (5) -> Branches (6) */
                        &:nth-child(2) {
                            order: 1;
                        }

                        &:nth-child(1) {
                            order: 2;
                        }

                        &:nth-child(4) {
                            order: 3;
                        }

                        &:nth-child(3) {
                            order: 4;
                        }

                        &:nth-child(5) {
                            order: 5;
                        }

                        &:nth-child(6) {
                            order: 6;
                        }

                        .card__content {
                            max-width: 270px;
                            gap: 12px;

                            .card__tag {
                                font-size: 19px;
                                padding: 2px 8px;
                                border-radius: 6px;
                            }

                            .card__desc {
                                font-size: 14.5px;
                                line-height: 1.45;
                            }

                            .card__action {
                                .card__play-btn {
                                    width: 38px;
                                    height: 38px;
                                }
                            }
                        }

                        .card__img {
                            width: 155px;
                        }
                    }
                }
            }
        }
    }

    /*=============== VIDEO GUIDE ===============*/
    .video-guide {
        padding-block: 55px 75px;

        .video-guide__container {
            .video-guide__card {
                max-width: 760px;
                width: 100%;
                margin-inline: auto;
                padding: 16px 24px 24px 24px;
                border-radius: 22px;
                border: 5px solid #E4E4E4;

                &::after {
                    top: 72px;
                    height: 12px;
                }
            }

            .video-guide__title {
                font-size: 26px;
                margin-bottom: 50px;
            }

            .video-guide__player {

                .video-guide__video,
                .video-guide__yt-cover {
                    height: 400px;
                    border-radius: 16px;
                }

                .video-guide__play-btn {
                    width: 58px;
                    height: 58px;
                    font-size: 19px;
                }
            }

            .video-guide__action {
                margin-top: 28px;

                .video-guide__btn {
                    padding: 7.5px 28px;
                    font-size: 18px;
                }
            }
        }
    }

    /*=============== PLAN BUILDER ===============*/
    .plan-builder {
        padding-block: 45px 75px;

        .plan-builder__container {
            .plan-builder__card {
                padding: 40px 36px;
                max-width: 760px;
                border-radius: 14px;
            }

            .plan-builder__header {
                margin-bottom: 30px;

                .plan-builder__title {
                    font-size: 27px;
                    margin-bottom: 10px;
                }

                .plan-builder__subtitle {
                    font-size: 15.5px;
                }
            }

            .plan-builder__box {
                padding: 22px 24px;
                gap: 16px;
                border-radius: 14px;

                .plan-builder__box-title {
                    font-size: 19.5px;
                }

                .plan-builder__box-desc {
                    font-size: 16px;
                }
            }

            .plan-builder__box--duration {
                .plan-builder__period-pills {
                    gap: 14px;
                }

                .plan-builder__period-btn {
                    padding: 8px 14px;
                    font-size: 15px;
                }
            }

            .plan-builder__stepper {
                gap: 20px;
                padding: 8px;
                border-radius: 12px;

                .plan-builder__stepper-btn {
                    width: 42px;
                    height: 42px;
                    border-radius: 8px;
                }

                .plan-builder__stepper-val {
                    font-size: 18px;
                    min-width: 48px;
                }
            }

            .plan-builder__subnotice {
                font-size: 13px;
                margin-block: 12px 26px;
            }

            .plan-builder__total-row {
                margin-block: 42px;

                .plan-builder__total-label {
                    font-size: 18px;
                }

                .plan-builder__price-num {
                    font-size: 28px;
                }

                .plan-builder__price-currency {
                    font-size: 24px;
                }
            }

            .plan-builder__cta-btn {
                height: 62px;
                min-height: 62px;
                padding: 0 20px;
                font-size: 20px;
            }

            .plan-builder__notes {
                max-width: 760px;
                margin-top: 24px;

                .plan-builder__notes-header {
                    font-size: 19px;
                    gap: 8px;
                    margin-bottom: 10px;
                }

                .plan-builder__notes-list {
                    gap: 12px;

                    li {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    /*=============== FAQ SECTION ===============*/
    .faq {
        padding-block: 50px 70px;

        .faq__container {
            max-width: 760px;
        }

        .faq__header {
            margin-bottom: 34px;

            .faq__title {
                font-size: 27px;
            }
        }

        .faq__bubble-decor--left {
            top: -45px;
            left: 20px;
            right: auto;

            img {
                width: 85px;
            }
        }

        .faq__bubble-decor--watermark {
            bottom: -30px;
            left: -30px;

            svg {
                width: 160px;
                height: 160px;
            }
        }

        .faq__accordion {
            gap: 14px;
        }

        .faq__item {
            border-radius: 8px;

            .faq__header-btn {
                padding: 14px 20px;

                .faq__question {
                    font-size: 17.5px;
                }

                .faq__arrow {
                    font-size: 13px;
                    margin-right: 10px;
                }
            }

            .faq__content {
                .faq__answer {
                    padding: 6px 20px 18px 20px;

                    p {
                        font-size: 16px;
                        line-height: 1.5;
                    }
                }
            }
        }
    }

    /*=============== TRIAL CTA ===============*/
    .trial-cta {
        padding-block: 65px 55px;

        .trial-cta__container {
            max-width: 760px;
        }

        .trial-cta__card {
            padding: 24px 34px;
            border-radius: 18px;
            min-height: 220px;
        }

        .trial-cta__content {
            max-width: 380px;

            .trial-cta__title {
                font-size: 23px;
                margin-bottom: 12px;
            }

            .trial-cta__desc {
                font-size: 14.5px;
                line-height: 1.5;
                margin-bottom: 20px;
            }

            .trial-cta__action {
                .trial-cta__btn {
                    font-size: 18px;
                    padding: 8px 26px;
                    max-width: 200px;
                }
            }
        }

        .trial-cta__visual {
            width: 250px;
            top: -22px;
            left: 24px;

            .trial-cta__img {
                max-height: 250px;
            }
        }
    }

    /*=============== VIDEO MODAL ===============*/
    .video-modal {
        padding: 18px;

        .video-modal__container {
            max-width: 720px;
        }

        .video-modal__dialog {
            border-radius: 18px;
        }

        .video-modal__header {
            padding: 14px 20px;

            .video-modal__title {
                font-size: 15.5px;
            }

            .video-modal__close {
                width: 34px;
                height: 34px;
                font-size: 14px;
            }
        }

        .video-modal__player {
            .video-guide__video {
                max-height: 60vh;
                height: auto;
                aspect-ratio: 16 / 9;
            }

            .video-guide__play-btn {
                width: 58px;
                height: 58px;
                font-size: 19px;
            }
        }
    }
}


/*=============== 768px BREAKPOINT (Tablet) ===============*/
@media (max-width: 768px) {

    /*=============== HERO SECTION ===============*/
    .hero {
        padding-block: 125px 0px;

        .hero__container {

            /* Top Glass Badge */
            .hero__badge-wrapper {
                margin-bottom: 18px;
            }

            .hero__badge {
                padding: 8px 18px;
                font-size: 14px;
            }

            /* Main Title */
            .hero__title {
                font-size: 29px;
                line-height: 1.42;
                margin-bottom: 40px;

                .hero__highlight {
                    display: inline-block !important;
                    position: relative !important;
                    isolation: isolate !important;
                    z-index: 1 !important;
                    font-size: 32px;

                    &::after {
                        position: absolute !important;
                        content: '' !important;
                        display: block !important;
                        top: 50% !important;
                        left: 50% !important;
                        width: calc(100% + 26px) !important;
                        height: calc(100% + 6px) !important;
                        background-color: #FFFFFF !important;
                        z-index: -1 !important;
                        transform: translate(-50%, -50%) rotate(-2.8deg) !important;
                        border-radius: 7px !important;
                    }
                }
            }

            /* Video Wrapper & Device Frame */
            .hero__video-wrapper {
                max-width: 690px;
                width: 92%;
            }

            .hero__device-frame {
                border: 7px solid #000000;
                border-radius: 18px 18px 0 0;
            }

            .hero__video-container {
                aspect-ratio: 16 / 9.8;

                .hero__play-btn {
                    width: 64px;
                    height: 64px;

                    .hero__play-circle {
                        width: 44px;
                        height: 44px;
                        font-size: 15px;
                    }
                }
            }
        }

        /* Bottom Gradient Overlay */
        .hero__bottom-overlay {
            height: 220px;
        }
    }

    /*=============== PROJECT NEEDS SECTION ===============*/
    .project-needs {
        padding-block: 30px 42px;

        .project-needs__header {
            margin-bottom: 42px;

            .project-needs__title {
                font-size: 23px;
            }
        }

        .project-needs__flow {
            gap: 8px;
        }

        .project-needs__item {
            gap: 5px;

            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(7),
            &:nth-child(8) {
                margin-inline-end: 8px;
            }

            .project-needs__icon-box {
                width: 54px;
                height: 54px;
                border-radius: 15px;
                font-size: 20px;
            }

            .project-needs__label {
                font-size: 11.5px;
            }
        }

        .project-needs__connector {
            width: 34px;
        }

        .project-needs__core {
            .project-needs__core-badge {
                width: 86px;
                height: 86px;
                border-radius: 22px;

                .project-needs__logo {
                    max-width: 68px;
                }
            }
        }
    }

    /*=============== PROBLEMS SECTION ===============*/
    .problems {
        padding-block: 55px;

        .problems__container {
            .problems__header {
                margin-bottom: 38px;

                .problems__title {
                    font-size: 28px;
                }
            }

            .problems__grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .problem__card-stack {
                width: 100%;
                max-width: 440px;
                min-height: 480px;
                margin-inline: auto;

                /* Reordering for Tablet: 2 (Purple) -> 1 (Reports) -> 3 (Invoices) */
                &:nth-child(2) {
                    order: 1;
                }

                &:nth-child(1) {
                    order: 2;
                }

                &:nth-child(3) {
                    order: 3;
                    grid-column: auto;
                }

                .problem__card-slide {
                    .problem__slide-body {
                        padding: 24px 14px 24px 14px;
                        gap: 20px;
                    }

                    .problem__text {
                        .problem__title {
                            font-size: 21px;
                            padding-left: 44px;
                        }

                        .problem__desc {
                            font-size: 15px;
                        }
                    }
                }
            }
        }
    }

    /*=============== ALL IN ONE ===============*/
    .all__in__one {
        padding-block: 60px;

        .all__in__one__container {
            .all__in__one__content {
                flex-direction: column-reverse;
                align-items: center;
                gap: 42px;

                .all__in__one__info {
                    max-width: 440px;
                    width: 100%;
                    margin-inline: auto;

                    .all__in__one__header {
                        margin-bottom: 32px;
                        text-align: right;

                        .all__in__one__title {
                            font-size: 28px;

                            br {
                                display: none;
                            }
                        }
                    }

                    .all__in__one__list {
                        .all__in__one__item {
                            max-width: 100%;
                            width: 100%;
                            padding-bottom: 20px;
                            margin-bottom: 20px;
                            gap: 12px;

                            .item__number {
                                font-size: 22px;
                            }

                            .item__body {
                                .item__title {
                                    font-size: 19px;
                                }

                                .item__desc {
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }

                .all__in__one__visual {
                    max-width: 440px;
                    width: 100%;
                    height: 340px;
                    box-shadow: 10px 10px 0px 0px #3164E2;

                    .logo__about {
                        width: 180px;
                    }

                    .print,
                    .sale,
                    .internet,
                    .divces,
                    .chift,
                    .casher {
                        width: 52px;
                        height: 52px;
                    }

                    .print {
                        top: 50%;
                        right: 6%;
                        transform: translateY(-50%);
                    }

                    .sale {
                        bottom: 12%;
                        right: 21%;
                    }

                    .internet {
                        top: 14%;
                        left: 14%;
                    }

                    .divces {
                        top: 13%;
                        right: 18%;
                    }

                    .chift {
                        bottom: 12%;
                        left: 16%;
                    }

                    .casher {
                        top: 50%;
                        left: 4%;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }

    /*=============== BUSINESS SIZES / SOLUTIONS ===============*/
    .business-sizes {
        padding-block: 45px;

        .business-sizes__container {
            .business-sizes__banner {
                padding: 70px 24px 40px 24px;
                border-radius: 20px;
            }

            .business-sizes__header {
                margin-bottom: 36px;

                .business-sizes__title {
                    font-size: 25px;
                    line-height: 1.4;
                    max-width: 360px;
                    margin-inline: auto;
                }

                .business-sizes__subtitle {
                    font-size: 15px;
                    margin-bottom: 22px;
                }

                .business-sizes__btn {
                    height: 48px;
                    padding: 6px 30px;
                    font-size: 16px;
                    border-radius: 8px;

                    i {
                        font-size: 18px;
                    }
                }
            }

            .business-sizes__grid {
                grid-template-columns: 1fr;
                gap: 22px;
            }

            .business-sizes__card {
                max-width: 380px;
                margin-inline: auto;
                padding: 24px 18px;
                border-radius: 18px;

                /* Order for Tablet: Mall (2) -> Shops (1) -> Brands (3) */
                &:nth-child(2) {
                    order: 1;
                }

                &:nth-child(1) {
                    order: 2;
                }

                &:nth-child(3) {
                    order: 3;
                    grid-column: auto;
                }

                .business-sizes__img--shops {
                    width: 85px;
                    height: auto;
                }

                .business-sizes__img--mall {
                    width: 170px;
                    height: auto;
                }

                .business-sizes__img--brands {
                    width: 145px;
                    height: auto;
                }

                .business-sizes__card-title {
                    font-size: 19px;
                    margin-bottom: 10px;
                }

                .business-sizes__card-desc {
                    font-size: 13.5px;
                    line-height: 1.5;
                }
            }
        }
    }

    /*=============== FEATURES ===============*/
    .features {
        padding-block: 45px 70px;

        .features__container {
            .features__content {
                gap: 36px;

                .features__header {
                    .header__text {
                        .features__badge {
                            font-size: 23px;
                            padding: 2px 16px;
                        }

                        .features__subtitle {
                            font-size: 15px;
                        }
                    }
                }

                .features__grid {
                    grid-template-columns: 1fr;
                    gap: 20px;

                    .features__card {
                        max-width: 440px;
                        width: 100%;
                        margin-inline: auto;
                        padding: 24px 20px;
                        border-radius: 16px;

                        /* Order: Invoices (2) -> Inventory (1) -> Reports (4) -> Customers (3) -> Alerts (5) -> Branches (6) */
                        &:nth-child(2) {
                            order: 1;
                        }

                        &:nth-child(1) {
                            order: 2;
                        }

                        &:nth-child(4) {
                            order: 3;
                        }

                        &:nth-child(3) {
                            order: 4;
                        }

                        &:nth-child(5) {
                            order: 5;
                        }

                        &:nth-child(6) {
                            order: 6;
                        }

                        .card__content {
                            max-width: 230px;
                            gap: 10px;

                            .card__tag {
                                font-size: 17.5px;
                                padding: 2px 7px;
                            }

                            .card__desc {
                                font-size: 13.5px;
                                line-height: 1.45;
                            }

                            .card__action {
                                .card__play-btn {
                                    width: 36px;
                                    height: 36px;
                                }
                            }
                        }

                        .card__img {
                            width: 135px;
                        }
                    }
                }
            }
        }
    }

    /*=============== VIDEO GUIDE ===============*/
    .video-guide {
        padding-block: 45px 65px;

        .video-guide__container {
            .video-guide__card {
                max-width: 620px;
                width: 100%;
                margin-inline: auto;
                padding: 14px 18px 20px 18px;
                border-radius: 20px;
                border: 4px solid #E4E4E4;

                &::after {
                    top: 62px;
                    height: 10px;
                }
            }

            .video-guide__title {
                font-size: 22px;
                margin-bottom: 44px;
            }

            .video-guide__player {

                .video-guide__video,
                .video-guide__yt-cover {
                    height: 330px;
                    border-radius: 14px;
                }

                .video-guide__play-btn {
                    width: 52px;
                    height: 52px;
                    font-size: 17px;
                }
            }

            .video-guide__action {
                margin-top: 22px;

                .video-guide__btn {
                    padding: 7px 22px;
                    font-size: 16px;
                }
            }
        }
    }

    /*=============== PLAN BUILDER ===============*/
    .plan-builder {
        padding-block: 40px 65px;

        .plan-builder__container {
            .plan-builder__card {
                padding: 34px 26px;
                max-width: 620px;
                border-radius: 14px;
            }

            .plan-builder__header {
                margin-bottom: 24px;

                .plan-builder__title {
                    font-size: 24px;
                    margin-bottom: 8px;
                }

                .plan-builder__subtitle {
                    font-size: 14px;
                }
            }

            .plan-builder__box {
                padding: 18px 20px;
                gap: 14px;
                border-radius: 12px;

                .plan-builder__box-title {
                    font-size: 18px;
                }

                .plan-builder__box-desc {
                    font-size: 14px;
                }
            }

            .plan-builder__box--duration {
                .plan-builder__period-pills {
                    gap: 10px;
                }

                .plan-builder__period-btn {
                    padding: 7px 12px;
                    font-size: 13.5px;
                }
            }

            .plan-builder__stepper {
                gap: 16px;
                padding: 6px;
                border-radius: 10px;

                .plan-builder__stepper-btn {
                    width: 38px;
                    height: 38px;
                    border-radius: 7px;
                }

                .plan-builder__stepper-val {
                    font-size: 16px;
                    min-width: 42px;
                }
            }

            .plan-builder__subnotice {
                font-size: 12px;
                margin-block: 10px 22px;
            }

            .plan-builder__total-row {
                margin-block: 32px;

                .plan-builder__total-label {
                    font-size: 16px;
                }

                .plan-builder__price-num {
                    font-size: 25px;
                }

                .plan-builder__price-currency {
                    font-size: 21px;
                }
            }

            .plan-builder__cta-btn {
                height: 62px;
                min-height: 62px;
                padding: 0 18px;
                font-size: 18px;
            }

            .plan-builder__notes {
                max-width: 620px;
                margin-top: 20px;

                .plan-builder__notes-header {
                    font-size: 17px;
                    gap: 7px;
                    margin-bottom: 8px;
                }

                .plan-builder__notes-list {
                    gap: 10px;

                    li {
                        font-size: 13.5px;
                    }
                }
            }
        }
    }

    /*=============== FAQ SECTION ===============*/
    .faq {
        padding-block: 45px 60px;

        .faq__container {
            max-width: 620px;
        }

        .faq__header {
            margin-bottom: 28px;

            .faq__title {
                font-size: 23px;
            }
        }

        .faq__bubble-decor--left {
            top: -38px;
            left: 10px;
            right: auto;

            img {
                width: 72px;
            }
        }

        .faq__bubble-decor--watermark {
            bottom: -20px;
            left: -20px;

            svg {
                width: 130px;
                height: 130px;
            }
        }

        .faq__accordion {
            gap: 12px;
        }

        .faq__item {
            border-radius: 7px;

            .faq__header-btn {
                padding: 13px 16px;

                .faq__question {
                    font-size: 15.5px;
                }

                .faq__arrow {
                    font-size: 12px;
                    margin-right: 8px;
                }
            }

            .faq__content {
                .faq__answer {
                    padding: 5px 16px 16px 16px;

                    p {
                        font-size: 14.5px;
                        line-height: 1.45;
                    }
                }
            }
        }
    }

    /*=============== TRIAL CTA ===============*/
    .trial-cta {
        padding-block: 55px 45px;

        .trial-cta__container {
            max-width: 620px;
        }

        .trial-cta__card {
            padding: 20px 24px;
            border-radius: 16px;
            min-height: 195px;
        }

        .trial-cta__content {
            max-width: 330px;

            .trial-cta__title {
                font-size: 20px;
                margin-bottom: 10px;
            }

            .trial-cta__desc {
                font-size: 13px;
                line-height: 1.45;
                margin-bottom: 16px;
            }

            .trial-cta__action {
                .trial-cta__btn {
                    font-size: 16px;
                    padding: 7px 22px;
                    max-width: 185px;
                }
            }
        }

        .trial-cta__visual {
            width: 215px;
            top: -18px;
            left: 16px;

            .trial-cta__img {
                max-height: 215px;
            }
        }
    }

    /*=============== VIDEO MODAL ===============*/
    .video-modal {
        padding: 14px;

        .video-modal__container {
            max-width: 600px;
        }

        .video-modal__dialog {
            border-radius: 16px;
        }

        .video-modal__header {
            padding: 12px 18px;

            .video-modal__badge {
                font-size: 11px;
                padding: 3px 12px;
            }

            .video-modal__title {
                font-size: 14.5px;
            }

            .video-modal__close {
                width: 32px;
                height: 32px;
                font-size: 13.5px;
            }
        }

        .video-modal__player {
            .video-guide__video {
                max-height: 56vh;
                height: auto;
                aspect-ratio: 16 / 9;
            }

            .video-guide__play-btn {
                width: 52px;
                height: 52px;
                font-size: 17px;
            }

            .video-guide__controls {
                padding: 24px 14px 10px 14px;
            }
        }
    }
}


/*=============== 576px BREAKPOINT (Mobile) ===============*/
@media (max-width: 576px) {

    /*=============== HERO SECTION ===============*/
    .hero {
        padding-block: 100px 0px;

        .hero__container {

            /* Top Glass Badge */
            .hero__badge-wrapper {
                margin-bottom: 22px;
            }

            .hero__badge {
                padding: 8px 14px;
                font-size: 12px;
                letter-spacing: -0.1px;
            }

            /* Main Title */
            .hero__title {
                font-size: 24px;
                line-height: 1.48;
                margin-bottom: 36px;

                .hero__title-line {
                    display: block;
                    max-width: 245px;
                    margin-inline: auto;
                }

                .hero__highlight-box {
                    margin-top: 6px;
                }

                .hero__highlight {
                    display: inline-block !important;
                    position: relative !important;
                    isolation: isolate !important;
                    z-index: 1 !important;
                    font-size: 26px;

                    &::after {
                        position: absolute !important;
                        content: '' !important;
                        display: block !important;
                        top: 50% !important;
                        left: 50% !important;
                        width: calc(100% + 24px) !important;
                        height: calc(100% + 6px) !important;
                        background-color: #FFFFFF !important;
                        z-index: -1 !important;
                        transform: translate(-50%, -50%) rotate(-2.8deg) !important;
                        border-radius: 6px !important;
                    }
                }
            }

            /* Video Wrapper & Device Frame (Mobile Phone Mockup) */
            .hero__video-wrapper {
                max-width: 226px;
                width: 100%;
                margin-inline: auto;
            }

            .hero__device-frame {
                border: 6px solid #1C1D22;
                border-bottom: none;
                border-radius: 36px 36px 0 0;
                box-shadow: 0 0 0 2px #5A6275, 0px 4px 40px 0px #060C4E;
                position: relative;
                padding-top: 14px;
                background-color: #000000;

                &::before {
                    content: '';
                    position: absolute;
                    top: 6px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 44px;
                    height: 4px;
                    background: #374151;
                    border-radius: 4px;
                    z-index: 10;
                }
            }

            .hero__video-container {
                aspect-ratio: 9 / 14;
                border-radius: 28px 28px 0 0;

                .hero__video {
                    object-fit: cover;
                }

                .hero__play-btn {
                    width: 52px;
                    height: 52px;

                    .hero__play-ring {
                        display: block;
                    }

                    .hero__play-circle {
                        width: 36px;
                        height: 36px;
                        font-size: 13px;
                    }
                }
            }
        }

        /* Bottom Gradient Overlay */
        .hero__bottom-overlay {
            height: 160px;
        }
    }

    /*=============== PROJECT NEEDS SECTION ===============*/
    .project-needs {
        padding-block: 28px 40px;

        .project-needs__header {
            margin-bottom: 36px;

            .project-needs__title {
                font-size: 24px;
            }
        }

        .project-needs__diagram {
            width: 100%;
        }

        .project-needs__flow {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            align-items: center;
            justify-items: center;
            gap: 0;
            max-width: 340px;
            margin-inline: auto;
        }

        .project-needs__item {
            gap: 8px;
            margin-inline-end: 0;

            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(7),
            &:nth-child(8) {
                margin-inline-end: 0;
            }

            .project-needs__icon-box {
                width: 62px;
                height: 62px;
                border-radius: 18px;
                font-size: 23px;
            }

            .project-needs__label {
                font-size: 12px;
                white-space: nowrap;
            }

            /* Row 1 (Top): Items 5, 4, 6 */
            &[data-index="5"] {
                grid-row: 1;
                grid-column: 1;
            }

            &[data-index="4"] {
                grid-row: 1;
                grid-column: 2;
            }

            &[data-index="6"] {
                grid-row: 1;
                grid-column: 3;
            }

            /* Row 5 (Bottom): Items 1, 3, 2 */
            &[data-index="1"] {
                grid-row: 5;
                grid-column: 1;
            }

            &[data-index="3"] {
                grid-row: 5;
                grid-column: 2;
            }

            &[data-index="2"] {
                grid-row: 5;
                grid-column: 3;
            }
        }

        /* Vertical Connectors */
        .project-needs__connector {
            width: 36px;
            height: 44px;
            transform: rotate(90deg);
            margin: 0 auto;
        }

        .project-needs__connector--right {
            grid-row: 2;
            grid-column: 2;
        }

        .project-needs__connector--left {
            grid-row: 4;
            grid-column: 2;
        }

        /* Central Logo Badge */
        .project-needs__core {
            grid-row: 3;
            grid-column: 2;
            margin-inline: 0;

            .project-needs__core-badge {
                width: 92px;
                height: 92px;
                border-radius: 24px;

                .project-needs__logo {
                    max-width: 74px;
                }
            }
        }
    }

    /*=============== PROBLEMS SECTION ===============*/
    .problems {
        padding-block: 45px;

        .problems__container {
            .problems__header {
                margin-bottom: 32px;

                .problems__title {
                    font-size: 24px;
                    line-height: 1.4;
                    max-width: 250px;
                    margin-inline: auto;
                }
            }

            .problems__grid {
                grid-template-columns: 1fr;
                gap: 26px;
            }

            .problem__card-stack {
                width: 100%;
                max-width: 325px;
                min-height: 440px;
                margin-inline: auto;

                /* Reordering for Mobile: 3 (Invoices) -> 2 (Suppliers) -> 1 (Reports) */
                &:nth-child(3) {
                    order: 1;
                    grid-column: auto;
                }

                &:nth-child(2) {
                    order: 2;
                }

                &:nth-child(1) {
                    order: 3;
                }

                .problem__arrow-btn {
                    top: 18px;
                    left: 14px;
                    width: 36px;
                    height: 36px;
                    font-size: 15px;
                }

                .problem__card-slide {
                    border-radius: 16px;

                    &::before {
                        top: 155px;
                        width: 290px;
                        height: 290px;
                    }

                    .problem__slide-body {
                        padding: 22px 12px 22px 12px;
                        gap: 18px;
                    }

                    .problem__text {
                        .problem__title {
                            font-size: 19px;
                            padding-left: 40px;
                            margin-bottom: 6px;
                        }

                        .problem__desc {
                            font-size: 14px;
                            line-height: 1.55;
                        }
                    }

                    .problem__tablet {
                        .problem__zoom-btn {
                            bottom: 12px;
                            right: 12px;
                            width: 30px;
                            height: 30px;
                            padding: 0;

                            i {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }

            .problem__card-stack--blue {
                .problem__card--blue {
                    box-shadow: -10px 10px 0px 0px #457AFD;
                }

                .problem__card--blue-dark {
                    box-shadow: -10px 10px 0px 0px var(--cobalt-blue);
                }
            }

            .problem__card-stack--purple {
                .problem__card--purple {
                    box-shadow: -10px 10px 0px 0px #8174E5;
                }

                .problem__card--purple-dark {
                    box-shadow: -10px 10px 0px 0px var(--heroic-blue);
                }
            }
        }
    }

    /*=============== ALL IN ONE ===============*/
    .all__in__one {
        padding-block: 45px;

        .all__in__one__container {
            .all__in__one__content {
                flex-direction: column-reverse;
                align-items: center;
                gap: 32px;

                .all__in__one__info {
                    max-width: 320px;
                    width: 100%;
                    margin-inline: auto;

                    .all__in__one__header {
                        margin-bottom: 28px;
                        text-align: center;

                        .all__in__one__title {
                            font-size: 24px;
                            line-height: 1.35;

                            br {
                                display: inline;
                            }
                        }
                    }

                    .all__in__one__list {
                        .all__in__one__item {
                            max-width: 100%;
                            width: 100%;
                            padding-bottom: 18px;
                            margin-bottom: 18px;
                            gap: 12px;

                            .item__number {
                                font-size: 22px;
                            }

                            .item__body {
                                gap: 4px;

                                .item__title {
                                    font-size: 17px;
                                }

                                .item__desc {
                                    font-size: 13px;
                                    line-height: 1.5;
                                }
                            }
                        }
                    }
                }

                .all__in__one__visual {
                    max-width: 320px;
                    width: 100%;
                    height: 245px;
                    box-shadow: 8px 8px 0px 0px #3164E2;

                    .logo__about {
                        width: 180px;
                    }

                    .print,
                    .sale,
                    .internet,
                    .divces,
                    .chift,
                    .casher {
                        width: 50px;
                        height: 50px;
                    }

                    .print {
                        top: 50%;
                        right: 6%;
                        transform: translateY(-50%);
                    }

                    .sale {
                        bottom: 12%;
                        right: 20%;
                    }

                    .internet {
                        top: 14%;
                        left: 14%;
                    }

                    .divces {
                        top: 12%;
                        right: 18%;
                    }

                    .chift {
                        bottom: 12%;
                        left: 15%;
                    }

                    .casher {
                        top: 50%;
                        left: 4%;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }

    /*=============== BUSINESS SIZES / SOLUTIONS ===============*/
    .business-sizes {
        padding-block: 35px;

        .business-sizes__container {
            padding-inline: 12px;

            .business-sizes__banner {
                padding: 50px 14px 32px 14px;
                border-radius: 18px;
            }

            .business-sizes__header {
                margin-bottom: 30px;

                .business-sizes__title {
                    font-size: 22px;
                    line-height: 1.38;
                    max-width: 270px;
                    margin-inline: auto;
                }

                .business-sizes__subtitle {
                    font-size: 13px;
                    margin-bottom: 18px;
                    line-height: 1.5;
                }

                .business-sizes__btn {
                    height: 44px;
                    padding: 6px 20px;
                    font-size: 14.5px;
                    border-radius: 8px;
                    width: 100%;
                    max-width: 240px;
                    justify-content: center;

                    i {
                        font-size: 16px;
                    }
                }
            }

            .business-sizes__grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .business-sizes__card {
                max-width: 295px;
                margin-inline: auto;
                padding: 20px 14px;
                border-radius: 16px;
                box-shadow: 0px 8px 24px 0px rgba(13, 54, 157, 0.5);

                /* Order for Mobile: Mall (2) -> Shops (1) -> Brands (3) */
                &:nth-child(2) {
                    order: 1;
                }

                &:nth-child(1) {
                    order: 2;
                }

                &:nth-child(3) {
                    order: 3;
                    grid-column: auto;
                }

                .business-sizes__img--shops {
                    width: 75px;
                    height: auto;
                }

                .business-sizes__img--mall {
                    width: 145px;
                    height: auto;
                }

                .business-sizes__img--brands {
                    width: 125px;
                    height: auto;
                }

                .business-sizes__card-title {
                    font-size: 17px;
                    margin-bottom: 8px;
                }

                .business-sizes__card-desc {
                    font-size: 12.5px;
                    line-height: 1.5;
                }
            }
        }
    }

    /*=============== FEATURES ===============*/
    .features {
        padding-block: 35px 60px;

        .features__container {
            .features__content {
                gap: 28px;

                .features__header {
                    .header__text {
                        .features__badge {
                            font-size: 19px;
                            padding: 2px 14px;
                        }

                        .features__subtitle {
                            font-size: 13px;
                            line-height: 1.5;
                        }
                    }
                }

                .features__grid {
                    grid-template-columns: 1fr;
                    gap: 18px;

                    .features__card {
                        flex-direction: column-reverse;
                        align-items: center;
                        text-align: center;
                        max-width: 295px;
                        width: 100%;
                        margin-inline: auto;
                        padding: 24px 16px 20px 16px;
                        border-radius: 16px;
                        gap: 14px;

                        /* Order: Invoices (2) -> Inventory (1) -> Reports (4) -> Customers (3) -> Alerts (5) -> Branches (6) */
                        &:nth-child(2) {
                            order: 1;
                        }

                        &:nth-child(1) {
                            order: 2;
                        }

                        &:nth-child(4) {
                            order: 3;
                        }

                        &:nth-child(3) {
                            order: 4;
                        }

                        &:nth-child(5) {
                            order: 5;
                        }

                        &:nth-child(6) {
                            order: 6;
                        }

                        .card__img {
                            width: 130px;
                            height: 105px;
                        }

                        .card__content {
                            align-items: center;
                            text-align: center;
                            max-width: 100%;
                            gap: 10px;

                            .card__tag {
                                font-size: 15.5px;
                                padding: 2px 8px;
                                border-radius: 5px;
                            }

                            .card__desc {
                                font-size: 13px;
                                line-height: 1.45;
                                text-align: center;
                            }

                            .card__action {
                                justify-content: center;

                                .card__play-btn {
                                    width: 32px;
                                    height: 32px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /*=============== VIDEO GUIDE ===============*/
    .video-guide {
        padding-block: 35px 50px;

        .video-guide__container {
            .video-guide__card {
                padding: 12px 12px 18px 12px;
                border-radius: 16px;
                border: 3.5px solid #E4E4E4;

                &::after {
                    top: 46px;
                    height: 8px;
                }
            }

            .video-guide__title {
                font-size: 16.5px;
                margin-bottom: 34px;
            }

            .video-guide__player {

                .video-guide__video,
                .video-guide__yt-cover {
                    height: 290px;
                    border-radius: 12px;
                }

                .video-guide__play-btn {
                    width: 44px;
                    height: 44px;
                    font-size: 15px;
                }
            }

            .video-guide__action {
                margin-top: 16px;

                .video-guide__btn {
                    padding: 6px 18px;
                    font-size: 14px;
                }
            }
        }
    }

    /*=============== PLAN BUILDER ===============*/
    .plan-builder {
        padding-block: 35px 50px;

        .plan-builder__container {
            .plan-builder__card {
                padding: 24px 14px 20px 14px;
                border-radius: 14px;
                max-width: 100%;
            }

            .plan-builder__header {
                margin-bottom: 20px;

                .plan-builder__title {
                    font-size: 18.5px;
                    margin-bottom: 6px;
                }

                .plan-builder__subtitle {
                    font-size: 12px;
                    line-height: 1.45;
                }
            }

            /* Stacked boxes for mobile as in reference Image 3 */
            .plan-builder__box {
                flex-direction: column;
                align-items: stretch;
                padding: 16px 14px;
                gap: 14px;
                border-radius: 12px;

                .plan-builder__box-info {
                    text-align: right;
                    gap: 6px;
                }

                .plan-builder__box-title {
                    font-size: 16px;
                }

                .plan-builder__box-desc {
                    font-size: 12.5px;
                }
            }

            .plan-builder__box--duration {
                .plan-builder__box-info {
                    align-items: center;
                    text-align: center;
                }

                .plan-builder__period-pills {
                    justify-content: center;
                    gap: 10px;
                    margin-top: 8px;
                    width: 100%;
                }

                .plan-builder__period-btn {
                    padding: 6.5px 14px;
                    font-size: 13px;
                    border-radius: 16px;
                }
            }

            .plan-builder__stepper {
                width: 100%;
                justify-content: space-between;
                gap: 12px;
                padding: 6px 8px;
                border-radius: 10px;

                .plan-builder__stepper-btn {
                    width: 36px;
                    height: 36px;
                    border-radius: 7px;
                    font-size: 12px;
                }

                .plan-builder__stepper-val {
                    font-size: 15px;
                    min-width: 40px;
                }
            }

            .plan-builder__subnotice {
                font-size: 11px;
                line-height: 1.4;
                text-align: center;
                margin-block: 10px 18px;
            }

            /* Stacked total row for mobile as in reference Image 3 */
            .plan-builder__total-row {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 8px;
                margin-block: 22px;

                .plan-builder__total-label {
                    font-size: 15px;
                }

                .plan-builder__total-price {
                    gap: 4px;
                }

                .plan-builder__price-num {
                    font-size: 25px;
                }

                .plan-builder__price-currency {
                    font-size: 20px;
                }
            }

            .plan-builder__cta-btn {
                height: 62px;
                min-height: 62px;
                padding: 0 16px;
                font-size: 16px;
                border-radius: 6px;
            }

            .plan-builder__notes {
                max-width: 100%;
                margin-top: 18px;
                padding-inline: 0;

                .plan-builder__notes-header {
                    font-size: 15px;
                    gap: 6px;
                    margin-bottom: 8px;
                }

                .plan-builder__notes-list {
                    gap: 8px;

                    li {
                        font-size: 12px;
                        line-height: 1.4;
                        gap: 6px;

                        &::before {
                            width: 8px;
                            height: 8px;
                        }
                    }
                }
            }
        }
    }

    /*=============== FAQ SECTION ===============*/
    .faq {
        padding-block: 35px 50px;

        .faq__header {
            margin-bottom: 22px;

            .faq__title {
                font-size: 19px;
                line-height: 1.4;
                max-width: 250px;
                margin-inline: auto;
            }
        }

        .faq__bubble-decor--left {
            top: -44px;
            left: 4px;
            right: auto;

            img {
                width: 54px;
            }
        }

        .faq__bubble-decor--watermark {
            display: none;
        }

        .faq__accordion {
            gap: 10px;
        }

        .faq__item {
            border-radius: 6px;
            border-width: 1.5px;

            .faq__header-btn {
                padding: 10.5px 12px;

                .faq__question {
                    font-size: 13px;
                    line-height: 1.4;
                }

                .faq__arrow {
                    font-size: 11px;
                    margin-right: 6px;
                }
            }

            .faq__content {
                .faq__answer {
                    padding: 4px 12px 14px 12px;

                    p {
                        font-size: 12px;
                        line-height: 1.4;
                    }
                }
            }
        }
    }

    /*=============== TRIAL CTA ===============*/
    .trial-cta {
        padding-block: 65px 40px;

        .trial-cta__card {
            flex-direction: column-reverse;
            align-items: center;
            text-align: center;
            padding: 0 16px 24px 16px;
            border-radius: 16px;
            max-width: 340px;
            margin-inline: auto;
        }

        .trial-cta__visual {
            position: relative;
            top: -36px;
            left: auto;
            width: 210px;
            margin: 0 auto -20px auto;

            .trial-cta__img {
                max-height: 210px;
            }
        }

        .trial-cta__content {
            max-width: 100%;
            text-align: center;

            .trial-cta__title {
                font-size: 19px;
                line-height: 1.35;
                margin-bottom: 8px;
                max-width: 240px;
                margin-inline: auto;
            }

            .trial-cta__desc {
                font-size: 12.5px;
                line-height: 1.5;
                margin-bottom: 18px;
                max-width: 270px;
                margin-inline: auto;
            }

            .trial-cta__action {
                display: flex;
                justify-content: center;

                .trial-cta__btn {
                    font-size: 15.5px;
                    padding: 10px 24px;
                    max-width: 100%;
                    width: 100%;
                    border-radius: 6px;
                }
            }
        }
    }

    /*=============== VIDEO MODAL ===============*/
    .video-modal {
        padding: 10px;

        .video-modal__container {
            max-width: 100%;
        }

        .video-modal__dialog {
            border-radius: 14px;
        }

        .video-modal__header {
            padding: 10px 14px;

            .video-modal__title-box {
                gap: 8px;
            }

            .video-modal__badge {
                font-size: 10px;
                padding: 2.5px 10px;
            }

            .video-modal__title {
                font-size: 13.5px;
            }

            .video-modal__close {
                width: 30px;
                height: 30px;
                font-size: 13px;
            }
        }

        .video-modal__player {
            .video-guide__video {
                max-height: 48vh;
                height: auto;
                aspect-ratio: 16 / 9;
            }

            .video-guide__play-btn {
                width: 44px;
                height: 44px;
                font-size: 15px;
            }

            .video-guide__controls {
                padding: 18px 10px 8px 10px;
                gap: 6px;

                .video-progress {
                    height: 4px;
                }

                .video-control-btn {
                    width: 28px;
                    height: 28px;
                    font-size: 12px;
                }

                .video-time {
                    font-size: 11px;
                }
            }
        }
    }

    /* Image Lightbox Mobile */
    .image-lightbox {
        padding: 14px;

        .image-lightbox__close {
            top: -12px;
            left: -10px;
            width: 38px;
            height: 38px;
            font-size: 16px;
        }

        .image-lightbox__title {
            font-size: 13px;
            padding: 5px 14px;
        }

        .image-lightbox__content img {
            max-height: 75vh;
            border-radius: 12px;
        }
    }
}