:root{
    --dark-bg: #111;
    --pink: #ff4ec1;
    --purple: #8a2be2;
    --accent: linear-gradient(45deg,#ff4ec1,#8a2be2);
    --card-bg: rgba(20,20,20,0.4);
    --muted: #aaa;
    --green: #28a745;
    --red: #dc3545;
    --nav-width: 250px;
    --header-h: 70px;
    --max-content-width: 1000px;
}

/* Reset + base */
*{box-sizing:border-box;margin:0;padding:0;font-family:'Montserrat',sans-serif}
html,body{height:100%}
body{
    background:var(--dark-bg);
    color:#fff;
    overflow-x:hidden;
    position:relative;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Header */
header{
    position:fixed;
    top:0;left:0;
    width:100%;
    height:var(--header-h);
    background:rgba(20,20,20,0.85);
    backdrop-filter: blur(10px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    z-index:2000;
}
.logo{font-size:1.8rem;font-weight:700;background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-container{display:flex;align-items:center;gap:10px}
.logo-container img{height:50px;width:auto}

/* Menu button */
.menu-btn{
    position:fixed;
    top:20px;
    left:20px;
    font-size:1.5rem;
    cursor:pointer;
    transition:transform .18s ease;
    z-index:2100;
    color:#fff;
}
.menu-btn:hover{transform:scale(1.12)}

/* Side nav */
nav{
    position:fixed;
    top:0;
    left:calc(-1 * var(--nav-width));
    width:var(--nav-width);
    height:100%;
    background:rgba(30,30,30,0.95);
    backdrop-filter: blur(10px);
    display:flex;
    flex-direction:column;
    padding-top:calc(var(--header-h) + 30px);
    transition:left .28s ease;
    z-index:1999;
}
nav.active{left:0}
nav a{
    color:#fff;
    text-decoration:none;
    padding:15px 20px;
    font-size:1.05rem;
    transition:background .18s, color .18s;
    display:block;
}
nav a:hover{
    background:var(--accent);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.menu-footer{
    margin-top:auto;
    padding:15px 20px;
    font-size:.9rem;
    color:var(--muted);
    text-align:center;
    border-top:1px solid rgba(255,255,255,0.06);
}

/* Main area */
main{padding-top:calc(var(--header-h) + 30px); text-align:center; min-height:100vh}
.container{max-width:var(--max-content-width);margin:40px auto;padding:0 18px}

/* Cards / sections */
.section{
    max-width:var(--max-content-width);
    margin:40px auto;
    padding:20px;
    border-radius:12px;
    background:var(--card-bg);
    backdrop-filter: blur(8px);
    transition: transform .6s ease, opacity .6s ease;
    opacity:0;
    transform:translateY(40px);
}
.section.visible{opacity:1;transform:translateY(0)}
.section h2{font-size:1.8rem;margin-bottom:12px;background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.section p{font-size:1.05rem;line-height:1.6;color:#eee}

/* Project / team cards */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}
.team-card{background:#222;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s}
.team-card img{width:100%;height:200px;object-fit:cover;transition:transform .5s}
.team-card:hover img{transform:scale(1.06)}
.team-card .info{padding:12px}
.team-card .info h3{font-size:1.1rem;margin-bottom:6px}
.team-card .info p{font-size:.95rem;color:var(--muted)}

/* Banner */
.banner{position:relative;width:100%;height:300px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;overflow:hidden}
.banner img{width:100%;height:100%;object-fit:cover;filter:brightness(.45)}
.banner .text{position:absolute;color:#fff;font-size:2.5rem;font-weight:700;text-align:center;animation:slideIn 1.2s ease forwards}
@keyframes slideIn{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}

/* Status items */
.status-card{background:#222;padding:22px;border-radius:12px;margin:10px auto;max-width:500px;font-size:1.03rem}
.status-card h2{margin-bottom:12px}
.status-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;margin-bottom:10px;background:#333}
.status-item span{display:flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;background:#666}
.status-online .dot{background:var(--green)}
.status-offline .dot{background:var(--red)}

/* Canvas fireflies (positioning default) */
.fireflies-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* Small screens */
@media (max-width:700px){
    .logo{font-size:1.2rem}
    .banner .text{font-size:1.7rem}
    .menu-btn{left:12px;top:14px}
    nav{width:100%;left:100%}
    nav.active{left:0}
    nav{padding-top:calc(var(--header-h) + 18px)}
}

/* Utility */
.text-center{text-align:center}
.small{font-size:.9rem;color:var(--muted)}

.social-bar {
  position: fixed;
  top: 10px;
  right: 20px;
  display: flex;
  gap: 15px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.1);
  padding: 5px 10px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.social-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 6vw, 36px);
  color: #555;
  text-decoration: none;
  transition: 0.3s, transform 0.3s ease;
}

.social-bar a:hover {
  transform: scale(1.2);
}

/* Media query dla telefonów */
@media (max-width: 700px) {
  .social-bar {
    top: 80px; /* tu możesz dopasować, aby nie nachodził na napis */
  }
}


/* Kolory podświetlenia konkretnych ikon */
.social-bar a.discord:hover { color: #7289da; }
.social-bar a.youtube:hover { color: #ff0000; }
.social-bar a.patronite:hover { color: #00ec47; }
.social-bar a.twitter:hover { color: #ffffff; }



/* Kolory podświetlenia dla konkretnych ikon */
.social-bar a.discord:hover {
  color: #7289da;
}

.social-bar a.youtube:hover {
  color: #ff0000;
}

.social-bar a.patronite:hover {
  color: #00ec47;
}

.social-bar a.twitter:hover {
  color: #ffffff;
}