/* Generated from CSP migration: former inline <style> blocks and style attributes. */

:root {
    --wild-brand-color: #dc2626;
    --wild-brand-hover-color: #ef4444;
    --wild-accent-color: #f87171;
    --wild-background-color: #050505;
    --wild-card-background-color: #111111;
    --wild-text-primary-color: #ffffff;
    --wild-text-muted-color: #9ca3af;
    --wild-surface-border-color: #1f2937;
    --wild-brand-rgb: 220 38 38;
    --wild-brand-hover-rgb: 239 68 68;
    --wild-accent-rgb: 248 113 113;
    --wild-background-rgb: 5 5 5;
    --wild-card-background-rgb: 17 17 17;
    --wild-text-primary-rgb: 255 255 255;
    --wild-text-muted-rgb: 156 163 175;
    --wild-surface-border-rgb: 31 41 55;
    --wild-background-main-image: url("https://i.imgur.com/51uYxPt.png");
}

::selection {
    background: rgb(var(--wild-brand-rgb) / 0.58);
    color: #ffffff;
}

input,
textarea,
select {
    color-scheme: dark;
    caret-color: var(--wild-brand-color);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px #111111 inset !important;
    border-color: rgb(var(--wild-brand-rgb) / 0.45) !important;
    transition: background-color 999999s ease-in-out 0s;
}

.bg-brand,
.hover\:bg-brand:hover,
.group:hover .group-hover\:bg-brand {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--wild-brand-rgb) / var(--tw-bg-opacity)) !important;
}

.bg-brand-hover,
.hover\:bg-brand-hover:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--wild-brand-hover-rgb) / var(--tw-bg-opacity)) !important;
}

.bg-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--wild-background-rgb) / var(--tw-bg-opacity)) !important;
}

.bg-card-bg {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--wild-card-background-rgb) / var(--tw-bg-opacity)) !important;
}

.bg-brand\/5 {
    background-color: rgb(var(--wild-brand-rgb) / 0.05) !important;
}

.bg-brand\/10,
.hover\:bg-brand\/10:hover {
    background-color: rgb(var(--wild-brand-rgb) / 0.10) !important;
}

.bg-brand\/20,
.hover\:bg-brand\/20:hover,
.group:hover .group-hover\:bg-brand\/20 {
    background-color: rgb(var(--wild-brand-rgb) / 0.20) !important;
}

.text-brand,
.hover\:text-brand:hover,
.group:hover .group-hover\:text-brand {
    --tw-text-opacity: 1;
    color: rgb(var(--wild-brand-rgb) / var(--tw-text-opacity)) !important;
}

.border-brand,
.focus\:border-brand:focus {
    --tw-border-opacity: 1;
    border-color: rgb(var(--wild-brand-rgb) / var(--tw-border-opacity)) !important;
}

.border-brand\/20 {
    border-color: rgb(var(--wild-brand-rgb) / 0.20) !important;
}

.border-brand\/30 {
    border-color: rgb(var(--wild-brand-rgb) / 0.30) !important;
}

.border-brand\/40 {
    border-color: rgb(var(--wild-brand-rgb) / 0.40) !important;
}

.border-brand\/50,
.focus\:border-brand\/50:focus {
    border-color: rgb(var(--wild-brand-rgb) / 0.50) !important;
}

.focus\:ring-brand:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--wild-brand-rgb) / var(--tw-ring-opacity)) !important;
}

.from-brand {
    --tw-gradient-from: rgb(var(--wild-brand-rgb) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--wild-brand-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-brand {
    --tw-gradient-to: rgb(var(--wild-brand-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--wild-brand-rgb) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-brand {
    --tw-gradient-to: rgb(var(--wild-brand-rgb) / 1) var(--tw-gradient-to-position);
}

/* admin/index.html */
body { background-color: #050505; color: #fff; }
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }
        .page-grid-pattern::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 25%),
                radial-gradient(circle at left center, rgba(220, 38, 38, 0.16), transparent 28%),
                radial-gradient(circle at bottom center, rgba(59, 130, 246, 0.12), transparent 26%);
            z-index: 0;
        }
        textarea {
            resize: vertical;
        }
        .admin-accordion[open] {
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
        }
        .admin-accordion-summary {
            list-style: none;
            cursor: pointer;
        }
        .admin-accordion-summary::-webkit-details-marker {
            display: none;
        }

/* cart/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* cart.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* dashboard/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; 
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; 
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* dashboard.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; 
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; 
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- Dense, slow, even rain --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Move drops down by a fixed value to keep an even tempo. */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .intro-delay-100 { animation-delay: 100ms; }
        .intro-delay-200 { animation-delay: 200ms; }
        .intro-delay-300 { animation-delay: 300ms; }
        .intro-delay-400 { animation-delay: 400ms; }
        .intro-delay-500 { animation-delay: 500ms; }
        .intro-delay-600 { animation-delay: 600ms; }

        .reveal-stagger-100 { transition-delay: 100ms; }
        .reveal-stagger-200 { transition-delay: 200ms; }
        .reveal-stagger-300 { transition-delay: 300ms; }
        .reveal-stagger-400 { transition-delay: 400ms; }
        .reveal-stagger-500 { transition-delay: 500ms; }
        .reveal-stagger-600 { transition-delay: 600ms; }

        .hero-main-shell {
            min-height: 100svh;
            padding-top: clamp(6rem, 9vh, 7.5rem);
            padding-bottom: clamp(3rem, 7vh, 5rem);
        }

        .hero-background-layer {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
            background:
                radial-gradient(circle at 50% 18%, rgba(220, 38, 38, 0.26), rgba(5, 5, 5, 0.18) 34%, rgba(5, 5, 5, 0.96) 72%),
                linear-gradient(135deg, rgba(220, 38, 38, 0.16), transparent 38%),
                #050505;
            -webkit-mask-image: linear-gradient(to bottom, black 82%, rgba(0, 0, 0, 0.22) 100%);
            mask-image: linear-gradient(to bottom, black 82%, rgba(0, 0, 0, 0.22) 100%);
        }

        .hero-background-layer::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
            background-size: 62px 62px;
            opacity: 0.26;
        }

        .hero-background-layer::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 24%, rgba(5, 5, 5, 0.04), rgba(5, 5, 5, 0.38) 66%, rgba(5, 5, 5, 0.72) 100%),
                linear-gradient(rgba(5, 5, 5, 0.02), rgba(5, 5, 5, 0.1));
        }

        .hero-background-image {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 100%;
            object-fit: cover;
            object-position: center 18%;
            opacity: 0.72;
            filter: saturate(1.18) contrast(1.12) brightness(1.08);
            transform: scale(1.02);
        }

        .hero-background-image.dynamic-bg-failed {
            opacity: 0;
        }

        .dynamic-product-image-failed {
            opacity: 0;
        }

        .product-image-fallback-grid {
            background:
                radial-gradient(circle at 50% 22%, rgba(220, 38, 38, 0.32), transparent 34%),
                linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
            background-size: auto, 34px 34px, 34px 34px;
        }

        .home-stat-card {
            transition:
                border-color 160ms ease-out,
                box-shadow 160ms ease-out,
                transform 160ms ease-out,
                background-color 160ms ease-out;
            will-change: transform, box-shadow, border-color;
        }

        .home-stat-icon,
        .home-stat-value {
            transition:
                color 160ms ease-out,
                filter 160ms ease-out,
                background-color 160ms ease-out;
        }

        .hero-type-sequence {
            display: inline-flex;
            align-items: baseline;
            gap: 0.14em;
            white-space: nowrap;
            width: fit-content;
            justify-content: flex-start;
        }

        #hero-dynamic-category {
            display: inline-block;
            min-width: 0;
            text-align: left;
        }

        .hero-caret {
            width: 0.08em;
            height: 0.88em;
            background: currentColor;
            border-radius: 999px;
            box-shadow: 0 0 14px rgba(220, 38, 38, 0.45);
            animation: heroCaretBlink 1s steps(1) infinite;
            transform: translateY(0.08em);
        }

        @keyframes heroCaretBlink {
            0%, 45% { opacity: 1; }
            46%, 100% { opacity: 0; }
        }

        @media (max-width: 640px) {
            .hero-type-sequence {
                min-width: 0;
                white-space: normal;
                justify-content: center;
            }

            #hero-dynamic-category {
                min-width: 0;
            }

            .hero-background-image {
                object-position: center top;
                opacity: 0.3;
            }

            .hero-background-layer {
                background: #050505;
            }
        }

/* legal/privacy/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* legal/privacy.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* legal/refund/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* legal/refund.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* legal/tos/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* legal/tos.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/accounts/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/accounts.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/apex/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/apex.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/ark/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/ark.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/cs2/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/cs2.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/deadlock/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/deadlock.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/eft/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/eft.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/fivem/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/fivem.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/fortnite/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/fortnite.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }

/* product/l4d2/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/l4d2.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/marvel-rivals/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/marvel-rivals.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/osu/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/osu.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/rust/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/rust.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/spoofers/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite;
        }

        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* product/spoofers.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite;
        }

        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* products/index.html */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #050505;
            color: #fff;
            animation: pageLoad 0.8s ease-in-out;
            font-family: 'Rajdhani', sans-serif;
        }

        #global-footer {
            margin-top: auto;
            flex-shrink: 0;
        }

        body.product-detail-page {
            min-height: 100vh;
            min-height: 100svh;
            display: grid !important;
            grid-template-rows: auto 1fr auto;
            grid-template-columns: minmax(0, 1fr);
            align-content: stretch;
        }

        body.product-detail-page > #global-navbar {
            grid-row: 1;
        }

        body.product-detail-page > .product-page-shell {
            grid-row: 2;
            align-self: stretch;
        }

        body.product-detail-page > #global-footer {
            grid-row: 3;
            align-self: end;
            margin-top: 0 !important;
        }

        body.product-detail-page > #productInfoOverlay,
        body.product-detail-page > template {
            grid-row: 1;
        }

        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

        .product-page-shell {
            position: relative;
            z-index: 10;
            flex: 1 0 auto;
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
            padding: 6.75rem 1rem 5rem;
        }

        .product-breadcrumb {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            overflow-x: auto;
            white-space: nowrap;
            padding-bottom: 0.2rem;
        }

        .breadcrumb-link {
            color: #ffffff;
            font-size: 0.875rem;
            font-weight: 500;
            transition: color 0.25s ease;
        }

        .breadcrumb-link:hover {
            color: #dc2626;
        }

        .breadcrumb-separator {
            color: #4b5563;
            font-size: 0.95rem;
            line-height: 1;
        }

        .breadcrumb-current {
            color: #ffffff;
            font-size: 1.125rem;
            font-weight: 700;
            padding: 0 0.25rem;
            transition: color 0.25s ease;
        }

        .breadcrumb-current:hover {
            color: #dc2626;
        }

        .product-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: clamp(3.4rem, 7vw, 4.9rem);
            line-height: 0.92;
            letter-spacing: -0.05em;
            font-style: italic;
            text-transform: uppercase;
        }

        .main-image-container {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
                radial-gradient(circle at top left, rgba(220, 38, 38, 0.22), transparent 42%),
                #070707;
            border: 1px solid rgba(220, 38, 38, 0.28);
            box-shadow: 0 35px 90px -50px rgba(220, 38, 38, 0.6);
        }

        .main-image-container::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 36px 36px;
            mix-blend-mode: screen;
            opacity: 0.4;
            pointer-events: none;
        }

        .viewing-pill {
            background: rgba(0, 0, 0, 0.78);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
        }

        .dot-pulse {
            animation: dotPulse 1.5s ease-in-out infinite;
        }

        @keyframes dotPulse {
            0%, 100% { transform: scale(0.95); opacity: 0.7; }
            50% { transform: scale(1.18); opacity: 1; }
        }

        .trust-box {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: linear-gradient(180deg, rgba(19, 19, 19, 0.88), rgba(10, 10, 10, 0.95));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 0.72rem;
            border: 1px solid rgba(255,255,255,0.07);
            background: linear-gradient(180deg, rgba(14, 14, 14, 0.9), rgba(9, 9, 9, 0.96));
            padding: 0.72rem 0.9rem;
        }

        .feature-item span:first-child {
            width: 1.45rem;
            height: 1.45rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid rgba(220, 38, 38, 0.35);
            background: rgba(220, 38, 38, 0.08);
            flex-shrink: 0;
        }

        .purchase-notes-panel {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(220, 38, 38, 0.24);
            background:
                radial-gradient(circle at 0% 0%, rgba(220, 38, 38, 0.16), transparent 34%),
                linear-gradient(180deg, rgba(17, 17, 17, 0.96), rgba(7, 7, 7, 0.99));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 24px 55px -45px rgba(220, 38, 38, 0.9);
        }

        .purchase-notes-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
            background-size: 32px 32px;
            opacity: 0.35;
            pointer-events: none;
        }

        .purchase-note-card {
            border: 1px solid rgba(220, 38, 38, 0.2);
            background: linear-gradient(180deg, rgba(15, 15, 15, 0.96), rgba(8, 8, 8, 0.99));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
        }

        .purchase-note-card p {
            overflow-wrap: anywhere;
        }

        .purchase-note-icon,
        .purchase-note-badge {
            border: 1px solid rgba(220, 38, 38, 0.32);
            background: rgba(220, 38, 38, 0.11);
            color: #fecaca;
        }

        .purchase-note-message {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .purchase-note-link {
            border: 1px solid rgba(220, 38, 38, 0.28);
            background: linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(10, 10, 10, 0.99));
            box-shadow: 0 14px 28px -24px rgba(220, 38, 38, 0.9);
            min-height: 2.85rem;
            white-space: nowrap;
        }

        .purchase-note-link:hover {
            border-color: rgba(220, 38, 38, 0.5);
            background: rgba(220, 38, 38, 0.14);
            transform: translateY(-1px);
        }

        .purchase-note-link span:first-child {
            max-width: 10rem;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .product-info-panel {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(220, 38, 38, 0.24);
            background:
                radial-gradient(circle at 0% 0%, rgba(220, 38, 38, 0.16), transparent 34%),
                linear-gradient(180deg, rgba(17, 17, 17, 0.96), rgba(7, 7, 7, 0.99));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 24px 55px -45px rgba(220, 38, 38, 0.9);
        }

        .product-info-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
            background-size: 32px 32px;
            opacity: 0.35;
            pointer-events: none;
        }

        .product-info-action-btn {
            border: 1px solid rgba(220, 38, 38, 0.3);
            background:
                linear-gradient(180deg, rgba(22, 22, 22, 0.92), rgba(10, 10, 10, 0.98)),
                rgba(220, 38, 38, 0.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 32px -26px rgba(220, 38, 38, 0.75);
        }

        .product-info-action-btn:hover {
            border-color: rgba(220, 38, 38, 0.52);
            background:
                linear-gradient(180deg, rgba(34, 18, 18, 0.94), rgba(12, 10, 10, 0.99)),
                rgba(220, 38, 38, 0.13);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 34px -27px rgba(220, 38, 38, 0.9);
            transform: translateY(-1px);
        }

        body.product-info-modal-open {
            overflow: hidden;
        }

        .product-info-overlay {
            position: fixed;
            inset: 0;
            z-index: 80;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.78);
            backdrop-filter: blur(14px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.28s ease, visibility 0.28s ease;
        }

        .product-info-overlay.is-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .product-info-modal {
            width: min(920px, 100%);
            max-height: min(760px, calc(100vh - 2rem));
            overflow: hidden;
            border: 1px solid rgba(220, 38, 38, 0.24);
            background:
                radial-gradient(circle at top right, rgba(220, 38, 38, 0.18), transparent 34%),
                linear-gradient(180deg, rgba(17, 17, 17, 0.98), rgba(6, 6, 6, 0.995));
            box-shadow: 0 35px 100px rgba(0, 0, 0, 0.72), 0 24px 70px -45px rgba(220, 38, 38, 0.8);
            transform: translateY(18px) scale(0.97);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .product-info-overlay.is-visible .product-info-modal {
            transform: translateY(0) scale(1);
        }

        .product-info-scroll {
            max-height: min(760px, calc(100vh - 2rem));
            overflow-y: auto;
        }

        .product-info-close {
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(0,0,0,0.36);
            transition: all 0.22s ease;
        }

        .product-info-close:hover {
            border-color: rgba(220, 38, 38, 0.42);
            background: rgba(220, 38, 38, 0.12);
        }

        .product-info-accordion-item {
            border: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(13, 13, 13, 0.96), rgba(7, 7, 7, 0.99));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }

        .product-info-accordion-trigger {
            width: 100%;
            min-height: 64px;
            text-align: left;
        }

        .product-info-accordion-icon {
            border: 1px solid rgba(220, 38, 38, 0.28);
            background: rgba(220, 38, 38, 0.08);
        }

        .product-info-accordion-chevron {
            transition: transform 0.22s ease, color 0.22s ease;
        }

        .product-info-accordion-item.is-open {
            border-color: rgba(220, 38, 38, 0.42);
            box-shadow: 0 24px 50px -36px rgba(220, 38, 38, 0.72), inset 0 1px 0 rgba(255,255,255,0.04);
        }

        .product-info-accordion-item.is-open .product-info-accordion-chevron {
            transform: rotate(180deg);
            color: #ef4444;
        }

        .product-info-accordion-body {
            display: none;
            border-top: 1px solid rgba(255,255,255,0.07);
            animation: productInfoBody 0.24s ease-out;
        }

        .product-info-accordion-item.is-open .product-info-accordion-body {
            display: block;
        }

        @keyframes productInfoBody {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .flex-options-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
            gap: 0.7rem;
        }

        .option-btn {
            border: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(14, 14, 14, 0.92), rgba(9, 9, 9, 0.98));
            min-height: 86px;
        }

        .option-btn:hover {
            transform: translateY(-2px);
            border-color: rgba(220, 38, 38, 0.35);
        }

        .option-btn.active {
            border-color: rgba(220, 38, 38, 0.85);
            box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35), 0 20px 40px -28px rgba(220, 38, 38, 0.9);
            background: linear-gradient(180deg, rgba(32, 10, 10, 0.95), rgba(15, 9, 9, 0.99));
            transform: translateY(-2px);
        }

        .qty-stepper {
            border: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(14, 14, 14, 0.92), rgba(9, 9, 9, 0.98));
        }

        .qty-stepper button {
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 0.85rem;
            transition: all 0.2s ease;
        }

        .qty-stepper button:hover {
            background: rgba(220, 38, 38, 0.14);
            color: #fff;
        }

        .purchase-panel {
            border: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(12, 12, 12, 0.96), rgba(7, 7, 7, 0.99));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }

        .total-price {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: clamp(2.2rem, 4.4vw, 3.25rem);
            line-height: 0.95;
            letter-spacing: -0.05em;
            font-style: italic;
        }

        .related-card {
            border: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(14, 14, 14, 0.92), rgba(9, 9, 9, 0.98));
            box-shadow: 0 18px 40px -35px rgba(0, 0, 0, 0.95);
        }

        .related-card:hover {
            border-color: rgba(220, 38, 38, 0.45);
            box-shadow: 0 28px 60px -35px rgba(220, 38, 38, 0.35);
        }

        @media (max-width: 1023px) {
            .product-page-shell {
                padding-top: 6rem;
            }
        }

        @media (min-width: 1280px) {
            .purchase-notes-panel {
                max-height: 12.5rem;
                overflow-y: auto;
            }
        }

/* shop/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* shop.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }
        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }


        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* status/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }

        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            background-attachment: fixed;
        }

        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        .page-grid-pattern::before {
            background-image:
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            background-size: 1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px;
            animation: rain-fall-1 12s linear infinite;
        }

        .page-grid-pattern::after {
            background-image:
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            background-size: 1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px;
            animation: rain-fall-2 16s linear infinite;
        }

        @keyframes rain-fall-1 {
            0% { background-position: 100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px; }
            100% { background-position: 100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px; }
        }

        @keyframes rain-fall-2 {
            0% { background-position: 50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px; }
            100% { background-position: 50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px; }
        }

        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }

        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }

/* status.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }

        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            background-attachment: fixed;
        }

        .page-grid-pattern > * {
            position: relative;
            z-index: 1;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        .page-grid-pattern::before {
            background-image:
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            background-size: 1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px;
            animation: rain-fall-1 12s linear infinite;
        }

        .page-grid-pattern::after {
            background-image:
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            background-size: 1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px;
            animation: rain-fall-2 16s linear infinite;
        }

        @keyframes rain-fall-1 {
            0% { background-position: 100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px; }
            100% { background-position: 100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px; }
        }

        @keyframes rain-fall-2 {
            0% { background-position: 50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px; }
            100% { background-position: 50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px; }
        }

        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }

        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }

/* support/index.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* support.html */
body { background-color: #050505; color: #fff; animation: pageLoad 0.8s ease-in-out; }
        
        .tab-content { display: none; animation: fadeIn 0.4s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #dc2626; }
        
        #ticket-view-overlay { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #ticket-view-overlay.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); display: block !important; z-index: -1;}

        /* --- ZAGĘSZCZONY, POWOLNY I RÓWNY DESZCZ --- */
        .page-grid-pattern {
            position: relative;
            background-color: #0a0a0a;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px; 
            background-attachment: fixed;
        }

        .page-grid-pattern::before,
        .page-grid-pattern::after {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-repeat: no-repeat;
        }

        /* Warstwa 1: Szybsza - pozycje to idealne wielokrotności 50px */
        .page-grid-pattern::before {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 150px, 1px 250px, 1px 120px, 1px 300px, 1px 180px,
                1px 200px, 1px 170px, 1px 280px, 1px 220px, 1px 160px;
            
            animation: rain-fall-1 12s linear infinite; /* Zwolniono z 6s do 12s */
        }

        /* Warstwa 2: Wolniejsza (głębia) */
        .page-grid-pattern::after {
            background-image: 
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%),
                linear-gradient(to bottom, transparent, rgba(220, 38, 38, 0.1) 40%, rgba(220, 38, 38, 1) 100%);
            
            background-size: 
                1px 220px, 1px 160px, 1px 290px, 1px 150px, 1px 240px,
                1px 190px, 1px 270px, 1px 140px, 1px 210px, 1px 260px;
            
            animation: rain-fall-2 16s linear infinite; /* Zwolniono z 8s do 16s */
        }

        /* Ruch kropel w dół o stałą wartość (2000px), żeby zachować idealne tempo */
        @keyframes rain-fall-1 {
            0% {
                background-position: 
                    100px -300px, 300px -700px, 550px -100px, 800px -900px, 1050px -400px, 
                    1250px -800px, 1500px -200px, 1750px -600px, 1950px -50px, 2200px -500px;
            }
            100% {
                background-position: 
                    100px 1700px, 300px 1300px, 550px 1900px, 800px 1100px, 1050px 1600px, 
                    1250px 1200px, 1500px 1800px, 1750px 1400px, 1950px 1950px, 2200px 1500px;
            }
        }

        @keyframes rain-fall-2 {
            0% {
                background-position: 
                    50px -150px, 250px -850px, 450px -450px, 700px -50px, 950px -650px, 
                    1150px -250px, 1400px -950px, 1600px -350px, 1850px -750px, 2100px -100px;
            }
            100% {
                background-position: 
                    50px 1850px, 250px 1150px, 450px 1550px, 700px 1950px, 950px 1350px, 
                    1150px 1750px, 1400px 1050px, 1600px 1650px, 1850px 1250px, 2100px 1900px;
            }
        }

        /* --- STARE ANIMACJE --- */
        .card-grid-pattern {
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }
        
        .animate-up { opacity: 0; transform: translateY(40px) scale(0.97); animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; animation-delay: 600ms; }

/* Former inline style attributes. */

.wild-style-001 { background:#050505;color:#fff;font-family:sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0; }

.wild-style-002 { scrollbar-width: thin; scrollbar-color: #333 #111; }

.wild-style-003 { scrollbar-width: thin; }

.wild-style-004 { font-family: 'Barlow Condensed', sans-serif; }

.wild-style-005 { display: none; }

.wild-style-006 { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239CA3AF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 1rem top 50%; background-size: 0.65rem auto; }