/* Custom Colors/Theme aligned with Bootstrap's system */
                :root {
                --bs-body-bg: #0a192f; /* primary-dark */
                --bs-body-color: #8892b0; /* lighter-text */
                --accent-color: #64ffda; /* Bright Cyan/Green */
                --secondary-dark: #112240;
                --light-text: #ccd6f6;
                }

                body {
                font-family: 'Poppins', sans-serif;
                color: var(--bs-body-color);
                background-color: var(--bs-body-bg);
                /* Important for parallax: Content must scroll over the fixed canvas */
                overflow-x: hidden;
                /* Ensure enough content to scroll and trigger animations */
                min-height: 200vh;
                }

                /* Canvas for Particle Background (Fixed for Parallax) */
                #particle-canvas {
                position: fixed; /* This enables the parallax effect */
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                }

                /* Custom Styles for the Process Nodes (Now using 100% width within the constrained container) */
                .process-node {
                background-color: var(--secondary-dark);
                border: 2px solid transparent;
                /* Updated shadow: Use a subtle accent glow AND added !important */
                box-shadow: 0 0 12px rgba(100, 255, 218, 0.2) !important;
                transition: all 0.3s ease;
                position: relative;
                transform: scale(0.9);
                width: 100%; /* Now takes full width of the container */
                height: auto;
                min-height: 150px;
                padding: 1.5rem; /* Ensure good padding */

                /* ROCKET SHAPE: Trapezoid for the body (adjusted to fit 100% width nicely) */
                clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
                overflow: hidden; /* Crucial for pseudo-elements */
                }

                /* ILLUSION 1: Inner Stage Break Line */
                .process-node::before {
                content: '';
                position: absolute;
                top: 20%; /* Position near the top for the "separation point" */
                left: 5%;
                right: 5%;
                height: 2px;
                background: linear-gradient(to right, transparent, rgba(100, 255, 218, 0.5), transparent);
                z-index: 2;
                }

                /* ---------------------------------------------------- */
                /* KEYFRAME ANIMATION FOR CONTINUOUS THRUST PULSE (INTENSITY INCREASED) */
                /* ---------------------------------------------------- */
                @keyframes thrust-pulse {
                0% {
                opacity: 0.6; /* Higher base opacity */
                filter: blur(10px); /* Increased blur */
                }
                50% {
                opacity: 1; /* Peak opacity */
                filter: blur(15px); /* Increased blur for stronger glow */
                }
                100% {
                opacity: 0.6;
                filter: blur(10px);
                }
                }

                /* ILLUSION 2: Propulsion Glow at the base - now animated */
                .process-node::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 25px; /* INCREASED height for more visible glow */
                /* Radial gradient simulates engine glow at the bottom */
                background: radial-gradient(ellipse at center, rgba(100, 255, 218, 0.7) 0%, transparent 70%);
                /* Apply continuous pulse animation */
                animation: thrust-pulse 2s infinite alternate ease-in-out;
                transition: all 0.3s ease;
                z-index: 1;
                }

                .process-node:hover {
                border-color: var(--accent-color);
                /* Stronger glow on hover AND added !important */
                box-shadow: 0 0 35px var(--accent-color) !important;
                transform: scale(1);
                color: var(--accent-color);
                }

                .process-node:hover::after {
                /* Stop the pulse animation on hover to allow the strong, static hover state to dominate */
                animation: none;
                /* Enhance glow on hover to simulate engine throttling up */
                height: 35px; /* EVEN BIGGER on hover */
                opacity: 1;
                filter: blur(18px);
                }
                /* ---------------------------------------------------- */


                .text-accent {
                color: var(--accent-color) !important;
                }
                .text-light-custom {
                color: var(--light-text) !important;
                }


                /* Desktop Grid Layout (7 steps) - Now configured for vertical stacking on ALL screens */
                .process-grid-desktop {
                display: flex;
                flex-direction: column;
                gap: 3rem;
                padding-bottom: 5rem;
                /* Constrain the max width for readability on large screens */
                max-width: 700px;
                margin: 0 auto;
                }

                /* Clean up unused grid styling */
                .node-1, .node-2, .node-3, .node-4, .node-5, .node-6, .node-7 {
                grid-area: unset;
                justify-self: unset;
                align-self: unset;
                }