/* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            background-color: #020a0a;
            color: white;
            line-height: 1.6;
        }

        /* 3D Canvas Container */
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            transition: opacity 1.5s ease;
        }

        /* UI Overlay - The Hero Content */
.hero-section {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: calc(100vh - 88px); /* slightly smaller to avoid large gap; tune to your navbar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 10%;
    padding-bottom: 1rem; /* small bottom spacing */
    pointer-events: none;
}

        .hero-content {
            pointer-events: auto;
            max-width: 1000px;
            width: 100%; 
            background: rgba(255, 255, 255, 0.12); /* Increased from 0.03 to 0.12 to match glass panels */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 214, 214, 0.2); /* Brighter border from 0.1 to 0.2 */
            padding: 3rem;
            border-radius: 24px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            transform: none; /* remove downward shift */
            opacity: 0;
            animation: slideUp 1s ease 0.3s forwards;
        }
        
        /* Define H1 font size for calc() in mobile, and use it in roller calc */
        :root {
            --h1-font-size: 3.5rem;
        }

        h1 {
            font-size: var(--h1-font-size);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            /* Ensure the entire H1 is displayed as a flex container for the animation block */
            display: flex;
            flex-wrap: wrap; /* Allows text to wrap naturally before the animated block */
            align-items: center;
            gap: 0.5rem; /* Space between words */
        }

        .highlight {
            color: #00d6d6;
            text-shadow: 0 0 20px rgba(0, 214, 214, 0.4);
        }
        
        /* --- Animation Styles for Roller --- */
        .roller-container {
            /* Fix the height to exactly one line of H1 text */
            height: var(--h1-font-size); 
            overflow: hidden;
            display: block; /* Important for flow control */
        }
        
        .roller {
            /* Stacks the words vertically and enables transformation */
            display: flex;
            flex-direction: column;
            /* CRITICAL CHANGE: Set transition to NONE here. It will be set dynamically via JS. */
            transition: none; 
            will-change: transform;
            /* Start with the first word visible */
            transform: translateY(0); 
        }
        
        .roller span {
            /* Each word must occupy exactly one line height */
            height: var(--h1-font-size); 
            /* Inherit H1 font styles */
            line-height: 1.1; 
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        /* --- End Animation Styles --- */

        .hero-section p {
            font-size: 1.125rem;
            line-height: 1.6;
            color: #d0d0d0;
            margin-bottom: 2.5rem;
            max-width: 90%;
        }

        .btn-group {
            display: flex;
            gap: 1rem;
            pointer-events: auto;
        }

        /* CRITICAL FIX: Override Bootstrap's button-group border-radius removal */
        .btn-group > .btn {
            border-radius: 50px !important; /* Force rounded corners on ALL buttons */
        }

        .btn {
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* New Button Style for Tertiary Action (Pink/Red) */
        .btn-tertiary {
            background-color: #e43f86; /* Pink/Red color */
            color: white;
            box-shadow: 0 0 15px rgba(228, 63, 134, 0.3);
            border: 1px solid #e43f86;
            /* Reduced padding for smaller size */
            padding: 0.75rem 1.5rem; 
            font-size: 0.95rem;
            font-weight: 500;
        }

        .btn-tertiary:hover {
            background-color: #ff5f9e;
            box-shadow: 0 0 25px rgba(228, 63, 134, 0.6);
            transform: translateY(-2px);
        }

        /* Primary Button (Existing) */
        .btn-primary {
            background-color: #00d6d6;
            color: #000;
            box-shadow: 0 0 15px rgba(0, 214, 214, 0.3);
            border: 1px solid #00d6d6;
        }

        .btn-primary:hover {
            background-color: #00ffff;
            box-shadow: 0 0 25px rgba(0, 214, 214, 0.6);
            transform: translateY(-2px);
        }
        
        /* Secondary Button (Existing) */
        .btn-secondary {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            backdrop-filter: blur(5px);
        }

        .btn-secondary:hover {
            border-color: #00d6d6;
            color: #00d6d6;
            background: rgba(0, 214, 214, 0.05);
        }

        /* Scroll indicator */
        .scroll-indicator {
            position: relative;
            margin-top: 0.25rem; /* reduce gap below hero buttons */
            left: auto;
            bottom: auto;
            transform: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0.6;
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            pointer-events: none;
        }

        .mouse {
            width: 24px;
            height: 40px;
            border: 2px solid #00d6d6;
            border-radius: 12px;
            margin-bottom: 8px;
            position: relative;
        }

        .wheel {
            width: 4px;
            height: 4px;
            background: #00d6d6;
            border-radius: 50%;
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            animation: scroll 1.5s infinite;
        }

        /* Feature Sections - Stacked Container */
        .feature-section {
            position: relative;
            z-index: 1; /* CHANGED: Lowered from 10 to 1 */
            width: 100%;
            padding: 5rem 10%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4rem;
            background-color: transparent;
        }

        .feature-panels {
            display: flex;
            flex-direction: column;
            gap: 6rem; /* Increased gap for visual separation */
            max-width: 1000px;
            width: 100%;
        }

        /* Glass Panel Wrapper (Container for relative positioning) */
        .glass-panel {
            position: relative;
            background: rgba(255, 255, 255, 0.12); /* Increased from 0.08 to 0.12 for brighter background */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 214, 214, 0.2); /* Brighter border from 0.15 to 0.2 */
            border-radius: 24px;
            padding: 3rem; 
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            pointer-events: auto;
            overflow: hidden; 
        }

        /* Clearbox utility to contain floats */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        /* NEW: Flex container for the two content columns (70/30) */
        .content-flex-container {
            display: flex;
            align-items: stretch; 
            gap: 2%; /* Gutter between columns */
        }

        /* FEATURE LAYOUT (70/30 Column Split) */

        /* Left Column (70% - Header, Text, SVG) */
        .text-group {
            width: 68%; /* Approx 2/3 */
            flex-shrink: 0;
            position: relative;
            z-index: 2; /* CHANGED: Lowered from 20 to 2 */
            display: flex;
            flex-direction: column; /* Stack header and text vertically */
        }
        
        /* Header Styles (Now inside left column to align with video top) */
        .text-group h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: white;
            opacity: 0;
            transition: opacity 0.8s ease;
            line-height: 1.2;
            margin-top: 0; /* Ensure it starts at the very top */
        }

        /* Right Column (30% - Video) - Container for the video and its background/padding */
        .media-group {
            width: 30%; /* Approx 1/3 */
            flex-shrink: 0;
            position: relative;
            z-index: 2; /* CHANGED: Lowered from 20 to 2 */
            
            display: flex; 
            align-items: center; 
            justify-content: center;
            
            /* Padding for blank space around the video element */
            padding: 1rem; 
            
            /* White background (fully opaque) */
            background-color: rgba(255, 255, 255, 1.0); 
            
            /* Curved corners for the container (visual background) */
            border-radius: 20px; 
        }
        
        /* Video Styling: Full Height & Correct Opacity */
        .media-group video {
            width: 100%;
            height: 100%; /* Fills the padded media-group container */
            display: block;
            object-fit: cover; /* Ensures video covers the space */
            
            /* NO BORDER on the video itself */
            border: none;
            box-shadow: none;
            
            /* Set video's internal background to transparent */
            background-color: transparent; 
            
            /* Curved corners for the video itself */
            border-radius: 12px; 
            
            /* 85% Visible (15% transparent) */
            opacity: 0.85; 
            
            min-height: 150px; 
            color: #000; 
            font-size: 0.8rem;
            text-align: center;
            padding: 1rem; /* Padding for placeholder text */
            display: flex; 
            align-items: center;
            justify-content: center;
        }
        .media-group video p {
            margin: 0;
            color: #000; /* Text color remains black for contrast against white background */
            font-weight: 600;
        }

        /* Text Content (100% of its parent .text-group) */
        .text-content {
            text-align: left; 
            width: 100%; 
            opacity: 0;
            transition: opacity 0.8s ease; 
            flex-grow: 1; /* Ensure it fills remaining space */
        }
        
        /* Added spacing after paragraph and before the button in the feature panels */
        .text-content p {
            margin-bottom: 1.5rem;
        }

        /* FLOATING IMAGE CSS */
        .svg-in-text {
            float: left; /* LEFT ALIGNED */
            width: 40%; /* Make it smaller */
            /* Adjusted margin for left float */
            margin: 0.5rem 1.5rem 1rem 0; /* T R B L */
            display: block;
            position: relative; 
            
            /* --- IMPLEMENTING shape-outside --- */
            shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 80%); 
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);     
        }

        .svg-in-text img {
            width: 100%;
            height: auto; 
            /* Diagram has NO background or padding, just the image */
            display: block;
            object-fit: contain; 
        }
        
        /* Paragraph text style */
        .text-content p {
            font-size: 1.1rem;
            color: #ffffff;
            text-shadow: none;
        }

        /* Animation Setup */
        /* Default/Hidden State */
        .media-left, .media-right {
            opacity: 0;
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
        }
        
        /* Left Element (Text Group) slides in from -100px */
        .media-left {
            transform: translateX(-100px);
        }

        /* Right Element (Video Group) slides in from 100px */
        .media-right {
            transform: translateX(100px);
        }

        /* Visible State (triggered by parent .is-visible) */
        .glass-panel.is-visible h2 {
            opacity: 1;
            transition-delay: 0.1s; 
        }
        .glass-panel.is-visible .text-content {
            opacity: 1;
            transition-delay: 0.3s;
        }
        .glass-panel.is-visible .media-left {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.5s;
        }
        .glass-panel.is-visible .media-right {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.7s; 
        }

        /* Animations */
        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes scroll {
            0% { top: 6px; opacity: 1; }
            100% { top: 24px; opacity: 0; }
        }

        /* Mobile Adjustments (Stacking Columns) */
        @media (max-width: 1024px) {
            .glass-panel {
                padding: 2rem;
            }
            
            /* Update variable for smaller screen H1 size */
            :root {
                --h1-font-size: 2.5rem;
            }
            
            /* Columns stack on mobile */
            .content-flex-container {
                flex-direction: column; /* Stack vertically */
                gap: 0; /* Remove gap when stacking */
            }

            .text-group, .media-group {
                width: 100%;
                height: auto;
            }
            
            /* CRITICAL FIX: Ensure the text group (header, diagram, paragraph) comes first (order: 0) */
            .text-group {
                order: 0;
            }

            /* FIX: Ensure the media group (video) comes last (order: 1) */
            .media-group {
                order: 1; /* Place the video after the text/diagram content */
                margin-top: 2rem; /* Add space above video when stacked */
                margin-bottom: 0;
                min-height: 200px;
            }
            
            /* Media slides vertically on mobile stack */
            .media-left, .media-right {
                transform: translateY(-50px);
            }
            .glass-panel.is-visible .media-left, 
            .glass-panel.is-visible .media-right {
                transform: translateY(0);
            }
            
            /* FIX: Remove float on mobile and stack the image */
            .svg-in-text {
                float: none;
                width: 100%;
                margin: 1.5rem 0;
                shape-outside: none;
                clip-path: none;
            }
        }
        @media (max-width: 768px) {
            .hero-section {
                padding: 0 5%;
                min-height: calc(100vh - 88px);
                justify-content: center;
                padding-bottom: 0.75rem;
            }
            .hero-content {
                padding: 2rem;
                margin-top: 0;
                max-width: 100%;
            }
            /* Adjust H1 size for mobile */
            h1 { font-size: 2.5rem; }
            .feature-panels {
                gap: 4rem;
            }
            
            /* Adjust button group for smaller screens */
            .btn-group {
                flex-direction: column;
                gap: 0.75rem;
            }
            .btn {
                width: 100%;
            }
        }

.hero-section, .feature-section {
    position: relative;
    z-index: 1;
}