body {
    overflow-x: visible;
}



#headline-section {
    position: relative;
    overflow: hidden;
    padding: 224px 0;          /* preserve your vertical spacing */
    padding-top: 144px;
    background-color: var(--primary-background);

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

        /* --- Headline wrapper & layout --- */
        .headline {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 32px;
            width: 100%;
            height: 100%;
        }

        .headline__text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
        }

        /* --- Title styling --- */
        .headline__title {
            max-width: 1029px;
            text-align: center;
            font-family: 'Rubik', sans-serif;
            font-size: 55px;
            font-weight: 700;
            line-height: 76px;
        }

        .headline__title--primary {
            color: #ffffff;
            text-shadow: 0px 7px 22px rgba(0, 0, 0, 0.20);
        }

        .headline__title--accent {
            /* hide the solid color */
            color: transparent;

            /* keep your text shadow */
            text-shadow: 0px 7px 22px rgba(0, 0, 0, 0.20);

            /* paint a left→right gradient from primary → tertiary → your old accent */
            background-image: linear-gradient(
                    to right,
                    var(--tertiary-color),
                    var(--primary-color)
            );

            /* clip the gradient to the letters */
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }


        /* --- Subtitle styling --- */
        .headline__subtitle {
            max-width: 1029px;
            text-align: center;
            font-family: 'Inter', sans-serif;
            font-size: 20px;
            line-height: 30px;
            color: #ABABAB;
        }

        .headline__subtitle--bold {
            font-weight: 700;
        }

        .headline__subtitle--normal {
            font-weight: 400;
        }

        /* --- CTA button container --- */
        .headline__cta {
            display: inline-flex;
            align-items: flex-start;
            justify-content: center;
            gap: 16px;
        }

        /* --- Explore button --- */
        .btn--explore {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 32px;
            background: #C13C90;
            color: #ffffff;
            border-radius: 100px;
            outline: 1px solid #FACEEA;
            outline-offset: -1px;
            font-family: 'Inter', sans-serif;
            font-size: 18px;
            font-weight: 500;
            line-height: 18px;
            cursor: pointer;
            border: none;
        }


    }
    video#hero-video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        width: auto;
        height: 100vh;
        transform: translate(-50%, -50%);
        object-fit: cover;
        z-index: 1;               /* behind overlay & content */
    }
}


/* Semi-opaque layer between video and content */
#headline-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
}




/* Second section base */
#video-section {
    padding: 0;
    padding-bottom: 90px;
    color: var(--text-light);
    background-color: var(--primary-background);

    .container {
        text-align: center !important;
        padding: 0;
        /* Frosted container */
        .frosted-container {
            position: relative;
            display: inline-flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;

            width: 100%;
            padding: 14px;
            margin: 30px 0;
            margin-top: -200px;
            z-index: 2;


            background: linear-gradient(
                    180deg,
                    #181a2b 0%,
                    rgba(23.91, 35.81, 42.50, 0.46) 0%,
                    #0e1422 100%
            );
            overflow: hidden;
            border-radius: 32px;
            backdrop-filter: blur(24px);
            outline: none;

            &::before {
                content: "";
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 8px;   /* max thickness */

                background: linear-gradient(
                        to right,
                        #252528 0%,
                        var(--primary-color) 25%,
                        var(--tertiary-color) 50%,
                        var(--primary-color) 75%,
                        var(--outline-color) 100%
                );

                clip-path: polygon(
                        0%   0%,    /* top-left corner */
                        0%   0%,    /* normal thickness */
                        25%  25%,   /* a bit thicker */
                        50%  50%,   /* thickest point */
                        75%  25%,   /* a bit thinner */
                        100% 0%,    /* back to normal */
                        100% 0%     /* top-right corner */
                );

                border-top-left-radius: 32px;
                border-top-right-radius: 32px;
                pointer-events: none;
                z-index: 1;
            }
        }

        /* Chat frame: fluid & responsive */
        .chat-frame {
            position: relative;
            width: 100%;
            max-width: 1125px;
            aspect-ratio: 1125 / 565;
            margin: 0 auto;

            background: rgba(3, 0, 20, 0.45);
            overflow: hidden;
            border-radius: 16px;
            backdrop-filter: blur(8px);
        }

        .chat-frame img{}

        /* Both images fill the frame */
        .chat-frame__background,
        .chat-frame__content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Fallback for browsers without aspect-ratio */
        @supports not (aspect-ratio: 1125/647) {
            .chat-frame {
                padding-top: calc(647 / 1125 * 100%); /* ≈57.6% */
            }
        }
    }
}


#third-section {
    padding-bottom: 0;
    background-color: var(--primary-background);
    .container{
        padding-top: 30px;
        padding-bottom: 0;
        /* Utilities */
        .custom-gap-64 { gap: 64px !important; }
        .custom-gap-10 { gap: 10px !important; }

        /* —— Feature Chip / Pill —— */
        .feature-chip {
            padding: 8px 16px;
            background: linear-gradient(
                    180deg,
                    rgba(23.91, 25.77, 42.50, 0.50) 0%,
                    rgba(23.91, 35.81, 42.50, 0.23) 0%,
                    rgba(13.60, 19.88, 34, 0.50) 100%
            );
            box-shadow: 0px 7.45px 22.36px rgba(0, 0, 0, 0.20);
            border-radius: 100px;
            outline: 1px solid var(--outline-color, #252528);
            outline-offset: -1px;
            backdrop-filter: blur(12px);
        }

        .feature-chip__text {
            color: #fff;
            font-size: 16px;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            line-height: 16px;
            letter-spacing: 0.32px;
            text-align: center;
        }

        /* —— Feature Content —— */
        .feature-content__title {
            /* remove the solid color */
            color: transparent;

            /* your existing font styles… */
            max-width: 1029px;
            font-size: 55px;
            font-family: 'Rubik', sans-serif;
            font-weight: 700;
            line-height: 76px;
            text-shadow: 0px 7px 22px rgba(0, 0, 0, 0.20);

            /* gradient text */
            background-image: linear-gradient(
                    to right,            /* white on the right */
                    var(--tertiary-color),  /* ending tertiary on the left */
                    var(--primary-color)  /* then primary */

            );
            background-clip: text;
            -webkit-background-clip: text;  /* for WebKit browsers */
            -webkit-text-fill-color: transparent;
        }


        .feature-content__desc {
            max-width: 924px;
            color: #ABABAB;
            font-size: 20px;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            line-height: 30px;
        }

        .feature-content__desc .highlight {
            font-weight: 700;
        }

    }
}

#flipped-section {
    background-color: var(--primary-background);
    padding: 0;
    .container {
        text-align: center;

        .card {
            opacity: 1 !important;
        }
        .card.in-view {
            opacity: 1 !important;
        }



        .card {
            position: sticky;
            top: 15vh; /* push cards away from screen top */
            background-color: transparent;
            height: 650px;
            min-height: 650px;
        }

        @media (max-width: 768px) {
            .card {
                height: 950px;      /* or whatever value you need */
                min-height: 950px;
            }
        }


        /*.card__inner {
            will-change: transform;
            background: white;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px hsla(265.3, 20%, 10%, 35%);
            transform-origin: center top;
            min-height: 300px;
            padding: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }*/

        .cards {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            display: grid;
            grid-template-rows: repeat(var(4), var(--card-height));
            /*grid-template-rows: repeat(var(--cards-count), var(--card-height));*/
            gap: 40px 0;
        }



        /*------ From Figma -------*/
        .slider-content {
            will-change: transform;
            transform-origin: center top;

            width: 100%;
            height: 100%;
            padding: 32px;
            background-color: rgb(21, 27, 40);
            border-radius: 32px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            outline: 2px #7a7a82 solid;
            outline-offset: -2px;
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 32px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);

        }


        .brand-logo {
            height: auto;
            max-width: 50%;
        }

        .text-content{
            text-align: start;
        }

        .text-content .section-title {
            color: white;
            font-size: 2rem;
            font-family: Rubik;
            font-weight: 500;
            line-height: 1.3;
            text-align: start;
        }

        .text-content .section-description {
            color: #ababab;
            font-size: 1.25rem;
            font-family: Inter;
            line-height: 1.6;
            text-align: start;
        }

        .section-subtitle {
            color: white;
            font-size: 1.5rem;
            font-family: Rubik;
            font-weight: 500;
            line-height: 1.4;
            text-align: start;
        }

        .section-modules,
        .section-outcomes {
            color: #ababab;
            font-size: 1.25rem;
            font-family: Inter;
            line-height: 1.6;
            text-align: start;
        }


        .section-title  {
            margin-bottom: 0;
        }
        .section-modules{
            margin-bottom: -20px;
        }

        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main-image-box {
            position: relative;
            width: 100%;
            border-radius: 10px;
            outline: 1px #d0b3ff solid;
            overflow: hidden;
        }

        .main-image {
            margin-top: 0;
            width: 100%;
            height: auto;
            display: block;
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 96px;
            height: 96px;
            transform: translate(-50%, -50%);
            background: rgba(17, 0, 0, 0.15);
            border-radius: 100px;
            backdrop-filter: blur(24px);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .play-inner {
            width: 33px;
            height: 39px;
        }

        /**GOLD**/

        .slider-content-gold {
            will-change: transform;
            transform-origin: center top;

            width: 100%;
            height: 100%;
            padding: 65px 32px;
            border-radius: 32px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            outline: 2px #7a7a82 solid;
            outline-offset: -2px;
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 32px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
            background-image:
                    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), /* frosted overlay */
                    linear-gradient(90deg, #9D7C0EF9 0%, #70581500 52%, #976F00 100%), /* border gradient */
                    url("../../assets/img/edition/ultimate 2.png"); /* background image */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-blend-mode: overlay;
        }
        .geliga-card {
            width: 100%;
            height: auto;
            padding: 24px;
            background: rgba(0, 0, 0, 0.6);  /* more translucent for deeper blur effect */
            border-radius: 32px;
            display: flex;
            flex-direction: column;
            gap: 40px;
            border: 1px solid rgba(255,255,255,0.14);
        }

        .geliga-card__content {
            display: flex;
            flex-direction: column;
            gap: 32px;
            height: 100%;
            align-items: flex-start;
        }

        .geliga-card__logo-row {
            width: 100%;
            padding-left: 6px;
            padding-right: 6px;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 5px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .geliga-card__logo-img {
            width: 59px;
            height: 59px;
            object-fit: cover;
            border-radius: 50%;
            margin-left: 4px;
        }

        .geliga-card__text {
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
        }

        .geliga-card__title {
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 2rem;
            font-family: 'Rubik', sans-serif;
            font-weight: 700;
        }

        .geliga-card__desc {
            width: 100%;
            text-align: center;
            color: #ABABAB;
            font-size: 1.125rem;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            line-height: 1.4;
        }

        /* Responsive tweaks for smaller screens */
        @media (max-width: 767.98px) {
            .geliga-card {
                padding: 16px;
                gap: 24px;
            }
            .geliga-card__title {
                font-size: 1.4rem;
            }
            .geliga-card__logo-row {
                gap: 3px;
                padding-left: 0;
                padding-right: 0;
            }
        }


    }
}

/*#slider-section {
    background-color: var(--primary-background);

    .container {
        text-align: center;


        .swiper {
            width: 100%;
            height: 710px; // default: desktop and landscape
        }

        @media (orientation: portrait) and (max-width: 768px) {
            .swiper {
                height: 1000px; // mobile & tablet portrait
            }
        }

        @media (orientation: landscape) and (max-width: 1024px) {
            .swiper {
                height: 770px; // mobile/tablet landscape
            }
        }

        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 32px;
            box-shadow: 0 0 6px 1px #727896;
        }

        .swiper-slide:hover,
        .swiper-slide:focus-within {
            box-shadow: 0 0 8px 2px #7f85a1;
            transition: box-shadow 0.3s ease;
        }


        .slider-content {
            width: 100%;
            padding: 32px;
            background-color: var(--primary-background);
            border-radius: 32px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
        }


        /*------ From Figma -------*/
        /*.slider-content {
            width: 100%;
            height: 100%;
            padding: 32px;
            background-color: var(--primary-background);
            border-radius: 32px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            outline: 2px #252528 solid;
            outline-offset: -2px;
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 32px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
        }


        .brand-logo {
            height: auto;
            max-width: 50%;
        }

        .text-content{
            text-align: start;
        }

        .text-content .section-title {
            color: white;
            font-size: 2rem;
            font-family: Rubik;
            font-weight: 500;
            line-height: 1.3;
            text-align: start;
        }

        .text-content .section-description {
            color: #ababab;
            font-size: 1.25rem;
            font-family: Inter;
            line-height: 1.6;
            text-align: start;
        }

        .section-subtitle {
            color: white;
            font-size: 1.5rem;
            font-family: Rubik;
            font-weight: 500;
            line-height: 1.4;
            text-align: start;
        }

        .section-modules,
        .section-outcomes {
            color: #ababab;
            font-size: 1.25rem;
            font-family: Inter;
            line-height: 1.6;
            text-align: start;
        }

        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main-image-box {
            position: relative;
            width: 100%;
            border-radius: 10px;
            outline: 1px #d0b3ff solid;
            overflow: hidden;
        }

        .main-image {
            width: 100%;
            height: auto;
            display: block;
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 96px;
            height: 96px;
            transform: translate(-50%, -50%);
            background: rgba(17, 0, 0, 0.15);
            border-radius: 100px;
            backdrop-filter: blur(24px);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .play-inner {
            width: 33px;
            height: 39px;
        }

    }
}*/

#seventh-section {
    background-color: var(--primary-background);
    .container{
        padding: 0;
        background-image: url("../../assets/img/edition/bottom-bg.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* Container that wraps everything */
        position: relative;      /* NEW */
        .cta-section {
            background: rgba(0, 0, 0, 0.70);
            width: 100%;
            height: 100%;
            padding: 64px 180px;
            overflow: hidden;

            display: inline-flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            /* new: rounded corners + thin border */
            border-radius: 24px;

            /* new: outline for extra pop */
            outline: 1px solid var(--outline-color);
        }

        /* Inner flex column for text + buttons */
        .cta-content {
            position: relative;      /* NEW */
            z-index: 1;              /* NEW */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 32px;
        }

        .cta-bg-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;   /* cover the area without distortion */
            z-index: 0;          /* behind .cta-content */

            /* ← NEW: match parent’s corner radius */
            border-radius: inherit;
        }


        /* Text block wrapper */
        .cta-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 32px;
        }

        /* Main heading */
        .cta-title {
            width: 100%;
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            font-family: 'Rubik', sans-serif;
            font-weight: 500;
            text-transform: capitalize;
            line-height: 62.4px;
            word-wrap: break-word;
        }

        /* Subtitle below the heading */
        .cta-subtitle {
            width: 100%;
            text-align: center;
            color: #ABABAB;
            font-size: 20px;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            line-height: 30px;
            word-wrap: break-word;
        }

        /* Buttons container */
        .cta-buttons {
            display: inline-flex;
            justify-content: center;
            align-items: flex-start;
            gap: 16px;
        }

        /* Primary button style */
        .btn-primary {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;

            padding: 16px 32px;
            background: #C13C90;
            border-radius: 100px;
            outline: 1px #FACEEA solid;
            outline-offset: -1px;

            color: #ffffff;
            font-size: 18px;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            line-height: 18px;
            text-decoration: none;
        }

        /* Secondary button style */
        .btn-secondary {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;

            height: 56px;
            padding: 16px 32px;
            background: rgba(5, 7, 17, 0.5);
            border-radius: 100px;
            outline: 1px #ffffff solid;
            outline-offset: -1px;

            color: #ffffff;
            font-size: 18px;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            line-height: 18px;
            text-decoration: none;
        }


    }
}