/* ======================================================================
       CYBRANI HEADER
       ====================================================================== */

    :root {

        --ct-bg:
            #042f3f;

        --ct-bg-soft:
            #073b4c;

        --ct-border:
            #0d5568;

        --ct-border-soft:
            #16758a;

        --ct-text:
            #f7feff;

        --ct-muted:
            #9fc3cb;

        --ct-cyan:
            #28d8d1;

        --ct-cyan-soft:
            rgba(40, 216, 209, .08);

        --ct-page-bg:
            #042f3f;

        --ct-header-bg:
            rgba(2, 6, 23, .88);

        --ct-header-mobile-bg:
            rgba(2, 6, 23, .98);

        --ct-heading:
            #ffffff;

        --ct-control-bg:
            rgba(15, 23, 42, .75);

        color-scheme:
            dark;
    }

    html[data-theme="light"] {

        --ct-bg:
            #ffffff;

        --ct-bg-soft:
            #f4f8f9;

        --ct-border:
            #d8e4e7;

        --ct-border-soft:
            #b7d5da;

        --ct-text:
            #102f38;

        --ct-muted:
            #56757d;

        --ct-cyan:
            #087f84;

        --ct-cyan-soft:
            rgba(8, 127, 132, .08);

        --ct-page-bg:
            #ffffff;

        --ct-header-bg:
            rgba(255, 255, 255, .92);

        --ct-header-mobile-bg:
            rgba(255, 255, 255, .98);

        --ct-heading:
            #072f3a;

        --ct-control-bg:
            #f7fafb;

        color-scheme:
            light;
    }


    /* ======================================================================
       LANGUAGE FONTS
       ====================================================================== */

    html[lang="en"],
    html[lang="en"] body {

        font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            "Courier New",
            monospace;
    }

    html[lang="ar"],
    html[lang="ar"] body {

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


    /* ======================================================================
       BODY
       ====================================================================== */

    body {

        margin:
            0;

        background:
            var(--ct-page-bg);

        color:
            var(--ct-text);

        transition:
            background-color .25s ease,
            color .25s ease;
    }

    /* ======================================================================
       PLATFORM PROMOTION BANNER
       ====================================================================== */

    .ct-promo-banner {
        position: relative;
        z-index: 10001;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 8px 58px;
        box-sizing: border-box;
        color: #062f3c;
        background: linear-gradient(90deg, #bceff0 0%, #7ce0de 50%, #bceff0 100%);
        border-bottom: 1px solid rgba(6, 47, 60, .14);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.55;
        text-align: center;
    }

    .ct-promo-banner[hidden] {
        display: none;
    }

    .ct-promo-content {
        margin: 0;
    }

    .ct-promo-time {
        font-weight: 900;
    }

    .ct-promo-link {
        color: #062f3c;
        font-weight: 900;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    .ct-promo-link:hover {
        color: #006f73;
    }

    .ct-promo-close {
        position: absolute;
        top: 50%;
        inset-inline-end: 18px;
        width: 34px;
        height: 34px;
        padding: 0;
        transform: translateY(-50%);
        border: 0;
        border-radius: 50%;
        color: #062f3c;
        background: transparent;
        font: inherit;
        font-size: 25px;
        line-height: 1;
        cursor: pointer;
    }

    .ct-promo-close:hover,
    .ct-promo-close:focus-visible {
        background: rgba(6, 47, 60, .1);
        outline: none;
    }

    @media (max-width: 640px) {
        .ct-promo-banner {
            min-height: 58px;
            padding: 9px 48px 9px 14px;
            font-size: 12px;
        }

        html[dir="rtl"] .ct-promo-banner {
            padding: 9px 14px 9px 48px;
        }

        .ct-promo-close {
            inset-inline-end: 8px;
        }
    }


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

    .ct-header {

        position:
            sticky;

        top:
            0;

        z-index:
            9999;

        width:
            100%;

        border-bottom:
            1px solid
            rgba(51, 65, 85, .65);

        background:
            var(--ct-header-bg);

        backdrop-filter:
            blur(18px);

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

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

    .ct-header::before {

        content:
            "";

        position:
            absolute;

        left:
            0;

        bottom:
            -1px;

        width:
            100%;

        height:
            1px;

        pointer-events:
            none;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(40, 216, 209, .35),
                transparent
            );
    }


    /* ======================================================================
       WRAP
       ====================================================================== */

    .ct-nav-wrap {

        width:
            calc(100% - 40px);

        max-width:
            1280px;

        min-height:
            74px;

        margin:
            0 auto;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            25px;
    }


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

    .ct-brand {

        display:
            inline-flex;

        align-items:
            center;

        gap:
            12px;

        flex-shrink:
            0;

        color:
            var(--ct-heading);

        text-decoration:
            none;

        transition:
            transform .25s ease,
            opacity .25s ease;
    }

    .ct-brand:hover {

        transform:
            translateY(-1px);
    }


    /* ======================================================================
       BRAND LOGO
       ====================================================================== */

    .ct-brand-mark {

        position:
            relative;

        width:
           75px;

        height:
            auto;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        flex-shrink:
            0;

        background:
            transparent;

        border:
            0;
    }

    /* Logo is a single-colour mark: white in dark theme, black in light theme */
    .ct-brand-logo {

        filter:
            brightness(0) invert(1);

        display:
            block;

        width:
            100%;

        height:
            100%;

        object-fit:
            contain;

        object-position:
            center;

        filter:
            drop-shadow(
                0 0 7px
                rgba(40, 216, 209, .20)
            );

        transition:
            transform .25s ease,
            filter .25s ease;
    }

    .ct-brand:hover
    .ct-brand-logo {

        transform:
            scale(1.04);

        filter:
            drop-shadow(
                0 0 10px
                rgba(40, 216, 209, .32)
            );
    }


    /* ======================================================================
       BRAND TEXT
       ====================================================================== */

    .ct-brand-copy {

        display:
            flex;

        flex-direction:
            column;

        line-height:
            1.1;
    }

    .ct-brand-title {

        color:
            var(--ct-heading);

        font-size:
            17px;

        font-weight:
            900;

        letter-spacing:
            .5px;
    }

    .ct-brand-subtitle {

        margin-top:
            4px;

        color:
            var(--ct-muted);

        font-size:
            8px;

        font-weight:
            700;

        letter-spacing:
            2px;

        text-transform:
            uppercase;
    }


    /* ======================================================================
       NAV
       ====================================================================== */

    .ct-nav {

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-end;

        gap:
            5px;
    }

    .ct-nav-link {

        position:
            relative;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        min-height:
            40px;

        padding:
            0 13px;

        border-radius:
            8px;

        color:
            var(--ct-muted);

        text-decoration:
            none;

        font-size:
            12px;

        font-weight:
            700;

        white-space:
            nowrap;

        transition:
            color .2s ease,
            background .2s ease,
            transform .2s ease;
    }

    .ct-nav-link:hover {

        color:
            var(--ct-heading);

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

        transform:
            translateY(-1px);
    }

    .ct-nav-link::after {

        content:
            "";

        position:
            absolute;

        left:
            50%;

        bottom:
            2px;

        width:
            0;

        height:
            1px;

        transform:
            translateX(-50%);

        background:
            var(--ct-cyan);

        transition:
            width .2s ease;

        box-shadow:
            0 0 8px
            rgba(40, 216, 209, .5);
    }

    .ct-nav-link:hover::after {

        width:
            45%;
    }


    /* ======================================================================
       REGISTER
       ====================================================================== */

    .ct-register {

        min-height:
            41px;

        padding:
            0 18px;

        margin-left:
            5px;

        border:
            1px solid
            rgba(40, 216, 209, .22);

        border-radius:
            8px;

        background:
            linear-gradient(
                135deg,
                #28d8d1,
                #2ca7e8
            );

        color:
            #042f3f;

        text-decoration:
            none;

        font-size:
            12px;

        font-weight:
            900;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        box-shadow:
            0 8px 25px
            rgba(40, 216, 209, .11);

        transition:
            all .23s ease;
    }

    html[dir="rtl"]
    .ct-register {

        margin-left:
            0;

        margin-right:
            5px;
    }

    .ct-register:hover {

        transform:
            translateY(-2px);

        box-shadow:
            0 12px 30px
            rgba(40, 216, 209, .22);
    }


    /* ======================================================================
       LANGUAGE
       ====================================================================== */

    .ct-language {

        min-width:
            40px;

        min-height:
            40px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        margin-left:
            7px;

        border:
            1px solid
            var(--ct-border-soft);

        border-radius:
            8px;

        background:
            var(--ct-control-bg);

        color:
            var(--ct-cyan);

        text-decoration:
            none;

        font-size:
            11px;

        font-weight:
            900;

        letter-spacing:
            .5px;

        transition:
            all .2s ease;
    }

    html[dir="rtl"]
    .ct-language {

        margin-left:
            0;

        margin-right:
            7px;
    }

    .ct-language:hover {

        border-color:
            rgba(40, 216, 209, .38);

        background:
            rgba(40, 216, 209, .06);
    }


    /* ======================================================================
       THEME TOGGLE
       ====================================================================== */

    .ct-theme-toggle {

        width:
            40px;

        height:
            40px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        margin-left:
            7px;

        padding:
            0;

        border:
            1px solid var(--ct-border-soft);

        border-radius:
            8px;

        background:
            var(--ct-control-bg);

        color:
            var(--ct-cyan);

        cursor:
            pointer;

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

    html[dir="rtl"]
    .ct-theme-toggle {

        margin-left:
            0;

        margin-right:
            7px;
    }

    .ct-theme-toggle:hover {

        background:
            var(--ct-cyan-soft);

        transform:
            translateY(-1px);
    }

    .ct-theme-toggle svg {

        width:
            18px;

        height:
            18px;

        fill:
            none;

        stroke:
            currentColor;

        stroke-width:
            1.8;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;
    }

    .ct-theme-icon-sun {

        display:
            none;
    }

    html[data-theme="light"]
    .ct-theme-icon-moon {

        display:
            none;
    }

    html[data-theme="light"]
    .ct-theme-icon-sun {

        display:
            block;
    }


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

    .ct-menu-toggle {

        display:
            none;

        width:
            42px;

        height:
            42px;

        border:
            1px solid
            var(--ct-border-soft);

        border-radius:
            8px;

        background:
            var(--ct-control-bg);

        color:
            var(--ct-heading);

        cursor:
            pointer;

        align-items:
            center;

        justify-content:
            center;

        flex-direction:
            column;

        gap:
            5px;
    }

    .ct-menu-toggle span {

        display:
            block;

        width:
            18px;

        height:
            1px;

        background:
            var(--ct-heading);

        transition:
            all .25s ease;
    }

    .ct-menu-toggle.active
    span:nth-child(1) {

        transform:
            translateY(6px)
            rotate(45deg);
    }

    .ct-menu-toggle.active
    span:nth-child(2) {

        opacity:
            0;
    }

    .ct-menu-toggle.active
    span:nth-child(3) {

        transform:
            translateY(-6px)
            rotate(-45deg);
    }


    /* ======================================================================
       MAIN
       ====================================================================== */

    main {

        min-height:
            calc(100vh - 74px);
    }


    /* ======================================================================
       FLASH
       ====================================================================== */

    .ct-flash-area {

        position:
            relative;

        z-index:
            20;

        width:
            calc(100% - 40px);

        max-width:
            1280px;

        margin:
            18px auto 0;
    }

    .ct-flash {

        position:
            relative;

        overflow:
            hidden;

        padding:
            14px 16px;

        border-radius:
            10px;

        font-size:
            13px;

        animation:
            ctFlashIn
            .4s
            ease
            both;
    }

    .ct-flash.ok {

        border:
            1px solid
            rgba(34, 197, 94, .24);

        background:
            rgba(34, 197, 94, .075);

        color:
            #86efac;
    }

    .ct-flash.err {

        border:
            1px solid
            rgba(239, 68, 68, .24);

        background:
            rgba(239, 68, 68, .075);

        color:
            #fca5a5;
    }

    .ct-flash::before {

        content:
            "";

        position:
            absolute;

        left:
            0;

        top:
            0;

        width:
            3px;

        height:
            100%;

        background:
            currentColor;
    }

    html[dir="rtl"]
    .ct-flash::before {

        left:
            auto;

        right:
            0;
    }

    @keyframes ctFlashIn {

        from {

            opacity:
                0;

            transform:
                translateY(-8px);
        }

        to {

            opacity:
                1;

            transform:
                translateY(0);
        }
    }


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

    @media (max-width: 980px) {

        .ct-nav-wrap {

            position:
                relative;

            min-height:
                68px;
        }

        .ct-menu-toggle {

            display:
                inline-flex;
        }

        .ct-nav {

            position:
                absolute;

            top:
                calc(100% + 1px);

            left:
                0;

            right:
                0;

            display:
                none;

            flex-direction:
                column;

            align-items:
                stretch;

            gap:
                4px;

            padding:
                13px;

            border:
                1px solid
                #0d5568;

            border-top:
                0;

            border-radius:
                0 0 13px 13px;

            background:
                var(--ct-header-mobile-bg);

            box-shadow:
                0 25px 50px
                rgba(0, 0, 0, .35);

            backdrop-filter:
                blur(18px);
        }

        .ct-nav.open {

            display:
                flex;

            animation:
                ctMenuIn
                .2s
                ease;
        }

        @keyframes ctMenuIn {

            from {

                opacity:
                    0;

                transform:
                    translateY(-5px);
            }

            to {

                opacity:
                    1;

                transform:
                    translateY(0);
            }
        }

        .ct-nav-link,
        .ct-register,
        .ct-language,
        .ct-theme-toggle {

            width:
                100%;

            min-height:
                44px;

            margin:
                0;

            justify-content:
                flex-start;

            padding:
                0 14px;

            box-sizing:
                border-box;
        }

        .ct-language {

            justify-content:
                center;
        }

        .ct-theme-toggle {

            justify-content:
                center;
        }

        .ct-register {

            margin-top:
                5px;
        }
    }


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

    @media (max-width: 520px) {

        .ct-nav-wrap {

            width:
                calc(100% - 26px);
        }

        .ct-brand {

            gap:
                9px;
        }

        .ct-brand-subtitle {

            display:
                none;
        }

        .ct-brand-title {

            font-size:
                15px;
        }

        .ct-brand-mark {

            width:
                44px;

            height:
                44px;
        }

        .ct-flash-area {

            width:
                calc(100% - 26px);
        }
    }

/* ---- Brand logo colour by theme ---- */
.ct-brand-logo { filter: brightness(0) invert(1); }
html[data-theme="light"] .ct-brand-logo { filter: brightness(0); }
.ct-brand:hover .ct-brand-logo { filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(40, 216, 209, .32)); }
html[data-theme="light"] .ct-brand:hover .ct-brand-logo { filter: brightness(0) drop-shadow(0 0 10px rgba(0, 0, 0, .18)); }