:root {
    --primary-color: #C13C90;      /* Muted jade green-grey */
    --secondary-color: #FF3AF2;    /* Deep forest grey-green */
    --tertiary-color: #F9DDEB;   /* Soft minty grey for accents */
    --text-light: #ffffff;
    --text-dark: #1a1a1a;

    --accent-orange: #e86e1c; /*button*/
    --accent-blue: #6c7a89; /*section dark background*/
    --accent-cream: #f5f5f5; /*light background or line*/

    --primary-background: #050711;
    --outline-color: #252528;
    --thickline-color: #252528;

    --text-large:48px;
    --text-medium:36px;
    --text-small:24px;
    --text-small-xs:20px;


    --tab-inactive:    #222632;
    --tab-active:      #ffffff;

}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}
body {
    font-family: 'Roboto', sans-serif;

    section{
        padding: 90px 0;
    }
    section .container{
        padding: 90px 0;
    }

    .section-title{
        font-size: var(--text-large);
        font-weight: 1000;
        margin-bottom: 60px;
    }



    .btn-more {
        display: inline-block;
        padding: 12px 28px;
        color: white;
        background: var(--primary-color);
        border: none;
        border-radius: 50px;
        font-weight: 500;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        transition: background 0.3s ease, transform 0.3s ease;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    }

    .btn-more::before {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: rgba(255, 255, 255, 0.25);
        transform: skewX(-25deg);
        transition: left 0.6s ease;
        z-index: 1;
    }

    .btn-more:hover {
        transform: scale(1.05);
    }

    .btn-more:hover::before {
        left: 125%;
    }

    ul {
        padding-left: 20px;
        list-style-type: disc;
    }
    li {
        margin-bottom: 8px;
    }

    /* Usage: <hr class="subtle-divider"> */
    .divider-accent {
        width: 100%;
        height: 1px;               /* tweak for thicker/thinner */
        background-color: #050711; /* match your dark bg */
        background-image: linear-gradient(
                to right,
                var(--primary-background),
                var(--outline-color) 50%,
                var(--outline-color),
                var(--outline-color) 50%,
                var(--primary-background)
        );
        margin: 0;            /* vertical spacing */
    }



    .card {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin: 15px 5px;
        opacity: 0;
        transform: translateY(60px) scale(0.95);
        transition:
                opacity 0.8s ease-out,
                transform 0.3s ease, /* for hover */
                box-shadow 0.3s ease;
        will-change: opacity, transform;
    }

    /* Visible on scroll */
    .card.in-view {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Hover effect only after in-view */
    .card.in-view:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }

    .card.no-fx,
    .card.no-fx.in-view {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .card.no-fx:hover {
        transform: none;
        box-shadow: none;
    }


    /* ─── KINET CURSOR OVERLAY ───────────────────────────────────────── */
    #kinet-cursor-container {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        pointer-events: none;       /* clicks pass through */
        z-index: 9999;              /* on top of everything */
    }

    /* The “circle” becomes your image: */
    #kinet-cursor {
        position: absolute;
        width: 40px;                /* change to your image’s width */
        height: 40px;               /* change to your image’s height */
        background: url('../../assets/img/logo-only.png') no-repeat center;
        background-size: contain;   /* make it scale nicely */
        will-change: transform;     /* performance hint */
    }


}




#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 */
#second-section {
    padding-top: 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 / 647;
            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;
        }

        /* 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;
        }

    }
}

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



        .swiper {
            width: 100%;
            padding: 50px 0;       /* shorthand for top+bottom */
            overflow: visible;     /* allow taller slides to show */
        }

        /* Make all slides align at the top */
        .swiper-wrapper {
            display: flex;         /* already is, but re-declare to add align-items */
            align-items: flex-start;
        }

        /* Default for tablet-landscape & desktop */
        .swiper-slide {
            width: 40%;
            height: auto; /* allow content to size the slide’s height */
        }

        /* Mobile phones (up to 767px) */
        @media (max-width: 767.98px) {
            .swiper-slide {
                width: 73%;
            }
        }


        /* Ensure your images/cards size themselves naturally */
        .swiper-slide img {
            display: block;
            width: 100%;
            height: auto;
        }

        .swiper-slide .card {
            /* semi-transparent dark fill */
            background-color: rgba(11, 10, 13, 0.5);
            /* frosted backdrop blur */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            /* outline border */
            border: 1px solid var(--outline-color);

            /* rounded corners */
            border-radius: 16px;

            /* optional: lift it off the page */
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        /* ensure the card-img-top doesn’t overwrite the frosted bg */
        .swiper-slide .card-img-top {
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
        }

        /* keep the body transparent so the frosted bg shows through */
        .swiper-slide .card-body {
            background: transparent;
        }

        /* Frosted-glass card style */
        .frosted-card {
            /* spacing */
            padding: 32px;

            /* frosted gradient background */
            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%
            );

            /* rounded & outlined */
            border-radius: 32px;
            outline: 2px solid var(--outline-color);
            outline-offset: -2px;

            /* glassy blur */
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);

            /* flex layout */
            display: inline-flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 32px;
        }

        /* make sure the top img rounds to the same radius */
        .frosted-card .card-img-top {
            border-top-left-radius: 32px;
            border-top-right-radius: 32px;
        }


        .icon-box {
            position: relative;
            width: 50px;
            height: 50px;
            background-color: #1B1F2F;
            border-radius: 8px;
            color: #fff;
            font-size: 1.25rem;
            margin-left: 2px;

            /* Center the icon */
            display: flex;
            align-items: center;
            justify-content: center;

            /* only top & left “outline” */
            border-top:    1.45px solid #fff;
            border-left:   1.45px solid #fff;
            border-right:  none;
            border-bottom: none;

            /* include borders in the box’s dimensions */
            box-sizing: border-box;
        }


        .card-text {
            text-align: justify;
        }

        /* Title (34px Rubik) */
        .feature-card-title {
            color: #ffffff;
            font-family: 'Rubik', sans-serif;
            font-size: 34px;
            font-weight: 500;
            text-transform: capitalize;
            line-height: 37.4px;
            word-wrap: break-word;
            margin-bottom: 0.5rem;
        }

        /* Description (20px Inter, justified) */
        .feature-card-desc {
            color: #ABABAB;
            font-family: 'Inter', sans-serif;
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            word-wrap: break-word;
            text-align: left;
        }

        /* Make pagination bullets larger & more visible */
        .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            margin: 0 6px !important;         /* add spacing */
            background-color: rgba(255, 255, 255, 0.4); /* non-active color */
            opacity: 1;                        /* override default fade */
        }

        /* Active bullet */
        .swiper-pagination-bullet-active {
            background-color: var(--primary-color); /* or use #fff for white */
        }


    }
}

#fifth-section {
    padding: 0;
    background-color: var(--primary-background);
    .container{
        /* ========== Features Intro Section ========== */
        .features-intro {
            display: inline-flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 24px;

            width: 100%;
            height: 100%;
        }

        /* ——— Chip / Pill ——— */
        .feature-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            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 #252528;
            outline-offset: -1px;
            backdrop-filter: blur(12px);
        }

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

        /* ——— Header & Subtitle ——— */
        .features-intro__header {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 24px;

            width: 100%;
        }

        .features-intro__title {
            /* remove the solid color */
            color: transparent;

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

            /* gradient fill left→right: tertiary → primary */
            background-image: linear-gradient(
                    to right,
                    var(--tertiary-color),
                    var(--primary-color)
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


        .features-intro__subtitle {
            max-width: 924px;
            color: #ABABAB;
            font-family: 'Inter', sans-serif;
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            text-align: center;
            margin: 0 auto;
        }


    }
}

#sixth-section {
    padding-top: 0;
    padding-bottom:120px;
    background-color: var(--primary-background);
    overflow-x: hidden !important;
    .container {
        padding: 0;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        /* ── Tab group & indicator ── */
        sl-tab-group {
            /* active underline color */
            --indicator-color: var(--primary-color);
            overflow-x: hidden !important;
        }

        /* move the active-tab indicator to the left */
        sl-tab-group[placement="start"]::part(active-tab-indicator) {
            inset-inline-start: 0;
            inset-inline-end: auto;
            width: 4px;
        }

        sl-tab-panel{
            overflow-x: hidden !important;
            overflow-y: hidden !important;
        }

        /* default (non-active) tab text color */
        sl-tab {
            color: var(--tab-inactive);
        }

        /* active tab text color */
        sl-tab[active] {
            color: var(--tab-active);
        }

        /* ── Restore your 36px Rubik tab labels ── */
        sl-tab .tab-label {
            /* inherit the active/inactive color */
            color: inherit;

            font-family: 'Rubik', sans-serif;
            font-size: 36px;
            font-weight: 600;
            text-transform: capitalize;
            line-height: 50.4px;
            word-wrap: break-word;
        }

        /* default tab-label size */
        sl-tab .tab-label {
            font-size: 36px;
            line-height: 50.4px;
            padding: 0 30px;
            text-align: left;
        }

        /* on mobile (<768px), shrink the label */
        @media (max-width: 991.98px) {
            sl-tab .tab-label {
                font-size: 24px;
                line-height: 34px;
            }
            sl-tab-panel{
                margin-top: 10px;
            }
        }
        @media (max-width: 768px) {
            sl-tab .tab-label {
                font-size: 18px;
                line-height: 34px;
                padding: 0 10px;
            }
            sl-tab-panel{
                margin-top: 10px;
            }
        }


        /* ── Frosted-glass card inside each panel ── */
        .frosted-card {
            width: 100%;
            padding: 32px;
            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%
            );
            border-radius: 32px;
            outline: 1px solid var(--outline-color);
            outline-offset: -2px;
            backdrop-filter: blur(24px);
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 16px;
            overflow-x: hidden;
        }

        /* ── Icon box ── */
        .icon-box {
            width: 50px;
            height: 50px;
            background-color: #1B1F2F;
            border-radius: 8px;
            color: #fff;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1.45px solid #fff;
            border-left: 1.45px solid #fff;
            box-sizing: border-box;
        }

        /* ── Feature title ── */
        .feature-card-title {
            color: #ffffff;
            font-family: 'Rubik', sans-serif;
            font-size: 24px;
            font-weight: 500;
            margin: 0;
        }

        /* ── Feature description ── */
        .feature-card-desc {
            width: 100%;
            color: #ABABAB;
            font-family: 'Inter', sans-serif;
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            word-wrap: break-word;
            text-align: left;
        }



        @media (min-width: 992px) {

            /* 4 cols for the vertical nav */
            sl-tab {
                width: 33.3333%;
            }

            /* 8 cols for the panels */
            .frosted-card {
                width: 100%;
            }
        }

        /****** TRANSITION ******/




    }


}


#faq-section{
    background-color: var(--primary-background);
    padding-bottom: 0;
    padding-top: 120px;
    .container{
        padding: 0;
        .accordion-item {
            background-color: var(--primary-background) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            margin-bottom: 1rem;
            overflow: hidden;
            color: #fff; /* For light text */
        }

        .accordion-button {
            background-color: var(--primary-background) !important;
            color: #fff;
            font-weight: 500;
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--primary-background) !important;
            color: #fff;
        }

        .accordion-body {
            /*background-color: rgba(0, 0, 0, 0.05);*/
            background-color: var(--primary-background);
            color: #eee;
        }


        .faq-heading {
            color: white;
            font-size: 48px;
            font-family: 'Rubik', sans-serif;
            font-weight: 500;
            text-transform: capitalize;
            line-height: 67.2px;
            text-align: start;
        }

        .faq-subtitle {
            color: #ABABAB;
            font-size: 20px;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            line-height: 30px;
            text-align: start;
        }

        .frosted-accordion .accordion-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            margin-bottom: 1rem;
            color: #fff;
        }

        .accordion-title {
            color: white;
            font-size: 20px;
            font-family: 'Rubik', sans-serif;
            font-weight: 500;
            text-transform: capitalize;
            line-height: 22px;
            text-align: start;
        }

        .accordion-text {
            color: #ABABAB;
            font-size: 16px;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            line-height: 24px;
            text-align: start;
        }

        .accordion-button {
            background-color: transparent;
            color: white;
        }

        .accordion-button:not(.collapsed) {
            background-color: rgba(255, 255, 255, 0.15);
        }



        .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
            outline: none;
        }
        .accordion-button {
            border: none;
        }


        .accordion-button,.accordion-header,.accordion-body {
            border-bottom: none !important;
            box-shadow: none;
            border-color: rgba(0,0,0,.125);
        }


    }
}

#seventh-section {
    background-color: var(--primary-background);
    .container{
        padding: 0;
        /* Container that wraps everything */
        position: relative;      /* NEW */
        .cta-section {
            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;
        }


    }
}