.elementor-kit-89{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"sweet-square-pro";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"sweet-square-pro";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"sweet-square-pro";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"sweet-square-pro";--e-global-typography-accent-font-weight:500;background-color:transparent;color:#E1C1C1;background-image:linear-gradient(180deg, #0A0324 0%, #3B224F 100%);}.elementor-kit-89 button,.elementor-kit-89 input[type="button"],.elementor-kit-89 input[type="submit"],.elementor-kit-89 .elementor-button{background-color:transparent;background-image:radial-gradient(at center center, #E1D8E2 0%, #DACCD0 100%);border-radius:22px 22px 22px 22px;}.elementor-kit-89 e-page-transition{background-color:#FFBC7D;}.elementor-kit-89 p{margin-block-end:0px;}.elementor-kit-89 h1{color:#DAC3C3;}.elementor-kit-89 h2{color:#E5DBDB;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --h1:sweet-square-pro; }
/* Start custom CSS *//* ============================================================
   1. ROADMAP: GLASS & GRID ARCHITECTURE (RESTORED ALIGNMENT)
   ============================================================ */

.roadmap-left-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 120px;
    align-self: flex-start;
    height: fit-content;
    overflow: visible !important;
    z-index: 10;
    padding-left: 110px !important; 
    margin-top: 0px !important;
}

/* The Subtle Vertical Rail */
.roadmap-left-sticky::before {
    content: '';
    position: absolute;
    left: 75px; 
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.05);
    background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.15) 85%, transparent);
    z-index: 1;
}

.roadmap-nav-item {
    cursor: pointer;
    opacity: 0.3;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    padding-top: 5px !important;
    /* REDUCED: Back to a smaller size to stop boxes from being "too big" */
    padding-bottom: 40px !important; 
    padding-left: 35px !important;
    padding-right: 35px !important;
    margin-bottom: 25px !important;
    position: relative;
    border-radius: 15px; 
    z-index: 2;
    overflow: visible !important;
}

.roadmap-nav-item::before {
    position: absolute;
    left: -100px; 
    top: 0px;
    font-size: 32px; 
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.15); 
    transition: all 0.5s ease;
    z-index: 1;
}

.nav-item-1::before { content: '01'; }
.nav-item-2::before { content: '02'; }
.nav-item-3::before { content: '03'; }
.nav-item-4::before { content: '04'; }

.roadmap-nav-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 0% 50%, rgba(255, 87, 51, 0.12), transparent 70%);
    background-color: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0; 
    z-index: -1;
    transition: all 0.6s ease;
    transform: scale(0.95);
}

/* ============================================================
   2. LUXURY HUD: DOTS & SCROLL PROGRESS LINE (UPDATED)
   ============================================================ */

.roadmap-nav-item-dot {
    position: absolute;
    left: -39px; 
    top: 14px;
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.7); 
    border-radius: 50%;
    border: 1px solid rgba(255, 87, 51, 0.4);
    z-index: 10;
    transition: all 0.4s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* HIDDEN: This kills the text in brackets [] */
.roadmap-status-label {
    display: none !important;
}

/* THE PROGRESS TRACKER (The loading line you wanted) */
.roadmap-progress-container {
    position: absolute;
    bottom: 15px; 
    left: 35px;
    right: 35px;
    height: 1px; 
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.roadmap-progress-line {
    width: 0%; 
    height: 100%;
    background: #FF5733;
    box-shadow: 0 0 10px #FF5733, 0 0 2px #ffffff;
    transition: width 0.1s linear;
}

.roadmap-nav-item.is-active {
    opacity: 1;
}

.roadmap-nav-item.is-active::after {
    opacity: 1;
    transform: scale(1);
    border: 1px solid rgba(255, 87, 51, 0.25); 
}

.roadmap-nav-item.is-active::before {
    color: #FF5733;
    transform: translateX(5px);
    text-shadow: 0 0 15px rgba(255, 87, 51, 0.6);
}

.roadmap-nav-item.is-active .roadmap-nav-item-dot {
    opacity: 0;
    transform: scale(0);
}

/* Reveal progress bar only when active */
.roadmap-nav-item.is-active .roadmap-progress-container {
    opacity: 1;
}

.roadmap-nav-item h3, 
.roadmap-nav-item .elementor-heading-title {
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
    transition: all 0.4s ease;
}

.roadmap-nav-item.is-active h3, 
.roadmap-nav-item.is-active .elementor-heading-title {
    color: #FF5733 !important;
    text-shadow: 0 0 20px rgba(255, 87, 51, 0.4);
}

.roadmap-description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.8s ease;
}

.roadmap-nav-item.is-active .roadmap-description {
    max-height: 600px;
    opacity: 0.75;
    padding-top: 5px;
}

/* ============================================================
   3. ROADMAP: GUIDED SCROLL ARROW & HUD LASER
   ============================================================ */

.roadmap-scroll-arrow {
    position: absolute;
    left: 67px; 
    width: 16px;
    height: 16px;
    background-color: #FF5733;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%); 
    z-index: 100;
    transition: top 0.6s cubic-bezier(0.23, 1, 0.32, 1); 
    box-shadow: 0 0 20px #FF5733;
    filter: drop-shadow(0 0 8px #FF5733);
}

.roadmap-scroll-arrow::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 7px;
    width: 2px;
    height: 20px;
    background-image: linear-gradient(to bottom, transparent, #FF5733);
}

.roadmap-scroll-arrow::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 10px;
    width: 0; 
    height: 1px;
    background-color: #FF5733;
    box-shadow: 0 0 12px #FF5733;
    opacity: 0.9;
    transition: width 0.8s ease-out 0.4s;
}

.js-ready .roadmap-scroll-arrow::after {
    width: 65px;
}

/* ============================================================
   4. VISIBILITY & MOBILE RESPONSIVE LOGIC
   ============================================================ */

@media (min-width: 1025px) {
    .mobile-sticky-header {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .roadmap-parent-container {
        flex-direction: column !important;
    }

    .roadmap-left-sticky {
        display: none !important; 
    }

    .roadmap-right-content {
        width: 100% !important;
    }

    .mobile-sticky-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0; 
        z-index: 100;
        background-color: #120321;
        padding: 15px 20px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: block !important;
    }

    .mobile-sticky-header.is-active h3,
    .mobile-sticky-header.is-active .elementor-heading-title {
        color: #FF5733 !important;
        transition: color 0.4s ease;
    }

    #Roadmap1, #Roadmap2, #Roadmap3, #Roadmap4 {
        overflow: visible !important;
        position: relative;
    }
}

/* ============================================================
   5. HERO SECTION: BRUTE-FORCE MOBILE REFINEMENT
   ============================================================ */

@media (max-width: 767px) {
    .hero-parent-container {
        flex-direction: column-reverse !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 40px 15px !important;
    }

    .hero-lottie, 
    .hero-lottie .elementor-widget-container,
    .hero-lottie .elementor-lottie__player {
        width: 100% !important;
        max-width: 280px !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    .hero-lottie .elementor-lottie__player svg {
        width: 100% !important;
        height: auto !important;
    }

    .hero-parent-container .elementor-widget-heading,
    .hero-parent-container .elementor-widget-text-editor {
        width: 100% !important;
        text-align: center !important;
    }

    .hero-parent-container .elementor-heading-title {
        text-align: center !important;
    }

    .hero-parent-container .elementor-widget-button {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 15px !important;
    }
    
    .hero-parent-container .elementor-button-wrapper {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
}
/* ====================== Roadmap Focus Effect  ======================*/

/* 1. Default State: Dimmed & Blurred */
#Roadmap1, #Roadmap2, #Roadmap3, #Roadmap4 {
    opacity: 0.2; 
    filter: blur(4px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform: scale(0.95);
}

/* 2. Active State: Sharp & Focused */
#Roadmap1.section-focused, 
#Roadmap2.section-focused, 
#Roadmap3.section-focused, 
#Roadmap4.section-focused {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: scale(1) !important;
}

/* --- HUD Brackets (Targeting System) --- */

/* 1. The Brackets Base State */
#Roadmap1::before, #Roadmap1::after,
#Roadmap2::before, #Roadmap2::after,
#Roadmap3::before, #Roadmap3::after,
#Roadmap4::before, #Roadmap4::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #FF5733; /* Your brand orange */
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    z-index: 5;
}

/* Position: Top-Left Bracket */
#Roadmap1::before, #Roadmap2::before, #Roadmap3::before, #Roadmap4::before {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
    transform: translate(-10px, -10px);
}

/* Position: Bottom-Right Bracket */
#Roadmap1::after, #Roadmap2::after, #Roadmap3::after, #Roadmap4::after {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
    transform: translate(10px, 10px);
}

/* 2. The Active "Locked-On" State */
.section-focused::before,
.section-focused::after {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* Add a tiny glowing dot in the corner for extra detail */
.section-focused::before {
    box-shadow: -2px -2px 10px rgba(255, 87, 51, 0.5);
}/* End custom CSS */