/* ====== Zielona Alkaida — Globalny styl ====== */
:root{
  --bg:#121212;
  --text:#E0E0E0;
  --accent:#32CD32;
  --card:#1E1E1E;
  --muted:#9AA0A6;
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1200px 600px at 70% 20%, rgba(18,18,18,.15) 0%, rgba(18,18,18,.75) 60%, rgba(18,18,18,.9) 100%),
    url('/images/main.jpg');
  background-size:cover; background-position:center; background-attachment:fixed;
}

/* ====== Elementy ogólne ====== */
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block; border-radius:12px}
button{cursor:pointer}
.container{max-width:1120px; margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}
.ip{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}

/* ====== BOX + Glow tylko na kartach/boxach ====== */
.box{
  position:relative; background:linear-gradient(180deg, rgba(30,30,30,.95), rgba(30,30,30,.85));
  border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
  transition: box-shadow .25s ease, border-color .25s ease, transform .15s ease;
  will-change: box-shadow, transform;
}
.box--glow{box-shadow: 0 0 0 1px rgba(50,205,50,.18) inset, 0 0 10px rgba(50,205,50,.15), var(--shadow)}
.box--glow:hover{border-color:rgba(50,205,50,.60); box-shadow:0 0 0 2px rgba(50,205,50,.75) inset, 0 0 18px rgba(50,205,50,.45), 0 0 36px rgba(50,205,50,.35), var(--shadow); transform: translateY(-1px)}
@media (prefers-reduced-motion: reduce){ .box{transition:none} }

/* ====== Nawigacja ====== */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px); background:rgba(18,18,18,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex; align-items:center; gap:16px; padding:14px 18px}
.logo{display:flex; align-items:center; gap:10px; color:var(--text)}
.logo img{width:32px; height:32px; object-fit:cover; border-radius:8px; outline:1px solid rgba(50,205,50,.35)}
.brand{font-weight:600; letter-spacing:.2px}
.nav-left{display:flex; align-items:center; gap:16px}
.nav-right{margin-left:auto; display:flex; align-items:center}
.nav-group{display:flex; align-items:center; gap:10px}
.nav-group-label{font-size:13px; color:var(--muted); margin-right:4px}
.nav-links{display:flex; gap:8px; flex-wrap:wrap}
.nav-links a{padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(30,30,30,.65); font-size:14px; opacity:.95}
.nav-links a:hover{border-color:rgba(255,255,255,.18)}
.nav-links a.active{border-color:rgba(50,205,50,.55); box-shadow:0 0 0 1px rgba(50,205,50,.25) inset}

/* ====== Hero ====== */
.hero{padding:28px 18px 8px}
.hero .hero-card{overflow:hidden}
.hero-stripes{position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(255,255,255,0) 10px 24px); opacity:.25}
.hero-top{padding:28px; display:grid; grid-template-columns: 1fr; gap:16px}
.hero h1{margin:0 0 8px; font-size:clamp(28px,4vw,40px); letter-spacing:.2px}
.hero p{margin:0; color:var(--muted)}
@media(min-width:860px){ .hero-top{grid-template-columns:1fr auto} }

/* ====== IP / CTA ====== */
.ip-box{display:flex; gap:10px; align-items:center; background:#161616; border:1px solid rgba(255,255,255,.06); padding:10px 12px; border-radius:12px}
.btn{padding:10px 14px; border-radius:10px; border:1px solid rgba(50,205,50,.45); background:rgba(50,205,50,.12); color:#CFF5CF; font-weight:600}
.btn:hover{border-color:rgba(50,205,50,.7)}

/* ====== Grid / Karty ====== */
.section{padding-top:8px}
.grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.card{grid-column: span 12}
.card-header{padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:space-between}
.card-title{margin:0; font-size:18px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:12px; border-radius:999px; border:1px solid rgba(50,205,50,.4); color:#CFF5CF; background:rgba(50,205,50,.12)}
.card-body{padding:18px 20px; color:var(--text)}
@media(min-width: 720px){ .card{grid-column: span 6} }
@media(min-width: 1120px){ .card{grid-column: span 4} }

/* ====== Lista punktowana ładna ====== */
.list{padding-left:18px; margin:0}
.list li{margin:6px 0}

/* ====== Discord CTA ====== */
.discord-link{display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; letter-spacing:.2px}
.discord-link .dot{width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 10px rgba(50,205,50,.6)}

/* ====== Galeria ====== */
.gallery{display:grid; gap:12px; grid-template-columns:repeat(2,1fr); padding:18px}
.gallery img{aspect-ratio: 16/9; object-fit:cover; border:1px solid rgba(255,255,255,.06)}
@media(min-width:840px){ .gallery{grid-template-columns:repeat(3,1fr)} }

/* ====== Stopka ====== */
footer{margin:28px auto 40px; padding:0 18px; color:#B7B7B7; font-size:13px}
footer a{color:#CFF5CF}