/* =========================================================================
   CARVITER — MAKIETA 20.10.2026
   Kierunek: czerń + niebieski, ZERO zaokrągleń, duże grafiki, układ redakcyjny.
   Wszystkie krawędzie są proste — brak `border-radius` w całym pliku jest
   celowy i pilnowany; to główna różnica wobec poprzedniej wersji strony.
   ========================================================================= */

:root {
  --czern:        #07090D;  /* tło główne  */
  --czern-2:      #0E1219;  /* panele      */
  --czern-3:      #161C26;  /* obramowania */
  --niebieski:    #1569C4;  /* marka       */
  --niebieski-2:  #4A9EFF;  /* akcent jasny */
  --pomarancz:    #EF9F27;  /* WYŁĄCZNIE jako tło pod ciemnym tekstem lub cienka kreska */
  --biel:         #FFFFFF;
  --mgla:         #AEB6C4;  /* tekst drugorzędny na ciemnym */
  --mgla-2:       #838D9E;  /* tekst trzeciorzędny — rozjaśniony 20.10.2026, bo #6F7988 dawał kontrast 4,26 przy wymaganych 4,5 */
  --max:          1320px;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--czern);
  color: var(--biel);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

/* ---------- TYPOGRAFIA ---------- */
/* Duża skala i ciasny trakting — to, co najbardziej odróżnia stronę redakcyjną
   od szablonu. Nagłówki łamiemy ręcznie przez <br>, nie zostawiamy sierot. */
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
h1 { font-size: clamp(42px, 6.4vw, 86px); }
h2 { font-size: clamp(32px, 4.2vw, 56px); }
h3 { font-size: 21px; letter-spacing: -0.015em; line-height: 1.25; }

.nadtytul {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--niebieski-2);
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.nadtytul::before { content: ''; width: 36px; height: 2px; background: var(--niebieski); }

.lead { font-size: 19px; color: var(--mgla); max-width: 62ch; }

/* ---------- PRZYCISKI (ostre, bez cieni) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 19px 34px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.btn-glowny { background: var(--niebieski); color: var(--biel); }
.btn-glowny:hover { background: var(--niebieski-2); color: var(--czern); }
.btn-obrys { border-color: rgba(255,255,255,.28); color: var(--biel); }
.btn-obrys:hover { border-color: var(--biel); background: var(--biel); color: var(--czern); }
/* Pomarańcz NIGDY nie nosi białego tekstu (kontrast 2,17) — tylko ciemny. */
.btn-akcent { background: var(--biel); color: var(--czern); }
.btn-akcent:hover { background: var(--czern); color: var(--biel); }

/* ---------- NAGŁÓWEK ---------- */
.pasek-info {
  background: var(--niebieski); color: var(--biel);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-align: center; padding: 10px 16px;
}
.naglowek {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,9,13,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--czern-3);
}
.naglowek .kontener { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 32px; }
.logo { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 21px; letter-spacing: -0.03em; }
.logo img { height: 36px; width: auto; }
.nawigacja { display: flex; gap: 34px; font-size: 14.5px; font-weight: 600; color: var(--mgla); }
.nawigacja a:hover { color: var(--biel); }
.naglowek .btn { padding: 14px 24px; font-size: 12.5px; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 86vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-tlo { position: absolute; inset: 0; }
.hero-tlo img { width: 100%; height: 100%; object-fit: cover; }
/* Dwie nakładki: pionowa buduje czytelność tekstu, pozioma wiąże zdjęcie z czernią strony. */
.hero-tlo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,13,.72) 0%, rgba(7,9,13,.35) 38%, rgba(7,9,13,.96) 100%),
              linear-gradient(90deg, rgba(7,9,13,.86) 0%, rgba(7,9,13,.15) 62%);
}
.hero .kontener { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 72px; }
.hero-tresc { max-width: 940px; }
.plakietka {
  display: inline-block; background: var(--pomarancz); color: #1A1204;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 16px; margin-bottom: 30px;
}
.hero h1 { margin-bottom: 26px; }
.hero .lead { font-size: 21px; color: #D4DAE4; margin-bottom: 40px; }
.hero-akcje { display: flex; flex-wrap: wrap; gap: 14px; }

.pasek-dowod {
  border-top: 1px solid var(--czern-3); background: var(--czern-2);
}
.pasek-dowod .kontener {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-top: 22px; padding-bottom: 22px;
  font-size: 14px; color: var(--mgla);
}
.kreska-akcent { width: 28px; height: 3px; background: var(--pomarancz); flex-shrink: 0; }

/* ---------- SEKCJE ---------- */
.sekcja { padding: 118px 0; }
.sekcja-ciemniejsza { background: var(--czern-2); }
.naglowek-sekcji { max-width: 760px; margin-bottom: 76px; }
.naglowek-sekcji h2 { margin-bottom: 22px; }

/* Funkcje: numerowane, z grubą kreską u góry — żadnych kart z cieniem. */
.siatka-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--czern-3); }
.funkcja { background: var(--czern); padding: 46px 38px 52px; }
.sekcja-ciemniejsza .funkcja { background: var(--czern-2); }
.numer {
  font-size: 13px; font-weight: 800; letter-spacing: .18em;
  color: var(--niebieski-2); margin-bottom: 26px; display: block;
}
.funkcja h3 { margin-bottom: 16px; }
.funkcja p { color: var(--mgla); font-size: 15.5px; }

/* Split: duże zdjęcie obok treści, bez marginesu — obraz dotyka krawędzi ekranu. */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split-obraz { position: relative; min-height: 560px; }
.split-obraz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-tresc { padding: 104px 72px; display: flex; flex-direction: column; justify-content: center; }
.split-tresc.na-prawo { padding-left: 88px; }

/* Lista zalet warsztatowych */
.lista-cech { border-top: 1px solid var(--czern-3); }
.cecha { border-bottom: 1px solid var(--czern-3); padding: 30px 0; display: grid; grid-template-columns: 56px 1fr; gap: 20px; }
.cecha-numer { font-size: 13px; font-weight: 800; color: var(--niebieski-2); letter-spacing: .14em; padding-top: 4px; }
.cecha h3 { margin-bottom: 9px; }
.cecha p { color: var(--mgla); font-size: 15.5px; }

/* ---------- BLOG ---------- */
.siatka-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.wpis { border: 1px solid var(--czern-3); display: flex; flex-direction: column; transition: border-color .15s; }
.wpis:hover { border-color: var(--niebieski); }
.wpis-foto { aspect-ratio: 16/10; overflow: hidden; background: var(--czern-3); }
.wpis-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.wpis:hover .wpis-foto img { transform: scale(1.04); }
.wpis-tresc { padding: 30px 28px 34px; flex: 1; display: flex; flex-direction: column; }
.wpis-meta { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mgla-2); margin-bottom: 16px; display: flex; gap: 12px; align-items: center; }
.wpis-kategoria { color: var(--niebieski-2); }
.wpis h3 { margin-bottom: 14px; }
.wpis p { color: var(--mgla); font-size: 15px; flex: 1; }
.wpis-link { margin-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--niebieski-2); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--czern-3); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--czern-3); }
.faq summary {
  padding: 30px 0; font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 28px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 26px; font-weight: 400; color: var(--niebieski-2); flex-shrink: 0; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { color: var(--mgla); font-size: 16px; padding-bottom: 32px; max-width: 76ch; }

/* ---------- CTA ---------- */
.cta { background: var(--niebieski); padding: 104px 0; }
.cta h2 { margin-bottom: 20px; }
.cta p { font-size: 19px; color: rgba(255,255,255,.88); margin-bottom: 38px; max-width: 58ch; }

/* ---------- STOPKA ---------- */
.stopka { background: var(--czern-2); border-top: 1px solid var(--czern-3); padding: 84px 0 0; }
.stopka-siatka { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.4fr; gap: 56px; padding-bottom: 64px; }
.stopka h4 { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--mgla-2); margin-bottom: 22px; }
.stopka ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.stopka a, .stopka li { color: var(--mgla); font-size: 15px; }
.stopka a:hover { color: var(--biel); }
.stopka-opis { color: var(--mgla); font-size: 15px; margin: 20px 0 0; max-width: 42ch; }
.stopka-dol { border-top: 1px solid var(--czern-3); padding: 28px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--mgla-2); }

/* ---------- ARTYKUŁ ---------- */
.okruchy { font-size: 13px; color: var(--mgla-2); padding: 28px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.okruchy a:hover { color: var(--biel); }
.artykul { max-width: 760px; margin: 0 auto; padding: 0 0 100px; }
.artykul-foto { aspect-ratio: 21/9; overflow: hidden; margin-bottom: 52px; }
.artykul-foto img { width: 100%; height: 100%; object-fit: cover; }
.artykul h1 { font-size: clamp(34px, 4.6vw, 54px); margin-bottom: 26px; }
.artykul .meta { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mgla-2); margin-bottom: 44px; display: flex; gap: 14px; flex-wrap: wrap; }
.artykul h2 { font-size: 30px; margin: 52px 0 20px; }
.artykul p { color: #C9D1DD; margin-bottom: 22px; font-size: 17.5px; }
/* Odnośniki w treści. Bez tej reguły łapie je globalne
   `a { color: inherit; text-decoration: none }` i link znika w akapicie. */
.artykul a { color: var(--niebieski-2); text-decoration: underline; text-underline-offset: 3px; }
.artykul a:hover { color: var(--biel); }

/* Układ blokowy, nie flex — na elementach flex nie rysują się punktory ani
   numery pozycji. Wcięcie przez padding, bo `* { padding: 0 }` je zabiera,
   a numer musi mieć gdzie się zmieścić. */
.artykul ul, .artykul ol { color: #C9D1DD; margin: 0 0 24px; padding-left: 26px; font-size: 17.5px; }
.artykul li { margin-bottom: 10px; line-height: 1.65; }
.artykul ol li::marker { color: var(--niebieski-2); font-weight: 700; }
.cytat { border-left: 3px solid var(--niebieski); padding: 6px 0 6px 26px; margin: 36px 0; font-size: 20px; font-weight: 600; color: var(--biel); }

/* ---------- RESPONSYWNOŚĆ ---------- */
@media (max-width: 1100px) {
  /* Pozycje menu łamały się tu na dwie linie — chowamy je wcześniej. */
  .nawigacja { display: none; }
}
@media (max-width: 1080px) {
  .siatka-3 { grid-template-columns: 1fr; }
  .siatka-blog { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-obraz { min-height: 340px; }
  .split-tresc, .split-tresc.na-prawo { padding: 64px 32px; }
  .stopka-siatka { grid-template-columns: 1fr 1fr; gap: 44px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .kontener { padding: 0 20px; }
  .sekcja { padding: 76px 0; }
  .naglowek-sekcji { margin-bottom: 48px; }
  .siatka-blog { grid-template-columns: 1fr; }
  .stopka-siatka { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero .kontener { padding-top: 104px; padding-bottom: 56px; }
  .btn { width: 100%; }
  /* ...ale NIE przycisk w nagłówku — pełna szerokość zasłaniała tam logo. */
  .naglowek .btn { width: auto; padding: 12px 16px; font-size: 11.5px; }
  .logo { font-size: 18px; }
  .logo img { height: 30px; }
  .hero-akcje { flex-direction: column; align-items: stretch; }
  .funkcja { padding: 36px 26px 40px; }
}