/* ====== USTAWIENIA ====== */
:root{
  --bg: #0a0a0a;
  --text: #cde6ff;
  --muted: #8db8d6;
  --brand: #1a6bff;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --radius: 16px;
  --panel: rgba(10,15,20,.78);
  --border: rgba(26,107,255,.4);
}

/* ====== TŁO ====== */
body{
  margin:0; padding:0;
  font-family: 'Segoe UI', sans-serif;
  background: url('raporty.jpg') no-repeat center center fixed;
  background-size: cover;
  color: var(--text);
  line-height: 1.6;
}
body::before{
  content:""; position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  pointer-events:none; z-index:-1;
}

/* ====== KONTENER ====== */
.wrap{max-width:1200px;margin:0 auto;padding:24px}
.lead{color:var(--muted);max-width:900px}

/* ====== NAGŁÓWEK ====== */
h1{
  font-size: clamp(28px, 4vw, 48px);
  text-shadow: 0 0 10px rgba(26,107,255,0.5);
  letter-spacing: 1px;
  margin: 8px 0 12px;
}
.badge{
  display:inline-block;
  background: rgba(20,30,40,0.8);
  border:1px solid var(--brand);
  border-radius:999px;
  padding:6px 14px;
  font-size:13px;
  color:var(--muted);
  letter-spacing:1px;
  margin-bottom:12px;
}

/* ====== GRID KAFELKÓW ====== */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
  padding:18px 0 8px;
}
@media (max-width:1000px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr;}
}

/* ====== KAFELKI ====== */
.tile{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-height:130px;
  padding:20px 22px;
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--text);
  background: var(--panel);
  border:1.8px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0,0,0,.45);
  border-color: #4a8aff;
}
.tile-title{
  font-weight:800;
  letter-spacing:2px;
  font-size: clamp(18px, 2.4vw, 22px);
}
.tile-desc{
  color:var(--muted);
  font-size: clamp(14px, 2vw, 16px);
}

/* ====== LINKI POWIĄZANE ====== */
/* ====== NAWIGACJA POWIĄZANA ====== */
.related{
  display:flex;
  justify-content:center; /* <--- DODANE wyśrodkowanie */
  align-items:center;
  gap:12px;
  margin-top:28px;
  flex-wrap:wrap;
  text-align:center;
}
.related a{
  text-decoration:none;
  color:var(--text);
  background: rgba(20,30,40,.8);
  border:1px solid var(--brand);
  border-radius:12px;
  padding:8px 14px;
  font-size:14px;
  transition:.2s;
}
.related a:hover{
  background: rgba(30,45,60,.9);
  border-color: #4a8aff;
}


/* ====== STOPKA ====== */
.footer{
  text-align:center;
  padding:22px 0 34px;
  color:#95a2b3;
  font-size:14px;
}
.footer a{
  color:#c9d6ff;
  text-decoration:none;
  border-bottom:1px dashed rgba(201,214,255,.45);
}
.footer a:hover{border-bottom-color:transparent;}