:root{--primary:#38bdf8;--dark:#09090b;}
body{background-color:var(--dark);color:#fff;overflow-x:hidden;}
.glass{background:rgba(255,255,255,.03);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05);}
.glass-card{background:rgba(24,24,27,.6);backdrop-filter:blur(8px);border:1px solid rgba(56,189,248,.1);transition:all .4s cubic-bezier(.4,0,.2,1);}
.glass-card:hover{border-color:var(--primary);box-shadow:0 0 30px rgba(56,189,248,.15);transform:translateY(-5px);}
.btn-primary{background:linear-gradient(135deg,#38bdf8,#0ea5e9);box-shadow:0 4px 15px rgba(56,189,248,.3);transition:all .3s ease;}
.btn-primary:hover{box-shadow:0 6px 25px rgba(56,189,248,.5);transform:scale(1.02);}
.nav-link{position:relative;color:#fff!important;font-weight:700!important;}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary);transition:width .3s ease;}
.nav-link:hover::after{width:100%;}
.custom-cursor{width:20px;height:20px;border:2px solid var(--primary);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transition:transform .1s ease,width .3s ease,height .3s ease;transform:translate(-50%,-50%);}
.custom-cursor.active{width:50px;height:50px;background:rgba(56,189,248,.1);border-width:1px;}
@media(max-width:1024px){.custom-cursor{display:none;}}
.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:380px;flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid rgba(56,189,248,.1);padding:36px;border-radius:28px;transition:all .4s ease;}
.testimonial-card:hover{border-color:var(--primary);transform:translateY(-8px);}
.client-logo-card{height:90px;width:180px;flex-shrink:0;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;padding:16px;border-radius:16px;}
.client-logo-card img{max-height:100%;max-width:100%;opacity:.8;transition:all .3s;}
.client-logo-card:hover img{opacity:1;transform:scale(1.1);}
.faq-item{border:1px solid rgba(56,189,248,.1);border-radius:16px;padding:22px 26px;margin-bottom:14px;background:rgba(24,24,27,.5);cursor:pointer;transition:all .3s;}
.faq-item:hover{border-color:rgba(56,189,248,.3);}
.faq-item h3{font-size:.95rem;font-weight:700;color:#fff;margin:0;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-item h3::after{content:'+';color:var(--primary);font-size:1.3rem;font-weight:300;flex-shrink:0;}
.faq-item.open h3::after{content:'−';}
.faq-item p{color:#9ca3af;font-size:.88rem;line-height:1.7;margin:14px 0 0;display:none;}
.faq-item.open p{display:block;}
.form-input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 18px;width:100%;color:#fff;outline:none;transition:border-color .3s;}
.form-input:focus{border-color:var(--primary);}
.form-input::placeholder{color:#6b7280;}

/* 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;
        }

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