/* podkrec.pl — Sosky / Rafał Sobieszyński
   Paleta: prawie-czerń + limonka (SPEC_WIZUALNY_SOSKY), typografia Bricolage Grotesque + Manrope */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --tlo: #0a0b0d;
  --tlo-2: #101216;
  --kafel: #15171a;
  --limonka: #ccff00;
  --biel: #ffffff;
  --szary: #8a8c8f;
  --szary-jasny: #b9bcbf;
  --ramka: rgba(255, 255, 255, 0.09);
  --ramka-mocna: rgba(255, 255, 255, 0.18);
  --max: 1180px;
  --font-tekst: "Manrope", "Helvetica Neue", Helvetica, sans-serif;
  --font-naglowek: "Bricolage", "Manrope", Helvetica, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--biel);
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--limonka); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--biel); }

h1, h2, h3 {
  font-family: var(--font-naglowek);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}

.kontener {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.etykieta {
  font-family: var(--font-tekst);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--szary);
}
.etykieta span { color: var(--limonka); }

/* ---------- nawigacja ---------- */

.pasek {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 11, 13, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ramka);
}
.pasek .kontener {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { width: 104px; height: auto; }
.logo span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--szary);
  border-left: 1px solid var(--ramka-mocna);
  padding-left: 12px;
  font-weight: 600;
}
.menu { display: flex; align-items: center; gap: 26px; }
.menu a {
  color: var(--szary-jasny);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.menu a:hover { color: var(--biel); }
.menu .mail { color: var(--limonka); }

/* ---------- przyciski ---------- */

.przycisk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 2px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.przycisk-glowny { background: var(--limonka); color: #0a0b0d; }
.przycisk-glowny:hover { color: #0a0b0d; transform: translateY(-2px); }
.przycisk-pusty { border: 1px solid var(--ramka-mocna); color: var(--biel); }
.przycisk-pusty:hover { border-color: var(--limonka); color: var(--limonka); }

/* ---------- hero ---------- */

.hero { padding: 72px 0 60px; border-bottom: 1px solid var(--ramka); }
.hero-siatka {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 4.3vw, 58px);
  line-height: 1.06;
  margin: 18px 0 24px;
  max-width: 19ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--limonka);
}
.hero p.wstep {
  font-size: 19px;
  color: var(--szary-jasny);
  max-width: 52ch;
  margin: 0 0 34px;
}
.hero-akcje { display: flex; flex-wrap: wrap; gap: 14px; }

.foto {
  position: relative;
  border: 1px solid var(--ramka);
  border-radius: 3px;
  overflow: hidden;
  background: var(--kafel);
}
.foto img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(0.92) contrast(1.03);
}
.foto figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(10, 11, 13, 0.95), rgba(10, 11, 13, 0));
  font-size: 13px;
  color: var(--szary-jasny);
}
.foto figcaption strong { display: block; color: var(--biel); font-size: 15px; }

.pasek-faktow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ramka);
  border: 1px solid var(--ramka);
  margin-top: 56px;
}
.pasek-faktow div { background: var(--tlo); padding: 22px 24px; }
.pasek-faktow dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--szary);
  font-weight: 700;
  margin-bottom: 6px;
}
.pasek-faktow dd { margin: 0; font-size: 16px; color: var(--biel); font-weight: 600; }

/* ---------- sekcje ---------- */

section { padding: 88px 0; border-bottom: 1px solid var(--ramka); }
.naglowek-sekcji { max-width: 60ch; margin-bottom: 48px; }
.naglowek-sekcji h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin: 16px 0 14px;
}
.naglowek-sekcji p { color: var(--szary-jasny); margin: 0; max-width: 54ch; }

/* usługi jako numerowane wiersze */
.uslugi { border-top: 1px solid var(--ramka); }
.usluga {
  display: grid;
  grid-template-columns: 72px 1fr 1.25fr;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--ramka);
  align-items: start;
}
.usluga .numer {
  font-family: var(--font-naglowek);
  font-size: 15px;
  font-weight: 700;
  color: var(--limonka);
  padding-top: 4px;
  letter-spacing: 0.06em;
}
.usluga h3 { font-size: 24px; letter-spacing: -0.02em; }
.usluga p { margin: 0; color: var(--szary-jasny); }
.usluga p + p { margin-top: 10px; }

/* dla kogo */
.dwie-kolumny {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.karta {
  background: var(--kafel);
  border: 1px solid var(--ramka);
  border-radius: 3px;
  padding: 30px 30px 34px;
}
.karta h3 { font-size: 20px; margin-bottom: 18px; }
.karta ul { margin: 0; padding: 0; list-style: none; }
.karta li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  color: var(--szary-jasny);
}
.karta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 1px;
  background: var(--limonka);
}
.karta.negatyw li::before { background: var(--szary); }

/* proces */
.kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.krok { border-top: 2px solid var(--limonka); padding-top: 22px; }
.krok .nr {
  font-family: var(--font-naglowek);
  font-size: 44px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px var(--ramka-mocna);
  line-height: 1;
  display: block;
  margin-bottom: 14px;
}
.krok h3 { font-size: 19px; margin-bottom: 10px; }
.krok p { margin: 0; color: var(--szary-jasny); font-size: 16px; }

/* blok RODO / wiadomość */
.wiadomosc {
  background: var(--tlo-2);
  border: 1px solid var(--ramka);
  border-left: 3px solid var(--limonka);
  border-radius: 3px;
  padding: 34px 36px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: start;
}
.wiadomosc h2 { font-size: 28px; margin-bottom: 16px; }
.wiadomosc p { color: var(--szary-jasny); margin: 0 0 14px; }
.wiadomosc p:last-child { margin-bottom: 0; }
.wiadomosc .obok {
  border-left: 1px solid var(--ramka);
  padding-left: 32px;
  font-size: 15px;
}

/* kontakt */
.kontakt-siatka {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.kontakt-siatka h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 18px; }
.kontakt-siatka p { color: var(--szary-jasny); }
.duzy-mail {
  font-family: var(--font-naglowek);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 800;
  color: var(--limonka);
  text-decoration: none;
  letter-spacing: -0.03em;
  display: inline-block;
  margin: 8px 0 18px;
  border-bottom: 2px solid transparent;
}
.duzy-mail:hover { color: var(--biel); border-bottom-color: var(--limonka); }
.dane-firmy {
  border: 1px solid var(--ramka);
  border-radius: 3px;
  padding: 26px 28px;
  font-size: 15px;
  color: var(--szary-jasny);
  background: var(--kafel);
}
.dane-firmy dt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--szary);
  font-weight: 700;
  margin-top: 16px;
}
.dane-firmy dt:first-child { margin-top: 0; }
.dane-firmy dd { margin: 4px 0 0; color: var(--biel); }

/* stopka */
footer { padding: 40px 0 56px; }
.stopka-siatka {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--szary);
}
.stopka-siatka a { color: var(--szary-jasny); text-decoration: none; }
.stopka-siatka a:hover { color: var(--limonka); }
.stopka-linki { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- podstrona tekstowa ---------- */

.tresc { max-width: 760px; margin: 0 auto; padding: 64px 0 80px; }
.tresc h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; }
.tresc .data { color: var(--szary); font-size: 14px; margin-bottom: 44px; }
.tresc h2 {
  font-size: 24px;
  margin: 48px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--ramka);
}
.tresc h3 { font-size: 18px; margin: 26px 0 8px; }
.tresc p, .tresc li { color: var(--szary-jasny); }
.tresc ul { padding-left: 20px; }
.tresc li { margin-bottom: 8px; }
.tresc strong { color: var(--biel); }
.tresc table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15px;
}
.tresc th, .tresc td {
  border: 1px solid var(--ramka);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  color: var(--szary-jasny);
}
.tresc th { color: var(--biel); font-weight: 700; background: var(--kafel); }
.ramka-tabeli { overflow-x: auto; }
.wyroznik {
  border: 1px solid var(--ramka);
  border-left: 3px solid var(--limonka);
  background: var(--tlo-2);
  padding: 22px 26px;
  border-radius: 3px;
  margin: 26px 0;
}
.wyroznik p:last-child { margin-bottom: 0; }
.powrot {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--szary-jasny);
}
.powrot:hover { color: var(--limonka); }

/* ---------- responsywność ---------- */

@media (max-width: 900px) {
  .hero-siatka,
  .dwie-kolumny,
  .kontakt-siatka,
  .wiadomosc { grid-template-columns: 1fr; }
  .wiadomosc .obok { border-left: 0; border-top: 1px solid var(--ramka); padding-left: 0; padding-top: 24px; }
  .kroki { grid-template-columns: 1fr; gap: 22px; }
  .pasek-faktow { grid-template-columns: 1fr; }
  .usluga { grid-template-columns: 46px 1fr; gap: 10px 16px; }
  .usluga h3 { grid-column: 2; }
  .usluga > div:not(.numer) { grid-column: 2; }
  .hero { padding: 56px 0 48px; }
  section { padding: 62px 0; }
  .menu a:not(.mail) { display: none; }
  body { font-size: 16px; }
}

@media (max-width: 680px) {
  .logo span { display: none; }
  .logo img { width: 88px; }
  .pasek .kontener { min-height: 58px; }
  .foto img { height: 380px; }
}

@media (max-width: 520px) {
  .kontener { padding: 0 18px; }
  .wiadomosc { padding: 26px 22px; }
  .karta { padding: 24px 22px 26px; }
  .menu .mail { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .przycisk { transition: none; }
}