/* KOJIE AI - CYBERPUNK VISUAL THEME */
/* Phase 5: Complete Cyberpunk Visual Enhancement System */

:root {
    /* Enhanced Cyberpunk Color Variables - Dark Purple to Black Theme */
    --cyber-primary: #9d4edd;
    --cyber-primary-rgb: 157, 78, 221;
    --cyber-secondary: #7b2cbf;
    --cyber-secondary-rgb: 123, 44, 191;
    --cyber-accent: #c77dff;
    --cyber-accent-rgb: 199, 125, 255;
    --cyber-warning: #ffff00;
    --cyber-warning-rgb: 255, 255, 0;
    --cyber-danger: #ff3030;
    --cyber-danger-rgb: 255, 48, 48;
    
    /* Enhanced Dark Purple to Black Background Colors for Desktop */
    --cyber-bg-primary: rgba(0, 0, 0, 0.98);
    --cyber-bg-secondary: rgba(25, 15, 40, 0.95);
    --cyber-bg-tertiary: rgba(40, 20, 60, 0.9);
    
    /* ENHANCED Desktop-optimized RICH PURPLE gradients */
    --cyber-bg-gradient-desktop: linear-gradient(135deg, 
        rgba(35, 8, 70, 0.98) 0%,
        rgba(60, 25, 100, 0.96) 20%,
        rgba(80, 35, 120, 0.94) 40%,
        rgba(65, 25, 95, 0.95) 60%,
        rgba(45, 15, 75, 0.97) 80%,
        rgba(15, 5, 35, 0.98) 100%
    );
    
    /* REDUCED Mobile PURPLE gradients - Less intense for phones */
    --cyber-bg-gradient-mobile: linear-gradient(180deg,
        rgba(20, 12, 35, 0.94) 0%,
        rgba(15, 8, 28, 0.92) 50%,
        rgba(8, 3, 18, 0.96) 100%
    );
    
    /* Enhanced Text Colors with Purple Tints */
    --cyber-text-primary: #ffffff;
    --cyber-text-secondary: rgba(199, 125, 255, 0.9);
    --cyber-text-muted: rgba(157, 78, 221, 0.7);
    --cyber-text-neon: var(--cyber-primary);
}

/* ENHANCED RICH PURPLE Body Background with Desktop-Optimized Gradients */
body {
    background: var(--cyber-bg-gradient-mobile);
    min-height: 100vh;
    transition: background 0.3s ease;
    /* Add extra purple saturation overlay */
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(157, 78, 221, 0.08) 0%,
        transparent 50%,
        rgba(123, 44, 191, 0.06) 100%
    );
    pointer-events: none;
    z-index: -1;
}

/* ENHANCED Desktop purple gradients for screens 768px and larger */
@media (min-width: 768px) {
    body {
        background: var(--cyber-bg-gradient-desktop);
        background-attachment: fixed;
    }
    
    /* Extra purple saturation overlay for desktop */
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, 
            rgba(157, 78, 221, 0.12) 0%,
            rgba(199, 125, 255, 0.08) 25%,
            transparent 50%,
            rgba(123, 44, 191, 0.10) 75%,
            rgba(157, 78, 221, 0.15) 100%
        );
        pointer-events: none;
        z-index: -1;
    }
    
    /* Enhanced gradient for larger desktops */
    @media (min-width: 1200px) {
        body {
            background: linear-gradient(135deg, 
                rgba(70, 25, 120, 0.99) 0%,
                rgba(95, 40, 140, 0.97) 10%,
                rgba(115, 60, 170, 0.95) 20%,
                rgba(130, 75, 190, 0.96) 30%,
                rgba(105, 50, 160, 0.97) 40%,
                rgba(85, 35, 130, 0.98) 50%,
                rgba(65, 25, 105, 0.98) 60%,
                rgba(50, 20, 85, 0.99) 70%,
                rgba(35, 15, 65, 0.99) 80%,
                rgba(25, 10, 45, 0.99) 90%,
                rgba(15, 5, 30, 0.99) 100%
            );
            background-attachment: fixed;
        }
    }
}

/* Cyberpunk Text Classes */
.cyber-text-primary {
    color: var(--cyber-text-primary) !important;
}

.cyber-text-secondary {
    color: var(--cyber-text-secondary) !important;
}

.cyber-text-muted {
    color: var(--cyber-text-muted) !important;
}

.cyber-text-neon {
    color: var(--cyber-primary) !important;
    text-shadow: 
        0 0 5px rgba(var(--cyber-primary-rgb), 1.0),
        0 0 10px rgba(var(--cyber-primary-rgb), 0.8),
        0 0 15px rgba(var(--cyber-primary-rgb), 0.6),
        0 0 20px rgba(var(--cyber-primary-rgb), 0.4),
        0 0 25px rgba(var(--cyber-primary-rgb), 0.2);
}

/* Cyberpunk Glow Box */
.cyber-glow-box {
    background: linear-gradient(135deg, 
        rgba(var(--cyber-primary-rgb), 0.1), 
        rgba(var(--cyber-secondary-rgb), 0.05)
    );
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 15px rgba(var(--cyber-primary-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4045s cubic-bezier(0.618, 0, 0.382, 1); /* Golden ratio timing */
}

.cyber-glow-box:hover {
    border-color: rgba(var(--cyber-primary-rgb), 0.5);
    box-shadow: 
        0 8px 25px rgba(var(--cyber-primary-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Cyberpunk Border */
.cyber-border {
    border: 2px solid var(--cyber-primary) !important;
    box-shadow: 0 0 15px rgba(var(--cyber-primary-rgb), 0.4) !important;
}

/* Cyberpunk Navbar Theming */
.cyber-navbar {
    background: var(--cyber-bg-secondary) !important;
    border-bottom: 2px solid var(--cyber-primary) !important;
    box-shadow: 0 2px 10px rgba(var(--cyber-primary-rgb), 0.3) !important;
}

.cyber-navbar .navbar-brand {
    color: var(--cyber-text-primary) !important;
    text-shadow: 0 0 10px rgba(var(--cyber-primary-rgb), 0.5);
    font-weight: bold !important;
}

.cyber-navbar .navbar-brand:hover {
    color: var(--cyber-primary) !important;
    text-shadow: 0 0 15px rgba(var(--cyber-primary-rgb), 0.8);
}

.cyber-navbar .navbar-brand .text-muted {
    color: var(--cyber-text-secondary) !important;
}

.cyber-navbar .navbar-nav .nav-link {
    color: var(--cyber-text-primary) !important;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500 !important;
    background: transparent !important;
    background-color: transparent !important;
}

.cyber-navbar .navbar-nav .nav-link:hover {
    color: var(--cyber-primary) !important;
    text-shadow: 0 0 8px rgba(var(--cyber-primary-rgb), 0.6);
}

.cyber-navbar .navbar-nav .nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyber-primary), transparent);
    animation: cyber-glow 0.3s ease;
}

.cyber-navbar .dropdown-menu {
    background: var(--cyber-bg-secondary) !important;
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--cyber-primary-rgb), 0.2) !important;
}

.cyber-navbar .dropdown-item {
    color: var(--cyber-text-primary) !important;
    transition: all 0.3s ease;
    font-weight: 500 !important;
    background: transparent !important;
    background-color: transparent !important;
}

.cyber-navbar .dropdown-item:hover {
    background: rgba(var(--cyber-primary-rgb), 0.1) !important;
    color: var(--cyber-primary) !important;
}

@keyframes cyber-glow {
    0% { opacity: 0; transform: scaleX(0); }
    100% { opacity: 1; transform: scaleX(1); }
}

/* Cyberpunk Buttons */
.btn-cyber-primary {
    background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-accent));
    border: none;
    color: #000000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 
        0 0 10px rgba(var(--cyber-primary-rgb), 0.5),
        0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.4045s cubic-bezier(0.618, 0, 0.382, 1); /* Golden ratio timing */
    padding: calc(0.5rem * 1.618) 1rem; /* Golden ratio padding */
}

.btn-cyber-primary:hover {
    background: linear-gradient(135deg, var(--cyber-accent), var(--cyber-primary));
    box-shadow: 
        0 0 15px rgba(var(--cyber-primary-rgb), 0.8),
        0 6px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
    color: #000000;
}

.btn-cyber-secondary {
    background: transparent;
    border: 2px solid var(--cyber-primary);
    color: var(--cyber-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-cyber-secondary:hover {
    background: var(--cyber-primary);
    color: #000000;
    box-shadow: 0 0 15px rgba(var(--cyber-primary-rgb), 0.6);
    transform: translateY(-2px);
}

/* Cyberpunk Cards */
.cyber-card {
    background: var(--cyber-bg-secondary);
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.cyber-card:hover {
    border-color: rgba(var(--cyber-primary-rgb), 0.5);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(var(--cyber-primary-rgb), 0.2);
    transform: translateY(-5px);
}

/* Cyberpunk Metric Cards */
.cyber-metric-card {
    background: rgba(var(--cyber-primary-rgb), 0.05);
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.cyber-metric-card:hover {
    background: rgba(var(--cyber-primary-rgb), 0.1);
    border-color: rgba(var(--cyber-primary-rgb), 0.4);
    box-shadow: 0 0 15px rgba(var(--cyber-primary-rgb), 0.3);
}

/* Cyberpunk Icon Circle */
.cyber-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        rgba(var(--cyber-primary-rgb), 0.2), 
        rgba(var(--cyber-accent-rgb), 0.1)
    );
    border: 2px solid rgba(var(--cyber-primary-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cyber-icon-circle:hover {
    border-color: rgba(var(--cyber-primary-rgb), 0.6);
    box-shadow: 0 0 20px rgba(var(--cyber-primary-rgb), 0.4);
}

/* Cyberpunk Underline */
.cyber-underline {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--cyber-primary), var(--cyber-accent));
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(var(--cyber-primary-rgb), 0.6);
}

/* Cyberpunk Pulse Animation */
.cyber-pulse {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cyber-primary);
    animation: cyber-pulse 2s infinite;
    box-shadow: 0 0 10px rgba(var(--cyber-primary-rgb), 0.8);
}

@keyframes cyber-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Cyberpunk Service Cards */
.cyber-service-card {
    background: var(--cyber-bg-secondary);
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.2);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    height: 100%;
}

.cyber-service-card:hover {
    border-color: rgba(var(--cyber-primary-rgb), 0.5);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(var(--cyber-primary-rgb), 0.2);
    transform: translateY(-5px);
}

.cyber-service-icon {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: linear-gradient(135deg, 
        rgba(var(--cyber-primary-rgb), 0.2), 
        rgba(var(--cyber-accent-rgb), 0.1)
    );
    border: 2px solid rgba(var(--cyber-primary-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Cyberpunk Process Steps */
.cyber-step {
    background: var(--cyber-bg-secondary);
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.cyber-step:hover {
    border-color: rgba(var(--cyber-primary-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--cyber-primary-rgb), 0.2);
}

.cyber-step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-accent));
    color: #000000;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 0 15px rgba(var(--cyber-primary-rgb), 0.5);
}

/* Cyberpunk Portfolio Items */
.cyber-portfolio-item {
    background: var(--cyber-bg-secondary);
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.2);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.cyber-portfolio-item:hover {
    border-color: rgba(var(--cyber-primary-rgb), 0.5);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(var(--cyber-primary-rgb), 0.2);
    transform: translateY(-5px);
}

/* Cyberpunk Badges */
.badge-cyber-primary {
    background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-accent)) !important;
    color: #000000 !important;
    font-weight: 600;
    text-shadow: none;
}

.badge-cyber-secondary {
    background: transparent !important;
    border: 1px solid var(--cyber-primary);
    color: var(--cyber-primary) !important;
}

/* Dark Background Sections */
.cyber-section-dark {
    background: var(--cyber-bg-primary);
    color: var(--cyber-text-primary);
}

.cyber-section-gradient {
    background: linear-gradient(135deg, 
        rgba(var(--cyber-primary-rgb), 0.1), 
        rgba(var(--cyber-secondary-rgb), 0.1),
        rgba(0, 0, 0, 0.9)
    );
    color: var(--cyber-text-primary);
}

/* AI Reply Message Styling */
.message-ai, 
.ai-message,
.assistant-message {
    background: var(--cyber-bg-secondary) !important;
    color: var(--cyber-text-primary) !important;
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.2) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.message-ai p,
.ai-message p,
.assistant-message p {
    color: var(--cyber-text-secondary) !important;
    margin-bottom: 0.5rem;
}

.message-ai code,
.ai-message code,
.assistant-message code {
    background: rgba(var(--cyber-primary-rgb), 0.1) !important;
    color: var(--cyber-primary) !important;
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.2) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
}

.message-ai pre,
.ai-message pre,
.assistant-message pre {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.3) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    color: var(--cyber-text-primary) !important;
}

/* User Message Styling */
.message-user,
.user-message {
    background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-accent)) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 0 15px rgba(var(--cyber-primary-rgb), 0.4) !important;
}

/* NUCLEAR WHITE BACKGROUND ELIMINATION SYSTEM */
/* This section COMPLETELY eliminates ALL white backgrounds across the entire platform */

/* Stage 1: Global Nuclear Override - EVERY Element */
*,
*::before,
*::after,
html,
body,
main,
section,
div,
article,
aside,
footer,
header,
nav,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row,
.col,
[class*="col-"],
.content,
.main-content,
.page-content,
.wrapper,
.content-wrapper,
.page-wrapper,
.site-wrapper,
.main-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* Stage 2: Bootstrap White Classes Nuclear Override */
.bg-white,
.bg-light,
.bg-info,
.bg-secondary,
.bg-success,
.bg-warning,
.bg-danger,
.bg-primary,
.bg-dark,
.bg-transparent,
body.bg-light,
html.bg-light,
body.bg-white,
html.bg-white {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cyber-text-primary) !important;
}

/* Stage 3: ALL Component Nuclear Override */
.card,
.card-body,
.card-header,
.card-footer,
/* Lead Capture & Modal Cyberpunk Styling */
.modal,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.dropdown-menu,
.dropdown-item,
.list-group,
.list-group-item,
.table,
.table td,
.table th,
.table-striped,
.table-hover,
.form-control,
.form-select,
.form-check,
.btn,
.btn-light,
.btn-outline-light,
.alert,
.navbar,
.navbar-light,
.nav-tabs,
.nav-pills,
.breadcrumb,
.pagination,
.pagination .page-link,
.progress,
.badge,
.badge.bg-light,
.toast,
.popover,
.tooltip,
.tooltip-inner,
.offcanvas,
.accordion,
.carousel,
.jumbotron,
.hero-section,
.masthead,
.banner {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cyber-text-primary) !important;
}

/* Stage 4: Inline Style Nuclear Override */
[style*="background: white"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background-color: #fff"],
[style*="background: #ffffff"],
[style*="background-color: #ffffff"],
[style*="background: rgb(255"],
[style*="background-color: rgb(255"],
div[style*="background: white"],
section[style*="background: white"],
article[style*="background: white"],
header[style*="background: white"],
main[style*="background: white"],
aside[style*="background: white"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Stage 5: Text Color Override for Dark Text on Transparent Backgrounds */
.text-dark,
.text-black,
.text-muted,
.text-secondary {
    color: var(--cyber-text-primary) !important;
}
.text-body,
.card-text {
    color: var(--cyber-text-primary) !important;
}

/* Stage 6: Lead Capture Modal Cyberpunk Enhancement */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.8) !important;
}

.modal .modal-content {
    background: var(--cyber-bg-secondary, rgba(20, 20, 30, 0.95)) !important;
    border: 2px solid var(--cyber-primary, #9d4edd) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 30px rgba(157, 78, 221, 0.4) !important;
}

.modal .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(157, 78, 221, 0.3) !important;
    color: var(--cyber-text-primary, #ffffff) !important;
}

.modal .modal-body {
    background: transparent !important;
    color: var(--cyber-text-primary, #ffffff) !important;
}

.modal .modal-title {
    color: var(--cyber-primary, #9d4edd) !important;
    text-shadow: 0 0 10px rgba(157, 78, 221, 0.5) !important;
}

.modal .form-control,
.modal .form-select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(157, 78, 221, 0.5) !important;
    color: var(--cyber-text-primary, #ffffff) !important;
    border-radius: 8px !important;
}

.modal .form-control:focus,
.modal .form-select:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: var(--cyber-primary, #9d4edd) !important;
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.3) !important;
    color: var(--cyber-text-primary, #ffffff) !important;
}

.modal .form-label {
    color: var(--cyber-text-primary, #ffffff) !important;
}

.modal .form-check-input {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(157, 78, 221, 0.5) !important;
}

.modal .form-check-label {
    color: var(--cyber-text-primary, #ffffff) !important;
}

/* ========================================
   FORM CHECKBOX FIX - ENSURE CLICKABILITY
   ======================================== */

/* Ensure all checkboxes are clickable and visible */
.form-check-input {
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(var(--cyber-primary-rgb), 0.6) !important;
    border-radius: 4px !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-top: 0.125rem !important;
    cursor: pointer !important;
}

/* Hover state for checkboxes */
.form-check-input:hover {
    border-color: var(--cyber-primary) !important;
    box-shadow: 0 0 5px rgba(var(--cyber-primary-rgb), 0.5) !important;
}

/* Checked state with cyberpunk styling */
.form-check-input:checked {
    background-color: var(--cyber-primary) !important;
    border-color: var(--cyber-primary) !important;
    box-shadow: 0 0 10px rgba(var(--cyber-primary-rgb), 0.8) !important;
}

/* Focus state for accessibility */
.form-check-input:focus {
    border-color: var(--cyber-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--cyber-primary-rgb), 0.25) !important;
}

/* Prevent pseudo-elements from blocking clicks */
.form-check-label::before,
.form-check-label::after {
    pointer-events: none !important;
}

/* Ensure parent container allows interactions */
.form-check {
    pointer-events: auto !important;
    cursor: pointer !important;
    margin-bottom: 0.75rem !important;
}

/* Ensure labels are clickable and styled */
.form-check-label {
    color: var(--cyber-text-secondary) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    margin-left: 0.5rem !important;
    user-select: none !important;
}

/* Hover effect for the whole checkbox area */
.form-check:hover .form-check-label {
    color: var(--cyber-text-primary) !important;
}

/* Cyber card styling for checkbox containers */
.cyber-card .form-check {
    position: relative !important;
    z-index: 5 !important;
}

.modal .btn-close {
    filter: brightness(0) invert(1) !important;
    background: none !important;
    border: none !important;
}

.text-muted,
.text-secondary {
    color: var(--cyber-text-muted) !important;
}

/* Specific White Background Patterns */
[style*="background: white"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background-color: #fff"],
[style*="background: #ffffff"],
[style*="background-color: #ffffff"],
div[style*="background: white"],
section[style*="background: white"] {
    background: var(--cyber-bg-secondary) !important;
    background-color: var(--cyber-bg-secondary) !important;
    color: var(--cyber-text-primary) !important;
}

/* Ensure All Text is Visible */
* {
    color: inherit;
}

/* Force Dark Theme on All Elements */
*:not(.cyber-text-neon):not(.text-info):not(.text-success):not(.text-warning):not(.text-danger):not(.cyber-text-primary):not(.cyber-text-secondary) {
    color: var(--cyber-text-primary);
}

/* Section and Container Background */
section,
.container,
.container-fluid,
.row,
.col,
[class*="col-"],
main,
.main-content,
.content {
    background-color: transparent !important;
}

/* Hero Section Fix - Dark Purple to Black Gradient */
.hero-section {
    background: linear-gradient(135deg, var(--cyber-bg-secondary) 0%, var(--cyber-bg-primary) 100%) !important;
    color: var(--cyber-text-primary) !important;
}

/* Body and HTML Fix - Dark Purple to Black Gradient */
body,
html {
    background: linear-gradient(135deg, var(--cyber-bg-secondary) 0%, var(--cyber-bg-primary) 100%) !important;
    color: var(--cyber-text-primary) !important;
}

/* ENHANCED PURPLE MENU STYLING - Remove White Overlays */
.navbar,
.navbar-nav,
.nav-link,
.dropdown-menu,
.dropdown-item,
.navbar-collapse,
.navbar-brand {
    background: linear-gradient(135deg, 
        rgba(45, 20, 85, 0.15) 0%,
        rgba(30, 15, 60, 0.1) 50%,
        rgba(20, 10, 45, 0.12) 100%
    ) !important;
    background-color: rgba(35, 15, 70, 0.1) !important;
    border-radius: 6px !important;
}

/* Keep navbar-toggler (hamburger menu) visible */
.navbar-toggler {
    background: rgba(var(--cyber-primary-rgb), 0.1) !important;
    border: 1px solid var(--cyber-primary, #9d4edd) !important;
    border-radius: 4px !important;
    padding: 0.25rem 0.5rem !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 10px rgba(var(--cyber-primary-rgb), 0.5) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ENHANCED PURPLE MENU BACKGROUNDS - Override Bootstrap white backgrounds */
.nav-link:hover,
.nav-link:focus,
.dropdown-item:hover,
.dropdown-item:focus {
    background: linear-gradient(145deg, 
        rgba(80, 35, 120, 0.85) 0%,
        rgba(60, 25, 100, 0.8) 50%,
        rgba(45, 20, 85, 0.82) 100%
    ) !important;
    background-color: rgba(75, 30, 110, 0.8) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(157, 78, 221, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
}

/* Force dark theme on all navbar elements */
.cyber-navbar *,
.cyber-navbar .navbar-nav *,
.cyber-navbar .dropdown-menu * {
    color: var(--cyber-text-primary) !important;
}

/* Enhanced Mobile Responsive Adjustments with Purple Gradients */
@media (max-width: 768px) {
    /* REDUCED MOBILE PURPLE BACKGROUNDS - Gentler for phones */
    body {
        background: linear-gradient(135deg, 
            rgba(15, 8, 28, 0.98) 0%,
            rgba(25, 15, 45, 0.96) 25%,
            rgba(35, 20, 60, 0.94) 50%,
            rgba(25, 12, 40, 0.96) 75%,
            rgba(12, 5, 25, 0.98) 100%
        ) !important;
        background-attachment: fixed !important;
    }
    
    /* Reduced Mobile Container Gradients - Subtler for phones */
    .container,
    .container-fluid {
        background: linear-gradient(180deg, 
            rgba(var(--cyber-primary-rgb), 0.03) 0%,
            transparent 50%,
            rgba(var(--cyber-secondary-rgb), 0.02) 100%
        ) !important;
        border-radius: 0.75rem;
        padding: 1.5rem 1rem !important;
    }
    
    /* Enhanced Mobile Card Backgrounds */
    .cyber-glow-box {
        padding: 1.5rem !important;
        background: linear-gradient(135deg, 
            rgba(var(--cyber-primary-rgb), 0.15),
            rgba(var(--cyber-secondary-rgb), 0.1),
            rgba(var(--cyber-accent-rgb), 0.05)
        ) !important;
        border: 2px solid rgba(var(--cyber-primary-rgb), 0.4) !important;
        box-shadow: 
            0 8px 32px rgba(var(--cyber-primary-rgb), 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    
    .cyber-service-card, 
    .cyber-portfolio-item {
        padding: 1.5rem;
        background: linear-gradient(145deg, 
            rgba(var(--cyber-primary-rgb), 0.12),
            rgba(var(--cyber-secondary-rgb), 0.08),
            rgba(25, 15, 40, 0.95)
        ) !important;
        border: 1px solid rgba(var(--cyber-primary-rgb), 0.3) !important;
        border-radius: 1rem !important;
        box-shadow: 
            0 6px 20px rgba(var(--cyber-primary-rgb), 0.2),
            0 0 15px rgba(var(--cyber-accent-rgb), 0.1) !important;
    }
    
    /* Enhanced Mobile Section Backgrounds */
    .cyber-section-dark,
    .cyber-section-gradient,
    .section {
        background: linear-gradient(135deg, 
            rgba(0, 0, 0, 0.98) 0%,
            rgba(var(--cyber-secondary-rgb), 0.1) 25%,
            rgba(var(--cyber-primary-rgb), 0.08) 50%,
            rgba(40, 20, 60, 0.95) 75%,
            rgba(0, 0, 0, 0.98) 100%
        ) !important;
        border-top: 1px solid rgba(var(--cyber-primary-rgb), 0.2) !important;
        border-bottom: 1px solid rgba(var(--cyber-primary-rgb), 0.2) !important;
    }
    
    /* Enhanced Mobile Button Gradients */
    .btn-cyber-primary,
    .btn-cyber-secondary {
        background: linear-gradient(145deg, 
            var(--cyber-primary),
            var(--cyber-secondary),
            var(--cyber-accent)
        ) !important;
        box-shadow: 
            0 4px 15px rgba(var(--cyber-primary-rgb), 0.4),
            0 0 20px rgba(var(--cyber-accent-rgb), 0.2) !important;
        padding: 0.75rem 1.5rem !important;
        font-weight: 600 !important;
    }
    
    .cyber-icon-circle,
    .cyber-step-number {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, 
            var(--cyber-primary),
            var(--cyber-secondary)
        ) !important;
        box-shadow: 
            0 4px 15px rgba(var(--cyber-primary-rgb), 0.3),
            0 0 20px rgba(var(--cyber-primary-rgb), 0.1) !important;
    }
    
    /* REDUCED MOBILE PURPLE NAVIGATION - Gentler for phones */
    .navbar-collapse {
        background: linear-gradient(180deg, 
            rgba(40, 20, 70, 0.9) 0%,
            rgba(30, 15, 55, 0.88) 25%,
            rgba(25, 12, 45, 0.9) 50%,
            rgba(20, 10, 38, 0.92) 75%,
            rgba(15, 8, 28, 0.94) 100%
        ) !important;
        border-top: 2px solid rgba(157, 78, 221, 0.8) !important;
        border-radius: 0 0 1rem 1rem !important;
        box-shadow: 
            0 12px 35px rgba(157, 78, 221, 0.5),
            0 0 25px rgba(199, 125, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(20px) !important;
        margin-top: 0.5rem !important;
        padding: 1.5rem !important;
    }
    
    /* Enhanced Mobile Text Glow */
    .cyber-text-neon,
    h1, h2, h3, h4, h5, h6 {
        text-shadow: 
            0 0 8px rgba(var(--cyber-primary-rgb), 0.8),
            0 0 15px rgba(var(--cyber-primary-rgb), 0.5),
            0 0 25px rgba(var(--cyber-primary-rgb), 0.3) !important;
    }
    
    /* Mobile-specific cyberpunk elements */
    .mobile-cyber-gradient {
        background: linear-gradient(135deg, 
            rgba(var(--cyber-primary-rgb), 0.2),
            rgba(var(--cyber-secondary-rgb), 0.15),
            rgba(var(--cyber-accent-rgb), 0.1)
        ) !important;
        border-radius: 1rem !important;
        padding: 1rem !important;
        margin: 0.5rem 0 !important;
        border: 1px solid rgba(var(--cyber-primary-rgb), 0.3) !important;
    }
    
    /* Enhanced Mobile Card Hover Effects */
    .cyber-service-card:hover,
    .cyber-portfolio-item:hover,
    .cyber-glow-box:hover {
        background: linear-gradient(145deg, 
            rgba(var(--cyber-primary-rgb), 0.25),
            rgba(var(--cyber-secondary-rgb), 0.2),
            rgba(var(--cyber-accent-rgb), 0.15)
        ) !important;
        box-shadow: 
            0 12px 40px rgba(var(--cyber-primary-rgb), 0.4),
            0 0 25px rgba(var(--cyber-accent-rgb), 0.3) !important;
        transform: translateY(-5px) !important;
    }
}

/* Enhanced Animation Classes - Golden Ratio Timing */
.cyber-fade-in {
    animation: cyber-fade-in 0.8s cubic-bezier(0.618, 0, 0.382, 1);
}

.cyber-fade-in-fast {
    animation: cyber-fade-in 0.5s cubic-bezier(0.618, 0, 0.382, 1);
}

.cyber-fade-in-slow {
    animation: cyber-fade-in 1.3s cubic-bezier(0.618, 0, 0.382, 1);
}

.cyber-scale-in {
    animation: cyber-scale-in 0.8s cubic-bezier(0.618, 0, 0.382, 1);
}

@keyframes cyber-fade-in {
    from {
        opacity: 0;
        transform: translateY(21px); /* Fibonacci spacing */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cyber-scale-in {
    from {
        opacity: 0;
        transform: scale(0.618); /* Golden ratio inverse */
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cyber-slide-in {
    animation: cyber-slide-in 0.6s ease-out;
}

@keyframes cyber-slide-in {
    from {
        opacity: 0;
        transform: translateX(-21px); /* Fibonacci spacing */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   FIBONACCI BACKGROUND ANIMATION SYSTEM
   Mathematical timing based on golden ratio
   ======================================== */

/* Fibonacci Particle System */
.cyber-background-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.cyber-particle {
    position: absolute;
    background: rgba(var(--cyber-primary-rgb), 0.08);
    border-radius: 50%;
    animation: fibonacci-float cubic-bezier(0.618, 0, 0.382, 1) infinite;
}

.cyber-particle:nth-child(1) { 
    width: 2px; height: 2px; 
    left: 8%; top: 13%; 
    animation-delay: 0s;
    animation-duration: 8s;
}

.cyber-particle:nth-child(2) { 
    width: 3px; height: 3px; 
    left: 21%; top: 34%; 
    animation-delay: 1.3s;
    animation-duration: 13s;
}

.cyber-particle:nth-child(3) { 
    width: 5px; height: 5px; 
    left: 55%; top: 8%; 
    animation-delay: 2.1s;
    animation-duration: 21s;
}

.cyber-particle:nth-child(4) { 
    width: 8px; height: 8px; 
    left: 89%; top: 55%; 
    animation-delay: 3.4s;
    animation-duration: 34s;
}

.cyber-particle:nth-child(5) { 
    width: 1px; height: 1px; 
    left: 34%; top: 89%; 
    animation-delay: 0.8s;
    animation-duration: 5s;
}

@keyframes fibonacci-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.08;
    }
    25% {
        transform: translateY(-21px) rotate(90deg) scale(1.618);
        opacity: 0.15;
    }
    50% {
        transform: translateY(-34px) rotate(180deg) scale(0.618);
        opacity: 0.12;
    }
    75% {
        transform: translateY(-13px) rotate(270deg) scale(1.618);
        opacity: 0.18;
    }
}

/* Golden Spiral Background Animation */
.cyber-golden-spiral {
    position: fixed;
    top: 50%;
    right: 10%;
    width: 144px;
    height: 89px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: -2;
    opacity: 0.02;
    background: conic-gradient(from 0deg, 
        transparent 0deg,
        rgba(var(--cyber-primary-rgb), 0.05) 137.5deg,
        transparent 275deg,
        rgba(var(--cyber-accent-rgb), 0.03) 360deg);
    border-radius: 50%;
    animation: golden-spiral-rotate 89s linear infinite;
}

@keyframes golden-spiral-rotate {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Fibonacci Grid Overlay */
.cyber-fibonacci-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -3;
    opacity: 0.015;
    background-image: 
        linear-gradient(to right, rgba(var(--cyber-primary-rgb), 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--cyber-primary-rgb), 0.08) 1px, transparent 1px);
    background-size: 55px 34px; /* Fibonacci proportions */
    animation: grid-shift 144s ease-in-out infinite;
}

@keyframes grid-shift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(21px, 13px); }
}

/* Enhanced Icon Animations - Golden Ratio Based */
.cyber-icon-enhanced {
    transition: all 0.4045s cubic-bezier(0.618, 0, 0.382, 1); /* Golden ratio timing */
}

.cyber-icon-enhanced:hover {
    transform: scale(1.08) rotate(2deg); /* Subtle golden ratio scaling */
    animation: icon-breathe 2.618s ease-in-out infinite;
}

@keyframes icon-breathe {
    0%, 100% {
        transform: scale(1.08) rotate(2deg);
    }
    50% {
        transform: scale(1.13) rotate(-1deg); /* Golden ratio micro-scaling */
    }
}

/* FINAL RICH PURPLE ENHANCEMENTS - MENU PAGES SPECIAL STYLING */

/* Extra Rich Purple for Main Content Areas */
.main-content, main, .page-content, .content-wrapper {
    background: linear-gradient(145deg, 
        rgba(80, 35, 120, 0.12) 0%,
        rgba(60, 25, 100, 0.08) 25%,
        transparent 50%,
        rgba(45, 20, 85, 0.10) 75%,
        rgba(35, 15, 70, 0.15) 100%
    ) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 30px rgba(157, 78, 221, 0.15) !important;
    backdrop-filter: blur(5px) !important;
}

/* Rich Purple Cards and Sections */
.cyber-glow-box, .card, .section, .resource-section {
    background: linear-gradient(135deg, 
        rgba(75, 35, 115, 0.2) 0%,
        rgba(55, 25, 95, 0.15) 50%,
        rgba(40, 20, 80, 0.18) 100%
    ) !important;
    border: 2px solid rgba(157, 78, 221, 0.3) !important;
    box-shadow: 
        0 8px 32px rgba(157, 78, 221, 0.25),
        0 0 20px rgba(199, 125, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

/* Navigation Rich Purple Enhancement */
.navbar, .nav-pills, .breadcrumb, .pagination {
    background: linear-gradient(135deg, 
        rgba(70, 30, 110, 0.2) 0%,
        rgba(50, 22, 90, 0.15) 50%,
        rgba(35, 15, 70, 0.18) 100%
    ) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(157, 78, 221, 0.2) !important;
}

/* Rich Purple Button Enhancements */
.btn, .btn-primary, .btn-secondary {
    background: linear-gradient(145deg, 
        rgba(157, 78, 221, 1) 0%,
        rgba(123, 44, 191, 1) 50%,
        rgba(199, 125, 255, 0.9) 100%
    ) !important;
    border: 1px solid rgba(199, 125, 255, 0.5) !important;
    box-shadow: 
        0 6px 20px rgba(157, 78, 221, 0.4),
        0 0 15px rgba(199, 125, 255, 0.2) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.btn:hover, .btn-primary:hover, .btn-secondary:hover {
    background: linear-gradient(145deg, 
        rgba(199, 125, 255, 1) 0%,
        rgba(157, 78, 221, 1) 50%,
        rgba(123, 44, 191, 0.9) 100%
    ) !important;
    box-shadow: 
        0 8px 25px rgba(199, 125, 255, 0.5),
        0 0 20px rgba(157, 78, 221, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Staggered animations using Fibonacci delays */
.cyber-stagger-1 { animation-delay: 0.1s; }
.cyber-stagger-2 { animation-delay: 0.2s; }
.cyber-stagger-3 { animation-delay: 0.3s; }
.cyber-stagger-5 { animation-delay: 0.5s; }
.cyber-stagger-8 { animation-delay: 0.8s; }
.cyber-stagger-13 { animation-delay: 1.3s; }
.cyber-stagger-21 { animation-delay: 2.1s; }