: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%;
        }

        .step-number {
            font-family: 'Inter', sans-serif;
            -webkit-text-stroke: 1px rgba(56, 189, 248, 0.3);
            color: transparent;
            font-size: 8rem;
            line-height: 1;
            font-weight: 900;
            position: absolute;
            top: -2rem;
            right: -1rem;
            opacity: 0.1;
            z-index: 0;
        }

.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;
        }

/* Testimonial Marquee */
        .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; }
        @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); }
        @media (max-width: 768px) { .testimonial-card { width: 300px; padding: 25px; } .marquee-track { gap: 15px; } }
    
        /* 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;
        }
        #bg-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background: rgba(0, 0, 0, 0.60);
            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;
        }
        }