/* =========================================================
   UROZMAICENIE — mocniejszy rytm sekcji, akcentowe karty,
   subtelne cienie. Blok zbiorczy, łatwy do dostrojenia.
   ========================================================= */
:root {
  --shadow-card: 0 1px 0 rgba(52, 58, 64, 0.04), 0 8px 18px -14px rgba(52, 58, 64, 0.3);
}

/* 1 · Wyraźniejszy szary na sekcjach „tint" (mocniejszy przeplot biel/szarość) */
.section--tint {
  background:
    linear-gradient(90deg, transparent 0 calc(100% - clamp(56px, 9vw, 120px)), rgba(251, 43, 20, 0.10) calc(100% - clamp(56px, 9vw, 120px)) 100%),
    #e5e7ec;
}

/* 2 · Akcentowe kafle w pasku zaufania (ciemny + czerwony, po przekątnej) */
.trust-tile:nth-child(3) { background: var(--ink); }
.trust-tile:nth-child(4) { background: var(--red); }
.trust-tile:nth-child(3) .trust-value,
.trust-tile:nth-child(4) .trust-value { color: #fff; }
.trust-tile:nth-child(3) .trust-label { color: rgba(255, 255, 255, 0.7); }
.trust-tile:nth-child(4) .trust-label { color: rgba(255, 255, 255, 0.92); }

/* Kroki „jak to działa" — czerwone karty z odstępami, bez ramek, biały tekst */
.steps {
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
.step {
  border: 0;
  background: var(--red);
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  justify-content: flex-start;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  min-height: clamp(190px, 20vw, 260px);
  transition: background 200ms var(--ease);
}
.step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.step-head .step-num { margin: 0; color: rgba(255, 255, 255, 0.55); }
.step-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.step-icon svg { width: 26px; height: 26px; }
.step-body { display: flex; flex-direction: column; gap: 0.55rem; }
.step h3 { color: #fff; }
.step p { color: rgba(255, 255, 255, 0.85); }
.step:hover { background: var(--red-dark); }
.step:hover .step-num { color: rgba(255, 255, 255, 0.8); }
.step:hover .step-icon { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* 3 · Subtelne cienie — karty i bloki odrywają się od tła */
.about-copy,
.trust-grid,
.cat-index,
.offer-panels,
.branch,
.brands-grid,
.faq-list,
.contact-specs,
.contact-form {
  box-shadow: var(--shadow-card);
}

/* =========================================================
   BEZ RAMEK — zdjęte obramowania kontenerów, kart i siatek.
   Przyciski i pola formularza zachowują ramki (funkcjonalne).
   Karty pozostają czytelne dzięki odstępom i cieniom.
   ========================================================= */
.topbar, .site-header, .ticker,
.section--tint, .section--dark,
.kicker, .sec-intro, .brand-quote,
.about-copy, .about-photo-main, .about-photo-side,
.trust-grid, .trust-tile,
.cat-index, .cat-row, .cat-icon,
.offer-panels, .offer-panel,
.branch, .branch-grid, .branch .img-slot--wide, .branch-specs, .branch-specs > div,
.brands-grid, .brands-grid li,
.faq-list, .faq-item,
.contact-specs, .contact-specs > div,
.contact-form,
.spec-list, .spec-list li,
.hero, .nav a, .lang-switch,
.site-footer, .footer-wordmark, .footer-bottom, .footer-fb {
  border: 0 !important;
}
.about-photo-side { outline: 0 !important; }
.about-media::before,
.site-header::after { display: none !important; }

/* Siatki dzielone dotąd liniami — teraz odstępy zamiast kresek */
.trust-grid, .cat-index, .brands-grid {
  background: transparent !important;
  gap: clamp(0.5rem, 1.1vw, 1rem);
}
.branch-grid {
  background: transparent !important;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.faq-list { background: transparent !important; }

/* Karty, które straciły kreski, dostają cień żeby się nie zlewały z tłem */
.trust-tile, .cat-row, .brands-grid li {
  box-shadow: var(--shadow-card);
}
.faq-item {
  background: #fff;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.6rem;
}