/* Global SelfHeroes Design System - Enhanced with Dark Neon Theme */
            body {
                font-family: "Inter", sans-serif;
                background-color: #0A0A0A;
                color: #FFFFFF;
                position: relative;
                min-height: 100vh;
            }

            /* Prevent horizontal scroll/jumps */
            html, body { overflow-x: hidden; }
            /* Reserve scrollbar space to prevent layout shift when content height changes */
            html { scrollbar-gutter: stable both-edges; }

            /* Enhanced Global Background Animation - Neon Theme */
            body::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background:
                    radial-gradient(
                        circle at 20% 30%,
                        rgba(59, 130, 246, 0.15) 0%,
                        transparent 40%
                    ),
                    radial-gradient(
                        circle at 80% 70%,
                        rgba(29, 78, 216, 0.12) 0%,
                        transparent 45%
                    ),
                    radial-gradient(
                        circle at 50% 10%,
                        rgba(147, 197, 253, 0.08) 0%,
                        transparent 40%
                    ),
                    radial-gradient(
                        circle at 90% 90%,
                        rgba(194, 65, 255, 0.06) 0%,
                        transparent 35%
                    ),
                    radial-gradient(
                        circle at 10% 80%,
                        rgba(218, 0, 255, 0.05) 0%,
                        transparent 45%
                    );
                background-size:
                    600px 600px,
                    800px 800px,
                    500px 500px,
                    900px 900px,
                    700px 700px;
                animation: globalAmbient 30s ease-in-out infinite;
                pointer-events: none;
                z-index: -10;
            }

            

            @keyframes globalAmbient {
                0%, 100% {
                    transform: translate(0, 0) scale(1) rotate(0deg);
                    opacity: 0.7;
                }
                20% {
                    transform: translate(-15px, -10px) scale(1.03) rotate(1deg);
                    opacity: 0.9;
                }
                40% {
                    transform: translate(10px, -20px) scale(0.97) rotate(-1deg);
                    opacity: 0.5;
                }
                60% {
                    transform: translate(-10px, 15px) scale(1.02) rotate(0.5deg);
                    opacity: 0.8;
                }
                80% {
                    transform: translate(20px, -10px) scale(0.98) rotate(-0.5deg);
                    opacity: 0.6;
                }
            }

            

            /* Global UI Elements - Enhanced with Neon Theme */
            .rajchert-card {
                background: rgba(18, 18, 18, 0.8);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(42, 42, 42, 0.4);
                border-radius: 0.5rem;
                padding: 1.5rem;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }

            .rajchert-card::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 2px;
                background: linear-gradient(90deg, transparent, #60A5FA, #3B82F6, transparent);
                transform: scaleX(0);
                transition: transform 0.3s ease;
            }

            .rajchert-card:hover::before {
                transform: scaleX(1);
            }

            .rajchert-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
                border-color: #60A5FA;
                background: rgba(18, 18, 18, 0.9);
            }

            .rajchert-button {
                background: linear-gradient(90deg, #60A5FA, #3B82F6);
                color: #FFFFFF;
                border: none;
                padding: 0.75rem 1.5rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                font-size: 0.875rem;
                cursor: pointer;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }

            .rajchert-button::before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
                transition: left 0.5s ease;
            }

            .rajchert-button:hover::before {
                left: 100%;
            }

            .rajchert-button:hover {
                background: linear-gradient(90deg, #60A5FA, #3B82F6);
                transform: translateY(-1px);
                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
            }

            .rajchert-button-secondary {
                background: transparent;
                color: #FFFFFF;
                border: 1px solid #2A2A2A;
            }

            .rajchert-button-secondary:hover {
                background: rgba(31, 31, 31, 0.8);
                border-color: #60A5FA;
                box-shadow: 0 0 10px #60A5FA;
                backdrop-filter: blur(5px);
            }

            /* Global text styles - Enhanced with Neon Theme */
            .rajchert-title {
                color: #FFFFFF;
                font-weight: 700;
                letter-spacing: -0.02em;
            }

            .rajchert-subtitle {
                color: #CCCCCC;
                font-weight: 500;
            }

            .rajchert-text {
                color: #CCCCCC;
                line-height: 1.6;
            }

            /* Global input styles - Enhanced with Neon Theme */
            .rajchert-input {
                background: rgba(18, 18, 18, 0.8);
                backdrop-filter: blur(5px);
                border: 1px solid rgba(42, 42, 42, 0.4);
                color: #FFFFFF;
                padding: 0.75rem 1rem;
                border-radius: 0.5rem;
                transition: all 0.3s ease;
            }

            .rajchert-input:focus {
                border-color: #60A5FA;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
                outline: none;
                background: rgba(31, 31, 31, 0.9);
                backdrop-filter: blur(10px);
            }

            .rajchert-input::placeholder {
                color: #888888;
            }

            .mobile-menu {
                position: fixed;
                top: -100vh;
                left: 50%;
                margin-left: -250px; /* Half of max-width for centering */
                width: 95%;
                max-width: 500px;
                max-height: 85vh;
                background: rgba(15, 15, 15, 0.98);
                backdrop-filter: none;
                z-index: 10000;
                transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                           opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                padding: 1.5rem;
                overflow-y: auto;
                display: block;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
                opacity: 0;
                visibility: hidden;
                border-radius: 1.5rem;
                border: 1px solid rgba(96, 165, 250, 0.2);
            }

            .mobile-menu.active {
                top: 1rem;
                opacity: 1;
                visibility: visible;
            }

            /* Simple, stable menu items - no sliding animations */
            .mobile-menu-item {
                opacity: 1;
                transform: none !important;
            }

            /* Force no transforms on all menu elements */
            .mobile-menu button,
            .mobile-menu .mobile-menu-item,
            .mobile-menu .mobile-menu-item > div {
                transform: none !important;
            }

            /* Only allow transform on arrows */
            .mobile-menu svg[id$="-arrow"] {
                transform: rotate(0deg) !important;
                transition: transform 0.3s ease;
            }

            /* Expandable section animations */
            .mobile-section-content {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                           padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                opacity: 0;
            }

            .mobile-section-content.expanded {
                max-height: 800px; /* Enough for content but not full screen */
                opacity: 1;
            }

            /* Better section headers */
            .mobile-section-header {
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                margin-bottom: 1rem;
                padding-bottom: 0.5rem;
            }

            /* Hide mobile menu on desktop - updated to match hamburger breakpoint */
            @media (min-width: 901px) {
                .mobile-menu {
                    display: none !important;
                }
                .mobile-menu.active {
                    display: none !important;
                }
            }

            /* Fix for all mobile sizes - stable positioning */
            @media (max-width: 900px) {
                .mobile-menu {
                    transform: none !important;
                    transition: top 0.3s ease, opacity 0.3s ease !important;
                }
                .mobile-menu.active {
                    transform: none !important;
                }
            }

            /* Better centering for medium mobile */
            @media (max-width: 600px) and (min-width: 481px) {
                .mobile-menu {
                    width: 96% !important;
                    left: 2% !important;
                    margin-left: 0 !important;
                }
            }

            /* Fix for small mobile - ensure no blur effects and perfect centering */
            @media (max-width: 480px) {
                .mobile-menu {
                    background: rgba(18, 18, 18, 1) !important; /* Solid background */
                    backdrop-filter: none !important;
                    width: 90% !important;
                    left: 5% !important;
                    margin-left: 0 !important; /* Reset margin for small screens */
                    max-width: none !important;
                    padding: 1rem !important;
                }
            }

            /* Extra small screens - perfect centering */
            @media (max-width: 360px) {
                .mobile-menu {
                    width: 92% !important;
                    left: 4% !important;
                }
            }
            .overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                backdrop-filter: none; /* Usunąłem blur żeby nie wpływał na mobile menu */
                z-index: 9999;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease;
                display: block;
            }

            .overlay.active {
                opacity: 1;
                visibility: visible;
            }

            /* Hide overlay on desktop */
            @media (min-width: 768px) {
                .overlay {
                    display: none !important;
                }
                .overlay.active {
                    display: none !important;
                    opacity: 0 !important;
                    visibility: hidden !important;
                }
            }

            /* SelfHeroes Navigation Styles - Enhanced with Neon Theme */
            :root { --navbar-height: 64px; }

            /*
              Anchor offset for fixed navbar:
              - Fixes direct loads like "/#contact-form" (no JS needed; browser scrolls correctly)
              - Keeps same-page smooth scroll working without "double scroll" glitches on refresh
            */
            html {
                scroll-padding-top: calc(var(--navbar-height, 64px) + 16px);
            }
            #contact-form {
                scroll-margin-top: calc(var(--navbar-height, 64px) + 16px);
            }
            .rajchert-navbar {
                background: rgba(10, 10, 10, 0.88);
                backdrop-filter: blur(16px);
                border-bottom: 1px solid rgba(42, 42, 42, 0.55);
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 10001;
                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
            }

            /* CSS Grid Layout with better spacing for desktop */
            .navbar-grid {
                display: grid;
                grid-template-columns: 220px 1fr 96px; /* Logo | Menu | User Icon */
                align-items: center;
                gap: 1.5rem;
            }

            /* Responsive grid adjustments */
            @media (max-width: 1400px) {
                .navbar-grid {
                    grid-template-columns: 210px 1fr 88px;
                    gap: 1.25rem;
                }
            }

            @media (max-width: 1200px) {
                .navbar-grid {
                    grid-template-columns: 200px 1fr 80px;
                    gap: 1rem;
                }
            }

            @media (max-width: 1024px) {
                .navbar-grid {
                    grid-template-columns: 190px 1fr 70px;
                    gap: 0.75rem;
                }
            }

            @media (max-width: 900px) {
                .navbar-grid {
                    grid-template-columns: 160px 1fr 60px;
                    gap: 1rem;
                }
            }

            /* Desktop menu - visible by default */
            .desktop-menu {
                display: flex;
            }
            
            .desktop-user-menu {
                display: flex;
            }

            /* Modern mobile layout - starts at 900px for consistent breakpoint */
            @media (max-width: 900px) {
                .navbar-grid {
                    display: flex !important; /* Force flexbox for mobile */
                    justify-content: space-between;
                    align-items: center;
                    min-height: 56px; /* Compact navbar */
                    padding-top: 0.5rem;
                    padding-bottom: 0.5rem;
                    gap: 0.75rem;
                }
                /* Hide desktop menus at 900px */
                .desktop-menu {
                    display: none !important;
                }
                .desktop-user-menu {
                    display: none !important;
                }
                /* Show mobile menu button */
                #mobile-menu-button {
                    display: flex !important;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    height: 48px;
                    width: 48px;
                }
                /* Logo positioning in flex */
                .rajchert-brand {
                    flex-shrink: 0;
                    justify-self: unset;
                    align-self: unset;
                }
            }

            /* Removed old emergency fix - now handled by unified mobile layout at 900px */

            /* Avoid scaling the SVG with transforms (can cause blur + clipping on mobile).
               We control size only via explicit height. */

            /* Removed - now handled by unified 900px breakpoint */
            @media (max-width: 768px) {
                .navbar-grid {
                    grid-template-columns: 1fr auto; /* Logo | Hamburger */
                    gap: 1rem;
                    min-height: 64px; /* Taller for better mobile UX */
                }
            }

            /* Anchor line so dropdown starts exactly at navbar bottom */
            .rajchert-navbar::after {
                content: "";
                position: absolute;
                left: 0; right: 0; bottom: -1px;
                height: 1px;
                background: rgba(42,42,42,0.55);
                pointer-events: none;
            }

            .rajchert-brand {
                display: flex;
                align-items: center;
                gap: 1rem;
                justify-self: start; /* Grid positioning - stick to left */
                overflow: visible;
                /* Grid column 1 - Logo area */
            }

            .brand-logo-link {
                display: flex;
                align-items: center;
                transition: none;
                position: relative;
                padding-bottom: 0;
            }
            
            /* Remove all hover/focus/active effects from logo - keep only link functionality */
            .brand-logo-link,
            .brand-logo-link:hover,
            .brand-logo-link:focus,
            .brand-logo-link:active,
            .brand-logo-link:visited {
                transform: none !important;
                outline: none !important;
                box-shadow: none !important;
                filter: none !important;
                scale: none !important;
                transition: none !important;
                text-decoration: none !important;
            }
            
            .brand-logo-link .brand-logo-nav,
            .brand-logo-link:hover .brand-logo-nav,
            .brand-logo-link:focus .brand-logo-nav,
            .brand-logo-link:active .brand-logo-nav {
                transform: none !important;
                transition: none !important;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) !important;
            }
            
            .brand-logo-link .brand-logo-frame,
            .brand-logo-link:hover .brand-logo-frame,
            .brand-logo-link:focus .brand-logo-frame,
            .brand-logo-link:active .brand-logo-frame {
                transform: none !important;
                transition: none !important;
            }

            .brand-logo-frame {
                height: 48px;
                width: auto;
                max-height: none;
                overflow: visible; /* never crop the brand mark */
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-shrink: 0;
                border-radius: 12px;
                background: transparent;
                backdrop-filter: none;
                border: 0;
                margin-left: 0;
                position: relative;
                left: 0;
                /* allow full column width */
                min-width: 0;
                max-width: none;
            }

            .brand-logo-nav {
                height: 48px;
                width: auto;
                display: block;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
                transform: none;
                transform-origin: left center;
                transition: none;
                flex-shrink: 0;
                mix-blend-mode: normal;
                image-rendering: auto;
                max-width: 100%; /* prevent overflow */
            }

            /* removed empty hover override to satisfy linter */

            /* Minimalist text brand - using Inter instead of Montserrat */
            .brand-logo-text {
                font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
                font-size: 1.5rem;
                font-weight: 600;
                font-feature-settings: "ss01" 1;
                color: #ffffff;
                letter-spacing: 0.06em;
                line-height: 1;
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                text-shadow: none;
            }
            .brand-logo-text .brand-chevron {
                color: #60a5fa;
                font-weight: 900;
                letter-spacing: 0;
            }
            .brand-logo-link:hover .brand-logo-text {
                color: #ffffff;
                text-shadow: none;
            }

            /* subtle static underline accent */
            .brand-logo-link::after { content: none; display: none; }

            /* Responsive scaling for smaller logo base */
            
            /* Large desktop */
            @media (max-width: 1600px) {
                .brand-logo-frame {
                    max-width: 200px;
                }
                .brand-logo-nav {
                    transform: none;
                    height: 46px;
                }
            }

            /* Standard desktop - including 1307px */
            @media (max-width: 1300px) {
                .brand-logo-frame {
                    max-width: 180px;
                }
                .brand-logo-nav {
                    transform: none;
                    height: 44px;
                }
            }

            /* Large laptop */
            @media (max-width: 1100px) {
                .brand-logo-frame {
                    max-width: 170px;
                }
                .brand-logo-nav {
                    transform: none;
                    height: 42px;
                }
            }

            /* Standard laptop */
            @media (max-width: 980px) {
                .brand-logo-frame {
                    max-width: 160px;
                }
                .brand-logo-nav {
                    transform: none;
                    height: 40px;
                }
            }

            /* Mobile layout with larger logo - starts at 850px */
            @media (max-width: 850px) {
                .brand-logo-frame {
                    max-width: 200px; /* Much larger on mobile layout */
                    height: 48px;
                }
                .brand-logo-nav {
                    transform: none;
                    height: 44px;
                }
            }

            /* Tablet and mobile - larger logo since no text menu competition */
            @media (max-width: 768px) {
                .brand-logo-frame {
                    height: 48px;
                    max-height: none;
                    min-width: 160px; /* Larger minimum */
                    max-width: 220px; /* Much larger maximum */
                    border-radius: 10px;
                    background: transparent;
                    border: 0;
                    backdrop-filter: none;
                    margin-left: 0;
                    position: static;
                    left: auto;
                }
                .brand-logo-nav {
                    transform: none;
                    height: 44px;
                }
                .brand-logo-link .brand-logo-nav,
                .brand-logo-link:hover .brand-logo-nav,
                .brand-logo-link:focus .brand-logo-nav,
                .brand-logo-link:active .brand-logo-nav {
                    transform: none !important;
                }
            }

            /* Small mobile - still larger than before */
            @media (max-width: 480px) {
                .rajchert-navbar .max-w-7xl {
                    padding-left: 1rem;
                    padding-right: 1rem;
                }
                .brand-logo-frame {
                    min-width: 140px; /* Larger minimum */
                    max-width: 200px; /* Larger maximum */
                }
                .brand-logo-nav {
                    transform: none;
                    height: 42px;
                }
                .brand-logo-link .brand-logo-nav,
                .brand-logo-link:hover .brand-logo-nav,
                .brand-logo-link:focus .brand-logo-nav,
                .brand-logo-link:active .brand-logo-nav {
                    transform: none !important;
                }
                .mobile-menu {
                    width: 100vw; /* Full width for better UX */
                }
            }

            /* Extra small mobile - reasonable size for tiny screens */
            @media (max-width: 360px) {
                .brand-logo-frame {
                    min-width: 120px; /* Larger minimum */
                    max-width: 180px; /* Larger maximum */
                }
                .brand-logo-nav {
                    transform: none;
                    height: 40px;
                }
                .brand-logo-link .brand-logo-nav,
                .brand-logo-link:hover .brand-logo-nav,
                .brand-logo-link:focus .brand-logo-nav,
                .brand-logo-link:active .brand-logo-nav {
                    transform: none !important;
                }
                .mobile-menu {
                    width: 100vw; /* Full width */
                }
            }

            @media (max-width: 768px) {
                .brand-logo-text {
                    font-size: 1.25rem;
                    letter-spacing: 0.05em;
                }
            }

            .brand-text-container {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .brand-name {
                font-family: 'Inter', monospace;
                font-size: 1.125rem;
                font-weight: 700;
                color: #ffffff;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                line-height: 1;
            }

            .brand-tagline {
                font-size: 0.75rem;
                color: #8b949e;
                font-weight: 400;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                line-height: 1;
            }

            .nav-menu-button {
                color: #ffffff;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                font-size: 1.05rem;
                padding: 1rem 2rem; /* Balanced padding for centered layout */
                border-radius: 0.5rem;
                transition: all 0.2s ease;
                position: relative;
                overflow: hidden;
                white-space: nowrap;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                /* Remove margins - grid layout handles spacing */
            }

            /* Compact user icon button */
            .nav-menu-button svg {
                flex-shrink: 0;
            }

            /* User menu specific styling - more compact */
            [data-target="user"] {
                padding: 0.8rem 1.2rem; /* Smaller padding for icon */
                min-width: 60px;
            }

            /* Responsive nav buttons for flex layout */
            @media (max-width: 1200px) {
                .nav-menu-button {
                    font-size: 0.95rem;
                    padding: 0.9rem 1.8rem;
                }
                .desktop-menu {
                    gap: 1.5rem !important;
                }
            }

            @media (max-width: 1024px) {
                .nav-menu-button {
                    font-size: 0.9rem;
                    padding: 0.8rem 1.5rem;
                }
                .desktop-menu {
                    gap: 1.25rem !important;
                }
            }

            @media (max-width: 900px) {
                .nav-menu-button {
                    font-size: 0.85rem;
                    padding: 0.75rem 1.2rem;
                }
                .desktop-menu {
                    gap: 1rem !important;
                }
            }

            /* Removed - now handled by unified 900px breakpoint */

            .nav-menu-button:hover { background: rgba(96,165,250,0.1); color: #60a5fa; transform: translateY(-1px); }

            .nav-menu-button::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(96,165,250,0.12), transparent); transition:left 0.5s ease; }

            .nav-menu-button:hover::before {
                left: 100%;
            }

            .nav-arrow {
                margin-left: 0.25rem;
                font-size: 0.75rem;
            }

            /* Unified icon style for nav items */
            .nav-icon {
                width: 20px;
                height: 20px;
                margin-right: 10px;
                color: currentColor;
                stroke: currentColor;
                fill: none;
                stroke-width: 2;
                display: inline-block;
                vertical-align: middle;
                flex-shrink: 0;
            }

            .rajchert-dropdown {
                background: rgba(18, 18, 18, 0.95);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(42, 42, 42, 0.6);
                border-radius: 0.75rem;
                box-shadow: 
                    0 8px 32px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(59, 130, 246, 0.1);
                transform-origin: top center;
                overflow: hidden; /* hide scrollbar during animations to prevent flicker on Windows */
                max-height: calc(100vh - 100px); /* sensible initial cap, refined by JS */
                position: relative; /* for ::before pseudo-element positioning */
            }

            .rajchert-nav-item {
                display: flex;
                align-items: center;
                padding: 0.9rem 1.75rem;
                color: #FFFFFF;
                font-weight: 500;
                font-size: 0.95rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                border-bottom: 1px solid rgba(42, 42, 42, 0.3);
                border-left: 3px solid transparent; /* reserve space to avoid width shift */
                transition: all 0.3s ease;
                position: relative;
                box-sizing: border-box; /* include border in width */
            }

            .rajchert-nav-item:hover {
                background: rgba(31, 31, 31, 0.8) !important;
                padding-left: 1.75rem !important; /* keep constant to prevent jump */
                color: #60A5FA !important;
                text-shadow: none !important; /* remove glow that could cause reflow */
                backdrop-filter: none !important; /* remove filter that could cause reflow */
                border-left-color: #60A5FA !important; /* show accent without changing layout */
                transform: none !important; /* no horizontal shift */
            }

            .rajchert-nav-item-disabled {
                display: flex;
                align-items: center;
                padding: 0.9rem 1.75rem;
                color: #666666;
                font-weight: 500;
                font-size: 0.95rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                border-bottom: 1px solid rgba(42, 42, 42, 0.3);
                cursor: not-allowed;
                opacity: 0.5;
                position: relative;
            }

            /* Styl dla elementów "Wkrótce" w navbar */
            .rajchert-nav-item--soon {
                opacity: 0.5;
                pointer-events: none;
                cursor: not-allowed;
            }

            .soon-badge {
                margin-left: auto;
                padding: 2px 10px;
                border-radius: 9999px;
                background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(59, 130, 246, 0.1));
                color: #93c5fd;
                font-size: 0.7rem;
                font-weight: 700;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                border: 1px solid rgba(96, 165, 250, 0.2);
                white-space: nowrap;
            }

            /* Mobile menu "Wkrótce" */
            .mobile-soon-item {
                opacity: 0.5;
                pointer-events: none;
                cursor: not-allowed;
                justify-content: space-between !important;
            }

            .mobile-soon-badge {
                margin-left: auto;
                padding: 2px 8px;
                border-radius: 9999px;
                background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(59, 130, 246, 0.1));
                color: #93c5fd;
                font-size: 0.65rem;
                font-weight: 700;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                border: 1px solid rgba(96, 165, 250, 0.2);
                white-space: nowrap;
            }

            /* Override hover effects for disabled items */
            .rajchert-nav-item-disabled:hover {
                background: rgba(31, 31, 31, 0.3) !important;
                padding-left: 1.5rem !important;
                color: #666666 !important;
                text-shadow: none !important;
                backdrop-filter: none !important;
                border-left: none !important;
                transform: none !important;
                cursor: not-allowed !important;
                box-shadow: none !important;
            }

            /* Additional override for any remaining pink glow */
            .rajchert-nav-item-disabled:hover,
            .rajchert-nav-item-disabled:focus,
            .rajchert-nav-item-disabled:active {
                text-shadow: none !important;
                box-shadow: none !important;
                color: #666666 !important;
            }



            .hamburger-menu {
                position: relative;
                width: 24px;
                height: 18px; /* Zwiększona wysokość dla lepszego spacing */
                cursor: pointer;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }

            .hamburger-line {
                width: 24px;
                height: 2px;
                background: #ffffff;
                border-radius: 1px;
                transition: all 0.3s ease;
                transform-origin: center;
                display: block;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Lepszy kontrast */
            }

            /* Dropdown containers */
            .dropdown-container {
                position: relative;
                border-radius: 0.5rem;
                transition: all 0.2s ease;
                margin: 0;
            }

            /* Anchor helper was used for Narzędzia label - removed */

            /* Mega containers anchor dropdowns; align to their button */
            .dropdown-container--mega { position: relative; }

            /* Override for tools/products: position relative to align panel under its own tab */
            .dropdown-container[data-role="tools"] { position: relative; }
            .dropdown-container[data-role="products"] { position: relative; }

            .dropdown-container:hover {
                background: rgba(59, 130, 246, 0.05);
                border-radius: 0.5rem;
                box-shadow: 0 6px 24px rgba(0,0,0,0.35);
            }
            
            /* Disable hover effects on user dropdown container to prevent layout shifts */
            .dropdown-container[data-role="user"]:hover {
                background: transparent;
                box-shadow: none;
            }

            /* Base state for all dropdowns - hidden */
            .rajchert-dropdown {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(-8px);
                transition: opacity 0.2s ease-out, 
                            transform 0.2s ease-out,
                            visibility 0.2s;
            }

            /* Open state - smooth fade in + slide down animation */
            .dropdown-container.show-dropdown .rajchert-dropdown {
                display: block;
                opacity: 1;
                transform: translateY(0);
                visibility: visible;
                pointer-events: auto;
                transition-delay: 0s;
            }

            /* Fade-in animation for menu headings */
            .dropdown-container.show-dropdown .mega-heading {
                animation: headingFadeIn 0.35s ease-out forwards;
            }
            
            @keyframes headingFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-6px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            /* Main dropdown container fade-in + slide animation */
            .dropdown-container.show-dropdown .rajchert-dropdown {
                animation: dropdownFadeIn 0.3s ease-out forwards;
            }
            
            @keyframes dropdownFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-8px);
                    overflow: hidden; /* keep overflow hidden during animation */
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                    overflow-y: auto; /* enable scroll after animation completes */
                    overflow-x: hidden;
                }
            }
            
            /* Subtle skeleton pulse effect for dropdown background during load */
            .dropdown-container.show-dropdown .rajchert-dropdown::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(96, 165, 250, 0.03) 50%,
                    transparent 100%
                );
                background-size: 200% 100%;
                animation: skeletonPulse 1.2s ease-in-out;
                pointer-events: none;
                border-radius: 0.75rem;
                z-index: -1;
            }
            
            @keyframes skeletonPulse {
                0%, 100% {
                    background-position: -100% 0;
                    opacity: 0;
                }
                50% {
                    background-position: 100% 0;
                    opacity: 1;
                }
            }

            /* Staggered fade-in animation for menu items (all dropdowns) */
            .dropdown-container.show-dropdown .rajchert-nav-item,
            .dropdown-container.show-dropdown .mega-col {
                opacity: 0;
                transform: translateY(8px);
                animation: itemFadeIn 0.3s ease-out forwards;
            }
            
            @keyframes itemFadeIn {
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            /* Staggered delays for items in all menus */
            .dropdown-container.show-dropdown .rajchert-nav-item:nth-child(1),
            .dropdown-container.show-dropdown .mega-col:nth-child(1) .rajchert-nav-item {
                animation-delay: 0.05s;
            }
            .dropdown-container.show-dropdown .rajchert-nav-item:nth-child(2),
            .dropdown-container.show-dropdown .mega-col:nth-child(2) .rajchert-nav-item {
                animation-delay: 0.08s;
            }
            .dropdown-container.show-dropdown .rajchert-nav-item:nth-child(3),
            .dropdown-container.show-dropdown .mega-col:nth-child(3) .rajchert-nav-item {
                animation-delay: 0.11s;
            }
            .dropdown-container.show-dropdown .rajchert-nav-item:nth-child(4),
            .dropdown-container.show-dropdown .mega-col:nth-child(4) .rajchert-nav-item {
                animation-delay: 0.14s;
            }
            .dropdown-container.show-dropdown .rajchert-nav-item:nth-child(5),
            .dropdown-container.show-dropdown .mega-col:nth-child(5) .rajchert-nav-item {
                animation-delay: 0.17s;
            }
            .dropdown-container.show-dropdown .rajchert-nav-item:nth-child(6),
            .dropdown-container.show-dropdown .mega-col:nth-child(6) .rajchert-nav-item {
                animation-delay: 0.20s;
            }
            .dropdown-container.show-dropdown .rajchert-nav-item:nth-child(7),
            .dropdown-container.show-dropdown .mega-col:nth-child(7) .rajchert-nav-item {
                animation-delay: 0.23s;
            }
            .dropdown-container.show-dropdown .rajchert-nav-item:nth-child(8),
            .dropdown-container.show-dropdown .mega-col:nth-child(8) .rajchert-nav-item {
                animation-delay: 0.26s;
            }

            /* User menu gets enhanced animations with bounce */
            .dropdown-container[data-role="user"].show-dropdown .rajchert-dropdown.mega {
                animation: dropdownFadeInBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
            }
            
            @keyframes dropdownFadeInBounce {
                from {
                    opacity: 0;
                    transform: translate(-50%, -16px) scale(0.95);
                    overflow: hidden; /* keep overflow hidden during animation */
                }
                to {
                    opacity: 1;
                    transform: translate(-50%, 0) scale(1);
                    overflow-y: auto; /* enable scroll after animation completes */
                    overflow-x: hidden;
                }
            }

            /* Narzędzia dropdown CSS removed */

            /* Force stable positioning for mega host when open - let JS compute exact left */
            .dropdown-container.show-dropdown #mega-host {
                position: absolute;
                left: 0;
                right: auto;
                transform: none !important;
                will-change: auto;
            }

            /* User menu anchored to its own button (right aligned) */
            .dropdown-container[data-role="user"] { position: relative; }
            .dropdown-container[data-role="user"] .rajchert-dropdown.mega {
                left: 50% !important;
                right: auto;
                transform: translate(-50%, -16px) scale(0.95) !important;
                width: 240px; /* smaller account panel */
                max-width: min(240px, calc(100vw - 24px));
                margin-top: 0;
                padding: 0.5rem 0.5rem !important; /* unified edge padding with tools */
                transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
                            transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                            visibility 0.25s,
                            box-shadow 0.3s ease-out;
                transform-origin: top center;
                backdrop-filter: blur(12px);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            }
            
            /* Enhanced shadow when open */
            .dropdown-container[data-role="user"].show-dropdown .rajchert-dropdown.mega {
                box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
            }

            /* Tools menu positioned under its own tab (left-aligned) */
            .dropdown-container[data-role="tools"] .rajchert-dropdown.mega {
                left: 0;
                right: auto;
                transform: none;
                width: 360px; /* smaller tools panel */
                max-width: min(360px, calc(100vw - 24px));
                margin-top: 0; /* flush with navbar */
                padding: 0.5rem 0.5rem 0rem 0.5rem !important; /* remove trailing gap */
            }

            /* Remove enforced min-height inside tools menu */
            .dropdown-container[data-role="tools"] .mega-fixed { min-height: auto; }

            /* Bigger, clearer item style just for tools */
            .dropdown-container[data-role="tools"] .rajchert-nav-item {
                font-size: 0.95rem;
                padding: 0.6rem 0.9rem;
            }
            .dropdown-container[data-role="tools"] .rajchert-nav-item svg {
                width: 20px;
                height: 20px;
            }

            /* Decorative separators between items in tools */
            .dropdown-container[data-role="tools"] .mega-list li { position: relative; }
            .dropdown-container[data-role="tools"] .mega-list li + li::before {
                content: "";
                display: block;
                height: 1px;
                margin: 6px 0 6px 0;
                background: linear-gradient(90deg, transparent, rgba(96,165,250,0.35), transparent);
            }

            /* Tools heading size aligned with products headings */
            .dropdown-container[data-role="tools"] .mega-heading {
                font-size: 1.02rem;
                letter-spacing: 0.08em;
            }

            /* Larger headings inside "Wszystkie produkty" (e.g., Inne, Low-content) - slightly reduced */
            .dropdown-container[data-role="products"] .mega-heading {
                font-size: 1.02rem;
                letter-spacing: 0.08em;
            }

            /* Responsive adjustments for user menu positioning */
            /* Media overrides no longer needed for user right offset */

            /* Hide divider line in user menu (single column) */
            .dropdown-container[data-role="user"] .mega-cols::after {
                display: none;
            }

            /* Hide divider line in tools menu (single column) */
            .dropdown-container[data-role="tools"] .mega-cols::after {
                display: none;
            }

            /* Left-align content in user menu for better UX */
            .dropdown-container[data-role="user"] .mega-col {
                text-align: left;
                padding: 0.5rem 0.75rem; /* unified with tools */
            }

            .dropdown-container[data-role="user"] .rajchert-nav-item {
                justify-content: flex-start;
                padding: 0.6rem 0.9rem; /* compact like tools */
                font-size: 0.95rem;
                font-weight: 500;
                border-radius: 0.3rem;
                margin: 0.12rem 0;
                min-height: 2.1rem;
                transition: background 0.15s ease-out, color 0.15s ease-out; /* only color transitions on hover */
                border-left: 3px solid transparent; /* reserve space to prevent layout shift on hover */
                box-sizing: border-box; /* include border in width calculation */
                width: 100%; /* fixed width to prevent layout shifts */
            }

            .dropdown-container[data-role="user"] .rajchert-nav-item:hover {
                background: rgba(59, 130, 246, 0.15) !important;
                color: #60A5FA !important;
                border-left-color: #60A5FA !important; /* show blue accent without changing layout */
                /* Explicitly freeze all properties that could cause layout shifts */
                padding: 0.6rem 0.9rem !important;
                padding-left: 0.9rem !important;
                padding-right: 0.9rem !important;
                margin: 0.12rem 0 !important;
                transform: none !important;
                box-shadow: none !important;
                width: 100% !important;
            }

            .dropdown-container[data-role="user"] .rajchert-nav-item svg {
                width: 20px !important;
                height: 20px !important;
                margin-right: 10px !important;
                flex-shrink: 0 !important; /* prevent icon from resizing */
                transition: none !important; /* no transitions on icons */
                transform: none !important;
            }
            
            /* Prevent child elements from transforming during hover only */
            .dropdown-container[data-role="user"] .rajchert-nav-item:hover * {
                transform: none !important;
            }
            
            /* Override global hover reset (lines 2987-3001) with higher specificity */
            .dropdown-container[data-role="user"] .mega-list .rajchert-nav-item:hover,
            .dropdown-container[data-role="user"] .rajchert-dropdown .rajchert-nav-item:hover {
                background: rgba(59, 130, 246, 0.15) !important;
                color: #60A5FA !important;
                border-left-color: #60A5FA !important;
                padding: 0.6rem 0.9rem !important;
                transform: none !important;
                box-shadow: none !important;
                text-shadow: none !important;
                filter: none !important;
            }

            .dropdown-container[data-role="user"] .mega-heading {
                text-align: center;
                font-size: 0.98rem; /* slightly smaller */
                font-weight: 600;
                margin-bottom: 0.5rem;
                padding-bottom: 0.5rem;
                letter-spacing: 0.05em;
            }

            /* Remove bottom margin from last item in user menu */
            .dropdown-container[data-role="user"] .rajchert-nav-item:last-child {
                margin-bottom: 0;
            }

            /* Restore dropdown padding for user menu */
            .dropdown-container[data-role="user"] .rajchert-dropdown.mega {
                padding: 0.5rem 0.5rem 0rem 0.5rem !important; /* remove trailing gap */
            }

            /* Crossfade when switching tabs: new panel overlays slightly during transition */
            .dropdown-container.opening .rajchert-dropdown { z-index: 10003; }

            .rajchert-dropdown {
                display: block;
                opacity: 0;
                transform: translateY(-8px);
                visibility: hidden;
                transition: opacity 180ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 180ms cubic-bezier(0.2, 0.6, 0.2, 1), visibility 180ms;
                transition-delay: 0s;
                position: absolute;
                top: 100%;
                left: 0; /* anchor to button/container by default */
                right: auto;
                margin-top: 0; /* flush with navbar */
                pointer-events: none;
                padding: 0.75rem 0;
            }
            /* Utility for immediate hide during programmatic switches */
            .rajchert-dropdown.instant-hide { transition: none !important; }
            /* Utility for immediate show during programmatic switches */
            .rajchert-dropdown.instant-show { transition: none !important; }

            /* Mega dropdown: JS will set exact left so its center aligns with button center */
            .rajchert-dropdown.mega {
                left: 0;
                right: auto;
                top: 100%;
                margin-top: 0;
                border-top-left-radius: 0.75rem;
                border-top-right-radius: 0.75rem;
                transform: translateY(-8px);
            }
            /* Remove extra trailing gap by default; specific menus can override */
            .rajchert-dropdown.mega { padding-bottom: 0 !important; }
            .dropdown-container:not([data-role="user"]):hover .rajchert-dropdown.mega,
            .dropdown-container:not([data-role="user"]).show-dropdown .rajchert-dropdown.mega {
                transform: translateY(0);
            }

            /* Force right alignment when needed */
            .rajchert-dropdown.align-right { left: auto; right: 0; transform: translateY(-8px); }
            /* Mega menu width helpers - balanced sizes */
            .mega--xl { width: 1000px; max-width: 92vw; }
            .mega--lg { width: 800px; max-width: 92vw; }
            .mega--md { width: 600px; max-width: 92vw; }

            /* Stabilize host container - balanced */
            #mega-host {
                box-sizing: border-box;
                width: 600px;
                max-width: min(600px, calc(100vw - 48px));
                scrollbar-gutter: stable both-edges;
                contain: layout style;
            }

            /* #mega-tools-panel removed */

            /* Mega menu utilities */
            .mega-scroll { max-height: 70vh; overflow-y: auto; }
            /* Flexbox columns with equal heights and full divider */
            .mega-cols {
                position: relative;
                min-height: 0; /* allow content to define height */
            }
            
            .mega-cols > .mega-col { 
                padding: 0.5rem 1rem 0.25rem 1rem; /* reduce bottom padding */
                position: relative;
                display: block;
            }
            
            /* Full height divider line - always to bottom */
            .mega-cols::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 0;
                bottom: 0;
                width: 2px;
                background: linear-gradient(to bottom,
                    transparent 0%,
                    rgba(59, 130, 246, 0.2) 3%,
                    rgba(59, 130, 246, 0.6) 15%,
                    rgba(96, 165, 250, 0.8) 50%,
                    rgba(59, 130, 246, 0.6) 85%,
                    rgba(59, 130, 246, 0.2) 97%,
                    transparent 100%
                );
                border-radius: 1px;
                transform: translateX(-50%);
                z-index: 1;
                box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
                animation: dividerPulse 3s ease-in-out infinite;
            }
            
            @keyframes dividerPulse {
                0%, 100% { 
                    opacity: 0.7;
                    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
                }
                50% { 
                    opacity: 1;
                    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
                }
            }
            .mega-heading { 
                color: #e5e7eb; 
                text-transform: uppercase; 
                letter-spacing: 0.06em; 
                font-size: 0.9rem; 
                font-weight: 600; 
                margin-bottom: 0.6rem; 
                margin-top: 0.3rem;
                text-align: center;
                padding: 0.4rem 0;
                border-bottom: 1px solid rgba(59, 130, 246, 0.4);
                position: relative;
            }
            
            .mega-heading::after {
                content: "";
                position: absolute;
                bottom: -1px;
                left: 50%;
                transform: translateX(-50%);
                width: 40px;
                height: 1px;
                background: linear-gradient(90deg, transparent, #60A5FA, transparent);
                border-radius: 1px;
            }
            .mega-list { list-style: none; margin: 0; padding: 0; }
            .mega-list li + li { margin-top: 0.25rem; }
            .mega-list { margin-top: 0.4rem; }
            .mega-fixed { min-height: auto; }
            .mega-template { display: none; }

            /* Tools panel injected into host should be single-column and narrow */
            #mega-host[data-active="tools"] { width: 420px; max-width: min(420px, 92vw); }
            #mega-host[data-active="tools"] .mega-cols { display: block; min-height: auto; }
            #mega-host[data-active="tools"] .mega-cols::after { display: none; }

            /* Compact item style inside mega menus */
            .rajchert-dropdown.mega .rajchert-nav-item {
                padding: 0.5rem 0.75rem;
                border-bottom: 0;
                text-transform: none;
                letter-spacing: 0;
                font-size: 0.9rem;
                border-left: 3px solid transparent; /* reserve space also in mega */
                border-radius: 0.25rem;
                margin: 0.06rem 0;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                min-height: 2.1rem;
            }

            .rajchert-dropdown.mega .rajchert-nav-item:hover {
                padding-left: 0.9rem !important; /* keep constant */
                border-left-color: #60A5FA !important;
                transform: none !important;
                background: rgba(59, 130, 246, 0.12) !important;
                text-shadow: none !important;
                backdrop-filter: none !important;
                color: #bfdbfe !important;
            }

            .rajchert-dropdown.mega .grid > div {
                padding-left: 0.25rem;
                padding-right: 0.25rem;
            }

            /* Optimize icons in mega menu */
            .rajchert-dropdown.mega .rajchert-nav-item svg {
                width: 20px;
                height: 20px;
                opacity: 0.8;
                flex-shrink: 0;
            }

            .rajchert-dropdown.mega .rajchert-nav-item:hover svg {
                opacity: 1;
            }

            /* Keep dropdown open when hovering over it */
            .rajchert-dropdown:hover {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            /* Arrow animation on hover */
            .dropdown-container.show-dropdown .nav-arrow {
                transform: rotate(180deg);
                color: #60A5FA;
            }
            /* Arrow behavior: tab-based rotation for products/tools/user when button is active */
            .dropdown-container[data-role="products"] > .nav-menu-button .nav-arrow,
            .dropdown-container[data-role="tools"] > .nav-menu-button .nav-arrow,
            .dropdown-container[data-role="user"] > .nav-menu-button .nav-arrow { transform: none; color: inherit; }
            .dropdown-container[data-role="products"] > .nav-menu-button.active-tab .nav-arrow,
            .dropdown-container[data-role="tools"] > .nav-menu-button.active-tab .nav-arrow,
            .dropdown-container[data-role="user"] > .nav-menu-button.active-tab .nav-arrow { transform: rotate(180deg); color: #60A5FA; }

            .nav-arrow {
                display: inline-block;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                font-size: 0.75rem;
                opacity: 0.8;
            }

            .dropdown-container:hover .nav-arrow,
            .dropdown-container.show-dropdown .nav-arrow {
                opacity: 1;
            }

            .hamburger-line {
                width: 26px; /* Larger for better visibility */
                height: 3px; /* Thicker lines */
                background: #ffffff;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                border-radius: 2px;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
                transform-origin: center center;
                position: relative;
            }

            #mobile-menu-button {
                padding: 15px; /* Perfect centering */
                border-radius: 10px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                height: 50px; /* Perfect square */
                width: 50px;
                display: none; /* Hidden by default, shown by media queries */
                align-items: center;
                justify-content: center;
                background: rgba(42, 42, 42, 0.6);
                border: 1px solid rgba(96, 165, 250, 0.4);
                cursor: pointer;
                position: relative;
                z-index: 10001;
            }

            #mobile-menu-button:hover {
                background: rgba(96, 165, 250, 0.15);
                border-color: rgba(96, 165, 250, 0.4);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
            }

            #mobile-menu-button:hover .hamburger-line {
                background: #60A5FA;
                transform: scale(1.05);
            }

            /* Hide navbar hamburger when menu is open - controlled by JavaScript */
            #mobile-menu-button.menu-open {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: all 0.3s ease;
            }

            /* Close button in menu - always shows as X */
            .hamburger-menu-close {
                position: relative;
                width: 24px;
                height: 24px;
                cursor: pointer;
            }

            .hamburger-line-close {
                position: absolute;
                width: 24px;
                height: 2px;
                background: #ef4444;
                border-radius: 1px;
                left: 0;
                top: 50%;
            }

            .hamburger-line-close:nth-child(1) {
                transform: translateY(-50%) rotate(45deg);
            }

            .hamburger-line-close:nth-child(2) {
                opacity: 0;
            }

            .hamburger-line-close:nth-child(3) {
                transform: translateY(-50%) rotate(-45deg);
            }

            #close-menu-button:hover .hamburger-line-close {
                background: #dc2626;
                transform: translateY(-50%) rotate(45deg) scale(1.1);
            }

            #close-menu-button:hover .hamburger-line-close:nth-child(3) {
                transform: translateY(-50%) rotate(-45deg) scale(1.1);
            }

            /* Content wrapper for proper layering */
            .content-wrapper {
                position: relative;
                z-index: 100;
                background: transparent;
                min-height: 100vh;
            }

            /* Subtle animated background for content sections */
            .content-section {
                position: relative;
                background: rgba(18, 18, 18, 0.7);
                backdrop-filter: blur(5px);
                border-radius: 0.5rem;
                border: 1px solid rgba(42, 42, 42, 0.3);
                overflow: hidden;
            }

            .content-section::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: 
                    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.03) 50%, transparent 70%),
                    linear-gradient(-45deg, transparent 30%, rgba(29, 78, 216, 0.02) 50%, transparent 70%);
                background-size: 200% 200%;
                animation: subtleShift 20s ease-in-out infinite;
                pointer-events: none;
                z-index: -1;
            }

            @keyframes subtleShift {
                0%, 100% {
                    background-position: 0% 0%;
                }
                25% {
                    background-position: 100% 0%;
                }
                50% {
                    background-position: 100% 100%;
                }
                75% {
                    background-position: 0% 100%;
                }
            }

            /* Dark mode styles - now default */
            .dark-mode-active {
                background-color: transparent;
                color: #c9d1d9;
            }

            .dark .rajchert-navbar {
                background: rgba(10, 10, 10, 0.85);
                border-color: rgba(64, 64, 64, 0.5);
                backdrop-filter: blur(15px);
            }

            .light .brand-logo-nav {
                filter: none;
            }



            /* Static Background Layer */
            .background-layer {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                z-index: -1;
                pointer-events: none;
                background:
                    radial-gradient(circle at 20% 30%, rgba(59,130,246,0.10) 0, transparent 60%),
                    radial-gradient(circle at 80% 70%, rgba(29,78,216,0.08) 0, transparent 60%),
                    radial-gradient(circle at 50% 10%, rgba(147,197,253,0.06) 0, transparent 60%);
                background-color: #0A0A0A;
            }

            /* Global color overrides */
            .bg-white {
                background-color: #21262d !important;
            }
            .bg-gray-50,
            .bg-gray-100 {
                background-color: #161b22 !important;
            }
            .bg-blue-50 {
                background-color: #0d1117 !important;
            }
            .bg-green-50 {
                background-color: #0d1117 !important;
            }
            .bg-indigo-50 {
                background-color: #0d1117 !important;
                color: #c9d1d9 !important;
            }
            .bg-red-50 {
                background-color: #0d1117 !important;
            }
            .bg-yellow-50 {
                background-color: #0d1117 !important;
            }
            .text-gray-800 {
                color: #c9d1d9 !important;
            }
            .text-gray-700 {
                color: #8b949e !important;
            }
            .text-gray-600 {
                color: #6e7681 !important;
            }
            .text-gray-500 {
                color: #7d8590 !important;
            }
            .text-black {
                color: #c9d1d9 !important;
            }
            .border-gray-200 {
                border-color: #30363d !important;
            }
            .border-gray-300 {
                border-color: #21262d !important;
            }
            .dark .text-gray-700 {
                color: #d1d1d1;
            }
            .dark .text-gray-600 {
                color: #bdbdbd;
            }
            .dark .text-gray-500 {
                color: #9e9e9e;
            }
            .dark .border,
            .dark .border-t,
            .dark .border-b,
            .dark .border-l,
            .dark .border-r {
                border-color: #333;
            }
            .dark .border-blue-200 {
                border-color: #1e40af;
            }
            .dark .border-green-200 {
                border-color: #166534;
            }
            .dark .border-indigo-200 {
                border-color: #4f46e5;
            }
            .dark .border-red-200 {
                border-color: #b91c1c;
            }
            .dark .border-yellow-200 {
                border-color: #a16207;
            }
            .dark .shadow-md,
            .dark .shadow-lg,
            .dark .shadow-sm {
                box-shadow:
                    0 4px 6px -1px rgba(0, 0, 0, 0.5),
                    0 2px 4px -1px rgba(0, 0, 0, 0.4);
            }

            /* Smooth UX for cross-page "Kontakt" navigation:
               hide content until we scroll to #contact-form, then fade in. */
            .content-wrapper {
                transition: opacity 180ms ease;
            }
            html.sh-pending-contact-scroll .content-wrapper {
                opacity: 0;
                pointer-events: none;
            }