/* 1. CUSTOM SYSTEM CURSOR (Safe & Fast) */
/* We encode a custom SVG cursor directly into the CSS so no file upload is needed */
body { 
    background-color: #020617; 
    color: #F8FAFC; 
    overflow-x: hidden;
    
    /* This replaces the standard mouse with a Cyan Tech Pointer */
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/></svg>") 3 3, auto;
}

/* Hide custom cursor effects on touch devices (phones/tablets) */
@media (hover: none) { #cursor { display: none !important; } }

/* ... (Keep your text-glow, slide-up, radar-sweep, packet-dot animations here) ... */
.text-glow { text-shadow: 0 0 30px rgba(59, 130, 246, 0.4); }
.gradient-text { background: linear-gradient(to right, #3B82F6, #8B5CF6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.slide-up { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px); }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

.radar-sweep { background: conic-gradient(from 0deg, transparent 0deg, rgba(59, 130, 246, 0.1) 200deg, rgba(59, 130, 246, 0.8) 360deg); border-radius: 50%; animation: spin 2s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.packet-dot { animation: moveRight 1.5s linear infinite; }
@keyframes moveRight { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* 2. THE GLOWING "TARGET LOCK" (Visual Effect Only) */
/* This follows the mouse but lets the CSS cursor do the clicking */
#cursor { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 30px; 
    height: 30px; 
    border: 1px solid rgba(59, 130, 246, 0.5); /* Blue Ring */
    background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 70%); /* Soft Glow */
    border-radius: 50%; 
    pointer-events: none; /* CRITICAL: Lets you click through it */
    z-index: 9999; 
    transform: translate(-50%, -50%); 
    transition: transform 0.15s ease-out; /* Adds a cool "lag" effect */
    mix-blend-mode: screen; 
}

/* Optional: Add a tiny dot in the center of the glow */
#cursor::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 4px; 
    height: 4px; 
    background: #3B82F6; 
    border-radius: 50%; 
    transform: translate(-50%, -50%); 
    opacity: 0.8;
}

/* ... (Keep the rest of your CSS: tilt-card, holo-grid, etc.) ... */
.tilt-card { position: relative; background: rgba(11, 17, 41, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; }
.tilt-card:hover { border-color: rgba(59, 130, 246, 0.4); transform: translateY(-4px); }

.holo-grid {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0),
        linear-gradient(to right, rgba(59,130,246,0.08), transparent),
        linear-gradient(to bottom, rgba(139,92,246,0.06), transparent);
    background-size: 18px 18px, 100% 100%, 100% 100%;
}

.scanline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.04) 0px,
        rgba(255,255,255,0.04) 1px,
        transparent 2px,
        transparent 6px
    );
    opacity: 0.08;
    pointer-events: none;
}

.glow-border { box-shadow: 0 0 0 1px rgba(59,130,246,0.25), 0 0 40px rgba(59,130,246,0.12); }

.badge { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.badge:hover { border-color: rgba(59,130,246,0.35); }

.mono-chip { border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.35); }

.sticky-cta { position: fixed; right: 20px; bottom: 20px; z-index: 60; }