.intro-section {
         

            width: 100vw;
            padding: 100px 0px;
           /* background: linear-gradient(135deg, #06162d 0%, #0b2244 100%);*/
            color: #ffffff;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        /* Subtle Background Geometric Accent Grid */
        .intro-section::before {
            content: '';
            position: absolute;
            top: -20%;
            right: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
            transform: rotate(-15deg);
            pointer-events: none;
        }

        .intro-wrapper {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 60px;
            width: 100%;
            max-width: 100%;
            margin: 0;
            align-items: center;
        }

        /* Left Column Content */
        .intro-left {
            padding-left: 6%;
        }

        .intro-tagline {
            display: inline-block;
            font-size: 0.9rem;
            letter-spacing: 3px;
            color: #38bdf8;
            margin-bottom: 20px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .intro-left h1 {
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            line-height: 1.1;
            font-weight: 800;
            margin-bottom: 25px;
            color: #060AF5;
        }

        .intro-left h1 span {
            color: #38bdf8;
        }

        .intro-description {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #4b5563;
            max-width: 680px;
        }

        /* Right Column Capabilities Grid */
        .intro-right {
            padding-right: 6%;
            padding-left: 40px;
            position: relative;
        }

        /* Vertical separation track */
        .intro-right::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 3px;
            height: calc(100% - 20px);
            background: linear-gradient(to bottom, #38bdf8, transparent);
        }

        .capability-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 30px;
        }

        .capability-card:last-child {
            margin-bottom: 0;
        }

        .capability-header {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* Glassmorphic Indicator Style */
        .capability-badge {
            background: rgba(56, 189, 248, 0.1);
            color: #38bdf8;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 700;
            border: 1px solid rgba(56, 189, 248, 0.2);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .capability-card h3 {
            font-size: 1.3rem;
            font-weight: 700;
            margin: 0;
            color: #ffffff;
        }

        .capability-card p {
            font-size: 0.95rem;
            color: #4b5563;
            line-height: 1.5;
            margin: 0;
            padding-left: 0px;
        }

        /* Tablet Responsive View */
        @media (max-width: 992px) {
            .intro-section {
                padding: 80px 0px;
            }
            .intro-wrapper {
                gap: 40px;
            }
        }

        /* Mobile Layout Optimizations */
        @media (max-width: 768px) {
            .intro-wrapper {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .intro-left {
                padding-right: 6%;
            }

            .intro-right {
                padding-left: 6%;
                margin-top: 10px;
                padding-top: 40px;
            }

            /* Flips vertical track line to a clean horizontal separator on mobile viewports */
            .intro-right::before {
                left: 6%;
                top: 0;
                width: 88%;
                height: 2px;
                background: linear-gradient(to right, #38bdf8 0%, rgba(56, 189, 248, 0.3) 70%, transparent 100%);
            }

            .capability-card {
                margin-bottom: 24px;
            }
        }