:root {
            --primary: #38bdf8;
            --dark: #09090b;
        }

        body {
            background-color: var(--dark);
            color: #fff;
            overflow-x: hidden;
        }

        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .glass-card {
            background: rgba(24, 24, 27, 0.6);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(56, 189, 248, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .glass-card:hover {
            border-color: var(--primary);
            box-shadow: 0 0 30px rgba(56, 189, 248, 0.15);
            transform: translateY(-5px);
        }

        #hero-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .custom-cursor {
            width: 20px;
            height: 20px;
            border: 2px solid var(--primary);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease;
            transform: translate(-50%, -50%);
        }

        .custom-cursor.active {
            width: 50px;
            height: 50px;
            background: rgba(56, 189, 248, 0.1);
            border-width: 1px;
        }

        @media (max-width: 1024px) {
            .custom-cursor { display: none; }
        }

        .text-glow {
            text-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
        }

        .btn-primary {
            background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
            box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            box-shadow: 0 6px 25px rgba(56, 189, 248, 0.5);
            transform: scale(1.02);
        }

        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
            display: flex;
        }

        .marquee-content {
            display: flex;
            animation: marquee 40s linear infinite;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .animate-bounce-slow {
            animation: bounce-slow 4s infinite ease-in-out;
        }

        @keyframes bounce-slow {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Testimonial & Logo Marquees */
        .marquee-section {
            overflow: hidden;
            padding: 80px 0;
            background: rgba(24, 24, 27, 0.3);
        }

        .marquee-track {
            display: flex;
            gap: 30px;
            width: max-content;
            animation: scroll-left 60s linear infinite;
        }

        .marquee-track:hover {
            animation-play-state: paused;
        }

        .logo-track {
            animation: scroll-left 40s linear infinite;
        }

        @keyframes scroll-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .testimonial-card {
            width: 400px;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(56, 189, 248, 0.1);
            padding: 40px;
            border-radius: 32px;
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
        }

        .testimonial-card:hover {
            border-color: var(--primary);
            background: rgba(56, 189, 248, 0.05);
            transform: translateY(-10px);
        }

        .client-logo-card {
            height: 100px;
            width: 200px;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .client-logo-card img {
            max-height: 100%;
            max-width: 100%;
            filter: none;
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        .client-logo-card:hover img {
            opacity: 1;
            transform: scale(1.1);
        }

        /* Mobile Responsiveness Tweaks */
        @media (max-width: 768px) {
            .testimonial-card {
                width: 300px;
                padding: 25px;
            }
            .client-logo-card {
                width: 150px;
                height: 80px;
            }
            h1 {
                font-size: 3.5rem !important;
            }
            .marquee-track {
                gap: 15px;
            }
        }
        
        .nav-link {
            color: #ffffff !important;
            font-weight: 700 !important;
        }

        /* Content Styling */
        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            background: rgba(56, 189, 248, 0.1);
            border: 1px solid rgba(56, 189, 248, 0.2);
            color: var(--primary);
            font-size: 0.875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1.5rem;
        }
    
        .client-logo-card {
            background: #ffffff !important;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 180px;
            height: 100px;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }
        .client-logo-card img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: brightness(1) contrast(1);
        }
        .hc-card {
            background: #ffffff !important;
            padding: 20px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 120px;
        }
        .hc-card img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

/* Modern Premium Logo Enhancement */
        .client-logo-card, .hc-card {
            background-color: #ffffff !important;
            border-radius: 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: hidden !important;
            padding: 12px !important;
            transition: all 0.3s ease !important;
            border: 1px solid rgba(0,0,0,0.05) !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
            width: 180px;
            height: 100px;
            flex-shrink: 0;
            margin: 0 10px;
        }
        .client-logo-card img, .hc-card img {
            max-width: 85% !important;
            max-height: 85% !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
            display: block !important;
            margin: auto !important;
            opacity: 1;
            transition: opacity 0.5s ease;
        }
        .empty-card {
            opacity: 0.1 !important;
            background: #ffffff !important;
            border: 1px dashed rgba(0,0,0,0.1) !important;
        }

/* High-End Professional Logo Styling */
        .client-logo-card {
            background-color: #ffffff !important;
            border-radius: 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: hidden !important;
            padding: 12px !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            border: 1px solid rgba(0,0,0,0.05) !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
            width: 180px !important;
            height: 100px !important;
            flex-shrink: 0 !important;
            margin: 0 12px !important;
        }
        .client-logo-card:hover {
            transform: translateY(-8px) scale(1.02) !important;
            box-shadow: 0 20px 30px rgba(0,0,0,0.1) !important;
            border-color: #38bdf8 !important;
        }
        .client-logo-card img {
            max-width: 85% !important;
            max-height: 85% !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
            display: block !important;
            opacity: 1;
            transition: opacity 0.6s ease, transform 0.4s ease !important;
            filter: brightness(1.02) contrast(1.02) !important;
        }
        .client-logo-card:hover img {
            transform: scale(1.05) !important;
        }
        .empty-card {
            opacity: 0.08 !important;
            background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%) !important;
            border: 1px dashed rgba(0,0,0,0.1) !important;
        }
    
        /* FAQ */
        .faq-item { border:1px solid rgba(56,189,248,.1); border-radius:16px; padding:24px 28px; margin-bottom:16px; background:rgba(24,24,27,.5); backdrop-filter:blur(8px); cursor:pointer; transition:all .3s; }
        .faq-item:hover { border-color:rgba(56,189,248,.3); }
        .faq-item h3 { font-size:1rem; font-weight:700; color:#fff; margin:0; display:flex; justify-content:space-between; align-items:center; gap:16px; }
        .faq-item h3::after { content:'+'; color:var(--primary); font-size:1.4rem; font-weight:300; flex-shrink:0; }
        .faq-item.open h3::after { content:''−''; }
        .faq-item p { color:#9ca3af; font-size:.9rem; line-height:1.7; margin:16px 0 0; display:none; }
        .faq-item.open p { display:block; }

html { background-color: #04111e !important; }
        body { background-color: #04111e !important; }
        #bg-video {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
        }
        nav, main, footer, .custom-cursor {
            position: relative;
            z-index: 1;
        }
        .min-h-screen { background: rgba(4, 12, 28, 0.45) !important; }
        .bg-dark-lighter { background-color: rgba(5, 10, 22, 0.82) !important; }
        section { background: rgba(4, 10, 20, 0.75) !important; }
        section.min-h-screen { background: rgba(4, 12, 28, 0.45) !important; }
        .glass-card { background: rgba(6,14,30,0.88) !important; border-color: rgba(60,120,255,0.18) !important; }
        .glass-card:hover { border-color: rgba(80,160,255,0.55) !important; box-shadow: 0 0 35px rgba(40,100,255,0.20) !important; }
        /* Grey text → white on dark video background */
        .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600,
        .text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600,
        .text-zinc-300,  .text-zinc-400,  .text-zinc-500,  .text-zinc-600,
        .text-neutral-300, .text-neutral-400, .text-neutral-500 {
            color: #ffffff !important;
        }
        }