/* Hero Video Overlay */
        .hero-video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.42);
            z-index: 1;
            pointer-events: none;
        }

        /* Hero content above overlay */
        .hero-content.position-relative,
        .hero-awards-vertical-wrapper {
            position: relative;
            z-index: 2;
        }

        /* Hero 3-Line Headline */
        .hero-headline-3lines {
            max-width: 560px;
            line-height: 1.18;
            white-space: normal;
            word-break: normal;
        }

        /* Premium Trusted Section Styles */
        #mag-trusted-section {
            background: #ffffff;
            padding: 120px 0;
            overflow: hidden;
            position: relative;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            color: #000;
        }

        #mag-trusted-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
        }

        .trusted-header {
            text-align: center;
            margin-bottom: 80px;
            min-height: 60px;
        }

        .trusted-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 3rem;
            font-weight: 700;
            color: #111111;
            letter-spacing: -0.03em;
            margin: 0;
            display: inline-block;
        }

        .typing-cursor {
            display: inline-block;
            width: 3px;
            height: 1em;
            background-color: #3B8DBC;
            margin-left: 8px;
            vertical-align: baseline;
            animation: blink 0.8s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        .logo-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 65px 35px;
            align-items: center;
            justify-items: center;
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 40px;
        }

        .logo-item {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 60px;
        }

        .logo-item:hover {
            opacity: 1;
            transform: scale(1.1) translateY(-5px) !important;
        }

        .logo-item img {
            max-width: 135px;
            max-height: 42px;
            width: auto;
            height: auto;
            object-fit: contain;
            filter: grayscale(100%) contrast(1.2) brightness(0.65) opacity(0.85);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .logo-item:hover img {
            filter: grayscale(0%) contrast(1) brightness(1) opacity(1);
            transform: scale(1.08);
        }

        .logo-item.reveal {
            opacity: 1;
            transform: translateY(0);
        }

        /* Staffing Expertise Section Styles */

        /* Staffing Expertise Section Styles */
        #staffing-expertise {
            background: radial-gradient(circle at center, #0a1118 0%, #05080b 100%);
            padding: 160px 0;
            overflow: hidden;
            position: relative;
            color: #ffffff;
        }

        .staffing-bg-glow {
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(59, 141, 188, 0.08) 0%, transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 0;
        }

        .staffing-header {
            text-align: center;
            margin-bottom: 120px;
            position: relative;
            z-index: 1;
        }

        .staffing-header h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
        }

        .staffing-header .highlight-blue {
            color: #3B8DBC;
            text-shadow: 0 0 20px rgba(59, 141, 188, 0.3);
        }

        .staffing-header p {
            font-size: 1.1rem;
            color: #a1a1a6;
            max-width: 600px;
            margin: 0 auto;
        }

        .staffing-timeline {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
            position: relative;
            z-index: 1;
        }

        .timeline-line {
            position: absolute;
            top: 60px;
            left: 100px;
            right: 100px;
            height: 2px;
            background: rgba(255, 255, 255, 0.05);
            z-index: 0;
        }

        .timeline-line-active {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, transparent, #3B8DBC, transparent);
            box-shadow: 0 0 15px #3B8DBC;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .staffing-node {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            cursor: pointer;
            transition: all 0.5s ease;
            padding: 0 20px;
        }

        .node-circle-wrap {
            position: relative;
            width: 120px;
            height: 120px;
            margin-bottom: 40px;
            z-index: 2;
        }

        .node-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .node-circle::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(59, 141, 188, 0.2), transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .node-circle i {
            font-size: 2rem;
            color: #ffffff;
            opacity: 0.5;
            transition: all 0.5s ease;
            z-index: 2;
        }

        .node-step {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 34px;
            height: 34px;
            background: #1a1a1a;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            color: #a1a1a6;
            transition: all 0.5s ease;
            z-index: 3;
        }

        .node-content h4 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.25rem;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 15px;
            opacity: 0.6;
            transition: all 0.5s ease;
        }

        .node-content p {
            font-size: 0.95rem;
            color: #a1a1a6;
            line-height: 1.6;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.5s ease;
            max-width: 250px;
        }

        /* Hover & Active States */
        .staffing-node:hover .node-circle,
        .staffing-node.active .node-circle {
            border-color: #3B8DBC;
            background: rgba(59, 141, 188, 0.05);
            box-shadow: 0 0 30px rgba(59, 141, 188, 0.2), inset 0 0 20px rgba(59, 141, 188, 0.1);
            transform: scale(1.1);
        }

        .staffing-node:hover .node-circle::before,
        .staffing-node.active .node-circle::before {
            opacity: 1;
        }

        .staffing-node:hover .node-circle i,
        .staffing-node.active .node-circle i {
            color: #3B8DBC;
            opacity: 1;
            transform: scale(1.1);
        }

        .staffing-node:hover .node-step,
        .staffing-node.active .node-step {
            background: #3B8DBC;
            color: #ffffff;
            border-color: #3B8DBC;
            box-shadow: 0 0 15px rgba(59, 141, 188, 0.4);
        }

        .staffing-node:hover .node-content h4,
        .staffing-node.active .node-content h4 {
            opacity: 1;
            color: #3B8DBC;
        }

        .staffing-node:hover .node-content p,
        .staffing-node.active .node-content p {
            opacity: 1;
            transform: translateY(0);
        }

        /* Ambient particles */
        .staffing-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        @media (max-width: 1024px) {
            .staffing-timeline {
                flex-direction: column;
                align-items: center;
                gap: 80px;
            }

            .timeline-line {
                width: 2px;
                height: 100%;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }

            .timeline-line-active {
                width: 100%;
                height: 0%;
                background: linear-gradient(180deg, transparent, #3B8DBC, transparent);
            }

            .staffing-header h2 {
                font-size: 2.5rem;
            }
        }

        .logo-item img {
            max-width: 145px;
            max-height: 44px;
            width: auto;
            height: auto;
            object-fit: contain;
              filter: grayscale(1) brightness(0.75) contrast(0.05) opacity(1.68);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .logo-item:hover img {
            filter: grayscale(0) brightness(1) contrast(1) opacity(1) drop-shadow(0 0 16px rgba(59, 141, 188, 0.35));
            transform: scale(1.1);
        }

        .logo-clone {
            display: none !important;
        }

        /* Responsive Grid */
        @media (max-width: 1200px) {
            .logo-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 45px 30px;
            }
        }

        @media (max-width: 992px) {
            .trusted-title {
                font-size: 2.2rem;
            }

            .logo-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 40px 20px;
            }
        }

        /* Industries Showcase Section Styles */
        #industries-showcase {
            background: #000;
            color: #fff;
            position: relative;
            z-index: 10;
        }



        .showcase-sticky {
            position: relative;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            /* Changed from center to avoid top clipping */
            overflow: hidden;
            padding: 120px 0 60px;
            /* Increased top padding for navbar clearance */
            background: radial-gradient(circle at 10% 20%, rgba(59, 141, 188, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 90% 80%, rgba(59, 141, 188, 0.08) 0%, transparent 50%);
        }

        .showcase-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0 100px;
            margin-bottom: 50px;
            width: 100%;
        }

        .showcase-header h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 3rem;
            font-weight: 700;
            max-width: 700px;
            line-height: 1.1;
            letter-spacing: -0.02em;
            margin: 0;
        }

        .btn-outline-premium {
            padding: 14px 35px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(5px);
        }

        .btn-outline-premium:hover {
            background: #3B8DBC;
            color: #fff;
            border-color: #3B8DBC;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(59, 141, 188, 0.3);
        }

        .btn-outline-premium.small {
            padding: 10px 25px;
            font-size: 0.8rem;
        }

        .showcase-main {
            display: grid;
            grid-template-columns: 1.3fr 0.7fr 1fr;
            gap: 80px;
            padding: 0 100px;
            align-items: center;
            flex: 1;
            max-width: 1600px;
            margin: 0 auto;
            width: 100%;
        }

        .industry-visual-container {
            position: relative;
            height: 500px;
            width: 100%;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
        }

        .industry-img-slot {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: scale(1.15) rotate(1deg);
            transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            background-size: cover;
            background-position: center;
        }

        .industry-img-slot.active {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .industry-nav {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .industry-nav-item {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.2rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.15);
            cursor: pointer;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            position: relative;
        }

        .industry-nav-item.active {
            color: #3B8DBC;
            transform: translateX(15px);
            text-shadow: 0 0 15px rgba(59, 141, 188, 0.4);
        }

        .industry-nav-item::before {
            content: '';
            position: absolute;
            left: -30px;
            top: 50%;
            width: 20px;
            height: 2px;
            background: #3B8DBC;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s ease;
        }

        .industry-nav-item.active::before {
            transform: scaleX(1);
        }

        .industry-info-container {
            position: relative;
            min-height: 250px;
        }

        .industry-desc-slot {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
            pointer-events: none;
        }

        .industry-desc-slot.active {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
            position: relative;
        }

        .industry-desc-slot p {
            font-size: 1.15rem;
            line-height: 1.8;
            color: #999;
            margin-bottom: 35px;
            letter-spacing: 0.01em;
        }


        @media (max-width: 991px) {
            .pipe-gradient-backdrop-panel {
                left: -35px;
                right: -25px;
                bottom: -55px;
                top: 15%;
                border-radius: 24px;
            }

            .pipe-card-ambient-aura {
                left: -45px;
                right: -35px;
                bottom: -65px;
            }
        }

        @media (max-width: 540px) {
            .pipe-gradient-backdrop-panel {
                left: -16px;
                right: -16px;
                bottom: -40px;
                top: 12%;
                border-radius: 20px;
            }

            .pipe-card-ambient-aura {
                left: -20px;
                right: -20px;
                bottom: -45px;
            }
        }

        /* Responsive */
        @media (max-width: 1400px) {
            .showcase-header h2 {
                font-size: 2.5rem;
            }

            .industry-nav-item {
                font-size: 1.8rem;
            }

            .showcase-main {
                gap: 40px;
            }
        }

        @media (max-width: 1200px) {
            .showcase-header {
                padding: 0 50px;
            }

            .showcase-main {
                padding: 0 50px;
                grid-template-columns: 1.2fr 0.8fr 1fr;
            }
        }

        @media (max-width: 1024px) {
            .showcase-sticky {
                height: auto;
                position: relative;
                padding: 100px 20px;
            }

            .showcase-main {
                display: flex;
                flex-direction: column;
                gap: 50px;
            }

            .industry-visual-container {
                height: 350px;
            }

            .showcase-header {
                padding: 0;
                flex-direction: column;
                gap: 30px;
            }

            .industry-nav {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }

            .industry-nav-item {
                font-size: 1.4rem;
            }

            .industry-desc-slot {
                position: relative;
                opacity: 1;
                transform: none;
                display: none;
            }

            .industry-desc-slot.active {
                display: block;
            }
        }

        @media (max-width: 576px) {
            .showcase-header h2 {
                font-size: 1.8rem;
            }

            .industry-nav-item {
                font-size: 1.1rem;
            }

            .industry-visual-container {
                height: 250px;
            }
        }

        /* Expertise & Solutions Section Styles */
        #expertise-solutions {
            background: #ffffff;
            padding: 100px 0;
            overflow: hidden;
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .expertise-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
            position: relative;
            z-index: 1;
            width: 100%;
        }

        .expertise-header {
            text-align: center;
            margin-bottom: 80px;
            opacity: 0;
            transform: translateY(30px);
        }

        .expertise-header h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.5rem;
            font-weight: 700;
            color: #1d1d1f;
            line-height: 1.2;
            letter-spacing: -0.03em;
        }

        .expertise-header .highlight-blue {
            color: #3B8DBC;
        }

        .expertise-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-top: 1px solid #eeeeee;
            will-change: transform;
        }

        .expertise-card {
            padding: 50px;
            border-right: 1px solid #eeeeee;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            min-height: 420px;
            background: #fff;
            opacity: 0;
            will-change: transform, opacity;
        }

        .expertise-card:nth-child(3n) {
            border-right: none;
        }

        .expertise-card:hover {
            background: #fafafa;
        }

        .expertise-icon {
            width: 50px;
            height: 50px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Filter to apply brand blue to icons */
            filter: invert(53%) sepia(19%) saturate(1210%) hue-rotate(164deg) brightness(91%) contrast(85%);
        }

        .expertise-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .expertise-card h4 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.4rem;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 20px;
            line-height: 1.4;
        }

        .expertise-card .text-blue {
            color: #3B8DBC;
        }

        .expertise-card p {
            font-size: 1rem;
            line-height: 1.7;
            color: #515154;
            margin-bottom: 30px;
            font-weight: 400;
        }

        .expertise-btn {
            margin-top: auto;
            padding: 10px 25px;
            border: 1.5px solid #3B8DBC;
            border-radius: 50px;
            color: #3B8DBC;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .expertise-btn:hover {
            background: #3B8DBC;
            color: #ffffff;
            transform: translateY(-2px);
        }


        @media (max-width: 991px) {
            .pipe-gradient-backdrop-panel {
                left: -35px;
                right: -25px;
                bottom: -55px;
                top: 15%;
                border-radius: 24px;
            }

            .pipe-card-ambient-aura {
                left: -45px;
                right: -35px;
                bottom: -65px;
            }
        }

        @media (max-width: 540px) {
            .pipe-gradient-backdrop-panel {
                left: -16px;
                right: -16px;
                bottom: -40px;
                top: 12%;
                border-radius: 20px;
            }

            .pipe-card-ambient-aura {
                left: -20px;
                right: -20px;
                bottom: -45px;
            }
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .expertise-header h2 {
                font-size: 2.8rem;
            }

            .expertise-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .expertise-card:nth-child(3n) {
                border-right: 1px solid #eeeeee;
            }

            .expertise-card:nth-child(2n) {
                border-right: none;
            }
        }

        @media (max-width: 768px) {
            #expertise-solutions {
                height: auto;
                padding: 80px 0;
                display: block;
            }

            .expertise-grid {
                grid-template-columns: 1fr;
                border-top: none;
            }

            .expertise-card {
                border-right: none;
                padding: 35px;
                min-height: auto;
                border-bottom: 1px solid #eee;
            }

            .expertise-header h2 {
                font-size: 2rem;
            }

            .expertise-header {
                opacity: 1 !important;
                margin-bottom: 40px;
            }
        }

        /* Blog Section (Dark Theme) */
        #blog-section {
            background: #05080b;
            padding: 160px 0;
            color: #ffffff;
        }

        .blog-header {
            margin-bottom: 80px;
        }

        .blog-main-card {
            display: flex;
            gap: 60px;
            align-items: center;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 32px;
            padding: 40px;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .blog-main-card:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(59, 141, 188, 0.3);
            transform: translateY(-10px);
        }

        .blog-img-wrap {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            height: 400px;
        }

        .blog-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .blog-main-card:hover .blog-img-wrap img {
            transform: scale(1.05);
        }

        .blog-info {
            flex: 1;
        }

        .blog-category {
            font-size: 0.9rem;
            color: #3B8DBC;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 20px;
            display: block;
        }

        .blog-info h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 3rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 30px;
        }

        .blog-meta {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.5);
            display: flex;
            gap: 20px;
            margin-bottom: 40px;
        }

        .visit-blog-btn {
            font-weight: 600;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 5px;
            width: fit-content;
        }

        /* FAQ Section (Light Theme) */
        #faq-section {
            background: #ffffff;
            padding: 160px 0;
            color: #1d1d1f;
        }

        .faq-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .faq-item {
            border-bottom: 1px solid #eeeeee;
            padding: 30px 0;
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 1.5rem;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .faq-question:hover {
            color: #3B8DBC;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            opacity: 0;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
            margin-top: 20px;
            opacity: 1;
        }

        .faq-answer p {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #515154;
        }

        .faq-icon {
            font-size: 1.5rem;
            transition: transform 0.4s ease;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
            color: #3B8DBC;
        }

        /* Technical Proficiencies Section Styles */
        #tech-proficiencies {
            background: #ffffff;
            padding: 140px 0;
            color: #000;
            position: relative;
            z-index: 10;
            display: block;
        }

        .proficiencies-header {
            max-width: 1000px;
            margin-bottom: 100px;
            padding: 0 40px;
        }

        .prof-logo {
            max-width: 800px;
            width: 100%;
            height: auto;
            /* filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.05)); */
            /* Removed shadow for cleaner look with new logo */
        }

        .proficiency-logo-wrap {
            transform: translateY(10px);
            opacity: 0;
            animation: logoFadeIn 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        }

        @keyframes logoFadeIn {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .proficiencies-header .eyebrow {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: #000 !important;
            /* Pure black */
            margin-bottom: 20px;
            display: block;
            opacity: 1 !important;
        }

        .proficiencies-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 4rem;
            line-height: 1.1;
            margin-bottom: 30px;
            font-weight: 500;
        }

        .proficiencies-header p {
            font-size: 1.15rem;
            color: #000 !important;
            /* Pure black */
            line-height: 1.6;
            opacity: 1 !important;
        }

        .proficiency-list {
            border-top: 1px solid #000;
            /* Darker border for consistency */
        }

        .proficiency-item {
            border-bottom: 1px solid #000;
            /* Darker border */
            padding: 50px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: #000 !important;
            transition: all 0.4s ease;
            position: relative;
            z-index: 11;
            overflow: visible;
            cursor: pointer;
            opacity: 1 !important;
        }

        .proficiency-text {
            font-family: 'Playfair Display', serif;
            font-size: 5.5rem;
            font-weight: 400;
            letter-spacing: -0.04em;
            color: #000 !important;
            display: flex;
            align-items: center;
            gap: 0;
            transition: gap 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            opacity: 1 !important;
        }

        .proficiency-text span {
            color: #000 !important;
            opacity: 1 !important;
        }

        .proficiency-item:hover .proficiency-text {
            gap: 40px;
        }

        .hover-image-reveal {
            width: 0;
            height: 120px;
            overflow: hidden;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform: scale(0.8) rotate(-2deg);
        }

        .proficiency-item:hover .hover-image-reveal {
            width: 220px;
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .hover-image-reveal img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.3);
            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .proficiency-item:hover .hover-image-reveal img {
            transform: scale(1);
        }

        /* Mobile Adjustments */
        @media (max-width: 1200px) {
            .proficiency-text {
                font-size: 4rem;
            }

            .hover-image-reveal {
                height: 90px;
            }

            .proficiency-item:hover .hover-image-reveal {
                width: 140px;
            }
        }

        @media (max-width: 768px) {
            #tech-proficiencies {
                padding: 80px 0;
            }

            .proficiencies-header h2 {
                font-size: 2.8rem;
            }

            .proficiency-text {
                font-size: 2.2rem;
                gap: 10px !important;
                flex-wrap: wrap;
                justify-content: center;
            }

            .hover-image-reveal {
                display: none;
            }

            .proficiency-item {
                padding: 30px 20px;
            }
        }

        /* Metrics Showcase - Square-ish Proportions */
        #metrics-showcase {
            background: #000;
            padding: 100px 0;
            color: #fff;
            position: relative;
            z-index: 10;
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .metrics-header {
            margin-bottom: 80px;
            padding-left: 15px;
        }

        .metrics-header h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.5rem;
            font-weight: 800;
            letter-spacing: -1px;
            color: #FFFFFF;
        }

        .moving-gradient-text {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 25%, #60a5fa 50%, #1d4ed8 75%, #38bdf8 100%);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: movingDarkBlueGradient 2s ease infinite;
            display: inline-block;
        }

        @keyframes movingDarkBlueGradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: 0 15px;
        }

        .metric-card {
            background: #1a1a1a;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 520px;
            /* Reduced for square-ish feel */
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .metric-card:hover {
            transform: translateY(-6px);
            border-color: rgba(56, 189, 248, 0.4);
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(37, 99, 235, 0.25);
        }

        .metric-top {
            padding: 30px 25px;
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto;
            gap: 5px 12px;
            align-items: center;
        }

        .stat-num {
            grid-row: 1;
            grid-column: 1;
            font-family: 'Montserrat', sans-serif;
            font-size: 3.8rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -2px;
            color: #fff;
        }

        .stat-label {
            grid-row: 1;
            grid-column: 2;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #fff;
            padding-top: 2px;
        }

        .metric-desc {
            grid-row: 2;
            grid-column: 1 / span 2;
            font-size: 0.9rem;
            color: #888;
            line-height: 1.4;
            margin-top: 10px;
        }

        .metric-visual {
            flex: 1;
            background: #000;
            position: relative;
            overflow: hidden;
        }

        .visual-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.9;
        }

        @media (max-width: 1200px) {
            .metrics-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .metric-card {
                height: 500px;
            }
        }

        @media (max-width: 768px) {
            .metrics-grid {
                grid-template-columns: 1fr;
            }

            .metrics-header h2 {
                font-size: 2.2rem;
            }

            .stat-num {
                font-size: 3.5rem;
            }

            .metric-card {
                height: auto;
                min-height: 450px;
            }
        }

        /* --- Appinventiv-Style Sleek Pitch-Black Navbar --- */
        :root {
            --nav-bg: #000000;
            --accent-blue: #0066ff;
            --accent-blue-hover: #0052cc;
        }

        .agency-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 70px;
            z-index: 9999;
            background: #000000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }

    

        /* ============================================================
           HERO SECTION — FULL-SCREEN VIDEO BACKGROUND
           ============================================================ */
        .hero-section {
            margin-top: 0 !important;
            position: relative !important;
            min-height: calc(100vh - 70px) !important;
            display: flex !important;
            align-items: center !important;
            padding: 60px 80px 60px !important;
            overflow: hidden !important;
            background: #000 !important;
        }

        /* Background video fills the entire section */
        .hero-bg-video {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center center !important;
            z-index: 0 !important;
            pointer-events: none !important;
        }

        /* Foreground hero text content */
        .hero-content {
            position: relative !important;
            z-index: 2 !important;
            max-width: 680px !important;
        }

        .hero-content > p:first-child {
            font-family: 'Montserrat', sans-serif !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            letter-spacing: 2px !important;
            text-transform: uppercase !important;
            color: rgba(255,255,255,0.7) !important;
            margin-bottom: 18px !important;
        }

        .hero-content h1 {
            font-family: 'Montserrat', sans-serif !important;
            font-size: clamp(36px, 5.5vw, 68px) !important;
            font-weight: 800 !important;
            line-height: 1.08 !important;
            letter-spacing: -0.03em !important;
            color: #ffffff !important;
            margin-bottom: 0 !important;
        }

        .hero-content h1 span {
            background: linear-gradient(135deg, #1A62FF 0%, #38BDF8 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }

        .hero-content > p.mt-3 {
            font-family: 'Montserrat', sans-serif !important;
            font-size: 16px !important;
            font-weight: 400 !important;
            color: rgba(255,255,255,0.72) !important;
            max-width: 480px !important;
            line-height: 1.6 !important;
        }

        /* CTA button — "Let's Connect" */
        .watch-btn {
            display: inline-flex !important;
            align-items: center !important;
            gap: 10px !important;
            background: linear-gradient(135deg, #0066ff, #1A62FF) !important;
            color: #ffffff !important;
            font-family: 'Montserrat', sans-serif !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            letter-spacing: 0.3px !important;
            padding: 14px 28px !important;
            border-radius: 999px !important;
            text-decoration: none !important;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            box-shadow: 0 4px 20px rgba(0, 102, 255, 0.45) !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .watch-btn:hover {
            background: linear-gradient(135deg, #0052cc, #0a4fd8) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 30px rgba(0, 102, 255, 0.6) !important;
            color: #ffffff !important;
        }

        .watch-btn .btn-icon {
            width: 16px !important;
            height: 16px !important;
            filter: brightness(0) invert(1) !important;
            transition: transform 0.3s ease !important;
        }

        .watch-btn:hover .btn-icon {
            transform: translateX(4px) !important;
        }

        /* Video modal */
        .video-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 99999;
            align-items: center;
            justify-content: center;
        }

        .video-modal.active {
            display: flex;
        }

        .video-modal-content {
            position: relative;
            width: 90vw;
            max-width: 1100px;
            aspect-ratio: 16/9;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
        }

        .video-modal-content video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .close-modal {
            position: absolute;
            top: 16px;
            right: 20px;
            background: rgba(255,255,255,0.15);
            border: none;
            color: #fff;
            font-size: 28px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Responsive hero on tablets */
        @media (max-width: 1200px) {
            .hero-section {
                padding: 60px 48px 60px !important;
            }
        }

        .agency-nav.scrolled {
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.7);
            height: 64px;
        }

        .nav-floating-container {
            width: 100%;
            max-width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 clamp(24px, 3.8vw, 56px);
            position: relative;
        }

        /* Subtle Bottom Accent Glow Line */
        .nav-glow-line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.25), rgba(255, 255, 255, 0.08), transparent);
        }

        /* Logo Styling */
        .nav-logo-left {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .nav-logo-left a {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .nav-logo-left img {
            height: 42px;
            width: auto;
            max-height: 44px;
            object-fit: contain;
            transition: transform 0.25s ease;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
        }

        .agency-nav.scrolled .nav-logo-left img {
            height: 38px;
            max-height: 38px;
        }

        .nav-logo-left:hover img {
            transform: scale(1.02);
        }

        /* Nav Links (Right-aligned cluster next to Contact button, exactly like Appinventiv) */
        .nav-links-center {
            display: flex;
            align-items: center;
            gap: 26px;
            height: 100%;
            margin-left: auto;
            margin-right: 0;
            padding: 0;
        }

        .nav-item-wrap {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
        }

        .nav-link-item {
            color: #ffffff;
            text-decoration: none;
            font-family: 'Montserrat', sans-serif;
            font-size: 13.5px;
            font-weight: 500;
            letter-spacing: 0.1px;
            transition: color 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 0;
            cursor: pointer;
            white-space: nowrap;
        }

        .nav-caret {
            font-size: 9px;
            color: rgba(255, 255, 255, 0.65);
            transition: transform 0.25s ease, color 0.25s ease;
        }

        .nav-item-wrap:hover .nav-caret {
            transform: rotate(180deg);
            color: #0066ff;
        }

        .nav-link-item:hover {
            color: #0087d2;
        }

        /* Special ConvoyAI Highlight */
        .nav-ai-glow {
            color: #ffffff;
            font-weight: 600;
        }

        .nav-ai-sparkle {
            font-size: 11px;
            margin-left: 2px;
            color: #00a2ff;
        }

        /* Right: CTA Group (AI Pill + Contact Us) */
        .nav-cta-right {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: 28px;
            flex-shrink: 0;
        }

        /* Contact Us Blue Pill Button (Appinventiv Style) */
        .btn-appinv-contact {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #0066ff;
            color: #ffffff !important;
            font-family: 'Montserrat', sans-serif;
            font-size: 13.5px;
            font-weight: 600;
            padding: 8px 20px;
            height: 38px;
            border-radius: 999px;
            text-decoration: none;
            transition: all 0.25s ease;
            box-shadow: 0 3px 12px rgba(0, 102, 255, 0.35);
            white-space: nowrap;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .btn-appinv-contact:hover {
            background: #0052cc;
            transform: translateY(-1px);
            box-shadow: 0 5px 18px rgba(0, 102, 255, 0.55);
            color: #ffffff;
        }

        .btn-appinv-contact i {
            font-size: 12px;
        }

        /* Highlighted AI Pill Button with Always-On Animations */
        .btn-nav-ai {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            height: 38px;
            border-radius: 999px;
            background: linear-gradient(135deg, #1ea7fd 0%, #0d6efd 48%, #004fe8 100%);
            color: #ffffff !important;
            text-decoration: none;
            font-family: 'Montserrat', sans-serif;
            font-size: 13.5px;
            font-weight: 800;
            font-style: italic;
            letter-spacing: 0.6px;
            border: 1px solid rgba(255, 255, 255, 0.45);
            box-shadow:
                0 0 16px rgba(13, 110, 253, 0.55),
                0 4px 12px rgba(0, 50, 180, 0.3),
                inset 0 1.5px 2px rgba(255, 255, 255, 0.75),
                inset 0 -2px 4px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            animation: aiPillPulseGlow 3s infinite ease-in-out;
            z-index: 2;
        }

        /* Ambient Aura Pulsing Glow */
        @keyframes aiPillPulseGlow {

            0%,
            100% {
                box-shadow:
                    0 0 14px rgba(13, 110, 253, 0.55),
                    0 4px 12px rgba(0, 50, 180, 0.3),
                    inset 0 1.5px 2px rgba(255, 255, 255, 0.75),
                    inset 0 -2px 4px rgba(0, 0, 0, 0.25);
                border-color: rgba(255, 255, 255, 0.45);
            }

            50% {
                box-shadow:
                    0 0 24px rgba(30, 167, 253, 0.9),
                    0 0 40px rgba(13, 110, 253, 0.45),
                    0 4px 14px rgba(0, 50, 180, 0.35),
                    inset 0 2px 3px rgba(255, 255, 255, 0.95),
                    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
                border-color: rgba(255, 255, 255, 0.85);
            }
        }

        /* Continuous Diagonal Shimmer Light Sweep */
        .btn-nav-ai::before {
            content: '';
            position: absolute;
            top: -60%;
            left: -80%;
            width: 50%;
            height: 220%;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.65) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: rotate(25deg);
            animation: aiShimmerSweep 3.6s infinite cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        @keyframes aiShimmerSweep {
            0% {
                left: -80%;
            }

            30% {
                left: 140%;
            }

            100% {
                left: 140%;
            }
        }

        .btn-nav-ai:hover {
            transform: translateY(-2px) scale(1.07);
            color: #ffffff !important;
            box-shadow:
                0 0 28px rgba(30, 167, 253, 0.95),
                0 0 50px rgba(13, 110, 253, 0.5),
                0 6px 18px rgba(0, 0, 0, 0.35),
                inset 0 2px 3px #ffffff;
            border-color: #ffffff;
        }

        .ai-badge-text {
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            font-style: italic;
            line-height: 1;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 0 8px rgba(255, 255, 255, 0.5);
        }

        /* Sparkles Container & Dynamic Twinkle Animation */
        .ai-sparkles-wrap {
            position: relative;
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .ai-star-main {
            position: absolute;
            width: 13px;
            height: 13px;
            bottom: 0px;
            left: 0px;
            fill: #ffffff;
            filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95));
            animation: aiStarTwinkleMain 1.9s infinite ease-in-out;
            transform-origin: center center;
        }

        .ai-star-sub {
            position: absolute;
            width: 8px;
            height: 8px;
            top: 0px;
            right: 0px;
            fill: #ffffff;
            filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
            animation: aiStarTwinkleSub 1.9s infinite ease-in-out 0.45s;
            transform-origin: center center;
        }

        @keyframes aiStarTwinkleMain {

            0%,
            100% {
                transform: scale(0.85) rotate(0deg);
                opacity: 0.8;
            }

            50% {
                transform: scale(1.3) rotate(18deg);
                opacity: 1;
                filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
            }
        }

        @keyframes aiStarTwinkleSub {

            0%,
            100% {
                transform: scale(0.75) rotate(0deg);
                opacity: 0.7;
            }

            50% {
                transform: scale(1.35) rotate(-20deg);
                opacity: 1;
                filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1));
            }
        }

        .btn-floating-cta {
            background: linear-gradient(135deg, #111 0%, #000 100%);
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
            padding: 12px 28px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .btn-floating-cta::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent);
            transform: rotate(45deg);
            animation: ctaShine 4s infinite;
        }

        @keyframes ctaShine {
            0% {
                transform: rotate(45deg) translateY(-100%);
            }

            20% {
                transform: rotate(45deg) translateY(100%);
            }

            100% {
                transform: rotate(45deg) translateY(100%);
            }
        }

        .btn-floating-cta:hover {
            transform: scale(1.05) translateY(-2px);
            border-color: var(--accent-cyan);
            box-shadow: 0 10px 25px var(--accent-glow);
        }

        .btn-floating-cta i {
            transition: transform 0.3s ease;
        }

        .btn-floating-cta:hover i {
            transform: translateX(4px);
        }

        /* Dropdowns Overhaul */
        .dropdown-floating-panel::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            height: 20px;
        }

        .dropdown-floating-panel {
            position: absolute;
            top: calc(100% + 15px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 20px;
            width: 500px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        }

        .nav-item-wrap:hover .dropdown-floating-panel {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        /* Services Mega-Dropdown (Matching Screenshot 1) */
        .dropdown-services-panel {
            width: 980px !important;
            max-width: 95vw;
            display: flex !important;
            flex-direction: column;
            gap: 16px;
            padding: 24px 28px 18px !important;
            border-radius: 20px !important;
            background: rgba(8, 14, 26, 0.98) !important;
            backdrop-filter: blur(30px) !important;
            -webkit-backdrop-filter: blur(30px) !important;
            border: 1px solid rgba(0, 102, 255, 0.3) !important;
            box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 102, 255, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
            left: 50% !important;
            transform: translateX(-40%) translateY(12px) !important;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .nav-item-wrap:hover .dropdown-services-panel {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateX(-40%) translateY(0) !important;
        }

        .services-mega-columns {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 24px;
        }

        .services-mega-col {
            display: flex;
            flex-direction: column;
        }

        .services-col-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.8px;
            color: #94a3b8;
            padding-bottom: 10px;
            margin-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-transform: uppercase;
        }

        .services-col-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #38bdf8;
            font-size: 13px;
        }

        .services-col-links {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .services-item-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 10px;
            border-radius: 8px;
            text-decoration: none;
            color: #e2e8f0;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .services-item-link:hover {
            background: rgba(0, 102, 255, 0.14);
            color: #38bdf8;
            padding-left: 14px;
        }

        .services-item-link.highlight-staffing {
            background: rgba(0, 102, 255, 0.08);
            border: 1px solid rgba(0, 102, 255, 0.25);
            font-weight: 600;
        }

        .services-item-link.highlight-staffing:hover {
            background: rgba(0, 102, 255, 0.22);
            border-color: #38bdf8;
        }

        .item-badge-plus {
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.35);
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .services-item-link:hover .item-badge-plus {
            color: #38bdf8;
            transform: translateX(2px);
        }

        /* ==========================================================================
           SERVICES MEGA MENU FLYOUT SUB-DROPDOWNS (MATCHING REFERENCE SCREENSHOT)
           ========================================================================== */
        .services-flyout-wrapper {
            position: relative;
            width: 100%;
        }

        .services-flyout-trigger {
            cursor: pointer;
            user-select: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s ease;
        }

        /* Active highlight state matching user's screenshot */
        .services-flyout-wrapper.open > .services-flyout-trigger,
        .services-flyout-wrapper:hover > .services-flyout-trigger {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-radius: 8px;
            padding-left: 14px;
        }

        .services-flyout-wrapper.open > .services-flyout-trigger .item-badge-plus,
        .services-flyout-wrapper:hover > .services-flyout-trigger .item-badge-plus {
            color: #1a73e8 !important;
            font-weight: 700;
            font-size: 16px;
            transform: none !important;
        }

        /* Floating flyout card matching user's screenshot */
        .services-flyout-card {
            position: absolute;
            left: calc(100% + 4px);
            top: -6px;
            min-width: 215px;
            background: #ffffff !important;
            border-radius: 14px !important;
            padding: 10px 18px !important;
            box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            z-index: 150 !important;
            opacity: 0;
            visibility: hidden;
            transform: translateY(6px);
            transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
            pointer-events: none;
        }

        /* Open on hover or when toggled via click */
        .services-flyout-wrapper.open > .services-flyout-card,
        .services-flyout-wrapper:hover > .services-flyout-card {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
            pointer-events: auto !important;
        }

        .services-flyout-link {
            display: block;
            padding: 7px 0;
            color: #0f172a !important;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            font-weight: 500;
            text-decoration: none !important;
            transition: all 0.15s ease;
            line-height: 1.4;
        }

        .services-flyout-link:hover {
            color: #1a73e8 !important;
            padding-left: 4px;
        }

        .services-flyout-divider {
            border-top: 1px dashed #cbd5e1 !important;
            margin: 4px 0 !important;
            width: 100%;
        }

        @media (max-width: 991px) {
            .services-flyout-card {
                position: static !important;
                left: auto !important;
                top: auto !important;
                margin: 8px 0 8px 12px !important;
                transform: none !important;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
            }
        }

        .services-bottom-cta-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 12px 18px;
            background: linear-gradient(135deg, rgba(254, 243, 199, 0.08) 0%, rgba(254, 249, 195, 0.03) 100%);
            border: 1px solid rgba(253, 230, 138, 0.2);
            border-radius: 12px;
            margin-top: 6px;
        }

        .services-bottom-cta-text {
            color: #f1f5f9;
            font-size: 13px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            line-height: 1.4;
        }

        .services-bottom-cta-btn {
            background: #1a62ff;
            color: #ffffff !important;
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 700;
            padding: 9px 18px;
            border-radius: 8px;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s ease;
            box-shadow: 0 4px 14px rgba(26, 98, 255, 0.4);
            flex-shrink: 0;
        }

        .services-bottom-cta-btn:hover {
            background: #0052e0;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(26, 98, 255, 0.6);
            color: #ffffff !important;
        }

        @media (max-width: 1200px) {
            .dropdown-services-panel {
                width: 820px !important;
                transform: translateX(-50%) translateY(12px) !important;
            }
            .nav-item-wrap:hover .dropdown-services-panel {
                transform: translateX(-50%) translateY(0) !important;
            }
            .services-mega-columns {
                gap: 16px;
            }
        }

        /* ==========================================================================
           HORIZONTAL AI SERVICES DROPDOWN (PREMIUM GLASS DOCK)
           ========================================================================== */
        .dropdown-ai-horizontal-panel {
            top: calc(100% + 14px) !important;
            left: 50% !important;
            transform: translateX(-50%) translateY(12px) !important;
            width: max-content !important;
            min-width: 820px !important;
            max-width: 95vw !important;
            background: rgba(6, 11, 24, 0.96) !important;
            backdrop-filter: blur(28px) !important;
            -webkit-backdrop-filter: blur(28px) !important;
            border: 1px solid rgba(56, 189, 248, 0.28) !important;
            border-radius: 20px !important;
            padding: 16px 20px !important;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 102, 255, 0.25) !important;
        }

        .dropdown-ai-horizontal-panel::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            height: 22px;
        }

        .nav-item-wrap:hover .dropdown-ai-horizontal-panel {
            transform: translateX(-50%) translateY(0) !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }

        .ai-dropdown-horizontal-grid {
            display: flex !important;
            flex-direction: row !important;
            align-items: stretch !important;
            justify-content: space-between !important;
            gap: 12px !important;
        }

        .ai-nav-card {
            flex: 1 1 0 !important;
            min-width: 125px !important;
            max-width: 155px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 10px !important;
            padding: 14px 14px 16px !important;
            background: rgba(255, 255, 255, 0.03) !important;
            border: 1px solid rgba(255, 255, 255, 0.07) !important;
            border-radius: 14px !important;
            text-decoration: none !important;
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .ai-nav-card:hover {
            background: rgba(0, 102, 255, 0.16) !important;
            border-color: rgba(56, 189, 248, 0.45) !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 102, 255, 0.25) !important;
        }

        .ai-nav-card-icon {
            width: 38px !important;
            height: 38px !important;
            border-radius: 10px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 17px !important;
            transition: all 0.25s ease !important;
        }

        .ai-nav-card:hover .ai-nav-card-icon {
            transform: scale(1.1) !important;
        }

        .ai-nav-card-title {
            color: #ffffff !important;
            font-family: 'Montserrat', sans-serif !important;
            font-size: 13.5px !important;
            font-weight: 700 !important;
            line-height: 1.25 !important;
            margin: 0 !important;
        }

        .ai-nav-card-desc {
            color: #94a3b8 !important;
            font-size: 11px !important;
            line-height: 1.35 !important;
            margin: 0 !important;
            font-weight: 400 !important;
        }

        .ai-nav-card:hover .ai-nav-card-title {
            color: #38bdf8 !important;
        }

        @media (max-width: 1024px) {
            .dropdown-ai-horizontal-panel {
                min-width: 90vw !important;
            }
            .ai-dropdown-horizontal-grid {
                flex-wrap: wrap !important;
            }
            .ai-nav-card {
                flex: 1 1 calc(33.333% - 10px) !important;
                max-width: none !important;
            }
        }

        .mega-menu-item {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            padding: 12px;
            border-radius: 12px;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .mega-menu-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }

        .mega-menu-item strong {
            font-size: 14px;
            color: #fff;
        }

        .mega-menu-item span {
            font-size: 11px;
            opacity: 0.7;
        }

        /* Adjust main content padding for fixed top navbar */
        body {
            padding-top: 64px;
        }

        @media (max-width: 1250px) {
            .nav-links-center {
                gap: 16px;
            }

            .nav-link-item {
                font-size: 13px;
            }

            .btn-appinv-contact {
                padding: 7px 16px;
                font-size: 13px;
            }
        }

        @media (max-width: 1024px) {
            body {
                padding-top: 60px;
            }

            .agency-nav {
                height: 60px;
            }

            .nav-floating-container {
                padding: 0 16px;
            }

            .nav-links-center {
                display: none;
            }

            .nav-cta-right {
                display: flex;
                margin-left: auto;
                margin-right: 10px;
                gap: 8px;
            }

            .navbar-toggler {
                display: block !important;
                border: none;
                background: transparent;
                padding: 4px;
            }
        }

        /* Cinematic Award Showcase Styles */
        #award-showcase-cinematic {
            position: relative;
            height: 100vh;
            background: url('../assets/images/AWARDSECTIONBG.png') no-repeat center center;
            background-size: cover;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #award-showcase-cinematic::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.3);
            /* Subtle overlay for text readability */
            z-index: 1;
        }

        .award-content-wrapper {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 100%;
            max-width: 800px;
        }

        .award-text-container {
            margin-bottom: 40px;
            min-height: 120px;
        }

        .award-text-container h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        .award-text-container h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.5rem;
            font-weight: 800;
            color: #fff;
            margin: 0;
        }

        .award-badge-container {
            position: relative;
            display: inline-block;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .award-badge-container img {
            max-width: 360px;
            max-height: 280px;
            width: auto;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 20px 50px rgba(255, 255, 255, 0.15));
        }

        .award-badge-container:hover {
            transform: scale(1.05) rotateX(10deg);
        }

        .award-controls {
            margin-top: 60px;
        }

        .play-btn-pulse {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            position: relative;
            animation: pulsePlay 2s infinite;
        }

        @keyframes pulsePlay {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
            }

            70% {
                box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            }
        }

        /* ============================================================ */
        /* SECTION 2: INTERACTIVE ROTATING ORBIT & SERVICES SHOWCASE   */
        /* ============================================================ */
        #services-orbit-section {
            background: #ffffff;
            position: relative;
            z-index: 15;
            overflow: hidden;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .services-orbit-pin {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            padding: 80px 0;
            background: #ffffff;
        }

        .services-orbit-container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            position: relative;
            z-index: 2;
        }

        /* --- LEFT COLUMN: 3D GLOBE & CONTINUOUS ROTATING ORBIT SYSTEM --- */
        .orbit-stage-col {
            flex: 0 0 48%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .orbit-system-wrapper {
            position: relative;
            width: 580px;
            height: 580px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -50px;
        }

        /* Ambient glowing halo behind the globe - pure white */
        .orbit-halo-glow {
            position: absolute;
            width: 620px;
            height: 620px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, transparent 70%);
            filter: blur(40px);
            pointer-events: none;
            z-index: 1;
        }

        /* Ambient soft gradient disc behind the globe - clean pure white */
        .orbit-disc-bg {
            position: absolute;
            width: 480px;
            height: 480px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, #ffffff 80%, rgba(255, 255, 255, 0) 100%);
            z-index: 2;
            pointer-events: none;
        }

        /* Inner subtle guide track */
        .orbit-track-inner {
            position: absolute;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            border: 1px dashed rgba(0, 0, 0, 0.08);
            z-index: 3;
            pointer-events: none;
        }

        /* Main continuously rotating orbit ring */
        .orbit-rotating-ring {
            position: absolute;
            width: 520px;
            height: 520px;
            border-radius: 50%;
            border: 1.5px solid rgba(0, 120, 225, 0.28);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: continuousOrbitSpin 32s linear infinite;
            z-index: 5;
        }

        .orbit-rotating-ring::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px dashed rgba(0, 75, 165, 0.35);
            pointer-events: none;
        }

        @keyframes continuousOrbitSpin {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* Orbiting Node Badges */
        .orbit-badge-node {
            position: absolute;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: linear-gradient(135deg, #003c96, #0087d2);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            box-shadow: 0 8px 24px rgba(0, 75, 165, 0.35), 0 0 0 5px #ffffff;
            cursor: pointer;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, background 0.4s ease;
            margin-top: -29px;
            margin-left: -29px;
        }

        /* Counter-rotation to keep icons upright */
        .orbit-badge-node i {
            display: inline-block;
            animation: continuousNodeCounter 32s linear infinite;
        }

        @keyframes continuousNodeCounter {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(-360deg);
            }
        }

        .orbit-badge-node:hover {
            transform: scale(1.18);
            box-shadow: 0 12px 30px rgba(0, 135, 210, 0.5), 0 0 0 6px #ffffff;
        }

        .orbit-badge-node.active {
            background: linear-gradient(135deg, #002d87, #00a0f0) !important;
            box-shadow: 0 0 25px rgba(0, 135, 210, 0.8), 0 0 45px rgba(0, 60, 150, 0.5), 0 0 0 7px #ffffff !important;
            transform: scale(1.25) !important;
        }

        /* Specific node positions along the 520px circle (r = 260px from center 260, 260) */
        .orbit-node-1 {
            top: calc(50% + 0px);
            left: calc(50% + 260px);
        }

        .orbit-node-2 {
            top: calc(50% + 247.3px);
            left: calc(50% + 80.3px);
        }

        .orbit-node-3 {
            top: calc(50% + 152.8px);
            left: calc(50% - 210.3px);
        }

        .orbit-node-4 {
            top: calc(50% - 152.8px);
            left: calc(50% - 210.3px);
        }

        .orbit-node-5 {
            top: calc(50% - 247.3px);
            left: calc(50% + 80.3px);
        }

        /* The 3D Digital Globe Core */
        .orbit-sphere-core {
            position: absolute;
            width: 440px;
            height: 440px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.08));
            animation: coreLevitate 7s ease-in-out infinite alternate;
        }

        .orbit-sphere-core img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%;
            transform-origin: center center;
            animation: orbitDiagramFloat 8s ease-in-out infinite alternate;
        }

        @keyframes continuousGlobeSpin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes coreLevitate {
            0% {
                transform: translate(-50%, -50%) translateY(-6px);
            }

            100% {
                transform: translate(-50%, -50%) translateY(8px);
            }
        }

        @keyframes orbitDiagramFloat {
            0% {
                transform: scale(1) translateY(0px);
                filter: drop-shadow(0 8px 24px rgba(26, 115, 232, 0.25));
            }

            100% {
                transform: scale(1.03) translateY(-6px);
                filter: drop-shadow(0 16px 40px rgba(26, 115, 232, 0.45));
            }
        }

        /* --- RIGHT COLUMN: INTERACTIVE SCROLL CONTENT PANEL --- */
        .orbit-content-col {
            flex: 0 0 52%;
            padding-left: 30px;
            position: relative;
            z-index: 5;
        }

        .orbit-content-wrapper {
            max-width: 680px;
        }

        /* Eyebrow badge */
        .orbit-eyebrow-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 18px;
            border-radius: 50px;
            background: linear-gradient(90deg, rgba(0, 135, 210, 0.1), rgba(0, 60, 150, 0.08));
            border: 1px solid rgba(0, 135, 210, 0.25);
            margin-bottom: 24px;
        }

        .orbit-eyebrow-badge span.dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #0087d2;
            box-shadow: 0 0 10px #0087d2;
            animation: pulseDot 2s infinite;
        }

        @keyframes pulseDot {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.4);
                opacity: 0.6;
            }
        }

        .orbit-eyebrow-badge span.text {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #1e293b;
        }

        .orbit-step-counter {
            font-size: 0.8rem;
            font-weight: 700;
            color: #003c96;
            background: #ffffff;
            padding: 3px 9px;
            border-radius: 20px;
            margin-left: 6px;
            border: 1px solid rgba(0, 135, 210, 0.2);
        }

        /* Main Service Heading */
        .orbit-main-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.85rem;
            font-weight: 700;
            color: #111827;
            letter-spacing: -0.025em;
            line-height: 1.18;
            margin-bottom: 28px;
            min-height: 70px;
        }

        /* Highlight Description Card (styled with logo theme colors) */
        .orbit-service-card {
            background: linear-gradient(90deg, #f0f7ff 0%, #e6f2fe 50%, #f7fbff 100%);
            border-radius: 20px;
            padding: 26px 36px 26px 58px;
            position: relative;
            margin-bottom: 32px;
            border: 1px solid rgba(0, 135, 210, 0.25);
            box-shadow: 0 12px 32px rgba(0, 60, 150, 0.07);
        }

        /* Connector badge on left edge */
        .card-connector-badge {
            position: absolute;
            left: -26px;
            top: 50%;
            transform: translateY(-50%);
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: linear-gradient(135deg, #003c96, #0087d2);
            box-shadow: 0 8px 24px rgba(0, 75, 165, 0.45), 0 0 0 6px #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 1.4rem;
            z-index: 6;
            transition: all 0.4s ease;
        }

        .orbit-service-card:hover .card-connector-badge {
            transform: translateY(-50%) scale(1.08);
            box-shadow: 0 10px 28px rgba(0, 135, 210, 0.55), 0 0 0 6px #ffffff;
        }

        .orbit-card-desc {
            font-size: 1.05rem;
            line-height: 1.7;
            color: #334155;
            font-weight: 400;
            margin: 0;
            font-family: 'Roboto', sans-serif;
        }

        /* Pill Badges Grid */
        .orbit-pills-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px 20px;
            margin-bottom: 36px;
        }

        .orbit-pill-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, #003c96, #0087d2);
            color: #ffffff;
            padding: 12px 22px;
            border-radius: 50px;
            font-size: 0.88rem;
            font-weight: 600;
            box-shadow: 0 6px 18px rgba(0, 60, 150, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            cursor: default;
        }

        .orbit-pill-badge:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 10px 24px rgba(0, 135, 210, 0.38);
        }

        .orbit-pill-badge .check-circle {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.82rem;
            flex-shrink: 0;
        }

        /* Action & Controls Row */
        .orbit-actions-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.07);
            padding-top: 28px;
        }

        .orbit-nav-tabs {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .orbit-tab-dot {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.12);
            background: #f8fafc;
            color: #64748b;
            font-size: 0.8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .orbit-tab-dot:hover {
            border-color: #0087d2;
            color: #0087d2;
            background: #ffffff;
            transform: translateY(-2px);
        }

        .orbit-tab-dot.active {
            background: linear-gradient(135deg, #003c96, #0087d2) !important;
            color: #ffffff !important;
            border-color: transparent !important;
            box-shadow: 0 6px 16px rgba(0, 75, 165, 0.35) !important;
            transform: scale(1.1) !important;
        }

        .orbit-cta-button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #111827;
            color: #ffffff;
            padding: 13px 28px;
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 0.92rem;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        .orbit-cta-button:hover {
            background: #0087d2;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(0, 135, 210, 0.4);
        }

        .orbit-cta-button i {
            transition: transform 0.3s ease;
        }

        .orbit-cta-button:hover i {
            transform: translateX(4px);
        }

        /* Responsive Breakpoints */
        @media (max-width: 1200px) {
            .orbit-system-wrapper {
                width: 480px;
                height: 480px;
                margin-left: -20px;
            }

            .orbit-sphere-core {
                width: 360px;
                height: 360px;
            }

            .orbit-rotating-ring {
                width: 440px;
                height: 440px;
            }

            .orbit-node-1 {
                top: calc(50% + 0px);
                left: calc(50% + 220px);
            }

            .orbit-node-2 {
                top: calc(50% + 209px);
                left: calc(50% + 68px);
            }

            .orbit-node-3 {
                top: calc(50% + 129px);
                left: calc(50% - 178px);
            }

            .orbit-node-4 {
                top: calc(50% - 129px);
                left: calc(50% - 178px);
            }

            .orbit-node-5 {
                top: calc(50% - 209px);
                left: calc(50% + 68px);
            }

            .orbit-main-title {
                font-size: 2.4rem;
            }
        }

        @media (max-width: 992px) {
            .services-orbit-container {
                flex-direction: column;
                padding: 40px 24px;
            }

            .orbit-stage-col {
                width: 100%;
                margin-bottom: 40px;
            }

            .orbit-system-wrapper {
                margin-left: 0;
                width: 400px;
                height: 400px;
            }

            .orbit-sphere-core {
                width: 300px;
                height: 300px;
            }

            .orbit-rotating-ring {
                width: 360px;
                height: 360px;
            }

            .orbit-node-1 {
                top: calc(50% + 0px);
                left: calc(50% + 180px);
            }

            .orbit-node-2 {
                top: calc(50% + 171px);
                left: calc(50% + 55px);
            }

            .orbit-node-3 {
                top: calc(50% + 105px);
                left: calc(50% - 145px);
            }

            .orbit-node-4 {
                top: calc(50% - 105px);
                left: calc(50% - 145px);
            }

            .orbit-node-5 {
                top: calc(50% - 171px);
                left: calc(50% + 55px);
            }

            .orbit-content-col {
                width: 100%;
                padding-left: 0;
            }

            .orbit-pills-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .orbit-system-wrapper {
                width: 310px;
                height: 310px;
            }

            .orbit-sphere-core {
                width: 230px;
                height: 230px;
            }

            .orbit-rotating-ring {
                width: 280px;
                height: 280px;
            }

            .orbit-badge-node {
                width: 46px;
                height: 46px;
                font-size: 1.1rem;
                margin-top: -23px;
                margin-left: -23px;
            }

            .orbit-node-1 {
                top: calc(50% + 0px);
                left: calc(50% + 140px);
            }

            .orbit-node-2 {
                top: calc(50% + 133px);
                left: calc(50% + 43px);
            }

            .orbit-node-3 {
                top: calc(50% + 82px);
                left: calc(50% - 113px);
            }

            .orbit-node-4 {
                top: calc(50% - 82px);
                left: calc(50% - 113px);
            }

            .orbit-node-5 {
                top: calc(50% - 133px);
                left: calc(50% + 43px);
            }

            .orbit-main-title {
                font-size: 1.85rem;
            }

            .orbit-service-card {
                padding: 22px 20px 22px 42px;
            }

            .card-connector-badge {
                width: 44px;
                height: 44px;
                left: -20px;
                font-size: 1.1rem;
            }

            .orbit-actions-row {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        /* ============================================================ */
        /* CLIENT PROJECTS SHOWCASE SECTION (100% MATCH TO REFERENCE)   */
        /* ============================================================ */
        #client-projects-showcase {
            background: #ffffff;
            padding: 130px 0 100px;
            position: relative;
            z-index: 20;
            overflow: hidden;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            color: #0f172a;
        }

        .projects-showcase-container {
            max-width: 1540px;
            margin: 0 auto;
            padding: 0 40px;
            position: relative;
        }

        /* --- HEADER AREA --- */
        .projects-header-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 40px;
            margin-bottom: 45px;
            flex-wrap: wrap;
        }

        .projects-header-left {
            flex: 1;
            min-width: 320px;
            max-width: 680px;
        }

        .projects-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .projects-eyebrow-line {
            display: inline-block;
            width: 45px;
            height: 1.5px;
            background: #94a3b8;
            vertical-align: middle;
        }

        .projects-main-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.6rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.08;
            letter-spacing: -0.035em;
            margin: 0 0 20px;
        }

        .projects-subtitle {
            font-family: 'Roboto', sans-serif;
            font-size: 1.15rem;
            color: #64748b;
            line-height: 1.65;
            max-width: 540px;
            margin: 0;
        }

        /* --- HEADER RIGHT: ANNOTATION, CTA & STATS --- */
        .projects-header-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 45px;
        }

        .projects-cta-box {
            display: flex;
            align-items: center;
            gap: 16px;
            position: relative;
        }

        .ideas-impact-note {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        .ideas-impact-text {
            font-family: 'Caveat', cursive;
            font-size: 1.7rem;
            color: #64748b;
            line-height: 1.1;
            transform: rotate(-6deg);
            white-space: nowrap;
            text-align: right;
        }

        .ideas-impact-arrow {
            width: 46px;
            height: 30px;
            transform: rotate(5deg);
        }

        .btn-view-all-projects {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #0f172a;
            color: #ffffff;
            padding: 14px 30px;
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 0.95rem;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
        }

        .btn-view-all-projects:hover {
            background: #0087d2;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(0, 135, 210, 0.35);
        }

        .btn-view-all-projects i {
            font-size: 0.95rem;
            transition: transform 0.3s ease;
        }

        .btn-view-all-projects:hover i {
            transform: translate(2px, -2px);
        }

        /* Stats row */
        .projects-stats-row {
            display: flex;
            align-items: center;
            gap: 36px;
        }

        .proj-stat-cell {
            text-align: left;
        }

        .proj-stat-num {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.7rem;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.03em;
            line-height: 1;
            margin-bottom: 6px;
        }

        .proj-stat-label {
            font-family: 'Roboto', sans-serif;
            font-size: 0.88rem;
            font-weight: 500;
            color: #64748b;
            white-space: nowrap;
        }

        .proj-stat-divider {
            width: 1px;
            height: 52px;
            background: rgba(0, 0, 0, 0.12);
        }

        /* --- CATEGORY FILTER PILLS --- */
        .projects-filter-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 45px;
            overflow-x: auto;
            padding-bottom: 8px;
            scrollbar-width: none;
        }

        .projects-filter-bar::-webkit-scrollbar {
            display: none;
        }

        .project-filter-pill {
            padding: 10px 24px;
            border-radius: 50px;
            background: #f1f5f9;
            color: #475569;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            white-space: nowrap;
            outline: none;
        }

        .project-filter-pill:hover {
            background: #e2e8f0;
            color: #0f172a;
        }

        .project-filter-pill.active {
            background: #0f172a;
            color: #ffffff;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
        }

        /* --- CAROUSEL TRACK & CARDS --- */
      
        /* =====================================================
           PROJECT SECTION
        ====================================================== */

        .projects-section {
            width: 100%;

            padding: 70px 0;

            overflow: hidden;

            background:
                radial-gradient(
                    circle at 20% 20%,
                    rgba(0, 104, 169, 0.10),
                    transparent 35%
                ),
                radial-gradient(
                    circle at 80% 80%,
                    rgba(59, 141, 188, 0.08),
                    transparent 35%
                ),
                #020617;
        }


        .projects-container {
            width: min(1400px, calc(100% - 40px));

            margin: 0 auto;
        }


        /* =====================================================
           TITLE
        ====================================================== */

        .projects-heading {
            margin-bottom: 35px;
        }


        .projects-heading small {
            display: block;

            margin-bottom: 8px;

            color: #38bdf8;

            font-size: 12px;

            font-weight: 800;

            letter-spacing: 2px;

            text-transform: uppercase;
        }


        .projects-heading h2 {
            margin: 0;

            color: #fff;

            font-size: clamp(30px, 4vw, 54px);

            line-height: 1.05;

            font-weight: 800;
        }


        .projects-heading p {
            max-width: 650px;

            margin: 15px 0 0;

            color: #94a3b8;

            font-size: 15px;

            line-height: 1.7;
        }


        /* =====================================================
           FILTER BAR
        ====================================================== */

        .projects-filter-bar {
            width: 100%;

            display: flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 28px;

            padding-bottom: 4px;

            overflow-x: auto;

            scrollbar-width: none;

            -webkit-overflow-scrolling: touch;
        }


        .projects-filter-bar::-webkit-scrollbar {
            display: none;
        }


        .project-filter-pill {
            flex: 0 0 auto;

            padding: 9px 17px;

            border: 1px solid rgba(255, 255, 255, 0.10);

            border-radius: 999px;

            background: rgba(255, 255, 255, 0.04);

            color: #94a3b8;

            font-size: 12px;

            font-weight: 600;

            cursor: pointer;

            white-space: nowrap;

            transition:
                all .25s ease;
        }


        .project-filter-pill:hover {
            color: #fff;

            border-color:
                rgba(56, 189, 248, .35);

            background:
                rgba(56, 189, 248, .08);
        }


        .project-filter-pill.active {
            color: #fff;

            border-color:
                rgba(56, 189, 248, .55);

            background:
                rgba(56, 189, 248, .14);

            box-shadow:
                0 0 20px
                rgba(56, 189, 248, .08);
        }


        /* =====================================================
           CAROUSEL WRAPPER
        ====================================================== */

        .projects-carousel-wrapper {
            position: relative;

            width: 100%;

            overflow: hidden;
        }


        /* =====================================================
           CAROUSEL TRACK
        ====================================================== */

        .projects-cards-track {
            width: 100%;

            display: flex;

            gap: 28px;

            overflow-x: auto;

            overflow-y: hidden;

            padding:
                8px 4px 22px;

            scroll-behavior: smooth;

            scroll-snap-type: x mandatory;

            scrollbar-width: none;

            -ms-overflow-style: none;

            -webkit-overflow-scrolling: touch;
        }


        .projects-cards-track::-webkit-scrollbar {
            display: none;
        }


        /* =====================================================
           PROJECT CARD
        ====================================================== */

        .project-card {
            position: relative;

            flex:
                0 0 440px;

            width: 440px;

            min-width: 440px;

            overflow: hidden;

            border-radius: 24px;

            scroll-snap-align: start;

            cursor: pointer;

            transition:
                transform .35s ease,
                opacity .35s ease;
        }


        .project-card:hover {
            transform: translateY(-5px);
        }


        /* =====================================================
           DESKTOP CARD
        ====================================================== */

        .desktop-card-view {
            position: relative;

            width: 100%;

            min-height: 500px;

            padding: 18px;

            overflow: hidden;

            border-radius: 24px;

            background:
                radial-gradient(
                    circle at top right,
                    rgba(56, 189, 248, .10),
                    transparent 45%
                ),
                #07111f;

            border:
                1px solid rgba(255, 255, 255, .09);
        }


        .ditto-card-asset {
            width: 100%;

              height: 560px;

            display: block;

            object-fit: cover;

            object-position: center;

            border-radius: 18px;

            transition:
                transform .55s
                cubic-bezier(.2, .8, .2, 1);
        }


        .project-card:hover
        .ditto-card-asset {
            transform: scale(1.025);
        }


        /* =====================================================
           FULL CARD OVERLAY
        ====================================================== */

        .ditto-card-link-overlay {
            position: absolute;

            inset: 0;

            z-index: 10;

            display: block;
        }


        /* =====================================================
           VIEW PROJECT BUTTON WRAPPER
        ====================================================== */

        .project-card-button-wrap {
            position: absolute;

            right: 30px;

            bottom: 30px;

            z-index: 20;
        }


        /* =====================================================
           VIEW PROJECT BUTTON
        ====================================================== */

        .project-view-btn {
            position: relative;

            z-index: 30;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 9px;

            min-height: 44px;

            padding: 9px 15px;

            border:
                1px solid
                rgba(255, 255, 255, .18);

            border-radius: 999px;

            background:
                rgba(2, 6, 23, .78);

            color: #fff;

            text-decoration: none;

            font-size: 12px;

            font-weight: 700;

            white-space: nowrap;

            backdrop-filter:
                blur(14px);

            -webkit-backdrop-filter:
                blur(14px);

            transition:
                background .3s ease,
                border-color .3s ease,
                transform .3s ease,
                box-shadow .3s ease;
        }


        .project-view-btn:hover {
            color: #fff;

            background: #0068A9;

            border-color: #3B8DBC;

            transform:
                translateY(-2px);

            box-shadow:
                0 12px 30px
                rgba(0, 104, 169, .30);
        }


        .project-view-btn-icon {
            width: 25px;

            height: 25px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            background:
                rgba(255, 255, 255, .12);

            transition:
                transform .3s ease;
        }


        .project-view-btn:hover
        .project-view-btn-icon {
            transform:
                translate(2px, -2px);
        }


        /* =====================================================
           MOBILE CARD - HIDDEN DESKTOP
        ====================================================== */

        .mobile-card-view {
            display: none;
        }


        /* =====================================================
           MOBILE STAGE CARD
        ====================================================== */

        .stage-rectangle {
            width: 100%;

            min-height: 500px;

            display: flex;

            flex-direction: column;

            padding: 13px;

            overflow: hidden;

            border-radius: 24px;

            background:
                linear-gradient(
                    145deg,
                    rgba(15, 23, 42, .98),
                    rgba(2, 6, 23, .98)
                );

            border:
                1px solid
                rgba(255, 255, 255, .09);

            box-shadow:
                0 20px 50px
                rgba(0, 0, 0, .28);
        }


        /* =====================================================
           TOP BAR
        ====================================================== */

        .stage-top-bar {
            width: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

            margin-bottom: 12px;
        }


        .stage-sector-num {
            color: #38bdf8;

            font-size: 9px;

            font-weight: 800;

            letter-spacing: .7px;

            line-height: 1.3;

            white-space: nowrap;
        }


        .stage-live-tag {
            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 5px 9px;

            border-radius: 999px;

            background:
                rgba(255, 255, 255, .06);

            border:
                1px solid
                rgba(255, 255, 255, .08);

            color: #fff;

            font-size: 9px;

            font-weight: 700;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;
        }


        .live-dot {
            width: 6px;

            height: 6px;

            flex: 0 0 6px;

            border-radius: 50%;

            background: #22c55e;

            box-shadow:
                0 0 0 3px
                rgba(34, 197, 94, .12),

                0 0 12px
                rgba(34, 197, 94, .8);
        }


        /* =====================================================
           MOBILE IMAGE
        ====================================================== */

        .stage-card-wrapper {
            width: 100%;

            flex: 1;

            min-height: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            overflow: hidden;

            border-radius: 20px;
        }


        .stage-card-asset-img {
            width: 100%;

            height: 100%;

            min-height: 300px;

            display: block;

            object-fit: cover;

            object-position: center;

            border-radius: 20px;

            transition:
                transform .45s ease;
        }


        .project-card:hover
        .stage-card-asset-img {
            transform: scale(1.02);
        }


        /* =====================================================
           MOBILE BOTTOM
        ====================================================== */

        .stage-bottom-bar {
            width: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

            margin-top: 12px;
        }


        .stage-pills-row {
            flex: 1;

            min-width: 0;

            display: flex;

            flex-wrap: wrap;

            gap: 5px;
        }


        .stage-sub-pill {
            display: inline-flex;

            align-items: center;

            padding: 5px 7px;

            border:
                1px solid
                rgba(255, 255, 255, .07);

            border-radius: 7px;

            background:
                rgba(255, 255, 255, .05);

            color: #94a3b8;

            font-size: 8px;

            line-height: 1.2;

            white-space: nowrap;
        }


        /* =====================================================
           MOBILE BUTTON
        ====================================================== */

        .mobile-card-view
        .project-view-btn {
            flex-shrink: 0;

            min-height: 38px;

            padding: 7px 10px;

            font-size: 9px;

            gap: 6px;
        }


        .mobile-card-view
        .project-view-btn-icon {
            width: 20px;

            height: 20px;

            font-size: 9px;
        }


        /* =====================================================
           FLOATING NEXT
        ====================================================== */

        .carousel-floating-next-btn {
            position: absolute;

            top: 50%;

            right: 12px;

            z-index: 40;

            width: 48px;

            height: 48px;

            display: flex;

            align-items: center;

            justify-content: center;

            border:
                1px solid
                rgba(255, 255, 255, .16);

            border-radius: 50%;

            background:
                rgba(2, 6, 23, .78);

            color: #fff;

            cursor: pointer;

            transform:
                translateY(-50%);

            backdrop-filter:
                blur(14px);

            -webkit-backdrop-filter:
                blur(14px);

            transition:
                all .25s ease;
        }


        .carousel-floating-next-btn:hover {
            background:
                rgba(0, 104, 169, .25);

            border-color:
                rgba(56, 189, 248, .5);

            transform:
                translateY(-50%)
                translateX(-3px);
        }


        /* =====================================================
           BOTTOM CONTROLS
        ====================================================== */

        .projects-bottom-row {
            width: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

            margin-top: 10px;
        }


        .projects-dash-indicators {
            display: flex;

            align-items: center;

            gap: 6px;
        }


        .dash-line {
            width: 25px;

            height: 3px;

            display: block;

            border-radius: 999px;

            background:
                rgba(148, 163, 184, .25);

            transition:
                all .3s ease;
        }


        .dash-line.active {
            width: 45px;

            background: #38bdf8;
        }


        .projects-bottom-right-group {
            display: flex;

            align-items: center;

            gap: 22px;
        }


        .more-stories-note {
            display: flex;

            align-items: center;

            gap: 7px;
        }


        .more-stories-text {
            color: #64748b;

            font-size: 11px;

            line-height: 1.35;
        }


        .more-stories-arrow-svg {
            width: 45px;
        }


        .projects-nav-arrows {
            display: flex;

            gap: 8px;
        }


        .proj-nav-arrow-btn {
            width: 44px;

            height: 44px;

            display: flex;

            align-items: center;

            justify-content: center;

            border:
                1px solid
                rgba(255, 255, 255, .10);

            border-radius: 50%;

            background:
                rgba(255, 255, 255, .04);

            color: #fff;

            cursor: pointer;

            transition:
                all .25s ease;
        }


        .proj-nav-arrow-btn:hover {
            background:
                rgba(56, 189, 248, .12);

            border-color:
                rgba(56, 189, 248, .4);

            transform:
                translateY(-2px);
        }


        /* =====================================================
           TABLET
        ====================================================== */

        @media (min-width: 769px)
        and (max-width: 991px) {

            .projects-container {
                width:
                    min(
                        100% - 30px,
                        900px
                    );
            }


            .projects-cards-track {
                gap: 20px;
            }
   

            .project-card {
                flex:
                    0 0
                    calc(50% - 10px);

                width:
                    calc(50% - 10px);

                min-width:
                    calc(50% - 10px);
            }


            .desktop-card-view {
                min-height: 430px;

                padding: 14px;
            }


            .ditto-card-asset {
                height: 395px;
            }


            .project-card-button-wrap {
                right: 22px;

                bottom: 22px;
            }
        }


        /* =====================================================
           MOBILE
        ====================================================== */

        @media (max-width: 768px) {
                .projects-header-right {
                align-items: flex-start;
                width: 100%;
            }
        .projects-stats-row
            {
                    gap: 20px;
                }
            .projects-section {
                padding: 45px 0;
            }
            .proj-stat-num {
        font-size: 2rem;
    }

            .projects-container {
                width:
                    calc(100% - 24px);
            }


            .projects-heading {
                margin-bottom: 24px;
            }


            .projects-heading h2 {
                font-size: 34px;
            }


            .projects-heading p {
                font-size: 13px;
            }


            .projects-filter-bar {
                margin-bottom: 18px;
            }


            .project-filter-pill {
                padding:
                    8px 13px;

                font-size: 10px;
            }


            .projects-cards-track {
                gap: 14px;

                padding:
                    4px 8px 18px 2px;

                scroll-padding-left: 2px;
            }


            .project-card {
                flex:
                    0 0
                    calc(100vw - 36px);

                width:
                    calc(100vw - 36px);

                min-width:
                    calc(100vw - 36px);

                max-width: 500px;
            }


            /* Hide desktop */

            .desktop-card-view {
                display: none !important;
            }


            /* Show mobile */

            .mobile-card-view {
                display: flex;
            }


            .stage-rectangle {
                min-height: 465px;

                padding: 11px;

                border-radius: 21px;
            }


            .stage-card-wrapper {
                min-height: 280px;
            }


            .stage-card-asset-img {
                min-height: 280px;

                border-radius: 17px;
            }


            .stage-sector-num {
                font-size: 8px;
            }


            .stage-live-tag {
                font-size: 8px;

                padding:
                    4px 7px;
            }


            .stage-sub-pill {
                font-size: 7.5px;

                padding:
                    4px 6px;
            }


            .carousel-floating-next-btn {
                width: 40px;

                height: 40px;

                right: 6px;
            }


            .projects-bottom-row {
                margin-top: 2px;
            }


            .more-stories-note {
                display: none;
            }


            .dash-line {
                width: 16px;

                height: 2px;
            }


            .dash-line.active {
                width: 29px;
            }


            .proj-nav-arrow-btn {
                width: 38px;

                height: 38px;
            }
        }


        /* =====================================================
           SMALL MOBILE
        ====================================================== */

        @media (max-width: 480px) {

            .projects-container {
                width:
                    calc(100% - 16px);
            }


            .projects-heading h2 {
                font-size: 29px;
            }


            .project-card {
                flex:
                    0 0
                    calc(100vw - 28px);

                width:
                    calc(100vw - 28px);

                min-width:
                    calc(100vw - 28px);
            }


            .stage-rectangle {
                min-height: 430px;
            }


            .stage-card-wrapper {
                min-height: 245px;
            }


            .stage-card-asset-img {
                min-height: 245px;
            }


            .stage-pills-row {
                max-width:
                    calc(100% - 120px);
            }


            .stage-sub-pill {
                font-size: 7px;

                padding:
                    4px 5px;
            }


            .mobile-card-view
            .project-view-btn {
                min-height: 35px;

                padding:
                    6px 8px;

                font-size: 8px;

                gap: 4px;
            }


            .mobile-card-view
            .project-view-btn-icon {
                width: 18px;

                height: 18px;

                font-size: 8px;
            }
        }


        /* =====================================================
           VERY SMALL MOBILE
        ====================================================== */

        @media (max-width: 360px) {

            .project-card {
                flex:
                    0 0
                    calc(100vw - 20px);

                width:
                    calc(100vw - 20px);

                min-width:
                    calc(100vw - 20px);
            }


            .stage-rectangle {
                min-height: 405px;
            }


            .stage-card-wrapper {
                min-height: 225px;
            }


            .stage-card-asset-img {
                min-height: 225px;
            }
        }


        /* =====================================================
           REDUCED MOTION
        ====================================================== */

        @media (prefers-reduced-motion: reduce) {

        
            .projects-cards-track {
                scroll-behavior: auto;
            }


            .project-card,
            .ditto-card-asset,
            .stage-card-asset-img,
            .project-view-btn {
                transition: none !important;
            }
        }

        /* ============================================================ */
        /* STACKED & ANGLED PROJECTS SHOWCASE SECTION (MATCH TO REFERENCE) */
        /* ============================================================ */
        #projects-stacked-showcase {
            background: #f1f3f6;
            padding: 120px 0 140px;
            position: relative;
            overflow-x: clip;
            font-family: 'Montserrat', sans-serif;
        }

        .stacked-projects-container {
            max-width: 1540px;
            margin: 0 auto;
            padding: 0 clamp(24px, 4vw, 60px);
            display: grid;
            grid-template-columns: 460px 1fr;
            gap: 60px;
            align-items: flex-start;
            position: relative;
        }

        /* Left Sticky Column */
        .stacked-left-sticky {
            position: sticky;
            top: 90px;
            height: fit-content;
            display: flex;
            flex-direction: column;
            gap: 24px;
            z-index: 10;
        }

        .stacked-header-block {
            background: #ffffff;
            border-radius: 26px;
            padding: 40px 38px;
            box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
            border: 1px solid rgba(226, 232, 240, 0.85);
        }

        .stacked-eyebrow {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            color: #64748b;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .stacked-eyebrow-line {
            width: 44px;
            height: 1.5px;
            background: #94a3b8;
            display: inline-block;
        }

        .stacked-main-title {
            font-size: 3.3rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.12;
            letter-spacing: -0.8px;
            margin-bottom: 18px;
        }

        .stacked-subtitle {
            font-size: 15.5px;
            color: #64748b;
            line-height: 1.65;
            margin-bottom: 28px;
            font-weight: 450;
            max-width: 420px;
        }

        /* Filter Pills */
        .stacked-filter-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 24px;
        }

        .stacked-pill {
            background: #ffffff;
            color: #475569;
            border: 1px solid #e2e8f0;
            border-radius: 50px;
            padding: 7px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
            font-family: 'Montserrat', sans-serif;
        }

        .stacked-pill:hover:not(.active) {
            background: #e2e8f0;
            color: #0f172a;
            transform: translateY(-1px);
        }

        .stacked-pill.active {
            background: #0f172a;
            color: #ffffff;
            border-color: #0f172a;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
        }

        /* Bottom Sticky Block */
        .stacked-footer-block {
            background: #ffffff;
            border-radius: 26px;
            padding: 34px 38px 28px;
            box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
            border: 1px solid rgba(226, 232, 240, 0.85);
        }

        .stacked-cta-row {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 28px;
        }

        .stacked-impact-note {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            position: relative;
        }

        .stacked-impact-text {
            font-family: 'Caveat', cursive;
            font-size: 1.45rem;
            color: #64748b;
            line-height: 1.05;
            transform: rotate(-6deg);
            white-space: nowrap;
        }

        .stacked-impact-arrow {
            width: 48px;
            height: 26px;
            margin-top: 3px;
            margin-right: -8px;
        }

        .btn-stacked-view-all {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: #0f172a;
            color: #ffffff !important;
            text-decoration: none;
            padding: 12px 26px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 13.5px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
            white-space: nowrap;
        }

        .btn-stacked-view-all:hover {
            background: #0066ff;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 102, 255, 0.4);
            color: #ffffff;
        }

        /* Stats Row */
        .stacked-stats-row {
            display: flex;
            align-items: center;
            gap: 24px;
            padding-top: 20px;
            border-top: 1px solid #cbd5e1;
        }

        .stacked-stat-item {
            display: flex;
            flex-direction: column;
        }

        .stacked-stat-num {
            font-size: 2.1rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1;
            margin-bottom: 4px;
            letter-spacing: -0.5px;
        }

        .stacked-stat-lbl {
            font-size: 11.5px;
            color: #64748b;
            font-weight: 600;
            line-height: 1.25;
        }

        .stacked-stat-sep {
            width: 1px;
            height: 36px;
            background: #cbd5e1;
        }

        /* Right Column: Cascading / Angled Cards Stack */
        .stacked-right-cards {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 60px;
            padding: 30px 0 100px 20px;
        }

        /* Base Angled Card (Tilted 3D Aesthetic matching Reference) */
        .angled-card {
            width: 100%;
            max-width: 680px;
            margin-left: auto;
            border-radius: 28px;
            padding: 36px;
            position: relative;
            overflow: hidden;
            transform-origin: center right;
            transform: rotate(-10deg) translateY(0);
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, opacity 0.4s ease;
            cursor: pointer;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
            will-change: transform;
        }

        .angled-card:hover {
            transform: rotate(0deg) scale(1.03) translateY(-10px) !important;
            box-shadow: 0 40px 90px rgba(0, 0, 0, 0.28);
            z-index: 30 !important;
        }

        /* Card 1: Vibrant Red-Orange Creative Tech Card */
        .card-angled-red {
            background: linear-gradient(135deg, #ff4924 0%, #eb2c0b 100%);
            color: #ffffff;
            box-shadow: 0 25px 65px rgba(235, 44, 11, 0.28);
            z-index: 4;
        }

        /* Card 2: Deep Dark UI Metrics Card (Center in Screenshot) */
        .card-angled-dark {
            background: #111418;
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 30px 75px rgba(0, 0, 0, 0.45);
            z-index: 3;
        }

        /* Card 3: Minimalist White Architectural Spec Card */
        .card-angled-white {
            background: #ffffff;
            color: #0f172a;
            border: 1px solid #e2e8f0;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
            z-index: 2;
        }

        /* Card 4: Aviation Tech Card */
        .card-angled-navy {
            background: linear-gradient(135deg, #071329 0%, #0d1f3d 100%);
            color: #ffffff;
            border: 1px solid rgba(59, 130, 246, 0.25);
            box-shadow: 0 30px 75px rgba(7, 19, 41, 0.35);
            z-index: 1;
        }

        /* Internal Card Elements */
        .angled-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .angled-card-tag {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 5px 12px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
        }

        .card-angled-white .angled-card-tag {
            background: #f1f5f9;
            color: #475569;
        }

        .angled-card-serial {
            font-size: 11px;
            font-family: monospace;
            opacity: 0.6;
            letter-spacing: 1px;
        }

        .angled-card-title {
            font-size: 1.85rem;
            font-weight: 800;
            line-height: 1.25;
            margin-bottom: 22px;
            letter-spacing: -0.3px;
        }

        /* Metrics Grid inside Dark Card (matches screenshot) */
        .dark-metrics-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 24px;
            align-items: center;
        }

        .metrics-left-stats {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .metrics-ticker-row {
            display: flex;
            align-items: baseline;
            gap: 16px;
        }

        .metrics-big-val {
            font-size: 2.4rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -0.5px;
        }

        .metrics-sub-val {
            font-size: 1.2rem;
            font-weight: 700;
            color: #94a3b8;
        }

        .metrics-bars-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .metric-bar-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11.5px;
            font-weight: 600;
            color: #cbd5e1;
        }

        .metric-bar-fill {
            height: 4px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 3px;
        }

        .metric-bar-fill-inner {
            height: 100%;
            background: #0066ff;
            border-radius: 4px;
        }

        .metrics-right-preview {
            border-radius: 16px;
            overflow: hidden;
            height: 220px;
            background: #000;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        .metrics-right-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* White Architectural Spec Layout (matches screenshot) */
        .white-spec-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 20px;
            align-items: center;
        }

        .white-spec-col {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .white-spec-label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #94a3b8;
        }

        .white-spec-heading {
            font-size: 1.4rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.2;
        }

        .white-spec-preview {
            border-radius: 16px;
            overflow: hidden;
            height: 200px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
        }

        .white-spec-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Red Card Visuals */
        .red-card-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            align-items: center;
        }

        .red-chart-svg {
            width: 100%;
            height: 100px;
            margin-top: 10px;
        }

        .red-metrics-badge-wrap {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .red-metric-box {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 14px;
            padding: 14px 18px;
        }

        .red-metric-big {
            font-size: 1.8rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 4px;
        }

        .red-metric-sub {
            font-size: 11.5px;
            opacity: 0.85;
            font-weight: 500;
        }

        /* Navy Card Flight Visuals */
        .navy-card-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 20px;
            align-items: center;
        }

        .navy-stats-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .navy-stat-badge {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .navy-stat-badge i {
            font-size: 18px;
            color: #38bdf8;
        }

        .navy-stat-info strong {
            display: block;
            font-size: 13.5px;
            color: #fff;
        }

        .navy-stat-info span {
            font-size: 11px;
            color: #94a3b8;
        }

        .navy-card-preview {
            border-radius: 16px;
            overflow: hidden;
            height: 200px;
            background: #020617;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        .navy-card-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Card Footer Link */
        .angled-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 24px;
            padding-top: 18px;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
        }

        .card-angled-white .angled-card-footer {
            border-top-color: #e2e8f0;
        }

        .angled-card-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 700;
            color: inherit;
            text-decoration: none;
            transition: gap 0.25s ease;
        }

        .angled-card-link:hover {
            gap: 12px;
            color: inherit;
        }

        /* Responsive Breakpoints for Stacked Section */
        @media (max-width: 1200px) {
            .stacked-projects-container {
                grid-template-columns: 380px 1fr;
                gap: 40px;
            }

            .stacked-main-title {
                font-size: 2.8rem;
            }

            .angled-card {
                max-width: 580px;
                padding: 28px;
            }
        }

        @media (max-width: 992px) {
            #projects-stacked-showcase {
                padding: 80px 0 100px;
            }

            .stacked-projects-container {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .stacked-left-sticky {
                position: relative;
                top: 0;
                height: auto;
                gap: 40px;
            }

            .stacked-right-cards {
                padding: 0;
                gap: 40px;
                min-height: auto;
            }

            .angled-card {
                transform: rotate(-4deg) !important;
                max-width: 100%;
            }
        }

        @media (max-width: 576px) {
            .stacked-main-title {
                font-size: 2.2rem;
            }

            .stacked-stats-row {
                gap: 14px;
            }

            .stacked-stat-num {
                font-size: 1.8rem;
            }

            .angled-card {
                transform: rotate(0deg) !important;
                padding: 22px;
                border-radius: 20px;
            }

            .dark-metrics-grid,
            .white-spec-grid,
            .red-card-grid,
            .navy-card-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================================ */
        /* AI SOLUTIONS & INNOVATIONS BENTO SHOWCASE SECTION            */
        /* ============================================================ */
        #ai-solutions-bento-section {
            background: #EEF4FC;
            padding: 90px 0 100px;
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-family: 'Roboto', sans-serif;
        }

        .ai-bento-container {
            max-width: 1480px;
            margin: 0 auto;
            padding: 0 clamp(20px, 3.5vw, 44px);
        }

        /* Bento Grid Rows */
        .ai-bento-row {
            display: grid;
            gap: 20px;
        }

        .ai-bento-row-top {
            grid-template-columns: 2.15fr 1.05fr 1.05fr;
            min-height: 480px;
        }

        .ai-bento-row-bottom {
            grid-template-columns: 1.15fr 1.15fr 1.65fr;
            margin-top: 20px;
            min-height: 380px;
        }

        /* Base Bento Card Style */
        .ai-bento-card {
            border-radius: 28px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
        }

        .ai-bento-card:hover {
            transform: translateY(-4px);
        }

        .ai-card-light {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.85);
            box-shadow: 0 10px 30px rgba(18, 58, 115, 0.04);
            color: #0B1220;
        }

        .ai-card-dark {
            background: #090E17;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
            color: #ffffff;
        }

        /* Card Header Elements */
        .ai-card-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .ai-title-badge-group {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ai-title-icon-badge {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            flex-shrink: 0;
        }

        .badge-light-blue {
            background: #EAF2FE;
            color: #1A62FF;
        }

        .badge-dark-code {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
        }

        .ai-card-main-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.3px;
        }

        .ai-circle-arrow-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #ffffff;
            border: 1px solid #E2E8F0;
            color: #0B1220;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.25s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        }

        .ai-circle-arrow-btn:hover {
            background: #1A62FF;
            border-color: #1A62FF;
            color: #ffffff;
            transform: translate(2px, -2px);
        }

        .ai-circle-arrow-btn-dark {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.25s ease;
        }

        .ai-circle-arrow-btn-dark:hover {
            background: #1A62FF;
            border-color: #1A62FF;
            color: #ffffff;
            transform: translate(2px, -2px);
        }

        .ai-card-subtext {
            font-size: 0.88rem;
            line-height: 1.5;
            color: #64748B;
            margin-top: 10px;
            margin-bottom: 0;
        }

        .ai-card-subtext-dark {
            color: #94A3B8;
        }

        /* ------------------------------------------------------------- */
        /* CARD 1: HERO TRANSFORM WITH AI                                */
        /* ------------------------------------------------------------- */
        .ai-hero-card {
            padding: 38px 44px;
            position: relative;
        }

        .ai-hero-left-content {
            position: relative;
            z-index: 3;
            max-width: 480px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .ai-hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            border: 1px solid #E2E8F0;
            border-radius: 50px;
            padding: 6px 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
            width: fit-content;
        }

        .ai-hero-pill-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #1A62FF;
        }

        .ai-hero-pill-text {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.2px;
            color: #0B1220;
            text-transform: uppercase;
        }

        .ai-hero-smarter-label {
            position: absolute;
            top: 38px;
            right: 44px;
            font-size: 9.5px;
            font-weight: 750;
            letter-spacing: 1.5px;
            color: #94A3B8;
            text-transform: uppercase;
            text-align: right;
            line-height: 1.45;
            z-index: 3;
            pointer-events: none;
        }

        .ai-hero-headline {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2.4rem, 3.8vw, 3.7rem);
            font-weight: 700;
            line-height: 1.05;
            color: #0B1220;
            margin: 24px 0 16px;
            letter-spacing: -1.5px;
        }

        .ai-hero-blue-span {
            color: #1A62FF;
            font-weight: 800;
        }

        .ai-hero-sub {
            font-size: 0.98rem;
            line-height: 1.55;
            color: #64748B;
            margin-bottom: 28px;
            max-width: 400px;
        }

        .ai-hero-cta-group {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            margin-bottom: 24px;
            width: fit-content;
        }

        .ai-hero-cta-circle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #0B1220;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            box-shadow: 0 4px 14px rgba(11, 18, 32, 0.25);
            transition: transform 0.25s ease, background 0.25s ease;
        }

        .ai-hero-cta-group:hover .ai-hero-cta-circle {
            transform: translate(2px, -2px);
            background: #1A62FF;
        }

        .ai-hero-cta-label {
            font-size: 14px;
            font-weight: 700;
            color: #0B1220;
            transition: color 0.25s ease;
        }

        .ai-hero-cta-group:hover .ai-hero-cta-label {
            color: #1A62FF;
        }

        .ai-hero-pipeline {
            font-size: 9.5px;
            font-weight: 750;
            letter-spacing: 1.4px;
            color: #94A3B8;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
        }

        /* Right Side 40% Background Video */
        .ai-hero-video-wrap {
            position: absolute;
            right: 0;
            top: 0;
            width: 40%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
            border-radius: 0 28px 28px 0;
            pointer-events: none;
        }

        .ai-hero-bg-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .ai-hero-video-fade {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.45) 14%, transparent 40%, rgba(255, 255, 255, 0.05) 100%);
            pointer-events: none;
            z-index: 2;
        }

        /* ------------------------------------------------------------- */
        /* CARD 2: AI AGENTS (BLACK BACKGROUND & 60% VISUAL)            */
        /* ------------------------------------------------------------- */
        .ai-agents-card {
            padding: 28px 24px 20px;
            background: #000000;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
            color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .ai-agents-card .ai-card-main-title {
            color: #ffffff;
        }

        .ai-agents-card .ai-card-subtext {
            color: #E2E8F0;
            font-weight: 450;
        }

        .ai-agent-visual-wrap {
            width: 100%;
            height: 275px;
            margin-top: 14px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            background: #000000;
        }

        .ai-agent-cyborg-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;
            display: block;
            border-radius: 20px;
            transition: transform 0.5s ease;
        }

        .ai-bento-card:hover .ai-agent-cyborg-img {
            transform: scale(1.04);
        }

        /* ------------------------------------------------------------- */
        /* CARD 3: GENERATIVE AI (DARK CARD)                             */
        /* ------------------------------------------------------------- */
        .ai-gen-card {
            padding: 28px 24px;
        }

        .ai-crystal-stage {
            position: relative;
            width: 100%;
            height: 270px;
            margin-top: 16px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: radial-gradient(circle at 65% 45%, rgba(26, 98, 255, 0.22) 0%, rgba(9, 14, 23, 0.8) 75%);
        }

        .ai-crystal-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 18px;
            filter: brightness(1.05);
            transition: transform 0.5s ease;
        }

        .ai-bento-card:hover .ai-crystal-img {
            transform: scale(1.04);
        }

        .crystal-left-tags {
            position: absolute;
            bottom: 20px;
            left: 18px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            z-index: 3;
        }

        .crystal-tag-item {
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: 1.2px;
            color: #94A3B8;
            text-transform: uppercase;
        }

        .crystal-glow-label {
            position: absolute;
            top: 28px;
            right: 22px;
            text-align: right;
            color: rgba(255, 255, 255, 0.75);
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 2.2px;
            text-transform: uppercase;
            line-height: 1.45;
            z-index: 3;
            text-shadow: 0 0 12px rgba(26, 98, 255, 0.6);
        }

        /* ------------------------------------------------------------- */
        /* CARD 4: AI AUTOMATION (ROBOT-HUMAN TOUCH BACKGROUND)          */
        /* ------------------------------------------------------------- */
        .ai-automation-card {
            padding: 30px 28px;
            background-color: #050a17;
            background-image: linear-gradient(180deg, rgba(3, 7, 16, 0.88) 0%, rgba(3, 7, 16, 0.35) 45%, rgba(3, 7, 16, 0.8) 100%), url('../assets/images/ai_automation_bg.png');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
            color: #ffffff;
        }

        .ai-automation-card .ai-card-main-title {
            color: #ffffff;
        }

        .ai-automation-card .ai-card-subtext {
            color: #E2E8F0;
            font-weight: 450;
        }

        .ai-automation-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 24px;
            gap: 20px;
        }

        .ai-stat-block {
            display: flex;
            flex-direction: column;
        }

        .ai-stat-big {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.9rem;
            font-weight: 800;
            line-height: 1;
            color: #ffffff;
            letter-spacing: -1px;
            margin-bottom: 6px;
        }

        .ai-stat-desc {
            font-size: 0.85rem;
            color: #94A3B8;
            line-height: 1.35;
            max-width: 140px;
        }

        /* Workflow Flowchart (Dark Glass Theme) */
        .automation-flowchart {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        .flow-node {
            background: rgba(10, 18, 34, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-radius: 12px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 700;
            color: #ffffff;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
            min-width: 115px;
            justify-content: center;
        }

        .flow-node.active-node {
            background: rgba(26, 98, 255, 0.35);
            border: 1.5px solid #38BDF8;
            color: #38BDF8;
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.45);
        }

        .flow-line {
            width: 2px;
            height: 12px;
            background: rgba(56, 189, 248, 0.45);
            position: relative;
        }

        .flow-line::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 4px solid #38BDF8;
        }

        /* ------------------------------------------------------------- */
        /* CARD 5: DATA & INSIGHTS (EXACT SCREENSHOT MATCH)              */
        /* ------------------------------------------------------------- */
        .ai-analytics-card {
            padding: 30px 32px;
            background-color: #050d1e;
            background-image: url('../assets/images/data_insights_bg.jpg');
            background-size: cover;
            background-position: center right;
            background-repeat: no-repeat;
            border: 1.5px solid rgba(56, 189, 248, 0.28);
            box-shadow: 0 16px 40px rgba(4, 11, 24, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .data-insights-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .data-insights-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .data-insights-tag {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 2px;
            color: #7EA6D9;
            text-transform: uppercase;
        }

        .data-insights-divider {
            width: 32px;
            height: 1.5px;
            background: rgba(126, 166, 217, 0.4);
            display: inline-block;
        }

        .data-insights-index {
            font-size: 13px;
            font-weight: 700;
            color: #7EA6D9;
            letter-spacing: 1px;
        }

        .data-insights-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-top: 20px;
            position: relative;
            z-index: 2;
        }

        .data-insights-big-stat {
            display: flex;
            align-items: baseline;
            line-height: 0.9;
            flex-shrink: 0;
            font-family: 'Montserrat', sans-serif;
        }

        .stat-num-gradient {
            font-size: clamp(3.6rem, 4.5vw, 4.8rem);
            font-weight: 850;
            background: linear-gradient(180deg, #FFFFFF 15%, #D4E4FD 60%, #9BC4F8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -2px;
            display: inline-block;
        }

        .stat-glyph-x {
            font-size: clamp(2.2rem, 3vw, 3rem);
            font-weight: 850;
            color: #60A5FA;
            margin-left: 4px;
            display: inline-block;
            transform: translateY(-2px);
        }

        .data-insights-center-text {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-width: 175px;
        }

        .data-insights-heading {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: #FFFFFF;
            line-height: 1.25;
            margin: 0;
            letter-spacing: -0.2px;
        }

        .data-insights-sub {
            font-size: 11.5px;
            line-height: 1.45;
            color: #94A3B8;
            margin: 0;
            font-weight: 450;
        }

        .data-insights-arrow-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, 0.32);
            background: rgba(9, 20, 44, 0.45);
            backdrop-filter: blur(8px);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            text-decoration: none;
            transition: all 0.3s ease;
            flex-shrink: 0;
            align-self: flex-end;
            margin-bottom: 2px;
        }

        .data-insights-arrow-btn:hover {
            border-color: #38BDF8;
            background: #1A62FF;
            color: #ffffff;
            transform: translate(2px, -2px);
            box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
        }

        /* ------------------------------------------------------------- */
        /* CARD 6: AI PRODUCTS (3 TILTED CARDS SHOWCASE)                 */
        /* ------------------------------------------------------------- */
        .ai-products-card {
            padding: 28px 32px 22px;
            position: relative;
            overflow: hidden;
            background: #060B14 !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
        }

        .ai-products-video-wrap {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
            pointer-events: none;
        }

        .ai-products-bg-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0.62;
            filter: contrast(1.15) brightness(0.9);
            transition: opacity 0.5s ease;
        }

        .ai-bento-card:hover .ai-products-bg-video {
            opacity: 0.78;
        }

        .ai-products-video-overlay {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 85% 15%, rgba(56, 189, 248, 0.25) 0%, transparent 60%),
                linear-gradient(180deg, rgba(6, 11, 20, 0.88) 0%, rgba(6, 11, 20, 0.48) 45%, rgba(6, 11, 20, 0.92) 100%);
            pointer-events: none;
        }

        .ai-products-inner-content {
            position: relative;
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            min-height: 280px;
        }

        .ai-products-video-spacer {
            min-height: 180px;
            flex: 1;
            width: 100%;
        }

        .ai-products-deck-wrap {
            position: relative;
            width: 100%;
            min-height: 180px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ai-product-mini-card {
            width: 160px;
            border-radius: 16px;
            padding: 11px 11px 13px;
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            position: absolute;
        }

        .ai-product-mini-card:hover {
            transform: translateY(-9px) scale(1.04) !important;
            z-index: 10 !important;
            box-shadow: 0 20px 42px rgba(0, 0, 0, 0.65);
        }

        /* Skintelligent (Left, Light Glass) */
        .mini-card-skintelligent {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.85);
            color: #0F172A;
            left: 15px;
            transform: rotate(-6deg) translateY(4px);
            z-index: 2;
        }

        /* JobGenie (Center, Dark Cyber Neon) */
        .mini-card-jobgenie {
            background: rgba(10, 16, 29, 0.96);
            backdrop-filter: blur(14px);
            border: 1.5px solid rgba(56, 189, 248, 0.55);
            color: #ffffff;
            left: 50%;
            transform: translateX(-50%) translateY(-6px) scale(1.05);
            z-index: 4;
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 22px rgba(26, 98, 255, 0.4);
        }

        /* InsightPro (Right, Light Glass) */
        .mini-card-insightpro {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.85);
            color: #0F172A;
            right: 15px;
            transform: rotate(6deg) translateY(4px);
            z-index: 2;
        }

        .mini-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2px;
        }

        .mini-card-name {
            font-size: 11.5px;
            font-weight: 800;
            font-family: 'Montserrat', sans-serif;
            color: inherit;
        }

        .mini-card-glyph {
            font-size: 9px;
            opacity: 0.7;
        }

        .mini-card-sub {
            font-size: 8px;
            color: #64748B;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mini-card-jobgenie .mini-card-sub {
            color: #94A3B8;
        }

        .mini-card-thumb {
            width: 100%;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 8px;
            position: relative;
        }

        .mini-card-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* InsightPro 3D Bar Chart Visual */
        .insight-bars-thumb {
            width: 100%;
            height: 100%;
            background: #0B1324;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 5px;
            padding: 6px 8px;
        }

        .insight-bar {
            flex: 1;
            border-radius: 3px 3px 0 0;
            background: linear-gradient(180deg, #38BDF8 0%, #1A62FF 100%);
            box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
        }

        .mini-card-tags {
            display: flex;
            gap: 4px;
        }

        .mini-tag {
            font-size: 7.5px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            background: #F1F5F9;
            color: #334155;
        }

        .mini-card-jobgenie .mini-tag {
            background: rgba(56, 189, 248, 0.14);
            color: #7DD3FC;
            border: 1px solid rgba(56, 189, 248, 0.25);
        }

        /* Bottom Controls Row */
        .ai-products-bottom-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
        }

        .ai-products-btn-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* ENHANCED GIANT ANIMATED AI BUTTON */
        .btn-card-ai-giant {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 18px;
            background: linear-gradient(135deg, #0284C7 0%, #1D4ED8 48%, #6D28D9 100%);
            border: 1.5px solid rgba(255, 255, 255, 0.85);
            border-radius: 50px;
            color: #ffffff !important;
            text-decoration: none;
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            animation: aiGiantPulseGlow 2.8s infinite ease-in-out;
            box-shadow:
                0 0 20px rgba(56, 189, 248, 0.65),
                0 4px 14px rgba(29, 78, 216, 0.5),
                inset 0 1.5px 2px rgba(255, 255, 255, 0.9);
            z-index: 2;
        }

        @keyframes aiGiantPulseGlow {

            0%,
            100% {
                box-shadow:
                    0 0 18px rgba(56, 189, 248, 0.55),
                    0 0 32px rgba(109, 40, 217, 0.35),
                    0 4px 12px rgba(0, 20, 60, 0.4),
                    inset 0 1.5px 2px rgba(255, 255, 255, 0.8);
                border-color: rgba(255, 255, 255, 0.7);
            }

            50% {
                box-shadow:
                    0 0 32px rgba(56, 189, 248, 0.95),
                    0 0 55px rgba(124, 58, 237, 0.65),
                    0 6px 20px rgba(0, 50, 180, 0.5),
                    inset 0 2px 4px rgba(255, 255, 255, 1);
                border-color: #ffffff;
            }
        }

        /* Shimmer sweep */
        .btn-card-ai-giant::before {
            content: '';
            position: absolute;
            top: -70%;
            left: -90%;
            width: 55%;
            height: 240%;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.75) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: rotate(25deg);
            animation: aiGiantShimmerSweep 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        @keyframes aiGiantShimmerSweep {
            0% {
                left: -90%;
            }

            30% {
                left: 150%;
            }

            100% {
                left: 150%;
            }
        }

        .btn-card-ai-giant:hover {
            transform: translateY(-3px) scale(1.06);
            color: #ffffff !important;
            box-shadow:
                0 0 35px rgba(56, 189, 248, 1),
                0 0 65px rgba(124, 58, 237, 0.75),
                0 8px 24px rgba(0, 0, 0, 0.5),
                inset 0 2px 4px #ffffff;
            border-color: #ffffff;
        }

        .ai-giant-badge-text {
            font-weight: 900;
            letter-spacing: 0.9px;
            text-transform: uppercase;
            font-style: italic;
            line-height: 1;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.8);
        }

        .ai-giant-action-text {
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.3px;
            line-height: 1;
        }

        .ai-giant-sparkles-wrap {
            position: relative;
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .ai-giant-star-1 {
            position: absolute;
            width: 14px;
            height: 14px;
            bottom: 0px;
            left: 0px;
            fill: #ffffff;
            filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1));
            animation: aiStarTwinkleMain 1.8s infinite ease-in-out;
            transform-origin: center center;
        }

        .ai-giant-star-2 {
            position: absolute;
            width: 9px;
            height: 9px;
            top: 0px;
            right: 0px;
            fill: #ffffff;
            filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1));
            animation: aiStarTwinkleSub 1.8s infinite ease-in-out 0.4s;
            transform-origin: center center;
        }

        .ai-giant-star-3 {
            position: absolute;
            width: 6px;
            height: 6px;
            top: 50%;
            left: 55%;
            fill: #38BDF8;
            filter: drop-shadow(0 0 3px #38BDF8);
            animation: aiStarTwinkleMain 1.4s infinite ease-in-out 0.8s;
            transform-origin: center center;
        }

        .ai-giant-arrow {
            font-size: 14px;
            line-height: 1;
            transition: transform 0.3s ease;
        }

        .btn-card-ai-giant:hover .ai-giant-arrow {
            transform: translate(2px, -2px);
        }

        .ai-view-all-dark {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            color: #E2E8F0 !important;
        }

        .ai-view-all-dark:hover {
            background: #ffffff !important;
            color: #0B1220 !important;
            border-color: #ffffff !important;
        }

        .ai-products-note {
            font-size: 11px;
            color: #94A3B8;
            font-weight: 500;
        }

        .ai-pagination-dots {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .ai-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.25);
            transition: background 0.25s ease;
        }

        .ai-dot.active {
            background: #38BDF8;
            width: 8px;
            height: 8px;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1200px) {
            .ai-bento-row-top {
                grid-template-columns: 1fr 1fr;
            }

            .ai-hero-card {
                grid-column: span 2;
            }

            .ai-bento-row-bottom {
                grid-template-columns: 1fr 1fr;
            }

            .ai-products-card {
                grid-column: span 2;
            }
        }

        @media (max-width: 768px) {
            #ai-solutions-bento-section {
                padding: 60px 0 70px;
            }

            .ai-bento-row-top,
            .ai-bento-row-bottom {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .ai-hero-card,
            .ai-products-card {
                grid-column: span 1;
            }

            .ai-hero-card {
                padding: 28px 22px;
            }

            .ai-hero-visual-wrap {
                display: none;
            }

            .ai-hero-smarter-label {
                display: none;
            }

            .ai-product-mini-card {
                width: 130px;
            }

            .mini-card-skintelligent {
                left: 5px;
            }

            .mini-card-insightpro {
                right: 5px;
            }

            .ai-products-bottom-bar {
                flex-wrap: wrap;
                gap: 12px;
                justify-content: center;
                text-align: center;
            }

            .ai-products-btn-row {
                width: 100%;
                justify-content: center;
            }

            .ai-products-note {
                width: 100%;
                text-align: center;
            }
        }

        /* ==========================================================================
           AI TESTIMONIALS SECTION (Reference UI Design)
           ========================================================================== */
        .ai-testimonials-section {
            background-color: #000000;
            color: #ffffff;
            padding: 100px 30px 90px;
            position: relative;
            overflow: hidden;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .ai-testimonials-container {
            max-width: 1320px;
            margin: 0 auto;
        }

        .ai-testimonials-header {
            max-width: 950px;
            margin-bottom: 42px;
        }

        .ai-testimonials-title {
            font-size: clamp(28px, 3.4vw, 44px);
            font-weight: 700;
            letter-spacing: -0.025em;
            line-height: 1.2;
            color: #E6EDF5;
            margin: 0 0 16px 0;
        }

        .ai-testimonials-subtitle {
            font-size: clamp(14px, 1.1vw, 16px);
            color: #7D8B9E;
            line-height: 1.6;
            margin: 0;
            font-weight: 400;
        }

        .ai-testi-showcase-row {
            display: flex;
            gap: 22px;
            align-items: stretch;
            margin-bottom: 30px;
            min-height: 440px;
        }

        /* Active Featured Card (~57% width) */
        .ai-testi-featured-card {
            flex: 0 0 57%;
            position: relative;
            border-radius: 26px;
            overflow: hidden;
            background: #080B11;
            aspect-ratio: 16 / 10;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            cursor: pointer;
        }

        .ai-testi-featured-img-wrap {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .ai-testi-active-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
        }

        .ai-testi-featured-card:hover .ai-testi-active-img {
            transform: scale(1.02);
        }

        .ai-testi-featured-scrim {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(2, 6, 14, 0.25) 45%, rgba(2, 6, 14, 0.92) 100%);
            pointer-events: none;
        }

        /* Central Glowing Play Button */
        .ai-testi-play-btn-large {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #0056D6;
            border: 2px solid rgba(255, 255, 255, 0.45);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 5;
            box-shadow: 0 0 35px rgba(0, 102, 255, 0.75);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .ai-testi-play-btn-large svg {
            width: 24px;
            height: 24px;
            margin-left: 3px;
        }

        .ai-testi-featured-card:hover .ai-testi-play-btn-large {
            transform: translate(-50%, -50%) scale(1.12);
            background: #1A75FF;
            box-shadow: 0 0 50px rgba(0, 120, 255, 0.95);
        }

        /* Bottom Quote Box */
        .ai-testi-quote-box {
            position: relative;
            z-index: 4;
            padding: 24px 30px 24px;
            max-width: 90%;
        }

        .ai-testi-quote-text {
            color: #C5D2E3;
            font-size: 14.5px;
            line-height: 1.55;
            margin: 0;
            font-weight: 400;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
            transition: opacity 0.3s ease;
        }

        /* Upcoming Queue Cards (Right ~43% width) */
        .ai-testi-queue-col {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .ai-testi-queue-card {
            position: relative;
            border-radius: 22px;
            overflow: hidden;
            cursor: pointer;
            background: #0A0E17;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .ai-testi-queue-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 40px rgba(0, 102, 255, 0.28), 0 0 0 1.5px rgba(0, 132, 255, 0.55);
        }

        .ai-testi-queue-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            filter: brightness(0.85) contrast(1.05);
            transition: transform 0.5s ease, filter 0.3s ease;
        }

        .ai-testi-queue-card:hover img {
            transform: scale(1.06);
            filter: brightness(0.98);
        }

        .ai-testi-queue-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.85) 100%);
            z-index: 2;
        }

        .ai-testi-queue-play {
            position: relative;
            z-index: 4;
            margin: 0 auto 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #0056D6;
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px rgba(0, 102, 255, 0.65);
            transition: transform 0.3s ease, background 0.3s ease;
        }

        .ai-testi-queue-play svg {
            width: 17px;
            height: 17px;
            margin-left: 2px;
        }

        .ai-testi-queue-card:hover .ai-testi-queue-play {
            transform: scale(1.15);
            background: #1A75FF;
        }

        /* Bottom Row */
        .ai-testi-bottom-bar {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 24px;
            padding-top: 10px;
        }

        .ai-testi-author-info {
            flex: 0 0 35%;
        }

        .ai-testi-author-name {
            font-size: 20px;
            font-weight: 700;
            color: #ffffff;
            margin: 0 0 4px 0;
            letter-spacing: -0.015em;
        }

        .ai-testi-author-role {
            font-size: 14px;
            color: #7D8B9E;
            margin: 0 0 16px 0;
            font-weight: 400;
        }

        .ai-testi-progress-track {
            display: flex;
            gap: 7px;
            align-items: center;
        }

        .testi-segment {
            height: 2.5px;
            background: rgba(255, 255, 255, 0.18);
            border-radius: 2px;
            width: 28px;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
        }

        .testi-segment:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        .testi-segment.active {
            background: #3B82F6;
            width: 58px;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
        }

        /* Logos Row */
        .ai-testi-logos-wrap {
            display: flex;
            align-items: center;
            gap: 36px;
            flex: 1;
            justify-content: center;
            padding-top: 4px;
        }

        .testi-logo-item {
            opacity: 0.55;
            transition: opacity 0.3s ease, transform 0.3s ease;
            user-select: none;
        }

        .testi-logo-item:hover {
            opacity: 1;
            transform: translateY(-2px);
        }

        .testi-logo-bancreach {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 16px;
            letter-spacing: 0.04em;
            color: #94A3B8;
            border: 1px solid rgba(148, 163, 184, 0.4);
            padding: 3px 10px;
            border-radius: 4px;
            position: relative;
            display: inline-block;
        }

        .testi-logo-thin {
            font-weight: 300;
        }

        .testi-reach-dot {
            position: absolute;
            bottom: -10px;
            right: 24px;
            color: #64748B;
            font-size: 11px;
        }

        .testi-logo-logibids {
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 17.5px;
            letter-spacing: 0.05em;
            color: #CBD5E1;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .logibids-badge {
            background: #E11D48;
            color: #ffffff;
            font-size: 11.5px;
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-weight: 900;
        }

        .testi-logo-hivibe {
            font-family: 'Inter', sans-serif;
            font-size: 18px;
            font-weight: 400;
            color: #CBD5E1;
            letter-spacing: -0.01em;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .testi-vibe-icon {
            color: #60A5FA;
            font-size: 19px;
        }

        .testi-logo-finco {
            font-family: 'Inter', sans-serif;
            font-size: 17.5px;
            font-weight: 800;
            letter-spacing: 0.08em;
            color: #CBD5E1;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .testi-finco-icon {
            font-size: 19px;
            color: #94A3B8;
        }

        /* Navigation Arrows */
        .ai-testi-nav-arrows {
            display: flex;
            gap: 16px;
            align-items: center;
            padding-top: 4px;
        }

        .ai-testi-arrow-btn {
            background: transparent;
            border: none;
            color: #64748B;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            transition: all 0.25s ease;
            border-radius: 50%;
        }

        .ai-testi-arrow-btn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);
            transform: scale(1.1);
        }

        /* Video Modal */
        .ai-testi-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(12px);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
            padding: 24px;
        }

        .ai-testi-modal.active {
            opacity: 1;
            pointer-events: auto;
        }

        .ai-testi-modal-box {
            position: relative;
            width: 100%;
            max-width: 860px;
            background: #0b0f19;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95);
        }

        .ai-testi-modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            z-index: 10;
            transition: background 0.25s ease;
        }

        .ai-testi-modal-close:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .ai-testi-modal-media {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ai-testi-modal-media img,
        .ai-testi-modal-media video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1080px) {
            .ai-testi-showcase-row {
                flex-direction: column;
            }

            .ai-testi-featured-card {
                flex: 0 0 100%;
                width: 100%;
                min-height: 400px;
            }

            .ai-testi-queue-col {
                grid-template-columns: repeat(3, 1fr);
                height: 250px;
            }

            .ai-testi-logos-wrap {
                display: none;
            }

            .ai-testi-author-info {
                flex: 1;
            }
        }

        @media (max-width: 640px) {
            .ai-testimonials-section {
                padding: 60px 18px 50px;
            }

            .ai-testi-queue-col {
                grid-template-columns: repeat(3, 1fr);
                height: 190px;
                gap: 10px;
            }

            .ai-testi-queue-card {
                border-radius: 16px;
            }

            .ai-testi-queue-play {
                width: 32px;
                height: 32px;
                margin-bottom: 12px;
            }

            .ai-testi-queue-play svg {
                width: 14px;
                height: 14px;
            }

            .ai-testi-quote-box {
                padding: 16px 18px;
                max-width: 100%;
            }

            .ai-testi-quote-text {
                font-size: 12.5px;
            }

            .ai-testi-bottom-bar {
                flex-direction: column;
                gap: 16px;
            }

            .ai-testi-nav-arrows {
                align-self: flex-end;
                margin-top: -36px;
            }
        }


        /* ==========================================================================
           DIGITAL GROWTH & MARKETING CTA BANNER (Full Width Screen Banner)
           ========================================================================== */
        .dropdown-insights-panel {
            width: 320px !important;
            grid-template-columns: 1fr !important;
            gap: 8px !important;
            padding: 16px !important;
        }

        .wc-growth-banner-section {
            background-color: #ffffff;
            width: 100%;
            position: relative;
            z-index: 22;
            overflow: hidden;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            border-top: 1px solid rgba(0, 0, 0, 0.07);
            border-bottom: 1px solid rgba(0, 0, 0, 0.07);
            min-height: 520px;
            display: flex;
            align-items: center;
        }

        .wc-growth-banner-inner {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            padding: 70px 40px;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 5;
        }

        .wc-growth-content {
            flex: 0 0 46%;
            max-width: 580px;
            position: relative;
            z-index: 6;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .wc-growth-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 26px;
        }

        .wc-growth-brand-logo-img {
            height: 38px;
            width: auto;
            max-width: 220px;
            object-fit: contain;
            display: block;
        }

        .wc-growth-brand-icon {
            width: 36px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wc-growth-brand-icon svg {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 2px 8px rgba(13, 110, 253, 0.35));
        }

        .wc-growth-brand-meta {
            display: flex;
            flex-direction: column;
            line-height: 1;
        }

        .wc-growth-brand-name {
            font-size: 21px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #0f172a;
        }

        .wc-growth-brand-tag {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.28em;
            color: #64748b;
            margin-top: 4px;
        }

        .wc-growth-title {
            margin: 0 0 18px 0;
            font-size: clamp(34px, 4vw, 56px);
            font-weight: 900;
            line-height: 1.12;
            letter-spacing: -0.03em;
            display: flex;
            flex-direction: column;
        }

        .wc-growth-title-black {
            color: #0f172a;
        }

        .wc-growth-title-row2 {
            color: #0f172a;
        }

        .wc-growth-title-blue {
            color: #0d6efd;
        }

        .wc-growth-desc {
            font-size: 16px;
            line-height: 1.62;
            color: #475569;
            margin: 0 0 32px 0;
            max-width: 480px;
            font-weight: 400;
        }

        .wc-growth-action {
            display: flex;
            align-items: center;
        }

        @keyframes pulseGrowthBtn {
            0%, 100% {
                box-shadow: 0 10px 25px -3px rgba(13, 110, 253, 0.4), 0 0 0 0 rgba(13, 110, 253, 0.45);
                transform: translateY(0);
            }
            50% {
                box-shadow: 0 16px 32px -4px rgba(13, 110, 253, 0.55), 0 0 0 10px rgba(13, 110, 253, 0);
                transform: translateY(-2px);
            }
        }

        @keyframes phoneRingShake {
            0%, 100% { transform: rotate(0deg); }
            10%, 30%, 50% { transform: rotate(-12deg); }
            20%, 40% { transform: rotate(12deg); }
            60% { transform: rotate(0deg); }
        }

        .wc-growth-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #0d6efd;
            color: #ffffff;
            font-size: 15px;
            font-weight: 600;
            padding: 15px 36px;
            border-radius: 9999px;
            text-decoration: none;
            box-shadow: 0 10px 25px -3px rgba(13, 110, 253, 0.35);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            animation: pulseGrowthBtn 2.8s infinite ease-in-out;
        }

        .wc-growth-btn i {
            display: inline-block;
            animation: phoneRingShake 3s infinite ease-in-out;
        }

        .wc-growth-btn:hover {
            background: #0056d6;
            color: #ffffff;
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 20px 36px -4px rgba(13, 110, 253, 0.6);
        }

        .wc-growth-visual {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 60%;
            height: 100%;
            overflow: hidden;
            z-index: 2;
        }

        .wc-growth-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right center;
            display: block;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .wc-growth-banner-section:hover .wc-growth-img {
            transform: scale(1.02);
        }

        .wc-growth-visual-scrim {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.98) 16%, rgba(255, 255, 255, 0.45) 36%, rgba(255, 255, 255, 0) 56%);
            pointer-events: none;
            z-index: 3;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1200px) {
            .wc-growth-banner-inner {
                padding: 60px 30px;
            }

            .wc-growth-content {
                flex: 0 0 50%;
            }

            .wc-growth-visual {
                width: 56%;
            }
        }

        @media (max-width: 900px) {
            .wc-growth-banner-section {
                flex-direction: column;
                align-items: stretch;
                min-height: auto;
            }

            .wc-growth-banner-inner {
                padding: 50px 24px 35px 24px;
            }

            .wc-growth-content {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .wc-growth-visual {
                position: relative;
                width: 100%;
                height: 360px;
            }

            .wc-growth-visual-scrim {
                background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 35%);
            }
        }

        @media (max-width: 540px) {
            .wc-growth-banner-inner {
                padding: 40px 18px 30px;
            }

            .wc-growth-title {
                font-size: 32px;
            }

            .wc-growth-desc {
                font-size: 14.5px;
            }

            .wc-growth-btn {
                width: 100%;
                padding: 14px 24px;
            }

            .wc-growth-visual {
                height: 260px;
            }
        }

        /* ==========================================================================
           DESKTOP VS MOBILE DUAL-VIEW CONTROLLER FOR CLIENT PROJECT CARDS
           Desktop (>= 992px): Original custom desktop cards (Clover, Superior, RIZON, Avignon, HDFC, BBB, Premier, Flynas, IRCTC, Americana, Empire)
           Mobile (< 992px): Portfolio stage-rectangle slider cards
           ========================================================================== */
        @media (min-width: 992px) {
            .desktop-card-view {
                display: contents !important;
            }
            .mobile-card-view {
                display: none !important;
            }

            .desktop-card-flynas {
                background: linear-gradient(145deg, #071326 0%, #030814 100%) !important;
                border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
                border-radius: 24px !important;
                padding: 24px !important;
                min-width: 420px !important;
                max-width: 440px !important;
                flex: 0 0 420px !important;
                height: 615px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
            }

            .desktop-card-irctc {
                background: linear-gradient(145deg, #071326 0%, #030814 100%) !important;
                border: 1.5px solid rgba(26, 98, 255, 0.35) !important;
                border-radius: 24px !important;
                padding: 24px !important;
                min-width: 420px !important;
                max-width: 440px !important;
                flex: 0 0 420px !important;
                height: 615px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
            }

            .desktop-card-americana {
                background: linear-gradient(145deg, #180d07 0%, #080402 100%) !important;
                border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
                border-radius: 24px !important;
                padding: 24px !important;
                min-width: 420px !important;
                max-width: 440px !important;
                flex: 0 0 420px !important;
                height: 615px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
            }

            .desktop-card-empire {
                background: radial-gradient(circle at 50% 25%, #34270b 0%, #1c1505 55%, #0d0a02 100%) !important;
                border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
                border-radius: 24px !important;
                padding: 24px !important;
                min-width: 420px !important;
                max-width: 440px !important;
                flex: 0 0 420px !important;
                height: 615px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
            }
        }

        @media (max-width: 991px) {
            .desktop-card-view {
                display: none !important;
            }
            .mobile-card-view {
                display: flex !important;
                width: 100% !important;
            }
        }

        /* ==========================================================================
           MOBILE & TABLET NAVIGATION DRAWER & NAVBAR SYSTEM (max-width: 991.98px)
           ========================================================================== */
        @media (max-width: 991.98px) {
            /* 1. Sleek Navbar on Mobile & Tablet */
            .agency-nav {
                padding: 10px 14px !important;
            }

            .nav-floating-container {
                padding: 8px 16px !important;
                border-radius: 40px !important;
            }

            .nav-logo-left img {
                height: 38px !important;
                max-height: 40px !important;
                width: auto !important;
            }

            .nav-cta-right .btn-appinv-contact {
                display: none !important;
            }

            .nav-cta-right {
                gap: 8px !important;
            }

            .btn-nav-ai {
                padding: 6px 14px !important;
                font-size: 12px !important;
            }

            /* Professional Mobile Drawer Overlay */
            .mobile-menu-overlay {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                height: 100dvh !important;
                background: rgba(4, 7, 14, 0.98) !important;
                backdrop-filter: blur(25px) !important;
                -webkit-backdrop-filter: blur(25px) !important;
                z-index: 999999 !important;
                display: flex !important;
                flex-direction: column !important;
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
                transform: translateX(100%) !important;
                transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }

            .mobile-menu-overlay.show {
                opacity: 1 !important;
                visibility: visible !important;
                pointer-events: auto !important;
                transform: translateX(0) !important;
            }

            .mobile-menu-overlay .menu-header {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                padding: 16px 20px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
                flex-shrink: 0 !important;
                background: rgba(8, 12, 22, 0.92) !important;
            }

            .mobile-menu-overlay .menu-close {
                width: 42px !important;
                height: 42px !important;
                border-radius: 50% !important;
                background: rgba(255, 255, 255, 0.08) !important;
                border: 1px solid rgba(255, 255, 255, 0.15) !important;
                color: #ffffff !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
                padding: 0 !important;
                transition: all 0.2s ease !important;
            }

            .mobile-menu-overlay .menu-close:hover {
                background: rgba(255, 255, 255, 0.2) !important;
                transform: scale(1.08) !important;
            }

            .mobile-menu-overlay > ul {
                list-style: none !important;
                padding: 20px 20px 10px !important;
                margin: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 8px !important;
            }

            .mobile-menu-overlay ul li a.nav-link {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                padding: 13px 16px !important;
                border-radius: 12px !important;
                color: #f1f5f9 !important;
                font-family: 'Montserrat', sans-serif !important;
                font-size: 15.5px !important;
                font-weight: 600 !important;
                text-decoration: none !important;
                background: rgba(255, 255, 255, 0.04) !important;
                border: 1px solid rgba(255, 255, 255, 0.07) !important;
                transition: all 0.2s ease !important;
            }

            .mobile-menu-overlay ul li a.nav-link:hover,
            .mobile-menu-overlay ul li a.nav-link:active {
                background: rgba(0, 102, 255, 0.18) !important;
                border-color: rgba(56, 189, 248, 0.35) !important;
                color: #38bdf8 !important;
            }

            /* Mobile nav: underline style matching desktop industry nav */
            .mobile-industry-menu li a {
                position: relative !important;
                padding-bottom: 8px !important;
            }

            .mobile-industry-menu li a::after {
                content: '' !important;
                position: absolute !important;
                bottom: 4px !important;
                left: 12px !important;
                right: 12px !important;
                height: 1.5px !important;
                background: rgba(56, 189, 248, 0) !important;
                transition: background 0.2s ease !important;
                border-radius: 2px !important;
            }

            .mobile-industry-menu li a:hover::after,
            .mobile-industry-menu li a:active::after {
                background: rgba(56, 189, 248, 0.6) !important;
            }

            .mobile-dropdown-menu-custom,
            .mobile-industry-menu {
                display: none !important;
                background: rgba(15, 23, 42, 0.95) !important;
                border-radius: 12px !important;
                border: 1px solid rgba(255, 255, 255, 0.1) !important;
                margin-top: 6px !important;
                padding: 10px !important;
                list-style: none !important;
                flex-direction: column !important;
                gap: 4px !important;
            }

            .mobile-dropdown-menu-custom.active,
            .mobile-industry-menu.active,
            .mobile-dropdown-menu-custom.show,
            .mobile-industry-menu.show {
                display: flex !important;
            }

            .mobile-dropdown-menu-custom li a,
            .mobile-industry-menu li a {
                display: block !important;
                padding: 10px 12px !important;
                color: #cbd5e1 !important;
                font-size: 14px !important;
                text-decoration: none !important;
                border-radius: 8px !important;
                transition: all 0.2s ease !important;
            }

            .mobile-dropdown-menu-custom li a:hover,
            .mobile-industry-menu li a:hover {
                background: rgba(0, 102, 255, 0.2) !important;
                color: #38bdf8 !important;
            }

            .mobile-menu-overlay .btn-hire {
                margin: 14px 20px 32px !important;
                padding: 14px 22px !important;
                background: linear-gradient(135deg, #0066ff, #00d2ff) !important;
                color: #ffffff !important;
                font-family: 'Montserrat', sans-serif !important;
                font-size: 15px !important;
                font-weight: 700 !important;
                border-radius: 999px !important;
                text-align: center !important;
                text-decoration: none !important;
                box-shadow: 0 4px 20px rgba(0, 102, 255, 0.4) !important;
                display: block !important;
            }
        }

        /* ==========================================================================
           GLOBAL & COMPREHENSIVE PHONE RESPONSIVENESS SYSTEM (max-width: 768px & 440px)
           ========================================================================== */
        @media (max-width: 768px) {

            /* 1. Global Screen & Viewport Safeguards */
            html,
            body {
                overflow-x: hidden !important;
                max-width: 100vw !important;
                width: 100% !important;
            }

            * {
                box-sizing: border-box !important;
            }

            img,
            video,
            canvas {
                max-width: 100% !important;
                height: auto;
            }

            /* 3. Section 1: Hero Section */
            .hero-section {
                padding: 40px 18px 50px !important;
                min-height: calc(100vh - 70px) !important;
                display: flex !important;
                align-items: center !important;
            }

            .hero-section h1 {
                font-size: clamp(28px, 7.5vw, 38px) !important;
                line-height: 1.2 !important;
            }

            .hero-section p {
                font-size: 14px !important;
            }

            .hero-content {
                text-align: center !important;
            }

            .watch-btn {
                margin: 0 auto !important;
            }

            /* 4. Section 2: Trusted Brands - Infinite Always Moving Marquee Slider on Mobile */
            #mag-trusted-section {
                padding: 34px 0 !important;
                overflow: hidden !important;
            }

            #mag-trusted-section .container {
                max-width: 100% !important;
                padding: 0 !important;
                overflow: hidden !important;
            }

            .trusted-header {
                margin-bottom: 18px !important;
                text-align: center !important;
                padding: 0 16px !important;
            }

            .trusted-title {
                font-size: clamp(18px, 4.5vw, 22px) !important;
            }

            .logo-marquee-slider {
                width: 100% !important;
                overflow: hidden !important;
                position: relative !important;
                mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
                -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
            }

                        .logo-grid {
                display: flex !important;
                flex-wrap: nowrap !important;
                width: max-content !important;
                gap: 20px !important;
                animation: mobileLogoMarquee 6s linear infinite !important;
                padding: 6px 0 !important;
            }

            .logo-item {
                flex: 0 0 calc(50vw - 24px) !important;
                width: calc(50vw - 24px) !important;
                max-width: 200px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 8px !important;
                opacity: 0.9 !important;
                transform: none !important;
            }

            .logo-item.reveal {
                opacity: 0.8 !important;
                transform: none !important;
            }

            .logo-item img {
                max-height: 38px !important;
                max-width: 115px !important;
                object-fit: contain !important;
                filter: grayscale(1) opacity(0.7) !important;
            }

            .logo-clone {
                display: flex !important;
            }

            @keyframes mobileLogoMarquee {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-50%);
                }
            }

            /* 5. Section 3: Industries Showcase Tabs (Prominent & Clear) */
            #industries-showcase {
                padding: 40px 0 !important;
            }

            .showcase-sticky {
                height: auto !important;
                position: relative !important;
                padding: 24px 16px !important;
                overflow: visible !important;
            }

            .showcase-header {
                padding: 0 !important;
                margin-bottom: 20px !important;
                flex-direction: column !important;
                gap: 14px !important;
            }

            .showcase-header h2 {
                font-size: clamp(24px, 6vw, 32px) !important;
                line-height: 1.2 !important;
            }

            .showcase-main {
                display: flex !important;
                flex-direction: column !important;
                padding: 0 !important;
                gap: 20px !important;
            }

            .industry-visual-container {
                height: 230px !important;
                width: 100% !important;
                border-radius: 18px !important;
            }

            .industry-nav {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 10px !important;
                justify-items: stretch !important;
                margin: 16px 0 20px !important;
                padding: 0 8px !important;
            }

            .industry-nav-item {
                font-size: 13.5px !important;
                font-weight: 600 !important;
                padding: 9px 10px !important;
                border-radius: 50px !important;
                background: rgba(255, 255, 255, 0.09) !important;
                color: #e2e8f0 !important;
                border: 1px solid rgba(255, 255, 255, 0.18) !important;
                letter-spacing: 0.2px !important;
                transform: none !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
                transition: all 0.25s ease !important;
                text-align: center !important;
                white-space: nowrap !important;
            }

            .industry-nav-item::before {
                display: none !important;
            }

            .industry-nav-item.active {
                background: linear-gradient(135deg, #0070f3 0%, #00dfd8 100%) !important;
                color: #ffffff !important;
                border-color: transparent !important;
                box-shadow: 0 4px 18px rgba(0, 112, 243, 0.5) !important;
                transform: none !important;
                text-shadow: none !important;
            }

            .industry-desc-container {
                width: 100% !important;
            }

            .industry-desc-slot {
                position: relative !important;
                opacity: 1 !important;
                transform: none !important;
            }

            .industry-desc-slot h3 {
                font-size: 20px !important;
            }

            .industry-desc-slot p {
                font-size: 14px !important;
                line-height: 1.6 !important;
            }

            /* 6. Section 4: Services Orbit (Digital Engineering Services) - Reduced White Space */
            #services-orbit-section {
                padding: 24px 0 28px !important;
            }

            .services-orbit-pin {
                min-height: auto !important;
                padding: 0 !important;
            }

            .services-orbit-container {
                padding: 0 16px !important;
                flex-direction: column !important;
                gap: 16px !important;
            }

            .orbit-stage-col {
                width: 100% !important;
                flex: none !important;
                margin: 0 auto !important;
                display: flex !important;
                justify-content: center !important;
            }

            .orbit-system-wrapper {
                width: 220px !important;
                height: 220px !important;
                margin: 0 auto !important;
            }

            .orbit-halo-glow {
                width: 230px !important;
                height: 230px !important;
            }

            .orbit-disc-bg {
                width: 200px !important;
                height: 200px !important;
            }

            .orbit-track-inner {
                width: 180px !important;
                height: 180px !important;
            }

            .orbit-sphere-core {
                width: 140px !important;
                height: 140px !important;
            }

            .orbit-rotating-ring {
                width: 180px !important;
                height: 180px !important;
            }

            .orbit-badge-node {
                width: 32px !important;
                height: 32px !important;
                font-size: 0.85rem !important;
                margin-top: -16px !important;
                margin-left: -16px !important;
            }

            .orbit-node-1 {
                top: 50% !important;
                left: calc(50% + 90px) !important;
            }

            .orbit-node-2 {
                top: calc(50% + 85px) !important;
                left: calc(50% + 28px) !important;
            }

            .orbit-node-3 {
                top: calc(50% + 53px) !important;
                left: calc(50% - 73px) !important;
            }

            .orbit-node-4 {
                top: calc(50% - 53px) !important;
                left: calc(50% - 73px) !important;
            }

            .orbit-node-5 {
                top: calc(50% - 85px) !important;
                left: calc(50% + 28px) !important;
            }

            .orbit-content-col {
                width: 100% !important;
                padding: 0 !important;
            }

            .orbit-eyebrow-badge {
                margin-bottom: 8px !important;
                flex-wrap: nowrap !important;
                overflow: hidden !important;
            }

            .orbit-step-counter {
                white-space: nowrap !important;
                flex-shrink: 0 !important;
            }

            .orbit-eyebrow-badge span.text {
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }

            .orbit-main-title {
                font-size: clamp(20px, 5.2vw, 24px) !important;
                margin-top: 4px !important;
                margin-bottom: 8px !important;
                min-height: auto !important;
                height: auto !important;
                line-height: 1.25 !important;
            }

            .orbit-service-card {
                padding: 14px 14px 14px 28px !important;
                border-radius: 14px !important;
                margin-top: 0 !important;
                margin-bottom: 12px !important;
            }

            .card-connector-badge {
                left: -14px !important;
                width: 30px !important;
                height: 30px !important;
                font-size: 0.85rem !important;
            }

            .orbit-pills-grid {
                gap: 8px !important;
                margin-bottom: 16px !important;
            }

            .orbit-pill-badge {
                padding: 8px 12px !important;
                font-size: 12.5px !important;
            }

            .orbit-actions-row {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 12px !important;
                margin-top: 10px !important;
            }

            .orbit-cta-button {
                text-align: center !important;
                justify-content: center !important;
                padding: 12px 18px !important;
                width: 100% !important;
            }

            /* 7. Section 5: AI Testimonials */
            .ai-testimonials-section {
                padding: 55px 16px 45px !important;
            }

            .ai-testimonials-header {
                margin-bottom: 24px !important;
            }

            .ai-testimonials-title {
                font-size: clamp(22px, 5.5vw, 30px) !important;
            }

            .ai-testimonials-subtitle {
                font-size: 13.5px !important;
            }

            .ai-testi-showcase-row {
                flex-direction: column !important;
                gap: 14px !important;
                min-height: auto !important;
                margin-bottom: 20px !important;
            }

            .ai-testi-featured-card {
                flex: none !important;
                width: 100% !important;
                aspect-ratio: 16 / 11 !important;
                border-radius: 18px !important;
            }

            .ai-testi-quote-box {
                padding: 14px 16px !important;
                max-width: 100% !important;
            }

            .ai-testi-quote-text {
                font-size: 12.5px !important;
                line-height: 1.5 !important;
            }

            .ai-testi-queue-col {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                height: 145px !important;
                gap: 8px !important;
            }

            .ai-testi-queue-card {
                border-radius: 14px !important;
            }

            .ai-testi-queue-play {
                width: 30px !important;
                height: 30px !important;
                margin-bottom: 8px !important;
            }

            .ai-testi-queue-play svg {
                width: 13px !important;
                height: 13px !important;
            }

            .ai-testi-bottom-bar {
                flex-direction: column !important;
                gap: 14px !important;
            }

            .ai-testi-logos-wrap {
                display: none !important;
            }

            .ai-testi-nav-arrows {
                align-self: flex-end !important;
                margin-top: -36px !important;
            }

            /* 8. Section 6: Client Projects / Portfolio */
            #client-projects-showcase {
                padding: 55px 0 60px !important;
            }

            .projects-showcase-container {
                padding: 0 16px !important;
            }

            .projects-main-title {
                font-size: clamp(24px, 6vw, 34px) !important;
            }

            .projects-subtitle {
                font-size: 13.5px !important;
            }

            .projects-filter-bar {
                overflow-x: auto !important;
                white-space: nowrap !important;
                padding: 4px 0 12px !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
            }

            .projects-filter-bar::-webkit-scrollbar {
                display: none !important;
            }

            .project-filter-pill {
                padding: 8px 16px !important;
                font-size: 13px !important;
                flex-shrink: 0 !important;
            }

            .projects-carousel-wrapper {
                position: relative !important;
                width: 100% !important;
                overflow: hidden !important;
            }

            .projects-cards-track {
                display: flex !important;
                gap: 16px !important;
                overflow-x: auto !important;
                scroll-snap-type: x mandatory !important;
                padding: 10px 16px 20px !important;
                scrollbar-width: none !important;
                -webkit-overflow-scrolling: touch !important;
            }

            .projects-cards-track::-webkit-scrollbar {
                display: none !important;
            }

            .projects-cards-track .project-card {
                flex: 0 0 85vw !important;
                min-width: 280px !important;
                max-width: 360px !important;
                width: 85vw !important;
                height: auto !important;
                min-height: 0 !important;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 0 !important;
                border-radius: 24px !important;
                scroll-snap-align: center !important;
                transform: none !important;
                overflow: visible !important;
                box-sizing: border-box !important;
                display: flex !important;
            }

            .projects-cards-track .mobile-card-view.stage-rectangle {
                flex: 1 1 100% !important;
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                min-height: 520px !important;
                padding: 22px 18px !important;
                border-radius: 24px !important;
                scroll-snap-align: center !important;
                transform: none !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
            }

            .projects-cards-track .stage-top-bar {
                margin-bottom: 14px !important;
            }

            .projects-cards-track .stage-sector-num {
                font-size: 10px !important;
                letter-spacing: 0.8px !important;
            }

            .projects-cards-track .stage-live-tag {
                font-size: 10.5px !important;
                padding: 4px 10px !important;
            }

            .projects-cards-track .stage-card-wrapper {
                padding: 6px 0 !important;
                margin: auto 0 !important;
            }

            .projects-cards-track .stage-card-asset-img {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                max-height: 360px !important;
                object-fit: contain !important;
                border-radius: 16px !important;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
            }

            .projects-cards-track .stage-bottom-bar {
                margin-top: 14px !important;
                padding-top: 12px !important;
            }

            .projects-cards-track .stage-pills-row {
                gap: 6px !important;
            }

            .projects-cards-track .stage-sub-pill {
                font-size: 10px !important;
                padding: 3px 9px !important;
            }

            .projects-cards-track .stage-action-btn {
                width: 36px !important;
                height: 36px !important;
                font-size: 14px !important;
            }

            /* Rich cards on mobile */
            .projects-cards-track .stage-rich-card {
                padding: 16px 14px !important;
                gap: 10px !important;
                border-radius: 16px !important;
            }

            .projects-cards-track .rich-brand-logo {
                max-height: 20px !important;
            }

            .projects-cards-track .rich-card-title {
                font-size: 1.05rem !important;
                line-height: 1.25 !important;
            }

            .projects-cards-track .rich-card-stats {
                padding: 8px 12px !important;
                gap: 8px !important;
            }

            .projects-cards-track .rich-stat-val {
                font-size: 1.25rem !important;
            }

            .projects-cards-track .rich-stat-sub {
                font-size: 10px !important;
            }

            .projects-cards-track .rich-mockup-frame {
                height: 140px !important;
                border-radius: 10px !important;
            }

            .carousel-floating-next-btn {
                display: none !important;
            }

            /* 9. Section 7: Metrics Showcase */
            #metrics-showcase {
                padding: 55px 16px !important;
            }

            .metrics-header h2 {
                font-size: clamp(24px, 6vw, 32px) !important;
            }

            .metrics-header p {
                font-size: 13.5px !important;
                margin-bottom: 24px !important;
            }

            .metrics-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px !important;
                padding: 0 !important;
            }

            .metric-card {
                padding: 20px 14px !important;
                border-radius: 14px !important;
            }

            .metric-number {
                font-size: clamp(26px, 7vw, 36px) !important;
            }

            .metric-label {
                font-size: 12px !important;
            }

            /* 10. Section 8: Digital Growth Banner */
            .wc-growth-banner-section {
                padding: 0 !important;
                min-height: auto !important;
            }

            .wc-growth-banner-inner {
                padding: 40px 18px 24px !important;
            }

            .wc-growth-content {
                flex: none !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .wc-growth-title {
                font-size: clamp(26px, 7vw, 36px) !important;
            }

            .wc-growth-desc {
                font-size: 14px !important;
                margin-bottom: 24px !important;
            }

            .wc-growth-btn {
                width: 100% !important;
                text-align: center !important;
                padding: 14px 20px !important;
            }

            .wc-growth-visual {
                position: relative !important;
                width: 100% !important;
                height: 250px !important;
                margin-top: 20px !important;
            }

            .wc-growth-visual-scrim {
                background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 30%) !important;
            }

            /* 11. Section 9: Awards Showcase */
            #award-showcase-cinematic {
                height: auto !important;
                min-height: 440px !important;
                padding: 55px 16px !important;
            }

            .award-content-wrapper {
                flex-direction: column !important;
                gap: 24px !important;
                text-align: center !important;
            }

            #award-title-typing {
                font-size: clamp(22px, 5.5vw, 28px) !important;
            }

            .award-display-zone {
                width: 100% !important;
                justify-content: center !important;
            }

            .award-badge-container img {
                max-width: 200px !important;
            }

            /* 12. Section 10: AI Solutions Bento Grid */
            #ai-solutions-bento-section {
                padding: 55px 0 60px !important;
            }

            .ai-bento-container {
                padding: 0 16px !important;
            }

            .ai-bento-row-top,
            .ai-bento-row-bottom {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }

            .ai-hero-card,
            .ai-products-card {
                grid-column: span 1 !important;
            }

            .ai-hero-card {
                padding: 24px 18px !important;
            }

            .ai-hero-headline {
                font-size: clamp(22px, 6vw, 28px) !important;
            }

            .ai-hero-visual-wrap {
                display: none !important;
            }

            .ai-hero-smarter-label {
                display: none !important;
            }

            /* 13. Section 11: CTA Video Section */
            .bgnew-section {
                padding: 50px 16px !important;
            }

            .bgnew-section .py-120 {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            .bgnew-section .text-box {
                margin-left: 0 !important;
                text-align: center !important;
            }

            .bgnew-section h4 {
                font-size: clamp(22px, 5.5vw, 28px) !important;
            }

            .bgnew-section .btn {
                width: 100% !important;
                margin-bottom: 24px !important;
            }

            /* 14. Section 12: Expertise & Solutions */
            #expertise-solutions {
                min-height: auto !important;
                padding: 55px 16px !important;
            }

            .expertise-header {
                text-align: center !important;
                margin-bottom: 30px !important;
            }

            .expertise-header h2 {
                font-size: clamp(24px, 6vw, 32px) !important;
            }

            .expertise-grid {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }

            /* 15. Section 13: Blog Section (Mobile Responsive) */
            #blog-section {
                padding: 45px 16px !important;
            }

            .blog-header {
                text-align: center !important;
                margin-bottom: 24px !important;
            }

            .blog-header h2 {
                font-size: clamp(22px, 5.5vw, 28px) !important;
            }

            .blog-main-card {
                flex-direction: column !important;
                gap: 18px !important;
                padding: 18px 16px !important;
                border-radius: 20px !important;
                width: 100% !important;
                box-sizing: border-box !important;
                transform: none !important;
            }

            .blog-img-wrap {
                width: 100% !important;
                height: 210px !important;
                border-radius: 14px !important;
                flex: none !important;
            }

            .blog-img-wrap img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
            }

            .blog-info {
                width: 100% !important;
                flex: none !important;
            }

            .blog-category {
                font-size: 0.8rem !important;
                margin-bottom: 10px !important;
            }

            .blog-info h3 {
                font-size: 1.35rem !important;
                line-height: 1.35 !important;
                margin-bottom: 14px !important;
            }

            .blog-meta {
                font-size: 0.85rem !important;
                gap: 12px !important;
                margin-bottom: 18px !important;
            }

            .visit-blog-btn {
                font-size: 0.95rem !important;
            }

            /* 16. Section 14: Global Presence Map */
            .shaping-future-section {
                padding: 50px 16px !important;
            }

            .shaping-future-section.py-120 {
                padding-top: 45px !important;
                padding-bottom: 45px !important;
            }

            .presence-flags {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 8px !important;
            }

            .flag-item {
                flex: 1 1 calc(50% - 8px) !important;
            }

            /* 17. Section 15: FAQ Section */
            #faq-section {
                padding: 55px 16px !important;
            }

            .faq-title {
                font-size: clamp(24px, 6vw, 32px) !important;
                text-align: center !important;
            }

            .accordion-button {
                font-size: 15px !important;
                padding: 14px 12px !important;
            }

            .accordion-body {
                font-size: 13.5px !important;
                padding: 10px 12px 16px !important;
            }

            /* 18. Footer & Subscription Bar */
            .lt_s h2 {
                font-size: clamp(20px, 5.5vw, 26px) !important;
                text-align: center !important;
            }

            .rt_s {
                text-align: center !important;
                padding: 0 16px !important;
            }

            .form.v2 {
                flex-direction: column !important;
                width: 100% !important;
                gap: 10px !important;
            }

            .form_control input {
                width: 100% !important;
                border-radius: 50px !important;
                height: 48px !important;
            }

            .form_btn .btn {
                width: 100% !important;
                border-radius: 50px !important;
                height: 48px !important;
            }

            .web-sec-bg,
            .footer {
                padding: 40px 16px !important;
            }
        }

        @media (max-width: 440px) {
            .metrics-grid {
                grid-template-columns: 1fr !important;
            }

            .flag-item {
                flex: 1 1 100% !important;
            }

            .orbit-system-wrapper {
                width: 210px !important;
                height: 210px !important;
            }

            .orbit-sphere-core {
                width: 135px !important;
                height: 135px !important;
            }

            .orbit-rotating-ring {
                width: 215px !important;
                height: 215px !important;
            }
        }


        /* ==========================================================================
           FULL WIDTH AI SERVICES CTA BANNER (Ideas to Intelligence)
           ========================================================================== */
        .ai-cta-fullwidth-section {
            background-color: #000000;
            color: #ffffff;
            width: 100%;
            position: relative;
            z-index: 20;
            overflow: hidden;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            min-height: 560px;
            display: flex;
            align-items: center;
        }

        .ai-cta-inner-container {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            padding: 60px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 5;
            gap: 40px;
        }

        .ai-cta-content-col {
            flex: 0 0 50%;
            max-width: 580px;
            position: relative;
            z-index: 6;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Brand Header */
        .ai-cta-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 26px;
        }

        .ai-cta-brand-logo-img {
            height: 56px;
            width: auto;
            max-width: 320px;
            object-fit: contain;
            display: block;
        }

        .ai-cta-brand-icon {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #0084ff;
            box-shadow: 0 0 25px rgba(0, 132, 255, 0.7);
        }

        .ai-cta-brand-icon svg {
            width: 22px;
            height: 22px;
        }

        .ai-cta-brand-name {
            font-size: 23px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #ffffff;
            display: flex;
            align-items: center;
        }

        /* Eyebrow with line */
        .ai-cta-eyebrow {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 18px;
        }

        .ai-cta-eyebrow-text {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.24em;
            color: #7d8b9e;
            text-transform: uppercase;
        }

        .ai-cta-eyebrow-line {
            width: 70px;
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
        }

        /* Main Heading */
        .ai-cta-heading {
            margin: 0 0 18px 0;
            font-size: clamp(32px, 3.8vw, 54px);
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.03em;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: baseline;
            gap: 14px;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .ai-cta-heading {
                white-space: normal;
                flex-wrap: wrap;
                font-size: clamp(28px, 7vw, 38px);
                gap: 8px;
            }
        }

        .ai-cta-heading-white {
            color: #ffffff;
        }

        .ai-cta-heading-blue {
            color: #1a8cff;
            text-shadow: 0 0 35px rgba(26, 140, 255, 0.6);
        }

        /* Subtext */
        .ai-cta-subtext {
            font-size: 16px;
            line-height: 1.65;
            color: #94a3b8;
            margin: 0 0 32px 0;
            max-width: 480px;
            font-weight: 400;
        }

        /* Action Button */
        .ai-cta-btn-wrap {
            display: flex;
            align-items: center;
        }

        .ai-cta-pill-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: #0066ff;
            color: #ffffff;
            font-size: 15.5px;
            font-weight: 600;
            padding: 15px 34px;
            border-radius: 9999px;
            text-decoration: none;
            box-shadow: 0 0 35px rgba(0, 102, 255, 0.65);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .ai-cta-pill-btn:hover {
            background: #1a75ff;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 0 50px rgba(0, 102, 255, 0.9);
        }

        .ai-cta-pill-btn i {
            font-size: 18px;
            transition: transform 0.25s ease;
        }

        .ai-cta-pill-btn:hover i {
            transform: translateX(4px);
        }

        /* Right Side Video Visual Column (Contained, Cropped Upper Space, Blended) */
        .ai-cta-visual {
            flex: 0 0 46%;
            max-width: 520px;
            height: 520px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 24px;
        }

        .ai-cta-bg-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 36%;
            /* Crops empty space above the brain, framing brain and robotic hand prominently */
            transform: scale(1.15);
            transform-origin: center 40%;
            filter: brightness(1.08) contrast(1.1);
            display: block;
        }

        .ai-cta-visual-scrim {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, transparent 50%, rgba(0, 0, 0, 0.4) 80%, #000000 100%),
                linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.85) 12%, rgba(0, 0, 0, 0) 35%),
                linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0) 30%),
                linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 30%),
                linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 30%);
            pointer-events: none;
            z-index: 3;
        }

        /* Responsive Styles */
        @media (max-width: 1100px) {
            .ai-cta-inner-container {
                padding: 50px 30px;
                gap: 30px;
            }

            .ai-cta-content-col {
                flex: 0 0 52%;
            }

            .ai-cta-visual {
                flex: 0 0 44%;
                height: 450px;
            }
        }

        @media (max-width: 860px) {
            .ai-cta-fullwidth-section {
                min-height: auto !important;
                flex-direction: column !important;
                align-items: stretch !important;
            }

            .ai-cta-inner-container {
                flex-direction: column !important;
                align-items: stretch !important;
                width: 100% !important;
                max-width: 100% !important;
                padding: 45px 20px 30px !important;
                gap: 25px !important;
                box-sizing: border-box !important;
            }

            .ai-cta-content-col {
                flex: none !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .ai-cta-visual {
                flex: none !important;
                width: 100% !important;
                max-width: 100% !important;
                height: 320px !important;
                margin: 0 auto !important;
            }
        }

        @media (max-width: 768px) {
            .ai-cta-fullwidth-section {
                flex-direction: column !important;
                align-items: stretch !important;
            }

            .ai-cta-inner-container {
                width: 100% !important;
                max-width: 100% !important;
                padding: 38px 18px 24px !important;
                box-sizing: border-box !important;
            }

            .ai-cta-content-col {
                width: 100% !important;
                max-width: 100% !important;
                flex: none !important;
            }

            .ai-cta-heading {
                font-size: clamp(28px, 7.5vw, 36px) !important;
            }

            .ai-cta-subtext {
                font-size: 15px !important;
                margin-bottom: 24px !important;
            }

            .ai-cta-btn-wrap {
                width: 100% !important;
                display: block !important;
                margin-top: 12px !important;
            }

            .ai-cta-pill-btn {
                width: 100% !important;
                box-sizing: border-box !important;
                padding: 18px 28px !important;
                font-size: 17px !important;
                font-weight: 700 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 12px !important;
                border-radius: 9999px !important;
                box-shadow: 0 4px 30px rgba(0, 102, 255, 0.65) !important;
            }

            .ai-cta-pill-btn i {
                font-size: 20px !important;
            }

            .ai-cta-visual {
                height: 280px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
        }


        /* ==========================================================================
           PIPE-STYLE PREMIUM CONTACT FORM SECTION (Dark Obsidian + Blue Aura)
           ========================================================================== */
        .pipe-contact-section {
            background-color: #07090D;
            position: relative;
            overflow: hidden;
            padding: 110px 0 120px;
            color: #FFFFFF;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }

        /* Ambient Blue Background Aura */
        .pipe-contact-ambient-glow {
            position: absolute;
            top: 15%;
            right: 2%;
            width: 800px;
            height: 650px;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.32) 0%, rgba(29, 78, 216, 0.16) 40%, rgba(7, 9, 13, 0) 75%);
            filter: blur(80px);
            pointer-events: none;
            z-index: 1;
        }

        .pipe-contact-container {
            position: relative;
            z-index: 5;
            max-width: 1320px;
        }

        /* --- Left Column Styling --- */
        .pipe-contact-left-col {
            padding-right: 20px;
        }

        .pipe-contact-eyebrow {
            font-size: 12.5px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #94A3B8;
            margin-bottom: 20px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        @keyframes contactDotPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 10px #38BDF8;
            }
            50% {
                transform: scale(1.35);
                box-shadow: 0 0 18px #38BDF8, 0 0 28px rgba(56, 189, 248, 0.5);
            }
        }

        @keyframes contactTextShimmer {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .pipe-contact-eyebrow::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #38BDF8;
            box-shadow: 0 0 10px #38BDF8;
            animation: contactDotPulse 2.2s infinite ease-in-out;
        }

        .pipe-contact-title {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: clamp(42px, 5.2vw, 68px);
            font-weight: 300 !important;
            line-height: 1.08;
            letter-spacing: -0.03em;
            color: #FFFFFF;
            margin-bottom: 22px;
        }

        .pipe-contact-title .pipe-contact-gradient {
            background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 50%, #818cf8 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            animation: contactTextShimmer 4.5s ease-in-out infinite;
        }

        .pipe-contact-desc {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 16.5px;
            font-weight: 300 !important;
            line-height: 1.65;
            color: #94A3B8;
            max-width: 490px;
            margin-bottom: 24px;
        }

        /* Let's Talk Button on Contact Section - Sleek Design with Dynamic Hover Fill Gradient */
        .pipe-lets-talk-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 34px;
            border-radius: 9999px;
            text-decoration: none !important;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1.5px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.15);
            margin-top: 8px;
            margin-bottom: 24px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* The Fill Gradient Layer on Hover */
        .pipe-lets-talk-bg-gradient {
            position: absolute;
            inset: 0;
            border-radius: 9999px;
            background: linear-gradient(135deg, #1ea7fd 0%, #0d6efd 50%, #004fe8 100%);
            opacity: 0;
            transform: scale(0.92);
            transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1;
        }

        /* Diagonal Light Shimmer Sweep */
        .pipe-lets-talk-btn::after {
            content: '';
            position: absolute;
            top: -60%;
            left: -80%;
            width: 45%;
            height: 220%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            transform: rotate(25deg);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 2;
            pointer-events: none;
        }

        .pipe-lets-talk-content {
            position: relative;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: #ffffff;
            font-family: 'Montserrat', 'Inter', sans-serif;
            font-size: 15.5px;
            font-weight: 600;
            letter-spacing: 0.2px;
        }

        .pipe-lets-talk-icon-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: #38bdf8;
            font-size: 13.5px;
            transition: all 0.35s ease;
        }

        .pipe-lets-talk-arrow {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            transition: transform 0.3s ease, color 0.3s ease;
        }

        /* Hover States with Glowing Aura and Gradient Fill */
        .pipe-lets-talk-btn:hover {
            transform: translateY(-3px) scale(1.02);
            border-color: rgba(255, 255, 255, 0.75);
            box-shadow: 0 16px 38px rgba(13, 110, 253, 0.55), 0 0 30px rgba(30, 167, 253, 0.45);
        }

        .pipe-lets-talk-btn:hover .pipe-lets-talk-bg-gradient {
            opacity: 1;
            transform: scale(1);
        }

        .pipe-lets-talk-btn:hover::after {
            opacity: 1;
            animation: ctaLightSweep 1.6s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }

        .pipe-lets-talk-btn:hover .pipe-lets-talk-icon-wrap {
            background: #ffffff;
            color: #0052cc;
            transform: scale(1.08) rotate(-12deg);
        }

        .pipe-lets-talk-btn:hover .pipe-lets-talk-arrow {
            transform: translateX(4px);
            color: #ffffff;
        }

        .pipe-lets-talk-btn:active {
            transform: translateY(-1px) scale(0.99);
        }

        @keyframes ctaLightSweep {
            0% {
                left: -80%;
            }
            40% {
                left: 140%;
            }
            100% {
                left: 140%;
            }
        }

        @media (max-width: 768px) {
            .pipe-lets-talk-btn {
                padding: 12px 28px;
                margin-bottom: 20px;
            }
            .pipe-lets-talk-content {
                font-size: 14.5px;
            }
        }

        /* Search FAQ Pill Button */
        .pipe-faq-action-wrap {
            margin-bottom: 36px;
        }

        .pipe-faq-pill-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 26px;
            background: #FFFFFF;
            color: #0F172A;
            border-radius: 50px;
            font-size: 14.5px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .pipe-faq-pill-btn i {
            font-size: 13.5px;
            color: #0F172A;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .pipe-faq-pill-btn:hover {
            transform: translateY(-2px);
            background: #F8FAFC;
            color: #0284C7;
            box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
        }

        .pipe-faq-pill-btn:hover i {
            transform: scale(1.15);
            color: #0284C7;
        }

        /* Our Presence & Flags */
        .pipe-presence-block {
            margin-top: 10px;
            margin-bottom: 26px;
        }

        .pipe-presence-label {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748B;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pipe-presence-label i {
            color: #38BDF8;
            font-size: 15px;
        }

        .pipe-contact-section .presence-flags {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .pipe-contact-section .flag-item {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.04);
            border: 1.5px solid rgba(255, 255, 255, 0.12);
            color: #E2E8F0;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
        }

        .pipe-contact-section .flag-item img {
            width: 22px;
            height: 16px;
            object-fit: cover;
            border-radius: 3px;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        /* Hover and color change on flags */
        .pipe-contact-section .flag-item:hover {
            background: rgba(37, 99, 235, 0.22);
            border-color: #38BDF8;
            color: #38BDF8;
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 10px 24px -4px rgba(56, 189, 248, 0.35);
        }

        .pipe-contact-section .flag-item:hover img {
            transform: scale(1.18);
            filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
        }

        .pipe-contact-section .flag-item.active {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(59, 130, 246, 0.2));
            border-color: #60A5FA;
            color: #FFFFFF;
            box-shadow: 0 0 22px rgba(59, 130, 246, 0.35);
        }

        .pipe-contact-section .flag-item.active::after {
            content: '';
            position: absolute;
            top: -3px;
            right: -3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #38BDF8;
            box-shadow: 0 0 8px #38BDF8;
        }

        /* Dynamic Contact Details Card */
        .pipe-contact-info-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            padding: 22px 24px;
            backdrop-filter: blur(14px);
            display: flex;
            flex-direction: column;
            gap: 16px;
            max-width: 540px;
        }

        .pipe-info-row {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 8px 12px;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .pipe-info-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            color: #94A3B8;
            flex-shrink: 0;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .pipe-info-content {
            display: flex;
            flex-direction: column;
            gap: 3px;
            flex-grow: 1;
        }

        .pipe-info-tag {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #64748B;
            font-weight: 700;
        }

        .pipe-info-val {
            font-size: 14px;
            color: #CBD5E1;
            margin: 0;
            line-height: 1.5;
            transition: color 0.3s ease;
        }

        .pipe-contact-link {
            font-size: 15px;
            font-weight: 600;
            color: #F1F5F9;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-block;
        }

        /* Hover and color change on address, email, number */
        .pipe-address-row:hover {
            background: rgba(56, 189, 248, 0.05);
        }

        .pipe-address-row:hover .pipe-info-icon {
            background: rgba(56, 189, 248, 0.18);
            border-color: #38BDF8;
            color: #38BDF8;
            transform: scale(1.1);
            box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
        }

        .pipe-address-row:hover .pipe-info-val {
            color: #93C5FD;
        }

        .pipe-email-row:hover {
            background: rgba(56, 189, 248, 0.07);
        }

        .pipe-email-row:hover .pipe-info-icon {
            background: rgba(56, 189, 248, 0.22);
            border-color: #38BDF8;
            color: #38BDF8;
            transform: scale(1.12) rotate(-6deg);
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.45);
        }

        .pipe-email-row:hover .pipe-contact-link {
            color: #38BDF8;
            text-shadow: 0 0 14px rgba(56, 189, 248, 0.65);
            transform: translateX(4px);
        }

        .pipe-phone-row:hover {
            background: rgba(74, 222, 128, 0.07);
        }

        .pipe-phone-row:hover .pipe-info-icon {
            background: rgba(74, 222, 128, 0.22);
            border-color: #4ADE80;
            color: #4ADE80;
            transform: scale(1.12);
            animation: phoneVibe 0.5s ease infinite alternate;
            box-shadow: 0 0 20px rgba(74, 222, 128, 0.45);
        }

        .pipe-phone-row:hover .pipe-contact-link {
            color: #4ADE80;
            text-shadow: 0 0 14px rgba(74, 222, 128, 0.65);
            transform: translateX(4px);
        }

        @keyframes phoneVibe {
            0% {
                transform: scale(1.12) rotate(-8deg);
            }

            100% {
                transform: scale(1.12) rotate(8deg);
            }
        }

        /* --- Right Column: Pristine White Form Card with Ambient Aura --- */
        .pipe-contact-right-col {
            position: relative;
        }

        .pipe-form-card-wrapper {
            position: relative;
            z-index: 5;
            max-width: 560px;
            margin: 0 auto;
        }

        @keyframes formBackdropGradientFlow {
            0% {
                background-position: 0% 0%;
            }
            50% {
                background-position: 100% 100%;
            }
            100% {
                background-position: 0% 0%;
            }
        }

        @keyframes formAuraPulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.82;
                filter: blur(52px);
            }
            50% {
                transform: scale(1.1) translate(-10px, 15px);
                opacity: 1;
                filter: blur(65px);
            }
        }

        @keyframes formCardBgShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* Glowing Blue Aura behind the card */
        /* Distinct Rounded Gradient Panel Under & Behind the Form (Pipe-style match) */
        .pipe-gradient-backdrop-panel {
            position: absolute;
            top: 20%;
            bottom: -80px;
            left: -90px;
            right: -28px;
            border-radius: 28px;
            background: linear-gradient(135deg, #09142b 0%, #0c2d6b 20%, #1b4fb5 45%, #2563eb 70%, #0ea5e9 88%, #3b82f6 100%);
            background-size: 240% 240%;
            animation: formBackdropGradientFlow 8s ease infinite;
            box-shadow: 0 35px 80px -10px rgba(37, 99, 235, 0.45);
            pointer-events: none;
            z-index: 1;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .pipe-card-ambient-aura {
            position: absolute;
            top: 15%;
            bottom: -90px;
            left: -105px;
            right: -40px;
            background: radial-gradient(circle at 40% 75%, rgba(37, 99, 235, 0.75) 0%, rgba(14, 165, 233, 0.45) 45%, transparent 75%);
            filter: blur(52px);
            pointer-events: none;
            z-index: 0;
            opacity: 0.85;
            animation: formAuraPulse 6s ease-in-out infinite;
        }

        /* Pristine White Card with Animated Gradient Accent & Subtle Ambient Tint */
        .pipe-white-form-card {
            background: linear-gradient(145deg, #FFFFFF 0%, #FFFFFF 68%, #F0F7FF 86%, #E0F2FE 100%);
            background-size: 200% 200%;
            animation: formCardBgShift 10s ease infinite;
            border-radius: 22px;
            padding: 44px 40px 38px;
            box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.25);
            color: #0F172A;
            position: relative;
            z-index: 3;
            overflow: hidden;
        }

        .pipe-white-form-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #2563EB, #38BDF8, #818CF8, #2563EB);
            background-size: 200% 100%;
            animation: formCardBgShift 4s linear infinite;
            z-index: 4;
        }

        /* Form Labels & Fields */
        .pipe-input-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #334155;
            margin-bottom: 6px;
            letter-spacing: 0.01em;
        }

        .pipe-text-input,
        .pipe-select-input,
        .pipe-textarea-input {
            width: 100%;
            border: 1.5px solid #E2E8F0;
            border-radius: 9px;
            padding: 11px 15px;
            font-size: 14.5px;
            color: #0F172A;
            background: #FFFFFF;
            transition: all 0.22s ease;
            outline: none;
            font-family: inherit;
        }

        .pipe-text-input::placeholder,
        .pipe-textarea-input::placeholder {
            color: #94A3B8;
        }

        .pipe-text-input:focus,
        .pipe-select-input:focus,
        .pipe-textarea-input:focus {
            border-color: #2563EB;
            box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.14);
        }

        /* Custom Topic Select */
        .pipe-select-wrap {
            position: relative;
            width: 100%;
        }

        .pipe-select-input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-right: 38px;
            cursor: pointer;
            background-color: #FFFFFF;
        }

        .pipe-select-chevron {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #64748B;
            font-size: 12px;
        }

        /* Textarea */
        .pipe-textarea-input {
            resize: vertical;
            min-height: 95px;
        }

        /* intl-tel-input in white card */
        .pipe-white-form-card .iti {
            width: 100%;
        }

        .pipe-white-form-card .iti__flag-container {
            border-radius: 9px 0 0 9px;
        }

        .pipe-white-form-card .iti input {
            padding-left: 96px !important;
            border: 1.5px solid #E2E8F0;
            border-radius: 9px;
            font-size: 14.5px;
            height: 46px;
        }

        .pipe-white-form-card .iti input:focus {
            border-color: #2563EB;
            box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.14);
        }

        /* Pill Submit Button */
        .pipe-submit-btn {
            width: 100%;
            height: 50px;
            background: #000000;
            color: #FFFFFF;
            border: none;
            border-radius: 50px;
            font-size: 15.5px;
            font-weight: 600;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 8px;
        }

        .pipe-submit-btn:hover {
            background: #1E293B;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
        }

        .pipe-submit-btn:active {
            transform: translateY(0);
        }

        /* Legal Disclaimer */
        .pipe-form-disclaimer {
            font-size: 12px;
            line-height: 1.55;
            color: #64748B;
            text-align: center;
            margin-top: 16px;
        }

        .pipe-form-disclaimer a {
            color: #334155;
            text-decoration: underline;
            text-underline-offset: 2px;
            transition: color 0.2s ease;
        }

        .pipe-form-disclaimer a:hover {
            color: #2563EB;
        }

        /* Error Messages */
        .pipe-white-form-card .error-message {
            font-size: 12px;
            color: #EF4444;
            margin-top: 5px;
            display: none;
            font-weight: 500;
        }


        @media (max-width: 991px) {
            .pipe-gradient-backdrop-panel {
                left: -35px;
                right: -25px;
                bottom: -55px;
                top: 15%;
                border-radius: 24px;
            }

            .pipe-card-ambient-aura {
                left: -45px;
                right: -35px;
                bottom: -65px;
            }
        }

        @media (max-width: 540px) {
            .pipe-gradient-backdrop-panel {
                left: -16px;
                right: -16px;
                bottom: -40px;
                top: 12%;
                border-radius: 20px;
            }

            .pipe-card-ambient-aura {
                left: -20px;
                right: -20px;
                bottom: -45px;
            }
        }

        /* Responsive */
        @media (max-width: 991px) {
            .pipe-contact-section {
                padding: 70px 0 80px;
            }

            .pipe-contact-left-col {
                padding-right: 0;
                margin-bottom: 40px;
            }

            .pipe-form-card-wrapper {
                max-width: 100%;
            }

            .pipe-white-form-card {
                padding: 34px 26px;
            }
        }

        @media (max-width: 540px) {
            .pipe-contact-section {
                padding: 55px 0 65px;
            }

            .pipe-white-form-card {
                padding: 26px 18px;
                border-radius: 18px;
            }

            .pipe-contact-title {
                font-size: clamp(32px, 8vw, 40px);
            }

            .pipe-contact-desc {
                font-size: 15px;
            }

            .pipe-contact-info-card {
                padding: 18px 16px;
            }

            .pipe-info-row {
                gap: 12px;
                padding: 6px 4px;
            }

            .pipe-info-icon {
                width: 36px;
                height: 36px;
                font-size: 15px;
            }

            .pipe-contact-section .presence-flags {
                gap: 8px;
            }

            .pipe-contact-section .flag-item {
                flex: 1 1 calc(50% - 8px);
                justify-content: center;
                padding: 8px 12px;
                font-size: 13px;
            }
        }

        /* ==========================================================================
           PRE-FOOTER SUBSCRIBERS SHOWCASE (FIXED STRUCTURE & MODERN PILL INPUT)
           ========================================================================== */
        .wc-subscribers-section {
            background-color: #040813;
            position: relative;
            padding: 85px 24px 75px;
            overflow: hidden;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            border-top: 1px solid rgba(26, 98, 255, 0.18);
            border-bottom: 1px solid rgba(26, 98, 255, 0.15);
        }

        /* Ambient glowing backdrop aura */
        .wc-subscribers-section::before {
            content: "";
            position: absolute;
            top: -120px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 360px;
            background: radial-gradient(ellipse at center, rgba(26, 98, 255, 0.22) 0%, rgba(26, 98, 255, 0.05) 50%, transparent 75%);
            pointer-events: none;
            z-index: 1;
        }

        .wc-subscribers-card {
            max-width: 1280px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            background: linear-gradient(135deg, rgba(11, 20, 42, 0.85) 0%, rgba(5, 9, 20, 0.95) 100%);
            border: 1px solid rgba(26, 98, 255, 0.3);
            border-radius: 28px;
            padding: 52px 58px;
            box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 45px -10px rgba(26, 98, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 48px;
            flex-wrap: wrap;
        }

        .wc-sub-content {
            flex: 1 1 500px;
            max-width: 600px;
        }

        .wc-sub-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: rgba(26, 98, 255, 0.14);
            border: 1px solid rgba(26, 98, 255, 0.38);
            color: #60A5FA;
            padding: 7px 16px;
            border-radius: 50px;
            font-size: 11.5px;
            font-weight: 750;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .wc-sub-pulse {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #38BDF8;
            box-shadow: 0 0 10px #38BDF8;
            animation: subPulse 1.8s infinite ease-in-out;
        }

        @keyframes subPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.4);
                opacity: 0.6;
            }
        }

        .wc-sub-title {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(28px, 3.4vw, 42px);
            font-weight: 800;
            color: #FFFFFF;
            line-height: 1.15;
            letter-spacing: -0.025em;
            margin: 0 0 14px 0;
        }

        .wc-sub-blue {
            color: #1A62FF;
            text-shadow: 0 0 28px rgba(26, 98, 255, 0.55);
            font-weight: 850;
        }

        .wc-sub-desc {
            color: #94A3B8;
            font-size: 16px;
            line-height: 1.65;
            margin: 0;
            max-width: 520px;
        }

        .wc-sub-action {
            flex: 1 1 450px;
            max-width: 520px;
            width: 100%;
        }

        .wc-sub-form {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .wc-sub-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
            background: rgba(3, 7, 16, 0.92);
            border: 1.5px solid rgba(26, 98, 255, 0.35);
            border-radius: 60px;
            padding: 6px 8px 6px 22px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.4);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .wc-sub-input-wrap:focus-within {
            border-color: #1A62FF;
            box-shadow: 0 0 30px rgba(26, 98, 255, 0.45), inset 0 2px 4px rgba(0, 0, 0, 0.4);
            background: rgba(4, 10, 24, 0.96);
        }

        .wc-sub-mail-icon {
            color: #1A62FF;
            font-size: 20px;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .wc-sub-input-wrap input[type="email"] {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            color: #FFFFFF;
            font-size: 15px;
            font-family: inherit;
            padding: 10px 8px 10px 0;
        }

        .wc-sub-input-wrap input[type="email"]::placeholder {
            color: #64748B;
            font-size: 14.5px;
        }

        .wc-sub-submit-btn {
            background: linear-gradient(135deg, #1A62FF 0%, #004BD6 100%);
            color: #FFFFFF;
            border: none;
            outline: none;
            font-weight: 750;
            font-size: 15px;
            border-radius: 50px;
            padding: 13px 30px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            box-shadow: 0 4px 18px rgba(26, 98, 255, 0.45);
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .wc-sub-submit-btn i {
            font-size: 20px;
            transition: transform 0.25s ease;
        }

        .wc-sub-submit-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, #2B73FF 0%, #0B53E4 100%);
            box-shadow: 0 8px 25px rgba(26, 98, 255, 0.65);
        }

        .wc-sub-submit-btn:hover i {
            transform: translateX(4px);
        }

        .wc-sub-submit-btn:active {
            transform: translateY(0);
        }

        .wc-sub-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #64748B;
            font-size: 12.5px;
            padding-left: 14px;
            margin-top: 4px;
        }

        .wc-sub-meta i {
            color: #38BDF8;
            font-size: 13px;
        }

        /* Responsive Pre-Footer */
        @media (max-width: 991px) {
            .wc-subscribers-section {
                padding: 65px 20px 55px;
            }

            .wc-subscribers-card {
                padding: 40px 32px;
                gap: 36px;
            }

            .wc-sub-content {
                max-width: 100%;
            }

            .wc-sub-action {
                max-width: 100%;
            }
        }

        @media (max-width: 600px) {
            .wc-subscribers-section {
                padding: 50px 16px 44px;
            }

            .wc-subscribers-card {
                padding: 28px 18px;
                border-radius: 20px;
                gap: 24px;
            }

            .wc-sub-content {
                max-width: 100%;
            }

            .wc-sub-badge {
                font-size: 10px;
                padding: 6px 12px;
                margin-bottom: 12px;
            }

            .wc-sub-title {
                font-size: clamp(22px, 6vw, 28px);
                margin-bottom: 10px;
            }

            .wc-sub-desc {
                font-size: 14px;
                line-height: 1.55;
            }

            .wc-sub-input-wrap {
                flex-direction: column;
                border-radius: 16px;
                padding: 14px 16px;
                gap: 12px;
                align-items: stretch;
            }

            .wc-sub-input-wrap input[type="email"] {
                width: 100%;
                padding: 6px 0;
            }

            .wc-sub-submit-btn {
                width: 100%;
                justify-content: center;
                padding: 13px 20px;
                border-radius: 12px;
            }

            .wc-sub-meta {
                padding-left: 4px;
            }
        }

        /* ==========================================================================
           FOOTER REDESIGN: COMBINATION OF BLUE & BLACK LUXURY THEME
           ========================================================================== */
        footer.footer {
            background: radial-gradient(130% 90% at 50% -10%, #081639 0%, #04091A 35%, #010309 100%) !important;
            border-top: 1px solid rgba(26, 98, 255, 0.3) !important;
            color: #E2E8F0 !important;
            position: relative !important;
            padding: 65px 32px 28px !important;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
            overflow: hidden !important;
        }

        /* Ambient Glowing Boundary Line at Top of Footer */
        footer.footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #1A62FF 35%, #38BDF8 50%, #1A62FF 65%, transparent 100%);
            box-shadow: 0 0 20px #1A62FF, 0 0 35px rgba(56, 189, 248, 0.6);
            z-index: 10;
        }

        .footer .footer-inner {
            max-width: 1440px !important;
            margin: 0 auto !important;
            position: relative;
            z-index: 2;
        }

        /* CTA BANNER (Combined Blue & Black Glass Card) */
        .footer .cta-banner {
            background: linear-gradient(135deg, rgba(13, 26, 60, 0.92) 0%, rgba(6, 11, 26, 0.96) 100%) !important;
            border: 1px solid rgba(26, 98, 255, 0.38) !important;
            border-radius: 22px !important;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 35px rgba(26, 98, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
            padding: 30px 40px !important;
            margin-bottom: 50px !important;
            backdrop-filter: blur(15px) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 24px !important;
            flex-wrap: wrap !important;
        }

        .footer .cta-icon {
            background: radial-gradient(circle at 30% 30%, #1A62FF 0%, #0A2C7A 100%) !important;
            border: 1px solid rgba(26, 98, 255, 0.5) !important;
            box-shadow: 0 0 22px rgba(26, 98, 255, 0.6) !important;
            width: 58px !important;
            height: 58px !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 26px !important;
            flex-shrink: 0 !important;
        }

        .footer .cta-left h2 {
            color: #FFFFFF !important;
            font-size: 24px !important;
            font-weight: 800 !important;
            letter-spacing: -0.015em !important;
            margin: 0 0 6px !important;
        }

        .footer .cta-left p {
            color: #94A3B8 !important;
            font-size: 15px !important;
            margin: 0 !important;
        }

        .footer .cta-actions {
            display: flex !important;
            gap: 14px !important;
            flex-wrap: wrap !important;
        }

        .footer .cta-actions .btn-primary {
            background: linear-gradient(135deg, #1A62FF 0%, #004BD6 100%) !important;
            border: none !important;
            color: #FFFFFF !important;
            font-weight: 750 !important;
            font-size: 14.5px !important;
            border-radius: 50px !important;
            padding: 13px 26px !important;
            box-shadow: 0 4px 20px rgba(26, 98, 255, 0.45) !important;
            transition: all 0.25s ease !important;
            text-decoration: none !important;
            display: inline-flex !important;
            align-items: center !important;
        }

        .footer .cta-actions .btn-primary:hover {
            transform: translateY(-2px) !important;
            background: linear-gradient(135deg, #2B73FF 0%, #0B53E4 100%) !important;
            box-shadow: 0 8px 28px rgba(26, 98, 255, 0.65) !important;
            color: #FFFFFF !important;
        }

        .footer .cta-actions .btn-outline {
            background: rgba(255, 255, 255, 0.04) !important;
            border: 1px solid rgba(255, 255, 255, 0.22) !important;
            color: #FFFFFF !important;
            font-weight: 650 !important;
            font-size: 14.5px !important;
            border-radius: 50px !important;
            cursor: unset;
            padding: 13px 24px !important;
            backdrop-filter: blur(8px) !important;
            transition: all 0.25s ease !important;
            text-decoration: none !important;
            display: inline-flex !important;
            align-items: center !important;
        }

        .footer .cta-actions .btn-outline:hover {
            background: rgba(26, 98, 255, 0.15) !important;
            border-color: #1A62FF !important;
            color: #38BDF8 !important;
            transform: translateY(-2px) !important;
        }

        /* BRAND & TOP ROW */
        .footer .top-row {
            display: flex !important;
            gap: 48px !important;
            padding: 10px 0 40px !important;
            border-bottom: 1px solid rgba(26, 98, 255, 0.18) !important;
            flex-wrap: wrap !important;
        }

        .footer .brand-col {
            flex: 1 1 320px !important;
            min-width: 280px !important;
            border-right: 1px solid rgba(26, 98, 255, 0.18) !important;
            padding-right: 36px !important;
        }

        .footer .brand-desc {
            color: #94A3B8 !important;
            font-size: 14.5px !important;
            line-height: 1.65 !important;
            max-width: 420px !important;
            margin: 14px 0 0 !important;
        }

        .footer .news-col {
            flex: 1.4 1 420px !important;
            min-width: 300px !important;
        }

        .footer .news-col h3 {
            color: #FFFFFF !important;
            font-size: 19px !important;
            font-weight: 750 !important;
            margin-bottom: 16px !important;
        }

        .footer .subscribe-form {
            display: flex !important;
            background: rgba(8, 14, 30, 0.92) !important;
            border: 1.5px solid rgba(26, 98, 255, 0.35) !important;
            border-radius: 50px !important;
            padding: 5px 6px 5px 20px !important;
            max-width: 580px !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
            transition: all 0.3s ease !important;
        }

        .footer .subscribe-form:focus-within {
            border-color: #1A62FF !important;
            box-shadow: 0 0 25px rgba(26, 98, 255, 0.4) !important;
        }

        .footer .subscribe-form input {
            background: transparent !important;
            border: none !important;
            outline: none !important;
            color: #FFFFFF !important;
            font-size: 14.5px !important;
            flex: 1 !important;
            padding: 10px 8px 10px 0 !important;
        }

        .footer .subscribe-form input::placeholder {
            color: #64748B !important;
        }

        .footer .subscribe-form button {
            background: linear-gradient(135deg, #1A62FF 0%, #004BD6 100%) !important;
            border: none !important;
            color: #FFFFFF !important;
            font-weight: 750 !important;
            font-size: 14px !important;
            border-radius: 50px !important;
            padding: 10px 24px !important;
            cursor: pointer !important;
            transition: all 0.25s ease !important;
            box-shadow: 0 4px 15px rgba(26, 98, 255, 0.4) !important;
        }

        .footer .subscribe-form button:hover {
            background: linear-gradient(135deg, #2B73FF 0%, #0B53E4 100%) !important;
            box-shadow: 0 6px 20px rgba(26, 98, 255, 0.6) !important;
        }

        .footer .news-note {
            color: #94A3B8 !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            margin-top: 14px !important;
            font-size: 13px !important;
        }

        .footer .check-dot {
            background: #1A62FF !important;
            color: #FFFFFF !important;
            width: 20px !important;
            height: 20px !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 11px !important;
            box-shadow: 0 0 10px rgba(26, 98, 255, 0.6) !important;
            flex-shrink: 0 !important;
        }

        /* NEW FULL-WIDTH NEWSLETTER CARD */
        .wc-nl-banner-card {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 48px !important;
            padding: 48px 56px !important;
            background: radial-gradient(circle at 12% 25%, rgba(13, 110, 253, 0.16) 0%, rgba(6, 12, 28, 0.95) 55%, #030712 100%) !important;
            border: 1.5px solid rgba(26, 98, 255, 0.38) !important;
            border-radius: 26px !important;
            box-shadow: 0 16px 45px -10px rgba(0, 0, 0, 0.7), 0 0 35px rgba(13, 110, 253, 0.12) !important;
            margin: 15px 0 45px !important;
            overflow: hidden !important;
        }

        .wc-nl-banner-card::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: 1.5px !important;
            background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.5) 25%, rgba(26, 98, 255, 0.85) 50%, rgba(56, 189, 248, 0.5) 75%, transparent 100%) !important;
        }

        .wc-nl-content-col {
            flex: 1 1 480px !important;
            max-width: 560px !important;
        }

        .wc-nl-badge {
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            background: rgba(13, 110, 253, 0.14) !important;
            border: 1px solid rgba(56, 189, 248, 0.32) !important;
            border-radius: 999px !important;
            padding: 6px 14px !important;
            font-size: 11px !important;
            font-weight: 750 !important;
            letter-spacing: 1.5px !important;
            color: #38BDF8 !important;
            text-transform: uppercase !important;
            margin-bottom: 18px !important;
        }

        .wc-nl-badge-dot {
            width: 7px !important;
            height: 7px !important;
            border-radius: 50% !important;
            background: #00D2FF !important;
            box-shadow: 0 0 8px #00D2FF, 0 0 14px #00D2FF !important;
            display: inline-block !important;
        }

        .wc-nl-title {
            font-size: 38px !important;
            font-weight: 800 !important;
            color: #FFFFFF !important;
            line-height: 1.18 !important;
            letter-spacing: -0.02em !important;
            margin: 0 0 14px 0 !important;
            font-family: 'Inter', -apple-system, sans-serif !important;
        }

        .wc-nl-glow-num {
            color: #1A62FF !important;
            text-shadow: 0 0 25px rgba(26, 98, 255, 0.85), 0 0 10px rgba(26, 98, 255, 0.5) !important;
        }

        .wc-nl-desc {
            font-size: 15px !important;
            color: #94A3B8 !important;
            line-height: 1.6 !important;
            margin: 0 !important;
            max-width: 480px !important;
            font-weight: 400 !important;
        }

        .wc-nl-action-col {
            flex: 1 1 420px !important;
            max-width: 520px !important;
        }

        .wc-nl-input-bar {
            display: flex !important;
            align-items: center !important;
            background: rgba(4, 9, 22, 0.95) !important;
            border: 1.5px solid rgba(26, 98, 255, 0.45) !important;
            border-radius: 999px !important;
            padding: 5px 6px 5px 20px !important;
            gap: 12px !important;
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45), 0 0 20px rgba(13, 110, 253, 0.12) !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .wc-nl-input-bar:focus-within {
            border-color: #1A62FF !important;
            box-shadow: 0 0 30px rgba(26, 98, 255, 0.5) !important;
            background: rgba(6, 13, 30, 0.98) !important;
        }

        .wc-nl-mail-icon {
            flex-shrink: 0 !important;
        }

        .wc-nl-input-bar input {
            flex: 1 !important;
            background: transparent !important;
            border: none !important;
            outline: none !important;
            color: #FFFFFF !important;
            font-size: 15px !important;
            padding: 10px 0 !important;
            min-width: 120px !important;
        }

        .wc-nl-input-bar input::placeholder {
            color: #64748B !important;
        }

        .wc-nl-submit-btn {
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            background: #1A62FF !important;
            color: #FFFFFF !important;
            border: none !important;
            border-radius: 999px !important;
            padding: 13px 26px !important;
            font-size: 14.5px !important;
            font-weight: 750 !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
            transition: all 0.25s ease !important;
            box-shadow: 0 0 20px rgba(26, 98, 255, 0.55) !important;
        }

        .wc-nl-submit-btn:hover {
            background: #0052FF !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 0 28px rgba(26, 98, 255, 0.85) !important;
        }

        .wc-nl-privacy {
            display: flex !important;
            align-items: center !important;
            gap: 9px !important;
            color: #64748B !important;
            font-size: 13px !important;
            margin-top: 14px !important;
            padding-left: 10px !important;
        }

        @media (max-width: 991px) {
            .wc-nl-banner-card {
                flex-direction: column !important;
                align-items: stretch !important;
                padding: 32px 24px !important;
                gap: 22px !important;
                height: auto !important;
                min-height: 0 !important;
            }

            .wc-nl-content-col,
            .wc-nl-action-col {
                width: 100% !important;
                max-width: 100% !important;
                flex: 0 0 auto !important;
                height: auto !important;
                min-height: 0 !important;
                margin: 0 !important;
            }

            .wc-nl-form {
                width: 100% !important;
                margin: 0 !important;
            }

            .wc-nl-title {
                font-size: 28px !important;
                margin-bottom: 10px !important;
            }
        }

        @media (max-width: 580px) {
            .wc-nl-banner-card {
                padding: 24px 18px !important;
                border-radius: 20px !important;
                margin: 15px 0 35px !important;
                gap: 18px !important;
                box-sizing: border-box !important;
                height: auto !important;
                min-height: 0 !important;
            }

            .wc-nl-content-col,
            .wc-nl-action-col {
                width: 100% !important;
                max-width: 100% !important;
                flex: 0 0 auto !important;
                height: auto !important;
                min-height: 0 !important;
            }

            .wc-nl-title {
                font-size: clamp(22px, 6vw, 26px) !important;
                line-height: 1.25 !important;
            }

            .wc-nl-desc {
                font-size: 14px !important;
                line-height: 1.55 !important;
            }

            .wc-nl-input-bar {
                flex-direction: column !important;
                border-radius: 16px !important;
                padding: 14px 14px !important;
                gap: 12px !important;
                align-items: stretch !important;
                box-sizing: border-box !important;
            }

            .wc-nl-input-bar input {
                width: 100% !important;
                font-size: 14.5px !important;
                padding: 6px 0 !important;
            }

            .wc-nl-submit-btn {
                justify-content: center !important;
                width: 100% !important;
                border-radius: 12px !important;
                padding: 13px 20px !important;
                font-size: 14.5px !important;
                font-weight: 700 !important;
            }

            .wc-nl-privacy {
                padding-left: 0 !important;
                font-size: 12px !important;
            }
        }

        /* NAVIGATION LINK COLUMNS */
        .footer .links-row {
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 28px !important;
            padding: 44px 0 !important;
            border-bottom: 1px solid rgba(26, 98, 255, 0.18) !important;
        }

        .footer .link-col h4 {
            color: #FFFFFF !important;
            font-size: 16px !important;
            font-weight: 750 !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            margin: 0 0 18px !important;
            letter-spacing: -0.01em !important;
        }

        .footer .link-col h4 .ic {
            color: #1A62FF !important;
            font-size: 16px !important;
        }

        .footer .link-col ul {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
        }

        .footer .link-col ul li a {
            color: #94A3B8 !important;
            font-size: 14.5px !important;
            text-decoration: none !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            transition: all 0.22s ease !important;
        }

        .footer .link-col ul li a::before {
            content: "›" !important;
            color: #1A62FF !important;
            font-size: 16px !important;
            line-height: 1 !important;
            transition: transform 0.2s ease !important;
        }

        .footer .link-col ul li a:hover {
            color: #38BDF8 !important;
            transform: translateX(4px) !important;
            text-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
        }

        .footer .link-col ul li a:hover::before {
            transform: translateX(2px) !important;
            color: #38BDF8 !important;
        }
        .footer .link-col ul li .sign {
    color: #94A3B8 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.22s ease !important;
}
.footer .link-col ul li .sign::before {
    content: "›" !important;
    color: #1A62FF !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
}

        /* GLOBAL OFFICES (Blue & Black Cards) */
        .footer .offices-row {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 24px !important;
            padding: 44px 0 24px !important;
        }

        .footer .office-card {
            flex: 1 1 calc(25% - 24px) !important;
            min-width: 250px !important;
            background: linear-gradient(180deg, rgba(12, 20, 42, 0.8) 0%, rgba(6, 10, 22, 0.95) 100%) !important;
            border: 1px solid rgba(26, 98, 255, 0.24) !important;
            border-radius: 18px !important;
            padding: 26px !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
            backdrop-filter: blur(10px) !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .footer .office-card:hover {
            border-color: #1A62FF !important;
            transform: translateY(-5px) !important;
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 28px rgba(26, 98, 255, 0.28) !important;
            background: linear-gradient(180deg, rgba(16, 26, 56, 0.9) 0%, rgba(8, 14, 28, 0.98) 100%) !important;
        }

        .footer .office-head {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            margin-bottom: 16px !important;
        }

        .footer .office-title {
            color: #FFFFFF !important;
            font-size: 17px !important;
            font-weight: 750 !important;
        }

        .footer .office-card h5 {
            color: #38BDF8 !important;
            font-size: 15px !important;
            font-weight: 650 !important;
            margin: 0 0 14px !important;
            transition: color 0.2s ease !important;
        }

        .footer .office-card a:hover h5 {
            color: #60A5FA !important;
            text-decoration: underline !important;
        }

        .footer .office-line {
            color: #94A3B8 !important;
            font-size: 13.5px !important;
            line-height: 1.6 !important;
            display: flex !important;
            align-items: flex-start !important;
            gap: 10px !important;
            margin-bottom: 12px !important;
        }

        .footer .office-line .ic {
            color: #1A62FF !important;
            font-size: 16px !important;
            flex-shrink: 0 !important;
        }

        .footer .office-line .ic i {
            color: #1A62FF !important;
        }

        .footer .office-email {
            margin-top: auto !important;
        }

        .footer .office-email a {
            color: #E2E8F0 !important;
            text-decoration: none !important;
            transition: color 0.2s ease !important;
        }

        .footer .office-email a:hover {
            color: #38BDF8 !important;
            text-decoration: underline !important;
        }

        .footer .remote-list {
            padding-left: 18px !important;
            margin: 0 0 12px !important;
            color: #94A3B8 !important;
            font-size: 13.5px !important;
        }

        .footer .remote-list li {
            margin-bottom: 4px !important;
        }

        /* CERTIFICATIONS ROW */
        .footer .certs-row {
            display: flex !important;
            align-items: center !important;
            justify-content: space-around !important;
            flex-wrap: wrap !important;
            gap: 24px !important;
            background: rgba(8, 14, 30, 0.65) !important;
            border: 1px solid rgba(26, 98, 255, 0.2) !important;
            border-radius: 18px !important;
            padding: 22px 32px !important;
            margin: 18px 0 36px !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
        }

        .footer .cert-item img {
            max-height: 48px !important;
            width: auto !important;
            filter: brightness(0.95) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
            transition: all 0.25s ease !important;
        }

        .footer .cert-item:hover img {
            filter: brightness(1.15) drop-shadow(0 0 12px rgba(26, 98, 255, 0.5)) !important;
            transform: scale(1.05) !important;
        }

        /* BOTTOM CONTACTS & SOCIALS */
        .footer .bottom-row {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 24px !important;
            flex-wrap: wrap !important;
            padding: 28px 0 !important;
            border-top: 1px solid rgba(26, 98, 255, 0.18) !important;
        }

        .footer .bottom-contacts {
            display: flex !important;
            gap: 28px !important;
            flex-wrap: wrap !important;
        }

        .footer .bottom-contact {
            display: flex !important;
            align-items: center !important;
            gap: 14px !important;
        }

        .footer .bottom-contact .ic-box {
            width: 44px !important;
            height: 44px !important;
            border-radius: 12px !important;
            background: rgba(26, 98, 255, 0.14) !important;
            border: 1px solid rgba(26, 98, 255, 0.32) !important;
            color: #38BDF8 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 19px !important;
            box-shadow: 0 0 14px rgba(26, 98, 255, 0.25) !important;
        }

        .footer .bottom-contact .label {
            color: #64748B !important;
            font-size: 12px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            margin-bottom: 2px !important;
        }

        .footer .bottom-contact .value a {
            color: #FFFFFF !important;
            font-weight: 650 !important;
            font-size: 14.5px !important;
            text-decoration: none !important;
            transition: color 0.2s ease !important;
        }

        .footer .bottom-contact .value a:hover {
            color: #38BDF8 !important;
            text-decoration: underline !important;
        }

        .footer .hire-on-logo img {
            max-height: 42px !important;
            border-radius: 8px !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
        }

        .footer .socials {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }

        .footer .socials span {
            color: #94A3B8 !important;
            font-size: 13.5px !important;
            margin-right: 6px !important;
        }

        .footer .social-ic {
            width: 38px !important;
            height: 38px !important;
            border-radius: 50% !important;
            background: rgba(14, 22, 46, 0.9) !important;
            border: 1px solid rgba(26, 98, 255, 0.3) !important;
            color: #FFFFFF !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            text-decoration: none !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .footer .social-ic:hover {
            background: #1A62FF !important;
            border-color: #1A62FF !important;
            color: #FFFFFF !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 0 18px rgba(26, 98, 255, 0.75) !important;
        }

        /* COPYRIGHT ROW */
        .footer .copyright-row {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 20px !important;
            flex-wrap: wrap !important;
            padding: 24px 0 8px !important;
            border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
            color: #64748B !important;
            font-size: 13.5px !important;
        }

        .footer .copyright-row b {
            color: #CBD5E1 !important;
        }

        .footer .legal-links {
            display: flex !important;
            gap: 20px !important;
        }

        .footer .legal-links a {
            color: #94A3B8 !important;
            text-decoration: none !important;
            transition: color 0.2s ease !important;
        }

        .footer .legal-links a:hover {
            color: #38BDF8 !important;
            text-decoration: underline !important;
        }

        @media (max-width: 1024px) {
            .footer .links-row {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            .footer .office-card {
                flex: 1 1 calc(50% - 24px) !important;
            }

            .footer .brand-col {
                border-right: none !important;
            }
        }

        @media (max-width: 680px) {
            footer.footer {
                padding: 45px 18px 20px !important;
            }

            .footer .cta-banner {
                padding: 24px 20px !important;
            }

            .footer .cta-actions {
                width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 10px !important;
            }

            .footer .cta-actions .btn,
            .footer .cta-actions .btn-primary,
            .footer .cta-actions .btn-outline {
                border-radius: 8px !important; /* very less curve on phone */
                width: 100% !important;
                justify-content: center !important;
                text-align: center !important;
                padding: 13px 20px !important;
            }

            .footer .links-row {
                grid-template-columns: 1fr !important;
                gap: 32px !important;
            }

            .footer .office-card {
                flex: 1 1 100% !important;
            }

            .footer .bottom-row {
                flex-direction: column !important;
                align-items: flex-start !important;
            }

            .footer .copyright-row {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 12px !important;
            }
        }

        /* ==========================================================================
           HERO SECTION: VERTICAL AUTO-MOVING AWARDS TICKER (RIGHT COLUMN)
           ========================================================================== */
        .hero-awards-vertical-wrapper {
            position: absolute !important;
            top: 50% !important;
            right: 48px !important;
            transform: translateY(-50%) !important;
            width: 290px !important;
            height: 480px !important;
            overflow: hidden !important;
            z-index: 20 !important;
            pointer-events: auto !important;
            -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 14%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.9) 86%, transparent 100%) !important;
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 14%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.9) 86%, transparent 100%) !important;
        }

        .hero-awards-track {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
            animation: awardsVerticalScroll 20s linear infinite !important;
            will-change: transform !important;
        }

        .hero-awards-vertical-wrapper:hover .hero-awards-track {
            animation-play-state: paused !important;
        }

        @keyframes awardsVerticalScroll {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(calc(-50% - 8px));
            }
        }

        /* Base Award Card */
        .hero-award-card {
            background: transparent !important;
            border: none !important;
            border-radius: 18px !important;
            width: 100% !important;
            min-height: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
            transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, filter 0.35s ease !important;
            cursor: pointer !important;
            user-select: none !important;
            overflow: hidden !important;
        }

        .hero-award-card img {
            width: 100% !important;
            height: auto !important;
            display: block !important;
            border-radius: 18px !important;
            pointer-events: none !important;
            transition: transform 0.35s ease, filter 0.35s ease !important;
        }

        .hero-award-card:hover {
            transform: scale(1.05) translateX(-4px) !important;
            box-shadow: 0 20px 42px rgba(0, 0, 0, 0.85), 0 0 30px rgba(212, 175, 55, 0.38) !important;
            filter: brightness(1.08) !important;
        }

        /* Responsive Hero Awards */
        @media (max-width: 1280px) {
            .hero-awards-vertical-wrapper {
                right: 24px !important;
                width: 260px !important;
                height: 440px !important;
            }
        }

        @media (max-width: 991px) {
            .hero-awards-vertical-wrapper {
                display: none !important;
            }
        }
    
        /* ==========================================================================
           COLLAPSIBLE AI SERVICES ACCORDION IN MOBILE HAMBURGER MENU
           ========================================================================== */
        .mobile-menu-item-group {
            border-radius: 14px !important;
            background: rgba(14, 24, 48, 0.45) !important;
            border: 1px solid rgba(56, 189, 248, 0.22) !important;
            overflow: hidden !important;
            margin: 4px 0 8px !important;
            transition: all 0.25s ease !important;
        }

        .mobile-group-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 13px 16px !important;
            cursor: pointer !important;
            user-select: none !important;
            background: rgba(255, 255, 255, 0.03) !important;
        }

        .mobile-group-label {
            font-family: var(--font-head) !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            color: #38bdf8 !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
        }

        .mobile-group-arrow {
            color: #38bdf8 !important;
            font-size: 13px !important;
            transition: transform 0.25s ease !important;
        }

        .mobile-menu-item-group.open .mobile-group-arrow {
            transform: rotate(180deg) !important;
        }

        .mobile-submenu-panel {
            display: flex !important;
            flex-direction: column !important;
            gap: 6px !important;
            padding: 8px 10px 12px 10px !important;
            border-top: 1px solid rgba(56, 189, 248, 0.12) !important;
        }

        .mobile-menu-item-group:not(.open) .mobile-submenu-panel {
            display: none !important;
        }

        .mobile-sub-link {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 9px 12px !important;
            border-radius: 10px !important;
            color: #cbd5e1 !important;
            text-decoration: none !important;
            background: rgba(255, 255, 255, 0.02) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            transition: all 0.2s ease !important;
        }

        .mobile-sub-link:hover,
        .mobile-sub-link:active {
            background: rgba(0, 102, 255, 0.2) !important;
            border-color: rgba(56, 189, 248, 0.4) !important;
            color: #ffffff !important;
            transform: translateX(3px) !important;
        }

        .mobile-sub-link i {
            font-size: 18px !important;
            width: 26px !important;
            text-align: center !important;
            flex-shrink: 0 !important;
        }

        .mobile-sub-link div {
            display: flex !important;
            flex-direction: column !important;
            line-height: 1.25 !important;
        }

        .mobile-sub-link strong {
            font-family: var(--font-head) !important;
            font-size: 13.5px !important;
            color: #ffffff !important;
            font-weight: 600 !important;
        }

        .mobile-sub-link span {
            font-size: 11px !important;
            color: #94a3b8 !important;
            margin-top: 2px !important;
        }

        .mobile-sub-link.highlight-overview {
            background: rgba(18, 107, 255, 0.14) !important;
            border-color: rgba(56, 189, 248, 0.3) !important;
        }

        .mobile-sub-link.highlight-overview strong {
            color: #38bdf8 !important;
        }

    
        /* GLOBAL FOOTER: REMOVE UNDERLINES FROM ALL LINKS */
        footer a, footer a:hover,
        .footer a, .footer a:hover,
        .footer .office-email a, .footer .office-email a:hover,
        .footer .bottom-contact .value a, .footer .bottom-contact .value a:hover,
        .footer .legal-links a, .footer .legal-links a:hover,
        .footer .link-col ul li a, .footer .link-col ul li a:hover {
            text-decoration: none !important;
        }

        /* ==========================================================================
           FIXED BOTTOM COOKIE CONSENT BANNER (Modern Glassmorphic floating banner)
           ========================================================================== */
        #cookieConsent.cookie-consent {
            position: fixed !important;
            bottom: 24px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: calc(100% - 32px) !important;
            max-width: 760px !important;
            background: rgba(10, 16, 32, 0.95) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(56, 189, 248, 0.3) !important;
            border-radius: 16px !important;
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 102, 255, 0.25) !important;
            padding: 16px 22px !important;
            z-index: 99999 !important;
            color: #f1f5f9 !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 14px !important;
            transition: all 0.3s ease !important;
        }

        #cookieConsent .cookie-text {
            font-weight: 500 !important;
            color: #e2e8f0 !important;
            line-height: 1.5 !important;
        }

        #cookieConsent #acceptCookies {
            background: linear-gradient(135deg, #0066ff, #00d2ff) !important;
            border: none !important;
            font-weight: 600 !important;
            padding: 8px 18px !important;
            border-radius: 8px !important;
            color: #ffffff !important;
            box-shadow: 0 4px 14px rgba(0, 102, 255, 0.4) !important;
            transition: all 0.2s ease !important;
        }

        #cookieConsent #acceptCookies:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 18px rgba(0, 102, 255, 0.5) !important;
        }

        #cookieConsent #declineCookies {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            font-weight: 600 !important;
            padding: 8px 16px !important;
            border-radius: 8px !important;
            color: #cbd5e1 !important;
            transition: all 0.2s ease !important;
        }

        #cookieConsent #declineCookies:hover {
            background: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
        }

        @media (max-width: 576px) {
            #cookieConsent.cookie-consent {
                bottom: 12px !important;
                width: calc(100% - 20px) !important;
                padding: 14px 16px !important;
            }
            .industry-info-container {
    position: relative;
    min-height: 185px;
}
.orbit-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    background: linear-gradient(90deg, rgba(0, 135, 210, 0.1), rgba(0, 60, 150, 0.08));
    border: 1px solid rgba(0, 135, 210, 0.25);
    margin-bottom: 24px;
}
.orbit-eyebrow-badge span.text {
    
    font-size: 0.7rem;
}
        }