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

:root{
  --bg: #0f1113;
  --panel: #16181b;
  --muted: #a9b0b6;
  --accent: #00bcd4;
  --card: #15171a;
  --radius: 10px;
}

html,body { height: 100%; }

body {
  font-family: 'Rubik', sans-serif;
  background: var(--bg);
  color: #e6eef2;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  min-height:100vh;
  flex-direction:column;
}

/* wrapper to keep footer at bottom */
.wrapper { flex:1; display:flex; flex-direction:column; }

/* HEADER */
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(4px);
}

.logo { display:flex; align-items:center; gap:12px; }
.logo img {
  width:52px; height:52px; border-radius:12px; object-fit:cover;
}
.logo h1 { font-size:1.4rem; letter-spacing:0.4px; }

/* language switch */
.lang-switch { display:flex; gap:8px; align-items:center; }
.lang-btn {
  background: transparent;
  color:var(--muted);
  border: 1px solid rgba(255,255,255,0.03);
  padding:6px 10px;
  border-radius:8px;
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  font-weight:600;
  transition: all .15s ease;
}
.lang-btn:hover { transform: translateY(-2px); color:var(--accent); border-color: rgba(0,188,212,0.15); }
.lang-btn.active { background: rgba(0,188,212,0.06); color:var(--accent); border-color: rgba(0,188,212,0.18); }

/* MAIN */
main {
  flex:1;
  width:100%;
  max-width:980px;
  margin: 32px auto;
  padding: 0 20px 20px 20px;
}

/* sections */
h2 {
  font-size:1.1rem;
  margin-bottom:12px;
  color:#dfe9ed;
  border-bottom:1px solid rgba(255,255,255,0.03);
  padding-bottom:8px;
}

/* about */
#about p { color:var(--muted); margin-top:15px; font-size:0.98rem; }

/* accordion */
.accordion { margin-bottom:16px; }
.accordion-btn {
  font-family: 'Rubik';
  width:100%;
  text-align:left;
  padding:12px 14px;
  background:var(--card);
  border-radius:8px;
  color:#e9f3f5;
  font-weight:700;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition: background-color 0.3s;
}
.accordion-btn:hover { background:#1b1d1f; }

.accordion-content {
  max-height:0;
  overflow:hidden;
  transition: max-height .32s cubic-bezier(.2,.8,.2,1), padding .25s;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  margin-top:8px;
  border-radius:8px;
  padding: 0 14px;
}

/* when open we add padding via .open */
.accordion-content.open { padding:14px; }

/* doc list */
.doc-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.doc-list a { color:var(--accent); text-decoration:none; font-weight:600; }
.doc-list a:hover { text-decoration:underline; }

#documents {
  margin-top: 60px; /* zwiększ jak chcesz np. 80px */
}

/* not-ready */
.not-ready { color:var(--muted); font-style:italic; background:#111214; padding:12px; border-radius:8px; }

/* footer fixed to bottom visually (but within wrapper) */
footer {
  margin-top:auto;
  padding:12px 20px;
  text-align:center;
  background: linear-gradient(0deg, rgba(255,255,255,0.01), transparent);
  border-top:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
  font-size:0.9rem;
}

.link { margin-bottom:16px; }
.link-btn {
  font-family: 'Rubik';
  text-decoration: none;
  width:100%;
  text-align:left;
  padding:12px 14px;
  background:var(--card);
  border-radius:8px;
  color:#e9f3f5;
  font-weight:700;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition: background-color 0.3s;
}
.link-btn:hover { background:#1b1d1f; }

/* responsive */
@media (max-width:640px){
  .logo h1 { font-size:1rem; }
  .lang-btn .lang-label{ display:none; }
  main{ margin:18px auto; padding:0 14px 16px; }
}