/* =========================================
           1. RESETS & VARIABLES (V2)
           ========================================= */
        .fcrf-v2-footer-module {
            font-family: 'Inter', sans-serif;
            background-color: #000000;
            color: #000000;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            width: 100%;
        }
        
        .fcrf-v2-footer-module *, 
        .fcrf-v2-footer-module ::before, 
        .fcrf-v2-footer-module ::after {
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
            border-color: currentColor;
            margin: 0.2px;
            padding: 0;
        }

        .fcrf-v2-footer-module h1, 
        .fcrf-v2-footer-module h2, 
        .fcrf-v2-footer-module h3, 
        .fcrf-v2-footer-module p { margin: 0; padding: 0; }
        
        .fcrf-v2-footer-module button { 
            cursor: pointer; 
            background: transparent; 
            padding: 0; 
            font-family: inherit; 
            font-size: inherit; 
            line-height: inherit; 
        }
        
        .fcrf-v2-footer-module a { color: inherit; text-decoration: inherit; }
        .fcrf-v2-footer-module img, .fcrf-v2-footer-module svg { display: block; }
        .fcrf-v2-footer-module hr { height: 0; color: inherit; border-top-width: 1px; }

        /* =========================================
           2. LAYOUT WRAPPERS (V2)
           ========================================= */
        .fcrf-v2-footer-module .fcrf-v2-main-wrapper {
            background-color: #ffffff;
            position: relative;
            z-index: 10;
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        @media (min-width: 768px) {
            .fcrf-v2-footer-module .fcrf-v2-main-wrapper {
                border-bottom-left-radius: 4rem;
                border-bottom-right-radius: 4rem;
            }
        }

        .fcrf-v2-footer-module .fcrf-v2-bg-pattern {
            position: absolute;
            top: 25%;
            left: 0;
            width: 100%;
            height: 400px;
            pointer-events: none;
            opacity: 0.04;
            z-index: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        /* =========================================
           3. WHAT DEFINES US SECTION (V2)
           ========================================= */
        .fcrf-v2-footer-module .fcrf-v2-defines-us-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            max-width: 1536px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
            padding: 4rem 1rem 2rem 1rem;
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-defines-us-section { padding: 6rem 3rem 3rem 3rem; } }
        @media (min-width: 1024px) { .fcrf-v2-footer-module .fcrf-v2-defines-us-section { padding: 6rem 5rem 3rem 5rem; } }

        .fcrf-v2-footer-module .fcrf-v2-defines-us-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
            align-items: flex-start;
            width: 100%;
            position: relative;
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-defines-us-grid { gap: 3rem; } }

        .fcrf-v2-footer-module .fcrf-v2-left-col {
            grid-column: span 5 / span 5;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-left-col { grid-column: span 4 / span 4; } }

        .fcrf-v2-footer-module .fcrf-v2-right-col {
            grid-column: span 7 / span 7;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            padding-left: 0.5rem;
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-right-col { grid-column: span 8 / span 8; padding-left: 4rem; margin-top: 0.5rem; } }
        @media (min-width: 1280px) { .fcrf-v2-footer-module .fcrf-v2-right-col { padding-left: 6rem; } }

        /* Typography */
        .fcrf-v2-footer-module .fcrf-v2-title-main {
            font-weight: 900;
            letter-spacing: -0.025em;
            color: #000000;
            margin-bottom: 1.5rem;
            font-size: clamp(1.2rem, 4vw, 3.75rem);
            line-height: 1.1;
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-title-main { margin-bottom: 5rem; } }

        .fcrf-v2-footer-module .fcrf-v2-subtitle-main {
            font-weight: 700;
            letter-spacing: -0.025em;
            color: #000000;
            margin-bottom: 1rem;
            font-size: clamp(1rem, 2.5vw, 2.75rem);
            line-height: 1.3;
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-subtitle-main { margin-bottom: 2rem; } }

        .fcrf-v2-footer-module .fcrf-v2-text-desc {
            color: #6b7280;
            font-weight: 500;
            margin-bottom: 1.5rem;
            font-size: clamp(0.6rem, 1.25vw, 1.25rem);
            line-height: 1.6;
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-text-desc { margin-bottom: 3rem; } }

        /* Button */
        .fcrf-v2-footer-module .fcrf-v2-button-group {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .fcrf-v2-footer-module .fcrf-v2-btn-primary,
        .fcrf-v2-footer-module .fcrf-v2-btn-secondary {
            background-color: #000000;
            color: #ffffff;
            border-radius: 9999px;
            font-weight: 700;
            letter-spacing: 0.025em;
            transition: background-color 0.15s ease-in-out;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 3vw, 2rem);
            font-size: clamp(0.6rem, 1vw, 15px);
            border: none;
            cursor: pointer;
        }
        @media (min-width: 768px) { 
            .fcrf-v2-footer-module .fcrf-v2-btn-primary,
            .fcrf-v2-footer-module .fcrf-v2-btn-secondary { gap: 0.75rem; } 
        }
        .fcrf-v2-footer-module .fcrf-v2-btn-primary:hover,
        .fcrf-v2-footer-module .fcrf-v2-btn-secondary:hover { background-color: #1f2937; }
        .fcrf-v2-footer-module .fcrf-v2-btn-icon { font-size: clamp(0.8rem, 1.5vw, 1.25rem); line-height: 1; font-weight: inherit; }

        /* Arrow */
        .fcrf-v2-footer-module .fcrf-v2-arrow-container {
            position: relative;
            width: 20vw;
            height: 20vw;
            max-width: 280px;
            max-height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: center;
        }
        @media (min-width: 768px) {
            .fcrf-v2-footer-module .fcrf-v2-arrow-container { align-self: flex-start; margin-left: 1rem; }
        }
        .fcrf-v2-footer-module #fcrf-v2-tracking-arrow {
            width: 100%;
            height: 100%;
            overflow: visible;
            will-change: transform;
            transform-origin: 50% 50%;
        }

        /* =========================================
           4. CLOCKS SECTION (V2)
           ========================================= */
        .fcrf-v2-footer-module .fcrf-v2-clocks-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
            z-index: 10;
            width: 100%;
            overflow: hidden;
            gap: 0.5rem;
            padding: 1.5rem 0.5rem 2.5rem 0.5rem;
        }
        @media (min-width: 768px) {
            .fcrf-v2-footer-module .fcrf-v2-clocks-container { flex-wrap: nowrap; gap: 1.5rem; padding: 2rem 1rem 3rem 1rem; }
        }

        .fcrf-v2-footer-module .fcrf-v2-clock-item {
            border: 1px solid #000000;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            background-color: #ffffff;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            white-space: nowrap;
            padding: 0.375rem 0.625rem;
            gap: 0.25rem;
            font-size: clamp(0.5rem, 1.2vw, 1rem);
        }
        @media (min-width: 768px) {
            .fcrf-v2-footer-module .fcrf-v2-clock-item { border-radius: 2rem; padding: 0.625rem 1.25rem; gap: 0.5rem; }
        }

        .fcrf-v2-footer-module .fcrf-v2-clock-time { color: #000000; font-weight: 500; }

        /* =========================================
           5. FOOTER SECTION (V2)
           ========================================= */
        .fcrf-v2-footer-module .fcrf-v2-main-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #000000;
            color: #ffffff;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 5rem 1rem 6rem 1rem;
            visibility: hidden; 
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-main-footer { padding: 6rem 3rem 2.5rem 3rem; } }

        .fcrf-v2-footer-module .fcrf-v2-giant-text-container {
            display: flex;
            justify-content: center;
            width: 100%;
            overflow: hidden;
            user-select: none;
            margin-bottom: 2rem;
            padding: 1rem 2vw 1rem 2vw; 
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-giant-text-container { margin-bottom: 4rem; padding: 1.5rem 2vw 1.5rem 2vw; } }

        .fcrf-v2-footer-module .fcrf-v2-giant-text-inner {
            display: inline-flex;
            flex-direction: column;
            position: relative;
            transform: translateY(140px);
            opacity: 0;
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
            padding-bottom: 0.5rem; 
        }

        .fcrf-v2-footer-module .fcrf-v2-main-footer.fcrf-v2-is-visible .fcrf-v2-giant-text-inner {
            transform: translateY(0);
            opacity: 1;
        }

        .fcrf-v2-footer-module .fcrf-v2-new-branding-layout {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            width: 100%;
        }

        .fcrf-v2-footer-module .fcrf-v2-branding-top {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #ffffff;
        }

        .fcrf-v2-footer-module .fcrf-v2-brand-name {
            font-family: 'Aquire', sans-serif;
            font-size: clamp(1rem, 2.5vw, 1.5rem);
            font-weight: 600;
            letter-spacing: 0.1em;
        }

        .fcrf-v2-footer-module .fcrf-v2-giant-muted-text {
            
            font-size: clamp(2rem, 9.5vw, 13rem);
            font-weight: 900;
            line-height: 1.2;
            margin-bottom: 0;
            white-space: nowrap;
            letter-spacing: -0.05em;
            transform: scaleY(1.15);
            
            color: #3a3a3a;
            background: linear-gradient(110deg, #3a3a3a 0%, #3a3a3a 40%, #ffffff 50%, #3a3a3a 60%, #3a3a3a 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: fcrfV2TextGlowSweep 3s linear infinite; 
        }

        @keyframes fcrfV2TextGlowSweep {
            to {
                background-position: 200% center;
            }
        }

        .fcrf-v2-footer-module .fcrf-v2-footer-divider {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 1.5rem;
            width: 100%;
        }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-footer-divider { margin-bottom: 2rem; } }

        .fcrf-v2-footer-module .fcrf-v2-footer-bottom {
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
            width: 100%;
            gap: 1.25rem; 
        }
        @media (min-width: 768px) {
            .fcrf-v2-footer-module .fcrf-v2-footer-bottom {
                flex-direction: row; 
                justify-content: space-between;
                gap: 0.5rem;
            }
        }

        .fcrf-v2-footer-module .fcrf-v2-social-icons,
        .fcrf-v2-footer-module .fcrf-v2-nav-links,
        .fcrf-v2-footer-module .fcrf-v2-footer-copy {
            display: flex;
            width: 100%;
            justify-content: center;
        }
        
        @media (min-width: 768px) {
            .fcrf-v2-footer-module .fcrf-v2-social-icons,
            .fcrf-v2-footer-module .fcrf-v2-nav-links,
            .fcrf-v2-footer-module .fcrf-v2-footer-copy {
                width: 33.333333%;
            }
            .fcrf-v2-footer-module .fcrf-v2-social-icons { justify-content: flex-start; }
            .fcrf-v2-footer-module .fcrf-v2-footer-copy { text-align: right; display: block; }
        }

        .fcrf-v2-footer-module .fcrf-v2-social-icons { gap: 1rem; }
        @media (min-width: 768px) { .fcrf-v2-footer-module .fcrf-v2-social-icons { gap: 1.5rem; } }

        .fcrf-v2-footer-module .fcrf-v2-social-icon-link {
            color: #ffffff;
            transition: color 0.15s ease-in-out;
        }
        .fcrf-v2-footer-module .fcrf-v2-social-icon-link:hover { color: #9ca3af; }

        .fcrf-v2-footer-module .fcrf-v2-svg-sm { width: 1.25rem; height: 1.25rem; }
        .fcrf-v2-footer-module .fcrf-v2-svg-md { width: 1.5rem; height: 1.5rem; }

        .fcrf-v2-footer-module .fcrf-v2-nav-links {
            font-weight: 600;
            letter-spacing: 0.025em;
            white-space: normal; 
            flex-wrap: wrap;
            font-size: clamp(0.6rem, 1vw, 13px);
            column-gap: 1rem;
            row-gap: 0.5rem;
        }
        @media (min-width: 768px) { 
            .fcrf-v2-footer-module .fcrf-v2-nav-links { column-gap: 1.25rem; white-space: nowrap; flex-wrap: nowrap; font-size: clamp(0.45rem, 1vw, 13px); } 
        }
        
        .fcrf-v2-footer-module .fcrf-v2-nav-links a { transition: color 0.15s ease-in-out; }
        .fcrf-v2-footer-module .fcrf-v2-nav-links a:hover { color: #d1d5db; }

        .fcrf-v2-footer-module .fcrf-v2-footer-copy {
            text-align: center;
            color: #d1d5db;
            line-height: 1.4;
            font-size: clamp(0.55rem, 0.9vw, 12px);
        }
        @media (min-width: 768px) {
            .fcrf-v2-footer-module .fcrf-v2-footer-copy { line-height: 1.25; font-size: clamp(0.4rem, 0.9vw, 12px); }
        }

        /* Store Badges CSS */
        .fcrf-v2-footer-module .fcrf-v2-app-downloads-wrapper {
            display: flex;
            width: 100%;
            justify-content: center;
            margin-top: 2rem;
        }

        .fcrf-v2-footer-module .fcrf-v2-app-downloads {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .fcrf-v2-footer-module .fcrf-v2-store-badge {
            display: inline-flex;
            align-items: center;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 0.5rem;
            padding: 0.4rem 0.75rem;
            color: #ffffff;
            gap: 0.5rem;
            transition: all 0.2s ease-in-out;
            text-decoration: none;
        }

        .fcrf-v2-footer-module .fcrf-v2-store-badge:hover {
            border-color: #ffffff;
            background-color: rgba(255, 255, 255, 0.05);
        }

        .fcrf-v2-footer-module .fcrf-v2-store-badge svg {
            width: 1.25rem;
            height: 1.25rem;
            fill: currentColor;
        }

        .fcrf-v2-footer-module .fcrf-v2-store-badge-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .fcrf-v2-footer-module .fcrf-v2-store-badge-sub {
            font-size: 0.45rem;
            line-height: 1;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #9ca3af;
        }

        .fcrf-v2-footer-module .fcrf-v2-store-badge-title {
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.2;
        }

        /* Made By Section CSS */
        .fcrf-v2-footer-module .fcrf-v2-divider-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            margin-top: 2rem;
            margin-bottom: 1rem;
            width: 100%;
        }

        .fcrf-v2-footer-module .fcrf-v2-made-by-text {
            text-align: center;
            color: #9ca3af;
            font-size: clamp(0.55rem, 0.8vw, 11px);
            letter-spacing: 0.05em;
            font-weight: 500;
        }



        
             .sam-root {
            /* Component-specific variables */
            --sam-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --sam-btn-bg: #1e293b; /* Sleek, universal Dark Slate/Blue instead of grey */
            --sam-btn-hover: #0f172a; /* Deeper midnight shade for hover */
            --sam-accent: #3b82f6; /* Vibrant primary blue for the progress ring */
            
            position: fixed;
            bottom: 80px; 
            right: 1rem; 
            z-index: 9999; 
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            font-family: 'Plus Jakarta Sans', sans-serif; 
        }

        /* Scoped Reset - Only applies to elements inside the menu */
        .sam-root *, 
        .sam-root *::before, 
        .sam-root *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .sam-root {
    pointer-events: none;
}

.sam-trigger,
.sam-container,
.sam-scroll-wrapper {
    pointer-events: auto;
}

        /* FIX: Apply resets directly to the classes to avoid CSS specificity overriding the background */
        .sam-item, .sam-trigger, .sam-scroll-up {
            border: none;
            font-family: inherit;
            cursor: pointer;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* Animated Items Container */
        .sam-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
    margin-right: 0.5rem;
    pointer-events: none;
}

.sam-active .sam-container {
    pointer-events: auto;
}

        /* Menu Items */
        .sam-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background-color: var(--sam-btn-bg);
            color: white;
            padding: 0.625rem 1.25rem;
            border-radius: 9999px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            border: none; 
            text-decoration: none; /* HINT: Added this to remove the default link underline */
            
            /* Initial Closed State */
            transform: translateY(20px) scale(0.9);
            opacity: 0;
            filter: blur(4px);
            pointer-events: none;
            
            /* Combined Transitions */
            transition: 
                transform 0.5s var(--sam-spring),
                opacity 0.4s ease,
                filter 0.4s ease,
                background-color 0.15s ease-out; 
        }

        .sam-item:hover {
            background-color: var(--sam-btn-hover);
        }

        /* Opened State */
        .sam-active .sam-item {
            transform: translateY(0) scale(1);
            opacity: 1;
            filter: blur(0);
            pointer-events: auto;
        }

        /* Active/Click State */
        .sam-active .sam-item:active {
            transform: scale(0.95);
            transition: transform 0.15s ease;
        }

        .sam-text {
            font-weight: 600;
            font-size: 15px;
            white-space: nowrap;
        }

        /* Main FAB Trigger */
        .sam-trigger {
            width: 3rem;
            height: 3rem;
            background-color: var(--sam-btn-bg);
            color: white;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            transition: transform 0.25s var(--sam-spring), background-color 0.15s ease-out;
        }

        .sam-trigger:hover {
            background-color: var(--sam-btn-hover);
            transform: translateY(-2px) scale(1.03); 
        }

        .sam-trigger:active {
            transform: scale(0.92); 
            transition: transform 0.15s ease;
        }

 /* HINT: Start of icon CSS changes (Removed CSS-Only Plus Icon, added ? and X SVGs) */
        .sam-icon-container {
            position: relative;
            width: 24px;
            height: 24px;
        }

        .sam-icon-container svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: transform 0.4s var(--sam-spring), opacity 0.3s ease;
        }

        .sam-icon-question {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        .sam-icon-close {
            opacity: 0;
            transform: rotate(-90deg) scale(0.5);
        }

        .sam-active .sam-icon-question {
            opacity: 0;
            transform: rotate(90deg) scale(0.5);
        }

        .sam-active .sam-icon-close {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }
        /* Action Row (Bottom) */
        .sam-action-row {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* Scroll Up Wrapper & Progress Ring */
        .sam-scroll-wrapper {
            position: relative;
            width: 3rem;
            height: 3rem;
            border-radius: 9999px;
            transition: transform 0.25s var(--sam-spring), opacity 0.3s ease, visibility 0.3s ease;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .sam-scroll-wrapper.sam-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .sam-scroll-wrapper:hover {
            transform: translateY(-2px) scale(1.03);
        }

        .sam-scroll-wrapper:active {
            transform: scale(0.92);
            transition: transform 0.15s ease;
        }

        .sam-progress-ring {
            position: absolute;
            top: -6px;
            left: -6px;
            width: calc(100% + 12px);
            height: calc(100% + 12px);
            transform: rotate(-90deg);
            z-index: 1;
            pointer-events: none;
        }

        .sam-progress-ring circle {
            fill: transparent;
            stroke-width: 2.5px;
            stroke-linecap: round;
        }

        .sam-ring-bg {
            stroke: rgba(255, 255, 255, 0.1); /* Updated to look better on dark slate */
        }

        .sam-ring-progress {
            stroke: var(--sam-accent);
            transition: stroke-dashoffset 0.1s ease-out, stroke 0.15s ease-out;
        }

        .sam-scroll-wrapper:hover .sam-ring-progress {
            stroke: #60a5fa; /* Lighter blue on hover */
        }

        /* Scroll Up Button inside wrapper */
        .sam-scroll-up {
            width: 100%;
            height: 100%;
            background-color: var(--sam-btn-bg);
            color: white;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.15s ease-out;
            position: relative;
            z-index: 2;
        }

        .sam-scroll-wrapper:hover .sam-scroll-up {
            background-color: var(--sam-btn-hover);
        }

        /* Added just so you can test scrolling in the preview */
        body {
            min-height: 200vh;
        }

        /* --- Responsive / Mobile Adjustments --- */
        @media (max-width: 640px) {
            .sam-root {
                right: 0.25rem; 
            }

            .sam-trigger, .sam-scroll-wrapper {
                width: 2.75rem;
                height: 2.75rem;
            }

            .sam-container {
                margin-right: 0.25rem; 
                gap: 0.4rem;
            }

            .sam-item {
                padding: 0.5rem 1rem;
                gap: 0.5rem;
            }

            .sam-text {
                font-size: 14px;
            }

            .sam-item svg {
                width: 18px;
                height: 18px;
            }

            .sam-action-row {
                gap: 0.75rem;
            }
        }



        /* .
           STYLES
           Everything is scoped to .expert-showcase to prevent conflicts
           . */
        
        .expert-showcase {
            /* Localized Variables */
            --primary: #ffffff; 
            --primary-hover: #000000;
            --border-light: rgba(255, 255, 255, 0.15);
            --text-dark: #ffffff; 
            --text-gray: #a3a3a3; 
            --bg-base: #000000;
            --card-bg: #0a0a0a;
            --linkedin-btn: #ffffff; 
            --linkedin-hover: #cccccc;
            --card-gap: 1.5rem;

            /* Base typography and background scoped to this section */
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: var(--bg-base);
            background: radial-gradient(circle at 50% 50%, #060606 0%, #000000 100%);
            color: var(--text-dark);
            -webkit-font-smoothing: antialiased;

            /* Layout constraints */
            width: 100%;
            padding: 6rem 1rem;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        /* Scoped reset so it doesn't affect the rest of your site */
        .expert-showcase *,
        .expert-showcase *::before,
        .expert-showcase *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* .
           LAYOUT & CONTAINERS & PREMIUM BACKGROUND
           . */

        /* 1. Abstract Swoosh Design (Premium 3D Brand Identity) */
        .expert-bg-swoosh {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23050505'/%3E%3Cstop offset='40%25' stop-color='%23161616'/%3E%3Cstop offset='100%25' stop-color='%23080808'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23121212'/%3E%3Cstop offset='100%25' stop-color='%230a0a0a'/%3E%3C/linearGradient%3E%3Cfilter id='shadow'%3E%3CfeDropShadow dx='0' dy='15' stdDeviation='20' flood-color='%23000000' flood-opacity='1'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-200,800 C200,600 400,-100 800,150 C1200,400 900,900 1400,600 C1600,480 1700,200 1900,100' stroke='url(%23g1)' stroke-width='80' stroke-linecap='round' fill='none' filter='url(%23shadow)'/%3E%3Cpath d='M0,950 C350,850 650,300 1000,450 C1350,600 1200,900 1600,650 C1750,550 1850,350 2000,200' stroke='url(%23g2)' stroke-width='50' stroke-linecap='round' fill='none' filter='url(%23shadow)'/%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
            opacity: 0.9;
        }

        /* 2. Ambient Center Glow */
        .expert-ambient-glow {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .expert-ambient-glow::before {
            content: "";
            position: absolute;
            width: 500px;
            height: 250px;
            background-color: rgba(255, 255, 255, 0.04);
            border-radius: 50%;
            filter: blur(100px);
        }

        .expert-container {
            max-width: 80rem; /* 1280px */
            margin: 0 auto;
            position: relative;
            z-index: 10; 
        }

        /* .
           HEADER & NAVIGATION
           . */
        .expert-header {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .expert-header-text {
            text-align: left;
        }

        .expert-title-main {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
        }

        .expert-subtitle {
            font-size: 1rem;
            color: var(--text-gray);
        }

        .expert-nav-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-shrink: 0;
        }

        .expert-nav-btn {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            border: 1px solid var(--border-light);
            background-color: transparent;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
            outline: none;
        }

        .expert-nav-btn:hover {
            background-color: var(--primary);
            color: var(--primary-hover);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
        }

        .expert-nav-btn svg {
            width: 1.25rem;
            height: 1.25rem;
        }

        .expert-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            height: 1rem;
            padding: 0 0.5rem;
        }

        .expert-dot {
            border-radius: 50%;
            background-color: var(--primary);
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
            display: block;
        }
        
        .expert-dot-mid { width: 10px; height: 10px; opacity: 1; box-shadow: 0 0 8px rgba(255,255,255,0.5); transform: scale(1); }
        .expert-dot-small { width: 8px; height: 8px; opacity: 0.5; transform: scale(0.9); }
        .expert-dot-xsmall { width: 6px; height: 6px; opacity: 0.2; transform: scale(0.8); }

        /* .
           CAROUSEL
           . */
        .expert-carousel {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            overscroll-behavior-x: contain; /* Prevents whole-page swipe on mobile */
            gap: var(--card-gap);
            padding-bottom: 2rem;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;  
            scrollbar-width: none;  
        }

        .expert-carousel::-webkit-scrollbar {
            display: none;
        }

        /* .
           CARDS (Optimized for performance)
           . */
        .expert-card {
            position: relative;
            flex: 0 0 auto;
            width: 85vw;
            height: 400px;
            border-radius: 2rem;
            overflow: hidden;
            background-color: var(--card-bg);
            border: 1px solid rgba(255,255,255,0.05); 
            box-shadow: 0 4px 20px -10px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            scroll-snap-align: start;
            
            /* Performance optimizations */
            transform: translateZ(0); /* Force hardware acceleration */
            will-change: transform;
            /* Smooth specific properties instead of 'all' to prevent lag */
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                        border-color 0.4s ease, 
                        box-shadow 0.4s ease;
        }

        .expert-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 0;
            opacity: 0.85; 
            
            /* Performance optimizations */
            transform: translateZ(0) scale(1);
            will-change: transform;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
        }

        .expert-spacer {
            height: 62%;
            position: relative;
            z-index: 10;
        }

        /* .
           DARK GLASSMORPHISM DETAILS
           . */
        .expert-card-details {
            position: relative;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            z-index: 20;
            margin-top: 2rem;
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
        }

        .expert-curve {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 100%;
            height: 32px;
            margin-bottom: -1px;
            color: rgba(12, 12, 12, 0.9); /* Slightly more solid to boost performance */
            fill: currentColor;
        }

        .expert-social-badge {
            position: absolute;
            right: 1.25rem;
            top: -14px;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 4px;
            background-color: var(--linkedin-btn);
            color: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            z-index: 30;
            text-decoration: none;
            
            /* Specific transition */
            transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .expert-social-badge:hover {
            background-color: var(--linkedin-hover);
            transform: translateY(-3px);
        }

        .expert-social-badge svg {
            width: 0.875rem;
            height: 0.875rem;
            fill: currentColor;
        }

        .expert-glass-panel {
            background-color: rgba(12, 12, 12, 0.9); /* More opaque, less reliance on blur */
            /* Reduced blur radius from 16px to 10px. Drastically improves scroll FPS */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0 1.25rem 1.25rem 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
            color: var(--text-dark);
            transform: translateZ(0); /* Hardware accelerate this layer */
        }
        
        .expert-glass-panel > div:last-child {
            margin-top: 0.5rem !important; 
        }

        .expert-name {
            font-size: 1.0625rem;
            font-weight: 700;
            margin-bottom: 0.125rem;
            line-height: 1.2;
            background-image: linear-gradient(93deg, #ffffff 10%, #888888 90%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .expert-role {
            font-size: 0.8125rem;
            color: #d4d4d4; 
            font-weight: 500;
            line-height: 1.3;
        }

        .expert-company-label {
            font-size: 0.625rem;
            color: var(--text-gray);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
        }

        .expert-company-info {
            display: flex;
            align-items: center;
        }
        
        .expert-company-name {
            font-weight: 700;
            font-size: 1.1875rem;
            letter-spacing: -0.025em;
            line-height: 1;
            color: var(--text-dark);
        }

        .expert-company-icon {
            width: 1rem;
            height: 1rem;
            margin-left: 0.375rem;
            fill: #ffffff; 
            color: #ffffff;
        }

        /* Specific Company Styles (Adapted for B&W theme) */
        .flipkart-name { font-style: italic; margin-right: 0.375rem;}
        .brillio-name { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.05em; }
        .talentserv-icon { margin-left: 0; margin-right: 0.25rem; stroke: #ffffff; fill: none; }
        .talentserv-name { font-weight: 600; font-size: 0.9375rem; color: var(--text-dark); }

        /* .
           RESPONSIVE MEDIA QUERIES
           . */
        @media (min-width: 640px) {
            .expert-showcase { padding-left: 1.5rem; padding-right: 1.5rem; }
            .expert-card { width: 340px; } 
        }

        @media (min-width: 768px) {
            .expert-header {
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;
            }
            .expert-title-main { font-size: 2.5rem; }
            .expert-subtitle { font-size: 1.125rem; }
        }

        @media (min-width: 1024px) {
            .expert-showcase { padding-left: 2rem; padding-right: 2rem; }
        }



/* new banner  */



         /* --- CSS Reset & Scoped Variables --- */
        #ns-isolated-hero {
            --zinc-50: #fafafa;
            --zinc-200: #e4e4e7;
            --zinc-300: #d4d4d8;
            --zinc-400: #a1a1aa;
            --zinc-500: #71717a;
            --zinc-800: #27272a;
            --zinc-950: #09090b;
            --white: #ffffff;
            --black: #000000;
            --prisma-cream: #ebe7e0;
            --prisma-muted: #c4c1ba;
            
            background-color: var(--zinc-950);
            color: var(--zinc-50);
            font-family: 'Plus Jakarta Sans', sans-serif;
            position: relative;
            overflow-x: hidden;
            min-height: 100vh;
            line-height: 1.5;
            text-align: left;
        }

        /* Strict internal reset */
        #ns-isolated-hero *, #ns-isolated-hero *::before, #ns-isolated-hero *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        #ns-isolated-hero ::selection {
            background-color: rgba(235, 231, 224, 0.3);
        }

        #ns-isolated-hero a {
            text-decoration: none;
            color: inherit;
        }

        #ns-isolated-hero ul {
            list-style: none;
        }

        #ns-isolated-hero button {
            background: none;
            border: none;
            cursor: pointer;
            color: inherit;
            font: inherit;
            outline: none;
        }

        #ns-isolated-hero img {
            display: block;
            max-width: 100%;
        }

        #ns-isolated-hero strong {
            font-weight: inherit;
        }

        /* --- Utility Classes --- */
        #ns-isolated-hero .ns-container {
            width: 100%;
            max-width: 80rem; /* 1280px */
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        @media (min-width: 1024px) {
            #ns-isolated-hero .ns-container { padding: 0 3rem; }
        }

        #ns-isolated-hero .ns-hidden-sm { display: none; }
        @media (min-width: 640px) { #ns-isolated-hero .ns-hidden-sm { display: inline; } }

        /* --- Custom Buttons --- */
        #ns-isolated-hero .ns-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            transition: all 0.2s ease-in-out;
            border-radius: 9999px;
        }

        /* Nav Pill Buttons */
        #ns-isolated-hero .ns-btn-register {
            background-color: var(--white);
            color: var(--black);
            font-weight: 600;
            font-size: 0.9rem;
            padding: 0.65rem 1.5rem;
            height: 2.75rem;
        }
        #ns-isolated-hero .ns-btn-register:hover {
            transform: translateY(-1px);
            background-color: var(--zinc-200);
        }

        /* Main Join the Lab Callout Button */
        #ns-isolated-hero .ns-btn-join {
            background-color: var(--prisma-cream);
            color: var(--black);
            padding: 0.4rem 0.4rem 0.4rem 2rem;
            border-radius: 9999px;
            font-size: 1.1rem;
            font-weight: 600;
            font-family: 'Plus Jakarta Sans', sans-serif;
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
        }
        #ns-isolated-hero .ns-btn-join:hover {
            background-color: var(--white);
            transform: scale(1.02);
        }
        #ns-isolated-hero .ns-btn-join:hover .ns-btn-arrow-circle {
            transform: rotate(-45deg); /* Arrow points up-right on hover */
        }

        #ns-isolated-hero .ns-btn-arrow-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 50%;
            background-color: var(--black);
            color: var(--prisma-cream);
            margin-left: 1.5rem;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #ns-isolated-hero .ns-btn-arrow-circle i {
            width: 1.2rem;
            height: 1.2rem;
        }

        /* --- Header Floating Capsule --- */
        #ns-isolated-hero .ns-site-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 20;
            padding-top: 1.5rem;
            transition: all 0.3s;
        }

        #ns-isolated-hero .ns-nav-container {
            max-width: 76rem;
            width: calc(100% - 3rem);
            margin: 0 auto;
            background-color: rgba(13, 13, 13, 0.8);
            backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 9999px;
            padding: 0.6rem 1rem;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @media (min-width: 1024px) { 
            #ns-isolated-hero .ns-nav-container { padding: 0.6rem 2rem; } 
        }

        #ns-isolated-hero .ns-nav-container.ns-is-scrolled {
            background-color: rgba(9, 9, 11, 0.95);
            border-color: rgba(255, 255, 255, 0.12);
            transform: translateY(2px);
        }

        #ns-isolated-hero .ns-nav-content {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        #ns-isolated-hero .ns-nav-brand-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
        @media (min-width: 1024px) { 
            #ns-isolated-hero .ns-nav-brand-section { width: auto; justify-content: flex-start; gap: 4rem; } 
        }

        #ns-isolated-hero .ns-nav-brand { 
            display: flex; 
            align-items: center; 
            gap: 0.75rem; 
            text-transform: uppercase;
            font-family: 'Syne', sans-serif;
            letter-spacing: 0.15em;
            font-size: 1.15rem;
            font-weight: 700;
        }
        #ns-isolated-hero .ns-logo-svg {
            height: 1.25rem;
            width: auto;
        }
        
        /* NEW: Image Logo Styles */
        #ns-isolated-hero .ns-logo-img {
            height: 2.25rem; /* Adjust this value to make your logo bigger/smaller */
            width: auto;
            max-width: 200px;
            object-fit: contain;
        }

        #ns-isolated-hero .ns-desktop-links { display: none; }
        @media (min-width: 1024px) { #ns-isolated-hero .ns-desktop-links { display: block; } }
        #ns-isolated-hero .ns-desktop-links ul { display: flex; gap: 2.25rem; font-size: 0.9rem; font-weight: 500; }
        #ns-isolated-hero .ns-desktop-links a { color: var(--prisma-muted); transition: color 0.15s; }
        #ns-isolated-hero .ns-desktop-links a:hover { color: var(--white); }

        /* Mobile Menu Toggle */
        #ns-isolated-hero .ns-menu-toggle {
            display: block;
            position: relative;
            z-index: 20;
            padding: 0.5rem;
            color: var(--white);
        }
        @media (min-width: 1024px) { #ns-isolated-hero .ns-menu-toggle { display: none; } }
        
        #ns-isolated-hero .ns-menu-icon-wrapper { position: relative; width: 1.5rem; height: 1.5rem; }
        #ns-isolated-hero .ns-icon-transition { position: absolute; inset: 0; margin: auto; width: 1.5rem; height: 1.5rem; transition: all 0.2s ease-in-out; }
        
        #ns-isolated-hero .ns-icon-close { opacity: 0; transform: scale(0) rotate(-180deg); }
        #ns-isolated-hero .ns-menu-active .ns-icon-menu { opacity: 0; transform: scale(0) rotate(180deg); }
        #ns-isolated-hero .ns-menu-active .ns-icon-close { opacity: 1; transform: scale(1) rotate(0deg); }

        /* Mobile Dropdown & Desktop Actions */
        #ns-isolated-hero .ns-nav-actions {
            display: none;
            position: absolute;
            left: 0;
            top: calc(100% + 1rem);
            width: 100%;
            flex-direction: column;
            gap: 1.5rem;
            background-color: rgba(9, 9, 11, 0.98);
            backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 2rem;
            padding: 2rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
        #ns-isolated-hero .ns-nav-actions.ns-is-open { display: flex; }
        
        @media (min-width: 1024px) {
            #ns-isolated-hero .ns-nav-actions {
                display: flex;
                position: static;
                width: auto;
                margin-top: 0;
                flex-direction: row;
                align-items: center;
                gap: 1.5rem;
                background: transparent;
                backdrop-filter: none;
                border: none;
                padding: 0;
                box-shadow: none;
            }
        }

        #ns-isolated-hero .ns-mobile-links { display: block; }
        @media (min-width: 1024px) { #ns-isolated-hero .ns-mobile-links { display: none; } }
        #ns-isolated-hero .ns-mobile-links ul { display: flex; flex-direction: column; gap: 1.25rem; font-size: 1.1rem; font-weight: 500; }
        #ns-isolated-hero .ns-mobile-links a { color: var(--prisma-muted); transition: color 0.15s; }
        #ns-isolated-hero .ns-mobile-links a:hover { color: var(--white); }

        #ns-isolated-hero .ns-action-buttons {
            display: flex;
            width: 100%;
            flex-direction: column;
            gap: 0.75rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        @media (min-width: 1024px) { #ns-isolated-hero .ns-action-buttons { width: auto; padding-top: 0; border-top: none; } }
        #ns-isolated-hero .ns-action-buttons .ns-btn { width: 100%; }
        @media (min-width: 1024px) { #ns-isolated-hero .ns-action-buttons .ns-btn { width: auto; } }

        /* --- Hero Section Layout --- */
        #ns-isolated-hero .ns-hero-section {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 650px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding-bottom: 3.5rem;
        }
        @media (min-width: 768px) { #ns-isolated-hero .ns-hero-section { padding-bottom: 4.5rem; } }
        @media (min-width: 1024px) { #ns-isolated-hero .ns-hero-section { padding-bottom: 6rem; } }

        #ns-isolated-hero .ns-hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            background-color: var(--black);
        }
        #ns-isolated-hero .ns-hero-bg img,
        #ns-isolated-hero .ns-hero-bg video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0.85;
        }
        #ns-isolated-hero .ns-bg-gradient-x {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(0,0,0,0.85) 15%, rgba(0,0,0,0.3) 60%, transparent);
        }
        #ns-isolated-hero .ns-bg-gradient-y {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, var(--zinc-950) 12%, rgba(9,9,11,0.3) 65%, transparent);
        }

        #ns-isolated-hero .ns-hero-content { position: relative; z-index: 10; width: 100%; }
        
        #ns-isolated-hero .ns-hero-layout {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-end;
            gap: 1.5rem;
            width: 100%;
        }

        #ns-isolated-hero .ns-title-col {
            width: 100%;
        }

        /* MAIN HERO TITLE SETUP */
        #ns-isolated-hero .ns-hero-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(2rem, 5vw, 3.5rem); 
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--white);
            line-height: 1.15; 
            margin-bottom: 0;
            max-width: 38rem;
            text-shadow: 0 4px 12px rgba(0,0,0,0.6); /* Soft shadow to ensure readability over video */
        }

        #ns-isolated-hero .ns-info-col {
            width: 100%;
            max-width: 42rem;
        }

        #ns-isolated-hero .ns-hero-desc {
            margin-top: 0;
            font-size: 1rem;
            color: var(--prisma-muted);
            line-height: 1.6;
            font-weight: 400;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
        }
        @media (min-width: 768px) { #ns-isolated-hero .ns-hero-desc { font-size: 1.05rem; } }

        #ns-isolated-hero .ns-hero-ctas {
            margin-top: 2rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }
        @media (min-width: 640px) { #ns-isolated-hero .ns-hero-ctas { flex-direction: row; align-items: center; } }
    

        /* below section of join  */


      /* =====================================================================
           ISOLATED STYLES
           Everything is scoped to #ns-isolated-cta to prevent conflicts
           ===================================================================== */
        #ns-isolated-cta {
            --bg-page: #000000;
            --bg-banner: #0a0a0c; 
            --text-main: #ffffff;
            --primary: #ffffff; 
            --primary-hover: #000000;
            
            background-color: var(--bg-page);
            background: white;
            font-family: 'Plus Jakarta Sans', sans-serif;
            padding: 3rem 1.5rem; /* Reduced padding for less height */
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            position: relative;
            z-index: 1;
        }

        #ns-isolated-cta *, 
        #ns-isolated-cta *::before, 
        #ns-isolated-cta *::after {
            box-sizing: inherit;
            margin: 0;
            padding: 0;
        }

        #ns-isolated-cta .ns-cta-container {
            position: relative;
            width: 100%;
            max-width: 900px; /* Reduced width */
            background-color: var(--bg-banner);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1.5rem; 
            padding: 3rem 2rem; /* Reduced height padding */
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.8);
            transform: translateZ(0); /* Hardware acceleration */
        }

        /* =====================================================================
           FCRF WATERMARK IDENTITY
           ===================================================================== */
        #ns-isolated-cta .ns-cta-watermark {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        #ns-isolated-cta .ns-cta-watermark::after {
            content: "FCRF";
            font-size: 25vw; /* Scales with container */
            font-weight: 900; 
            line-height: 1;
            letter-spacing: -0.05em;
            color: transparent;
            /* Premium metallic outline effect */
            -webkit-text-stroke: 2px rgba(255, 255, 255, 0.05); 
            background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%);
            -webkit-background-clip: text;
            background-clip: text;
            transform: scaleY(1.1) rotate(-4deg);
            user-select: none;
            white-space: nowrap;
        }

        /* Ambient Center Glow */
        #ns-isolated-cta .ns-ambient-glow {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #ns-isolated-cta .ns-ambient-glow::before {
            content: "";
            position: absolute;
            width: 400px;
            height: 150px;
            background-color: rgba(255, 255, 255, 0.04);
            border-radius: 50%;
            filter: blur(80px);
        }

        /* =====================================================================
           CONTENT
           ===================================================================== */
        #ns-isolated-cta .ns-cta-heading {
            position: relative;
            z-index: 10;
            color: var(--text-main);
            font-size: 2rem;
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.03em;
            margin-bottom: 2rem; 
            /* Subtle metallic gradient on text */
            background-image: linear-gradient(93deg, #ffffff 10%, #aaaaaa 90%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        @media (min-width: 768px) {
            #ns-isolated-cta .ns-cta-heading {
                font-size: 3rem;
            }
        }

        #ns-isolated-cta .ns-cta-button {
            position: relative;
            z-index: 10;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background-color: var(--primary);
            color: var(--primary-hover);
            font-size: 1rem;
            font-weight: 700;
            text-decoration: none;
            padding: 0.875rem 2rem;
            border-radius: 0.75rem;
            transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
            cursor: pointer;
            border: none;
            box-shadow: 0 4px 15px rgba(255,255,255,0.15);
        }

        #ns-isolated-cta .ns-cta-button:hover {
            background-color: #e5e5e5;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(255,255,255,0.3);
        }

        #ns-isolated-cta .ns-cta-button i {
            width: 1.25rem;
            height: 1.25rem;
        }



        /* new section for hackathon  */


  /* --- ISOLATED SCOPE VARIABLES & RESETS --- */
  #ns-isolated-gains {
    --bg-dark: #000000; 
    --text-main: #ffffff;
    --text-muted: #8a8a92;
    --text-faint: #54545c;
    --border-line: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.2);
    
    background-color: var(--bg-dark);
    background: radial-gradient(circle at 50% 50%, #060606 0%, #000000 100%);
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    padding: clamp(5rem, 10vw, 8rem) 0;
    overflow: hidden;
    z-index: 1;
    /* Hardware accelerate the entire section wrapper */
    transform: translateZ(0); 
  }

  #ns-isolated-gains *,
  #ns-isolated-gains *::before,
  #ns-isolated-gains *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* =====================================================================
     PREMIUM BACKGROUND (Brand Identity Watermark)
     ===================================================================== */
  #ns-isolated-gains .ns-bg-swoosh {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23050505'/%3E%3Cstop offset='40%25' stop-color='%23161616'/%3E%3Cstop offset='100%25' stop-color='%23080808'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23121212'/%3E%3Cstop offset='100%25' stop-color='%230a0a0a'/%3E%3C/linearGradient%3E%3Cfilter id='shadow'%3E%3CfeDropShadow dx='0' dy='15' stdDeviation='20' flood-color='%23000000' flood-opacity='1'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-200,800 C200,600 400,-100 800,150 C1200,400 900,900 1400,600 C1600,480 1700,200 1900,100' stroke='url(%23g1)' stroke-width='80' stroke-linecap='round' fill='none' filter='url(%23shadow)'/%3E%3Cpath d='M0,950 C350,850 650,300 1000,450 C1350,600 1200,900 1600,650 C1750,550 1850,350 2000,200' stroke='url(%23g2)' stroke-width='50' stroke-linecap='round' fill='none' filter='url(%23shadow)'/%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
      opacity: 0.8; 
      /* OPTIMIZED: Prevent main thread blocking for massive SVGs */
      transform: translateZ(0);
  }

  #ns-isolated-gains .ns-ambient-glow {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      /* OPTIMIZED */
      transform: translateZ(0);
  }

  #ns-isolated-gains .ns-ambient-glow::before {
      content: "";
      position: absolute;
      width: 500px;
      height: 250px;
      background-color: rgba(255, 255, 255, 0.03);
      border-radius: 50%;
      filter: blur(100px);
      /* OPTIMIZED: Offloads heavy blur composite to GPU */
      transform: translateZ(0);
      will-change: transform;
  }

  /* --- Layout --- */
  #ns-isolated-gains .ns-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  }

  /* --- Header --- */
  #ns-isolated-gains .ns-header {
    margin-bottom: clamp(3rem, 6vw, 5rem);
    text-align: left;
  }

  #ns-isolated-gains .ns-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    background-image: linear-gradient(93deg, #ffffff 10%, #888888 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  #ns-isolated-gains .ns-subtitle {
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 400;
    max-width: 46rem;
    margin: 0;
    line-height: 1.6;
  }

  /* --- Minimal List Layout --- */
  #ns-isolated-gains .ns-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-line);
  }

  #ns-isolated-gains .ns-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
    border-bottom: 1px solid var(--border-line);
    cursor: default;
    /* OPTIMIZED: Strict, targeted transition instead of 'all' */
    transition: border-color 0.4s ease;
  }

  #ns-isolated-gains .ns-row:hover {
    border-bottom-color: var(--border-hover);
  }

  /* Larger screens switch to a 3-column layout */
  @media (min-width: 860px) {
    #ns-isolated-gains .ns-row {
      grid-template-columns: 50px 1fr auto;
      gap: 3rem;
    }
  }

  /* --- Row Elements --- */
  #ns-isolated-gains .ns-row-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-faint);
    /* OPTIMIZED: Added physical translation using physics-based bezier */
    transform: translateZ(0);
    will-change: transform, color;
    transition: color 0.3s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #ns-isolated-gains .ns-row:hover .ns-row-num {
    color: #FF5455; /* Subtle brand hint on hover */
    transform: translateX(8px) translateZ(0);
  }

  #ns-isolated-gains .ns-row-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--text-main);
    line-height: 1.1;
    /* OPTIMIZED: Added physical translation using physics-based bezier */
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #ns-isolated-gains .ns-row:hover .ns-row-title {
    transform: translateX(12px) translateZ(0);
  }

  #ns-isolated-gains .ns-row-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 0.5rem;
    grid-column: 2; 
    /* OPTIMIZED: Subtle fade and shift to match the premium flow */
    opacity: 0.8;
    transform: translateZ(0);
    will-change: transform, opacity;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #ns-isolated-gains .ns-row:hover .ns-row-desc {
    opacity: 1;
    transform: translateX(4px) translateZ(0);
  }

  @media (min-width: 860px) {
    #ns-isolated-gains .ns-row-desc {
      text-align: right;
      max-width: 380px;
      margin-top: 0;
      justify-self: end;
      grid-column: auto; 
    }
    
    #ns-isolated-gains .ns-row:hover .ns-row-desc {
      /* On desktop, moves the opposite way to balance the layout */
      transform: translateX(-8px) translateZ(0);
    }
  }



/* timeline section  */



          /* --- VARIABLES & RESETS --- */
        #ns-compact-timeline {
            --ns-bg-color: #ffffff; 
            --ns-text-main: #000000; 
            --ns-text-muted: #666666;
            --ns-card-bg: #ffffff;
            --ns-border-color: rgba(0, 0, 0, 0.1);
            --ns-glow-color: #000000;
            --ns-gradient: linear-gradient(93deg, #5135FF 10.65%, #FF5455 89.35%);
            --ns-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            --ns-glow-hover: 0 0 20px rgba(0, 0, 0, 0.15), 0 0 40px rgba(0, 0, 0, 0.1);
            
            background-color: var(--ns-bg-color);
            color: var(--ns-text-main);
            font-family: 'Poppins', sans-serif;
            position: relative;
            padding: 3rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            overflow: hidden;
        }

        #ns-compact-timeline *, 
        #ns-compact-timeline *::before, 
        #ns-compact-timeline *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* --- UNIQUE GEOMETRIC MESH WATERMARK --- */
        #ns-compact-timeline::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='mesh' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50 Z' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='2' fill='rgba(0,0,0,0.03)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23mesh)'/%3E%3C/svg%3E");
            z-index: 0;
            pointer-events: none;
        }

        /* --- NEW: SCROLL-TRACKING MESH GLOW --- */
        #ns-compact-timeline .ns-grid-glow {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='mesh-glow' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50 Z' fill='none' stroke='rgba(0,0,0,0.12)' stroke-width='1.5'/%3E%3Ccircle cx='50' cy='50' r='3' fill='rgba(0,0,0,0.15)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23mesh-glow)'/%3E%3C/svg%3E");
            z-index: 0;
            pointer-events: none;
            -webkit-mask-image: radial-gradient(circle 250px at 50% var(--glow-y, 0px), black, transparent 70%);
            mask-image: radial-gradient(circle 250px at 50% var(--glow-y, 0px), black, transparent 70%);
        }

        #ns-compact-timeline .ns-watermark {
            position: absolute;
            top: 50%; 
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: min(20vw, 250px);
            font-weight: 900;
            color: rgba(0, 0, 0, 0.03);
            z-index: 0;
            pointer-events: none;
            user-select: none;
            letter-spacing: 0.1em;
        }

        /* --- HEADER --- */
        #ns-compact-timeline .ns-header {
            text-align: center;
            margin-bottom: 4rem;
            z-index: 2;
            position: relative;
        }

        #ns-compact-timeline .ns-title {
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        /* Gradient applied specifically to the word Timeline */
        #ns-compact-timeline .ns-title strong {
            background: var(--ns-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        #ns-compact-timeline .ns-subtitle {
            color: var(--ns-text-muted);
            font-size: 1rem;
            margin-top: 0.5rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* --- TIMELINE STRUCTURE --- */
        #ns-compact-timeline .ns-timeline-container {
            width: 100%;
            max-width: 800px;
            position: relative;
            z-index: 2;
            padding: 20px 0;
        }

        /* The Central Vertical Line (Dim) */
        #ns-compact-timeline .ns-timeline-container::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            background: var(--ns-border-color);
            transform: translateX(-50%);
        }

        /* Active portion of the line (Glowing via JS Scroll) */
        #ns-compact-timeline .ns-timeline-container::after {
            content: '';
            position: absolute;
            top: 0;
            height: var(--scroll-line-height, 0%);
            left: 50%;
            width: 2px;
            background: var(--ns-glow-color);
            transform: translateX(-50%);
            box-shadow: 0 0 8px rgba(0,0,0,0.6), 0 0 16px rgba(0,0,0,0.4);
            transition: height 0.1s ease-out;
            z-index: 1;
        }

        /* --- TIMELINE ITEMS --- */
        #ns-compact-timeline .ns-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            position: relative;
            width: 100%;
            z-index: 2;
            
            /* SCROLL ANIMATION BASE STATE */
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                        transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* VISIBLE STATE */
        #ns-compact-timeline .ns-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        #ns-compact-timeline .ns-item:last-child {
            margin-bottom: 0;
        }

        /* --- THE MARKER (Center Icon) --- */
        #ns-compact-timeline .ns-marker {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 44px;
            height: 44px;
            background: var(--ns-bg-color);
            border: 2px solid var(--ns-border-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3;
            transition: all 0.4s ease;
            
            /* Marker Animation Setup */
            transform: translateX(-50%) scale(0.5);
            opacity: 0;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, 
                        opacity 0.6s ease 0.2s,
                        border-color 0.3s ease,
                        box-shadow 0.3s ease,
                        background 0.3s ease;
        }

        /* Marker Visible State */
        #ns-compact-timeline .ns-item.is-visible .ns-marker {
            transform: translateX(-50%) scale(1);
            opacity: 1;
        }

        #ns-compact-timeline .ns-marker svg {
            width: 20px;
            height: 20px;
            color: #555;
            transition: color 0.3s ease;
        }

        /* Marker Glow on Hover & Active Scroll */
        #ns-compact-timeline .ns-item.is-visible:hover .ns-marker,
        #ns-compact-timeline .ns-item.is-active .ns-marker {
            transform: translateX(-50%) scale(1.15);
            border-color: var(--ns-glow-color);
            background: #000;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }

        #ns-compact-timeline .ns-item.is-visible:hover .ns-marker svg,
        #ns-compact-timeline .ns-item.is-active .ns-marker svg {
            color: #fff;
        }

        /* --- CONTENT CARDS --- */
        #ns-compact-timeline .ns-content {
            width: calc(50% - 50px);
            background: var(--ns-card-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 24px 28px;
            border-radius: 12px;
            border: 1px solid var(--ns-border-color);
            box-shadow: var(--ns-shadow);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        /* Glow effect on Card Hover & Active Scroll */
        #ns-compact-timeline .ns-item.is-visible:hover .ns-content,
        #ns-compact-timeline .ns-item.is-active .ns-content {
            transform: translateY(-5px);
            border-color: rgba(0, 0, 0, 0.3);
            box-shadow: var(--ns-glow-hover);
        }

        /* Alternating Layout */
        #ns-compact-timeline .ns-item:nth-child(odd) .ns-content {
            margin-right: auto;
            text-align: right;
        }

        #ns-compact-timeline .ns-item:nth-child(even) .ns-content {
            margin-left: auto;
            text-align: left;
        }

        /* Typography inside cards */
        #ns-compact-timeline .ns-date {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--ns-text-muted);
            border: 1px solid var(--ns-border-color);
            padding: 6px 14px;
            border-radius: 20px;
            margin-bottom: 15px;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

        #ns-compact-timeline .ns-item.is-visible:hover .ns-date,
        #ns-compact-timeline .ns-item.is-active .ns-date {
            color: #fff;
            background: #000;
            border-color: #000;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        #ns-compact-timeline .ns-title-text {
            font-size: 1.2rem;
            font-weight: 400;
            line-height: 1.4;
            color: var(--ns-text-main);
            letter-spacing: 0.5px;
        }

        #ns-compact-timeline .ns-desc {
            font-size: 0.9rem;
            color: var(--ns-text-muted);
            margin-top: 10px;
            line-height: 1.6;
        }

        /* --- MOBILE RESPONSIVENESS --- */
        @media (max-width: 768px) {
            #ns-compact-timeline .ns-header {
                margin-bottom: 3rem;
            }

            #ns-compact-timeline .ns-timeline-container::before,
            #ns-compact-timeline .ns-timeline-container::after {
                left: 20px;
                transform: none;
            }

            #ns-compact-timeline .ns-item {
                flex-direction: row !important; 
                justify-content: flex-start;
                margin-bottom: 40px;
            }

            #ns-compact-timeline .ns-marker {
                left: 20px;
                transform: translateX(-50%) scale(0.5);
            }
            
            #ns-compact-timeline .ns-item.is-visible .ns-marker {
                transform: translateX(-50%) scale(1);
            }

            #ns-compact-timeline .ns-item.is-visible:hover .ns-marker {
                transform: translateX(-50%) scale(1.1);
            }

            #ns-compact-timeline .ns-content,
            #ns-compact-timeline .ns-item:nth-child(odd) .ns-content,
            #ns-compact-timeline .ns-item:nth-child(even) .ns-content {
                width: calc(100% - 60px);
                margin-left: 60px;
                margin-right: 0;
                text-align: left;
                padding: 20px;
            }
        }