@import url('../fonts/inter/fonts.css');

/* =========================================================
   ProfiTurbo — strona główna
   Paleta wg wizualizacji: biel / grafit / magenta
   ========================================================= */

:root {
  /* Róż marki. Oryginalne #ec1a5e dawało z bielą kontrast 4,31:1, a WCAG AA wymaga
     4,5:1 dla tekstu poniżej 24 px — przez to oblewały wszystkie różowe przyciski
     i drobne liczby. Przyciemnienie o 2% wystarcza (4,51:1) i jest niewidoczne gołym
     okiem. Tła i wypełnienia biorą --pink, tekst osobne tokeny poniżej. */
  --pink: #e6195b;
  --pink-600: #cf1251;
  --pink-050: #fde7ef;

  /* Ten sam akcent jako KOLOR TEKSTU. Na jasnym tle musi być ciemniejszy, na ciemnym
     jaśniejszy — jedna wartość nie przechodzi w obu kontekstach naraz. Ciemne sekcje
     nadpisują --pink-text niżej, więc reguły używają wszędzie tej samej zmiennej. */
  /* Wartości dobrane pod NAJTRUDNIEJSZE tło w swojej grupie, nie pod biel i czerń:
     jasne sekcje mają też #f4f4f6, a ciemne rozjaśniają się do #1c1e1f (karty
     wtryskiwaczy). Przy kolorach liczonych tylko dla bieli i #0b0b0d te pośrednie
     tła nadal oblewały. */
  --pink-text: #da1856;        /* 4,95:1 na bieli, 4,50:1 na #f4f4f6 */
  --pink-text-dark: #ef3f78;   /* 4,50:1 na #1c1e1f, 5,29:1 na #0b0b0d */

  --ink-900: #0b0b0d;
  --ink-850: #121215;
  --ink-800: #17171b;
  --ink-700: #26262b;

  --text: #16161a;
  --text-muted: #6b6b73;
  --text-dim: #9a9aa3;

  --surface: #ffffff;
  --surface-alt: #f4f4f6;
  --surface-hero: #ededf0;
  --line: #e4e4e8;
  --line-dark: rgba(255, 255, 255, .1);

  --radius: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(16, 16, 20, .06);
  --shadow-md: 0 6px 24px rgba(16, 16, 20, .08);
  --shadow-lg: 0 18px 50px rgba(16, 16, 20, .14);

  --container: 1216px;
  --gutter: 16px;
  --section-y: 36px;
  --header-h: 72px;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

/* jednolity rytm pionowy sekcji */
@media (min-width: 720px) {
  :root { --section-y: 56px; }
}

@media (min-width: 1100px) {
  :root { --section-y: 68px; }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- typografia wspólna ---------- */

.h-display {
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.04;
}

.section-title {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.section-title .accent { color: var(--pink-text); display: block; }

.kicker {
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lead {
  color: var(--text-muted);
  font-size: .938rem;
  line-height: 1.7;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn:active { transform: translateY(1px); }

.btn--pink {
  background: var(--pink);
  color: #fff;
}

.btn--pink:hover { background: var(--pink-600); }

.btn--ghost {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.btn--ghost:hover { border-color: #c9c9d1; }

.btn--lg { min-height: 54px; padding: 15px 30px; font-size: .938rem; }

.btn__arrow { flex: none; width: 15px; height: 15px; }

/* okrągły przycisk-strzałka (karty) */
.arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--pink);
  border-radius: 50%;
  color: var(--pink-text);
  transition: background-color .2s ease, color .2s ease;
}

.arrow-circle svg { width: 14px; height: 14px; }

a:hover > .arrow-circle,
.card:hover .arrow-circle,
.result:hover .arrow-circle {
  background: var(--pink);
  color: #fff;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  height: var(--header-h);
}

/* logo */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.logo__img { height: 30px; width: auto; }
.logo--light .logo__img { height: 38px; }

.nav {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(11px, 1.5vw, 26px);
  margin-inline: auto;
  min-width: 0;
}

.nav__link {
  position: relative;
  padding: 6px 0;
  font-size: clamp(.6875rem, .5rem + .42vw, .8125rem);
  font-weight: 600;
  white-space: nowrap;
  color: #3a3a42;
  transition: color .2s ease;
}

.nav__link:hover { color: var(--pink-text); }

.nav__link.is-active { color: var(--pink-text); }

.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--pink);
}

/* ---------- menu rozwijane „Oferta" ----------

   Trzy usługi schowane pod jedną pozycją. Bez tego pasek ma osiem pozycji
   plus język, telefon i przycisk — a `.nav` ma `min-width: 0`, więc przy
   braku miejsca NIE rozpycha nagłówka, tylko pozwala linkom wyjść poza swój
   box i nachodzić na przełącznik języka. */

.nav__group { position: relative; display: inline-flex; align-items: center; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: clamp(.6875rem, .5rem + .42vw, .8125rem);
  font-weight: 600;
  white-space: nowrap;
  color: #3a3a42;
  transition: color .2s ease;
}

.nav__toggle:hover,
.nav__group.is-open .nav__toggle { color: var(--pink-text); }

.nav__toggle svg {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform .2s ease;
}

.nav__group.is-open .nav__toggle svg { transform: rotate(180deg); }

/* pozycja aktywna w rozwijanym menu podświetla też samą „Ofertę” */
.nav__toggle.is-active { color: var(--pink-text); }

.nav__drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: none;
  min-width: 212px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 18px 48px rgba(16, 18, 22, .12));
}

/* Niewidzialny mostek nad listą: bez niego przesunięcie kursora z „Oferty”
   w dół przechodzi przez 12px pustki i menu zamyka się w połowie ruchu. */
.nav__drop::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}

.nav__group.is-open .nav__drop { display: block; }

@media (hover: hover) {
  .nav__group:hover .nav__drop { display: block; }
}

.nav__drop a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: #3a3a42;
  transition: background-color .15s ease, color .15s ease;
}

.nav__drop a:hover { background: var(--surface-alt); color: var(--pink-text); }
.nav__drop a.is-active { background: var(--pink-050); color: var(--pink-text); }

/* grupa w menu mobilnym — bez zwijania, na dotyku lepiej widzieć wszystko */
.mobile-nav__label {
  margin: 14px 0 2px;
  padding: 0 2px;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.mobile-nav__link--sub { padding-left: 16px; }

.header__actions {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  flex: none;
}

.header__phone {
  display: none;
  align-items: center;
  gap: 9px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.header__actions .btn { white-space: nowrap; padding-inline: 20px; }

.header__phone svg { width: 17px; height: 17px; color: var(--pink-text); flex: none; }

/* ---------- przełącznik języka ---------- */

.lang { position: relative; flex: none; }

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #3a3a42;
  transition: border-color .2s ease, color .2s ease;
}

.lang__toggle:hover { border-color: #c9c9d1; color: var(--pink-text); }
.lang__toggle > svg { width: 15px; height: 15px; flex: none; }
.lang__chev { width: 12px !important; height: 12px !important; transition: transform .2s ease; }
.lang.is-open .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  display: none;
  min-width: 152px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.lang.is-open .lang__menu { display: block; }

.lang__opt {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border-radius: 4px;
  text-align: left;
  font-size: .813rem;
  font-weight: 600;
  color: #3a3a42;
  transition: background-color .15s ease, color .15s ease;
}

.lang__opt:hover { background: var(--surface-alt); }
.lang__opt.is-active { background: var(--pink-050); color: var(--pink-text); }

/* pasek języków w menu mobilnym */
.lang-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.lang-row__opt {
  padding: 11px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .813rem;
  font-weight: 700;
  color: #3a3a42;
}

.lang-row__opt.is-active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -10px;
  color: var(--ink-900);
}

.burger svg { width: 24px; height: 24px; }
.burger__close { display: none; }
.burger[aria-expanded='true'] .burger__open { display: none; }
.burger[aria-expanded='true'] .burger__close { display: block; }

/* menu mobilne */
.mobile-nav {
  display: none;
  padding: 8px 0 22px;
  border-top: 1px solid var(--line);
}

.mobile-nav.is-open { display: block; }

.mobile-nav__link {
  display: block;
  padding: 12px 2px;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.mobile-nav__link.is-active { color: var(--pink-text); }

.mobile-nav__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

@media (min-width: 1060px) {
  .nav,
  .header__actions { display: flex; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
}

/* telefon w headerze dopiero gdy jest na niego miejsce obok pełnego menu */
@media (min-width: 1200px) {
  .header__phone { display: inline-flex; }
}

/* --- automatyczne dopasowanie headera do długości menu (JS mierzy szerokość) ---
   Dłuższe języki (DE/FR) najpierw tracą numer telefonu, a gdy nadal brakuje
   miejsca — menu zwija się do hamburgera zamiast łamać się na dwie linie. */

/* Zapas na wypadek gdyby JS nie zdążył: DE i FR mają najdłuższe etykiety
   („Diesel-Einspritzdüsen", „Turbocompresseurs"), więc tracą numer telefonu
   wcześniej niż PL/EN. Selektor atrybutowy bije regułę z media query. */
@media (max-width: 1399px) {
  html[lang='de'] .header__phone,
  html[lang='fr'] .header__phone { display: none; }
}

.site-header.is-tight .header__phone { display: none !important; }

.site-header.is-compact .nav { display: none !important; }
.site-header.is-compact .burger { display: inline-flex !important; }
.site-header.is-compact .mobile-nav { display: none !important; }
.site-header.is-compact .mobile-nav.is-open { display: block !important; }

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f7f7f8 0%, #e9e9ec 100%);
}

.hero__media {
  position: relative;
  order: 2;
  margin-inline: calc(var(--gutter) * -1);
}

.hero__media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: 60% center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-block: 40px 44px;
}

.hero__content { order: 1; max-width: 560px; }

.hero__kicker { margin-bottom: 18px; }

.hero__title {
  font-size: clamp(2.25rem, 1.3rem + 4.2vw, 3.5rem);
  text-transform: uppercase;
}

.hero__title .accent { color: var(--pink-text); display: block; }

.hero__text {
  margin-top: 18px;
  max-width: 430px;
  color: #4a4a53;
  font-size: .938rem;
  line-height: 1.7;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero__usp {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  order: 3;
  margin-top: 0;
}

.usp {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
  color: #3a3a42;
}

.usp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(236, 26, 94, .45);
  border-radius: 50%;
  color: var(--pink-text);
}

.usp__icon svg { width: 17px; height: 17px; }

@media (min-width: 900px) {
  .hero__inner {
    display: block;
    padding-block: 64px 58px;
    min-height: 520px;
  }

  .hero__content { position: relative; z-index: 2; order: 0; }

  .hero__usp {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin-top: 36px;
  }

  .hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 62%;
    order: 0;
    margin: 0;
  }

  .hero__media img { height: 100%; object-position: center; }

  .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ececed 0%, rgba(236, 236, 237, .75) 22%, rgba(236, 236, 237, 0) 52%);
  }
}

@media (min-width: 1200px) {
  .hero__media { width: 60%; }
}

/* =========================================================
   USŁUGI — 3 karty
   ========================================================= */

.services {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: linear-gradient(160deg, #f7f7f9 0%, #eeeef1 55%, #f4f4f6 100%);
}

/* delikatne ukośne smugi w tle sekcji (jak na makiecie) */
.services::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .85) 39%, rgba(255, 255, 255, .85) 44%, transparent 45%),
    linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, .55) 63%, rgba(255, 255, 255, .55) 71%, transparent 72%);
}

.services .container { position: relative; }

.services__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 16, 20, .04), 0 12px 32px rgba(16, 16, 20, .07);
  transition: box-shadow .25s ease, transform .25s ease;
}

.card:hover {
  box-shadow: 0 2px 4px rgba(16, 16, 20, .05), 0 22px 48px rgba(16, 16, 20, .12);
  transform: translateY(-3px);
}

/* panel ze zdjęciem: produkt w całości, nie kadrowany */
.card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 22px;
  background: #fff;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 4px 26px 28px;
}

.card__dash {
  display: block;
  width: 36px;
  height: 3px;
  margin-bottom: 16px;
  background: var(--pink);
  border-radius: 2px;
}

.card__title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.22;
}

/* opis + okrągła strzałka w jednym rzędzie, dosunięte do dołu karty */
.card__foot {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-top: auto;
  padding-top: 14px;
}

.card__desc {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.6;
}

.card .arrow-circle {
  width: 46px;
  height: 46px;
  margin-bottom: 2px;
}

.card .arrow-circle svg { width: 16px; height: 16px; }

@media (min-width: 720px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   DLACZEGO PROFITURBO
   ========================================================= */

.why {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background:
    url('../img/section-bg-light.webp') right center / cover no-repeat,
    var(--surface-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.why__inner {
  position: relative;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}

.why__intro { max-width: 460px; }

.why__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
}

.why__dash {
  flex: none;
  width: 26px;
  height: 2px;
  margin-top: 11px;
  background: var(--pink);
}

.why__list {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, 1fr);
}

.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  text-align: center;
}

.why-item__icon { width: 34px; height: 34px; color: var(--ink-900); }

.why-item__label {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  color: #3a3a42;
}

@media (min-width: 720px) {
  .why__list { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .why-item + .why-item { border-left: 1px solid var(--line); }
}

@media (min-width: 1000px) {
  .why__inner { grid-template-columns: minmax(280px, 34%) 1fr; gap: 46px; }
}

/* =========================================================
   WARSZTAT — split
   ========================================================= */

/* Ciemny pas idzie przez CAŁĄ szerokość ekranu, a treść w jego środku
   trzyma się tej samej siatki co reszta strony — zdjęcie zaczyna się
   dokładnie tam, gdzie nagłówek sekcji niżej. Tło na sekcji, nie na karcie:
   karta kończy się na kontenerze, a pas ma sięgać krawędzi okna. */
.workshop {
  /* Przycięcie na sekcji, nie na panelu: różowa poświata jest celowo
     wysunięta poza róg panelu (right: -40px) i bez tego rozpychała stronę
     w poziomie o te 40 px. Tu może się swobodnie rozlać w obrębie pasa. */
  overflow: hidden;
  padding-block: clamp(30px, 4vw, 56px);
  background: var(--ink-900);
  color: #fff;
}

.workshop__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

/* Zdjęcie jako osobny kadr w zaokrąglonej ramce. Nie wtapia się w tło pasa,
   tylko leży na nim — stąd zaokrąglenie i cień. */
.workshop__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-850);
  box-shadow: var(--shadow-md);
}

/* Plakietka z adresem na zdjęciu — wiąże zdjęcie z konkretnym miejscem.
   Przyciemnienie pod spodem, bo zdjęcie jest robione w słońcu i biały
   tekst sam z siebie by na nim utonął. */
.workshop__badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.workshop__badge-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

.workshop__usp {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Zdjęcie warsztatu idzie w całości, bez przycinania: wysokość wynika
   z szerokości kolumny, więc nic nie wypada poza kadr na żadnej szerokości
   ekranu. Bez `object-fit` i bez ograniczania wysokości — każde takie
   ograniczenie albo ucina kadr (`cover`), albo zostawia puste pasy po
   bokach (`contain`). Który plik pobrać, decyduje `srcset` w HTML. */
.workshop__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Panel nie ma już własnego tła ani wyściółki — ciemność daje cała sekcja,
   a odstępy siatka karty. Zostaje tylko różowa poświata w rogu. */
.workshop__panel {
  position: relative;
  color: #fff;
}

.workshop__panel::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -30px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 26, 94, .22) 0%, rgba(236, 26, 94, 0) 68%);
  pointer-events: none;
}

.workshop__body { position: relative; max-width: 460px; }

.workshop__kicker { color: var(--pink-text); margin-bottom: 16px; }

.workshop__title {
  font-size: clamp(1.625rem, 1.1rem + 2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.workshop__text {
  margin-top: 16px;
  color: #b9b9c2;
  font-size: .938rem;
  line-height: 1.7;
}

.workshop .btn { margin-top: 26px; }

@media (min-width: 900px) {
  /* Kolumna ze zdjęciem ma stałą maksymalną szerokość, a nie ułamek ekranu.
     Zdjęcie idzie w całości (4:3), więc jego wysokość rośnie razem z
     szerokością kolumny — przy ułamku cała sekcja robiła się na dużym
     monitorze nienaturalnie wysoka, z pustym panelem obok. */
  .workshop__card { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }

  .workshop__card {
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }

  /* Zdjęcie obejmuje samo siebie i siada w pionie na środku pasa. Bez tego
     plakietka z adresem — przypięta do dołu kolumny — odrywała się od
     zdjęcia i wisiała pod nim na czarnym tle. */
  .workshop__media { align-self: center; }

  .workshop__panel {
    display: flex;
    align-items: center;
  }
}


/* =========================================================
   REALNE EFEKTY
   ========================================================= */

.results { padding-block: var(--section-y); background: #fff; }

.results__inner {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: start;
}

.results__intro { max-width: 460px; }
.results__intro .lead { margin-top: 16px; }

.results__track {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.result {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}

.result:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.result__media { background: var(--ink-900); aspect-ratio: 16 / 10; }
.result__media img { width: 100%; height: 100%; object-fit: cover; }

.result__body {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 15px 16px;
}

.result__info { flex: 1 1 auto; min-width: 0; }

.result__name {
  font-size: .938rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.result__stats { margin-top: 9px; display: grid; gap: 5px; }

.stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.stat__arrow { flex: none; width: 11px; height: 11px; color: var(--pink-text); }
.stat__to { color: var(--pink-text); font-weight: 800; }

@media (min-width: 560px) {
  .results__track { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .results__inner { grid-template-columns: minmax(240px, 27%) 1fr; gap: 34px; }
  .results__track { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   OPINIE
   ========================================================= */

.reviews {
  position: relative;
  padding-block: var(--section-y);
  background:
    linear-gradient(90deg, rgba(11, 11, 13, .95) 0%, rgba(11, 11, 13, .88) 38%, rgba(11, 11, 13, .62) 100%),
    url('../img/reviews-bg.webp') center / cover no-repeat,
    var(--ink-900);
  color: #fff;
}

/* minmax(0, 1fr), nie samo 1fr: ścieżka `1fr` ma domyślnie `min-width: auto`,
   więc dziecko szersze od kolumny rozpycha całą siatkę i wypycha sekcję poza
   ekran. Tak właśnie pas kropek suwaka robił 37 px przewijania w bok. */
.reviews__inner {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.reviews__intro { max-width: 420px; }
.reviews__intro .section-title { color: #fff; }
.reviews__intro .lead { margin-top: 16px; color: #9a9aa3; font-size: .875rem; }

.reviews__viewport { overflow: hidden; }

.reviews__track {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  transition: transform .45s ease;
}

.review[hidden] { display: none !important; }

.review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  background: rgba(23, 23, 27, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
}

.review__stars { display: flex; gap: 3px; color: var(--pink-text); }
.review__stars svg { width: 15px; height: 15px; }

.review__text {
  flex: 1 1 auto;
  color: #d6d6dd;
  font-size: .875rem;
  line-height: 1.65;
}

.review__text strong { color: #fff; font-weight: 700; }

.review__author {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
}

.review__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink-700);
}

/* Prawdziwe opinie mają skrajnie różne długości — od dwóch zdań do tysiąca
   znaków. Bez ograniczenia jedna rozciągnęłaby cały rząd kart na kilka ekranów.
   Domyślnie przycinamy do 7 linii; przycisk "Rozwiń" dokłada JS tylko tam, gdzie
   tekst faktycznie się nie mieści (patrz clampReviews w main.js). */
.review__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}

.review__text.is-open {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* .review jest flexem z gap 14px, więc własnego marginesu górnego nie dokładamy —
   ujemny tylko ściąga przycisk bliżej tekstu, do którego należy. */
.review__more {
  align-self: flex-start;
  margin-top: -6px;
  padding: 2px 0;
  background: none;
  border: 0;
  color: var(--pink-text);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.review__more:hover { color: #fff; }

/* Opinie z Google nie mają u nas zdjęć autorów — zaciąganie awatarów wprost
   z serwerów Google to żądanie z przeglądarki odwiedzającego (RODO), a te adresy
   po czasie i tak wygasają. Zamiast tego monogram z inicjałów. */
.review__avatar--mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-700);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.review__name { font-size: .813rem; font-weight: 700; line-height: 1.3; }
.review__car { font-size: .75rem; color: var(--text-dim); line-height: 1.3; }

/* Pasek nawigacji zostaje w jednej linii — zawijać ma się tylko blok kropek
   (niżej), bo przy `flex-wrap: wrap` tutaj druga strzałka spadała pod spód
   i sterowanie rozjeżdżało się na dwa wiersze. */
.reviews__nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 20px;
  min-width: 0;
}

/* Kropek jest tyle, ile stron suwaka — na telefonie przy 12 opiniach to 12
   przycisków po 24 px, czyli 288 px plus strzałki. Zawijanie zamiast jednej
   linii, żeby liczba opinii nie decydowała o tym, czy układ się mieści. */
.reviews__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-width: 0;
  flex: 0 1 auto;          /* może się skurczyć i zawinąć, nie rozpycha paska */
}

.reviews__arrow { flex: none; }

/* Kropka zostaje mała, ale przycisk musi mieć 24 x 24 px obszaru dotyku (WCAG 2.2).
   Powiększamy go przezroczystym paddingiem, a sam znacznik rysuje ::before.
   Bez ujemnych marginesów — przyciski zachodziłyby wtedy na siebie i liczona
   byłaby tylko nienakryta część (14 x 24 px), czyli nadal za mało. */
.reviews__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.reviews__dot::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  transition: background-color .2s ease, width .2s ease;
}

.reviews__dot.is-active::before { background: var(--pink); width: 16px; border-radius: 4px; }

.reviews__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

.reviews__arrow:hover { background: var(--pink); border-color: var(--pink); }
.reviews__arrow svg { width: 14px; height: 14px; }

@media (min-width: 720px) {
  .reviews__track { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .reviews__inner { grid-template-columns: minmax(260px, 30%) 1fr; gap: 40px; }
  .reviews__track { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   KONTAKT — pasek
   ========================================================= */

.contact {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background:
    url('../img/section-bg-light.webp') right center / cover no-repeat,
    var(--surface-alt);
}

.contact__inner {
  position: relative;
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: center;
}

.contact__intro { max-width: 380px; }
.contact__intro .lead { margin-top: 14px; font-size: .875rem; }

.contact__cards {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease;
}

.contact-card:hover { box-shadow: var(--shadow-md); }

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(236, 26, 94, .4);
  border-radius: 50%;
  color: var(--pink-text);
}

.contact-card__icon svg { width: 18px; height: 18px; }

.contact-card__text { min-width: 0; }

.contact-card__value {
  display: block;
  font-size: .938rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;
  word-break: break-word;
}

.contact-card__meta {
  display: block;
  margin-top: 3px;
  font-size: .7rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-muted);
}

@media (min-width: 620px) {
  .contact__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1060px) {
  .contact__inner { grid-template-columns: minmax(240px, 26%) 1fr auto; gap: 26px; }
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y) 30px;
  background:
    linear-gradient(90deg, rgba(11, 11, 13, .96) 0%, rgba(11, 11, 13, .86) 55%, rgba(11, 11, 13, .72) 100%),
    url('../img/footer-bg.webp') center right / cover no-repeat,
    var(--ink-850);
  color: #fff;
}

.site-footer__inner {
  position: relative;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

.site-footer__company {
  margin-top: 14px;
  font-size: .813rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
}

.site-footer__tagline {
  margin-top: 5px;
  color: var(--text-dim);
  font-size: .75rem;
  letter-spacing: .01em;
}

.footer-col__title {
  margin-bottom: 14px;
  font-size: .813rem;
  font-weight: 700;
  color: #fff;
}

.footer-links {
  display: grid;
  gap: 9px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-links a,
.footer-contact li {
  color: #a5a5ae;
  font-size: .813rem;
  line-height: 1.5;
}

.footer-links a { transition: color .2s ease; }
.footer-links a:hover { color: var(--pink-text); }

.footer-contact { display: grid; gap: 11px; }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-contact svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  color: #74747e;
}

.footer-contact a { transition: color .2s ease; }
.footer-contact a:hover { color: var(--pink-text); }

.socials { display: flex; gap: 10px; }

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #d6d6dd;
  transition: background-color .2s ease, color .2s ease;
}

.socials a:hover { background: var(--pink); color: #fff; }
.socials svg { width: 16px; height: 16px; }

.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  color: #74747e;
  font-size: .75rem;
}

.site-footer__by { letter-spacing: .04em; }

.site-footer__by a {
  font-weight: 800;
  color: #d6d6dd;
  transition: color .2s ease;
}

.site-footer__by a:hover { color: var(--pink-text); }

@media (min-width: 620px) {
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .site-footer__inner {
    grid-template-columns: minmax(230px, 1.2fr) 1.1fr 1.2fr 1fr;
    gap: 40px;
  }
  .site-footer__socials { justify-self: end; align-self: start; }
}

/* =========================================================
   PODSTRONY USŁUG — komponenty wspólne
   ========================================================= */

/* hero z listą atutów pod przyciskami (zamiast kolumny po prawej)

   UWAGA: bazowe `.chero` jest zdefiniowane NIŻEJ w tym pliku i ma tę samą specyficzność,
   więc przy zwykłym `.chero--chip` wygrywało ono i obie podstrony pokazywały hero kontaktu.
   Stąd podwójna klasa `.chero.chero--chip` — podnosi specyficzność do 0,2,0. */
/* Hero chiptuningu — zdjęcie nie jest tłem sekcji, tylko osobną warstwą.

   Powód: hero jest szerokie i niskie, a auto zajmuje prawie cały kadr.
   Przy `background: cover` zawsze coś wypadało — albo szyld nad bramą
   u góry, albo koła u dołu. Tutaj zdjęcie skaluje się do WYSOKOŚCI sekcji
   (stałe proporcje) i mieści się w całości, a jego lewa krawędź jest
   wygaszona maską, więc nie widać, w którym miejscu się kończy.

   Druga warstwa to zasłona: zdjęcie jest robione w pełnym słońcu i bez
   przyciemnienia biały tekst byłby na nim nieczytelny. */
.chero.chero--chip { background: var(--ink-900); }

.chero.chero--chip::before,
.chero.chero--chip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chero.chero--chip::before {
  background: url('../img/chip-hero-2026.webp') center center / cover no-repeat;
}

.chero.chero--chip::after {
  background: linear-gradient(to bottom, rgba(8, 8, 10, .88) 0%, rgba(8, 8, 10, .8) 58%, rgba(8, 8, 10, .74) 100%);
}

/* Na wąskim ekranie zdjęcie zostaje pełnoekranowe (`cover`) i równomiernie
   przyciemnione — tekst idzie tam przez cały kadr. Dopiero od ~900 px
   robi się miejsce, żeby zdjęcie zmieścić w całości po prawej. */
@media (min-width: 901px) {
  .chero.chero--chip::before {
    left: auto;
    aspect-ratio: 1672 / 941;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 34%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 34%);
  }

  .chero.chero--chip::after {
    background: linear-gradient(95deg,
      rgba(8, 8, 10, .94) 0%,
      rgba(8, 8, 10, .78) 28%,
      rgba(8, 8, 10, .34) 56%,
      rgba(8, 8, 10, .36) 100%);
  }
}

/* Treść musi wyjść nad obie warstwy. */
.chero--chip .container { position: relative; z-index: 1; }

.chero.chero--turbo {
  background:
    linear-gradient(95deg, rgba(8, 8, 10, .95) 0%, rgba(8, 8, 10, .72) 32%, rgba(8, 8, 10, .22) 64%, rgba(8, 8, 10, .38) 100%),
    url('../img/turbo-hero.webp?v=23') center center / cover no-repeat,
    var(--ink-900);
}

.chero__inner--stack { grid-template-columns: 1fr; }
.chero__inner--stack .chero__content { max-width: 780px; }
.chero__inner--stack .chero__title { max-width: 560px; }

.hero__usp--dark {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero__usp--dark .usp { color: #e6e6ea; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.hero__usp--dark .usp__icon { border-color: rgba(236, 26, 94, .65); }

/* cztery atuty w rzędzie — węższe pozycje, żeby zmieściły się w jednej linii */
@media (min-width: 900px) {
  .hero__usp--four { gap: 16px 22px; flex-wrap: nowrap; }
  .hero__usp--four .usp { font-size: .75rem; }
  .hero__usp--four .usp__icon { width: 30px; height: 30px; }
  .chero--turbo .chero__inner--stack .chero__content { max-width: 920px; }
  .chero--turbo .chero__text { max-width: 430px; }
}

/* kafelki z banerowym zdjęciem */
.services--tight { padding-block: 40px; }
.card--strip .card__media { aspect-ratio: 32 / 9; padding: 0; background: var(--ink-900); }
.card--strip .card__media img { object-fit: cover; }
.card--strip .card__body { padding-top: 20px; }

/* ---------- sekcja „czym jest…" ---------- */

.what {
  position: relative;
  overflow: hidden;
  padding-block: 46px;
  background:
    url('../img/section-bg-light.webp') right center / cover no-repeat,
    var(--surface-alt);
}

.what__inner {
  position: relative;
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: center;
}

.what__panel {
  position: relative;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
}

.what__panel > * { position: relative; z-index: 1; }

.what__text .lead { margin-top: 14px; }
.what__art { display: flex; justify-content: center; }
.what__art img { width: 100%; max-width: 330px; height: auto; }

.what__list-title {
  margin-bottom: 14px;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.what__list ul { display: grid; gap: 11px; }

.what__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .8125rem;
  font-weight: 600;
  color: #33333b;
}

.what__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--pink-text);
}

.what__ico svg { width: 17px; height: 17px; }

/* wariant: cała sekcja ciemna */
.what--dark {
  background: var(--ink-900);
  color: #fff;
}

.what--dark .section-title { color: #fff; }
.what--dark .lead { color: #b9b9c2; }
.what--dark .what__list-title { color: #fff; }
.what--dark .what__list li { color: #d8d8de; }

/* wariant: lista z okrągłymi ikonami (jak na podstronie hybryd) */
.what__list--circles li { gap: 13px; font-size: .875rem; }

.what__list--circles .what__ico {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(236, 26, 94, .45);
  border-radius: 50%;
}

.what__cta { margin-top: 20px; }

@media (min-width: 1000px) {
  .what__inner { grid-template-columns: minmax(260px, 30%) 1fr; gap: 30px; }
  .what__panel { grid-template-columns: 1.05fr 1fr; gap: 26px; padding: 34px 0 34px 26px; }
  .what--dark .what__panel,
  .what--plain .what__panel { padding-left: 0; }

  /* Ciemne tło rysuje pseudoelement panelu, a nie gradient na całej sekcji —
     dzięki temu krawędź jasne/ciemne zawsze trafia w odstęp między kolumnami
     i nie wchodzi na tekst. Nadmiar w prawo przycina .what { overflow: hidden }. */
  .what--split .what__panel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15px;
    right: calc(50% - 50vw);
    background:
      linear-gradient(90deg, rgba(11, 11, 13, .93) 0%, rgba(11, 11, 13, .84) 100%),
      url('../img/chip-dyno.webp') center right / cover no-repeat,
      var(--ink-900);
  }

  .what--split .what__list-title { color: #fff; }
  .what--split .what__list li { color: #d8d8de; }
}

/* ---------- proces krok po kroku ---------- */

.process { padding-block: 46px; background: #fff; }

.process__inner {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
}

.process__intro { max-width: 380px; }
.process__intro .lead { margin-top: 14px; font-size: .875rem; }

.process__steps {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  counter-reset: krok;
}

.step {
  display: flex;
  flex-direction: column;
  padding: 0 0 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.step__media { position: relative; background: var(--ink-900); }

.step__media img {
  width: 100%;
  height: auto;          /* bez tego atrybut height="" z HTML bije aspect-ratio */
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.step__no {
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--pink-text);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.step__title {
  margin: 16px 16px 0;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.step__desc {
  margin: 7px 16px 0;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (min-width: 620px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .process__inner { grid-template-columns: minmax(260px, 28%) 1fr; gap: 34px; }
  .process__steps { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .process__steps--five { grid-template-columns: repeat(5, 1fr); gap: 11px; }
  .process__steps--five .step__title { font-size: .875rem; margin-inline: 13px; }
  .process__steps--five .step__desc { font-size: .6875rem; margin-inline: 13px; }
}

/* ---------- przykładowe efekty ---------- */

.effects {
  padding-block: 46px;
  background: var(--ink-900);
  color: #fff;
}

.effects__inner {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
}

.effects__intro { max-width: 380px; }
.effects__intro .section-title { color: #fff; }

.effects__lead {
  margin-top: 14px;
  color: #b9b9c2;
  font-size: .875rem;
  line-height: 1.65;
}

.effects__intro .btn { margin-top: 20px; }

.effects__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.ecard {
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  overflow: hidden;
}

.ecard__media img {
  width: 100%;
  height: auto;          /* jw. — atrybut height="" nadpisywałby aspect-ratio */
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ecard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 14px 15px 16px;
}

.ecard__name {
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ecard__engine { font-size: .6875rem; color: var(--text-dim); margin-top: 2px; }

.ecard__stats { margin-top: 11px; display: grid; gap: 5px; }

.ecard__stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: .75rem;
}

.ecard__stats dt { color: var(--text-dim); }

.ecard__stats dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c9c9d2;
  white-space: nowrap;
}

.ecard__stats dd b { color: var(--pink-text); font-weight: 800; }
.ecard__stats .stat__arrow { width: 11px; height: 11px; color: var(--pink-text); flex: none; }

/* badge zawsze przy dolnej krawędzi — nazwy modeli mają różną liczbę linii */
.ecard__gain { display: flex; gap: 8px; margin-top: auto; padding-top: 13px; }

/* wariant: jeden parametr + okrągła strzałka (podstrona turbosprężarek) */
.ecard__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 13px;
}

.ecard__single {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8125rem;
  font-weight: 600;
  color: #c9c9d2;
  white-space: nowrap;
}

.ecard__single b { color: var(--pink-text); font-weight: 800; }
.ecard__single .stat__arrow { width: 11px; height: 11px; color: var(--pink-text); flex: none; }

.ecard .arrow-circle { width: 32px; height: 32px; }
.ecard:hover .arrow-circle { background: var(--pink); color: #fff; }

.ecard__gain span {
  flex: 1 1 0;
  padding: 6px 4px;
  background: var(--pink);
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
}

@media (min-width: 560px) {
  .effects__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .effects__inner { grid-template-columns: minmax(260px, 28%) 1fr; gap: 34px; }
  .effects__grid { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   PODSTRONA KONTAKT
   ========================================================= */

.btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
}

.btn--outline:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

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

.chero {
  position: relative;
  overflow: hidden;
  padding-block: 44px 96px;
  background:
    linear-gradient(100deg, rgba(8, 8, 10, .92) 0%, rgba(8, 8, 10, .62) 38%, rgba(8, 8, 10, .18) 72%, rgba(8, 8, 10, .35) 100%),
    url('../img/contact-hero.webp') center right / cover no-repeat,
    var(--ink-900);
  color: #fff;
}

/* minmax(0, 1fr) zamiast 1fr — ścieżka `1fr` ma domyślnie `min-width: auto`,
   więc treść, której nie da się zawinąć, rozpycha siatkę i wypycha całą sekcję
   poza ekran, zamiast po prostu zostać przycięta. */
.chero__inner {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.chero__content { max-width: 540px; }
.chero__kicker { color: rgba(255, 255, 255, .7); margin-bottom: 16px; }

.chero__title {
  font-size: clamp(1.875rem, 1.1rem + 3.3vw, 2.875rem);
  text-transform: uppercase;
}

.chero__title .accent { color: var(--pink-text); display: block; }

.chero__text {
  margin-top: 14px;
  max-width: 430px;
  color: #c2c2ca;
  font-size: .875rem;
  line-height: 1.65;
}

.chero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.chero__perks { display: grid; gap: 12px; }

.perk {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .8125rem;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65);   /* czytelność na jasnych fragmentach zdjęcia */
}

.perk__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
}

.perk__icon svg { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .chero__inner { grid-template-columns: 1fr auto; gap: 48px; }
  .chero__perks { justify-self: end; }
}

/* ---------- 4 karty kontaktowe ---------- */

.kcards {
  position: relative;   /* bez tego karty chowają się pod hero */
  z-index: 2;
  background: var(--surface-alt);
}

.kcards__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: -58px;
  padding-bottom: 44px;
}

.kcard {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 16, 20, .04), 0 10px 30px rgba(16, 16, 20, .08);
}

.kcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border: 1.5px solid rgba(236, 26, 94, .4);
  border-radius: 50%;
  color: var(--pink-text);
}

.kcard__icon svg { width: 17px; height: 17px; }

.kcard__title {
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.kcard__value {
  margin-top: 4px;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.015em;
  word-break: break-word;
}

.kcard__value a:hover { color: var(--pink-text); }
.kcard__meta { font-size: .8125rem; color: #3a3a42; }

.kcard__note {
  margin-top: auto;
  padding-top: 10px;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.kcard__hours {
  margin-top: 6px;
  border-collapse: collapse;
  font-size: .75rem;
}

.kcard__hours th {
  padding: 1px 14px 1px 0;
  text-align: left;
  font-weight: 600;
  color: #3a3a42;
}

.kcard__hours td { font-weight: 700; white-space: nowrap; }

@media (min-width: 620px) {
  .kcards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .kcards__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- formularz + mapa ---------- */

.kform {
  position: relative;
  overflow: hidden;
  padding-block: 46px;
  background:
    url('../img/section-bg-light.webp') left center / cover no-repeat,
    var(--surface-alt);
}

.kform__inner {
  position: relative;
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
}

/* tytuł „Napisz do nas" w jednej linii, jak na projekcie */
.kform__intro .section-title .accent { display: inline; }

.kform__sub { margin-top: 10px; font-weight: 700; font-size: .9375rem; }
.kform__intro .lead { margin-top: 12px; font-size: .875rem; }

.kform__art {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.kform__art img {
  flex: none;
  width: 230px;
  height: auto;
  margin-left: -56px;   /* turbina wychodzi poza kolumnę, jak na projekcie */
}

.kform__art figcaption {
  font-size: .875rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-900);
}

.kform__art figcaption::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  margin-top: 6px;
  background: var(--pink);
  border-radius: 2px;
}

.kform__form {
  display: grid;
  gap: 12px;
  padding: 22px 20px 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 16, 20, .04), 0 12px 34px rgba(16, 16, 20, .08);
}

.field { display: grid; gap: 6px; }

.field label {
  font-size: .813rem;
  font-weight: 700;
  color: #26262b;
}

.req { color: var(--pink-text); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfbfc;
  font: inherit;
  font-size: .875rem;
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.field textarea { resize: vertical; min-height: 118px; }

.field input::placeholder,
.field textarea::placeholder { color: #a6a6b0; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(236, 26, 94, .14);
}

.field .is-invalid,
.consent input.is-invalid {
  border-color: #d92b2b;
  background: #fff6f6;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

.consent input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--pink-text);
}

/* pułapka na boty */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kform__submit { width: 100%; }
.kform__submit[disabled] { opacity: .6; cursor: progress; }

.form-msg {
  margin: 0;
  padding: 11px 13px;
  border-radius: var(--radius);
  font-size: .813rem;
  line-height: 1.5;
}

.form-msg[hidden] { display: none; }
.form-msg.is-ok { background: #e9f8ee; color: #17663a; }
.form-msg.is-error { background: #fdecec; color: #9c1d1d; }

/* karta z mapą */
.kmap {
  overflow: hidden;
  background: var(--ink-900);
  border-radius: 10px;
  color: #fff;
}

.kmap__body { padding: 22px 20px 20px; }
.kmap__kicker { color: var(--pink-text); margin-bottom: 12px; }

/* biały box z adresem nałożony na mapę (jak na projekcie) */

/* `z-index: 0` nie jest ozdobnikiem — zakłada kontekst układania na całej mapie.
   Leaflet rozdaje swoim warstwom bardzo wysokie z-indeksy (kontrolki 1000, popupy 700,
   znaczniki 600), a .leaflet-container ma `z-index: auto`, więc bez tego te warstwy
   konkurują wprost z resztą strony i wygrywają z przyklejonym nagłówkiem (60) oraz
   widgetem WhatsApp (80) — przy przewijaniu przyciski +/- i biały box z adresem
   wychodziły na wierzch nagłówka. Kontekst zamyka je w obrębie karty z mapą. */
.kmap__figure { position: relative; z-index: 0; }

.kmap__badge {
  position: absolute;
  right: 14px;
  top: 50%;
  z-index: 500;
  transform: translateY(-50%);
  display: grid;
  gap: 6px;
  max-width: 180px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  color: var(--text);
}

.kmap__badge img { width: 104px; height: auto; }

.kmap__badge p {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}

.kmap__title {
  font-size: clamp(1.375rem, 1rem + 1.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}

.kmap__text {
  margin-top: 14px;
  color: #b9b9c2;
  font-size: .875rem;
  line-height: 1.65;
}

.kmap .btn { margin-top: 18px; }
.kmap__canvas { height: 260px; background: #1a1a20; }

/* Leaflet — dopasowanie do motywu */
.map-pin svg { width: 38px; height: 38px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4)); }
.leaflet-container { font: inherit; font-size: .813rem; }
.leaflet-popup-content-wrapper { border-radius: 8px; }
.leaflet-popup-content { margin: 12px 14px; line-height: 1.5; }
.leaflet-popup-content a { color: var(--pink-text); font-weight: 700; }
.leaflet-control-attribution { font-size: 10px; }

@media (min-width: 720px) {
  .kmap__canvas { height: 300px; }
}

@media (min-width: 1100px) {
  .kform__inner { grid-template-columns: minmax(230px, 1fr) 1.35fr 1.4fr; gap: 30px; }
}

/* ---------- pasek warsztatu ---------- */

.kshop {
  overflow: hidden;
  padding-block: 40px;
  background: var(--ink-900);
  color: #fff;
}

.kshop__inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
}

.kshop__kicker { color: var(--pink-text); margin-bottom: 14px; }

.kshop__title {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}

.kshop__lead {
  margin-top: 14px;
  max-width: 420px;
  color: #b9b9c2;
  font-size: .875rem;
  line-height: 1.65;
}

.kshop .btn { margin-top: 22px; }

.kshop__gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

/* `contain`, nie `cover`: dwa z tych zdjęć są PIONOWE (1011 x 1347), a kafelek
   był poziomy — przycinanie zjadało 44% kadru, a z wydruku z hamowni zostawała
   sama ramka wykresu bez krzywych. Teraz zdjęcie wchodzi w całości, tylko
   pomniejszone.

   Kafelek jest kwadratowy, bo w poziomym pionowe zdjęcie zajmuje ledwie
   połowę jego szerokości i robi się znaczkiem. Pasek siedzi na ciemnym tle
   sekcji, więc wolne miejsce obok zdjęcia nie czyta się jak czarne pasy,
   tylko jak odstęp. */
.kshop__gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 6px;
}

@media (min-width: 900px) {
  .kshop__inner { grid-template-columns: minmax(280px, 34%) 1fr; gap: 36px; }
  /* zdjęcia dochodzą do prawej krawędzi ekranu, jak na projekcie */
  .kshop__gallery { margin-right: calc(50% - 50vw); }
  .kshop__gallery img:last-child { border-radius: 6px 0 0 6px; }
}

/* ---------- FAQ ---------- */

.faq { padding-block: 44px; background: #fff; }

.faq__inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}

.faq__intro { max-width: 420px; }
.faq__intro .lead { margin-top: 16px; }

.faq__list {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.faq-item {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .2s ease, background-color .2s ease;
}

.faq-item[open] { background: #fff; border-color: rgba(236, 26, 94, .35); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: .875rem;
  font-weight: 600;
  color: #26262b;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--pink), var(--pink)) center / 13px 2px no-repeat,
    linear-gradient(var(--pink), var(--pink)) center / 2px 13px no-repeat;
  transition: transform .2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  padding: 0 16px 16px;
  font-size: .813rem;
  line-height: 1.65;
  color: var(--text-muted);
}

@media (min-width: 760px) {
  .faq__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .faq__inner { grid-template-columns: minmax(280px, 30%) 1fr; gap: 40px; }
}

/* =========================================================
   PODSTRONA WTRYSKIWACZE — komponenty własne
   ========================================================= */

/* ---------- jasny hero (biel po lewej, zdjęcie po prawej) ---------- */

/* Baner od klienta (herowtryski.png) ma własne rozmycie do bieli po lewej — wystarczy
   delikatny gradient, żeby tekst trzymał kontrast także na węższych ekranach. */
.chero.chero--inj {
  padding-block: 40px 44px;
  color: var(--text);
  background:
    linear-gradient(95deg,
      #fbfbfc 0%,
      rgba(251, 251, 252, .92) 20%,
      rgba(251, 251, 252, .45) 38%,
      rgba(251, 251, 252, 0) 56%),
    url('../img/inj-hero.webp?v=23') center center / cover no-repeat,
    #fbfbfc;
}

.chero--inj .container { position: relative; z-index: 1; }

/* na telefonie gradient poziomy nic nie daje — zdjęcie leci pod tekstem.
   Przykrywamy górę hero bielą, zdjęcie zostaje widoczne u dołu. */
@media (max-width: 899px) {
  .chero.chero--inj {
    background:
      linear-gradient(180deg,
        rgba(251, 251, 252, .97) 0%,
        rgba(251, 251, 252, .95) 72%,
        rgba(251, 251, 252, .62) 88%,
        rgba(251, 251, 252, .28) 100%),
      url('../img/inj-hero.webp?v=23') center right / cover no-repeat,
      #fbfbfc;
  }

  /* znak wodny przy tej szerokości zakrywa ikony sekcji */
  .why--inj { background-image: none; }
}

.chero--inj .chero__kicker { color: var(--text-muted); }
.chero--inj .chero__text { color: var(--text-muted); max-width: 400px; }
.chero--inj .hero__usp { margin-top: 30px; }

/* jasny hero nie ma kreski nad atutami — atuty siedzą na bieli */
.chero--inj .usp { color: #3a3a42; }

/* cztery atuty muszą zmieścić się w jednej linii na białym tle, nie na zdjęciu */
@media (min-width: 900px) {
  .chero--inj .chero__inner--stack .chero__content { max-width: 940px; }
  .chero--inj .hero__usp--four { max-width: 800px; gap: 16px 24px; flex-wrap: nowrap; }
  .chero--inj .hero__usp--four .usp { font-size: .6875rem; }
  .chero--inj .hero__usp--four .usp__icon { width: 32px; height: 32px; }
}

/* ---------- znak wodny wtryskiwacza w „Dlaczego ProfiTurbo?" ---------- */

.why--inj {
  background:
    url('../img/inj-why-bg.webp') right center / auto 100% no-repeat,
    var(--surface-alt);
}

/* ---------- „Realne efekty" — porównanie wtryskiwaczy przed/po ---------- */

.icards {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.icard {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 12px 12px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  background: #1c1e1f;
}

.icard__photo { align-self: stretch; display: flex; align-items: center; }

.icard__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.icard__name {
  font-size: .9375rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}

.icard__sprays {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 11px;
}

.icard__sprays figure { margin: 0; }

.icard__sprays img {
  width: 100%;
  height: auto;
  aspect-ratio: 25 / 15;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 5px;
  background: #0d0e0f;
}

.icard__sprays figcaption {
  margin-top: 6px;
  text-align: center;
  font-size: .6875rem;
  font-weight: 700;
  color: #e9e9ee;
}

.icard__table {
  margin: 11px 0 0;
  padding: 10px 9px;
  border-radius: 7px;
  background: #fff;
  display: grid;
  gap: 6px;
}

/* grid, nie flex: etykieta dostaje `minmax(0, 1fr)` i w razie czego zawija się w drugą linię,
   zamiast wypychać kolumnę z wartościami poza kartę (tak psuła się wersja EN) */
.icard__table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.icard__table dt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: .625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.icard__table dd {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: .625rem;
  font-weight: 700;
  color: var(--pink-text);
  white-space: nowrap;
}

.icard__table dd b { font-weight: 800; }
.icard__table .stat__arrow { width: 11px; height: 11px; color: #8d8d96; flex: none; }

.icard__ico { width: 13px; height: 13px; color: var(--pink-text); flex: none; }
.icard__no { width: 12px; height: 12px; color: var(--pink-text); flex: none; }
.icard__yes { width: 13px; height: 13px; color: #16a34a; flex: none; }

/* minmax(0,…), bo tabelki mają `white-space: nowrap` i przy zwykłym 1fr
   karta o najszerszej treści rozpycha kolumnę — karty wychodziły nierówne */
@media (min-width: 640px) {
  .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .icards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .icard { grid-template-columns: 62px minmax(0, 1fr); }
}

/* makieta daje kartom więcej miejsca niż domyślne 28 % kolumny wstępu */
@media (min-width: 1100px) {
  .effects--inj .effects__inner { grid-template-columns: minmax(200px, 21%) minmax(0, 1fr); }
  .effects--inj .effects__intro .btn { font-size: .75rem; padding-inline: 16px; }
}

/* strzałki między krokami procesu (jak na makiecie) — tylko gdy kroki stoją w jednym rzędzie */
.step__arrow { display: none; }

@media (min-width: 1100px) {
  /* .step ma overflow:hidden (zaokrąglony róg zdjęcia) — obcinało strzałkę wystającą poza
     kartę. Zaokrąglenie robi teraz samo <img>, więc karta może nie klipować. */
  .process__steps--arrows .step { overflow: visible; }
  .process__steps--arrows .step__media img { border-radius: 9px 9px 0 0; }

  .process__steps--arrows .step__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 72%;
    left: -20px;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    background: #fff;
    color: var(--pink-text);
    box-shadow: 0 0 0 3px #fff;
    z-index: 2;
  }

  .process__steps--arrows .step__arrow svg { width: 13px; height: 13px; }
}

/* ---------- pasek CTA ze zdjęciem rdzeni CHRA (tylko podstrona turbosprężarek) ---------- */

/* Zdjęcie jest jednolicie szare na całej powierzchni, więc sam nagłówek by na nim zginął.
   Lewa część (tekst) dostaje pełną zasłonę, prawa tylko lekki welon — karty kontaktowe
   i różowy przycisk mają własne tła, więc nad zdjęciem czytają się bez problemu.
   Podwójna klasa, bo bazowe `.contact` ma tę samą specyficzność. */
.contact.contact--chra {
  background:
    linear-gradient(95deg,
      var(--surface-alt) 0%,
      var(--surface-alt) 26%,
      rgba(244, 244, 246, .93) 40%,
      rgba(244, 244, 246, .62) 56%,
      rgba(244, 244, 246, .34) 76%,
      rgba(244, 244, 246, .3) 100%),
    url('../img/cta-chra.webp?v=25') right center / cover no-repeat,
    var(--surface-alt);
}

/* skalowanie do szerokości, nie `cover` — patrz komentarz przy .contact--chipcta */
@media (max-width: 899px) {
  .contact.contact--chra {
    background:
      linear-gradient(180deg,
        var(--surface-alt) 0%,
        var(--surface-alt) 46%,
        rgba(244, 244, 246, .86) 66%,
        rgba(244, 244, 246, .48) 86%,
        rgba(244, 244, 246, .34) 100%),
      url('../img/cta-chra.webp?v=25') center bottom / 150% auto no-repeat,
      var(--surface-alt);
  }
}

/* ---------- pasek CTA ze zdjęciem wtryskiwaczy (tylko podstrona wtryskiwaczy) ---------- */

/* To zdjęcie jest wyraźnie ciemniejsze od CHRA (średnia jasność ~40 vs ~70), więc zasłona
   po lewej musi trzymać pełne krycie dłużej — inaczej ciemny tekst sekcji przestaje czytać.
   Po prawej zostawiam mniej welonu niż na turbo, bo ciemne tło ładnie niesie czerwone światło. */
.contact.contact--injcta {
  background:
    linear-gradient(95deg,
      var(--surface-alt) 0%,
      var(--surface-alt) 30%,
      rgba(244, 244, 246, .95) 42%,
      rgba(244, 244, 246, .66) 58%,
      rgba(244, 244, 246, .34) 78%,
      rgba(244, 244, 246, .28) 100%),
    url('../img/cta-inj.webp?v=26') right center / cover no-repeat,
    var(--surface-alt);
}

/* skalowanie do szerokości, nie `cover` — patrz komentarz przy .contact--chipcta */
@media (max-width: 899px) {
  .contact.contact--injcta {
    background:
      linear-gradient(180deg,
        var(--surface-alt) 0%,
        var(--surface-alt) 46%,
        rgba(244, 244, 246, .86) 66%,
        rgba(244, 244, 246, .46) 86%,
        rgba(244, 244, 246, .32) 100%),
      url('../img/cta-inj.webp?v=26') center bottom / 150% auto no-repeat,
      var(--surface-alt);
  }
}

/* ---------- pasek CTA ze zdjęciem auta na hamowni (tylko podstrona chiptuningu) ---------- */

/* Tłem jest zdjęcie warsztatu, ale nie jako `background` sekcji — jako
   osobna warstwa, tak samo jak w hero chiptuningu. Powody:

   1. Pasek jest bardzo szeroki i niski (ok. 4,3:1), a temat na zdjęciu —
      od szyldu „PROFI-TURBO" po koła auta — zajmuje kadr 2,35:1. Przy
      `cover` zawsze coś wypadało: albo szyld u góry, albo koła u dołu.
      Tutaj zdjęcie skaluje się do WYSOKOŚCI paska i mieści w całości.
   2. Samo dostawienie zdjęcia przy prawej krawędzi rysowało w połowie
      sekcji wyraźną pionową kreskę. Dlatego lewa krawędź jest wygaszona
      maską — nie widać, w którym miejscu zdjęcie się kończy.
   3. Zdjęcie jest robione w pełnym słońcu (niebo, biała blacha, jasna
      kostka). Ciemny tekst na czymś takim przestaje być czytelny, więc
      zasłona jest ciemna, a napisy w tej sekcji białe. */
.contact.contact--chipcta { background: var(--ink-900); }

.contact.contact--chipcta::before,
.contact.contact--chipcta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Na telefonie sekcja jest wysoka i wąska. Zmieszczone do wysokości zdjęcie
   zostałoby z niej wąskim słupkiem, więc tam leży pasem przy dolnej krawędzi
   na pełną szerokość: widać i szyld, i auto, a tekst siedzi wyżej, na
   czystym ciemnym tle. */
.contact.contact--chipcta::before {
  background: url('../img/warsztat-baner.webp') center bottom / 100% auto no-repeat;
}

.contact.contact--chipcta::after {
  background: linear-gradient(180deg,
    rgba(8, 8, 10, .96) 0%,
    rgba(8, 8, 10, .94) 58%,
    rgba(8, 8, 10, .62) 76%,
    rgba(8, 8, 10, .3) 88%,
    rgba(8, 8, 10, .26) 100%);
}

@media (min-width: 900px) {
  .contact.contact--chipcta::before {
    left: auto;
    aspect-ratio: 1600 / 681;
    background: url('../img/warsztat-baner.webp') center center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 36%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 36%);
  }

  .contact.contact--chipcta::after {
    background: linear-gradient(95deg,
      rgba(8, 8, 10, .94) 0%,
      rgba(8, 8, 10, .86) 30%,
      rgba(8, 8, 10, .52) 56%,
      rgba(8, 8, 10, .44) 100%);
  }
}

/* Treść musi wyjść nad obie warstwy. */
.contact--chipcta .container { position: relative; z-index: 1; }

/* Sekcja zrobiła się ciemna, więc tekst musi pojaśnieć. Białe kafelki
   z telefonem i mailem zostają — na ciemnym tle wychodzą do przodu. */
.contact--chipcta .section-title { color: #fff; }
.contact--chipcta .lead { color: rgba(255, 255, 255, .84); }

/* ---------- korzyści + typowe objawy (zdjęcie silnika po prawej) ---------- */

.symptoms {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--surface);
}

.symptoms::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 36%;
  background: url('../img/inj-engine.webp?v=24') right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

/* na wąskich ekranach zdjęcie tylko przeszkadza w czytaniu list */
@media (max-width: 899px) {
  .symptoms::before { display: none; }
}

.symptoms .container { position: relative; z-index: 1; }

.symptoms__inner {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
}

.symptoms__intro { max-width: 360px; }

.symptoms__dash {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 16px;
  background: var(--pink);
}

.symptoms__title {
  font-size: clamp(1.0625rem, .9rem + .7vw, 1.375rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.symptoms__title .accent { color: var(--pink-text); display: block; }

.checklist {
  display: grid;
  gap: 11px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .8125rem;
  line-height: 1.45;
  color: #2f2f37;
}

.checklist__ico {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--pink-text);
}

.symptoms__col--faults .checklist { margin-top: 16px; }

@media (min-width: 900px) {
  /* treść zajmuje lewe ~64 % szerokości — prawa część należy do zdjęcia silnika */
  .symptoms__inner {
    grid-template-columns: minmax(140px, 18%) minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 24px;
    align-items: start;
    max-width: 72%;
  }
  .symptoms__col--faults { padding-left: 24px; border-left: 1px solid var(--line); }
}

/* ---------- mobile: podstrona kontakt ---------- */

@media (max-width: 719px) {
  .chero { padding-block: var(--section-y) calc(var(--section-y) + 30px); }
  .chero__cta .btn { flex: 1 1 100%; }
  .chero__perks { gap: 13px; }
  .perk { font-size: .813rem; }

  .kform__art { max-width: 300px; margin-inline: auto; }
  .kform__form { padding: 20px 18px 22px; }

  .kshop__gallery { grid-template-columns: repeat(2, 1fr); }
  .kshop__gallery img:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* =========================================================
   WHATSAPP — pływający dymek (jak na profiturbo.com.pl)
   ========================================================= */

:root {
  --wa-green: #4fce5d;
  --wa-dark: #095e54;
  --wa-paper: #e6ddd4;
}

.wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.wa__fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--wa-green);
  box-shadow: 0 4px 12px rgba(16, 16, 20, .18), 0 12px 32px rgba(16, 16, 20, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wa__fab svg { width: 30px; height: 30px; }

.wa__fab:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(16, 16, 20, .22), 0 16px 40px rgba(16, 16, 20, .18);
}

.wa__panel {
  width: min(304px, calc(100vw - 36px));
  overflow: hidden;
  background: var(--wa-paper);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(16, 16, 20, .22), 0 24px 60px rgba(16, 16, 20, .2);
  animation: wa-in .18s ease-out;
}

.wa__panel[hidden] { display: none; }

@keyframes wa-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.wa__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: var(--wa-dark);
  color: #fff;
}

.wa__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.wa__who { flex: 1 1 auto; min-width: 0; }
.wa__name { font-size: .875rem; font-weight: 700; line-height: 1.3; }

.wa__status {
  font-size: .688rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .72);
}

.wa__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: -4px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .8);
  transition: background-color .2s ease, color .2s ease;
}

.wa__close:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.wa__close svg { width: 15px; height: 15px; }

.wa__body { padding: 20px 16px 16px; }

.wa__bubble {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 11px 14px;
  background: #fff;
  border-radius: 0 10px 10px 10px;
  box-shadow: 0 1px 2px rgba(16, 16, 20, .12);
  font-size: .813rem;
  line-height: 1.5;
  color: var(--text);
}

.wa__bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  border-width: 0 8px 9px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

.wa__start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  background: var(--wa-green);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  transition: background-color .2s ease;
}

.wa__start:hover { background: #3eb94b; }
.wa__start svg { width: 19px; height: 19px; flex: none; }

@media (max-width: 719px) {
  .wa { right: 14px; bottom: 14px; gap: 10px; }
  .wa__fab { width: 52px; height: 52px; }
  .wa__fab svg { width: 27px; height: 27px; }
}

/* =========================================================
   TELEFON — dopracowanie (testowane na 360 / 375 / 414 px)
   ========================================================= */

@media (max-width: 1059px) {
  :root { --header-h: 62px; }

  /* menu otwarte — blokada przewijania tła */
  body.nav-open { overflow: hidden; }

  .mobile-nav {
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .logo__img { height: 26px; }
}

@media (max-width: 719px) {
  /* --- hero --- */
  .hero__inner { gap: 22px; padding-block: 28px 34px; }
  .hero__kicker {
    margin-bottom: 14px;
    font-size: .625rem;
    letter-spacing: .18em;
  }
  .hero__title { font-size: clamp(2rem, 1.1rem + 5.4vw, 2.75rem); }
  .hero__text { margin-top: 14px; font-size: .875rem; }
  .hero__media img { height: clamp(230px, 62vw, 340px); object-position: 62% 52%; }

  .hero__cta { gap: 10px; margin-top: 22px; }
  .hero__cta .btn { flex: 1 1 100%; }

  .hero__usp {
    gap: 14px;
    margin-top: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(16, 16, 20, .1);
  }
  .usp { flex: 1 1 100%; gap: 12px; font-size: .75rem; }

  /* --- przyciski: pełna szerokość, wygodny target --- */
  .btn--lg { width: 100%; min-height: 50px; }
  .workshop .btn--lg,
  .contact__cta { width: 100%; }

  /* --- usługi --- */
  .services__grid { gap: 18px; }
  .card { border-radius: 14px; }
  .card__media { aspect-ratio: 4 / 3; padding: 18px; }
  .card__body { padding: 2px 20px 22px; }
  .card__dash { margin-bottom: 13px; }
  .card__title { font-size: 1.1875rem; }
  .card__foot { gap: 14px; padding-top: 12px; }
  .card__desc { font-size: .8125rem; }
  .card .arrow-circle { width: 42px; height: 42px; }

  /* --- dlaczego: 2 kolumny, ostatni kafelek na całą szerokość --- */
  .why { background-position: 78% center; }
  .why__inner { gap: 24px; }
  .why__list {
    gap: 14px 10px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }
  .why-item { padding: 10px 4px; gap: 10px; }
  .why-item:last-child { grid-column: 1 / -1; }
  .why-item__icon { width: 30px; height: 30px; }

  /* --- warsztat --- */
  .workshop__panel { padding: 30px var(--gutter) 34px; }
  .workshop__text { margin-top: 14px; font-size: .875rem; }

  /* --- realne efekty --- */
  .results__inner { gap: 22px; }
  .results__track { gap: 14px; }
  .result__media { aspect-ratio: 16 / 9; }

  /* --- opinie --- */
  .reviews__inner { gap: 22px; }
  .review { padding: 18px 18px 16px; }
  .reviews__nav { justify-content: space-between; margin-top: 16px; }
  .reviews__arrow { width: 40px; height: 40px; }

  /* --- kontakt --- */
  .contact { background-position: 80% center; }
  .contact__inner { gap: 20px; }
  .contact__intro .lead { margin-top: 12px; }
  .contact__cards { gap: 10px; }
  .contact-card { padding: 14px; }

  /* --- stopka --- */
  .site-footer__inner { gap: 26px; }
  .site-footer__bottom {
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
  }
  .logo--light .logo__img { height: 34px; }

  /* --- typografia sekcji --- */
  .section-title { font-size: clamp(1.625rem, 1.1rem + 2.6vw, 2rem); }
  .lead { font-size: .875rem; }
}

/* bardzo wąskie telefony (360 px i mniej) */
@media (max-width: 380px) {
  .why__list { grid-template-columns: 1fr; }
  .why-item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 8px 2px;
  }
  .why-item:last-child { grid-column: auto; }
  .footer-links { grid-template-columns: 1fr; }
  .result__body { flex-wrap: wrap; }
  .contact-card__meta { white-space: normal; }
}

/* =========================================================
   PODSTRONA O NAS
   Bloki celowo na końcu arkusza: bazowe `.chero`/`.contact` mają tę samą
   specyficzność co warianty, więc o wyniku decyduje kolejność (patrz .chero--chip).
   ========================================================= */

.chero.chero--onas {
  background:
    linear-gradient(100deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .78) 34%,
      rgba(8, 8, 10, .3) 66%, rgba(8, 8, 10, .45) 100%),
    url('../img/onas-hero.webp?v=28') center right / cover no-repeat,
    var(--ink-900);
}

@media (max-width: 899px) {
  .chero.chero--onas {
    background:
      linear-gradient(180deg, rgba(8, 8, 10, .93) 0%, rgba(8, 8, 10, .86) 62%,
        rgba(8, 8, 10, .74) 100%),
      url('../img/onas-hero.webp?v=28') center right / cover no-repeat,
      var(--ink-900);
  }
}

/* trzy atuty w jednym rzędzie — bez tego etykiety zawijały się do dwóch linii */
@media (min-width: 900px) {
  .hero__usp--three { gap: 16px 34px; flex-wrap: nowrap; }
  .hero__usp--three .usp__icon { width: 32px; height: 32px; }
  .chero--onas .chero__inner--stack .chero__content { max-width: 760px; }
}

/* ---------- nasza historia + misja ---------- */

/* Sekcja idzie na całą szerokość okna (bez .container), bo w makiecie trzy pasy —
   jasny tekst, zdjęcie, ciemny panel — dotykają krawędzi ekranu. */
.story__inner {
  display: grid;
  grid-template-columns: 1fr;
}

.story__text {
  padding: 34px var(--gutter);
  background: var(--surface-alt);
}

.story__dash {
  display: block;
  width: 40px;
  height: 3px;
  margin: 14px 0 16px;
  background: var(--pink);
  border-radius: 2px;
}

.story__text .lead { max-width: 420px; }
.story__text .btn { margin-top: 22px; }

.story__media { background: var(--ink-900); }

.story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__mission {
  padding: 34px var(--gutter);
  background: var(--ink-850);
  color: #fff;
}

.story__kicker { color: var(--pink-text); margin-bottom: 14px; }

.story__title {
  margin: 0;
  font-size: clamp(1.25rem, .95rem + 1.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.story__text-light {
  margin-top: 14px;
  max-width: 420px;
  color: #b9b9c2;
  font-size: .875rem;
  line-height: 1.7;
}

@media (min-width: 900px) {
  /* Pierwsza i ostatnia kolumna niosą też margines strony (padding liczony z
     szerokości okna), więc muszą być szersze niż same bloki tekstu z makiety —
     przy 26% na tekst zostawało ok. 230 px i akapit rwał się co trzy słowa. */
  .story__inner { grid-template-columns: minmax(360px, 32%) minmax(0, 1fr) minmax(330px, 30%); }
  .story__text { padding: 44px 32px 44px max(var(--gutter), calc((100vw - var(--container)) / 2)); }
  .story__mission { padding: 44px max(var(--gutter), calc((100vw - var(--container)) / 2)) 44px 32px; }
  /* zdjęcie w środku nie ma własnej wysokości — bierze ją z najwyższej kolumny */
  .story__media { min-height: 100%; }
}

/* ---------- nasze wartości ---------- */

.values { padding-block: var(--section-y); background: var(--surface-alt); }

.values__inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
}

.values__dash {
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 14px;
  background: var(--pink);
  border-radius: 2px;
}

.values__list {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.value { text-align: center; padding: 6px 10px; }

.value__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  color: var(--text);
}

.value__name {
  margin: 0;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.value__desc {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.55;
}

@media (min-width: 900px) {
  .values__inner { grid-template-columns: minmax(200px, 22%) minmax(0, 1fr); gap: 32px; }
  .values__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  /* pionowe kreski między pozycjami, jak w makiecie — pierwsza kolumna ich nie dostaje */
  .value + .value { border-left: 1px solid var(--line); }
  .value { padding: 6px 22px; }
}

/* ---------- nasz warsztat (panel + trzy zdjęcia) ---------- */

.wsgrid { padding-block: var(--section-y); background: var(--ink-900); color: #fff; }

.wsgrid__inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
}

.wsgrid__intro .section-title { color: #fff; }

.wsgrid__lead {
  margin-top: 16px;
  max-width: 380px;
  color: #b9b9c2;
  font-size: .875rem;
  line-height: 1.7;
}

.wsgrid__intro .btn { margin-top: 22px; }

/* Jedno prawdziwe zdjęcie siedziby zamiast trzech kadrów z makiety.
   Siatka zostaje (gdyby wróciło więcej zdjęć), ale dopasowuje liczbę kolumn
   do liczby obrazków, więc pojedyncze zajmuje całą szerokość. */
.wsgrid__media {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.wsgrid__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* przy dwóch lub więcej zdjęciach wracamy do kadrów 4:3 obok siebie */
.wsgrid__media:has(img + img) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wsgrid__media:has(img + img) img { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .wsgrid__inner { grid-template-columns: minmax(260px, 30%) minmax(0, 1fr); gap: 32px; }
}

/* ---------- oś czasu ---------- */

.timeline { padding-block: var(--section-y); background: var(--surface-alt); }

.timeline__inner {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

.timeline__intro .lead { margin-top: 16px; max-width: 360px; }

.timeline__list {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tpoint { position: relative; padding-left: 26px; }

.tpoint__dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--pink);
}

/* pionowa nitka łącząca kropki na wąskich ekranach */
.tpoint:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 19px;
  bottom: -22px;
  width: 1px;
  background: rgba(236, 26, 94, .45);
}

.tpoint__year {
  margin: 0;
  color: var(--pink-text);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.tpoint__desc {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .timeline__inner { grid-template-columns: minmax(260px, 30%) minmax(0, 1fr); gap: 36px; align-items: start; }
  .timeline__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding-top: 4px; }
  .tpoint { padding: 26px 12px 0 0; }
  .tpoint__dot { top: 0; left: 0; }

  /* na szerokim ekranie nitka biegnie poziomo, od kropki do kropki */
  .tpoint:not(:last-child)::before {
    left: 13px;
    right: 0;
    top: 6px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* ---------- gwarancja jakości ---------- */

.warranty {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--ink-900);
  color: #fff;
}

/* zdjęcie turbiny tylko po prawej, wygaszone maską — treść zostaje czytelna */
.warranty::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 34%;
  background: url('../img/onas-warranty.webp?v=28') center right / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  opacity: .55;
}

@media (max-width: 899px) {
  .warranty::before { display: none; }
}

.warranty .container { position: relative; z-index: 1; }

.warranty__inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
}

.warranty__intro .section-title { color: #fff; }

.warranty__lead {
  margin-top: 16px;
  max-width: 340px;
  color: #b9b9c2;
  font-size: .875rem;
  line-height: 1.7;
}

.warranty__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.wcard {
  padding: 16px 14px;
  background: #fff;
  border-radius: var(--radius-lg);
  color: var(--text);
}

.wcard__icon { width: 26px; height: 26px; margin-bottom: 12px; color: var(--pink-text); }

.wcard__name {
  margin: 0;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.wcard__desc {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .warranty__inner { grid-template-columns: minmax(240px, 27%) minmax(0, 1fr); gap: 28px; }
  .warranty__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- zaufali nam ---------- */

.partners { padding-block: 30px; background: var(--surface); border-top: 1px solid var(--line); }

.partners__inner {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  align-items: center;
}

.partners__title {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.partners__lead {
  margin: 10px 0 0;
  max-width: 330px;
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.6;
}

.partners__list {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sygnety producentów to znaki towarowe, których plików nie mamy — do czasu
   dostarczenia logotypów sekcja stoi na wersalikowych wordmarkach. */
.brand {
  text-align: center;
  color: #4a4a52;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand--boxed {
  padding: 5px 10px;
  border: 1.5px solid #4a4a52;
  border-radius: 3px;
  justify-self: center;
  letter-spacing: .04em;
}

/* "CONTINENTAL" to najdłuższy wordmark — przy 390 px dotykał krawędzi ekranu */
@media (max-width: 559px) {
  .brand { font-size: .8125rem; letter-spacing: .04em; }
}

/* Przy 320 px trzy kolumny dają po 84 px na komórkę, a "CONTINENTAL" potrzebuje
   101 px. To jedno słowo — nie ma gdzie go złamać — więc zamiast zmniejszać
   czcionkę do nieczytelnej, schodzimy do dwóch kolumn (135 px na komórkę). */
@media (max-width: 380px) {
  .partners__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .partners__inner { grid-template-columns: minmax(240px, 27%) minmax(0, 1fr); gap: 32px; }
  .partners__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
}

/* =========================================================
   HERO STRONY KONTAKTU
   ========================================================= */

/* Zdjęcie jako osobna warstwa, nie tło sekcji.

   Hero kontaktu jest najniższe na całej stronie — 431 px przy szerokości
   nawet 2545 px. Przy `background: cover` ze zdjęcia 4:3 zostawał pas
   rzędu jednej trzeciej kadru, a sam plik musiałby mieć ponad 2500 px
   szerokości, żeby nie być rozmytym na szerokim monitorze.

   Tutaj zdjęcie skaluje się do wysokości hero i staje przy prawej krawędzi
   — widać je w całości — a lewa strona jest wygaszona maską i wtapia się
   w ciemne tło pod tekstem. */
.chero.chero--kontakt { background: var(--ink-900); }

.chero.chero--kontakt::before,
.chero.chero--kontakt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Na wąskim ekranie hero jest wysokie i wąskie — zmieszczone do wysokości
   zdjęcie byłoby wtedy znacznie szersze od ekranu i i tak widzielibyśmy
   wycinek. Tam zostaje pełnoekranowe. */
.chero.chero--kontakt::before {
  background: url('../img/contact-hero-2026.webp') center right / cover no-repeat;
}

/* Zdjęcie jest jasne (plener w słońcu), a nagłówek biały — zasłona musi
   trzymać pełne krycie tam, gdzie stoi tekst. */
.chero.chero--kontakt::after {
  background: linear-gradient(180deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .88) 60%,
    rgba(8, 8, 10, .78) 100%);
}

@media (min-width: 900px) {
  .chero.chero--kontakt::before {
    left: auto;
    aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 40%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 40%);
  }

  /* Lista atutów NIE może stać przy prawej krawędzi — tam leży karoseria,
     a biały tekst na jasnym lakierze jest nieczytelny. Bazowy układ hero
     (`1fr auto` + `justify-self: end`) robił dokładnie to, więc tutaj go
     cofam: od 900 do 1200 px na szerokość dla dwóch kolumn po prostu nie ma
     miejsca, więc lista wraca pod tekst, w ciemne pole. */
  .chero--kontakt .chero__inner { grid-template-columns: minmax(0, 1fr); }
  .chero--kontakt .chero__perks { justify-self: start; }

  /* Skoro na zdjęciu nie leży już żaden tekst, zasłona po prawej może
     zelżeć — auto i szyld są wyraźniejsze niż wcześniej. */
  .chero.chero--kontakt::after {
    background: linear-gradient(100deg, rgba(8, 8, 10, .96) 0%, rgba(8, 8, 10, .86) 42%,
      rgba(8, 8, 10, .22) 70%, rgba(8, 8, 10, .3) 100%);
  }
}

/* Dopiero od 1200 px lista mieści się OBOK tekstu i wciąż kończy się przed
   zdjęciem. Kolumna tekstu jest płynna (`clamp`), bo odstęp między końcem
   tekstu a początkiem auta zmienia się z szerokością okna: zdjęcie zajmuje
   zawsze ok. 4/3 WYSOKOŚCI hero liczone od prawej krawędzi — więc im dłuższy
   przekład nagłówka, tym wyższe hero, szersze zdjęcie i mniej ciemnego pola.
   Próg 1200 px wziął się właśnie stąd: przy 1100 px francuski rozpychał hero
   do 590 px i lista lądowała na masce (zmierzone, nie zgadnięte). */
@media (min-width: 1200px) {
  .chero--kontakt .chero__inner {
    grid-template-columns: minmax(0, clamp(340px, 37vw, 540px)) auto;
    justify-content: start;
    gap: clamp(26px, 3vw, 48px);
  }
}

.chero--kontakt .container { position: relative; z-index: 1; }
/* =========================================================
   PODSTRONA REALIZACJE
   ========================================================= */

/* Hero realizacji — zdjęcie jest osobną warstwą, nie tłem sekcji.

   Powód: hero jest szerokie i niskie (ok. 2,45:1), a zdjęcie ma proporcje
   4:3. Przy `background: cover` zawsze przepadała ponad połowa kadru i
   jedyne, co dało się wybrać, to KTÓRA połowa. Tutaj zdjęcie skaluje się
   do wysokości hero i staje przy prawej krawędzi — widać je w całości —
   a jego lewa strona jest wygaszona maską, więc wtapia się w ciemne tło
   pod tekstem i nie widać, gdzie się kończy.

   Druga warstwa to zasłona pod tekst: zdjęcie jest z warsztatu, miejscami
   jasne, a nagłówek jest biały. */
.chero.chero--real { background: var(--ink-900); }

.chero.chero--real::before,
.chero.chero--real::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Na wąskim ekranie zdjęcie zostaje pełnoekranowe: hero jest tam wysokie
   i wąskie, więc zmieszczone do wysokości zrobiłoby się z niego znacznie
   szersze niż ekran i i tak zobaczylibyśmy wycinek. */
.chero.chero--real::before {
  background: url('../img/real-hero-2026.webp') center right / cover no-repeat;
}

.chero.chero--real::after {
  background: linear-gradient(180deg, rgba(8, 8, 10, .93) 0%, rgba(8, 8, 10, .86) 62%,
    rgba(8, 8, 10, .74) 100%);
}

@media (min-width: 900px) {
  .chero.chero--real::before {
    left: auto;
    aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 38%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 38%);
  }

  .chero.chero--real::after {
    background: linear-gradient(100deg, rgba(8, 8, 10, .95) 0%, rgba(8, 8, 10, .8) 32%,
      rgba(8, 8, 10, .32) 62%, rgba(8, 8, 10, .5) 100%);
  }
}

/* Treść musi wyjść nad obie warstwy. */
.chero--real .container { position: relative; z-index: 1; }

/* ---------- pasek filtrów ---------- */

.works { padding-block: var(--section-y); background: var(--surface); }

.wfilter {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

/* Chipy przewijają się w poziomie zamiast zawijać: na telefonie sześć etykiet
   zajęłoby trzy rzędy i zepchnęło siatkę poniżej pierwszego ekranu. */
.wfilter__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.wfilter__chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 9px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.chip:hover { border-color: #c9c9d1; }

.chip.is-active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

.wfilter__tools { display: grid; gap: 8px; grid-template-columns: 1fr; }

.wsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-height: 42px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.wsearch svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }

.wsearch input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .8125rem;
  outline: none;
}

.wsearch input::-webkit-search-cancel-button { cursor: pointer; }
.wsearch:focus-within { border-color: var(--pink); }

.wsort { position: relative; display: block; }

.wsort select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.wsort select:focus { outline: none; border-color: var(--pink); }

.wsort__chev {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  color: var(--text-muted);
  pointer-events: none;
}

@media (min-width: 900px) {
  .wfilter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .wfilter__tools { grid-template-columns: minmax(158px, 182px) minmax(140px, 164px); }

  /* Zmierzone przy 1216 px kontenera: chipy potrzebowały 817 px, a miały 774 —
     ostatni („Samochody dostawcze") był ucinany. Węższe narzędzia i ciaśniejsze
     chipy dają 50 px zapasu. Poniżej ~1210 px pas i tak się zawija, więc nic
     nie znika nawet na wąskim laptopie. */
  .wfilter__chips { gap: 7px; flex-wrap: wrap; overflow: visible; }
  .chip { padding: 9px 10px; font-size: .75rem; }
}

/* ---------- siatka realizacji ---------- */

.wgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.wcase {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}

.wcase[hidden] { display: none; }
.wcase:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.wcase__media { background: var(--ink-900); aspect-ratio: 16 / 10; }
.wcase__media img { width: 100%; height: 100%; object-fit: cover; }

.wcase__body {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 1 1 auto;
  padding: 13px 14px 14px;
}

.wcase__info { flex: 1 1 auto; min-width: 0; }

.wcase__name {
  margin: 0;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.wcase__engine {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: .75rem;
}

.wcase__stats { margin: 10px 0 0; display: grid; gap: 4px; }

.wcase__stats > div {
  display: grid;
  grid-template-columns: minmax(0, 54px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.wcase__stats dt {
  color: var(--text-muted);
  font-size: .6875rem;
  font-weight: 600;
}

.wcase__stats dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.wcase__stats dd b { color: var(--pink-text); font-weight: 800; }
.wcase__stats .stat__arrow { width: 11px; height: 11px; color: var(--pink-text); flex: none; }

.wcase:hover .arrow-circle { background: var(--pink); border-color: var(--pink); color: #fff; }

.wgrid__empty {
  margin: 28px 0 0;
  padding: 22px;
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: .875rem;
  text-align: center;
}

.wgrid__empty[hidden] { display: none; }

@media (min-width: 600px) { .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .wgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- wyróżniona realizacja ---------- */

.feat {
  padding-block: var(--section-y);
  background: var(--ink-900);
  color: #fff;
}

.feat__inner {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  align-items: center;
}

.feat__kicker { color: var(--pink-text); margin-bottom: 12px; }

.feat__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
}

.feat__sub {
  margin: 6px 0 0;
  color: #d3d3da;
  font-size: 1.125rem;
  font-weight: 600;
}

.feat__text {
  margin-top: 14px;
  max-width: 420px;
  color: #b9b9c2;
  font-size: .875rem;
  line-height: 1.7;
}

.feat__perks {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.fperk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  line-height: 1.35;
}

.fperk b { color: var(--pink-text); font-size: .8125rem; font-weight: 800; }

.fperk__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(236, 26, 94, .65);
  border-radius: 50%;
  color: var(--pink-text);
}

.fperk__icon svg { width: 16px; height: 16px; }

.feat__intro .btn { margin-top: 22px; }

.feat__media { border-radius: var(--radius-lg); overflow: hidden; }
.feat__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- wykres z hamowni ---------- */

.feat__chart {
  padding: 16px;
  background: var(--ink-850);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
}

.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.chart__kicker { color: #d3d3da; margin: 0; }
.chart__legend { display: flex; gap: 14px; }

.clegend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b9b9c2;
  font-size: .6875rem;
}

.clegend__line { display: block; width: 18px; height: 2px; border-radius: 1px; }
.clegend--stock .clegend__line { background: #8d8d96; }
.clegend--tuned .clegend__line { background: var(--pink); }

.chart { position: relative; margin: 0; padding-left: 16px; }

.chart__svg {
  display: block;
  width: 100%;
  height: 210px;
  overflow: visible;
}

.chart__grid line { stroke: rgba(255, 255, 255, .13); stroke-width: 1; }

.chart__ticks text {
  fill: #8d8d96;
  font-size: 9px;
  font-family: inherit;
  text-anchor: end;
}

/* opisy osi X mają być pod kreskami, nie przy nich — dlatego osobne wyrównanie */
.chart__ticks text:nth-child(n + 6) { text-anchor: middle; }

.chart__line { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.chart__line--stock { stroke: #8d8d96; stroke-dasharray: 5 4; }
.chart__line--tuned { stroke: var(--pink); }

.chart__axis {
  margin: 4px 0 0;
  color: #8d8d96;
  font-size: .625rem;
  text-align: center;
}

/* pionowy podpis osi Y — obrót wokół lewego górnego rogu, stąd translate */
.chart__axis--y {
  position: absolute;
  left: 0;
  top: 50%;
  margin: 0;
  transform: rotate(-90deg) translate(-50%, -100%);
  transform-origin: left top;
  white-space: nowrap;
}

.chart__stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.cstat {
  padding: 12px 13px;
  background: var(--ink-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

.cstat__label { margin: 0; color: #d3d3da; font-size: .6875rem; font-weight: 600; }

.cstat__row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0 0;
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.cstat__row b { color: var(--pink-text); font-weight: 800; }
.cstat .stat__arrow { width: 12px; height: 12px; color: #8d8d96; flex: none; }
.cstat__gain { margin: 5px 0 0; color: var(--pink-text); font-size: .8125rem; font-weight: 800; }

@media (min-width: 1000px) {
  .feat__inner { grid-template-columns: minmax(280px, 30%) minmax(0, 1fr) minmax(300px, 32%); gap: 20px; }
  .feat__media { align-self: stretch; }
}

/* ---------- dlaczego wracają (wariant listy wartości) ---------- */

.values--back { background: var(--surface); }
.values--back .values__list { gap: 16px; }
.values--back .value__name { font-size: .8125rem; font-weight: 700; }

@media (min-width: 900px) {
  .values--back .values__inner { grid-template-columns: minmax(200px, 24%) minmax(0, 1fr); }
  .values--back .values__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .values--back .value { padding: 6px 12px; }
}

/* =========================================================
   KONTRAST RÓŻU NA CIEMNYM TLE
   Sekcje o ciemnym tle podmieniają sam kolor różowego tekstu na jaśniejszy
   wariant. Reguły wyżej używają wszędzie var(--pink-text), więc wystarczy
   nadpisać zmienną na kontenerze — nie trzeba duplikować pojedynczych reguł.
   ========================================================= */

.chero,
.reviews,
.site-footer,
.what--dark,
.effects,
.ecard,
.ecard__gain,
.kmap,
.kshop,
.icard,
.workshop__panel,
.story__mission,
.wsgrid,
.warranty,
.feat,
.feat__chart,
.cstat {
  --pink-text: var(--pink-text-dark);
}

/* Jasne elementy WEWNĄTRZ ciemnych sekcji wracają do ciemniejszego różu — inaczej
   odziedziczyłyby jasny wariant po rodzicu i straciły kontrast. `.icard__table` to
   biała tabelka na ciemnej karcie wtryskiwacza; bez tego dawała 3,93:1. */
.warranty .wcard,
.feat .wcase,
.effects .card,
.icard__table {
  --pink-text: #da1856;
}

/* =========================================================
   STRONY TEKSTOWE (polityka prywatności)
   Wąska kolumna i większa interlinia — to dokument do czytania,
   nie sekcja sprzedażowa.
   ========================================================= */

.legal { padding-block: var(--section-y); background: var(--surface); }

.legal__head { max-width: 640px; margin-bottom: 34px; }
.legal__head .lead { margin-top: 16px; }

.legal__date {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: .8125rem;
}

.legal__body { max-width: 760px; }

.legal__body h2 {
  margin: 34px 0 12px;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.legal__body h2:first-child { margin-top: 0; }

.legal__body h3 {
  margin: 22px 0 8px;
  color: var(--pink-text);
  font-size: .9375rem;
  font-weight: 700;
}

.legal__body p,
.legal__body li {
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.75;
}

.legal__body p { margin: 0 0 12px; }

/* globalny reset zdejmuje punktory (ul { list-style: none }) — w dokumencie
   prawnym są potrzebne, bo wyliczenia to znacząca część treści */
.legal__body ul {
  margin: 0 0 12px;
  padding-left: 22px;
  list-style: disc;
}

.legal__body li::marker { color: var(--pink-text); }
.legal__body li { margin-bottom: 6px; }
.legal__body strong { color: var(--text); font-weight: 700; }

.legal__body a {
  color: var(--pink-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__body code {
  padding: 2px 6px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .8125rem;
}

/* Tabela podstaw prawnych — na telefonie zmienia się w listę bloków,
   bo dwie kolumny prawniczego tekstu przy 375 px są nieczytelne. */
.legal__table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: .875rem;
}

.legal__table th,
.legal__table td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.legal__table th {
  background: var(--surface-alt);
  color: var(--text);
  font-weight: 700;
}

.legal__table td { color: var(--text-muted); }

@media (max-width: 599px) {
  .legal__table thead { display: none; }
  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table td { display: block; width: 100%; }
  .legal__table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .legal__table td { border: 0; }
  .legal__table td:first-child {
    background: var(--surface-alt);
    color: var(--text);
    font-weight: 700;
  }
}

/* =========================================================
   BANER ZGODY NA STATYSTYKI
   ========================================================= */

.btn--sm { min-height: 38px; padding: 9px 18px; font-size: .8125rem; }

/* Przycisk, który ma wyglądać jak odnośnik. Musi być <button>, bo otwiera
   baner zamiast prowadzić pod adres — <a href="#"> byłby kłamstwem wobec
   czytnika ekranu i psułby nawigację klawiaturą. */
.linklike {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.linklike:hover { color: var(--pink-text); }

/* z-index 90: nad widgetem WhatsApp (80) i nagłówkiem (60), bo dopóki
   użytkownik nie zdecyduje, baner jest najważniejszym elementem strony.
   position: fixed nie wpływa na układ, więc nie psuje CLS. */
.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 14px var(--gutter);
  background: rgba(11, 11, 13, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
}

.consent-bar[hidden] { display: none; }

.consent-bar__inner {
  display: grid;
  gap: 12px;
  max-width: var(--container);
  margin-inline: auto;
}

.consent-bar__text {
  margin: 0;
  color: #c9c9d2;
  font-size: .8125rem;
  line-height: 1.6;
}

.consent-bar__text a {
  color: var(--pink-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.consent-bar__actions { display: flex; gap: 10px; }
.consent-bar__actions .btn { flex: 1 1 auto; justify-content: center; }

/* Widget WhatsApp siedzi w prawym dolnym rogu — baner by go przykrył, więc
   na czas decyzji podnosimy go ponad pasek. Klasa na <body>, a nie selektor
   sąsiadujący: baner dopinamy na końcu <body>, czyli PO widgecie, przez co
   `~` nigdy by go nie złapał. */
.has-consent-bar .wa { bottom: calc(var(--consent-h, 96px) + 18px); }

@media (min-width: 768px) {
  .consent-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
  }
  .consent-bar__actions .btn { flex: 0 0 auto; }
}

/* =========================================================
   PRZED I PO — zdjęcia z realnej regeneracji
   ========================================================= */

.ba { padding-block: var(--section-y); background: var(--surface-alt); }

.ba__head { max-width: 580px; margin-bottom: 26px; }
.ba__head .lead { margin-top: 16px; }

/* Układ blokowy, nie dwukolumnowy. Film jest pionowy (nagranie telefonem),
   więc w bocznej kolumnie rozciągał ją na całą wysokość sekcji i obok zdjęć
   zostawał pusty pas. Tutaj zdjęcia dostają pełną szerokość kontenera,
   a film schodzi niżej jako wąski dopisek z opisem obok. */
.ba__clip {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.ba__video { max-width: 184px; }

.ba__video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--ink-900);
  border-radius: var(--radius-lg);
}

.ba__cliptitle {
  margin: 0;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.4;
}

.ba__clipnote {
  margin: 8px 0 0;
  max-width: 520px;
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.65;
}

.ba__pair {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.bacard { margin: 0; }

.bacard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.bacard figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.bacard__tag {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: #e2e2e7;
  color: #3f3f47;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bacard__tag--after { background: var(--pink); color: #fff; }

@media (min-width: 640px) {
  .ba__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .ba__clip { grid-template-columns: 184px minmax(0, 1fr); gap: 22px; }
}

/* ---------- redukcja ruchu ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}