: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: border-color 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 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); }

    .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,background .3s ease,border-width .3s ease; transform:translate(-50%,-50%); }
    .custom-cursor.active { background:rgba(56,189,248,.1); border-width:1px; }
    @media(max-width:1024px){.custom-cursor{display:none;}}

    .btn-primary { background: linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%); 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; }
    .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%; }
    .nav-link { color:#ffffff !important; font-weight:700 !important; }

    /* Marquee */
    .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 */
    .testimonial-card { width:400px; flex-shrink:0; background:rgba(255,255,255,.03); border:1px solid rgba(56,189,248,.1); padding:40px; border-radius:32px; backdrop-filter:blur(10px); transition:all .4s ease; }
    .testimonial-card:hover { border-color:var(--primary); background:rgba(56,189,248,.05); transform:translateY(-10px); }

    /* Client logo */
    .client-logo-card { height:100px; width:200px; 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:20px; border-radius:20px; transition:all .3s ease; }
    .client-logo-card img { max-height:100%; max-width:100%; filter:none; opacity:.8; transition:all .3s ease; }
    .client-logo-card:hover img { opacity:1; transform:scale(1.1); }

    /* Service card icon */
    .srv-icon { width:64px; height:64px; border-radius:16px; background:rgba(56,189,248,.1); display:flex; align-items:center; justify-content:center; font-size:1.75rem; color:var(--primary); margin-bottom:1.5rem; transition:background-color .5s, color .5s; will-change: background-color, color; transform: translateZ(0); }
    .glass-card:hover .srv-icon { background:var(--primary); color:#09090b; }

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

    @media(max-width:768px){
        .testimonial-card{width:300px;padding:25px;}
        .client-logo-card{width:150px;height:80px;}
    }

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

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

        /* Quick Answer table: centered, aligned columns */
        .quick-answer-table {
            width: auto;
            margin-left: auto;
            margin-right: auto;
        }
        .quick-answer-table th:first-child,
        .quick-answer-table td:first-child {
            width: auto;
            white-space: nowrap;
            vertical-align: top;
            padding-right: 4rem;
        }
        .quick-answer-table td {
            padding-top: 14px;
            padding-bottom: 14px;
            padding-left: 1rem;
        }
        .quick-answer-table th {
            text-align: left;
            padding-left: 1rem;
        }
        .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;
        }
        }