@import './AE.css';

:root {
    --white: #FFFFFF;
    --mainColor: #39874D;
    --BGLight: #fcfffc;
    --dark: #010000;
    --gray: #5B5F62;
    --BGYellowLight: #dcfce4;
    --ts: 300ms ease-in-out;
    --tl: 500ms ease-in-out;

}

@font-face {
    font-family: 'Sen';
    src: url('../webfonts/Sen-Regular.ttf');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Sen';
    src: url('../webfonts/Sen-Bold.ttf');
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../webfonts/Tajawal-Regular.ttf');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../webfonts/Tajawal-Medium.ttf');
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../webfonts/Tajawal-Bold.ttf');
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../webfonts/Tajawal-ExtraBold.ttf');
    font-display: swap;
    font-weight: 800;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../webfonts/Tajawal-Black.ttf');
    font-display: swap;
    font-weight: 900;
}

* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Tajawal', 'Sen', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--BGLight);
    overflow-x: hidden;
}

/* English pages use the Latin Sen face first; Arabic keeps Tajawal. */
html[lang="en"] body {
    font-family: 'Sen', 'Tajawal', sans-serif;
}

menu {
    list-style: none;
    padding-inline-start: 0;
}

figure {
    margin-block: 0;
    margin-inline: 0;
}

a {
    color: var(--gray);
    text-transform: capitalize;
}

.btn-rounded {
    border-radius: 100px;
    background-color: var(--mainColor);
    transition: var(--ts);
    position: relative;
    overflow: hidden;
    z-index: 2;
    padding: 12px 20px;
    color: var(--white);
    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-color: var(--dark);
        transition: var(--ts);
        z-index: -1;
    }

    span {
        display: inline-block;
    }

    a, i, span {
        transition: var(--ts);
        color: var(--white);

    }

    a, span {
        /* padding: 12px 20px; */
    }

    &.btn-icon {
        i {
            /* padding: 12px 20px; */
            scale: 1.3;
        }
    }

    &:hover, &.active {
        background-color: var(--dark);

        a, i, span {
            color: var(--white);
        }
    }

    &.isBorder {
        border: 1px solid var(--mainColor);
        background-color: transparent;

        a, i, span {
            color: var(--mainColor);
        }

        &::before {
            background-color: var(--mainColor);
        }

        &:hover, &.active {
            color: var(--white);
            a, i, span {
                color: var(--white);
            }
        }
    }

    &:hover, &.active, &.isBorder:hover {
        &::before {
            left: auto;
            right: 0;
            width: 100%;
        }

    }

    &:hover {
        scale: .95;
        color: var(--white);
        a, i, span {
            color: var(--white);
        }
    }

    &.active {
        scale: 1;
        cursor: text;

    }
}

.mainHeading {
    width: min(700px, 100%);
    margin-inline: auto;


    span {
        color: var(--mainColor);
    }

    h2 {
        font-size: clamp(2.5rem, 2.143rem + 0.952vw, 3rem);
        text-wrap-style: balance;
        line-height: 1.3;
        margin-bottom: .5rem;
    }

    p {
        color: var(--gray);
        font-size: 1.1rem;
        line-height: 1.6;
    }

    &.center {
        text-align: center;

    }
}

main {
    position: relative;
    z-index: 1;
}


h1, h2, h3, h4 {
    color: var(--dark);
}

/* anchored sections: keep headings clear of the header when navigating */
section[id] {
    scroll-margin-top: 32px;
}

/* header */
header {
    background-color: var(--BGLight);

    .list {
        background-color: transparent;
        padding-inline: 0;
        padding-block-end: 0;

        @media(min-width:992px) {
            display: flex;
            padding: 0;
        }

        @media(max-width:991px) {
            &#mobileList {
                display: none;
                background-color: var(--BGYellowLight);
                font-size: 1.2rem;
                translate: -280px 0;
                opacity: 0;
                scale: .8;
                transition: translate 500ms ease-out, opacity 500ms ease-in-out, display allow-discrete 500ms ease-out, overlay allow-discrete 500ms ease-out, scale 500ms ease-in-out;

                li {
                    position: relative;

                    a {
                        padding-inline-start: 30px;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        bottom: -20px;
                        left: 50%;
                        transform: translateX(-50%);
                        opacity: .2;
                        width: 90%;
                        height: 1px;
                        background-color: var(--gray);
                    }

                    &.mobileClose {
                        display: flex;
                        justify-content: flex-end;

                        &::before {
                            display: none;
                        }
                    }
                }

                &::backdrop {
                    background-color: var(--dark);
                    opacity: 0;
                    transition: var(--tl);

                }

                &:popover-open {
                    display: flex;
                    translate: 0 0;
                    opacity: 1;
                    scale: 1;

                    &::backdrop {
                        opacity: .3;
                    }
                }

            }
        }
    }

    .langBtn {
        anchor-name: --langBtn;
    }

    #langList {
        position-anchor: --langBtn;
        top: calc(anchor(bottom) + 5px);
        inset-inline-end: calc(anchor(start) + 10px);
        inset-inline-start: auto;
        padding: 16px;
        background-color: var(--BGYellowLight);
        border-radius: 6px;
        font-size: 1.05rem;
        width: min(100%, 100px);
        opacity: 0;
        scale: .5;
        transition: opacity 500ms ease-in-out, display allow-discrete 500ms ease-out, scale 500ms ease-in-out, overlay allow-discrete 500ms ease-out;

        &:popover-open {
            opacity: 1;
            scale: 1;
        }

        a {
            transition: var(--ts);

            &:hover {
                color: var(--mainColor);
            }
        }
    }
}

/* nav links */
.nav-link {
    position: relative;
    transition: var(--ts);

    &:hover {
        color: var(--mainColor);
    }

    &.active {
        color: var(--mainColor);

        &::after {
            content: '';
            position: absolute;
            inset-inline: 0;
            bottom: -6px;
            height: 2px;
            border-radius: 2px;
            background-color: var(--mainColor);
        }
    }
}

/* English LTR: the mobile drawer docks to the right edge and slides in
   from the right instead of the left. Docking applies in both states;
   the closed-state translate stays off-screen via :not(:popover-open). */
@media (max-width: 991px) {
    html[lang="en"] header .list#mobileList {
        left: auto;
        right: 0;
    }

    html[lang="en"] header .list#mobileList:not(:popover-open) {
        translate: 280px 0;
    }
}

/* Starting state for the drawer and lang dropdown when they open. */
@starting-style {
    header #mobileList:popover-open {
        translate: -240px 0;
        opacity: 0;
        scale: .8;

        &::backdrop {
            opacity: 0;
        }
    }

    /* English LTR: the mobile drawer slides in from the right edge. */
    html[lang="en"] header #mobileList:popover-open {
        translate: 240px 0;
    }

    header #langList:popover-open {
        opacity: 0;
        scale: .5;
    }
}

/* hero */
.hero {
    position: relative;
    padding-block: 72px 40px;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -5%, rgba(57, 135, 77, 0.12), rgba(255, 255, 255, 0) 60%);

    /* decorative blurred blob */
    &::before {
        content: '';
        position: absolute;
        top: -180px;
        inset-inline-start: -140px;
        width: 540px;
        height: 540px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(57, 135, 77, 0.28), rgba(57, 135, 77, 0) 70%);
        filter: blur(70px);
        pointer-events: none;
    }

    /* light grid pattern */
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(1, 0, 0, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(1, 0, 0, 0.035) 1px, transparent 1px);
        background-size: 46px 46px;
        -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 20%, transparent 75%);
        mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 20%, transparent 75%);
        pointer-events: none;
    }

    .heroInner,
    .heroPreview {
        position: relative;
        z-index: 1;
    }

    /* 1. announcement badge */
    .heroBadge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border: 1px solid rgba(57, 135, 77, 0.22);
        border-radius: 999px;
        background-color: var(--BGYellowLight);
        color: var(--mainColor);
        font-weight: 700;
        font-size: .95rem;

        i {
            font-size: 1rem;
        }
    }

    /* 2. headline */
    .heroTitle {
        margin: 26px auto 0;
        max-width: 22ch;
        font-size: clamp(2.5rem, 1.55rem + 3.2vw, 4.1rem);
        font-weight: 900;
        line-height: 1.18;
        text-wrap: balance;

        .spanColor {
            color: var(--mainColor);
        }
    }

    /* 3. paragraph */
    .heroDesc {
        margin: 20px auto 0;
        max-width: 660px;
        font-size: 1.15rem;
        line-height: 1.85;
        color: var(--gray);
    }

    /* 4. actions */
    .heroActions {
        display: flex;
        justify-content: center;
        /* flex-wrap: wrap; */
        gap: 14px;
        margin-top: 34px;

        .btn-rounded {
            min-width: 210px;
            padding: 16px 28px;
            font-size: 1.05rem;
            font-weight: 700;
            
        }
        .isBorder{
                color: var(--mainColor);
                &:hover{
                    color: var(--white);
                }
            }

        @media (max-width:580px){
           .btn-rounded{
            min-width: 120px;
            padding: 12px 20px;
            font-size: .8rem;
            font-weight: 600;
           } 
        }
    }

    /* 5. trust indicators */
    .heroTrust {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px 28px;
        margin: 30px 0 0;
        padding: 0;
        list-style: none;

        li {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--gray);
            font-size: .95rem;
            font-weight: 500;

            i {
                width: 22px;
                height: 22px;
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background-color: var(--BGYellowLight);
                color: var(--mainColor);
                font-size: .66rem;
            }
        }
    }

    /* 6. product preview */
    .heroPreview {
        max-width: 980px;
        margin: 64px auto 0;

        &::before {
            content: '';
            position: absolute;
            inset: 10% -10% -32% -10%;
            background: radial-gradient(ellipse 55% 60% at 50% 40%, rgba(57, 135, 77, 0.30), rgba(57, 135, 77, 0) 72%);
            filter: blur(50px);
            pointer-events: none;
        }
    }

    .browser {
        position: relative;
        z-index: 1;
        background-color: var(--white);
        border: 1px solid rgba(1, 0, 0, 0.08);
        border-radius: 18px;
        overflow: hidden;
        box-shadow:
            0 60px 90px -28px rgba(57, 135, 77, 0.35),
            0 18px 40px -18px rgba(1, 0, 0, 0.14);
        animation: heroFloat 7s ease-in-out infinite;
        text-align: start;
    }

    .browserChrome {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(1, 0, 0, 0.07);

        .dots {
            display: flex;
            gap: 6px;

            i {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: var(--BGYellowLight);
                border: 1px solid rgba(1, 0, 0, 0.08);

                &:nth-child(1) {
                    background-color: #ff5f57;
                    border: 0;
                }

                &:nth-child(2) {
                    background-color: #febc2e;
                    border: 0;
                }

                &:nth-child(3) {
                    background-color: #28c840;
                    border: 0;
                }
            }
        }

        .urlBar {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 999px;
            background-color: var(--BGYellowLight);
            color: var(--gray);
            font-size: .8rem;
            font-weight: 500;
            direction: ltr;

            i {
                color: var(--mainColor);
                font-size: .72rem;
            }
        }

        .browserIcon {
            color: var(--gray);
            font-size: .95rem;
        }
    }

    .dash {
        display: grid;
        grid-template-columns: 208px 1fr;
        min-height: 440px;
        background-color: var(--BGLight);

        .dashSide {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 18px 14px;
            background-color: var(--white);
            border-inline-end: 1px solid rgba(1, 0, 0, 0.06);

            .dashLogo {
                padding: 2px 8px 16px;

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

            nav {
                display: flex;
                flex-direction: column;
                gap: 4px;

                a {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 10px 12px;
                    border-radius: 10px;
                    color: var(--gray);
                    font-size: .85rem;
                    font-weight: 500;
                    transition: var(--ts);

                    i {
                        width: 20px;
                        text-align: center;
                        font-size: .95rem;
                    }

                    &:hover,
                    &.active {
                        background-color: var(--BGYellowLight);
                        color: var(--mainColor);
                        font-weight: 700;
                    }
                }
            }
        }

        .dashMain {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 20px;
            min-width: 0;
        }

        .dashHeader {
            display: flex;
            align-items: center;
            gap: 12px;

            h4 {
                margin: 0;
                font-size: 1.05rem;
            }

            p {
                margin: 2px 0 0;
                font-size: .78rem;
                color: var(--gray);
            }

            .dashSearch {
                margin-inline-start: auto;
                width: 36px;
                height: 36px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background-color: var(--BGYellowLight);
                color: var(--mainColor);
                font-size: .85rem;
            }

            .dashAvatar {
                width: 36px;
                height: 36px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background-color: var(--mainColor);
                color: var(--white);
                font-weight: 800;
                font-size: .9rem;
            }
        }

        .dashStats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;

            .stat {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 14px;
                min-width: 0;
                background-color: var(--white);
                border: 1px solid rgba(1, 0, 0, 0.06);
                border-radius: 12px;

                .sIcon {
                    width: 38px;
                    height: 38px;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 10px;
                    background-color: var(--BGYellowLight);
                    color: var(--mainColor);
                    font-size: 1rem;
                }

                b {
                    display: block;
                    font-size: 1.15rem;
                    line-height: 1.1;
                    color: var(--dark);
                }

                span {
                    font-size: .7rem;
                    color: var(--gray);
                }

                em {
                    margin-inline-start: auto;
                    padding: 3px 9px;
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    border-radius: 999px;
                    background-color: var(--BGYellowLight);
                    color: var(--mainColor);
                    font-size: .7rem;
                    font-weight: 700;
                    font-style: normal;
                    white-space: nowrap;
                }
            }
        }

        .dashRow {
            display: grid;
            grid-template-columns: 1fr 230px;
            gap: 12px;
            align-items: stretch;
        }

        .dashTable {
            padding: 6px 14px 8px;
            min-width: 0;
            overflow: hidden;
            background-color: var(--white);
            border: 1px solid rgba(1, 0, 0, 0.06);
            border-radius: 12px;

            .tHead,
            .tRow {
                display: grid;
                grid-template-columns: 1.5fr 1.2fr .8fr;
                gap: 12px;
                align-items: center;
            }

            .tHead {
                padding: 10px 8px;
                font-size: .72rem;
                font-weight: 700;
                color: var(--gray);
            }

            .tRow {
                padding: 10px 8px;
                border-top: 1px solid rgba(1, 0, 0, 0.05);

                > * {
                    min-width: 0;
                }

                .trip {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    min-width: 0;

                    .tAvatar {
                        width: 34px;
                        height: 34px;
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 10px;
                        background-color: var(--BGYellowLight);
                        color: var(--mainColor);
                        font-size: .85rem;
                        font-weight: 800;
                    }

                    b {
                        display: block;
                        font-size: .85rem;
                        color: var(--dark);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    small {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: .7rem;
                        color: var(--gray);

                        i {
                            color: var(--mainColor);
                            font-size: .6rem;
                        }
                    }
                }

                .progress {
                    .bar {
                        height: 6px;
                        margin-bottom: 5px;
                        border-radius: 999px;
                        background-color: var(--BGYellowLight);
                        overflow: hidden;

                        i {
                            display: block;
                            height: 100%;
                            border-radius: 999px;
                            background-color: var(--mainColor);
                        }
                    }

                    span {
                        font-size: .68rem;
                        color: var(--gray);
                    }
                }

                .status {
                    justify-self: start;
                    padding: 4px 12px;
                    border-radius: 999px;
                    font-size: .7rem;
                    font-weight: 700;
                    background-color: var(--BGYellowLight);
                    color: var(--mainColor);
                    white-space: nowrap;

                    &.muted {
                        background-color: transparent;
                        border: 1px solid rgba(1, 0, 0, 0.14);
                        color: var(--gray);
                    }
                }
            }
        }

        .dashChart {
            padding: 16px;
            background-color: var(--white);
            border: 1px solid rgba(1, 0, 0, 0.06);
            border-radius: 12px;

            h4 {
                margin: 0;
                font-size: .9rem;
            }

            p {
                margin: 2px 0 14px;
                font-size: .7rem;
                color: var(--gray);
            }

            .bars {
                display: flex;
                align-items: flex-end;
                gap: 7px;
                height: 110px;

                i {
                    flex: 1;
                    border-radius: 6px 6px 0 0;
                    background-color: var(--BGYellowLight);

                    &.on {
                        background-color: var(--mainColor);
                    }
                }
            }

            .legend {
                display: flex;
                flex-wrap: wrap;
                gap: 8px 16px;
                margin-top: 12px;
                font-size: .68rem;
                color: var(--gray);

                span {
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;

                    i {
                        width: 8px;
                        height: 8px;
                        border-radius: 2px;
                        background-color: var(--mainColor);
                    }

                    &.alt i {
                        background-color: var(--BGYellowLight);
                        border: 1px solid rgba(57, 135, 77, 0.25);
                    }
                }
            }
        }
    }

    /* entrance */
    .heroBadge,
    .heroTitle,
    .heroDesc,
    .heroActions,
    .heroTrust,
    .heroPreview {
        animation: heroRise .9s cubic-bezier(.22, 1, .36, 1) both;
    }

    .heroBadge {
        animation-delay: .15s;
    }

    .heroTitle {
        animation-delay: .3s;
    }

    .heroDesc {
        animation-delay: .45s;
    }

    .heroActions {
        animation-delay: .6s;
    }

    .heroTrust {
        animation-delay: .75s;
    }

    .heroPreview {
        animation-delay: .9s;
    }

    /* responsive */
    @media(max-width:1199px) {
        .dash {
            grid-template-columns: 188px 1fr;
        }

        .dash .dashRow {
            grid-template-columns: 1fr 210px;
        }

        .dash .dashStats {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media(max-width:991px) {
        padding-block: 60px 24px;

        .dash {
            grid-template-columns: 170px 1fr;
            min-height: 0;
        }

        .dash .dashRow {
            grid-template-columns: 1fr;
        }

        .dash .dashStats {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media(max-width:767px) {
        padding-block: 52px 20px;

        .heroDesc {
            font-size: 1.05rem;
        }

        .heroPreview {
            margin-top: 44px;
        }

        .dash {
            grid-template-columns: 1fr;

            .dashSide {
                display: none;
            }

            .dashMain {
                padding: 16px;
            }

            .dashTable .tHead {
                display: none;
            }

            .dashTable .tRow {
                grid-template-columns: 1.3fr .8fr;
            }
        }
    }

    @media(max-width:480px) {
        .heroActions .btn-rounded {
            width: 100%;
            min-width: 0;
        }

        .dash .dashStats {
            gap: 8px;
        }

        .dash .dashTable {
            padding-inline: 10px;

            .tRow {
                grid-template-columns: 1fr auto;
                gap: 8px;

                .progress {
                    display: none;
                }
            }
        }

        .dash .dashChart .bars {
            height: 90px;
        }
    }
}

/*  */
.why {
    padding-block: 80px;

    h2 {
        font-size: clamp(2.5rem, 2.143rem + 0.952vw, 3rem);
    }

    .imgs {
        @media(max-width:991px) {
            grid-row: 1;
            margin-bottom: 70px;
        }
    }
}

/*  */
.Facilities {
    background-color: var(--BGYellowLight);
    padding-block: 80px;

    .mainHeading {
        margin-bottom: 48px;
    }
}

/*  */
.about {
    padding-block: 80px;

    .gap-manuel {
        gap: 4rem;
    }

    /* ---- product showcase ---- */
    .aboutShowcase {
        position: relative;
        padding: 46px 8px 40px;

        .showcaseGlow {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 72% 62% at 50% 46%, rgba(57, 135, 77, 0.3), rgba(57, 135, 77, 0) 70%);
            filter: blur(48px);
            pointer-events: none;
        }
    }

    .browserMock {
        position: relative;
        z-index: 1;
        max-width: 560px;
        margin-inline: auto;
        background-color: var(--white);
        border: 1px solid rgba(1, 0, 0, 0.08);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 60px 90px -28px rgba(57, 135, 77, 0.32), 0 18px 40px -18px rgba(1, 0, 0, 0.14);
        text-align: start;

        .browserMockChrome {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(1, 0, 0, 0.07);

            .dots {
                display: flex;
                gap: 6px;

                i {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: var(--BGYellowLight);
                    border: 1px solid rgba(1, 0, 0, 0.08);

                    &:nth-child(1) {
                        background-color: #ff5f57;
                        border: 0;
                    }

                    &:nth-child(2) {
                        background-color: #febc2e;
                        border: 0;
                    }

                    &:nth-child(3) {
                        background-color: #28c840;
                        border: 0;
                    }
                }
            }

            .urlBar {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 6px 14px;
                border-radius: 999px;
                background-color: var(--BGYellowLight);
                color: var(--gray);
                font-size: .8rem;
                font-weight: 500;
                direction: ltr;

                i {
                    color: var(--mainColor);
                    font-size: .72rem;
                }
            }

            .browserIcon {
                color: var(--gray);
                font-size: .95rem;
            }
        }

        .mockDash {
            display: grid;
            grid-template-columns: 168px 1fr;
            min-height: 340px;
            background-color: var(--BGLight);

            .mockSide {
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding: 16px 12px;
                background-color: var(--white);
                border-inline-end: 1px solid rgba(1, 0, 0, 0.06);

                .mockLogo {
                    padding: 0 8px 14px;

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

                nav {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    a {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 9px 11px;
                        border-radius: 10px;
                        color: var(--gray);
                        font-size: .82rem;
                        font-weight: 500;
                        transition: var(--ts);

                        i {
                            width: 20px;
                            text-align: center;
                            font-size: .92rem;
                        }

                        &:hover,
                        &.active {
                            background-color: var(--BGYellowLight);
                            color: var(--mainColor);
                            font-weight: 700;
                        }
                    }
                }
            }

            .mockMain {
                display: flex;
                flex-direction: column;
                gap: 14px;
                padding: 18px;
                min-width: 0;

                .mockHeader {
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    h4 {
                        margin: 0;
                        font-size: 1.02rem;
                    }

                    p {
                        margin: 2px 0 0;
                        font-size: .76rem;
                        color: var(--gray);
                    }

                    .mockAvatar {
                        margin-inline-start: auto;
                        width: 34px;
                        height: 34px;
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        background-color: var(--mainColor);
                        color: var(--white);
                        font-weight: 800;
                        font-size: .9rem;
                    }
                }

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

                    .mockStat {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 12px;
                        min-width: 0;
                        background-color: var(--white);
                        border: 1px solid rgba(1, 0, 0, 0.06);
                        border-radius: 14px;

                        .sIcon {
                            width: 38px;
                            height: 38px;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 12px;
                            background-color: var(--BGYellowLight);
                            color: var(--mainColor);
                            font-size: .95rem;
                        }

                        div {
                            min-width: 0;

                            b {
                                display: block;
                                font-size: .98rem;
                                line-height: 1.2;
                                color: var(--dark);
                                white-space: nowrap;
                            }

                            span {
                                font-size: .7rem;
                                color: var(--gray);
                                white-space: nowrap;
                            }
                        }
                    }
                }

                .mockList {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    .mockTrip {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 12px 14px;
                        background-color: var(--white);
                        border: 1px solid rgba(1, 0, 0, 0.06);
                        border-radius: 14px;

                        .tAvatar {
                            width: 34px;
                            height: 34px;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            background-color: var(--BGYellowLight);
                            color: var(--mainColor);
                            font-weight: 800;
                        }

                        .tripContent,
                        > div {
                            min-width: 0;

                            b {
                                display: block;
                                font-size: .86rem;
                                color: var(--dark);
                                white-space: nowrap;
                            }

                            small {
                                display: flex;
                                align-items: center;
                                gap: 5px;
                                margin-top: 2px;
                                font-size: .7rem;
                                color: var(--gray);
                                white-space: nowrap;

                                i {
                                    color: var(--mainColor);
                                    font-size: .68rem;
                                }
                            }
                        }

                        .status {
                            margin-inline-start: auto;
                            flex-shrink: 0;
                            padding: 4px 10px;
                            border-radius: 999px;
                            background-color: var(--BGYellowLight);
                            color: var(--mainColor);
                            font-size: .68rem;
                            font-weight: 700;

                            &.muted {
                                background-color: rgba(1, 0, 0, 0.05);
                                color: var(--gray);
                            }
                        }
                    }
                }
            }
        }
    }

    .phoneMock {
        position: absolute;
        z-index: 2;
        inset-inline-end: -18px;
        bottom: 10px;
        width: 132px;
        padding: 5px;
        border-radius: 22px;
        background-color: var(--dark);
        box-shadow: 0 30px 50px -22px rgba(1, 0, 0, 0.45);
        animation: heroFloat 8s ease-in-out infinite;

        .phoneScreen {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 12px 10px 14px;
            border-radius: 17px;
            background: linear-gradient(180deg, var(--white), var(--BGYellowLight));

            .phoneHeader {
                display: flex;
                align-items: center;
                gap: 6px;
                width: 100%;

                .phoneLogo img {
                    width: 16px;
                    height: auto;
                }

                b {
                    font-size: .68rem;
                    color: var(--dark);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .phoneQr {
                width: 74px;
                height: 74px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                background-color: var(--white);
                border: 1px solid rgba(1, 0, 0, 0.06);

                i {
                    font-size: 2.6rem;
                    color: var(--dark);
                }
            }

            p {
                margin: 0;
                font-size: .62rem;
                color: var(--mainColor);
                font-weight: 700;
            }
        }
    }

    .floatCard {
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 20px 40px -20px rgba(1, 0, 0, 0.28);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        > i {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            background-color: var(--BGYellowLight);
            color: var(--mainColor);
            font-size: 1rem;
        }

        div {
            b {
                display: block;
                font-size: .82rem;
                color: var(--dark);
                white-space: nowrap;
            }

            small {
                font-size: .66rem;
                color: var(--gray);
                white-space: nowrap;
            }
        }

        &.fcQr {
            top: 4px;
            inset-inline-start: -14px;
            animation: heroFloat 7s ease-in-out infinite;
        }

        &.fcWa {
            top: calc(50% - 20px);
            inset-inline-end: -10px;
            transform: translateY(-50%);
            animation: heroFloat 6.5s ease-in-out infinite;

            > i {
                background-color: #e7f7ec;
                color: #128c7e;
            }
        }
    }

    /* ---- content column ---- */
    .aboutContent {
        .featureChips {
            .featureChip {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                padding: 8px 15px;
                border: 1px solid rgba(57, 135, 77, 0.16);
                border-radius: 999px;
                background-color: var(--white);
                color: var(--gray);
                font-size: .88rem;
                font-weight: 600;
                transition: var(--ts);

                i {
                    width: 19px;
                    height: 19px;
                    flex-shrink: 0;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background-color: var(--BGYellowLight);
                    color: var(--mainColor);
                    font-size: .6rem;
                }
            }
        }

        .aboutStats {
            .aboutStat {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                padding: 22px 14px;
                background-color: var(--white);
                border: 1px solid rgba(1, 0, 0, 0.08);
                border-radius: 18px;
                text-align: center;
                transition: var(--ts);

                b {
                    font-size: clamp(1.7rem, 1.2rem + 1vw, 2.1rem);
                    font-weight: 900;
                    color: var(--mainColor);
                    line-height: 1.1;
                }

                span {
                    font-size: .88rem;
                    color: var(--gray);
                }
            }
        }
    }
}

/*  */
.pricing {
    padding-block: 80px;

    .mainHeading {
        margin-bottom: 48px;
    }

    .priceCard {
        position: relative;
        background-color: var(--white);
        border: 1px solid rgba(0, 0, 0, 0.117);
        border-radius: 12px;
        padding: 32px 24px 28px;
        min-height: 540px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: var(--ts);

        &:hover {
            translate: 0 -8px;
            box-shadow: 10px 40px 50px rgba(215, 214, 214, 0.48);
        }

        .cardHead {
            h3 {
                margin-bottom: 6px;
            }

            .trips {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                color: var(--mainColor);
                font-weight: 700;

                i {
                    font-size: .95rem;
                }
            }
        }

        .desc {
            color: var(--gray);
            line-height: 1.6;
            margin-block: 16px;
        }

        .priceBox {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 8px;
            margin-bottom: 8px;

            .amount {
                color: var(--dark);
                line-height: 1;
            }

            .currency {
                color: var(--gray);
            }
        }

        .badge {
            background-color: var(--BGYellowLight);
            color: var(--mainColor);
            border-radius: 9999px;
            padding: 4px 12px;
            font-weight: 700;
        }

        .features {
            width: 100%;
            margin-block: 24px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            text-align: start;

            li {
                display: flex;
                align-items: center;
                gap: 10px;
                color: var(--gray);

                i {
                    flex-shrink: 0;
                    width: 22px;
                    height: 22px;
                    border-radius: 50%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-size: .7rem;
                    background-color: var(--BGYellowLight);
                    color: var(--mainColor);
                }
            }
        }

        .btn-rounded {
            padding: 12px 20px;
            color: var(--white);
            margin-top: auto;
        }
    }

    .priceCard.featured {
        background-color: var(--mainColor);
        border-color: var(--mainColor);
        box-shadow: 10px 40px 50px rgba(57, 135, 77, 0.35);

        .cardHead .trips,
        .desc,
        .amount,
        .currency,
        .features li {
            color: var(--white);
        }

        .features li i {
            background-color: var(--white);
            color: var(--mainColor);
        }

        .badge {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--white);
            color: var(--dark);
        }

        .btn-rounded {
            background-color: var(--white);
            color: var(--mainColor);
            padding: 12px 20px;
            &::before {
                background-color: var(--dark);
            }

            i {
                color: var(--mainColor);
            }

            &:hover {
                background-color: var(--dark);
                color: var(--white);

                i, span {
                    color: var(--white);
                }
            }
        }

        @media(min-width:768px) {
            translate: 0 -16px;

            &:hover {
                translate: 0 -24px;
            }
        }
    }

    .extraTrips {
        margin-top: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        color: var(--gray);

        i {
            color: var(--mainColor);
            font-size: 1.3rem;
        }

        strong {
            color: var(--mainColor);
        }
    }
}

/* pricing — premium segmented category switcher */
.pricingSwitchWrap {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}

/* The scroll wrapper is intentionally neutral: it only constrains the track
   when the three tabs outgrow a small phone and becomes a hidden-scrollbar
   scroller. The pill lives inside the track so it scrolls together with the
   tabs and always stays glued to the active one. */
.pricingSwitch {
    --tab-count: 3;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.pricingSwitchTrack {
    position: relative;
    /* Grid columns are auto-equal (1fr) and the track hugs its content, so the
       three tabs share the same width regardless of label length. The pill is
       absolutely positioned, so it never creates an extra column. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: max-content;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin-inline: auto;
    background-color: var(--BGLight);
    border: 1px solid rgba(1, 0, 0, 0.08);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(1, 0, 0, 0.04), 0 10px 30px -22px rgba(1, 0, 0, 0.18);
}

.pricingSwitchPill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    inset-inline-start: 4px;
    width: calc(100% / var(--tab-count, 3) - 4px);
    border-radius: calc(999px - 4px);
    background-color: var(--mainColor);
    box-shadow: 0 12px 26px -14px rgba(57, 135, 77, 0.55);
    transform: translateX(var(--ind-x, 0px));
    transition: transform var(--ts), width var(--ts);
    z-index: 0;
    pointer-events: none;
}

.pricingSwitch-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 170px;
    padding: 12px 22px;
    border: 0;
    border-radius: calc(999px - 4px);
    background: transparent;
    color: var(--gray);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ts), background-color var(--ts);

    i {
        font-size: 1.05rem;
    }

    &:hover:not(.is-active) {
        color: var(--mainColor);
        background-color: rgba(57, 135, 77, 0.08);
    }

    &:focus-visible {
        outline: 3px solid rgba(57, 135, 77, 0.35);
        outline-offset: 3px;
    }

    &.is-active {
        color: var(--white);
    }
}

/* ---- mobile pricing tabs: vertical stack ---- */
/* On phones the three horizontal tabs outgrow the viewport. Switch to a
   clean vertical category selector: full-width stacked buttons, active state
   via direct background (pill is hidden), comfortable 48px+ touch targets. */
@media(max-width:767px) {
    .pricingSwitchWrap {
        padding-inline: 8px;
        justify-content: stretch;
    }

    .pricingSwitch {
        width: 100%;
        overflow-x: visible;
    }

    .pricingSwitchTrack {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
        padding: 6px;
        border-radius: 16px;
    }

    .pricingSwitchPill {
        display: none;
    }

    .pricingSwitch-btn {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        padding: 14px 18px;
        border-radius: 12px;
        font-size: .92rem;

        &.is-active {
            background-color: var(--mainColor);
            color: var(--white);
            box-shadow: 0 4px 16px -4px rgba(57, 135, 77, 0.35);
        }
    }
}

#pricingGrid {
    align-items: stretch !important;
}

/* grid layout modifiers for fewer-than-3 plans — keep the cards balanced */
#pricingGrid.pricingGrid-center {
    margin-inline: auto;
}

#pricingGrid.pricingGrid-narrow {
    max-width: 480px;
}

#pricingGrid.pricingGrid-wide {
    max-width: 780px;
}

/* Pricing Grid Horizontal Scroll Modifier */
.pricingGrid-wrapper {
    position: relative;
}
.pricingGrid-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--mainColor);
    border: 1px solid rgba(0, 0, 0, 0.117);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 10;
    cursor: pointer;
    transition: var(--ts);
    opacity: 0;
    visibility: hidden;
}
.pricingGrid-wrapper:hover .pricingGrid-nav.is-visible {
    opacity: 1;
    visibility: visible;
}
.pricingGrid-nav:hover {
    background-color: var(--mainColor);
    color: var(--white);
    border-color: var(--mainColor);
}
.pricingGrid-nav.pricingGrid-prev {
    right: -22px; /* RTL, so right is "previous" */
}
.pricingGrid-nav.pricingGrid-next {
    left: -22px;
}
@media (max-width: 767px) {
    .pricingGrid-nav {
        display: none !important;
    }
}
#pricingGrid.pricingGrid-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
#pricingGrid.pricingGrid-scroll::-webkit-scrollbar {
    display: none;
}
#pricingGrid.pricingGrid-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
#pricingGrid.pricingGrid-scroll::-webkit-scrollbar-thumb {
    background: var(--mainColor);
    border-radius: 4px;
}
#pricingGrid.pricingGrid-scroll .priceCard {
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 260px;
    scroll-snap-align: start;
}
@media (max-width: 1024px) {
    #pricingGrid.pricingGrid-scroll .priceCard {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}
@media (max-width: 767px) {
    #pricingGrid.pricingGrid-scroll .priceCard {
        flex: 0 0 100%;
    }
}

/* Coming-soon placeholder card — same card language, no invented pricing */
.priceCard--comingSoon {
    .priceBox {
        flex-direction: column;
        align-items: center;
        gap: 6px;

        .amount {
            color: var(--gray);
            font-size: 2.4rem;
        }
    }

    .badge {
        margin-bottom: 16px;
    }
}

/*  */
.featureCard {
    padding: 24px 20px;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.117);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: var(--ts);
    word-break: break-word;

    &:hover {
        translate: 0 -8px;
        box-shadow: 10px 40px 50px rgba(215, 214, 214, 0.48);
    }

    h3 {
        margin-bottom: 8px;
    }

    p {
        color: var(--gray);
        line-height: 1.6;
    }
}

.featureCard .icon,
.stepCard .icon,
.reqCard .icon,
.contactCard .icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--BGYellowLight);
    color: var(--mainColor);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.stepNum,
.reqNum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding-inline: 10px;
    border-radius: 9999px;
    background-color: var(--BGYellowLight);
    color: var(--mainColor);
    font-weight: 800;
    font-size: .85rem;
    margin-bottom: 14px;
}

/*  */
.CommonFeatures {
    background-color: var(--BGYellowLight);
    padding-block: 120px 80px;

    .mainHeading {
        margin-bottom: 48px;
    }
}

/*  */
.audiences {
    padding-block: 80px;

    .mainHeading {
        margin-bottom: 48px;
    }
}

/*  */
.coreFeatures {
    padding-block: 80px;
    background-color: var(--BGYellowLight);

    .mainHeading {
        margin-bottom: 48px;
    }

    .easyUse {
        span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: var(--white);
            border: 1px solid rgba(0, 0, 0, 0.117);
            border-radius: 9999px;
            padding: 10px 18px;
            color: var(--gray);
            font-weight: 500;

            i {
                color: var(--mainColor);
            }
        }
    }
}

/*  */
.howItWorks {
    padding-block: 80px;

    .mainHeading {
        margin-bottom: 48px;
    }

    .stepCard {
        background-color: var(--white);
        border: 1px solid rgba(0, 0, 0, 0.117);
        border-radius: 12px;
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: var(--ts);

        &:hover {
            translate: 0 -8px;
            box-shadow: 10px 40px 50px rgba(215, 214, 214, 0.48);
        }

        h3 {
            margin-bottom: 8px;
        }

        p {
            color: var(--gray);
            line-height: 1.6;
        }
    }
}

/*  */
.requirements {
    position: relative;
    overflow: hidden;
    padding-block: 80px;
    background-color: var(--BGYellowLight);

    .mainHeading {
        margin-bottom: 48px;
    }

    .reqGrid {
        position: relative;
        list-style: none;
        margin: 0;
        padding-inline-start: 0;
    }

    /* journey connector — the dashed path the steps sit on */
    .reqGrid::before {
        content: '';
        position: absolute;
        z-index: 0;
        pointer-events: none;
    }

    .reqCard {
        position: relative;
        background-color: var(--white);
        border: 1px solid rgba(1, 0, 0, 0.08);
        border-radius: 20px;
        padding: 30px 22px 28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: var(--ts);

        .reqNum {
            min-width: 44px;
            height: 44px;
            padding-inline: 0;
            margin-bottom: 14px;
            border-radius: 50%;
            border: 3px solid var(--BGYellowLight);
            background-color: var(--mainColor);
            color: var(--white);
            font-size: 1.05rem;
            font-weight: 800;
            box-shadow: 0 12px 24px -12px rgba(57, 135, 77, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
            transition: var(--ts);
        }

        .reqStep {
            display: block;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .3px;
            color: var(--mainColor);
            margin-bottom: 6px;
        }

        h3 {
            margin-bottom: 8px;
        }

        p {
            color: var(--gray);
            line-height: 1.6;
            max-width: 210px;
        }

        &:hover .reqNum {
            transform: translateY(-3px);
            box-shadow: 0 16px 30px -12px rgba(57, 135, 77, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }
    }

    .note {
        margin-top: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        color: var(--gray);

        i {
            color: var(--mainColor);
        }
    }

    .reqCta {
        text-align: center;

        .reqCtaHint {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 32px;
            color: var(--gray);

            i {
                color: var(--mainColor);
            }
        }

        .btn-rounded {
            padding: 14px 28px;
            font-weight: 700;
            box-shadow: 0 18px 38px -18px rgba(57, 135, 77, 0.6);
        }
    }

    /* desktop / tablet — horizontal path at the step-node height */
    @media (min-width: 768px) {
        .reqGrid::before {
            top: 52px;
            left: 10%;
            right: 10%;
            height: 2px;
            border-top: 2px dashed rgba(57, 135, 77, 0.28);
        }
    }

    /* mobile — vertical timeline */
    @media (max-width: 767px) {
        .reqGrid::before {
            top: 52px;
            bottom: 52px;
            left: 50%;
            border-inline-start: 2px dashed rgba(57, 135, 77, 0.28);
            transform: translateX(-50%);
        }
    }
}

/*  */
.ctaBand {
    background-color: var(--mainColor);
    padding-block: 80px;

    .bandCard {
        text-align: center;
        color: var(--white);

        h2 {
            color: var(--white);
            font-size: clamp(1.6rem, 1.429rem + 0.714vw, 2rem);
            margin-bottom: 8px;
        }

        p {
            color: var(--white);
            line-height: 1.7;
            max-width: 440px;
            margin-inline: auto;
            margin-bottom: 24px;
        }

        
    }
}

/*  */
.contact {
    padding-block: 80px;

    .mainHeading {
        margin-bottom: 48px;
    }

    .contactCard {
        background-color: var(--white);
        border: 1px solid rgba(0, 0, 0, 0.117);
        border-radius: 12px;
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: var(--ts);

        &:hover {
            translate: 0 -8px;
            box-shadow: 10px 40px 50px rgba(215, 214, 214, 0.48);
        }

        h3 {
            font-size: 1.25rem;
            margin-bottom: 6px;
        }

        .value {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--dark);
            margin-block: 8px;
        }

        p {
            color: var(--gray);
            line-height: 1.6;
            margin-block-end: 16px;
        }

        .btn-rounded {
            margin-top: auto;
        }
    }
}

/* ============ trusted clients — logo marquee ============ */
.clientsSection {
    position: relative;
    padding-block: 80px;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset-inline: 0;
        top: 42%;
        height: 58%;
        background: radial-gradient(50% 65% at 50% 50%, rgba(57, 135, 77, 0.07), transparent 70%);
        pointer-events: none;
    }
}

.clientsMarquee {
    --client-gap: 28px;
    position: relative;
    margin-top: 48px;
    overflow: hidden;
    padding-block: 10px;
    /* Anchor the track to the left edge regardless of the RTL page. If the
       track stayed right-anchored, the -50% (leftward) loop would slide the
       whole stream out of view and the viewport would go empty every cycle.
       The mask below is symmetric, so the edge fade is unchanged. */
    direction: ltr;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* The track renders two identical sets ([A][B]) and animates by exactly the
   width of ONE set (-50% of the track), so set B replaces set A at the same
   pixel position and the loop is mathematically seamless. */
.clientsTrack {
    display: flex;
    align-items: center;
    direction: ltr;
    width: max-content;
    will-change: transform;
    animation: clientsScroll 42s linear infinite;
}

@keyframes clientsScroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Each set carries its trailing gap (matching the internal gap) so spacing is
   identical between logos, at the [A][B] seam, and at the loop wrap point. */
.clientsSet {
    display: flex;
    align-items: center;
    gap: var(--client-gap);
    padding-inline-end: var(--client-gap);
}

/* Subtle pause on hover — freezes at the exact transform, resumes from the
   exact same position (animation-play-state never causes a jump).
   Limited to precise pointers so touch devices are never affected. */
@media (hover: hover) {
    .clientsMarquee:hover .clientsTrack {
        animation-play-state: paused;
    }
}

.clientLogo {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 190px;
    min-height: 118px;
    margin: 0;
    padding: 22px 18px;
    border: 1px solid rgba(1, 0, 0, 0.08);
    border-radius: 18px;
    background-color: var(--white);
    box-shadow: 0 1px 2px rgba(1, 0, 0, 0.03), 0 10px 30px -22px rgba(1, 0, 0, 0.18);
    transition: var(--ts);

    img {
        height: 40px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        opacity: .7;
        filter: grayscale(1);
        transition: var(--ts);
    }

    figcaption {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .95rem;
        font-weight: 700;
        color: var(--gray);
        text-align: center;
    }

    &:hover {
        background-color: var(--BGLight);

        img {
            opacity: 1;
            filter: grayscale(0);
            transform: scale(1.05);
        }
    }
}

/* static accessible list — visually hidden unless motion is reduced */
.clientsStatic {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    list-style: none;
}

@media (prefers-reduced-motion: reduce) {
    .clientsMarquee {
        display: none;
    }

    .clientsStatic {
        position: static;
        width: auto;
        height: auto;
        margin: 48px 0 0;
        padding: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;

        .clientLogo {
            width: 100%;
            min-height: 0;
            padding: 18px 12px;

            img {
                height: 34px;
            }

            figcaption {
                white-space: normal;
            }
        }
    }

    @media (min-width: 768px) {
        .clientsStatic {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

/* footer */
footer {
    background-color: var(--BGYellowLight);
    padding-block-start: 80px;

    .d-grid {
        justify-items: center;
    }

    .footerMeta {
        width: 100%;

        p {
            font-size: .96rem;
            color: var(--gray);
        }

        .socialLinks {
            i {
                padding: 0;
                font-size: .9rem;
            }
        }
    }

    .footerLinks {
        margin-inline: 30px;

        h3 {
            font-size: 1.5rem;
        }

        ul {
            margin-top: 24px;
            padding-inline-start: 8px;

            a {
                transition: var(--ts);

                &:hover {
                    color: var(--mainColor);
                    letter-spacing: .1px;
                }
            }

            i {
                color: var(--mainColor);
            }
        }
    }

    @media(min-width:768px) and (max-width:991px) {
        .footerLinks:last-of-type {
            grid-column: 1 / -1;
            justify-self: stretch;
        }
    }

    .copyRight {
        border-top-color: rgba(0, 0, 0, 0.117);
        text-align: center;
        padding-block: 24px;
        margin-top: 20px;
    }
}




/*  */
.preLoader {
    position: fixed;
    width: 100vw;
    height: 100%;
    background-color: #fff3de;
    inset: 0;
    z-index: 99999;
    overflow: hidden;



    figure {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        mask-image: url('../img/fav.svg');
        width: min(200px, 100%);
        aspect-ratio: 1;
        z-index:
            1;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        background-color: #d0c9bd;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: min(400px, 100%);
            aspect-ratio: 1;
            background-color: var(--mainColor);

            translate: 0 200px;
            animation: slideUp 1.5s forwards infinite;
        }
    }
}

/*  */
.fadeIn {
    transition: opacity 0.5s ease;
}

/* lenis */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

@keyframes slideUp {
    0% {
        translate: 0 200px;
    }

    100% {
        translate: 0 0;
    }
}

@keyframes heroFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================= premium polish ================= */

/* buttons — depth + focus state */
.btn-rounded {
    box-shadow: 0 12px 26px -14px rgba(57, 135, 77, 0.55);
}

.btn-rounded.isBorder {
    box-shadow: none;
}

.btn-rounded:focus-visible {
    outline: 3px solid rgba(57, 135, 77, 0.35);
    outline-offset: 3px;
}

/* section tag pills — mirror the hero announcement badge */
.mainHeading .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(57, 135, 77, 0.16);
    border-radius: 999px;
    background-color: var(--BGYellowLight);
    color: var(--mainColor);
    font-size: .85rem;
    font-weight: 700;
}

.mainHeading p {
    line-height: 1.7;
}

/* shared card language — soft border, layered shadow, gentle lift */
.featureCard,
.stepCard,
.reqCard,
.contactCard,
.priceCard {
    border-color: rgba(1, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(1, 0, 0, 0.03), 0 10px 30px -22px rgba(1, 0, 0, 0.18);
}

.featureCard:hover,
.stepCard:hover,
.reqCard:hover,
.contactCard:hover,
.priceCard:not(.featured):hover {
    translate: 0 -6px;
    box-shadow: 0 24px 48px -22px rgba(57, 135, 77, 0.22), 0 12px 28px -16px rgba(1, 0, 0, 0.12);
}

/* icon chips — rounded squares echoing the hero dashboard */
.featureCard .icon,
.stepCard .icon,
.reqCard .icon,
.contactCard .icon {
    border-radius: 18px;
    background-color: var(--BGYellowLight);
    border: 1px solid rgba(57, 135, 77, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 22px -14px rgba(57, 135, 77, 0.35);
    transition: var(--ts);
}

.featureCard:hover .icon,
.stepCard:hover .icon,
.reqCard:hover .icon,
.contactCard:hover .icon {
    transform: scale(1.06);
}

.stepNum,
.reqNum {
    border: 1px solid rgba(57, 135, 77, 0.15);
}

/* tinted sections — soft light from above, like the hero */
.Facilities,
.CommonFeatures,
.coreFeatures,
.requirements {
    background-image: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 60%);
}

/* requirements — soft brand glow behind the journey */
.requirements::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(57, 135, 77, 0.14), rgba(57, 135, 77, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.requirements .container {
    position: relative;
    z-index: 1;
}

/* why — accent cards + refined collage */
.why .WhyContent .whyCard {
    position: relative;
    padding-inline-start: 20px;
    border-inline-start: 2px solid var(--BGYellowLight);
    transition: var(--ts);

    h3 {
        transition: var(--ts);
    }

    &:hover {
        border-inline-start-color: var(--mainColor);

        h3 {
            color: var(--mainColor);
        }
    }
}

@keyframes whyPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(57, 135, 77, 0.45);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(57, 135, 77, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(57, 135, 77, 0);
    }
}

.why .imgs {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
    padding-block: 8px;

    /* brand glow behind the dashboard */
    .whyGlow {
        position: absolute;
        inset: 2% 0 4%;
        background: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(57, 135, 77, 0.32), rgba(57, 135, 77, 0) 72%);
        filter: blur(46px);
        z-index: 0;
        pointer-events: none;
    }

    /* main browser mockup */
    .whyPreview {
        position: relative;
        z-index: 1;
        width: min(100%, 460px);
        background-color: var(--white);
        border: 1px solid rgba(1, 0, 0, 0.08);
        border-radius: 18px;
        overflow: hidden;
        text-align: start;
        box-shadow:
            0 60px 90px -28px rgba(57, 135, 77, 0.32),
            0 18px 40px -18px rgba(1, 0, 0, 0.14);
        animation: heroFloat 7s ease-in-out infinite;

        .browserChrome {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(1, 0, 0, 0.07);

            .dots {
                display: flex;
                gap: 6px;

                i {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: var(--BGYellowLight);
                    border: 1px solid rgba(1, 0, 0, 0.08);

                    &:nth-child(1) {
                        background-color: #ff5f57;
                        border: 0;
                    }

                    &:nth-child(2) {
                        background-color: #febc2e;
                        border: 0;
                    }

                    &:nth-child(3) {
                        background-color: #28c840;
                        border: 0;
                    }
                }
            }

            .urlBar {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 6px 14px;
                border-radius: 999px;
                background-color: var(--BGYellowLight);
                color: var(--gray);
                font-size: .8rem;
                font-weight: 500;
                direction: ltr;

                i {
                    color: var(--mainColor);
                    font-size: .72rem;
                }
            }

            .browserIcon {
                color: var(--gray);
                font-size: .95rem;
            }
        }

        .dash {
            background-color: var(--BGLight);
            padding: 18px 20px 20px;

            .dashHeader {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 12px;

                h4 {
                    font-size: 1.15rem;
                    font-weight: 800;
                    color: var(--dark);
                }

                p {
                    margin-top: 4px;
                    font-size: .8rem;
                    color: var(--gray);
                }

                .live {
                    flex-shrink: 0;
                    display: inline-flex;
                    align-items: center;
                    gap: 7px;
                    padding: 6px 12px;
                    border-radius: 999px;
                    background-color: var(--BGYellowLight);
                    color: var(--mainColor);
                    font-size: .75rem;
                    font-weight: 700;
                    white-space: nowrap;

                    i {
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: var(--mainColor);
                        animation: whyPulse 2.2s ease-out infinite;
                    }
                }
            }

            .dashStats {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
                margin-top: 16px;

                .stat {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 12px;
                    min-width: 0;
                    background-color: var(--white);
                    border: 1px solid rgba(1, 0, 0, 0.06);
                    border-radius: 14px;

                    .sIcon {
                        width: 38px;
                        height: 38px;
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 12px;
                        background-color: var(--BGYellowLight);
                        color: var(--mainColor);
                        font-size: .95rem;
                    }

                    div {
                        min-width: 0;

                        b {
                            display: block;
                            font-size: 1rem;
                            line-height: 1.2;
                            color: var(--dark);
                            white-space: nowrap;
                        }

                        span {
                            font-size: .7rem;
                            color: var(--gray);
                            white-space: nowrap;
                        }
                    }

                    em {
                        margin-inline-start: auto;
                        padding: 3px 8px;
                        min-width: 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        border-radius: 999px;
                        background-color: var(--BGYellowLight);
                        color: var(--mainColor);
                        font-size: .68rem;
                        font-weight: 700;
                        font-style: normal;
                        white-space: nowrap;
                    }
                }
            }

            .dashRow {
                display: grid;
                grid-template-columns: 1fr 1.35fr;
                gap: 14px;
                margin-top: 16px;
            }

            .dashChart {
                padding: 14px;
                background-color: var(--white);
                border: 1px solid rgba(1, 0, 0, 0.06);
                border-radius: 14px;

                h4 {
                    font-size: .9rem;
                    font-weight: 800;
                    color: var(--dark);
                }

                p {
                    margin-top: 3px;
                    font-size: .68rem;
                    color: var(--gray);
                }

                .bars {
                    display: flex;
                    align-items: flex-end;
                    gap: 6px;
                    height: 92px;
                    margin-top: 12px;

                    i {
                        flex: 1;
                        border-radius: 5px 5px 2px 2px;
                        background-color: var(--BGYellowLight);

                        &.on {
                            background-color: var(--mainColor);
                        }
                    }
                }

                .legend {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px 14px;
                    margin-top: 10px;
                    font-size: .66rem;
                    color: var(--gray);

                    span {
                        display: inline-flex;
                        align-items: center;
                        gap: 6px;

                        i {
                            width: 8px;
                            height: 8px;
                            border-radius: 2px;
                            background-color: var(--mainColor);
                        }

                        &.alt i {
                            background-color: var(--BGYellowLight);
                            border: 1px solid rgba(57, 135, 77, 0.25);
                        }
                    }
                }
            }

            .dashTable {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 6px;
                padding: 14px;
                min-width: 0;
                background-color: var(--white);
                border: 1px solid rgba(1, 0, 0, 0.06);
                border-radius: 14px;

                .tHead {
                    display: flex;
                    justify-content: space-between;
                    padding-bottom: 8px;
                    border-bottom: 1px solid rgba(1, 0, 0, 0.06);
                    font-size: .68rem;
                    font-weight: 700;
                    color: var(--gray);

                    span {
                        min-width: 0;
                    }
                }

                .tRow {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                    padding-block: 8px;
                    border-top: 1px solid rgba(1, 0, 0, 0.05);

                    > * {
                        min-width: 0;
                    }

                    .trip {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        min-width: 0;

                        .tAvatar {
                            width: 36px;
                            height: 36px;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            background-color: var(--BGYellowLight);
                            color: var(--mainColor);
                            font-size: .85rem;
                            font-weight: 800;
                        }

                        b {
                            display: block;
                            font-size: .82rem;
                            color: var(--dark);
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        small {
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            margin-top: 2px;
                            font-size: .65rem;
                            color: var(--gray);

                            i {
                                color: var(--mainColor);
                                font-size: .6rem;
                            }
                        }
                    }

                    .status {
                        flex-shrink: 0;
                        padding: 4px 12px;
                        border-radius: 999px;
                        font-size: .68rem;
                        font-weight: 700;
                        background-color: var(--BGYellowLight);
                        color: var(--mainColor);
                        white-space: nowrap;

                        &.muted {
                            background-color: transparent;
                            border: 1px solid rgba(1, 0, 0, 0.14);
                            color: var(--gray);
                        }
                    }
                }
            }
        }
    }

    /* floating glass feature cards */
    .whyCard-float {
        position: absolute;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: 200px;
        padding: 10px 12px;
        background-color: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 14px;
        box-shadow:
            0 18px 36px -16px rgba(57, 135, 77, 0.35),
            0 8px 20px -14px rgba(1, 0, 0, 0.18);

        .fIcon {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background-color: var(--BGYellowLight);
            color: var(--mainColor);
            font-size: 1rem;
        }

        b {
            display: block;
            font-size: .82rem;
            line-height: 1.2;
            color: var(--dark);
            white-space: nowrap;
        }

        small {
            display: block;
            margin-top: 2px;
            font-size: .68rem;
            color: var(--gray);
        }

        &.qr {
            top: 8%;
            inset-inline-start: 0;
            animation: heroFloat 6s ease-in-out infinite;
            animation-delay: .3s;
        }

        &.whatsapp {
            top: 18%;
            inset-inline-end: 0;
            animation: heroFloat 7s ease-in-out infinite;
        }

        &.users {
            top: 44%;
            inset-inline-start: 0;
            animation: heroFloat 8s ease-in-out infinite;
            animation-delay: .6s;
        }

        &.bell {
            top: 48%;
            inset-inline-end: 0;
            animation: heroFloat 6.5s ease-in-out infinite;
            animation-delay: .2s;
        }

        &.chart {
            bottom: 12%;
            inset-inline-start: 0;
            animation: heroFloat 7.5s ease-in-out infinite;
            animation-delay: .5s;
        }

        &.attendance {
            bottom: 18%;
            inset-inline-end: 0;
            animation: heroFloat 6.8s ease-in-out infinite;
            animation-delay: .4s;
        }
    }

    .whyFloat {
        position: absolute;
        z-index: 3;
        inset-inline: 0;
        bottom: -6px;
        width: fit-content;
        margin-inline: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background-color: var(--white);
        border: 1px solid rgba(1, 0, 0, 0.08);
        border-radius: 14px;
        box-shadow: 0 24px 48px -20px rgba(57, 135, 77, 0.35), 0 10px 24px -16px rgba(1, 0, 0, 0.15);
        animation: heroFloat 7s ease-in-out infinite;

        .sIcon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background-color: var(--BGYellowLight);
            color: var(--mainColor);
            font-size: 1.05rem;
        }

        b {
            display: block;
            font-size: 1.05rem;
            line-height: 1.15;
            color: var(--dark);
        }

        span {
            font-size: .75rem;
            color: var(--gray);
        }
    }

    @media(max-width:991px) {
        min-height: 0;
    }

    @media(max-width:767px) {
        .whyCard-float.users,
        .whyCard-float.bell,
        .whyCard-float.chart,
        .whyCard-float.attendance {
            display: none;
        }

        .whyCard-float.qr {
            top: -4px;
            inset-inline-start: 8px;
        }

        .whyCard-float.whatsapp {
            top: 12%;
            inset-inline-end: 8px;
        }

        .whyFloat {
            bottom: -8px;
        }
    }

    @media(max-width:767px) {
        /* the why-preview is narrower than the hero browser mockup, so the
           chart + trips row must stack on phones instead of clipping */
        .whyPreview .dash .dashRow {
            grid-template-columns: 1fr;
        }

        .whyPreview .dash .dashStats {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;

            .stat {
                padding: 10px;
                gap: 8px;

                em {
                    display: none;
                }
            }
        }
    }

    @media(max-width:430px) {
        .whyPreview .dash .dashStats {
            grid-template-columns: 1fr;
        }
    }
}

/* Facilities — full-width muted map + premium stat cards */
.Facilities {
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('../img/shapes/map.svg') no-repeat top center / cover;
        opacity: .13;
        z-index: 0;
        pointer-events: none;
    }

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 55% 52% at 50% 40%, rgba(57, 135, 77, 0.18), rgba(57, 135, 77, 0) 70%);
        z-index: 0;
        pointer-events: none;
    }

    .container {
        position: relative;
        z-index: 1;
        background: transparent;
    }

    .factCard {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--white);
        border: 1px solid rgba(1, 0, 0, 0.08);
        border-radius: 20px;
        padding: 28px 24px;
        box-shadow: 0 1px 2px rgba(1, 0, 0, 0.03), 0 10px 30px -22px rgba(1, 0, 0, 0.18);
        transition: var(--ts);

        &:hover {
            translate: 0 -6px;
            box-shadow: 0 24px 48px -22px rgba(57, 135, 77, 0.28), 0 12px 28px -16px rgba(1, 0, 0, 0.12);
        }

        .icon {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--BGYellowLight);
            border: 1px solid rgba(57, 135, 77, 0.14);
            border-radius: 18px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 20px -12px rgba(57, 135, 77, 0.35);
            margin-bottom: 18px;
            transition: var(--ts);

            img {
                width: 30px;
                height: 30px;
            }
        }

        &:hover .icon {
            translate: 0 -2px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 16px 28px -12px rgba(57, 135, 77, 0.5);
        }

        h3 {
            font-size: clamp(2rem, 1.65rem + 0.9vw, 2.4rem);
            font-weight: 800;
            line-height: 1.1;
            color: var(--dark);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            letter-spacing: -0.5px;
            margin-block: 0 8px;
        }

        p {
            color: var(--gray);
            line-height: 1.5;
            max-width: 170px;
        }
    }

    @media(max-width:767px) {
        .factCard {
            padding: 24px 20px;

            h3 {
                font-size: clamp(1.8rem, 1.4rem + 1vw, 2rem);
            }
        }
    }
}

/* about — premium SaaS product showcase */
.about {
    overflow: hidden;

    .browserMock {
        animation: heroFloat 7s ease-in-out infinite;
    }

    .floatCard {
        transition: var(--ts);

        &:hover {
            scale: 1.05;
            box-shadow: 0 26px 50px -22px rgba(57, 135, 77, 0.35);
        }
    }

    .aboutStats .aboutStat {
        box-shadow: 0 1px 2px rgba(1, 0, 0, 0.03), 0 10px 30px -22px rgba(1, 0, 0, 0.18);

        &:hover {
            translate: 0 -6px;
            box-shadow: 0 24px 48px -22px rgba(57, 135, 77, 0.22), 0 12px 28px -16px rgba(1, 0, 0, 0.12);
        }
    }

    .featureChip:hover {
        border-color: rgba(57, 135, 77, 0.35);
        background-color: var(--BGYellowLight);
        color: var(--mainColor);
    }

    /* responsive — keep the showcase balanced */
    @media (max-width: 1199px) {
        .floatCard.fcWa {
            inset-inline-end: 6px;
        }
    }

    @media (max-width: 991px) {
        .aboutShowcase {
            max-width: 620px;
            margin-inline: auto;
        }
    }

    @media (max-width: 767px) {
        .aboutShowcase {
            padding-inline: 8px;

            .phoneMock {
                display: none;
            }

            .floatCard.fcQr {
                top: 8px;
                inset-inline-start: 6px;
            }

            .floatCard.fcWa {
                display: none;
            }

            /* collapse the 168px sidebar to icon-only — frees space for main */
            .mockDash {
                grid-template-columns: 52px 1fr !important;
            }

            .mockSide {
                width: 52px;
                padding: 10px 6px;

                nav a span {
                    display: none;
                }
            }

            /* reduce main area padding */
            .mockMain {
                padding: 12px;
                gap: 10px;
            }

            /* stack the two stat cards vertically instead of side-by-side */
            .mockStats {
                grid-template-columns: 1fr !important;
                gap: 8px;
            }

            /* unified stat card spacing */
            .mockStat {
                padding: 12px;
                gap: 10px;

                .sIcon {
                    width: 32px;
                    height: 32px;
                    font-size: .82rem;
                    border-radius: 8px;
                }

                > div b {
                    font-size: .85rem;
                }

                > div span {
                    font-size: .65rem;
                }
            }

            /* unified trip card spacing + badge never overlaps text */
            .mockTrip {
                position: relative;
                display: flex;
                align-items: flex-start;
                gap: 10px;
                padding: 12px;
                padding-top: 18px;

                .tAvatar {
                    width: 30px;
                    height: 30px;
                    font-size: .72rem;
                    flex-shrink: 0;
                }

                .tripContent {
                    min-width: 0;
                    flex: 1;

                    b {
                        display: block !important;
                        font-size: .8rem !important;
                        line-height: 1.3;
                        color: var(--dark);
                        white-space: normal !important;
                    }

                    small {
                        display: block !important;
                        margin-top: 2px !important;
                        font-size: .62rem !important;
                        color: var(--gray);
                        white-space: normal !important;
                        gap: 0 !important;
                    }
                }

                .status {
                    position: absolute !important;
                    top: 6px;
                    inset-inline-end: 8px;
                    margin-inline-start: 0 !important;
                    padding: 2px 8px !important;
                    font-size: .58rem !important;
                    line-height: 1.4;
                    flex-shrink: 0 !important;
                }
            }
        }
    }
}

/* core features — soft chips */
.coreFeatures .easyUse span {
    border-color: rgba(1, 0, 0, 0.08);
    box-shadow: 0 8px 20px -16px rgba(1, 0, 0, 0.2);
    transition: var(--ts);

    &:hover {
        translate: 0 -2px;
        border-color: rgba(57, 135, 77, 0.28);
        box-shadow: 0 14px 26px -16px rgba(57, 135, 77, 0.3);
    }
}

/* pricing — featured depth */
.pricing .priceCard.featured {
    box-shadow: 0 32px 64px -28px rgba(57, 135, 77, 0.5), 0 12px 28px -18px rgba(57, 135, 77, 0.35);
}

/* cta band — depth without breaking the solid brand colour */
.ctaBand {
    background:
        radial-gradient(ellipse 55% 70% at 18% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%),
        radial-gradient(ellipse 50% 60% at 88% 100%, rgba(1, 0, 0, 0.1), rgba(1, 0, 0, 0) 55%),
        var(--mainColor);

    .bandCard {
        .btn-rounded:not(.isBorder) {
            background-color: var(--white);
            color: var(--mainColor);
            box-shadow: 0 18px 34px -18px rgba(1, 0, 0, 0.35);

            &::before {
                background-color: var(--dark);
            }

            i, span, a {
                color: var(--mainColor);
            }

            &:hover {
                background-color: var(--dark);
                color: var(--white);

                i, span, a {
                    color: var(--white);
                }
            }
        }

        .btn-rounded.isBorder {
            border-color: rgba(255, 255, 255, 0.55);
            color: var(--white);

            &::before {
                background-color: var(--white);
            }

            &:hover {
                background-color: var(--white);
                color: var(--mainColor);

                i, span, a {
                    color: var(--mainColor);
                }
            }
        }
    }
}

/* ================= features page ================= */

/* Compact page hero — same visual language as the homepage hero, much smaller */
.pageHero {
    position: relative;
    padding-block: 56px 44px;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% -5%, rgba(57, 135, 77, 0.12), rgba(255, 255, 255, 0) 60%);

    /* light grid pattern, mirroring the homepage hero */
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(1, 0, 0, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(1, 0, 0, 0.035) 1px, transparent 1px);
        background-size: 46px 46px;
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 78%);
        mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 78%);
        pointer-events: none;
    }

    .container {
        position: relative;
        z-index: 1;
    }

    .pageHeroBadge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border: 1px solid rgba(57, 135, 77, 0.22);
        border-radius: 999px;
        background-color: var(--BGYellowLight);
        color: var(--mainColor);
        font-weight: 700;
        font-size: .95rem;
        margin-bottom: 18px;
    }

    .pageHeroTitle {
        margin: 0 auto;
        max-width: 20ch;
        font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3.1rem);
        font-weight: 900;
        line-height: 1.2;
        text-wrap: balance;
    }

    .pageHeroDesc {
        margin: 16px auto 0;
        max-width: 620px;
        font-size: 1.05rem;
        line-height: 1.8;
        color: var(--gray);
    }
}

/* Video tutorials — white band between the tinted features band and the CTA */
.videoSection {
    padding-block: 80px;
    background-color: var(--white);
    background-image: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(57, 135, 77, 0.06), rgba(255, 255, 255, 0) 60%);

    .mainHeading {
        margin-bottom: 48px;
    }
}

/* Video card — premium but simple; shares the site's card language */
.videoCard {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border: 1px solid rgba(1, 0, 0, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(1, 0, 0, 0.03), 0 10px 30px -22px rgba(1, 0, 0, 0.18);
    transition: var(--ts);

    &:hover {
        translate: 0 -6px;
        box-shadow: 0 24px 48px -22px rgba(57, 135, 77, 0.22), 0 12px 28px -16px rgba(1, 0, 0, 0.12);
    }
}

/* 16:9 preview — product-UI inspired placeholder until a real video is added */
.videoPreview {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--BGYellowLight);
    background-image:
        linear-gradient(rgba(57, 135, 77, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 135, 77, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 72% 70% at 50% 42%, rgba(57, 135, 77, 0.22), rgba(57, 135, 77, 0) 72%);
        pointer-events: none;
    }

    /* faint "dashboard rows" sketch suggesting a product walkthrough */
    .videoSkeleton {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 9px;
        padding-inline: 28px;

        span {
            display: block;
            height: 9px;
            border-radius: 999px;
            background-color: rgba(255, 255, 255, 0.85);
            box-shadow: 0 1px 0 rgba(57, 135, 77, 0.12);
        }

        .skW40 { width: 40%; }
        .skW90 { width: 90%; }
        .skW70 { width: 70%; }
        .skW50 { width: 50%; }
    }

    /* play button — the focal point of the thumbnail */
    .playBtn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 62px;
        height: 62px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background-color: var(--white);
        color: var(--mainColor);
        font-size: 1.25rem;
        box-shadow: 0 18px 40px -14px rgba(57, 135, 77, 0.55), 0 2px 6px rgba(1, 0, 0, 0.08);
        transition: var(--ts);

        i {
            transform: translateX(-2px);
        }
    }

    &:hover .playBtn {
        transform: translate(-50%, -50%) scale(1.08);
    }

    /* when a real <video> is dropped in, it fills the preview */
    video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* a real video element hides the placeholder pieces automatically */
.videoPreview:has(video) .videoSkeleton,
.videoPreview:has(video) .playBtn,
.videoPreview:has(video)::before {
    display: none;
}

.videoBody {
    padding: 20px 22px 24px;

    h3 {
        margin-bottom: 6px;
        font-size: 1.15rem;
        font-weight: 800;
    }

    p {
        margin: 0;
        color: var(--gray);
        font-size: .95rem;
        line-height: 1.7;
    }
}

/* CTA band — paired actions */
.ctaActions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* ================= end premium polish ================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
@media (max-width:580px){
    .AE_d-none{
        display: none !important;
    }
}