/* ═══════════════ ZORNA · podstrony tresciowe ═══════════════
   Wspolny arkusz dla /realizacje, /poradnik i /en. Dokladany PO css/style.css,
   z ktorego bierze tokeny (--bg, --ink, --mut, --line, --font, --mono, --ease)
   oraz gotowe klasy: .legal-header, .sec-label, .split, .faq-item, footer.
   Tutaj sa wylacznie rzeczy, ktorych tam nie ma. */

/* ── wspolny szkielet podstrony ── */
.sub-body{padding-bottom:0}
.sub-main{max-width:1180px;margin:0 auto;padding:0 24px}

.sub-hero{padding:74px 0 56px;display:flex;flex-direction:column;gap:20px;max-width:60ch}
.sub-badge{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
}
.sub-h1{font:300 clamp(34px,4.4vw,58px)/1.06 var(--font);letter-spacing:-.015em}
.sub-lead{font:300 clamp(15px,1.5vw,19px)/1.6 var(--font);color:#b7bcc1;max-width:52ch}

.sub-section{padding:56px 0 26px;border-top:1px solid var(--line)}
.sub-section:first-of-type{border-top:0}
.sub-head{display:flex;flex-direction:column;gap:14px;margin-bottom:38px;max-width:58ch}
.sub-head h2{font:300 clamp(26px,3vw,40px)/1.1 var(--font);letter-spacing:-.01em}
.sub-head p{font:300 15px/1.6 var(--font);color:var(--mut)}

/* ── karta realizacji klienta ── */
.case-list{display:flex;flex-direction:column;gap:22px}
.case-card{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#080a0b;
  transition:border-color .4s var(--ease);
}
.case-card:hover{border-color:var(--line2)}
.case-shot{position:relative;overflow:hidden;background:#0a0c0e;min-height:230px}
.case-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .9s var(--ease)}
.case-card:hover .case-shot img{transform:scale(1.03)}
.case-body{padding:30px 32px;display:flex;flex-direction:column;gap:14px}
.case-tag{font:400 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.case-name{font:300 28px/1.1 var(--font);letter-spacing:-.01em}
.case-desc{font:300 14.5px/1.65 var(--font);color:var(--mut)}
.case-zakres{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.case-zakres li{
  list-style:none;font:300 12.5px var(--font);color:#b7bcc1;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
}
.case-link{
  align-self:flex-start;margin-top:6px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:4px;
  transition:border-color .3s,color .3s;
}
.case-link:hover{border-color:var(--ink)}
.case-status{
  align-self:flex-start;font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#c9915a;border:1px solid rgba(201,145,90,.45);border-radius:999px;padding:6px 12px;
}

/* Zmierzony ruch w karcie realizacji. Liczba bez okresu pomiaru jest chwaleniem
   sie, nie dowodem, wiec .case-zrodlo jest czescia tego bloku, nie ozdoba. */
.case-liczby{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;
  margin-top:4px;padding:16px 18px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);
}
.case-liczba{display:flex;flex-direction:column;gap:3px}
.case-liczba-wartosc{
  font:300 26px/1 var(--font);letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.case-liczba-opis{font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.case-zrodlo{flex-basis:100%;margin:0;font:300 12.5px/1.5 var(--font);color:var(--faint)}

/* ── kafle makiet ──
   Makiety nie maja zrzutow ekranu: zamiast podstawiac wygenerowany obrazek,
   kazdy kafel maluje sie wlasna paleta danej makiety (te same wartosci co w
   jej demo.css). Podglad jest wiec prawdziwy kolorystycznie, a nie udawany. */
.makieta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.makieta-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:#080a0b;transition:border-color .4s var(--ease),translate .4s var(--ease);
}
.makieta-card:hover{border-color:var(--line2);translate:0 -3px}
.makieta-podglad{
  height:168px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;
  position:relative;overflow:hidden;
}
.makieta-podglad::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.14),transparent 60%);
  pointer-events:none;
}
.makieta-podglad-nazwa{font-size:23px;line-height:1.1;letter-spacing:.02em;position:relative;z-index:1}
.makieta-podglad-haslo{font-size:12px;line-height:1.4;opacity:.8;position:relative;z-index:1}
.makieta-m-meridian{background:linear-gradient(160deg,#1A1613,#24201B)}
.makieta-m-meridian .makieta-podglad-nazwa{font-family:Georgia,serif;color:#C6A15B}
.makieta-m-meridian .makieta-podglad-haslo{color:rgba(250,248,245,.68)}
.makieta-m-bertolini{background:linear-gradient(160deg,#0b0c10,#151922)}
.makieta-m-bertolini .makieta-podglad-nazwa{font-family:var(--font);font-weight:600;color:#f2f4f7;letter-spacing:.16em}
.makieta-m-bertolini .makieta-podglad-haslo{color:rgba(242,244,247,.62)}
.makieta-m-ostoja{background:linear-gradient(160deg,#0D0B09,#16130F)}
.makieta-m-ostoja .makieta-podglad-nazwa{font-family:Georgia,serif;color:#C98A4B}
.makieta-m-ostoja .makieta-podglad-haslo{color:rgba(243,238,230,.66)}
.makieta-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.makieta-tag{font:400 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.makieta-name{font:300 21px/1.15 var(--font)}
.makieta-desc{font:300 14px/1.6 var(--font);color:var(--mut);flex:1}
.makieta-cta{
  align-self:flex-start;margin-top:4px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:999px;padding:10px 18px;
  transition:background .3s,color .3s,border-color .3s;
}
.makieta-cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.makieta-nota{margin-top:22px;font:300 13px/1.6 var(--font);color:var(--faint);max-width:66ch}

/* ── pasek zaufania: prawdziwe nazwy klientow, bez wymyslonych liczb ── */
.zaufali{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;padding:26px 0}
.zaufali-label{font:400 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.zaufali-name{font:300 17px var(--font);color:#b7bcc1}

/* ── domykajace wezwanie do dzialania (wspolne dla podstron) ── */
.sub-cta{
  margin:46px 0 0;padding:52px 0 44px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;
}
.sub-cta h2{font:300 clamp(28px,3.4vw,44px)/1.08 var(--font);letter-spacing:-.015em}
.sub-cta p{font:300 15px/1.65 var(--font);color:var(--mut);max-width:52ch}
.sub-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.sub-btn{
  font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:999px;padding:14px 24px;
  transition:background .3s,color .3s,border-color .3s;
}
.sub-btn:hover{border-color:var(--ink)}
.sub-btn.is-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sub-btn.is-primary:hover{background:transparent;color:var(--ink)}

/* ── artykul poradnika: prosa na bazie .legal-inner z dodatkami ── */
.art-meta{font:400 12px var(--mono);letter-spacing:.06em;color:var(--faint);margin-bottom:34px}
.art-spis{border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin-bottom:40px}
.art-spis span{display:block;font:400 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.art-spis ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.art-spis a{color:var(--mut);text-decoration:none;border-bottom:1px solid transparent}
.art-spis a:hover{color:var(--ink);border-color:var(--line2)}
.art-tabela{width:100%;border-collapse:collapse;margin:18px 0 6px;font:300 14px var(--font)}
.art-tabela th,.art-tabela td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.art-tabela th{font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.art-tabela td:last-child{white-space:nowrap;color:var(--ink)}
.art-tabela-wrap{overflow-x:auto}
.art-box{
  border-left:2px solid var(--line2);padding:4px 0 4px 20px;margin:26px 0;
  font:300 15px/1.7 var(--font);color:#b7bcc1;
}
.art-cta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:34px 0;
}
.art-cta p{font:300 15px/1.55 var(--font);color:var(--ink);margin:0;max-width:44ch}

/* ── responsywnosc ── */
@media (max-width:900px){
  .sub-main{padding:0 18px}
  .sub-hero{padding:52px 0 40px}
  .sub-section{padding:42px 0 20px}
  .case-card{grid-template-columns:1fr}
  .case-shot{min-height:190px;max-height:250px}
  .case-body{padding:24px 22px}
  .case-liczby{padding:14px 15px;gap:10px 22px}
  .case-liczba-wartosc{font-size:23px}
  .case-zrodlo{font-size:12px}
  .sub-cta{padding:40px 0}
}

/* ── drobiazgi wspolne ── */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* .legal-inner definiuje h1, h2, p i listy, ale nie h3 — artykul poradnika
   uzywa trzeciego poziomu na przyklady wycen. */
.legal-inner h3{
  font:400 clamp(17px,1.9vw,21px)/1.3 var(--font);letter-spacing:-.005em;
  color:var(--ink);margin:26px 0 10px;
}
.legal-inner .art-cta p{color:var(--ink)}