: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 {
            display: 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;
            }
        }
        .logo-white-bg {
            background-color: white !important;
            padding: 10px;
            border-radius: 12px;
            display: inline-block;
        }
        
        /* Ensure navigation text is white/bold for contrast on the dark background */
        .nav-link {
            color: #ffffff !important;
            font-weight: 700 !important;
        }
    
        .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;
        }
    
        /* 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; }

.pre-ring {
            position: relative;
            width: 130px;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
        }

        .pre-ring svg {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            animation: pre-rotate 2s linear infinite;
        }

        .pre-ring svg circle {
            fill: none;
            stroke: url(#preGrad);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 280;
            stroke-dashoffset: 60;
        }

        @keyframes pre-rotate {
            0%   { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .pre-logo-box {
            width: 90px;
            height: 90px;
            background: #ffffff;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            box-shadow: 0 0 40px rgba(56, 189, 248, 0.25);
            animation: pre-pulse 2s ease-in-out infinite;
        }

        .pre-logo-box img {
            width: 70px;
            height: auto;
        }

        @keyframes pre-pulse {
            0%, 100% { box-shadow: 0 0 30px rgba(56,189,248,0.2); }
            50%       { box-shadow: 0 0 60px rgba(56,189,248,0.5); }
        }

        .pre-name {
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.5);
            margin-bottom: 20px;
        }

        .pre-bar-wrap {
            width: 180px;
            height: 3px;
            background: rgba(56,189,248,0.12);
            border-radius: 9999px;
            overflow: hidden;
        }

        .pre-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #38bdf8, #0ea5e9);
            border-radius: 9999px;
            animation: pre-fill 2.2s ease forwards;
        }

        @keyframes pre-fill {
            0%   { width: 0%; }
            60%  { width: 75%; }
            100% { width: 100%; }
        }

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

/* ================================================
           HRS — Plexus Network Theme
           Reference: index.mp4 — animated polygon mesh
           Deep blue gradient + white node network
        ================================================ */

        /* All content layers sit above the fixed bg video */
        nav, main, footer, .custom-cursor {
            position: relative;
            z-index: 1;
        }

        /* Dark base so no white flash before video loads */
        html { background-color: #04111e !important; }
        body { background-color: #04111e !important; }

        /* Hero section — semi-transparent so video shows clearly */
        .min-h-screen {
            background: rgba(4, 12, 28, 0.45) !important;
        }

        /* Other sections — darker overlay for text readability */
        .bg-dark-lighter {
            background-color: rgba(5, 10, 22, 0.82) !important;
        }

        /* Standard sections */
        section {
            background: rgba(4, 10, 20, 0.75) !important;
        }
        section.min-h-screen {
            background: rgba(4, 12, 28, 0.45) !important;
        }

        /* Nav glass */
        .glass {
            background: rgba(4,10,22,0.82) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border-color: rgba(80,140,255,0.15) !important;
        }

        /* Cards */
        .glass-card {
            background: rgba(6,14,30,0.88) !important;
            border-color: rgba(60,120,255,0.18) !important;
            backdrop-filter: blur(10px) !important;
        }
        .glass-card:hover {
            border-color: rgba(80,160,255,0.55) !important;
            background: rgba(10,30,80,0.50) !important;
            box-shadow:
                0 0 0 1px rgba(80,160,255,0.30),
                0 0 35px rgba(40,100,255,0.20),
                0 24px 60px rgba(0,0,0,0.75) !important;
            transform: translateY(-6px) !important;
        }
        .glass-card:hover .w-16.h-16,
        .glass-card:hover .w-14.h-14 {
            box-shadow: 0 0 26px rgba(80,160,255,0.60) !important;
        }

        /* Primary blue */
        .text-primary       { color: #5ba3ff !important; }
        .border-primary     { border-color: #3d8bff !important; }
        .bg-primary         { background-color: #3d8bff !important; }
        .bg-primary\/10     { background-color: rgba(61,139,255,0.10) !important; }
        .bg-primary\/20     { background-color: rgba(61,139,255,0.20) !important; }
        .border-primary\/20 { border-color: rgba(61,139,255,0.20) !important; }
        .text-primary\/20   { color: rgba(61,139,255,0.20) !important; }
        .from-primary       { --tw-gradient-from: #3d8bff !important; }
        .to-primary         { --tw-gradient-to:   #3d8bff !important; }
        .via-primary        { --tw-gradient-via:  #3d8bff !important; }

        /* Hero heading glow */
        .text-glow {
            color: #ffffff !important;
            text-shadow:
                0 0 20px rgba(80,160,255,0.60),
                0 0 60px rgba(40,100,255,0.30) !important;
        }

        /* Buttons */
        .btn-primary {
            background: linear-gradient(135deg, #3d8bff 0%, #1a5fd4 100%) !important;
            box-shadow: 0 4px 25px rgba(61,139,255,0.50) !important;
        }
        .btn-primary:hover {
            box-shadow: 0 8px 45px rgba(61,139,255,0.75) !important;
            transform: translateY(-2px) scale(1.02) !important;
        }

        /* Cursor */
        .custom-cursor        { border-color: #3d8bff !important; }
        .custom-cursor.active { background: rgba(61,139,255,0.14) !important; }

        /* Nav underline */
        .nav-link::after { background: #3d8bff !important; }

        .pre-logo-box {
            box-shadow:
                0 0 50px rgba(61,139,255,0.55),
                0 0 100px rgba(26,95,212,0.30) !important;
        }
        #preGrad stop:first-child { stop-color: #5ba3ff !important; }
        #preGrad stop:last-child  { stop-color: #1a5fd4 !important; }

        /* Stats strip */
        .py-12.bg-dark-lighter.border-y {
            border-color: rgba(61,139,255,0.12) !important;
        }

        /* Testimonials */
        .testimonial-card {
            background: rgba(6,14,30,0.88) !important;
            border-color: rgba(61,139,255,0.16) !important;
        }
        .testimonial-card:hover {
            border-color: rgba(80,160,255,0.55) !important;
            background: rgba(10,30,80,0.50) !important;
            box-shadow:
                0 0 0 1px rgba(80,160,255,0.28),
                0 0 35px rgba(40,100,255,0.16),
                0 22px 55px rgba(0,0,0,0.70) !important;
            transform: translateY(-8px) !important;
        }

        /* FAQ */
        .faq-item {
            background: rgba(6,14,30,0.85) !important;
            border-color: rgba(61,139,255,0.14) !important;
        }
        .faq-item:hover { border-color: rgba(80,160,255,0.42) !important; }
        .faq-item h3::after { color: #3d8bff !important; }

        /* CTA box */
        .glass.rounded-\[40px\] {
            background: rgba(10,25,70,0.55) !important;
            border-color: rgba(61,139,255,0.20) !important;
        }

        /* Form focus */
        input:focus, select:focus, textarea:focus {
            border-color: #3d8bff !important;
            box-shadow: 0 0 0 2px rgba(61,139,255,0.20) !important;
            outline: none !important;
        }

        /* Footer */
        footer { background-color: #04111e !important; }
        footer a:hover { color: #5ba3ff !important; }
        footer .glass:hover {
            border-color: #3d8bff !important;
            box-shadow: 0 0 20px rgba(61,139,255,0.32) !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;
        }