/* ===========================================
   FREE TO PLAY OFFICIAL MERCH
=========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#0b0b0b;

    color:#ffffff;

    overflow-x:hidden;

}

/* ===============================
   TŁO
================================ */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at 20% 20%,rgba(95,255,70,.08),transparent 20%),
    radial-gradient(circle at 80% 10%,rgba(95,255,70,.05),transparent 20%),
    radial-gradient(circle at 50% 90%,rgba(95,255,70,.08),transparent 25%);

    pointer-events:none;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);

    background-size:40px 40px;

    pointer-events:none;

    z-index:-1;

}

/* ===============================
   SCROLLBAR
================================ */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#67ff45;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#7dff61;

}

/* ===============================
   HERO
================================ */

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px 20px;

    background:
    linear-gradient(180deg,#163414 0%,#0b0b0b 100%);

}

.overlay{

    display:none;

}

.hero-content{

    max-width:900px;

    width:100%;

}

.logo{

    display:block;

    width:190px;

    margin:0 auto 30px;

    transition:.35s;

}

.logo:hover{

    transform:scale(1.05);

}

.badge{

    display:inline-block;

    background:#67ff45;

    color:#111;

    padding:10px 25px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:30px;

}

.hero h1{

    font-size:76px;

    font-weight:800;

    color:#67ff45;

    text-shadow:0 0 25px rgba(103,255,69,.35);

    margin-bottom:25px;

}

.hero p{

    color:#d2d2d2;

    font-size:24px;

    line-height:1.8;

    margin-bottom:45px;

}

.buttons{

    display:flex;

    justify-content:center;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    padding:18px 42px;

    background:#67ff45;

    color:#111;

    border-radius:12px;

    font-weight:700;

    transition:.3s;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 0 30px rgba(103,255,69,.40);

}

/* ===========================================
   STATYSTYKI
=========================================== */

.statistics{

    max-width:1400px;

    margin:-70px auto 80px;

    padding:0 25px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:30px;

    position:relative;

    z-index:20;

}

.stat{

    background:#171717;

    border:1px solid #2b2b2b;

    border-radius:18px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.stat:hover{

    transform:translateY(-8px);

    border-color:#67ff45;

    box-shadow:0 0 30px rgba(103,255,69,.18);

}

.stat h2{

    font-size:46px;

    color:#67ff45;

    margin-bottom:10px;

    font-weight:700;

}

.stat span{

    color:#bbbbbb;

    font-size:16px;

}

/* ===========================================
   TYTUŁ
=========================================== */

.title{

    text-align:center;

    padding:20px;

    margin-bottom:40px;

}

.title h2{

    font-size:50px;

    margin-bottom:15px;

    font-weight:800;

}

.title p{

    color:#a8a8a8;

    font-size:18px;

}

/* ===========================================
   WYSZUKIWARKA
=========================================== */

.toolbar{

    max-width:1400px;

    margin:auto;

    padding:20px 30px 60px;

}

#search{

    width:100%;

    height:60px;

    border:none;

    outline:none;

    background:#181818;

    color:white;

    border-radius:14px;

    padding:0 25px;

    font-size:18px;

    border:2px solid #2d2d2d;

    transition:.3s;

}

#search:focus{

    border-color:#67ff45;

    box-shadow:0 0 20px rgba(103,255,69,.25);

}

/* ===========================================
   FILTRY
=========================================== */

.filters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:25px;

}

.filter{

    border:none;

    background:#191919;

    color:white;

    padding:14px 26px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s;

    border:1px solid #2f2f2f;

}

.filter:hover{

    background:#67ff45;

    color:#111;

    transform:translateY(-3px);

}

.filter.active{

    background:#67ff45;

    color:#111;

}

/* ===========================================
   GALERIA PRODUKTÓW
=========================================== */

.gallery{

    max-width:1500px;

    margin:0 auto;

    padding:20px 30px 80px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.card{

    position:relative;

    overflow:hidden;

    background:rgba(24,24,24,.92);

    border:1px solid #2c2c2c;

    border-radius:22px;

    transition:.35s ease;

}

.card:hover{

    transform:translateY(-10px);

    border-color:#67ff45;

    box-shadow:
    0 15px 40px rgba(0,0,0,.45),
    0 0 25px rgba(103,255,69,.18);

}

.card img{

    width:100%;

    height:320px;

    object-fit:contain;

    background:#111;

    padding:30px;

    transition:.35s;

}

.card:hover img{

    transform:scale(1.06);

}

.card-content{

    padding:25px;

}

.card-content h2{

    font-size:28px;

    margin-bottom:10px;

    font-weight:700;

}

.card-content p{

    color:#bdbdbd;

    font-size:15px;

    line-height:1.7;

    margin-bottom:25px;

}

.card-content button{

    width:100%;

    border:none;

    background:#67ff45;

    color:#111;

    padding:15px;

    border-radius:12px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.card-content button:hover{

    background:white;

    transform:translateY(-2px);

}

/* Efekt światła */

.card::before{

    content:"";

    position:absolute;

    top:-150%;

    left:-150%;

    width:300%;

    height:300%;

    background:
    linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transition:.8s;

}

.card:hover::before{

    top:100%;

    left:100%;

}

/* ===========================================
   WSTĄŻKI
=========================================== */

.ribbon{

    position:absolute;

    top:18px;

    right:-45px;

    width:180px;

    text-align:center;

    padding:8px;

    transform:rotate(45deg);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    color:white;

    z-index:5;

}

.ribbon.bestseller{

    background:#ff9800;

}

.ribbon.new{

    background:#2ecc71;

}

/* ===========================================
   ANIMACJE
=========================================== */

.card{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s forwards;

}

.card:nth-child(2){animation-delay:.1s;}
.card:nth-child(3){animation-delay:.2s;}
.card:nth-child(4){animation-delay:.3s;}
.card:nth-child(5){animation-delay:.4s;}
.card:nth-child(6){animation-delay:.5s;}
.card:nth-child(7){animation-delay:.6s;}
.card:nth-child(8){animation-delay:.7s;}
.card:nth-child(9){animation-delay:.8s;}
.card:nth-child(10){animation-delay:.9s;}
.card:nth-child(11){animation-delay:1s;}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ===========================================
   LIGHTBOX
=========================================== */

#lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.94);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    cursor:pointer;

    animation:fadeIn .3s;

}

#preview{

    max-width:90%;

    max-height:90%;

    border-radius:20px;

    background:#111;

    padding:20px;

    box-shadow:
    0 0 40px rgba(103,255,69,.25);

}

.close{

    position:absolute;

    top:25px;

    right:35px;

    color:white;

    font-size:55px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.close:hover{

    color:#67ff45;

    transform:rotate(90deg);

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ===========================================
   JUŻ WKRÓTCE
=========================================== */

.coming-soon{

    max-width:1400px;

    margin:120px auto;

    padding:30px;

    text-align:center;

}

.coming-soon h2{

    font-size:46px;

    color:#67ff45;

    margin-bottom:15px;

}

.coming-soon p{

    color:#bdbdbd;

    margin-bottom:45px;

    font-size:18px;

}

.coming-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}

.coming-card{

    background:#181818;

    border:1px solid #2d2d2d;

    border-radius:20px;

    padding:35px;

    transition:.35s;

}

.coming-card:hover{

    transform:translateY(-8px);

    border-color:#67ff45;

    box-shadow:0 0 25px rgba(103,255,69,.18);

}

.coming-card span{

    font-size:55px;

    display:block;

    margin-bottom:20px;

}

.coming-card h3{

    font-size:22px;

}

/* ===========================================
   RESPONSYWNOŚĆ
=========================================== */

@media(max-width:992px){

    .hero h1{

        font-size:58px;

    }

    .hero p{

        font-size:20px;

    }

    .statistics{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .hero{

        padding:60px 20px;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:18px;

    }

    .logo{

        width:150px;

    }

    .buttons{

        flex-direction:column;

        gap:15px;

    }

    .gallery{

        grid-template-columns:1fr;

        padding:20px;

    }

    .statistics{

        grid-template-columns:1fr;

    }

    .coming-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .title h2{

        font-size:34px;

    }

    .card img{

        height:240px;

    }

    .coming-soon h2{

        font-size:34px;

    }

}

/* ===========================================
   PREMIUM EFFECTS
=========================================== */

/* Efekt szkła */

.stat,
.card,
.coming-card{

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    background:rgba(22,22,22,.82);

}

/* Zielona poświata po najechaniu */

.card:hover,
.stat:hover,
.coming-card:hover{

    box-shadow:
        0 15px 45px rgba(0,0,0,.45),
        0 0 35px rgba(103,255,69,.18);

}

/* Delikatna animacja logo */

.logo{

    animation:floatLogo 5s ease-in-out infinite;

}

@keyframes floatLogo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Świecący napis */

.hero h1{

    animation:titleGlow 3s ease-in-out infinite alternate;

}

@keyframes titleGlow{

    from{

        text-shadow:
            0 0 12px rgba(103,255,69,.25);

    }

    to{

        text-shadow:
            0 0 40px rgba(103,255,69,.60);

    }

}

/* Przyciski */

.btn,
.card-content button{

    position:relative;

    overflow:hidden;

}

.btn::before,
.card-content button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transition:.7s;

}

.btn:hover::before,
.card-content button:hover::before{

    left:150%;

}

/* Delikatne powiększenie zdjęcia */

.card img{

    transition:

        transform .4s,

        filter .4s;

}

.card:hover img{

    transform:scale(1.08);

    filter:brightness(1.05);

}

/* Zielona ramka */

.card{

    position:relative;

}

.card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    border:1px solid transparent;

    transition:.35s;

    pointer-events:none;

}

.card:hover::after{

    border-color:rgba(103,255,69,.35);

}

/* Miękkie zaznaczenie tekstu */

::selection{

    background:#67ff45;

    color:#111;

}

/* Linki */

a{

    transition:.3s;

}

a:hover{

    color:#67ff45;

}

/* Płynniejsze przewijanie */

section{

    scroll-margin-top:80px;

}

/* ===========================================
   PREMIUM PRODUCT CARDS V2
=========================================== */

/* Delikatny gradient tła kart */

.card{

    background:
        linear-gradient(
            180deg,
            rgba(32,32,32,.96),
            rgba(18,18,18,.96)
        );

}

/* Górna część zdjęcia */

.card img{

    background:
        radial-gradient(
            circle at center,
            #202020 0%,
            #111111 100%
        );

}

/* Nazwa produktu */

.card-content h2{

    color:#ffffff;

    font-size:30px;

    font-weight:700;

    transition:.3s;

}

.card:hover h2{

    color:#67ff45;

}

/* Opis */

.card-content p{

    color:#b8b8b8;

    line-height:1.8;

}

/* Separator */

.card-content{

    position:relative;

}

.card-content::before{

    content:"";

    position:absolute;

    top:0;

    left:25px;

    width:60px;

    height:3px;

    border-radius:50px;

    background:#67ff45;

}

/* Przycisk */

.card-content button{

    margin-top:20px;

    letter-spacing:.5px;

    font-size:15px;

    border-radius:14px;

}

/* Zielona poświata pod kartą */

.card:hover{

    transform:
        translateY(-10px)
        scale(1.02);

}

/* Ikony w kartach */

.card span{

    color:#67ff45;

}

/* Wstążki */

.ribbon{

    box-shadow:

        0 0 15px rgba(0,0,0,.4);

}

.ribbon.bestseller{

    background:linear-gradient(
        90deg,
        #ff9800,
        #ffb64d
    );

}

.ribbon.new{

    background:linear-gradient(
        90deg,
        #25c95b,
        #67ff45
    );

}

/* Efekt kliknięcia */

.card-content button:active{

    transform:scale(.97);

}

/* Efekt pojawiania */

.gallery .card{

    animation-duration:.7s;

}

/* ===========================================
   FOOTER PREMIUM
=========================================== */

footer{

    margin-top:120px;

    background:
        linear-gradient(
            180deg,
            #101010,
            #080808
        );

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-container{

    max-width:1400px;

    margin:auto;

    padding:70px 30px;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-logo{

    width:140px;

    margin-bottom:25px;

    transition:.35s;

}

.footer-logo:hover{

    transform:scale(1.05);

}

.footer-container h2{

    color:#67ff45;

    margin-bottom:20px;

    font-size:28px;

}

.footer-container h3{

    color:#ffffff;

    margin-bottom:20px;

    font-size:20px;

}

.footer-container p{

    color:#bfbfbf;

    line-height:1.8;

    margin-bottom:12px;

}

.footer-container a{

    color:#bfbfbf;

    text-decoration:none;

    transition:.3s;

}

.footer-container a:hover{

    color:#67ff45;

    padding-left:5px;

}

/* ===============================
   SOCIAL MEDIA
================================ */

.socials{

    display:flex;

    gap:15px;

    margin-top:25px;

    flex-wrap:wrap;

}

.social{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#1b1b1b;

    border:1px solid #2f2f2f;

    color:white;

    font-size:20px;

    transition:.35s;

}

.social:hover{

    background:#67ff45;

    color:#111;

    transform:translateY(-5px);

    box-shadow:0 0 25px rgba(103,255,69,.30);

}

/* ===============================
   COPYRIGHT
================================ */

.copyright{

    border-top:1px solid rgba(255,255,255,.06);

    text-align:center;

    padding:25px;

    color:#8c8c8c;

    font-size:14px;

}

/* ===============================
   ODDZIELENIE SEKCJI
================================ */

section{

    position:relative;

}

section::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-40px;

    transform:translateX(-50%);

    width:120px;

    height:3px;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        transparent,
        #67ff45,
        transparent
    );

    opacity:.5;

}

/* Hero bez linii */

.hero::after{

    display:none;

}

/* Footer bez linii */

footer::after{

    display:none;

}

/* ===============================
   RESPONSYWNOŚĆ STOPKI
================================ */

@media(max-width:900px){

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:0 auto 25px;

        display:block;

    }

    .socials{

        justify-content:center;

    }

}

@media(max-width:600px){

    .footer-container{

        padding:50px 20px;

    }

    .social{

        width:46px;

        height:46px;

        font-size:18px;

    }

}

/* ===========================================
   FINAL PREMIUM
=========================================== */

/* Maksymalna szerokość sekcji */

.hero-content,
.statistics,
.toolbar,
.gallery,
.coming-soon,
.footer-container{

    width:min(1500px,92%);

    margin-inline:auto;

}

/* Płynniejsze przewijanie */

img{

    user-select:none;

    -webkit-user-drag:none;

}

/* Wszystkie przejścia */

*{

    transition:

        background-color .25s ease,

        color .25s ease,

        border-color .25s ease,

        box-shadow .25s ease;

}

/* Efekt na kartach */

.card{

    will-change:transform;

}

.card:hover{

    z-index:5;

}

/* Obramowanie zdjęć */

.card img{

    border-bottom:1px solid rgba(255,255,255,.05);

}

/* Zielony pasek */

.title h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:18px auto 0;

    border-radius:20px;

    background:#67ff45;

}

/* Zielone liczby */

.statistics h2{

    text-shadow:

        0 0 18px rgba(103,255,69,.25);

}

/* Płynniejsze przyciski */

button,
.btn{

    cursor:pointer;

    font-family:inherit;

}

/* Focus */

button:focus,
.btn:focus,
input:focus{

    outline:none;

}

/* Pole wyszukiwarki */

#search::placeholder{

    color:#8d8d8d;

}

/* Lekkie zaokrąglenia */

.card,
.stat,
.coming-card{

    border-radius:24px;

}

/* Obrazki */

img{

    max-width:100%;

    display:block;

}

/* Linki */

a{

    text-decoration:none;

}

/* Stopka */

footer{

    position:relative;

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:300px;

    height:2px;

    background:#67ff45;

    opacity:.4;

}

/* Powrót do góry */

#toTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#67ff45;

    color:#111;

    font-size:22px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 0 25px rgba(103,255,69,.30);

    opacity:0;

    pointer-events:none;

    transition:.35s;

    z-index:999;

}

#toTop.show{

    opacity:1;

    pointer-events:auto;

}

#toTop:hover{

    transform:translateY(-5px);

}

/* Bardzo duże monitory */

@media(min-width:1800px){

    .gallery{

        grid-template-columns:repeat(4,1fr);

    }

}

/* Tablety */

@media(max-width:900px){

    .gallery{

        grid-template-columns:repeat(2,1fr);

    }

}

/* Telefony */

@media(max-width:650px){

    .gallery{

        grid-template-columns:1fr;

    }

    .hero h1{

        font-size:38px;

    }

    .hero p{

        font-size:17px;

    }

    .title h2{

        font-size:34px;

    }

}

/* ===========================================
   KONIEC STYLE.CSS
=========================================== */