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

/* ===== ZMIENNE ===== */
:root{
  --text:#e5e5e5;
  --muted:rgba(229,229,229,0.70);
  --glass:rgba(0,0,0,0.45);
  --glass2:rgba(0,0,0,0.55);
  --stroke:rgba(255,255,255,0.10);
}

/* ===== BODY ===== */
body{
  min-height:100vh;
  font-family:"Georgia", serif;
  color:var(--text);

  background:
    linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.88)),
    url("tlo.jpg");

  background-size:cover;
  background-position:center 5%;
  background-repeat:no-repeat;
}

/* ===== HEADER ===== */
.site-header{
  padding:28px 18px 20px;
}

.brand{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.logo{
  font-size:34px;
  letter-spacing:2px;
  font-weight:400;
}

.tag{
  font-size:14px;
  letter-spacing:3px;
  opacity:0.7;
}

/* ===== WRAP ===== */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:18px;
}

/* ===== HERO ===== */
.hero{
  margin-top:10px;
}

.hero-card{
  background:linear-gradient(180deg, var(--glass), var(--glass2));
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:24px 20px;
  text-align:center;
}

.hero-card h1{
  font-size:38px;
  font-weight:400;
  letter-spacing:1px;
}

.lead{
  margin-top:12px;
  color:var(--muted);
  line-height:1.6;
  font-size:16px;
}

/* ===== HUB (kafelki) ===== */
.hub{
  margin-top:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.tile{
  text-decoration:none;
  color:var(--text);

  background:rgba(0,0,0,0.40);
  border:1px solid var(--stroke);
  border-radius:18px;

  padding:28px 26px;
  width:320px;
  text-align:center;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.tile:hover{
  transform:translateY(-4px);
  background:rgba(0,0,0,0.52);
  border-color:rgba(255,255,255,0.20);
}

.tile h2{
  font-size:22px;
  letter-spacing:1px;
  margin-bottom:10px;
}

.tile p{
  font-size:15px;
  color:var(--muted);
  line-height:1.6;
}

/* ===== LISTA (np. wywiady) ===== */
.list{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.row{
  text-decoration:none;
  color:var(--text);

  background:rgba(0,0,0,0.38);
  border:1px solid var(--stroke);
  border-radius:16px;

  padding:16px;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.row:hover{
  transform:translateY(-2px);
  background:rgba(0,0,0,0.48);
  border-color:rgba(255,255,255,0.18);
}

.row-title{
  font-size:18px;
  letter-spacing:1px;
}

.row-desc{
  margin-top:8px;
  color:var(--muted);
  line-height:1.55;
  font-size:15px;
}

/* ===== BACK LINK ===== */
.back{
  margin-top:16px;
  text-align:center;
}

.back a{
  color:var(--muted);
  text-decoration:none;
  letter-spacing:1px;
}

.back a:hover{
  color:var(--text);
}

/* ===== FOOTER ===== */
.site-footer{
  padding:24px 18px 26px;
  text-align:center;
  opacity:0.7;
  font-size:14px;
}

/* ===== META ===== */
.meta{
  margin-top:8px;
  font-size:14px;
  opacity:0.7;
  letter-spacing:0.5px;
}

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width:800px){

  .hero-card h1{
    font-size:30px;
  }

  .tile{
    width:100%;
  }
}