:root{
    --bg-main:#0a0a0a;
    --bg-overlay:rgba(15,23,42,0.75);
    --primary:#6366f1;
    --primary-hover:#4f46e5;
    --accent:#818cf8;
    --text-main:#ffffff;
    --text-muted:#a3a3a3;
    --border-color:rgba(99,102,241,0.2);
    --card-bg:rgba(20,20,20,0.6);
    --hover-shadow:0 20px 30px -10px rgba(99,102,241,0.25);
    --transition:all 0.3s cubic-bezier(0.4,0,0.2,1)
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
    scroll-behavior:smooth;
    /* ZABEZPIECZENIE: Brak możliwości zaznaczania tekstu i przeciągania */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-user-drag: none;
}

body{
    background-color:var(--bg-main);
    color:var(--text-main);
    overflow-x:hidden;
    line-height:1.6;
    position:relative
}

body::before{
    content:'';
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;
    filter:blur(15px) brightness(0.3) hue-rotate(180deg);
    z-index:-2;
    transform:scale(1.1)
}

header{position:fixed;top:0;left:0;width:100%;padding:1.2rem 5%;display:flex;justify-content:space-between;align-items:center;background:rgba(10,10,10,0.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);z-index:1000}
.logo{font-size:1.5rem;font-weight:800;color:var(--text-main);display:flex;align-items:center}
.logo-icon{margin-right:10px;color:var(--primary)}
.dot{color:var(--primary)}

nav ul{display:flex;align-items:center;gap:2rem;list-style:none}
nav a.nav-link{color:var(--text-muted);text-decoration:none;font-weight:600;font-size:0.95rem;transition:var(--transition)}
nav a.nav-link:hover{color:var(--primary)}
.btn-nav{padding:0.6rem 1.5rem;background:rgba(99,102,241,0.1);color:var(--primary);text-decoration:none;border-radius:6px;font-weight:700;border:1px solid var(--border-color);transition:var(--transition)}
.btn-nav:hover{background:var(--primary);color:white}

.mobile-menu-icon{display:none;flex-direction:column;justify-content:space-between;width:30px;height:20px;cursor:pointer;z-index:1001}
.mobile-menu-icon div{width:100%;height:2px;background-color:var(--text-main);transition:0.4s;border-radius:2px}

.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8rem 5% 4rem;text-align:center}
.hero-content{max-width:800px;margin:0 auto}
.badge{background:rgba(99,102,241,0.1);color:var(--primary);padding:0.5rem 1rem;border-radius:50px;font-size:0.85rem;font-weight:600;border:1px solid var(--border-color);display:inline-flex;align-items:center;gap:8px;margin-bottom:2rem}
.status-dot{width:8px;height:8px;background:var(--primary);border-radius:50%;box-shadow:0 0 10px var(--primary);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(99,102,241,0.7)}70%{box-shadow:0 0 0 10px rgba(99,102,241,0)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}}

.hero h1{font-size:3.5rem;font-weight:900;line-height:1.1;margin-bottom:1.5rem}
.text-gradient{background:linear-gradient(135deg,var(--primary)0%,var(--accent)100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.25rem;color:var(--text-muted);margin-bottom:2.5rem}

.hero-stats{display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:3rem}
.separator{width:1px;height:40px;background:var(--border-color)}
.h-stat strong{display:block;font-size:1.8rem;color:var(--text-main);font-weight:800}

.hero-buttons{display:flex;gap:1rem;justify-content:center}
.btn{padding:0.9rem 2rem;border-radius:8px;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;gap:10px;transition:var(--transition)}
.btn-primary{background:var(--primary);color:white;box-shadow:0 4px 20px rgba(99,102,241,0.4)}
.btn-secondary{background:transparent;border:1px solid var(--border-color);color:var(--text-main)}

section{padding:6rem 5%}
.section-header{text-align:center;margin-bottom:4rem}
.section-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem}
.section-subtitle{color:var(--text-muted);font-size:1.1rem}

.grid, .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem}
.card, .service-card{background:var(--card-bg);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;transition:var(--transition)}
.card:hover, .service-card:hover{transform:translateY(-7px);border-color:var(--primary);box-shadow:var(--hover-shadow)}

.service-card{padding:2.5rem}
.icon-box{width:60px;height:60px;background:rgba(99,102,241,0.1);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.8rem;margin-bottom:1.5rem;border:1px solid var(--border-color)}

.card-image{position:relative;height:220px;overflow:hidden}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;pointer-events: none}
.card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(10,10,10,0.8);display:flex;justify-content:center;align-items:center;opacity:0;transition:var(--transition)}
.card-overlay i{color:white;font-size:2rem;background:var(--primary);width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.card:hover .card-overlay{opacity:1}

.card-body{padding:1.5rem}
.card-meta{color:var(--primary);font-weight:700;text-transform:uppercase;font-size:0.75rem;margin-bottom:0.5rem}

.video-wrapper iframe{width:100%;height:220px;border:none}

.faq-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.faq-item{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;transition:0.3s}
.faq-question{width:100%;text-align:left;background:none;border:none;padding:1.5rem;font-size:1.1rem;font-weight:600;color:white;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease-out;padding:0 1.5rem}
.faq-answer p{padding-bottom:1.5rem;color:var(--text-muted)}
.faq-item.active{border-color:var(--primary)}

.skills-wrapper{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}
.skill-info{display:flex;justify-content:space-between;margin-bottom:0.5rem;font-weight:600}
.progress-bg{width:100%;height:10px;background:rgba(255,255,255,0.05);border-radius:20px;border:1px solid var(--border-color);overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:20px;box-shadow:0 0 15px rgba(99,102,241,0.4)}

.about-wrapper{background:var(--card-bg);padding:4rem;border-radius:20px;border:1px solid var(--border-color);max-width:900px;margin:0 auto}
.about-tags{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}
.about-tags span{background:rgba(99,102,241,0.1);padding:6px 14px;border-radius:20px;font-size:0.85rem;color:var(--primary);border:1px solid var(--border-color);font-weight:600}

.contact-box{text-align:center;max-width:700px;margin:0 auto;padding:5rem 2rem;background:var(--card-bg);border-radius:24px;border:1px solid var(--border-color)}
.discord-btn{position:relative;background:var(--primary);color:white;border:none;padding:1rem 3rem;border-radius:50px;font-size:1.4rem;font-weight:700;cursor:pointer;transition:0.3s;box-shadow:0 10px 30px rgba(99,102,241,0.4)}
.btn-glow{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(255,255,255,0.4),transparent);transform:skewX(-20deg) translateX(-150%);transition:0.5s}
.discord-btn:hover .btn-glow{transform:skewX(-20deg) translateX(150%)}

footer{padding:4rem 5% 2rem;border-top:1px solid var(--border-color);text-align:center;background:rgba(10,10,10,0.95)}
.security-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(99,102,241,0.1);border:1px solid var(--border-color);padding:0.8rem 1.5rem;border-radius:50px;margin-bottom:2rem;color:var(--primary);font-weight:600}

.hidden{opacity:0;transform:translateY(30px);transition:0.6s ease}
.show{opacity:1;transform:translateY(0)}

.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background:rgba(10,10,10,0.98);backdrop-filter:blur(10px)}
.modal-content{margin:auto;display:block;max-width:90%;max-height:90vh;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid var(--border-color);border-radius:8px}
.close{position:absolute;top:20px;right:30px;color:white;font-size:40px;cursor:pointer}

@media(max-width:768px){
    .hero h1{font-size:2.2rem}
    nav ul{display:none}
    .mobile-menu-icon{display:flex}
    .grid, .services-grid{grid-template-columns:1fr}
}