.smooth-scroll {
            scroll-behavior: smooth;
        }
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .accordion-content.open {
            max-height: 200px;
        }
/* Prosta animacja dla płynnego otwierania FAQ */
        .faq-answer {
            transition: max-height 0.3s ease-out;
            overflow: hidden;
            max-height: 0;
        }
        .faq-question.open + .faq-answer {
            max-height: 500px; /* Wystarczająco duża wartość */
        }
        .faq-question.open .arrow-down {
            transform: rotate(180deg);
        }
        .arrow-down {
            transition: transform 0.3s ease-in-out;
        }

             .smooth-scroll {
            scroll-behavior: smooth;
        }
      
        .hero-gradient {
            background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
        }
        .audit-card {
            transition: all 0.3s ease;
        }
        .audit-card:hover {
            transform: translateY(-5px);
        }
        .step-card {
            transition: all 0.3s ease;
        }
        .step-card:hover {
            transform: scale(1.02);
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .accordion-content.open {
            max-height: 200px;
        }
        .service-card {
            transition: all 0.3s ease;
        }
        .service-card:hover {
            transform: translateY(-5px);
        }
        .hero-gradient-services {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%)
        }
        .hero-gradient-it-services {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
        }


        /* Cyberbezpieczeństwo */
        .hero-gradient-cybersecurity {
            background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
        }
        .threat-card {
            transition: all 0.3s ease;
        }
        .threat-card:hover {
            transform: scale(1.02);
        }
        .stat-counter {
            font-variant-numeric: tabular-nums;
        }
        .security-layer {
            transition: all 0.3s ease;
        }
        .security-layer:hover {
            transform: translateX(5px);
        }

        .sla-box {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-left: 4px solid #0ea5e9;
        }
        
        
        
        
        /* Helpdesk */

        .hero-gradient-helpdesk {
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
        }

        /* Kopie zapasowe */ 
        .hero-gradient-backup {
             background: linear-gradient(135deg, #047857 0%, #10b981 50%, #34d399 100%);
        }
         .backup-card {
            transition: all 0.3s ease;
        }
        .backup-card:hover {
            transform: translateY(-5px);
        }
        .solution-card {
            transition: all 0.3s ease;
        }
        .solution-card:hover {
            transform: scale(1.02);
        }
     
        .backup-platform {
            background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
            position: relative;
            overflow: hidden;
        }
        .backup-platform::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23334155" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }


        .hero-gradient-o365 {
            background: linear-gradient(135deg, #0078d4 0%, #106ebe 50%, #2b88d8 100%);
        }

        .hero-gradient-compliance {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
        }

        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .tab-button {
            transition: all 0.3s ease;
        }
        .tab-button.active {
            background-color: #3b82f6;
            color: white;
        }
        .step-card {
            transition: all 0.3s ease;
        }
        .step-card:hover {
            transform: translateY(-5px);
        }

        .hero-gradient-consulting {
             background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
        }
        .consulting-card {
            transition: all 0.3s ease;
        }
        .consulting-card:hover {
            transform: translateY(-5px);
        }
        .process-step {
            transition: all 0.3s ease;
        }
        .process-step:hover {
            transform: scale(1.02);
        }
        .hero-gradient-about {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
        }






         .retro-bg {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        
        .pixel-grid {
            background-image: 
                radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.3;
            animation: grid-move 20s linear infinite;
        }
        
        @keyframes grid-move {
            0% { transform: translate(0, 0); }
            100% { transform: translate(20px, 20px); }
        }
        
        .retro-text {
            font-family: 'Courier New', monospace;
            text-shadow: 
                0 0 5px currentColor,
                0 0 10px currentColor,
                0 0 15px currentColor;
            animation: glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor; }
            to { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
        }
        
        .pixel-art {
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
        }
        
        .retro-button {
            font-family: 'Courier New', monospace;
            background: linear-gradient(145deg, #4CAF50, #45a049);
            border: 3px solid #2E7D32;
            box-shadow: 
                inset 2px 2px 0px rgba(255,255,255,0.3),
                inset -2px -2px 0px rgba(0,0,0,0.3),
                0 0 15px rgba(76,175,80,0.5);
            transition: all 0.1s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .retro-button:hover {
            background: linear-gradient(145deg, #45a049, #4CAF50);
            box-shadow: 
                inset 2px 2px 0px rgba(0,0,0,0.3),
                inset -2px -2px 0px rgba(255,255,255,0.3),
                0 0 20px rgba(76,175,80,0.7);
            transform: scale(0.98);
        }
        
        .scanlines {
            position: relative;
        }
        
        .scanlines::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.1) 2px,
                rgba(0,0,0,0.1) 4px
            );
            pointer-events: none;
        }
        
        .glitch {
            animation: glitch 3s infinite;
        }
        
        @keyframes glitch {
            0%, 90%, 100% { transform: translate(0); }
            92% { transform: translate(-2px, 0); }
            94% { transform: translate(2px, 0); }
            96% { transform: translate(-1px, 0); }
            98% { transform: translate(1px, 0); }
        }
        
        .retro-card {
            background: rgba(0, 0, 0, 0.7);
            border: 3px solid #00ff41;
            box-shadow: 
                0 0 20px rgba(0, 255, 65, 0.5),
                inset 0 0 20px rgba(0, 255, 65, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .terminal-cursor {
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        

        .hero-gradient-services-table {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
        }
         .table-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .service-table {
            min-width: 800px;
        }
        .service-table th {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            color: white;
            font-weight: 600;
            padding: 16px 12px;
            text-align: left;
            border-bottom: 2px solid #1e40af;
        }
        .service-table td {
            padding: 12px;
            border-bottom: 1px solid #e5e7eb;
            vertical-align: top;
        }
        .service-table tbody tr:hover {
            background-color: #f8fafc;
        }
        .category-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .category-hardware { background-color: #dbeafe; color: #1e40af; }
        .category-software { background-color: #d1fae5; color: #065f46; }
        .category-security { background-color: #fef3c7; color: #92400e; }
        .category-network { background-color: #ede9fe; color: #6b21a8; }
        .category-support { background-color: #fce7f3; color: #9d174d; }
        .category-backup { background-color: #ecfdf5; color: #047857; }
        .category-cloud { background-color: #e0f2fe; color: #0c4a6e; }
        .category-consulting { background-color: #fff7ed; color: #c2410c; }