/* CYBERPUNK PHANTOM LIBERTY THEME 
   Accent Colors: Neon Cyan & Deep Crimson
*/

/* 1. Glassmorphism for all widget and service cards */
.dark .bg-white\/5, 
.dark .bg-white\/10,
.dark .bg-gray-800 {
    background-color: rgba(12, 12, 18, 0.55) !important; /* Dark, semi-transparent base */
    backdrop-filter: blur(6px) !important; /* Soft background blur */
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(0, 240, 255, 0.15) !important; /* Faint cyan resting border */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8) !important; /* Deep drop shadow for depth */
    transition: all 0.3s ease-in-out !important;
}

/* 2. Cyberpunk Hover Effect - Shifts from Cyan to Neon Red */
.dark .hover\:bg-white\/10:hover, 
.dark .bg-gray-800:hover,
a:hover .bg-white\/5 {
    background-color: rgba(20, 20, 25, 0.7) !important;
    border-color: rgba(255, 0, 60, 0.7) !important; /* Neon red/magenta border on hover */
    box-shadow: 0 0 15px rgba(255, 0, 60, 0.3) !important; /* Crimson glow */
    transform: translateY(-2px);
}

/* 3. Text Legibility - Adds a subtle shadow to text so it pops against bright parts of the image */
.dark p, 
.dark h1, 
.dark h2, 
.dark h3, 
.dark span {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

/* 4. Custom Cyberpunk Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(10, 10, 15, 0.5); 
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.4); /* Cyan scrollbar */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 0, 60, 0.8); /* Turns red when you grab it */
}