:root {
    --glowne-tlo: #0F1419;
    --pomocnicze-tlo: #1A1F26;
    --zloty-akcent: #FFD700;
    --pomaranczowy-akcent: #FF6B00;
    --czerwony-akcent: #FF3A44;
    
    --bialy-napis: #FFFFFF;
    --szary-napis: #CCCCCC;
    --jasny-szary-napis: #EEEEEE;
    
    --zloty-przejscie: linear-gradient(135deg, #FFD700 0%, #FF6B00 100%);
    --ciemny-przejscie: linear-gradient(180deg, rgba(15, 20, 25, 0.8) 0%, rgba(15, 20, 25, 1) 100%);
    
    --karta-cien: 0 12px 40px rgba(0, 0, 0, 0.4);
    --guzik-cien: 0 6px 20px rgba(255, 215, 0, 0.4);
    
    --maly-zaokraglenie: 8px;
    --sredni-zaokraglenie: 16px;
    --duzy-zaokraglenie: 32px;
    
    --szybka-animacja: 0.25s ease;
    --normalna-animacja: 0.4s ease;
    --wolna-animacja: 0.6s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--glowne-tlo);
    color: var(--bialy-napis);
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all var(--szybka-animacja);
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Typografia */
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.2rem;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    background: var(--zloty-przejscie);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 2rem;
}

h2 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    position: relative;
    display: inline-block;
    margin-bottom: 2.5rem;
}

h2:after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100px;
    height: 5px;
    background: var(--zloty-przejscie);
    border-radius: 3px;
}

h3 {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    color: var(--zloty-akcent);
}

h4 {
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
    color: var(--bialy-napis);
}

/* Kontener */
.strona-kontener {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.sekcja-blok {
    padding: 5rem 0;
    position: relative;
}

.sekcja-blok.ciemne-tlo {
    background: rgba(26, 31, 38, 0.6);
}

.sekcja-tytul {
    text-align: center;
    margin-bottom: 3rem;
}

.sekcja-podtytul {
    font-size: 1.2rem;
    color: var(--szary-napis);
    max-width: 800px;
    margin: 0 auto;
}

/* Przyciski */
.przycisk-akcja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: var(--maly-zaokraglenie);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--normalna-animacja);
    border: none;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.glowny-przycisk {
    background: var(--zloty-przejscie);
    color: var(--glowne-tlo);
    box-shadow: var(--guzik-cien);
}

.glowny-przycisk:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
}

.kontur-przycisk {
    background: rgba(255, 255, 255, 0.08);
    color: var(--bialy-napis);
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.kontur-przycisk:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--zloty-akcent);
}

.duzy-guzik {
    padding: 1.3rem 2.5rem;
    font-size: 1.2rem;
}

.pelny-guzik {
    width: 100%;
    display: block;
}

.pulsujacy-guzik {
    animation: pulsowanie-efekt 2.5s infinite;
}

@keyframes pulsowanie-efekt {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

.centralne-akcje {
    text-align: center;
    margin-top: 2.5rem;
}

/* Nagłówek */
.kasyno-naglowek {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(15, 20, 25, 0.95);
    backdrop-filter: blur(15px);
    transition: all var(--normalna-animacja);
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.naglowek-srodek {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.firma-logo img {
    height: 45px;
    width: auto;
    transition: all var(--normalna-animacja);
}

.nawigacja-menu {
    display: flex;
    align-items: center;
}

.nawigacja-lista {
    display: flex;
    gap: 2rem;
}

.nawigacja-lista a {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.7rem 0;
    position: relative;
}

.nawigacja-lista a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--zloty-przejscie);
    transition: width var(--normalna-animacja);
}

.nawigacja-lista a:hover {
    color: var(--zloty-akcent);
}

.nawigacja-lista a:hover:after {
    width: 100%;
}

.naglowek-guziki {
    display: flex;
    gap: 1.2rem;
}

.burger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 28px;
    position: relative;
    z-index: 1001;
}

.burger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--bialy-napis);
    margin: 6px 0;
    transition: all var(--normalna-animacja);
}

/* Hero Sekcja */
.hero-glowny {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 120px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--glowne-tlo) 0%, var(--pomocnicze-tlo) 100%);
}

.hero-glowny::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="grad" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%23FFD700;stop-opacity:0.05"/><stop offset="100%" style="stop-color:%23FF6B00;stop-opacity:0"/></radialGradient></defs><circle cx="200" cy="200" r="150" fill="url(%23grad)"/><circle cx="800" cy="300" r="100" fill="url(%23grad)"/><circle cx="600" cy="700" r="120" fill="url(%23grad)"/></svg>');
    pointer-events: none;
}

.hero-zawartosc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.hero-lewa {
    flex: 1;
    max-width: 700px;
}

.hero-podtytul {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 2.5rem;
    color: var(--jasny-szary-napis);
    line-height: 1.4;
}

.cechy-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.cecha-punkt {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 1.2rem 1.5rem;
    border-radius: var(--sredni-zaokraglenie);
    transition: all var(--normalna-animacja);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.cecha-punkt:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.3);
}

.cecha-ikona {
    font-size: 2rem;
    flex-shrink: 0;
}

.hero-opis {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    color: var(--szary-napis);
    line-height: 1.8;
}

.hero-akcje {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.bonus-znaczek {
    font-size: 1.1rem;
    color: var(--zloty-akcent);
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(255, 215, 0, 0.1);
    border-radius: var(--maly-zaokraglenie);
}

.hero-prawa {
    flex: 1;
    max-width: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-obraz-kontener {
    position: relative;
}

.hero-obraz-kontener img {
    border-radius: var(--sredni-zaokraglenie);
    box-shadow: var(--karta-cien);
    animation: unoszeniesie 8s ease-in-out infinite;
    border: 3px solid rgba(255, 215, 0, 0.2);
}

.hero-dekoracja {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: var(--zloty-przejscie);
    border-radius: 50%;
    opacity: 0.1;
    animation: rotowanie 10s linear infinite;
}

@keyframes unoszeniesie {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(1deg);
    }
    50% {
        transform: translateY(-10px) rotate(0deg);
    }
    75% {
        transform: translateY(-25px) rotate(-1deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes rotowanie {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.bezpieczenstwo-odznaki {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.bezpieczenstwo-punkt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--sredni-zaokraglenie);
    transition: all var(--normalna-animacja);
}

.bezpieczenstwo-punkt:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-3px);
}

.bezp-ikona {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.bezpieczenstwo-punkt span {
    font-size: 1rem;
    color: var(--szary-napis);
    font-weight: 600;
    text-align: center;
}

/* Tabela funkcji */
.tabela-funkcji {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
}

.tabela-rzad {
    display: flex;
    background: var(--pomocnicze-tlo);
    border-radius: var(--sredni-zaokraglenie);
    overflow: hidden;
    transition: all var(--normalna-animacja);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.tabela-rzad:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.3);
}

.tabela-komorka {
    padding: 1.5rem;
    flex: 1;
}

.tabela-naglowek {
    background: rgba(255, 215, 0, 0.1);
    font-weight: 700;
    color: var(--zloty-akcent);
}

.funkcja-nazwa {
    min-width: 200px;
    font-weight: 600;
    color: var(--zloty-akcent);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bonusy */
.bonusy-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.bonus-karta {
    background: var(--pomocnicze-tlo);
    border-radius: var(--sredni-zaokraglenie);
    padding: 2.5rem;
    box-shadow: var(--karta-cien);
    transition: all var(--normalna-animacja);
    opacity: 0;
    transform: translateY(30px);
    animation: pokazwanie-karty 0.6s forwards;
    border: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.bonus-karta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--zloty-przejscie);
    transform: scaleX(0);
    transition: transform var(--normalna-animacja);
}

.bonus-karta:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 215, 0, 0.3);
}

.bonus-karta:hover::before {
    transform: scaleX(1);
}

.bonus-karta.wyroznienie {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 107, 0, 0.08) 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.bonus-karta.specjalna {
    background: linear-gradient(to right, rgba(255, 107, 0, 0.15), var(--pomocnicze-tlo));
    border-left: 4px solid var(--pomaranczowy-akcent);
}

@keyframes pokazwanie-karty {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bonus-kwota {
    font-size: 2.2rem;
    font-weight: 800;
    background: var(--zloty-przejscie);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.bonus-lista {
    margin-bottom: 2rem;
}

.bonus-lista li {
    margin-bottom: 0.8rem;
    color: var(--szary-napis);
    position: relative;
    padding-left: 1.5rem;
}

.bonus-lista li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--zloty-akcent);
    font-weight: bold;
}

.kod-promocyjny-pole {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--maly-zaokraglenie);
    padding: 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.kod-promocyjny-pole strong {
    color: var(--zloty-akcent);
    font-weight: 800;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
}

.kod-kopiuj {
    background: rgba(255, 215, 0, 0.15);
    color: var(--zloty-akcent);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: var(--maly-zaokraglenie);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--szybka-animacja);
    font-weight: 600;
}

.kod-kopiuj:hover {
    background: rgba(255, 215, 0, 0.25);
    transform: scale(1.05);
}

/* Promocje stałe */
.stale-promocje {
    margin-top: 4rem;
}

.promocje-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.promocja-karta {
    background: var(--pomocnicze-tlo);
    border-radius: var(--sredni-zaokraglenie);
    padding: 2rem;
    box-shadow: var(--karta-cien);
    transition: all var(--normalna-animacja);
    border: 1px solid rgba(255, 215, 0, 0.1);
    min-height: 180px;
}

.promocja-karta:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
}

/* Płatności */
.platnosci-funkcje {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.funkcja-blok {
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--pomocnicze-tlo);
    border-radius: var(--sredni-zaokraglenie);
    padding: 2rem;
    box-shadow: var(--karta-cien);
    transition: all var(--normalna-animacja);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.funkcja-blok:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
}

.funkcja-ikona {
    font-size: 2.2rem;
    color: var(--zloty-akcent);
    flex-shrink: 0;
}

.funkcja-blok ul {
    list-style: none;
}

.funkcja-blok li {
    margin-bottom: 0.8rem;
    color: var(--szary-napis);
    position: relative;
    padding-left: 1.5rem;
}

.funkcja-blok li:before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--zloty-akcent);
    font-size: 0.8rem;
}

.platnosci-metody {
    margin-bottom: 3rem;
}

.platnosci-metody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.metoda-karta {
    background: var(--pomocnicze-tlo);
    border-radius: var(--sredni-zaokraglenie);
    padding: 2rem;
    transition: all var(--normalna-animacja);
    border: 1px solid rgba(255, 215, 0, 0.1);
    cursor: pointer;
}

.metoda-karta:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
}

.metoda-nazwa {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: block;
    color: var(--zloty-akcent);
}

.metoda-szczegoly {
    color: var(--szary-napis);
}

.metoda-szczegoly p {
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.platnosci-notatka {
    background: var(--pomocnicze-tlo);
    border-radius: var(--sredni-zaokraglenie);
    padding: 2rem;
    margin-top: 3rem;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.platnosci-notatka p {
    color: var(--szary-napis);
    line-height: 1.7;
}

/* Aplikacja mobilna */
.mobilna-sekcja {
    display: flex;
    gap: 4rem;
    margin-bottom: 3rem;
}

.mobilna-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.mobilna-funkcje {
    background: var(--pomocnicze-tlo);
    border-radius: var(--sredni-zaokraglenie);
    padding: 2.5rem;
    box-shadow: var(--karta-cien);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.mobilne-lista {
    margin-top: 2rem;
}

.mobilne-lista li {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--maly-zaokraglenie);
    margin-bottom: 1rem;
    transition: all var(--normalna-animacja);
    border-left: 3px solid transparent;
    position: relative;
    padding-left: 2rem;
}

.mobilne-lista li:before {
    content: '▶';
    position: absolute;
    left: 0.5rem;
    color: var(--zloty-akcent);
    font-weight: bold;
}

.mobilne-lista li:hover {
    background: rgba(255, 215, 0, 0.08);
    transform: translateX(8px);
    border-left-color: var(--zloty-akcent);
}

.instrukcje-mobilne {
    margin-top: 2rem;
}

.instrukcja-zakladki {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.instrukcja-przycisk {
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: var(--maly-zaokraglenie);
    color: var(--szary-napis);
    cursor: pointer;
    transition: all var(--szybka-animacja);
    font-weight: 600;
}

.instrukcja-przycisk.aktywny {
    background: rgba(255, 215, 0, 0.15);
    color: var(--zloty-akcent);
}

.instrukcja-przycisk:hover:not(.aktywny) {
    background: rgba(255, 255, 255, 0.12);
}

.instrukcja-tresc {
    display: none;
}

.instrukcja-tresc.aktywna {
    display: block;
}

.instrukcja-tresc ol {
    list-style-type: decimal;
    padding-left: 2rem;
    color: var(--szary-napis);
}

.instrukcja-tresc li {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.mobilna-wizualizacja {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.telefon-mockup {
    width: 320px;
    height: 640px;
    background: #000;
    border-radius: 40px;
    padding: 15px;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2.5rem;
    overflow: hidden;
}

.telefon-mockup img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 30px;
}
.mobilna-uwaga {
background: rgba(255, 215, 0, 0.15);
padding: 1.5rem;
border-radius: var(--maly-zaokraglenie);
text-align: center;
max-width: 350px;
margin-bottom: 2rem;
border: 1px solid rgba(255, 215, 0, 0.3);
}
.mobilna-uwaga p {
color: var(--jasny-szary-napis);
font-size: 1rem;
margin: 0;
font-weight: 600;
}
/* Rejestracja i logowanie */
.konto-kontener {
display: flex;
gap: 3rem;
margin-bottom: 4rem;
}
.rejestracja-kroki {
flex: 2;
display: flex;
flex-direction: column;
gap: 2rem;
}
.krok-element {
display: flex;
background: var(--pomocnicze-tlo);
border-radius: var(--sredni-zaokraglenie);
padding: 2rem;
box-shadow: var(--karta-cien);
transition: all var(--normalna-animacja);
border: 1px solid rgba(255, 215, 0, 0.1);
}
.krok-element:hover {
transform: translateY(-8px);
border-color: rgba(255, 215, 0, 0.3);
}
.krok-numer {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: var(--zloty-przejscie);
color: var(--glowne-tlo);
font-weight: 800;
font-size: 1.4rem;
border-radius: 50%;
margin-right: 2rem;
flex-shrink: 0;
}
.krok-tresc h4 {
margin-bottom: 1rem;
}
.krok-tresc p {
color: var(--szary-napis);
line-height: 1.7;
}
.logowanie-panel {
flex: 1;
background: var(--pomocnicze-tlo);
border-radius: var(--sredni-zaokraglenie);
padding: 2.5rem;
box-shadow: var(--karta-cien);
border: 1px solid rgba(255, 215, 0, 0.1);
}
.logowanie-panel h3 {
margin-bottom: 1.5rem;
}
.logowanie-panel p {
color: var(--szary-napis);
margin-bottom: 1.5rem;
}
.logowanie-lista {
margin-bottom: 2rem;
}
.logowanie-lista li {
color: var(--szary-napis);
margin-bottom: 1rem;
line-height: 1.6;
position: relative;
padding-left: 2rem;
}
.logowanie-lista li:before {
content: '→';
position: absolute;
left: 0;
color: var(--zloty-akcent);
font-weight: bold;
}
.logowanie-guziki {
display: flex;
gap: 1.5rem;
margin: 2rem 0;
}
.logowanie-opinie {
color: var(--szary-napis);
font-style: italic;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
line-height: 1.7;
}
/* Gry */
.gry-kategorie {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
}
.gra-kategoria {
background: var(--pomocnicze-tlo);
border-radius: var(--sredni-zaokraglenie);
padding: 2.5rem;
box-shadow: var(--karta-cien);
position: relative;
transition: all var(--normalna-animacja);
overflow: hidden;
border: 1px solid rgba(255, 215, 0, 0.1);
}
.gra-kategoria:hover {
transform: translateY(-12px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
border-color: rgba(255, 215, 0, 0.3);
}
.gra-kategoria:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 0;
background: var(--zloty-przejscie);
transition: height var(--normalna-animacja);
}
.gra-kategoria:hover:before {
height: 100%;
}
.kategoria-ikona {
margin-bottom: 2rem;
color: var(--zloty-akcent);
font-size: 3rem;
}
.gry-liczba {
display: inline-block;
background: rgba(255, 215, 0, 0.15);
color: var(--zloty-akcent);
padding: 0.8rem 1.5rem;
border-radius: var(--maly-zaokraglenie);
font-weight: 800;
font-size: 1.2rem;
margin-top: 1.5rem;
border: 1px solid rgba(255, 215, 0, 0.3);
}
/* Zakłady sportowe */
.zaklady-funkcje {
margin-bottom: 4rem;
}
.sporty-kategorie {
margin-bottom: 4rem;
}
.sporty-kategorie h3 {
margin-bottom: 2rem;
}
.sporty-lista {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 2rem;
}
.sport-element {
display: flex;
flex-direction: column;
align-items: center;
background: var(--pomocnicze-tlo);
border-radius: var(--sredni-zaokraglenie);
padding: 2rem;
text-align: center;
transition: all var(--normalna-animacja);
border: 1px solid rgba(255, 215, 0, 0.1);
}
.sport-element:hover {
transform: translateY(-8px);
background: rgba(38, 43, 50, 0.9);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
border-color: rgba(255, 215, 0, 0.3);
}
.sport-ikona {
margin-bottom: 1.5rem;
font-size: 2rem;
}
.bonus-uwaga {
color: var(--szary-napis);
font-size: 1rem;
margin-top: 1.5rem;
text-align: center;
}
.bonus-uwaga strong {
color: var(--zloty-akcent);
}
/* Kontakt */
.kontakt-metody {
display: flex;
gap: 2.5rem;
justify-content: center;
margin-bottom: 4rem;
}
.kontakt-karta {
flex: 1;
max-width: 350px;
background: var(--pomocnicze-tlo);
border-radius: var(--sredni-zaokraglenie);
padding: 2.5rem;
box-shadow: var(--karta-cien);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all var(--normalna-animacja);
border: 1px solid rgba(255, 215, 0, 0.1);
}
.kontakt-karta:hover {
transform: translateY(-12px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
border-color: rgba(255, 215, 0, 0.3);
}
.kontakt-ikona {
margin-bottom: 2rem;
font-size: 3rem;
}
.odpowiedz-czas {
font-size: 1rem;
color: var(--zloty-akcent);
margin-bottom: 2rem;
font-weight: 600;
}
/* Odpowiedzialna gra */
.odp-gra-narzedzia, .zewnetrzne-wsparcie, .ochrona-nieletnich {
margin-bottom: 4rem;
}
.narzedzia-siatka, .wsparcie-siatka {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.narzedzie-karta, .wsparcie-karta {
background: var(--pomocnicze-tlo);
border-radius: var(--sredni-zaokraglenie);
padding: 2rem;
box-shadow: var(--karta-cien);
transition: all var(--normalna-animacja);
border: 1px solid rgba(255, 215, 0, 0.1);
}
.narzedzie-karta:hover, .wsparcie-karta:hover {
transform: translateY(-8px);
border-color: rgba(255, 215, 0, 0.3);
}
.narzedzie-karta h4, .wsparcie-karta h4 {
color: var(--zloty-akcent);
margin-bottom: 1rem;
}
.narzedzie-karta p, .wsparcie-karta p {
color: var(--szary-napis);
line-height: 1.7;
}
/* FAQ */
.faq-kontener {
max-width: 900px;
margin: 0 auto;
}
.faq-zakladki {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 4rem;
flex-wrap: wrap;
}
.faq-przycisk {
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.08);
border: none;
border-radius: var(--maly-zaokraglenie);
color: var(--szary-napis);
cursor: pointer;
transition: all var(--szybka-animacja);
font-weight: 600;
}
.faq-przycisk.aktywny {
background: rgba(255, 215, 0, 0.15);
color: var(--zloty-akcent);
}
.faq-przycisk:hover:not(.aktywny) {
background: rgba(255, 255, 255, 0.12);
}
.faq-tresc {
display: none;
}
.faq-tresc.aktywna {
display: block;
}
.faq-element {
background: var(--pomocnicze-tlo);
border-radius: var(--sredni-zaokraglenie);
margin-bottom: 2rem;
overflow: hidden;
border: 1px solid rgba(255, 215, 0, 0.1);
}
.faq-pytanie {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
cursor: pointer;
transition: all var(--szybka-animacja);
}
.faq-pytanie:hover {
background: rgba(255, 255, 255, 0.08);
}
.faq-pytanie h3 {
margin-bottom: 0;
font-size: 1.3rem;
color: var(--bialy-napis);
}
.faq-ikona {
font-size: 1.8rem;
color: var(--zloty-akcent);
transition: all var(--szybka-animacja);
font-weight: bold;
}
.faq-element.aktywny .faq-ikona {
transform: rotate(45deg);
}
.faq-odpowiedz {
padding: 0 2rem 2rem;
display: none;
}
.faq-element.aktywny .faq-odpowiedz {
display: block;
}
.faq-odpowiedz p {
color: var(--szary-napis);
line-height: 1.8;
margin-bottom: 1rem;
}
.faq-opinie {
background: var(--pomocnicze-tlo);
border-radius: var(--sredni-zaokraglenie);
padding: 2.5rem;
margin-top: 4rem;
text-align: center;
box-shadow: var(--karta-cien);
border: 1px solid rgba(255, 215, 0, 0.1);
}
.opinie-siatka {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.opinia-karta {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--sredni-zaokraglenie);
padding: 2rem;
transition: all var(--normalna-animacja);
}
.opinia-karta:hover {
background: rgba(255, 215, 0, 0.08);
transform: translateY(-5px);
}
.opinia-karta h4 {
color: var(--zloty-akcent);
margin-bottom: 1rem;
}
.opinia-karta p {
color: var(--szary-napis);
line-height: 1.7;
}
/* Dołącz sekcja */
.dlaczego-fezbet {
max-width: 900px;
margin: 0 auto 3rem;
}
.zalety-lista {
list-style-type: none;
padding: 0;
}
.zalety-lista li {
position: relative;
padding-left: 2.5rem;
margin-bottom: 1.5rem;
color: var(--szary-napis);
font-size: 1.1rem;
line-height: 1.7;
}
.zalety-lista li:before {
content: '✓';
position: absolute;
left: 0;
color: var(--zloty-akcent);
font-weight: bold;
font-size: 1.3rem;
}
.finalne-akcje {
text-align: center;
margin-top: 4rem;
}
.ostrzezenie {
color: var(--szary-napis);
font-size: 1rem;
margin-top: 2rem;
font-style: italic;
}
/* Stopka */
.strona-stopka {
background: #0A0D11;
padding: 5rem 0 2.5rem;
position: relative;
}
.stopka-glowna {
display: flex;
margin-bottom: 4rem;
gap: 4rem;
}
.stopka-logo {
flex: 1;
max-width: 400px;
}
.stopka-logo img {
margin-bottom: 2rem;
}
.stopka-logo p {
color: var(--szary-napis);
line-height: 1.7;
}
.stopka-menu {
flex: 2;
display: flex;
justify-content: space-between;
}
.stopka-kolumna {
flex: 1;
}
.stopka-kolumna h4 {
color: var(--bialy-napis);
margin-bottom: 2rem;
font-size: 1.3rem;
position: relative;
padding-bottom: 1rem;
}
.stopka-kolumna h4:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--zloty-przejscie);
border-radius: 2px;
}
.stopka-kolumna ul {
display: flex;
flex-direction: column;
gap: 1rem;
}
.stopka-kolumna ul li a {
color: var(--szary-napis);
font-size: 1rem;
transition: all var(--szybka-animacja);
}
.stopka-kolumna ul li a:hover {
color: var(--zloty-akcent);
transform: translateX(5px);
}
.stopka-dol {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 2.5rem;
}
.odp-gra-info {
background: rgba(38, 43, 50, 0.6);
padding: 2rem;
border-radius: var(--sredni-zaokraglenie);
margin-bottom: 2.5rem;
text-align: center;
border: 1px solid rgba(255, 215, 0, 0.1);
}
.prawa-autorskie {
text-align: center;
color: var(--szary-napis);
font-size: 1rem;
}
/* Przycisk na górę */
.gora-guzik {
position: fixed;
bottom: 40px;
right: 40px;
width: 60px;
height: 60px;
background: var(--zloty-przejscie);
color: var(--glowne-tlo);
border: none;
border-radius: 50%;
font-size: 28px;
cursor: pointer;
box-shadow: var(--guzik-cien);
opacity: 0;
transform: translateY(30px);
transition: all var(--normalna-animacja);
z-index: 999;
}
.gora-guzik.widoczny {
opacity: 1;
transform: translateY(0);
}
.gora-guzik:hover {
transform: translateY(-8px) scale(1.1);
box-shadow: 0 12px 30px rgba(255, 215, 0, 0.6);
}
/* Media Queries */
@media (max-width: 1024px) {
.naglowek-srodek {
padding: 0 1.5rem;
}
.burger-menu {
    display: block;
}

.nawigacja-lista {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 450px;
    height: 100vh;
    background: var(--glowne-tlo);
    flex-direction: column;
    padding: 7rem 2.5rem 2.5rem;
    transition: right var(--normalna-animacja);
    z-index: 1000;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}

.nawigacja-lista.aktywny {
    right: 0;
}

.burger-menu.aktywny span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 8px);
}

.burger-menu.aktywny span:nth-child(2) {
    opacity: 0;
}

.burger-menu.aktywny span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -8px);
}

.hero-zawartosc {
    flex-direction: column;
}

.hero-lewa {
    max-width: 100%;
    text-align: center;
}

.cechy-lista {
    justify-content: center;
}

.hero-akcje {
    align-items: center;
}

.hero-prawa {
    max-width: 450px;
    margin: 0 auto;
}

.konto-kontener {
    flex-direction: column;
}

.mobilna-sekcja {
    flex-direction: column;
}

.mobilna-wizualizacja {
    order: -1;
    margin-bottom: 3rem;
}

.stopka-glowna {
    flex-direction: column;
}

.stopka-logo {
    max-width: 100%;
    text-align: center;
    margin-bottom: 3rem;
}
}
@media (max-width: 768px) {
.naglowek-guziki {
display: none;
}
.bonusy-siatka, 
.platnosci-metody, 
.gry-kategorie,
.sporty-lista,
.promocje-siatka,
.narzedzia-siatka,
.wsparcie-siatka,
.opinie-siatka {
    grid-template-columns: 1fr;
}

.kontakt-metody {
    flex-direction: column;
    align-items: center;
}

.kontakt-karta {
    width: 100%;
    max-width: 100%;
}

.funkcja-blok {
    flex-direction: column;
    text-align: center;
}

.krok-element {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.krok-numer {
    margin-right: 0;
    margin-bottom: 1.5rem;
}

.logowanie-guziki {
    flex-direction: column;
}

.faq-zakladki {
    flex-direction: column;
}

.faq-przycisk {
    width: 100%;
}

.stopka-menu {
    flex-direction: column;
}

.stopka-kolumna {
    margin-bottom: 2.5rem;
    text-align: center;
}

.stopka-kolumna h4:after {
    left: 50%;
    transform: translateX(-50%);
}

.instrukcja-zakladki {
    flex-direction: column;
}

.cechy-lista {
    grid-template-columns: 1fr;
}

.tabela-rzad {
    flex-direction: column;
}

.funkcja-nazwa {
    min-width: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}
}
/* Animacje dodatkowe */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bonus-karta, .gra-kategoria, .kontakt-karta, .krok-element, .cecha-punkt {
opacity: 0;
animation: fade-in-up 0.6s forwards;
animation-delay: calc(var(--animation-order) * 0.15s);
}
.promocja-karta {
min-height: 200px;
}